Updated pointer to be able to show includes

Also fixed pointer copying on flash-blocked browsers

diff --git a/package.json b/package.json
index ec5911b939c0e564f7565d05360d78467973cf47..b0805c91836ff5ac9e12a1e9d1f6790fbc5c707b 100644 (file)
--- a/package.json
+++ b/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"
   }
 }

diff --git a/public/ZeroClipboard.swf b/public/ZeroClipboard.swf
deleted file mode 100644 (file)
index 8bad6a3..0000000
Binary files a/public/ZeroClipboard.swf and /dev/null differ

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index 4f8f6e0f1df8e0bd2b1eede82d32ae8895654ce9..0f45e1987cf434959169128a0632692cc1937aa9 100644 (file)
--- a/resources/assets/js/pages/page-show.js
+++ b/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));

diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 5de8896735aa9799ef5a4b12cf04b098c0366b42..791a5bb72a62b4eaabcd1762004559b5c1d39db5 100644 (file)
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -108,5 +108,4 @@ $button-border-radius: 2px;
     cursor: default;
     box-shadow: none;
   }
-}
-
+}
\ No newline at end of file

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 0052a3319fd4f47cace364dc638e5fd1651b0366..e5334c69c7d15d68fb2c43d5abf165460210143d 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/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;

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index a734b1b9526bb75525fbc0d71e5c148c71637824..fd6cebf4130bcaea45fdddfb898f21c38acbb03f 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/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>