<commit_before><!--
Copyright 2012 The Toolkitchen Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<element name="g-panels" attributes="transition selected index autoselect" 
         on-keydown="keydownHandler">
<link rel="components" href="g-component.html">
<link rel="components" href="panel-transitions/g-panel-transition.html">
<link rel="components" href="panel-transitions/g-keyframe-panel-transition.html">
<link rel="components" href="panel-transitions/g-flow-panel-transition.html">
<link rel="stylesheet" href="css/g-panels.css" />
<template>
  <content id="content" select="*"></content>
</template>
<script>
  // TODO(sorvell): promote this and figure out canonical way to do this;
  // and support contenteditable.
  var documentIsEditing = function() {
    var a = document.activeElement;
    if (a.tagName == "INPUT" || a.tagName == "SELECT" || a.tagName == "TEXTAREA") {
      return true;
    }
  }
  
  // TODO(sorvell): need key table
  var RIGHT_ARROW_KEY = 39;
  var LEFT_ARROW_KEY = 37;
  
  this.component({
    defaultTransition: 'keyframe',
    _canTransition: false,
    ready: function() {
      // ensure default transition
      if (!this.transition) {
        this.transition = this.defaultTransition;
        if (!this.index) {
          this.index = 0;
        }
      }
      if (this.selected) {
        this.selectedChanged();
      }
      if (!this.node.hasAttribute('tabindex')) {
        this.node.tabIndex = -1;
      }
      this.initPanels();
      if (!this.index && !this.selected) {
        this.index = 0;
      }
      this.refreshWhenInserted();
    },
    initPanels: function() {
      this.getPanels().forEach(function(p, i) {
        this.initPanel(p, i);
      }, this);
    },
    initPanel: function() {},
    indexChanged: function(inOldValue) {
      var i = this.clampIndex(this.index);
      if (!this.canSelect(i)) {
        this.index = inOldValue;
        return;
      }
      if (i != this.index) {
        this.index = i;
      }
      if (this.index != this.lastIndex) {
        var fromPanel = this.panelAtIndex(this.lastIndex),
            toPanel = this.panelAtIndex(this.index),
            forward = Boolean(this.index > this.lastIndex);
        if (this.canTransition(fromPanel, toPanel, forward)) {
          this.beginTransition(fromPanel, toPanel, forward);
        } else {
          this.finishTransition(fromPanel, toPanel, forward);
        }
        this.lastIndex = this.index;
        this.selected = this.getSelectedValue();
      }
    },
    canSelect: function(inIndex) {
      var canSelect = true;
      // TODO(sorvell): dirtyCheck before we sent the canSelect event since
      // it's likely that the decision needs to rely on binding state.
      // consider doing this in g-component.send.
      dirtyCheck();
      this.send('canselect', {
        index: inIndex, 
        selected: this.selectedValueForIndex(inIndex),
        preventSelect: function() {
          canSelect = false;
        }
      });
      return canSelect;
    },
    clampIndex: function(inIndex) {
      var i = isNaN(inIndex) ? 0 : inIndex;
      return Math.max(0, Math.min(this.count-1, i));
    },
    getSelectedValue: function() {
      var selected = this.getSelectedPanel();
      return this.selectedValueForPanel(selected);
    },
    selectedValueForPanel: function(inPanel) {
      var name = inPanel && (inPanel.getAttribute('id') ||
          inPanel.getAttribute('name'));
      return name || this.indexOf(inPanel);
    },
    selectedValueForIndex: function(inIndex) {
      var panel = this.panelAtIndex(inIndex);
      return this.selectedValueForPanel(panel);
    },
    // selected is the name property of the panel to select
    selectedChanged: function(inOldValue) {
      var index = this.indexOfPropValue('id', this.selected);
      index = index >= 0 ? index : this.indexOfPropValue('name', this.selected);
      index = index >= 0 ? index : Number(this.selected);
      if (index >= 0) {
        this.index = index;
      }
    },
    transitionChanged: function(inOldValue) {
      if (this.transitionNode) {
        this.transitionNode.teardown();
      }
      this.transitionNode = this.makeTransitionNode(this.transition);
      this.transitionNode.setup(this);
      this.node.setAttribute('transition', this.transition);
      this.refresh();
    },
    makeTransitionNode: function(inName) {
      var name = this.tagNameForTransition(inName);
      var transition = document.createElement(name);
      return transition.setup ? transition :
          this.makeTransitionNode(this.defaultTransition);
    },
    tagNameForTransition: function(inName) {
      return 'g-' + inName + (inName ? '-' : '') + 'panel-transition';
    },
    indexOfPropValue: function(inProp, inValue) {
      var c$ = this.getPanels();
      for (var i=0, c; c=c$[i]; i++) {
        if (c.getAttribute(inProp) == inValue) {<commit_msg>g-panels: correct reliance on transition side effect being processed before index.<commit_after><!--
Copyright 2012 The Toolkitchen Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<element name="g-panels" attributes="transition selected index autoselect" 
         on-keydown="keydownHandler">
<link rel="components" href="g-component.html">
<link rel="components" href="panel-transitions/g-panel-transition.html">
<link rel="components" href="panel-transitions/g-keyframe-panel-transition.html">
<link rel="components" href="panel-transitions/g-flow-panel-transition.html">
<link rel="stylesheet" href="css/g-panels.css" />
<template>
  <content id="content" select="*"></content>
</template>
<script>
  // TODO(sorvell): promote this and figure out canonical way to do this;
  // and support contenteditable.
  var documentIsEditing = function() {
    var a = document.activeElement;
    if (a.tagName == "INPUT" || a.tagName == "SELECT" || a.tagName == "TEXTAREA") {
      return true;
    }
  }
  
  // TODO(sorvell): need key table
  var RIGHT_ARROW_KEY = 39;
  var LEFT_ARROW_KEY = 37;
  
  this.component({
    transition: 'keyframe',
    defaultTransition: 'keyframe',
    _canTransition: false,
    ready: function() {
      this.initPanels();
      if (!this.node.hasAttribute('tabindex')) {
        this.node.tabIndex = -1;
      }
      if (this.selected) {
        this.selectedChanged();
      } else if (!this.index) {
        this.index = 0;
      }
      this.refreshWhenInserted();
    },
    initPanels: function() {
      this.getPanels().forEach(function(p, i) {
        this.initPanel(p, i);
      }, this);
    },
    initPanel: function() {},
    indexChanged: function(inOldValue) {
      var i = this.clampIndex(this.index);
      if (!this.canSelect(i)) {
        this.index = inOldValue;
        return;
      }
      if (i != this.index) {
        this.index = i;
      }
      if (this.index != this.lastIndex) {
        var fromPanel = this.panelAtIndex(this.lastIndex),
            toPanel = this.panelAtIndex(this.index),
            forward = Boolean(this.index > this.lastIndex);
        if (!this.transitionNode) {
          this.transitionChanged();
        }
        if (this.canTransition(fromPanel, toPanel, forward)) {
          this.beginTransition(fromPanel, toPanel, forward);
        } else {
          this.finishTransition(fromPanel, toPanel, forward);
        }
        this.lastIndex = this.index;
        this.selected = this.getSelectedValue();
      }
    },
    canSelect: function(inIndex) {
      var canSelect = true;
      // TODO(sorvell): dirtyCheck before we sent the canSelect event since
      // it's likely that the decision needs to rely on binding state.
      // consider doing this in g-component.send.
      dirtyCheck();
      this.send('canselect', {
        index: inIndex, 
        selected: this.selectedValueForIndex(inIndex),
        preventSelect: function() {
          canSelect = false;
        }
      });
      return canSelect;
    },
    clampIndex: function(inIndex) {
      var i = isNaN(inIndex) ? 0 : inIndex;
      return Math.max(0, Math.min(this.count-1, i));
    },
    getSelectedValue: function() {
      var selected = this.getSelectedPanel();
      return this.selectedValueForPanel(selected);
    },
    selectedValueForPanel: function(inPanel) {
      var name = inPanel && (inPanel.getAttribute('id') ||
          inPanel.getAttribute('name'));
      return name || this.indexOf(inPanel);
    },
    selectedValueForIndex: function(inIndex) {
      var panel = this.panelAtIndex(inIndex);
      return this.selectedValueForPanel(panel);
    },
    // selected is the name property of the panel to select
    selectedChanged: function(inOldValue) {
      var index = this.indexOfPropValue('id', this.selected);
      index = index >= 0 ? index : this.indexOfPropValue('name', this.selected);
      index = index >= 0 ? index : Number(this.selected);
      if (index >= 0) {
        this.index = index;
      }
    },
    transitionChanged: function(inOldValue) {
      if (this.transitionNode) {
        if (this.transitionNode.localName == 
            this.tagNameForTransition(this.transition)) {
          return;
        }
        this.transitionNode.teardown();
      }
      this.transitionNode = this.makeTransitionNode(this.transition);
      this.transitionNode.setup(this);
      this.node.setAttribute('transition', this.transition);
      this.refresh();
    },
    makeTransitionNode: function(inName) {
      var name = this.tagNameForTransition(inName);
      var transition = document.createElement(name);
      return transition.setup ? transition :
          this.makeTransitionNode(this.defaultTransition);
    },
    tagNameForTransition: function(inName) {
      return 'g-' + inName + (inName ? '-' : '') + 'panel-transition';
    },
    indexOfPropValue: function(inProp, inValue) {
      var c$ = this.getPanels();
      for (var i=0, c; c=c$[i]; i++) {
        if (c.getAttribute(inProp) == inValue) {
{'fraction_non_alphanumeric': 0.13241693037974683, 'fraction_numerical': 0.0034612341772151897, 'mean_word_length': 2.692223439211391, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, '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': '5252135', 'n_tokens_mistral': 2998, 'n_tokens_neox': 2950, 'n_words': 670}