<commit_before>import util = require('./util');
import resourceLoader = require('../resourceloader');

const ID = "CbMenuItemTemplate";

const SELECTED_ATTR = "selected";
let registered = false;

class CbMenuItem extends HTMLElement {
  
  //-----------------------------------------------------------------------
  // Statics

  static init(): void {
    if (registered === false) {
      window.document.registerElement('cb-menuitem', {prototype: CbMenuItem.prototype});
      registered = true;
    }
  }
  
  //-----------------------------------------------------------------------
  createdCallback(): void {
    const shadow = util.createShadowRoot(this);
    const clone = this._createClone();
    shadow.appendChild(clone);

    let iconhtml = "";
    const icon = this.getAttribute('icon');
    if (icon !== null && icon !== "") {
      iconhtml += "<i class='fa fa-fw fa-" + icon + "'></i>";
    } else {
      iconhtml += "<i class='fa fa-fw'></i>";
    }
    (<HTMLElement>shadow.querySelector("#icon2")).innerHTML = iconhtml; 

    this.updateKeyboardSelected(this.getAttribute(SELECTED_ATTR));
  }
  
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void {
    if (attrName === SELECTED_ATTR ) {
      this.updateKeyboardSelected(newValue);
    }
  }
  
  //-----------------------------------------------------------------------
  private _css(): string {
    return "@import url('" + resourceLoader.toUrl("css/font-awesome.css") + "');\n" +
      ":host {\n" +
      "    display: block;\n" +
      "    color: #000;\n" +
      "    font: 16px 'Source Sans', helvetica, arial, sans-serif;\n" +
      "    font-weight: 400;\n" +
      "}\n" +

      "#container {\n" +
      "    cursor: default;\n" +
      "    padding: 1px;\n" +
      "    display: flex;\n" +
      "}\n" +

      ".selected {\n" +
      "    background-color: #288edf;\n" +
      "    color: #ffffff;\n" +
      "}\n" +

      "#icon1, #icon2 {\n" +
      "    flex: auto 0 0;\n" +
      "    white-space: pre;\n" +
      "}\n" +

      "#label {\n" +
      "    flex: auto 1 1;\n" +
      "    padding-left: 0.5rem;\n" +
      "    white-space: pre;\n" +
      "}\n";
  }

  private _html(): string {
    return "<div id='container'>" +
      "<div id='icon1'><i class='fa fa-fw'></i></div>" +
      "<div id='icon2'></div>" +
      "<div id='label'><content></content></div>" +
      "</div>";
  }

  private _createClone(): Node {
    let template: HTMLTemplate = <HTMLTemplate>window.document.getElementById(ID);
    if (template === null) {
      template = <HTMLTemplate>window.document.createElement('template');
      template.id = ID;
      template.innerHTML = "<style>" + this._css() + "</style>\n" + this._html();
      window.document.body.appendChild(template);
    }
    return window.document.importNode(template.content, true);
  }

  _clicked(): void {}
  
  private updateKeyboardSelected(value: string): void {
    const shadow = util.getShadowRoot(this);
    const container = <HTMLDivElement>shadow.querySelector("#container");
    const on = value === "true";
    if (on) {
      container.classList.add('selected');<commit_msg>Basic reformatting and refactoring in the menuitem component.<commit_after>/**
 * Copyright 2014-2015 <NAME> <<EMAIL>>
 */
import util = require('./util');
import resourceLoader = require('../resourceloader');

const ID = "CbMenuItemTemplate";

let registered = false;

class CbMenuItem extends HTMLElement {
  
  static TAG_NAME = 'cb-menuitem';
  
  static ATTR_SELECTED = 'selected';
  
  //-----------------------------------------------------------------------
  // Statics

  static init(): void {
    if (registered === false) {
      window.document.registerElement(CbMenuItem.TAG_NAME, {prototype: CbMenuItem.prototype});
      registered = true;
    }
  }
  
  //-----------------------------------------------------------------------
  createdCallback(): void {
    const shadow = util.createShadowRoot(this);
    const clone = this._createClone();
    shadow.appendChild(clone);

    let iconhtml = "";
    const icon = this.getAttribute('icon');
    if (icon !== null && icon !== "") {
      iconhtml += "<i class='fa fa-fw fa-" + icon + "'></i>";
    } else {
      iconhtml += "<i class='fa fa-fw'></i>";
    }
    (<HTMLElement>shadow.querySelector("#icon2")).innerHTML = iconhtml; 
    
    this.updateKeyboardSelected(this.getAttribute(CbMenuItem.ATTR_SELECTED));
  }
  
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void {
    if (attrName === CbMenuItem.ATTR_SELECTED) {
      this.updateKeyboardSelected(newValue);
    }
  }
  
  //-----------------------------------------------------------------------
  private _css(): string {
    return `@import url('${resourceLoader.toUrl("css/font-awesome.css")}');
      :host {
          display: block;
          color: #000;
          font: 16px 'Source Sans', helvetica, arial, sans-serif;
          font-weight: 400;
      }
      #container {
          cursor: default;
          padding: 1px;
          display: flex;
      }
      .selected {
          background-color: #288edf;
          color: #ffffff;
      }
      #icon1, #icon2 {
          flex: auto 0 0;
          white-space: pre;
      }
      #label {
          flex: auto 1 1;
          padding-left: 0.5rem;
          white-space: pre;
      }
`;
  }

  private _html(): string {
    return `<div id='container'>
      <div id='icon1'><i class='fa fa-fw'></i></div>
      <div id='icon2'></div>
      <div id='label'><content></content></div>
      </div>`;
  }

  private _createClone(): Node {
    let template: HTMLTemplate = <HTMLTemplate>window.document.getElementById(ID);
    if (template === null) {
      template = <HTMLTemplate>window.document.createElement('template');
      template.id = ID;
      template.innerHTML = "<style>" + this._css() + "</style>\n" + this._html();
      window.document.body.appendChild(template);
    }
    return window.document.importNode(template.content, true);
  }

  _clicked(): void {}
  
  private updateKeyboardSelected(value: string): void {
    const shadow = util.getShadowRoot(this);
    const container = <HTMLDivElement>shadow.querySelector("#container");
    const on = value === "true";
    if (on) {
      container.classList.add('selected');
{'fraction_non_alphanumeric': 0.22497241053129435, 'fraction_numerical': 0.008513321772032161, 'mean_word_length': 2.0781174187287723, 'pattern_counts': {'":': 1, '<': 50, '<?xml version=': 0, '>': 50, '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': '7107776', 'n_tokens_mistral': 1912, 'n_tokens_neox': 1875, 'n_words': 388}