Pre-beta release

David Guilherme
Showing 14 changed files with 555 additions and 0 deletions Show diff stats
.gitignore
README.md
VLibrasWeb/Images/acessibilidade-ico.jpeg
VLibrasWeb/Images/acessibilidade-ico.png
VLibrasWeb/Images/close.png
VLibrasWeb/Images/fullscreen.png
VLibrasWeb/Images/minimize.png
VLibrasWeb/Images/play.png
VLibrasWeb/Images/subtitle-inactive.png
VLibrasWeb/Images/subtitle.png
VLibrasWeb/vlibras-player.js
VLibrasWeb/vlibras-web.css
VLibrasWeb/vlibras-web.js
index.html
+++ a/.gitignore
@@ -0,0 +1,2 @@
+VLibrasWeb/Player/*
+*.zip
 \ No newline at end of file
+++ a/README.md
@@ -0,0 +1,46 @@
+VLibras Web
+===========
+
+Instalação
+-------------
+
+1. Adicione o seguinte trecho HTML:
+
+```html
+<div class="vlibras-widget">
+  <img class="vw-btn-access" src="VLibrasWeb/Images/acessibilidade-ico.png" />
+
+  <div class="vw-player">
+    <div class="vw-topbar">
+      <span class="vw-btn-side"><</span>
+      <span class="vw-btn-close">X</span>
+    </div>
+
+    <canvas class="vw-canvas emscripten"></canvas>
+  </div>
+</div>
+```
+
+2. Adicione os arquivos `.css` e `.js` na página:
+
+```html
+<head>
+  <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css" />
+</head>
+<body>
+  ...
+  <script src="VLibrasWeb/vlibras-web.js"></script>
+</body>
+```
+
+3. Finalmente, inicialize o VLibrasWeb
+
+```js
+// Default: Se a pasta VLibrasWeb estiver na mesma pasta do arquivo index
+VLibrasWeb.init();
+
+// Custom:  Passe o caminho da pasta VLibrasWeb
+VLibrasWeb.init('another/path');
+```
+
+** Enjoy **
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-player.js
@@ -0,0 +1,93 @@
+(function (window, document) {
+  function VLibrasPlayer() {
+    this.loaded      = false;
+    this.glosa       = undefined;
+    this.canvas      = document.querySelector('#vlibras-canvas');
+    this.initialized = false;
+  }
+
+  VLibrasPlayer.prototype.translate = function (text) {
+    var self = this;
+    text = encodeURI(text);
+
+    getGlosa('http://150.165.204.30/glosa?texto=' + text,
+      function (status, response) {
+        self.glosa = response || decodeURI(text).toUpperCase();
+        self.play();
+      });
+  };
+
+  VLibrasPlayer.prototype.play = function () {
+    if (this.glosa !== undefined && this.loaded === true) {
+      window.SendMessage('PlayerManager', 'catchGlosa', this.glosa);
+    }
+  };
+
+  VLibrasPlayer.prototype.setSpeed = function (speed) {
+    window.SendMessage('PlayerManager', 'setSlider', speed);
+  };
+
+  VLibrasPlayer.prototype.switchSubtitle = function () {
+    window.SendMessage('PlayerManager', 'switchSubtitleStatus');
+  };
+
+  VLibrasPlayer.prototype.addProgressListener = function (callback) {
+    this.onprogress = callback;
+  };
+
+  VLibrasPlayer.prototype.load = function () {
+    this.loaded = true;
+    this.play();
+  };
+
+  VLibrasPlayer.prototype.getCanvasElement = function () {
+    return this.canvas;
+  };
+
+  VLibrasPlayer.prototype.getPath = function () {
+    return this.path;
+  };
+
+  VLibrasPlayer.prototype.initialize = function (path, canvas, callback) {
+    var noop = function () {};
+
+    if (this.initialized) {
+      (callback || noop)();
+      return;
+    }
+
+    this.canvas = canvas;
+    this.path   = path;
+
+    var script = document.createElement('script');
+    script.src = path + '/Player/Release/Setup.js';
+    document.body.appendChild(script);
+
+    script.onload = (callback || noop);
+
+    this.initialized = true;
+  };
+
+  window.onLoadPlayer = function () {
+    this.VLibrasPlayer.load();
+  };
+
+  window.updateProgress = function (progress) {
+    var noop = function () {};
+    (this.VLibrasPlayer.onprogress || noop)(progress);
+  };
+
+  window.VLibrasPlayer = new VLibrasPlayer();
+
+  function getGlosa(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState != 4) return;
+      callback(xhr.status, xhr.responseText);
+    };
+
+    xhr.send();
+  };
+})(window, document);
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-web.css
@@ -0,0 +1,207 @@
+.vlibras-widget {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  margin-top: -225px;
+  z-index: 9999;
+  display: none;
+}
+
+.vlibras-widget.active {
+  display: block;
+}
+
+.vlibras-widget.maximize {
+  bottom: 40px;
+  margin-top 0;
+  top: initial;
+  right: 50%;
+  margin-right: -275px;
+}
+
+.vlibras-widget.maximize .vw-player {
+  height: 550px;
+  width: 550px !important;
+}
+
+.vlibras-widget.maximize .vw-canvas-wrapper {
+  height: 468px;
+}
+
+.vlibras-widget.left {
+  left: 0;
+  right: initial;
+}
+
+.vlibras-widget.left .vw-player {
+  float: left;
+}
+
+.vlibras-widget .vw-btn-access {
+  width: 70px;
+  padding: 5px;
+  text-align: center;
+
+  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+}
+
+.vw-btn-access img {
+  margin-bottom: 5px;
+  width: 70px;
+  height: 70px;
+}
+
+.vw-btn-access span {
+  font-size: 15px;
+  color: #004088;
+}
+
+.vlibras-widget .vw-btn-access.inactive {
+  display: none;
+}
+
+.vlibras-widget .vw-player {
+  display: none;
+  width: 0;
+  height: 450px;
+  float: right;
+
+  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+}
+
+.vlibras-widget .vw-player.active {
+  width: 320px;
+  display: block;
+}
+
+.vw-player .vw-canvas-wrapper {
+  position: relative;
+  width: 100%;
+  height: 370px;
+  background-color: #ebebeb;
+}
+
+.vw-canvas-wrapper .vw-subtitle {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on {
+  display: block;
+}
+
+.vw-subtitle .vw-subtitle-on, .vw-subtitle.active .vw-subtitle-off {
+  display: none;
+}
+
+.vw-canvas-wrapper .vw-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.vw-player .vw-topbar {
+  padding: 8.5px 10px;
+  height: 20px;
+  background-color: #004088;
+  color: #fff;
+}
+
+.vw-player .vw-btn-close {
+  float: right;
+  height: 100%;
+}
+
+.vw-player .vw-btn-side {
+  float: left;
+  border: 1px solid #fff;
+  background-color: #fff;
+  width: 2em;
+  margin: 0;
+}
+
+.vw-btn-side .vw-arrow {
+  background-color: #004088;
+  float: right;
+  width: 50%;
+  text-align: center;
+}
+
+.vw-btn-side .vw-arrow:after {
+  content: "<";
+}
+
+.vlibras-widget.left .vw-arrow {
+  float: left;
+}
+
+.vlibras-widget.left .vw-arrow:after {
+  content: ">";
+}
+
+.vlibras-widget .vw-controls {
+  width: 100%;
+  padding: 8.5px 10px;
+  background-color: #fff;
+
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+}
+
+.vw-controls .vw-play {
+  height: 28px;
+}
+
+.vw-play img {
+  height: 100%;
+}
+
+.vw-controls .vw-progressbar {
+  margin: 0 13px;
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+}
+
+.vw-progressbar .vw-progress {
+  background-color: #ff2323;
+  width: 0;
+  height: 100%;
+}
+
+.vw-controls .vw-speed {
+  padding: 3px;
+  margin-right: 10px;
+  font-size: 19px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.vw-controls .vw-speed:before {
+  content: "x";
+}
+
+.vw-controls .vw-window {
+  height: 28px;
+}
+
+.vw-window .vw-maximize, .vw-window.active .vw-minimize {
+  display: block;
+}
+
+.vw-window .vw-minimize, .vw-window.active .vw-maximize {
+  display: none;
+}
+
+.wc-text:hover, .wc-text.active {
+  background-color: rgba(255, 102, 0, 0.5);
+}
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-web.js
@@ -0,0 +1,153 @@
+(function (window, document) {
+  VLibrasWeb = {
+    path: 'VLibrasWeb'
+  };
+
+  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, callback) {
+    window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback);
+  };
+
+  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');
+    var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
+
+    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) {
+        document.querySelector('.wc-text.active').classList.remove('active');
+        progress = 0;
+      }
+
+      vwProgress.style.width = (progress * 100) + '%';
+    });
+
+    vwPlay.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      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');
+
+      VLibrasWeb.loadPlayer(vwCanvas, function () {
+        getAllNodeTexts(document.body, function (node) {
+          if (vw.contains(node)) return;
+
+          var span = document.createElement('span');
+          span.classList.add('wc-text');
+          var parent = node.parentNode;
+
+          parent.insertBefore(span, node);
+          parent.removeChild(node);
+          span.appendChild(node);
+
+          span.addEventListener('click', function (e) {
+            e.preventDefault();
+            window.VLibrasPlayer.translate(this.textContent);
+
+            var actives = document.querySelector('.wc-text.active');
+            if (actives) {
+              actives.classList.remove('active');
+            }
+
+            this.classList.add('active');
+          });
+        });
+      });
+    });
+
+    vwClose.addEventListener('click', function () {
+      vwPlayer.classList.remove('active');
+      vwAccess.classList.remove('inactive');
+      vw.classList.remove('left');
+
+      minimize();
+
+      getAllNodeTexts(document.body, function (node) {
+        if (vw.contains(node)) return;
+
+        var span   = node.parentNode;
+        var parent = span.parentNode;
+
+        span.removeChild(node);
+        parent.insertBefore(node, span);
+        parent.removeChild(span);
+      });
+    });
+
+    vwSide.addEventListener('click', function () {
+      vw.classList.toggle('left');
+
+      minimize();
+    });
+
+    function getAllNodeTexts(root, callback) {
+      var noop = function () {};
+      var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null);
+
+      while (walk.nextNode()) {
+        var node = walk.currentNode;
+
+        if (node.textContent.trim().length > 0) {
+          (callback || noop)(node);
+        }
+      }
+    }
+
+    function minimize() {
+      vw.classList.remove('maximize');
+      vwWindow.classList.remove('active');
+    }
+  };
+})(window, document);
+++ a/index.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo odio ratione, numquam. Quisquam ex, nemo ea necessitatibus laudantium, rem natus officiis dignissimos a repudiandae, quam doloribus voluptatibus commodi sed aperiam.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident <a href="">incidunt</a> voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?</p>
+
+    <div class="vlibras-widget">
+      <div class="vw-btn-access">
+        <img src="VLibrasWeb/Images/acessibilidade-ico.jpeg" />
+        <span class="vw-text-access">
+          Acessível em Libras
+        </span>
+      </div>
+      <div class="vw-player">
+        <div class="vw-topbar">
+          <div class="vw-btn-side">
+            <span class="vw-arrow"></span>
+          </div>
+
+          <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
+        </div>
+
+        <div class="vw-canvas-wrapper">
+          <div class="vw-subtitle active">
+            <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
+            <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />
+          </div>
+          <canvas class="vw-canvas emscripten"></canvas>
+        </div>
+
+        <div class="vw-controls">
+          <div class="vw-play">
+            <img src="VLibrasWeb/Images/play.png" />
+          </div>
+          <div class="vw-progressbar">
+            <div class="vw-progress"></div>
+          </div>
+          <span class="vw-speed">2</span>
+          <span class="vw-window">
+            <img class="vw-maximize" src="VLibrasWeb/Images/fullscreen.png" />
+            <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script src="VLibrasWeb/vlibras-web.js"></script>
+    <script>
+      VLibrasWeb.init();
+    </script>
+  </body>
+</html>
 \ No newline at end of file
	1	+++ a/.gitignore
...	...	@@ -0,0 +1,2 @@
	1	+VLibrasWeb/Player/*
	2	+*.zip
0	3	\ No newline at end of file
...	...
	1	+++ a/README.md
...	...	@@ -0,0 +1,46 @@
	1	+VLibras Web
	2	+===========
	3	+
	4	+Instalação
	5	+-------------
	6	+
	7	+1. Adicione o seguinte trecho HTML:
	8	+
	9	+```html
	10	+<div class="vlibras-widget">
	11	+ <img class="vw-btn-access" src="VLibrasWeb/Images/acessibilidade-ico.png" />
	12	+
	13	+ <div class="vw-player">
	14	+ <div class="vw-topbar">
	15	+ <span class="vw-btn-side"><</span>
	16	+ <span class="vw-btn-close">X</span>
	17	+ </div>
	18	+
	19	+ <canvas class="vw-canvas emscripten"></canvas>
	20	+ </div>
	21	+</div>
	22	+```
	23	+
	24	+2. Adicione os arquivos `.css` e `.js` na página:
	25	+
	26	+```html
	27	+<head>
	28	+ <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css" />
	29	+</head>
	30	+<body>
	31	+ ...
	32	+ <script src="VLibrasWeb/vlibras-web.js"></script>
	33	+</body>
	34	+```
	35	+
	36	+3. Finalmente, inicialize o VLibrasWeb
	37	+
	38	+```js
	39	+// Default: Se a pasta VLibrasWeb estiver na mesma pasta do arquivo index
	40	+VLibrasWeb.init();
	41	+
	42	+// Custom: Passe o caminho da pasta VLibrasWeb
	43	+VLibrasWeb.init('another/path');
	44	+```
	45	+
	46	+ Enjoy
0	47	\ No newline at end of file
...	...
	1	+++ a/VLibrasWeb/vlibras-player.js
...	...	@@ -0,0 +1,93 @@
	1	+(function (window, document) {
	2	+ function VLibrasPlayer() {
	3	+ this.loaded = false;
	4	+ this.glosa = undefined;
	5	+ this.canvas = document.querySelector('#vlibras-canvas');
	6	+ this.initialized = false;
	7	+ }
	8	+
	9	+ VLibrasPlayer.prototype.translate = function (text) {
	10	+ var self = this;
	11	+ text = encodeURI(text);
	12	+
	13	+ getGlosa('http://150.165.204.30/glosa?texto=' + text,
	14	+ function (status, response) {
	15	+ self.glosa = response \|\| decodeURI(text).toUpperCase();
	16	+ self.play();
	17	+ });
	18	+ };
	19	+
	20	+ VLibrasPlayer.prototype.play = function () {
	21	+ if (this.glosa !== undefined && this.loaded === true) {
	22	+ window.SendMessage('PlayerManager', 'catchGlosa', this.glosa);
	23	+ }
	24	+ };
	25	+
	26	+ VLibrasPlayer.prototype.setSpeed = function (speed) {
	27	+ window.SendMessage('PlayerManager', 'setSlider', speed);
	28	+ };
	29	+
	30	+ VLibrasPlayer.prototype.switchSubtitle = function () {
	31	+ window.SendMessage('PlayerManager', 'switchSubtitleStatus');
	32	+ };
	33	+
	34	+ VLibrasPlayer.prototype.addProgressListener = function (callback) {
	35	+ this.onprogress = callback;
	36	+ };
	37	+
	38	+ VLibrasPlayer.prototype.load = function () {
	39	+ this.loaded = true;
	40	+ this.play();
	41	+ };
	42	+
	43	+ VLibrasPlayer.prototype.getCanvasElement = function () {
	44	+ return this.canvas;
	45	+ };
	46	+
	47	+ VLibrasPlayer.prototype.getPath = function () {
	48	+ return this.path;
	49	+ };
	50	+
	51	+ VLibrasPlayer.prototype.initialize = function (path, canvas, callback) {
	52	+ var noop = function () {};
	53	+
	54	+ if (this.initialized) {
	55	+ (callback \|\| noop)();
	56	+ return;
	57	+ }
	58	+
	59	+ this.canvas = canvas;
	60	+ this.path = path;
	61	+
	62	+ var script = document.createElement('script');
	63	+ script.src = path + '/Player/Release/Setup.js';
	64	+ document.body.appendChild(script);
	65	+
	66	+ script.onload = (callback \|\| noop);
	67	+
	68	+ this.initialized = true;
	69	+ };
	70	+
	71	+ window.onLoadPlayer = function () {
	72	+ this.VLibrasPlayer.load();
	73	+ };
	74	+
	75	+ window.updateProgress = function (progress) {
	76	+ var noop = function () {};
	77	+ (this.VLibrasPlayer.onprogress \|\| noop)(progress);
	78	+ };
	79	+
	80	+ window.VLibrasPlayer = new VLibrasPlayer();
	81	+
	82	+ function getGlosa(url, callback) {
	83	+ var xhr = new XMLHttpRequest();
	84	+ xhr.open('GET', url, true);
	85	+
	86	+ xhr.onreadystatechange = function() {
	87	+ if (xhr.readyState != 4) return;
	88	+ callback(xhr.status, xhr.responseText);
	89	+ };
	90	+
	91	+ xhr.send();
	92	+ };
	93	+})(window, document);
0	94	\ No newline at end of file
...	...
	1	+++ a/VLibrasWeb/vlibras-web.css
...	...	@@ -0,0 +1,207 @@
	1	+.vlibras-widget {
	2	+ position: fixed;
	3	+ right: 0;
	4	+ top: 50%;
	5	+ margin-top: -225px;
	6	+ z-index: 9999;
	7	+ display: none;
	8	+}
	9	+
	10	+.vlibras-widget.active {
	11	+ display: block;
	12	+}
	13	+
	14	+.vlibras-widget.maximize {
	15	+ bottom: 40px;
	16	+ margin-top 0;
	17	+ top: initial;
	18	+ right: 50%;
	19	+ margin-right: -275px;
	20	+}
	21	+
	22	+.vlibras-widget.maximize .vw-player {
	23	+ height: 550px;
	24	+ width: 550px !important;
	25	+}
	26	+
	27	+.vlibras-widget.maximize .vw-canvas-wrapper {
	28	+ height: 468px;
	29	+}
	30	+
	31	+.vlibras-widget.left {
	32	+ left: 0;
	33	+ right: initial;
	34	+}
	35	+
	36	+.vlibras-widget.left .vw-player {
	37	+ float: left;
	38	+}
	39	+
	40	+.vlibras-widget .vw-btn-access {
	41	+ width: 70px;
	42	+ padding: 5px;
	43	+ text-align: center;
	44	+
	45	+ -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	46	+ -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	47	+ box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	48	+}
	49	+
	50	+.vw-btn-access img {
	51	+ margin-bottom: 5px;
	52	+ width: 70px;
	53	+ height: 70px;
	54	+}
	55	+
	56	+.vw-btn-access span {
	57	+ font-size: 15px;
	58	+ color: #004088;
	59	+}
	60	+
	61	+.vlibras-widget .vw-btn-access.inactive {
	62	+ display: none;
	63	+}
	64	+
	65	+.vlibras-widget .vw-player {
	66	+ display: none;
	67	+ width: 0;
	68	+ height: 450px;
	69	+ float: right;
	70	+
	71	+ -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	72	+ -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	73	+ box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
	74	+}
	75	+
	76	+.vlibras-widget .vw-player.active {
	77	+ width: 320px;
	78	+ display: block;
	79	+}
	80	+
	81	+.vw-player .vw-canvas-wrapper {
	82	+ position: relative;
	83	+ width: 100%;
	84	+ height: 370px;
	85	+ background-color: #ebebeb;
	86	+}
	87	+
	88	+.vw-canvas-wrapper .vw-subtitle {
	89	+ position: absolute;
	90	+ top: 15px;
	91	+ right: 15px;
	92	+}
	93	+
	94	+.vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on {
	95	+ display: block;
	96	+}
	97	+
	98	+.vw-subtitle .vw-subtitle-on, .vw-subtitle.active .vw-subtitle-off {
	99	+ display: none;
	100	+}
	101	+
	102	+.vw-canvas-wrapper .vw-canvas {
	103	+ width: 100%;
	104	+ height: 100%;
	105	+}
	106	+
	107	+.vw-player .vw-topbar {
	108	+ padding: 8.5px 10px;
	109	+ height: 20px;
	110	+ background-color: #004088;
	111	+ color: #fff;
	112	+}
	113	+
	114	+.vw-player .vw-btn-close {
	115	+ float: right;
	116	+ height: 100%;
	117	+}
	118	+
	119	+.vw-player .vw-btn-side {
	120	+ float: left;
	121	+ border: 1px solid #fff;
	122	+ background-color: #fff;
	123	+ width: 2em;
	124	+ margin: 0;
	125	+}
	126	+
	127	+.vw-btn-side .vw-arrow {
	128	+ background-color: #004088;
	129	+ float: right;
	130	+ width: 50%;
	131	+ text-align: center;
	132	+}
	133	+
	134	+.vw-btn-side .vw-arrow:after {
	135	+ content: "<";
	136	+}
	137	+
	138	+.vlibras-widget.left .vw-arrow {
	139	+ float: left;
	140	+}
	141	+
	142	+.vlibras-widget.left .vw-arrow:after {
	143	+ content: ">";
	144	+}
	145	+
	146	+.vlibras-widget .vw-controls {
	147	+ width: 100%;
	148	+ padding: 8.5px 10px;
	149	+ background-color: #fff;
	150	+
	151	+ -webkit-box-sizing: border-box;
	152	+ -moz-box-sizing: border-box;
	153	+ box-sizing: border-box;
	154	+
	155	+ display: -webkit-flex;
	156	+ display: flex;
	157	+ align-items: center;
	158	+}
	159	+
	160	+.vw-controls .vw-play {
	161	+ height: 28px;
	162	+}
	163	+
	164	+.vw-play img {
	165	+ height: 100%;
	166	+}
	167	+
	168	+.vw-controls .vw-progressbar {
	169	+ margin: 0 13px;
	170	+ width: 100%;
	171	+ height: 3px;
	172	+ background-color: #000;
	173	+}
	174	+
	175	+.vw-progressbar .vw-progress {
	176	+ background-color: #ff2323;
	177	+ width: 0;
	178	+ height: 100%;
	179	+}
	180	+
	181	+.vw-controls .vw-speed {
	182	+ padding: 3px;
	183	+ margin-right: 10px;
	184	+ font-size: 19px;
	185	+ font-weight: bold;
	186	+ cursor: pointer;
	187	+}
	188	+
	189	+.vw-controls .vw-speed:before {
	190	+ content: "x";
	191	+}
	192	+
	193	+.vw-controls .vw-window {
	194	+ height: 28px;
	195	+}
	196	+
	197	+.vw-window .vw-maximize, .vw-window.active .vw-minimize {
	198	+ display: block;
	199	+}
	200	+
	201	+.vw-window .vw-minimize, .vw-window.active .vw-maximize {
	202	+ display: none;
	203	+}
	204	+
	205	+.wc-text:hover, .wc-text.active {
	206	+ background-color: rgba(255, 102, 0, 0.5);
	207	+}
0	208	\ No newline at end of file
...	...
	1	+++ a/VLibrasWeb/vlibras-web.js
...	...	@@ -0,0 +1,153 @@
	1	+(function (window, document) {
	2	+ VLibrasWeb = {
	3	+ path: 'VLibrasWeb'
	4	+ };
	5	+
	6	+ VLibrasWeb.init = function (path) {
	7	+ if (path) this.path = path + '/VLibrasWeb';
	8	+
	9	+ var player = document.createElement('script');
	10	+ player.src = this.path + '/vlibras-player.js';
	11	+
	12	+ player.onload = function () {
	13	+ document.querySelector('.vlibras-widget').classList.add('active');
	14	+ VLibrasWeb.run(window.VLibrasPlayer);
	15	+ }
	16	+
	17	+ document.body.appendChild(player);
	18	+ };
	19	+
	20	+ VLibrasWeb.loadPlayer = function (canvas, callback) {
	21	+ window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback);
	22	+ };
	23	+
	24	+ VLibrasWeb.run = function (VLibrasPlayer) {
	25	+ var vw = document.querySelector('.vlibras-widget');
	26	+ var vwAccess = vw.querySelector('.vw-btn-access');
	27	+ var vwPlayer = vw.querySelector('.vw-player');
	28	+
	29	+ var vwClose = vwPlayer.querySelector('.vw-btn-close');
	30	+ var vwSide = vwPlayer.querySelector('.vw-btn-side');
	31	+ var vwControls = vwPlayer.querySelector('.vw-controls');
	32	+ var vwCanvas = vwPlayer.querySelector('.vw-canvas');
	33	+ var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
	34	+
	35	+ var vwProgress = vwControls.querySelector('.vw-progress');
	36	+ var vwSpeed = vwControls.querySelector('.vw-speed');
	37	+ var vwWindow = vwControls.querySelector('.vw-window');
	38	+ var vwPlay = vwControls.querySelector('.vw-play');
	39	+
	40	+ VLibrasPlayer.addProgressListener(function (progress) {
	41	+ if (progress >= 1) {
	42	+ document.querySelector('.wc-text.active').classList.remove('active');
	43	+ progress = 0;
	44	+ }
	45	+
	46	+ vwProgress.style.width = (progress * 100) + '%';
	47	+ });
	48	+
	49	+ vwPlay.addEventListener('click', function (e) {
	50	+ e.preventDefault();
	51	+
	52	+ VLibrasPlayer.play();
	53	+ });
	54	+
	55	+ vwSubtitle.addEventListener('click', function (e) {
	56	+ e.preventDefault();
	57	+
	58	+ vwSubtitle.classList.toggle('active');
	59	+ VLibrasPlayer.switchSubtitle();
	60	+ })
	61	+
	62	+ vwWindow.addEventListener('click', function (e) {
	63	+ e.preventDefault();
	64	+
	65	+ vw.classList.toggle('maximize');
	66	+ vwWindow.classList.toggle('active');
	67	+ });
	68	+
	69	+ vwSpeed.addEventListener('click', function (e) {
	70	+ e.preventDefault();
	71	+
	72	+ var actualSpeed = vwSpeed.innerText;
	73	+ var newSpeed = (actualSpeed % 4) + 1;
	74	+
	75	+ VLibrasPlayer.setSpeed(newSpeed * 0.5);
	76	+ this.innerText = newSpeed;
	77	+ });
	78	+
	79	+ vwAccess.addEventListener('click', function () {
	80	+ vwPlayer.classList.add('active');
	81	+ vwAccess.classList.add('inactive');
	82	+
	83	+ VLibrasWeb.loadPlayer(vwCanvas, function () {
	84	+ getAllNodeTexts(document.body, function (node) {
	85	+ if (vw.contains(node)) return;
	86	+
	87	+ var span = document.createElement('span');
	88	+ span.classList.add('wc-text');
	89	+ var parent = node.parentNode;
	90	+
	91	+ parent.insertBefore(span, node);
	92	+ parent.removeChild(node);
	93	+ span.appendChild(node);
	94	+
	95	+ span.addEventListener('click', function (e) {
	96	+ e.preventDefault();
	97	+ window.VLibrasPlayer.translate(this.textContent);
	98	+
	99	+ var actives = document.querySelector('.wc-text.active');
	100	+ if (actives) {
	101	+ actives.classList.remove('active');
	102	+ }
	103	+
	104	+ this.classList.add('active');
	105	+ });
	106	+ });
	107	+ });
	108	+ });
	109	+
	110	+ vwClose.addEventListener('click', function () {
	111	+ vwPlayer.classList.remove('active');
	112	+ vwAccess.classList.remove('inactive');
	113	+ vw.classList.remove('left');
	114	+
	115	+ minimize();
	116	+
	117	+ getAllNodeTexts(document.body, function (node) {
	118	+ if (vw.contains(node)) return;
	119	+
	120	+ var span = node.parentNode;
	121	+ var parent = span.parentNode;
	122	+
	123	+ span.removeChild(node);
	124	+ parent.insertBefore(node, span);
	125	+ parent.removeChild(span);
	126	+ });
	127	+ });
	128	+
	129	+ vwSide.addEventListener('click', function () {
	130	+ vw.classList.toggle('left');
	131	+
	132	+ minimize();
	133	+ });
	134	+
	135	+ function getAllNodeTexts(root, callback) {
	136	+ var noop = function () {};
	137	+ var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null);
	138	+
	139	+ while (walk.nextNode()) {
	140	+ var node = walk.currentNode;
	141	+
	142	+ if (node.textContent.trim().length > 0) {
	143	+ (callback \|\| noop)(node);
	144	+ }
	145	+ }
	146	+ }
	147	+
	148	+ function minimize() {
	149	+ vw.classList.remove('maximize');
	150	+ vwWindow.classList.remove('active');
	151	+ }
	152	+ };
	153	+})(window, document);
...	...
	1	+++ a/index.html
...	...	@@ -0,0 +1,54 @@
	1	+<html>
	2	+ <head>
	3	+ <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
	4	+ </head>
	5	+ <body>
	6	+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo odio ratione, numquam. Quisquam ex, nemo ea necessitatibus laudantium, rem natus officiis dignissimos a repudiandae, quam doloribus voluptatibus commodi sed aperiam.</p>
	7	+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident <a href="">incidunt</a> voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?</p>
	8	+
	9	+ <div class="vlibras-widget">
	10	+ <div class="vw-btn-access">
	11	+ <img src="VLibrasWeb/Images/acessibilidade-ico.jpeg" />
	12	+ <span class="vw-text-access">
	13	+ Acessível em Libras
	14	+ </span>
	15	+ </div>
	16	+ <div class="vw-player">
	17	+ <div class="vw-topbar">
	18	+ <div class="vw-btn-side">
	19	+ <span class="vw-arrow"></span>
	20	+ </div>
	21	+
	22	+ <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
	23	+ </div>
	24	+
	25	+ <div class="vw-canvas-wrapper">
	26	+ <div class="vw-subtitle active">
	27	+ <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
	28	+ <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />
	29	+ </div>
	30	+ <canvas class="vw-canvas emscripten"></canvas>
	31	+ </div>
	32	+
	33	+ <div class="vw-controls">
	34	+ <div class="vw-play">
	35	+ <img src="VLibrasWeb/Images/play.png" />
	36	+ </div>
	37	+ <div class="vw-progressbar">
	38	+ <div class="vw-progress"></div>
	39	+ </div>
	40	+ <span class="vw-speed">2</span>
	41	+ <span class="vw-window">
	42	+ <img class="vw-maximize" src="VLibrasWeb/Images/fullscreen.png" />
	43	+ <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
	44	+ </span>
	45	+ </div>
	46	+ </div>
	47	+ </div>
	48	+
	49	+ <script src="VLibrasWeb/vlibras-web.js"></script>
	50	+ <script>
	51	+ VLibrasWeb.init();
	52	+ </script>
	53	+ </body>
	54	+</html>
0	55	\ No newline at end of file
...	...