<commit_before>import * as internal from './internal.js';
import * as template from './template.js';
import EffectMixin from './EffectMixin.js';
import ReactiveElement from './ReactiveElement.js';
import SingleSelectionMixin from './SingleSelectionMixin.js';
import SlotItemsMixin from './SlotItemsMixin.js';

const Base = EffectMixin(SingleSelectionMixin(SlotItemsMixin(ReactiveElement)));

/**
 * Shows a crossfade effect when transitioning between a single selected item.
 *
 * Like [Modes](Modes), this component shows a single item at a time, but it
 * adds a crossfade effect when transitioning between items.
 *
 * @inherits Modes
 * @mixes EffectMixin
 */
class CrossfadeStage extends Base {
  get [internal.defaultState]() {
    return Object.assign(super[internal.defaultState], {
      selectionRequired: true,
      transitionDuration: 750 // 3/4 of a second
    });
  }

  [internal.render](/** @type {PlainObject} */ changed) {
    super[internal.render](changed);
    if (
      changed.enableEffects ||
      changed.rightToLeft ||
      changed.items ||
      changed.selectedIndex ||
      changed.swipeFraction ||
      changed.transitionDuration
    ) {
      // Apply opacity based on selection state.
      const {
        // effect,
        // effectPhase,
        enableEffects,
        items,
        rightToLeft,
        selectedIndex,
        swipeFraction,
        transitionDuration
      } = this[internal.state];
      if (items) {
        const sign = rightToLeft ? 1 : -1;
        const swiping = swipeFraction != null;
        const selectionFraction = sign * (swipeFraction || 0);
        const showTransition = enableEffects && !swiping;
        const transition = showTransition
          ? `opacity ${transitionDuration / 1000}s linear`
          : null;
        items.forEach((item, index) => {
          const opacity = opacityForItemWithIndex(
            index,
            selectedIndex,
            selectionFraction
          );
          Object.assign(item.style, {
            opacity,
            transition
          });
        });
      }
    }
  }

  get swipeFraction() {
    return this[internal.state].swipeFraction;
  }
  set swipeFraction(swipeFraction) {
    this[internal.setState]({ swipeFraction });
  }

  get transitionDuration() {
    return this[internal.state].transitionDuration;
  }
  set transitionDuration(transitionDuration) {
    this[internal.setState]({ transitionDuration });
  }

  get [internal.template]() {
    return template.html`
      <style>
        :host {
          display: inline-grid;
          position: relative;
        }

        ::slotted(*) {
          grid-column: 1;
          grid-row: 1;
        }
      </style>
      <slot></slot>
    `;
  }
}

/**
 * @private
 * @param {number} index
 * @param {number} selectedIndex
 * @param {number} selectionFraction
 */
