<commit_before>"use strict";

class ResourceBar extends HTMLElement {
  static get observedAttributes() { return [ "value", "maxvalue", "lefttext", "centertext", "righttext", "width", "height", "bg", "fg" ]; }

  // All visual dimensions are scaled by this.
  set scale(s) { this.setAttribute("scale", s); }
  get scale() { return this.getAttribute("scale"); }

  // Background color.
  set bg(c) { this.setAttribute("bg", c); }
  get bg() { return this.getAttribute("bg"); }

  // Foreground color.
  set fg(c) { this.setAttribute("fg", c); }
  get fg() { return this.getAttribute("fg"); }

  // The width of the bar, in pixels (before |scale|).
  set width(w) { this.setAttribute("width", w); }
  get width() { return this.getAttribute("width"); }

  // The height of the bar, in pixels (before |scale|).
  set height(w) { this.setAttribute("height", w); }
  get height() { return this.getAttribute("height"); }

  // A value between 0 and |maxvalue|, indicating the amount of progress.
  set value(s) { this.setAttribute("value", s); }
  get value() { return this.getAttribute("value"); }

  // The maximum value where when reached the progress bar will show 100%.
  set maxvalue(s) { this.setAttribute("maxvalue", s); }
  get maxvalue() { return this.getAttribute("maxvalue"); }
  
  // If "right" then fills left-to-right (the default). If "left" then
  // fills right-to-left.
  set toward(t) { this.setAttribute("toward", t); }
  get toward() { return this.getAttribute("toward"); }

  // If "fill" then the progress goes empty-to-full, if "empty" then the
  // progress bar starts full and goes to empty.
  set style(s) { this.setAttribute("style", s); }
  get style() { return this.getAttribute("style"); }
  
  // Chooses what should be shown in the text field in each area of
  // the bar. Can be one of:
  // empty - nothing is shown.
  // "value" - shows the current raw value.
  // "maxvalue" - shows the current and maximum raw values.
  // "percent" - shows the percentage.
  // anything else - the given text is shown literally.
  set lefttext(p) { this.setAttribute("lefttext", p); }
  get lefttext() { return this.getAttribute("lefttext"); }
  set righttext(p) { this.setAttribute("righttext", p); }
  get righttext() { return this.getAttribute("righttext"); }
  set centertext(p) { this.setAttribute("centertext", p); }
  get centertext() { return this.getAttribute("centertext"); }
  
  // This would be used with window.customElements.
  constructor() {
    super();
    var root = this.attachShadow({mode: 'open'});
    this.init(root);
  }
  
  // These would be used by document.registerElement, which is deprecated but
  // ACT uses an old CEF which has this instead of the newer APIs.
  createdCallback() {
    var root = this.createShadowRoot();
    this.init(root);
  }
  // Convert from the deprecated API names to the modern API names.
  attachedCallback() { this.connectedCallback(); }
  detachedCallback() { this.disconnectedCallback(); }

  init(root) {
    root.innerHTML = `
      <style>
        #bg {
          opacity: 0.5;
          position: absolute;
        }
        #fg {
          opacity: 1.0;
          position: absolute;
          will-change: transform;
        }
        .text {
          position: absolute;
          font-family: arial;
          font-weight: bold;
          color: white;
          text-shadow: -1px 0 3px black, 0 1px 3px black, 1px 0 3px black, 0 -1px 3px black;
          will-change: content;
        }
        #lefttext {
          text-align: left;
        }
        #centertext {
          text-align: center;
        }
        #righttext {
          text-align: right;
        }
      </style>
      <div style="position: relative">
        <div id="bg"></div>
        <div id="fg"></div>
        <div id="righttext" class="text"></div>
        <div id="centertext" class="text"></div>
        <div id="lefttext" class="text"></div>
      </div>
    `
  }
  
