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