Commit 13c5fffeff3eaed1fec45f9ce9b2acd16fd52a41

Authored by David Guilherme
1 parent c1ea6cc6
Exists in master

Add support to links

@@ -44,6 +44,10 @@ Instalação @@ -44,6 +44,10 @@ Instalação
44 <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" /> 44 <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
45 </span> 45 </span>
46 </div> 46 </div>
  47 +
  48 + <div class="vw-links">
  49 + <ul></ul>
  50 + </div>
47 </div> 51 </div>
48 </div> 52 </div>
49 ``` 53 ```
VLibrasWeb/vlibras-web.css
@@ -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;
VLibrasWeb/vlibras-web.js
@@ -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
@@ -3,9 +3,15 @@ @@ -3,9 +3,15 @@
3 <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css"> 3 <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
4 </head> 4 </head>
5 <body> 5 <body>
  6 + ola!
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> 7 <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>
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> 8 <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>
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> 9 + <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>
  10 + <p><a href="#">#4</a><a href="#">#3</a><a href="#">#2</a><a href="#">#1</a></p>
  11 + <ul>
  12 + <li><a href="#l1"><b>Olá!</b></a></li>
  13 + <li><a href="#l2">Olá 2!</a></li>
  14 + </ul>
9 15
10 <div class="vlibras-widget"> 16 <div class="vlibras-widget">
11 <div class="vw-btn-access"> 17 <div class="vw-btn-access">