Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-07 20:02:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated page pointer to sit near mouse location and extracted page js into browserify bundle

Browse Source
This commit is contained in:
Dan Brown 2015-12-30 20:48:57 +00:00
parent cca3533d35
commit a592eaeb91
5 changed files with 90 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/assets/js/global.js
View File

@ -1,8 +1,4 @@
// Configure ZeroClipboard
window.ZeroClipboard = require('zeroclipboard');
window.ZeroClipboard.config({
swfPath: '/ZeroClipboard.swf'
});
// AngularJS - Create application and load components
var angular = require('angular');
@ -59,4 +55,7 @@ function elemExists(selector) {
if (elemExists('#html-editor')) {
var tinyMceOptions = require('./pages/page-form');
tinymce.init(tinyMceOptions);
}
}
// Page specific items
require('./pages/page-show');

75
resources/assets/js/pages/page-show.js Normal file
View 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);
}
};

3
resources/assets/sass/_pages.scss
View File

@ -57,7 +57,7 @@
.pointer-container {
position: relative;
display: none;
left: 2%;
left: 0;
}
.pointer {
border: 1px solid #CCC;
@ -68,6 +68,7 @@
position: absolute;
top: -60px;
background-color:#FFF;
width: 272px;
&:before {
position: absolute;
left: 50%;

1
resources/views/base.blade.php
View File

@ -80,5 +80,6 @@
@yield('bottom')
<script src="{{ versioned_asset('js/common.js') }}"></script>
@yield('scripts')
</body>
</html>

65
resources/views/pages/show.blade.php
View File

@ -33,7 +33,7 @@
</div>
<div class="container">
<div class="container" id="page-show">
<div class="row">
<div class="col-md-9 print-full-width">
<div class="page-content anim fadeIn">
@ -66,62 +66,11 @@
</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')
@stop
@section('scripts')
<script>
setupPageShow({{$page->id}});
</script>
@stop