Updated pointer to be able to show includes

Also fixed pointer copying on flash-blocked browsers
This commit is contained in:
Dan Brown 2017-01-21 14:56:47 +00:00
parent a4f6bc63f0
commit 56d58ad8e5
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 43 additions and 20 deletions

View File

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

Binary file not shown.

View File

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

View File

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

View File

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

View File

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