Added link functionality

app/Http/Controllers/PageController.php

@@ -126,6 +126,12 @@ class PageController extends Controller
         return redirect($page->getUrl());
     }
 
+    public function redirectFromLink($pageId)
+    {
+        $page = $this->pageRepo->getById($pageId);
+        return redirect($page->getUrl());
+    }
+
     /**
      * Remove the specified resource from storage.
      *

app/Http/routes.php

@@ -35,6 +35,8 @@ Route::get('/images/all', 'ImageController@getAll');
 Route::get('/images/all/{page}', 'ImageController@getAll');
 Route::get('/images/{any}', 'ImageController@getImage')->where('any', '.*');
 
+Route::get('/link/{id}', 'PageController@redirectFromLink');
+
 Route::get('/', function () {
     return view('base');
 });

resources/assets/sass/_text.scss

@@ -29,6 +29,8 @@ h4 {
 
 h1, h2, h3, h4 {
   font-weight: 500;
+  position: relative;
+  display: block;
   .subheader {
     display: block;
     font-size: 0.5em;

resources/assets/sass/styles.scss

@@ -116,6 +116,8 @@ header .menu {
   }
 }
 
+
+
 .overlay {
   background-color: rgba(0, 0, 0, 0.2);
   position: fixed;
@@ -180,4 +182,21 @@ header .menu {
   padding-top: $-xl*1.2;
   color: #666;
   border-top: 2px solid $primary;
+}
+
+// Link hooks & popovers
+a.link-hook {
+  position: absolute;
+  display: inline-block;
+  top: $-xs;
+  left: -$-xl+2px;
+  font-size: 20px;
+  line-height: 20px;
+  color: #BBB;
+  opacity: 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  &:hover a.link-hook {
+    opacity: 1;
+  }
 }

resources/views/base.blade.php

@@ -10,6 +10,7 @@
     <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
     <script>
         $.fn.smoothScrollTo = function() {
+            if(this.length === 0) return;
             $('body').animate({
                 scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
             }, 800); // Adjust to change animations speed (ms)
@@ -35,5 +36,6 @@
         @yield('content')
     </section>
 
+@yield('bottom')
 </body>
 </html>

resources/views/pages/create.blade.php

@@ -16,4 +16,8 @@
             $('#html').editable({inlineMode: false});
         });
     </script>
+@stop
+
+@section('bottom')
+    @include('pages/image-manager')
 @stop

resources/views/pages/edit.blade.php

@@ -15,4 +15,8 @@
         </form>
     </div>
 
+@stop
+
+@section('bottom')
+    @include('pages/image-manager')
 @stop

resources/views/pages/form.blade.php

@@ -18,25 +18,7 @@
 
 
 
-<section class="overlay" style="display:none;">
-    <div id="image-manager">
-        <div class="image-manager-left">
-            <div class="image-manager-header">
-                <button type="button" class="button neg float right" data-action="close">Close</button>
-                <div class="image-manager-title">Image Library</div>
-            </div>
-            <div class="image-manager-display">
-            </div>
-            <form action="/upload/image" class="image-manager-dropzone">
-                {{ csrf_field() }}
-                Drag images or click here to upload
-            </form>
-        </div>
-        {{--<div class="sidebar">--}}
 
-        {{--</div>--}}
-    </div>
-</section>
 
 <script>
     $(function() {
@@ -49,7 +31,7 @@
             relative_urls: false,
             height: 600,
             plugins: "image table textcolor paste link imagetools",
-            toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | fontsizeselect full",
+            toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full",
             content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important}",
             file_browser_callback: function(field_name, url, type, win) {
                 ImageManager.show('#image-manager', function(image) {

resources/views/pages/image-manager.blade.php

@@ -0,0 +1,19 @@
+<section class="overlay" style="display:none;">
+    <div id="image-manager">
+        <div class="image-manager-left">
+            <div class="image-manager-header">
+                <button type="button" class="button neg float right" data-action="close">Close</button>
+                <div class="image-manager-title">Image Library</div>
+            </div>
+            <div class="image-manager-display">
+            </div>
+            <form action="/upload/image" class="image-manager-dropzone">
+                {{ csrf_field() }}
+                Drag images or click here to upload
+            </form>
+        </div>
+        {{--<div class="sidebar">--}}
+
+        {{--</div>--}}
+    </div>
+</section>

resources/views/pages/show.blade.php

@@ -50,6 +50,31 @@
                     header.smoothScrollTo();
                 })
             });
+
+            // Set up link hooks
+            var pageId = {{$page->id}};
+            headers.each(function() {
+                var text = $(this).text().trim();
+                var link = '/link/' + pageId + '#' + encodeURIComponent(text);
+                var linkHook = $('<a class="link-hook"><i class="fa fa-link"></i></a>')
+                        .attr({"data-content": link, href: link, target: '_blank'});
+                linkHook.click(function(e) {
+                    e.preventDefault();
+                    goToText(text);
+                });
+                $(this).append(linkHook);
+            });
+
+            function goToText(text) {
+                $('.page-content').find(':contains("'+text+'")').smoothScrollTo();
+            }
+
+            if(window.location.hash) {
+                var text = window.location.hash.replace(/\%20/g, ' ').substr(1);
+                goToText(text);
+            }
+
+            //$('[data-toggle="popover"]').popover()
         });
     </script>
 @stop