ui/stats: Add sticky toggle

sogebot · Jun 12, 2018 · 737eddc · 737eddc
1 parent f623d76
commit 737eddc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/libs/panel.js b/libs/panel.js
@@ -98,6 +98,7 @@ function Panel () {
   global.configuration.register('theme', 'core.theme', 'string', 'light')
   global.configuration.register('percentage', 'core.percentage', 'bool', true)
   global.configuration.register('shortennumbers', 'core.no-response-bool', 'bool', true)
+  global.configuration.register('stickystats', 'core.no-response-bool', 'bool', false)
 
   this.addMenu({category: 'settings', name: 'systems', id: 'systems'})
 

diff --git a/public/index.html b/public/index.html
@@ -124,6 +124,10 @@ <h6 class="dropdown-header">UI</h6>
             <i class="far fa-check-square" aria-hidden="true"></i>
             Shorten long numbers: 10000 => 10k
           </button>
+          <button class="dropdown-item" id="sticky-btn" data-sticky="true" onclick="switchSticky()">
+            <i class="far fa-check-square" aria-hidden="true"></i>
+            Keep stats sticky on scroll
+          </button>
           <button class="dropdown-item" id="stats-btn" data-show-stats="true" onclick="switchStats()">
             <i class="far fa-check-square" aria-hidden="true"></i>
             <span data-lang="stats-panel.show">Quick stats</span>
@@ -487,6 +491,11 @@ <h2>
       btn.data('switchShortenNumbers', !data.shortennumber)
       switchShortenNumbers(false)
 
+      /* STICKY BUTTON */
+      var btn = $('#sticky-btn')
+      btn.data('switchSticky', !data.stickystats)
+      switchSticky(false)
+
       /* ME BUTTON */
       var btn = $('#me-btn')
       btn.data('sendWithMe', !data.sendWithMe)
@@ -1223,6 +1232,33 @@ <h2>
       }
     }
 
+    var switchSticky = function (update = true) {
+      var btn = $('#sticky-btn')
+      btn.data('switchSticky', _.isString(btn.data('switchSticky')) ? true : btn.data('switchSticky'))
+
+      if (btn.data('switchSticky')) {
+        btn.children('i').removeClass().addClass('far fa-square')
+      } else {
+        btn.children('i').removeClass().addClass('far fa-check-square')
+      }
+
+      btn.data('switchSticky', !btn.data('switchSticky'))
+
+      if (btn.data('switchSticky')) {
+        $('#quickStatsApp').addClass('sticky-top')
+        $('#quickStatsApp').css('top', '50px')
+      } else $('#quickStatsApp').removeClass('sticky-top')
+
+      if (update) {
+        console.debug('EMIT [saveConfiguration]', {
+          'stickystats': btn.data('switchSticky')
+        })
+        socket.emit('saveConfiguration', {
+          'stickystats': btn.data('switchSticky')
+        })
+      }
+    }
+
     var switchMe = function (update = true) {
       var btn = $('#me-btn')
       btn.data('sendWithMe', _.isString(btn.data('sendWithMe')) ? true : btn.data('sendWithMe'))