slices 1.0.0

data/app/assets/javascripts/slices/app/views/asset_thumb_view.js.erb

@@ -0,0 +1,191 @@
+// Responsible for an invidiual thumbnail. This view is intended to remain
+// fairly dumb - let AssetLibraryView handle events.
+slices.AssetThumbView = Backbone.View.extend({
+
+  tagName: 'li',
+  className: 'asset-library-item',
+
+  happyTime: 1000,
+
+  template: Handlebars.compile(
+    '<img src="{{src}}" alt="{{name}}">' +
+    '<span class="name">{{displayName}}</span>' +
+    '<dl class="meta">' +
+      '<dd><strong class="filename">{{name}}</strong></dd>' +
+      '<dd>{{size}}</dd>' +
+      '<dd>Added {{createdAt}}</dd>' +
+      '<dd><a href="{{url}}" data-action="edit">Edit</a></dd>' +
+    '</dl>'
+  ),
+
+  events: {
+    'mousedown'                      : 'press',
+    'mouseup'                        : 'release',
+    'mousedown [data-action="edit"]' : 'pressEdit',
+    'click [data-action="edit"]'     : 'releaseEdit'
+  },
+
+  initialize: function() {
+    _.bindAll(this);
+    this.$el.append('<div class="asset-details">');
+    this.model.bind('change', this.whenModelChanges);
+    this.model.bind('destroying', this.whenModelIsDestroying);
+  },
+
+  render: function() {
+    this.$el.find('.asset-details').html(this.template(this));
+    return this;
+  },
+
+  src: function() {
+    return this.model.get('asset_url')
+        || '<%= asset_path 'slices/icon_generic_file.png' %>';
+  },
+
+  name: function() {
+    return this.model.get('name');
+  },
+
+  url: function() {
+    return this.model.url();
+  },
+
+  displayName: function() {
+    if (!this.model.isImage()) return this.name();
+  },
+
+  createdAt: function() {
+    return moment(this.model.get('created_at')).calendar();
+  },
+
+  size: function() {
+    return humanFileSize(this.model.get('file_file_size'));
+  },
+
+  select: function() {
+    $(this.el).addClass('selected');
+  },
+
+  deselect: function() {
+    $(this.el).removeClass('selected');
+  },
+
+  selected: function() {
+    return $(this.el).hasClass('selected');
+  },
+
+  remove: function() {
+    this.unbind();
+    $(this.el).remove();
+  },
+
+  press: function(event) {
+    if (!this.options.selectable) return;
+    if (event.which !== 1) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.trigger('thumb:press', event, this);
+  },
+
+  release: function(event) {
+    if (!this.options.selectable) return;
+    if (event.which !== 1) return;
+    this.trigger('thumb:release', event, this);
+  },
+
+  pressEdit: function(e) {
+    e.stopImmediatePropagation();
+  },
+
+  releaseEdit: function(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    this.trigger('thumb:blur');
+
+    var el = $(this.el);
+    el.addClass('editing');
+
+    var editor = slices.AssetEditorView.openModal({ model: this.model });
+    editor.bind('close', function() {
+      _.delay(function() { el.removeClass('editing') }, 350);
+    });
+  },
+
+  whenModelChanges: function() {
+    this.render();
+  },
+
+  whenModelIsDestroying: function() {
+    $(this.el).addClass('destroying');
+  },
+
+  // Update the upload progress information, wrapped around the file.
+  updateFile: function(attrs) {
+    if (!this.fileView) this.makeFileView();
+
+    $(this.el).
+    removeClass(this.fileView.possibleStatusList).
+    addClass('status-' + this.fileView.model.status());
+  },
+
+  // Update the upload progress information so we see happy face, then
+  // wait for the thumbnail to load or happyTime, whichever is longer.
+  updateFileAndComplete: function(file) {
+    this.updateFile(file);
+    this.gracefullyRemoveFileView();
+  },
+
+  // Make fileview, this gets done on the fly.
+  makeFileView: function() {
+    this.fileView = new slices.FileView({
+      model: this.model.get('file')
+    });
+    this.$el.append(this.fileView.el);
+    $(this.fileView.el).css({ position: 'absolute', top: 0 });
+  },
+
+  // Remove fileview
+  removeFileView: function() {
+    if (this.fileView) {
+      this.fileView.remove();
+      delete this.fileView;
+    }
+  },
+
+  // Wait for thumnail to load and happyTime to pass, then complete the
+  // transition to showing our lovely new thumbnail.
+  gracefullyRemoveFileView: function() {
+    $.when(
+      this.thumbnailHasLoaded(),
+      this.happyTimeHasPassed()
+    ).then(this.resolveGracefully);
+  },
+
+  // Complete transition by fading out fileView, rendering, then
+  // fading our thumbnail in.
+  resolveGracefully: function() {
+    this.$('.asset-details').css({ opacity: 0 });
+
+    $(this.fileView.el).animate({ opacity: 0 }, 'fast', _.bind(function() {
+      this.removeFileView();
+      this.$('.asset-details').animate({ opacity: 1 });
+    }, this));
+  },
+
+  // Returns a deferred promise wrapping thumbnail pre-load.
+  thumbnailHasLoaded: function() {
+    var dfd = new $.Deferred();
+    this.$('img').load(dfd.resolve);
+    return dfd.promise();
+  },
+
+  // Returns a deferred promise wrapping happyTime.
+  happyTimeHasPassed: function() {
+    var dfd = new $.Deferred();
+    _.delay(dfd.resolve, this.happyTime);
+    return dfd.promise();
+  }
+
+});
+

