<commit_before>'use strict';

var React = require('react'),
    map = require('lodash/collection/map'),
    filter = require('lodash/collection/filter'),
    find = require('lodash/collection/find'),
    tinyscrollbar = require('../vendors/tinyscrollbar'),
    ToolBarButton = require('./toolbar_button'),
    CodeEditor = require('./code_editor'),
    Browser = require('./browser'),
    Terminal = require('./terminal'),
    Libraries = require('../libraries'),
    useScrollbarPlugin = true,// !global.navigator.userAgent.match(/macintosh/ig),
    TabsContainer;

TabsContainer = React.createClass({
  getInitialState: function() {
    return { isOptionsListVisible: false, isModalVisible: false };
  },
  componentDidMount: function() {
    var codeBasket = this.props.app,
        inSimpleMode = this.props.simple,
        container = this.refs['tabs-container'];

    this.scrollToActiveItem();
    container.addEventListener('move', this.applyScrollShadow);

    if (inSimpleMode) {
      return;
    }

    this.props.parentView.tabsContainer = this.props.parentView.tabsContainer || this;

    if (this.refs.editor) {
      codeBasket.editor = this.refs.editor.editor;

      global.addEventListener('codebasket:ready', function() {
        var editorReadyEvent = global.document.createEvent('CustomEvent');
        editorReadyEvent.initCustomEvent('codebasket:editorready', true, true, {
          codeBasket: codeBasket
        });

        global.dispatchEvent(editorReadyEvent);
      });
    }
  },
  componentDidUpdate: function() {
    if (this.refs.editor) {
      this.props.app.editor = this.refs.editor.editor;
    }

    if (useScrollbarPlugin) {
      this.scrollToActiveItem();
      setTimeout(this.scrollToActiveItem, 710);
    }
  },
  applyScrollShadow: function() {
    var container = this.refs['tabs-container'];

    if (!container) {
      return;
    }

    var overview = container.querySelector('.console-tabs .overview'),
        viewport = container.querySelector('.console-tabs .viewport'),
        overviewParentWidth,
        overviewOffsetLeft,
        overviewOffsetWidth,
        delta;

    if (global.requestAnimationFrame || global.webkitRequestAnimationFrame) {
      (global.requestAnimationFrame || global.webkitRequestAnimationFrame)(function() {
        overviewParentWidth = overview.parentElement.offsetWidth;
        overviewOffsetWidth = overview.offsetWidth;
        overviewOffsetLeft = overview.offsetLeft;
        delta = (overviewParentWidth - overviewOffsetWidth);

        if (overviewOffsetLeft <= delta) {
          viewport.classList.remove('offset-right');
        }
        else {
          viewport.classList.add('offset-right');
        }

        if (overviewOffsetLeft === 0) {
          viewport.classList.remove('offset-left');
        }
        else {
          viewport.classList.add('offset-left');
        }
      });
    }
  },
  scrollToActiveItem: function() {
    var codeBasket = this.props.app,
        visibleItems = filter(this.props.items, function(item) { return item.isVisible; }),
        activeItem = find(visibleItems, function(item) { return item.isActive; }),
        container = this.refs['tabs-container'];

    if (!activeItem) {
      return;
    }

    if (!container) {
      return;
    }

    var overview = container.querySelector('.console-tabs .overview'),
        viewport = container.querySelector('.console-tabs .viewport'),
        viewportWidth = viewport.clientWidth,
        overviewWidth = overview.clientWidth,
        tabActive = container.querySelector('.console-tab.active');

    if (!tabActive) {
      return;
    }

    var activeItemWidth = tabActive.offsetWidth,
        activeItemOffsetLeft = tabActive.offsetLeft,
        scroll = (overviewWidth > viewportWidth) ? (activeItemWidth - (viewportWidth - activeItemOffsetLeft)) : (0);

        scroll = (scroll < 0 ? 0 : scroll);

    if (useScrollbarPlugin) {
      tinyscrollbar(container, { axis: 'x' }).update(scroll);
      this.applyScrollShadow();
    }
  },
  onClickTab: function(item, index, event) {
    event.preventDefault();

    var codeBasket = this.props.app;
    codeBasket.selectItem(item, index);

    if (item.type === 'file') {
      if (item.session && codeBasket.editor) {
        codeBasket.editor.focus();
      }
    }
    else {
      if (item.tabPage && item.tabPage.refs.frame) {
        item.tabPage.refs.frame.contentWindow.focus();
      }
      else {
        if (this.refs['tabpage-' + item.id] && this.refs['tabpage-' + item.id].contentWindow) {
          this.refs['tabpage-' + item.id].contentWindow.focus();
        }
      }
    }
  },
  onDoubleClickTab: function(item, index, event) {
    event.preventDefault();
    event.stopPropagation();

    var codeBasket = this.props.app,
        oldName = item.name,
        newName = prompt('Enter the new name', item.name);

    if (newName && newName !== '') {
      codeBasket.renameItem(item, newName);

      var renameItemEvent = global.document.createEvent('CustomEvent');
      renameItemEvent.initCustomEvent('codebasket:renameitem', true, true, {
        codeBasket: codeBasket,
        item: item,
        oldName: oldName,
        newName: newName
      });

      global.dispatchEvent(renameItemEvent);
    }
  },
  closeTab: function(item, index, event) {
    event.preventDefault();
    event.stopPropagation();

    var codeBasket = this.props.app,
        visibleItems = filter(this.props.items, function(item) { return item.isVisible; });

    item.isVisible = false;

    if (visibleItems.length > 0 && visibleItems[index - 1]) {
      codeBasket.selectItem(visibleItems[index - 1]);
    }
    else {
      this.render();
    }

    var closeItemEvent = global.document.createEvent('CustomEvent');
    closeItemEvent.initCustomEvent('codebasket:closeitem', true, true, {
      codeBasket: codeBasket,
      item: item
    });

    global.dispatchEvent(closeItemEvent);
  },
  closeOptionsList: function(callback, event) {
    this.setState({ isOptionsListVisible: false });
    callback(event);
  },
  toggleOptions: function() {
    this.setState({ isOptionsListVisible: !this.state.isOptionsListVisible });
  },
  toggleModal: function() {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  },
  toggleLibrary: function(library) {
    var codeBasket = this.props.app;

    codeBasket.toggleLibrary(library);

    this.setState({ libraries: codeBasket.libraries });
  },
  onChangeEditText: function(item, event) {
    item.name = event.target.value;
  },
  renderTab: function renderTab(item, index) {
    var closeButton,
        editText,
        onClick = this.onClickTab.bind(null, item, index),
        onDoubleClick = this.onDoubleClickTab.bind(null, item, index),
        typeClass = (' ' + (item.type || 'page')),<commit_msg>Hide options list after click an option<commit_after>'use strict';

var React = require('react'),
    map = require('lodash/collection/map'),
    filter = require('lodash/collection/filter'),
    find = require('lodash/collection/find'),
    tinyscrollbar = require('../vendors/tinyscrollbar'),
    ToolBarButton = require('./toolbar_button'),
    CodeEditor = require('./code_editor'),
    Browser = require('./browser'),
    Terminal = require('./terminal'),
    Libraries = require('../libraries'),
    useScrollbarPlugin = true,// !global.navigator.userAgent.match(/macintosh/ig),
    TabsContainer;

TabsContainer = React.createClass({
  getInitialState: function() {
    return { isOptionsListVisible: false, isModalVisible: false };
  },
  componentDidMount: function() {
    var codeBasket = this.props.app,
        inSimpleMode = this.props.simple,
        container = this.refs['tabs-container'];

    this.scrollToActiveItem();
    container.addEventListener('move', this.applyScrollShadow);

    if (inSimpleMode) {
      return;
    }

    this.props.parentView.tabsContainer = this.props.parentView.tabsContainer || this;

    if (this.refs.editor) {
      codeBasket.editor = this.refs.editor.editor;

      global.addEventListener('codebasket:ready', function() {
        var editorReadyEvent = global.document.createEvent('CustomEvent');
        editorReadyEvent.initCustomEvent('codebasket:editorready', true, true, {
          codeBasket: codeBasket
        });

        global.dispatchEvent(editorReadyEvent);
      });
    }
  },
  componentDidUpdate: function() {
    if (this.refs.editor) {
      this.props.app.editor = this.refs.editor.editor;
    }

    if (useScrollbarPlugin) {
      this.scrollToActiveItem();
      setTimeout(this.scrollToActiveItem, 710);
    }
  },
  applyScrollShadow: function() {
    var container = this.refs['tabs-container'];

    if (!container) {
      return;
    }

    var overview = container.querySelector('.console-tabs .overview'),
        viewport = container.querySelector('.console-tabs .viewport'),
        overviewParentWidth,
        overviewOffsetLeft,
        overviewOffsetWidth,
        delta;

    if (global.requestAnimationFrame || global.webkitRequestAnimationFrame) {
      (global.requestAnimationFrame || global.webkitRequestAnimationFrame)(function() {
        overviewParentWidth = overview.parentElement.offsetWidth;
        overviewOffsetWidth = overview.offsetWidth;
        overviewOffsetLeft = overview.offsetLeft;
        delta = (overviewParentWidth - overviewOffsetWidth);

        if (overviewOffsetLeft <= delta) {
          viewport.classList.remove('offset-right');
        }
        else {
          viewport.classList.add('offset-right');
        }

        if (overviewOffsetLeft === 0) {
          viewport.classList.remove('offset-left');
        }
        else {
          viewport.classList.add('offset-left');
        }
      });
    }
  },
  scrollToActiveItem: function() {
    var codeBasket = this.props.app,
        visibleItems = filter(this.props.items, function(item) { return item.isVisible; }),
        activeItem = find(visibleItems, function(item) { return item.isActive; }),
        container = this.refs['tabs-container'];

    if (!activeItem) {
      return;
    }

    if (!container) {
      return;
    }

    var overview = container.querySelector('.console-tabs .overview'),
        viewport = container.querySelector('.console-tabs .viewport'),
        viewportWidth = viewport.clientWidth,
        overviewWidth = overview.clientWidth,
        tabActive = container.querySelector('.console-tab.active');

    if (!tabActive) {
      return;
    }

    var activeItemWidth = tabActive.offsetWidth,
        activeItemOffsetLeft = tabActive.offsetLeft,
        scroll = (overviewWidth > viewportWidth) ? (activeItemWidth - (viewportWidth - activeItemOffsetLeft)) : (0);

        scroll = (scroll < 0 ? 0 : scroll);

    if (useScrollbarPlugin) {
      tinyscrollbar(container, { axis: 'x' }).update(scroll);
      this.applyScrollShadow();
    }
  },
  onClickTab: function(item, index, event) {
    event.preventDefault();

    var codeBasket = this.props.app;
    codeBasket.selectItem(item, index);

    if (item.type === 'file') {
      if (item.session && codeBasket.editor) {
        codeBasket.editor.focus();
      }
    }
    else {
      if (item.tabPage && item.tabPage.refs.frame) {
        item.tabPage.refs.frame.contentWindow.focus();
      }
      else {
        if (this.refs['tabpage-' + item.id] && this.refs['tabpage-' + item.id].contentWindow) {
          this.refs['tabpage-' + item.id].contentWindow.focus();
        }
      }
    }
  },
  onDoubleClickTab: function(item, index, event) {
    event.preventDefault();
    event.stopPropagation();

    var codeBasket = this.props.app,
        oldName = item.name,
        newName = prompt('Enter the new name', item.name);

    if (newName && newName !== '') {
      codeBasket.renameItem(item, newName);

      var renameItemEvent = global.document.createEvent('CustomEvent');
      renameItemEvent.initCustomEvent('codebasket:renameitem', true, true, {
        codeBasket: codeBasket,
        item: item,
        oldName: oldName,
        newName: newName
      });

      global.dispatchEvent(renameItemEvent);
    }
  },
  closeTab: function(item, index, event) {
    event.preventDefault();
    event.stopPropagation();

    var codeBasket = this.props.app,
        visibleItems = filter(this.props.items, function(item) { return item.isVisible; });

    item.isVisible = false;

    if (visibleItems.length > 0 && visibleItems[index - 1]) {
      codeBasket.selectItem(visibleItems[index - 1]);
    }
    else {
      this.render();
    }

    var closeItemEvent = global.document.createEvent('CustomEvent');
    closeItemEvent.initCustomEvent('codebasket:closeitem', true, true, {
      codeBasket: codeBasket,
      item: item
    });

    global.dispatchEvent(closeItemEvent);
  },
  closeOptionsList: function(callback, event) {
    this.setState({ isOptionsListVisible: false });

    if (callback) {
      callback(event);
    }
  },
  toggleOptions: function() {
    this.setState({ isOptionsListVisible: !this.state.isOptionsListVisible });
  },
  toggleModal: function() {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  },
  toggleLibrary: function(library) {
    var codeBasket = this.props.app;

    codeBasket.toggleLibrary(library);

    this.setState({ libraries: codeBasket.libraries });
  },
  onChangeEditText: function(item, event) {
    item.name = event.target.value;
  },
  renderTab: function renderTab(item, index) {
    var closeButton,
        editText,
        onClick = this.onClickTab.bind(null, item, index),
        onDoubleClick = this.onDoubleClickTab.bind(null, item, index),
        typeClass = (' ' + (item.type || 'page')),
{'fraction_non_alphanumeric': 0.13275950105769932, 'fraction_numerical': 0.0014588956160186738, 'mean_word_length': 2.9373923032739806, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, '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': '6937827', 'n_tokens_mistral': 4010, 'n_tokens_neox': 3934, 'n_words': 687}