Refactor viewer (template literals, classes, minor refactoring)

src/renderer/scr.dom.js

@@ -30,11 +30,6 @@ var DOM = (function(){
      */
     fcls: (cls, parent) => (parent || document).getElementsByClassName(cls)[0],
     
-    /*
-     * Returns the first child element that has the specified tag. Parent defaults to the entire document.
-     */
-    ftag: (tag, parent) => (parent || document).getElementsByTagName(tag)[0],
-    
     /*
      * Creates an element, adds it to the DOM, and returns it.
      */

src/renderer/scr.gui.js

@@ -32,10 +32,9 @@ var GUI = (function(){
   // -------------
   
   var showSettingsModal = function(){
-    showModal(560, [
+    showModal(560, `
-      "<label><input id='dht-cfg-imgpreviews' type='checkbox'> Image Previews</label><br>",
+<label><input id='dht-cfg-imgpreviews' type='checkbox'> Image Previews</label><br>
-      "<label><input id='dht-cfg-formatting' type='checkbox'> Message Formatting</label><br>"
+<label><input id='dht-cfg-formatting' type='checkbox'> Message Formatting</label><br>`);
-    ].join(""));
     
     var setupCheckBox = function(id, settingName){
       var ele = DOM.id(id);
@@ -50,16 +49,11 @@ var GUI = (function(){
   var showInfoModal = function(){
     var linkGH = "https://github.com/chylex/Discord-History-Tracker";
     
-    showModal(560, [
+    showModal(560, `
-      "<p>Discord History Tracker is developed by <a href='https://chylex.com'>chylex</a> as an <a href='"+linkGH+"/blob/master/LICENSE.md'>open source</a> project.</p>",
+<p>Discord History Tracker is developed by <a href='https://chylex.com'>chylex</a> as an <a href='${linkGH}/blob/master/LICENSE.md'>open source</a> project.</p>
-      "<sub>BETA v.7, released 16 Feb 2018</sub>",
+<sub>BETA v.7, released 16 Feb 2018</sub>
-      "<p>Please, report any issues and suggestions to the <a href='"+linkGH+"/issues'>tracker</a>. If you want to support the development, please spread the word and consider <a href='https://www.patreon.com/chylex'>becoming a patron</a>. Any support is appreciated!</p>",
+<p>Please, report any issues and suggestions to the <a href='${linkGH}/issues'>tracker</a>. If you want to support the development, please spread the word and consider <ref='https://www.patreon.com/chylex'>becoming a patron</a>. Any support is appreciated!</p>
-      "<p>",
+<p><a href='${linkGH}/issues'>Issue Tracker</a> &nbsp;&mdash;&nbsp; <a href='${linkGH}'>GitHub Repository</a> &nbsp;&mdash;&nbsp; <a href='https://twitter.com/chylexmc'>Developer's Twitter</a></p>`);
-      "<a href='"+linkGH+"/issues'>Issue Tracker</a> &nbsp;&mdash;&nbsp; ",
-      "<a href='"+linkGH+"'>GitHub Repository</a> &nbsp;&mdash;&nbsp; ",
-      "<a href='https://twitter.com/chylexmc'>Developer's Twitter</a>",
-      "</p>"
-    ].join(""));
   };
   
   return {

src/renderer/scr.processor.js

@@ -1,5 +1,4 @@
-var PROCESSOR = function(messageObject){
+var PROCESSOR = {};
-};
 
 // ------------------------
 // Global filter generators

src/renderer/scr.savefile.js

@@ -1,47 +1,49 @@
-var SAVEFILE = function(parsedObj){
+class SAVEFILE{
-  var me = this;
+  constructor(parsedObj){
+    var me = this;
     
-  me.meta = parsedObj.meta;
+    me.meta = parsedObj.meta;
-  me.meta.users = me.meta.users || {};
+    me.data = parsedObj.data;
-  me.meta.userindex = me.meta.userindex || [];
-  me.meta.servers = me.meta.servers || [];
-  me.meta.channels = me.meta.channels || {};
     
-  me.data = parsedObj.data;
+    me.meta.users = me.meta.users || {};
-};
+    me.meta.userindex = me.meta.userindex || [];
+    me.meta.servers = me.meta.servers || [];
+    me.meta.channels = me.meta.channels || {};
+  };
 
-SAVEFILE.isValid = function(parsedObj){
+  static isValid(parsedObj){
-  return parsedObj && typeof parsedObj.meta === "object" && typeof parsedObj.data === "object";
+    return parsedObj && typeof parsedObj.meta === "object" && typeof parsedObj.data === "object";
-};
+  };
 
-SAVEFILE.prototype.getServer = function(index){
+  getServer(index){
-  return this.meta.servers[index] || { "name": "<unknown>", "type": "ERROR" };
+    return this.meta.servers[index] || { "name": "<unknown>", "type": "ERROR" };
-};
+  }
 
-SAVEFILE.prototype.getChannels = function(){
+  getChannels(){
-  return this.meta.channels;
+    return this.meta.channels;
-};
+  }
 
-SAVEFILE.prototype.getChannelById = function(channel){
+  getChannelById(channel){
-  return this.meta.channels[channel] || { "id": channel, "name": channel };
+    return this.meta.channels[channel] || { "id": channel, "name": channel };
-};
+  }
 
-SAVEFILE.prototype.getUsers = function(){
+  getUsers(){
-  return this.meta.users;
+    return this.meta.users;
-};
+  }
 
-SAVEFILE.prototype.getUser = function(index){
+  getUser(index){
-  return this.meta.users[this.meta.userindex[index]] || { "name": "<unknown>" };
+    return this.meta.users[this.meta.userindex[index]] || { "name": "<unknown>" };
-};
+  }
 
-SAVEFILE.prototype.getUserById = function(user){
+  getUserById(user){
-  return this.meta.users[user] || { "name": user };
+    return this.meta.users[user] || { "name": user };
-};
+  }
 
-SAVEFILE.prototype.getUserIndex = function(user){
+  getUserIndex(user){
-  return this.meta.userindex.indexOf(user);
+    return this.meta.userindex.indexOf(user);
-};
+  }
 
-SAVEFILE.prototype.getMessages = function(channel){
+  getMessages(channel){
-  return this.data[channel] || {};
+    return this.data[channel] || {};
-};
+  }
+}

src/renderer/scr.template.js

@@ -1,18 +1,20 @@
 var TEMPLATE_REGEX = /{([^{}]+?)}/g;
 
-var TEMPLATE = function(contents){
+class TEMPLATE{
-  this.contents = contents;
+  constructor(contents){
-};
+    this.contents = contents;
+  };
 
-TEMPLATE.prototype.apply = function(obj, processor){
+  apply(obj, processor){
-  return this.contents.replace(TEMPLATE_REGEX, (full, match) => {
+    return this.contents.replace(TEMPLATE_REGEX, (full, match) => {
-    var value = match.split(".").reduce((o, property) => o[property], obj);
+      var value = match.split(".").reduce((o, property) => o[property], obj);
       
-    if (processor){
+      if (processor){
-      var updated = processor(match, value);
+        var updated = processor(match, value);
-      return typeof updated === "undefined" ? DOM.escapeHTML(value) : updated;
+        return typeof updated === "undefined" ? DOM.escapeHTML(value) : updated;
-    }
+      }
       
-    return DOM.escapeHTML(value);
+      return DOM.escapeHTML(value);
-  });
+    });
-};
+  }
+}