From 4f105a31279bcc8ea8093ef403dfd2e3d9004e34 Mon Sep 17 00:00:00 2001 From: Yotam Berkowitz Date: Tue, 25 Oct 2016 22:30:21 +0300 Subject: [PATCH] Fix templates --- lib/timeline/Core.js | 49 +++++++++++++---------------- lib/timeline/Timeline.js | 43 ++++++++++++++++++------- lib/timeline/component/ItemSet.js | 6 ++-- lib/timeline/component/item/Item.js | 4 +-- 4 files changed, 58 insertions(+), 44 deletions(-) diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 04c51ad6..eb9de7b3 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -112,7 +112,7 @@ Core.prototype._create = function (container) { } }.bind(this)); this.on('touch', this._onTouch.bind(this)); - this.on('panmove', this._onDrag.bind(this)); + this.on('pan', this._onDrag.bind(this)); var me = this; this.on('_change', function (properties) { @@ -191,13 +191,8 @@ Core.prototype._create = function (container) { var current = this.props.scrollTop; var adjusted = current + delta * 120; - if (this.isActive()) { this._setScrollTop(adjusted); - if (this.options.verticalScroll) { - this.dom.left.parentNode.scrollTop = -adjusted; - this.dom.right.parentNode.scrollTop = -adjusted; - } this._redraw(); this.emit('scroll', event); } @@ -207,29 +202,29 @@ Core.prototype._create = function (container) { event.preventDefault(); } - if (this.dom.center.addEventListener) { + if (this.dom.root.addEventListener) { // IE9, Chrome, Safari, Opera - this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false); + this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false); // Firefox - this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false); + this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false); } else { // IE 6/7/8 - this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this)); + this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this)); } function onMouseScrollSide(event) { - if (!me.options.verticalScroll) return; - event.preventDefault(); + var current = this.scrollTop; + var adjusted = -current; if (me.isActive()) { - var adjusted = -event.target.scrollTop; me._setScrollTop(adjusted); + me._redraw(); - me.emit('scrollSide', event); + me.emit('scroll', event); } } - this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this)); - this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this)); + this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide); + this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide); this.customTimes = []; @@ -367,7 +362,9 @@ Core.prototype.setOptions = function (options) { } // propagate options to all components - this.components.forEach(component => component.setOptions(options)); + this.components.forEach(component => { + component.setOptions(options) + }); // enable/disable configure if ('configure' in options) { @@ -825,9 +822,10 @@ Core.prototype._redraw = function() { // update the scrollTop, feasible range for the offset can be changed // when the height of the Core or of the contents of the center changed - var offset = this._updateScrollTop(); + this._updateScrollTop(); // reposition the scrollable contents + var offset = this.props.scrollTop; if (options.orientation.item != 'top') { offset += Math.max(this.props.centerContainer.height - this.props.center.height - this.props.border.top - this.props.border.bottom, 0); @@ -848,10 +846,12 @@ Core.prototype._redraw = function() { dom.shadowBottomRight.style.visibility = visibilityBottom; if (this.options.verticalScroll) { - dom.shadowTopRight.style.visibility = "hidden"; - dom.shadowBottomRight.style.visibility = "hidden"; - dom.shadowTopLeft.style.visibility = "hidden"; - dom.shadowBottomLeft.style.visibility = "hidden"; + this.dom.shadowTopRight.style.visibility = "hidden"; + this.dom.shadowBottomRight.style.visibility = "hidden"; + this.dom.shadowTopLeft.style.visibility = "hidden"; + this.dom.shadowBottomLeft.style.visibility = "hidden"; + document.getElementsByClassName('vis-left')[0].scrollTop = -offset; + document.getElementsByClassName('vis-right')[0].scrollTop = -offset; } else { dom.left.style.top = offset + 'px'; dom.right.style.top = offset + 'px'; @@ -1072,7 +1072,6 @@ Core.prototype._onPinch = function (event) { * @private */ Core.prototype._onDrag = function (event) { - if (!event) return // refuse to drag when we where pinching to prevent the timeline make a jump // when releasing the fingers in opposite order from the touch screen if (!this.touch.allowDragging) return; @@ -1082,10 +1081,6 @@ Core.prototype._onDrag = function (event) { var oldScrollTop = this._getScrollTop(); var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta); - if (this.options.verticalScroll) { - this.dom.left.parentNode.scrollTop = -this.props.scrollTop; - this.dom.right.parentNode.scrollTop = -this.props.scrollTop; - } if (newScrollTop != oldScrollTop) { this.emit("verticalDrag"); diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index bb2e6015..e11f34ff 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -28,8 +28,8 @@ import Validator from '../shared/Validator'; * @constructor * @extends Core */ - function Timeline (container, items, groups, options) { + if (!(this instanceof Timeline)) { throw new SyntaxError('Constructor must be called with the new operator'); } @@ -45,22 +45,21 @@ function Timeline (container, items, groups, options) { this.defaultOptions = { start: null, end: null, - autoResize: true, - orientation: { axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both' item: 'bottom' // not relevant }, moment: moment, - width: null, height: null, maxHeight: null, minHeight: null }; this.options = util.deepExtend({}, this.defaultOptions); - + if (options) { + this.options.rtl = options.rtl + } // Create the DOM, props, and emitter this._create(container); @@ -104,14 +103,9 @@ function Timeline (container, items, groups, options) { // current time bar this.currentTime = new CurrentTime(this.body); this.components.push(this.currentTime); - - // apply options - if (options) { - this.setOptions(options); - } // item set - console.log("aaaaaaaaaa", this.options, options); + var itemSetOptions = this.itemSet = new ItemSet(this.body, this.options); this.components.push(this.itemSet); @@ -150,6 +144,11 @@ function Timeline (container, items, groups, options) { } }); + // apply options + if (options) { + this.setOptions(options); + } + // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS! if (groups) { this.setGroups(groups); @@ -195,7 +194,6 @@ Timeline.prototype.setOptions = function (options) { if (errorFound === true) { console.log('%cErrors have been found in the supplied options object.', printStyle); } - Core.prototype.setOptions.call(this, options); if ('type' in options) { @@ -546,4 +544,25 @@ Timeline.prototype.getEventProperties = function (event) { } }; + /** + * Extend the drag event handler from Core, move the timeline vertically + * @param {Event} event + * @private + */ + Timeline.prototype._onDrag = function (event) { + // refuse to drag when we where pinching to prevent the timeline make a jump + // when releasing the fingers in opposite order from the touch screen, and refuse + // to drag when an item is already being dragged + if (!this.touch.allowDragging || this.itemSet.touchParams.itemIsDragging) return; + + var delta = event.deltaY; + + var oldScrollTop = this._getScrollTop(); + var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta); + + if (newScrollTop != oldScrollTop) { + this.emit("verticalDrag"); + } + }; + module.exports = Timeline; diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 9eb46393..f2020b09 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -95,7 +95,9 @@ function ItemSet(body, options) { // options is shared by this ItemSet and all its items this.options = util.extend({}, this.defaultOptions); - this.options.rtl = options.rtl; + if (options) { + this.options.rtl = options.rtl; // required to determine from the initial creation if rtl + } // options for getting items from the DataSet with the correct type this.itemOptions = { @@ -318,7 +320,7 @@ ItemSet.prototype.setOptions = function(options) { // copy all options that we know var fields = ['type', 'rtl', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap']; util.selectiveExtend(fields, this.options, options); - + if ('orientation' in options) { if (typeof options.orientation === 'string') { this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom'; diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 27c90271..c1762805 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -188,7 +188,7 @@ Item.prototype._repaintDeleteButton = function (anchor) { Item.prototype._updateContents = function (element) { var content; var templateFunction; - console.log(this.options); + if (this.options.template) { var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset templateFunction = this.options.template.bind(this); @@ -197,8 +197,6 @@ Item.prototype._updateContents = function (element) { content = this.data.content; } - console.log(content); - console.log("content: " , content, content instanceof Object, !(content instanceof Element)); if ((content instanceof Object) && !(content instanceof Element)) { templateFunction(itemData, element) } else {