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-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"
}
}

Binary file not shown.

View File

@ -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));

View File

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

View File

@ -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;

View File

@ -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>