You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.9 KiB
142 lines
3.9 KiB
/**
|
|
* A root panel can hold components. The root panel must be initialized with
|
|
* a DOM element as container.
|
|
* @param {HTMLElement} container
|
|
* @param {Emitter} emitter
|
|
* @param {Object} [options] Available parameters: see RootPanel.setOptions.
|
|
* @constructor RootPanel
|
|
* @extends Panel
|
|
*/
|
|
function RootPanel(container, emitter, options) {
|
|
this.id = util.randomUUID();
|
|
this.container = container;
|
|
this.emitter = emitter;
|
|
|
|
this.options = options || {};
|
|
this.defaultOptions = {
|
|
autoResize: true
|
|
};
|
|
}
|
|
|
|
RootPanel.prototype = new Panel();
|
|
|
|
/**
|
|
* Set options. Will extend the current options.
|
|
* @param {Object} [options] Available parameters:
|
|
* {String | function} [className]
|
|
* {String | Number | function} [left]
|
|
* {String | Number | function} [top]
|
|
* {String | Number | function} [width]
|
|
* {String | Number | function} [height]
|
|
* {Boolean | function} [autoResize]
|
|
*/
|
|
RootPanel.prototype.setOptions = function (options) {
|
|
if (options) {
|
|
util.extend(this.options, options);
|
|
|
|
this.repaint();
|
|
|
|
var autoResize = this.getOption('autoResize');
|
|
if (autoResize) {
|
|
this._watch();
|
|
}
|
|
else {
|
|
this._unwatch();
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Repaint the component
|
|
*/
|
|
RootPanel.prototype.repaint = function () {
|
|
// create frame
|
|
if (!this.frame) {
|
|
if (!this.container) throw new Error('Cannot repaint root panel: no container attached');
|
|
this.frame = document.createElement('div');
|
|
this.container.appendChild(this.frame);
|
|
|
|
// 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
|
|
];
|
|
events.forEach(function (event) {
|
|
var listener = function () {
|
|
var args = [event].concat(Array.prototype.slice.call(arguments, 0));
|
|
me.emitter.emit.apply(me.emitter, args);
|
|
};
|
|
me.hammer.on(event, listener);
|
|
me.listeners[event] = listener;
|
|
});
|
|
}
|
|
|
|
// update class name
|
|
var options = this.options;
|
|
var className = 'vis timeline rootpanel ' + options.orientation + (options.editable ? ' editable' : '');
|
|
if (options.className) className += ' ' + util.option.asString(className);
|
|
this.frame.className = className;
|
|
|
|
// repaint the child components
|
|
this._repaintChilds();
|
|
|
|
// update frame size
|
|
this._updateSize();
|
|
};
|
|
|
|
/**
|
|
* Watch for changes in the size of the frame. On resize, the Panel will
|
|
* automatically redraw itself.
|
|
* @private
|
|
*/
|
|
RootPanel.prototype._watch = function () {
|
|
var me = this;
|
|
|
|
this._unwatch();
|
|
|
|
var checkSize = function () {
|
|
var autoResize = me.getOption('autoResize');
|
|
if (!autoResize) {
|
|
// stop watching when the option autoResize is changed to false
|
|
me._unwatch();
|
|
return;
|
|
}
|
|
|
|
if (me.frame) {
|
|
// check whether the frame is resized
|
|
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
|
|
}
|
|
}
|
|
};
|
|
|
|
// TODO: automatically cleanup the event listener when the frame is deleted
|
|
util.addEventListener(window, 'resize', checkSize);
|
|
|
|
this.watchTimer = setInterval(checkSize, 1000);
|
|
};
|
|
|
|
/**
|
|
* Stop watching for a resize of the frame.
|
|
* @private
|
|
*/
|
|
RootPanel.prototype._unwatch = function () {
|
|
if (this.watchTimer) {
|
|
clearInterval(this.watchTimer);
|
|
this.watchTimer = undefined;
|
|
}
|
|
|
|
// TODO: remove event listener on window.resize
|
|
};
|