vis-rails 0.0.6 → 1.0.0

data/vendor/assets/vis/timeline/component/css/item.css

@@ -3,9 +3,15 @@
   position: absolute;
   color: #1A1A1A;
   border-color: #97B0F8;
+  border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
+
+  /* TODO: enable css transitions
+  -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
+  transition:         top .4s ease-in-out, bottom .4s ease-in-out;
+  /**/
 }
 
 .vis.timeline .item.selected {
@@ -20,48 +26,30 @@
 
 .vis.timeline .item.point.selected {
   background-color: #FFF785;
-  z-index: 999;
-}
-.vis.timeline .item.point.selected .dot {
-  border-color: #FFC200;
-}
-
-.vis.timeline .item.cluster {
-  /* TODO: use another color or pattern? */
-  background: #97B0F8 url('img/cluster_bg.png');
-  color: white;
-}
-.vis.timeline .item.cluster.point {
-  border-color: #D5DDF6;
 }
 
 .vis.timeline .item.box {
   text-align: center;
   border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+  border-radius: 2px;
 }
 
 .vis.timeline .item.point {
   background: none;
 }
 
-.vis.timeline .dot,
 .vis.timeline .item.dot {
-  padding: 0;
-  border: 5px solid #97B0F8;
   position: absolute;
-  border-radius: 5px;
-  -moz-border-radius: 5px;  /* For Firefox 3.6 and older */
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
 }
 
 .vis.timeline .item.range,
 .vis.timeline .item.rangeoverflow{
   border-style: solid;
-  border-width: 1px;
   border-radius: 2px;
-  -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
   box-sizing: border-box;
 }
 
@@ -82,6 +70,11 @@
   width: 0;
   border-left-width: 1px;
   border-left-style: solid;
+
+  /* TODO: enable css transitions
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+  /**/
 }
 
 .vis.timeline .item .content {

data/vendor/assets/vis/timeline/component/css/itemset.css

@@ -1,9 +1,15 @@
 
 .vis.timeline .itemset {
-  position: absolute;
+  position: relative;
   padding: 0;
   margin: 0;
-  overflow: hidden;
+
+  box-sizing: border-box;
+
+  /* FIXME: get transition working for rootpanel and itemset
+  -webkit-transition: height 4s ease-in-out;
+  transition:         height 4s ease-in-out;
+  /**/
 }
 
 .vis.timeline .background {
@@ -12,6 +18,21 @@
 .vis.timeline .foreground {
 }
 
-.vis.timeline .itemset-axis {
-  position: absolute;
+.vis.timeline .axis {
+  overflow: visible;
+}
+
+.vis.timeline  .group {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.vis.timeline.top .group {
+  border-top: 1px solid #bfbfbf;
+  border-bottom: none;
+}
+
+.vis.timeline.bottom .group {
+  border-top: none;
+  border-bottom: 1px solid #bfbfbf;
 }

data/vendor/assets/vis/timeline/component/css/labelset.css

@@ -0,0 +1,34 @@
+
+.vis.timeline .labelset {
+  position: relative;
+  width: 100%;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .labelset .vlabel {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  color: #4d4d4d;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline.top .labelset .vlabel {
+  border-top: 1px solid #bfbfbf;
+  border-bottom: none;
+}
+
+.vis.timeline.bottom .labelset .vlabel {
+  border-top: none;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labelset .vlabel .inner {
+  display: inline-block;
+  padding: 5px;
+}

data/vendor/assets/vis/timeline/component/css/panel.css

@@ -4,11 +4,25 @@
   overflow: hidden;
 
   border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
+
+  /* FIXME: there is an issue with the height of the items when panel height is animated
+  -webkit-transition: height 4s ease-in-out;
+  transition:         height 4s ease-in-out;
+  /**/
 }
 
 .vis.timeline .vpanel {
   position: absolute;
   overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .vpanel.side {
+  border-right: 1px solid #bfbfbf;
+}
+
+.vis.timeline .vpanel.side.hidden {
+  display: none;
 }

data/vendor/assets/vis/timeline/component/css/timeaxis.css

@@ -1,15 +1,15 @@
-.vis.timeline .axis {
-  position: relative;
+.vis.timeline .timeaxis {
+  position: absolute;
 }
 
-.vis.timeline .axis .text {
+.vis.timeline .timeaxis .text {
   position: absolute;
   color: #4d4d4d;
   padding: 3px;
   white-space: nowrap;
 }
 
-.vis.timeline .axis .text.measure {
+.vis.timeline .timeaxis .text.measure {
   position: absolute;
   padding-left: 0;
   padding-right: 0;
@@ -18,13 +18,13 @@
   visibility: hidden;
 }
 
-.vis.timeline .axis .grid.vertical {
+.vis.timeline .timeaxis .grid.vertical {
   position: absolute;
   width: 0;
   border-right: 1px solid;
 }
 
-.vis.timeline .axis .grid.horizontal {
+.vis.timeline .timeaxis .grid.horizontal {
   position: absolute;
   left: 0;
   width: 100%;
@@ -32,10 +32,10 @@
   border-bottom: 1px solid;
 }
 
-.vis.timeline .axis .grid.minor {
+.vis.timeline .timeaxis .grid.minor {
   border-color: #e5e5e5;
 }
 
-.vis.timeline .axis .grid.major {
+.vis.timeline .timeaxis .grid.major {
   border-color: #bfbfbf;
 }

data/vendor/assets/vis/timeline/component/item/Item.js

@@ -1,26 +1,27 @@
 /**
  * @constructor Item
- * @param {ItemSet} parent
  * @param {Object} data             Object containing (optional) parameters type,
  *                                  start, end, content, group, className.
  * @param {Object} [options]        Options to set initial property values
  * @param {Object} [defaultOptions] default options
  *                                  // TODO: describe available options
  */
-function Item (parent, data, options, defaultOptions) {
-  this.parent = parent;
+function Item (data, options, defaultOptions) {
+  this.id = null;
+  this.parent = null;
   this.data = data;
   this.dom = null;
   this.options = options || {};
   this.defaultOptions = defaultOptions || {};
 
   this.selected = false;
-  this.visible = false;
-  this.top = 0;
-  this.left = 0;
-  this.width = 0;
-  this.height = 0;
-  this.offset = 0;
+  this.displayed = false;
+  this.dirty = true;
+
+  this.top = null;
+  this.left = null;
+  this.width = null;
+  this.height = null;
 }
 
 /**
@@ -28,7 +29,7 @@ function Item (parent, data, options, defaultOptions) {
  */
 Item.prototype.select = function select() {
   this.selected = true;
-  if (this.visible) this.repaint();
+  if (this.displayed) this.repaint();
 };
 
 /**
@@ -36,7 +37,34 @@ Item.prototype.select = function select() {
  */
 Item.prototype.unselect = function unselect() {
   this.selected = false;
-  if (this.visible) this.repaint();
+  if (this.displayed) this.repaint();
+};
+
+/**
+ * Set a parent for the item
+ * @param {ItemSet | Group} parent
+ */
+Item.prototype.setParent = function setParent(parent) {
+  if (this.displayed) {
+    this.hide();
+    this.parent = parent;
+    if (this.parent) {
+      this.show();
+    }
+  }
+  else {
+    this.parent = parent;
+  }
+};
+
+/**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+Item.prototype.isVisible = function isVisible (range) {
+  // Should be implemented by Item implementations
+  return false;
 };
 
 /**
@@ -57,40 +85,34 @@ Item.prototype.hide = function hide() {
 
 /**
  * Repaint the item
- * @return {Boolean} changed
  */
 Item.prototype.repaint = function repaint() {
   // should be implemented by the item
-  return false;
 };
 
 /**
- * Reflow the item
- * @return {Boolean} resized
+ * Reposition the Item horizontally
  */
-Item.prototype.reflow = function reflow() {
+Item.prototype.repositionX = function repositionX() {
   // should be implemented by the item
-  return false;
 };
 
 /**
- * Give the item a display offset in pixels
- * @param {Number} offset    Offset on screen in pixels
+ * Reposition the Item vertically
  */
-Item.prototype.setOffset = function setOffset(offset) {
-  this.offset = offset;
+Item.prototype.repositionY = function repositionY() {
+  // should be implemented by the item
 };
 
 /**
  * Repaint a delete button on the top right of the item when the item is selected
  * @param {HTMLElement} anchor
- * @private
+ * @protected
  */
 Item.prototype._repaintDeleteButton = function (anchor) {
-  if (this.selected && this.options.editable && !this.dom.deleteButton) {
+  if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
     // create and show button
-    var parent = this.parent;
-    var id = this.id;
+    var me = this;
 
     var deleteButton = document.createElement('div');
     deleteButton.className = 'delete';
@@ -99,7 +121,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
     Hammer(deleteButton, {
       preventDefault: true
     }).on('tap', function (event) {
-      parent.removeItem(id);
+      me.parent.removeFromDataSet(me);
       event.stopPropagation();
     });
 

data/vendor/assets/vis/timeline/component/item/ItemBox.js

@@ -1,304 +1,230 @@
 /**
  * @constructor ItemBox
  * @extends Item
- * @param {ItemSet} parent
  * @param {Object} data             Object containing parameters start
  *                                  content, className.
  * @param {Object} [options]        Options to set initial property values
  * @param {Object} [defaultOptions] default options
  *                                  // TODO: describe available options
  */
-function ItemBox (parent, data, options, defaultOptions) {
+function ItemBox (data, options, defaultOptions) {
   this.props = {
     dot: {
-      left: 0,
-      top: 0,
       width: 0,
       height: 0
     },
     line: {
-      top: 0,
-      left: 0,
       width: 0,
       height: 0
     }
   };
 
-  Item.call(this, parent, data, options, defaultOptions);
+  // validate data
+  if (data) {
+    if (data.start == undefined) {
+      throw new Error('Property "start" missing in item ' + data);
+    }
+  }
+
+  Item.call(this, data, options, defaultOptions);
 }
 
-ItemBox.prototype = new Item (null, null);
+ItemBox.prototype = new Item (null);
+
+/**
+ * Check whether this item is visible inside given range
+ * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @returns {boolean} True if visible
+ */
+ItemBox.prototype.isVisible = function isVisible (range) {
+  // determine visibility
+  // TODO: account for the real width of the item. Right now we just add 1/4 to the window
+  var interval = (range.end - range.start) / 4;
+  return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
+};
 
 /**
  * Repaint the item
- * @return {Boolean} changed
  */
 ItemBox.prototype.repaint = function repaint() {
-  // TODO: make an efficient repaint
-  var changed = false;
   var dom = this.dom;
-
   if (!dom) {
-    this._create();
+    // create DOM
+    this.dom = {};
     dom = this.dom;
-    changed = true;
+
+    // create main box
+    dom.box = document.createElement('DIV');
+
+    // contents box (inside the background box). used for making margins
+    dom.content = document.createElement('DIV');
+    dom.content.className = 'content';
+    dom.box.appendChild(dom.content);
+
+    // line to axis
+    dom.line = document.createElement('DIV');
+    dom.line.className = 'line';
+
+    // dot on axis
+    dom.dot = document.createElement('DIV');
+    dom.dot.className = 'dot';
+
+    // attach this item as attribute
+    dom.box['timeline-item'] = this;
   }
 
-  if (dom) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint item: no parent attached');
+  // append DOM to parent DOM
+  if (!this.parent) {
+    throw new Error('Cannot repaint item: no parent attached');
+  }
+  if (!dom.box.parentNode) {
+    var foreground = this.parent.getForeground();
+    if (!foreground) throw new Error('Cannot repaint time axis: parent has no foreground container element');
+    foreground.appendChild(dom.box);
+  }
+  if (!dom.line.parentNode) {
+    var background = this.parent.getBackground();
+    if (!background) throw new Error('Cannot repaint time axis: parent has no background container element');
+    background.appendChild(dom.line);
+  }
+  if (!dom.dot.parentNode) {
+    var axis = this.parent.getAxis();
+    if (!background) throw new Error('Cannot repaint time axis: parent has no axis container element');
+    axis.appendChild(dom.dot);
+  }
+  this.displayed = true;
+
+  // update contents
+  if (this.data.content != this.content) {
+    this.content = this.data.content;
+    if (this.content instanceof Element) {
+      dom.content.innerHTML = '';
+      dom.content.appendChild(this.content);
     }
-
-    if (!dom.box.parentNode) {
-      var foreground = this.parent.getForeground();
-      if (!foreground) {
-        throw new Error('Cannot repaint time axis: ' +
-            'parent has no foreground container element');
-      }
-      foreground.appendChild(dom.box);
-      changed = true;
+    else if (this.data.content != undefined) {
+      dom.content.innerHTML = this.content;
     }
-
-    if (!dom.line.parentNode) {
-      var background = this.parent.getBackground();
-      if (!background) {
-        throw new Error('Cannot repaint time axis: ' +
-            'parent has no background container element');
-      }
-      background.appendChild(dom.line);
-      changed = true;
+    else {
+      throw new Error('Property "content" missing in item ' + this.data.id);
     }
 
-    if (!dom.dot.parentNode) {
-      var axis = this.parent.getAxis();
-      if (!background) {
-        throw new Error('Cannot repaint time axis: ' +
-            'parent has no axis container element');
-      }
-      axis.appendChild(dom.dot);
-      changed = true;
-    }
+    this.dirty = true;
+  }
 
-    this._repaintDeleteButton(dom.box);
-
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
-      }
-      changed = true;
-    }
+  // update class
+  var className = (this.data.className? ' ' + this.data.className : '') +
+      (this.selected ? ' selected' : '');
+  if (this.className != className) {
+    this.className = className;
+    dom.box.className = 'item box' + className;
+    dom.line.className = 'item line' + className;
+    dom.dot.className  = 'item dot' + className;
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = 'item box' + className;
-      dom.line.className = 'item line' + className;
-      dom.dot.className  = 'item dot' + className;
-      changed = true;
-    }
+    this.dirty = true;
   }
 
-  return changed;
+  // recalculate size
+  if (this.dirty) {
+    this.props.dot.height = dom.dot.offsetHeight;
+    this.props.dot.width = dom.dot.offsetWidth;
+    this.props.line.width = dom.line.offsetWidth;
+    this.width = dom.box.offsetWidth;
+    this.height = dom.box.offsetHeight;
+
+    this.dirty = false;
+  }
+
+  this._repaintDeleteButton(dom.box);
 };
 
 /**
- * Show the item in the DOM (when not already visible). The items DOM will
+ * Show the item in the DOM (when not already displayed). The items DOM will
  * be created when needed.
- * @return {Boolean} changed
  */
 ItemBox.prototype.show = function show() {
-  if (!this.dom || !this.dom.box.parentNode) {
-    return this.repaint();
-  }
-  else {
-    return false;
+  if (!this.displayed) {
+    this.repaint();
   }
 };
 
 /**
  * Hide the item from the DOM (when visible)
- * @return {Boolean} changed
  */
 ItemBox.prototype.hide = function hide() {
-  var changed = false,
-      dom = this.dom;
-  if (dom) {
-    if (dom.box.parentNode) {
-      dom.box.parentNode.removeChild(dom.box);
-      changed = true;
-    }
-    if (dom.line.parentNode) {
-      dom.line.parentNode.removeChild(dom.line);
-    }
-    if (dom.dot.parentNode) {
-      dom.dot.parentNode.removeChild(dom.dot);
-    }
+  if (this.displayed) {
+    var dom = this.dom;
+
+    if (dom.box.parentNode)   dom.box.parentNode.removeChild(dom.box);
+    if (dom.line.parentNode)  dom.line.parentNode.removeChild(dom.line);
+    if (dom.dot.parentNode)   dom.dot.parentNode.removeChild(dom.dot);
+
+    this.top = null;
+    this.left = null;
+
+    this.displayed = false;
   }
-  return changed;
 };
 
 /**
- * Reflow the item: calculate its actual size and position from the DOM
- * @return {boolean} resized    returns true if the axis is resized
- * @override
+ * Reposition the item horizontally
+ * @Override
  */
-ItemBox.prototype.reflow = function reflow() {
-  var changed = 0,
-      update,
-      dom,
-      props,
-      options,
-      margin,
-      start,
-      align,
-      orientation,
-      top,
+ItemBox.prototype.repositionX = function repositionX() {
+  var start = this.defaultOptions.toScreen(this.data.start),
+      align = this.options.align || this.defaultOptions.align,
       left,
-      data,
-      range;
+      box = this.dom.box,
+      line = this.dom.line,
+      dot = this.dom.dot;
 
-  if (this.data.start == undefined) {
-    throw new Error('Property "start" missing in item ' + this.data.id);
+  // calculate left position of the box
+  if (align == 'right') {
+    this.left = start - this.width;
   }
-
-  data = this.data;
-  range = this.parent && this.parent.range;
-  if (data && range) {
-    // TODO: account for the width of the item
-    var interval = (range.end - range.start);
-    this.visible = (data.start > range.start - interval) && (data.start < range.end + interval);
+  else if (align == 'left') {
+    this.left = start;
   }
   else {
-    this.visible = false;
+    // default or 'center'
+    this.left = start - this.width / 2;
   }
 
-  if (this.visible) {
-    dom = this.dom;
-    if (dom) {
-      update = util.updateProperty;
-      props = this.props;
-      options = this.options;
-      start = this.parent.toScreen(this.data.start) + this.offset;
-      align = options.align || this.defaultOptions.align;
-      margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
-      orientation = options.orientation || this.defaultOptions.orientation;
-
-      changed += update(props.dot, 'height', dom.dot.offsetHeight);
-      changed += update(props.dot, 'width', dom.dot.offsetWidth);
-      changed += update(props.line, 'width', dom.line.offsetWidth);
-      changed += update(props.line, 'height', dom.line.offsetHeight);
-      changed += update(props.line, 'top', dom.line.offsetTop);
-      changed += update(this, 'width', dom.box.offsetWidth);
-      changed += update(this, 'height', dom.box.offsetHeight);
-      if (align == 'right') {
-        left = start - this.width;
-      }
-      else if (align == 'left') {
-        left = start;
-      }
-      else {
-        // default or 'center'
-        left = start - this.width / 2;
-      }
-      changed += update(this, 'left', left);
-
-      changed += update(props.line, 'left', start - props.line.width / 2);
-      changed += update(props.dot, 'left', start - props.dot.width / 2);
-      changed += update(props.dot, 'top', -props.dot.height / 2);
-      if (orientation == 'top') {
-        top = margin;
-
-        changed += update(this, 'top', top);
-      }
-      else {
-        // default or 'bottom'
-        var parentHeight = this.parent.height;
-        top = parentHeight - this.height - margin;
-
-        changed += update(this, 'top', top);
-      }
-    }
-    else {
-      changed += 1;
-    }
-  }
-
-  return (changed > 0);
-};
-
-/**
- * Create an items DOM
- * @private
- */
-ItemBox.prototype._create = function _create() {
-  var dom = this.dom;
-  if (!dom) {
-    this.dom = dom = {};
+  // reposition box
+  box.style.left = this.left + 'px';
 
-    // create the box
-    dom.box = document.createElement('DIV');
-    // className is updated in repaint()
+  // reposition line
+  line.style.left = (start - this.props.line.width / 2) + 'px';
 
-    // contents box (inside the background box). used for making margins
-    dom.content = document.createElement('DIV');
-    dom.content.className = 'content';
-    dom.box.appendChild(dom.content);
-
-    // line to axis
-    dom.line = document.createElement('DIV');
-    dom.line.className = 'line';
-
-    // dot on axis
-    dom.dot = document.createElement('DIV');
-    dom.dot.className = 'dot';
-
-    // attach this item as attribute
-    dom.box['timeline-item'] = this;
-  }
+  // reposition dot
+  dot.style.left = (start - this.props.dot.width / 2) + 'px';
 };
 
 /**
- * Reposition the item, recalculate its left, top, and width, using the current
- * range and size of the items itemset
- * @override
+ * Reposition the item vertically
+ * @Override
  */
-ItemBox.prototype.reposition = function reposition() {
-  var dom = this.dom,
-      props = this.props,
-      orientation = this.options.orientation || this.defaultOptions.orientation;
-
-  if (dom) {
-    var box = dom.box,
-        line = dom.line,
-        dot = dom.dot;
-
-    box.style.left = this.left + 'px';
-    box.style.top = this.top + 'px';
-
-    line.style.left = props.line.left + 'px';
-    if (orientation == 'top') {
-      line.style.top = 0 + 'px';
-      line.style.height = this.top + 'px';
-    }
-    else {
-      // orientation 'bottom'
-      line.style.top = (this.top + this.height) + 'px';
-      line.style.height = Math.max(this.parent.height - this.top - this.height +
-          this.props.dot.height / 2, 0) + 'px';
-    }
+ItemBox.prototype.repositionY = function repositionY () {
+  var orientation = this.options.orientation || this.defaultOptions.orientation,
+      box = this.dom.box,
+      line = this.dom.line,
+      dot = this.dom.dot;
+
+  if (orientation == 'top') {
+    box.style.top = (this.top || 0) + 'px';
+    box.style.bottom = '';
+
+    line.style.top = '0';
+    line.style.bottom = '';
+    line.style.height = (this.parent.top + this.top + 1) + 'px';
+  }
+  else { // orientation 'bottom'
+    box.style.top = '';
+    box.style.bottom = (this.top || 0) + 'px';
 
-    dot.style.left = props.dot.left + 'px';
-    dot.style.top = props.dot.top + 'px';
+    line.style.top = (this.parent.top + this.parent.height - this.top - 1) + 'px';
+    line.style.bottom = '0';
+    line.style.height = '';
   }
+
+  dot.style.top = (-this.props.dot.height / 2) + 'px';
 };