diff options
Diffstat (limited to 'public/assets/javascripts')
13 files changed, 170 insertions, 243 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index d1e292d..15bf050 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -10,6 +10,7 @@ MX.Image = MX.Object3D.extend({ layer.y = ops.y || 0 layer.z = ops.z || 0 layer.backface = ops.backface || false + layer.media = ops.media if (layer.backface) { layer.el.classList.add("backface-visible") diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 00c2c44..1b95989 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -16,25 +16,9 @@ environment.init = function(){ scene.camera.radius = 20 } - -// map.center.a = scene.camera.x -// map.center.b = scene.camera.z - + map.center.a = 0 map.center.b = 0 - -// Rooms.add( new Room ({ -// rect: new Rect(-500,-500, 500,500), -// height: 500, -// })) -// Rooms.add( new Room ({ -// rect: new Rect(600,0, 1100,500), -// height: 500, -// })) -// Rooms.add( new Room ({ -// rect: new Rect(450,150, 650,350), -// height: 300, -// })) app.movements.gravity(true) diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 9e9e2bf..9096de0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -3,7 +3,8 @@ var Scenery = new function(){ var base = this; - base.images = [] + base.media = [] + base.nextMedia = null base.mouse = new mouse ({ use_offset: false }) @@ -40,6 +41,30 @@ var Scenery = new function(){ }) }) } + + base.add = function(wall, media){ + var scene_media + switch (media.type) { + case 'image': + scene_media = new Scenery.image (wall, media) + break + + case 'youtube': + case 'vimeo': + scene_media = new Scenery.video (wall, media) + break + } + base.media.push(scene_media) + scene_media.init() + } + base.addNextToWall = function(wall){ + base.add(wall, base.nextMedia) + base.nextMedia = null + } + base.remove = function(id){ + base.images.splcie(id) + } + return base } diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js index dadb2d2..bcb7c23 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -1,12 +1,13 @@ -Scenery.image = function (wall, img) { +Scenery.image = function (wall, media) { var base = this - + base.wall = wall - base.img = img - base.dimensions = new vec2(img.width, img.height) + base.media = media + base.scale = media.scale = 300 / max(300, media.width) + base.dimensions = new vec2(media.width, media.height) base.center = wall.center() - base.bounds = wall.bounds_for(img) + base.bounds = wall.bounds_for(media) // should be proportional to distance from wall var cursor_amp = 1.5 @@ -18,11 +19,11 @@ Scenery.image = function (wall, img) { base.build = function(){ base.mx_img = new MX.Image({ - src: img.src, + src: media.url, x: base.center.a, - y: Rooms.list[wall.room].height/2 - img.height/2 - 20, + y: Rooms.list[wall.room].height/2 - (base.scale * media.height)/2 - 20, z: base.center.b, - scale: 300/img.naturalWidth, + scale: base.scale, rotationY: wall_rotation[ wall.side ], backface: false, }) @@ -32,16 +33,12 @@ Scenery.image = function (wall, img) { base.bind = function(){ base.move.bind() -// base.resize.bind() $(base.mx_img.el).bind({ mouseenter: function(e){ -// console.log('entered an image') - // show the resize points for this image Scenery.resize.show(base) Scenery.image.hovering = true }, mouseleave: function(e){ -// console.log('left an image') Scenery.resize.defer_hide(base) Scenery.image.hovering = false } diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js index e79ede9..2921c0a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/image/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js @@ -33,7 +33,7 @@ Scenery.image.move = function(base){ function drag (e, cursor){ if (! dragging) return - + base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) switch (base.wall.side) { case FRONT: @@ -57,9 +57,9 @@ Scenery.image.move = function(base){ function switch_wall (e, new_wall, cursor){ if (! dragging) return if (new_wall.uid == base.wall.uid) return - if (! new_wall.fits(base.img)) return + if (! new_wall.fits(base.media)) return - base.bounds = bounds = new_wall.bounds_for(base.img) + base.bounds = bounds = new_wall.bounds_for(base.media) base.center = new_wall.center() x = base.center.a diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js index a0a98c5..a0a98c5 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 4270551..e327070 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -42,20 +42,26 @@ window.Wall = (function(){ mousedown: function(){ base.randomize_colors() console.log(sidesToString(base.side)) + if (Scenery.nextMedia) { + Scenery.addNextToWall(base) + } } }) } Wall.prototype.bounds_for = function(img) { var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y - return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ), - new vec2( img.height/2, Rooms.list[this.room].height - img.height/2 ) ) + var halfWidth = img.width/2 * img.scale + var halfHeight = img.height/2 * img.scale + + return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ), + new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } Wall.prototype.fits = function(img){ - if (this.side & FRONT_BACK && this.rect.x.length() < img.width) { + if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) { return false } - if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) { + if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) { return false } return true diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 3aa7cfc..2ec35e6 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -111,7 +111,7 @@ function mouse (opt) { } base.mousemove = function(e){ e.stopPropagation() - + if (opt.use_offset && ! offset) return var pos = positionFromMouse(e) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4b30228..76218fe 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -19,6 +19,7 @@ var EditorToolbar = View.extend({ toggleMap: function(){ map.toggle() + // $("#minimap").toggleClass("hide"); }, toggleSettings: function(){ @@ -49,3 +50,5 @@ var EditorToolbar = View.extend({ }, }) + +// $(".icon-close").removeClass("icon-close") diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index a66f2e8..30287a5 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -67,23 +67,47 @@ var MediaUpload = View.extend({ if ( ! f.type.match('image.*')) { continue; } + + this.getImageDimensions(f) + } + }, + + getImageDimensions: function(f){ + var base = this + + this.$upload.addClass('uploading') - this.$upload.addClass('uploading') - - var fd = new FormData(); - fd.append( 'image', f ) - fd.append( '_csrf', this.$csrf.val() ) + var reader = new FileReader(); - var request = $.ajax({ - url: this.uploadAction, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done($.proxy(this.add, this)) + reader.onload = function(e) { + var image = new Image() + image.onload = function(){ + var width = image.naturalWidth, + height = image.naturalHeight + base.upload(f, width, height) + } + image.src = e.target.result } + + reader.readAsDataURL(f); + }, + + upload: function(f, width, height){ + var fd = new FormData() + fd.append('image', f) + fd.append('width', width) + fd.append('height', height) + fd.append('_csrf', this.$csrf.val()) + + var request = $.ajax({ + url: this.uploadAction, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done($.proxy(this.add, this)) }, add: function(media){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index a75f8dc..a1198f3 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -7,21 +7,21 @@ var MediaViewer = ModalView.extend({ 'click .foundToggle': "foundToggle", 'click .yourMedia': "userToggle", 'click #deleteMedia': "deleteArmed", - 'mousedown .mediaContainer': "pick", + 'click .mediaContainer': "pick", }, - + foundToggle: function(){ - $(".foundMedia").addClass("active"); - $(".myMedia").addClass("inactive"); - $('a').removeClass("active"); - $('.foundToggle').addClass("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.$('.yourMedia').addClass("active"); + this.$("a").removeClass("active"); + this.$(".yourMedia").addClass("active"); }, show: function(){ @@ -35,6 +35,7 @@ var MediaViewer = ModalView.extend({ hide: function(){ this.__super__.hide.call(this) + this.deleteArmed(null, false) this.parent.mediaUpload.hide() }, @@ -77,56 +78,55 @@ var MediaViewer = ModalView.extend({ this.deleteIsArmed = state $("body").toggleClass("deleteArmed", state) }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, - pick: function(e){ + pick: function(e) { + e.stopPropagation() + var target = e.currentTarget var $target = $(target) var media = $target.data('media') + var image = $target.find('img') if (this.deleteIsArmed) { this.destroy(media._id) $target.remove() + return } - else { - // pick this image ... - } - }, - destroy: function(_id, cb){ - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + this.hide() + + var $ants = $('.ants'); + var $floatingImg = $('.floatingImg'); + + Scenery.nextMedia = media + $floatingImg.attr('src', image.attr('src')); + + var height = $floatingImg.height() + var width = $floatingImg.width() + + function _followCursor(e) { + $floatingImg.parent().css({ + top: (e.pageY - (height / 2)) + 'px', + left: (e.pageX - (width / 2)) + 'px' + }); + } + $(window).on('mousemove', _followCursor); + $(window).one('click', function () { + var $floatingImg = $('.floatingImg') + $floatingImg.attr('src', ''); + $(window).off('mousemove', _followCursor); + $floatingImg.parent().removeClass('edit'); + }); + $ants.addClass('edit'); + _followCursor(e); }, }) - -// function placeMedia(evt, img) { -// // JULES DO YO THANG -// alert('Place media at (' + evt.pageX + ', ' + evt.pageY + ')'); -// } -// -// $('.mediaContainer img').mousedown(function(e){ -// e.preventDefault() -// e.stopPropagation() -// }) -// $('.mediaContainer img').click(function (e) { -// e.stopPropagation() -// $(".mediaDrawer, .fileUpload, .addMedia").removeClass("active icon-close"); -// $floatingImg.attr('src', $(this).attr('src')); -// function _followCursor(e) { -// $floatingImg.parent().css({ -// top: (e.pageY - ($floatingImg.height() / 2)) + 'px', -// left: (e.pageX - ($floatingImg.width() / 2)) + 'px' -// }); -// } -// $(window).on('mousemove', _followCursor); -// $(window, this).one('click', function () { -// $floatingImg.attr('src', ''); -// $(window).off('mousemove', _followCursor); -// $floatingImg.parent().removeClass('edit'); -// }); -// $floatingImg.parent().addClass('edit'); -// _followCursor(e); -// }); diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 46fe09c..705ff04 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -4,7 +4,15 @@ var Parser = { regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i, async: false, fetch: function(url, done) { - done("", "") + var img = new Image () + img.onload = function(){ + done("", "", img.naturalWidth, img.naturalHeight, "") + img = null + } + img.src = url + if (img.complete) { + img.onload() + } }, tag: function (media) { return '<img src="' + media.url + '" onerror="imgError(this);">'; @@ -16,7 +24,20 @@ var Parser = { fetch: function(url, done) { 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" - done(id, thumb); + $.ajax({ + type: 'GET', + url: 'https://www.googleapis.com/youtube/v3/videos', + dataType: "jsonp", + data: { + id: id, + key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM", + part: "id,contentDetails,snippet,status", + }, + success: function(result){ + var res = res.items[0] + done(id, thumb, 640, 360, res.snippet.title); + } + }) }, tag: function (media) { return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">▶</span>'; @@ -31,8 +52,9 @@ var Parser = { type: 'GET', url: 'http://vimeo.com/api/v2/video/' + id + '.json', success: function(result){ - if (result.length == 0) { return done(id, "") } - done(id, result[0].thumbnail_large) + if (result.length == 0) { return done(id, "", 640, 360) } + var res = result[0] + done(id, res.thumbnail_large, res.width, res.height, res.title) } }) }, @@ -79,11 +101,14 @@ var Parser = { parse: function (url, cb) { var matched = Parser.integrations.some(function(integration){ if (integration.regex.test(url)) { - integration.fetch(url, function(token, thumbnail){ + integration.fetch(url, function(token, thumbnail, width, height, title){ cb({ token: token, thumbnail: thumbnail, type: integration.type, + title: title, + width: width, + height: height, url: url, }) }) diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js deleted file mode 100644 index 7f58f32..0000000 --- a/public/assets/javascripts/ui/z_misc.js +++ /dev/null @@ -1,138 +0,0 @@ - -function bind () { - - $.fn.clickToToggle = function(fn){ - $(this).click(function(e){ - e.stopPropagation() - var isActive = ! $(this).hasClass("icon-close") - disable_mode() - fn(isActive) - $(this).toggleClass("icon-close", isActive); - }) - } - - - $(".room1 .editBtn").click(function () { - var room = $(this).parent(); - room.addClass('editing'); - $(this).siblings('.formHolder').find('[type="submit"]').one('click', function (evt) { - evt.preventDefault(); - evt.stopPropagation(); - room.removeClass('editing'); - }); - }); - - // Place media logic - var $floatingImg = $('.floatingImg'); - - $(".icon-map").click(function(){ - $("#minimap").toggleClass("hide"); - $(this).toggleClass('hidden'); - }); - - - $("#startpoint").click(function(){ - $(this).toggleClass("active"); - $("#startText").toggleClass("hide"); - $("#moveText").toggleClass("show"); - }); - - - $(document).on("click", ".icon-close", disable_mode) - - function disable_mode(){ - $(".icon-close").removeClass("icon-close") - $('.mediaDrawer,.fileUpload,.image,.lightcontrol,.settings,.wallpaper').removeClass("active"); - $(".image").removeClass("editText") - $("body").removeClass("deleteArmed") - } - - // - // EDIT IMAGE HOVER MENU - - var hideEditImageMenuTimeout - environment.image.el.addEventListener('mouseover', function(e){ - environment.image.el.classList.add('hover') - var offset = $(".image").offset() - offset.left = max(0, offset.left + 30) - offset.top = max(0, offset.top + 50) - $(".edit-image.menu").show().offset( offset ) - clearTimeout(hideEditImageMenuTimeout) - }) - environment.image.el.addEventListener('mouseout', function(e){ - environment.image.el.classList.remove('hover') - hideEditImageMenuTimeout = setTimeout(function(){ - $(".edit-image.menu").hide() - }, 50) - }) - $(".edit-image.menu").on({ - mouseover: function(){ - clearTimeout(hideEditImageMenuTimeout) - }, - mouseout: function(){ - hideEditImageMenuTimeout = setTimeout(function(){ - $(".edit-image.menu").hide() - }, 50) - }, - mousedown: function(e){ - e.stopPropagation() - }, - mouseup: function(e){ - e.stopPropagation() - } - }) - - - // - // EDIT VIDEO HOVER MENU - - var hideEditVideoMenuTimeout - environment.video.el.addEventListener('mouseover', function(e){ - environment.video.el.classList.add('hover') - var offset = $(".video").offset() - offset.left = max(0, offset.left + 30) - offset.top = max(0, offset.top + 50) - $(".edit-video.menu").show().offset( offset ) - clearTimeout(hideEditImageMenuTimeout) - }) - environment.video.el.addEventListener('mouseout', function(e){ - environment.video.el.classList.remove('hover') - hideEditVideoMenuTimeout = setTimeout(function(){ - $(".edit-video.menu").hide() - }, 50) - }) - $(".edit-video.menu").on({ - mouseover: function(){ - clearTimeout(hideEditVideoMenuTimeout) - }, - mouseout: function(){ - hideEditVideoMenuTimeout = setTimeout(function(){ - $(".edit-video.menu").hide() - }, 50) - }, - mousedown: function(e){ - e.stopPropagation() - }, - mouseup: function(e){ - e.stopPropagation() - } - }) - $(".icon-ios7-reload,.ios7-arrow-forward").click(function(){ - $(this).toggleClass('toggled') - }) - - // - // ALL DONE - - $('body').removeClass('loading'); -} - - -$(function(){ - - function randomizeList(listObj) { - $(listObj).each(function() { - $(this).addClass(classes[Math.Random()*classes.size]); - }); - } -}) |