option to disable toptrends module

css/style.css

@@ -785,6 +785,7 @@ textarea.splited-post {
     opacity: 1;
 }
 
+.refresh-toptrends,
 .refresh-users,
 .view-all-users
 {
@@ -794,8 +795,9 @@ textarea.splited-post {
 }
 
 /***********************************
-**********TOP TRENDS****************
+************ TOP TRENDS ************
 ***********************************/
+
 ol.toptrends-list {
     margin: 0% 5% 5% 5%;
     padding: 5px;
@@ -803,9 +805,9 @@ ol.toptrends-list {
     border-top: solid 1px rgba( 69, 71, 77, .1 );
 }
 
-.toptrends h3
-{
-    margin: 5% 5% 2% 5%;
+.toptrends h3 {
+    margin: 5% 0% 2% 5%;
+    display: inline;
 }
 
 /***********************************

home.html

@@ -155,13 +155,8 @@
       <!-- WHO TO FOLLOW MODULE -->
       <div class="module who-to-follow"></div>
 
-      <!-- WHO TO FOLLOW MODULE -->
-      <div class="module toptrends">
-        <h3><span>Top Trends</span></h3>
-        <ol class="toptrends-list">
-          <!-- use "follow-suggestion-template" here -->
-        </ol>
-      </div>
+      <!-- TOP TRENDS MODULE -->
+      <div class="module toptrends"></div>
 
     </div>
   <!-- LADO ESQUERDO DE MÓDULOS END -->
@@ -215,7 +210,7 @@
 
     <!-- TEMPLATE DE WHO-TO-FOLLOW MODULE -->
     <div id="who-to-follow-template">
-        <h3>Who to Follow</h3>
+        <h3 class="label">Who to Follow</h3>
         <small>.</small>
         <a class="refresh-users">Refresh</a>
         <small>.</small>
@@ -225,6 +220,16 @@
         </ol>
     </div>
 
+    <!-- TEMPLATE DE TOP TRENDS MODULE -->
+    <div id="toptrends-template">
+        <h3 class="label">Top Trends</h3>
+        <small>.</small>
+        <a class="refresh-toptrends">Refresh</a>
+        <ol class="toptrends-list">
+          <!-- use "follow-suggestion-template" here -->
+        </ol>
+    </div>
+
     <!-- TEMPLATE DE WHO-TO-FOLLOW SUGGESTION -->
     <li id="follow-suggestion-template" class="twister-user">
       <div class="">

js/interface_home.js

@@ -118,16 +118,35 @@ var InterfaceFunctions = function()
                 });
         }
 
-        setTimeout(updateTrendingHashtags, 1000);
-        if ($.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0)
-            setInterval(updateTrendingHashtags, $.Options.getTopTrendsAutoUpdateTimerOpt()*1000);
+        if ($.Options.getTopTrendsOpt() === 'enable')
+            initTopTrends();
+        else
+            killTopTrends();
     }
 };
 
+function initTopTrends() {
+    var $tt = $('.module.toptrends');
+    if ($tt.length) {
+        $tt.html($('#toptrends-template').html()).show();
+        var $ttRefresh = $tt.find('.refresh-toptrends');
+            $ttRefresh.on('click', updateTrendingHashtags);
+            setTimeout(function() { $ttRefresh.click() }, 100);
+    }
+}
+
+function killTopTrends() {
+    var $tt = $('.module.toptrends');
+    if ($tt.length)
+        $tt.empty().hide();
+}
+
 function updateTrendingHashtags() {
+    var $ttl = $('.module.toptrends .toptrends-list');
+    if ($ttl.length) {
         twisterRpc('gettrendinghashtags', [10],
             function(args, ret) {
-            $('.toptrends-list').empty();
+                $ttl.empty();
                 //console.log('hashtags trends: '+ret);
                 for( var i = 0; i < ret.length; i++ ) {
                     if ($.Options.getFilterLangOpt() !== 'disable' && $.Options.getFilterLangForTopTrendsOpt())
@@ -149,7 +168,7 @@ function updateTrendingHashtags() {
                             }
                         }
 
-                    $('.toptrends-list').append($li);
+                        $ttl.append($li);
                     }
                 }
             }, {},
@@ -157,6 +176,9 @@ function updateTrendingHashtags() {
                 console.log('Error with gettrendinghashtags. Older twister daemon?');
             }, {}
         );
+        if ($.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0)
+            setTimeout(updateTrendingHashtags, $.Options.getTopTrendsAutoUpdateTimerOpt()*1000);
+    }
 };
 
 //***********************************************

js/interface_localization.js

@@ -3570,7 +3570,7 @@ var fixedLabels = [
   "button",
   ".postboard-news",
   ".post-area-new textarea",
-  ".refresh-users, .view-all-users",
+  ".refresh-toptrends, .refresh-users, .view-all-users",
   ".who-to-follow h3",
   ".userMenu-search-field",
   "a.dropdown-menu-item, a.direct-messages",

js/options.js

@@ -372,6 +372,25 @@ var TwisterOptions = function()
         });
     }
 
+    this.getTopTrendsOpt = function() {
+        return this.getOption('TopTrends', 'enable');
+    }
+
+    this.setTopTrendsOpt = function () {
+        function TopTrendsCfg() {
+            if ($.Options.getTopTrendsOpt() === 'enable')
+                $('#TopTrendsCont').show();
+            else
+                $('#TopTrendsCont').hide();
+        }
+        $('#TopTrends').val(this.getTopTrendsOpt());
+        TopTrendsCfg();
+        $('#TopTrends').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            TopTrendsCfg();
+        });
+    }
+
     this.getTopTrendsAutoUpdateOpt = function() {
         return this.getOption('TopTrendsAutoUpdate', 'enable');
     }
@@ -601,6 +620,7 @@ var TwisterOptions = function()
         this.setUseProxyOpt();
         this.setUseProxyForImgOnlyOpt();
         this.setTopTrendsAutoUpdateOpt();
+        this.setTopTrendsOpt();
         this.setTopTrendsAutoUpdateTimerOpt();
         this.setWhoToFollowOpt();
         this.setSplitPostsOpt();

options.html

@@ -302,8 +302,15 @@
           </div>
           <div class="module">
             <p class="label label-h"> Top Trends </p>
-            <div id="TopTrendsAutoUpdateCont" class="container">
+            <div class="container">
               <form>
+                <p>
+                  <select id="TopTrends">
+                    <option value="enable">Enable</option>
+                    <option value="disable">Disable</option>
+                  </select>
+                </p>
+                <div id="TopTrendsCont" class="container">
                   <p class="label">Auto updating</p>
                   <select id="TopTrendsAutoUpdate" class="container">
                     <option value="enable">Enable</option>
@@ -312,6 +319,7 @@
                   <div id="TopTrendsAutoUpdateOpt" class="container">
                     <input type="text" id="TopTrendsAutoUpdateTimer" maxlength="6" size="6"/> <span class="label">second(s)</span>
                   </div>
+                </div>
               </form>
             </div>
           </div>

theme_calm/css/style.css

@@ -969,6 +969,7 @@ textarea.splited-post {
     text-decoration: none;
 }
 
+.refresh-toptrends,
 .refresh-users,
 .view-all-users
 {
@@ -979,14 +980,16 @@ textarea.splited-post {
 }
 
 /***********************************
-********************* TOP TRENDS
+************ TOP TRENDS ************
 ***********************************/
+
 .module.toptrends {
     margin-top: 10px;
 }
 .module.toptrends h3 {
     margin: 5px 0 5px 10px;
     font: 14px 'Open Sans', sans-serif;
+    display: inline;
 }
 .module.toptrends ol {
     margin: 0 0 10px 10px;

theme_nin/css/style.css

@@ -56,7 +56,7 @@
   font-style: normal;
 }
 /* line 64, ../sass/_fonts.sass */
-[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
+[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
@@ -198,7 +198,7 @@
 
 /* '' */
 /* line 183, ../sass/_fonts.sass */
-.icon-arrows:before, .refresh-users:before {
+.icon-arrows:before, .refresh-toptrends:before, .refresh-users:before {
   content: "";
 }
 
@@ -1823,7 +1823,7 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
     width: 90%;
 }
 
-.options #filterLangListCont div,.options #TopTrendsAutoUpdateCont div {
+.options #filterLangListCont div,.options #TopTrendsCont div {
     float: none;
     padding: 0px 4px;
 }
@@ -2449,7 +2449,7 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 }
 
 /* line 499, ../sass/style.sass */
-.refresh-users {
+.refresh-toptrends, .refresh-users {
   color: #66686B;
   cursor: pointer;
   font-size: 11px;
@@ -2479,13 +2479,16 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 }
 
 /* line 527, ../sass/style.sass */
-.refresh-users:hover, .view-all-users:hover {
+.refresh-toptrends:hover, .refresh-users:hover, .view-all-users:hover {
   color: #B4C669;
   text-decoration: none;
   background-color: transparent;
 }
 
 /***********TOP TRENDS************** */
+.toptrends h3 {
+  float: left;
+}
 /* line 534, ../sass/style.sass */
 ol.toptrends-list {
   margin: 0;

theme_nin/sass/style.sass

@@ -516,7 +516,7 @@ textarea.splited-post
 .twister-user-remove:hover
   opacity: 1
 
-.refresh-users
+.refresh-toptrends, .refresh-users
   @extend .icon-arrows
   @extend .extend-icon
   color: $main-color-dark
@@ -544,13 +544,17 @@ textarea.splited-post
   margin: 0 0 0 15px
   position: relative
 
-.refresh-users:hover, .view-all-users:hover
+.refresh-toptrends:hover, .refresh-users:hover, .view-all-users:hover
   color: $main-color-color
   text-decoration: none
   background-color: transparent
 
 /***********TOP TRENDS***************/
 
+.toptrends
+  h3
+    float: left
+
 ol.toptrends-list
   margin: 0
   margin-bottom: 10px
@@ -1096,7 +1100,7 @@ ol.toptrends-list
   #filterLangList
     width: 90%
 
-  #filterLangListCont div, #TopTrendsAutoUpdateCont div
+  #filterLangListCont div, #TopTrendsCont div
     float: none
     padding: 0px 4px