Merge branch 'feature/copy-code' of https://github.com/andreihoncharuk/thingsboard.github.io into andreihoncharuk-feature/copy-code

Author: ikulikov

_includes/docwithnav.html

@@ -141,25 +141,56 @@ <h4>On this page</h4>
 </style>
 <script>
     jqueryDefer(function () {
-        $( document ).ready(function() {
-            var allCodeBlocksElements = $( ".copy-code" );
-            allCodeBlocksElements.each(function(i) {
+        $(document).on('selectionchange',function() {
+        // $(document).mouseup(function () {
+            $('.clipboard-btn').removeClass('noChars');
+            var selectedChars = getSelectedText();
+            // $('#numberChars').html(selectedChars.length);
+            if (selectedChars == 0) {
+                $('.clipboard-btn').addClass('noChars');
+            }
+        });
+    });
+    function getSelectedText() {
+        var text;
+        if (window.getSelection) {
+            text = window.getSelection().toString();
+        } else if (document.getSelection) {
+            text = document.getSelection();
+        } else if (document.selection) {
+            text = document.selection.createRange().text;
+        }
+        return text;
+    }
+</script>
+<script>
+    jqueryDefer(function () {
+        $(document).ready(function () {
+            var allCodeBlocksElements = $(".copy-code");
+            allCodeBlocksElements.each(function (i) {
                 var codeBlock = $(this);
                 if (!codeBlock.hasClass('highlighter-rouge')) {
                     codeBlock = codeBlock.find('.highlighter-rouge');
                 }
-                codeBlock.each(function() {
+                codeBlock.each(function () {
                     var block = codeBlock.find('pre.highlight > code .rouge-code');
                     var currentId = "codeblock" + (i + 1);
                     block.attr('id', currentId);
                     var clipButton = $('<button class="clipboard-btn" data-clipboard-target="#' + currentId + '"><p>Copy to clipboard</p><div><img src="/images/copy-code-icon.svg" alt="Copy to clipboard"></div></button>');
                     $(this).append(clipButton);
-                    clipButton.on('mouseleave', clearTooltip);
-                    clipButton.on('blur', clearTooltip);
+                    var troyan = codeBlock.find('pre.highlight');
+                    var Tooltip = $('<div class="customTooltip"><div class="tooltipText">Copied!</div></div>');
+                    troyan.append(Tooltip);
+                    troyan.addClass('clipboard-btn');
+                    troyan.attr('data-clipboard-target', "#" + currentId);
+                    troyan.on('mouseleave', clearTooltip);
+                    troyan.on('blur', clearTooltip);
                 });
             });
-            var clipboard = new Clipboard('.clipboard-btn');
-            clipboard.on('success', function(e) {
+
+            var clipboard = new Clipboard('.noChars');
+            clipboard.on('success', function (e) {
+                $('.clipboard-btn').removeClass('noChars');
                 e.clearSelection();
                 showTooltip(e.trigger, 'Copied!');
             });
@@ -192,13 +223,13 @@ <h4>On this page</h4>
 
         function clearTooltip(e) {
             var el = $(e.currentTarget);
-            el.removeClass('tooltipped tooltipped-s');
+            el.removeClass('showTool');
             el.attr('aria-label', null);
         }
 
         function showTooltip(elem, msg) {
             var el = $(elem);
-            el.addClass('tooltipped tooltipped-s');
+            el.addClass('showTool');
             el.attr('aria-label', msg);
         }
     });

_sass/_base.sass

@@ -1088,19 +1088,57 @@ section
           transition: 0ms
 
   .copy-code
+    .highlight
+      background: none!important
+      .customTooltip
+        display: none
+        position: absolute
+        width: calc(100% - 2px)
+        height: calc(100% - 2px)
+        top: 1px
+        left: 1px
+        border-radius: 4px
+        background: rgba(255, 255, 255, 0.55)
+        .tooltipText
+          bottom: calc(50% - 18px)
+          left: calc(50% - 54px)
+          position: absolute
+          text-align: center
+          margin-left: auto
+          margin-right: auto
+          border-radius: 4px
+          color: white
+          background: #212529
+          padding: 8px 22px
+      &.showTool .customTooltip
+        display: block
+      .rouge-code pre
+        padding-right: 32px
     position: relative
     button.clipboard-btn
-      width: 100%!important
-      height: 100%!important
-      top: 0!important
-      right: 0!important
-      background: none!important
+      pointer-events: none
+      outline: none
+      position: absolute
+      img
+        width: 18px
+        height: 18px
+        filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%)
+      width: 206px
+      height: 46px
+      top: 0
+      right: 0
+      background: none
+      -webkit-user-select: none
+      -moz-user-select: none
+      -ms-user-select: none
+      user-select: none
       p
         padding: 10px
         top: 1px
         transition: 0.2s
         color: #2a7dec
-        background: #fff
+        background: rgba(255,255,255,0.85)
+        backdrop-filter: blur(4px)
         opacity: 0
         font-weight: 500
         right: 32px
@@ -1125,26 +1163,12 @@ section
           opacity: 1
         img
           filter: invert(49%) sepia(97%) saturate(3730%) hue-rotate(200deg) brightness(95%) contrast(95%)
-
-    button.clipboard-btn
-      outline: none
-      position: absolute
-      top: 3px
-      right: 8px
-      width: 38px
-      height: 38px
-      background: #fff
-      padding: 10px
-      line-height: 18px
-
-      &:hover, &:active
+    &:active
+      button.clipboard-btn
+        p
+          opacity: 0
         img
-          filter: invert(49%) sepia(97%) saturate(3730%) hue-rotate(200deg) brightness(95%) contrast(95%)
-
-      img
-        width: 18px
-        height: 18px
-        filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%)
+          filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%)
 
   #searchBox
     display: block