<commit_before>/** 
 * Window UI component
 *
 * @class window
 * @augments elation.ui.base
 * @memberof elation.ui
 *
 * @param {object} args[]
 * @param {array} args.items
 * @param {boolean} args.controls
 * @param {string} args.title
 * @param {string} args.content
 * @param {array} args.position
 * @param {boolean} args.center
 * @param {int} args.width
 * @param {int} args.height
 * @param {int} args.top
 * @param {int} args.bottom
 * @param {int} args.left
 * @param {int} args.right
 */

elation.require(['elements.elements', 'elements.ui.button', 'elements.ui.buttonbar'], function() {
  elation.requireCSS('ui.window');

  elation.elements.define('ui.window', class extends elation.elements.ui.panel {
    init() {
      super.init();
      this.defineAttributes({
        title:     { type: 'string', default: '' },
        //toolbar:   { type: 'object' },
        position:  { type: 'vector2' },
        content:   { type: 'object' },
        movable:   { type: 'boolean' },
        controls: { type: 'boolean' },
        center: { type: 'boolean' },
        left: { type: 'boolean' },
        right: { type: 'boolean' },
        top: { type: 'boolean' },
        bottom: { type: 'boolean' },
        resizable: { type: 'boolean' },
        scrollable: { type: 'boolean' },
        minimizable:  { type: 'boolean' },
        maximizable:  { type: 'boolean' },
        closable:     { type: 'boolean' },
        resizable: { type: 'boolean' },
      });
      this.offsetpos = [0, 0];
    }
    initUIWindow() {
      this.initialized = true;
      this.windownum = (elation.elements.ui.window.numwindows ? elation.elements.ui.window.numwindows : 0);
      elation.elements.ui.window.numwindows = this.windownum + 1;
      //this.style.top = 0;
      //this.style.left = 0;

      var content = this.getElementsByTagName('ui-window-content');
      if (content.length > 0) {
        this.content = content[0];
      } else {
        if (this.childNodes.length > 0) {
          this.content = document.createElement('ui-window-content');
          var children = [];
          while (this.childNodes.length > 0) {
            var child = this.childNodes[0];
            this.removeChild(child);
            this.content.appendChild(child);
          }
        }
      }

      this.titlebar = elation.elements.create('ui.window.titlebar', {append: this});
      this.toolbar = false;
      this.minimized = false;
      this.maximized = false;
      this.transformorigin = "50% 50%";
      this.labels = {
        minimize: '–',
        maximize: '□',
        restore: '₪',
        close: 'x'
      };
      if (this.controls !== false) {
        this.createcontrols();
      }
      this.settitle(this.title);
      if (this.toolbar) {
        this.settoolbar(this.toolbar);
      }
      if (this.position) {
        this.setposition(this.position);
      }
      this.setcontent(this.content);

      elation.events.add(window, 'resize,orientationchange', this);

      var curpos = elation.html.position(this);
      //this.addclass("ui_window");
      if (this.movable !== false) {
        this.addclass('state_movable');
        elation.events.add(this, 'mousedown,touchstart', this);
      }
      if (this.left) this.addclass('orientation_left');
      if (this.right) this.addclass('orientation_right');
      if (this.top) this.addclass('orientation_top');
      if (this.bottom) this.addclass('orientation_bottom');
      if (this.center) this.addclass('orientation_center');

      if (this.width) {
        this.style.width = this.width;  
      }
      if (this.height) {
        this.content.style.height = this.height;
      }
      this.refresh();
      this.focus(true);
    }
    render() {
      //super.render();
      if (!this.initialized) {
        this.initUIWindow();
      }
      this.size = this.getsize();
      if (this.center) {
        this.centerwindow();
      }
      // TODO - should "center" be an orientation too?
      if (this.orientation) {
        this.setOrientation(this.orientation);
      }
      if (this.top) {
        this.setposition([this.offsetpos[0], this.top]);
      } else if (this.bottom) {
        this.setposition([this.offsetpos[0], window.innerHeight - this.offsetHeight - this.bottom]);
      }
      if (this.left) {
        this.setposition([this.left, this.offsetpos[1]]);
      } else if (this.right) {
        this.setposition([window.innerWidth - this.offsetWidth - this.right, this.offsetpos[1]]);
      }
    }
    focus(skipmove) {
      if (!this.active) {
        this.windownum = elation.elements.ui.window.numwindows++;
        // first remove focus from any existing active windows
        var activewindows = elation.find('.ui_window.state_active');
        if (activewindows.length > 0) {
          for (var i = 0; i < activewindows.length; i++) {
            //elation.component.fetch(activewindows[i]).blur();
          }
        }
        this.addclass('state_active');
        if (this.minimized) {
          //this.minimize();
        } else {[]
          //this.setposition((this.maximized ? [0,0] : this.offsetpos), false);
          elation.html.transform(this, this.gettransform(), this.transformorigin, (skipmove ? '' : 'all 100ms ease-in-out'));
        }
        this.active = true;
        elation.events.fire({type: 'focus', element: this});
      }
    }
    blur() {
      if (this.active) {
        this.active = false;
        elation.html.removeclass(this, 'state_active');
        elation.events.fire({type: 'blur', element: this});
      }
    }
    createcontrols() {
      var buttons = {};
      if (this.minimizable !== false) {
        buttons.minimize = { 
          label: this.labels.minimize,
          classname: 'ui_window_control_minimize',
          onclick: (ev) => this.minimize(ev)
        };
      }
      if (this.maximizable !== false) {
        buttons.maximize = {
          label: this.labels.maximize,
          classname: 'ui_window_control_maximize',
          onclick: (ev) => this.maximize(ev)
        };
      }
      if (this.closable !== false) {
        buttons.close = { 
          label: this.labels.close,
          classname: 'ui_window_control_close',<commit_msg>Added width/height attributes, fixed control attributes<commit_after>/** 
 * Window UI component
 *
 * @class window
 * @augments elation.ui.base
 * @memberof elation.ui
 *
 * @param {object} args[]
 * @param {array} args.items
 * @param {boolean} args.controls
 * @param {string} args.title
 * @param {string} args.content
 * @param {array} args.position
 * @param {boolean} args.center
 * @param {int} args.width
 * @param {int} args.height
 * @param {int} args.top
 * @param {int} args.bottom
 * @param {int} args.left
 * @param {int} args.right
 */

elation.require(['elements.elements', 'elements.ui.button', 'elements.ui.buttonbar'], function() {
  elation.requireCSS('ui.window');

  elation.elements.define('ui.window', class extends elation.elements.ui.panel {
    init() {
      super.init();
      this.defineAttributes({
        title:     { type: 'string', default: '' },
        //toolbar:   { type: 'object' },
        position:  { type: 'vector2' },
        content:   { type: 'object' },
        movable:   { type: 'boolean' },
        controls: { type: 'boolean' },
        center: { type: 'boolean' },
        left: { type: 'boolean' },
        right: { type: 'boolean' },
        top: { type: 'boolean' },
        bottom: { type: 'boolean' },
        width: { type: 'string' },
        height: { type: 'height' },
        resizable: { type: 'boolean' },
        scrollable: { type: 'boolean' },
        minimizable:  { type: 'boolean' },
        maximizable:  { type: 'boolean' },
        closable:     { type: 'boolean' },
        resizable: { type: 'boolean' },
      });
      this.offsetpos = [0, 0];
    }
    initUIWindow() {
      this.initialized = true;
      this.windownum = (elation.elements.ui.window.numwindows ? elation.elements.ui.window.numwindows : 0);
      elation.elements.ui.window.numwindows = this.windownum + 1;
      //this.style.top = 0;
      //this.style.left = 0;

      var content = this.getElementsByTagName('ui-window-content');
      if (content.length > 0) {
        this.content = content[0];
      } else {
        if (this.childNodes.length > 0) {
          this.content = document.createElement('ui-window-content');
          var children = [];
          while (this.childNodes.length > 0) {
            var child = this.childNodes[0];
            this.removeChild(child);
            this.content.appendChild(child);
          }
        }
      }

      this.titlebar = elation.elements.create('ui.window.titlebar', {append: this});
      this.toolbar = false;
      this.minimized = false;
      this.maximized = false;
      this.transformorigin = "50% 50%";
      this.labels = {
        minimize: '–',
        maximize: '□',
        restore: '₪',
        close: 'x'
      };
      if (this.controls !== false && this.controls != 0) {
        this.createcontrols();
      }
      this.settitle(this.title);
      if (this.toolbar) {
        this.settoolbar(this.toolbar);
      }
      if (this.position) {
        this.setposition(this.position);
      }
      this.setcontent(this.content);

      elation.events.add(window, 'resize,orientationchange', this);

      var curpos = elation.html.position(this);
      //this.addclass("ui_window");
      if (this.movable !== false) {
        this.addclass('state_movable');
        elation.events.add(this, 'mousedown,touchstart', this);
      }
      if (this.left) this.addclass('orientation_left');
      if (this.right) this.addclass('orientation_right');
      if (this.top) this.addclass('orientation_top');
      if (this.bottom) this.addclass('orientation_bottom');
      if (this.center) this.addclass('orientation_center');

      if (this.width) {
        this.style.width = this.width;  
      }
      if (this.height) {
        this.content.style.height = this.height;
      }
      this.refresh();
      this.focus(true);
    }
    render() {
      //super.render();
      if (!this.initialized) {
        this.initUIWindow();
      }
      this.size = this.getsize();
      if (this.center) {
        this.centerwindow();
      }
      // TODO - should "center" be an orientation too?
      if (this.orientation) {
        this.setOrientation(this.orientation);
      }
      if (this.top) {
        this.setposition([this.offsetpos[0], this.top]);
      } else if (this.bottom) {
        this.setposition([this.offsetpos[0], window.innerHeight - this.offsetHeight - this.bottom]);
      }
      if (this.left) {
        this.setposition([this.left, this.offsetpos[1]]);
      } else if (this.right) {
        this.setposition([window.innerWidth - this.offsetWidth - this.right, this.offsetpos[1]]);
      }
    }
    focus(skipmove) {
      if (!this.active) {
        this.windownum = elation.elements.ui.window.numwindows++;
        // first remove focus from any existing active windows
        var activewindows = elation.find('.ui_window.state_active');
        if (activewindows.length > 0) {
          for (var i = 0; i < activewindows.length; i++) {
            //elation.component.fetch(activewindows[i]).blur();
          }
        }
        this.addclass('state_active');
        if (this.minimized) {
          //this.minimize();
        } else {[]
          //this.setposition((this.maximized ? [0,0] : this.offsetpos), false);
          elation.html.transform(this, this.gettransform(), this.transformorigin, (skipmove ? '' : 'all 100ms ease-in-out'));
        }
        this.active = true;
        elation.events.fire({type: 'focus', element: this});
      }
    }
    blur() {
      if (this.active) {
        this.active = false;
        elation.html.removeclass(this, 'state_active');
        elation.events.fire({type: 'blur', element: this});
      }
    }
    createcontrols() {
      var buttons = {};
      if (this.minimizable !== false && this.minimizable != 0) {
        buttons.minimize = { 
          label: this.labels.minimize,
          classname: 'ui_window_control_minimize',
          onclick: (ev) => this.minimize(ev)
        };
      }
      if (this.maximizable !== false && this.maximizable != 0) {
        buttons.maximize = {
          label: this.labels.maximize,
          classname: 'ui_window_control_maximize',
          onclick: (ev) => this.maximize(ev)
        };
      }
      if (this.closable !== false && this.closable != 0) {
        buttons.close = { 
          label: this.labels.close,
          classname: 'ui_window_control_close',
{'fraction_non_alphanumeric': 0.15562415894878492, 'fraction_numerical': 0.004591150162273411, 'mean_word_length': 2.183169564121945, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 15, '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': '3419751', 'n_tokens_mistral': 3970, 'n_tokens_neox': 3897, 'n_words': 742}