Merge branch 'page_transclusion'

Closes #123

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

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

resources/assets/sass/_blocks.scss

@@ -136,9 +136,6 @@
   background-color: #EEE;
   padding: $-s;
   display: block;
-  > * {
-    display: inline-block;
-  }
   &:before {
     font-family: 'Material-Design-Iconic-Font';
     padding-right: $-s;

resources/assets/sass/_buttons.scss

@@ -108,5 +108,4 @@ $button-border-radius: 2px;
     cursor: default;
     box-shadow: none;
   }
-}
-
+}

resources/assets/sass/_components.scss

@@ -70,9 +70,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 #entity-selector-wrap .popup-body .form-group {
   margin: 0;
 }
-//body.ie #entity-selector-wrap .popup-body .form-group {
-//  min-height: 60vh;
-//}
 
 .image-manager-body {
   min-height: 70vh;

resources/assets/sass/_pages.scss

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

resources/assets/sass/export-styles.scss

@@ -1,4 +1,4 @@
-//@import "reset";
+@import "reset";
 @import "variables";
 @import "mixins";
 @import "html";

resources/views/pages/page-display.blade.php

@@ -7,6 +7,6 @@
     @if (isset($diff) && $diff)
         {!! $diff !!}
     @else
-        {!! $page->html !!}
+        {!! isset($pageContent) ? $pageContent : $page->html !!}
     @endif
 </div>

resources/views/pages/show.blade.php

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