From 1b152e66ad8d7aa1c5511152991e648308f8918b Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 20:00:59 -0400 Subject: fixed-position close box fixed-position close box &c --- public/assets/javascripts/ui/lib/ModalView.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'public/assets/javascripts/ui/lib/ModalView.js') diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index d9b518a..1c41861 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -18,6 +18,10 @@ var ModalView = View.extend({ if (! this.usesFileUpload) { $(".fileUpload").removeClass("active") } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } this.$el.addClass("active") $("body").addClass("noOverflow") @@ -25,6 +29,10 @@ var ModalView = View.extend({ hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } this.$el.removeClass("active"); $("body").removeClass("noOverflow"); }, -- cgit v1.2.3-70-g09d2 From 150a5ef3ab0dbd8a63009ddad02a6e9df007d824 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 27 Nov 2014 15:21:23 -0500 Subject: tabs/spaces --- public/assets/javascripts/ui/lib/AlertModal.js | 38 ++-- public/assets/javascripts/ui/lib/ConfirmModal.js | 36 +-- public/assets/javascripts/ui/lib/ErrorModal.js | 38 ++-- public/assets/javascripts/ui/lib/FormView.js | 224 +++++++++--------- public/assets/javascripts/ui/lib/ModalView.js | 84 +++---- public/assets/javascripts/ui/lib/UploadView.js | 156 ++++++------- public/assets/javascripts/ui/lib/View.js | 278 +++++++++++------------ 7 files changed, 427 insertions(+), 427 deletions(-) (limited to 'public/assets/javascripts/ui/lib/ModalView.js') diff --git a/public/assets/javascripts/ui/lib/AlertModal.js b/public/assets/javascripts/ui/lib/AlertModal.js index 1b0f40f..a4bf241 100644 --- a/public/assets/javascripts/ui/lib/AlertModal.js +++ b/public/assets/javascripts/ui/lib/AlertModal.js @@ -1,25 +1,25 @@ var AlertModal = new( ModalFormView.extend({ - el: ".mediaDrawer.alert", + el: ".mediaDrawer.alert", - events: { - "click .ok": "advance", - "click .close": "advance", - }, - - alert: function(message, callback){ - this.$(".message").empty().append(message) - this.callback = callback - this.show() - this.$(".ok").focus() - }, - - advance: function(e){ - e && e.preventDefault() - this.hide() - this.callback && this.callback() - this.callback = null - } + events: { + "click .ok": "advance", + "click .close": "advance", + }, + + alert: function(message, callback){ + this.$(".message").empty().append(message) + this.callback = callback + this.show() + this.$(".ok").focus() + }, + + advance: function(e){ + e && e.preventDefault() + this.hide() + this.callback && this.callback() + this.callback = null + } })) diff --git a/public/assets/javascripts/ui/lib/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js index 01720bb..a72b31e 100644 --- a/public/assets/javascripts/ui/lib/ConfirmModal.js +++ b/public/assets/javascripts/ui/lib/ConfirmModal.js @@ -1,24 +1,24 @@ var ConfirmModal = new( ModalFormView.extend({ - el: ".mediaDrawer.confirm", + el: ".mediaDrawer.confirm", - events: { - "click .yes": "advance", - "click .no": "hide", - }, - - confirm: function(question, callback){ - this.$(".question").empty().append(question) - this.callback = callback - this.show() - }, - - advance: function(e){ - e && e.preventDefault() - this.hide() - this.callback && this.callback() - this.callback = null - } + events: { + "click .yes": "advance", + "click .no": "hide", + }, + + confirm: function(question, callback){ + this.$(".question").empty().append(question) + this.callback = callback + this.show() + }, + + advance: function(e){ + e && e.preventDefault() + this.hide() + this.callback && this.callback() + this.callback = null + } }) ) \ No newline at end of file diff --git a/public/assets/javascripts/ui/lib/ErrorModal.js b/public/assets/javascripts/ui/lib/ErrorModal.js index 8b01077..cfc2e6d 100644 --- a/public/assets/javascripts/ui/lib/ErrorModal.js +++ b/public/assets/javascripts/ui/lib/ErrorModal.js @@ -1,26 +1,26 @@ var ErrorModal = new( ModalFormView.extend({ - el: ".mediaDrawer.error", + el: ".mediaDrawer.error", - events: { - "click .ok": "advance", - "click .close": "advance", - }, - - alert: function(message, callback){ - this.$(".errorList").empty().append(message) - this.callback = callback - this.show() - this.$(".ok").focus() - }, - - advance: function(e){ - e && e.preventDefault() - this.hide() - this.callback && this.callback() - this.callback = null - } + events: { + "click .ok": "advance", + "click .close": "advance", + }, + + alert: function(message, callback){ + this.$(".errorList").empty().append(message) + this.callback = callback + this.show() + this.$(".ok").focus() + }, + + advance: function(e){ + e && e.preventDefault() + this.hide() + this.callback && this.callback() + this.callback = null + } })) diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index b3a4c71..f5845e7 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -1,135 +1,135 @@ var FormView = View.extend({ - method: "post", - useMinotaur: false, + method: "post", + useMinotaur: false, - events: { - "submit form": "save" - }, + events: { + "submit form": "save" + }, - initialize: function(opt){ - if (opt && opt.parent) { - this.parent = opt.parent - } - this.$form = this.$("form") - this.$errors = this.$(".errors") - this.$errorList = this.$(".errorList") - }, + initialize: function(opt){ + if (opt && opt.parent) { + this.parent = opt.parent + } + this.$form = this.$("form") + this.$errors = this.$(".errors") + this.$errorList = this.$(".errorList") + }, - reset: function(){ - this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("") - }, - - showErrors: function(errors){ - if (errors && errors.length) { - this.$errorList.empty(); - for (var i in errors) { - this.$errorList.append('
' + errors[i] + '
'); - } - this.$errors.css("opacity", 1.0); - setTimeout(function(){ - this.$errors.show().css("opacity", 1.0); - }.bind(this), 200) - } - }, - - serialize: function(){ - var fd = new FormData(), hasCSRF = false - - this.$("input[name], select[name], textarea[name]").each( function(){ - if (this.type == "file") { - if (this.files.length > 0) { - fd.append(this.name, this.files[0]); - } - } - else if (this.type == "password") { - if (this.value.length > 0) { - fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls')) - } - } - else { - fd.append(this.name, this.value); - hasCSRF = hasCSRF || this.name == "_csrf" - } - }); - - if (! hasCSRF) { + reset: function(){ + this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("") + }, + + showErrors: function(errors){ + if (errors && errors.length) { + this.$errorList.empty(); + for (var i in errors) { + this.$errorList.append('
' + errors[i] + '
'); + } + this.$errors.css("opacity", 1.0); + setTimeout(function(){ + this.$errors.show().css("opacity", 1.0); + }.bind(this), 200) + } + }, + + serialize: function(){ + var fd = new FormData(), hasCSRF = false + + this.$("input[name], select[name], textarea[name]").each( function(){ + if (this.type == "file") { + if (this.files.length > 0) { + fd.append(this.name, this.files[0]); + } + } + else if (this.type == "password") { + if (this.value.length > 0) { + fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls')) + } + } + else { + fd.append(this.name, this.value); + hasCSRF = hasCSRF || this.name == "_csrf" + } + }); + + if (! hasCSRF) { fd.append("_csrf", $("[name=_csrf]").val()) } - - return fd - }, - - save: function(e, successCallback, errorCallback){ - e && e.preventDefault() + + return fd + }, + + save: function(e, successCallback, errorCallback){ + e && e.preventDefault() - this.$errors.hide().css("opacity", 0.0); - - if (this.validate) { - var errors = this.validate() - if (errors && errors.length) { - if (errorCallback) { - errorCallback(errors) - } - else { + this.$errors.hide().css("opacity", 0.0); + + if (this.validate) { + var errors = this.validate() + if (errors && errors.length) { + if (errorCallback) { + errorCallback(errors) + } + else { this.showErrors(errors) - } - return - } - } - - var action = typeof this.action == "function" ? this.action() : this.action - if (! action) return + } + return + } + } + + var action = typeof this.action == "function" ? this.action() : this.action + if (! action) return - var request = $.ajax({ - url: action, - type: this.method, - data: this.serialize(), - dataType: "json", - processData: false, - contentType: false, - }) + var request = $.ajax({ + url: action, + type: this.method, + data: this.serialize(), + dataType: "json", + processData: false, + contentType: false, + }) if (this.useMinotaur) { Minotaur.show() } - - request.done($.proxy(function (response) { - if (this.useMinotaur) { - Minotaur.hide() - } - if (response.error) { - var errors = [] - for (var key in response.error.errors) { - errors.push(response.error.errors[key].message); - } - if (errorCallback) { - errorCallback(errors) - } - else { + + request.done($.proxy(function (response) { + if (this.useMinotaur) { + Minotaur.hide() + } + if (response.error) { + var errors = [] + for (var key in response.error.errors) { + errors.push(response.error.errors[key].message); + } + if (errorCallback) { + errorCallback(errors) + } + else { this.showErrors(errors) - } - return - } - else { - if (successCallback) { - successCallback(response) - } - if (this.success) { - this.success(response) - } - } - }, this)); - } + } + return + } + else { + if (successCallback) { + successCallback(response) + } + if (this.success) { + this.success(response) + } + } + }, this)); + } }) var ModalFormView = ModalView.extend(FormView.prototype).extend({ - load: function(){ - this.reset() - this.show() - } + load: function(){ + this.reset() + this.show() + } }) diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index 1c41861..f70fbb3 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -1,50 +1,50 @@ var ModalView = View.extend({ - events: { - "click .close": 'close', - }, - - initialize: function(opt){ - if (opt && opt.parent) { - this.parent = opt.parent - } - }, - - usesFileUpload: false, - - show: function(){ - $(".mediaDrawer").removeClass("active") - - if (! this.usesFileUpload) { - $(".fileUpload").removeClass("active") - } - if (this.fixedClose) { - $("#fixed_close").addClass("active") - $("#fixed_close").bind("click", this.hide.bind(this)) - } - - this.$el.addClass("active") + events: { + "click .close": 'close', + }, + + initialize: function(opt){ + if (opt && opt.parent) { + this.parent = opt.parent + } + }, + + usesFileUpload: false, + + show: function(){ + $(".mediaDrawer").removeClass("active") + + if (! this.usesFileUpload) { + $(".fileUpload").removeClass("active") + } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } + + this.$el.addClass("active") $("body").addClass("noOverflow") - }, + }, - hide: function(){ + hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); - if (this.fixedClose) { - $("#fixed_close").removeClass("active") - $("#fixed_close").unbind("click", this.hide.bind(this)) - } - this.$el.removeClass("active"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } + this.$el.removeClass("active"); $("body").removeClass("noOverflow"); - }, - - close: function(){ - if (window.isModalView) { - window.location.pathname = "/" - } - else { - history.pushState(null, document.title, app.router.originalPath) - this.hide() - } - } + }, + + close: function(){ + if (window.isModalView) { + window.location.pathname = "/" + } + else { + history.pushState(null, document.title, app.router.originalPath) + this.hide() + } + } }) diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js index 4b56828..d1e2b73 100644 --- a/public/assets/javascripts/ui/lib/UploadView.js +++ b/public/assets/javascripts/ui/lib/UploadView.js @@ -3,94 +3,94 @@ var UploadView = View.extend({ // define uploadAction - events: { - "change [type=file]": "handleFileSelect", - "submit form": "preventDefault", - }, - - initialize: function(){ - this.$file = this.$("[type=file]") - this.$upload = this.$(".upload-icon") + events: { + "change [type=file]": "handleFileSelect", + "submit form": "preventDefault", + }, + + initialize: function(){ + this.$file = this.$("[type=file]") + this.$upload = this.$(".upload-icon") }, beforeUpload: function(){ }, - + handleFileSelect: function(e) { - e.stopPropagation(); - e.preventDefault(); - - this.beforeUpload() + e.stopPropagation(); + e.preventDefault(); + + this.beforeUpload() - var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; + var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*')) { - continue; - } - - this.getImageDimensions(f) - } - }, - - getImageDimensions: function(f){ - var base = this - - this.$upload.addClass('uploading') + for (var i = 0, f; f = files[i]; i++) { + if ( ! f.type.match('image.*')) { + continue; + } + + this.getImageDimensions(f) + } + }, + + getImageDimensions: function(f){ + var base = this + + this.$upload.addClass('uploading') - var reader = new FileReader(); + var reader = new FileReader(); - 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', $("[name=_csrf]").val()) - - if (this.mediaTag) { - fd.append('tag', this.mediaTag) - } + 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', $("[name=_csrf]").val()) + + if (this.mediaTag) { + fd.append('tag', this.mediaTag) + } - var request = $.ajax({ - url: this.uploadAction, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done(this.success.bind(this)) - }, - - success: function(media){ - if (media.error) { - // console.log(media.error) + var request = $.ajax({ + url: this.uploadAction, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done(this.success.bind(this)) + }, + + success: function(media){ + if (media.error) { + // console.log(media.error) this.$upload.removeClass('uploading') - this.error(media.error) - return - } - this.$upload.removeClass('uploading') - this.add(media) - }, - - add: function(media){ - console.log(media) - }, - - error: function(error){ - }, + this.error(media.error) + return + } + this.$upload.removeClass('uploading') + this.add(media) + }, + + add: function(media){ + console.log(media) + }, + + error: function(error){ + }, }) diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js index 3c65131..9a8ab5b 100644 --- a/public/assets/javascripts/ui/lib/View.js +++ b/public/assets/javascripts/ui/lib/View.js @@ -1,142 +1,142 @@ var View = (function($, _){ - var View = function(options) { - this._id = _.uniqueId('view') - this.type = "view" - options || (options = {}); - _.extend(this, _.pick(options, viewOptions)) - this._ensureElement() - this.initialize.apply(this, arguments) - this.delegateEvents() - } - - var delegateEventSplitter = /^(\S+)\s*(.*)$/; - - var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; - - _.extend(View.prototype, { - - // The default `tagName` of a View's element is `"div"`. - tagName: 'div', - - $: function(selector) { - return this.$el.find(selector); - }, - - initialize: function(){}, - - setElement: function(element, delegate) { - if (this.$el) this.undelegateEvents(); - this.$el = element instanceof $ ? element : $(element); - this.el = this.$el[0]; - if (delegate !== false) this.delegateEvents(); - return this; - }, - - // Set callbacks, where `this.events` is a hash of - // - // *{"event selector": "callback"}* - // - // { - // 'mousedown .title': 'edit', - // 'click .button': 'save', - // 'click .open': function(e) { ... } - // } - // - // pairs. Callbacks will be bound to the view, with `this` set properly. - // Uses event delegation for efficiency. - // Omitting the selector binds the event to `this.el`. - // This only works for delegate-able events: not `focus`, `blur`, and - // not `change`, `submit`, and `reset` in Internet Explorer. - delegateEvents: function(events) { - if (!(events || (events = _.result(this, 'events')))) return this; - this.undelegateEvents(); - for (var key in events) { - var method = events[key]; - if (!_.isFunction(method)) method = this[events[key]]; - if (!method) continue; - - var match = key.match(delegateEventSplitter); - var eventName = match[1], selector = match[2]; - method = _.bind(method, this); - eventName += '.delegateEvents' + this._id; - if (is_mobile && (selector === 'mouseenter' || selector === 'mouseleave')) { - continue - } - else if (selector === '') { - this.$el.on(eventName, method); - } else { - this.$el.on(eventName, selector, method); - } - } - return this; - }, - - // Clears all callbacks previously bound to the view with `delegateEvents`. - undelegateEvents: function() { - this.$el.off('.delegateEvents' + this._id); - return this; - }, - - // Ensure that the View has a DOM element to render into. - // If `this.el` is a string, pass it through `$()`, take the first - // matching element, and re-assign it to `el`. Otherwise, create - // an element from the `id`, `className` and `tagName` properties. - _ensureElement: function() { - this.setElement(_.result(this, 'el'), false); - }, - - preventDefault: function(e){ - e && e.preventDefault() - }, - - stopPropagation: function(e){ - e && e.stopPropagation() - }, - - }); - - - var extend = function(protoProps, staticProps) { - var staticProps = staticProps || {} - var parent = this; - var child; - var childEvents = {}; - - // The constructor function for the new subclass is either defined by you - // (the "constructor" property in your `extend` definition), or defaulted - // by us to simply call the parent's constructor. - if (protoProps && _.has(protoProps, 'constructor')) { - child = protoProps.constructor; - } else { - child = function(){ return parent.apply(this, arguments); }; - } - - // Extend events so we can subclass views - _.extend(childEvents, parent.prototype.events, protoProps.events) - - // Add static properties to the constructor function, if supplied. - _.extend(child, parent, staticProps); - - // Set the prototype chain to inherit from `parent`, without calling - // `parent`'s constructor function. - var Surrogate = function(){ this.constructor = child; }; - Surrogate.prototype = parent.prototype; - child.prototype = new Surrogate; - - // Add prototype properties (instance properties) to the subclass, - // if supplied. - if (protoProps) _.extend(child.prototype, protoProps); - - // Set a convenience property in case the parent's prototype is needed - // later. - child.prototype.__super__ = parent.prototype; - child.prototype.events = childEvents - - return child; - }; - - View.extend = extend; - - return View; + var View = function(options) { + this._id = _.uniqueId('view') + this.type = "view" + options || (options = {}); + _.extend(this, _.pick(options, viewOptions)) + this._ensureElement() + this.initialize.apply(this, arguments) + this.delegateEvents() + } + + var delegateEventSplitter = /^(\S+)\s*(.*)$/; + + var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; + + _.extend(View.prototype, { + + // The default `tagName` of a View's element is `"div"`. + tagName: 'div', + + $: function(selector) { + return this.$el.find(selector); + }, + + initialize: function(){}, + + setElement: function(element, delegate) { + if (this.$el) this.undelegateEvents(); + this.$el = element instanceof $ ? element : $(element); + this.el = this.$el[0]; + if (delegate !== false) this.delegateEvents(); + return this; + }, + + // Set callbacks, where `this.events` is a hash of + // + // *{"event selector": "callback"}* + // + // { + // 'mousedown .title': 'edit', + // 'click .button': 'save', + // 'click .open': function(e) { ... } + // } + // + // pairs. Callbacks will be bound to the view, with `this` set properly. + // Uses event delegation for efficiency. + // Omitting the selector binds the event to `this.el`. + // This only works for delegate-able events: not `focus`, `blur`, and + // not `change`, `submit`, and `reset` in Internet Explorer. + delegateEvents: function(events) { + if (!(events || (events = _.result(this, 'events')))) return this; + this.undelegateEvents(); + for (var key in events) { + var method = events[key]; + if (!_.isFunction(method)) method = this[events[key]]; + if (!method) continue; + + var match = key.match(delegateEventSplitter); + var eventName = match[1], selector = match[2]; + method = _.bind(method, this); + eventName += '.delegateEvents' + this._id; + if (is_mobile && (selector === 'mouseenter' || selector === 'mouseleave')) { + continue + } + else if (selector === '') { + this.$el.on(eventName, method); + } else { + this.$el.on(eventName, selector, method); + } + } + return this; + }, + + // Clears all callbacks previously bound to the view with `delegateEvents`. + undelegateEvents: function() { + this.$el.off('.delegateEvents' + this._id); + return this; + }, + + // Ensure that the View has a DOM element to render into. + // If `this.el` is a string, pass it through `$()`, take the first + // matching element, and re-assign it to `el`. Otherwise, create + // an element from the `id`, `className` and `tagName` properties. + _ensureElement: function() { + this.setElement(_.result(this, 'el'), false); + }, + + preventDefault: function(e){ + e && e.preventDefault() + }, + + stopPropagation: function(e){ + e && e.stopPropagation() + }, + + }); + + + var extend = function(protoProps, staticProps) { + var staticProps = staticProps || {} + var parent = this; + var child; + var childEvents = {}; + + // The constructor function for the new subclass is either defined by you + // (the "constructor" property in your `extend` definition), or defaulted + // by us to simply call the parent's constructor. + if (protoProps && _.has(protoProps, 'constructor')) { + child = protoProps.constructor; + } else { + child = function(){ return parent.apply(this, arguments); }; + } + + // Extend events so we can subclass views + _.extend(childEvents, parent.prototype.events, protoProps.events) + + // Add static properties to the constructor function, if supplied. + _.extend(child, parent, staticProps); + + // Set the prototype chain to inherit from `parent`, without calling + // `parent`'s constructor function. + var Surrogate = function(){ this.constructor = child; }; + Surrogate.prototype = parent.prototype; + child.prototype = new Surrogate; + + // Add prototype properties (instance properties) to the subclass, + // if supplied. + if (protoProps) _.extend(child.prototype, protoProps); + + // Set a convenience property in case the parent's prototype is needed + // later. + child.prototype.__super__ = parent.prototype; + child.prototype.events = childEvents + + return child; + }; + + View.extend = extend; + + return View; })(jQuery, _) -- cgit v1.2.3-70-g09d2 From 64f99d71c9ff0d419fad080751ba02afe9f6f3df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 16:27:39 -0500 Subject: move tumblr load stuff into own modal; example tumblrs --- Gruntfile.js | 1 + .../assets/javascripts/ui/editor/EditorToolbar.js | 1 - public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/MediaTumblr.js | 53 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaUpload.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 40 ++++++++-------- public/assets/javascripts/ui/lib/ModalView.js | 6 +-- public/assets/stylesheets/app.css | 11 ++++- views/controls/editor/media-drawer.ejs | 15 +++++- views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 27 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/MediaTumblr.js (limited to 'public/assets/javascripts/ui/lib/ModalView.js') diff --git a/Gruntfile.js b/Gruntfile.js index 68828e0..21bbfb0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -117,6 +117,7 @@ module.exports = function(grunt) { "public/assets/javascripts/ui/editor/ColorControl.js", "public/assets/javascripts/ui/editor/Collaborators.js", "public/assets/javascripts/ui/editor/MediaEditor.js", + "public/assets/javascripts/ui/editor/MediaTumblr.js", "public/assets/javascripts/ui/editor/MediaUpload.js", "public/assets/javascripts/ui/editor/MediaViewer.js", "public/assets/javascripts/ui/editor/Presets.js", diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 277718a..a5ad2dd 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -59,7 +59,6 @@ var EditorToolbar = View.extend({ this.resetControls() this.toggleMap(false) this.parent.mediaViewer.show() - this.parent.mediaUpload.show() }, resetMode: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 4a2f712..50d3650 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -15,6 +15,7 @@ var EditorView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) + this.mediaTumblr = new MediaTumblr ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.colorControl = new ColorControl ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/MediaTumblr.js b/public/assets/javascripts/ui/editor/MediaTumblr.js new file mode 100644 index 0000000..47419ae --- /dev/null +++ b/public/assets/javascripts/ui/editor/MediaTumblr.js @@ -0,0 +1,53 @@ + +var MediaTumblr = ModalView.extend({ + el: "#tumblrUpload", + + events: { + 'mousedown': "stopPropagation", + "keydown .url": "enterSubmit", + "click .exampleTumblr": "loadExample", + }, + + initialize: function(opt){ + this.__super__.initialize.call(this) + this.parent = opt.parent + this.$url = this.$(".url") + }, + + show: function(){ + this.$el.addClass("active") + this.$url.val("") + }, + + hide: function(){ + this.$el.removeClass("active") + }, + + enterSubmit: function(e){ + e.stopPropagation() + if (e.keyCode == 13) { + e.preventDefault() + var url = this.$tumblrUrl.val() + this.loadTumblr(url) + } + }, + + loadTumblr: function(url){ + Parser.tumblr(url, function(media_list){ + console.log(media_list) + this.parent.mediaViewer.$foundMediaContainer.empty() + media_list.reverse().forEach(function(media){ + this.parent.mediaViewer.add(media, this.parent.mediaViewer.$foundMediaContainer) + }.bind(this)) + }.bind(this)) + }, + + loadExample: function(e){ + e.preventDefault() + var name = $(e.currentTarget).html() + var url = "http://" + name + ".tumblr.com/" + this.$url.val(url) + this.loadTumblr(url) + }, + +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 9ae90e3..d09e38c 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -1,6 +1,6 @@ var MediaUpload = UploadView.extend({ - el: ".fileUpload", + el: "#fileUpload", createAction: "/api/media/new", uploadAction: "/api/media/upload", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 94a9d90..2ae5104 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -38,11 +38,11 @@ var MediaViewer = ModalView.extend({ this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") - - this.$tumblrUrl = this.$("#tumblr-url") }, + mode: "user", wallpaperToggle: function(){ + this.mode = "wallpaper" this.$wallpaperMedia.addClass("active") this.$foundMedia.addClass("inactive") this.$myMedia.addClass("inactive").removeClass('active') @@ -51,19 +51,25 @@ var MediaViewer = ModalView.extend({ }, foundToggle: function(){ + this.mode = "found" this.$wallpaperMedia.removeClass("active") this.$foundMedia.addClass("active") this.$myMedia.addClass("inactive").removeClass('active') this.$("a").removeClass("active") this.$foundToggle.addClass("active") + this.parent.mediaUpload.hide() + this.parent.mediaTumblr.show() }, userToggle: function(){ + this.mode = "user" this.$wallpaperMedia.removeClass("active") this.$foundMedia.removeClass("active") this.$myMedia.removeClass("inactive").addClass('active') this.$("a").removeClass("active") this.$userToggle.addClass("active") + this.parent.mediaUpload.show() + this.parent.mediaTumblr.hide() }, show: function(){ @@ -72,8 +78,7 @@ var MediaViewer = ModalView.extend({ // this.loadTrending() } else { - this.parent.cursor.message("media") - this.__super__.show.call(this) + this.reallyShow() } }, @@ -81,8 +86,20 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.mediaTumblr.hide() this.parent.cursor.message('start') }, + + reallyShow: function(){ + this.__super__.show.call(this) + if (this.mode == "user") { + this.userToggle() + } + else { + this.foundToggle() + } + this.parent.cursor.message("media") + }, load: function(){ $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) @@ -159,8 +176,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.message("media") - this.__super__.show.call(this) + this.reallyShow() } }, @@ -296,16 +312,4 @@ var MediaViewer = ModalView.extend({ _followCursor(e) }, - enterTumblrUrl: function(e){ - e.stopPropagation() - if (e.keyCode !== 13) { return } - var url = this.$tumblrUrl.val() - Parser.tumblr(url, function(media_list){ - console.log(media_list) - this.$foundMediaContainer.empty() - media_list.reverse().forEach(function(media){ - this.add(media, this.$foundMediaContainer) - }.bind(this)) - }.bind(this)) - }, }) diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index f70fbb3..6f1c729 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -14,10 +14,8 @@ var ModalView = View.extend({ show: function(){ $(".mediaDrawer").removeClass("active") - - if (! this.usesFileUpload) { - $(".fileUpload").removeClass("active") - } + $(".fileUpload").removeClass("active") + if (this.fixedClose) { $("#fixed_close").addClass("active") $("#fixed_close").bind("click", this.hide.bind(this)) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 5d69d75..07d1bbb 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1720,7 +1720,16 @@ border-left: 1px solid black; padding-top: 2px; } - +.exampleTumblrs { + display: block; + margin-top: 10px; + font-weight: 300; + font-size: 0.8em; +} +.exampleTumblrs a { + border-bottom: 1px dotted; + margin-left: 5px; +} .vvbox .colors { max-width: 155px; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 3db71d5..f9bce61 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -23,7 +23,6 @@
-
@@ -33,7 +32,7 @@ - +

@@ -43,3 +42,15 @@ ~ or ~
+ + + + +
+ + or try one of these: + risingtensions + fixoid + nopattern + + diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 61659f7..fc94992 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -113,6 +113,7 @@ + -- cgit v1.2.3-70-g09d2 From 83649f62ecbd92cc8a27ca47ac141cc3a81210a1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 19:40:50 -0400 Subject: fixed close button --- public/assets/javascripts/ui/blueprint/BlueprintScaler.js | 4 +++- public/assets/javascripts/ui/blueprint/BlueprintUploader.js | 1 + public/assets/javascripts/ui/lib/ModalView.js | 5 +++++ views/controls/editor/media-drawer.ejs | 2 -- views/partials/header.ejs | 4 +++- 5 files changed, 12 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/ui/lib/ModalView.js') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 5bd2229..cd370ef 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,7 +1,9 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ el: ".blueprintScaler", - + + fixedClose: true, + action: "/api/blueprint/scale", events: { diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index 676976f..6d13817 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -39,6 +39,7 @@ var BlueprintUploader = UploadView.extend({ this.parent.scaler.pick(data[0]) } else { + this.parent.scaler.hideClose() this.show() } }, diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index 6f1c729..e0070ce 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -35,6 +35,11 @@ var ModalView = View.extend({ $("body").removeClass("noOverflow"); }, + hideClose: function(){ + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + }, + close: function(){ if (window.isModalView) { window.location.pathname = "/" diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index bb623f2..8070941 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -3,8 +3,6 @@ -X -

Your Media diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 2acf2bc..bb8fc6e 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -78,4 +78,6 @@ [[ } ]] -

\ No newline at end of file + + +X \ No newline at end of file -- cgit v1.2.3-70-g09d2