Add support to links

David Guilherme
1 parent c1ea6cc6
Showing 4 changed files with 69 additions and 2 deletions Show diff stats
README.md
VLibrasWeb/vlibras-web.css
VLibrasWeb/vlibras-web.js
sample.html
@@ -44,6 +44,10 @@ Instalação
         <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
       </span>
     </div>
+
+    <div class="vw-links">
+      <ul></ul>
+    </div>
   </div>
 </div>
 ```
@@ -2,7 +2,7 @@
   position: fixed;
   right: 0;
   top: 50%;
-  margin-top: -225px;
+  margin-top: -285px;
   z-index: 999999999999;
   display: none;
   font-family: Arial;
@@ -168,6 +168,26 @@
   content: ">";
 }
+.vlibras-widget .vw-links {
+  background-color: #fff;
+  width: 100%;
+  max-height: 120px;
+  overflow: auto;
+  display: none;
+}
+
+.vw-links.active {
+  display: block;
+}
+
+.vw-links ul {
+  list-style: none;
+}
+
+.vw-links li {
+  padding: .5em 0;
+}
+
 .vlibras-widget .vw-controls {
   width: 100%;
   padding: 8.5px 10px;
@@ -30,6 +30,7 @@
     var vwClose    = vwPlayer.querySelector('.vw-btn-close');
     var vwSide     = vwPlayer.querySelector('.vw-btn-side');
     var vwControls = vwPlayer.querySelector('.vw-controls');
+    var vwLinks    = vwPlayer.querySelector('.vw-links');
     var vwCanvas   = vwPlayer.querySelector('.vw-canvas-wrapper');
     var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
     var vwLoading  = vwPlayer.querySelector('.vw-loading');
@@ -148,6 +149,40 @@
       minimize();
     });
+    
+    function hasParent(el, fn) {
+      var node = el.parentNode;
+      while ( node != null ) {
+        if (fn(node)) return node;
+        node = node.parentNode;
+      }
+      
+      return false;
+    }
+
+    function showLinks(content) {
+      var links = Array.prototype.slice.call(content.querySelectorAll('a'));
+      var linksList = vwLinks.querySelector('ul');
+      
+      var link = hasParent(content, function (parent) { return parent.tagName == 'A'; });
+      if (link) {
+        links.push(link);
+      }
+
+      linksList.innerHTML = '';
+      for(var i = 0; i < links.length; i++) {
+        var link = links[i];
+        var li = document.createElement('li');
+        li.innerHTML = '<a href="' + (link.href || '') + '" target="' + link.target + '">' + link.textContent + '</a>';
+        linksList.appendChild(li);
+      }
+
+      if (links.length > 0) {
+        vwLinks.classList.add('active');
+      } else {
+        vwLinks.classList.remove('active');
+      }
+    }
     function addTagsTexts() {
       getAllNodeTexts(document.body, function (node) {
@@ -164,6 +199,8 @@
           vwProgress.style.width = 0;
           VLibrasWeb.lastTextElement = this.parentNode;
+          showLinks(this);
+
           window.VLibrasPlayer.stop();
           window.VLibrasPlayer.translate(this.textContent);
@@ -3,9 +3,15 @@
     <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
   </head>
   <body>
+    ola!
     <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>
     <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>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident <a href="http://www.rnp.br" target="_blank">incidunt</a> voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?</p>
+    <p><a href="#">#4</a><a href="#">#3</a><a href="#">#2</a><a href="#">#1</a></p>
+    <ul>
+        <li><a href="#l1"><b>Olá!</b></a></li>
+        <li><a href="#l2">Olá 2!</a></li>
+    </ul>
     <div class="vlibras-widget">
       <div class="vw-btn-access">
	@@ -2,7 +2,7 @@		@@ -2,7 +2,7 @@
2	position: fixed;	2	position: fixed;
3	right: 0;	3	right: 0;
4	top: 50%;	4	top: 50%;
5	- margin-top: -225px;	5	+ margin-top: -285px;
6	z-index: 999999999999;	6	z-index: 999999999999;
7	display: none;	7	display: none;
8	font-family: Arial;	8	font-family: Arial;
	@@ -168,6 +168,26 @@		@@ -168,6 +168,26 @@
168	content: ">";	168	content: ">";
169	}	169	}
170		170
		171	+.vlibras-widget .vw-links {
		172	+ background-color: #fff;
		173	+ width: 100%;
		174	+ max-height: 120px;
		175	+ overflow: auto;
		176	+ display: none;
		177	+}
		178	+
		179	+.vw-links.active {
		180	+ display: block;
		181	+}
		182	+
		183	+.vw-links ul {
		184	+ list-style: none;
		185	+}
		186	+
		187	+.vw-links li {
		188	+ padding: .5em 0;
		189	+}
		190	+
171	.vlibras-widget .vw-controls {	191	.vlibras-widget .vw-controls {
172	width: 100%;	192	width: 100%;
173	padding: 8.5px 10px;	193	padding: 8.5px 10px;
	@@ -30,6 +30,7 @@		@@ -30,6 +30,7 @@
30	var vwClose = vwPlayer.querySelector('.vw-btn-close');	30	var vwClose = vwPlayer.querySelector('.vw-btn-close');
31	var vwSide = vwPlayer.querySelector('.vw-btn-side');	31	var vwSide = vwPlayer.querySelector('.vw-btn-side');
32	var vwControls = vwPlayer.querySelector('.vw-controls');	32	var vwControls = vwPlayer.querySelector('.vw-controls');
		33	+ var vwLinks = vwPlayer.querySelector('.vw-links');
33	var vwCanvas = vwPlayer.querySelector('.vw-canvas-wrapper');	34	var vwCanvas = vwPlayer.querySelector('.vw-canvas-wrapper');
34	var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');	35	var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
35	var vwLoading = vwPlayer.querySelector('.vw-loading');	36	var vwLoading = vwPlayer.querySelector('.vw-loading');
	@@ -148,6 +149,40 @@		@@ -148,6 +149,40 @@
148		149
149	minimize();	150	minimize();
150	});	151	});
		152	+
		153	+ function hasParent(el, fn) {
		154	+ var node = el.parentNode;
		155	+ while ( node != null ) {
		156	+ if (fn(node)) return node;
		157	+ node = node.parentNode;
		158	+ }
		159	+
		160	+ return false;
		161	+ }
		162	+
		163	+ function showLinks(content) {
		164	+ var links = Array.prototype.slice.call(content.querySelectorAll('a'));
		165	+ var linksList = vwLinks.querySelector('ul');
		166	+
		167	+ var link = hasParent(content, function (parent) { return parent.tagName == 'A'; });
		168	+ if (link) {
		169	+ links.push(link);
		170	+ }
		171	+
		172	+ linksList.innerHTML = '';
		173	+ for(var i = 0; i < links.length; i++) {
		174	+ var link = links[i];
		175	+ var li = document.createElement('li');
		176	+ li.innerHTML = '<a href="' + (link.href \|\| '') + '" target="' + link.target + '">' + link.textContent + '</a>';
		177	+ linksList.appendChild(li);
		178	+ }
		179	+
		180	+ if (links.length > 0) {
		181	+ vwLinks.classList.add('active');
		182	+ } else {
		183	+ vwLinks.classList.remove('active');
		184	+ }
		185	+ }
151		186
152	function addTagsTexts() {	187	function addTagsTexts() {
153	getAllNodeTexts(document.body, function (node) {	188	getAllNodeTexts(document.body, function (node) {
	@@ -164,6 +199,8 @@		@@ -164,6 +199,8 @@
164	vwProgress.style.width = 0;	199	vwProgress.style.width = 0;
165	VLibrasWeb.lastTextElement = this.parentNode;	200	VLibrasWeb.lastTextElement = this.parentNode;
166		201
		202	+ showLinks(this);
		203	+
167	window.VLibrasPlayer.stop();	204	window.VLibrasPlayer.stop();
168	window.VLibrasPlayer.translate(this.textContent);	205	window.VLibrasPlayer.translate(this.textContent);
169		206