[flink] branch master updated: [FLINK-21384][docs] Automatically copy maven dependencies to clipboard on click

[sj...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

sjwiesman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink.git


The following commit(s) were added to refs/heads/master by this push:
     new 3bfa1de  [FLINK-21384][docs] Automatically copy maven dependencies to clipboard on click
3bfa1de is described below

commit 3bfa1decc3cfd3b1a3c5ca4eed292744914c9849
Author: Seth Wiesman <sj...@gmail.com>
AuthorDate: Tue Feb 16 13:49:38 2021 -0600

    [FLINK-21384][docs] Automatically copy maven dependencies to clipboard on click
    
    This closes #14952
---
 docs/README.md                                  |  4 +-
 docs/layouts/shortcodes/artifact.html           |  5 +-
 docs/layouts/shortcodes/sql_download_table.html |  5 +-
 docs/static/js/flink.js                         | 99 +++++++++++++++++++++----
 4 files changed, 94 insertions(+), 19 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 01024e6..fa2a777 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -95,14 +95,14 @@ to its documentation markdown. The following are available for use:
 
 #### Flink Artifact
 
-    {{< artfiact flink-core >}}
+    {{< artfiact flink-streaming-java withScalaVersion >}}
 
 This will be replaced by the maven artifact for flink-streaming-java that users should copy into their pom.xml file. It will render out to:
 
 ```xml
 <dependency>
     <groupdId>org.apache.flink</groupId>
-    <artifactId>flink-core</artifactId>
+    <artifactId>flink-streaming-java_2.11</artifactId>
     <version><!-- current flink version --></version>
 </dependency>
 ```
diff --git a/docs/layouts/shortcodes/artifact.html b/docs/layouts/shortcodes/artifact.html
index 8f82c35..3aa379c 100644
--- a/docs/layouts/shortcodes/artifact.html
+++ b/docs/layouts/shortcodes/artifact.html
@@ -48,10 +48,13 @@ under the License.
   {{ $artifactId = printf "%s%s" $artifactId $.Site.Params.ScalaVersion }}
 {{ end }}
 
-<div id="{{ $hash }}" onclick="selectText('{{ $hash }}')" class="highlight"><pre class="chroma"><code class="language-xml" data-lang="xml"><span class="nt">&ltdependency&gt</span>
+<div id="{{ $hash }}" onclick="selectTextAndCopy('{{ $hash }}')"class="highlight"><pre class="chroma"><code class="language-xml" data-lang="xml"><span class="nt">&ltdependency&gt</span>
     <span class="nt">&ltgroupId&gt</span>org.apache.flink<span class="nt">&lt/groupId&gt</span>
     <span class="nt">&ltartifactId&gt</span>{{- $artifactId -}}<span class="nt">&lt/artifactId&gt</span>
     <span class="nt">&ltversion&gt</span>{{- site.Params.Version -}}<span class="nt">&lt/version&gt</span>{{ if ne $testScope "" }}    
     <span class="nt">&ltscope&gt</span>test<span class="nt">&lt/scope&gt</span>{{ end }}{{ if ne $testClassifier "" }}    
     <span class="nt">&ltclassifer&gt</span>tests<span class="nt">&lt/classifier&gt</span>{{ end }}
 <span class="nt">&lt/dependency&gt</span></code></pre></div>
+<div class="book-hint info" style="text-align:center;display:none" copyable="flink-module" copyattribute="{{ $hash }}">
+  Copied to clipboard!
+</div> 
diff --git a/docs/layouts/shortcodes/sql_download_table.html b/docs/layouts/shortcodes/sql_download_table.html
index 322db22..3c348c7e 100644
--- a/docs/layouts/shortcodes/sql_download_table.html
+++ b/docs/layouts/shortcodes/sql_download_table.html
@@ -89,10 +89,13 @@ and SQL Client with SQL JAR bundles.</p>
   rendered documentation. 
 */}}
 {{ define "maven-artifact" }}{{/* (dict "ArtifactId" .ArtifactId */}}
-<div id="{{ .ArtifactId }}" onclick="selectText('{{ .ArtifactId }}')" class="highlight"><pre class="chroma"><code class="language-xml" data-lang="xml"><span class="nt">&ltdependency&gt</span>
+<div id="{{ .ArtifactId }}" onclick="selectTextAndCopy('{{ .ArtifactId }}')" class="highlight"><pre class="chroma"><code class="language-xml" data-lang="xml"><span class="nt">&ltdependency&gt</span>
   <span class="nt">&ltgroupId&gt</span>org.apache.flink<span class="nt">&lt/groupId&gt</span>
   <span class="nt">&ltartifactId&gt</span>{{- partial "docs/interpolate" .ArtifactId -}}<span class="nt">&lt/artifactId&gt</span>
   <span class="nt">&ltversion&gt</span>{{- site.Params.Version -}}<span class="nt">&lt/version&gt</span>
 <span class="nt">&lt/dependency&gt</span></code></pre></div>
