slices 1.0.0

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

@@ -0,0 +1,177 @@
+// Date field
+//
+// This shouldn’t be instantiated directly.
+// Instead, use `{{dateField}}` like this:
+//
+//     {{dateField field="example"}}
+//
+slices.DateFieldView = Backbone.View.extend({
+
+  // -- Config --
+
+  events: {
+    'click .calendar-button' : 'onClickCalendar',
+    'click .clear'           : 'onClickClear',
+    'change select'          : 'onSelectTime'
+  },
+
+  className: 'date-field',
+
+  template: Handlebars.compile(
+    '<span class="display">' +
+      '{{{display}}}' +
+    '</span>' +
+    '<button class="calendar-button">Choose Date</button>' +
+    '<button class="clear">&times;</button>'
+  ),
+
+  displayTemplate: Handlebars.compile(
+    '<span class="date">{{date}} at</span> ' +
+    '<select class="hour">' +
+      '{{#each hours}}<option {{attrs}}>{{value}}</option>{{/each}}' +
+    '</select>' +
+    ' : ' +
+    '<select class="minute">' +
+      '{{#each minutes}}<option {{attrs}}>{{value}}</option>{{/each}}' +
+    '</select>'
+  ),
+
+  // -- Init --
+
+  initialize: function() {
+    _.bindAll(this);
+    this.options.value = this.options.value || null;
+    this.value = moment(this.options.value);
+    this.prevValue = moment(this.value);
+    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.$el.attr('name', this.options.name);
+    this.$el.html(this.template(this));
+    this.updateComputedValue();
+    this.updateUI();
+    this.updateCalendar();
+
+    if (this.valueHasChanged()) {
+      this.prevValue = moment(this.value);
+      this.$el.trigger('change');
+    }
+
+    return this;
+  },
+
+  display: function() {
+    if (this.value) {
+      var self = this;
+      return this.displayTemplate({
+        date: this.value.format('dddd D MMMM YYYY'),
+        hours: _.map(_.range(0, 24), function(hour) {
+          var o = { value: _.string.pad('' + hour, 2, '0') };
+          if (hour == self.value.hours()) o.attrs = 'selected';
+          return o;
+        }),
+        minutes: _.map(_.range(0, 60, 15), function(minute) {
+          var o = { value: _.string.pad('' + minute, 2, '0') };
+          if (minute == self.value.minutes()) o.attrs = 'selected';
+          return o;
+        })
+      });
+    } else {
+      return 'No date set';
+    }
+  },
+
+  // -- Event Handlers --
+
+  onClickCalendar: function(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.toggleCalendar();
+  },
+
+  onClickClear: function(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.value = null;
+    this.render();
+  },
+
+  onCalendarChange: function() {
+    this.value = moment(this.calendar().value);
+    this.render();
+  },
+
+  onSelectTime: function() {
+    var hour = parseInt(this.$el.find('.hour').val(), 10),
+        minute = parseInt(this.$el.find('.minute').val(), 10);
+
+    this.value.hours(hour).minutes(minute);
+    this.render();
+  },
+
+  // -- Actions --
+
+  updateComputedValue: function() {
+    var computedValue = this.value && this.value.toDate() || null;
+    this.$el.data('computed-value', computedValue);
+  },
+
+  updateUI: function() {
+    if (this.value) {
+      this.$el.find('.clear').show();
+    } else {
+      this.$el.find('.clear').hide();
+    }
+  },
+
+  showCalendar: function() {
+    this.calendar().show();
+  },
+
+  hideCalendar: function() {
+    this.calendar().hide();
+  },
+
+  toggleCalendar: function() {
+    this.calendar().toggle();
+  },
+
+  updateCalendar: function() {
+    this.calendar().anchor = this.$el.find('.calendar-button');
+    this.calendar().setValue(this.value);
+  },
+
+  // -- Helpers --
+
+  calendar: function() {
+    if (!this._calendar) {
+      this._calendar = new slices.CalendarView({
+        value: this.value,
+        onChange: this.onCalendarChange
+      });
+    }
+    return this._calendar;
+  },
+
+  valueHasChanged: function() {
+    return !this.valueHasNotChanged();
+  },
+
+  valueHasNotChanged: function() {
+    return (this.value == null && this.prevValue == null) ||
+           (this.value && this.value.is(this.prevValue));
+  }
+
+});

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

