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: (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
  57             const obj = document.createElement("div");
  58             obj.id = vals.id;
  59             obj.className = "progressbar_wrapper";
  60             obj.style.border = "1px solid var(--color-border-default)";
  61             obj.style.boxSizing = "content-box";
  62             obj.style.width = `${vals.width}px`;
  63             obj.style.height = `${vals.height}px`;
  64             obj.style.position = "relative";
  65             obj.style.margin = "0 auto";
  66             obj.vals = vals;
  67             obj.vals.value = [value, 0].pick();
  68
  69             const dark = document.createElement("div");
  70             dark.id = `${vals.id}_dark`;
  71             dark.className = "progressbar_dark";
  72             dark.style.width = `${vals.width}px`;
  73             dark.style.height = `${vals.height}px`;
  74             dark.style.background = vals.darkbg;
  75             dark.style.boxSizing = "content-box";
  76             dark.style.color = vals.darkfg;
  77             dark.style.position = "absolute";
  78             dark.style.textAlign = "center";
  79             dark.style.left = "0";
  80             dark.style.top = "0";
  81             dark.style.lineHeight = `${vals.height}px`;
  82
  83             obj.vals.dark = dark;
  84
  85             const light = document.createElement("div");
  86             light.id = `${vals.id}_light`;
  87             light.className = "progressbar_light";
  88             light.style.width = `${vals.width}px`;
  89             light.style.height = `${vals.height}px`;
  90             light.style.background = vals.lightbg;
  91             light.style.boxSizing = "content-box";
  92             light.style.color = vals.lightfg;
  93             light.style.position = "absolute";
  94             light.style.textAlign = "center";
  95             light.style.left = "0";
  96             light.style.top = "0";
  97             light.style.lineHeight = `${vals.height}px`;
  98
  99             obj.vals.light = light;
 100
 101             obj.appendChild(obj.vals.dark);
 102             obj.appendChild(obj.vals.light);
 103             obj.getValue = ProgressBar_getValue;
 104             obj.setValue = ProgressBar_setValue;
 105             obj.setWidth = ProgressBar_setWidth;
 106             if (vals.width)
 107                 obj.setValue(vals.value);
 108             else
 109                 setTimeout(ProgressBar_checkForParent, 0, obj.id);
 110             return obj;
 111         }
 112     });
 113
 114     function ProgressBar_getValue() {
 115         return this.vals.value;
 116     }
 117
 118     function ProgressBar_setValue(value) {
 119         value = parseFloat(value);
 120         if (isNaN(value))
 121             value = 0;
 122         value = Math.min(Math.max(value, 0), 100);
 123         this.vals.value = value;
 124
 125         const displayedValue = `${value.round(1).toFixed(1)}%`;
 126         this.vals.dark.textContent = displayedValue;
 127         this.vals.light.textContent = displayedValue;
 128
 129         const r = Number(this.vals.width * (value / 100));
 130         this.vals.dark.style.clipPath = `inset(0 calc(100% - ${r}px) 0 0)`;
 131         this.vals.light.style.clipPath = `inset(0 0 0 ${r}px)`;
 132     }
 133
 134     function ProgressBar_setWidth(value) {
 135         if (this.vals.width !== value) {
 136             this.vals.width = value;
 137             this.style.width = `${value}px`;
 138             this.vals.dark.style.width = `${value}px`;
 139             this.vals.light.style.width = `${value}px`;
 140             this.setValue(this.vals.value);
 141         }
 142     }
 143
 144     const ProgressBar_checkForParent = (id) => {
 145         const obj = $(id);
 146         if (!obj)
 147             return;
 148         if (!obj.parentNode)
 149             return setTimeout(ProgressBar_checkForParent, 100, id);
 150         obj.style.width = "100%";
 151         const w = obj.offsetWidth;
 152         obj.vals.dark.style.width = `${w}px`;
 153         obj.vals.light.style.width = `${w}px`;
 154         obj.vals.width = w;
 155         obj.setValue(obj.vals.value);
 156     };
 157
 158     return exports();
 159 })();
 160 Object.freeze(window.qBittorrent.ProgressBar);