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.
89 lines
2.5 KiB
89 lines
2.5 KiB
var mousetrap = require('mousetrap');
|
|
var Hammer = require('../module/hammer');
|
|
var util = require('../util');
|
|
|
|
/**
|
|
* Turn an element into an activatable element.
|
|
* When not active, the element has a transparent overlay. When the overlay is
|
|
* clicked, the mode is changed to active.
|
|
* When active, the element is displayed with a blue border around it, and
|
|
* the interactive contents of the element can be used. When clicked outside
|
|
* the element, the elements mode is changed to inactive.
|
|
* @param {Element} container
|
|
* @constructor
|
|
*/
|
|
function Activator(container) {
|
|
this.active = false;
|
|
|
|
this.dom = {
|
|
container: container
|
|
};
|
|
|
|
this.dom.overlay = document.createElement('div');
|
|
this.dom.overlay.className = 'overlay';
|
|
|
|
this.dom.container.appendChild(this.dom.overlay);
|
|
|
|
this.hammer = Hammer(this.dom.overlay, {prevent_default: false});
|
|
this.hammer.on('tap', this._onTapOverlay.bind(this));
|
|
|
|
// attach a tap event to the window, in order to deactivate when clicking outside the timeline
|
|
this.windowHammer = Hammer(window, {prevent_default: false});
|
|
this.windowHammer.on('tap', this.deactivate.bind(this));
|
|
|
|
// mousetrap listener only bounded when active)
|
|
this.escListener = this.deactivate.bind(this);
|
|
}
|
|
|
|
// The currently active activator
|
|
Activator.current = null;
|
|
|
|
/**
|
|
* Destroy the activator. Cleans up all created DOM and event listeners
|
|
*/
|
|
Activator.prototype.destroy = function () {
|
|
this.deactivate();
|
|
|
|
// remove dom
|
|
this.dom.overlay.parentNode.removeChild(this.dom.overlay);
|
|
|
|
// cleanup hammer instances
|
|
this.hammer = null;
|
|
this.windowHammer = null;
|
|
};
|
|
|
|
/**
|
|
* Activate the element
|
|
* Overlay is hidden, element is decorated with a blue shadow border
|
|
*/
|
|
Activator.prototype.activate = function () {
|
|
// we allow only one active activator at a time
|
|
if (Activator.current) {
|
|
Activator.current.deactivate();
|
|
}
|
|
Activator.current = this;
|
|
|
|
this.active = true;
|
|
this.dom.overlay.style.display = 'none';
|
|
util.addClassName(this.dom.container, 'vis-active');
|
|
mousetrap.bind('esc', this.escListener);
|
|
};
|
|
|
|
/**
|
|
* Deactivate the element
|
|
* Overlay is displayed on top of the element
|
|
*/
|
|
Activator.prototype.deactivate = function () {
|
|
this.active = false;
|
|
this.dom.overlay.style.display = '';
|
|
util.removeClassName(this.dom.container, 'vis-active');
|
|
mousetrap.unbind('esc', this.escListener);
|
|
};
|
|
|
|
Activator.prototype._onTapOverlay = function (event) {
|
|
// activate the container
|
|
this.activate();
|
|
event.stopPropagation();
|
|
};
|
|
|
|
module.exports = Activator;
|