+<div class="book-hint info" style="text-align:center;display:none" copyable="flink-module" copyattribute="{{ .ArtifactId }}">
+Copied to clipboard!
+</div>
 {{ end }}
 
diff --git a/docs/static/js/flink.js b/docs/static/js/flink.js
index 17fa36f..4bfa4ec 100644
--- a/docs/static/js/flink.js
+++ b/docs/static/js/flink.js
@@ -39,8 +39,8 @@ function onSwitch(tabId) {
  * Function to collapse the ToC in desktop mode.
  */
 function collapseToc() {
-    document.querySelector(".book-toc").setAttribute("style", "display:none");
-    document.querySelector(".expand-toc").setAttribute("style", "display:block");
+    document.querySelector(".book-toc").style["display"] = "none";
+    document.querySelector(".expand-toc").style["display"] = "block";
 
     sessionStorage.setItem("collapse-toc", "true");
 }
@@ -49,27 +49,96 @@ function collapseToc() {
  * Function to expand the ToC in desktop mode.
  */
 function expandToc() {
-    document.querySelector(".book-toc").setAttribute("style", "display:block");
-    document.querySelector(".expand-toc").setAttribute("style", "display:none");
+    document.querySelector(".book-toc").style["display"] = "block";
+    document.querySelector(".expand-toc").style["display"] = "none";
+
     sessionStorage.removeItem("collapse-toc");
 }
 
+
+
+/**
+ * Selects all text within the given container and copies it
+ * to the users clipboard. If any actions are not supported
+ * by a users browser this function will do nothing.
+ */
+function selectTextAndCopy(containerId) {
+    if (wasLastCopied(containerId)) {
+        return;
+    }
+
+    try {
+        if (highlightContent(containerId)) {
+            if (document.queryCommandSupported("copy")) {
+                document.execCommand("copy") && showCurrentCopyAlert(containerId);
+            }
+        }  
+    } catch (e) {}
+}
+
+/**
+ * Checks if this container was the most recent one copied
+ * to the clipboard. This was users can double click and
+ * highlight specific portions of the dep. 
+ */
+function wasLastCopied(containerId) {
+    return document
+        .querySelector("[copyable='flink-module'][copyattribute='" + containerId + "'")
+        .style["display"] == "block";
+}
+
 /**
- * Selects all text within the given container.
+ * Highlights the content of the given container.
+ * Returns true on success, false otherwise.
  */
-function selectText(containerId) {
-    if (document.selection) {
-        var range = document.body.createTextRange();
-        range.moveToElementText(document.getElementById(containerId));
-        range.select();
-    } else if (window.getSelection) {
-        var range = document.createRange();
-        range.selectNode(document.getElementById(containerId));
-        window.getSelection().removeAllRanges();
-        window.getSelection().addRange(range);
+function highlightContent(containerId) {
+    try {
+        if (document.selection) {
+            var range = document.body.createTextRange();
+            range.moveToElementText(document.getElementById(containerId));
+            range.select().createTextRange();
+            return true;
+        } else if (window.getSelection) {
+            var range = document.createRange();
+            range.selectNode(document.getElementById(containerId));
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            return true;
+        } else {
+            return false;
+        }
+    } catch (err) {
+        // Text highlighting is not supported by this browser
+        return false;
     }
 }
 
+
+/**
+ * Makes the copy alert for the given container
+ * visible while hiding all others.
+ */
+function showCurrentCopyAlert(containerId) {
+    document
+        .querySelectorAll("[copyable='flink-module']")
+        .forEach(function (alert) {
+            alert.style["display"] = "none";
+        });
+
+    var alert = document.querySelector("[copyable='flink-module'][copyattribute='" + containerId + "'");
+
+    alert.style["text-align"] = "center";
+    alert.style["display"] = "block";
+}
+
+/**
+ * Adds forEach to NodeList for old versions
+ * of microsoft IE and Edge.
+ */
+if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+
 document.addEventListener("DOMContentLoaded", function(event) { 
     if (sessionStorage.getItem("collapse-toc") === "true") {
         collapseToc();