Adds edit icon to each header in the page.

Towards #618

Signed-off-by: Abijeet <redacted>

diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js
index f51cb7f34e43ffc594e846381fc6989d3fe1356a..82676b61b88a583149ada57a42f99c4bc5a23f03 100644 (file)
--- a/resources/assets/js/components/page-display.js
+++ b/resources/assets/js/components/page-display.js
@@ -11,6 +11,7 @@ class PageDisplay {
         this.setupPointer();
         this.setupStickySidebar();
         this.setupNavHighlighting();
+        this.setupEditOnHeader();
 
         // Check the hash on load
         if (window.location.hash) {
@@ -219,7 +220,31 @@ class PageDisplay {
             }
         }
     }
+    setupEditOnHeader() {
+        const headingEditIcon = document.querySelector('.heading-edit-icon');
+        if (headingEditIcon.length === 0) {
+            // user does not have permission to edit.
+            return;
+        }
+
+        // Create a clone of the edit icon without the hidden class
+        const visibleHeadingEditIcon = headingEditIcon.cloneNode(true);
+        visibleHeadingEditIcon.style.display = '';
+
+        const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+        // add an edit icon to each header.
+        for (let i = 0; i !== headings.length; ++i) {
+            const currHeading = headings[i];
+            const headingId = currHeading.id;
+
+            let editIcon = visibleHeadingEditIcon.cloneNode(true);
+            editIcon.href += `#${headingId}`;
+
+            currHeading.appendChild(editIcon);
+        }
+    }
 
 }
 
-module.exports = PageDisplay;
\ No newline at end of file
+module.exports = PageDisplay;

diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index f7e9bfeedfe6e506662d851b156852f9a22d4554..69286abffff6227051ebcf722c20fa6d8a367082 100644 (file)
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -497,6 +497,19 @@ class WysiwygEditor {
                     editorChange(html);
                 });
 
+                window.$events.listen('editor-scroll-to-text', textId => {
+                    const element = editor.dom.get(textId)
+                    if (!element) {
+                        return;
+                    }
+
+                    // scroll the element into the view and put the cursor at the end.
+                    element.scrollIntoView();
+                    editor.selection.select(element, true);
+                    editor.selection.collapse(false);
+                    editor.focus();
+                });
+
                 registerEditorShortcuts(editor);
 
                 let wrap;

diff --git a/resources/assets/js/vues/page-editor.js b/resources/assets/js/vues/page-editor.js
index 020e371b03021b85f9fe41fb7966c405032c18cb..3796fbf655dc21548105ab1dd30424d66701519c 100644 (file)
--- a/resources/assets/js/vues/page-editor.js
+++ b/resources/assets/js/vues/page-editor.js
@@ -43,6 +43,13 @@ function mounted() {
     window.$events.listen('editor-markdown-change', markdown => {
         this.editorMarkdown = markdown;
     });
+
+    const scrollToText = window.location.hash ? window.location.hash.substr(1) : '';
+    if (scrollToText) {
+        setTimeout(() => {
+            window.$events.emit('editor-scroll-to-text', scrollToText);
+        }, 1000)
+    }
 }
 
 let data = {

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index ca146d890ec13614183ab6b7351194b62a569608..83421814573ab633b641318e7b977a03bfaa2f9b 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -66,6 +66,17 @@
   }
   h1, h2, h3, h4, h5, h6, pre {
     clear: left;
+
+    .heading-edit-icon {
+      margin-left: 10px;
+      font-size: 0.7em;
+      display: none;
+      line-height: 1em;
+
+      .svg-icon {
+          bottom: 0px;
+      }
+    }
   }
   hr {
     clear: both;
@@ -89,6 +100,16 @@
   del {
     background: #FFECEC;
   }
+  h1:hover,
+  h2:hover,
+  h3:hover,
+  h4:hover,
+  h5:hover,
+  h6:hover {
+    .heading-edit-icon {
+      display: inline;
+    }
+  }
 }
 
 // Page content pointers

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 3b8b7abff79e71fba9b21406682a6d06140acadc..8ccd2425ba0d001e10804be3d5dbb47f5f18d121 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -132,6 +132,10 @@
         </div>
 
         @include('pages/page-display')
+
+        @if(userCan('page-update', $page))
+            <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button heading-edit-icon" style="display: none">@icon('edit')</a>
+        @endif
     </div>
 
     @if ($commentsEnabled)