Updated pointer to be able to show includes

Also fixed pointer copying on flash-blocked browsers

package.json

@@ -16,7 +16,9 @@
     "laravel-elixir": "^6.0.0-11",
     "laravel-elixir-browserify-official": "^0.1.3",
     "marked": "^0.3.5",
-    "moment": "^2.12.0",
-    "zeroclipboard": "^2.2.0"
+    "moment": "^2.12.0"
+  },
+  "dependencies": {
+    "clipboard": "^1.5.16"
   }
 }

resources/assets/js/pages/page-show.js

@@ -1,13 +1,16 @@
 "use strict";
 // Configure ZeroClipboard
-import ZeroClipBoard from "zeroclipboard";
+import Clipboard from "clipboard";
 
 export default window.setupPageShow = function (pageId) {
 
     // Set up pointer
     let $pointer = $('#pointer').detach();
+    let pointerShowing = false;
     let $pointerInner = $pointer.children('div.pointer').first();
     let isSelection = false;
+    let pointerModeLink = true;
+    let pointerSectionId = '';
 
     // Select all contents on input click
     $pointer.on('click', 'input', function (e) {
@@ -15,19 +18,34 @@ export default window.setupPageShow = function (pageId) {
         e.stopPropagation();
     });
 
-    // Set up copy-to-clipboard
-    ZeroClipBoard.config({
-        swfPath: window.baseUrl('/ZeroClipboard.swf')
+    // Pointer mode toggle
+    $pointer.on('click', 'span.icon', event => {
+        let $icon = $(event.currentTarget);
+        pointerModeLink = !pointerModeLink;
+        $icon.html(pointerModeLink ? '<i class="zmdi zmdi-link"></i>' : '<i class="zmdi zmdi-square-down"></i>');
+        updatePointerContent();
     });
-    new ZeroClipBoard($pointer.find('button').first()[0]);
+
+    // Set up clipboard
+    let clipboard = new Clipboard('#pointer button');
 
     // Hide pointer when clicking away
-    $(document.body).find('*').on('click focus', function (e) {
-        if (!isSelection) {
-            $pointer.detach();
-        }
+    $(document.body).find('*').on('click focus', event => {
+        if (!pointerShowing || isSelection) return;
+        let target = $(event.target);
+        if (target.is('.zmdi') || $(event.target).closest('#pointer').length === 1) return;
+
+        $pointer.detach();
+        pointerShowing = false;
     });
 
+    function updatePointerContent() {
+        let inputText = pointerModeLink ? window.baseUrl(`/link/${pageId}#${pointerSectionId}`) : `{{@${pageId}#${pointerSectionId}}}`;
+        if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText;
+
+        $pointer.find('input').val(inputText);
+    }
+
     // Show pointer when selecting a single block of tagged content
     $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
         e.stopPropagation();
@@ -36,12 +54,12 @@ export default window.setupPageShow = function (pageId) {
 
         // Show pointer and set link
         let $elem = $(this);
-        let link = window.baseUrl('/link/' + pageId + '#' + $elem.attr('id'));
-        if (link.indexOf('http') !== 0) link = window.location.protocol + "//" + window.location.host + link;
-        $pointer.find('input').val(link);
-        $pointer.find('button').first().attr('data-clipboard-text', link);
+        pointerSectionId = $elem.attr('id');
+        updatePointerContent();
+
         $elem.before($pointer);
         $pointer.show();
+        pointerShowing = true;
 
         // Set pointer to sit near mouse-up position
         let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));

resources/assets/sass/_buttons.scss

@@ -109,4 +109,3 @@ $button-border-radius: 2px;
     box-shadow: none;
   }
 }
-

resources/assets/sass/_pages.scss

@@ -138,6 +138,10 @@
     font-size: 18px;
     padding-top: 4px;
   }
+  span.icon {
+    cursor: pointer;
+    user-select: none;
+  }
   .button {
     line-height: 1;
     margin: 0 0 0 -4px;

resources/views/pages/show.blade.php

@@ -53,9 +53,9 @@
 
                     <div class="pointer-container" id="pointer">
                         <div class="pointer anim">
-                            <i class="zmdi zmdi-link"></i>
-                            <input readonly="readonly" type="text" placeholder="url">
-                            <button class="button icon" title="{{ trans('entities.pages_copy_link') }}" data-clipboard-text=""><i class="zmdi zmdi-copy"></i></button>
+                            <span class="icon text-primary"><i class="zmdi zmdi-link"></i></span>
+                            <input readonly="readonly" type="text" id="pointer-url" placeholder="url">
+                            <button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}"><i class="zmdi zmdi-copy"></i></button>
                         </div>
                     </div>