  connectedCallback() {
    this.foregroundElement = this.shadowRoot.getElementById("fg");
    this.backgroundElement = this.shadowRoot.getElementById("bg");
    this.leftTextElement = this.shadowRoot.getElementById("lefttext");
    this.centerTextElement = this.shadowRoot.getElementById("centertext");
    this.rightTextElement = this.shadowRoot.getElementById("righttext");

    // Constants.
    this.kBackgroundOpacity = 0.8;
    this.kBorderSize = 1;
    this.kTextLeftRightEdgePadding = this.kBorderSize * 3;
    this.kTextTopBottomEdgePadding = this.kBorderSize * 2;
    
    // Default values.
    this._value = 0;
    this._maxvalue = 1;
    this._width = 200;
    this._height = 20;
    this._bg = "black";
    this._fg = "green";
    this._scale = 1;
    this._toward_right = true;
    this._style_fill = true;
    this._left_text = "";
    this._center_text = "";
    this._right_text = "";

    if (this.value != null) { this._value = Math.max(parseFloat(this.value), 0); }
    if (this.maxvalue != null) { this._maxvalue = Math.max(parseFloat(this.maxvalue), 0); }
    if (this.width != null) { this._width = Math.max(parseInt(this.width), 1); }
    if (this.height != null) { this._height = Math.max(parseInt(this.height), 1); }
    if (this.bg != null) { this._bg = this.bg; }
    if (this.fg != null) { this._fg = this.fg; }
    if (this.scale != null) { this._scale = Math.max(parseFloat(this.scale), 0.01); }
    if (this.toward != null) { this._toward_right = this.toward != "left"; }
    if (this.style != null) { this._style_fill = this.style != "empty"; }
    if (this.lefttext != null) { this._left_text = this.lefttext; }
    if (this.centertext != null) { this._center_text = this.centertext; }
    if (this.righttext != null) { this._right_text = this.righttext; }
    
    this._connected = true;
    this.layout();
    this.updateText();
    this.draw();
  }
  
