slices 1.0.0

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

@@ -0,0 +1,101 @@
+// Responsible for the managing the ui for a single attachment,
+// used within AssetComposerView.
+slices.AttachmentView = Backbone.View.extend({
+
+  events: {
+    'change' : 'update'
+  },
+
+  tagName: 'li',
+
+  template: Handlebars.compile(
+    '<div class="attachment-thumb"></div>' +
+    '<div class="attachment-fields"></div>' +
+    '<span data-action="remove" class="remove">Remove</span>'
+  ),
+
+  // Initialize the view.
+  initialize: function() {
+    _.bindAll(this);
+    // Make view and model accessible from el.
+    $(this.el).data('view', this);
+    $(this.el).data('model', this.model);
+  },
+
+  // Render our template to this.el.
+  render: function() {
+    $(this.el).html(this.template(this));
+    this.renderAssetThumb();
+    this.renderFields();
+    return this;
+  },
+
+  // If this attachment has an asset, we can render an AssetThumbView.
+  // We make sure to switch of the selection functionality.
+  renderAssetThumb: function() {
+    if (!this.model.get('asset')) return;
+
+    this.assetThumb = new slices.AssetThumbView({
+      model: this.model.get('asset'),
+      selectable: false,
+      tagName: 'div'
+    });
+
+    this.$('.attachment-thumb').prepend(this.assetThumb.render().el);
+  },
+
+  // We don’t know what extra fields will come on the attachment, so we’ll
+  // render this template using the attachment model’s attributes, rather
+  // than `this`. Doesn’t provide the usual opportunities for overriding
+  // and proxying, but much more flexible.
+  renderFields: function() {
+    if (!_.isFunction(this.options.fields)) return;
+
+    this.$('.attachment-fields').
+    html(this.options.fields(this.model.attributes)).
+    applyDataValues().
+    initDataPlugins();
+  },
+
+  // Remove this view and unbind any event handlers.
+  remove: function() {
+    this.model.unbind('change', this.render);
+    $(this.el).remove();
+  },
+
+  // Write contents of fields to our model.
+  update: function() {
+    this.model.set(this.getValues());
+  },
+
+  // Retrieve values from our fields and return as an object.
+  getValues: function() {
+    var result = {};
+    this.$('[name]').each(function() {
+      var field = $(this);
+      result[field.attr('name')] = slices.getValue(field);
+    });
+    return result;
+  },
+
+  // Update the upload progress information, wrapped around the file.
+  updateFile: function(attrs) {
+    this.assetThumb.updateFile(attrs);
+  },
+
+  // 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.assetThumb.updateFileAndComplete(file);
+  },
+
+  // Returns the midpoint of the view, relative to the document.
+  midPoint: function() {
+    return {
+      x: $(this.el).offset().left + ($(this.el).width() / 2),
+      y: $(this.el).offset().top + ($(this.el).height() / 2)
+    }
+  }
+
+});
+

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

