add command copy button (#3210)

Author: jingxu10

_css/custom.css

@@ -137,6 +137,25 @@
   padding-top: 50px;
 }
 
+
+
+.code-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.highlight-bash {
+  flex: 1;
+}
+
+.code-svg {
+  width: 20px;
+  height: 20px;
+  margin: 10px 5px 0px 8px;
+}
+
+
 /* Footer */
 a#wap_dns {
    display: none;

_scripts/actions.js

@@ -1,4 +1,7 @@
 $(document).ready(function() {
+  var svg_copy = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 111.07 122.88\" style=\"enable-background:new 0 0 111.07 122.88; cursor: pointer;\" xml:space=\"preserve\"><style type=\"text/css\"><![CDATA[.st0{fill-rule:evenodd;clip-rule:evenodd;}]]></style><g><path class=\"st0\" d=\"M97.67,20.81L97.67,20.81l0.01,0.02c3.7,0.01,7.04,1.51,9.46,3.93c2.4,2.41,3.9,5.74,3.9,9.42h0.02v0.02v75.28 v0.01h-0.02c-0.01,3.68-1.51,7.03-3.93,9.46c-2.41,2.4-5.74,3.9-9.42,3.9v0.02h-0.02H38.48h-0.01v-0.02 c-3.69-0.01-7.04-1.5-9.46-3.93c-2.4-2.41-3.9-5.74-3.91-9.42H25.1c0-25.96,0-49.34,0-75.3v-0.01h0.02 c0.01-3.69,1.52-7.04,3.94-9.46c2.41-2.4,5.73-3.9,9.42-3.91v-0.02h0.02C58.22,20.81,77.95,20.81,97.67,20.81L97.67,20.81z M0.02,75.38L0,13.39v-0.01h0.02c0.01-3.69,1.52-7.04,3.93-9.46c2.41-2.4,5.74-3.9,9.42-3.91V0h0.02h59.19 c7.69,0,8.9,9.96,0.01,10.16H13.4h-0.02v-0.02c-0.88,0-1.68,0.37-2.27,0.97c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v3.17 c0,19.61,0,39.21,0,58.81C10.17,83.63,0.02,84.09,0.02,75.38L0.02,75.38z M100.91,109.49V34.2v-0.02h0.02 c0-0.87-0.37-1.68-0.97-2.27c-0.59-0.58-1.4-0.96-2.28-0.96v0.02h-0.01H38.48h-0.02v-0.02c-0.88,0-1.68,0.38-2.27,0.97 c-0.59,0.58-0.96,1.4-0.96,2.27h0.02v0.01v75.28v0.02h-0.02c0,0.88,0.38,1.68,0.97,2.27c0.59,0.59,1.4,0.96,2.27,0.96v-0.02h0.01 h59.19h0.02v0.02c0.87,0,1.68-0.38,2.27-0.97c0.59-0.58,0.96-1.4,0.96-2.27L100.91,109.49L100.91,109.49L100.91,109.49 L100.91,109.49z\"/></g></svg>";
+  var svg_done = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 122.88 109.76\" style=\"enable-background:new 0 0 122.88 109.76\" xml:space=\"preserve\"><style type=\"text/css\">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path fill=\"#01A601\" class=\"st0\" d=\"M0,52.88l22.68-0.3c8.76,5.05,16.6,11.59,23.35,19.86C63.49,43.49,83.55,19.77,105.6,0h17.28 C92.05,34.25,66.89,70.92,46.77,109.76C36.01,86.69,20.96,67.27,0,52.88L0,52.88z\"/></g></svg>";
+
   var search_fields = [];
   if(window.location.hash.startsWith("#installation")) {
     var hash_list = decodeURIComponent(window.location.hash).split("?");
@@ -143,7 +146,10 @@ $(document).ready(function() {
   }
 
   $.code_gen = function(data) {
-    return "<div class=\"highlight-bash notranslate\"><div class=\"highlight\"><pre>" + data.join("<br />") + "</pre></div></div>";
+    return "<div class=\"code-div\">"
+          + "<div class=\"highlight-bash notranslate\"><div class=\"highlight\"><pre>" + data.join("\n") + "</pre></div></div>"
+          + "<div class=\"code-svg\">" + svg_copy + "</div>"
+          + "</div>";
   }
 
   $.secid_gen = function(indice_main, index_sub = -1) {
@@ -433,9 +439,9 @@ $(document).ready(function() {
               ret += "<div id=\"code-storage" + index + "\">";
               $.each(value.commands, function(index, value) {
                 if(index == 0)
-                  ret += $.code_gen(value).replace("notranslate\"", "notranslate\" style=\"display: block\"");
+                  ret += $.code_gen(value).replace("code-div\"", "code-div\" style=\"display: flex\"");
                 else
-                  ret += $.code_gen(value).replace("notranslate\"", "notranslate\" style=\"display: none\"");
+                  ret += $.code_gen(value).replace("code-div\"", "code-div\" style=\"display: none\"");
               });
               ret += "</div>";
             }
@@ -800,10 +806,24 @@ $(document).ready(function() {
     var i = 0;
     $("#code-" + category).children().each(function () {
       if(i == index)
-        $(this).css("display", "block");
+        $(this).css("display", "flex");
       else
         $(this).css("display", "none");
       i += 1;
     });
   });
+
+  $("#install-instructions").on("click", "svg", function() {
+    try {
+      var text = $(this).parent().parent().children("div:first").children("div:first").text();
+      navigator.clipboard.writeText(text);
+      var div_svg = $(this).parent();
+      div_svg.html(svg_done);
+      setTimeout(function(div) {
+        div.html(svg_copy);
+      }, 2000, div_svg);
+    } catch(err) {
+      window.alert("Failed to copy commands to clipboard.\n" + err.message);
+    }
+  });
 });