slices 1.0.0

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

@@ -0,0 +1,209 @@
+// This view presents all useful details about an asset, and allows for
+// actions such as replacement and deletion.
+slices.AssetEditorView = Backbone.View.extend({
+
+  className: 'asset-editor',
+
+  // This template is a monster and needs to be extracted. We could aim to
+  // follow the Backbone/Jammit pattern, but aiming for asset pipeline
+  // integration seems a more worthwhile end goal.
+  template: Handlebars.compile(
+    '<div class="fields">' +
+      '<div class="overview">' +
+        '<div class="thumb asset-library-item">' +
+          '<img src="{{thumbUrl}}" alt="{{name}}">' +
+          '<span class="name">{{displayName}}</span>' +
+        '</div>' +
+        '<div class="meta">' +
+          '<dl class="details">' +
+            '<dd><input type="text" name="name" value="{{name}}"></dd>' +
+            '<dd>{{size}}</dd>' +
+            '<dd>Added {{createdAt}}</dd>' +
+            '<dd><a href="{{originalUrl}}">Download original</a></dd>' +
+          '</dl>' +
+          '<div class="options">' +
+            '<button data-action="replace">Upload a New Version</button>' +
+          '</div>' +
+        '</div>' +
+      '</div>' +
+      '<div class="tabs">' +
+        '<div class="tab meta">' +
+          '<label>Tags</label>' +
+          '<textarea name="tags" rows="5">{{tags}}</textarea>' +
+        '</div>' +
+        '{{#if pages}}' +
+          '<div class="tab pages">' +
+            '<label>Appears on</label>' +
+            '<ul>' +
+              '{{{pages}}}' +
+            '</ul>' +
+          '</div>' +
+        '{{/if}}' +
+      '</div>' +
+    '</div>' +
+    '<div class="bottom-toolbar">' +
+      '<div class="button-group aligned-right">' +
+        '<button type="submit" data-action="save">Save Changes</button>' +
+        '<button data-action="cancel">Cancel</button>' +
+      '</div>' +
+      '<div class="button-group pinned left top">' +
+        '<button data-action="delete" class="delete">Delete</button>' +
+      '</div>' +
+    '</div>'
+  ),
+
+  pageItemTemplate: Handlebars.compile(
+    '<li><a href="/admin/pages/{{id}}" target="_blank">{{name}}</a></li>'
+  ),
+
+  events: {
+    'click [data-action="save"]'   : 'save',
+    'click [data-action="cancel"]' : 'cancel',
+    'click [data-action="delete"]' : 'destroy'
+  },
+
+  initialize: function() {
+    _.bindAll(this);
+    this.model.on('change', this.render);
+  },
+
+  render: function() {
+    $(this.el).html(this.template(this));
+    this.makeUploader();
+    return this;
+  },
+
+  thumbUrl: function() {
+    return this.model.get('asset_url')
+        || '<%= asset_path 'slices/icon_generic_file.png' %>';
+  },
+
+  originalUrl: function() {
+    return this.model.get('original_url');
+  },
+
+  name: function() {
+    return this.model.get('name');
+  },
+
+  tags: function() {
+    return this.model.get('tags');
+  },
+
+  // Handlebars does not call functions passed to `#each` and `#if`,
+  // so `pages` has to render a collections of sub-templates.
+  pages: function() {
+    return _.map(this.model.get('pages'), this.pageItemTemplate).join('');
+  },
+
+  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'));
+  },
+
+  // At present, it’s beneficial to specify exactly which attributes we’re
+  // sending back to Slices. This may be automated in future, but for now,
+  // remember to add any other fields in here.
+  save: function(e) {
+    this.model.save({
+      name: this.$('[name="name"]').val(),
+      tags: this.$('[name="tags"]').val()
+    }, {
+      success: this.whenSaveSucceeds,
+      error: this.whenSaveFails
+    });
+  },
+
+  whenSaveSucceeds: function(model, response) {
+    this.close();
+  },
+
+  whenSaveFails: function(model, response) {},
+
+  cancel: function(e) {
+    this.close();
+  },
+
+  destroy: function(e) {
+    if (confirm('Are you sure you want to delete this asset?')) {
+      this.model.destroy();
+      this.close();
+    }
+  },
+
+  close: function() {
+    this.trigger('close');
+  },
+
+  makeUploader: function() {
+    this.uploader = new slices.Uploader({
+      button : this.$('[data-action="replace"]'),
+      drop   : this.$('.thumb'),
+      url    : this.model.url(),
+      params : { _method: 'put' }
+    });
+    this.uploader.bind('filesAdded', this.onFilesAdded);
+    this.uploader.bind('fileUploaded', this.onFileUploaded);
+  },
+
+  onFilesAdded: function(event) {
+    var files = event.files,
+        file = files[0];
+
+    this.fileView = new slices.FileView({ model: file });
+    this.$('.thumb').append(this.fileView.el);
+    this.fileView.model.upload(file);
+
+    this.uploader.start();
+  },
+
+  onFileUploaded: function(event) {
+    this.model.set(event.response);
+  },
+
+  updateFileStatus: function(file) {
+    this.fileView.model.upload(file);
+  },
+
+});
+
+// This somewhat ungainly method opens the editor in a modal.
+slices.AssetEditorView.openModal = function(options) {
+  var view = new slices.AssetEditorView(options);
+  var modal = $('<div class="jqmWindow modal" id="asset_editor_modal">');
+
+  modal.
+    appendTo('body').
+    append(view.el).
+    jqm({
+      modal: true,
+      onShow: function (h) {
+        h.w.fadeIn(150);
+        modal.fadeIn(300);
+      },
+      onHide: function (h) {
+        h.w.fadeOut(150, function() { view.remove() });
+        h.o.fadeOut(300, function() { modal.remove() });
+      },
+      overlay: 40
+    }).
+    jqmShow();
+
+  view.render();
+
+  view.bind('close', function() { modal.jqmHide() });
+
+  return view;
+}
+

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

