slices 1.0.0

data/app/assets/javascripts/slices/app/helpers/slice_preview.js

@@ -0,0 +1,48 @@
+// Default slice-preview helper. If attachments are present it will emit
+// 'n item(s)', otherwise it will simply emit the content of any textarea
+// or text input.
+//
+// This method has been kept purposefully simple to encourage custom
+// preview helpers.
+//
+// Example:
+//
+//     slices.defaultSlicePreview.call($('.slice-content'))
+//
+slices.defaultSlicePreview = function() {
+  if (this.find('.attachment-list').length) {
+    var count = this.find('.attachment-list li').length;
+    return count + (count === 1 ? ' item' : ' items');
+  } else {
+    var html = this.find('textarea, input[type="text"]')
+    .map(function() { return $(this).val() })
+    .get()
+    .join(' ');
+
+    return $('<div />').html(html).text();
+  }
+}
+
+// Define custom previews for slices using this helper.
+//
+// In true jQuery style, the context of the method `this` is the slice-content
+// element (in this case wrapped in a jQuery object).
+//
+// If the helper is empty, the default slice preview helper will be used.
+//
+// Example:
+//
+//     {{#slicePreview}}
+//       return this.find('input').val().toUpperCase();
+//     {{/slicePreview}}
+//
+Handlebars.registerHelper('slicePreview', function(options) {
+  try {
+    var proc = options.fn && options.fn();
+    if (proc.match(/\S/)) window.customSlicePreview = new Function(proc);
+  } catch(error) {
+    console.error('This slicePreview caused an error:\n' + proc);
+    console.error(error);
+  }
+});
+

data/app/assets/javascripts/slices/app/helpers/tagging.js

@@ -0,0 +1,73 @@
+var Tagging = {
+
+  detect: function() {
+    var self = this;
+    $('.multi-tag-list').each(function(index, tag_list) {
+      self.setup_multi(tag_list);
+    });
+    $('.single-tag-list').each(function(index, tag_list) {
+      self.setup_single(tag_list);
+    });
+  },
+
+  setup_single: function(tag_list) {
+    var self = this;
+    var $tag_list = $(tag_list);
+    if ($tag_list.length) {
+      var $tag_input = $tag_list.parent().find('input');
+      $tag_list.children('li').click(function(event) {
+        var $el = $(event.target)
+        var tagvalue =  $.trim($el.text()).replace(/\,\s*$/,'');
+        $tag_input.val(tagvalue).trigger('change');
+        self.mark_active_tags($tag_list, $tag_input.val());
+      });
+
+      self.mark_active_tags($tag_list, $tag_input.val());
+    }
+  },
+
+  setup_multi: function(tag_list) {
+    var self = this;
+    var $tag_list = $(tag_list)
+    if ($tag_list.length) {
+      var $tag_input = $tag_list.parent().find('input');
+
+      $tag_list.children('li').click(function(event) {
+        var $el = $(event.target);
+        var tagvalue = $.trim($el.text()).replace(/\,\s*$/, '');
+        var regex = new RegExp(tagvalue + ',?')
+
+        if ($el.hasClass('on')) { //remove the tag
+          var new_value = $tag_input.val().replace(regex, '');
+          new_value = self.strip_whitespace(new_value);
+          $tag_input.val(new_value).trigger('change');
+          $el.removeClass('on');
+        } else { //add the tag
+          var new_value = ($tag_input.val() + ', ' + tagvalue);
+          new_value = self.strip_whitespace(new_value);
+          $tag_input.val(new_value).trigger('change');
+          $el.addClass('on');
+        }
+      });
+      self.mark_active_tags($tag_list, $tag_input.val());
+    }
+  },
+
+  mark_active_tags: function($tag_list, current_tags) {
+    var self = this;
+    $tag_list.children('li').each(function(index, tag) {
+      var $tag = $(tag);
+      var regex = new RegExp(self.strip_whitespace($tag.text()));
+      if (current_tags.match(regex)) {
+        $tag.addClass('on');
+      } else {
+        $tag.removeClass('on');
+      }
+    });
+  },
+
+  strip_whitespace: function(string) {
+    string = string.replace(/[\,\s\s+]*$/g,'').replace(/^[\,\s+]*/g,'').replace(/\s\s+/,' ');
+    return string;
+  }
+}

data/app/assets/javascripts/slices/app/helpers/token_field.js

@@ -0,0 +1,17 @@
+// Create a token field for a given field and source on the model.
+//
+// Example:
+//
+//     {{tokenField field="categories" options="available_categories"}}
+//
+Handlebars.registerHelper('tokenField', function(options) {
+  var view = new slices.TokenFieldView({
+    id         : slices.fieldId(this, options.hash.field),
+    values     : this[options.hash.field],
+    options    : options.hash.options && this[options.hash.options],
+    singular   : options.hash.singular === 'true',
+    autoAttach : true
+  });
+
+  return new Handlebars.SafeString(view.placeholder());
+});

data/app/assets/javascripts/slices/app/helpers/upload_icons.js.erb

