diff options
| -rw-r--r-- | public/assets/javascripts/ui/editor/MediaUpload.js | 4 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/WallpaperPicker.js | 44 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/lib/UploadView.js | 9 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 7 | ||||
| -rw-r--r-- | server/lib/api/media.js | 13 | ||||
| -rw-r--r-- | server/lib/schemas/Media.js | 3 |
6 files changed, 66 insertions, 14 deletions
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 }, |