@@ -0,0 +1,198 @@
+// Calendar View
+slices.CalendarView = Backbone.View.extend({
+
+  // -- Config --
+
+  events: {
+    'click [data-action="hide"]'       : 'hide',
+    'click [data-action="prev-month"]' : 'prevMonth',
+    'click [data-action="next-month"]' : 'nextMonth',
+    'mousedown time'                   : 'onClickDay'
+  },
+
+  className: 'calendar-modal',
+
+  template: Handlebars.compile(
+    '<span class="background" data-action="hide"></span>' +
+    '<div class="calendar">' +
+      '<table>' +
+        '<thead>' +
+          '<tr>' +
+            '<td data-action="prev-month">&larr;</td>' +
+            '<th class="month" colspan="5">{{monthName}}</th>' +
+            '<td data-action="next-month">&rarr;</td>' +
+          '</tr>' +
+          '<tr>' +
+            '<th class="weekday">M</th>' +
+            '<th class="weekday">T</th>' +
+            '<th class="weekday">W</th>' +
+            '<th class="weekday">T</th>' +
+            '<th class="weekday">F</th>' +
+            '<th class="weekday">S</th>' +
+            '<th class="weekday">S</th>' +
+          '</tr>' +
+        '</thead>' +
+        '<tbody>{{{body}}}</tbody>' +
+      '</table>' +
+    '</div>'
+  ),
+
+  bodyTemplate: Handlebars.compile(
+    '{{#each this}}' +
+      '<tr>' +
+        '{{#each this}}' +
+          '<td>' +
+            '<time class="{{klass}}" datetime="{{value}}">' +
+              '{{date}}' +
+            '</time>' +
+          '</td>' +
+        '{{/each}}' +
+      '</tr>' +
+    '{{/each}}'
+  ),
+
+  // -- Init --
+
+  initialize: function() {
+    _.bindAll(this);
+
+    $(document).on('slices:willSubmit', this.remove);
+
+    this.setValue(this.options.value);
+
+    this.$el.appendTo('body');
+    this.$el.attr('data-state', 'preparing');
+    this.$el.hide();
+  },
+
+  // -- Rendering --
+
+  render: function() {
+    this.$el.html(this.template(this));
+    this.updatePosition();
+    return this;
+  },
+
+  body: function() {
+    var data        = [],
+        today       = moment().startOf('day'),
+        thisMonth   = this.month.clone(),
+        nextMonth   = thisMonth.clone().add('months', 1),
+        firstMonday = thisMonth.clone().day(1),
+        finalSunday = nextMonth.clone().day(7),
+        date        = firstMonday.clone();
+
+    while (date <= finalSunday) {
+      if (date.day() === 1) data.push([]);
+
+      var obj = {
+        date  : date.date(),
+        value : date.format(),
+        klass : []
+      };
+
+           if (date.is(today)) obj.klass.push('today');
+      else if (date < thisMonth) obj.klass.push('prev-month');
+      else if (date >= nextMonth) obj.klass.push('next-month');
+
+      if (this.value) {
+        if (date.is(this.value.clone().startOf('day'))) obj.klass.push('highlight');
+      }
+
+      obj.klass = obj.klass.join(' ');
+
+      data[data.length - 1].push(obj);
+
+      date.add('days', 1);
+    }
+
+    return this.bodyTemplate(data);
+  },
+
+  monthName: function() {
+    return this.month.format('MMMM YYYY');
+  },
+
+  // -- Event Handlers --
+
+  onClickDay: function(event) {
+    var day = $(event.target),
+        value = moment(day.attr('datetime'));
+
+    if (this.value) {
+      value.hours(this.value.hours()).minutes(this.value.minutes());
+    }
+
+    this.setValue(value);
+    this.render();
+    this.options.onChange && this.options.onChange();
+  },
+
+  // -- Actions --
+
+  show: function() {
+    this.resetMonth();
+    this.$el.show();
+    this.render();
+    this.updatePosition();
+    this.$el.attr('data-state', 'showing');
+  },
+
+  hide: function() {
+    this.$el.attr('data-state', 'hiding');
+
+    var self = this;
+    setTimeout(function() { self.$el.hide() }, 250);
+  },
+
+  toggle: function() {
+    switch (this.$el.data('state')) {
+    case 'preparing':
+    case 'hiding':
+      this.show(); break;
+    case 'showing':
+      this.hide(); break;
+    }
+  },
+
+  prevMonth: function() {
+    this.month.subtract('months', 1);
+    this.render();
+  },
+
+  nextMonth: function() {
+    this.month.add('months', 1);
+    this.render();
+  },
+
+  setValue: function(newValue) {
+    this.value = moment(newValue);
+    this.resetMonth();
+  },
+
+  resetMonth: function() {
+    this.month = (this.value || moment()).clone().startOf('month');
+  },
+
+  remove: function() {
+    this.$el.remove();
+  },
+
+  // -- Helpers --
+
+  updatePosition: function() {
+    var calendar = this.$el.find('.calendar'),
+        anchor = this.anchor,
+        offset = anchor.offset();
+
+    offset.top += anchor.outerHeight();
+    offset.top = offset.top + 'px';
+
+    offset.left += anchor.outerWidth() / 2;
+    offset.left -= calendar.outerWidth() / 2;
+    offset.left = offset.left + 'px';
+
+    calendar.css(offset);
+  }
+
+});

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