  disconnectedCallback() {
    this._connected = false;
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "value")
      this._value = Math.max(parseFloat(newValue), 0);
    else if (name == "maxvalue")
      this._maxvalue = Math.max(parseFloat(newValue), 0);
    else if (name == "width") {
      this._width = Math.max(parseInt(newValue), 1);
      this.layout();
    } else if (name == "height") {
      this._height = Math.max(parseInt(newValue), 1);
      this.layout();
    } else if (name == "bg") {
      this._bg = newValue;
      this.layout();
    } else if (name == "fg") {
      this._fg = newValue;
      this.layout();
    } else if (name == "lefttext") {
      var update = newValue != this._left_text && this._connected;<commit_msg>resourcebar: Allow toward to be modified dynamically<commit_after>"use strict";

class ResourceBar extends HTMLElement {
  static get observedAttributes() { return [ "value", "maxvalue", "lefttext", "centertext", "righttext", "width", "height", "bg", "fg", "toward" ]; }

  // All visual dimensions are scaled by this.
  set scale(s) { this.setAttribute("scale", s); }
  get scale() { return this.getAttribute("scale"); }

  // Background color.
  set bg(c) { this.setAttribute("bg", c); }
  get bg() { return this.getAttribute("bg"); }

  // Foreground color.
  set fg(c) { this.setAttribute("fg", c); }
  get fg() { return this.getAttribute("fg"); }

  // The width of the bar, in pixels (before |scale|).
  set width(w) { this.setAttribute("width", w); }
  get width() { return this.getAttribute("width"); }

  // The height of the bar, in pixels (before |scale|).
  set height(w) { this.setAttribute("height", w); }
  get height() { return this.getAttribute("height"); }

  // A value between 0 and |maxvalue|, indicating the amount of progress.
  set value(s) { this.setAttribute("value", s); }
  get value() { return this.getAttribute("value"); }

  // The maximum value where when reached the progress bar will show 100%.
  set maxvalue(s) { this.setAttribute("maxvalue", s); }
  get maxvalue() { return this.getAttribute("maxvalue"); }
  
  // If "right" then fills left-to-right (the default). If "left" then
  // fills right-to-left.
  set toward(t) { this.setAttribute("toward", t); }
  get toward() { return this.getAttribute("toward"); }

  // If "fill" then the progress goes empty-to-full, if "empty" then the
  // progress bar starts full and goes to empty.
  set style(s) { this.setAttribute("style", s); }
  get style() { return this.getAttribute("style"); }
  
  // Chooses what should be shown in the text field in each area of
  // the bar. Can be one of:
  // empty - nothing is shown.
  // "value" - shows the current raw value.
  // "maxvalue" - shows the current and maximum raw values.
  // "percent" - shows the percentage.
  // anything else - the given text is shown literally.
  set lefttext(p) { this.setAttribute("lefttext", p); }
  get lefttext() { return this.getAttribute("lefttext"); }
  set righttext(p) { this.setAttribute("righttext", p); }
  get righttext() { return this.getAttribute("righttext"); }
  set centertext(p) { this.setAttribute("centertext", p); }
  get centertext() { return this.getAttribute("centertext"); }
  
  // This would be used with window.customElements.
  constructor() {
    super();
    var root = this.attachShadow({mode: 'open'});
    this.init(root);
  }
  
  // These would be used by document.registerElement, which is deprecated but
  // ACT uses an old CEF which has this instead of the newer APIs.
  createdCallback() {
    var root = this.createShadowRoot();
    this.init(root);
  }
  // Convert from the deprecated API names to the modern API names.
  attachedCallback() { this.connectedCallback(); }
  detachedCallback() { this.disconnectedCallback(); }

  init(root) {
    root.innerHTML = `
      <style>
        #bg {
          position: absolute;
        }
        #fg {
          opacity: 1.0;
          position: absolute;
          will-change: transform;
        }
        .text {
          position: absolute;
          font-family: arial;
          font-weight: bold;
          color: white;
          text-shadow: -1px 0 3px black, 0 1px 3px black, 1px 0 3px black, 0 -1px 3px black;
          will-change: content;
        }
        #lefttext {
          text-align: left;
        }
        #centertext {
          text-align: center;
        }
        #righttext {
          text-align: right;
        }
      </style>
      <div style="position: relative">
        <div id="bg"></div>
        <div id="fg"></div>
        <div id="righttext" class="text"></div>
        <div id="centertext" class="text"></div>
        <div id="lefttext" class="text"></div>
      </div>
    `
  }
  
  connectedCallback() {
    this.foregroundElement = this.shadowRoot.getElementById("fg");
    this.backgroundElement = this.shadowRoot.getElementById("bg");
    this.leftTextElement = this.shadowRoot.getElementById("lefttext");
    this.centerTextElement = this.shadowRoot.getElementById("centertext");
    this.rightTextElement = this.shadowRoot.getElementById("righttext");

    // Constants.
    this.kBackgroundOpacity = 0.8;
    this.kBorderSize = 1;
    this.kTextLeftRightEdgePadding = this.kBorderSize * 3;
    this.kTextTopBottomEdgePadding = this.kBorderSize * 2;
    
    // Default values.
    this._value = 0;
    this._maxvalue = 1;
    this._width = 200;
    this._height = 20;
    this._bg = "rgba(0, 0, 0, 0.7)";
    this._fg = "green";
    this._scale = 1;
    this._toward_right = true;
    this._style_fill = true;
    this._left_text = "";
    this._center_text = "";
    this._right_text = "";

    if (this.value != null) { this._value = Math.max(parseFloat(this.value), 0); }
    if (this.maxvalue != null) { this._maxvalue = Math.max(parseFloat(this.maxvalue), 0); }
    if (this.width != null) { this._width = Math.max(parseInt(this.width), 1); }
    if (this.height != null) { this._height = Math.max(parseInt(this.height), 1); }
    if (this.bg != null) { this._bg = this.bg; }
    if (this.fg != null) { this._fg = this.fg; }
    if (this.scale != null) { this._scale = Math.max(parseFloat(this.scale), 0.01); }
    if (this.toward != null) { this._toward_right = this.toward != "left"; }
    if (this.style != null) { this._style_fill = this.style != "empty"; }
    if (this.lefttext != null) { this._left_text = this.lefttext; }
    if (this.centertext != null) { this._center_text = this.centertext; }
    if (this.righttext != null) { this._right_text = this.righttext; }
    
    this._connected = true;
    this.layout();
    this.updateText();
    this.draw();
  }
  
  disconnectedCallback() {
    this._connected = false;
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "value")
      this._value = Math.max(parseFloat(newValue), 0);
    else if (name == "maxvalue")
      this._maxvalue = Math.max(parseFloat(newValue), 0);
    else if (name == "width") {
      this._width = Math.max(parseInt(newValue), 1);
      this.layout();
    } else if (name == "height") {
      this._height = Math.max(parseInt(newValue), 1);
      this.layout();
    } else if (name == "bg") {
      this._bg = newValue;
      this.layout();
    } else if (name == "fg") {
      this._fg = newValue;
      this.layout();
    } else if (name == "toward") {
      this._toward_right = newValue != "left";
      this.layout();
    } else if (name == "lefttext") {
      var update = newValue != this._left_text && this._connected;
{'fraction_non_alphanumeric': 0.15405344711430496, 'fraction_numerical': 0.006811887117299199, 'mean_word_length': 2.8084378563283923, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7574680', 'n_tokens_mistral': 4243, 'n_tokens_neox': 4173, 'n_words': 1111}