tdf#122548 copy bascode and pycode to clipboard

This will allow easy testing of coding examples.

Change-Id: I30fc53642b1579744591f2de0c84a615d1755352
Reviewed-on: https://gerrit.libreoffice.org/71385
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

3 files changed, 54 insertions, 5 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 91b0a9adcb..bf1358ee11 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -294,8 +294,9 @@ h6 {
     text-align: left;
 }
 
+.pycode,
 .bascode {
-    margin-top:15px;
+    margin-top: 15px;
     margin-bottom: 15px;
 }
 
@@ -620,6 +621,7 @@ li.disabled a {
     float: left;
     display: none;
 }
+
 .calc-icon,
 .chart-icon,
 .writer-icon,
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 7789c17aea..59dd378c73 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -79,6 +79,41 @@ function debounce(fn, wait) {
     };
 }
 search.addEventListener('keyup', debounce(filter, 100));
+
+// copy pycode and bascode to clipboard on mouse click
+// Show border when copy is done
+divcopyable(document.getElementsByClassName("bascode"));
+divcopyable(document.getElementsByClassName("pycode"));
+
+function divcopyable(itemcopyable){
+for (var i = 0, len = itemcopyable.length; i < len; i++) {
+    (function() {
+        var item = itemcopyable[i];
+
+        function changeBorder(item, color, colorToChangeBackTo) {
+            var saveBorder  = item.style.border;
+            item.style.border = "solid 5px";
+            item.style.borderColor = color;
+
+            setTimeout(function() {
+                item.style.border = saveBorder;
+                item.style.borderColor = colorToChangeBackTo;
+            }, 150);
+        }
+        item.onclick = function() {
+            document.execCommand("copy");
+            changeBorder(item, "#18A303", "transparent");
+        };
+        item.addEventListener("copy", function(event) {
+            event.preventDefault();
+            if (event.clipboardData) {
+                event.clipboardData.setData("text/plain", item.textContent);
+            }
+        });
+    }());
+}
+}
+
 // copy useful content to clipboard on mouse click
 var copyable = document.getElementsByClassName("input");
 for (var i = 0, len = copyable.length; i < len; i++) {
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 630aa8a938..95d19bc56a 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -892,17 +892,29 @@
 </xsl:template>
 
 <xsl:template match="bascode">
-    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-visual-basic line-numbers"><xsl:apply-templates /></code></pre></div>
+    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet">
+        <xsl:attribute name="data-tooltip"><xsl:value-of select="$ui_copyclip"/></xsl:attribute>
+        <pre><code class="language-visual-basic line-numbers"><xsl:apply-templates /></code></pre>
+    </div>
 </xsl:template>
 <xsl:template match="bascode" mode="embedded">
-    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-visual-basic line-numbers"><xsl:apply-templates mode="embedded" /></code></pre></div>
+    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet">
+        <xsl:attribute name="data-tooltip"><xsl:value-of select="$ui_copyclip"/></xsl:attribute>
+        <pre><code class="language-visual-basic line-numbers"><xsl:apply-templates mode="embedded" /></code></pre>
+    </div>
 </xsl:template>
 
 <xsl:template match="pycode">
-    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-python line-numbers"><xsl:apply-templates /></code></pre></div>
+    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet">
+        <xsl:attribute name="data-tooltip"><xsl:value-of select="$ui_copyclip"/></xsl:attribute>
+        <pre><code class="language-python line-numbers"><xsl:apply-templates /></code></pre>
+    </div>
 </xsl:template>
 <xsl:template match="pycode" mode="embedded">
-    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-python line-numbers"><xsl:apply-templates mode="embedded" /></code></pre></div>
+    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet">
+        <xsl:attribute name="data-tooltip"><xsl:value-of select="$ui_copyclip"/></xsl:attribute>
+        <pre><code class="language-python line-numbers"><xsl:apply-templates mode="embedded" /></code></pre>
+    </div>
 </xsl:template>
 
 <!-- Insert Logo code snippet  -->