From 345937f4d8f2ed9092a0f2a1432561c0f359a332 Mon Sep 17 00:00:00 2001
From: mtail <mtail@google.com>
Date: Tue, 27 Mar 2018 16:32:25 -0700
Subject: [PATCH] Fix a few bugs and add a feature.

- Link injection for document headers has been broken for a while due to my
misunderstanding of the "for in" syntax in JavaScript. This now works as expected.

- Same problem also prevented the feature that causes every link to outside of istio.io
to be opened in a separate window. This now works as intended.

- Made the gear dropdown menu be right-aligned such that it doesn't go off-screen on
portrait mode tablets.

- Stop importing Popper.js since it's only needed for dropdown menus that aren't in the
nav bar. Ours is in a nav bar...

- Added link injection for <dt> terms, which makes it easy to create links to individual glossary entries.
---
 _includes/header.html   |  2 +-
 _layouts/base.html      |  1 -
 _sass/base/_common.scss |  3 ++-
 js/misc.js              | 44 ++++++++++++++++++++++++++++++-----------
 js/misc.min.js          |  2 +-
 5 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 27ac7dc91d5e..f84245a60ea4 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -48,7 +48,7 @@
                         <i style="width: 1em" class='fa fa-lg fa-cog'></i>
                     </a>
 
-                    <ul class="dropdown-menu" aria-labelledby="gearDropdown">
+                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="gearDropdown">
                         {% assign future_release = true %}
                         {% for rel in site.data.releases %}
 
diff --git a/_layouts/base.html b/_layouts/base.html
index 1def65b46034..7f59cef45391 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -90,7 +90,6 @@
 
         <!-- libraries we pull in -->
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
         <script src="https://www.google.com/cse/brand?form=searchbox"></script>
diff --git a/_sass/base/_common.scss b/_sass/base/_common.scss
index 19d659a76c66..3234f6b3fe87 100644
--- a/_sass/base/_common.scss
+++ b/_sass/base/_common.scss
@@ -291,7 +291,8 @@ h2:hover .header-link,
 h3:hover .header-link,
 h4:hover .header-link,
 h5:hover .header-link,
-h6:hover .header-link {
+h6:hover .header-link,
+dt:hover .header-link {
     transition: opacity .4s ease-in-out;
     opacity: 1;
 }
diff --git a/js/misc.js b/js/misc.js
index 3dc89b6deb19..5bc06ea07014 100644
--- a/js/misc.js
+++ b/js/misc.js
@@ -116,28 +116,47 @@ function patchDOM() {
         });
     }
 
