diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0a21c3d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +VLibrasWeb/Player/* +*.zip \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3f9e9c5 --- /dev/null +++ b/README.md @@ -0,0 +1,46 @@ +VLibras Web +=========== + +Instalação +------------- + +1. Adicione o seguinte trecho HTML: + +```html +
+ + +
+
+ < + X +
+ + +
+
+``` + +2. Adicione os arquivos `.css` e `.js` na página: + +```html + + + + + ... + + +``` + +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 diff --git a/VLibrasWeb/Images/acessibilidade-ico.jpeg b/VLibrasWeb/Images/acessibilidade-ico.jpeg new file mode 100644 index 0000000..4472831 Binary files /dev/null and b/VLibrasWeb/Images/acessibilidade-ico.jpeg differ diff --git a/VLibrasWeb/Images/acessibilidade-ico.png b/VLibrasWeb/Images/acessibilidade-ico.png new file mode 100644 index 0000000..7290eb2 Binary files /dev/null and b/VLibrasWeb/Images/acessibilidade-ico.png differ diff --git a/VLibrasWeb/Images/close.png b/VLibrasWeb/Images/close.png new file mode 100644 index 0000000..cc0302f Binary files /dev/null and b/VLibrasWeb/Images/close.png differ diff --git a/VLibrasWeb/Images/fullscreen.png b/VLibrasWeb/Images/fullscreen.png new file mode 100644 index 0000000..9e9f17d Binary files /dev/null and b/VLibrasWeb/Images/fullscreen.png differ diff --git a/VLibrasWeb/Images/minimize.png b/VLibrasWeb/Images/minimize.png new file mode 100644 index 0000000..2e41941 Binary files /dev/null and b/VLibrasWeb/Images/minimize.png differ diff --git a/VLibrasWeb/Images/play.png b/VLibrasWeb/Images/play.png new file mode 100644 index 0000000..ace2cc8 Binary files /dev/null and b/VLibrasWeb/Images/play.png differ diff --git a/VLibrasWeb/Images/subtitle-inactive.png b/VLibrasWeb/Images/subtitle-inactive.png new file mode 100644 index 0000000..fb8e048 Binary files /dev/null and b/VLibrasWeb/Images/subtitle-inactive.png differ diff --git a/VLibrasWeb/Images/subtitle.png b/VLibrasWeb/Images/subtitle.png new file mode 100644 index 0000000..5babbe8 Binary files /dev/null and b/VLibrasWeb/Images/subtitle.png differ diff --git a/VLibrasWeb/vlibras-player.js b/VLibrasWeb/vlibras-player.js new file mode 100644 index 0000000..a3b674a --- /dev/null +++ b/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 diff --git a/VLibrasWeb/vlibras-web.css b/VLibrasWeb/vlibras-web.css new file mode 100644 index 0000000..dd9f8ec --- /dev/null +++ b/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 diff --git a/VLibrasWeb/vlibras-web.js b/VLibrasWeb/vlibras-web.js new file mode 100644 index 0000000..c23653d --- /dev/null +++ b/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); diff --git a/index.html b/index.html new file mode 100644 index 0000000..021f898 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + +

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.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident incidunt voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?

+ +
+
+ + + Acessível em Libras + +
+
+
+
+ +
+ + +
+ +
+
+ + +
+ +
+ +
+
+ +
+
+
+
+ 2 + + + + +
+
+
+ + + + + \ No newline at end of file -- libgit2 0.21.2