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

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 2cd45e5bcd4c747d02d033ffc8e56dd6d3acf75a..5b0b6f9f0600b0fc289998400c26c0336589b517 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -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);
-}
\ No newline at end of file
+}
+
+// Page specific items
+require('./pages/page-show');
\ No newline at end of file

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
new file mode 100644 (file)
index 0000000..c125289
--- /dev/null
+++ b/resources/assets/js/pages/page-show.js
@@ -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);
+    }
+
+};
\ No newline at end of file

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 9d3ab03c063334a80daf3c72777ff54e2d1a19bd..691b5ea7f0768ba9f8b4f81b1f4d5c9f8e33d848 100644 (file)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -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%;

diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 8a2e6bc98cedc42acd07ae0fd38f3821cddb341a..e8f9694a36fe3bfac652313bbad45949b33856e0 100644 (file)
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -80,5 +80,6 @@
 
 @yield('bottom')
 <script src="{{ versioned_asset('js/common.js') }}"></script>
+@yield('scripts')
 </body>
 </html>

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index d60ee003484a659831159455bd9bab0214891c37..cc01a139f72f47292b1ad11b83718e4b44243172 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -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>
 
+    @include('partials/highlight')
+@stop
 
-
-
-
+@section('scripts')
     <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);
-            }
-
-        });
+        setupPageShow({{$page->id}});
     </script>
-
-    @include('partials/highlight')
 @stop