Refactored out page-display system

resources/assets/js/components/index.js

@@ -17,6 +17,7 @@ let componentMapping = {
     'image-picker': require('./image-picker'),
     'collapsible': require('./collapsible'),
     'toggle-switch': require('./toggle-switch'),
+    'page-display': require('./page-display'),
 };
 
 window.components = {};

resources/assets/js/components/page-display.js

@@ -0,0 +1,224 @@
+import Clipboard from "clipboard";
+import Code from "../libs/code";
+
+class PageDisplay {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.pageId = elem.getAttribute('page-display');
+
+        Code.highlight();
+        this.setupPointer();
+        this.setupStickySidebar();
+        this.setupNavHighlighting();
+
+        // Check the hash on load
+        if (window.location.hash) {
+            let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
+            this.goToText(text);
+        }
+
+        // Sidebar page nav click event
+        $('.sidebar-page-nav').on('click', 'a', event => {
+            goToText(event.target.getAttribute('href').substr(1));
+        });
+    }
+
+    goToText(text) {
+        let idElem = document.getElementById(text);
+        $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
+        if (idElem !== null) {
+            window.scrollAndHighlight(idElem);
+        } else {
+            $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
+        }
+    }
+
+    setupPointer() {
+        // 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', event => {
+            $(this).select();
+            event.stopPropagation();
+        });
+
+        $pointer.on('click focus', event => {
+            event.stopPropagation();
+        });
+
+        // Pointer mode toggle
+        $pointer.on('click', 'span.icon', event => {
+            event.stopPropagation();
+            let $icon = $(event.currentTarget);
+            pointerModeLink = !pointerModeLink;
+            $icon.find('[data-icon="include"]').toggle(!pointerModeLink);
+            $icon.find('[data-icon="link"]').toggle(pointerModeLink);
+            updatePointerContent();
+        });
+
+        // Set up clipboard
+        let clipboard = new Clipboard($pointer[0].querySelector('button'));
+
+        // Hide pointer when clicking away
+        $(document.body).find('*').on('click focus', event => {
+            if (!pointerShowing || isSelection) return;
+            $pointer.detach();
+            pointerShowing = false;
+        });
+
+        let updatePointerContent = () => {
+            let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.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();
+            let selection = window.getSelection();
+            if (selection.toString().length === 0) return;
+
+            // Show pointer and set link
+            let $elem = $(this);
+            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));
+            if (pointerLeftOffset < 0) pointerLeftOffset = 0;
+            let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
+            $pointerInner.css('left', pointerLeftOffsetPercent + '%');
+
+            isSelection = true;
+            setTimeout(() => {
+                isSelection = false;
+            }, 100);
+        });
+    }
+
+    setupStickySidebar() {
+        // Make the sidebar stick in view on scroll
+        let $window = $(window);
+        let $sidebar = $("#sidebar .scroll-body");
+        let $bookTreeParent = $sidebar.parent();
+
+        // Check the page is scrollable and the content is taller than the tree
+        let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height());
+
+        // Get current tree's width and header height
+        let headerHeight = $("#header").height() + $(".toolbar").height();
+        let isFixed = $window.scrollTop() > headerHeight;
+
+        // Fix the tree as a sidebar
+        function stickTree() {
+            $sidebar.width($bookTreeParent.width() + 15);
+            $sidebar.addClass("fixed");
+            isFixed = true;
+        }
+
+        // Un-fix the tree back into position
+        function unstickTree() {
+            $sidebar.css('width', 'auto');
+            $sidebar.removeClass("fixed");
+            isFixed = false;
+        }
+
+        // Checks if the tree stickiness state should change
+        function checkTreeStickiness(skipCheck) {
+            let shouldBeFixed = $window.scrollTop() > headerHeight;
+            if (shouldBeFixed && (!isFixed || skipCheck)) {
+                stickTree();
+            } else if (!shouldBeFixed && (isFixed || skipCheck)) {
+                unstickTree();
+            }
+        }
+        // The event ran when the window scrolls
+        function windowScrollEvent() {
+            checkTreeStickiness(false);
+        }
+
+        // If the page is scrollable and the window is wide enough listen to scroll events
+        // and evaluate tree stickiness.
+        if (pageScrollable && $window.width() > 1000) {
+            $window.on('scroll', windowScrollEvent);
+            checkTreeStickiness(true);
+        }
+
+        // Handle window resizing and switch between desktop/mobile views
+        $window.on('resize', event => {
+            if (pageScrollable && $window.width() > 1000) {
+                $window.on('scroll', windowScrollEvent);
+                checkTreeStickiness(true);
+            } else {
+                $window.off('scroll', windowScrollEvent);
+                unstickTree();
+            }
+        });
+    }
+
+    setupNavHighlighting() {
+        // Check if support is present for IntersectionObserver
+        if (!'IntersectionObserver' in window ||
+            !'IntersectionObserverEntry' in window ||
+            !'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
+            return;
+        }
+
+        let pageNav = document.querySelector('.sidebar-page-nav');
+
+        // fetch all the headings.
+        let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
+        // if headings are present, add observers.
+        if (headings.length > 0 && pageNav !== null) {
+            addNavObserver(headings);
+        }
+
+        function addNavObserver(headings) {
+            // Setup the intersection observer.
+            let intersectOpts = {
+                rootMargin: '0px 0px 0px 0px',
+                threshold: 1.0
+            };
+            let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
+
+            // observe each heading
+            for (let i = 0; i !== headings.length; ++i) {
+                pageNavObserver.observe(headings[i]);
+            }
+        }
+
+        function headingVisibilityChange(entries, observer) {
+            for (let entry of entries) {
+                let isVisible = (entry.intersectionRatio === 1);
+                toggleAnchorHighlighting(entry.target.id, isVisible);
+            }
+        }
+
+        function toggleAnchorHighlighting(elementId, shouldHighlight) {
+            let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
+            for (let i = 0; i < anchorsToHighlight.length; i++) {
+                // Change below to use classList.toggle when IE support is dropped.
+                if (shouldHighlight) {
+                    anchorsToHighlight[i].classList.add('current-heading');
+                } else {
+                    anchorsToHighlight[i].classList.remove('current-heading');
+                }
+            }
+        }
+    }
+
+}
+
+module.exports = PageDisplay;