+    function attachLink(node) {
+        var i = document.createElement("i");
+        i.className = "fa fa-link";
+
+        var anchor = document.createElement("a");
+        anchor.className = "header-link";
+        anchor.href = "#" + node.id;
+        anchor.appendChild(i);
+
+        node.appendChild(anchor);
+    }
+
     // Add a link icon next to each header so people can easily get bookmarks to headers
     function attachLinksToHeaders() {
         for (var level = 1; level <= 6; level++) {
-            for (var header in document.getElementsByTagName("h" + level)) {
-                if (typeof header.id !== "undefined" && header.id !== "") {
-                    var i = document.createElement("i");
-                    i.className = "fa fa-link";
-
-                    var anchor = document.createElement("a");
-                    anchor.className = "header-link";
-                    anchor.href = "#" + header.id;
-                    anchor.appendChild(i);
-
-                    header.appendChild(anchor);
+            var headers = document.getElementsByTagName("h" + level);
+            for (var i = 0; i < headers.length; i++) {
+                var header = headers[i]
+                if (header.id !== "") {
+                    attachLink(header);
                 }
             }
         }
     }
 
+    // Add a link icon next to each define term so people can easily get bookmarks to them in the glossary
+    function attachLinksToDefinedTerms() {
+        var terms = document.getElementsByTagName("dt");
+        for (var i = 0; i < terms.length; i++) {
+            var term = terms[i]
+            if (term.id !== "") {
+                attachLink(term);
+            }
+        }
+    }
+
     // Make it so each link outside of the current domain opens up in a different window
     function makeOutsideLinksOpenInTabs() {
-        for (var link in document.getElementsByTagName("a")) {
+        var links = document.getElementsByTagName("a");
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
             if (link.hostname && link.hostname != location.hostname) {
                 link.setAttribute("target", "_blank")
             }
@@ -163,6 +182,7 @@ function patchDOM() {
 
     attachCopyButtons();
     attachLinksToHeaders();
+    attachLinksToDefinedTerms();
     makeOutsideLinksOpenInTabs();
     loadExternalPreBlocks();
 }
diff --git a/js/misc.min.js b/js/misc.min.js
index e7c0e262c8e6..c5f09ce0d9f7 100644
--- a/js/misc.min.js
+++ b/js/misc.min.js
@@ -1,4 +1,4 @@
 ---
 ---
 {% include home.html %}
-'use strict';function doSearch(){var a='{{home}}/search.html?q='+document.getElementsByName('q')[0].value;window.location.assign(a)}$(function(a){a(document).ready(function(){a('.btn-search').on('click',function(b){b.preventDefault(),doSearch()}),a('[data-toggle="offcanvas"]').on('click',function(){a('.row-offcanvas').toggleClass('active'),a(this).children('i.fa').toggleClass('fa-chevron-right'),a(this).children('i.fa').toggleClass('fa-chevron-left')}),a(document).on('click','.tree-toggle',function(){a(this).children('i.fa').toggleClass('fa-caret-right'),a(this).children('i.fa').toggleClass('fa-caret-down'),a(this).parent().children('ul.tree').toggle(200)}),a(document).on('mouseenter','pre',function(){a(this).next().toggleClass('copy-show',!0),a(this).next().toggleClass('copy-hide',!1)}),a(document).on('mouseleave','pre',function(){a(this).next().toggleClass('copy-show',!1),a(this).next().toggleClass('copy-hide',!0)}),a(document).on('mouseenter','button.copy',function(){a(this).toggleClass('copy-show',!0),a(this).toggleClass('copy-hide',!1)}),a(document).on('mouseleave','button.copy',function(){a(this).toggleClass('copy-show',!1),a(this).toggleClass('copy-hide',!0)})})}(jQuery));function patchDOM(){(function(){for(var h,f=document.getElementsByTagName('PRE'),g=0;g<f.length;g++){h=document.createElement('BUTTON'),h.title='Copy to clipboard',h.className='copy copy-hide',h.innerText='Copy';var j=f[g].parentElement;if('DIV'==j.tagName)j.appendChild(h);else{var k=document.createElement('DIV');k.className='highlight',j.insertBefore(k,f[g]),k.appendChild(f[g]),k.appendChild(h)}}var l=new Clipboard('button.copy',{target:function(m){return m.previousElementSibling}});l.on('success',function(m){m.clearSelection(),m.trigger.textContent='Done',window.setTimeout(function(){m.trigger.textContent='Copy'},2e3)}),l.on('error',function(m){m.trigger.textContent='Not supported',window.setTimeout(function(){m.trigger.textContent='Copy'},5e3)})})(),function(){for(var f=1;6>=f;f++)for(var g in document.getElementsByTagName('h'+f))if('undefined'!=typeof g.id&&''!==g.id){var h=document.createElement('i');h.className='fa fa-link';var j=document.createElement('a');j.className='header-link',j.href='#'+g.id,j.appendChild(h),g.appendChild(j)}}(),function(){for(var f in document.getElementsByTagName('a'))f.hostname&&f.hostname!=location.hostname&&f.setAttribute('target','_blank')}(),function(){function f(j,k){fetch(k).then(l=>l.text()).then(l=>{j.firstChild.innerText=l})}for(var g=document.getElementsByTagName('PRE'),h=0;h<g.length;h++)g[h].hasAttribute('data-src')&&f(g[h],g[h].getAttribute('data-src'))}()}document.addEventListener('DOMContentLoaded',patchDOM);
+'use strict';function doSearch(){var a='{{home}}/search.html?q='+document.getElementsByName('q')[0].value;window.location.assign(a)}$(function(a){a(document).ready(function(){a('.btn-search').on('click',function(b){b.preventDefault(),doSearch()}),a('[data-toggle="offcanvas"]').on('click',function(){a('.row-offcanvas').toggleClass('active'),a(this).children('i.fa').toggleClass('fa-chevron-right'),a(this).children('i.fa').toggleClass('fa-chevron-left')}),a(document).on('click','.tree-toggle',function(){a(this).children('i.fa').toggleClass('fa-caret-right'),a(this).children('i.fa').toggleClass('fa-caret-down'),a(this).parent().children('ul.tree').toggle(200)}),a(document).on('mouseenter','pre',function(){a(this).next().toggleClass('copy-show',!0),a(this).next().toggleClass('copy-hide',!1)}),a(document).on('mouseleave','pre',function(){a(this).next().toggleClass('copy-show',!1),a(this).next().toggleClass('copy-hide',!0)}),a(document).on('mouseenter','button.copy',function(){a(this).toggleClass('copy-show',!0),a(this).toggleClass('copy-hide',!1)}),a(document).on('mouseleave','button.copy',function(){a(this).toggleClass('copy-show',!1),a(this).toggleClass('copy-hide',!0)})})}(jQuery));function patchDOM(){function b(h){var j=document.createElement('i');j.className='fa fa-link';var k=document.createElement('a');k.className='header-link',k.href='#'+h.id,k.appendChild(j),h.appendChild(k)}(function(){for(var k,h=document.getElementsByTagName('PRE'),j=0;j<h.length;j++){k=document.createElement('BUTTON'),k.title='Copy to clipboard',k.className='copy copy-hide',k.innerText='Copy';var l=h[j].parentElement;if('DIV'==l.tagName)l.appendChild(k);else{var m=document.createElement('DIV');m.className='highlight',l.insertBefore(m,h[j]),m.appendChild(h[j]),m.appendChild(k)}}var n=new Clipboard('button.copy',{target:function(o){return o.previousElementSibling}});n.on('success',function(o){o.clearSelection(),o.trigger.textContent='Done',window.setTimeout(function(){o.trigger.textContent='Copy'},2e3)}),n.on('error',function(o){o.trigger.textContent='Not supported',window.setTimeout(function(){o.trigger.textContent='Copy'},5e3)})})(),function(){for(var j,h=1;6>=h;h++){j=document.getElementsByTagName('h'+h);for(var l,k=0;k<j.length;k++)l=j[k],''!==l.id&&b(l)}}(),function(){for(var k,h=document.getElementsByTagName('dt'),j=0;j<h.length;j++)k=h[j],''!==k.id&&b(k)}(),function(){for(var k,h=document.getElementsByTagName('a'),j=0;j<h.length;j++)k=h[j],k.hostname&&k.hostname!=location.hostname&&k.setAttribute('target','_blank')}(),function(){function h(l,m){fetch(m).then(n=>n.text()).then(n=>{l.firstChild.innerText=n})}for(var j=document.getElementsByTagName('PRE'),k=0;k<j.length;k++)j[k].hasAttribute('data-src')&&h(j[k],j[k].getAttribute('data-src'))}()}document.addEventListener('DOMContentLoaded',patchDOM);