data/app/assets/javascripts/slices/app/views/attachment_composer_view.js

@@ -0,0 +1,350 @@
+// Responsible for managing the ui for a collection of attachments. Works in
+// conjunction with `AttachmentView`, `Attachment`, `AttachmentCollection`
+// and specialized Handlebars helper `attachmentComposer`.
+// A JSON description of the collection is written to the element’s
+// data-computed-value, and subsequently read by Slices when saving the Page.
+//
+// This shouldn’t be instantiated directly.
+// Instead, use `{{attachmentComposer}}` like this:
+//
+//     {{#attachmentComposer myAttachments}}
+//       <textarea name="caption">{{caption}}</textarea>
+//     {{/attachmentComposer}}
+//
+slices.AttachmentComposerView = Backbone.View.extend({
+
+  DROP_THRESHOLD: 15,
+
+  views: {}, // internal view cache
+
+  events: {
+    'click [data-action="library"]' : 'openAssetDrawer',
+    'click [data-action="remove"]'  : 'removeClicked'
+  },
+
+  template: Handlebars.compile(
+    '<ol class="attachment-list"></ol>' +
+    '<div class="attachment-actions">' +
+      '<button data-action="library">Choose from Library</button>' +
+      '<button data-action="upload">Upload from computer</button>' +
+    '</div>'
+  ),
+
+  className: 'attachment-composer',
+
+  broadcastChanges: true,
+
+  // Initialize the view. There are a few steps here, so read on.
+  initialize: function() {
+    _.bindAll(this);
+
+    // If this.options.collection is just a simple array, we need to
+    // instantiate and AttachmentCollection.
+    this.collection = new slices.AttachmentCollection(this.options.collection);
+    this.collection.bind('add'    , this.addAttachment);
+    this.collection.bind('remove' , this.removeAttachment);
+    this.collection.bind('change' , this.update);
+    this.collection.bind('reset'  , this.update);
+
+    // Listen out for asset drags and drops.
+    $(window).on('assets:dragStarted', this.onAssetDragStarted);
+
+    if (this.options.autoAttach) {
+      // Defer the attachment of the real view element.
+      _.defer(this.attach);
+    }
+  },
+
+  // Placeholder element to render into later.
+  placeholder: function() {
+    return Handlebars.compile('<div id="placeholder-{{id}}"></div>')(this);
+  },
+
+  render: function() {
+    this.broadcastChanges = false;
+    $(this.el).html(this.template(this));
+    this.collection.each(this.addAttachment);
+    this.makeSortable();
+    this.makeUploader();
+    this.update();
+    this.broadcastChanges = true;
+    return this;
+  },
+
+  // Replace our placeholder element with this.el.
+  attach: function() {
+    $('#placeholder-' + this.id).replaceWith(this.el);
+    this.render();
+  },
+
+  // Add ui and references for an attachment.
+  addAttachment: function(attachment, collection, options) {
+    var view = new slices.AttachmentView({
+      fields: this.options.fields,
+      model: attachment
+    });
+
+    if (options.index < collection.length - 1) {
+      view.$el.insertBefore(this.$('.attachment-list').children()[options.index]);
+    } else {
+      this.$('.attachment-list').append(view.el);
+    }
+
+    view.render();
+    this.views[attachment.cid] = view;
+    this.update();
+  },
+
+  // Remove ui and references for an attachment.
+  removeAttachment: function(attachment) {
+    var view = this.views[attachment.cid];
+    view.remove();
+    delete this.views[attachment.cid];
+    if (attachment.file) this.uploader.removeFile(attachment.file);
+    this.update();
+  },
+
+  // Write a JSON representation of the collection into data-computed-value
+  // on this.el. Slices picks up on the computed-value when saving the page.
+  // Ignores any items with a null asset_id, which are likely to be
+  // failed uploads.
+  update: function() {
+    var value = this.collection.toJSON(),
+        $el = $(this.el);
+
+    value = _.reject(value, function(a) { return a.asset_id == null });
+    $el.data('computed-value', value);
+    $el[this.collection.isEmpty() ? 'removeClass' : 'addClass']('not-empty');
+    if (this.broadcastChanges) $el.trigger('change');
+  },
+
+  // Infers a view and asset from just-clicked button and attempts to remove
+  // the asset from the collection. Will prevent action if upload is in
+  // progress - not ideal, but Plupload doesn't support cancelling an
+  // in-progress uploader.
+  removeClicked: function(e) {
+    var button     = $(e.target),
+        view       = button.parent('li'),
+        attachment = view.data('model');
+
+    this.collection.remove(attachment);
+  },
+
+  // Shows the asset library.
+  openAssetDrawer: function(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    slices.assetDrawer().open({ step: this.assetDrawerStep });
+  },
+
+  assetDrawerStep: function() {
+    var el = $(this.el),
+        bottom = el.offset().top + el.outerHeight() + 30,
+        drawerTop = $(slices.assetDrawer().el).offset().top;
+
+    if (bottom > drawerTop) {
+      var body = $('body');
+      body.scrollTop(body.scrollTop() + (bottom - drawerTop));
+    }
+  },
+
+  // Returns the Attachment view responsible for given File.
+  viewForFile: function(file) {
+    return this.views[file.attachment.cid];
+  },
+
+  // Make items sortable using jQuery UI sortable plugin.
+  makeSortable: function() {
+    this.$('.attachment-list').sortable({
+      handle: '.attachment-thumb',
+      scroll: false,
+
+      beforeStart: _.bind(function(e, ui) {
+        this.attachmentList().freezeHeight();
+        window.autoscroll.start();
+      }, this),
+
+      stop: _.bind(function(e, ui) {
+        this.attachmentList().thawHeight();
+        window.autoscroll.stop();
+      }, this),
+
+      update: this.updateOnSort
+    });
+  },
+
+  // Update collection to match the visible order of item elements.
+  // We avoid jQuery.map here, because it returns some sort of weird
+  // jquery object, rather than an array.
+  updateOnSort: function() {
+    var newOrder = _.map(this.$('.attachment-list li').get(), function(li) {
+      return $(li).data('model');
+    });
+    this.collection.reset(newOrder);
+  },
+
+  // Create an uploader instance and bind up its callbacks.
+  makeUploader: function() {
+    this.uploader = new slices.Uploader({
+      button : this.$('[data-action="upload"]'),
+      drop   : this.el
+    });
+    this.uploader.bind('filesAdded', this.onFilesAdded);
+    this.uploader.bind('fileUploaded', this.onFileUploaded);
+  },
+
+  // When files are added to the upload queue we create corresponding
+  // attachment objects and add them to the collection.
+  onFilesAdded: function(event) {
+    var files = event.files,
+        uploader = event.uploader;
+
+    _(files).each(function(file) {
+      var a = new slices.Attachment({
+        asset: new slices.Asset({ file: file })
+      });
+      // This is clearly a code-smell, but it lets us easily look-up
+      // the attachment-view for this file when events occur.
+      file.attachment = a;
+      // These bits are fine.
+      this.collection.add(a);
+      this.updateFileStatus(file);
+    }, this);
+
+    this.uploader.start();
+  },
+
+  // This looks weird, I know, but really all we’re doing is taking the
+  // response from our upload to /assets and feeding it into our
+  // attachment model.
+  onFileUploaded: function(event) {
+    var file = event.file,
+        response = event.response,
+        attachment = file.attachment,
+        asset = attachment.get('asset');
+
+    // Update the attachment model with just the new asset_id and update
+    // the underlying asset with all the new info. This could do with
+    // refactoring to make it better reveal its intent.
+    attachment.set({ asset_id: response.id });
+    asset.set(response);
+    // Finally complete upload progress display and transition to thumbnail.
+    this.viewForFile(file).updateFileAndComplete(file);
+    // Need to update when uploads complete, so data('value') correctly
+    // reflects all these attachments.
+    this.update();
+    // Send the signal to any asset library views.
+    $(window).trigger('assets:uploadCompleted');
+  },
+
+  // Tell the appropriate attachment object to update against the file.
+  // This needs to be deferred, for reasons mentioned above.
+  updateFileStatus: function(file) {
+    this.viewForFile(file).updateFile(file);
+  },
+
+  // The following methods implement the asset-receiver interface.
+  // See slices.AssetLibraryView for details.
+
+  onAssetDragStarted: function(e, library) {
+    library.registerReceiver(this);
+  },
+
+  withinBounds: function(x, y) {
+    var offset = $(this.el).offset(),
+        top    = offset.top - this.DROP_THRESHOLD,
+        left   = offset.left - this.DROP_THRESHOLD,
+        bottom = top + $(this.el).height() + (this.DROP_THRESHOLD * 2),
+        right  = left + $(this.el).width() + (this.DROP_THRESHOLD * 2);
+
+    return x >= left && x <= right && y >= top && y <= bottom;
+  },
+
+  cursor: function() {
+    return this._cursor = this._cursor || $('<li class="cursor">');
+  },
+
+  assetsOver: function(x, y) {
+    this.$el.addClass('assets-over');
+
+    // So as not to cause excessive re-flows, we only want to move the cursor
+    // when the placement point actually changes.
+    //
+    // The following steps aren’t pretty, and could do with a refactor.
+    //
+    // Find the new placement point.
+    var p = this.findPlacementPoint(x, y);
+    // If we’ve a placement point in memory, and a new point was found,
+    // and they share the same index, then we won’t be moving.
+    var same = (this.placementPoint && p && this.placementPoint.index === p.index);
+    // Commit the placement point to memory.
+    this.placementPoint = p;
+    // If the point hasn’t changed, duck out at this point.
+    if (same) return;
+
+    // If a placement point was found, insert the cursor before.
+    if (p) {
+      this.cursor().insertBefore(p.view.el);
+    // Otherwise, just append to attachment-list.
+    } else {
+      this.cursor().appendTo(this.$('.attachment-list'));
+    }
+  },
+
+  assetsNotOver: function() {
+    this.$el.removeClass('assets-over');
+    this.cursor().detach();
+    delete this.placementPoint;
+  },
+
+  receiveAssets: function(assets, x, y) {
+    var p = this.findPlacementPoint(x, y),
+        position = p ? p.index : this.collection.length;
+
+    _.each(assets, function(asset) {
+      if (this.alreadyContains(asset)) return;
+      this.collection.add({ asset: asset, asset_id: asset.get('id') }, { at: position });
+      position += 1;
+    }, this);
+  },
+
+  // Returns the point at which an asset drop should be placed for the
+  // given coordinates, as a Hash containing the following model, following
+  // view and exact index for placement. If no suitable point is found, it
+  // returns null.
+  //
+  //     findPlacementPoint(0, 0) //-> { attachment: a, view: v, :index: i }
+  //
+  findPlacementPoint: function(x, y) {
+    var result = null,
+        views = this.views;
+
+    this.collection.find(function(a, i) {
+      var v = views[a.cid];
+
+      if (v.midPoint().y > y) {
+        result = { attachment: a, view: v, index: i };
+        return true;
+      }
+
+      return false;
+    });
+
+    return result;
+  },
+
+  // Returns true if the given asset is already in our collection.
+  alreadyContains: function(asset) {
+    var id = asset.get('id');
+
+    return this.collection.any(function(attachment) {
+      return attachment.get('asset_id') === id;
+    });
+  },
+
+  attachmentList: function() {
+    return this.$('.attachment-list');
+  }
+
+});
+