JAVASCRIPT 31
Timeline.js Guest on 23rd April 2021 03:16:01 PM
  1. (function () {
  2.     'use strict';
  3.  
  4.     var on = function (element, event, handler) {
  5.         if (element instanceof NodeList) {
  6.             for (var i = 0, len = element.length; i < len; i++) {
  7.                 element[i].addEventListener(event, handler, false);
  8.             }
  9.  
  10.             return;
  11.         }
  12.         if (!(element instanceof Array)) {
  13.             element = [element];
  14.         }
  15.         for (var i in element) {
  16.             if (typeof element[i].addEventListener !== 'function') {
  17.                 continue;
  18.             }
  19.             element[i].addEventListener(event, handler, false);
  20.         }
  21.     };
  22.  
  23.     var Timeline = function (options) {
  24.         this.options = options;
  25.         var self = this;
  26.         this.init = function () {
  27.             if (this.options.$focus) {
  28.                 this.options.$focus.focus();
  29.                 delete this.options.$focus;
  30.             }
  31.             var links = document.querySelectorAll('.debug-timeline-panel__item a');
  32.  
  33.             for (var i = 0, len = links.length; i < len; i++) {
  34.                 new Tooltip(links[i]);
  35.  
  36.                 on(link, 'show.bs.tooltip', function() {
  37.                     if (this.hasAttribute('data-memory')) {
  38.                         var data = this.dataset.memory;
  39.                         self.options.$memory.textContent = data[0];
  40.                         self.options.$memory.style.bottom = data[1] + '%';
  41.                     }
  42.                 });
  43.  
  44.             }
  45.             return self;
  46.         };
  47.         this.setFocus = function ($elem) {
  48.             this.options.$focus = $elem;
  49.             return $elem;
  50.         };
  51.  
  52.         on(document, 'pjax:success', function () {
  53.             self.init();
  54.         });
  55.  
  56.         on(self.options.$header, 'dblclick', function () {
  57.             self.options.$timeline.classList.toggle('inline');
  58.         });
  59.         on(self.options.$header, 'click', function (e) {
  60.             if (e.target.tagName.toLowerCase() === 'button') {
  61.                 self.options.$timeline.classList.toggle('inline');
  62.             }
  63.         });
  64.  
  65.         on(self.options.$search, 'change', function () {
  66.             self.setFocus(this);
  67.             this.form.submit();
  68.         });
  69.  
  70.         this.init();
  71.     };
  72.  
  73.     (new Timeline({
  74.         '$timeline': document.querySelector('.debug-timeline-panel'),
  75.         '$header': document.querySelector('.debug-timeline-panel__header'),
  76.         '$search': document.querySelectorAll('.debug-timeline-panel__search input'),
  77.         '$memory': document.querySelector('.debug-timeline-panel__memory .scale')
  78.     }));
  79. })();

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.