YSCT-1766: Javascript for copying permalinks to the clipboard added. (#1917)

* YSCT-1766: Javascript for copying permalinks to the clipboard added.

* YSCT-1766: Bug fixes

plugins/org.yakindu.sct.doc.user/build.xml

@@ -23,6 +23,9 @@
     <!-- Root CSS file to be referenced by the generated HTML files. -->
     <property name="css.root.file" value="style.css" />
 
+    <!-- Javascript files are located here. -->
+    <property name="js.dir" value="js" />
+
     <!-- Image files reside in subdirectories with the following name: -->
     <property name="img.dir" value="images" />
 
@@ -312,6 +315,13 @@
                 </fileset>
             </copy>
 
+            <!-- Copy the Javascript files to the destination directory: -->
+            <copy todir="${help.dir}/${js.dir}">
+                <fileset dir="${js.dir}">
+                    <include name="*" />
+                </fileset>
+            </copy>
+
             <!-- Copy the image files to the destination directory: -->
             <copy todir="${help.dir}">
                 <fileset dir="src">
@@ -326,11 +336,12 @@
          name and a title, and consists of a set of source files. The generated documentation structure looks like this:
 
          website
-             YCST-installation.html
-             YCST-user-guide.html
-             YCST-tutorials.html
+             YSCT-installation.html
+             YSCT-user-guide.html
+             YSCT-tutorials.html
              css/yakindu.css
              css/ysct.css
+             js/yakindu.js
                  …
              images/…
     -->
@@ -520,6 +531,13 @@
                 </fileset>
             </copy>
 
+            <!-- Copy the Javascript files to the destination directory: -->
+            <copy todir="${work.dir}/${js.dir}">
+                <fileset dir="${js.dir}">
+                    <include name="*" />
+                </fileset>
+            </copy>
+
             <!-- Copy the image files to the destination directory: -->
             <copy todir="${work.dir}/${img.dir}" flatten="yes">
                 <image-files />

plugins/org.yakindu.sct.doc.user/css/yakindu.css

@@ -304,18 +304,55 @@ body.eclipsehelp {
 }
 
 /* Add permalinks to headlines: */
+.permalink {
+    position: relative;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    -ms-transition: none;
+    transition: none;
+    opacity: 0;
+}
+
 .permalink:after {
     content: " 🔗 ";
     font-size-adjust: 0.3;
 }
 
-.permalink {
-    visibility: hidden;
-    text-decoration: none;
+.permalink .tooltip {
+    display: none;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    background: #ccc;
+    white-space: nowrap;
+    padding: 5px 10px;
+    font-size: 16px;
+    border-radius: 5px;
+    color: #000;
+}
+
+.permalink .tooltip:after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 10px;
+    display: block;
+    height: 0;
+    width: 0;
+    border: 7px solid;
+    border-color: #ccc transparent transparent;
+}
+
+.permalink:hover .tooltip, .permalink:focus .tooltip, .permalink:active .tooltip {
+    opacity: 1;
+    display: block;
 }
 
 h1:hover .permalink, h2:hover .permalink, h3:hover .permalink, h4:hover .permalink, h5:hover .permalink, h6:hover .permalink
     {
+    opacity: 1;
     visibility: visible;
     text-decoration: none;
 }

plugins/org.yakindu.sct.doc.user/js/yakindu.js

@@ -0,0 +1,39 @@
+function copyPermalinkToClipboard(event, element) {
+	event.preventDefault();
+    var origin = (window.location.origin != 'null') ? window.location.origin : window.location.href;
+    var permalink = origin + window.location.pathname + '#' + jQuery(element).parent().attr('id');
+
+	var textInput = document.createElement("input");
+	textInput.style.position = 'fixed';
+	textInput.style.top = '230px';
+	textInput.style.left = 0;
+	textInput.style.width = '2em';
+	textInput.style.height = '2em';
+	textInput.style.padding = 0;
+	textInput.style.border = 'none';
+	textInput.style.outline = 'none';
+	textInput.style.boxShadow = 'none';
+	textInput.style.background = 'transparent';
+	textInput.value = permalink;
+
+	document.body.appendChild(textInput);
+	textInput.select();
+
+	try {
+		if (document.execCommand('copy')) {
+			jQuery(element).find('.tooltip').html('Copied');
+		}
+	} catch (err) {
+		alert('Permalink: ' + permalink);
+		console.log('Oops, unable to copy', err);
+	}
+
+	document.body.removeChild(textInput);
+	return false;
+}
+
+jQuery(document).ready(function() {
+	jQuery('.permalink').on('focusout, mouseout', function() {
+		jQuery(this).find('.tooltip').html('Copy link to clipboard');
+	});
+});

plugins/org.yakindu.sct.doc.user/src/main/java/org/yakindu/sct/doc/user/wikitext/HubspotDocumentBuilder.java

@@ -418,7 +418,12 @@ public class HubspotDocumentBuilder extends HtmlDocumentBuilder {
 			w.writeAttribute("href", '#' + currentHeading.getId());
 			w.writeAttribute("class", "permalink");
 			w.writeAttribute("title", "Permalink to \"" + currentHeading.getTitle() + "\"");
-			w.writeEndElement();
+			w.writeAttribute("onclick", "copyPermalinkToClipboard(event, this);");
+			w.writeStartElement("span");
+			w.writeAttribute("class", "tooltip");
+			w.writeCharacters("Copy link to clipboard");
+			w.writeEndElement(); // span
+			w.writeEndElement(); // a
 
 			super.endHeading();
 		}

plugins/org.yakindu.sct.doc.user/src/website/p1.htmlf

@@ -55,6 +55,7 @@
 
 
     {{ user_head_overrides }}
+    <script type="text/javascript" src="{{ get_public_template_url('custom/page/YSCT_Templates/yakindu.js') }}"></script>
 </head>
 <body class="homepage-test sct-docs {{ builtin_body_classes }}" style="">