Download as
Browse Code »

Commit ea70d84a644b423c059b11d8c54b46a6820dea13

Authored by David Guilherme
1 parent 4972bd11
Exists in master

Fixes

Showing 12 changed files with 241 additions and 449 deletions   Show diff stats
.gitignore
  Diff comments   View file @ea70d84
... ... @@ -6,3 +6,6 @@ VLibrasWeb/Player/WebPlayer/*
6 6  
7 7 *.zip
8 8 **/*.DS_Store
  9 +
  10 +bower_components
  11 +node_modules
... ...
Gulpfile.js 0 → 100644
  Diff comments   View file @ea70d84
... ... @@ -0,0 +1,16 @@
  1 +var gulp = require('gulp');
  2 +var connect = require('gulp-connect');
  3 +
  4 +gulp.task('connect', function () {
  5 + connect.server({
  6 + root: '.',
  7 + livereload: true
  8 + });
  9 +});
  10 +
  11 +gulp.task('watch', ['connect'], function () {
  12 + gulp.watch(['**/*.html', '**/*.js', '**/*.css'], function () {
  13 + gulp.src(['**/*.html', '**/*.js', '**/*.css'])
  14 + .pipe(connect.reload());
  15 + });
  16 +});
0 17 \ No newline at end of file
... ...
README.md
  Diff comments   View file @ea70d84
... ... @@ -22,6 +22,7 @@ Instalação
22 22 <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
23 23 </div>
24 24 <div class="vw-canvas-wrapper">
  25 + <div class="vw-error"></div>
25 26 <div class="vw-loading active">
26 27 <img src="VLibrasWeb/Images/loading.gif" />
27 28 </div>
... ... @@ -47,7 +48,7 @@ Instalação
47 48 </div>
48 49 ```
49 50  
50   -2. Adicione os arquivos `.css` no <head> e `.js` no final do body:
  51 +2. Adicione os arquivos `.css` no <head> e `.js` no final do <body>:
51 52  
52 53 ```html
53 54 <head>
... ...
VLibrasWeb/Images/fullbar.png 0 → 100644
View file @ea70d84

2.71 KB
VLibrasWeb/Images/loadingbar.png 0 → 100644
View file @ea70d84

2.78 KB
VLibrasWeb/Images/progresslogo.png 0 → 100644
View file @ea70d84

