Make design-revert plugin features configurable

Closes #107

Resources/Plugins/design-revert/.meta

@@ -2,6 +2,7 @@
 Revert TweetDeck design changes
 
 [description]
+- Individually configurable options to revert and tweak TweetDeck design changes
 - Moves action menu to the right and hides it by default
 - Reverts interactive texts around tweets (such as 'Details' or 'Conversation')
 
@@ -9,10 +10,16 @@ Revert TweetDeck design changes
 chylex
 
 [version]
-1.1
+1.2
 
 [website]
 https://tweetduck.chylex.com
 
+[configfile]
+configuration.js
+
+[configdefault]
+configuration.default.js
+
 [requires]
 1.4.1

Resources/Plugins/design-revert/browser.js

@@ -1,34 +1,42 @@
 enabled(){
-  // add a stylesheet to change tweet actions
   this.css = window.TDPF_createCustomStyle(this);
-  this.css.insert(".tweet-actions { float: right !important; width: auto !important; }");
-  this.css.insert(".tweet-action { opacity: 0; }");
-  this.css.insert(".is-favorite .tweet-action, .is-retweet .tweet-action { opacity: 0.5; visibility: visible !important; }");
-  this.css.insert(".tweet:hover .tweet-action, .is-favorite .tweet-action[rel='favorite'], .is-retweet .tweet-action[rel='retweet'] { opacity: 1; visibility: visible !important; }");
-  this.css.insert(".tweet-actions > li:nth-child(4) { margin-right: 2px !important; }");
-
-  // revert small links around the tweet
   this.prevFooterMustache = TD.mustaches["status/tweet_single_footer.mustache"];
-
+  
-  var footerLayout = TD.mustaches["status/tweet_single_footer.mustache"];
+  // load configuration
-  footerLayout = footerLayout.replace('txt-mute txt-size--12', 'txt-mute txt-small');
+  window.TDPF_loadConfigurationFile(this, "configuration.js", "configuration.default.js", config => {
-  footerLayout = footerLayout.replace('{{#inReplyToID}}', '{{^inReplyToID}} <a class="pull-left margin-txs txt-mute txt-small is-vishidden-narrow" href="#" rel="viewDetails">{{_i}}Details{{/i}}</a> <a class="pull-left margin-txs txt-mute txt-small is-vishidden is-visshown-narrow" href="#" rel="viewDetails">{{_i}}Open{{/i}}</a> {{/inReplyToID}} {{#inReplyToID}}');
+    if (config.hideTweetActions){
-  footerLayout = footerLayout.replace('<span class="link-complex-target"> {{_i}}View Conversation{{/i}}', '<i class="icon icon-conversation icon-small-context"></i> <span class="link-complex-target"> <span class="is-vishidden-wide is-vishidden-narrow">{{_i}}View{{/i}}</span> <span class="is-vishidden is-visshown-wide">{{_i}}Conversation{{/i}}</span>');
+      this.css.insert(".tweet-action { opacity: 0; }");
-  TD.mustaches["status/tweet_single_footer.mustache"] = footerLayout;
+      this.css.insert(".is-favorite .tweet-action, .is-retweet .tweet-action { opacity: 0.5; visibility: visible !important; }");
-
+      this.css.insert(".tweet:hover .tweet-action, .is-favorite .tweet-action[rel='favorite'], .is-retweet .tweet-action[rel='retweet'] { opacity: 1; visibility: visible !important; }");
+    }
+    
+    if (config.moveTweetActionsToRight){
+      this.css.insert(".tweet-actions { float: right !important; width: auto !important; }");
+      this.css.insert(".tweet-actions > li:nth-child(4) { margin-right: 2px !important; }");
+    }
+    
+    if (config.revertConversationLinks){
+      var footer = TD.mustaches["status/tweet_single_footer.mustache"];
+      footer = footer.replace('txt-mute txt-size--12', 'txt-mute txt-small');
+      footer = footer.replace('{{#inReplyToID}}', '{{^inReplyToID}} <a class="pull-left margin-txs txt-mute txt-small is-vishidden-narrow" href="#" rel="viewDetails">{{_i}}Details{{/i}}</a> <a class="pull-left margin-txs txt-mute txt-small is-vishidden is-visshown-narrow" href="#" rel="viewDetails">{{_i}}Open{{/i}}</a> {{/inReplyToID}} {{#inReplyToID}}');
+      footer = footer.replace('<span class="link-complex-target"> {{_i}}View Conversation{{/i}}', '<i class="icon icon-conversation icon-small-context"></i> <span class="link-complex-target"> <span class="is-vishidden-wide is-vishidden-narrow">{{_i}}View{{/i}}</span> <span class="is-vishidden is-visshown-wide">{{_i}}Conversation{{/i}}</span>');
+      TD.mustaches["status/tweet_single_footer.mustache"] = footer;
+    }
+    
+    if (config.moveTweetActionsToRight){
+      $(document).on("uiShowActionsMenu", this.uiShowActionsMenuEvent);
+    }
+  });
+  
   // fix layout for right-aligned actions menu
   this.uiShowActionsMenuEvent = function(){
     $(".js-dropdown.pos-r").toggleClass("pos-r pos-l");
   };
 }
 
-ready(){
-  $(document).on("uiShowActionsMenu", this.uiShowActionsMenuEvent);
-}
-
 disabled(){
   this.css.remove();
+  TD.mustaches["status/tweet_single_footer.mustache"] = this.prevFooterMustache;
   
   $(document).off("uiShowActionsMenu", this.uiShowActionsMenuEvent);
-  TD.mustaches["status/tweet_single_footer.mustache"] = this.prevFooterMustache;
+}
-}

Resources/Plugins/design-revert/configuration.default.js

@@ -0,0 +1,17 @@
+{
+  /*
+   * Hides the action bar below each tweet.
+   * The action bar fully appears when the mouse is over the tweet, or at half the opacity when the tweet is liked/retweeted.
+   */
+  hideTweetActions: true,
+  
+  /*
+   * Moves the action bar to the right side of the tweet.
+   */
+  moveTweetActionsToRight: true,
+  
+  /*
+   * Reverts design changes to the 'View Conversation' and 'Details' links.
+   */
+  revertConversationLinks: true
+}