Browse Source

Refactored ItemPoint

css_transitions
josdejong 10 years ago
parent
commit
141cf0b4c3
3 changed files with 126 additions and 293 deletions
  1. +7
    -11
      src/timeline/component/item/ItemBox.js
  2. +111
    -166
      src/timeline/component/item/ItemPoint.js
  3. +8
    -116
      src/timeline/component/item/ItemRange.js

+ 7
- 11
src/timeline/component/item/ItemBox.js View File

@ -56,13 +56,9 @@ ItemBox.prototype.isVisible = function isVisible () {
* Repaint the item
*/
ItemBox.prototype.repaint = function repaint() {
var dom,
update = util.updateProperty,
props= this.props;
// create DOM
dom = this.dom;
var dom = this.dom;
if (!dom) {
// create DOM
this.dom = {};
dom = this.dom;
@ -138,11 +134,11 @@ ItemBox.prototype.repaint = function repaint() {
// recalculate size
if (this.dirty) {
update(props.dot, 'height', dom.dot.offsetHeight);
update(props.dot, 'width', dom.dot.offsetWidth);
update(props.line, 'width', dom.line.offsetWidth);
update(this, 'width', dom.box.offsetWidth);
update(this, 'height', dom.box.offsetHeight);
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;
}

+ 111
- 166
src/timeline/component/item/ItemPoint.js View File

@ -21,219 +21,164 @@ function ItemPoint (parent, data, options, defaultOptions) {
}
};
// validate data
if (data) {
if (data.start == undefined) {
throw new Error('Property "start" missing in item ' + data);
}
}
Item.call(this, parent, data, options, defaultOptions);
}
ItemPoint.prototype = new Item (null, null);
/**
* Check whether this item is visible in the current time window
* @returns {boolean} True if visible
*/
ItemPoint.prototype.isVisible = function isVisible () {
// determine visibility
var data = this.data;
var range = this.parent && this.parent.range;
if (data && range) {
var interval = (range.end - range.start);
return (data.start > range.start - interval) && (data.start < range.end);
}
else {
return false;
}
}
/**
* Repaint the item
* @return {Boolean} changed
*/
ItemPoint.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;
// background box
dom.point = document.createElement('div');
// className is updated in repaint()
// contents box, right from the dot
dom.content = document.createElement('div');
dom.content.className = 'content';
dom.point.appendChild(dom.content);
// dot at start
dom.dot = document.createElement('div');
dom.dot.className = 'dot';
dom.point.appendChild(dom.dot);
// attach this item as attribute
dom.point['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.point.parentNode) {
var foreground = this.parent.getForeground();
if (!foreground) {
throw new Error('Cannot repaint time axis: ' +
'parent has no foreground container element');
throw new Error('Cannot repaint time axis: parent has no foreground container element');
}
if (!dom.point.parentNode) {
foreground.appendChild(dom.point);
foreground.appendChild(dom.point);
changed = true;
foreground.appendChild(dom.point);
}
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);
}
// 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;
else if (this.data.content != undefined) {
dom.content.innerHTML = this.content;
}
else {
throw new Error('Property "content" missing in item ' + this.data.id);
}
this._repaintDeleteButton(dom.point);
this.dirty = true;
}
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');
if (this.className != className) {
this.className = className;
dom.point.className = 'item point' + className;
changed = true;
}
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');
if (this.className != className) {
this.className = className;
dom.point.className = 'item point' + className;
this.dirty = true;
}
return changed;
// recalculate size
if (this.dirty) {
this.width = dom.point.offsetWidth;
this.height = dom.point.offsetHeight;
this.props.dot.width = dom.dot.offsetWidth;
this.props.dot.height = dom.dot.offsetHeight;
this.props.content.height = dom.content.offsetHeight;
// resize contents
dom.content.style.marginLeft = 1.5 * this.props.dot.width + 'px';
//dom.content.style.marginRight = ... + 'px'; // TODO: margin right
dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
this.dirty = false;
}
this._repaintDeleteButton(dom.box);
};
/**
* Show the item in the DOM (when not already visible). The items DOM will
* be created when needed.
* @return {Boolean} changed
*/
ItemPoint.prototype.show = function show() {
if (!this.dom || !this.dom.point.parentNode) {
return this.repaint();
}
else {
return false;
if (!this.displayed) {
this.repaint();
}
};
/**
* Hide the item from the DOM (when visible)
* @return {Boolean} changed
*/
ItemPoint.prototype.hide = function hide() {
var changed = false,
dom = this.dom;
if (dom) {
if (dom.point.parentNode) {
dom.point.parentNode.removeChild(dom.point);
changed = true;
if (this.displayed) {
if (this.dom.point.parentNode) {
this.dom.point.parentNode.removeChild(this.dom.point);
}
}
return changed;
};
/**
* Reflow the item: calculate its actual size from the DOM
* @return {boolean} resized returns true if the axis is resized
* @override
*/
ItemPoint.prototype.reflow = function reflow() {
var changed = 0,
update,
dom,
props,
options,
margin,
orientation,
start,
top,
data,
range;
if (this.data.start == undefined) {
throw new Error('Property "start" missing in item ' + this.data.id);
}
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);
this.displayed = false;
}
else {
this.visible = false;
}
if (this.visible) {
dom = this.dom;
if (dom) {
update = util.updateProperty;
props = this.props;
options = this.options;
orientation = options.orientation || this.defaultOptions.orientation;
margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
start = this.parent.toScreen(this.data.start) + this.offset;
changed += update(this, 'width', dom.point.offsetWidth);
changed += update(this, 'height', dom.point.offsetHeight);
changed += update(props.dot, 'width', dom.dot.offsetWidth);
changed += update(props.dot, 'height', dom.dot.offsetHeight);
changed += update(props.content, 'height', dom.content.offsetHeight);
if (orientation == 'top') {
top = margin;
}
else {
// default or 'bottom'
var parentHeight = this.parent.height;
top = Math.max(parentHeight - this.height - margin, 0);
}
changed += update(this, 'top', top);
changed += update(this, 'left', start - props.dot.width / 2);
changed += update(props.content, 'marginLeft', 1.5 * props.dot.width);
//changed += update(props.content, 'marginRight', 0.5 * props.dot.width); // TODO
changed += update(props.dot, 'top', (this.height - props.dot.height) / 2);
}
else {
changed += 1;
}
}
return (changed > 0);
};
/**
* Create an items DOM
* @private
* Reposition the item horizontally
* @Override
*/
ItemPoint.prototype._create = function _create() {
var dom = this.dom;
if (!dom) {
this.dom = dom = {};
ItemPoint.prototype.repositionX = function repositionX() {
var start = this.parent.toScreen(this.data.start) + this.offset;
// background box
dom.point = document.createElement('div');
// className is updated in repaint()
// contents box, right from the dot
dom.content = document.createElement('div');
dom.content.className = 'content';
dom.point.appendChild(dom.content);
// dot at start
dom.dot = document.createElement('div');
dom.dot.className = 'dot';
dom.point.appendChild(dom.dot);
this.left = start - this.props.dot.width / 2;
// attach this item as attribute
dom.point['timeline-item'] = this;
}
// reposition point
this.dom.point.style.left = this.left + '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
*/
ItemPoint.prototype.reposition = function reposition() {
var dom = this.dom,
props = this.props;
if (dom) {
dom.point.style.top = this.top + 'px';
dom.point.style.left = this.left + 'px';
dom.content.style.marginLeft = props.content.marginLeft + 'px';
//dom.content.style.marginRight = props.content.marginRight + 'px'; // TODO
dom.dot.style.top = props.dot.top + 'px';
}
};
ItemPoint.prototype.repositionY = function repositionY () {
this.dom.point.style.top = this.top + 'px';
}

+ 8
- 116
src/timeline/component/item/ItemRange.js View File

@ -51,13 +51,9 @@ ItemRange.prototype.isVisible = function isVisible () {
* Repaint the item
*/
ItemRange.prototype.repaint = function repaint() {
var dom,
update = util.updateProperty,
props= this.props;
// create DOM
dom = this.dom;
var dom = this.dom;
if (!dom) {
// create DOM
this.dom = {};
dom = this.dom;
@ -100,6 +96,8 @@ ItemRange.prototype.repaint = function repaint() {
else {
throw new Error('Property "content" missing in item ' + this.data.id);
}
this.dirty = true;
}
// update class
@ -108,12 +106,14 @@ ItemRange.prototype.repaint = function repaint() {
if (this.className != className) {
this.className = className;
dom.box.className = 'item range' + className;
this.dirty = true;
}
// recalculate size
if (this.dirty) {
update(props.content, 'width', this.dom.content.offsetWidth);
update(this, 'height', this.dom.box.offsetHeight);
this.props.content.width = this.dom.content.offsetWidth;
this.height = this.dom.box.offsetHeight;
this.dirty = false;
}
@ -149,114 +149,6 @@ ItemRange.prototype.hide = function hide() {
}
};
/**
* Reflow the item: calculate its actual size from the DOM
* @return {boolean} resized returns true if the axis is resized
* @override
*/
// TODO: remove function
ItemRange.prototype.reflow = function reflow() {
return false;
var changed = 0,
dom,
props,
options,
margin,
padding,
parent,
start,
end,
data,
range,
update,
box,
parentWidth,
contentLeft,
orientation,
top;
if (this.visible) {
dom = this.dom;
if (dom) {
props = this.props;
options = this.options;
parent = this.parent;
start = parent.toScreen(this.data.start) + this.offset;
end = parent.toScreen(this.data.end) + this.offset;
update = util.updateProperty;
box = dom.box;
parentWidth = parent.width;
orientation = options.orientation || this.defaultOptions.orientation;
margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
padding = options.padding || this.defaultOptions.padding;
changed += update(props.content, 'width', dom.content.offsetWidth);
changed += update(this, 'height', box.offsetHeight);
// limit the width of the this, as browsers cannot draw very wide divs
if (start < -parentWidth) {
start = -parentWidth;
}
if (end > 2 * parentWidth) {
end = 2 * parentWidth;
}
// when range exceeds left of the window, position the contents at the left of the visible area
if (start < 0) {
contentLeft = Math.min(-start,
(end - start - props.content.width - 2 * padding));
// TODO: remove the need for options.padding. it's terrible.
}
else {
contentLeft = 0;
}
changed += update(props.content, 'left', contentLeft);
if (orientation == 'top') {
top = margin;
changed += update(this, 'top', top);
}
else {
// default or 'bottom'
top = parent.height - this.height - margin;
changed += update(this, 'top', top);
}
changed += update(this, 'left', start);
changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
}
else {
changed += 1;
}
}
return (changed > 0);
};
/**
* Create an items DOM
* @private
*/
ItemRange.prototype._create = function _create() {
var dom = this.dom;
if (!dom) {
this.dom = dom = {};
// background box
dom.box = document.createElement('div');
// className is updated in repaint()
// contents box
dom.content = document.createElement('div');
dom.content.className = 'content';
dom.box.appendChild(dom.content);
// attach this item as attribute
dom.box['timeline-item'] = this;
}
};
/**
* Reposition the item horizontally
* @Override

Loading…
Cancel
Save