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{
+  constructor(parsedObj){
     var me = this;
     
     me.meta = parsedObj.meta;
+    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 || {};
+  };
 
-  me.data = parsedObj.data;
+  static isValid(parsedObj){
-};
-
-SAVEFILE.isValid = function(parsedObj){
     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" };
-};
+  }
 
-SAVEFILE.prototype.getChannels = function(){
+  getChannels(){
     return this.meta.channels;
-};
+  }
 
-SAVEFILE.prototype.getChannelById = function(channel){
+  getChannelById(channel){
     return this.meta.channels[channel] || { "id": channel, "name": channel };
-};
+  }
 
-SAVEFILE.prototype.getUsers = function(){
+  getUsers(){
     return this.meta.users;
-};
+  }
 
-SAVEFILE.prototype.getUser = function(index){
+  getUser(index){
     return this.meta.users[this.meta.userindex[index]] || { "name": "<unknown>" };
-};
+  }
 
-SAVEFILE.prototype.getUserById = function(user){
+  getUserById(user){
     return this.meta.users[user] || { "name": user };
-};
+  }
 
-SAVEFILE.prototype.getUserIndex = function(user){
+  getUserIndex(user){
     return this.meta.userindex.indexOf(user);
-};
+  }
 
-SAVEFILE.prototype.getMessages = function(channel){
+  getMessages(channel){
     return this.data[channel] || {};
-};
+  }
+}

src/renderer/scr.template.js

@@ -1,10 +1,11 @@
 var TEMPLATE_REGEX = /{([^{}]+?)}/g;
 
-var TEMPLATE = function(contents){
+class TEMPLATE{
+  constructor(contents){
     this.contents = contents;
-};
+  };
 
-TEMPLATE.prototype.apply = function(obj, processor){
+  apply(obj, processor){
     return this.contents.replace(TEMPLATE_REGEX, (full, match) => {
       var value = match.split(".").reduce((o, property) => o[property], obj);
       
@@ -15,4 +16,5 @@ TEMPLATE.prototype.apply = function(obj, processor){
       
       return DOM.escapeHTML(value);
     });
-};
+  }
+}