From f73f5c517d08581d8d1c687a42e9ef9e5598662a Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Sun, 12 Oct 2014 11:43:41 -0400 Subject: undo button on toolbar --- public/assets/javascripts/ui/editor/EditorToolbar.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 8a707ec..0b1da0b 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -4,6 +4,7 @@ var EditorToolbar = View.extend({ events: { "mousedown": 'stopPropagation', + "click [data-role='undo']": 'undo', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', @@ -18,6 +19,17 @@ var EditorToolbar = View.extend({ this.parent = opt.parent }, + undo: function(e){ + if (e.shiftKey) { + var canRedo = UndoStack.redo() + console.log("can redo", canRedo) + } + else { + var canUndo = UndoStack.undo() + console.log("can undo", canUndo) + } + }, + toggleMap: function(){ var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") this.resetControls() -- cgit v1.2.3-70-g09d2 From ed053b1e03f49c2ce72ce206d8dc38c6e703d24e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 13 Oct 2014 18:11:54 -0400 Subject: startpoint stuff --- .../assets/javascripts/ui/editor/EditorSettings.js | 27 ++++++++++++++++++-- public/assets/stylesheets/app.css | 29 +++++++++++++++------- server/lib/api/projects.js | 4 ++- server/lib/schemas/Project.js | 1 + views/controls/editor/settings.ejs | 11 +++++--- 5 files changed, 56 insertions(+), 16 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..0c68de5 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -15,6 +15,10 @@ var EditorSettings = FormView.extend({ "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', "click [data-role='destroy-project']": 'destroy', + "click #startText": "setStartPosition", + "click #moveText": "confirmStartPosition", + "click #confirmText": "setStartPosition", + "click #goText": "goToStartPosition", }, initialize: function(opt){ @@ -26,6 +30,7 @@ var EditorSettings = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") this.$privacy = this.$("[name=privacy]") + this.$startPoint = this.$("#startpoint") }, load: function(data){ @@ -33,7 +38,11 @@ var EditorSettings = FormView.extend({ this.parent.data = data data.rooms && Rooms.deserialize(data.rooms, data.walls) - data.startPosition && scene.camera.move(data.startPosition) + if (data.startPosition) { + scene.camera.move(data.startPosition) + this.startPosition = data.startPosition + this.$startPoint.addClass("confirmed") + } if (data.colors && data.colors.wall) { this.parent.lightControl.load(data.colors) @@ -141,6 +150,19 @@ var EditorSettings = FormView.extend({ ErrorModal.alert($errors) }, + startPosition: null, + setStartPosition: function(){ + this.$startPoint.addClass("active").removeClass("confirmed") + }, + confirmStartPosition: function(){ + this.$startPoint.removeClass("active").addClass("confirmed") + this.startPosition = app.position(scene.camera) + }, + goToStartPosition: function(){ + if (! this.startPosition) return + scene.camera.move(this.startPosition) + }, + serialize: function(){ var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) @@ -152,7 +174,8 @@ var EditorSettings = FormView.extend({ fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) fd.append( "media", JSON.stringify( Scenery.serialize() ) ) - fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) + fd.append( "startPosition", JSON.stringify( this.startPosition || false ) ) + fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) ) if (this.thumbnailIsStale()) { var thumbnail = map.draw.render() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 849c994..6d96f97 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1722,7 +1722,7 @@ input[type="range"]::-webkit-slider-thumb { .modalLink { text-decoration: none; } -.modalLink:hover { +.modalLink:hover span { text-decoration: underline; } @@ -1736,30 +1736,41 @@ input[type="range"]::-webkit-slider-thumb { opacity:0.6; } } -#startpoint.active #moveText{ + +#moveText, +#confirmText { + display: none; +} +#startpoint.active #moveText { + display:inline-block; -webkit-animation:fade 0.5s infinite; animation:fade 0.5s infinite; } -#moveText{ - display:none; +#startpoint #goText, +#startpoint.active #startText, +#startpoint.active #goText, +#startpoint.confirmed #startText { + display: none; } -#moveText.show { - display:inline-block; +#startpoint.confirmed #confirmText { + display: inline-block; } -#startText.hide { - display:none; +#startpoint.confirmed #goText { + display: inline-block; } -#startpoint.active:after { +#moveText .done { content: "done"; background: black; color: white; padding: 2px; font-weight: 900; margin-left: 5px; + text-decoration: none !important; } #startpoint.active:hover { text-decoration:none; } + .settings input[type="text"] { border: 1px solid #000; font-size: 15px; diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 47e0458..f699622 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -41,6 +41,7 @@ var projects = { data.media = JSON.parse(data.media) data.colors = JSON.parse(data.colors) data.startPosition = JSON.parse(data.startPosition) + data.lastPosition = JSON.parse(data.lastPosition) data.created_at = new Date () upload.put("projects", req.files.thumbnail, { @@ -102,7 +103,8 @@ var projects = { doc.walls = JSON.parse(data.walls) doc.colors = JSON.parse(data.colors) doc.media = JSON.parse(data.media) - doc.startPosition = JSON.parse(data.startPosition) + doc.startPosition = JSON.parse(data.startPosition) + doc.lastPosition = JSON.parse(data.lastPosition) doc.save(function(err, doc){ if (err || ! doc) { return res.json({ error: err }) } diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index dd50da6..d0c4bbc 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -32,6 +32,7 @@ var ProjectSchema = new mongoose.Schema({ media: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, + lastPosition: mongoose.Schema.Types.Mixed, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 5b3b553..7c40a75 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -3,11 +3,14 @@ -
- +
+ - Select Startpoint - Move to Desired Point + Set Startpoint + Move to Desired Point done + Startpoint Confirmed + + (go there)
-- cgit v1.2.3-70-g09d2 From 32f5f24b8b09998a03c88f786507ba4d58397fc7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 13 Oct 2014 18:16:35 -0400 Subject: toggling map --- public/assets/javascripts/rectangles/engine/map/_map.js | 4 ++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 99ede82..3a47dab 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -66,8 +66,8 @@ var Map = function(opt){ canvas.height = base.dimensions.b = window.innerHeight } - base.toggle = function(){ - $(base.el).toggle() + base.toggle = function(state){ + $(base.el).toggle(state) } } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 0b1da0b..9837304 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -30,9 +30,11 @@ var EditorToolbar = View.extend({ } }, - toggleMap: function(){ - var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") - this.resetControls() + toggleMap: function(state){ + if (typeof state != "boolean") { + state = ! $("[data-role='toggle-map-view']").hasClass("inuse") + this.resetControls() + } $("[data-role='toggle-map-view']").toggleClass("inuse", state) map.toggle(state) $("#minimap").toggleClass("hide", state) @@ -41,6 +43,7 @@ var EditorToolbar = View.extend({ toggleSettings: function(){ // this.resetMode() + this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() this.parent.lightControl.hide() @@ -54,6 +57,7 @@ var EditorToolbar = View.extend({ this.parent.mediaUpload.show() this.resetMode() this.resetControls() + this.toggleMap(false) }, resetMode: function(){ @@ -67,6 +71,7 @@ var EditorToolbar = View.extend({ resetControls: function(){ $(".inuse").removeClass("inuse") + this.toggleMap(false) this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() @@ -110,6 +115,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.wallpaperPicker.toggle(state) }, @@ -122,6 +128,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.lightControl.toggle(state) }, @@ -134,6 +141,7 @@ var EditorToolbar = View.extend({ this.parent.lightControl.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.textEditor.toggle(state) }, @@ -146,6 +154,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.lightControl.hide() + this.toggleMap(false) this.parent.presets.toggle(state) }, }) -- cgit v1.2.3-70-g09d2 From 40c85ef5f19139ae5b2cf3e3c0f4878f7acaeae4 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 10:44:33 -0400 Subject: fixing tests --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 2 ++ public/assets/javascripts/rectangles/engine/rooms/_rooms.js | 2 +- public/assets/javascripts/ui/editor/EditorToolbar.js | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 3c3347b..8f4f594 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -161,6 +161,8 @@ Map.UI.Editor = function(map){ cursor.y.abs().quantize(1) var room = Rooms.add_with_rect( cursor ) + Rooms.rebuild() + UndoStack.push({ type: "create-room", undo: { id: room.id }, diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index b901a25..5686aba 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -13,6 +13,7 @@ vec2 = require('../../models/vec2') Rect = require('../../models/rect') Room = require('../../models/room') + Walls = require('./_walls') UidGenerator = require('../../util/uid') sort = require('../../util/sort') _ = require('lodash') @@ -59,7 +60,6 @@ height: 500 }) base.add(room) - Rooms.rebuild() return room } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 0b1da0b..93cc998 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -9,7 +9,6 @@ var EditorToolbar = View.extend({ "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', -// "click [data-role='destroy-media']": 'destroyMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', -- cgit v1.2.3-70-g09d2 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 --- .../javascripts/mx/extensions/mx.movements.js | 3 +- .../javascripts/rectangles/engine/map/draw.js | 6 +-- .../javascripts/rectangles/engine/rooms/_walls.js | 19 +++++---- .../javascripts/rectangles/engine/rooms/mover.js | 2 + .../javascripts/rectangles/util/constants.js | 3 +- public/assets/javascripts/rectangles/util/wheel.js | 6 ++- .../assets/javascripts/ui/builder/BuilderInfo.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 1 + public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/MediaUpload.js | 4 +- public/assets/javascripts/ui/editor/MediaViewer.js | 33 +++++++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 5 +-- public/assets/stylesheets/app.css | 49 +++++++++++++--------- server/lib/api/media.js | 13 ++++-- server/lib/api/projects.js | 2 + server/lib/schemas/Project.js | 1 + views/controls/editor/media-drawer.ejs | 28 +++++++------ 17 files changed, 116 insertions(+), 62 deletions(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 2b7e671..268a1c7 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -223,8 +223,7 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - console.log(deltaX != 0 && deltaY != 0) - cam.rotationY += -deltaX / 20 + 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 diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 7eb6e7c..eceda3c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -177,11 +177,11 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(200) - for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) { + var quant = sides.clone().quantize(MAP_GRID_SIZE) + for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { line(x, sides.y.a, x, sides.y.b) } - for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) { + for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 0da3b9a..119a659 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -134,19 +134,24 @@ }) } + base.luminance = function(rgb){ + rgb = rgb || Walls.colors.wall + var rgb_max = Math.max.apply(0, rgb) + var rgb_min = Math.min.apply(255, rgb) + return (rgb_max + rgb_min ) / 2 + } + base.setColor = { wall: function(rgb){ var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) var rgbColor = rgb_string(rgb) + + if (Rooms.mover.room) { + $("#header").toggleClass("black", base.luminance() < 100) + $("body").css("background-color", rgbColor) + } - var rgb_max = Math.max.apply(0, rgb) - var rgb_min = Math.min.apply(255, rgb) - var luminance = (rgb_max + rgb_min ) / 2 - - $("#header").toggleClass("black", luminance < 128) - $("body").css("background-color", rgbColor) - Walls.colors.wall = rgb Walls.list.forEach(function(wall){ wall.outline(rgbaColor, null) diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..a2d2223 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -43,6 +43,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") + $("#header").removeClass("black") $("body").css("background-color", "transparent") base.room = null } @@ -59,6 +60,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] + $("#header").toggleClass("black", Walls.luminance() < 100) $("body").css("background-color", rgb_string( Walls.colors.wall )) app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a38325e..3bc314c 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -21,7 +21,8 @@ var height_min = 200, side_max = 5000, resize_margin = 8, cursor_amp = 1.5, - DEFAULT_PICTURE_WIDTH = 400 + DEFAULT_PICTURE_WIDTH = 350, + MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3 diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 64aaa64..712d470 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -38,7 +38,11 @@ function wheel (opt) { var deltaX = 0, deltaY = 0; // WebKit - if ( event.wheelDeltaY ) { + if ( event.deltaY ) { + deltaY -= event.deltaY * opt.ratio + deltaX -= event.deltaX * opt.ratio + } + else if ( event.wheelDeltaY ) { deltaY -= event.wheelDeltaY * opt.ratio deltaX -= event.wheelDeltaX * opt.ratio } diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 196eca6..67834e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -34,7 +34,7 @@ var BuilderInfo = View.extend({ }, load: function(data){ - this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) + this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..e2cb53c 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -148,6 +148,7 @@ var EditorSettings = FormView.extend({ fd.append( "name", this.$name.val() ) fd.append( "description", this.$description.val() ) fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) + fd.append( "viewHeight", window.viewHeight ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6aff601..ccd6c63 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -41,6 +41,7 @@ var EditorView = View.extend({ $("#map").hide() this.settings.load(data) + this.info.load(data) }, readyLayout: function(data){ diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index fddfefc..9799f99 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) - this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia) - this.parent.mediaViewer.$deleteMedia.show() - this.parent.mediaViewer.$noMedia.hide() + this.parent.mediaViewer.addUploadedMedia(media) }, beforeUpload: function(){ 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, diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c8879b3..b559ba5 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -28,16 +28,15 @@ var TextEditor = FormView.extend({ }, toggle: function(state){ - $("#keyhint").fadeOut(200) - this.$el.toggleClass("active", state) if (state) { + $("#keyhint").fadeOut(200) Scenery.nextMedia = { type: 'text', width: 600, height: 450, scale: 0.5, - font: { family: 'Lato', size: 12, align: 'left' }, + font: { family: 'Lato', size: 24, align: 'left', color: "#000" }, } this.createMode(true) } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 849c994..eec671a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -414,6 +414,17 @@ iframe.embed { border-top: 1px solid black; } +.mediaDrawer .viewMore { + clear: both; + float: none; + text-decoration: none; + font-size: 22px; + display: block; + text-align: center; + padding: 40px; + border: 0; + border-top: 1px solid black; +} .holder { display: table-cell; @@ -2152,7 +2163,7 @@ form li textarea { right: 20px; top: 20px; z-index: 20; - background: #f9f9f9; + background: white; width: 75px; color: black; border: 1px solid black; @@ -2511,22 +2522,22 @@ a[data-role="forgot-password"] { padding: 50px 0; } .page .viewMore.btn { - text-decoration: none; - font-size: 18px; - padding: 18px 0; -} -.footer a, .footer span { -margin: 9px; -} -#keyhint { - display:none; -} -.projectList .projectItem { - width:100%; - margin: 20px 0; -} -.projectList .room { -width: 100%; -height: 260px; -} + text-decoration: none; + font-size: 18px; + padding: 18px 0; + } + .footer a, .footer span { + margin: 9px; + } + #keyhint { + display:none; + } + .projectList .projectItem { + width:100%; + margin: 20px 0; + } + .projectList .room { + width: 100%; + height: 260px; + } } \ No newline at end of file diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 1eb08c1..643ba92 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -10,13 +10,20 @@ var _ = require('lodash'), var media = { user: function(req, res){ + var offset = Number(req.query.offset) || 0 + var limit = Math.min( Number(req.query.limit), 50 ) || 20 var query = { user_id: req.user._id } if (req.query.tag) { query.tag = req.query.tag } - Media.find(query, function(err, media){ - res.json(media || []) - }) + console.log(offset, limit) + Media.find(query) + .sort({'created_at': -1}) + .skip(offset) + .limit(limit) + .exec(function(err, media){ + res.json(media || []) + }) }, create: function(req, res){ diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 47e0458..e357285 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -36,6 +36,7 @@ var projects = { data.name = util.sanitize(data.name) data.slug = util.slugify(data.name) + "-" + (+new Date) data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) @@ -94,6 +95,7 @@ var projects = { data.slug = util.slugify(data.name) + "-" + (+new Date) } data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.updated_at = new Date () _.extend(doc, data) diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index dd50da6..f7b8de0 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -32,6 +32,7 @@ var ProjectSchema = new mongoose.Schema({ media: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, + viewHeight: { type: Number }, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d800426..5cc659e 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -1,14 +1,3 @@ - - -
-
- Upload File - -
- ~ or ~
- - -
@@ -16,13 +5,28 @@
X +

Your Media – Found Media


You have no media yet. Upload some!
+ + view more
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-
+ +
\ No newline at end of file -- 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') 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 c31330242541305147a0f2c699d7cc215bd41cd2 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:59:46 -0400 Subject: color swatches --- .../assets/javascripts/ui/editor/LightControl.js | 1 + public/assets/javascripts/ui/editor/Presets.js | 30 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 19 ++++++++++++++ views/controls/editor/presets.ejs | 4 +++ views/controls/editor/wallpaper.ejs | 2 +- 5 files changed, 55 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor') diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..166fc50 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -64,6 +64,7 @@ var LightControl = View.extend({ pick: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(this.mode, rgb) + console.log(rgb) Walls.setColor[ this.mode ](rgb) }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index a7e92b6..1e70aa2 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -2,8 +2,26 @@ var Presets = View.extend({ el: "#presets", events: { + "mousedown": "stopPropagation", "click .presets span": "selectPreset", + "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: { @@ -34,6 +52,13 @@ 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){ @@ -56,4 +81,9 @@ var Presets = View.extend({ $(e.currentTarget).addClass('active') }, + selectColor: function(e){ + var preset = $(e.currentTarget).data('color') + console.log(preset) + }, + }) \ No newline at end of file diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 038b0c4..731a92b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -138,10 +138,12 @@ a{ display: none; z-index: 10; pointer-events: none; + background-size: cover; } .floatingSwatch.scissors { background-image: url(/assets/img/scissors.png) !important; background-repeat: no-repeat; + background-size: auto; border: 0; box-shadow: 0 0 transparent; } @@ -1484,6 +1486,23 @@ border-left: 1px solid black; padding-bottom: 6px; } +#presets .colors { + margin-bottom: 5px; +} +#presets .colors span { + display: inline-block; + font-size: 0; + width: 20px; + height: 20px; + border: 1px solid #ddd; + margin: 0px 2px 0 0; + cursor: pointer; + transition: transform 0.2s; +} +#presets .colors span:hover { + transform: translateX(3px) translateY(-3px); +} + .toolButton { border: 1px solid; display: inline-block; diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index a41c527..70e48e3 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,4 +1,8 @@
+

Preset Colors

+
+
+

Preset Styles

diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index ac025b5..5ca0390 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -14,7 +14,7 @@
- +