From bc4517c6b09e03f52161dc38ca591ed0cc227d5d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 18:33:39 -0500 Subject: toggle global height --- .../javascripts/rectangles/engine/map/ui_editor.js | 1 + .../javascripts/rectangles/engine/rooms/_rooms.js | 4 ++++ .../assets/javascripts/ui/builder/BuilderInfo.js | 22 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 14 +++++++++++++- 4 files changed, 40 insertions(+), 1 deletion(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index c838b8b..44ca91d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -42,6 +42,7 @@ Map.UI.Editor = function(map){ cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) if (e.ctrlKey || e.which === 3) { + if (Rooms.regions.length == 0) return cursor.quantize(1/map.zoom) map.center.a = cursor.x.a map.center.b = -cursor.y.a diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 5686aba..46c1d7f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -81,6 +81,10 @@ base.forEach = function(f){ return base.values().forEach(f) } + + base.some = function(f){ + return base.values().some(f) + } base.map = function(f){ return base.values().map(f) diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 7606361..c25f03c 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -16,6 +16,7 @@ var BuilderInfo = View.extend({ "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', + "change [name=heightGlobal]": 'changeHeightGlobal', "click [data-role=destroy-room]": 'destroy', }, @@ -31,6 +32,7 @@ var BuilderInfo = View.extend({ this.$unitName = this.$(".unitName") this.$noSelection = this.$(".no-selection") this.$settings = this.$(".setting") + this.$heightGlobalCheckbox = this.$("[name=heightGlobal]") app.on("builder-pick-room", this.pick.bind(this)) app.on("builder-destroy-room", this.hide.bind(this)) app.on("builder-pick-nothing", this.deselect.bind(this)) @@ -40,6 +42,18 @@ var BuilderInfo = View.extend({ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) + + if (Rooms.regions.length == 0) { + this.changeHeightGlobal(true) + } + else { + var rooms = Rooms.values() + var height = rooms[0].height + var differentHeights = Rooms.some(function(room){ + return room.height != height + }) + this.changeHeightGlobal( ! differentHeights ) + } }, toggle: function(state){ @@ -141,5 +155,13 @@ var BuilderInfo = View.extend({ changeViewHeight: function(){ window.viewHeight = this.$viewHeight.unitVal( ) }, + changeHeightGlobal: function(state){ + if (typeof state == "boolean") { + this.$heightGlobalCheckbox.prop("checked", state) + window.heightIsGlobal = state + return + } + window.heightIsGlobal = this.$heightGlobalCheckbox.prop("checked") + }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 814df90..55f3219 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,8 @@ border-left: 1px solid black; transition:opacity 0.3s ease-in-out; } .reader #minimap { - right: 20px; + right: 10px; + bottom: 10px; left: auto; -webkit-transform:translateX(180px); -moz-transform:translateX(180px); @@ -2141,6 +2142,17 @@ input[type="range"]::-webkit-slider-thumb { top: 0px; } +.setting.number #room-height { + width: 60px; +} +.setting.number #room-height-global-label { + float: none; + margin-left: 6px; +} +.setting.number #room-height-global-label:after { + content: ''; +} + #mediaEditor .setting.number label { width: 40px; } -- cgit v1.2.3-70-g09d2 From af2673a3fd976327e9a92fd6b497f5f5cd82d7b3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 18:40:50 -0500 Subject: global room height toggle --- .../javascripts/rectangles/engine/map/ui_editor.js | 27 +++++++++++++++++++++- .../javascripts/rectangles/engine/scenery/undo.js | 12 +++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 44ca91d..d1b0b89 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -227,7 +227,32 @@ Map.UI.Editor = function(map){ return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (intersects.length) { + if (intersects.length && window.heightIsGlobal) { + var rooms = Rooms.values() + wheelState = wheelState || rooms[0].height + var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) + rooms.forEach(function(room){ + room.height = height + }) + + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-rooms-height", + undo: wheelState, + redo: height + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else if (intersects.length) { wheelState = wheelState || intersects[0].copy() intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 6ad9e0d..8b85d02 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -111,7 +111,17 @@ Rooms.rebuild() }, }, - + + { + type: "update-rooms-height", + undo: function(state){ + var rooms = Rooms.values() + rooms.forEach(function(room){ + room.height = state + }) + }, + }, + // { -- cgit v1.2.3-70-g09d2 From f649c04d1e9d5f18f4f9e8bdaf4f8a2c336e984c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 19:34:49 -0500 Subject: global height from the text input field --- public/assets/javascripts/ui/builder/BuilderInfo.js | 7 ++++++- public/assets/javascripts/ui/editor/EditorView.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index c25f03c..9a7dbf9 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -132,7 +132,12 @@ var BuilderInfo = View.extend({ }, changeHeight: function(e){ e.stopPropagation() - this.room.height = this.$height.unitVal() + var height = this.room.height = this.$height.unitVal() + if (window.heightIsGlobal) { + Rooms.forEach(function(room){ + room.height = height + }) + } Rooms.rebuild() }, changeX: function(e){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 3773366..4a2f712 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -50,7 +50,7 @@ var EditorView = View.extend({ readyLayout: function(data){ data.isNew = true - $('#help-button').trigger("click") + // $('#help-button').trigger("click") this.ready(data) }, -- cgit v1.2.3-70-g09d2 From d729d5f58fa4a4a30e252ab063bcf636559945b0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Nov 2014 16:43:26 -0500 Subject: soundcloud support --- Gruntfile.js | 2 + .../assets/javascripts/mx/primitives/mx.image.js | 2 +- .../javascripts/mx/primitives/mx.soundcloud.js | 122 +++++++++++++++++++++ .../rectangles/engine/scenery/_scenery.js | 5 + .../rectangles/engine/scenery/types/audio.js | 73 ++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 5 + public/assets/javascripts/ui/lib/Parser.js | 17 +-- public/assets/javascripts/ui/reader/MediaPlayer.js | 3 + views/partials/scripts.ejs | 3 + 9 files changed, 224 insertions(+), 8 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.soundcloud.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/audio.js (limited to 'public') diff --git a/Gruntfile.js b/Gruntfile.js index bba8f22..c99976d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -32,6 +32,7 @@ module.exports = function(grunt) { "public/assets/javascripts/mx/primitives/mx.video.js", "public/assets/javascripts/mx/primitives/mx.youtube.js", "public/assets/javascripts/mx/primitives/mx.vimeo.js", + "public/assets/javascripts/mx/primitives/mx.soundcloud.js", "public/assets/javascripts/rectangles/_env.js", @@ -74,6 +75,7 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/scenery/types/image.js", "public/assets/javascripts/rectangles/engine/scenery/types/text.js", "public/assets/javascripts/rectangles/engine/scenery/types/video.js", + "public/assets/javascripts/rectangles/engine/scenery/types/audio.js", "public/assets/javascripts/rectangles/engine/map/_map.js", "public/assets/javascripts/rectangles/engine/map/ui_editor.js", diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 575e9c0..b8557bf 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -12,7 +12,7 @@ MX.Image = MX.Object3D.extend({ this.backface = ops.backface || false ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") + this.backface && this.el.classList.add("backface-visible") this.el.classList.add("image") this.el.classList.add("mx-scenery") diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js new file mode 100644 index 0000000..6ac64bb --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -0,0 +1,122 @@ +MX.Soundcloud = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Soundcloud" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("audio") + this.el.classList.add("mx-scenery") + + this.el.style.backgroundRepeat = 'no-repeat' + + this.ops = ops + }, + + load: function(ops){ + if (ops) { + ops = this.ops = defaults(ops, this.ops) + } + else { + ops = this.ops + } + + this.width = ops.media.width + this.height = ops.media.height + + var tag = Parser.lookup.soundcloud.tag(ops.media) + var $iframe = $(tag) + var iframe = $iframe[0] + $iframe.css('z-index', '-1') + this.el.appendChild( iframe ) + + var overlay = this.overlay = document.createElement("div") + overlay.style.width = "100%" + overlay.style.height = "100%" + overlay.style.position = "absolute" + overlay.style.top = "0" + overlay.style.left = "0" + overlay.style.zIndex = "2" + overlay.className = "overlay" + this.el.appendChild(overlay) + + this.player = SC.Widget( iframe ) + this.player.setVolume(80) + + this.duration = 0 + + this.player.bind(SC.Widget.Events.READY, this.ready.bind(this)) +// this.player.bind(SC.Widget.Events.LOAD_PROGRESS, this.loadProgress.bind(this)) +// this.player.bind(SC.Widget.Events.PLAY_PROGRESS, this.playProgress.bind(this)) + this.player.bind(SC.Widget.Events.PLAY, this.didPlay.bind(this)) + this.player.bind(SC.Widget.Events.PAUSE, this.didPause.bind(this)) + this.player.bind(SC.Widget.Events.FINISH, this.finished.bind(this)) + }, + + ready: function(){ + if (this.media.autoplay) { + this.play() + } + + this.player.getDuration(function(duration){ + this.duration = duration + }.bind(this)) + }, + + play: function(){ + this.player.play() + }, + + pause: function(){ + this.player.pause() + }, + + toggle: function(state){ + if (typeof state === "boolean") { + if (state) this.play() + else this.pause() + } + else { + this.player.toggle() + } + }, + + seek: function(n){ + if (n < 1) { + n = n * this.duration + } + this.player.seekTo(n) + }, + + setLoop: function(state){ + this.media.loop = state + }, + + didPlay: function(){ + this.paused = false + }, + + didPause: function(){ + this.paused = true + }, + + finished: function(){ + console.log("soundcloud finished") + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { + $(".playButton").removeClass('playing') + } + }, + +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 436712a..a0f5b35 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -27,6 +27,11 @@ var Scenery = new function(){ scene_media = new Scenery.types.video (opt) break + case 'soundcloud': + if (is_mobile) return + scene_media = new Scenery.types.audio (opt) + break + case 'text': scene_media = new Scenery.types.text (opt) scene_media.focused = true diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js new file mode 100644 index 0000000..82f984e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -0,0 +1,73 @@ + +Scenery.types.audio = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'audio', + + init: function(opt){ + + opt.scale = 1.0 + + base.init.call(this, opt) + + this.build() + this.bind() + this.place(opt) + }, + + build: function(){ + this.mx = new MX.Soundcloud({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + this.mx.load() + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + this.dimensions.deserialize(data.dimensions) + }, + + play: function(){ + this.mx.play() + }, + + pause: function(){ + this.mx.pause() + }, + + toggle: function(){ + this.mx.toggle() + }, + + paused: function(){ + return this.mx.paused + }, + + muted: function(){ + return this.mx.muted + }, + + seek: function(n){ + this.mx.seek(n) + }, + + setLoop: function(shouldLoop){ + this.mx.setLoop(shouldLoop) + }, + + } + + return exports +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 9593ab7..4af94e5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -190,6 +190,10 @@ var MediaViewer = ModalView.extend({ image.src = media.url image.load() break + + case 'soundcloud': + image.src = media.thumbnail + break } $span.data("media", media) @@ -250,6 +254,7 @@ var MediaViewer = ModalView.extend({ switch (media.type) { case "video": + case "soundcloud": $floatingImg.attr('src', '/assets/img/playbutton.png') break diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index d68f58b..87d52ef 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -115,7 +115,6 @@ var Parser = { return '
' } }, - /* { type: 'soundcloud', regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i, @@ -127,24 +126,28 @@ var Parser = { + '&client_id=' + '0673fbe6fc794a7750f680747e863b10', success: function(result) { + // console.log(result) done({ url: url, type: "soundcloud", token: result.id, - thumbnail: "", - title: "", - width: 100, - height: 100, + thumbnail: result.artwork_url || result.user.avatar_url, + title: result.title, + description: result.user.username, + width: 166, + height: 166, }) } }); }, tag: function (media) { - return '' } - }, { + }, + /* + { type: 'link', regex: /^http.+/i, fetch: function(url, done) { diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 42e7596..f5a0d2c 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -49,6 +49,9 @@ var MediaPlayer = FormView.extend({ return false } } + else if (media.type == "text") { + return false + } this.bind(scenery) this.$el.addClass("active") diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index d5e8e5d..7391d36 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -26,6 +26,7 @@ + @@ -65,6 +66,7 @@ + @@ -130,3 +132,4 @@ [[ } ]] + -- cgit v1.2.3-70-g09d2 From 5b9b94d0dac5ddb70a5ea51b948cde40ae898202 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Nov 2014 17:08:53 -0500 Subject: fix click/bind behavior --- .../javascripts/rectangles/engine/scenery/_scenery.js | 3 ++- public/assets/javascripts/ui/editor/MediaEditor.js | 18 +++++++++++++++--- public/assets/javascripts/ui/editor/TextEditor.js | 3 ++- public/assets/javascripts/ui/reader/MediaPlayer.js | 14 ++++++++++++-- 4 files changed, 31 insertions(+), 7 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index a0f5b35..d03e0e1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -34,7 +34,7 @@ var Scenery = new function(){ case 'text': scene_media = new Scenery.types.text (opt) - scene_media.focused = true + scene_media.focused = !! opt.newMedia break } base.list[scene_media.id] = scene_media @@ -42,6 +42,7 @@ var Scenery = new function(){ } base.addNextToWall = function(opt){ + opt.newMedia = true opt.media = base.nextMedia opt.index = opt.index || 0 var scene_media = base.add(opt) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index de93f6e..21759d6 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -51,7 +51,7 @@ var MediaEditor = FormView.extend({ }, pick: function(scenery) { - if (this.scenery) { + if (this.scenery && scenery !== this.scenery) { this.unbind() } @@ -74,15 +74,17 @@ var MediaEditor = FormView.extend({ switch (media.type) { case "image": - this.$(".image").show() this.$(".video").hide() + this.$(".audio").hide() + this.$(".image").show() break case "youtube": case "vimeo": case "video": - this.$(".video").show() this.$(".image").hide() + this.$(".audio").hide() + this.$(".video").show() this.$playButton.toggleClass("paused", ! this.scenery.paused()) this.$autoplay.prop('checked', !! media.autoplay) @@ -90,6 +92,15 @@ var MediaEditor = FormView.extend({ this.$mute.prop('checked', !! media.mute) this.$keyframe.val( Number(media.keyframe || 0) ) break + + case "soundcloud": + this.$(".image").hide() + this.$(".video").hide() + this.$(".audio").show() + this.$playButton.toggleClass("paused", ! this.scenery.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + break } }, @@ -161,6 +172,7 @@ var MediaEditor = FormView.extend({ unbind: function(){ if (this.scenery) { + this.scenery.focused = false if (this.tainted && this.scenery.media) { this.scenery.media.title = this.$name.val() this.scenery.media.description = this.$description.val() diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index d897f91..53d5b9f 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -96,6 +96,7 @@ var TextEditor = FormView.extend({ unbind: function(){ if (this.scenery) { + this.scenery.focused = false if (this.tainted) { Minotaur.watch( app.router.editorView.settings ) } @@ -119,7 +120,7 @@ var TextEditor = FormView.extend({ }, pick: function(scenery){ - if (this.scenery) { + if (this.scenery && scenery !== this.scenery) { this.unbind() } diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index f5a0d2c..8424d9c 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -61,8 +61,9 @@ var MediaPlayer = FormView.extend({ switch (media.type) { case "image": - this.$(".image").show() this.$(".video").hide() + this.$(".audio").hide() + this.$(".image").show() // this.$widthDimension.html( Number(media.widthDimension) || "" ) // this.$heightDimension.html( Number(media.heightDimension) || "" ) @@ -73,13 +74,22 @@ var MediaPlayer = FormView.extend({ case "youtube": case "vimeo": case "video": - this.$(".video").show() this.$(".image").hide() + this.$(".audio").hide() + this.$(".video").show() this.$playButton.toggleClass("paused", ! this.scenery.paused()) this.$muteButton.toggleClass("muted", this.scenery.muted()) break + + case "soundcloud": + this.$(".image").hide() + this.$(".video").hide() + this.$(".audio").show() + + this.$playButton.toggleClass("paused", ! this.scenery.paused()) + break } return true }, -- cgit v1.2.3-70-g09d2 From 61343137b4600aa225318de352b06de6aa4d1707 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Nov 2014 17:29:25 -0500 Subject: audio settings --- public/assets/javascripts/mx/primitives/mx.soundcloud.js | 3 +++ public/assets/javascripts/ui/lib/Parser.js | 3 +-- views/controls/editor/media-editor.ejs | 8 +++++--- views/controls/reader/media-player.ejs | 2 +- 4 files changed, 10 insertions(+), 6 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js index 6ac64bb..75286d9 100644 --- a/public/assets/javascripts/mx/primitives/mx.soundcloud.js +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -17,6 +17,7 @@ MX.Soundcloud = MX.Object3D.extend({ this.el.classList.add("mx-scenery") this.el.style.backgroundRepeat = 'no-repeat' + this.paused = true this.ops = ops }, @@ -62,6 +63,8 @@ MX.Soundcloud = MX.Object3D.extend({ }, ready: function(){ + this.seek( this.media.keyframe || 0 ) + if (this.media.autoplay) { this.play() } diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 87d52ef..8bc0310 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -132,8 +132,7 @@ var Parser = { type: "soundcloud", token: result.id, thumbnail: result.artwork_url || result.user.avatar_url, - title: result.title, - description: result.user.username, + title: result.user.username + " - " + result.title, width: 166, height: 166, }) diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 1f4f720..99746e8 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -11,7 +11,7 @@ -
+
@@ -21,15 +21,17 @@ ion-volume-mute -->
-
+
+ +
-
+

diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs index 9872592..cac9992 100644 --- a/views/controls/reader/media-player.ejs +++ b/views/controls/reader/media-player.ejs @@ -1,6 +1,6 @@
- + -- cgit v1.2.3-70-g09d2 From 7e496b61eb04d1e8775004ccb5c3b15a68a0ee66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Nov 2014 18:24:17 -0500 Subject: tumblr parser --- public/assets/javascripts/ui/lib/Parser.js | 73 ++++++++++++++++++++++++++++++ public/assets/javascripts/util.js | 1 + views/controls/editor/media-drawer.ejs | 1 + 3 files changed, 75 insertions(+) (limited to 'public') diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 8bc0310..ececa78 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -167,6 +167,79 @@ var Parser = { */ ], + tumblr: function(url, cb){ + var domain = url.replace(/^https?:\/\//,"").split("/")[0] + $.ajax({ + type: 'GET', + url: "http://" + domain + "/api/read", + dataType: "jsonp", + data: { + format: "json", + }, + success: function(data){ + var media_list = [] + var blog = data.tumblelog + + data.posts.forEach(parse) + cb(parse) + + function parse(post){ + var media, caption, url + switch (post.type) { + case 'photo': + caption = stripHTML(post['photo-caption']) + if (post.photos.length) { + post.photos.forEach(function(photo){ + var media = { + url: photo['photo-url-1280'], + type: "image", + token: "", + thumbnail: photo['photo-url-500'], + description: caption, + width: parseInt(photo.width), + height: parseInt(photo.height), + } + media_list.push(media) + }) + } + else { + media = { + url: post['photo-url-1280'], + type: "image", + token: "", + thumbnail: photo['photo-url-500'], + description: caption, + width: parseInt(post.width), + height: parseInt(post.height), + } + media_list.push(media) + } + break + case 'video': + url = post['video-source'] + if (url.indexOf("http") !== 0) { break } + if (Parser.lookup.youtube.regex.test(url) { + var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0]; + var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg" + media = { + url: post['video-source'], + type: "youtube", + token: id, + thumbnail: thumb, + title: stripHTML(post['video-caption']), + width: 640, + height: 360, + } + media_list.push(media) + } + break + } + }) + console.log(result) + } + }) + }, + parse: function (url, cb) { var matched = Parser.integrations.some(function(integration){ if (integration.regex.test(url)) { diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 1749836..609bdd6 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -10,6 +10,7 @@ if (window.$) { function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } +function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") } diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 5846bf4..2c40a4d 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -23,6 +23,7 @@
+
-- cgit v1.2.3-70-g09d2 From 2774191a6ab9a96574db5814a8056575add4c0bb Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 14 Nov 2014 21:49:33 -0500 Subject: load a tumblr url --- public/assets/javascripts/ui/editor/MediaViewer.js | 16 ++++++++++++++++ public/assets/javascripts/ui/lib/Parser.js | 13 ++++++++----- views/controls/editor/media-drawer.ejs | 4 +--- 3 files changed, 25 insertions(+), 8 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 4af94e5..f3d75bf 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -16,6 +16,7 @@ var MediaViewer = ModalView.extend({ 'click #randomize': "randomize", 'click .mediaContainer': "pick", 'click .viewMore': "load", + 'keydown #tumblr-url': 'enterTumblrUrl', }, initialize: function(opt){ @@ -37,6 +38,8 @@ var MediaViewer = ModalView.extend({ this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") + + this.$tumblrUrl = this.$("#tumblr-url") }, wallpaperToggle: function(){ @@ -290,4 +293,17 @@ var MediaViewer = ModalView.extend({ $ants.addClass('edit') _followCursor(e) }, + + enterTumblrUrl: function(e){ + e.stopPropagation() + if (e.keyCode !== 13) { return } + var url = this.$tumblrUrl.val() + Parser.tumblr(url, function(media_list){ + console.log(media_list) + this.$foundMediaContainer.empty() + media_list.reverse().forEach(function(media){ + this.add(media, this.$foundMediaContainer) + }.bind(this)) + }.bind(this)) + }, }) diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index ececa78..411f425 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -169,6 +169,9 @@ var Parser = { tumblr: function(url, cb){ var domain = url.replace(/^https?:\/\//,"").split("/")[0] + if (domain.indexOf(".") == -1) { + domain += ".tumblr.com" + } $.ajax({ type: 'GET', url: "http://" + domain + "/api/read", @@ -181,7 +184,7 @@ var Parser = { var blog = data.tumblelog data.posts.forEach(parse) - cb(parse) + cb(media_list) function parse(post){ var media, caption, url @@ -207,7 +210,7 @@ var Parser = { url: post['photo-url-1280'], type: "image", token: "", - thumbnail: photo['photo-url-500'], + thumbnail: post['photo-url-500'], description: caption, width: parseInt(post.width), height: parseInt(post.height), @@ -218,7 +221,7 @@ var Parser = { case 'video': url = post['video-source'] if (url.indexOf("http") !== 0) { break } - if (Parser.lookup.youtube.regex.test(url) { + if (Parser.lookup.youtube.regex.test(url)) { var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0]; var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg" media = { @@ -234,8 +237,8 @@ var Parser = { } break } - }) - console.log(result) + } +// console.log(post) } }) }, diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index e4ae935..df7910c 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -23,9 +23,7 @@
- +
-- cgit v1.2.3-70-g09d2 From a68382199889a931e5271e80b4e62a8066d4da23 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 14 Nov 2014 22:03:35 -0500 Subject: no filename from url plz --- public/assets/javascripts/ui/editor/MediaEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 21759d6..6068c48 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -67,7 +67,7 @@ var MediaEditor = FormView.extend({ // console.log(media) - this.$name.val(media.title || filenameFromUrl(media.url) ) + this.$name.val(media.title) // || filenameFromUrl(media.url) ) this.$description.val(media.description) this.setDimensions() this.$units.val( "ft" ) -- cgit v1.2.3-70-g09d2 From 84d606cc4c56778ae7e6b8b7d86e100131717a53 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 14 Nov 2014 22:11:14 -0500 Subject: randomize button uses active media pane --- public/assets/javascripts/ui/editor/MediaViewer.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'public') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index f3d75bf..029252d 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -23,7 +23,7 @@ var MediaViewer = ModalView.extend({ this.__super__.initialize.call(this) this.parent = opt.parent - this.$myMedia = this.$(".myMedia") + this.$myMedia = this.$(".myMedia").addClass('active') this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") @@ -45,7 +45,7 @@ var MediaViewer = ModalView.extend({ wallpaperToggle: function(){ this.$wallpaperMedia.addClass("active") this.$foundMedia.addClass("inactive") - this.$myMedia.addClass("inactive") + this.$myMedia.addClass("inactive").removeClass('active') this.$("a").removeClass("active") this.$foundToggle.addClass("active") }, @@ -53,7 +53,7 @@ var MediaViewer = ModalView.extend({ foundToggle: function(){ this.$wallpaperMedia.removeClass("active") this.$foundMedia.addClass("active") - this.$myMedia.addClass("inactive") + this.$myMedia.addClass("inactive").removeClass('active') this.$("a").removeClass("active") this.$foundToggle.addClass("active") }, @@ -61,7 +61,7 @@ var MediaViewer = ModalView.extend({ userToggle: function(){ this.$wallpaperMedia.removeClass("active") this.$foundMedia.removeClass("active") - this.$myMedia.removeClass("inactive") + this.$myMedia.removeClass("inactive").addClass('active') this.$("a").removeClass("active") this.$userToggle.addClass("active") }, @@ -123,7 +123,7 @@ var MediaViewer = ModalView.extend({ }, randomize: function(){ - var $divs = this.$myMediaContainer.find(".mediaContainer").toArray() + var $divs = this.$(".active .container").find(".mediaContainer").toArray() if ($divs.length < 3) { $divs = $divs.concat( this.$foundMediaContainer.find(".mediaContainer").toArray() ) } -- cgit v1.2.3-70-g09d2