20.7 KB
VLibrasWeb/Player/WebGL/Setup.js
View file @4972bd1
... ... @@ -1,364 +0,0 @@
1   -//====================== Player Configuration ===========================
2   -// connect to canvas
3   -var Module = {
4   - TOTAL_MEMORY: 314572800,
5   - filePackagePrefixURL: VLibrasPlayer.getPath() + '/Player/WebGL/',
6   - memoryInitializerPrefixURL: VLibrasPlayer.getPath() + '/Player/WebGL/',
7   - preRun: [],
8   - postRun: [],
9   - print: (function() {
10   - return function(text) {
11   - console.log (text);
12   - };
13   - })(),
14   - printErr: function(text) {
15   - console.error (text);
16   - },
17   - canvas: VLibrasPlayer.getCanvasElement(),
18   - progress: null,
19   - setStatus: function(text) {
20   - if (this.progress == null)
21   - {
22   - if (typeof UnityProgress != 'function')
23   - return;
24   - this.progress = new UnityProgress (canvas);
25   - }
26   - if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
27   - if (text === Module.setStatus.text) return;
28   - this.progress.SetMessage (text);
29   - var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
30   - if (m)
31   - this.progress.SetProgress (parseInt(m[2])/parseInt(m[4]));
32   - if (text === "")
33   - this.progress.Clear()
34   - },
35   - totalDependencies: 0,
36   - monitorRunDependencies: function(left) {
37   - this.totalDependencies = Math.max(this.totalDependencies, left);
38   - Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
39   - }
40   -};
41   -Module.setStatus('Downloading (0.0/1)');
42   -
43   -//============ FileLoader =====================
44   -if (!Module.expectedDataFileDownloads) {
45   - Module.expectedDataFileDownloads = 0;
46   - Module.finishedDataFileDownloads = 0;
47   -}
48   -Module.expectedDataFileDownloads++;
49   -(function() {
50   - var loadPackage = function(metadata) {
51   -
52   - var PACKAGE_PATH;
53   - if (typeof window === 'object') {
54   - PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
55   - } else if (typeof location !== 'undefined') {
56   - // worker
57   - PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
58   - } else {
59   - throw 'using preloaded data can only be done on a web page or in a web worker';
60   - }
61   - var PACKAGE_NAME = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data';
62   - var REMOTE_PACKAGE_BASE = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data';
63   - if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
64   - Module['locateFile'] = Module['locateFilePackage'];
65   - Module.printErr('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
66   - }
67   - var REMOTE_PACKAGE_NAME = typeof Module['locateFile'] === 'function' ?
68   - Module['locateFile'](REMOTE_PACKAGE_BASE) :
69   - ((Module['filePackagePrefixURL'] || '') + REMOTE_PACKAGE_BASE);
70   -
71   - var REMOTE_PACKAGE_SIZE = 44246208;
72   - var PACKAGE_UUID = '98f2a60c-c33d-4976-b642-e132a50bd522';
73   -
74   - function fetchRemotePackage(packageName, packageSize, callback, errback) {
75   - var xhr = new XMLHttpRequest();
76   - xhr.open('GET', packageName, true);
77   - xhr.responseType = 'arraybuffer';
78   - xhr.onprogress = function(event) {
79   - var url = packageName;
80   - var size = packageSize;
81   - if (event.total) size = event.total;
82   - if (event.loaded) {
83   - if (!xhr.addedTotal) {
84   - xhr.addedTotal = true;
85   - if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
86   - Module.dataFileDownloads[url] = {
87   - loaded: event.loaded,
88   - total: size
89   - };
90   - } else {
91   - Module.dataFileDownloads[url].loaded = event.loaded;
92   - }
93   - var total = 0;
94   - var loaded = 0;
95   - var num = 0;
96   - for (var download in Module.dataFileDownloads) {
97   - var data = Module.dataFileDownloads[download];
98   - total += data.total;
99   - loaded += data.loaded;
100   - num++;
101   - }
102   - total = Math.ceil(total * Module.expectedDataFileDownloads/num);
103   - if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')');
104   - } else if (!Module.dataFileDownloads) {
105   - if (Module['setStatus']) Module['setStatus']('Downloading data...');
106   - }
107   - };
108   - xhr.onload = function(event) {
109   - var packageData = xhr.response;
110   - callback(packageData);
111   - };
112   - xhr.send(null);
113   - };
114   -
115   - function handleError(error) {
116   - console.error('package error:', error);
117   - };
118   -
119   - function runWithFS() {
120   -
121   - function assert(check, msg) {
122   - if (!check) throw msg + new Error().stack;
123   - }
124   -Module['FS_createPath']('/', 'Il2CppData', true, true);
125   -Module['FS_createPath']('/Il2CppData', 'Metadata', true, true);
126   -Module['FS_createPath']('/', 'Resources', true, true);
127   -
128   - function DataRequest(start, end, crunched, audio) {
129   - this.start = start;
130   - this.end = end;
131   - this.crunched = crunched;
132   - this.audio = audio;
133   - }
134   - DataRequest.prototype = {
135   - requests: {},
136   - open: function(mode, name) {
137   - this.name = name;
138   - this.requests[name] = this;
139   - Module['addRunDependency']('fp ' + this.name);
140   - },
141   - send: function() {},
142   - onload: function() {
143   - var byteArray = this.byteArray.subarray(this.start, this.end);
144   -
145   - this.finish(byteArray);
146   -
147   - },
148   - finish: function(byteArray) {
149   - var that = this;
150   - Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() {
151   - Module['removeRunDependency']('fp ' + that.name);
152   - }, function() {
153   - if (that.audio) {
154   - Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang)
155   - } else {
156   - Module.printErr('Preloading file ' + that.name + ' failed');
157   - }
158   - }, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change
159   - this.requests[this.name] = null;
160   - },
161   - };
162   -
163   - new DataRequest(0, 50564, 0, 0).open('GET', '/mainData');
164   - new DataRequest(50564, 50732, 0, 0).open('GET', '/methods_pointedto_by_uievents.xml');
165   - new DataRequest(50732, 39552116, 0, 0).open('GET', '/sharedassets0.assets');
166   - new DataRequest(39552116, 41855052, 0, 0).open('GET', '/Il2CppData/Metadata/global-metadata.dat');
167   - new DataRequest(41855052, 43742476, 0, 0).open('GET', '/Resources/unity_default_resources');
168   - new DataRequest(43742476, 44246208, 0, 0).open('GET', '/Resources/unity_builtin_extra');
169   -
170   - var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
171   - var IDB_RO = "readonly";
172   - var IDB_RW = "readwrite";
173   - var DB_NAME = 'EM_PRELOAD_CACHE';
174   - var DB_VERSION = 1;
175   - var METADATA_STORE_NAME = 'METADATA';
176   - var PACKAGE_STORE_NAME = 'PACKAGES';
177   - function openDatabase(callback, errback) {
178   - try {
179   - var openRequest = indexedDB.open(DB_NAME, DB_VERSION);
180   - } catch (e) {
181   - return errback(e);
182   - }
183   - openRequest.onupgradeneeded = function(event) {
184   - var db = event.target.result;
185   -
186   - if(db.objectStoreNames.contains(PACKAGE_STORE_NAME)) {
187   - db.deleteObjectStore(PACKAGE_STORE_NAME);
188   - }
189   - var packages = db.createObjectStore(PACKAGE_STORE_NAME);
190   -
191   - if(db.objectStoreNames.contains(METADATA_STORE_NAME)) {
192   - db.deleteObjectStore(METADATA_STORE_NAME);
193   - }
194   - var metadata = db.createObjectStore(METADATA_STORE_NAME);
195   - };
196   - openRequest.onsuccess = function(event) {
197   - var db = event.target.result;
198   - callback(db);
199   - };
200   - openRequest.onerror = function(error) {
201   - errback(error);
202   - };
203   - };
204   -
205   - /* Check if there's a cached package, and if so whether it's the latest available */
206   - function checkCachedPackage(db, packageName, callback, errback) {
207   - var transaction = db.transaction([METADATA_STORE_NAME], IDB_RO);
208   - var metadata = transaction.objectStore(METADATA_STORE_NAME);
209   -
210   - var getRequest = metadata.get(packageName);
211   - getRequest.onsuccess = function(event) {
212   - var result = event.target.result;
213   - if (!result) {
214   - return callback(false);
215   - } else {
216   - return callback(PACKAGE_UUID === result.uuid);
217   - }
218   - };
219   - getRequest.onerror = function(error) {
220   - errback(error);
221   - };
222   - };
223   -
224   - function fetchCachedPackage(db, packageName, callback, errback) {
225   - var transaction = db.transaction([PACKAGE_STORE_NAME], IDB_RO);
226   - var packages = transaction.objectStore(PACKAGE_STORE_NAME);
227   -
228   - var getRequest = packages.get(packageName);
229   - getRequest.onsuccess = function(event) {
230   - var result = event.target.result;
231   - callback(result);
232   - };
233   - getRequest.onerror = function(error) {
234   - errback(error);
235   - };
236   - };
237   -
238   - function cacheRemotePackage(db, packageName, packageData, packageMeta, callback, errback) {
239   - var transaction = db.transaction([PACKAGE_STORE_NAME, METADATA_STORE_NAME], IDB_RW);
240   - var packages = transaction.objectStore(PACKAGE_STORE_NAME);
241   - var metadata = transaction.objectStore(METADATA_STORE_NAME);
242   -
243   - var putPackageRequest = packages.put(packageData, packageName);
244   - putPackageRequest.onsuccess = function(event) {
245   - var putMetadataRequest = metadata.put(packageMeta, packageName);
246   - putMetadataRequest.onsuccess = function(event) {
247   - callback(packageData);
248   - };
249   - putMetadataRequest.onerror = function(error) {
250   - errback(error);
251   - };
252   - };
253   - putPackageRequest.onerror = function(error) {
254   - errback(error);
255   - };
256   - };
257   -
258   - function processPackageData(arrayBuffer) {
259   - Module.finishedDataFileDownloads++;
260   - assert(arrayBuffer, 'Loading data file failed.');
261   - var byteArray = new Uint8Array(arrayBuffer);
262   - var curr;
263   -
264   - // Reuse the bytearray from the XHR as the source for file reads.
265   - DataRequest.prototype.byteArray = byteArray;
266   - DataRequest.prototype.requests["/mainData"].onload();
267   - DataRequest.prototype.requests["/methods_pointedto_by_uievents.xml"].onload();
268   - DataRequest.prototype.requests["/sharedassets0.assets"].onload();
269   - DataRequest.prototype.requests["/Il2CppData/Metadata/global-metadata.dat"].onload();
270   - DataRequest.prototype.requests["/Resources/unity_default_resources"].onload();
271   - DataRequest.prototype.requests["/Resources/unity_builtin_extra"].onload();
272   - Module['removeRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data');
273   -
274   - };
275   - Module['addRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data');
276   -
277   - if (!Module.preloadResults) Module.preloadResults = {};
278   -
279   - function preloadFallback(error) {
280   - console.error(error);
281   - console.error('falling back to default preload behavior');
282   - fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, processPackageData, handleError);
283   - };
284   -
285   - openDatabase(
286   - function(db) {
287   - checkCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME,
288   - function(useCached) {
289   - Module.preloadResults[PACKAGE_NAME] = {fromCache: useCached};
290   - if (useCached) {
291   - console.info('loading ' + PACKAGE_NAME + ' from cache');
292   - fetchCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, processPackageData, preloadFallback);
293   - } else {
294   - console.info('loading ' + PACKAGE_NAME + ' from remote');
295   - fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE,
296   - function(packageData) {
297   - cacheRemotePackage(db, PACKAGE_PATH + PACKAGE_NAME, packageData, {uuid:PACKAGE_UUID}, processPackageData,
298   - function(error) {
299   - console.error(error);
300   - processPackageData(packageData);
301   - });
302   - }
303   - , preloadFallback);
304   - }
305   - }
306   - , preloadFallback);
307   - }
308   - , preloadFallback);
309   -
310   - if (Module['setStatus']) Module['setStatus']('Downloading...');
311   -
312   - }
313   - if (Module['calledRun']) {
314   - runWithFS();
315   - } else {
316   - if (!Module['preRun']) Module['preRun'] = [];
317   - Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
318   - }
319   -
320   - }
321   - loadPackage();
322   -
323   -})();
324   -//============== Load ========================
325   -
326   -if (!(!Math.fround)) {
327   - var script = document.createElement('script');
328   - script.src = VLibrasPlayer.getPath() + '/Player/WebGL/rnp_webgl_DC_ON_AA0x_VsyncOFF.js';
329   - document.body.appendChild(script);
330   -} else {
331   - var codeXHR = new XMLHttpRequest();
332   - codeXHR.open('GET', VLibrasPlayer.getPath() + '/Player/WebGL/rnp_webgl_DC_ON_AA0x_VsyncOFF.js', true);
333   - codeXHR.onload = function() {
334   - var code = codeXHR.responseText;
335   - if (!Math.fround) {
336   -try {
337   - console.log('optimizing out Math.fround calls');
338   - var m = /var ([^=]+)=global\.Math\.fround;/.exec(code);
339   - var minified = m[1];
340   - if (!minified) throw 'fail';
341   - var startAsm = code.indexOf('// EMSCRIPTEN_START_FUNCS');
342   - var endAsm = code.indexOf('// EMSCRIPTEN_END_FUNCS');
343   - var asm = code.substring(startAsm, endAsm);
344   - do {
345   - var moar = false; // we need to re-do, as x(x( will not be fixed
346   - asm = asm.replace(new RegExp('[^a-zA-Z0-9\\$\\_]' + minified + '\\(', 'g'), function(s) { moar = true; return s[0] + '(' });
347   - } while (moar);
348   - code = code.substring(0, startAsm) + asm + code.substring(endAsm);
349   - code = code.replace("'use asm'", "'almost asm'");
350   -} catch(e) { console.log('failed to optimize out Math.fround calls ' + e) }
351   - }
352   -
353   - var blob = new Blob([code], { type: 'text/javascript' });
354   - codeXHR = null;
355   - var src = URL.createObjectURL(blob);
356   - var script = document.createElement('script');
357   - script.src = URL.createObjectURL(blob);
358   - script.onload = function() {
359   - URL.revokeObjectURL(script.src);
360   - };
361   - document.body.appendChild(script);
362   - };
363   - codeXHR.send(null);
364   -}
365 0 \ No newline at end of file
VLibrasWeb/vlibras-player.js
  Diff comments   View file @ea70d84
