{"size": 1894, "ext": "js", "max_stars_repo_path": "lib/ui/welcome-modal.js", "max_stars_repo_name": "kdzwinel/EmulatedDeviceLab", "max_stars_repo_stars_event_min_datetime": "2015-03-01T22:13:13.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-26T02:17:52.000Z", "max_issues_repo_path": "lib/ui/welcome-modal.js", "max_issues_repo_name": "kdzwinel/EmulatedDeviceLab", "max_issues_repo_issues_event_min_datetime": "2015-02-05T11:54:35.000Z", "max_issues_repo_issues_event_max_datetime": "2015-03-01T21:03:02.000Z", "max_forks_repo_path": "lib/ui/welcome-modal.js", "max_forks_repo_name": "kdzwinel/EmulatedDeviceLab", "max_forks_repo_forks_event_min_datetime": "2015-03-01T22:30:54.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-16T00:02:40.000Z"}
{"max_stars_count": 108, "max_issues_count": 19, "max_forks_count": 16, "avg_line_length": 24.9210526316, "max_line_length": 96, "alphanum_fraction": 0.6282998944}
import Modal from './modal';

var template = document.getElementById('welcome-modal-tpl');

class WelcomeModal extends Modal {
  constructor() {
    super();

    var welcomeElement = document.importNode(template.content, true);
    this.setContent(welcomeElement);

    var rootElement = this._rootElement;

    rootElement.classList.add('welcome-modal');

    rootElement.querySelector('.next-step').addEventListener('click', this.nextStep.bind(this));

    this._stepsCount = rootElement.querySelectorAll('.step').length;
    this._stepIdx = 0;

    this._updateSteps();
  }

  nextStep() {
    if(this._stepIdx < this._stepsCount - 1) {
      this._stepIdx++;
      this._updateSteps();
    } else {
      this.close();
    }
  }

  _updateSteps() {
    var steps = this._rootElement.querySelectorAll('.step');
    var count = this._rootElement.querySelector('.count');
    var currentStep = this._rootElement.querySelector('.step.visible');

    if(currentStep) {
      currentStep.classList.remove('visible');
    }

    currentStep = steps[this._stepIdx];
    if(currentStep) {
      currentStep.classList.add('visible');

      count.innerText = (this._stepIdx + 1) + '/' + steps.length;

      if(currentStep.dataset.height) {
        this.setHeight(currentStep.dataset.height);
      }

      if(currentStep.dataset.width) {
        this.setWidth(currentStep.dataset.width);
      }

      var video = currentStep.querySelector('video');
      if(video) {
        var playButton = currentStep.querySelector('button.play');

        playButton.addEventListener('click', () => {
          video.play();
          video.parentNode.classList.add('playing');
        });

        video.addEventListener('ended', () => {
          setTimeout(() => {
            video.parentNode.classList.remove('playing');
          }, 1000);
        });

      }
    }
  }
}

export default WelcomeModal;