function opacityForItemWithIndex(index, selectedIndex, selectionFraction) {
  const opacityMinimum = 0;
  const opacityMaximum = 1;
  const opacityRange = opacityMaximum - opacityMinimum;<commit_msg>CrossfadeStage leaves only selected item visible to prevent user from being to interact with elements inside the non-selected items.<commit_after>import * as internal from './internal.js';
import * as template from './template.js';
import EffectMixin from './EffectMixin.js';
import ReactiveElement from './ReactiveElement.js';
import SingleSelectionMixin from './SingleSelectionMixin.js';
import SlotItemsMixin from './SlotItemsMixin.js';
import TransitionEffectMixin from './TransitionEffectMixin.js';

const Base = EffectMixin(
  SingleSelectionMixin(SlotItemsMixin(TransitionEffectMixin(ReactiveElement)))
);

/**
 * Shows a crossfade effect when transitioning between a single selected item.
 *
 * Like [Modes](Modes), this component shows a single item at a time, but it
 * adds a crossfade effect when transitioning between items.
 *
 * @inherits Modes
 * @mixes EffectMixin
 */
class CrossfadeStage extends Base {
  get [internal.defaultState]() {
    const result = Object.assign(super[internal.defaultState], {
      // renderedSelectedIndex: null,
      effect: 'select',
      effectPhase: 'after',
      selectionRequired: true,
      transitionDuration: 750 // 3/4 of a second
    });

    // When selection changes, (re)start the selection effect.
    result.onChange('selectedIndex', state => {
      const effectPhase =
        state.enableEffects &&
        state.selectedIndex >= 0 &&
        state.effectPhase !== 'before'
          ? 'before'
          : 'after';
      return { effectPhase };
    });

    return result;
  }

  [internal.render](/** @type {PlainObject} */ changed) {
    super[internal.render](changed);
    if (
      changed.effect ||
      changed.effectPhase ||
      changed.enableEffects ||
      changed.rightToLeft ||
      changed.items ||
      changed.selectedIndex ||
      changed.swipeFraction ||
      changed.transitionDuration
    ) {
      // Apply opacity based on selection state.
      const {
        effect,
        effectPhase,
        enableEffects,
        items,
        rightToLeft,
        selectedIndex,
        swipeFraction
      } = this[internal.state];
      if (items && effect === 'select') {
        if (enableEffects && effectPhase === 'before') {
          // Prepare to animate.
          // Make all items visible, and the newly-selected one transparent.
          items.forEach((item, index) => {
            if (index === selectedIndex && item.style.opacity === '') {
              item.style.opacity = '0';
            }
            item.style.visibility = 'visible';
          });
        } else if (
          (enableEffects && effectPhase === 'during') ||
          swipeFraction != null
        ) {
          // Start the animation.
          const sign = rightToLeft ? 1 : -1;
          const selectionFraction = sign * (swipeFraction || 0);
          items.forEach((item, index) => {
            const opacity = opacityForItemWithIndex(
              index,
              selectedIndex,
              selectionFraction
            );
            item.style.opacity = opacity.toString();
            if (opacity > 0) {
              item.style.visibility = 'visible';
            }
          });
        } else if (effectPhase === 'after' || swipeFraction == null) {
          // Finished animating (or finish a swipe).
          // Hide all items but the selected one.
          items.forEach((item, index) => {
            const selected = index === selectedIndex;
            item.style.opacity = selected ? '1' : '';
            item.style.visibility = selected ? 'visible' : '';
          });
        }
      }
    }

    if (changed.items || changed.swipeFraction || changed.transitionDuration) {
      // Apply opacity transition.
      const { items, swipeFraction, transitionDuration } = this[internal.state];
      const transition =
        swipeFraction != null
          ? ''
          : `opacity ${transitionDuration / 1000}s linear`;
      if (items) {
        items.forEach(item => {
          item.style.transition = transition;
        });
      }
    }
  }

  get swipeFraction() {
    return this[internal.state].swipeFraction;
  }
  set swipeFraction(swipeFraction) {
    this[internal.setState]({ swipeFraction });
  }

  get transitionDuration() {
    return this[internal.state].transitionDuration;
  }
  set transitionDuration(transitionDuration) {
    this[internal.setState]({ transitionDuration });
  }

  get [internal.template]() {
    return template.html`
      <style>
        :host {
          display: inline-grid;
          position: relative;
        }

        ::slotted(*) {
          grid-column: 1;
          grid-row: 1;
          opacity: 0;
          visibility: hidden;
        }
      </style>
      <slot></slot>
    `;
  }
}

/**
 * @private
 * @param {number} index
 * @param {number} selectedIndex
 * @param {number} selectionFraction
 */
function opacityForItemWithIndex(index, selectedIndex, selectionFraction) {
  const opacityMinimum = 0;
  const opacityMaximum = 1;
  const opacityRange = opacityMaximum - opacityMinimum;
{'fraction_non_alphanumeric': 0.11372307692307693, 'fraction_numerical': 0.004553846153846154, 'mean_word_length': 2.3316933169331695, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 19, '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': '5134898', 'n_tokens_mistral': 2230, 'n_tokens_neox': 2166, 'n_words': 548}