@@ -0,0 +1,720 @@
+// The asset library is dedicated to browsing, searching and managing of
+// assets. It can be rendered in-place, or to a specific element using the
+// helper method.
+//
+// To render the library inline in html:
+//
+//     <script>slices.renderAssetLibrary()</script>
+//
+// Otherwise:
+//
+//     slices.renderAssetLibrary({ el: '#my-target' })
+//
+slices.AssetLibraryView = Backbone.View.extend({
+
+  DRAG_THRESHOLD: 15,
+
+  DRAWER_HEIGHT: 250,
+
+  events: {
+    'keyup [type="search"]'          : 'search',
+    'click [type="search"]'          : 'search',
+    'click [data-action="close"]'    : 'close',
+    'click [data-action="show-all"]' : 'showAll',
+    'mousedown .library-container'   : 'backgroundPress',
+    'mousedown .resize-handle'       : 'startResize'
+  },
+
+  thumbs: {},
+
+  selection: [],
+
+  currentSearchTerm: '',
+
+  className: 'asset-library',
+
+  // We include the full template here, so the view can be rendered anywhere
+  // without html needing to be present ahead of time.
+  template: Handlebars.compile(
+    '<div class="toolbar">' +
+      '{{{resizeHandle}}}' +
+      '<input type="search" id="assets-search" placeholder="Search assets...">' +
+      '<div class="count"></div>' +
+      '{{{hint}}}' +
+      '<div class="actions"><ul>{{actions}}</ul></div>' +
+    '</div>' +
+    '<div class="library-container">' +
+      '<ul class="library"></ul>' +
+    '</div>'
+  ),
+
+  // The collection is instantiated during initialization, as this is an
+  // 'AppView' style class.
+  initialize: function() {
+    _.bindAll(this);
+
+    this.collection = new slices.AssetCollection();
+    this.collection.bind('add', this.add);
+    this.collection.bind('remove', this.remove);
+    this.collection.bind('reset', this.reset);
+    $(window).on('assets:uploadCompleted', this.fetch);
+
+    this.render();
+
+    this.scrollArea = this.$('.library-container');
+    this.scrollArea.on('scroll', this.onScroll);
+
+    this.initializeUploader();
+
+    this.showLoadingSpinner();
+
+    this.fetch();
+  },
+
+  render: function() {
+    $(this.el).html(this.template(this));
+    return this;
+  },
+
+  // Clear all thumbs on display and re-render the collection.
+  reset: function() {
+    this.clearThumbs();
+    this.collection.each(this.add);
+  },
+
+  // Create a thumb view for the model, render it, and stick it in
+  // our reference hash.
+  add: function(model) {
+    var thumb = new slices.AssetThumbView({ model: model, selectable: true });
+    thumb.bind('thumb:press', this.thumbPress);
+    thumb.bind('thumb:release', this.thumbRelease);
+    thumb.bind('thumb:blur', this.thumbBlur);
+    this.loadingSpinner().before(thumb.render().el);
+    this.thumbs[model.cid] = thumb;
+    this.updateCount();
+  },
+
+  // Ask the thumb view to remove itself, and delete the reference.
+  remove: function(model) {
+    this.clearThumb(model.cid);
+    this.updateCount();
+  },
+
+  // Handle special keystrokes, or defer to our debounced general search.
+  search: function(e) {
+    if (e.which == 27) this.$('[type="search"]').val('');
+    this._search(e);
+  },
+
+  // This debounced method actually performs the search on our collection.
+  _search: _.debounce(function(e) {
+    var term = this.searchTerm();
+
+    if (term === this.currentSearchTerm) return;
+
+    this.currentSearchTerm = term;
+    this.fetch();
+  }, 300),
+
+  // Assuming we’re in upload-view, take us back to normal.
+  showAll: function() {
+    if (this.uploader.files.length > 0) {
+      alert('Uploads are still in progress, please wait for them to finish.');
+    } else {
+      this.fetch();
+    }
+  },
+
+  // Remove all thumb views currently on display.
+  clearThumbs: function() {
+    this.updateCount('Searching…');
+    for (var cid in this.thumbs) this.clearThumb(cid);
+  },
+
+  // Remove a specific thumb.
+  clearThumb: function(cid) {
+    var thumb = this.thumbs[cid];
+    this.selection = _(this.selection).without(thumb);
+    thumb.remove();
+    delete this.thumbs[cid];
+  },
+
+  // Helper method for getting the value of the search field.
+  searchTerm: function() {
+    return this.$('[type="search"]').val();
+  },
+
+  // If we’re in drawer mode, we’ll display a hint that users should
+  // drag and drop.
+  hint: function() {
+    if (this.options.mode === 'drawer') {
+      return '<div class="hint">Drag &amp; drop to place on the page</div>';
+    }
+  },
+
+  // If we’re in drawer mode, we’ll add a resize handle in here.
+  resizeHandle: function() {
+    if (this.options.mode === 'drawer') {
+      return '<div class="resize-handle"></div>';
+    }
+  },
+
+  // We render different action button depending on the mode.
+  actions: function() {
+    var actions = [];
+
+    actions.push('<li><a class="button" data-action="upload">Upload</a></li>');
+
+    if (this.options.mode === 'drawer') {
+      actions.push('<li><a class="button" data-action="close">Close</a></li>');
+    }
+
+    return new Handlebars.SafeString(actions.join(''));
+  },
+
+  // The open and close methods only apply if in 'drawer' mode.
+  open: function(options) {
+    $('#container').stop().animate({ paddingBottom: this.DRAWER_HEIGHT + 'px' });
+    $(this.el).stop().animate(
+      { height: this.DRAWER_HEIGHT + 'px' },
+      _.extend({}, options, { complete: this.afterOpen })
+    );
+  },
+  afterOpen: function() {
+    this.$('input[type="search"]')[0].focus();
+  },
+  close: function() {
+    this.$('input[type="search"]')[0].blur();
+    $('#container').stop().animate({ paddingBottom: '0px' });
+    $(this.el).stop().animate({ height: '0px' });
+  },
+
+  // Thumb press/release behaviour mimicks that of operating system file
+  // selection. Holding down shift selects ranges of files, with memory of
+  // the anchor. Holding down cmd/ctrl selects multiple assets. Clicks
+  // without modifiers select single assets.
+  //
+  // This method is disgraceful at the moment, because there are a few
+  // modes of behaviour. It’s an ideal candidate for refactoring.
+  thumbPress: function(event, thumb) {
+    _.invoke(this.selection, 'deselect');
+
+    if (event.shiftKey) {
+      if (this.selection.length === 0) {
+        this.selection.push(thumb);
+        this.selectionAnchor = thumb;
+      } else {
+        var first   = this.selectionAnchor,
+            start   = this.collection.indexOf(first.model),
+            end     = this.collection.indexOf(thumb.model),
+            lowest  = Math.min(start, end),
+            highest = Math.max(start, end);
+
+        this.selection = [];
+
+        for (var i = lowest; i <= highest; i++) {
+          var thumb = this.thumbs[this.collection.at(i).cid];
+          this.selection.push(thumb);
+        }
+      }
+    } else if (event.metaKey) {
+      if (_(this.selection).include(thumb)) {
+        this.selection = _(this.selection).without(thumb);
+      } else {
+        this.selection.push(thumb);
+      }
+      this.selectionAnchor = _.sortBy(this.selection, function(thumb) {
+        return thumb.model.collection.indexOf(thumb.model);
+      })[0];
+    } else {
+      if (!_(this.selection).include(thumb)) {
+        this.selection = [thumb];
+        this.selectionAnchor = thumb;
+      }
+    }
+
+    _.invoke(this.selection, 'select');
+
+    if (this.selection.length > 0) this.prepareForDrag(event);
+
+    this.listenForKeys();
+  },
+
+  // Most selection releated behaviours happen on mousedown. The exception
+  // is when multiple assets are selected - a single unmodified click will
+  // set the selection to the clicked asset, but only when the mouse is
+  // released.
+  thumbRelease: function(event, thumb) {
+    if (event.metaKey || event.shiftKey) return;
+
+    _.invoke(this.selection, 'deselect');
+    this.selection = [thumb];
+    this.selectionAnchor = thumb;
+    _.invoke(this.selection, 'select');
+  },
+
+  // Thumb Blur is not the best name, but this basically implies that an
+  // action has taken place which should cause asset library thumb-related
+  // actions to take a back-seat. This is used when the asset editor is
+  // opened.
+  thumbBlur: function() {
+    this.deselectAll();
+  },
+
+  // When the background is pressed, the selection is cleared out.
+  backgroundPress: function(event) {
+    if (event.shiftKey || event.metaKey) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.deselectAll();
+  },
+
+  // Deselect all thumbs and trigger appropriate actions.
+  deselectAll: function() {
+    _.invoke(this.selection, 'deselect');
+    this.selection = [];
+  },
+
+  // Array of models from the current selection.
+  selectedAssets: function() {
+    return _.pluck(this.selection, 'model');
+  },
+
+  // Update the UI count of asset(s) found.
+  updateCount: function(message) {
+    this.$('.count').html(message || this.countMessage());
+  },
+
+  // Messages for different asset counts.
+  countMessages: {
+    default: {
+      none: Handlebars.compile('No assets, yet…'),
+      one: Handlebars.compile('Showing 1 asset'),
+      some: Handlebars.compile(
+        'Showing latest {{count}} assets of {{total}} total'
+      ),
+      all: Handlebars.compile(
+        'Showing all {{count}} assets, latest first'
+      )
+    },
+    uploads: {
+      one: Handlebars.compile(
+        'Showing 1 new asset ' +
+        '(<a data-action="show-all">Show everything</a>)'
+      ),
+      some: Handlebars.compile(
+        'Showing {{count}} new assets ' +
+        '(<a data-action="show-all">Show everything</a>)'
+      ),
+    },
+    search: {
+      none: Handlebars.compile('No matching assets'),
+      one: Handlebars.compile('Showing 1 matching asset'),
+      some: Handlebars.compile(
+        'Showing latest {{count}} matching assets of {{total}} total'
+      ),
+      all: Handlebars.compile(
+        'Showing all {{count}} maching assets, latest first'
+      )
+    }
+  },
+
+  // Returns the appropriate message count for the current context.
+  countMessage: function() {
+    var t = this.countMessages,
+        total = this.collection.totalEntries,
+        count = this.collection.length;
+
+    if (this.inUploadView) {
+      t = t.uploads;
+
+      if (count === 1) {
+        return t.one({ count: count });
+      } else {
+        return t.some({ count: count });
+      }
+    } else {
+      t = this.currentSearchTerm ? t.search : t.default;
+
+      if (total === 0) {
+        return t.none();
+      } else if (total === 1) {
+        return t.one();
+      } else if (total > count) {
+        return t.some({ total: total, count: count });
+      } else {
+        return t.all({ total: total, count: count });
+      }
+    }
+  },
+
+  NEXT_PAGE_THRESHOLD: 600,
+
+  // Potentially load more entries on scroll.
+  onScroll: _.debounce(function(e) {
+    if (this.loading) return;
+    if (this.inUploadView) return;
+
+    var library      = this.$('.library'),
+        scrollTop    = this.scrollArea.scrollTop(),
+        scrollBottom = scrollTop + this.scrollArea.height(),
+        remaining    = library.height() - scrollBottom;
+
+    if (remaining <= this.NEXT_PAGE_THRESHOLD && this.collection.hasMorePages()) {
+      this.showLoadingSpinner();
+      this.fetch({ add: true });
+    }
+  }, 300),
+
+  // Spinner graphic, revealed as necessary.
+  loadingSpinner: _.memoize(function() {
+    return $(
+      '<li class="loading-indicator">' +
+        '<span class="label">Loading&hellip;</label>' +
+       '</li>'
+    ).appendTo(this.$('.library'));
+  }),
+
+  showLoadingSpinner: function() {
+    this.loadingSpinner().css({ display: 'block' });
+  },
+
+  hideLoadingSpinner: function() {
+    this.loadingSpinner().css({ display: 'none' });
+  },
+
+  // Wrapper around the collection’s fetch method. Takes seach
+  // and paging into account.
+  fetch: function(options) {
+    options = _.extend({ add: false }, options);
+
+    this.loading = true;
+
+    this.exitUploadView();
+    this.showLoadingSpinner();
+
+    if (!options.add) this.collection.reset();
+
+    this.collection.fetch({
+      data: {
+        search: this.searchTerm(),
+        page: options.add ? (this.collection.currentPage + 1) : 1
+      },
+      add: options.add,
+      success: this.onFetchSuccess
+    });
+  },
+
+  // Hide spinner and set loading state back to false.
+  onFetchSuccess: function() {
+    this.loading = false;
+    this.hideLoadingSpinner();
+    this.updateCount();
+  },
+
+  // ## Drag-Drop API:
+  //
+  // Any object can hook into AssetLibrary’s drag-drop API by
+  // implementing the following protocol:
+  //
+  // Bind to the `assets:dragStarted` event and register to receive assets:
+  //
+  //     var self = this;
+  //
+  //     $(window).on('assets:dragStarted', function(event, library) {
+  //       library.registerReceiver(self);
+  //     });
+  //
+  // Implement the `withinBounds` method:
+  //
+  //     this.withinBounds = function(x, y) {
+  //       // Return true or false
+  //     }
+  //
+  // Implement the `assetsOver` method:
+  //
+  //     this.assetsOver = function(x, y) { ... }
+  //
+  // Implement the `assetsNotOver` method:
+  //
+  //     this.assetsNotOver = function() { ... }
+  //
+  // Implement the `receiveAssets` method:
+  //
+  //     this.receiveAssets = function(assets, x, y) { ... }
+  //
+
+  // Store the originating click, and bind onto relevant mouse events.
+  prepareForDrag: function(e) {
+    $(document).on('mousemove', this.onDrag).
+                on('mouseup', this.stopDrag);
+
+    this.dragOrigin = { x: e.pageX, y: e.pageY };
+  },
+
+  // If we’ve already started dragging, update the little helper so it follows
+  // the user’s mouse pointer around. Otherwise, test if we’ve crossed the
+  // threshold yet.
+  onDrag: function(e) {
+    if (this.dragging) {
+      this.dragHelper.css({ left: e.pageX + 'px', top: e.pageY + 'px' });
+      this.reviewReceiversForDrag(e.pageX, e.pageY);
+    } else {
+      this.testDragTreshold(e);
+    }
+  },
+
+  // Dragging only begins when the mouse is dragged over DRAG_TRESHOLD.
+  testDragTreshold: function(e) {
+    var absDelta = Math.max(
+      Math.abs(e.pageX - this.dragOrigin.x),
+      Math.abs(e.pageY - this.dragOrigin.y)
+    );
+
+    if (absDelta >= this.DRAG_THRESHOLD) this.startDrag(e);
+  },
+
+  // Set the dragging state to true and create the drag helper -
+  // the collection of little thumbs representing the current selection.
+  startDrag: function(e) {
+    this.dragging = true;
+
+    this.dragHelper = $('<span class="asset-drag-helper">');
+    this.dragHelper.css({ position: 'absolute' });
+
+    for (var i in this.selection) { var thumb = this.selection[i];
+      var img = thumb.$('img').clone(false);
+      this.dragHelper.append(img);
+    }
+
+    this.dragHelper.appendTo('body');
+
+    var width = Math.ceil(Math.sqrt(this.selection.length)) *
+    (this.dragHelper.width() / this.selection.length);
+
+    this.dragHelper.width(width);
+
+    this.receivers = [this];
+
+    $(window).trigger('assets:dragStarted', this);
+
+    window.autoscroll.start();
+
+    this.onDrag(e);
+  },
+
+  // Unbind mousey events, delete the drag helper, and inform potenital
+  // recipients that a drop is taking place.
+  stopDrag: function(e) {
+    $(document).off('mousemove', this.onDrag).
+                off('mouseup', this.stopDrag);
+
+    window.autoscroll.stop();
+
+    if (this.dragHelper) {
+      this.dragHelper.remove();
+      delete this.dragHelper;
+    }
+
+    delete this.dragging;
+
+    this.reviewReceiversForDrop(e.pageX, e.pageY);
+    delete this.receivers;
+  },
+
+  // Registers a potential asset receiver. Receivers are polled in order.
+  registerReceiver: function(receiver) {
+    this.receivers.push(receiver);
+  },
+
+  // On drag, we’ll want to send `assetsNotOver` to all receivers,
+  // then identify the receiver under the cursor (if any) and it
+  // `assetsOver`.
+  reviewReceiversForDrag: function(x, y) {
+    var receiver = this.identifyReceiver(x, y);
+
+    _.each(this.receivers, function(r) {
+      if (r !== receiver) r.assetsNotOver();
+      else r.assetsOver(x, y);
+    });
+  },
+
+  // On drop, we’ll identify the receiver under the cursor and send
+  // `receiveAssets`, with the current selection.
+  reviewReceiversForDrop: function(x, y) {
+    _.invoke(this.receivers, 'assetsNotOver');
+    var receiver = this.identifyReceiver(x, y);
+    if (receiver) receiver.receiveAssets(this.selectedAssets(), x, y);
+  },
+
+  // Find the first receiver in the stack for which `withinBounds`
+  // returns true.
+  identifyReceiver: function(x, y) {
+    return _.find(this.receivers, function(receiver) {
+      return receiver.withinBounds(x, y);
+    });
+  },
+
+  // Internal implementation of asset-receiver interface.
+  //
+  // The library itself is first on the stack of receivers.
+  // So, if an asset payload is over the library,
+  // it will get be the identified receiver.
+
+  withinBounds: function(x, y) {
+    var offset = $(this.el).offset(),
+        top    = offset.top,
+        left   = offset.left,
+        bottom = top + $(this.el).height(),
+        right  = left + $(this.el).width();
+
+    return x >= left && x <= right && y >= top && y <= bottom;
+  },
+
+  assetsOver: function() {},
+  assetsNotOver: function() {},
+  receiveAssets: function() {},
+
+  keydown: function(e) {
+    if (this.selection.length > 0 && e.which === 8) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.destroySelection();
+    }
+  },
+
+  // Destroy the selected assets. This sends 'destroy' to each asset
+  // indvidually. If the responses to the DELETE requests are a bit slow,
+  // then this can look a little inelegant.
+  destroySelection: function() {
+    if (this.selection.length === 1) {
+      var message = 'Are you sure you want to delete this asset?';
+    } else {
+      var message = Handlebars.compile(
+        'Are you sure you want to delete these {{count}} assets?'
+      )({ count: this.selection.length });
+    }
+
+    if (confirm(message)) {
+      _.invoke(this.selectedAssets(), 'destroy');
+    }
+  },
+
+  // When this mode is switched on, AssetLibrary will listen out globally
+  // for keydown events; primarily to catch the delete key at the moment.
+  //
+  // If a click is encountered outside the area of the library, we jump
+  // out of this mode.
+  listenForKeys: function() {
+    if (this.listeningForKeys) return;
+    this.listeningForKeys = true;
+    $(window).on('keydown', this.keydown);
+    $(window).one('mousedown', this.stopListeningForKeys);
+  },
+
+  // Jump out of keydown-aware mode.
+  stopListeningForKeys: function() {
+    this.listeningForKeys = false;
+    $(window).off('keydown', this.keydown);
+  },
+
+  startResize: function(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    this.resizeOrigin = { y: e.pageY, h: this.$el.height() };
+
+    $(window).on('mousemove', this.performResize).
+              on('mouseup', this.endResize);
+  },
+
+  performResize: function(e) {
+    var delta = e.pageY - this.resizeOrigin.y,
+        height = Math.max(this.resizeOrigin.h - delta, this.DRAWER_HEIGHT);
+
+    this.$el.height(height);
+  },
+
+  endResize: function(e) {
+    $('#container').css({ paddingBottom: this.$el.height() + 'px' });
+    $(window).off('mousemove', this.performResize).
+              off('mouseup', this.endResize);
+  },
+
+  // Enables upload-to-library functionality.
+  initializeUploader: function() {
+    if (this.uploader) return;
+
+    this.uploader = new slices.Uploader({
+      button : this.$el.find('[data-action="upload"]'),
+      drop   : this.$el.find('.library-container')
+    });
+    this.uploader.on('filesAdded', this.onFilesAdded);
+    this.uploader.on('fileUploaded', this.onFileUploaded);
+  },
+
+  // When files are added to the upload queue we create corresponding
+  // asset objects and add them to the collection.
+  onFilesAdded: function(event) {
+    this.enterUploadView();
+
+    _(event.files).each(function(file) {
+      var a = new slices.Asset({ file: file });
+      // This is clearly a code-smell!
+      file.asset = 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
+  // asset model.
+  //onFileUploaded: function(uploader, file, transport) {
+  onFileUploaded: function(event) {
+    var file = event.file,
+        response = event.response;
+
+    // Update the attachment model. Silently, because we want to control
+    // how it redraws.
+    var asset = file.asset;
+    asset.set(response);
+    // Finally complete upload progress display and transition to thumbnail.
+    this.viewForFile(file).updateFileAndComplete(file);
+  },
+
+  // When uploading files we just display the new uploads. All this does is
+  // clear the current collection. There's also a catch in there to ensure
+  // we don’t accidentally clear the collection when we don’t mean to.
+  enterUploadView: function() {
+    if (this.inUploadView) return;
+    this.inUploadView = true;
+    this.collection.reset();
+    this.$('[type="search"]').hide();
+    this.updateCount('Uploading…');
+  },
+
+  // When we’re no longer concerned with just our uploaded files, we return
+  // to normal.
+  exitUploadView: function() {
+    if (!this.inUploadView) return;
+    this.inUploadView = false;
+    this.$('[type="search"]').show();
+    this.updateCount();
+  },
+
+  // Passes information from upload on to the file’s view.
+  updateFileStatus: function(file) {
+    this.viewForFile(file).updateFile(file);
+  },
+
+  // Returns the view object associated with the given file.
+  viewForFile: function(file) {
+    return this.thumbs[file.asset.cid];
+  }
+
+});
+