Anchors with AnchorJS

lib/gollum/assets.rb

@@ -18,6 +18,7 @@ module Precious
           self.class.class_variable_get(:@@base_url)
         end
         include ::Precious::Views::RouteHelpers
+        include ::Precious::Views::OcticonHelpers
       end
       env
     end

lib/gollum/public/gollum/javascript/app.js

@@ -1,4 +1,5 @@
 //= require jquery-1.7.2.min
+//= require anchor.min.js
 //= require mousetrap.min
 //= require gollum
 //= require gollum.dialog

lib/gollum/public/gollum/javascript/gollum.js.erb

@@ -482,7 +482,34 @@ $(document).ready(function() {
     $('span.critic.comment').filter(function() {return $(this).text()!="";}).before('‡');
   }
 
-  $('.markdown-body p, .markdown-body span, .markdown-body pre, .markdown-body table').attr('dir','auto');
+  if($('#wiki-content').length ){
+    // Set text direction auto
+    $('.markdown-body p, .markdown-body span, .markdown-body pre, .markdown-body table').attr('dir','auto');
+
+    // Setup anchors with AnchorJS
+
+    // Normal link anchors first
+    anchors.options = {
+      icon: '',
+      placement: 'left',
+      visible: 'hover'
+    };
+    var anchorSelectors = [];
+    //h1-h6
+    for (var i = 1; i < 7; i++){
+      anchorSelectors.push('.markdown-body h' + i.toString());
+    }
+    anchors.add(anchorSelectors.join(', '));
+
+    // Copy anchors for each editable header and give it the new anchor the 'edit' class, to display a link to edit the section
+    $('a.anchorjs-link').each(function (index, anchor) {
+      header = $(anchor).closest(':header');
+      if (header.hasClass('editable')){
+        var newUrl = routePath('edit') + '/' + pageName() + $(anchor).attr('href');
+        $(anchor).clone().addClass('edit').attr('href', newUrl).appendTo(header);
+      }
+    });
+  }
 
   if( $('#wiki-history').length ){
     var lookup = {};

lib/gollum/public/gollum/stylesheets/template.scss.erb

@@ -78,24 +78,32 @@ a {
   line-height: 1.7;
   overflow: hidden;
   word-wrap: break-word;
+
+  .anchorjs-link {
+    display: inline-block;
+    background: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>') no-repeat;
+    margin-left: -0.8em !important;
+    margin-top: 0.4em;
+    width: 1em;
+    height: 0.6em;
+    text-decoration: none;
+    transition-property: opacity;
+        transition: 0.1s;
+    transition-delay: 0.5s;
+  }
+
+  .anchorjs-link.edit {
+    margin-left: 2em !important;
+    margin-top: 0.5em;
+    height: 0.5em;
+    background: url('data:image/svg+xml;utf8,<%= rocticon_css(:pencil) %>') no-repeat;
+  }
   
   a {
     &.absent {
       color: $red;
     }
 
-    &.anchor {
-      display: block;
-      padding-right: 6px;
-      padding-left: 30px;
-      margin-left: -30px;
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-    }
-
     &[id].wiki-toc-anchor {
       color: inherit;
       text-decoration: none;
@@ -118,30 +126,6 @@ a {
   }
 
   h1, h2, h3, h4, h5, h6 {
-    margin: 1em 0 15px;
-    padding: 0;
-    font-weight: bold;
-    line-height: 1.7;
-    cursor: text;
-    position: relative;
-    text-rendering: optimizeLegibility;
-    @include font-smoothing(on);
-
-    a.anchor {
-    
-    }
-
-    &:hover {
-      a.anchor {
-        text-decoration: none;
-        line-height: 1;
-        padding-left: 8px;
-        margin-left: -30px;
-        top: 15%;
-        display: inline-block;
-      }
-    }
-
     tt, code {
       font-size: inherit;
     }
@@ -152,9 +136,7 @@ a {
   }
 
   h1 {
-    font-size: 2.5em;
     border-bottom: $border-standard;
-    color: #000;
     margin-top: 20px;
     margin-bottom: 10px;
 
@@ -164,9 +146,7 @@ a {
   }
 
   h2 {
-    font-size: 2em;
     border-bottom: 1px solid #eee;
-    color: #000;
   }
 
   h3 {

lib/gollum/views/helpers.rb

@@ -51,6 +51,13 @@ module Precious
         def rocticon(symbol, parameters = {})
           Octicons::Octicon.new(symbol, parameters).to_svg
         end
+
+        def rocticon_css(symbol, parameters = {})
+          html = rocticon(symbol, parameters.merge({xmlns: 'http://www.w3.org/2000/svg'}))
+          html.gsub!(/\s*(width|height)=["']\d+["']\s*/, ' ') # remove height and width attributes so it can be set via CSS
+          html.gsub!(/\s+/, ' ')
+          html.force_encoding('UTF-8')
+        end
         
         def octicon
           lambda do |args|