vlibras-web.js 7.5 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 vwLinks    = vwPlayer.querySelector('.vw-links');
    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) {
      if (progress >= 1) {
        deactivateAll()
        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');
      vwPlayer.classList.add('error');
      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, entre em contato com o administrador da página.'
      }
    });

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

      if (VLibrasWeb.lastTextElement) {
        var span = VLibrasWeb.lastTextElement.querySelector('span');
        span.classList.add('vw-text-active');

        vwProgress.style.width = 0;
      }

      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.textContent;
      var newSpeed = (actualSpeed % 4) + 1;

      VLibrasPlayer.setSpeed(newSpeed * 0.5);
      this.textContent = 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();
      close();
    });

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

      minimize();
    });
    
    function hasParent(el, fn) {
      var node = el.parentNode;
      while ( node != null ) {
        if (fn(node)) return node;
        node = node.parentNode;
      }
      
      return false;
    }

    function showLinks(content) {
      var links = Array.prototype.slice.call(content.querySelectorAll('a'));
      var linksList = vwLinks.querySelector('ul');
      
      var link = hasParent(content, function (parent) { return parent.tagName == 'A'; });
      if (link) {
        links.push(link);
      }

      linksList.innerHTML = '';
      for(var i = 0; i < links.length; i++) {
        var link = links[i];
        var li = document.createElement('li');
        li.innerHTML = '<a href="' + (link.href || '') + '" target="' + link.target + '">' + link.textContent + '</a>';
        linksList.appendChild(li);
      }

      if (links.length > 0) {
        vwLinks.classList.add('active');
      } else {
        vwLinks.classList.remove('active');
      }
    }

    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.parentNode;

          showLinks(this);

          window.VLibrasPlayer.stop();
          window.VLibrasPlayer.translate(this.textContent);

          deactivateAll();

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

    function removeTagsTexts() {
      var tagsTexts = document.querySelectorAll('.vw-text');
      for (var i = 0; i < tagsTexts.length; i++) {
        var parent  = tagsTexts[i].parentNode;
        parent.innerHTML = tagsTexts[i].innerHTML;
      }
    }

    function getAllNodeTexts(root, callback) {
      var noop = function () {};
      var headElements = ['SCRIPT', 'TITLE', 'META', 'STYLE', 'LINK', 'BASE'];

      for(var i = 0; i < root.childNodes.length; i++) {
        var node    = root.childNodes[i];
        var anyText = false;

        if (headElements.indexOf(node.tagName) != -1) {
          continue;
        }

        for(var j = 0; j < node.childNodes.length; 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');
    }

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

    function deactivateAll() {
      var active = document.querySelector('.vw-text.vw-text-active');
      if (active) {
        active.classList.remove('vw-text-active');
      }
    }
  };
})(window, document);