From 0bf50fee4d35467c5335cbaf6c1ca3b7ae2dd1e4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 12 Aug 2014 16:01:42 -0400 Subject: different ui on map editor --- public/assets/stylesheets/app.css | 40 ++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a5b1733..1863add 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -526,20 +526,25 @@ iframe.embed { position:fixed; top:0; left:0; - cursor: -webkit-grab; - cursor: -moz-grab; z-index: 1; position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); - cursor:pointer; + cursor: -webkit-grab; + cursor: -moz-grab; } .mx-scene:active{ cursor: -webkit-grabbing; cursor: -moz-grabbing; } +.mx-scenery { + cursor: pointer; +} +.mx-scenery:active { + cursor: pointer; +} .mx-object3d.image, .mx-object3d.video, .mx-object3d iframe, @@ -573,6 +578,28 @@ iframe.embed { z-index: 10; } +#map { + cursor: crosshair; +} +#map.move { + cursor: move; +} +#map.ew-resize { + cursor: ew-resize; +} +#map.ns-resize { + cursor: ns-resize; +} +#map.nesw-resize { + cursor: nesw-resize; +} +#map.nwse-resize { + cursor: nwse-resize; +} +#map.destroy { + cursor: url(/assets/img/destroy-cursor.png) 12 12, auto; +} + .face { background-color: #fff; transition: 0.1s background-color ease; @@ -581,11 +608,10 @@ iframe.embed { .back { background-color: #fff; } .left { background-color: #fff; } .right { background-color: #fff; } -.floor { background-color: #eee; } -.ceiling { background-color: rgba(230,230,255,0.3); } +.floor { background-color: #f8f8f8; } +.ceiling { background-color: rgba(255,525,255,0.3); } -.active.floor { background-color: #ffe; } -.active.ceiling { background-color: rgba(230,230,255,0.3); } +.active.floor { background-color: #f8f8f8; } .dragging .mx-object3d.image { pointer-events: none; -- cgit v1.2.3-70-g09d2 From a279338f4dff62d87021ca28252d68b0c586d3a7 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 13 Aug 2014 02:12:40 -0400 Subject: add measurement stuff to media editor --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../rectangles/engine/scenery/types/_object.js | 4 ++ .../javascripts/rectangles/util/measurement.js | 82 +++++++++++++++++++++ .../assets/javascripts/ui/builder/BuilderInfo.js | 83 ---------------------- public/assets/javascripts/ui/editor/MediaEditor.js | 34 +++++++-- public/assets/stylesheets/app.css | 7 ++ test/09-test-undo.js | 1 + views/controls/editor/media-editor.ejs | 20 ++++-- views/partials/scripts.ejs | 1 + 9 files changed, 138 insertions(+), 98 deletions(-) create mode 100644 public/assets/javascripts/rectangles/util/measurement.js (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 191088f..3b7d3e2 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -149,7 +149,8 @@ MX.Movements = function (cam) { case 32: // space moveUp = moveDown = false break - + +/* case 48: // 0 cam.rotationX = 0 cam.rotationY = 0 @@ -157,6 +158,7 @@ MX.Movements = function (cam) { cam.y = viewHeight cam.z = 0 break +*/ } }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 7202ce0..66e0faf 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -66,6 +66,10 @@ Scenery.types.base = Fiber.extend(function(base){ this.center = this.wall.center() }, + set_scale: function(scale){ + this.scale = this.mx.scale = this.mx.ops.scale = scale || 1.0 + }, + recenter: function(){ this.mx.move({ x: this.center.a, diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js new file mode 100644 index 0000000..d6a0b35 --- /dev/null +++ b/public/assets/javascripts/rectangles/util/measurement.js @@ -0,0 +1,82 @@ +$.fn.resetUnitVal = function(){ + this.each(function(){ + var n = $(this).data("px") + $(this).unitVal(n) + }); +} + +$.fn.unitVal = function(n){ + var s + if (typeof n === "undefined") { + s = $(this).val() + n = stringToMeasurement( s ) + if (! n || isNaN(n)) { + n = $(this).data("px") + } + } + s = measurementToString( n ) + $(this).val( s ).data("px", n) + return n +} + +function measurementToString( n ) { + var s, ft, inch + switch (app.units) { + case 'm': + s = round(n/36 * 0.3048 * 100) / 100 + " m" + break + case 'ft': + ft = floor(n / 36) + inch = abs(round((n % 36) / 3)) + s = ft + "'" + if (inch > 0) { + s += " " + inch + '"' + } + break + case 'px': + default: + s = round(n) + " px" + break + } + return s +} +function stringToMeasurement( s ) { + var ft, inch, ft_in, type + if (! s.match(/[0-9]/)) { + return NaN + } + if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) { + ft_in = s.match(/[0-9.]+/g) + if (ft_in.length >= 2) { + ft = parseFloat( ft_in[0] ) + inch = parseFloat( ft_in[1] ) + } + else if (ft_in.length == 1) { + if (s.indexOf('"') !== -1) { + ft = 0 + inch = parseFloat( ft_in[0] ) + } + else { + ft = parseFloat( ft_in[0] ) + inch = 0 + } + } + else { + ft = inch = 0 + } + n = ft * 36 + inch * 3 + } + else if (s.indexOf("m") !== -1) { + n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048 + } + else if (s.indexOf("px") !== -1) { + n = parseFloat(s.match(/[0-9.]+/)) + } + else { + n = abs( stringToMeasurement( s + app.units ) ) + } + if (s.indexOf('-') !== -1) { + n *= -1 + } + return n +} diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 56f1338..2fffdba 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -96,86 +96,3 @@ var BuilderInfo = View.extend({ }, }) - -$.fn.resetUnitVal = function(){ - this.each(function(){ - var n = $(this).data("px") - $(this).unitVal(n) - }); -} - -$.fn.unitVal = function(n){ - var s - if (typeof n === "undefined") { - s = $(this).val() - n = stringToMeasurement( s ) - if (! n || isNaN(n)) { - n = $(this).data("px") - } - } - s = measurementToString( n ) - $(this).val( s ).data("px", n) - return n -} - -function measurementToString( n ) { - var s, ft, inch - switch (app.units) { - case 'm': - s = round(n/36 * 0.3048 * 100) / 100 + " m" - break - case 'ft': - ft = floor(n / 36) - inch = abs(round((n % 36) / 3)) - s = ft + "'" - if (inch > 0) { - s += " " + inch + '"' - } - break - case 'px': - default: - s = round(n) + " px" - break - } - return s -} -function stringToMeasurement( s ) { - var ft, inch, ft_in, type - if (! s.match(/[0-9]/)) { - return NaN - } - if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) { - ft_in = s.match(/[0-9.]+/g) - if (ft_in.length >= 2) { - ft = parseFloat( ft_in[0] ) - inch = parseFloat( ft_in[1] ) - } - else if (ft_in.length == 1) { - if (s.indexOf('"') !== -1) { - ft = 0 - inch = parseFloat( ft_in[0] ) - } - else { - ft = parseFloat( ft_in[0] ) - inch = 0 - } - } - else { - ft = inch = 0 - } - n = ft * 36 + inch * 3 - } - else if (s.indexOf("m") !== -1) { - n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048 - } - else if (s.indexOf("px") !== -1) { - n = parseFloat(s.match(/[0-9.]+/)) - } - else { - n = abs( stringToMeasurement( s + app.units ) ) - } - if (s.indexOf('-') !== -1) { - n *= -1 - } - return n -} \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index cd8fb63..b9eb8fc 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -11,6 +11,9 @@ var MediaEditor = FormView.extend({ "change [name=autoplay]": "setAutoplay", "change [name=loop]": "setLoop", "change [name=mute]": "setMute", + "change [name=width]": 'changeWidth', + "change [name=height]": 'changeHeight', + "change [name=units]": 'changeUnits', "click [data-role=destroy-media]": "destroy", }, @@ -22,8 +25,8 @@ var MediaEditor = FormView.extend({ this.$description = this.$("[name=description]") // image fields - this.$widthDimension = this.$("[name=width]") - this.$heightDimension = this.$("[name=height]") + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") this.$units = this.$("[name=units]") // video fields @@ -55,16 +58,14 @@ var MediaEditor = FormView.extend({ this.$name.val(media.title) this.$description.val(media.description) + this.setDimensions() + this.$units.val( "ft" ) switch (media.type) { case "image": this.$(".image").show() this.$(".video").hide() - - this.$widthDimension.val( Number(media.widthDimension) || "" ) - this.$heightDimension.val( Number(media.heightDimension) || "" ) - this.$units.val( media.units || "cm" ) - + break case "youtube": @@ -113,6 +114,25 @@ var MediaEditor = FormView.extend({ this.scenery.mute(checked) }, + setDimensions: function(){ + this.$width.unitVal( Number(this.scenery.dimensions.a * this.scenery.scale) || "" ) + this.$height.unitVal( Number(this.scenery.dimensions.b * this.scenery.scale) || "" ) + }, + changeWidth: function(e){ + e.stopPropagation() + this.scenery.set_scale( this.$width.unitVal() / this.scenery.dimensions.a ) + this.setDimensions() + }, + changeHeight: function(e){ + e.stopPropagation() + this.scenery.set_scale( this.$height.unitVal() / this.scenery.dimensions.b ) + this.setDimensions() + }, + changeUnits: function(){ + app.units = this.$units.val() + this.$('.units').resetUnitVal() + }, + bind: function(scenery){ this.scenery = scenery this.scenery.mx.bound = true diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1863add..8508cf7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1295,6 +1295,13 @@ input[type="range"]::-webkit-slider-thumb { top: 0px; } +#mediaEditor .setting.number label { + width: 40px; +} +#mediaEditor .setting.number [type=text] { + width: 140px; +} + .playButton,.muteButton { color: white; background: black; diff --git a/test/09-test-undo.js b/test/09-test-undo.js index 17998a9..f774c04 100644 --- a/test/09-test-undo.js +++ b/test/09-test-undo.js @@ -1,5 +1,6 @@ var assert = require("assert") var UndoStack = require("../public/assets/javascripts/rectangles/util/undo.js") +UndoStack.debug = false describe('undo', function(){ diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 5db1fb2..7f8f299 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -34,13 +34,19 @@ -
- Dimensions
- - - +
+
+ + +
+
+
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index b63d1bf..087c0d7 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -23,6 +23,7 @@ + -- cgit v1.2.3-70-g09d2 From bf2300afa925e2915a0b1b906691a3f5fbe4186d Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 13 Aug 2014 02:20:21 -0400 Subject: fix edit links on profile --- public/assets/stylesheets/app.css | 12 ++++++------ server/lib/middleware.js | 2 +- views/projects/list-projects.ejs | 9 ++++++--- 3 files changed, 13 insertions(+), 10 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 8508cf7..36cccef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -230,6 +230,12 @@ iframe.embed { color:white; } +#projectList .editBtn { + position: absolute; + right: 10px; + top: 10px; +} + /* .room1 { position: relative; @@ -240,12 +246,6 @@ iframe.embed { background-image:url(https://s3.amazonaws.com/luckyplop/fd4ebe8a7a4246c8273fc999fb1ef0d6a8260b8c.png); } -.room1 .editBtn { - position: absolute; - right: 10px; - top: 10px; -} - .room1 form textarea { width: 226px; } diff --git a/server/lib/middleware.js b/server/lib/middleware.js index aec54ad..27b9c04 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -36,7 +36,7 @@ var middleware = { ensureLocals: function (req, res, next) { res.locals.token = req.csrfToken(); res.locals.logged_in = req.isAuthenticated() - res.locals.user = req.user || {} + res.locals.user = req.user || { id: undefined } res.locals.config = config res.locals.profile = null res.locals.opt = {} diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index d2c0447..c78bf9f 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -14,10 +14,13 @@ [[ } ]] - [[ if (profile && profile._id == project.user_id) { ]] -
edit
+ [[ if (String(user._id) == String(project.user_id)) { ]] +
edit
[[ } ]] - [[- project.name ]]
[[- project.date ]]
+ + [[- project.name ]]
+ [[- project.date ]] +
[[ }) ]] -- cgit v1.2.3-70-g09d2 From 0d971464a2af8ec795664fb3e6f50b888dcccf53 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 13 Aug 2014 02:33:01 -0400 Subject: style fixes --- public/assets/stylesheets/app.css | 14 ++++++++------ server/lib/views.js | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 36cccef..e15ba84 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -158,13 +158,15 @@ h5 { .page .profile { color:white; } -.page table{ - width:100%; - height:400px; - border-top:1px solid; - margin:40px 0 0 0; +.page table { + width: 100%; + border-top: 1px solid; + margin: 40px 0 0 0; border-spacing: 0; - clear:both; + clear:nboth; +} +.page tr { + height: 400px; } .page table.showcase { height:70vh; diff --git a/server/lib/views.js b/server/lib/views.js index d619d71..b776582 100644 --- a/server/lib/views.js +++ b/server/lib/views.js @@ -36,7 +36,7 @@ views.editor = function (req, res) { date: moment(req.project.updated_at).format("M/DD/YYYY"), author: user.displayName, authorlink: "/profile/" + user.username, - noui: !! (req.query.noui === 1), + noui: !! (req.query.noui === '1'), }) }) } @@ -61,7 +61,7 @@ views.reader = function (req, res) { date: moment(req.project.updated_at).format("M/DD/YYYY"), author: user.displayName, authorlink: "/profile/" + user.username, - noui: !! (req.query.noui === 1), + noui: !! (req.query.noui === '1'), }) }) } -- cgit v1.2.3-70-g09d2 From 0f649f2cfb034ad8458f08c8f23a2251135af059 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 13 Aug 2014 19:18:44 -0400 Subject: css --- .../assets/javascripts/rectangles/util/minotaur.js | 23 +++++++++++----------- public/assets/stylesheets/app.css | 19 +++++++++++++++++- views/partials/header.ejs | 4 ++++ 3 files changed, 34 insertions(+), 12 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index b4c81f0..6eb36ec 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -1,14 +1,14 @@ -$(function(){ +(function(){ var Monitor = function () { var base = this; - base.$el = $("#save"); + base.$el = $("#minotaur"); base.timeout = null; base.delay = 500; base.objects = {}; base.init = function () { - base.$el.addClass('saved').html('Save'); + base.$el.addClass('saved'); base.$el.click(base.save); } @@ -17,12 +17,12 @@ $(function(){ base.objects[object.type][object.id] = object; base.clear(); base.timeout = setTimeout(base.save, base.delay); - }; + } base.clear = function () { if (base.timeout) clearTimeout(base.timeout); base.timeout = false; - }; + } base.save = function () { var saving = false; @@ -34,7 +34,7 @@ $(function(){ return; var obj = base.objects[type][id]; if (obj) obj.save(function(){ - base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + base.$el.removeClass('unsaved saving').addClass('saved'); saving = true; }); base.objects[type][id] = false; @@ -42,17 +42,18 @@ $(function(){ } if (saving) { - base.$el.removeClass('unsaved saved').addClass('saving').html('Saving'); + base.$el.removeClass('unsaved saved').addClass('saving'); } else { - base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + base.$el.removeClass('unsaved saving').addClass('saved'); } base.objects = {}; - }; + } base.init(); - }; + } window.Minotaur = new Monitor (); -}); + +})() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e15ba84..63a4496 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -629,7 +629,24 @@ iframe.embed { background-size: 100% 100%; } - +#minotaur { + position: absolute; + top: 26px; + right: 260px; + opacity: 0; +} +#minotaur .label:after { + padding: 6px; + font-size: 13px; + font-weight: 300; +} +#minotaur.saving { + background: #8fd; + opacity: 1; +} +#minotaur.saving .label:after { + content: 'SAVING'; +} .rapper { position:relative; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index e83f42a..6697aff 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -1,5 +1,9 @@ +
+ +
+ [[ if (logged_in) { ]] -- cgit v1.2.3-70-g09d2