From 56d58ad8e5fe3a7856046dd71154b2312ffcb2d5 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 21 Jan 2017 14:56:47 +0000 Subject: [PATCH] Updated pointer to be able to show includes Also fixed pointer copying on flash-blocked browsers --- package.json | 6 ++-- public/ZeroClipboard.swf | Bin 6580 -> 0 bytes resources/assets/js/pages/page-show.js | 44 +++++++++++++++++-------- resources/assets/sass/_buttons.scss | 3 +- resources/assets/sass/_pages.scss | 4 +++ resources/views/pages/show.blade.php | 6 ++-- 6 files changed, 43 insertions(+), 20 deletions(-) delete mode 100644 public/ZeroClipboard.swf diff --git a/package.json b/package.json index ec5911b93..b0805c918 100644 --- 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 index 8bad6a3e34f1b0b055da3ee8e506fe627cf75987..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6580 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 diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index 4f8f6e0f1..0f45e1987 100644 --- 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 ? '' : ''); + 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 5de889673..791a5bb72 100644 --- 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 0052a3319..e5334c69c 100755 --- 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 a734b1b95..fd6cebf41 100644 --- a/resources/views/pages/show.blade.php +++ b/resources/views/pages/show.blade.php @@ -53,9 +53,9 @@
- - - + + +