Browse Source

Moved utility functions `toScreen`, `toTime`, and `snap` from `options` to `body.util`

css_transitions
jos 10 years ago
parent
commit
4ac1d3abcc
11 changed files with 69 additions and 65 deletions
  1. +7
    -9
      src/timeline/Timeline.js
  2. +1
    -1
      src/timeline/component/Component.js
  3. +1
    -1
      src/timeline/component/CurrentTime.js
  4. +3
    -3
      src/timeline/component/CustomTime.js
  5. +11
    -9
      src/timeline/component/ItemSet.js
  6. +4
    -4
      src/timeline/component/TimeAxis.js
  7. +5
    -4
      src/timeline/component/item/Item.js
  8. +9
    -8
      src/timeline/component/item/ItemBox.js
  9. +8
    -7
      src/timeline/component/item/ItemPoint.js
  10. +11
    -10
      src/timeline/component/item/ItemRange.js
  11. +9
    -9
      src/timeline/component/item/ItemRangeOverflow.js

+ 7
- 9
src/timeline/Timeline.js View File

@ -71,13 +71,6 @@ function Timeline (container, items, options) {
this.options = {}; this.options = {};
util.deepExtend(this.options, this.defaultOptions); util.deepExtend(this.options, this.defaultOptions);
util.deepExtend(this.options, {
// FIXME: not nice passing these functions via the options
snap: null, // will be specified after timeaxis is created
toScreen: me._toScreen.bind(me),
toTime: me._toTime.bind(me)
});
// Create the DOM, props, and emitter // Create the DOM, props, and emitter
this._create(); this._create();
@ -92,7 +85,12 @@ function Timeline (container, items, options) {
this.body = { this.body = {
dom: this.dom, dom: this.dom,
props: this.props, props: this.props,
emitter: this
emitter: this,
util: {
snap: null, // will be specified after TimeAxis is created
toScreen: me._toScreen.bind(me),
toTime: me._toTime.bind(me)
}
}; };
// range // range
@ -106,7 +104,7 @@ function Timeline (container, items, options) {
// time axis // time axis
this.timeAxis = new TimeAxis(this.body, this.options); this.timeAxis = new TimeAxis(this.body, this.options);
this.components.push(this.timeAxis); this.components.push(this.timeAxis);
this.options.snap = this.timeAxis.snap.bind(this.timeAxis); // TODO: not nice adding snap to options
this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
// current time bar // current time bar
this.currentTime = new CurrentTime(this.body, this.options); this.currentTime = new CurrentTime(this.body, this.options);

+ 1
- 1
src/timeline/component/Component.js View File

@ -1,6 +1,6 @@
/** /**
* Prototype for visual components * Prototype for visual components
* @param {{dom: Object, props: Object, emitter: Emitter, range: Range}} body
* @param {{dom: Object, props: Object, emitter: Emitter, range: Range}} [body]
* @param {Object} [options] * @param {Object} [options]
*/ */
function Component (body, options) { function Component (body, options) {

+ 1
- 1
src/timeline/component/CurrentTime.js View File

@ -49,7 +49,7 @@ CurrentTime.prototype.redraw = function() {
} }
var now = new Date(); var now = new Date();
var x = this.options.toScreen(now);
var x = this.body.util.toScreen(now);
this.bar.style.left = x + 'px'; this.bar.style.left = x + 'px';
this.bar.title = 'Current time: ' + now; this.bar.title = 'Current time: ' + now;

+ 3
- 3
src/timeline/component/CustomTime.js View File

@ -64,7 +64,7 @@ CustomTime.prototype.redraw = function () {
parent.appendChild(this.bar); parent.appendChild(this.bar);
} }
var x = this.options.toScreen(this.customTime);
var x = this.body.util.toScreen(this.customTime);
this.bar.style.left = x + 'px'; this.bar.style.left = x + 'px';
this.bar.title = 'Time: ' + this.customTime; this.bar.title = 'Time: ' + this.customTime;
@ -118,8 +118,8 @@ CustomTime.prototype._onDrag = function (event) {
if (!this.eventParams.dragging) return; if (!this.eventParams.dragging) return;
var deltaX = event.gesture.deltaX, var deltaX = event.gesture.deltaX,
x = this.options.toScreen(this.eventParams.customTime) + deltaX,
time = this.options.toTime(x);
x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
time = this.body.util.toTime(x);
this.setCustomTime(time); this.setCustomTime(time);

+ 11
- 9
src/timeline/component/ItemSet.js View File

@ -15,6 +15,10 @@ function ItemSet(body, options) {
// one options object is shared by this itemset and all its items // one options object is shared by this itemset and all its items
this.options = options || {}; this.options = options || {};
this.itemOptions = Object.create(this.options); this.itemOptions = Object.create(this.options);
this.itemConversion = {
toScreen: body.util.toScreen,
toTime: body.util.toTime
};
this.dom = {}; this.dom = {};
this.props = {}; this.props = {};
this.hammer = null; this.hammer = null;
@ -543,13 +547,11 @@ ItemSet.prototype.removeItem = function(id) {
* @protected * @protected
*/ */
ItemSet.prototype._onUpdate = function(ids) { ItemSet.prototype._onUpdate = function(ids) {
var me = this,
items = this.items,
itemOptions = this.itemOptions;
var me = this;
ids.forEach(function (id) { ids.forEach(function (id) {
var itemData = me.itemsData.get(id), var itemData = me.itemsData.get(id),
item = items[id],
item = me.items[id],
type = itemData.type || type = itemData.type ||
(itemData.start && itemData.end && 'range') || (itemData.start && itemData.end && 'range') ||
me.options.type || me.options.type ||
@ -572,7 +574,7 @@ ItemSet.prototype._onUpdate = function(ids) {
if (!item) { if (!item) {
// create item // create item
if (constructor) { if (constructor) {
item = new constructor(itemData, me.options, itemOptions);
item = new constructor(itemData, me.itemConversion, me.itemOptions);
item.id = id; // TODO: not so nice setting id afterwards item.id = id; // TODO: not so nice setting id afterwards
me._addItem(item); me._addItem(item);
} }
@ -913,7 +915,7 @@ ItemSet.prototype._onDragStart = function (event) {
ItemSet.prototype._onDrag = function (event) { ItemSet.prototype._onDrag = function (event) {
if (this.touchParams.itemProps) { if (this.touchParams.itemProps) {
var range = this.body.range, var range = this.body.range,
snap = this.options.snap || null,
snap = this.body.util.snap || null,
deltaX = event.gesture.deltaX, deltaX = event.gesture.deltaX,
scale = (this.props.width / (range.end - range.start)), scale = (this.props.width / (range.end - range.start)),
offset = deltaX / scale; offset = deltaX / scale;
@ -1058,7 +1060,7 @@ ItemSet.prototype._onAddItem = function (event) {
if (!this.options.editable.add) return; if (!this.options.editable.add) return;
var me = this, var me = this,
snap = this.options.snap || null,
snap = this.body.util.snap || null,
item = ItemSet.itemFromTarget(event); item = ItemSet.itemFromTarget(event);
if (item) { if (item) {
@ -1076,7 +1078,7 @@ ItemSet.prototype._onAddItem = function (event) {
// add item // add item
var xAbs = vis.util.getAbsoluteLeft(this.dom.frame); var xAbs = vis.util.getAbsoluteLeft(this.dom.frame);
var x = event.gesture.center.pageX - xAbs; var x = event.gesture.center.pageX - xAbs;
var start = this.options.toTime(x);
var start = this.body.util.toTime(x);
var newItem = { var newItem = {
start: snap ? snap(start) : start, start: snap ? snap(start) : start,
content: 'new item' content: 'new item'
@ -1084,7 +1086,7 @@ ItemSet.prototype._onAddItem = function (event) {
// when default type is a range, add a default end date to the new item // when default type is a range, add a default end date to the new item
if (this.options.type === 'range' || this.options.type == 'rangeoverflow') { if (this.options.type === 'range' || this.options.type == 'rangeoverflow') {
var end = this.options.toTime(x + this.props.width / 5);
var end = this.body.util.toTime(x + this.props.width / 5);
newItem.end = snap ? snap(end) : end; newItem.end = snap ? snap(end) : end;
} }

+ 4
- 4
src/timeline/component/TimeAxis.js View File

@ -137,8 +137,8 @@ TimeAxis.prototype._repaintLabels = function () {
// calculate range and step (step such that we have space for 7 characters per label) // calculate range and step (step such that we have space for 7 characters per label)
var start = util.convert(this.body.range.start, 'Number'), var start = util.convert(this.body.range.start, 'Number'),
end = util.convert(this.body.range.end, 'Number'), end = util.convert(this.body.range.end, 'Number'),
minimumStep = this.options.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
-this.options.toTime(0).valueOf();
minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
-this.body.util.toTime(0).valueOf();
var step = new TimeStep(new Date(start), new Date(end), minimumStep); var step = new TimeStep(new Date(start), new Date(end), minimumStep);
this.step = step; this.step = step;
@ -161,7 +161,7 @@ TimeAxis.prototype._repaintLabels = function () {
while (step.hasNext() && max < 1000) { while (step.hasNext() && max < 1000) {
max++; max++;
var cur = step.getCurrent(), var cur = step.getCurrent(),
x = this.options.toScreen(cur),
x = this.body.util.toScreen(cur),
isMajor = step.isMajor(); isMajor = step.isMajor();
// TODO: lines must have a width, such that we can create css backgrounds // TODO: lines must have a width, such that we can create css backgrounds
@ -188,7 +188,7 @@ TimeAxis.prototype._repaintLabels = function () {
// create a major label on the left when needed // create a major label on the left when needed
if (this.getOption('showMajorLabels')) { if (this.getOption('showMajorLabels')) {
var leftTime = this.options.toTime(0),
var leftTime = this.body.util.toTime(0),
leftText = step.getLabelMajor(leftTime), leftText = step.getLabelMajor(leftTime),
widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation

+ 5
- 4
src/timeline/component/item/Item.js View File

@ -2,17 +2,18 @@
* @constructor Item * @constructor Item
* @param {Object} data Object containing (optional) parameters type, * @param {Object} data Object containing (optional) parameters type,
* start, end, content, group, className. * start, end, content, group, className.
* @param {Object} [options] Options to set initial property values
* @param {Object} [defaultOptions] default options
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} options Configuration options
* // TODO: describe available options * // TODO: describe available options
*/ */
function Item (data, options, defaultOptions) {
function Item (data, conversion, options) {
this.id = null; this.id = null;
this.parent = null; this.parent = null;
this.data = data; this.data = data;
this.dom = null; this.dom = null;
this.conversion = conversion || {};
this.options = options || {}; this.options = options || {};
this.defaultOptions = defaultOptions || {};
this.selected = false; this.selected = false;
this.displayed = false; this.displayed = false;

+ 9
- 8
src/timeline/component/item/ItemBox.js View File

@ -3,11 +3,12 @@
* @extends Item * @extends Item
* @param {Object} data Object containing parameters start * @param {Object} data Object containing parameters start
* content, className. * content, className.
* @param {Object} [options] Options to set initial property values
* @param {Object} [defaultOptions] default options
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} [options] Configuration options
* // TODO: describe available options * // TODO: describe available options
*/ */
function ItemBox (data, options, defaultOptions) {
function ItemBox (data, conversion, options) {
this.props = { this.props = {
dot: { dot: {
width: 0, width: 0,
@ -26,10 +27,10 @@ function ItemBox (data, options, defaultOptions) {
} }
} }
Item.call(this, data, options, defaultOptions);
Item.call(this, data, conversion, options);
} }
ItemBox.prototype = new Item (null);
ItemBox.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
@ -170,8 +171,8 @@ ItemBox.prototype.hide = function() {
* @Override * @Override
*/ */
ItemBox.prototype.repositionX = function() { ItemBox.prototype.repositionX = function() {
var start = this.defaultOptions.toScreen(this.data.start),
align = this.options.align || this.defaultOptions.align,
var start = this.conversion.toScreen(this.data.start),
align = this.options.align,
left, left,
box = this.dom.box, box = this.dom.box,
line = this.dom.line, line = this.dom.line,
@ -204,7 +205,7 @@ ItemBox.prototype.repositionX = function() {
* @Override * @Override
*/ */
ItemBox.prototype.repositionY = function() { ItemBox.prototype.repositionY = function() {
var orientation = this.options.orientation || this.defaultOptions.orientation,
var orientation = this.options.orientation,
box = this.dom.box, box = this.dom.box,
line = this.dom.line, line = this.dom.line,
dot = this.dom.dot; dot = this.dom.dot;

+ 8
- 7
src/timeline/component/item/ItemPoint.js View File

@ -3,11 +3,12 @@
* @extends Item * @extends Item
* @param {Object} data Object containing parameters start * @param {Object} data Object containing parameters start
* content, className. * content, className.
* @param {Object} [options] Options to set initial property values
* @param {Object} [defaultOptions] default options
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} [options] Configuration options
* // TODO: describe available options * // TODO: describe available options
*/ */
function ItemPoint (data, options, defaultOptions) {
function ItemPoint (data, conversion, options) {
this.props = { this.props = {
dot: { dot: {
top: 0, top: 0,
@ -27,10 +28,10 @@ function ItemPoint (data, options, defaultOptions) {
} }
} }
Item.call(this, data, options, defaultOptions);
Item.call(this, data, conversion, options);
} }
ItemPoint.prototype = new Item (null);
ItemPoint.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
@ -164,7 +165,7 @@ ItemPoint.prototype.hide = function() {
* @Override * @Override
*/ */
ItemPoint.prototype.repositionX = function() { ItemPoint.prototype.repositionX = function() {
var start = this.defaultOptions.toScreen(this.data.start);
var start = this.conversion.toScreen(this.data.start);
this.left = start - this.props.dot.width; this.left = start - this.props.dot.width;
@ -177,7 +178,7 @@ ItemPoint.prototype.repositionX = function() {
* @Override * @Override
*/ */
ItemPoint.prototype.repositionY = function() { ItemPoint.prototype.repositionY = function() {
var orientation = this.options.orientation || this.defaultOptions.orientation,
var orientation = this.options.orientation,
point = this.dom.point; point = this.dom.point;
if (orientation == 'top') { if (orientation == 'top') {

+ 11
- 10
src/timeline/component/item/ItemRange.js View File

@ -3,11 +3,12 @@
* @extends Item * @extends Item
* @param {Object} data Object containing parameters start, end * @param {Object} data Object containing parameters start, end
* content, className. * content, className.
* @param {Object} [options] Options to set initial property values
* @param {Object} [defaultOptions] default options
* // TODO: describe available options
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} [options] Configuration options
* // TODO: describe options
*/ */
function ItemRange (data, options, defaultOptions) {
function ItemRange (data, conversion, options) {
this.props = { this.props = {
content: { content: {
width: 0 width: 0
@ -24,10 +25,10 @@ function ItemRange (data, options, defaultOptions) {
} }
} }
Item.call(this, data, options, defaultOptions);
Item.call(this, data, conversion, options);
} }
ItemRange.prototype = new Item (null);
ItemRange.prototype = new Item (null, null, null);
ItemRange.prototype.baseClassName = 'item range'; ItemRange.prototype.baseClassName = 'item range';
@ -153,9 +154,9 @@ ItemRange.prototype.hide = function() {
ItemRange.prototype.repositionX = function() { ItemRange.prototype.repositionX = function() {
var props = this.props, var props = this.props,
parentWidth = this.parent.width, parentWidth = this.parent.width,
start = this.defaultOptions.toScreen(this.data.start),
end = this.defaultOptions.toScreen(this.data.end),
padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
start = this.conversion.toScreen(this.data.start),
end = this.conversion.toScreen(this.data.end),
padding = this.options.padding,
contentLeft; contentLeft;
// limit the width of the this, as browsers cannot draw very wide divs // limit the width of the this, as browsers cannot draw very wide divs
@ -189,7 +190,7 @@ ItemRange.prototype.repositionX = function() {
* @Override * @Override
*/ */
ItemRange.prototype.repositionY = function() { ItemRange.prototype.repositionY = function() {
var orientation = this.options.orientation || this.defaultOptions.orientation,
var orientation = this.options.orientation,
box = this.dom.box; box = this.dom.box;
if (orientation == 'top') { if (orientation == 'top') {

+ 9
- 9
src/timeline/component/item/ItemRangeOverflow.js View File

@ -3,11 +3,12 @@
* @extends ItemRange * @extends ItemRange
* @param {Object} data Object containing parameters start, end * @param {Object} data Object containing parameters start, end
* content, className. * content, className.
* @param {Object} [options] Options to set initial property values
* @param {Object} [defaultOptions] default options
* // TODO: describe available options
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} [options] Configuration options
* // TODO: describe options
*/ */
function ItemRangeOverflow (data, options, defaultOptions) {
function ItemRangeOverflow (data, conversion, options) {
this.props = { this.props = {
content: { content: {
left: 0, left: 0,
@ -15,10 +16,10 @@ function ItemRangeOverflow (data, options, defaultOptions) {
} }
}; };
ItemRange.call(this, data, options, defaultOptions);
ItemRange.call(this, data, conversion, options);
} }
ItemRangeOverflow.prototype = new ItemRange (null);
ItemRangeOverflow.prototype = new ItemRange (null, null, null);
ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow'; ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
@ -28,9 +29,8 @@ ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
*/ */
ItemRangeOverflow.prototype.repositionX = function() { ItemRangeOverflow.prototype.repositionX = function() {
var parentWidth = this.parent.width, var parentWidth = this.parent.width,
start = this.defaultOptions.toScreen(this.data.start),
end = this.defaultOptions.toScreen(this.data.end),
padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
start = this.conversion.toScreen(this.data.start),
end = this.conversion.toScreen(this.data.end),
contentLeft; contentLeft;
// limit the width of the this, as browsers cannot draw very wide divs // limit the width of the this, as browsers cannot draw very wide divs

Loading…
Cancel
Save