vlibras-web.js 6.31 KB
(function (window, document) {
  VLibrasWeb = {
    path: 'VLibrasWeb',
    lastTextElement: undefined
  };

  VLibrasWeb.init = function (path) {
    if (path) this.path = path + '/VLibrasWeb';

    var player = document.createElement('script');
    player.src = this.path + '/vlibras-player.js';

    player.onload = function () {
      document.querySelector('.vlibras-widget').classList.add('active');
      VLibrasWeb.run(window.VLibrasPlayer);
    }

    document.body.appendChild(player);
  };

  VLibrasWeb.loadPlayer = function (canvas) {
    window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas);
  };

  VLibrasWeb.run = function (VLibrasPlayer) {
    var vw         = document.querySelector('.vlibras-widget');
    var vwAccess   = vw.querySelector('.vw-btn-access');
    var vwPlayer   = vw.querySelector('.vw-player');

    var vwClose    = vwPlayer.querySelector('.vw-btn-close');
    var vwSide     = vwPlayer.querySelector('.vw-btn-side');
    var vwControls = vwPlayer.querySelector('.vw-controls');
    var vwCanvas   = vwPlayer.querySelector('.vw-canvas-wrapper');
    var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
    var vwLoading  = vwPlayer.querySelector('.vw-loading');

    var vwProgress = vwControls.querySelector('.vw-progress');
    var vwSpeed    = vwControls.querySelector('.vw-speed');
    var vwWindow   = vwControls.querySelector('.vw-window');
    var vwPlay     = vwControls.querySelector('.vw-play');

    VLibrasPlayer.addProgressListener(function (progress) {
      var vwText = document.querySelector('.vw-text.active');
      if (progress >= 1 && vwText) {
        vwText.classList.remove('active');
        progress = 0;
      }

      vwProgress.style.width = (progress * 100) + '%';
    });

    VLibrasPlayer.addTranslateStartListener(function () {
      vwLoading.classList.add('active');
    });

    VLibrasPlayer.addLoadListener(function () {
      vwLoading.classList.remove('active');
      vwCanvas.querySelector('.vw-canvas').classList.add('active');
      vwPlayer.classList.add('loaded');

      if (vwPlayer.classList.contains('active')) {
        addTagsTexts();
      }

      VLibrasPlayer.play('SELECIONAR TEXTO TRADUZIR');
    });

    VLibrasPlayer.addTranslateEndListener(function () {
      vwLoading.classList.remove('active');
    });

    VLibrasPlayer.addErrorListener(function (err) {
      var vwError = vwCanvas.querySelector('.vw-error');
      vwError.classList.add('active');
      switch(err) {
        case 'unsupported':
          vwError.innerHTML = 'O seu navegador não é compatível com este widget.';
        break;
        case 'broken':
          vwError.innerHTML = 'Reinicie o navegador após a instalação.';
        break;
        case 'missing':
          vwError.innerHTML = 'Por favor, instale o <a href="http://unity3d.com/webplayer/" target="_blank">Unity WebPlayer</a>.';
        break;
        default:
          vwError.innerHTML = 'Ocorreu um erro. Por favor, recarregue a página.'
        break;
      }
    });

    vwPlay.addEventListener('click', function (e) {
      e.preventDefault();

      if (VLibrasWeb.lastTextElement) {
        VLibrasWeb.lastTextElement.dispatchEvent(
          new MouseEvent('click')
        );
      }

      VLibrasPlayer.play();
    });

    vwSubtitle.addEventListener('click', function (e) {
      e.preventDefault();

      vwSubtitle.classList.toggle('active');
      VLibrasPlayer.switchSubtitle();
    })

    vwWindow.addEventListener('click', function (e) {
      e.preventDefault();

      vw.classList.toggle('maximize');
      vwWindow.classList.toggle('active');
    });

    vwSpeed.addEventListener('click', function (e) {
      e.preventDefault();

      var actualSpeed = vwSpeed.innerText;
      var newSpeed = (actualSpeed % 4) + 1;

      VLibrasPlayer.setSpeed(newSpeed * 0.5);
      this.innerText = newSpeed;
    });

    vwAccess.addEventListener('click', function () {
      vwPlayer.classList.add('active');
      vwAccess.classList.add('inactive');

      if (VLibrasPlayer.isLoaded()) {
        addTagsTexts();
      } else {
        VLibrasWeb.loadPlayer(vwCanvas);
      }
    });

    vwClose.addEventListener('click', function () {
      vwPlayer.classList.remove('active');
      vwAccess.classList.remove('inactive');
      vw.classList.remove('left');

      minimize();

      removeTagsTexts();
      VLibrasPlayer.stop();
      vwProgress.style.width = 0;
    });

    vwSide.addEventListener('click', function () {
      vw.classList.toggle('left');

      minimize();
    });

    function addTagsTexts() {
      getAllNodeTexts(document.body, function (node) {
        if (vw.contains(node)) return;

        node.innerHTML = '<span>' + node.innerHTML + '</span>';

        var span = node.querySelector('span');
        span.classList.add('vw-text');

        span.addEventListener('click', function (e) {
          e.preventDefault();

          vwProgress.style.width = 0;

          VLibrasWeb.lastTextElement = this;
          window.VLibrasPlayer.translate(this.textContent);

          var actives = document.querySelector('.vw-text.vw-text-active');
          if (actives) {
            actives.classList.remove('vw-text-active');
          }

          this.classList.add('vw-text-active');
        });
      });
    }

    function removeTagsTexts() {
      var tagsTexts = document.querySelectorAll('.vw-text');
      for (var i = 0; i < tagsTexts; i++) {
        var span      = tagsTexts[i].querySelector('span');
        tagsTexts[i].innerHTML = span.innerHTML;
        tagsTexts[i].classList.remove('.vw-text');
        tagsTexts[i].classList.remove('.vw-text-active');
      }
    }

    function getAllNodeTexts(root, callback) {
      var noop = function () {};

      for(var i = 0; i < root.childNodes.length; i++) {
        var node    = root.childNodes[i];
        var anyText = false;
        for(var j = 0; j < node.childNodes.length && node.tagName != 'SCRIPT'; j++) {
          var child = node.childNodes[j];
          if (child.nodeType == Node.TEXT_NODE && child.nodeValue.trim() != '') {
            anyText = true;
            break;
          }
        }

        if (anyText) {
          (callback || noop)(node);
        } else {
          getAllNodeTexts(node, callback);
        }
      }
    }

    function minimize() {
      vw.classList.remove('maximize');
      vwWindow.classList.remove('active');
    }
  };
})(window, document);