Merge pull request #10 from momotaro98/develop

develop to master

README.md

@@ -1 +1,20 @@
-# md-index-sideviewer
+# page-contents-sidebar
+
+Sidebar Extension for Markdown on Gist
+
+![page-contents-sidebar_demo](https://github.com/momotaro98/my-project-images/blob/master/page-contents-sidebar/demo.gif)
+
+
+
+## Features
+
+* Display header title of Markdown file
+* Jump to target area
+* Change the depth of the display header
+* Track and focus on current browsing points
+* Change the sidebar width
+* The sidebar can be hidden with a single button
+
+## Future
+
+Scheduled to support other sites such as GitHub and Confluence.

gulpfile.babel.js

@@ -2,7 +2,7 @@ import gulp from 'gulp'
 import {merge} from 'event-stream'
 import map from 'map-stream'
 const $ = require('gulp-load-plugins')();
-
+const version = require('./package.json').version;
 
 // Tasks
 gulp.task('clean', () => {
@@ -62,8 +62,9 @@ gulp.task('js', ['template'], () => {
 gulp.task('devdist', ['js'], () => {
   return merge(
     pipe('./icons/**/*', './tmp/app/icons'),
-    pipe(['./libs/**/*', './tmp/mdisviewer.*', './src/config/manifest.json'], './tmp/app/'),
-    pipe('./src/config/background.js', $.babel(), './tmp/app/')
+    pipe(['./libs/**/*', './tmp/mdisviewer.*'], './tmp/app/'),
+    pipe('./src/config/background.js', $.babel(), './tmp/app/'),
+    pipe('./src/config/manifest.json', $.replace('$VERSION', version), './tmp/app/')
   );
 });
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "md-index-sideviewer",
-  "version": "1.0.0",
+  "name": "page-contents-sidebar",
+  "version": "0.1.1",
   "description": "Web Side Viewer for Markdown",
   "scripts": {
     "build": "gulp",
@@ -10,13 +10,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/momotaro98/md-index-sideviewer"
+    "url": "https://github.com/momotaro98/page-contents-sidebar"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/momotaro98/md-index-sideviewer/issues"
+    "url": "https://github.com/momotaro98/page-contents-sidebar/issues"
   },
-  "homepage": "https://github.com/momotaro98/md-index-sideviewer",
+  "homepage": "https://github.com/momotaro98/page-contents-sidebar",
   "devDependencies": {
     "async": "~0.9.0",
     "babel-core": "^6.1.2",

src/adapters/adapter.js

@@ -49,6 +49,25 @@ class TagHeaderComparator {
   }
 }
 
+class Page {
+  constructor(url, title, fileName) {
+    this._url = url;
+    this._title = title;
+    this._fileName = fileName;
+  }
+
+  getURL() {
+    return this._url;
+  }
+
+  getTitle() {
+    return this._title;
+  }
+
+  getFileName() {
+    return this._fileName;
+  }
+}
 
 class IndexContent {
   constructor() {

src/adapters/gistmd.js

@@ -22,18 +22,50 @@ class GistMD extends Adapter {
     $containers.css('margin-left', shouldPushLeft ? SPACING : '');
   }
 
-  getPathWhosePageIsMarkdown(cb) {
-    // get path page
-    const path = 'https://gist.github.com/username/hashchars';  // dummy page
-    // if the page content is not markdown page
-    // or has anything wrong.
-    // cb();
-
-    // if ok
-    cb(path);
+  // getPageThatHasMarkdown returns Page object if the page is Markdown file page
+  getPageThatHasMarkdown(cb) {
+    let is_MarkDown_Page = this._isMarkDownPage();
+    if (!is_MarkDown_Page) {
+      cb();
+    }
+    else {
+      const page = this._getPage();
+       cb(page);
+    }
   }
 
-  loadMDArray(path, deep_level, cb) {
+  // _isMarkDownPage returns true(here's page has MarkDown file) or false(Not).
+  _isMarkDownPage() {
+    // find the file name for see the extension
+    let file_name = this._getFileName();
+    let extension = file_name.slice(-3); // Now, _isMarkDownPage judges whether the page is MarkDown by finding .gist-header-title class name.
+    if (extension === ".md") {
+      return true;
+    }
+
+    return false;
+  }
+
+  // _getPage gets the page Object of current page
+  _getPage() {
+    // get URL without hash part
+    const url = location.protocol + "//" + location.host + location.pathname;
+    // get title
+    const title = document.title;
+    // get fileName
+    const fileName = this._getFileName();
+
+    return new Page(url, title, fileName);
+  }
+
+
+  // loadMDArray loads array that contains the nested constructure of index
+  /*
+  * About MD Array
+  * Example:
+  * ["Chapter1", ["section 1-1", "section 2-2", ["sub-section 2-2-1", "sub-section 2-2-2"]], "Chapter2", "Chapter3"]
+  */
+  loadMDArray(page, deep_level, cb) {
     // Load the markdown's index array
     var md_array = this._getIndexContentArray();
 
@@ -47,6 +79,7 @@ class GistMD extends Adapter {
     cb(null, md_array);
   }
 
+  // _filterByDeepLevel filters the MD array's nested arrays according to deep level
   _filterByDeepLevel(md_array, deep_level) {
     /*
      * Input Example
@@ -81,14 +114,18 @@ class GistMD extends Adapter {
     }
   }
 
+  // _getIndexContentArray gets array that contains nested structure of index
+  // in use of recursive function, getArray($dom)
   _getIndexContentArray() {
-    return getArray($("article").find("a:first"));
+    return getArray($("article").find('h1, h2, h3, h4, h5, h6').find("a:first"));
 
     function getArray($spec) {
+      // getArray uses these 2 flags because the $DOM loop gets each $a DOM.
       var skip_to_currentTag_flag = false;
       var skip_to_NextUpperTag_flag = false;
+
       var ret_array = [];
-      $('article').find('a').each(function() {
+      $('article').find('h1, h2, h3, h4, h5, h6').find('a:first-child').each(function() {
         if (skip_to_currentTag_flag || $(this).is($spec)) {
           skip_to_currentTag_flag = true;
           const specTag = $spec.parent()[0].tagName;
@@ -126,4 +163,12 @@ class GistMD extends Adapter {
 
   }
 
+  // _getFileName gets a file name of the MardDown file's Page
+  _getFileName() {
+    return $("body")
+             .find(".gist-header-title")
+             .find("a")
+             .text();
+  }
+
 }

src/adapters/gistmd.less

@@ -1,8 +1,35 @@
+.mdisviewer-show {
+  .mdisviewer_gist_only {
+    display: none;
+  }
+
+  .mdisviewer_gist_sidebar {
+    a.mdisviewer_toggle {
+      right: 12px;
+      top: 12px;
+      &:not(.mdisviewer_loading) > span:after {
+        content: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/chevron-left.svg');
+      }
+      &:not(.mdisviewer_loading):hover > span:after {
+        content: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/chevron-left-hover.svg');
+      }
+    }
+  }
+
+  body.split-diff .container {
+    padding-left: 0;
+  }
+}
+
 .mdisviewer_gist_sidebar {
   padding-top: 54px;
   background-color: #f7f7f7;
   border-right: none;
 
+  .mdisviewer_gist_only {
+    display: block;
+  }
+
   .mdisviewer_views {
     border-right: 1px solid #ddd;
     background-color: #fff;
@@ -28,7 +55,7 @@
 
   }
 
-  a.octotree_toggle, a.mdisviewer_opts {
+  a.mdisviewer_toggle, a.mdisviewer_opts {
     color: black !important;
 
     &:hover, &.selected {
@@ -41,9 +68,21 @@
     right: 48px;
     width: 14px;
     height: 16px;
-    background: data-uri('image/svg+xml;charset=UTF-8', './icons/gear.svg');
+    background: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/gear.svg');
     &:hover {
-      background: data-uri('image/svg+xml;charset=UTF-8', './icons/gear-hover.svg');
+      background: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/gear-hover.svg');
+    }
+  }
+
+	a.mdisviewer_toggle {
+    top: 12px;
+    right: -35px;
+
+    &:not(.mdisviewer_loading) > span:after {
+      content: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/chevron-right.svg');
+    }
+    &:not(.octotree_loading):hover > span:after {
+      content: data-uri('image/svg+xml;charset=UTF-8', './mdisvicons/chevron-right-hover.svg');
     }
   }
 

src/config/manifest.json

@@ -1,11 +1,12 @@
 {
-  "name": "Markdown Index Side Viewer",
-  "version": "1.0.0",
+  "name": "Page Contents Sidebar",
+  "version": "$VERSION",
   "manifest_version": 2,
   "author": "Shintaro Ikeda",
-  "description": "Side viewer for markdown page",
-  "homepage_url": "https://github.com/momotaro98/md-index-sideviewer",
+  "description": "Sidebar for web page contents",
+  "homepage_url": "https://github.com/momotaro98/page-contents-sidebar",
   "icons": {
+    "128": "icons/icon128.png"
   },
   "permissions": [
     "https://gist.github.com/*"

src/constants.js

@@ -1,4 +1,4 @@
-const ADDON_CLASS = 'md-index-sideviewer';
+const ADDON_CLASS = 'page-contents-sidebar';
 const SHOW_CLASS = 'mdisviewer-show';
 
 const STORE = {
@@ -10,10 +10,11 @@ const STORE = {
 const DEFAULTS = {
   WIDTH : 232,
   DEEPLEVEL: 6,
-  SHOWN : false
+  SHOWN : true
 };
 
 const EVENT = {
+  TOGGLE        : 'octotree:toggle',
   VIEW_READY    : 'mdisviewer:ready',
   VIEW_CLOSE    : 'mdisviewer:close',
   OPTS_CHANGE   : 'mdisviewer:change',