From 06f4b34b8670d6dcebfd7b000dd2921ca778dfae Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 25 Jun 2014 00:22:50 -0400 Subject: yt, vimeo, video api --- public/assets/javascripts/ui/builder/BuilderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/builder/BuilderView.js') diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 33aface..b42d3e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -2,7 +2,7 @@ var BuilderView = View.extend({ el: "#builderView", - action: "/api/layouts/", + action: "/api/layout/", events: { }, -- cgit v1.2.3-70-g09d2 From 9825b711480eb5b6022ce6b56b8a6914c5f43e52 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 14 Jul 2014 13:05:57 -0400 Subject: pick initial frame --- .../assets/javascripts/mx/primitives/mx.video.js | 12 ++++-- .../assets/javascripts/mx/primitives/mx.vimeo.js | 43 ++++++++++++++++++---- .../assets/javascripts/mx/primitives/mx.youtube.js | 21 ++++++++--- .../javascripts/rectangles/engine/scenery/move.js | 6 +-- public/assets/javascripts/ui/_router.js | 12 +++--- .../javascripts/ui/builder/BuilderSettings.js | 4 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- public/assets/javascripts/ui/editor/EditorView.js | 4 +- public/assets/javascripts/ui/editor/MediaEditor.js | 17 ++++++--- public/assets/javascripts/ui/editor/MediaUpload.js | 8 ++-- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/lib/FormView.js | 4 +- public/assets/javascripts/ui/reader/ReaderView.js | 2 +- public/assets/javascripts/ui/site/DocumentModal.js | 4 +- .../assets/javascripts/ui/site/EditProfileModal.js | 4 +- .../assets/javascripts/ui/site/EditProjectModal.js | 4 +- public/assets/javascripts/ui/site/LayoutsModal.js | 6 +-- public/assets/stylesheets/app.css | 10 ++--- views/controls/editor/media-editor.ejs | 2 +- 20 files changed, 111 insertions(+), 62 deletions(-) (limited to 'public/assets/javascripts/ui/builder/BuilderView.js') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index b1b9f6b..f92fe9f 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -28,8 +28,8 @@ MX.Video = MX.Object3D.extend({ this.paused = true this.player = document.createElement('video') - this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this)) - this.player.addEventListener("error", $.proxy(this.error, this)) + this.player.addEventListener("loadedmetadata", this.ready.bind(this)) + this.player.addEventListener("error", this.error.bind(this)) this.player.width = this.width this.player.height = this.height this.player.src = this.media.url @@ -62,7 +62,10 @@ MX.Video = MX.Object3D.extend({ }, seek: function(n){ - this.player.currentTime = n + if (n < 1) { + n = n * this.duration() + } + this.player.currentTime = n }, duration: function(){ @@ -71,6 +74,9 @@ MX.Video = MX.Object3D.extend({ finished: function(){ console.log("video finished") + if (this.media.bound) { + $(".playButton").removeClass('playing') + } }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index e558bc3..5a373ff 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -26,30 +26,34 @@ MX.Vimeo = MX.Object3D.extend({ load: function (ops) { var uid = 'player-' + Uid () - var preload = document.createElement("div") + var preload = document.createElement("iframe") preload.id = uid + preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&player_id=" + uid) preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" preload.style.width = this.media.width + "px" preload.style.height = this.media.height + "px" + preload.style.border = "0" preload.style.pointerEvents = "none" preload.className = "preload" this.el.appendChild(preload) - this.player = $f(preload) - this.player.addEvent('ready', $.proxy(this.ready, this)) + + this.player.addEvent('ready', this.ready.bind(this)) }, ready: function(){ console.log("vimeo ready") // wait until ready before binding events. other events: play, pause - this.player.addEvent('finish', $.proxy(this.finished, this)) + this.player.addEvent('play', this.onPlay.bind(this)) + this.player.addEvent('pause', this.onPause.bind(this)) + this.player.addEvent('finish', this.finished.bind(this)) // so annoying that this is async!! - this.player.api('getDuration', $.proxy(function(n){ + this.player.api('getDuration', function(n){ console.log("vimeo duration", n) this.player.duration = n - }, this)) + }.bind(this)) }, @@ -68,14 +72,39 @@ MX.Vimeo = MX.Object3D.extend({ }, seek: function(n){ - this.player.api('seekTo', n) + if (n < 1) { + n = n * this.duration() + } + this.player.api('seekTo', max(0, n-1)) + if (this.paused) { + this.paused = false + this.play() + setTimeout(function(){ + this.pause() + }.bind(this), 1000) + } }, duration: function(){ return this.player.duration }, + onPlay: function(){ + if (this.paused) { + this.pause() + } + }, + + onPause: function(){ + if (! this.paused) { + this.play() + } + }, + finished: function(){ + if (this.media.bound) { + $(".playButton").removeClass('playing') + } } }) diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index cc0ec0a..a31a24d 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -56,9 +56,9 @@ MX.Youtube = MX.Object3D.extend({ width: this.width, height: this.height, events: { - onReady: $.proxy(this.ready, this), - onError: $.proxy(this.error, this), - onStateChange: $.proxy(this.statechange, this), + onReady: this.ready.bind(this), + onError: this.error.bind(this), + onStateChange: this.statechange.bind(this), }, playerVars: { autohide: 1, @@ -93,10 +93,11 @@ MX.Youtube = MX.Object3D.extend({ this.finished() break case 1: // play - this.paused = false + if (this.paused) { + this.pause() + } break case 2: // pause - this.paused = true break case 3: // buffering break @@ -106,15 +107,20 @@ MX.Youtube = MX.Object3D.extend({ }, play: function(){ + this.paused = false this.player.playVideo() }, pause: function(){ + this.paused = true this.player.pauseVideo() }, seek: function(n, allowSeekAhead){ - allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true + if (n < 1) { + n = n * this.duration() + } + allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true this.player.seekTo(n, true) // set to false if seeking manually }, @@ -124,6 +130,9 @@ MX.Youtube = MX.Object3D.extend({ finished: function(){ console.log("youtube finished") + if (this.media.bound) { + $(".playButton").removeClass('playing') + } } }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index aa7ddd1..6229162 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -27,10 +27,8 @@ Scenery.move = function(base){ return } - if (editor.permissions.pick) { - // load the modal - app.router.editorView.mediaEditor.pick(base) - } + // load the modal + app.router.editorView.mediaEditor.pick(base) if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index b3e868a..886b8be 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -189,13 +189,13 @@ var SiteRouter = Router.extend({ var name = e ? $(e.currentTarget).data("name") : name - confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){ - this.documentModal.destroy(name, $.proxy(function(){ - AlertModal.alert("Document deleted!", $.proxy(function(){ + confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){ + this.documentModal.destroy(name, function(){ + AlertModal.alert("Document deleted!", function(){ window.location.href = "/about" - }, this)) - }, this)) - }, this)) + }.bind(this)) + }.bind(this)) + }.bind(this)) // this.documentModal.destroy(name) }, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 9fcd55f..6006868 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -57,7 +57,7 @@ var BuilderSettings = FormView.extend({ destroy: function(){ var msg = "Are you sure you want to delete the layout " + sanitize(this.$name.val()) + "?" - ConfirmModal.confirm(msg, $.proxy(function(){ + ConfirmModal.confirm(msg, function(){ $.ajax({ url: this.destroyAction, type: "delete", @@ -66,7 +66,7 @@ var BuilderSettings = FormView.extend({ window.location.href = "/layout" } }) - }, this)) + }.bind(this)) }, toggle: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index b42d3e7..a83bf43 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -20,7 +20,7 @@ var BuilderView = View.extend({ name = sanitize(name) - $.get(this.action + name, $.proxy(this.ready, this)) + $.get(this.action + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 1d68b1b..887c894 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -65,7 +65,7 @@ var EditorSettings = FormView.extend({ destroy: function(){ var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?" - ConfirmModal.confirm(msg, $.proxy(function(){ + ConfirmModal.confirm(msg, function(){ $.ajax({ url: this.destroyAction, type: "delete", @@ -74,7 +74,7 @@ var EditorSettings = FormView.extend({ window.location.href = "/project" } }) - }, this)) + }.bind(this)) }, toggle: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 017e241..322637e 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -20,12 +20,12 @@ var EditorView = View.extend({ load: function(name){ name = sanitize(name) - $.get(this.projectAction + name, $.proxy(this.ready, this)) + $.get(this.projectAction + name, this.ready.bind(this)) }, loadLayout: function(layout){ layout = sanitize(layout) - $.get(this.layoutAction + layout, $.proxy(this.readyLayout, this)) + $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 47a938b..29ec9e5 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -3,7 +3,8 @@ var MediaEditor = FormView.extend({ el: "#mediaEditor", events: { - "click .play": "togglePlaying", + "click .playButton": "togglePlaying", + "change [name=keyframe]": "seek", }, initialize: function(opt){ @@ -20,7 +21,7 @@ var MediaEditor = FormView.extend({ this.$units = this.$("[name=units]") // video fields - this.$playButton = this.$(".play") + this.$playButton = this.$(".playButton") this.$loop = this.$("[name=loop]") this.$mute = this.$("[name=mute]") this.$keyframe = this.$("[name=keyframe]") @@ -39,7 +40,7 @@ var MediaEditor = FormView.extend({ if (this.scenery) { this.unbind() } - + this.bind(scenery) this.$el.addClass("active") @@ -71,17 +72,23 @@ var MediaEditor = FormView.extend({ this.$mute this.$keyframe */ - - break } + + }, + + seek: function(){ + var n = parseFloat( this.$keyframe.val() ) + this.scenery.seek(n) }, bind: function(scenery){ this.scenery = scenery + this.scenery.media.bound = true }, unbind: function(){ + this.scenery.media.bound = false this.scenery = null }, diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index b7fea07..86bf767 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -39,7 +39,7 @@ var MediaUpload = View.extend({ var url = this.$url.val() this.$url.val("") - Parser.parse(url, $.proxy(function(media){ + Parser.parse(url, function(media){ if (! media) { alert("Not a valid image/video link") return @@ -53,8 +53,8 @@ var MediaUpload = View.extend({ url: this.createAction, data: media, }) - request.done($.proxy(this.add, this)) - }, this)) + request.done(this.add.bind(this)) + }.bind(this)) }, handleFileSelect: function(e) { @@ -109,7 +109,7 @@ var MediaUpload = View.extend({ processData: false, contentType: false, }) - request.done($.proxy(this.add, this)) + request.done(this.add.bind(this)) }, add: function(media){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 88c3b18..264ed7c 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -40,12 +40,12 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", $.proxy(this.populate, this)) + $.get("/api/media/user", this.populate.bind(this)) }, populate: function(data){ this.loaded = true - data && data.forEach($.proxy(this.add, this)) + data && data.forEach(this.add.bind(this)) this.__super__.show.call(this) }, diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 0106ce0..219952d 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -26,9 +26,9 @@ var FormView = View.extend({ this.$errorList.append('
' + errors[i] + '
'); } this.$errors.css("opacity", 1.0); - setTimeout($.proxy(function(){ + setTimeout(function(){ this.$errors.show().css("opacity", 1.0); - }, this), 200) + }.bind(this), 200) } }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index add1ea1..bbdd437 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -15,7 +15,7 @@ var ReaderView = View.extend({ $(".logo,.topLinks,#editorView").hide() } name = sanitize(name) - $.get(this.projectAction + name, $.proxy(this.ready, this)) + $.get(this.projectAction + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/site/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js index 6f16169..067977d 100644 --- a/public/assets/javascripts/ui/site/DocumentModal.js +++ b/public/assets/javascripts/ui/site/DocumentModal.js @@ -20,7 +20,7 @@ var DocumentModal = ModalFormView.extend({ this.action = this.updateAction - $.get("/api/docs", { name: name }, $.proxy(function(data){ + $.get("/api/docs", { name: name }, function(data){ if (data.isNew) { this.action = this.createAction } @@ -31,7 +31,7 @@ var DocumentModal = ModalFormView.extend({ this.$("[name='new_name']").val(name) this.show() - }, this)) + }.bind(this)) }, success: function(res){ diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js index 6b89ad8..b023923 100644 --- a/public/assets/javascripts/ui/site/EditProfileModal.js +++ b/public/assets/javascripts/ui/site/EditProfileModal.js @@ -6,7 +6,7 @@ var EditProfileModal = ModalFormView.extend({ load: function(){ this.reset() - $.get("/api/profile", $.proxy(function(data){ + $.get("/api/profile", function(data){ console.log(data) for (var i in data) { @@ -23,7 +23,7 @@ var EditProfileModal = ModalFormView.extend({ } this.show() - }, this)) + }.bind(this)) }, validate: function(){ diff --git a/public/assets/javascripts/ui/site/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js index 356d8b7..20baa54 100644 --- a/public/assets/javascripts/ui/site/EditProjectModal.js +++ b/public/assets/javascripts/ui/site/EditProjectModal.js @@ -31,7 +31,7 @@ var EditProjectModal = ModalView.extend({ var fields = this.$form.serializeArray() var request = $.post(this.action, $.param(fields)); - request.done($.proxy(function (response) { + request.done(function (response) { if (response.error) { this.$errors.show(); for (var key in response.error.errors) { @@ -42,7 +42,7 @@ var EditProjectModal = ModalView.extend({ else { window.location.href = "/profile" } - }, this)); + }.bind(this)); } }) diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index d474aa7..3b9e6cd 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -8,18 +8,18 @@ var LayoutsIndex = View.extend({ load: function(type){ this.$templates.children("span").remove() - $.get(this.action, $.proxy(this.populate, this)) + $.get(this.action, this.populate.bind(this)) }, populate: function(data){ - data.forEach($.proxy(function(room){ + data.forEach(function(room){ var $span = $("") // $span.html(JSON.stringify(room)) $span.data("slug", room.slug) $span.css("background-image", "url(" + room.photo + ")") this.$templates.append($span) - }, this)) + }.bind(this)) this.show() } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4296223..500f444 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1220,23 +1220,23 @@ input[type="range"]::-webkit-slider-thumb { padding-right: 5px; } -.setting .play { +.setting .playButton { color: white; background: black; border-radius: 50px; padding: 6px 7px 5px; cursor: pointer; } -.setting .play .icon-play { +.setting .playButton .icon-play { display: inline; } -.setting .play.playing .icon-play { +.setting .playButton.playing .icon-play { display: none; } -.setting .play .icon-pause { +.setting .playButton .icon-pause { display: none; } -.setting .play.playing .icon-pause { +.setting .playButton.playing .icon-pause { display: inline; } diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 12ab2b4..46b8a42 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -11,7 +11,7 @@
- + -- cgit v1.2.3-70-g09d2 From d81c96616859a57d5d5d63a6ae7b1492a5c4974a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 16 Jul 2014 16:30:33 -0400 Subject: display room dimensions --- .../javascripts/rectangles/engine/map/ui_editor.js | 8 ++- .../javascripts/rectangles/engine/rooms/_rooms.js | 1 + .../assets/javascripts/ui/builder/BuilderInfo.js | 70 ++++++++++++++++++++++ .../javascripts/ui/builder/BuilderSettings.js | 5 +- .../assets/javascripts/ui/builder/BuilderView.js | 4 ++ .../assets/javascripts/ui/editor/EditorSettings.js | 1 + public/assets/javascripts/ui/editor/MediaEditor.js | 1 + public/assets/stylesheets/app.css | 11 ++++ server/lib/schemas/Layout.js | 1 + views/controls/builder/info.ejs | 7 ++- views/partials/scripts.ejs | 3 +- 11 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 public/assets/javascripts/ui/builder/BuilderInfo.js (limited to 'public/assets/javascripts/ui/builder/BuilderView.js') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index ea7a356..577ea32 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -53,16 +53,21 @@ Map.UI.Editor = function(map){ if (intersects.length && base.permissions.destroy) { base.mouse.down = false Rooms.remove(intersects[0]) + app.tube("builder-destroy-room", intersects[0]) return } else if (intersects.length && (base.permissions.move || base.permissions.resize)) { base.dragging = intersects[0] base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) base.dragging.rect.translation.sides = base.resizing + app.tube("builder-pick-room", intersects[0]) } else if (base.permissions.create) { base.creating = true } + else if (intersects.length) { + app.tube("builder-pick-room", intersects[0]) + } if (e.shiftKey && base.dragging) { base.dragging.rect.quantize(10/map.zoom) @@ -109,7 +114,8 @@ Map.UI.Editor = function(map){ if (cursor.height() > side_min && cursor.width() > side_min) { cursor.x.abs().quantize(1) cursor.y.abs().quantize(1) - Rooms.add_with_rect( cursor ) + var room = Rooms.add_with_rect( cursor ) + app.tube("builder-pick-room", room) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 48931e9..e0033e3 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -26,6 +26,7 @@ var Rooms = new function(){ height: 500 }) base.add(room) + return room } base.remove = function(room){ diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js new file mode 100644 index 0000000..53a122d --- /dev/null +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -0,0 +1,70 @@ + +var BuilderInfo = View.extend({ + el: "#builderInfo", + + events: { + "keydown": 'stopPropagation', + "change [name=x]": 'changePosition', + "change [name=z]": 'changePosition', + "change [name=width]": 'changeDimensions', + "change [name=depth]": 'changeDimensions', + "change [name=height]": 'changeDimensions', + "change [name=units]": 'changeUnits', + "change [name=resolution]": 'changeResolution', + "change [name=camera-height]": 'changeCameraHeight', + }, + + initialize: function(opt){ + this.parent = opt.parent + this.$x = this.$("[name=x]") + this.$z = this.$("[name=z]") + this.$width = this.$("[name=width]") + this.$depth = this.$("[name=depth]") + this.$height = this.$("[name=height]") + this.$units = this.$("[name=units]") + this.$resolution = this.$("[name=resolution]") + this.$cameraHeight = this.$("[name=camera-height]") + app.on("builder-pick-room", this.pick.bind(this)) + app.on("builder-destroy-room", this.destroy.bind(this)) + }, + + toggle: function(state){ + this.$el.toggleClass("active", state) + }, + + show: function(){ + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + room: null, + + pick: function(room){ + this.room = room + this.$width.val( room.rect.x.length() ) + this.$depth.val( room.rect.y.length() ) + this.$height.val( room.height ) + this.$x.val( room.rect.x.a ) + this.$z.val( room.rect.y.a ) + + console.log(room) + }, + + destroy: function(room){ + this.room = null + this.hide() + }, + + changeDimensions: function(){ + }, + + changeUnits: function(){ + }, + + changeCameraHeight: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 6006868..c551f95 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -7,6 +7,7 @@ var BuilderSettings = FormView.extend({ destroyAction: "/api/layout/destroy", events: { + "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-layout']": 'save', "click [data-role='clone-layout']": 'clone', @@ -69,8 +70,8 @@ var BuilderSettings = FormView.extend({ }.bind(this)) }, - toggle: function(){ - this.$el.toggleClass("active") + toggle: function(state){ + this.$el.toggleClass("active", state) }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a83bf43..7a92738 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -8,6 +8,7 @@ var BuilderView = View.extend({ }, initialize: function(){ + this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) }, @@ -26,5 +27,8 @@ var BuilderView = View.extend({ ready: function(data){ this.settings.load(data) }, + + hideExtras: function(){ + } }) diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 887c894..13a6f60 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -7,6 +7,7 @@ var EditorSettings = FormView.extend({ destroyAction: "/api/project/destroy", events: { + "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-project']": 'save', "click [data-role='clone-project']": 'clone', diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index f9eaad5..a075e6b 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -3,6 +3,7 @@ var MediaEditor = FormView.extend({ el: "#mediaEditor", events: { + "keydown": 'stopPropagation', "click [data-role=play-media]": "togglePaused", "mousedown [name=keyframe]": "stopPropagation", "mousedown": "stopPropagation", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 2e3358a..3e6dced 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1247,6 +1247,17 @@ input[type="range"]::-webkit-slider-thumb { position: relative; top: 5px; } +.setting.number.halflines { + height: 30px; +} +.setting.number.halflines input[type=text] { + float: left; + width: 50px; +} +.setting.number.halflines label:nth-of-type(2) { + text-align: center; +} + .setting.number input[type=text] { width: 150px; } diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index b096b85..33a5262 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -25,6 +25,7 @@ var LayoutSchema = new mongoose.Schema({ }, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, + cameraHeight: { type: Number, default: 180 }, 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 af0a76d..2cc8132 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -11,6 +11,12 @@
+
+ + + + +
@@ -29,7 +35,6 @@
-
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 47a027e..2173cd5 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -72,9 +72,10 @@ + - + -- cgit v1.2.3-70-g09d2 From f20841988ccd27780d3801e4a6c32bf9afcc9368 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 17 Jul 2014 03:04:28 -0400 Subject: conversions between feet/meters/pixels --- public/assets/javascripts/app.js | 9 +- .../javascripts/mx/extensions/mx.movements.js | 2 +- .../assets/javascripts/ui/builder/BuilderInfo.js | 112 +++++++++++++++++++-- .../assets/javascripts/ui/builder/BuilderView.js | 1 + public/assets/javascripts/util.js | 1 - public/assets/stylesheets/app.css | 3 +- server/lib/schemas/Layout.js | 2 +- views/controls/builder/info.ejs | 25 ++--- 8 files changed, 123 insertions(+), 32 deletions(-) (limited to 'public/assets/javascripts/ui/builder/BuilderView.js') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 0b441c7..1419d1d 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -17,8 +17,6 @@ else { var scene, cam, map; -var viewHeight = window.viewHeight || 186 - var app = new function(){} app.mode = { editor: false, builder: false } @@ -99,4 +97,11 @@ app.position = function(obj){ return pos } +app.defaults = { + viewHeight: window.viewHeight = 186, + units: app.units = "ft", + footResolution: 36, + meterResolution: 100, +} + document.addEventListener('DOMContentLoaded', app.init) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index f176e8b..191088f 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -1,6 +1,6 @@ -MX.Movements = function (cam, viewHeight) { +MX.Movements = function (cam) { var moveForward, moveLeft, diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 53a122d..9bbd385 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -5,28 +5,35 @@ var BuilderInfo = View.extend({ events: { "keydown": 'stopPropagation', "change [name=x]": 'changePosition', - "change [name=z]": 'changePosition', + "change [name=y]": 'changePosition', "change [name=width]": 'changeDimensions', "change [name=depth]": 'changeDimensions', "change [name=height]": 'changeDimensions', "change [name=units]": 'changeUnits', "change [name=resolution]": 'changeResolution', - "change [name=camera-height]": 'changeCameraHeight', + "change [name=viewHeight]": 'changeViewHeight', }, initialize: function(opt){ this.parent = opt.parent this.$x = this.$("[name=x]") - this.$z = this.$("[name=z]") + this.$y = this.$("[name=y]") this.$width = this.$("[name=width]") this.$depth = this.$("[name=depth]") this.$height = this.$("[name=height]") this.$units = this.$("[name=units]") - this.$resolution = this.$("[name=resolution]") - this.$cameraHeight = this.$("[name=camera-height]") + this.$viewHeight = this.$("[name=viewHeight]") + this.$unitName = this.$(".unitName") app.on("builder-pick-room", this.pick.bind(this)) app.on("builder-destroy-room", this.destroy.bind(this)) }, + + load: function(data){ + this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) + this.$units.val( "ft" ) + this.$unitName.html( "ft" ) + this.$resolution.val( app.defaults.footResolution ) + }, toggle: function(state){ this.$el.toggleClass("active", state) @@ -44,11 +51,11 @@ var BuilderInfo = View.extend({ pick: function(room){ this.room = room - this.$width.val( room.rect.x.length() ) - this.$depth.val( room.rect.y.length() ) - this.$height.val( room.height ) - this.$x.val( room.rect.x.a ) - this.$z.val( room.rect.y.a ) + this.$width.unitVal( room.rect.x.length() ) + this.$depth.unitVal( room.rect.y.length() ) + this.$height.unitVal( room.height ) + this.$x.unitVal( room.rect.x.a ) + this.$y.unitVal( room.rect.y.a ) console.log(room) }, @@ -59,12 +66,95 @@ var BuilderInfo = View.extend({ }, changeDimensions: function(){ +// this.$width.unitVal( room.rect.x.length() ) +// this.$depth.unitVal( room.rect.y.length() ) +// this.$height.unitVal( room.height ) }, changeUnits: function(){ + app.units = this.$units.val() + this.$('.units').resetUnitVal() }, - changeCameraHeight: function(){ + changeViewHeight: function(){ + window.viewHeight = this.$viewHeight.unitVal( ) }, }) + +$.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 ) + } + 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.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 (type === "m") { + 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/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 7a92738..555cd58 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -26,6 +26,7 @@ var BuilderView = View.extend({ ready: function(data){ this.settings.load(data) + this.info.load(data) }, hideExtras: function(){ diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index b58da1f..58dcc3a 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -176,4 +176,3 @@ function bitcount(v) { v = (v & 0x33333333) + ((v >>> 2) & 0x33333333); return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24; } - diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3e6dced..61a4fa9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1252,10 +1252,11 @@ input[type="range"]::-webkit-slider-thumb { } .setting.number.halflines input[type=text] { float: left; - width: 50px; + width: 60px; } .setting.number.halflines label:nth-of-type(2) { text-align: center; + width: 30px; } .setting.number input[type=text] { diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index 33a5262..e3f2616 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -25,7 +25,7 @@ var LayoutSchema = new mongoose.Schema({ }, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, - cameraHeight: { type: Number, default: 180 }, + 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 2cc8132..d92d34c 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -1,40 +1,35 @@
- +
- +
- +
- - - + + +
-
- - -
-
- - + +
-- cgit v1.2.3-70-g09d2