diff options
44 files changed, 812 insertions, 245 deletions
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/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/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 2b7e671..386819a 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -34,6 +34,14 @@ MX.Movements = function (cam) { var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) }) + function clampRotation( vr ) { + if (Rooms.mover.noclip) { + return clamp(vr, PI/-2, PI/2 ) + } + else { + return clamp(vr, PI/-4, PI/6 ) + } + } var exports = { @@ -127,8 +135,21 @@ 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() + $(".inuse").removeClass("inuse") + } + else if (app.controller.colorControl.$el.hasClass('active')) { + app.controller.colorControl.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() @@ -211,7 +232,7 @@ MX.Movements = function (cam) { var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3 var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3 cam.rotationY = rotY + dx - cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max ) + cam.rotationX = clampRotation( rotX - dy ) }, mouseup: function (e) { @@ -223,13 +244,14 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - console.log(deltaX != 0 && deltaY != 0) - 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 () { @@ -238,7 +260,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 @@ -271,10 +293,10 @@ MX.Movements = function (cam) { } if (turnUp) { - cam.rotationX = clamp( cam.rotationX - vrrrr*s, rotationX_min, rotationX_max) + cam.rotationX = clampRotation( cam.rotationX - vrrrr*s ) } if (turnDown) { - cam.rotationX = clamp( cam.rotationX + vrrrr*s, rotationX_min, rotationX_max) + cam.rotationX = clampRotation( cam.rotationX + vrrrr*s ) } if (turnLeft) { cam.rotationY += vrrrr*s diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index ecde3ca..3221bac 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -10,8 +10,8 @@ environment.init = function(){ "z": 0, "rotationX": 0, // PI/2, "rotationY": PI/2, // PI -// "rotationX": 0, -// "rotationY": PI + // "rotationX": 0, + // "rotationY": PI }) scene.camera.radius = 20 diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 99ede82..64372c5 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){ + return $(base.el).toggle(state).is(':visible') } } 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/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 072ff7e..9d69990 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -26,6 +26,13 @@ Map.UI.Editor = function(map){ resize: true, destroy: false, }) + + base.blur = function(){ + Rooms.forEach(function(r){ + return r.focused = false + }) + app.tube("builder-pick-nothing") + } // @@ -190,7 +197,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() } - + var intersects = Rooms.filter(function(r){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) @@ -207,13 +214,14 @@ Map.UI.Editor = function(map){ var cursor = base.mouse.cursor var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) }) if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) wheelTimeout = setTimeout(function(){ @@ -224,7 +232,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() wheelState = null - }, 500) + }, 250) } else { map.set_zoom(map.zoom_exponent - deltaY/20) @@ -233,4 +241,5 @@ Map.UI.Editor = function(map){ function rightclick (e){ } + } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 0da3b9a..fe5913d 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -134,19 +134,78 @@ }) } + base.luminance = function(rgb){ + 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 + } + + base.setBodyColor = function(){ + $("#header").toggleClass("black", Walls.luminance() < 100) + $("body").css("background-color", rgb_string( Walls.colors.wall )) + } + base.clearBodyColor = function(){ + $("#header").removeClass("black") + $("body").css("background-color", "transparent") + } + + base.setWallpaper = { + wall: function(background){ + var img = new Image () + img.onload = function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper(background, img) + }) + }.bind(this) + img.src = background.src + img.complete && img.onload() + }, + floor: function(background){ + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + floor.wallpaper(background) + }) + }, + ceiling: function(background){ + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + floor.wallpaper(background) + }) + }, + } + + base.clearWallpaper = { + wall: function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper("none") + }) + }, + floor: function(){ + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + wall.wallpaper("none") + }) + }, + ceiling: function(){ + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + wall.wallpaper("none") + }) + }, + } + 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) @@ -176,7 +235,6 @@ room.setCeilingColor(rgbColor) }) }, - } } 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/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..fae2ce6 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 ) @@ -43,7 +44,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") - $("body").css("background-color", "transparent") + Walls.clearBodyColor() base.room = null } @@ -59,7 +60,9 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] - $("body").css("background-color", rgb_string( Walls.colors.wall )) + if (! base.noclip) { + Walls.setBodyColor() + } app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index bee8c49..ff4f911 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -122,7 +122,7 @@ type: "update-colors", undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) - app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb ) Minotaur.watch( app.router.editorView.settings ) }, diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 7ed52a1..a144ecd 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -15,6 +15,7 @@ var Floor = function(opt){ this.id = opt.id this.side = opt.side + this.ceiling = opt.side & CEILING this.mx = opt.mx } @@ -39,7 +40,7 @@ if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', @@ -114,8 +115,6 @@ this.background.x = background.x || this.background.x this.background.y = background.y || this.background.y this.background.scale = background.scale || this.background.scale || 1 - - var shouldFlip = this.side & (CEILING) var mx, dx, dy var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) @@ -125,7 +124,7 @@ var region = mx.rect - if (shouldFlip) { + if (this.ceiling) { dx = Math.round( this.background.x - region.x.a ) dy = Math.round( this.background.y - region.y.a ) } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 7ff9015..eb445a7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -104,7 +104,7 @@ else if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', @@ -213,7 +213,7 @@ this.$walls.css("background-color", color) } - Wall.prototype.wallpaper = function(background){ + Wall.prototype.wallpaper = function(background, img){ if (! background) { background = { src: "none" } } @@ -235,7 +235,7 @@ return } - var img = new Image () + img = img || new Image () img.onload = function(){ this.backgroundImage = img this.wallpaperLoad(this.background.src) @@ -260,24 +260,34 @@ this.background.y = background.y || this.background.y this.background.scale = background.scale || this.background.scale || 1 - var useX = this.side & FRONT_BACK - var shouldFlip = this.side & (LEFT | BACK) - var mx, dx, dy var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) this.surface.faces.forEach(function(face, i){ - - if (shouldFlip) { - mx = this.mx[this.mx.length-1-i] - dx = Math.round( this.background.x + face.x.a ) - dy = Math.round( this.background.y + face.y.b ) - } - else { - mx = this.mx[i] - dx = Math.round( this.background.x - face.x.b ) - dy = Math.round( this.background.y + face.y.b ) + // this.mx[i].el.innerHTML = sidesToString(this.side) + + switch (this.side) { + case LEFT: + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.a ) + dy = Math.round( this.background.y + face.y.b ) + break + case RIGHT: + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.b ) + dy = Math.round( this.background.y + face.y.b ) + break + case FRONT: + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.b ) + dy = Math.round( this.background.y + face.y.b ) + break + case BACK: + mx = this.mx[i] + dx = Math.round( this.background.x - face.x.a ) + dy = Math.round( this.background.y + face.y.b ) + break } mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px' @@ -286,7 +296,6 @@ } Wall.prototype.outline = function(wallColor, outlineColor){ - var useX = this.side & FRONT_BACK var mx = this.mx var len = this.mx.length 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/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index fe67e9b..c8c8880 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..735274e 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,7 +11,7 @@ var BuilderView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 3eb2861..459ac1e 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -1,20 +1,35 @@ -var LightControl = View.extend({ - el: ".lightcontrol", +var ColorControl = View.extend({ + el: ".colorcontrol", 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", + "click .color-swatches span": "setSurface", + "click .colors span": "setHue", }, + + 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.colorPicker = new LabColorPicker(this, 155, 155) this.$("#color-picker").append( this.colorPicker.canvas ) this.$("#color-picker").append( this.colorPicker.cursor ) @@ -27,14 +42,22 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("<span>") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) }, modes: [ "wall", "outline", "floor", "ceiling" ], load: function(data){ this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) }.bind(this)) this.setMode("wall") }, @@ -50,6 +73,9 @@ var LightControl = View.extend({ }, toggle: function(state){ + if (state) { + this.parent.cursor.message("colors") + } this.$el.toggleClass("active", state); }, @@ -64,6 +90,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) }, @@ -109,11 +136,20 @@ var LightControl = View.extend({ this.$brightnessControl.val( this.labColor[0] ) }, - select: function(e){ + setSurface: function(e){ var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, + setHue: function(e){ + var color = $(e.currentTarget).data('color') + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + + this.pick(color, this.labColor) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..240f713 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,13 +38,17 @@ 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) + this.parent.colorControl.load(data.colors) } else { - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() } if (data.walls) { @@ -72,7 +81,9 @@ var EditorSettings = FormView.extend({ this.parent.collaborators.show() }, - clone: function(){ + clone: function(e){ + e.preventDefault() + var names = this.$name.val().split(" ") if ( ! isNaN(Number( names[names.length-1] )) ) { names[names.length-1] = Number( names[names.length-1] ) + 1 @@ -84,11 +95,14 @@ var EditorSettings = FormView.extend({ this.$id.val('new') this.$name.val( names.join(" ") ) this.action = this.createAction + this.thumbnailState = null - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/project/new") }, - clear: function(){ + clear: function(e){ + e.preventDefault() + Scenery.removeAll() }, @@ -112,6 +126,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.message("settings") + } }, enterSubmit: function (e) { @@ -141,6 +158,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() ) @@ -148,11 +178,13 @@ 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 ) ) 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/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 93cc998..dceae3c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', - "click [data-role='toggle-light-control']": 'toggleLightControl', + "click [data-role='toggle-color-control']": 'toggleColorControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, @@ -29,20 +29,24 @@ var EditorToolbar = View.extend({ } }, - toggleMap: function(){ - var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") - this.resetControls() - $("[data-role='toggle-map-view']").toggleClass("inuse", state) - map.toggle(state) + 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) + var state = map.toggle(state) + if (state) { map.ui.blur() } $("#minimap").toggleClass("hide", state) this.parent.info.toggle(state) }, toggleSettings: function(){ // this.resetMode() + this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() this.parent.settings.toggle() @@ -53,6 +57,7 @@ var EditorToolbar = View.extend({ this.parent.mediaUpload.show() this.resetMode() this.resetControls() + this.toggleMap(false) }, resetMode: function(){ @@ -66,10 +71,11 @@ var EditorToolbar = View.extend({ resetControls: function(){ $(".inuse").removeClass("inuse") + this.toggleMap(false) this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() }, @@ -105,23 +111,25 @@ var EditorToolbar = View.extend({ this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.wallpaperPicker.toggle(state) }, - toggleLightControl: function(){ - var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") + toggleColorControl: function(){ + var state = ! $("[data-role='toggle-color-control']").hasClass("inuse") this.resetMode() - $("[data-role='toggle-light-control']").toggleClass("inuse", state) + $("[data-role='toggle-color-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() - this.parent.lightControl.toggle(state) + this.toggleMap(false) + this.parent.colorControl.toggle(state) }, toggleTextEditor: function(){ @@ -130,9 +138,10 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.textEditor.toggle(state) }, @@ -144,7 +153,8 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() + this.toggleMap(false) this.parent.presets.toggle(state) }, }) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6aff601..9946feb 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 }) @@ -16,7 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) @@ -41,6 +42,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/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..d0e1825 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,73 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + active: false, + + messages: { + 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.", + }, + + initialize: function(){ + $('#help-button').click(this.toggle.bind(this)); + }, + + 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) + }, + + stop: function(){ + this.active = false + this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + offset: 100, + lastPosition: { pageX: 0, pageY: 0 }, + move: function(e){ + this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px" + this.el.style.top = e.pageY + "px" + this.lastPosition = e + }, + + show: function(name){ + this.showMessage(name) + }, + + message: function(name){ + if (! this.active) return + if (name == "start" || name == "media" || name == "settings") { + this.offset = 100 + } + else if (name == "colors") { + this.offset = 270 + } + else { + this.offset = 290 + } + this.move(this.lastPosition) + this.$el.html(this.messages[name]) + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index fddfefc..b3f4ac3 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -26,6 +26,7 @@ var MediaUpload = UploadView.extend({ }, enterSubmit: function(e){ + e.stopPropagation() if (e.keyCode == 13) { e.preventDefault() this.parse() @@ -35,7 +36,10 @@ var MediaUpload = UploadView.extend({ parse: function(){ var url = this.$url.val() this.$url.val("") - + this.parseUrl(url) + }, + + parseUrl: function(url){ Parser.parse(url, function(media){ if (! media) { alert("Not a valid image/video link") @@ -52,12 +56,10 @@ var MediaUpload = UploadView.extend({ request.done(this.add.bind(this)) }.bind(this)) }, - + 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..8cae4a4 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -4,38 +4,62 @@ var MediaViewer = ModalView.extend({ destroyAction: "/api/media/destroy", usesFileUpload: true, loaded: false, - + perPage: 12, + offset: 0, + fixedClose: true, + 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.$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(){ @@ -44,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -52,10 +77,11 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.cursor.message('start') }, 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 +111,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 +126,41 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ - this.loaded = true + var scrollTop = this.loaded ? $('.myMedia .container').height() : 0 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.__super__.show.call(this) + if (this.loaded) { + this.$el.delay(300).animate({ scrollTop: scrollTop }, 200) + } + else { + this.loaded = true + this.parent.cursor.message("media") + 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>") $span.addClass("mediaContainer") @@ -142,7 +187,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, @@ -187,7 +233,8 @@ var MediaViewer = ModalView.extend({ } this.hide() - + this.parent.cursor.message('addmedia') + var $ants = $('.ants'); var $floatingImg = $('.floatingImg'); @@ -222,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 a7e92b6..0a0e0fe 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -2,9 +2,13 @@ var Presets = View.extend({ el: "#presets", events: { + "mousedown": "stopPropagation", "click .presets span": "selectPreset", + "click .swatches span": "selectColor", + "change .url": "tileWalls", + "keydown .url": "enterSetUrl", }, - + presets: { wireframe: { wall: [255,255,255], @@ -17,8 +21,9 @@ var Presets = View.extend({ outline: [0,0,0], floor: [109,116,106], ceiling: [159,163,157], + background: [109,116,106], }, - pfunk: { + "p.Funk": { wall: [255,63,78], outline: [255,246,0], floor: [255,255,0], @@ -30,14 +35,31 @@ var Presets = View.extend({ floor: [0,0,0], ceiling: [0,0,0], }, + matrix: { + wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] }, + outline: [0,0,0], + floor: [10,15,10], + ceiling: [0,0,0], + }, }, initialize: function(opt){ this.parent = opt.parent + + this.$url = this.$(".url") + + this.$presets = this.$(".presets") + _.keys(this.presets).forEach(function(name){ + var $swatch = $("<span>") + $swatch.html(capitalize(name)) + $swatch.data('preset', name) + this.$presets.append($swatch) + }.bind(this)) }, toggle: function(state){ - this.$el.toggleClass("active", state); + this.$el.toggleClass("active", state) + this.parent.cursor.message(state ? "presets" : "start") }, show: function(){ @@ -51,9 +73,50 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.lightControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') + this.load(this.presets[preset]) + }, + + selectColor: function(e){ + var preset = $(e.currentTarget).data('color') + console.log(preset) }, + lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]}, + load: function(preset){ + this.parent.colorControl.modes.forEach(function(mode){ + if (! preset[mode].length) { + Walls.setWallpaper[mode](preset[mode]) + Walls.setColor[mode](preset[mode].color) + } + else { + if (! this.lastPreset[mode].length) { + Walls.clearWallpaper[mode]() + } + Walls.setColor[mode](preset[mode]) + this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode])) + } + }.bind(this)) + this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor") + Walls.setBodyColor() + this.lastPreset = preset + }, + + tileWalls: function(){ + var url = this.$url.sanitize() + if (url.length && url.indexOf("http://") == 0) { + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + } + app.controller.wallpaperPicker.addUrl(url) + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.tileWalls.bind(this), 100) + } + }, + })
\ No newline at end of file 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/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..afdfca7 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -3,6 +3,7 @@ var WallpaperPicker = UploadView.extend({ el: ".wallpaper", mediaTag: "wallpaper", + createAction: "/api/media/new", uploadAction: "/api/media/upload", events: { @@ -10,10 +11,10 @@ var WallpaperPicker = UploadView.extend({ "click .swatch": 'pick', "click .wallpaperRemove": 'remove', "input [data-role='wallpaper-scale']": 'updateScale', - }, - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") @@ -27,18 +28,28 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ - if (! this.loaded) { - this.load() - } - else { - this.toggle(true) - } + this.toggle(true) }, - hide: function(){ - this.__super__.hide.call(this) + this.toggle(false) }, - +// hide: function(){ +// this.__super__.hide.call(this) +// }, + + toggle: function (state) { + app.tube('cancel-wallpaper') + this.$el.toggleClass("active", state) + if (state) { + this.parent.cursor.message("wallpaper") + if (! this.loaded) { + this.load() + } + } + // toggle the class that makes the cursor a paintbucket + // $("body").removeClass("pastePaper") + }, + load: function(){ $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, @@ -55,31 +66,35 @@ var WallpaperPicker = UploadView.extend({ this.toggle(true) }, + seenWallpapers: {}, add: function (media) { if (media.type !== "image") { return } + if (this.seenWallpapers[ media.url ]) { return } var swatch = document.createElement("div") swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) this.$swatches.show() this.$(".txt").hide() - }, - - toggle: function (state) { - if (state && ! this.loaded) { - this.show() - } - else { - this.$el.toggleClass("active", state) - } - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper") + this.seenWallpapers[ media.url ] = true }, - hide: function(){ - this.toggle(false) + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) }, - + beforeUpload: function(){ }, @@ -124,7 +139,7 @@ var WallpaperPicker = UploadView.extend({ $floatingSwatch.removeClass("scissors").hide() } $(window).on('mousemove', _followCursor) - $(window).one('click', _hideCursor); + // $(window).one('click', _hideCursor); app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); 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/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 52c96e6..aa8c480 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -5,9 +5,12 @@ var Parser = { fetch: function(url, done) { var img = new Image () img.onload = function(){ + if (!img) return var width = img.naturalWidth, height = img.naturalHeight img = null done({ + url: url, + type: "image", token: "", thumbnail: "", title: "", @@ -32,6 +35,8 @@ var Parser = { var width = video.videoWidth, height = video.videoHeight video = null done({ + url: url, + type: "video", token: "", thumbnail: "", title: "", @@ -63,6 +68,8 @@ var Parser = { success: function(result){ var res = result.items[0] done({ + url: url, + type: "youtube", token: id, thumbnail: thumb, title: res.snippet.title, @@ -92,6 +99,8 @@ var Parser = { return } done({ + url: url, + type: "vimeo", token: id, thumbnail: res.thumbnail_large, title: res.title, @@ -119,6 +128,8 @@ var Parser = { + '0673fbe6fc794a7750f680747e863b10', success: function(result) { done({ + url: url, + type: "soundcloud", token: result.id, thumbnail: "", title: "", @@ -138,6 +149,8 @@ var Parser = { regex: /^http.+/i, fetch: function(url, done) { done({ + url: url, + type: "link", token: "", thumbnail: "", title: "", @@ -156,8 +169,6 @@ var Parser = { var matched = Parser.integrations.some(function(integration){ if (integration.regex.test(url)) { integration.fetch(url, function(res){ - res.url = url - res.type = integration.type cb(res) }) return true @@ -176,6 +187,15 @@ var Parser = { return "" }, + loadImage: function(url, cb, error){ + if (Parser.lookup.image.regex.test(url)) { + Parser.lookup.image.fetch(url, function(media){ + cb(media) + }) + } + else error && error() + }, + thumbnail: function (media) { return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">'; }, diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 76c5c7b..367e20e 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -4,10 +4,11 @@ if (window.$) { $.fn.string = function() { return trim($(this).val()) } $.fn.enable = function() { return $(this).attr("disabled",null) } $.fn.disable = function() { return $(this).attr("disabled","disabled") } + $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) } $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) } } -function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } +function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 849c994..89a6495 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; } @@ -414,6 +416,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; @@ -524,7 +537,7 @@ iframe.embed { .footer { width: 100%; - padding: 80px 0; + padding: 100px 0 120px 0; background: #f9f9f9; float: left; clear: both; @@ -888,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; } @@ -1258,7 +1271,7 @@ border-left: 1px solid black; .noMedia { margin: 40px; } -.foundMedia { +.foundMedia, .wallpaperMedia { position:absolute; top:0; left:0; @@ -1269,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%); } @@ -1433,12 +1445,12 @@ border-left: 1px solid black; .wallpaper, #presets { right: 80px; margin-top: 77px; - width: 172px; + width: 202px; -webkit-transition: -webkit-transform 0.1s ease-in-out; -webkit-transform: translateX(400px); transition: transform 0.1s ease-in-out; transform: translateX(400px); - padding: 5px 5px 9px 5px; + padding: 10px 12px 12px 12px; } #presets { @@ -1454,10 +1466,12 @@ border-left: 1px solid black; height: 40px; display: inline-block; border: 1px solid; - background-size: contain; + background-size: 100%; + margin: 0 2px 4px 2px; -webkit-transition: -webkit-transform 0.1s ease-in-out; line-height: 0; vertical-align: text-bottom; + background-color:white; -webkit-user-drag: element; } .wallpaper.active .swatches .swatch:hover { @@ -1473,6 +1487,24 @@ border-left: 1px solid black; padding-bottom: 6px; } +.vvbox .colors { + max-width: 155px; + margin-bottom: 5px; +} +.vvbox .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; +} +.vvbox .colors span:hover { + transform: translateX(2px) translateY(-2px); +} + .toolButton { border: 1px solid; display: inline-block; @@ -1552,21 +1584,21 @@ border-left: 1px solid black; /* COLOR PICKER */ -.lightcontrol { +.colorcontrol { margin-top: 8%; right: 80px; - padding: 13px 20px 20px 20px; + padding: 10px 12px 12px 12px; -webkit-transform: translateX(400px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateX(400px); transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol.active { +.colorcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); } -.lightcontrol .slider { +.colorcontrol .slider { } h4 { font-weight:300; @@ -1577,8 +1609,8 @@ input[type=range] { -moz-appearance: none; cursor: pointer; background-color: black; - width: 180px; - height:3px; + width: 155px; + height: 3px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; @@ -1645,7 +1677,9 @@ input[type="range"]::-webkit-slider-thumb { float:left; cursor:pointer; border-bottom: 1px transparent solid; + padding: 5px; } +.presets span:hover, .presets span.active { text-decoration: underline; } @@ -1666,13 +1700,19 @@ input[type="range"]::-webkit-slider-thumb { width: 100%; color: #555; } +#presets .url { + margin: 4px 0; + padding: 2px; + font-size: 12px; + border: 1px black solid; + width: 100%; +} .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){ margin-bottom:5px; } .color-swatches span.active, .color-swatches span.active:hover{ - background:#000; - color:white; + background: #fff; } .color-swatches span:nth-child(3){ clear:left; @@ -1680,14 +1720,35 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches span:hover { background:#eee; } +.color-swatches span.active label, +.color-swatches span:hover label { + border-bottom: 1px solid; +} .color-swatches label { position: relative; - padding-left: 5px; + font-size: 13px; + margin-left: 5px; display: inline-block; cursor: pointer; } +#helpCursor { + position: fixed; + max-width: 200px; + font-size: 15px; + color: black; + background: rgba(255,255,255,0.9); + margin: 8px 0 0 8px; + padding: 10px; + font-weight: 600; + z-index: 22; + display: none; + margin-left:-210px; + margin-bottom:20px; + border:1px solid; + box-shadow:3px 3px black; +} .settings.info { right: auto; @@ -1722,7 +1783,7 @@ input[type="range"]::-webkit-slider-thumb { .modalLink { text-decoration: none; } -.modalLink:hover { +.modalLink:hover span { text-decoration: underline; } @@ -1736,30 +1797,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; @@ -2055,6 +2127,11 @@ form p{ margin-top: 10px; color: #999; } +form p.guidelines { + width: 200px; + text-align: left; + margin: 20px 0; +} form h3 { text-align: left; font-weight: 600; @@ -2089,6 +2166,7 @@ form li div div { } form li img#load_avatar { max-width: 200px; + float: right; } form li textarea { width: 100%; @@ -2152,16 +2230,27 @@ form li textarea { right: 20px; top: 20px; z-index: 20; - background: #f9f9f9; + background: white; width: 75px; color: black; 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:0.2s transform linear 1s; + display: block; + transform: translateY(0px) translateZ(0); } + + .desktop .close:hover { background:black; color:white; @@ -2511,22 +2600,55 @@ 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; + } + .aboutRoom { + width: 170px; + padding: 6px 8px 8px 8px; + } + .aboutRoom h2 { + font-size: 13px; + margin: 1px 0 0 0; + } + .aboutRoom h1 a, .aboutRoom h1 { + font-size: 16px; + } } + +@media screen and (orientation:portrait) { + .aboutRoom { + display:none; + } + body:after{ + content:"Hey there! For best viewing we suggest flipping your device sideways and spinning around in circles :)"; + z-index: 3; + border: 1px solid; + position: fixed; + display: inline-block; + background: white; + box-shadow: -3px 3px; + width: 170px; + background: rgba(255,255,255,0.95); + padding: 6px 8px 8px 8px; + position: fixed; + bottom: 10px; + left: 10px; + border: 1px solid; + } }
\ No newline at end of file diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 1eb08c1..4e2fad5 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -10,13 +10,19 @@ 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 || []) - }) + 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..1bf046f 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -36,11 +36,13 @@ 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) 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, { @@ -94,6 +96,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) @@ -102,7 +105,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..a923d85 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -32,6 +32,8 @@ 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, + viewHeight: { type: Number }, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 205938f..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -2,7 +2,10 @@ <h4>Map Editor</h4> <div class="no-selection"> - Click a room to select it, or click and drag to make a new room. + Click and drag to make a new room. + Click a room to select, move or resize it. + <br><br> + Press ESC to toggle the map. </div> diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/color-control.ejs index 8b20464..8ce6e85 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -1,5 +1,9 @@ -<div class="vvbox lightcontrol"> +<div class="vvbox colorcontrol"> <h4>Edit Room Colors</h4> + + <div class="colors"> + </div> + <div id="color-picker"> </div> diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d800426..d1e2c99 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -1,28 +1,43 @@ -<span class="fileUpload"> - <input type="hidden" name="_csrf" value="[[- token ]]"> - <form> - <span class="ion-ios7-upload-outline upload-icon"></span><br> - Upload File - <input type="file" accept="image/*" class="file" multiple> - </form> - <small>~ or ~</small><br> - <input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url"> -</span> - <div class="ants"> <div class="leftborder"></div> <img class="floatingImg"> </div> +<span class="close" id="fixed_close">X</span> + <div class="mediaDrawer fixed animate mediaViewer"> - <span class="close">X</span> - <h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br> + <h2> + <a href="#" class="userToggle active">Your Media</a> + – <a href="#" class="foundToggle">Found Media</a> +<!-- + – <a href="#" class="wallpaperToggle">Wallpaper</a> + --> + </h2><br> <h3 class="editBtn warn" id="deleteMedia"></h3> <div class="myMedia"> <div class="noMedia">You have no media yet. Upload some!</div> + <span class="container"></span> + <a href="#" class="viewMore btn">view more</a> </div> + + <span class="fileUpload"> + <input type="hidden" name="_csrf" value="[[- token ]]"> + <form> + <span class="ion-ios7-upload-outline upload-icon"></span><br> + Upload File + <input type="file" accept="image/*" class="file" multiple> + </form> + <small>~ or ~</small><br> + <input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url"> + </span> <div class="foundMedia"> - </div> + <span class="container"></span> + </div> + + <div class="wallpaperMedia"> + <span class="container"></span> + </div> + </div>
\ No newline at end of file diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index a41c527..02e9d42 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,17 +1,6 @@ <div class="vvbox" id="presets"> <h4>Preset Styles</h4> <div class="presets"> - <span data-preset="wireframe"> - Wireframe - </span> - <span data-preset="shaded"> - Shaded - </span> - <span data-preset="inverse"> - Inverse - </span> - <span data-preset="pfunk"> - P.Funk - </span> </div> + <input type="text" class="url" placeholder="enter a url"> </div> diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 5b3b553..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,13 +1,18 @@ +<span id="helpCursor"></span> + <div class="vvbox settings" id="editorSettings"> <h4>Room Settings</h4> <input type="hidden" name="_csrf" value="[[- token ]]"> <input type="hidden" name="_id" value="new"> - <div class="setting"> - <a href="#" class="modalLink" id="startpoint"> + <div class="setting" id="startpoint"> + <a href="#" class="modalLink"> <span class="ion-ios7-navigate-outline"></span> - <span id="startText">Select Startpoint</span> - <span id="moveText">Move to Desired Point</span></a> + <span id="startText">Set Startpoint</span> + <span id="moveText">Move to Desired Point <span class="done">done</span></span> + <span id="confirmText">Startpoint Confirmed</span> + </a> + <a href="#" class="modalLink" id="goText"><span>(go there)</span></span> </div> <div class="setting"> <a href="#" class="modalLink" data-role='show-collaborators'> diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 57a98b9..7b08db6 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -1,9 +1,11 @@ <div class="edit menu vvbox" id="editorToolbar" data-intro="This is the main toolbar. Add and select media, Apply wallpaper, change room name etc." data-position="left"> +<!-- <span data-role='undo' data-info="undo" class="ion-reply"></span> + --> <span data-role='open-media-viewer' data-info="add media" @@ -27,9 +29,10 @@ data-info="add wallpaper" class="ion-ios7-keypad-outline"></span> <span - data-role='toggle-light-control' + data-role='toggle-color-control' data-info="edit room colors" class="ion-ios7-sunny-outline"></span> +<!-- <span data-role='toggle-text-editor' data-info="add text to wall" @@ -38,6 +41,7 @@ data-role='toggle-map-view' data-info="toggle map view" class="ion-ios7-world-outline"></span> + --> <span data-role='toggle-project-settings' data-info="room settings" diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index ac025b5..39a109b 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -12,24 +12,26 @@ <div class="wallpaperUpload toolButton"> <form> - <span class="ion-ios7-upload-outline upload-icon"></span> - <label>Upload wallpaper</label> + <label>Upload Wallpaper</label> <input type="file" accept="image/*" class="file" multiple> </form> <!-- <input type="text" placeholder="Enter Image URL" class="url"> --> </div> + <div class="wallpaperRemove toolButton"> <span class="ion-scissors"></span> <label>Remove Wallpaper</label> </div> +<!-- <div class="wallpaperResize toolButton"> <span class="ion-arrow-resize"></span> <label>Resize Wallpaper</label> </div> +--> <div class="wallpaperResizeControls"> <span data-role="wallpaper-position" class="ion-arrow-expand"></span> diff --git a/views/editor.ejs b/views/editor.ejs index c0562e9..29db917 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -17,7 +17,7 @@ [[ include controls/editor/media-drawer ]] [[ include controls/editor/media-editor ]] [[ include controls/editor/wallpaper ]] - [[ include controls/editor/light-control ]] + [[ include controls/editor/color-control ]] [[ include controls/editor/text-editor ]] [[ include controls/editor/collaborators ]] [[ include controls/editor/settings ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..c9b4c95 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,7 +102,8 @@ <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script> -<script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/editor/HelpCursor.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/editor/ColorControl.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/Collaborators.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script> |