@@ -0,0 +1,5 @@
+slices.UPLOAD_ICONS = {
+  <% %w(thinking happy sad).each do |name| %>
+    '<%= name %>' : '<%= asset_path("slices/icon_upload_#{ name }") %>.png',
+  <% end %>
+};

data/app/assets/javascripts/slices/app/helpers/uploader.js

@@ -0,0 +1,127 @@
+// Returns a freshly prepared slices.Uploader instance.
+//
+//     new slices.Uploader({
+//       button : '#my-button',
+//       drop   : '#my-drop-target',
+//       params : {}
+//     });
+//
+'use strict';
+
+slices.Uploader = function(options) {
+  this.options = $.extend({}, this.options, options);
+  this.initialize();
+}
+$.extend(slices.Uploader.prototype, Backbone.Events, {
+
+  // Default options
+  options: {
+    url: '/admin/assets.json'
+  },
+
+  initialize: function() {
+    this.files = [];
+
+    this.button = $(this.options.button);
+    this.input  = this.createInput();
+    this.drop   = $(this.options.drop);
+
+    this.configureCSRF();
+    this.observeEvents();
+  },
+
+  configureCSRF: function() {
+    var csrfParam = $('meta[name="csrf-param"]').attr('content'),
+        csrfToken = $('meta[name="csrf-token"]').attr('content');
+
+    this.options.params = this.options.params || {};
+    this.options.params[csrfParam] = csrfToken;
+  },
+
+  createInput: function() {
+    return $('<input />', {
+      type     : 'file',
+      multiple : 'multiple',
+      style    : 'position: absolute; visibility: hidden'
+    });
+  },
+
+  observeEvents: function() {
+    var self = this;
+
+    this.input.on('change', function(e) { self.onInputChange(e) });
+    this.button.on('click', function(e) { self.onButtonClick(e) });
+    this.drop.on('dragenter', false);
+    this.drop.on('dragover', false);
+    this.drop.on('drop', function(e) { self.onDrop(e) });
+  },
+
+  onInputChange: function(event) {
+    this.addFiles(this.input.prop('files'));
+    this.input.val('');
+  },
+
+  onButtonClick: function(event) {
+    event.preventDefault();
+    this.input.click();
+  },
+
+  onDrop: function(event) {
+    event.preventDefault();
+    this.addFiles(event.originalEvent.dataTransfer.files);
+  },
+
+  addFiles: function(fileList) {
+    var self = this;
+    _(fileList).each(function(browserFile) {
+      var file = new slices.fileClass({
+        uploader      : this,
+        uploadOptions : this.uploadOptions(),
+        browserFile   : browserFile
+      });
+      self.files.push(file);
+    }, this);
+
+    this.trigger('filesAdded', { uploader: this, files: this.files });
+  },
+
+  uploadOptions: function() {
+    return {
+      url: this.options.url,
+      params: this.options.params
+    };
+  },
+
+  start: function() {
+    // Only start uploading if there are files to upload...
+    // and there is not a current file
+    if (this.files.length == 0 || this.file != undefined) {
+      return false;
+    }
+
+    // Take the first file from the list and start the upload
+    this.file = this.files.shift();
+    this.file.start();
+  },
+
+  onprogress: function(event) {
+    this.trigger('fileProgress', event);
+  },
+
+  onload: function(event) {
+    this.trigger('fileUploaded', event);
+    this.file = undefined;
+    this.start();
+  },
+
+  onfail: function(event) {
+    this.trigger('fileError', event);
+    this.file = undefined;
+    this.start();
+  },
+
+  toString: function() {
+    return 'slices.Uploader';
+  }
+
+});

data/app/assets/javascripts/slices/app/models/asset.js

@@ -0,0 +1,29 @@
+// Represents assets in a few different states. Simple assets as they exist
+// in the Asset Library; Assets in use within a Slice; and Assets in the
+// process of being uploaded.
+slices.Asset = Backbone.Model.extend({
+
+  urlRoot: '/admin/assets',
+
+  // Filtered set of attrs
+  toJSON: function() {
+    return { asset: {
+      name: this.get('name'),
+      tags: this.get('tags')
+    }};
+  },
+
+  isImage: function() {
+    return (this.get('file_content_type') || '').indexOf('image') === 0;
+  },
+
+  // Okay, so this method involves a bit of reaching into the prototype
+  // cookie jar, as Backbone doesn’t really have a way to subclass these
+  // fundamental methods of models.
+  destroy: function(options) {
+    this.trigger('destroying');
+    Backbone.Model.prototype.destroy.apply(this);
+  }
+
+});
+

data/app/assets/javascripts/slices/app/models/asset_collection.js

