diff options
Diffstat (limited to 'public/assets/javascripts')
12 files changed, 157 insertions, 225 deletions
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..96eea19 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,31 @@ 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_img.init() + } + base.addNextToWall = function(wall){ + base.add(wall, base.nextMedia) + console.log("add next to wall") + 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..ba8ba03 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -1,4 +1,4 @@ -Scenery.image = function (wall, img) { +Scenery.image = function (wall, media) { var base = this diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js index e79ede9..188a3f4 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/image/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js @@ -8,6 +8,7 @@ Scenery.image.move = function(base){ this.bind = function(){ Scenery.mouse.bind_el(base.mx_img.el) Scenery.mouse.on("down", down) + Scenery.mouse.on("move", move) Scenery.mouse.on("enter", switch_wall) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) @@ -16,6 +17,7 @@ Scenery.image.move = function(base){ this.unbind = function(){ Scenery.mouse.bind_el(base.mx_img.el) Scenery.mouse.off("down", down) + Scenery.mouse.off("move", move) Scenery.mouse.off("enter", switch_wall) Scenery.mouse.off("drag", drag) Scenery.mouse.off("up", up) @@ -31,6 +33,10 @@ Scenery.image.move = function(base){ document.body.classList.add("dragging") } + function move (e, cursor){ + console.log("hey") + } + function drag (e, cursor){ if (! dragging) return 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..6c20444 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -42,6 +42,9 @@ window.Wall = (function(){ mousedown: function(){ base.randomize_colors() console.log(sidesToString(base.side)) + if (Scenery.nextMedia) { + Scenery.addNextToWall(base) + } } }) } 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..3ade132 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 e48c5b6..84deb7d 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..f39239e 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,19 @@ 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', + 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 +51,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 +100,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]); - }); - } -}) |