From d277e9c8eb5454944a94bbfcb6d43c6dd41e18b9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 17 Jun 2014 15:03:45 -0400 Subject: store image width/height --- public/assets/javascripts/ui/lib/Parser.js | 34 +++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/ui/lib/Parser.js') 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 ''; @@ -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 '▶'; @@ -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, }) }) -- cgit v1.2.3-70-g09d2 From 32932165724e9c9fa891cb58bac224c50d425340 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 17 Jun 2014 15:40:40 -0400 Subject: dropping stuff from media editor onto walls --- .../assets/javascripts/rectangles/engine/scenery/_scenery.js | 2 +- .../javascripts/rectangles/engine/scenery/types/_image.js | 12 ++++++------ public/assets/javascripts/ui/editor/MediaUpload.js | 10 +++++----- public/assets/javascripts/ui/lib/Parser.js | 1 + public/assets/stylesheets/app.css | 1 + 5 files changed, 14 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/ui/lib/Parser.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 96eea19..908a2d0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -55,7 +55,7 @@ var Scenery = new function(){ break } base.media.push(scene_media) - scene_img.init() + scene_media.init() } base.addNextToWall = function(wall){ base.add(wall, base.nextMedia) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js index ba8ba03..b6f7de1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -3,10 +3,10 @@ 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.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 +18,11 @@ Scenery.image = function (wall, media) { 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 - media.height/2 - 20, z: base.center.b, - scale: 300/img.naturalWidth, + scale: 300/media.width, rotationY: wall_rotation[ wall.side ], backface: false, }) diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 3ade132..30287a5 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -93,11 +93,11 @@ var MediaUpload = View.extend({ }, 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 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, diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index f39239e..705ff04 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -27,6 +27,7 @@ var Parser = { $.ajax({ type: 'GET', url: 'https://www.googleapis.com/youtube/v3/videos', + dataType: "jsonp", data: { id: id, key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e14b570..2d7f901 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -68,6 +68,7 @@ a{ overflow:hidden; display: none; z-index: 10; + pointer-events: none; } .ants.edit { -- cgit v1.2.3-70-g09d2