Push a WIP edit-design plugin with a basic modal dialog

Resources/Plugins/edit-design/.meta

@@ -0,0 +1,17 @@
+[name]
+Edit layout & design
+
+[description]
+- Adds new layout and design configuration, which can be accessed via Settings - Edit layout & design
+
+[author]
+chylex
+
+[version]
+1.0
+
+[website]
+https://tweetduck.chylex.com
+
+[requires]
+1.5.3

Resources/Plugins/edit-design/browser.js

@@ -0,0 +1,123 @@
+enabled(){
+  // elements & data
+  this.css = window.TDPF_createCustomStyle(this);
+  
+  this.htmlModal = null;
+  this.config = null;
+  
+  this.defaultConfig = {
+    avatarRadius: 10
+  };
+  
+  // modal dialog loading
+  $TDP.readFileRoot(this.$token, "modal.html").then(contents => {
+    this.htmlModal = contents;
+  }).catch(err => {
+    $TD.alert("error", "Problem loading data for the design edit plugin: "+err.message);
+  });
+  
+  // configuration
+  const configFile = "config.json";
+  
+  var loadConfigObject = obj => {
+    this.config = obj;
+    this.reinjectAll();
+  };
+  
+  $TDP.checkFileExists(this.$token, configFile).then(exists => {
+    if (!exists){
+      loadConfigObject(this.defaultConfig);
+    }
+    else{
+      $TDP.readFile(this.$token, configFile, true).then(contents => {
+        try{
+          loadConfigObject($.extend(this.defaultConfig, JSON.parse(contents)));
+        }catch(err){
+          loadConfigObject(this.defaultConfig);
+        }
+      }).catch(err => {
+        loadConfigObject(this.defaultConfig);
+        $TD.alert("error", "Problem loading configuration for the design edit plugin: "+err.message);
+      });
+    }
+  });
+  
+  this.saveConfig = () => {
+    $TDP.writeFile(this.$token, configFile, JSON.stringify(this.config)).catch(err => {
+      $TD.alert("error", "Problem saving configuration for the design edit plugin: "+err.message);
+    });
+  };
+  
+  // settings click event
+  this.onSettingsMenuClickedEvent = () => {
+    if (this.htmlModal === null || this.config === null){
+      return;
+    }
+    
+    setTimeout(() => {
+      let menu = $(".js-dropdown-content").children("ul").first();
+      if (menu.length === 0)return;
+      
+      let itemTD = menu.children("[data-std]").first();
+      if (itemTD.length === 0)return;
+      
+      if (!itemTD.prev().hasClass("drp-h-divider")){
+        itemTD.before('<li class="drp-h-divider"></li>');
+      }
+      
+      let itemEditDesign = $('<li class="is-selectable"><a href="#" data-action>Edit layout &amp; design</a></li>');
+      itemTD.after(itemEditDesign);
+      
+      itemEditDesign.on("click", "a", function(){
+        new customDesignModal();
+      });
+      
+      itemEditDesign.hover(function(){
+        $(this).addClass("is-selected");
+      }, function(){
+        $(this).removeClass("is-selected");
+      });
+    }, 1);
+  };
+  
+  // modal dialog setup
+  var customDesignModal = TD.components.BaseModal.extend(function(){
+    this.setAndShowContainer($("#td-design-plugin-modal"), false);
+  }).methods({
+    _render: () => $(this.htmlModal),
+    destroy: function(){
+      $("#td-design-plugin-modal").hide();
+      this.supr();
+    }
+  });
+  
+  // css and layout injection
+  this.resetLayout = function(){
+  };
+  
+  this.resetDesign = function(){
+    for(let index = this.css.element.cssRules.length; index >= 0; index--){
+      this.css.element.deleteRule(index);
+    }
+  };
+  
+  this.reinjectAll = function(){
+    this.resetLayout();
+    this.resetDesign();
+    
+    // TODO
+  };
+}
+
+ready(){
+  $("[data-action='settings-menu']").on("click", this.onSettingsMenuClickedEvent);
+  $(".js-app").append('<div id="td-design-plugin-modal" class="js-modal settings-modal ovl scroll-v scroll-styled-v"></div>');
+}
+
+disabled(){
+  this.css.remove();
+  this.resetLayout();
+  
+  $("[data-action='settings-menu']").off("click", this.onSettingsMenuClickedEvent);
+  $("#td-design-plugin-modal").remove();
+}

Resources/Plugins/edit-design/modal.html

@@ -0,0 +1,38 @@
+<div class="js-modal-panel mdl s-tall-fixed is-inverted-dark">
+  <header class="js-mdl-header mdl-header js-drag-handle">
+    <h3 class="mdl-header-title js-header-title">TweetDuck - Layout &amp; Design</h3>
+    <a href="#" class="mdl-dismiss js-dismiss link-normal-dark">
+      <i class="icon icon-close"></i>
+    </a>
+  </header>
+  <div class="mdl-inner">
+    <div class="mdl-content js-mdl-content horizontal-flow-container">
+      
+    </div>
+    <footer class="padding-vxl txt-center">
+      <button class="js-dismiss btn btn-positive pull-right">
+        <i class="icon icon-check icon-small padding-rs"></i>
+        <span class="label">Done</span>
+      </button>
+    </footer>
+  </div>
+</div>
+
+<style type="text/css">
+  .td-modal-inner-cols {
+    padding: 0 6px;
+  }
+  
+  .td-modal-inner-cols .l-column {
+    padding: 15px 9px;
+    box-sizing: border-box;
+  }
+  
+  .td-modal-inner-full {
+    padding: 15px;
+  }
+  
+  .td-modal-inner-full .txt-center {
+    margin-bottom: 10px;
+  }
+</style>