@@ -0,0 +1,41 @@
+// This is our connection to the Asset library.
+slices.AssetCollection = Backbone.Collection.extend({
+
+  model: slices.Asset,
+
+  url: '/admin/assets',
+
+  initialize: function() {
+    this.bind('add', this.afterAdd);
+    this.bind('remove', this.afterRemove);
+  },
+
+  // This request responds with a page worth of results in `items`.
+  parse: function(response) {
+    this.currentPage = response.current_page;
+    this.perPage = response.per_page;
+    this.totalEntries = response.total_entries
+    this.totalPages = response.total_pages;
+    return response.items;
+  },
+
+  // Returns true if there are more pages in the current criteria.
+  hasMorePages: function() {
+    return this.currentPage < this.totalPages;
+  },
+
+  // After an asset is added, we need to update the non-standard
+  // totalEntries count.
+  afterAdd: function() {
+    this.totalEntires += 1;
+    this.totalPages = Math.ceil(this.totalEntries / this.perPage);
+  },
+
+  // Similarly, we need to update the count on remove.
+  afterRemove: function() {
+    this.totalEntries -= 1;
+    this.totalPages = Math.ceil(this.totalEntries / this.perPage);
+  }
+
+});
+

data/app/assets/javascripts/slices/app/models/attachment.js

@@ -0,0 +1,29 @@
+// Represents an attachment object, which will contain an asset and any other
+// fields the attachment is decorated with.
+slices.Attachment = Backbone.Model.extend({
+
+  // Initialize the attachment. Only thing of interest here is handling
+  // the presence of files.
+  initialize: function() {
+    if (this.get('file')) {
+      this.get('file').attachment = this;
+      this.updateFileStatus();
+    }
+    if (this.get('asset') && this.get('asset').constructor !== slices.Asset) {
+      this.set({ asset: new slices.Asset(this.get('asset')) });
+    }
+  },
+
+  // Trigger normal change event when things happen with the file.
+  updateFileStatus: function() {
+    this.trigger('change');
+  },
+
+  toJSON: function() {
+    var attrs = _.clone(this.attributes);
+    delete attrs.asset;
+    return attrs;
+  }
+
+});
+

data/app/assets/javascripts/slices/app/models/attachment_collection.js

@@ -0,0 +1,7 @@
+// Represents a collection of attachments.
+slices.AttachmentCollection = Backbone.Collection.extend({
+
+  model: slices.Attachment,
+
+});
+

data/app/assets/javascripts/slices/app/models/composer_item.js

@@ -0,0 +1 @@
+slices.ComposerItem = Backbone.Model.extend();

data/app/assets/javascripts/slices/app/models/composer_item_collection.js

@@ -0,0 +1,3 @@
+slices.ComposerItemCollection = Backbone.Collection.extend({
+  model: slices.ComposerItem
+});

data/app/assets/javascripts/slices/app/models/file.js

@@ -0,0 +1,103 @@
+slices.FILE_QUEUED    = 'queued';
+slices.FILE_UPLOADING = 'uploading';
+slices.FILE_FAILED    = 'failed';
+slices.FILE_DONE      = 'done';
+
+slices.File = Backbone.Model.extend({
+
+  defaults: {
+    status: slices.FILE_QUEUED
+  },
+
+  initialize: function() {
+    this.uploader = this.get('uploader');
+    this.url = this.get('uploadOptions').url;
+    this.params = this.get('uploadOptions').params;
+  },
+
+  start: function() {
+    this.upload();
+  },
+
+  status: function() {
+    switch(this.get('status')) {
+    case slices.FILE_QUEUED:
+      return 'queued';
+    case slices.FILE_UPLOADING:
+      if (this.progress() < 1) return 'uploading';
+      else return 'processing';
+    case slices.FILE_FAILED:
+      return 'failed';
+    case slices.FILE_DONE:
+      return 'done';
+    default:
+      return 'queued';
+    }
+  },
+
+  progress: function() {
+    return this.get('loaded') / this.get('total');
+  },
+
+  formDataWithOptions: function(options) {
+    var formData = new FormData();
+    for (var i in options) {
+      formData.append(i, options[i])
+    }
+    return formData;
+  },
+
+  formData: function() {
+    var formData = this.formDataWithOptions(this.params);
+    formData.append('file', this.get('browserFile'));
+    return formData;
+  },
+
+  upload: function() {
+    var self = this,
+        url  = this.url,
+        data = this.formData();
+
+    this.uploadWithOptions(url, data, {
+      progress: function(xhr, progress) { self.onProgress(progress) },
+      success: function (response) { self.onSuccess(response) },
+      error: function (response) { self.onError(response) }
+    });
+  },
+
+  uploadWithOptions: function(url, data, callbacks) {
+    var jqXHR = $.ajax({
+      url         : url,
+      data        : data,
+      cache       : false,
+      processData : false,
+      type        : 'POST',
+      contentType : false,
+      progress    : callbacks.progress,
+      success     : callbacks.success,
+      error       : callbacks.error
+    });
+  },
+
+  onProgress: function(progress) {
+    if (!progress.lengthComputable) return;
+
+    this.set({
+      status: slices.FILE_UPLOADING,
+      loaded: progress.loaded,
+      total: progress.total
+    });
+  },
+
+  onSuccess: function(response) {
+    this.set('status', slices.FILE_DONE);
+    this.uploader.onload({ file: this, response: response });
+  },
+
+  onError: function(response) {
+    this.set('status', slices.FILE_FAILED);
+    this.uploader.onfail({ file: this, response: response });
+  }
+
+});
+