3 files changed, 122 insertions, 36 deletions

diff --git a/packages/gitbook-plugin-headings/_assets/website/headings.css b/packages/gitbook-plugin-headings/_assets/website/headings.css
new file mode 100644
index 0000000..2d98332
--- /dev/null
+++ b/packages/gitbook-plugin-headings/_assets/website/headings.css
@@ -0,0 +1,43 @@
+.Page {
+    overflow: visible;
+}
+
+.Headings-Container {
+    position: relative;
+    margin-left: -30px;
+    padding-left: 30px;
+}
+
+/* Left anchors rules */
+.Headings-Container > .Headings-Anchor-Left {
+    position: absolute;
+    left: 5px;
+    bottom: 15px;
+    opacity: 0;
+    color: inherit;
+}
+
+/* Right anchors rules */
+.Headings-Container > .Headings-Anchor-Right {
+    padding-left: 5px;
+    opacity: 0;
+    color: inherit;
+}
+
+.Headings-Container.Headings-Right > h1,
+.Headings-Container.Headings-Right > h2,
+.Headings-Container.Headings-Right > h3,
+.Headings-Container.Headings-Right > h4,
+.Headings-Container.Headings-Right > h5,
+.Headings-Container.Headings-Right > h6 {
+    display: inline-block;
+    margin-right: 5px;
+}
+
+/* Display on hover */
+.Headings-Container:hover > .Headings-Anchor-Left,
+.Headings-Container > .Headings-Anchor-Left:focus,
+.Headings-Container:hover > .Headings-Anchor-Right,
+.Headings-Container > .Headings-Anchor-Right:focus {
+    opacity: 1;
+}
diff --git a/packages/gitbook-plugin-headings/package.json b/packages/gitbook-plugin-headings/package.json
index 5c88602..3eb8b76 100644
--- a/packages/gitbook-plugin-headings/package.json
+++ b/packages/gitbook-plugin-headings/package.json
@@ -1,28 +1,38 @@
 {
-   "name": "gitbook-plugin-headings",
-   "description": "Automatically add anchors to headings",
-   "main": "index.js",
-   "browser": "./_assets/plugin.js",
-   "version": "4.0.0",
-   "dependencies": {
-      "gitbook-core": "4.0.0"
-   },
-   "devDependencies": {
-      "gitbook-plugin": "4.0.0"
-   },
-   "engines": {
-      "gitbook": ">=3.0.0"
-   },
-   "scripts": {
-      "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
-      "prepublish": "npm run build-js"
-   },
-   "homepage": "https://github.com/GitbookIO/gitbook",
-   "repository": {
-      "type": "git",
-      "url": "https://github.com/GitbookIO/gitbook.git"
-   },
-   "bugs": {
-      "url": "https://github.com/GitbookIO/gitbook/issues"
-   }
-}
\ No newline at end of file
+  "name": "gitbook-plugin-headings",
+  "description": "Automatically add anchors to headings",
+  "main": "index.js",
+  "browser": "./_assets/plugin.js",
+  "version": "4.0.0",
+  "dependencies": {
+      "classnames": "^2.2.5",
+    "gitbook-core": "^4.0.0"
+  },
+  "devDependencies": {
+    "gitbook-plugin": "4.0.0"
+  },
+  "engines": {
+    "gitbook": ">=3.0.0"
+  },
+  "scripts": {
+    "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
+    "prepublish": "npm run build-js"
+  },
+  "homepage": "https://github.com/GitbookIO/gitbook",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GitbookIO/gitbook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GitbookIO/gitbook/issues"
+  },
+  "gitbook": {
+    "properties": {
+      "position": {
+        "type": "string",
+        "title": "Position of anchors",
+        "default": "left"
+      }
+    }
+  }
+}
diff --git a/packages/gitbook-plugin-headings/src/index.js b/packages/gitbook-plugin-headings/src/index.js
index 00bc790..01d2ed1 100644
--- a/packages/gitbook-plugin-headings/src/index.js
+++ b/packages/gitbook-plugin-headings/src/index.js
@@ -1,27 +1,60 @@
-const GitBook = require('gitbook-core');
-const { React } = GitBook;
+const GitBook    = require('gitbook-core');
+const { React }  = GitBook;
+const classNames = require('classnames');
 
-const Heading = React.createClass({
+function mapStateToProps({ config }) {
+    return {
+        position: config.get('pluginsConfig').get('headings').get('position') || 'left'
+    };
+}
+
+let Heading = React.createClass({
     propTypes: {
-        children: React.PropTypes.node
+        id:       React.PropTypes.string.isRequired,
+        children: React.PropTypes.node.isRequired,
+        position: React.PropTypes.string.isRequired
     },
 
     render() {
+        const { position, id } = this.props;
+        const className = classNames('Headings-Container', {
+            'Headings-Right': (position !== 'left')
+        });
+
         return (
-            <div className="Headings-Container">
+            <div className={className}>
+                <GitBook.ImportCSS href="gitbook/headings/headings.css" />
+
+                {position == 'left' ?
+                <GitBook.Link className="Headings-Anchor-Left" href={`#${id}`}>
+                    <i className="fa fa-link" />
+                </GitBook.Link>
+                : null}
+
                 {this.props.children}
+
+                {position != 'left' ?
+                <GitBook.Link className="Headings-Anchor-Right" href={`#${id}`}>
+                    <i className="fa fa-link" />
+                </GitBook.Link>
+                : null}
             </div>
         );
     }
 });
 
+Heading = GitBook.connect(Heading, mapStateToProps);
+
 module.exports = GitBook.createPlugin({
     activate: (dispatch, getState, { Components }) => {
-        // Dispatch initialization actions
+        // Attach component to titles
         dispatch(Components.registerComponent(Heading, { role: 'html:h1' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h2' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h3' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h4' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h5' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h6' }));
     },
-    deactivate: (dispatch, getState) => {
-        // Dispatch cleanup actions
-    },
+    deactivate: (dispatch, getState) => {},
     reduce: (state, action) => state
 });