resources/assets/js/index.js

@@ -4,7 +4,6 @@ import "./dom-polyfills"
 import jQuery from "jquery"
 window.jQuery = window.$ = jQuery;
 
-import "./pages/page-show"
 import Translations from "./translations"
 import vues from "./vues/vues"
 import components from "./components"
@@ -71,10 +70,6 @@ let translator = new Translations(window.translations);
 window.trans = translator.get.bind(translator);
 window.trans_choice = translator.getPlural.bind(translator);
 
-// Load vues and components
-vues();
-components();
-
 
 //Global jQuery Config & Extensions
 
@@ -131,3 +126,7 @@ if(navigator.userAgent.indexOf('MSIE')!==-1
     || navigator.userAgent.indexOf('Safari') !== -1){
     document.body.classList.add('flexbox-support');
 }
+
+// Load vues and components
+vues();
+components();

resources/assets/js/pages/page-show.js

@@ -1,216 +0,0 @@
-const Clipboard = require("clipboard");
-const Code = require('../libs/code');
-
-let setupPageShow = window.setupPageShow = function (pageId) {
-
-    Code.highlight();
-
-    if (!pageId) return;
-
-    // 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', event => {
-        $(this).select();
-        event.stopPropagation();
-    });
-
-    $pointer.on('click focus', event => {
-        event.stopPropagation();
-    });
-
-    // Pointer mode toggle
-    $pointer.on('click', 'span.icon', event => {
-        event.stopPropagation();
-        let $icon = $(event.currentTarget);
-        pointerModeLink = !pointerModeLink;
-        $icon.find('[data-icon="include"]').toggle(!pointerModeLink);
-        $icon.find('[data-icon="link"]').toggle(pointerModeLink);
-        updatePointerContent();
-    });
-
-    // Set up clipboard
-    let clipboard = new Clipboard($pointer[0].querySelector('button'));
-
-    // Hide pointer when clicking away
-    $(document.body).find('*').on('click focus', event => {
-        if (!pointerShowing || isSelection) 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();
-        let selection = window.getSelection();
-        if (selection.toString().length === 0) return;
-
-        // Show pointer and set link
-        let $elem = $(this);
-        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));
-        if (pointerLeftOffset < 0) pointerLeftOffset = 0;
-        let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
-        $pointerInner.css('left', pointerLeftOffsetPercent + '%');
-
-        isSelection = true;
-        setTimeout(() => {
-            isSelection = false;
-        }, 100);
-    });
-
-    // Go to, and highlight if necessary, the specified text.
-    function goToText(text) {
-        let idElem = document.getElementById(text);
-        $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
-        if (idElem !== null) {
-            window.scrollAndHighlight(idElem);
-        } else {
-            $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
-        }
-    }
-
-    // Check the hash on load
-    if (window.location.hash) {
-        let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
-        goToText(text);
-    }
-
-    // Sidebar page nav click event
-    $('.sidebar-page-nav').on('click', 'a', event => {
-        goToText(event.target.getAttribute('href').substr(1));
-    });
-
-    // Make the sidebar stick in view on scroll
-    let $window = $(window);
-    let $sidebar = $("#sidebar .scroll-body");
-    let $bookTreeParent = $sidebar.parent();
-
-    // Check the page is scrollable and the content is taller than the tree
-    let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height());
-
-    // Get current tree's width and header height
-    let headerHeight = $("#header").height() + $(".toolbar").height();
-    let isFixed = $window.scrollTop() > headerHeight;
-
-    // Fix the tree as a sidebar
-    function stickTree() {
-        $sidebar.width($bookTreeParent.width() + 15);
-        $sidebar.addClass("fixed");
-        isFixed = true;
-    }
-
-    // Un-fix the tree back into position
-    function unstickTree() {
-        $sidebar.css('width', 'auto');
-        $sidebar.removeClass("fixed");
-        isFixed = false;
-    }
-
-    // Checks if the tree stickiness state should change
-    function checkTreeStickiness(skipCheck) {
-        let shouldBeFixed = $window.scrollTop() > headerHeight;
-        if (shouldBeFixed && (!isFixed || skipCheck)) {
-            stickTree();
-        } else if (!shouldBeFixed && (isFixed || skipCheck)) {
-            unstickTree();
-        }
-    }
-    // The event ran when the window scrolls
-    function windowScrollEvent() {
-        checkTreeStickiness(false);
-    }
-
-    // If the page is scrollable and the window is wide enough listen to scroll events
-    // and evaluate tree stickiness.
-    if (pageScrollable && $window.width() > 1000) {
-        $window.on('scroll', windowScrollEvent);
-        checkTreeStickiness(true);
-    }
-
-    // Handle window resizing and switch between desktop/mobile views
-    $window.on('resize', event => {
-        if (pageScrollable && $window.width() > 1000) {
-            $window.on('scroll', windowScrollEvent);
-            checkTreeStickiness(true);
-        } else {
-            $window.off('scroll', windowScrollEvent);
-            unstickTree();
-        }
-    });
-
-
-    // Check if support is present for IntersectionObserver
-    if ('IntersectionObserver' in window &&
-        'IntersectionObserverEntry' in window &&
-        'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
-        addPageHighlighting();
-    }
-
-    function addPageHighlighting() {
-      let pageNav = document.querySelector('.sidebar-page-nav');
-
-      // fetch all the headings.
-      let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
-      // if headings are present, add observers.
-      if (headings.length > 0 && pageNav !== null) {
-          addNavObserver(headings);
-      }
-
-      function addNavObserver(headings) {
-          // Setup the intersection observer.
-          let intersectOpts = {
-              rootMargin: '0px 0px 0px 0px',
-              threshold: 1.0
-          };
-          let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
-
-          // observe each heading
-          for (let i = 0; i !== headings.length; ++i) {
-              pageNavObserver.observe(headings[i]);
-          }
-      }
-
-      function headingVisibilityChange(entries, observer) {
-          for (let i = 0; i < entries.length; i++) {
-              let currentEntry = entries[i];
-              let isVisible = (currentEntry.intersectionRatio === 1);
-              toggleAnchorHighlighting(currentEntry.target.id, isVisible);
-          }
-      }
-
-        function toggleAnchorHighlighting(elementId, shouldHighlight) {
-            let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
-            for (let i = 0; i < anchorsToHighlight.length; i++) {
-                // Change below to use classList.toggle when IE support is dropped.
-                if (shouldHighlight) {
-                    anchorsToHighlight[i].classList.add('current-heading');
-                } else {
-                    anchorsToHighlight[i].classList.remove('current-heading');
-                }
-            }
-        }
-    }
-};
-
-module.exports = setupPageShow;

resources/views/pages/show.blade.php

@@ -126,7 +126,7 @@
 @stop
 
 @section('body')
-    <div class="page-content" ng-non-bindable>
+    <div class="page-content" page-display="{{ $page->id }}" ng-non-bindable>
 
         <div class="pointer-container" id="pointer">
             <div class="pointer anim" >
@@ -145,9 +145,3 @@
       </div>
     @endif
 @stop
-
-@section('scripts')
-    <script>
-        setupPageShow({{$page->id}});
-    </script>
-@stop