fix(click-to-use): fix errors and styling (#132)

Closes #121.

lib/shared/Activator.css

@@ -1,9 +1,9 @@
-.vis .overlay {
+.vis-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
 
   /* Must be displayed above for example selected Timeline items */
   z-index: 10;

lib/shared/Activator.js

@@ -31,23 +31,22 @@ function Activator(container) {
   this.hammer.on('tap', this._onTapOverlay.bind(this));
 
   // block all touch events (except tap)
-  var me = this;
   var events = [
     'tap', 'doubletap', 'press',
     'pinch',
     'pan', 'panstart', 'panmove', 'panend'
   ];
-  events.forEach(function (event) {
-    me.hammer.on(event, function (event) {
-      event.stopPropagation();
+  events.forEach((event) => {
+    this.hammer.on(event, (event) => {
+      event.srcEvent.stopPropagation();
     });
   });
 
   // attach a click event to the window, in order to deactivate when clicking outside the timeline
   if (document && document.body) {
-    this.onClick = function (event) {
+    this.onClick = (event) => {
       if (!_hasParent(event.target, container)) {
-        me.deactivate();
+        this.deactivate();
       }
     };
     document.body.addEventListener('click', this.onClick);
@@ -121,7 +120,7 @@ Activator.prototype.activate = function () {
  */
 Activator.prototype.deactivate = function () {
   this.active = false;
-  this.dom.overlay.style.display = '';
+  this.dom.overlay.style.display = 'block';
   util.removeClassName(this.dom.container, 'vis-active');
   this.keycharm.unbind('esc', this.escListener);
 
@@ -137,7 +136,7 @@ Activator.prototype.deactivate = function () {
 Activator.prototype._onTapOverlay = function (event) {
   // activate the container
   this.activate();
-  event.stopPropagation();
+  event.srcEvent.stopPropagation();
 };
 
 /**