... ... @@ -4,30 +4,36 @@
4 4 this.glosa = undefined;
5 5 this.canvas = undefined;
6 6 this.WebPlayer = undefined;
7   - this.initialized = false;
8 7 }
9 8  
  9 + var ENDPOINT = 'http://150.165.204.30/glosa';
10 10 var noop = function () {};
11 11  
12 12 VLibrasPlayer.prototype.translate = function (text) {
13 13 var self = this;
14 14 text = encodeURI(text);
15 15  
  16 + this.stop();
  17 +
16 18 (self.onTranslateStart || noop)();
17   - getGlosa('http://150.165.204.30/glosa?texto=' + text,
  19 + get(ENDPOINT, { texto: text },
18 20 function (status, response) {
19 21 (self.onTranslateEnd || noop)();
20   - self.glosa = response || decodeURI(text).toUpperCase();
21   - self.play();
  22 + self.play(response || decodeURI(text).toUpperCase());
22 23 });
23 24 };
24 25  
25   - VLibrasPlayer.prototype.play = function () {
  26 + VLibrasPlayer.prototype.play = function (glosa) {
  27 + this.glosa = glosa || this.glosa;
26 28 if (this.glosa !== undefined && this.loaded === true) {
27 29 this.sendMessage('PlayerManager', 'catchGlosa', this.glosa);
28 30 }
29 31 };
30 32  
  33 + VLibrasPlayer.prototype.stop = function () {
  34 + this.sendMessage('PlayerManager', 'StopAnimations');
  35 + };
  36 +
31 37 VLibrasPlayer.prototype.setSpeed = function (speed) {
32 38 this.sendMessage('PlayerManager', 'setSlider', speed);
33 39 };
... ... @@ -52,6 +58,10 @@
52 58 this.onTranslateEnd = callback;
53 59 };
54 60  
  61 + VLibrasPlayer.prototype.addErrorListener = function (callback) {
  62 + this.onError = callback;
  63 + }
  64 +
55 65 VLibrasPlayer.prototype.load = function () {
56 66 this.loaded = true;
57 67 this.onLoad();
... ... @@ -66,12 +76,11 @@
66 76 return this.path;
67 77 };
68 78  
69   - VLibrasPlayer.prototype.initialize = function (path, wrapper, callback) {
70   - if (this.initialized) {
71   - (callback || noop)();
72   - return;
73   - }
  79 + VLibrasPlayer.prototype.isLoaded = function () {
  80 + return this.loaded;
  81 + }
74 82  
  83 + VLibrasPlayer.prototype.initialize = function (path, wrapper) {
75 84 this.path = path;
76 85  
77 86 var script = document.createElement('script');
... ... @@ -81,28 +90,38 @@
81 90 this.canvas = document.createElement('div');
82 91  
83 92 script.src = path + '/Player/WebPlayer/Setup.js';
84   -
85 93 var self = this;
86 94 script.onload = function () {
87   - self.WebPlayer = new UnityObject2();
88   -
89   - self.WebPlayer.initPlugin(self.canvas, self.path + '/Player/WebPlayer/rnp_webplayer_DC_ON_AA0x_VsyncOFF.unity3d');
90   - (callback || noop)();
  95 + var params = {
  96 + logoimage: self.path + '/Images/progresslogo.png',
  97 + progressbarimage: self.path + '/Images/fullbar.png',
  98 + progressframeimage: self.path + '/Images/loadingbar.png'
  99 + };
  100 +
  101 + self.WebPlayer = new UnityObject2(params);
  102 + self.WebPlayer.observeProgress(function (progress) {
  103 + switch(progress.pluginStatus) {
  104 + case "unsupported":
  105 + case "broken":
  106 + case "missing":
  107 + self.onError(progress.pluginStatus);
  108 + break;
  109 + }
  110 + });
  111 +
  112 + self.WebPlayer.initPlugin(self.canvas, self.path + '/Player/WebPlayer/rnp_webplayer.unity3d');
91 113 };
92 114 } else {
93 115 this.canvas = document.createElement('canvas');
94 116 this.canvas.classList.add('emscripten');
95 117  
96   - script.src = path + '/Player/WebGL/Setup.js';
97   -
98   - script.onload = (callback || noop);
  118 + script.src = path + '/Player/WebGL/Release/Setup.js';
99 119 }
100 120  
101 121 this.canvas.classList.add('vw-canvas');
102 122 wrapper.appendChild(this.canvas);
103 123  
104 124 document.body.appendChild(script);
105   - this.initialized = true;
106 125 };
107 126  
108 127 VLibrasPlayer.prototype.sendMessage = function(object, method, params) {
... ... @@ -123,7 +142,14 @@
123 142  
124 143 window.VLibrasPlayer = new VLibrasPlayer();
125 144  
126   - function getGlosa(url, callback) {
  145 + function get(url, params, callback) {
  146 + url += '?';
  147 + for (param in params) {
  148 + url += param + '=' + params[param];
  149 + url += ',';
  150 + }
  151 + url.slice(-1, 1);
  152 +
127 153 var xhr = new XMLHttpRequest();
128 154 xhr.open('GET', url, true);
129 155  
... ...
VLibrasWeb/vlibras-web.css
  Diff comments   View file @ea70d84
... ... @@ -3,8 +3,10 @@
3 3 right: 0;
4 4 top: 50%;
5 5 margin-top: -225px;
6   - z-index: 1000;
  6 + z-index: 999999999999;
7 7 display: none;
  8 + font-family: Arial;
  9 + color: #000;
8 10 }
9 11  
10 12 .vlibras-widget.active {
... ... @@ -15,16 +17,16 @@
15 17 bottom: 40px;
16 18 top: initial;
17 19 right: 50%;
18   - margin-right: -275px;
  20 + margin-right: -45vh;
19 21 }
20 22  
21 23 .vlibras-widget.maximize .vw-player {
22   - height: 550px;
23   - width: 550px !important;
  24 + height: 90vh;
  25 + width: 90vh !important;
24 26 }
25 27  
26 28 .vlibras-widget.maximize .vw-canvas-wrapper {
27   - height: 468px;
  29 + height: calc(90vh - 82px);
28 30 }
29 31  
30 32 .vlibras-widget.left {
... ... @@ -40,7 +42,9 @@
40 42 width: 70px;
41 43 padding: 5px;
42 44 text-align: center;
  45 + font-size: 16px;
43 46 background-color: #fff;
  47 + cursor: pointer;
44 48  
45 49 -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
46 50 -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
... ... @@ -54,7 +58,7 @@
54 58 }
55 59  
56 60 .vw-btn-access span {
57   - font-size: 15px;
  61 + font-size: 13px;
58 62 color: #004088;
59 63 }
60 64  
... ... @@ -63,11 +67,17 @@
63 67 }
64 68  
65 69 .vlibras-widget .vw-player {
66   - display: none;
  70 + visibility: hidden;
67 71 width: 0;
68   - height: 450px;
  72 + height: 100%;
69 73 float: right;
70 74  
  75 + background-color: #ebebeb;
  76 +
  77 + display: -webkit-flex;
  78 + display: flex;
  79 + flex-direction: column;
  80 +
71 81 -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
72 82 -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
73 83 box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
... ... @@ -75,20 +85,26 @@
75 85  
76 86 .vlibras-widget .vw-player.active {
77 87 width: 320px;
78   - display: block;
  88 + visibility: visible;
79 89 }
80 90  
81 91 .vw-player .vw-canvas-wrapper {
82 92 position: relative;
83 93 width: 100%;
84 94 height: 370px;
85   - background-color: #ebebeb;
86 95 }
87 96  
88 97 .vw-canvas-wrapper .vw-subtitle {
89 98 position: absolute;
90 99 top: 15px;
91 100 right: 15px;
  101 + cursor: pointer;
  102 +
  103 + display: none;
  104 +}
  105 +
  106 +.vw-player.loaded .vw-subtitle {
  107 + display: block;
92 108 }
93 109  
94 110 .vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on {
... ... @@ -123,6 +139,7 @@
123 139 .vw-player .vw-btn-close {
124 140 float: right;
125 141 height: 100%;
  142 + cursor: pointer;
126 143 }
127 144  
128 145 .vw-player .vw-btn-side {
... ... @@ -131,6 +148,7 @@
131 148 background-color: #fff;
132 149 width: 2em;
133 150 margin: 0;
  151 + cursor: pointer;
134 152 }
135 153  
136 154 .vw-btn-side .vw-arrow {
... ... @@ -161,13 +179,20 @@
161 179 -moz-box-sizing: border-box;
162 180 box-sizing: border-box;
163 181  
  182 + visibility: hidden;
  183 +
164 184 display: -webkit-flex;
165 185 display: flex;
166 186 align-items: center;
167 187 -webkit-align-items: center;
168 188 }
169 189  
  190 +.vw-player.loaded .vw-controls {
  191 + visibility: visible;
  192 +}
  193 +
170 194 .vw-controls .vw-play {
  195 + cursor: pointer;
171 196 height: 28px;
172 197 }
173 198  
... ... @@ -176,7 +201,7 @@
176 201 }
177 202  
178 203 .vw-controls .vw-progressbar {
179   - margin: 0 13px;
  204 + margin: 0 20px;
180 205 width: 100%;
181 206 height: 3px;
182 207 background-color: #000;
... ... @@ -189,8 +214,7 @@
189 214 }
190 215  
191 216 .vw-controls .vw-speed {
192   - padding: 3px;
193   - margin-right: 10px;
  217 + margin-right: 20px;
194 218 font-size: 19px;
195 219 font-weight: bold;
196 220 cursor: pointer;
... ... @@ -200,6 +224,10 @@
200 224 content: "x";
201 225 }
202 226  
  227 +.vw-window {
  228 + cursor: pointer;
  229 +}
  230 +
203 231 .vw-window .vw-maximize, .vw-window.active .vw-minimize {
204 232 display: block;
205 233 }
... ... @@ -208,21 +236,38 @@
208 236 display: none;
209 237 }
210 238  
211   -.vw-text:hover, .vw-text.active {
  239 +.vw-text:hover {
212 240 background-color: rgba(255, 102, 0, 0.5);
  241 + color: #000;
  242 + cursor: pointer;
213 243 }
214 244  
215   -.vw-loading {
  245 +.vw-text-active {
  246 + background-color: #7CFC00;
  247 + color: #000;
  248 +}
  249 +
  250 +.vw-loading, .vw-error {
216 251 position: absolute;
217 252 top: 50%;
218 253 left: 50%;
  254 + z-index: 1001;
  255 + display: none;
  256 + text-align: center;
  257 +}
  258 +
  259 +.vw-loading {
219 260 margin-left: -50px;
220 261 margin-top: -25px;
221 262 width: 100px;
222 263 height: 50px;
223   - z-index: 1001;
224   - display: none;
225   - text-align: center;
  264 +}
  265 +
  266 +.vw-error {
  267 + margin-left: -150px;
  268 + margin-top: -30px;
  269 + width: 300px;
  270 + height: 60px;
226 271 }
227 272  
228 273 .vw-loading img {
... ... @@ -230,6 +275,6 @@
230 275 height: 50px;
231 276 }
232 277  
233   -.vw-loading.active {
  278 +.vw-loading.active, .vw-error.active {
234 279 display: block;
235   -}
236 280 \ No newline at end of file
  281 +}
... ...
VLibrasWeb/vlibras-web.js
  Diff comments   View file @ea70d84
1 1 (function (window, document) {
2 2 VLibrasWeb = {
3   - path: 'VLibrasWeb'
  3 + path: 'VLibrasWeb',
  4 + lastTextElement: undefined
4 5 };
5 6  
6 7 VLibrasWeb.init = function (path) {
... ... @@ -17,8 +18,8 @@
17 18 document.body.appendChild(player);
18 19 };
19 20  
20   - VLibrasWeb.loadPlayer = function (canvas, callback) {
21   - window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback);
  21 + VLibrasWeb.loadPlayer = function (canvas) {
  22 + window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas);
22 23 };
23 24  
24 25 VLibrasWeb.run = function (VLibrasPlayer) {
... ... @@ -39,8 +40,9 @@
39 40 var vwPlay = vwControls.querySelector('.vw-play');
40 41  
41 42 VLibrasPlayer.addProgressListener(function (progress) {
42   - if (progress >= 1) {
43   - document.querySelector('.vw-text.active').classList.remove('active');
  43 + var vwText = document.querySelector('.vw-text.active');
  44 + if (progress >= 1 && vwText) {
  45 + vwText.classList.remove('active');
44 46 progress = 0;
45 47 }
46 48  
... ... @@ -54,15 +56,47 @@
54 56 VLibrasPlayer.addLoadListener(function () {
55 57 vwLoading.classList.remove('active');
56 58 vwCanvas.querySelector('.vw-canvas').classList.add('active');
  59 + vwPlayer.classList.add('loaded');
  60 +
  61 + if (vwPlayer.classList.contains('active')) {
  62 + addTagsTexts();
  63 + }
  64 +
  65 + VLibrasPlayer.play('SELECIONAR TEXTO TRADUZIR');
57 66 });
58 67  
59 68 VLibrasPlayer.addTranslateEndListener(function () {
60 69 vwLoading.classList.remove('active');
61 70 });
62 71  
  72 + VLibrasPlayer.addErrorListener(function (err) {
  73 + var vwError = vwCanvas.querySelector('.vw-error');
  74 + vwError.classList.add('active');
  75 + switch(err) {
  76 + case 'unsupported':
  77 + vwError.innerHTML = 'O seu navegador não é compatível com este widget.';
  78 + break;
  79 + case 'broken':
  80 + vwError.innerHTML = 'Reinicie o navegador após a instalação.';
  81 + break;
  82 + case 'missing':
  83 + vwError.innerHTML = 'Por favor, instale o <a href="http://unity3d.com/webplayer/" target="_blank">Unity WebPlayer</a>.';
  84 + break;
  85 + default:
  86 + vwError.innerHTML = 'Ocorreu um erro. Por favor, recarregue a página.'
  87 + break;
  88 + }
  89 + });
  90 +
63 91 vwPlay.addEventListener('click', function (e) {
64 92 e.preventDefault();
65 93  
  94 + if (VLibrasWeb.lastTextElement) {
  95 + VLibrasWeb.lastTextElement.dispatchEvent(
  96 + new MouseEvent('click')
  97 + );
  98 + }
  99 +
66 100 VLibrasPlayer.play();
67 101 });
68 102  
... ... @@ -94,31 +128,11 @@
94 128 vwPlayer.classList.add('active');
95 129 vwAccess.classList.add('inactive');
96 130  
97   - VLibrasWeb.loadPlayer(vwCanvas, function () {
98   - getAllNodeTexts(document.body, function (node) {
99   - if (vw.contains(node)) return;
100   -
101   - var span = document.createElement('span');
102   - span.classList.add('vw-text');
103   - var parent = node.parentNode;
104   -
105   - parent.insertBefore(span, node);
106   - parent.removeChild(node);
107   - span.appendChild(node);
108   -
109   - span.addEventListener('click', function (e) {
110   - e.preventDefault();
111   - window.VLibrasPlayer.translate(this.textContent);
112   -
113   - var actives = document.querySelector('.vw-text.active');
114   - if (actives) {
115   - actives.classList.remove('active');
116   - }
117   -
118   - this.classList.add('active');
119   - });
120   - });
121   - });
  131 + if (VLibrasPlayer.isLoaded()) {
  132 + addTagsTexts();
  133 + } else {
  134 + VLibrasWeb.loadPlayer(vwCanvas);
  135 + }
122 136 });
123 137  
124 138 vwClose.addEventListener('click', function () {
... ... @@ -128,16 +142,9 @@
128 142  
129 143 minimize();
130 144  
131   - getAllNodeTexts(document.body, function (node) {
132   - if (vw.contains(node)) return;
133   -
134   - var span = node.parentNode;
135   - var parent = span.parentNode;
136   -
137   - span.removeChild(node);
138   - parent.insertBefore(node, span);
139   - parent.removeChild(span);
140   - });
  145 + removeTagsTexts();
  146 + VLibrasPlayer.stop();
  147 + vwProgress.style.width = 0;
141 148 });
142 149  
143 150 vwSide.addEventListener('click', function () {
... ... @@ -146,15 +153,61 @@
146 153 minimize();
147 154 });
148 155  
  156 + function addTagsTexts() {
  157 + getAllNodeTexts(document.body, function (node) {
  158 + if (vw.contains(node)) return;
  159 +
  160 + node.innerHTML = '<span>' + node.innerHTML + '</span>';
  161 +
  162 + var span = node.querySelector('span');
  163 + span.classList.add('vw-text');
  164 +
  165 + span.addEventListener('click', function (e) {
  166 + e.preventDefault();
  167 +
  168 + vwProgress.style.width = 0;
  169 +
  170 + VLibrasWeb.lastTextElement = this;
  171 + window.VLibrasPlayer.translate(this.textContent);
  172 +
  173 + var actives = document.querySelector('.vw-text.vw-text-active');
  174 + if (actives) {
  175 + actives.classList.remove('vw-text-active');
  176 + }
  177 +
  178 + this.classList.add('vw-text-active');
  179 + });
  180 + });
  181 + }
  182 +
  183 + function removeTagsTexts() {
  184 + var tagsTexts = document.querySelectorAll('.vw-text');
  185 + for (var i = 0; i < tagsTexts; i++) {
  186 + var span = tagsTexts[i].querySelector('span');
  187 + tagsTexts[i].innerHTML = span.innerHTML;
  188 + tagsTexts[i].classList.remove('.vw-text');
  189 + tagsTexts[i].classList.remove('.vw-text-active');
  190 + }
  191 + }
  192 +
149 193 function getAllNodeTexts(root, callback) {
150 194 var noop = function () {};
151   - var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null);
152 195  
153   - while (walk.nextNode()) {
154   - var node = walk.currentNode;
  196 + for(var i = 0; i < root.childNodes.length; i++) {
  197 + var node = root.childNodes[i];
  198 + var anyText = false;
  199 + for(var j = 0; j < node.childNodes.length && node.tagName != 'SCRIPT'; j++) {
  200 + var child = node.childNodes[j];
  201 + if (child.nodeType == Node.TEXT_NODE && child.nodeValue.trim() != '') {
  202 + anyText = true;
  203 + break;
  204 + }
  205 + }
155 206  
156   - if (node.textContent.trim().length > 0) {
  207 + if (anyText) {
157 208 (callback || noop)(node);
  209 + } else {
  210 + getAllNodeTexts(node, callback);
158 211 }
159 212 }
160 213 }
... ...
package.json 0 → 100644
  Diff comments   View file @ea70d84
... ... @@ -0,0 +1,10 @@
  1 +{
  2 + "name": "vlibras-web",
  3 + "version": "1.0.0",
  4 + "description": "VLibras Web",
  5 + "repository": {
  6 + "type": "git",
  7 + "url": "git@git.lavid.ufpb.br:vlibras-plugplay"
  8 + },
  9 + "author": "LAViD"
  10 +}
... ...
sample.html
  Diff comments   View file @ea70d84
... ... @@ -3,6 +3,7 @@
3 3 <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
4 4 </head>
5 5 <body>
  6 + <span>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.</span>
6 7 <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 8 <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  
... ... @@ -23,6 +24,7 @@
23 24 </div>
24 25  
25 26 <div class="vw-canvas-wrapper">
  27 + <div class="vw-error"></div>
26 28 <div class="vw-loading active">
27 29 <img src="VLibrasWeb/Images/loading.gif" />
28 30 </div>
... ...