From b6ce465de3e07cd88175078f7a1017b63a91646e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 27 Aug 2014 17:28:52 -0400 Subject: split out uploadview --- .../javascripts/ui/editor/WallpaperPicker.js | 134 ++++----------------- 1 file changed, 22 insertions(+), 112 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 2309e22..e652f83 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -1,40 +1,38 @@ -var WallpaperPicker = View.extend({ +var WallpaperPicker = UploadView.extend({ el: ".wallpaper", + uploadAction: "/api/wallpaper/upload", + events: { "click .swatch": 'pick', - }, + }, initialize: function(){ - this.el.innerHTML = "wallpaper coming soon" - this.el.style.padding = "10px" - this.el.style.fontWeight = "300" - return - var wm = new WallpaperManager() - app.on('wallpaper-ready', function(){ - var black = [0,0,0,1.0] - var white = [255,255,255,1.0] - var swatches = wm.buildSwatches(black, white, 2) - swatches.forEach(function(swatch){ - var dataUrl = swatch.toDataURL() - var span = document.createElement('span') - span.style.backgroundImage = "url(" + dataUrl + ")" - span.className = "swatch" - this.$el.append(span) - }.bind(this)) - }.bind(this)) - wm.init() + this.$swatches = this.$(".swatches") + }, + + loaded: false, + load: function(){ + }, + + add: function (url) { + var swatch = document.createElement("div") + swatch.className = "swatch" + swatch.style.backgroundImage = "url(" + url + ")" + this.$swatches.append(swatch) }, - toggle: function(state){ - this.$el.toggleClass("active", state); + toggle: function (state) { + this.$el.toggleClass("active", state) // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper"); + // $("body").removeClass("pastePaper") }, + show: function(){ this.toggle(true) }, + hide: function(){ this.toggle(false) }, @@ -62,94 +60,6 @@ var WallpaperPicker = View.extend({ $floatingSwatch.show() _followCursor(e); }) - } + }, }) - -// pattern -// scale -// foreground -// background - -var WallpaperManager = function () { - - var image = new Image () - var imageData - var w, h - - this.masks = [] - - this.init = function(){ - this.load() - } - - this.load = function(){ - image.onload = function(){ - this.loadImageData() - this.buildMasks() - app.tube('wallpaper-ready') - }.bind(this) - - image.src = "/assets/img/palette.gif" - } - - this.loadImageData = function(){ - var canvas = document.createElement('canvas') - var ctx = canvas.getContext('2d') - w = canvas.width = image.naturalWidth - h = canvas.height = image.naturalHeight - ctx.drawImage(image, 0,0) - imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data - } - - this.buildMasks = function(){ - var mask - for (var y = 0; y < 6; y++) { - for (var x = 0; x < 16; x++) { - mask = this.buildMask(x,y) - this.masks.push(mask) - } - } - } - - this.buildMask = function(x,y){ - // add the offset of the top-left swatch - x = (x * 18) + 15 - y = (y * 16) + 5 - - var mask = new Array(64) - var t = 0 - for (var i = 0; i < 8; i++) { - for (var j = 0; j < 8; j++) { - t = ( w*(y+j) + x+i ) * 4 - mask[j*8+i] = imageData[t] === 0 - } - } - return mask - } - - this.buildSwatches = function(black, white, scale) { - var swatches = this.masks.map(function(mask){ - return this.buildSwatch(mask,black,white,scale) - }.bind(this)) - - return swatches - } - - this.buildSwatch = function(mask,black,white,scale){ - black = 'rgba(' + black.join(',') + ')' - white = 'rgba(' + white.join(',') + ')' - var canvas = document.createElement("canvas") - canvas.width = 8*scale - canvas.height = 8*scale - var ctx = canvas.getContext('2d') - for (var i = 0; i < 8; i++) { - for (var j = 0; j < 8; j++) { - ctx.fillStyle = mask[j*8+i] ? black : white - ctx.fillRect(i*scale, j*scale, scale, scale) - } - } - return canvas - } - -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a25d72ef6c31a75c1852dd9acf9dbb5b8b2c5a00 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 28 Aug 2014 13:16:44 -0400 Subject: upload wallpaper, reuses media api with a tag --- public/assets/javascripts/ui/editor/MediaUpload.js | 4 ++ .../javascripts/ui/editor/WallpaperPicker.js | 44 ++++++++++++++++++---- public/assets/javascripts/ui/lib/UploadView.js | 9 ++++- public/assets/stylesheets/app.css | 7 +++- server/lib/api/media.js | 13 ++++++- server/lib/schemas/Media.js | 3 +- 6 files changed, 66 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 6df9961..92cf2bd 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -56,6 +56,10 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) this.parent.mediaViewer.add(media) + }, + + beforeUpload: function(){ + this.parent.mediaViewer.deleteArmed(false) } }) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index e652f83..61ecb78 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -2,41 +2,69 @@ var WallpaperPicker = UploadView.extend({ el: ".wallpaper", - uploadAction: "/api/wallpaper/upload", + mediaTag: "wallpaper", + uploadAction: "/api/media/upload", events: { "click .swatch": 'pick', }, initialize: function(){ + this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") }, loaded: false, + show: function(){ + if (! this.loaded) { + this.load() + } + else { + this.toggle(true) + } + }, + + hide: function(){ + this.__super__.hide.call(this) + }, + load: function(){ + $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + console.log(data) + this.loaded = true + data && data.forEach(this.add.bind(this)) + this.toggle(true) }, - add: function (url) { + add: function (media) { + if (media.type !== "image") { return } var swatch = document.createElement("div") swatch.className = "swatch" - swatch.style.backgroundImage = "url(" + url + ")" + swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) }, toggle: function (state) { - this.$el.toggleClass("active", state) + if (state && ! this.loaded) { + this.show() + } + else { + this.$el.toggleClass("active", state) + } // toggle the class that makes the cursor a paintbucket // $("body").removeClass("pastePaper") }, - show: function(){ - this.toggle(true) - }, - hide: function(){ this.toggle(false) }, + beforeUpload: function(){ + }, + pick: function(e){ var $swatch = $(e.currentTarget) var $floatingSwatch = $(".floatingSwatch") diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js index c237e36..efaa8c9 100644 --- a/public/assets/javascripts/ui/lib/UploadView.js +++ b/public/assets/javascripts/ui/lib/UploadView.js @@ -12,12 +12,15 @@ var UploadView = View.extend({ this.$file = this.$(".file") this.$upload = this.$(".upload-icon") }, + + beforeUpload: function(){ + }, handleFileSelect: function(e) { e.stopPropagation(); e.preventDefault(); - this.parent.mediaViewer.deleteArmed(false) + this.beforeUpload() var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; @@ -56,6 +59,10 @@ var UploadView = View.extend({ fd.append('width', width) fd.append('height', height) fd.append('_csrf', $("[name=_csrf]").val()) + + if (this.mediaTag) { + fd.append('tag', this.mediaTag) + } var request = $.ajax({ url: this.uploadAction, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b6e1f17..493cf67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1114,15 +1114,18 @@ iframe.embed { -webkit-transform: translateX(0px); transform: translateX(0px); } -.wallpaper.active .swatches span { +.wallpaper.active .swatches .swatch { width: 40px; height: 35px; display: inline-block; border:1px solid; + background-size: contain; -webkit-transition: -webkit-transform 0.1s ease-in-out; + line-height: 0; + vertical-align: text-bottom; -webkit-user-drag: element; } -.wallpaper.active .swatches span:hover { +.wallpaper.active .swatches .swatch:hover { cursor: pointer; -webkit-transform: translateX(3px) translateY(-3px); transform: translateX(3px) translateY(-3px); diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 16f9d41..1eb08c1 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -8,8 +8,13 @@ var _ = require('lodash'), Media = require('../schemas/Media'); var media = { + user: function(req, res){ - Media.find({ user_id: req.user._id }, function(err, media){ + 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 || []) }) }, @@ -18,10 +23,14 @@ var media = { var data = util.cleanQuery(req.body) data.user_id = req.user._id data.created_at = new Date () + + if (data.tag) { + data.tag = util.sanitize(data.tag) + } new Media(data).save(function(err, rec){ if (err || ! rec) { return res.json({ error: err }) } - return res.json(rec) + return res.json(rec) }) }, diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 1f26b8e..1de354d 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -41,7 +41,8 @@ var MediaSchema = new mongoose.Schema({ loop: { type: Boolean, default: false }, mute: { type: Boolean, default: true }, keyframe: { type: Number, default: 0.0 }, - + tag: { type: String, default: "" }, + widthDimension: { type: Number }, heightDimension: { type: Number }, units: { type: String }, -- cgit v1.2.3-70-g09d2