@@ -0,0 +1,142 @@
+// Responsible for the displaying the progress of a current upload.
+slices.FileView = Backbone.View.extend({
+
+  className: 'upload-info',
+
+  textTemplate: Handlebars.compile(
+    '<span class="upload-name">{{name}}</span>' +
+    '<span class="upload-summary">{{summary}}</span>'
+  ),
+
+  imagePath: Handlebars.compile('/assets/slices/icon_upload_{{name}}.png'),
+
+  possibleStatusList: [
+    'status-queued',
+    'status-uploading',
+    'status-processing',
+    'status-done',
+    'status-failed'
+  ].join(' '),
+
+  // Create and append canvas and text then bind up the model.
+  initialize: function() {
+    _.bindAll(this);
+    this.canvas = $('<canvas class="canvas" width="180" height="180" />');
+    this.text = $('<div class="text" />');
+    $(this.el).append(this.canvas, this.text);
+    this.model.bind('change', this.render);
+    this.preloadImages();
+    this.render();
+  },
+
+  // Update the canvas to match file status and text with the current details.
+  render: function() {
+    this.updateCanvas();
+    this.updateText();
+  },
+
+  // Updates the canvas to display either the upload progress, if currently
+  // uploading, or one of our state indicators:
+  // waiting, thinking, happy, or sad.
+  updateCanvas: function() {
+    switch (this.model.status()) {
+    case 'queued'     : this.drawProgress(0);                     break;
+    case 'uploading'  : this.drawProgress(this.model.progress()); break;
+    case 'processing' : this.drawImage('thinking');               break;
+    case 'done'       : this.drawImage('happy');                  break;
+    case 'failed'     : this.drawImage('sad');                    break;
+    }
+  },
+
+  // Updates the textual information to reflect the current state of our file.
+  updateText: function() {
+    this.text.html(this.textTemplate(this));
+  },
+
+  // Name value presented for textTemplate. Yes, our view class is also
+  // acting as a presenter, deal with it.
+  name: function() {
+    return this.model.get('name');
+  },
+
+  // Summary value presented for textTemplate.
+  summary: function() {
+    switch (this.model.status()) {
+    case 'queued'     : return 'Waiting…';
+    case 'uploading'  : return this.progressSummary();
+    case 'processing' : return 'Thinking…';
+    case 'done'       : return 'Done!';
+    case 'failed'     : return 'Failed'
+    }
+  },
+
+  // Returns a nicely formatted '826KB of 3.2MB' style summary.
+  progressSummary: function() {
+    return humanFileSize(this.model.get('loaded')) + ' of ' +
+           humanFileSize(this.model.get('total'));
+  },
+
+  // Draw progress pie.
+  drawProgress: function(progress) {
+    var ctx = this.canvas[0].getContext('2d'),
+        t   = -Math.PI / 2,
+        w   = 180,
+        h   = 180,
+        x   = 90,
+        y   = 75,
+        r   = 30,
+        p   = 3;
+
+    ctx.fillStyle = '#ddd';
+    ctx.moveTo(0, 0);
+    ctx.fillRect(0, 0, w, h);
+
+    ctx.beginPath();
+    ctx.fillStyle = '#838383';
+    ctx.moveTo(x, y);
+    ctx.arc(x, y, r, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.fillStyle = '#ddd';
+    ctx.moveTo(x, y);
+
+    if (progress < 1) var a = t - (Math.PI * 2 * (1 - progress));
+                 else var a = t + (Math.PI * 2);
+
+    ctx.arc(x, y, r - p, t, a, false);
+    ctx.closePath();
+    ctx.fill();
+  },
+
+  // Draw progress image. Available names are:
+  // 'thinking', 'happy' & 'sad'.
+  drawImage: function(name) {
+    var ctx = this.canvas[0].getContext('2d');
+
+    var img = new Image();
+
+    img.onload = function() {
+      ctx.fillStyle = '#ddd';
+      ctx.moveTo(0, 0);
+      ctx.fillRect(0, 0, 180, 180);
+      ctx.moveTo(0, 0);
+      ctx.drawImage(img, 0, 0);
+    };
+
+    img.src = this.imagePath({ name: name });
+  },
+
+  remove: function() {
+    $(this.el).remove();
+  },
+
+  preloadImages: function() {
+    _(['thinking', 'happy', 'sad']).each(_.bind(function(name) {
+      var image = new Image();
+      image.src = slices.UPLOAD_ICONS[name];
+    }, this));
+  }
+
+});

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

@@ -0,0 +1,253 @@
+(function() {
+
+// Tokenized field, used for tags, categories etc.
+//
+// This shouldn’t be instantiated directly.
+// Instead, use `{{tokenField}}` like this:
+//
+//     {{tokenField field="categories" options="available_categories"}}
+//
+
+var ESC       = 27,
+    ENTER     = 13,
+    BACKSPACE = 8,
+    UP        = 38,
+    DOWN      = 40,
+    COMMA     = 188,
+    TAB       = 9;
+
+slices.TokenFieldView = Backbone.View.extend({
+
+  // -- Config --
+
+  events: {
+    'keydown'       : 'onKey',
+    'keypress'      : 'onKey',
+    'click .del'    : 'onClickDel',
+    'click .option' : 'onClickOption'
+  },
+
+  className: 'token-field',
+
+  template: Handlebars.compile(
+    '<input type="text" class="input" name="{{id}}">' +
+    '<span class="tokens">' +
+      '{{#each values}}' +
+        '<span class="token" data-value="{{this}}" unselectable="true">{{this}} <span class="del">&times;</span></span>' +
+      '{{/each}}' +
+    '</span>' +
+    '<span class="options">' +
+      '{{#each valueOptions}}' +
+        '<a href="#" class="option">{{this}}</a>' +
+      '{{/each}}' +
+    '</span>'
+  ),
+
+  // -- Init --
+
+  initialize: function() {
+    _.bindAll(this);
+
+    this.values = this.sanitizeValues(this.options.values);
+    this.prevValues = [].concat(this.values || []);
+    this.valueOptions = [].concat(this.options.options || []);
+
+    $(document).on('slices:willSubmit', this.capture);
+
+    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.prepareValueOptions();
+
+    this.$el.html(this.template(this));
+
+    this.updateComputedValue();
+    this.updateValueOptions();
+    this.updateLayout();
+    this.updateInput();
+
+    if (_.isEqual(this.values, this.prevValues)) return;
+
+    this.$el.find('input').trigger('change');
+    this.prevValues = [].concat(this.values);
+  },
+
+  // -- Commands --
+
+  focus: function() {
+    this.$el.find('input').focus();
+  },
+
+  capture: function() {
+    var newValues = this.$el.find('input').val().split(/ *, */);
+
+    this.values = this.sanitizeValues(this.values.concat(newValues));
+
+    this.render();
+    this.focus();
+  },
+
+  delayedCapture: _.debounce(function() {
+    this.capture();
+  }, 750),
+
+  focusOrRemoveLastToken: function(e) {
+    var focusedToken = this.$el.find('.token.focus');
+
+    if (focusedToken.length) {
+      this.values.pop();
+      this.render();
+      this.focus();
+    } else {
+      this.$el.find('.token:last').addClass('focus');
+    }
+  },
+
+  updateLayout: function() {
+    var tokens = this.$el.find('.tokens'),
+        input = this.$el.find('input');
+
+    if (!this.hasOwnProperty('_paddingLeft')) {
+      this._paddingLeft = input.css('paddingLeft');
+    }
+
+    if (this.values.length) {
+      input.css({ paddingLeft: tokens.outerWidth() + 'px' });
+    } else {
+      input.css({ paddingLeft: this._paddingLeft });
+    }
+  },
+
+  updateInput: function() {
+    if (this.options.singular && this.values.length) {
+      this.$el.find('input').attr('disabled', true);
+    }
+  },
+
+  updateValueOptions: function() {
+    var self = this;
+
+    this.$el.find('.option').each(function() {
+      var option = $(this),
+          value = option.text();
+
+      if (_.contains(self.values, value)) {
+        $(this).addClass('used');
+      } else {
+        $(this).removeClass('used');
+      }
+    });
+  },
+
+  updateComputedValue: function() {
+    if (this.options.singular) {
+      var computedValue = this.values[0];
+    } else {
+      var computedValue = this.values;
+    }
+
+    this.$el.data('computed-value', computedValue || null);
+  },
+
+  // -- Event Handlers --
+
+  onKey: function(e) {
+    switch (e.which) {
+    case ENTER:
+    case COMMA:
+    case TAB:
+      this.onTokenBreaker(e); break;
+    case BACKSPACE:
+      this.onBackspace(e); break;
+    default:
+      this.delayedCapture();
+    }
+  },
+
+  onTokenBreaker: function(e) {
+    var input = this.$el.find('input'),
+        value = input.val();
+
+    if (value.length) {
+      e.preventDefault();
+      this.capture();
+    }
+  },
+
+  onBackspace: function(e) {
+    var input = this.$el.find('input'),
+        value = input.val();
+
+    if (value.length) {
+      this.delayedCapture();
+    } else {
+      e.preventDefault();
+      this.focusOrRemoveLastToken();
+    }
+  },
+
+  onClickDel: function(e) {
+    e.preventDefault();
+
+    var token = $(e.target).closest('.token'),
+        value = token.data('value');
+
+    this.values = _.without(this.values, value);
+    this.render();
+    this.focus();
+  },
+
+  onClickOption: function(e) {
+    e.preventDefault();
+
+    var option = $(e.target),
+        value = option.text();
+
+    if (this.options.singular) {
+      this.values = [value];
+    } else {
+      if (_.contains(this.values, value)) {
+        this.values = _.without(this.values, value);
+      } else {
+        this.values.push(value);
+      }
+    }
+
+    this.render();
+  },
+
+  // -- Helpers --
+
+  sanitizeValues: function(values) {
+    values = [values];
+    values = _.flatten(values);
+    values = _.map(values, function(token) {
+      return token && token.replace(/^\s+/, '').replace(/\s+$/, '');
+    });
+    values = _.compact(values);
+    values = _.uniq(values);
+
+    if (this.options.singular) values = values.slice(0, 1);
+
+    return values;
+  },
+
+  prepareValueOptions: function() {
+    this.valueOptions = _.uniq(this.valueOptions.concat(this.values)).sort();
+  }
+
+});
+
+})();