From d3985f1d76d8d70b5d1e618d1b3150c8baf4d467 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 14:57:55 -0400 Subject: fix settings hiding --- public/assets/javascripts/ui/editor/MediaViewer.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 436c0cb..15245cf 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -22,17 +22,17 @@ var MediaViewer = ModalView.extend({ }, foundToggle: function(){ - this.foundMedia.addClass("active"); - this.myMedia.addClass("inactive"); + this.$foundMedia.addClass("active"); + this.$myMedia.addClass("inactive"); this.$("a").removeClass("active"); - this.foundToggle.addClass("active"); + this.$foundToggle.addClass("active"); }, userToggle: function(){ - this.foundMedia.removeClass("active"); - this.myMedia.removeClass("inactive"); + this.$foundMedia.removeClass("active"); + this.$myMedia.removeClass("inactive"); this.$("a").removeClass("active"); - this.userToggle.addClass("active"); + this.$userToggle.addClass("active"); }, show: function(){ -- cgit v1.2.3-70-g09d2 From 9888e712a14cc2cf3af98c637f596bfe3cee2566 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 18:05:14 -0400 Subject: esc cancels more things --- .../assets/javascripts/mx/extensions/mx.movements.js | 15 ++++++++++++++- public/assets/javascripts/ui/editor/MediaEditor.js | 1 + public/assets/javascripts/ui/editor/MediaViewer.js | 18 ++---------------- public/assets/javascripts/ui/editor/WallpaperPicker.js | 10 +++++++--- 4 files changed, 24 insertions(+), 20 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cea3325..c02c285 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -99,7 +99,20 @@ MX.Movements = function (cam) { break case 27: // esc - map && map.toggle() + if (Scenery.nextMedia) { + Scenery.nextMedia = null + app.tube('cancel-scenery') + } + else if (Scenery.nextWallpaper) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + app.controller.mediaViewer.hide() + } + else { + map && map.toggle && map.toggle() + } break } }) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index eaa3134..59fdc70 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -181,6 +181,7 @@ var MediaEditor = FormView.extend({ var scenery = this.scenery this.hide() Scenery.remove(scenery.id) + Scenery.resize.hide() }.bind(this)) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 15245cf..0ac6755 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -136,19 +136,6 @@ var MediaViewer = ModalView.extend({ return } -// else { -// this.picked = {} -// this.picked.media = media -// this.picked.image = image -// } -// }, -// -// drag: function(e){ -// if (! this.pickedMedia) return -// var media = this.picked.media -// var image = this.picked.image -// this.picked = null - this.hide() var $ants = $('.ants'); @@ -156,8 +143,6 @@ var MediaViewer = ModalView.extend({ Scenery.nextMedia = media -// console.log(media.type) - switch (media.type) { case "video": $floatingImg.attr('src', '/assets/img/playbutton.png') @@ -185,12 +170,13 @@ var MediaViewer = ModalView.extend({ $floatingImg.attr('src', '') $(window).off('mousemove', _followCursor) $(window).off('mousedown', _hideCursor) + app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) + app.on('cancel-scenery', _hideCursor) $ants.addClass('edit') _followCursor(e) }, - }) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 0dd2921..3756e88 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -97,11 +97,15 @@ var WallpaperPicker = UploadView.extend({ left: (e.pageX + 10) + 'px', }); } - $(window).on('mousemove', _followCursor) - $(window).one('click', function () { + function _hideCursor (e) { $(window).off('mousemove', _followCursor) + $(window).off('click', _hideCursor) + app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() - }); + } + $(window).on('mousemove', _followCursor) + $(window).one('click', _hideCursor); + app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); }) -- cgit v1.2.3-70-g09d2 From 8000ede551baafd5b08539288757126668e8c5e7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Oct 2014 12:06:58 -0400 Subject: loading found media --- public/assets/javascripts/ui/editor/MediaUpload.js | 1 + public/assets/javascripts/ui/editor/MediaViewer.js | 50 +++++++++++++++++++--- views/controls/editor/media-drawer.ejs | 37 +--------------- 3 files changed, 46 insertions(+), 42 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 92cf2bd..971fb15 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -56,6 +56,7 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) this.parent.mediaViewer.add(media) + this.parent.mediaViewer.$deleteMedia.show() }, beforeUpload: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 0ac6755..e2ed341 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -14,10 +14,10 @@ var MediaViewer = ModalView.extend({ initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent - this.$foundMedia = this.$(".foundMedia") this.$myMedia = this.$(".myMedia") - this.$foundToggle = this.$(".foundToggle") this.$userToggle = this.$(".userToggle") + this.$foundMedia = this.$(".foundMedia") + this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") }, @@ -38,6 +38,7 @@ var MediaViewer = ModalView.extend({ show: function(){ if (! this.loaded) { this.load() + this.loadTrending() } else { this.__super__.show.call(this) @@ -51,13 +52,50 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", this.populate.bind(this)) + $.get("/api/media/user", function(data){ + this.populate() + }.bind(this)) + }, + + loadTrending: function(){ + var trending_imagery = [ + 'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg', + 'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg', + 'http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg', + 'http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg', + 'http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg', + 'http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg', + 'http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg', + 'http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg', + 'http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg', + ] + trending_imagery.forEach(function(url){ + var loaded = false + var img = new Image () + img.onload = function(){ + if (loaded) return + loaded = true + var media = { + type: 'image', + url: url, + width: img.naturalWidth, + height: img.naturalHeight, + } + this.add(media, this.$foundMedia) + }.bind(this) + img.src = url + if (img.complete && ! loaded) { img.onload() } + }.bind(this)) }, populate: function(data){ this.loaded = true if (data && data.length) { data.forEach(this.add.bind(this)) + this.$deleteMedia.show() } else { this.$deleteMedia.hide() @@ -65,7 +103,8 @@ var MediaViewer = ModalView.extend({ this.__super__.show.call(this) }, - add: function(media){ + add: function(media, $container){ + $container = $container || this.$myMedia var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -92,8 +131,7 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - this.$(".myMedia").prepend($span) - this.$deleteMedia.show() + $container.prepend($span) }, deleteIsArmed: false, diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index dbab237..3d95fb9 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -18,45 +18,10 @@ X

Your Media – Found Media


+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7afac43f11d1ccae6f3b8d1febcd293db11bd2b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Oct 2014 15:42:21 -0400 Subject: randomly place images on the walls --- .../rectangles/engine/scenery/randomize.js | 77 ++++++++++++++++++++++ .../javascripts/rectangles/models/surface.js | 4 +- public/assets/javascripts/ui/editor/MediaViewer.js | 21 ++++-- public/assets/javascripts/util.js | 5 +- views/partials/scripts.ejs | 1 + 5 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/randomize.js (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js new file mode 100644 index 0000000..4f1144a --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js @@ -0,0 +1,77 @@ +/* + // get the list of media we want to place + var media_data = $(".mediaContainer").toArray().map(function(el){ + return $(el).data("media") + }) + Scenery.randomize( media_data ) +*/ + +Scenery.randomize = function (media_data) { + var media_list = media_data.map(function(media){ + var width, height + if (media.width > media.height) { + width = Math.min(300, media.width) + height = media.height/media.width * width + } + else { + height = Math.min(300, media.height) + width = media.width/media.height * height + } + return { + dimensions: new vec2( width, height ), + media: media, + } + }) + + // get a list of all walls + var walls = {} + Walls.forEach(function(wall){ + walls[wall.id] = wall + }) + + // remove the walls that already have stuff on them + Scenery.forEach(function(scenery){ + delete walls[scenery.wall.id] + }) + + var wall_ids = _.keys(walls) + if (! wall_ids.length) { + return + } + + // randomize walls + shuffle(wall_ids) + + // assign each of the media to the walls, until we run out of either + media_list.some(function(media){ + if (wall_ids.length == 0) { + return true + } + + var i, fits = -1 + + for (i = 0; i < wall_ids.length; i++) { + if (walls[wall_ids[i]].surface.fits(media.dimensions)) { + // walls[wall_ids[i]] + fits = i + break + } + } + + if (fits != -1) { + var wall = walls[wall_ids[fits]] + wall_ids.splice(fits, 1) + + Scenery.add({ + media: media.media, + wall: wall, + index: 0, + }) + } + else { + // artwork won't fit anywhere?? + } + + return false + }) +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index 53977c8..c85682a 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -36,7 +36,7 @@ Surface.prototype.fits = function(v){ var faces = this.faces var scratch - if (this.bounds.x.b < v.a || this.bounds.y.b < v.b) { + if (this.bounds.width() < v.a || this.bounds.height() < v.b) { return null } for (var i = 0; i < faces.length; i++) { @@ -46,7 +46,7 @@ } scratch = new Rect (0,0,0,0) for (var i = 0; i < faces.length; i++) { - if (faces[i].y.length() < v.b) { + if (faces[i].height() < v.b) { continue } scratch.x.a = faces[i].x.a diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e2ed341..b51d8f2 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -3,6 +3,7 @@ var MediaViewer = ModalView.extend({ el: ".mediaDrawer.mediaViewer", destroyAction: "/api/media/destroy", usesFileUpload: true, + loaded: false, events: { 'click .foundToggle': "foundToggle", @@ -19,7 +20,7 @@ var MediaViewer = ModalView.extend({ this.$foundMedia = this.$(".foundMedia") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") - }, + }, foundToggle: function(){ this.$foundMedia.addClass("active"); @@ -52,9 +53,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", function(data){ - this.populate() - }.bind(this)) + $.get("/api/media/user", this.populate.bind(this)) }, loadTrending: function(){ @@ -90,11 +89,20 @@ var MediaViewer = ModalView.extend({ if (img.complete && ! loaded) { img.onload() } }.bind(this)) }, + + randomize: function(){ + var media_data = $(".mediaContainer").toArray().map(function(el){ + return $(el).data("media") + }) + Scenery.randomize( media_data ) + }, populate: function(data){ this.loaded = true if (data && data.length) { - data.forEach(this.add.bind(this)) + data.forEach(function(media){ + this.add(media, this.$myMedia) + }.bind(this)) this.$deleteMedia.show() } else { @@ -104,7 +112,6 @@ var MediaViewer = ModalView.extend({ }, add: function(media, $container){ - $container = $container || this.$myMedia var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -131,7 +138,7 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + $container.prepend($span) }, deleteIsArmed: false, diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 5a89c48..76c5c7b 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -92,9 +92,10 @@ function smoothstep(min,max,n){ } function shuffle(a){ + var r, swap for (var i = a.length; i > 0; i--){ - var r = randint(i) - var swap = a[i-1] + r = randint(i) + swap = a[i-1] a[i-1] = a[r] a[r] = swap } diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 11512b9..349d0d0 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -51,6 +51,7 @@ + -- cgit v1.2.3-70-g09d2 From 1258966c2879faffc7148b2d58ebc91985c6afc2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 18:10:27 -0400 Subject: no media warning --- public/assets/javascripts/ui/editor/MediaUpload.js | 1 - public/assets/javascripts/ui/editor/MediaViewer.js | 4 ++++ views/controls/editor/media-drawer.ejs | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 669248e..3f425c3 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -42,7 +42,6 @@ var MediaUpload = UploadView.extend({ } media._csrf = $("[name=_csrf]").val() - console.log(media) var request = $.ajax({ type: "post", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b51d8f2..1414e16 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -20,6 +20,7 @@ var MediaViewer = ModalView.extend({ this.$foundMedia = this.$(".foundMedia") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") + this.$noMedia = this.$(".noMedia") }, foundToggle: function(){ @@ -103,9 +104,11 @@ var MediaViewer = ModalView.extend({ data.forEach(function(media){ this.add(media, this.$myMedia) }.bind(this)) + this.$noMedia.hide() this.$deleteMedia.show() } else { + this.$noMedia.show() this.$deleteMedia.hide() } this.__super__.show.call(this) @@ -176,6 +179,7 @@ var MediaViewer = ModalView.extend({ if ($(".myMedia .mediaContainer").length == 0) { this.$deleteMedia.hide() + this.$noMedia.show() this.deleteArmed(false) } return diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 10a160e..dedfbb0 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -20,6 +20,7 @@

+
You have no media yet. Upload some!
-- cgit v1.2.3-70-g09d2 From 43b34606dcdc7996e8069998b2ff7d9f40c4dc25 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Oct 2014 19:18:48 -0400 Subject: disable room movement when clicking in things with .vvbox class --- public/assets/javascripts/rectangles/models/surface.js | 2 +- public/assets/javascripts/ui/builder/BuilderInfo.js | 1 + public/assets/javascripts/ui/builder/BuilderSettings.js | 1 + public/assets/javascripts/ui/builder/BuilderToolbar.js | 1 + public/assets/javascripts/ui/editor/Collaborators.js | 1 + public/assets/javascripts/ui/editor/EditorSettings.js | 1 + public/assets/javascripts/ui/editor/MediaUpload.js | 1 + public/assets/javascripts/ui/editor/MediaViewer.js | 1 + public/assets/javascripts/ui/editor/TextEditor.js | 1 + 9 files changed, 9 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index c85682a..3a6c449 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -108,7 +108,7 @@ this.clamp_delta( this.bounds, dimension, position, delta ) var new_delta = delta.clone() - if (this.clamp_delta(old_bounds, dimension, position, new_delta).eq(delta)) { + if (old_bounds && this.clamp_delta(old_bounds, dimension, position, new_delta).eq(delta)) { return old_bounds } diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index e6b7e97..f7753a3 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -3,6 +3,7 @@ var BuilderInfo = View.extend({ el: "#builderInfo", events: { + "mousedown": "stopPropagation", "keydown": 'stopPropagation', "change [name=x]": 'changeX', "change [name=y]": 'changeY', diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 7ae6294..fe67e9b 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: { + "mousedown": "stopPropagation", "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-layout']": 'clickSave', diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 2eb7590..6c218be 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -3,6 +3,7 @@ var BuilderToolbar = View.extend({ el: "#builderToolbar", events: { + "mousedown": "stopPropagation", "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-layout-settings']": 'toggleSettings', "click [data-role='undo']": 'undo', diff --git a/public/assets/javascripts/ui/editor/Collaborators.js b/public/assets/javascripts/ui/editor/Collaborators.js index 452ad15..b57510d 100644 --- a/public/assets/javascripts/ui/editor/Collaborators.js +++ b/public/assets/javascripts/ui/editor/Collaborators.js @@ -9,6 +9,7 @@ var Collaborators = ModalFormView.extend({ destroyAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/destroy" }, events: { + "mousedown": "stopPropagation", "keydown [name=email]": "enterSubmit", "click [data-role=destroy-collaborator]": "destroy", }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 0c08369..45a2e43 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: { + "mousedown": "stopPropagation", "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='show-collaborators']": 'showCollaborators', diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index bab4679..fddfefc 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -6,6 +6,7 @@ var MediaUpload = UploadView.extend({ uploadAction: "/api/media/upload", events: { + 'mousedown': "stopPropagation", "keydown .url": "enterSubmit", }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 1414e16..c18fb49 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({ loaded: false, events: { + 'mousedown': "stopPropagation", 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0aa5aad..c8879b3 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -92,6 +92,7 @@ var TextEditor = FormView.extend({ this.unbind() } + this.parent.settings.hide() Scenery.resize.show(scenery) Scenery.hovering = true -- cgit v1.2.3-70-g09d2 From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 19:16:45 -0400 Subject: load more on media drawer and some other stuff --- .../javascripts/mx/extensions/mx.movements.js | 3 +- .../javascripts/rectangles/engine/map/draw.js | 6 +-- .../javascripts/rectangles/engine/rooms/_walls.js | 19 +++++---- .../javascripts/rectangles/engine/rooms/mover.js | 2 + .../javascripts/rectangles/util/constants.js | 3 +- public/assets/javascripts/rectangles/util/wheel.js | 6 ++- .../assets/javascripts/ui/builder/BuilderInfo.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 1 + public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/MediaUpload.js | 4 +- public/assets/javascripts/ui/editor/MediaViewer.js | 33 +++++++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 5 +-- public/assets/stylesheets/app.css | 49 +++++++++++++--------- server/lib/api/media.js | 13 ++++-- server/lib/api/projects.js | 2 + server/lib/schemas/Project.js | 1 + views/controls/editor/media-drawer.ejs | 28 +++++++------ 17 files changed, 116 insertions(+), 62 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 2b7e671..268a1c7 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -223,8 +223,7 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - console.log(deltaX != 0 && deltaY != 0) - cam.rotationY += -deltaX / 20 + cam.rotationY += deltaX / 20 pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 7eb6e7c..eceda3c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -177,11 +177,11 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(200) - for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) { + var quant = sides.clone().quantize(MAP_GRID_SIZE) + for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { line(x, sides.y.a, x, sides.y.b) } - for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) { + for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 0da3b9a..119a659 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -134,19 +134,24 @@ }) } + base.luminance = function(rgb){ + rgb = rgb || Walls.colors.wall + var rgb_max = Math.max.apply(0, rgb) + var rgb_min = Math.min.apply(255, rgb) + return (rgb_max + rgb_min ) / 2 + } + base.setColor = { wall: function(rgb){ var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) var rgbColor = rgb_string(rgb) + + if (Rooms.mover.room) { + $("#header").toggleClass("black", base.luminance() < 100) + $("body").css("background-color", rgbColor) + } - var rgb_max = Math.max.apply(0, rgb) - var rgb_min = Math.min.apply(255, rgb) - var luminance = (rgb_max + rgb_min ) / 2 - - $("#header").toggleClass("black", luminance < 128) - $("body").css("background-color", rgbColor) - Walls.colors.wall = rgb Walls.list.forEach(function(wall){ wall.outline(rgbaColor, null) diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..a2d2223 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -43,6 +43,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") + $("#header").removeClass("black") $("body").css("background-color", "transparent") base.room = null } @@ -59,6 +60,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] + $("#header").toggleClass("black", Walls.luminance() < 100) $("body").css("background-color", rgb_string( Walls.colors.wall )) app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a38325e..3bc314c 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -21,7 +21,8 @@ var height_min = 200, side_max = 5000, resize_margin = 8, cursor_amp = 1.5, - DEFAULT_PICTURE_WIDTH = 400 + DEFAULT_PICTURE_WIDTH = 350, + MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3 diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 64aaa64..712d470 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -38,7 +38,11 @@ function wheel (opt) { var deltaX = 0, deltaY = 0; // WebKit - if ( event.wheelDeltaY ) { + if ( event.deltaY ) { + deltaY -= event.deltaY * opt.ratio + deltaX -= event.deltaX * opt.ratio + } + else if ( event.wheelDeltaY ) { deltaY -= event.wheelDeltaY * opt.ratio deltaX -= event.wheelDeltaX * opt.ratio } diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 196eca6..67834e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -34,7 +34,7 @@ var BuilderInfo = View.extend({ }, load: function(data){ - this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) + this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..e2cb53c 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -148,6 +148,7 @@ var EditorSettings = FormView.extend({ fd.append( "name", this.$name.val() ) fd.append( "description", this.$description.val() ) fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) + fd.append( "viewHeight", window.viewHeight ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6aff601..ccd6c63 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -41,6 +41,7 @@ var EditorView = View.extend({ $("#map").hide() this.settings.load(data) + this.info.load(data) }, readyLayout: function(data){ diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index fddfefc..9799f99 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) - this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia) - this.parent.mediaViewer.$deleteMedia.show() - this.parent.mediaViewer.$noMedia.hide() + this.parent.mediaViewer.addUploadedMedia(media) }, beforeUpload: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index c18fb49..2e76bec 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -4,23 +4,29 @@ var MediaViewer = ModalView.extend({ destroyAction: "/api/media/destroy", usesFileUpload: true, loaded: false, - + perPage: 12, + offset: 0, + events: { 'mousedown': "stopPropagation", 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", + 'click .viewMore': "load", }, initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent this.$myMedia = this.$(".myMedia") + this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") this.$foundMedia = this.$(".foundMedia") + this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") + this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, @@ -55,7 +61,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", this.populate.bind(this)) + $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) }, loadTrending: function(){ @@ -85,7 +91,7 @@ var MediaViewer = ModalView.extend({ width: img.naturalWidth, height: img.naturalHeight, } - this.add(media, this.$foundMedia) + this.add(media, this.$foundMediaContainer) }.bind(this) img.src = url if (img.complete && ! loaded) { img.onload() } @@ -100,22 +106,34 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ - this.loaded = true if (data && data.length) { + if (data.length < this.perPage) { + this.$viewMore.hide() + } data.forEach(function(media){ - this.add(media, this.$myMedia) + this.add(media, this.$myMediaContainer) + this.offset += 1 }.bind(this)) this.$noMedia.hide() this.$deleteMedia.show() } else { + this.$viewMore.hide() this.$noMedia.show() this.$deleteMedia.hide() } + this.loaded = true this.__super__.show.call(this) }, - add: function(media, $container){ + addUploadedMedia: function(media){ + this.parent.mediaViewer.$deleteMedia.show() + this.parent.mediaViewer.$noMedia.hide() + this.add(media, this.$myMedia, true) // prepend + this.offset += 1 + }, + + add: function(media, $container, prepend){ var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -142,7 +160,8 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + if (prepend) $container.prepend($span) + else $container.append($span) }, deleteIsArmed: false, diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c8879b3..b559ba5 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -28,16 +28,15 @@ var TextEditor = FormView.extend({ }, toggle: function(state){ - $("#keyhint").fadeOut(200) - this.$el.toggleClass("active", state) if (state) { + $("#keyhint").fadeOut(200) Scenery.nextMedia = { type: 'text', width: 600, height: 450, scale: 0.5, - font: { family: 'Lato', size: 12, align: 'left' }, + font: { family: 'Lato', size: 24, align: 'left', color: "#000" }, } this.createMode(true) } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 849c994..eec671a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -414,6 +414,17 @@ iframe.embed { border-top: 1px solid black; } +.mediaDrawer .viewMore { + clear: both; + float: none; + text-decoration: none; + font-size: 22px; + display: block; + text-align: center; + padding: 40px; + border: 0; + border-top: 1px solid black; +} .holder { display: table-cell; @@ -2152,7 +2163,7 @@ form li textarea { right: 20px; top: 20px; z-index: 20; - background: #f9f9f9; + background: white; width: 75px; color: black; border: 1px solid black; @@ -2511,22 +2522,22 @@ a[data-role="forgot-password"] { padding: 50px 0; } .page .viewMore.btn { - text-decoration: none; - font-size: 18px; - padding: 18px 0; -} -.footer a, .footer span { -margin: 9px; -} -#keyhint { - display:none; -} -.projectList .projectItem { - width:100%; - margin: 20px 0; -} -.projectList .room { -width: 100%; -height: 260px; -} + text-decoration: none; + font-size: 18px; + padding: 18px 0; + } + .footer a, .footer span { + margin: 9px; + } + #keyhint { + display:none; + } + .projectList .projectItem { + width:100%; + margin: 20px 0; + } + .projectList .room { + width: 100%; + height: 260px; + } } \ No newline at end of file diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 1eb08c1..643ba92 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -10,13 +10,20 @@ var _ = require('lodash'), var media = { user: function(req, res){ + var offset = Number(req.query.offset) || 0 + var limit = Math.min( Number(req.query.limit), 50 ) || 20 var query = { user_id: req.user._id } if (req.query.tag) { query.tag = req.query.tag } - Media.find(query, function(err, media){ - res.json(media || []) - }) + console.log(offset, limit) + Media.find(query) + .sort({'created_at': -1}) + .skip(offset) + .limit(limit) + .exec(function(err, media){ + res.json(media || []) + }) }, create: function(req, res){ diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 47e0458..e357285 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -36,6 +36,7 @@ var projects = { data.name = util.sanitize(data.name) data.slug = util.slugify(data.name) + "-" + (+new Date) data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) @@ -94,6 +95,7 @@ var projects = { data.slug = util.slugify(data.name) + "-" + (+new Date) } data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.updated_at = new Date () _.extend(doc, data) diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index dd50da6..f7b8de0 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -32,6 +32,7 @@ var ProjectSchema = new mongoose.Schema({ media: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, + viewHeight: { type: Number }, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d800426..5cc659e 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -1,14 +1,3 @@ - - -
-
- Upload File - -
- ~ or ~
- - -
@@ -16,13 +5,28 @@
X +

Your Media – Found Media


You have no media yet. Upload some!
+ + view more
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-
+ +
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1b152e66ad8d7aa1c5511152991e648308f8918b Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:00:59 -0400 Subject: fixed-position close box fixed-position close box &c --- public/assets/javascripts/mx/extensions/mx.movements.js | 5 ++++- public/assets/javascripts/ui/editor/MediaViewer.js | 11 +++++++++-- public/assets/javascripts/ui/lib/ModalView.js | 8 ++++++++ public/assets/stylesheets/app.css | 16 +++++++++++++++- server/lib/api/media.js | 1 - views/controls/editor/media-drawer.ejs | 4 ++-- 6 files changed, 38 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 268a1c7..5ba5d69 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -127,9 +127,12 @@ MX.Movements = function (cam) { Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } - else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() } + else if (app.controller.lightControl.$el.hasClass('active')) { + app.controller.lightControl.hide() + } else { app.controller.toolbar.toggleMap() } diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2e76bec..10819af 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({ loaded: false, perPage: 12, offset: 0, + fixedClose: true, events: { 'mousedown': "stopPropagation", @@ -106,6 +107,7 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ + var scrollTop = this.loaded ? $('.myMedia .container').height() : 0 if (data && data.length) { if (data.length < this.perPage) { this.$viewMore.hide() @@ -122,8 +124,13 @@ var MediaViewer = ModalView.extend({ this.$noMedia.show() this.$deleteMedia.hide() } - this.loaded = true - this.__super__.show.call(this) + if (this.loaded) { + this.$el.delay(300).animate({ scrollTop: scrollTop }, 200) + } + else { + this.loaded = true + this.__super__.show.call(this) + } }, addUploadedMedia: function(media){ diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index d9b518a..1c41861 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -18,6 +18,10 @@ var ModalView = View.extend({ if (! this.usesFileUpload) { $(".fileUpload").removeClass("active") } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } this.$el.addClass("active") $("body").addClass("noOverflow") @@ -25,6 +29,10 @@ var ModalView = View.extend({ hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } this.$el.removeClass("active"); $("body").removeClass("noOverflow"); }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eec671a..038b0c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2169,7 +2169,21 @@ form li textarea { border: 1px solid black; box-shadow: -3px 4px black; line-height: 75px; - + text-align: center; +} +#fixed_close { + display: none; + transform: translateY(-200px) translateZ(0); +} +#fixed_close.active { + animation: visibility 0.2s; + animation-fill-mode: forwards; + display: block; +} +@keyframes visibility { + 100% { + transform: translateY(0px) translateZ(0); + } } diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 643ba92..4e2fad5 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -16,7 +16,6 @@ var media = { if (req.query.tag) { query.tag = req.query.tag } - console.log(offset, limit) Media.find(query) .sort({'created_at': -1}) .skip(offset) diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 5cc659e..7996f84 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -3,9 +3,9 @@
-
- X +X +

Your Media – Found Media


-- cgit v1.2.3-70-g09d2 From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:04:00 -0400 Subject: cursor that follows mouse --- .../javascripts/mx/extensions/mx.movements.js | 14 ++++---- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/rectangles/engine/rooms/mover.js | 3 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/HelpCursor.js | 38 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 33 ++++++++++++++----- public/assets/stylesheets/app.css | 18 +++++++--- views/controls/editor/media-drawer.ejs | 13 +++++++- views/controls/editor/settings.ejs | 2 ++ views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 5ba5d69..b158625 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -226,12 +226,14 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - 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 () { diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 119a659..f2348f0 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -135,7 +135,7 @@ } base.luminance = function(rgb){ - rgb = rgb || Walls.colors.wall + 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 diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index a2d2223..dd63db2 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 ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index ccd6c63..05d1bec 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 }) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..842e871 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,38 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + messages: { + start: "Welcome to Vvalls!", + move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + }, + shown: {}, + + initialize: function(){ + $(window).mousemove(function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }.bind(this)) + this.show("start") + }, + + show: function(name){ + if (name) this.showMessage(name) + this.$el.show() + }, + + hide: function(){ + this.$el.hide() + }, + + showMessage: function(name){ + if (+(this.shown[name] || 0) < 2) { + this.$el.html(this.messages[name]) + this.shown[name] = (+this.shown[name] || 0) + 1 + } + else { + this.$el.html("") + } + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 10819af..b270be5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({ 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(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index cf98170..0140dc6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -901,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; } @@ -1271,7 +1271,7 @@ border-left: 1px solid black; .noMedia { margin: 40px; } -.foundMedia { +.foundMedia, .wallpaperMedia { position:absolute; top:0; left:0; @@ -1282,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%); } @@ -1718,6 +1717,17 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; } +#helpCursor { + position: fixed; + max-width: 200px; + font-size: 13px; + color: black; + background: #fff; + margin: 8px 0 0 8px; + padding: 4px; + font-weight: 500; + z-index: 22; +} .settings.info { right: auto; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 7996f84..d1e2c99 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -6,7 +6,13 @@ X
-

Your Media – Found Media


+

+ Your Media + – Found Media + +


@@ -29,4 +35,9 @@
+ +
+ +
+
\ No newline at end of file diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 7c40a75..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,3 +1,5 @@ + +

Room Settings

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..05f4b58 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:56:50 -0400 Subject: more help text --- .../assets/javascripts/ui/editor/EditorSettings.js | 3 ++ public/assets/javascripts/ui/editor/HelpCursor.js | 6 ++-- .../assets/javascripts/ui/editor/LightControl.js | 32 +++++++++++++++++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 2 ++ public/assets/javascripts/ui/editor/Presets.js | 24 +--------------- .../javascripts/ui/editor/WallpaperPicker.js | 1 + public/assets/stylesheets/app.css | 7 +++-- views/controls/builder/info.ejs | 2 +- views/controls/editor/light-control.ejs | 1 - 9 files changed, 43 insertions(+), 35 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index ac361a7..e47739b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.show("settings") + } }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index b2f411d..4a6e616 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -7,8 +7,8 @@ var HelpCursor = View.extend({ media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", presets: "These presets will affect on all the walls. Click some of them to see the walls change.", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", - colors: "", - settings: "This is where you publish your project.", + 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.", }, shown: {}, @@ -21,7 +21,7 @@ var HelpCursor = View.extend({ }, show: function(name){ - if (name) this.showMessage(name) + this.showMessage(name) this.$el.show() }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 34a5a51..bb4454a 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -5,14 +5,28 @@ var LightControl = View.extend({ 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", }, + + 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.$("#color-picker").append( this.colorPicker.canvas ) @@ -27,6 +41,15 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + }, modes: [ "wall", "outline", "floor", "ceiling" ], @@ -54,6 +77,7 @@ var LightControl = View.extend({ }, show: function(){ + this.parent.cursor.show("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b270be5..df77fb1 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.show("media") this.__super__.show.call(this) } }, @@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true + this.parent.cursor.show("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 1e70aa2..6222e33 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -7,22 +7,6 @@ var Presets = View.extend({ "click .swatches span": "selectColor", }, - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - presets: { wireframe: { wall: [255,255,255], @@ -52,13 +36,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) }, toggle: function(state){ @@ -66,6 +43,7 @@ var Presets = View.extend({ }, show: function(){ + this.parent.cursor.show("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..541ab31 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { + this.parent.cursor.show("wallpaper") this.load() } else { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0140dc6..250ae67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1485,10 +1485,11 @@ border-left: 1px solid black; padding-bottom: 6px; } -#presets .colors { +.vvbox .colors { + max-width: 170px; margin-bottom: 5px; } -#presets .colors span { +.vvbox .colors span { display: inline-block; font-size: 0; width: 20px; @@ -1498,7 +1499,7 @@ border-left: 1px solid black; cursor: pointer; transition: transform 0.2s; } -#presets .colors span:hover { +.vvbox .colors span:hover { transform: translateX(3px) translateY(-3px); } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 54bb38e..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -3,7 +3,7 @@
Click and drag to make a new room. - Click a room to select it. + Click a room to select, move or resize it.

Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4604a7a..99d68f5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,7 +1,6 @@

Edit Room Colors

-

Preset Colors

-- cgit v1.2.3-70-g09d2 From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 17:09:45 -0400 Subject: help messages on button, starting drag stuff --- public/assets/javascripts/app.js | 4 -- .../javascripts/mx/extensions/mx.movements.js | 12 ++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 54 ++++++++++++++-------- .../assets/javascripts/ui/editor/LightControl.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/editor/Presets.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 2 +- 8 files changed, 52 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') 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/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index b158625..40e786d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -129,9 +129,19 @@ MX.Movements = function (cam) { } else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() + $(".inuse").removeClass("inuse") } else if (app.controller.lightControl.$el.hasClass('active')) { app.controller.lightControl.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() @@ -242,7 +252,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 diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e47739b..c0c140f 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) if (state) { - this.parent.cursor.show("settings") + this.parent.cursor.message("settings") } }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 4a6e616..8bfaef8 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -2,6 +2,8 @@ var HelpCursor = View.extend({ el: "#helpCursor", + active: false, + messages: { start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", @@ -10,33 +12,47 @@ var HelpCursor = View.extend({ 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.", }, - shown: {}, initialize: function(){ - $(window).mousemove(function(e){ - this.el.style.left = e.pageX + "px" - this.el.style.top = e.pageY + "px" - }.bind(this)) - this.show("start") + $('#help-button').click(this.toggle.bind(this)); }, - - show: function(name){ - this.showMessage(name) + + 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) }, - - hide: function(){ + + stop: function(){ + this.active = false this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + move: function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }, + + show: function(name){ + this.showMessage(name) }, - showMessage: function(name){ - if (+(this.shown[name] || 0) < 2) { - this.$el.html(this.messages[name]) - this.shown[name] = (+this.shown[name] || 0) + 1 - } - else { - this.$el.html("") - } + message: function(name){ + if (! this.active) return + this.$el.html(this.messages[name]) }, }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index bb4454a..10f8d2c 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -77,7 +77,7 @@ var LightControl = View.extend({ }, show: function(){ - this.parent.cursor.show("colors") + this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index df77fb1..e196e41 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 6222e33..35b5b58 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -43,7 +43,7 @@ var Presets = View.extend({ }, show: function(){ - this.parent.cursor.show("presets") + this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 9583376..ad30ad8 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { - this.parent.cursor.show("wallpaper") + this.parent.cursor.message("wallpaper") this.load() } else { -- cgit v1.2.3-70-g09d2 From 9ae4f45f24e3e79aeb32e0a128ee798381b80569 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 15 Oct 2014 22:35:48 -0400 Subject: more help text --- public/assets/javascripts/defaults.js | 2 +- public/assets/javascripts/rectangles/engine/rooms/builder.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 8 +++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 5 ++++- public/assets/javascripts/ui/editor/Presets.js | 4 ++-- public/assets/stylesheets/app.css | 2 ++ 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') 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/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/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 8bfaef8..9b6807e 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -5,9 +5,11 @@ var HelpCursor = View.extend({ active: false, messages: { - start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", - media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", - presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + 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.", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e196e41..8cae4a4 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -77,6 +77,7 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.cursor.message('start') }, load: function(){ @@ -232,7 +233,8 @@ var MediaViewer = ModalView.extend({ } this.hide() - + this.parent.cursor.message('addmedia') + var $ants = $('.ants'); var $floatingImg = $('.floatingImg'); @@ -267,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 35b5b58..4edc957 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -39,11 +39,11 @@ var Presets = View.extend({ }, toggle: function(state){ - this.$el.toggleClass("active", state); + this.$el.toggleClass("active", state) + this.parent.cursor.message(state ? "presets" : "start") }, show: function(){ - this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 250ae67..1ab1198 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1676,6 +1676,7 @@ input[type="range"]::-webkit-slider-thumb { cursor:pointer; border-bottom: 1px transparent solid; } +.presets span:hover, .presets span.active { text-decoration: underline; } @@ -1728,6 +1729,7 @@ input[type="range"]::-webkit-slider-thumb { padding: 4px; font-weight: 500; z-index: 22; + display: none; } .settings.info { -- cgit v1.2.3-70-g09d2 From f007cec1adce5fee283acc165aaab634c1819564 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 7 Nov 2014 17:22:57 -0500 Subject: scroll to top of media list after upload --- public/assets/javascripts/ui/editor/MediaUpload.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 65778dd..9ae90e3 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -63,7 +63,7 @@ var MediaUpload = UploadView.extend({ }, error: function(error){ - console.log(error) + console.log(error) alert(error.errors.media.message) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 8cae4a4..dd17613 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -154,9 +154,11 @@ var MediaViewer = ModalView.extend({ }, addUploadedMedia: function(media){ - this.parent.mediaViewer.$deleteMedia.show() - this.parent.mediaViewer.$noMedia.hide() + this.$deleteMedia.show() + this.$noMedia.hide() this.add(media, this.$myMedia, true) // prepend + this.userToggle() + this.$el.scrollTop(0) this.offset += 1 }, -- cgit v1.2.3-70-g09d2 From a1860ea42334447f49649a3491bad605237a23d5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Nov 2014 12:48:53 -0500 Subject: randomize button on media drawer (unstyled) --- .../javascripts/rectangles/engine/scenery/randomize.js | 16 +++++++++------- public/assets/javascripts/ui/editor/MediaViewer.js | 10 ++++++++-- views/controls/editor/media-drawer.ejs | 1 + 3 files changed, 18 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js index e6d662a..1c2eb56 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/randomize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js @@ -3,8 +3,7 @@ var media_objs = $(".mediaContainer").toArray().map(function(el){ return $(el).data("media") }) - var walls = [] - Scenery.randomize.add( media_objs, walls ) + Scenery.randomize.add( media_objs ) */ Scenery.randomize = {}; @@ -34,8 +33,9 @@ Scenery.randomize.get_dimensions = function (media_objs){ // Returns a lookup of walls to use, keyed by wall ID. Scenery.randomize.get_empty_walls = function(wall_list){ // get a list of all walls - var walls = {} - (wall_list || Walls).forEach(function(wall){ + var walls = {}; + + (wall_list || Walls.list).forEach(function(wall){ walls[wall.id] = wall }) @@ -57,6 +57,7 @@ Scenery.randomize.get_empty_walls = function(wall_list){ // Randomly place a set of media objects on empty walls. // Only one object per wall will be added. +// Optionally takes a list of walls to use. Scenery.randomize.add = function (media_objs, wall_list) { var media_list = Scenery.randomize.get_dimensions(media_objs) var walls = Scenery.randomize.get_empty_walls(wall_list) @@ -66,11 +67,12 @@ Scenery.randomize.add = function (media_objs, wall_list) { // randomize walls shuffle(wall_ids) + shuffle(media_list) // assign each of the media to the walls, until we run out of either - media_list.all(function(media){ + media_list.some(function(media){ // bail if we're out of walls - if (wall_ids.length == 0) { return false } + if (wall_ids.length == 0) { return true } var i, fits = -1 @@ -96,6 +98,6 @@ Scenery.randomize.add = function (media_objs, wall_list) { // artwork won't fit anywhere?? } - return true + return false }) } \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index dd17613..9593ab7 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -13,6 +13,7 @@ var MediaViewer = ModalView.extend({ 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", + 'click #randomize': "randomize", 'click .mediaContainer': "pick", 'click .viewMore': "load", }, @@ -119,10 +120,15 @@ var MediaViewer = ModalView.extend({ }, randomize: function(){ - var media_data = $(".mediaContainer").toArray().map(function(el){ + var $divs = this.$myMediaContainer.find(".mediaContainer").toArray() + if ($divs.length < 3) { + $divs = $divs.concat( this.$foundMediaContainer.find(".mediaContainer").toArray() ) + } + var media_objs = $divs.map(function(el){ return $(el).data("media") }) - Scenery.randomize( media_data ) + Scenery.randomize.add( media_objs ) + this.hide() }, populate: function(data){ diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 3e64cc3..5846bf4 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -14,6 +14,7 @@ -->

+

Randomize

You have no media yet. Upload some!
-- 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/assets/javascripts/ui/editor/MediaViewer.js') 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 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/assets/javascripts/ui/editor/MediaViewer.js') 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 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/assets/javascripts/ui/editor/MediaViewer.js') 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 From 42144451294184225ceccbfe0ac9459c1c6cb1a9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 14:35:02 -0500 Subject: nix trending --- public/assets/javascripts/ui/editor/MediaViewer.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 029252d..94a9d90 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -69,7 +69,7 @@ var MediaViewer = ModalView.extend({ show: function(){ if (! this.loaded) { this.load() - this.loadTrending() + // this.loadTrending() } else { this.parent.cursor.message("media") @@ -87,7 +87,8 @@ var MediaViewer = ModalView.extend({ load: function(){ $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) }, - + +/* loadTrending: function(){ var trending_imagery = [ 'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg', @@ -121,6 +122,7 @@ var MediaViewer = ModalView.extend({ if (img.complete && ! loaded) { img.onload() } }.bind(this)) }, +*/ randomize: function(){ var $divs = this.$(".active .container").find(".mediaContainer").toArray() -- cgit v1.2.3-70-g09d2 From 64f99d71c9ff0d419fad080751ba02afe9f6f3df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 16:27:39 -0500 Subject: move tumblr load stuff into own modal; example tumblrs --- Gruntfile.js | 1 + .../assets/javascripts/ui/editor/EditorToolbar.js | 1 - public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/MediaTumblr.js | 53 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaUpload.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 40 ++++++++-------- public/assets/javascripts/ui/lib/ModalView.js | 6 +-- public/assets/stylesheets/app.css | 11 ++++- views/controls/editor/media-drawer.ejs | 15 +++++- views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 27 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/MediaTumblr.js (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/Gruntfile.js b/Gruntfile.js index 68828e0..21bbfb0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -117,6 +117,7 @@ module.exports = function(grunt) { "public/assets/javascripts/ui/editor/ColorControl.js", "public/assets/javascripts/ui/editor/Collaborators.js", "public/assets/javascripts/ui/editor/MediaEditor.js", + "public/assets/javascripts/ui/editor/MediaTumblr.js", "public/assets/javascripts/ui/editor/MediaUpload.js", "public/assets/javascripts/ui/editor/MediaViewer.js", "public/assets/javascripts/ui/editor/Presets.js", diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 277718a..a5ad2dd 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -59,7 +59,6 @@ var EditorToolbar = View.extend({ this.resetControls() this.toggleMap(false) this.parent.mediaViewer.show() - this.parent.mediaUpload.show() }, resetMode: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 4a2f712..50d3650 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -15,6 +15,7 @@ var EditorView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) + this.mediaTumblr = new MediaTumblr ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.colorControl = new ColorControl ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/MediaTumblr.js b/public/assets/javascripts/ui/editor/MediaTumblr.js new file mode 100644 index 0000000..47419ae --- /dev/null +++ b/public/assets/javascripts/ui/editor/MediaTumblr.js @@ -0,0 +1,53 @@ + +var MediaTumblr = ModalView.extend({ + el: "#tumblrUpload", + + events: { + 'mousedown': "stopPropagation", + "keydown .url": "enterSubmit", + "click .exampleTumblr": "loadExample", + }, + + initialize: function(opt){ + this.__super__.initialize.call(this) + this.parent = opt.parent + this.$url = this.$(".url") + }, + + show: function(){ + this.$el.addClass("active") + this.$url.val("") + }, + + hide: function(){ + this.$el.removeClass("active") + }, + + enterSubmit: function(e){ + e.stopPropagation() + if (e.keyCode == 13) { + e.preventDefault() + var url = this.$tumblrUrl.val() + this.loadTumblr(url) + } + }, + + loadTumblr: function(url){ + Parser.tumblr(url, function(media_list){ + console.log(media_list) + this.parent.mediaViewer.$foundMediaContainer.empty() + media_list.reverse().forEach(function(media){ + this.parent.mediaViewer.add(media, this.parent.mediaViewer.$foundMediaContainer) + }.bind(this)) + }.bind(this)) + }, + + loadExample: function(e){ + e.preventDefault() + var name = $(e.currentTarget).html() + var url = "http://" + name + ".tumblr.com/" + this.$url.val(url) + this.loadTumblr(url) + }, + +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 9ae90e3..d09e38c 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -1,6 +1,6 @@ var MediaUpload = UploadView.extend({ - el: ".fileUpload", + el: "#fileUpload", createAction: "/api/media/new", uploadAction: "/api/media/upload", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 94a9d90..2ae5104 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -38,11 +38,11 @@ var MediaViewer = ModalView.extend({ this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") - - this.$tumblrUrl = this.$("#tumblr-url") }, + mode: "user", wallpaperToggle: function(){ + this.mode = "wallpaper" this.$wallpaperMedia.addClass("active") this.$foundMedia.addClass("inactive") this.$myMedia.addClass("inactive").removeClass('active') @@ -51,19 +51,25 @@ var MediaViewer = ModalView.extend({ }, foundToggle: function(){ + this.mode = "found" this.$wallpaperMedia.removeClass("active") this.$foundMedia.addClass("active") this.$myMedia.addClass("inactive").removeClass('active') this.$("a").removeClass("active") this.$foundToggle.addClass("active") + this.parent.mediaUpload.hide() + this.parent.mediaTumblr.show() }, userToggle: function(){ + this.mode = "user" this.$wallpaperMedia.removeClass("active") this.$foundMedia.removeClass("active") this.$myMedia.removeClass("inactive").addClass('active') this.$("a").removeClass("active") this.$userToggle.addClass("active") + this.parent.mediaUpload.show() + this.parent.mediaTumblr.hide() }, show: function(){ @@ -72,8 +78,7 @@ var MediaViewer = ModalView.extend({ // this.loadTrending() } else { - this.parent.cursor.message("media") - this.__super__.show.call(this) + this.reallyShow() } }, @@ -81,8 +86,20 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.mediaTumblr.hide() this.parent.cursor.message('start') }, + + reallyShow: function(){ + this.__super__.show.call(this) + if (this.mode == "user") { + this.userToggle() + } + else { + this.foundToggle() + } + this.parent.cursor.message("media") + }, load: function(){ $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) @@ -159,8 +176,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.message("media") - this.__super__.show.call(this) + this.reallyShow() } }, @@ -296,16 +312,4 @@ var MediaViewer = ModalView.extend({ _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/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index f70fbb3..6f1c729 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -14,10 +14,8 @@ var ModalView = View.extend({ show: function(){ $(".mediaDrawer").removeClass("active") - - if (! this.usesFileUpload) { - $(".fileUpload").removeClass("active") - } + $(".fileUpload").removeClass("active") + if (this.fixedClose) { $("#fixed_close").addClass("active") $("#fixed_close").bind("click", this.hide.bind(this)) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 5d69d75..07d1bbb 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1720,7 +1720,16 @@ border-left: 1px solid black; padding-top: 2px; } - +.exampleTumblrs { + display: block; + margin-top: 10px; + font-weight: 300; + font-size: 0.8em; +} +.exampleTumblrs a { + border-bottom: 1px dotted; + margin-left: 5px; +} .vvbox .colors { max-width: 155px; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 3db71d5..f9bce61 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -23,7 +23,6 @@
-
@@ -33,7 +32,7 @@
- +

@@ -43,3 +42,15 @@ ~ or ~
+ + + + +
+ + or try one of these: + risingtensions + fixoid + nopattern + + diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 61659f7..fc94992 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -113,6 +113,7 @@ + -- cgit v1.2.3-70-g09d2