src/webui/www/private/scripts/progressbar.js

   1 /*
   2  * Bittorrent Client using Qt and libtorrent.
   3  * Copyright (C) 2008  Christophe Dumez <chris@qbittorrent.org>
   4  *
   5  * This program is free software; you can redistribute it and/or
   6  * modify it under the terms of the GNU General Public License
   7  * as published by the Free Software Foundation; either version 2
   8  * of the License, or (at your option) any later version.
   9  *
  10  * This program is distributed in the hope that it will be useful,
  11  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  * GNU General Public License for more details.
  14  *
  15  * You should have received a copy of the GNU General Public License
  16  * along with this program; if not, write to the Free Software
  17  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  18  *
  19  * In addition, as a special exception, the copyright holders give permission to
  20  * link this program with the OpenSSL project's "OpenSSL" library (or with
  21  * modified versions of it that use the same license as the "OpenSSL" library),
  22  * and distribute the linked executables. You must obey the GNU General Public
  23  * License in all respects for all of the code used other than "OpenSSL".  If you
  24  * modify file(s), you may extend this exception to your version of the file(s),
  25  * but you are not obligated to do so. If you do not wish to do so, delete this
  26  * exception statement from your version.
  27  */
  28
  29 "use strict";
  30
  31 window.qBittorrent ??= {};
  32 window.qBittorrent.ProgressBar ??= (() => {
  33     const exports = () => {
  34         return {
  35             ProgressBar: ProgressBar
  36         };
  37     };
  38
  39     let ProgressBars = 0;
  40     const ProgressBar = new Class({
  41         initialize: function(value, parameters) {
  42             const vals = {
  43                 "id": "progressbar_" + (ProgressBars++),
  44                 "value": [value, 0].pick(),
  45                 "width": 0,
  46                 "height": 0,
  47                 "darkbg": "var(--color-background-blue)",
  48                 "darkfg": "var(--color-text-white)",
  49                 "lightbg": "var(--color-background-default)",
  50                 "lightfg": "var(--color-text-default)"
  51             };
  52             if (parameters && (typeOf(parameters) === "object"))
  53                 Object.append(vals, parameters);
  54             if (vals.height < 12)
  55                 vals.height = 12;
  56             const obj = new Element("div", {
  57                 "id": vals.id,
  58                 "class": "progressbar_wrapper",
  59                 "styles": {
  60                     "border": "1px solid var(--color-border-default)",
  61                     "width": vals.width,
  62                     "height": vals.height,
  63                     "position": "relative",
  64                     "margin": "0 auto"
  65                 }
  66             });
  67             obj.vals = vals;
  68             obj.vals.value = [value, 0].pick();
  69             obj.vals.dark = new Element("div", {
  70                 "id": vals.id + "_dark",
  71                 "class": "progressbar_dark",
  72                 "styles": {
  73                     "width": vals.width,
  74                     "height": vals.height,
  75                     "background": vals.darkbg,
  76                     "color": vals.darkfg,
  77                     "position": "absolute",
  78                     "text-align": "center",
  79                     "left": 0,
  80                     "top": 0,
  81                     "line-height": vals.height
  82                 }
  83             });
  84             obj.vals.light = new Element("div", {
  85                 "id": vals.id + "_light",
  86                 "class": "progressbar_light",
  87                 "styles": {
  88                     "width": vals.width,
  89                     "height": vals.height,
  90                     "background": vals.lightbg,
  91                     "color": vals.lightfg,
  92                     "position": "absolute",
  93                     "text-align": "center",
  94                     "left": 0,
  95                     "top": 0,
  96                     "line-height": vals.height
  97                 }
  98             });
  99             obj.appendChild(obj.vals.dark);
 100             obj.appendChild(obj.vals.light);
 101             obj.getValue = ProgressBar_getValue;
 102             obj.setValue = ProgressBar_setValue;
 103             obj.setWidth = ProgressBar_setWidth;
 104             if (vals.width)
 105                 obj.setValue(vals.value);
 106             else
 107                 setTimeout('ProgressBar_checkForParent("' + obj.id + '")');
 108             return obj;
 109         }
 110     });
 111
 112     function ProgressBar_getValue() {
 113         return this.vals.value;
 114     }
 115
 116     function ProgressBar_setValue(value) {
 117         value = parseFloat(value);
 118         if (isNaN(value))
 119             value = 0;
 120         value = Math.min(Math.max(value, 0), 100);
 121         this.vals.value = value;
 122
 123         const displayedValue = `${value.round(1).toFixed(1)}%`;
 124         this.vals.dark.textContent = displayedValue;
 125         this.vals.light.textContent = displayedValue;
 126
 127         const r = parseInt((this.vals.width * (value / 100)), 10);
 128         this.vals.dark.style.clipPath = `inset(0 calc(100% - ${r}px) 0 0)`;
 129         this.vals.light.style.clipPath = `inset(0 0 0 ${r}px)`;
 130     }
 131
 132     function ProgressBar_setWidth(value) {
 133         if (this.vals.width !== value) {
 134             this.vals.width = value;
 135             this.style.width = `${value}px`;
 136             this.vals.dark.style.width = `${value}px`;
 137             this.vals.light.style.width = `${value}px`;
 138             this.setValue(this.vals.value);
 139         }
 140     }
 141
 142     function ProgressBar_checkForParent(id) {
 143         const obj = $(id);
 144         if (!obj)
 145             return;
 146         if (!obj.parentNode)
 147             return setTimeout('ProgressBar_checkForParent("' + id + '")', 100);
 148         obj.style.width = "100%";
 149         const w = obj.offsetWidth;
 150         obj.vals.dark.style.width = `${w}px`;
 151         obj.vals.light.style.width = `${w}px`;
 152         obj.vals.width = w;
 153         obj.setValue(obj.vals.value);
 154     }
 155
 156     return exports();
 157 })();
 158 Object.freeze(window.qBittorrent.ProgressBar);