Download as
Browse Code »

Commit 13c5fffeff3eaed1fec45f9ce9b2acd16fd52a41

Authored by David Guilherme
1 parent c1ea6cc6
Exists in master

Add support to links

Showing 4 changed files with 69 additions and 2 deletions   Show diff stats
README.md
  Diff comments   View file @13c5fff
... ... @@ -44,6 +44,10 @@ Instalação
44 44 <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
45 45 </span>
46 46 </div>
  47 +
  48 + <div class="vw-links">
  49 + <ul></ul>
  50 + </div>
47 51 </div>
48 52 </div>
49 53 ```
... ...
VLibrasWeb/vlibras-web.css
  Diff comments   View file @13c5fff
... ... @@ -2,7 +2,7 @@
2 2 position: fixed;
3 3 right: 0;
4 4 top: 50%;
5   - margin-top: -225px;
  5 + margin-top: -285px;
6 6 z-index: 999999999999;
7 7 display: none;
8 8 font-family: Arial;
... ... @@ -168,6 +168,26 @@
168 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 191 .vlibras-widget .vw-controls {
172 192 width: 100%;
173 193 padding: 8.5px 10px;
... ...
VLibrasWeb/vlibras-web.js
  Diff comments   View file @13c5fff
... ... @@ -30,6 +30,7 @@
30 30 var vwClose = vwPlayer.querySelector('.vw-btn-close');
31 31 var vwSide = vwPlayer.querySelector('.vw-btn-side');
32 32 var vwControls = vwPlayer.querySelector('.vw-controls');
  33 + var vwLinks = vwPlayer.querySelector('.vw-links');
33 34 var vwCanvas = vwPlayer.querySelector('.vw-canvas-wrapper');
34 35 var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
35 36 var vwLoading = vwPlayer.querySelector('.vw-loading');
... ... @@ -148,6 +149,40 @@
148 149  
149 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 187 function addTagsTexts() {
153 188 getAllNodeTexts(document.body, function (node) {
... ... @@ -164,6 +199,8 @@
164 199 vwProgress.style.width = 0;
165 200 VLibrasWeb.lastTextElement = this.parentNode;
166 201  
  202 + showLinks(this);
  203 +
167 204 window.VLibrasPlayer.stop();
168 205 window.VLibrasPlayer.translate(this.textContent);
169 206  
... ...
sample.html
  Diff comments   View file @13c5fff
... ... @@ -3,9 +3,15 @@
3 3 <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
4 4 </head>
5 5 <body>
  6 + ola!
6 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 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 16 <div class="vlibras-widget">
11 17 <div class="vw-btn-access">
... ...