cleaned up the tracer_manager/manager by refactoring all DOM code into its own module

js/dom/module_container.js

+'use strict';
+
+const create = () => {
+  const $container = $('<section class="module_wrapper">');
+  $('.module_container').append($container);
+  return $container;
+};
+
+module.exports = {
+  create
+};

js/dom/top_menu.js

@@ -18,8 +18,23 @@ const resetTopMenuButtons = () => {
   disableFlowControl();
 };
 
+const setInterval = (val) => {
+  $('#interval').val(interval);
+};
+
+const activateBtnPause = () => {
+  $('#btn_pause').addClass('active');
+};
+
+const deactivateBtnPause = () => {
+  $('#btn_pause').removeClass('active');
+};
+
 module.exports = {
   enableFlowControl,
   disableFlowControl,
-  resetTopMenuButtons
+  resetTopMenuButtons,
+  setInterval,
+  activateBtnPause,
+  deactivateBtnPause
 };

js/tracer_manager/manager.js

 'use strict';
 
+const ModuleContainer = require('../dom/module_container');
 const TopMenu = require('../dom/top_menu');
 
+const {
+  each,
+  extend,
+  grep
+} = $;
+
 const stepLimit = 1e6;
 
 const TracerManager = function () {
@@ -15,8 +22,7 @@ TracerManager.prototype = {
 
   add(tracer) {
 
-    const $container = $('<section class="module_wrapper">');
-    $('.module_container').append($container);
+    const $container = ModuleContainer.create();
 
     const capsule = {
       module: tracer.module,
@@ -35,7 +41,7 @@ TracerManager.prototype = {
     let selectedCapsule = null;
     let count = 0;
 
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.module === newTracer.module) {
         count++;
         if (!capsule.allocated) {
@@ -62,7 +68,7 @@ TracerManager.prototype = {
   deallocateAll() {
     this.order = 0;
     this.reset();
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       capsule.allocated = false;
     });
   },
@@ -70,7 +76,7 @@ TracerManager.prototype = {
   removeUnallocated() {
     let changed = false;
 
-    this.capsules = $.grep(this.capsules, (capsule) => {
+    this.capsules = grep(this.capsules, (capsule) => {
       let removed = !capsule.allocated;
 
       if (capsule.isNew || removed) {
@@ -93,7 +99,7 @@ TracerManager.prototype = {
       capsules
     } = this;
 
-    $.each(capsules, (i, capsule) => {
+    each(capsules, (i, capsule) => {
       let width = 100;
       let height = (100 / capsules.length);
       let top = height * capsule.order;
@@ -117,7 +123,7 @@ TracerManager.prototype = {
   },
 
   setInterval(interval) {
-    $('#interval').val(interval);
+    TopMenu.setInterval(interval);
   },
 
   reset() {
@@ -139,7 +145,7 @@ TracerManager.prototype = {
     } else {
       last = this.traces[len - 1];
     }
-    last.push($.extend(step, {
+    last.push(extend(step, {
       capsule
     }));
   },
@@ -154,13 +160,13 @@ TracerManager.prototype = {
     if (this.timer) {
       clearTimeout(this.timer);
     }
-    $('#btn_pause').addClass('active');
+    TopMenu.activateBtnPause();
   },
 
   resumeStep() {
     this.pause = false;
     this.step(this.traceIndex + 1);
-    $('#btn_pause').removeClass('active');
+    TopMenu.deactivateBtnPause();
   },
 
   step(i, options = {}) {
@@ -198,7 +204,7 @@ TracerManager.prototype = {
     }
 
     for (let i = 0; i < finalIndex; i++) {
-      this.step(i, $.extend(options, {
+      this.step(i, extend(options, {
         virtual: true
       }));
     }
@@ -225,7 +231,7 @@ TracerManager.prototype = {
 
   command(...args) {
     const functionName = args.shift();
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.allocated) {
         capsule.tracer.module.prototype[functionName].apply(capsule.tracer, args);
       }
@@ -234,7 +240,7 @@ TracerManager.prototype = {
 
   findOwner(container) {
     let selectedCapsule = null;
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.$container[0] === container) {
         selectedCapsule = capsule;
         return false;