From 8aebd51c222fe3a2670a7d41993644cf1498e382 Mon Sep 17 00:00:00 2001
From: Sima Zhu <48036328+sima-zhu@users.noreply.github.com>
Date: Sat, 14 Nov 2020 17:13:22 -0800
Subject: [PATCH] Add collapsible version on github io. (#982)

---
 .../index/templates/matthews/styles/main.css  | 25 ++++++++
 .../index/templates/matthews/styles/main.js   | 58 ++++++++++++++-----
 2 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/eng/docs/index/templates/matthews/styles/main.css b/eng/docs/index/templates/matthews/styles/main.css
index 773aa0a94..bd7267ebe 100644
--- a/eng/docs/index/templates/matthews/styles/main.css
+++ b/eng/docs/index/templates/matthews/styles/main.css
@@ -255,6 +255,31 @@ article h4 {
 .navbar-inverse .navbar-link:hover {
   color: #ecdbff;
 }
+.versionarrow {
+  margin-left: 0.8em;
+  margin-top: -1.5em;
+  margin-bottom: -1em;
+  padding: 1em;
+}
+.versionarrow::before {
+  position: absolute;
+  content: '';
+  width: 0;
+  height: 0;
+  border: .5em solid transparent;
+  border-left-color: gray;
+  transform-origin: 0 50%;
+  transition: transform .1s;
+  margin-top: 0.2em;
+}
+.versionarrow.disable {
+  text-decoration: line-through;
+}
+.versionarrow.down::before {
+  transform: rotate(90deg);
+  margin-top: 0em;
+  transition: transform .1s;
+}
 
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
diff --git a/eng/docs/index/templates/matthews/styles/main.js b/eng/docs/index/templates/matthews/styles/main.js
index d10d47fcf..1c79f045d 100644
--- a/eng/docs/index/templates/matthews/styles/main.js
+++ b/eng/docs/index/templates/matthews/styles/main.js
@@ -100,25 +100,57 @@ function populateOptions(selector, packageName) {
     })
 }
 
+function httpGetLatestAsync(targetUrl, latestVersions, packageName) {
+    httpGetAsync(targetUrl, function (responseText) {
+        if (responseText) {
+            version = responseText.match(/[^\r\n]+/g)
+            $(latestVersions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, version) + '" target="_blank">' + version + '</a></li>')
+        }             
+    })
+}
 
 function populateIndexList(selector, packageName) {
-    url = BLOB_URI_PREFIX + packageName + "/versioning/versions"
+    var url = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/versions"
+    var latestGAUrl = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/latest-ga"
+    var latestPreviewUrl = "https://azuresdkdocs.blob.core.windows.net/$web/" + SELECTED_LANGUAGE + "/" + packageName + "/versioning/latest-preview"
+    var latestVersions = document.createElement("ul")
+    httpGetLatestAsync(latestGAUrl, latestVersions, packageName)
+    httpGetLatestAsync(latestPreviewUrl, latestVersions, packageName)
+    var publishedVersions = $('<ul style="display: none;"></ul>')
+    var collapsible = $('<div class="versionarrow">&nbsp;&nbsp;&nbsp;Other versions</div>')
 
-    httpGetAsync(url, function (responseText) {
+    $(selector).after(latestVersions)
+    $(latestVersions).after(collapsible)
+    $(collapsible).after(publishedVersions)
 
-        var publishedversions = document.createElement("ul")
-        if (responseText) {
-            options = responseText.match(/[^\r\n]+/g)
-
-            for (var i in options) {
-                $(publishedversions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, options[i]) + '" target="_blank">' + options[i] + '</a></li>')
+    // Add collapsible arrow on other versions.
+    $(collapsible).on('click', function(event) {
+        event.preventDefault();
+        if (collapsible.hasClass('disable')) {
+            return
+        }
+        $(this).toggleClass('down')
+        if ($(this).hasClass('down')) {
+            if (!$(selector).hasClass('loaded')){
+                httpGetAsync(url, function (responseText) {
+                    if (responseText) {
+                        options = responseText.match(/[^\r\n]+/g)
+                        for (var i in options) {
+                            $(publishedVersions).append('<li><a href="' + getPackageUrl(SELECTED_LANGUAGE, packageName, options[i]) + '" target="_blank">' + options[i] + '</a></li>')
+    
+                        }
+                    }
+                    else {
+                        $(publishedVersions).append('<li>No discovered versions present in blob storage.</li>')
+                    }                
+                    $(selector).addClass("loaded")
+                })
             }
+            $(publishedVersions).show()
+        } else {
+            $(publishedVersions).hide()
         }
-        else {
-            $(publishedversions).append('<li>No discovered versions present in blob storage.</li>')
-        }
-        $(selector).after(publishedversions)
-    })
+    });
 }
 
 function getPackageUrl(language, package, version) {