@@ -0,0 +1,54 @@
+slices.ComposerItemView = Backbone.View.extend({
+
+  tagName: 'li',
+  className: 'composer-item',
+
+  template: Handlebars.compile(
+    '<div class="item-fields"></div>' +
+    '<span data-role="drag-handle"></span>' +
+    '<span data-action="remove">Remove</span>'
+  ),
+
+  events: {
+    'change': 'update'
+  },
+
+  initialize: function() {
+    _.bindAll(this);
+    this.$el.data('model', this.model);
+  },
+
+  render: function() {
+    $(this.el).html(this.template(this));
+    this.renderFields();
+    return this;
+  },
+
+  renderFields: function() {
+    if (!_.isFunction(this.options.fields)) return;
+
+    this.$('.item-fields')
+    .html(this.options.fields(this.model.attributes))
+    .applyDataValues()
+    .initDataPlugins();
+  },
+
+  remove: function() {
+    this.model.unbind('change', this.render);
+    this.$el.remove();
+  },
+
+  update: function() {
+    this.model.set(this.getValues());
+  },
+
+  getValues: function() {
+    var result = {};
+    this.$('[name]').each(function() {
+      var field = $(this);
+      result[field.attr('name')] = field.val();
+    });
+    return result;
+  }
+
+});

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

@@ -0,0 +1,130 @@
+slices.ComposerView = Backbone.View.extend({
+
+  className: 'composer',
+
+  template: Handlebars.compile(
+    '<ol class="composer-item-list"></ol>' +
+    '<div class="composer-actions">' +
+      '<button data-action="add">{{addLabel}}</button>' +
+    '</div>'
+  ),
+
+  events: {
+    'click [data-action="add"]'    : 'didClickAdd',
+    'click [data-action="remove"]' : 'didClickRemove'
+  },
+
+  addLabel: 'Add An Item',
+
+  broadcastChanges: true,
+  views: {},
+
+  initialize: function() {
+    _.bindAll(this);
+
+    this.addLabel = this.options.addLabel || this.addLabel;
+
+    this.collection = new slices.ComposerItemCollection(this.options.value);
+    this.collection.bind('add'    , this.addItem);
+    this.collection.bind('remove' , this.removeItem);
+    this.collection.bind('change' , this.update);
+    this.collection.bind('reset'  , this.update);
+
+    if (this.options.autoAttach) _.defer(this.attach);
+  },
+
+  // -- Rendering --
+
+  placeholder: function() {
+    return Handlebars.compile('<div id="placeholder-{{id}}"></div>')(this);
+  },
+
+  attach: function() {
+    $('#placeholder-' + this.id).replaceWith(this.el);
+    this.render();
+  },
+
+  render: function() {
+    this.broadcastChanges = false;
+    this.$el.html(this.template(this));
+    this.collection.each(this.addItem);
+    this.makeSortable();
+    this.update();
+    this.broadcastChanges = true;
+    return this;
+  },
+
+  makeSortable: function() {
+    var list = this.$('.composer-item-list');
+
+    list.sortable({
+      handle: '[data-role="drag-handle"]',
+      scroll: false,
+
+      beforeStart: _.bind(function(e, ui) {
+        list.freezeHeight();
+        window.autoscroll.start();
+      }, this),
+
+      stop: _.bind(function(e, ui) {
+        list.thawHeight();
+        window.autoscroll.stop();
+      }, this),
+
+      update: this.updateOnSort
+    });
+  },
+
+  updateOnSort: function() {
+    var items = this.$('.composer-item-list').children();
+
+    var newOrder = items.map(function() {
+      return $(this).data('model');
+    }).get();
+
+    this.collection.reset(newOrder);
+  },
+
+  update: function() {
+    var value = this.collection.toJSON();
+    this.$el.data('computed-value', value);
+    this.$el[this.collection.isEmpty() ? 'removeClass' : 'addClass']('not-empty');
+    if (this.broadcastChanges) this.$el.trigger('change');
+  },
+
+  addItem: function(item, collection, options) {
+    var view = new slices.ComposerItemView({
+      fields: this.options.fields,
+      model: item
+    });
+
+    this.$('.composer-item-list').append(view.el);
+
+    view.render();
+    this.views[item.cid] = view;
+    this.update();
+  },
+
+  removeItem: function(item) {
+    var view = this.views[item.cid];
+    view.remove();
+    delete this.views[item.cid];
+    this.update();
+  },
+
+  didClickAdd: function(e) {
+    e.preventDefault(); e.stopImmediatePropagation();
+    this.collection.add({});
+  },
+
+  didClickRemove: function(e) {
+    e.preventDefault(); e.stopImmediatePropagation();
+
+    var button = $(e.target),
+        view   = button.closest('li'),
+        item   = view.data('model');
+
+    this.collection.remove(item);
+  }
+
+});