mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 04:05:57 +00:00
Updated page pointer to sit near mouse location and extracted page js into browserify bundle
This commit is contained in:
parent
cca3533d35
commit
a592eaeb91
@ -1,8 +1,4 @@
|
|||||||
// Configure ZeroClipboard
|
|
||||||
window.ZeroClipboard = require('zeroclipboard');
|
|
||||||
window.ZeroClipboard.config({
|
|
||||||
swfPath: '/ZeroClipboard.swf'
|
|
||||||
});
|
|
||||||
|
|
||||||
// AngularJS - Create application and load components
|
// AngularJS - Create application and load components
|
||||||
var angular = require('angular');
|
var angular = require('angular');
|
||||||
@ -60,3 +56,6 @@ if (elemExists('#html-editor')) {
|
|||||||
var tinyMceOptions = require('./pages/page-form');
|
var tinyMceOptions = require('./pages/page-form');
|
||||||
tinymce.init(tinyMceOptions);
|
tinymce.init(tinyMceOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Page specific items
|
||||||
|
require('./pages/page-show');
|
75
resources/assets/js/pages/page-show.js
Normal file
75
resources/assets/js/pages/page-show.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
"use strict";
|
||||||
|
// Configure ZeroClipboard
|
||||||
|
var zeroClipBoard = require('zeroclipboard');
|
||||||
|
zeroClipBoard.config({
|
||||||
|
swfPath: '/ZeroClipboard.swf'
|
||||||
|
});
|
||||||
|
|
||||||
|
window.setupPageShow = module.exports = function (pageId) {
|
||||||
|
|
||||||
|
// Set up pointer
|
||||||
|
var $pointer = $('#pointer').detach();
|
||||||
|
var $pointerInner = $pointer.children('div.pointer').first();
|
||||||
|
var isSelection = false;
|
||||||
|
|
||||||
|
// Select all contents on input click
|
||||||
|
$pointer.on('click', 'input', function(e) {
|
||||||
|
$(this).select();
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set up copy-to-clipboard
|
||||||
|
new zeroClipBoard($pointer.find('button').first()[0]);
|
||||||
|
|
||||||
|
// Hide pointer when clicking away
|
||||||
|
$(document.body).find('*').on('click focus', function (e) {
|
||||||
|
if (!isSelection) {
|
||||||
|
$pointer.detach();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show pointer when selecting a single block of tagged content
|
||||||
|
$('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
|
||||||
|
var selection = window.getSelection();
|
||||||
|
if (selection.toString().length === 0) return;
|
||||||
|
|
||||||
|
// Show pointer and set link
|
||||||
|
var $elem = $(this);
|
||||||
|
var link = window.location.protocol + "//" + window.location.host + '/link/' + pageId + '#' + $elem.attr('id');
|
||||||
|
$pointer.find('input').val(link);
|
||||||
|
$pointer.find('button').first().attr('data-clipboard-text', link);
|
||||||
|
$elem.before($pointer);
|
||||||
|
$pointer.show();
|
||||||
|
|
||||||
|
// Set pointer to sit near mouse-up position
|
||||||
|
var pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
|
||||||
|
if (pointerLeftOffset < 0) pointerLeftOffset = 0;
|
||||||
|
var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
|
||||||
|
$pointerInner.css('left', pointerLeftOffsetPercent + '%');
|
||||||
|
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
isSelection = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
isSelection = false;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Go to, and highlight if necessary, the specified text.
|
||||||
|
function goToText(text) {
|
||||||
|
var idElem = $('.page-content #' + text).first();
|
||||||
|
if (idElem.length !== 0) {
|
||||||
|
idElem.smoothScrollTo();
|
||||||
|
idElem.css('background-color', 'rgba(244, 249, 54, 0.25)');
|
||||||
|
} else {
|
||||||
|
$('.page-content').find(':contains("' + text + '")').smoothScrollTo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check the hash on load
|
||||||
|
if (window.location.hash) {
|
||||||
|
var text = window.location.hash.replace(/\%20/g, ' ').substr(1);
|
||||||
|
goToText(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
@ -57,7 +57,7 @@
|
|||||||
.pointer-container {
|
.pointer-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
left: 2%;
|
left: 0;
|
||||||
}
|
}
|
||||||
.pointer {
|
.pointer {
|
||||||
border: 1px solid #CCC;
|
border: 1px solid #CCC;
|
||||||
@ -68,6 +68,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: -60px;
|
top: -60px;
|
||||||
background-color:#FFF;
|
background-color:#FFF;
|
||||||
|
width: 272px;
|
||||||
&:before {
|
&:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -80,5 +80,6 @@
|
|||||||
|
|
||||||
@yield('bottom')
|
@yield('bottom')
|
||||||
<script src="{{ versioned_asset('js/common.js') }}"></script>
|
<script src="{{ versioned_asset('js/common.js') }}"></script>
|
||||||
|
@yield('scripts')
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container" id="page-show">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-9 print-full-width">
|
<div class="col-md-9 print-full-width">
|
||||||
<div class="page-content anim fadeIn">
|
<div class="page-content anim fadeIn">
|
||||||
@ -66,62 +66,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
|
|
||||||
// Set up pointer
|
|
||||||
var $pointer = $('#pointer').detach();
|
|
||||||
var pageId = {{$page->id}};
|
|
||||||
var isSelection = false;
|
|
||||||
|
|
||||||
$pointer.find('input').click(function(e){$(this).select();e.stopPropagation();});
|
|
||||||
new ZeroClipboard( $pointer.find('button').first()[0] );
|
|
||||||
|
|
||||||
$(document.body).find('*').on('click focus', function(e) {
|
|
||||||
if(!isSelection) {
|
|
||||||
$pointer.detach();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.page-content [id^="bkmrk"]').on('mouseup keyup', function(e) {
|
|
||||||
var selection = window.getSelection();
|
|
||||||
if(selection.toString().length === 0) return;
|
|
||||||
// Show pointer and set link
|
|
||||||
var $elem = $(this);
|
|
||||||
var link = window.location.protocol + "//" + window.location.host + '/link/' + pageId + '#' + $elem.attr('id');
|
|
||||||
$pointer.find('input').val(link);
|
|
||||||
$pointer.find('button').first().attr('data-clipboard-text', link);
|
|
||||||
$elem.before($pointer);
|
|
||||||
$pointer.show();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
isSelection = true;
|
|
||||||
setTimeout(function() {
|
|
||||||
isSelection = false;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
function goToText(text) {
|
|
||||||
var idElem = $('.page-content').find('#' + text).first();
|
|
||||||
if(idElem.length !== 0) {
|
|
||||||
idElem.smoothScrollTo();
|
|
||||||
} else {
|
|
||||||
$('.page-content').find(':contains("'+text+'")').smoothScrollTo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(window.location.hash) {
|
|
||||||
var text = window.location.hash.replace(/\%20/g, ' ').substr(1);
|
|
||||||
goToText(text);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@include('partials/highlight')
|
@include('partials/highlight')
|
||||||
@stop
|
@stop
|
||||||
|
|
||||||
|
@section('scripts')
|
||||||
|
<script>
|
||||||
|
setupPageShow({{$page->id}});
|
||||||
|
</script>
|
||||||
|
@stop
|
||||||
|
Loading…
Reference in New Issue
Block a user