From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 19:16:45 -0400 Subject: load more on media drawer and some other stuff --- public/assets/javascripts/ui/editor/MediaViewer.js | 33 +++++++++++++++++----- 1 file changed, 26 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index c18fb49..2e76bec 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -4,23 +4,29 @@ var MediaViewer = ModalView.extend({ destroyAction: "/api/media/destroy", usesFileUpload: true, loaded: false, - + perPage: 12, + offset: 0, + events: { 'mousedown': "stopPropagation", 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", + 'click .viewMore': "load", }, initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent this.$myMedia = this.$(".myMedia") + this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") this.$foundMedia = this.$(".foundMedia") + this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") + this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, @@ -55,7 +61,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", this.populate.bind(this)) + $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) }, loadTrending: function(){ @@ -85,7 +91,7 @@ var MediaViewer = ModalView.extend({ width: img.naturalWidth, height: img.naturalHeight, } - this.add(media, this.$foundMedia) + this.add(media, this.$foundMediaContainer) }.bind(this) img.src = url if (img.complete && ! loaded) { img.onload() } @@ -100,22 +106,34 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ - this.loaded = true if (data && data.length) { + if (data.length < this.perPage) { + this.$viewMore.hide() + } data.forEach(function(media){ - this.add(media, this.$myMedia) + this.add(media, this.$myMediaContainer) + this.offset += 1 }.bind(this)) this.$noMedia.hide() this.$deleteMedia.show() } else { + this.$viewMore.hide() this.$noMedia.show() this.$deleteMedia.hide() } + this.loaded = true this.__super__.show.call(this) }, - add: function(media, $container){ + addUploadedMedia: function(media){ + this.parent.mediaViewer.$deleteMedia.show() + this.parent.mediaViewer.$noMedia.hide() + this.add(media, this.$myMedia, true) // prepend + this.offset += 1 + }, + + add: function(media, $container, prepend){ var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -142,7 +160,8 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + if (prepend) $container.prepend($span) + else $container.append($span) }, deleteIsArmed: false, -- cgit v1.2.3-70-g09d2 From 1b152e66ad8d7aa1c5511152991e648308f8918b Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:00:59 -0400 Subject: fixed-position close box fixed-position close box &c --- public/assets/javascripts/mx/extensions/mx.movements.js | 5 ++++- public/assets/javascripts/ui/editor/MediaViewer.js | 11 +++++++++-- public/assets/javascripts/ui/lib/ModalView.js | 8 ++++++++ public/assets/stylesheets/app.css | 16 +++++++++++++++- server/lib/api/media.js | 1 - views/controls/editor/media-drawer.ejs | 4 ++-- 6 files changed, 38 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 268a1c7..5ba5d69 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -127,9 +127,12 @@ MX.Movements = function (cam) { Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } - else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() } + else if (app.controller.lightControl.$el.hasClass('active')) { + app.controller.lightControl.hide() + } else { app.controller.toolbar.toggleMap() } diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2e76bec..10819af 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({ loaded: false, perPage: 12, offset: 0, + fixedClose: true, events: { 'mousedown': "stopPropagation", @@ -106,6 +107,7 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ + var scrollTop = this.loaded ? $('.myMedia .container').height() : 0 if (data && data.length) { if (data.length < this.perPage) { this.$viewMore.hide() @@ -122,8 +124,13 @@ var MediaViewer = ModalView.extend({ this.$noMedia.show() this.$deleteMedia.hide() } - this.loaded = true - this.__super__.show.call(this) + if (this.loaded) { + this.$el.delay(300).animate({ scrollTop: scrollTop }, 200) + } + else { + this.loaded = true + this.__super__.show.call(this) + } }, addUploadedMedia: function(media){ diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index d9b518a..1c41861 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -18,6 +18,10 @@ var ModalView = View.extend({ if (! this.usesFileUpload) { $(".fileUpload").removeClass("active") } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } this.$el.addClass("active") $("body").addClass("noOverflow") @@ -25,6 +29,10 @@ var ModalView = View.extend({ hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } this.$el.removeClass("active"); $("body").removeClass("noOverflow"); }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eec671a..038b0c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2169,7 +2169,21 @@ form li textarea { border: 1px solid black; box-shadow: -3px 4px black; line-height: 75px; - + text-align: center; +} +#fixed_close { + display: none; + transform: translateY(-200px) translateZ(0); +} +#fixed_close.active { + animation: visibility 0.2s; + animation-fill-mode: forwards; + display: block; +} +@keyframes visibility { + 100% { + transform: translateY(0px) translateZ(0); + } } diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 643ba92..4e2fad5 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -16,7 +16,6 @@ var media = { if (req.query.tag) { query.tag = req.query.tag } - console.log(offset, limit) Media.find(query) .sort({'created_at': -1}) .skip(offset) diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 5cc659e..7996f84 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -3,9 +3,9 @@ -
- X +X +

Your Media – Found Media


-- cgit v1.2.3-70-g09d2 From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:04:00 -0400 Subject: cursor that follows mouse --- .../javascripts/mx/extensions/mx.movements.js | 14 ++++---- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/rectangles/engine/rooms/mover.js | 3 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/HelpCursor.js | 38 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 33 ++++++++++++++----- public/assets/stylesheets/app.css | 18 +++++++--- views/controls/editor/media-drawer.ejs | 13 +++++++- views/controls/editor/settings.ejs | 2 ++ views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 5ba5d69..b158625 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -226,12 +226,14 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - cam.rotationY += deltaX / 20 - - pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 - pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 - - app.tube("move", pos) + if (e.shiftKey) { + cam.rotationY -= deltaY / 150 + } + else { + pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 + pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 + app.tube("move", pos) + } }, update: function () { diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 119a659..f2348f0 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -135,7 +135,7 @@ } base.luminance = function(rgb){ - rgb = rgb || Walls.colors.wall + rgb = rgb || Walls.colors.ceiling var rgb_max = Math.max.apply(0, rgb) var rgb_min = Math.min.apply(255, rgb) return (rgb_max + rgb_min ) / 2 diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index a2d2223..dd63db2 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -11,7 +11,8 @@ Rooms.mover = new function(){ base.bind = function(){ app.on("move", base.update) - keys.on("backslash", function(){ + keys.on("backslash", function(e){ + if ( ! (e.ctrlKey || e.metaKey) ) return base.noclip = ! base.noclip base.room = null app.movements.gravity( ! base.noclip ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index ccd6c63..05d1bec 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -9,6 +9,7 @@ var EditorView = View.extend({ }, initialize: function(){ + this.cursor = new HelpCursor ({ parent: this }) this.toolbar = new EditorToolbar ({ parent: this }) this.settings = new EditorSettings ({ parent: this }) this.info = new BuilderInfo ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..842e871 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,38 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + messages: { + start: "Welcome to Vvalls!", + move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + }, + shown: {}, + + initialize: function(){ + $(window).mousemove(function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }.bind(this)) + this.show("start") + }, + + show: function(name){ + if (name) this.showMessage(name) + this.$el.show() + }, + + hide: function(){ + this.$el.hide() + }, + + showMessage: function(name){ + if (+(this.shown[name] || 0) < 2) { + this.$el.html(this.messages[name]) + this.shown[name] = (+this.shown[name] || 0) + 1 + } + else { + this.$el.html("") + } + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 10819af..b270be5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({ initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent + this.$myMedia = this.$(".myMedia") this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") + this.$foundMedia = this.$(".foundMedia") this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") + + this.$wallpaperMedia = this.$(".wallpaperMedia") + this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container") + this.$wallpaperToggle = this.$(".wallpaperToggle") + this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, + wallpaperToggle: function(){ + this.$wallpaperMedia.addClass("active") + this.$foundMedia.addClass("inactive") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") + }, + foundToggle: function(){ - this.$foundMedia.addClass("active"); - this.$myMedia.addClass("inactive"); - this.$("a").removeClass("active"); - this.$foundToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.addClass("active") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") }, userToggle: function(){ - this.$foundMedia.removeClass("active"); - this.$myMedia.removeClass("inactive"); - this.$("a").removeClass("active"); - this.$userToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.removeClass("active") + this.$myMedia.removeClass("inactive") + this.$("a").removeClass("active") + this.$userToggle.addClass("active") }, show: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index cf98170..0140dc6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -901,7 +901,7 @@ border-left: 1px solid black; .face { background-color: #fff; - transition: 0.1s background-color ease; + transition: 0.1s background-color ease, 0.05s background-color ease; } .front { background-color: #fff; } .back { background-color: #fff; } @@ -1271,7 +1271,7 @@ border-left: 1px solid black; .noMedia { margin: 40px; } -.foundMedia { +.foundMedia, .wallpaperMedia { position:absolute; top:0; left:0; @@ -1282,8 +1282,7 @@ border-left: 1px solid black; padding-top:40px; width: 100%; } - -.foundMedia.active { +.foundMedia.active, .wallpaperMedia.active { -webkit-transform: translateX(0%); transform: translateX(0%); } @@ -1718,6 +1717,17 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; } +#helpCursor { + position: fixed; + max-width: 200px; + font-size: 13px; + color: black; + background: #fff; + margin: 8px 0 0 8px; + padding: 4px; + font-weight: 500; + z-index: 22; +} .settings.info { right: auto; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 7996f84..d1e2c99 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -6,7 +6,13 @@ X
-

Your Media – Found Media


+

+ Your Media + – Found Media + +


@@ -29,4 +35,9 @@
+ +
+ +
+
\ No newline at end of file diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 7c40a75..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,3 +1,5 @@ + +

Room Settings

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..05f4b58 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:56:50 -0400 Subject: more help text --- .../assets/javascripts/ui/editor/EditorSettings.js | 3 ++ public/assets/javascripts/ui/editor/HelpCursor.js | 6 ++-- .../assets/javascripts/ui/editor/LightControl.js | 32 +++++++++++++++++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 2 ++ public/assets/javascripts/ui/editor/Presets.js | 24 +--------------- .../javascripts/ui/editor/WallpaperPicker.js | 1 + public/assets/stylesheets/app.css | 7 +++-- views/controls/builder/info.ejs | 2 +- views/controls/editor/light-control.ejs | 1 - 9 files changed, 43 insertions(+), 35 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index ac361a7..e47739b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.show("settings") + } }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index b2f411d..4a6e616 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -7,8 +7,8 @@ var HelpCursor = View.extend({ media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", presets: "These presets will affect on all the walls. Click some of them to see the walls change.", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", - colors: "", - settings: "This is where you publish your project.", + colors: "Use these colors to change the color of the walls, floor, and ceiling.", + settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, shown: {}, @@ -21,7 +21,7 @@ var HelpCursor = View.extend({ }, show: function(name){ - if (name) this.showMessage(name) + this.showMessage(name) this.$el.show() }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 34a5a51..bb4454a 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -5,14 +5,28 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", "click .color-swatches span": "select", - "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", - "input #outline-hue": "updateShadow", - "input #wall-hue": "updateShadow", }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 180, 180) this.$("#color-picker").append( this.colorPicker.canvas ) @@ -27,6 +41,15 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + }, modes: [ "wall", "outline", "floor", "ceiling" ], @@ -54,6 +77,7 @@ var LightControl = View.extend({ }, show: function(){ + this.parent.cursor.show("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b270be5..df77fb1 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.show("media") this.__super__.show.call(this) } }, @@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true + this.parent.cursor.show("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 1e70aa2..6222e33 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -7,22 +7,6 @@ var Presets = View.extend({ "click .swatches span": "selectColor", }, - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - presets: { wireframe: { wall: [255,255,255], @@ -52,13 +36,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) }, toggle: function(state){ @@ -66,6 +43,7 @@ var Presets = View.extend({ }, show: function(){ + this.parent.cursor.show("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..541ab31 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { + this.parent.cursor.show("wallpaper") this.load() } else { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0140dc6..250ae67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1485,10 +1485,11 @@ border-left: 1px solid black; padding-bottom: 6px; } -#presets .colors { +.vvbox .colors { + max-width: 170px; margin-bottom: 5px; } -#presets .colors span { +.vvbox .colors span { display: inline-block; font-size: 0; width: 20px; @@ -1498,7 +1499,7 @@ border-left: 1px solid black; cursor: pointer; transition: transform 0.2s; } -#presets .colors span:hover { +.vvbox .colors span:hover { transform: translateX(3px) translateY(-3px); } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 54bb38e..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -3,7 +3,7 @@
Click and drag to make a new room. - Click a room to select it. + Click a room to select, move or resize it.

Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4604a7a..99d68f5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,7 +1,6 @@

Edit Room Colors

-

Preset Colors

-- cgit v1.2.3-70-g09d2 From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 17:09:45 -0400 Subject: help messages on button, starting drag stuff --- public/assets/javascripts/app.js | 4 -- .../javascripts/mx/extensions/mx.movements.js | 12 ++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 54 ++++++++++++++-------- .../assets/javascripts/ui/editor/LightControl.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/editor/Presets.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 2 +- 8 files changed, 52 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 98e1820..f8372cd 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -18,10 +18,6 @@ else { new WOW().init(); -$('#help-button').click( function(){ - $('body').chardinJs('start') -}); - var scene, cam, map; var app = new function(){} diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index b158625..40e786d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -129,9 +129,19 @@ MX.Movements = function (cam) { } else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() + $(".inuse").removeClass("inuse") } else if (app.controller.lightControl.$el.hasClass('active')) { app.controller.lightControl.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.wallpaperPicker.$el.hasClass('active')) { + app.controller.wallpaperPicker.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.presets.$el.hasClass('active')) { + app.controller.presets.hide() + $(".inuse").removeClass("inuse") } else { app.controller.toolbar.toggleMap() @@ -242,7 +252,7 @@ MX.Movements = function (cam) { var ry = cam.rotationY var s = creeping ? scale * creepFactor : scale - var vrrrr = creeping ? vr * creepFactor * 5 : vr + var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5 var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown vx = vz = 0 diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e47739b..c0c140f 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) if (state) { - this.parent.cursor.show("settings") + this.parent.cursor.message("settings") } }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 4a6e616..8bfaef8 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -2,6 +2,8 @@ var HelpCursor = View.extend({ el: "#helpCursor", + active: false, + messages: { start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", @@ -10,33 +12,47 @@ var HelpCursor = View.extend({ colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, - shown: {}, initialize: function(){ - $(window).mousemove(function(e){ - this.el.style.left = e.pageX + "px" - this.el.style.top = e.pageY + "px" - }.bind(this)) - this.show("start") + $('#help-button').click(this.toggle.bind(this)); }, - - show: function(name){ - this.showMessage(name) + + toggle: function(){ + this.active ? this.stop() : this.start() + }, + + start: function(){ + if (this.active) return + this.active = true + this.message('start') this.$el.show() +// $('body').chardinJs('start') +// $(window).one("click", function(){ +// $('body').chardinJs('stop') +// }) + this.move({ pageX: -1000, pageY: -10000 }) + this.moveFn = this.move.bind(this) + document.addEventListener("mousemove", this.moveFn) }, - - hide: function(){ + + stop: function(){ + this.active = false this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + move: function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }, + + show: function(name){ + this.showMessage(name) }, - showMessage: function(name){ - if (+(this.shown[name] || 0) < 2) { - this.$el.html(this.messages[name]) - this.shown[name] = (+this.shown[name] || 0) + 1 - } - else { - this.$el.html("") - } + message: function(name){ + if (! this.active) return + this.$el.html(this.messages[name]) }, }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index bb4454a..10f8d2c 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -77,7 +77,7 @@ var LightControl = View.extend({ }, show: function(){ - this.parent.cursor.show("colors") + this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index df77fb1..e196e41 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 6222e33..35b5b58 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -43,7 +43,7 @@ var Presets = View.extend({ }, show: function(){ - this.parent.cursor.show("presets") + this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 9583376..ad30ad8 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { - this.parent.cursor.show("wallpaper") + this.parent.cursor.message("wallpaper") this.load() } else { -- cgit v1.2.3-70-g09d2 From 9ae4f45f24e3e79aeb32e0a128ee798381b80569 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 15 Oct 2014 22:35:48 -0400 Subject: more help text --- public/assets/javascripts/defaults.js | 2 +- public/assets/javascripts/rectangles/engine/rooms/builder.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 8 +++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 5 ++++- public/assets/javascripts/ui/editor/Presets.js | 4 ++-- public/assets/stylesheets/app.css | 2 ++ 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 9ba0b4d..12aed62 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -3,7 +3,7 @@ app.defaults = { units: app.units = "ft", footResolution: 36, meterResolution: 100, - wallOpacity: 0.95, + wallOpacity: 0.98, outlineWidth: 2, colors: { wall: [255,255,255], diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 33333fb..c95734b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -280,7 +280,7 @@ return el } this.make_wall = function (klass) { - // klass += ".backface-hidden" + klass += ".backface-hidden" var el = new MX.Object3D(".face" + (klass || "")) el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1 el.z = el.y = el.x = 0 diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 8bfaef8..9b6807e 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -5,9 +5,11 @@ var HelpCursor = View.extend({ active: false, messages: { - start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", - media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", - presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + start: "Welcome to Vvalls! Click one of the tools at right to learn about it.", + media: "This is where you pick media to go on the walls. You can upload media and paste links.", + addmedia: "Great, now click a wall to place this image.", + resize: "Drag the image to position it, or use the dots to resize.", + presets: "These are some basic presets to get you started. Click em! :-)", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e196e41..8cae4a4 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -77,6 +77,7 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.cursor.message('start') }, load: function(){ @@ -232,7 +233,8 @@ var MediaViewer = ModalView.extend({ } this.hide() - + this.parent.cursor.message('addmedia') + var $ants = $('.ants'); var $floatingImg = $('.floatingImg'); @@ -267,6 +269,7 @@ var MediaViewer = ModalView.extend({ $(window).off('mousedown', _hideCursor) app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') + app.controller.cursor.message('resize') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 35b5b58..4edc957 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -39,11 +39,11 @@ var Presets = View.extend({ }, toggle: function(state){ - this.$el.toggleClass("active", state); + this.$el.toggleClass("active", state) + this.parent.cursor.message(state ? "presets" : "start") }, show: function(){ - this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 250ae67..1ab1198 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1676,6 +1676,7 @@ input[type="range"]::-webkit-slider-thumb { cursor:pointer; border-bottom: 1px transparent solid; } +.presets span:hover, .presets span.active { text-decoration: underline; } @@ -1728,6 +1729,7 @@ input[type="range"]::-webkit-slider-thumb { padding: 4px; font-weight: 500; z-index: 22; + display: none; } .settings.info { -- cgit v1.2.3-70-g09d2