Initial commit

lib/assets/javascripts/builder/components/date-picker/date-picker-view.js

@@ -0,0 +1,135 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var moment = require('moment');
+var $ = require('jquery');
+require('builder/components/form-components/index');
+require('datepicker');
+var template = require('./date-picker.tpl');
+
+/**
+ * Custom picer for a dates range.
+ */
+module.exports = CoreView.extend({
+
+  className: 'DatePicker',
+
+  options: {
+    flat: true,
+    date: '2008-07-31',
+    current: '2008-07-31',
+    calendars: 1,
+    starts: 1
+  },
+
+  events: {
+    'click .js-dates': '_toggleCalendar'
+  },
+
+  initialize: function (opts) {
+    this.template = opts.template || template;
+    this._initBinds();
+    this._setDefaultDate();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.append(this.template({
+      readOnly: this.model.get('readOnly'),
+      date: this.options.date
+    }));
+
+    if (this.model.get('readOnly')) {
+      this.undelegateEvents();
+    }
+
+    return this;
+  },
+
+  _initBinds: function () {
+    $(document).bind('click', this._onDocumentClick.bind(this));
+  },
+
+  _destroyBinds: function () {
+    $(document).unbind('click', this._onDocumentClick.bind(this));
+  },
+
+  _setDefaultDate: function () {
+    var utc = new Date().getTimezoneOffset();
+    var today = moment(new Date()).utcOffset(utc).format('YYYY-MM-DD');
+    this.options.date = this.model.get('value') && moment(this.model.get('value')).format('YYYY-MM-DD') || today;
+    this.options.current = this.options.date;
+  },
+
+  _$calendar: function () {
+    return this.$('.js-calendar');
+  },
+
+  _$dropdown: function () {
+    return this.$('.js-DatePicker-simpleDropdown');
+  },
+
+  _hideCalendar: function (ev) {
+    if (ev) {
+      this.killEvent(ev);
+    }
+    this.model.set('visible', false);
+    this._destroyCalendar();
+    this._$dropdown().hide();
+  },
+
+  _showCalendar: function () {
+    this.model.set('visible', true);
+
+    this._$calendar().DatePicker(
+      _.extend(this.options, this.model.attributes, {
+        onChange: function (formatted, date) {
+          this.model.set('value', formatted);
+          this.$('.js-date-str').text(formatted);
+          this._hideCalendar();
+        }.bind(this),
+        onRender: function (d) { // Disable future dates and dates
+          var date = d.valueOf();
+          var now = new Date();
+
+          return (date > now) ? { disabled: true } : '';
+        }
+      })
+    );
+
+    this._$dropdown().show();
+  },
+
+  _destroyCalendar: function () {
+    if (this.$('.DatePicker').length > 0) {
+      this._$calendar() && this._$calendar().DatePickerHide();
+    }
+  },
+
+  _toggleCalendar: function (ev) {
+    if (ev) {
+      this.killEvent(ev);
+    }
+
+    this.model.get('visible') ? this._hideCalendar() : this._showCalendar();
+  },
+
+  closeCalendar: function () {
+    this._hideCalendar();
+  },
+
+  _onDocumentClick: function (e) {
+    var $el = $(e.target);
+
+    if ($el.closest('.DatePicker').length === 0) {
+      this._hideCalendar();
+    }
+  },
+
+  clean: function () {
+    this._destroyBinds();
+    this._hideCalendar();
+    CoreView.prototype.clean.call(this);
+  }
+
+});

lib/assets/javascripts/builder/components/date-picker/date-picker.tpl

@@ -0,0 +1,7 @@
+<button class="js-dates DatePicker-dates DatePicker-dates--singleDate js-DatePicker-dates has-icon <% if (readOnly) { %> is-disabled <% } %>">
+  <strong class="js-date-str"><%- date %></strong>
+  <i class="CDB-IconFont CDB-IconFont-calendar DatePicker-datesIcon"></i>
+</button>
+<div class="DatePicker-simpleDropdown datepickerHidden js-DatePicker-simpleDropdown">
+  <div class="js-calendar DatePicker-calendar DatePicker-calendar--simple"></div>
+</div>

lib/assets/javascripts/builder/components/date-picker/edit-field-model.js

@@ -0,0 +1,76 @@
+var Backbone = require('backbone');
+var moment = require('moment');
+
+/**
+ *  Default model for each field model
+ *
+ */
+
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    attribute: '',
+    value: '',
+    type: 'string',
+    readOnly: false
+  },
+
+  initialize: function () {
+    // Validation control variable
+    this.validationError = '';
+    this.bind('valid', function () {
+      this.validationError = '';
+    }, this);
+    this.bind('error', function (m, error) {
+      this.validationError = error;
+    });
+  },
+
+  _validate: function (attrs, options) {
+    var valid = Backbone.Model.prototype._validate.apply(this, arguments);
+    if (valid) {
+      this.trigger('valid');
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  validate: function (attrs) {
+    if (!attrs) return;
+
+    var val = attrs.value;
+    var type = attrs.type;
+
+    if (attrs.type === 'number') {
+      var pattern = /^(\+|-)?(?:[0-9]+|[0-9]*\.[0-9]+)$/;
+      if (val && !pattern.test(val)) {
+        return 'Invalid number';
+      }
+    }
+
+    if (type === 'boolean') {
+      if (val !== null && val !== true && val !== false) {
+        return 'Invalid boolean';
+      }
+    }
+
+    if (type === 'date') {
+      if (val && !moment(val).isValid()) {
+        return 'Invalid date';
+      }
+    }
+  },
+
+  getError: function () {
+    return this.validationError;
+  },
+
+  isValid: function () {
+    if (!this.validate) {
+      return true;
+    }
+    return !this.validate(this.attributes) && this.validationError === '';
+  }
+
+});