From ea70d84a644b423c059b11d8c54b46a6820dea13 Mon Sep 17 00:00:00 2001 From: David Guilherme Date: Fri, 11 Dec 2015 01:07:33 -0300 Subject: [PATCH] Fixes --- .gitignore | 3 +++ Gulpfile.js | 16 ++++++++++++++++ README.md | 3 ++- VLibrasWeb/Images/fullbar.png | Bin 0 -> 2780 bytes VLibrasWeb/Images/loadingbar.png | Bin 0 -> 2843 bytes VLibrasWeb/Images/progresslogo.png | Bin 0 -> 21169 bytes VLibrasWeb/Player/WebGL/Setup.js | 364 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- VLibrasWeb/vlibras-player.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++-------------------- VLibrasWeb/vlibras-web.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------- VLibrasWeb/vlibras-web.js | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------- package.json | 10 ++++++++++ sample.html | 2 ++ 12 files changed, 241 insertions(+), 449 deletions(-) create mode 100644 Gulpfile.js create mode 100644 VLibrasWeb/Images/fullbar.png create mode 100644 VLibrasWeb/Images/loadingbar.png create mode 100644 VLibrasWeb/Images/progresslogo.png delete mode 100644 VLibrasWeb/Player/WebGL/Setup.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 642498d..f6a320e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,6 @@ VLibrasWeb/Player/WebPlayer/* *.zip **/*.DS_Store + +bower_components +node_modules diff --git a/Gulpfile.js b/Gulpfile.js new file mode 100644 index 0000000..c0c1b5e --- /dev/null +++ b/Gulpfile.js @@ -0,0 +1,16 @@ +var gulp = require('gulp'); +var connect = require('gulp-connect'); + +gulp.task('connect', function () { + connect.server({ + root: '.', + livereload: true + }); +}); + +gulp.task('watch', ['connect'], function () { + gulp.watch(['**/*.html', '**/*.js', '**/*.css'], function () { + gulp.src(['**/*.html', '**/*.js', '**/*.css']) + .pipe(connect.reload()); + }); +}); \ No newline at end of file diff --git a/README.md b/README.md index ea0c26b..b45b0bc 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ Instalação
+
@@ -47,7 +48,7 @@ Instalação
``` -2. Adicione os arquivos `.css` no e `.js` no final do body: +2. Adicione os arquivos `.css` no e `.js` no final do : ```html diff --git a/VLibrasWeb/Images/fullbar.png b/VLibrasWeb/Images/fullbar.png new file mode 100644 index 0000000..4ee0a14 Binary files /dev/null and b/VLibrasWeb/Images/fullbar.png differ diff --git a/VLibrasWeb/Images/loadingbar.png b/VLibrasWeb/Images/loadingbar.png new file mode 100644 index 0000000..98e0d96 Binary files /dev/null and b/VLibrasWeb/Images/loadingbar.png differ diff --git a/VLibrasWeb/Images/progresslogo.png b/VLibrasWeb/Images/progresslogo.png new file mode 100644 index 0000000..a568710 Binary files /dev/null and b/VLibrasWeb/Images/progresslogo.png differ diff --git a/VLibrasWeb/Player/WebGL/Setup.js b/VLibrasWeb/Player/WebGL/Setup.js deleted file mode 100644 index 63407cc..0000000 --- a/VLibrasWeb/Player/WebGL/Setup.js +++ /dev/null @@ -1,364 +0,0 @@ -//====================== Player Configuration =========================== -// connect to canvas -var Module = { - TOTAL_MEMORY: 314572800, - filePackagePrefixURL: VLibrasPlayer.getPath() + '/Player/WebGL/', - memoryInitializerPrefixURL: VLibrasPlayer.getPath() + '/Player/WebGL/', - preRun: [], - postRun: [], - print: (function() { - return function(text) { - console.log (text); - }; - })(), - printErr: function(text) { - console.error (text); - }, - canvas: VLibrasPlayer.getCanvasElement(), - progress: null, - setStatus: function(text) { - if (this.progress == null) - { - if (typeof UnityProgress != 'function') - return; - this.progress = new UnityProgress (canvas); - } - if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' }; - if (text === Module.setStatus.text) return; - this.progress.SetMessage (text); - var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); - if (m) - this.progress.SetProgress (parseInt(m[2])/parseInt(m[4])); - if (text === "") - this.progress.Clear() - }, - totalDependencies: 0, - monitorRunDependencies: function(left) { - this.totalDependencies = Math.max(this.totalDependencies, left); - Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.'); - } -}; -Module.setStatus('Downloading (0.0/1)'); - -//============ FileLoader ===================== -if (!Module.expectedDataFileDownloads) { - Module.expectedDataFileDownloads = 0; - Module.finishedDataFileDownloads = 0; -} -Module.expectedDataFileDownloads++; -(function() { - var loadPackage = function(metadata) { - - var PACKAGE_PATH; - if (typeof window === 'object') { - PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/'); - } else if (typeof location !== 'undefined') { - // worker - PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/'); - } else { - throw 'using preloaded data can only be done on a web page or in a web worker'; - } - var PACKAGE_NAME = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data'; - var REMOTE_PACKAGE_BASE = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data'; - if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) { - Module['locateFile'] = Module['locateFilePackage']; - Module.printErr('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)'); - } - var REMOTE_PACKAGE_NAME = typeof Module['locateFile'] === 'function' ? - Module['locateFile'](REMOTE_PACKAGE_BASE) : - ((Module['filePackagePrefixURL'] || '') + REMOTE_PACKAGE_BASE); - - var REMOTE_PACKAGE_SIZE = 44246208; - var PACKAGE_UUID = '98f2a60c-c33d-4976-b642-e132a50bd522'; - - function fetchRemotePackage(packageName, packageSize, callback, errback) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', packageName, true); - xhr.responseType = 'arraybuffer'; - xhr.onprogress = function(event) { - var url = packageName; - var size = packageSize; - if (event.total) size = event.total; - if (event.loaded) { - if (!xhr.addedTotal) { - xhr.addedTotal = true; - if (!Module.dataFileDownloads) Module.dataFileDownloads = {}; - Module.dataFileDownloads[url] = { - loaded: event.loaded, - total: size - }; - } else { - Module.dataFileDownloads[url].loaded = event.loaded; - } - var total = 0; - var loaded = 0; - var num = 0; - for (var download in Module.dataFileDownloads) { - var data = Module.dataFileDownloads[download]; - total += data.total; - loaded += data.loaded; - num++; - } - total = Math.ceil(total * Module.expectedDataFileDownloads/num); - if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')'); - } else if (!Module.dataFileDownloads) { - if (Module['setStatus']) Module['setStatus']('Downloading data...'); - } - }; - xhr.onload = function(event) { - var packageData = xhr.response; - callback(packageData); - }; - xhr.send(null); - }; - - function handleError(error) { - console.error('package error:', error); - }; - - function runWithFS() { - - function assert(check, msg) { - if (!check) throw msg + new Error().stack; - } -Module['FS_createPath']('/', 'Il2CppData', true, true); -Module['FS_createPath']('/Il2CppData', 'Metadata', true, true); -Module['FS_createPath']('/', 'Resources', true, true); - - function DataRequest(start, end, crunched, audio) { - this.start = start; - this.end = end; - this.crunched = crunched; - this.audio = audio; - } - DataRequest.prototype = { - requests: {}, - open: function(mode, name) { - this.name = name; - this.requests[name] = this; - Module['addRunDependency']('fp ' + this.name); - }, - send: function() {}, - onload: function() { - var byteArray = this.byteArray.subarray(this.start, this.end); - - this.finish(byteArray); - - }, - finish: function(byteArray) { - var that = this; - Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() { - Module['removeRunDependency']('fp ' + that.name); - }, function() { - if (that.audio) { - Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang) - } else { - Module.printErr('Preloading file ' + that.name + ' failed'); - } - }, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change - this.requests[this.name] = null; - }, - }; - - new DataRequest(0, 50564, 0, 0).open('GET', '/mainData'); - new DataRequest(50564, 50732, 0, 0).open('GET', '/methods_pointedto_by_uievents.xml'); - new DataRequest(50732, 39552116, 0, 0).open('GET', '/sharedassets0.assets'); - new DataRequest(39552116, 41855052, 0, 0).open('GET', '/Il2CppData/Metadata/global-metadata.dat'); - new DataRequest(41855052, 43742476, 0, 0).open('GET', '/Resources/unity_default_resources'); - new DataRequest(43742476, 44246208, 0, 0).open('GET', '/Resources/unity_builtin_extra'); - - var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; - var IDB_RO = "readonly"; - var IDB_RW = "readwrite"; - var DB_NAME = 'EM_PRELOAD_CACHE'; - var DB_VERSION = 1; - var METADATA_STORE_NAME = 'METADATA'; - var PACKAGE_STORE_NAME = 'PACKAGES'; - function openDatabase(callback, errback) { - try { - var openRequest = indexedDB.open(DB_NAME, DB_VERSION); - } catch (e) { - return errback(e); - } - openRequest.onupgradeneeded = function(event) { - var db = event.target.result; - - if(db.objectStoreNames.contains(PACKAGE_STORE_NAME)) { - db.deleteObjectStore(PACKAGE_STORE_NAME); - } - var packages = db.createObjectStore(PACKAGE_STORE_NAME); - - if(db.objectStoreNames.contains(METADATA_STORE_NAME)) { - db.deleteObjectStore(METADATA_STORE_NAME); - } - var metadata = db.createObjectStore(METADATA_STORE_NAME); - }; - openRequest.onsuccess = function(event) { - var db = event.target.result; - callback(db); - }; - openRequest.onerror = function(error) { - errback(error); - }; - }; - - /* Check if there's a cached package, and if so whether it's the latest available */ - function checkCachedPackage(db, packageName, callback, errback) { - var transaction = db.transaction([METADATA_STORE_NAME], IDB_RO); - var metadata = transaction.objectStore(METADATA_STORE_NAME); - - var getRequest = metadata.get(packageName); - getRequest.onsuccess = function(event) { - var result = event.target.result; - if (!result) { - return callback(false); - } else { - return callback(PACKAGE_UUID === result.uuid); - } - }; - getRequest.onerror = function(error) { - errback(error); - }; - }; - - function fetchCachedPackage(db, packageName, callback, errback) { - var transaction = db.transaction([PACKAGE_STORE_NAME], IDB_RO); - var packages = transaction.objectStore(PACKAGE_STORE_NAME); - - var getRequest = packages.get(packageName); - getRequest.onsuccess = function(event) { - var result = event.target.result; - callback(result); - }; - getRequest.onerror = function(error) { - errback(error); - }; - }; - - function cacheRemotePackage(db, packageName, packageData, packageMeta, callback, errback) { - var transaction = db.transaction([PACKAGE_STORE_NAME, METADATA_STORE_NAME], IDB_RW); - var packages = transaction.objectStore(PACKAGE_STORE_NAME); - var metadata = transaction.objectStore(METADATA_STORE_NAME); - - var putPackageRequest = packages.put(packageData, packageName); - putPackageRequest.onsuccess = function(event) { - var putMetadataRequest = metadata.put(packageMeta, packageName); - putMetadataRequest.onsuccess = function(event) { - callback(packageData); - }; - putMetadataRequest.onerror = function(error) { - errback(error); - }; - }; - putPackageRequest.onerror = function(error) { - errback(error); - }; - }; - - function processPackageData(arrayBuffer) { - Module.finishedDataFileDownloads++; - assert(arrayBuffer, 'Loading data file failed.'); - var byteArray = new Uint8Array(arrayBuffer); - var curr; - - // Reuse the bytearray from the XHR as the source for file reads. - DataRequest.prototype.byteArray = byteArray; - DataRequest.prototype.requests["/mainData"].onload(); - DataRequest.prototype.requests["/methods_pointedto_by_uievents.xml"].onload(); - DataRequest.prototype.requests["/sharedassets0.assets"].onload(); - DataRequest.prototype.requests["/Il2CppData/Metadata/global-metadata.dat"].onload(); - DataRequest.prototype.requests["/Resources/unity_default_resources"].onload(); - DataRequest.prototype.requests["/Resources/unity_builtin_extra"].onload(); - Module['removeRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data'); - - }; - Module['addRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data'); - - if (!Module.preloadResults) Module.preloadResults = {}; - - function preloadFallback(error) { - console.error(error); - console.error('falling back to default preload behavior'); - fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, processPackageData, handleError); - }; - - openDatabase( - function(db) { - checkCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, - function(useCached) { - Module.preloadResults[PACKAGE_NAME] = {fromCache: useCached}; - if (useCached) { - console.info('loading ' + PACKAGE_NAME + ' from cache'); - fetchCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, processPackageData, preloadFallback); - } else { - console.info('loading ' + PACKAGE_NAME + ' from remote'); - fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, - function(packageData) { - cacheRemotePackage(db, PACKAGE_PATH + PACKAGE_NAME, packageData, {uuid:PACKAGE_UUID}, processPackageData, - function(error) { - console.error(error); - processPackageData(packageData); - }); - } - , preloadFallback); - } - } - , preloadFallback); - } - , preloadFallback); - - if (Module['setStatus']) Module['setStatus']('Downloading...'); - - } - if (Module['calledRun']) { - runWithFS(); - } else { - if (!Module['preRun']) Module['preRun'] = []; - Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it - } - - } - loadPackage(); - -})(); -//============== Load ======================== - -if (!(!Math.fround)) { - var script = document.createElement('script'); - script.src = VLibrasPlayer.getPath() + '/Player/WebGL/rnp_webgl_DC_ON_AA0x_VsyncOFF.js'; - document.body.appendChild(script); -} else { - var codeXHR = new XMLHttpRequest(); - codeXHR.open('GET', VLibrasPlayer.getPath() + '/Player/WebGL/rnp_webgl_DC_ON_AA0x_VsyncOFF.js', true); - codeXHR.onload = function() { - var code = codeXHR.responseText; - if (!Math.fround) { -try { - console.log('optimizing out Math.fround calls'); - var m = /var ([^=]+)=global\.Math\.fround;/.exec(code); - var minified = m[1]; - if (!minified) throw 'fail'; - var startAsm = code.indexOf('// EMSCRIPTEN_START_FUNCS'); - var endAsm = code.indexOf('// EMSCRIPTEN_END_FUNCS'); - var asm = code.substring(startAsm, endAsm); - do { - var moar = false; // we need to re-do, as x(x( will not be fixed - asm = asm.replace(new RegExp('[^a-zA-Z0-9\\$\\_]' + minified + '\\(', 'g'), function(s) { moar = true; return s[0] + '(' }); - } while (moar); - code = code.substring(0, startAsm) + asm + code.substring(endAsm); - code = code.replace("'use asm'", "'almost asm'"); -} catch(e) { console.log('failed to optimize out Math.fround calls ' + e) } - } - - var blob = new Blob([code], { type: 'text/javascript' }); - codeXHR = null; - var src = URL.createObjectURL(blob); - var script = document.createElement('script'); - script.src = URL.createObjectURL(blob); - script.onload = function() { - URL.revokeObjectURL(script.src); - }; - document.body.appendChild(script); - }; - codeXHR.send(null); -} \ No newline at end of file diff --git a/VLibrasWeb/vlibras-player.js b/VLibrasWeb/vlibras-player.js index b00db5b..b1f40af 100644 --- a/VLibrasWeb/vlibras-player.js +++ b/VLibrasWeb/vlibras-player.js @@ -4,30 +4,36 @@ this.glosa = undefined; this.canvas = undefined; this.WebPlayer = undefined; - this.initialized = false; } + var ENDPOINT = 'http://150.165.204.30/glosa'; var noop = function () {}; VLibrasPlayer.prototype.translate = function (text) { var self = this; text = encodeURI(text); + this.stop(); + (self.onTranslateStart || noop)(); - getGlosa('http://150.165.204.30/glosa?texto=' + text, + get(ENDPOINT, { texto: text }, function (status, response) { (self.onTranslateEnd || noop)(); - self.glosa = response || decodeURI(text).toUpperCase(); - self.play(); + self.play(response || decodeURI(text).toUpperCase()); }); }; - VLibrasPlayer.prototype.play = function () { + VLibrasPlayer.prototype.play = function (glosa) { + this.glosa = glosa || this.glosa; if (this.glosa !== undefined && this.loaded === true) { this.sendMessage('PlayerManager', 'catchGlosa', this.glosa); } }; + VLibrasPlayer.prototype.stop = function () { + this.sendMessage('PlayerManager', 'StopAnimations'); + }; + VLibrasPlayer.prototype.setSpeed = function (speed) { this.sendMessage('PlayerManager', 'setSlider', speed); }; @@ -52,6 +58,10 @@ this.onTranslateEnd = callback; }; + VLibrasPlayer.prototype.addErrorListener = function (callback) { + this.onError = callback; + } + VLibrasPlayer.prototype.load = function () { this.loaded = true; this.onLoad(); @@ -66,12 +76,11 @@ return this.path; }; - VLibrasPlayer.prototype.initialize = function (path, wrapper, callback) { - if (this.initialized) { - (callback || noop)(); - return; - } + VLibrasPlayer.prototype.isLoaded = function () { + return this.loaded; + } + VLibrasPlayer.prototype.initialize = function (path, wrapper) { this.path = path; var script = document.createElement('script'); @@ -81,28 +90,38 @@ this.canvas = document.createElement('div'); script.src = path + '/Player/WebPlayer/Setup.js'; - var self = this; script.onload = function () { - self.WebPlayer = new UnityObject2(); - - self.WebPlayer.initPlugin(self.canvas, self.path + '/Player/WebPlayer/rnp_webplayer_DC_ON_AA0x_VsyncOFF.unity3d'); - (callback || noop)(); + var params = { + logoimage: self.path + '/Images/progresslogo.png', + progressbarimage: self.path + '/Images/fullbar.png', + progressframeimage: self.path + '/Images/loadingbar.png' + }; + + self.WebPlayer = new UnityObject2(params); + self.WebPlayer.observeProgress(function (progress) { + switch(progress.pluginStatus) { + case "unsupported": + case "broken": + case "missing": + self.onError(progress.pluginStatus); + break; + } + }); + + self.WebPlayer.initPlugin(self.canvas, self.path + '/Player/WebPlayer/rnp_webplayer.unity3d'); }; } else { this.canvas = document.createElement('canvas'); this.canvas.classList.add('emscripten'); - script.src = path + '/Player/WebGL/Setup.js'; - - script.onload = (callback || noop); + script.src = path + '/Player/WebGL/Release/Setup.js'; } this.canvas.classList.add('vw-canvas'); wrapper.appendChild(this.canvas); document.body.appendChild(script); - this.initialized = true; }; VLibrasPlayer.prototype.sendMessage = function(object, method, params) { @@ -123,7 +142,14 @@ window.VLibrasPlayer = new VLibrasPlayer(); - function getGlosa(url, callback) { + function get(url, params, callback) { + url += '?'; + for (param in params) { + url += param + '=' + params[param]; + url += ','; + } + url.slice(-1, 1); + var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); diff --git a/VLibrasWeb/vlibras-web.css b/VLibrasWeb/vlibras-web.css index 705d4f3..03bd5cf 100644 --- a/VLibrasWeb/vlibras-web.css +++ b/VLibrasWeb/vlibras-web.css @@ -3,8 +3,10 @@ right: 0; top: 50%; margin-top: -225px; - z-index: 1000; + z-index: 999999999999; display: none; + font-family: Arial; + color: #000; } .vlibras-widget.active { @@ -15,16 +17,16 @@ bottom: 40px; top: initial; right: 50%; - margin-right: -275px; + margin-right: -45vh; } .vlibras-widget.maximize .vw-player { - height: 550px; - width: 550px !important; + height: 90vh; + width: 90vh !important; } .vlibras-widget.maximize .vw-canvas-wrapper { - height: 468px; + height: calc(90vh - 82px); } .vlibras-widget.left { @@ -40,7 +42,9 @@ width: 70px; padding: 5px; text-align: center; + font-size: 16px; background-color: #fff; + cursor: pointer; -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); @@ -54,7 +58,7 @@ } .vw-btn-access span { - font-size: 15px; + font-size: 13px; color: #004088; } @@ -63,11 +67,17 @@ } .vlibras-widget .vw-player { - display: none; + visibility: hidden; width: 0; - height: 450px; + height: 100%; float: right; + background-color: #ebebeb; + + display: -webkit-flex; + display: flex; + flex-direction: column; + -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); @@ -75,20 +85,26 @@ .vlibras-widget .vw-player.active { width: 320px; - display: block; + visibility: visible; } .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; + cursor: pointer; + + display: none; +} + +.vw-player.loaded .vw-subtitle { + display: block; } .vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on { @@ -123,6 +139,7 @@ .vw-player .vw-btn-close { float: right; height: 100%; + cursor: pointer; } .vw-player .vw-btn-side { @@ -131,6 +148,7 @@ background-color: #fff; width: 2em; margin: 0; + cursor: pointer; } .vw-btn-side .vw-arrow { @@ -161,13 +179,20 @@ -moz-box-sizing: border-box; box-sizing: border-box; + visibility: hidden; + display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; } +.vw-player.loaded .vw-controls { + visibility: visible; +} + .vw-controls .vw-play { + cursor: pointer; height: 28px; } @@ -176,7 +201,7 @@ } .vw-controls .vw-progressbar { - margin: 0 13px; + margin: 0 20px; width: 100%; height: 3px; background-color: #000; @@ -189,8 +214,7 @@ } .vw-controls .vw-speed { - padding: 3px; - margin-right: 10px; + margin-right: 20px; font-size: 19px; font-weight: bold; cursor: pointer; @@ -200,6 +224,10 @@ content: "x"; } +.vw-window { + cursor: pointer; +} + .vw-window .vw-maximize, .vw-window.active .vw-minimize { display: block; } @@ -208,21 +236,38 @@ display: none; } -.vw-text:hover, .vw-text.active { +.vw-text:hover { background-color: rgba(255, 102, 0, 0.5); + color: #000; + cursor: pointer; } -.vw-loading { +.vw-text-active { + background-color: #7CFC00; + color: #000; +} + +.vw-loading, .vw-error { position: absolute; top: 50%; left: 50%; + z-index: 1001; + display: none; + text-align: center; +} + +.vw-loading { margin-left: -50px; margin-top: -25px; width: 100px; height: 50px; - z-index: 1001; - display: none; - text-align: center; +} + +.vw-error { + margin-left: -150px; + margin-top: -30px; + width: 300px; + height: 60px; } .vw-loading img { @@ -230,6 +275,6 @@ height: 50px; } -.vw-loading.active { +.vw-loading.active, .vw-error.active { display: block; -} \ No newline at end of file +} diff --git a/VLibrasWeb/vlibras-web.js b/VLibrasWeb/vlibras-web.js index 34bef47..2b41049 100644 --- a/VLibrasWeb/vlibras-web.js +++ b/VLibrasWeb/vlibras-web.js @@ -1,6 +1,7 @@ (function (window, document) { VLibrasWeb = { - path: 'VLibrasWeb' + path: 'VLibrasWeb', + lastTextElement: undefined }; VLibrasWeb.init = function (path) { @@ -17,8 +18,8 @@ document.body.appendChild(player); }; - VLibrasWeb.loadPlayer = function (canvas, callback) { - window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback); + VLibrasWeb.loadPlayer = function (canvas) { + window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas); }; VLibrasWeb.run = function (VLibrasPlayer) { @@ -39,8 +40,9 @@ var vwPlay = vwControls.querySelector('.vw-play'); VLibrasPlayer.addProgressListener(function (progress) { - if (progress >= 1) { - document.querySelector('.vw-text.active').classList.remove('active'); + var vwText = document.querySelector('.vw-text.active'); + if (progress >= 1 && vwText) { + vwText.classList.remove('active'); progress = 0; } @@ -54,15 +56,47 @@ 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 Unity WebPlayer.'; + 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(); }); @@ -94,31 +128,11 @@ 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('vw-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('.vw-text.active'); - if (actives) { - actives.classList.remove('active'); - } - - this.classList.add('active'); - }); - }); - }); + if (VLibrasPlayer.isLoaded()) { + addTagsTexts(); + } else { + VLibrasWeb.loadPlayer(vwCanvas); + } }); vwClose.addEventListener('click', function () { @@ -128,16 +142,9 @@ 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); - }); + removeTagsTexts(); + VLibrasPlayer.stop(); + vwProgress.style.width = 0; }); vwSide.addEventListener('click', function () { @@ -146,15 +153,61 @@ minimize(); }); + function addTagsTexts() { + getAllNodeTexts(document.body, function (node) { + if (vw.contains(node)) return; + + node.innerHTML = '' + node.innerHTML + ''; + + 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 () {}; - var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null); - while (walk.nextNode()) { - var node = walk.currentNode; + 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 (node.textContent.trim().length > 0) { + if (anyText) { (callback || noop)(node); + } else { + getAllNodeTexts(node, callback); } } } diff --git a/package.json b/package.json new file mode 100644 index 0000000..1c0f6eb --- /dev/null +++ b/package.json @@ -0,0 +1,10 @@ +{ + "name": "vlibras-web", + "version": "1.0.0", + "description": "VLibras Web", + "repository": { + "type": "git", + "url": "git@git.lavid.ufpb.br:vlibras-plugplay" + }, + "author": "LAViD" +} diff --git a/sample.html b/sample.html index a44d57f..535a0d0 100644 --- a/sample.html +++ b/sample.html @@ -3,6 +3,7 @@ + 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. 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?

@@ -23,6 +24,7 @@
+
-- libgit2 0.21.2