vis-rails 0.0.6 → 1.0.0

data/vendor/assets/vis/timeline/component/Panel.js

@@ -1,8 +1,5 @@
 /**
  * A panel can contain components
- * @param {Component} [parent]
- * @param {Component[]} [depends]   Components on which this components depends
- *                                  (except for the parent)
  * @param {Object} [options]    Available parameters:
  *                              {String | Number | function} [left]
  *                              {String | Number | function} [top]
@@ -12,12 +9,15 @@
  * @constructor Panel
  * @extends Component
  */
-function Panel(parent, depends, options) {
+function Panel(options) {
   this.id = util.randomUUID();
-  this.parent = parent;
-  this.depends = depends;
+  this.parent = null;
+  this.childs = [];
 
   this.options = options || {};
+
+  // create frame
+  this.frame = (typeof document !== 'undefined') ? document.createElement('div') : null;
 }
 
 Panel.prototype = new Component();
@@ -34,79 +34,137 @@ Panel.prototype = new Component();
 Panel.prototype.setOptions = Component.prototype.setOptions;
 
 /**
- * Get the container element of the panel, which can be used by a child to
- * add its own widgets.
- * @returns {HTMLElement} container
+ * Get the outer frame of the panel
+ * @returns {HTMLElement} frame
  */
-Panel.prototype.getContainer = function () {
+Panel.prototype.getFrame = function () {
   return this.frame;
 };
 
 /**
- * Repaint the component
- * @return {Boolean} changed
+ * Append a child to the panel
+ * @param {Component} child
  */
-Panel.prototype.repaint = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      asSize = util.option.asSize,
-      options = this.options,
-      frame = this.frame;
-  if (!frame) {
-    frame = document.createElement('div');
-    frame.className = 'vpanel';
-
-    var className = options.className;
-    if (className) {
-      if (typeof className == 'function') {
-        util.addClassName(frame, String(className()));
+Panel.prototype.appendChild = function (child) {
+  this.childs.push(child);
+  child.parent = this;
+
+  // attach to the DOM
+  var frame = child.getFrame();
+  if (frame) {
+    if (frame.parentNode) {
+      frame.parentNode.removeChild(frame);
+    }
+    this.frame.appendChild(frame);
+  }
+};
+
+/**
+ * Insert a child to the panel
+ * @param {Component} child
+ * @param {Component} beforeChild
+ */
+Panel.prototype.insertBefore = function (child, beforeChild) {
+  var index = this.childs.indexOf(beforeChild);
+  if (index != -1) {
+    this.childs.splice(index, 0, child);
+    child.parent = this;
+
+    // attach to the DOM
+    var frame = child.getFrame();
+    if (frame) {
+      if (frame.parentNode) {
+        frame.parentNode.removeChild(frame);
+      }
+
+      var beforeFrame = beforeChild.getFrame();
+      if (beforeFrame) {
+        this.frame.insertBefore(frame, beforeFrame);
       }
       else {
-        util.addClassName(frame, String(className));
+        this.frame.appendChild(frame);
       }
     }
-
-    this.frame = frame;
-    changed += 1;
   }
-  if (!frame.parentNode) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint panel: no parent attached');
-    }
-    var parentContainer = this.parent.getContainer();
-    if (!parentContainer) {
-      throw new Error('Cannot repaint panel: parent has no container element');
+};
+
+/**
+ * Remove a child from the panel
+ * @param {Component} child
+ */
+Panel.prototype.removeChild = function (child) {
+  var index = this.childs.indexOf(child);
+  if (index != -1) {
+    this.childs.splice(index, 1);
+    child.parent = null;
+
+    // remove from the DOM
+    var frame = child.getFrame();
+    if (frame && frame.parentNode) {
+      this.frame.removeChild(frame);
     }
-    parentContainer.appendChild(frame);
-    changed += 1;
   }
+};
 
-  changed += update(frame.style, 'top',    asSize(options.top, '0px'));
-  changed += update(frame.style, 'left',   asSize(options.left, '0px'));
-  changed += update(frame.style, 'width',  asSize(options.width, '100%'));
-  changed += update(frame.style, 'height', asSize(options.height, '100%'));
-
-  return (changed > 0);
+/**
+ * Test whether the panel contains given child
+ * @param {Component} child
+ */
+Panel.prototype.hasChild = function (child) {
+  var index = this.childs.indexOf(child);
+  return (index != -1);
 };
 
 /**
- * Reflow the component
- * @return {Boolean} resized
+ * Repaint the component
+ * @return {boolean} Returns true if the component was resized since previous repaint
  */
-Panel.prototype.reflow = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      frame = this.frame;
+Panel.prototype.repaint = function () {
+  var asString = util.option.asString,
+      options = this.options,
+      frame = this.getFrame();
 
-  if (frame) {
-    changed += update(this, 'top', frame.offsetTop);
-    changed += update(this, 'left', frame.offsetLeft);
-    changed += update(this, 'width', frame.offsetWidth);
-    changed += update(this, 'height', frame.offsetHeight);
-  }
-  else {
-    changed += 1;
+  // update className
+  frame.className = 'vpanel' + (options.className ? (' ' + asString(options.className)) : '');
+
+  // repaint the child components
+  var childsResized = this._repaintChilds();
+
+  // update frame size
+  this._updateSize();
+
+  return this._isResized() || childsResized;
+};
+
+/**
+ * Repaint all childs of the panel
+ * @return {boolean} Returns true if the component is resized
+ * @private
+ */
+Panel.prototype._repaintChilds = function () {
+  var resized = false;
+  for (var i = 0, ii = this.childs.length; i < ii; i++) {
+    resized = this.childs[i].repaint() || resized;
   }
+  return resized;
+};
+
+/**
+ * Apply the size from options to the panel, and recalculate it's actual size.
+ * @private
+ */
+Panel.prototype._updateSize = function () {
+  // apply size
+  this.frame.style.top    = util.option.asSize(this.options.top);
+  this.frame.style.bottom = util.option.asSize(this.options.bottom);
+  this.frame.style.left   = util.option.asSize(this.options.left);
+  this.frame.style.right  = util.option.asSize(this.options.right);
+  this.frame.style.width  = util.option.asSize(this.options.width, '100%');
+  this.frame.style.height = util.option.asSize(this.options.height, '');
 
-  return (changed > 0);
+  // get actual size
+  this.top    = this.frame.offsetTop;
+  this.left   = this.frame.offsetLeft;
+  this.width  = this.frame.offsetWidth;
+  this.height = this.frame.offsetHeight;
 };

data/vendor/assets/vis/timeline/component/RootPanel.js

@@ -10,32 +10,53 @@ function RootPanel(container, options) {
   this.id = util.randomUUID();
   this.container = container;
 
-  // create functions to be used as DOM event listeners
-  var me = this;
-  this.hammer = null;
+  this.options = options || {};
+  this.defaultOptions = {
+    autoResize: true
+  };
+
+  // create the HTML DOM
+  this._create();
+
+  // attach the root panel to the provided container
+  if (!this.container) throw new Error('Cannot repaint root panel: no container attached');
+  this.container.appendChild(this.getFrame());
+
+
+  this._initWatch();
+}
+
+RootPanel.prototype = new Panel();
 
-  // create listeners for all interesting events, these events will be emitted
-  // via the controller
+/**
+ * Create the HTML DOM for the root panel
+ */
+RootPanel.prototype._create = function _create() {
+  // create frame
+  this.frame = document.createElement('div');
+
+  // create event listeners for all interesting events, these events will be
+  // emitted via emitter
+  this.hammer = Hammer(this.frame, {
+    prevent_default: true
+  });
+  this.listeners = {};
+
+  var me = this;
   var events = [
     'touch', 'pinch', 'tap', 'doubletap', 'hold',
     'dragstart', 'drag', 'dragend',
     'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is for Firefox
   ];
-  this.listeners = {};
   events.forEach(function (event) {
-    me.listeners[event] = function () {
+    var listener = function () {
       var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-      me.controller.emit.apply(me.controller, args);
+      me.emit.apply(me, args);
     };
+    me.hammer.on(event, listener);
+    me.listeners[event] = listener;
   });
-
-  this.options = options || {};
-  this.defaultOptions = {
-    autoResize: true
-  };
-}
-
-RootPanel.prototype = new Panel();
+};
 
 /**
  * Set options. Will extend the current options.
@@ -47,80 +68,54 @@ RootPanel.prototype = new Panel();
  *                              {String | Number | function} [height]
  *                              {Boolean | function} [autoResize]
  */
-RootPanel.prototype.setOptions = Component.prototype.setOptions;
-
-/**
- * Repaint the component
- * @return {Boolean} changed
- */
-RootPanel.prototype.repaint = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      asSize = util.option.asSize,
-      options = this.options,
-      frame = this.frame;
+RootPanel.prototype.setOptions = function setOptions(options) {
+  if (options) {
+    util.extend(this.options, options);
 
-  if (!frame) {
-    frame = document.createElement('div');
-
-    this.frame = frame;
-
-    this._registerListeners();
-
-    changed += 1;
-  }
-  if (!frame.parentNode) {
-    if (!this.container) {
-      throw new Error('Cannot repaint root panel: no container attached');
-    }
-    this.container.appendChild(frame);
-    changed += 1;
-  }
+    this.repaint();
 
-  frame.className = 'vis timeline rootpanel ' + options.orientation +
-      (options.editable ? ' editable' : '');
-  var className = options.className;
-  if (className) {
-    util.addClassName(frame, util.option.asString(className));
+    this._initWatch();
   }
+};
 
-  changed += update(frame.style, 'top',    asSize(options.top, '0px'));
-  changed += update(frame.style, 'left',   asSize(options.left, '0px'));
-  changed += update(frame.style, 'width',  asSize(options.width, '100%'));
-  changed += update(frame.style, 'height', asSize(options.height, '100%'));
-
-  this._updateWatch();
-
-  return (changed > 0);
+/**
+ * Get the frame of the root panel
+ */
+RootPanel.prototype.getFrame = function getFrame() {
+  return this.frame;
 };
 
 /**
- * Reflow the component
- * @return {Boolean} resized
+ * Repaint the root panel
  */
-RootPanel.prototype.reflow = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      frame = this.frame;
-
-  if (frame) {
-    changed += update(this, 'top', frame.offsetTop);
-    changed += update(this, 'left', frame.offsetLeft);
-    changed += update(this, 'width', frame.offsetWidth);
-    changed += update(this, 'height', frame.offsetHeight);
-  }
-  else {
-    changed += 1;
+RootPanel.prototype.repaint = function repaint() {
+  // update class name
+  var options = this.options;
+  var editable = options.editable.updateTime || options.editable.updateGroup;
+  var className = 'vis timeline rootpanel ' + options.orientation + (editable ? ' editable' : '');
+  if (options.className) className += ' ' + util.option.asString(className);
+  this.frame.className = className;
+
+  // repaint the child components
+  var childsResized = this._repaintChilds();
+
+  // update frame size
+  this.frame.style.maxHeight = util.option.asSize(this.options.maxHeight, '');
+  this._updateSize();
+
+  // if the root panel or any of its childs is resized, repaint again,
+  // as other components may need to be resized accordingly
+  var resized = this._isResized() || childsResized;
+  if (resized) {
+    setTimeout(this.repaint.bind(this), 0);
   }
-
-  return (changed > 0);
 };
 
 /**
- * Update watching for resize, depending on the current option
+ * Initialize watching when option autoResize is true
  * @private
  */
-RootPanel.prototype._updateWatch = function () {
+RootPanel.prototype._initWatch = function _initWatch() {
   var autoResize = this.getOption('autoResize');
   if (autoResize) {
     this._watch();
@@ -135,12 +130,12 @@ RootPanel.prototype._updateWatch = function () {
  * automatically redraw itself.
  * @private
  */
-RootPanel.prototype._watch = function () {
+RootPanel.prototype._watch = function _watch() {
   var me = this;
 
   this._unwatch();
 
-  var checkSize = function () {
+  var checkSize = function checkSize() {
     var autoResize = me.getOption('autoResize');
     if (!autoResize) {
       // stop watching when the option autoResize is changed to false
@@ -150,9 +145,12 @@ RootPanel.prototype._watch = function () {
 
     if (me.frame) {
       // check whether the frame is resized
-      if ((me.frame.clientWidth != me.width) ||
-          (me.frame.clientHeight != me.height)) {
-        me.requestReflow();
+      if ((me.frame.clientWidth != me.lastWidth) ||
+          (me.frame.clientHeight != me.lastHeight)) {
+        me.lastWidth = me.frame.clientWidth;
+        me.lastHeight = me.frame.clientHeight;
+        me.repaint();
+        // TODO: emit a resize event instead?
       }
     }
   };
@@ -167,7 +165,7 @@ RootPanel.prototype._watch = function () {
  * Stop watching for a resize of the frame.
  * @private
  */
-RootPanel.prototype._unwatch = function () {
+RootPanel.prototype._unwatch = function _unwatch() {
   if (this.watchTimer) {
     clearInterval(this.watchTimer);
     this.watchTimer = undefined;
@@ -175,53 +173,3 @@ RootPanel.prototype._unwatch = function () {
 
   // TODO: remove event listener on window.resize
 };
-
-/**
- * Set controller for this component, or remove current controller by passing
- * null as parameter value.
- * @param {Controller | null} controller
- */
-RootPanel.prototype.setController = function setController (controller) {
-  this.controller = controller || null;
-
-  if (this.controller) {
-    this._registerListeners();
-  }
-  else {
-    this._unregisterListeners();
-  }
-};
-
-/**
- * Register event emitters emitted by the rootpanel
- * @private
- */
-RootPanel.prototype._registerListeners = function () {
-  if (this.frame && this.controller && !this.hammer) {
-    this.hammer = Hammer(this.frame, {
-      prevent_default: true
-    });
-
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        this.hammer.on(event, this.listeners[event]);
-      }
-    }
-  }
-};
-
-/**
- * Unregister event emitters from the rootpanel
- * @private
- */
-RootPanel.prototype._unregisterListeners = function () {
-  if (this.hammer) {
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        this.hammer.off(event, this.listeners[event]);
-      }
-    }
-
-    this.hammer = null;
-  }
-};