Release 0.3.0

README.md

@@ -1,4 +1,4 @@
-# react-d3-graph · [![Build Status](https://travis-ci.com/danielcaldas/react-d3-graph.svg?token=fb6uSENok5Y3gSSi5yjE&branch=master)](https://travis-ci.com/danielcaldas/react-d3-graph) [![npm version](https://img.shields.io/badge/npm-v0.2.1-blue.svg)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads->600-brightgreen.svg)](https://npm-stat.com/) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg)](https://probot.github.io/)
+# react-d3-graph · [![Build Status](https://travis-ci.org/danielcaldas/react-d3-graph.svg?branch=master)](https://travis-ci.org/danielcaldas/react-d3-graph) [![npm version](https://img.shields.io/badge/npm-v0.2.1-blue.svg)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads->600-brightgreen.svg)](https://npm-stat.com/) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg)](https://probot.github.io/)
 [:book:](https://danielcaldas.github.io/react-d3-graph/docs/index.html)
 
 ### *Interactive and configurable graphs with react and d3 effortlessly*

RELEASE_PROCESS.md

@@ -6,11 +6,12 @@ and publish under npm registry.
 1. npm run dist
 2. npm run docs:lint (fix if errors)
 3. npm run docs
-4. Small tweaks on documentation page (quicklinks, versioning)
-5. Update versioning in package.json
-6. git commit -m "Release x.x.x"
-7. Create release x.x.x in github
-8. git pull (origin master)
-9. Generate CHANGELOG.md (github_changelog_generator -u GITHUB_USERNAME)
-10. git commit -m "Update CHANGELOG"
-11. npm publish
+4. Small tweaks on documentation page (quicklinks)
+5. Replace current docs folder with gen-docs
+6. Update versioning in package.json
+7. git commit -m "Release x.x.x"
+8. Create release x.x.x in github
+9. git pull (origin master)
+10. Generate CHANGELOG.md (github_changelog_generator -u GITHUB_USERNAME)
+11. git commit -m "Update CHANGELOG"
+12. npm publish

docs/assets/bass.css

@@ -457,6 +457,7 @@
   min-height:0;
 }
 .flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none }
+.fs0{ flex-shrink: 0 }
 
 .order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 }
 .order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 }

docs/assets/site.js

@@ -5,65 +5,46 @@ anchors.options.placement = 'left';
 anchors.add('h3');
 
 // Filter UI
-var tocElements = document.getElementById('toc')
-  .getElementsByTagName('li');
-
-document.getElementById('filter-input')
-  .addEventListener('keyup', function (e) {
-
-    var i, element, children;
-
-    // enter key
-    if (e.keyCode === 13) {
-      // go to the first displayed item in the toc
-      for (i = 0; i < tocElements.length; i++) {
-        element = tocElements[i];
-        if (!element.classList.contains('display-none')) {
-          location.replace(element.firstChild.href);
-          return e.preventDefault();
-        }
-      }
-    }
-
-    var match = function () {
-      return true;
-    };
-
-    var value = this.value.toLowerCase();
+var tocElements = document.getElementById('toc').getElementsByTagName('li');
 
-    if (!value.match(/^\s*$/)) {
-      match = function (element) {
-        return element.firstChild.innerHTML.toLowerCase().indexOf(value) !== -1;
-      };
-    }
+document.getElementById('filter-input').addEventListener('keyup', function(e) {
+  var i, element, children;
 
+  // enter key
+  if (e.keyCode === 13) {
+    // go to the first displayed item in the toc
     for (i = 0; i < tocElements.length; i++) {
       element = tocElements[i];
-      children = Array.from(element.getElementsByTagName('li'));
-      if (match(element) || children.some(match)) {
-        element.classList.remove('display-none');
-      } else {
-        element.classList.add('display-none');
+      if (!element.classList.contains('display-none')) {
+        location.replace(element.firstChild.href);
+        return e.preventDefault();
       }
     }
-  });
+  }
 
-var toggles = document.getElementsByClassName('toggle-step-sibling');
-for (var i = 0; i < toggles.length; i++) {
-  toggles[i].addEventListener('click', toggleStepSibling);
-}
+  var match = function() {
+    return true;
+  };
 
-function toggleStepSibling() {
-  var stepSibling = this.parentNode.parentNode.parentNode.getElementsByClassName('toggle-target')[0];
-  var klass = 'display-none';
-  if (stepSibling.classList.contains(klass)) {
-    stepSibling.classList.remove(klass);
-    stepSibling.innerHTML = '▾';
-  } else {
-    stepSibling.classList.add(klass);
-    stepSibling.innerHTML = '▸';
+  var value = this.value.toLowerCase();
+
+  if (!value.match(/^\s*$/)) {
+    match = function(element) {
+      var html = element.firstChild.innerHTML;
+      return html && html.toLowerCase().indexOf(value) !== -1;
+    };
   }
-}
+
+  for (i = 0; i < tocElements.length; i++) {
+    element = tocElements[i];
+    children = Array.from(element.getElementsByTagName('li'));
+    if (match(element) || children.some(match)) {
+      element.classList.remove('display-none');
+    } else {
+      element.classList.add('display-none');
+    }
+  }
+});
 
 var items = document.getElementsByClassName('toggle-sibling');
 for (var j = 0; j < items.length; j++) {
@@ -84,19 +65,36 @@ function toggleSibling() {
 }
 
 function showHashTarget(targetId) {
-  var hashTarget = document.getElementById(targetId);
-  // new target is hidden
-  if (hashTarget && hashTarget.offsetHeight === 0 &&
-    hashTarget.parentNode.parentNode.classList.contains('display-none')) {
-    hashTarget.parentNode.parentNode.classList.remove('display-none');
+  if (targetId) {
+    var hashTarget = document.getElementById(targetId);
+    // new target is hidden
+    if (
+      hashTarget &&
+      hashTarget.offsetHeight === 0 &&
+      hashTarget.parentNode.parentNode.classList.contains('display-none')
+    ) {
+      hashTarget.parentNode.parentNode.classList.remove('display-none');
+    }
+  }
+}
+
+function scrollIntoView(targetId) {
+  // Only scroll to element if we don't have a stored scroll position.
+  if (targetId && !history.state) {
+    var hashTarget = document.getElementById(targetId);
+    if (hashTarget) {
+      hashTarget.scrollIntoView();
+    }
   }
 }
 
-window.addEventListener('hashchange', function() {
+function gotoCurrentTarget() {
   showHashTarget(location.hash.substring(1));
-});
+  scrollIntoView(location.hash.substring(1));
+}
 
-showHashTarget(location.hash.substring(1));
+window.addEventListener('hashchange', gotoCurrentTarget);
+gotoCurrentTarget();
 
 var toclinks = document.getElementsByClassName('pre-open');
 for (var k = 0; k < toclinks.length; k++) {
@@ -106,3 +104,74 @@ for (var k = 0; k < toclinks.length; k++) {
 function preOpen() {
   showHashTarget(this.hash.substring(1));
 }
+
+var split_left = document.querySelector('#split-left');
+var split_right = document.querySelector('#split-right');
+var split_parent = split_left.parentNode;
+var cw_with_sb = split_left.clientWidth;
+split_left.style.overflow = 'hidden';
+var cw_without_sb = split_left.clientWidth;
+split_left.style.overflow = '';
+
+// Need to add:
+// - Half of gutterSize (i.e. 10) because gutter will take that much from each.
+// - Scrollbar width (cw_with_sb - cw_without_sb), if it takes up existing
+//   space (Firefox) rather than adding the scrollbar to the side (Chrome)
+var percent_left =
+  (split_left.getBoundingClientRect().width + 10 + cw_without_sb - cw_with_sb) /
+  split_parent.getBoundingClientRect().width *
+  100;
+
+Split(['#split-left', '#split-right'], {
+  elementStyle: function(dimension, size, gutterSize) {
+    return {
+      'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+    };
+  },
+  gutterStyle: function(dimension, gutterSize) {
+    return {
+      'flex-basis': gutterSize + 'px'
+    };
+  },
+  gutterSize: 20,
+  sizes: [percent_left, 100 - percent_left]
+});
+
+// Chrome doesn't remember scroll position properly so do it ourselves.
+// Also works on Firefox and Edge.
+
+function updateState() {
+  history.replaceState(
+    {
+      left_top: split_left.scrollTop,
+      right_top: split_right.scrollTop
+    },
+    document.title
+  );
+}
+
+function loadState(ev) {
+  if (ev) {
+    // Edge doesn't replace change history.state on popstate.
+    history.replaceState(ev.state, document.title);
+  }
+  if (history.state) {
+    split_left.scrollTop = history.state.left_top;
+    split_right.scrollTop = history.state.right_top;
+  }
+}
+
+window.addEventListener('load', function() {
+  // Restore after Firefox scrolls to hash.
+  setTimeout(function() {
+    loadState();
+    // Update with initial scroll position.
+    updateState();
+    // Update scroll positions only after we've loaded because Firefox
+    // emits an initial scroll event with 0.
+    split_left.addEventListener('scroll', updateState);
+    split_right.addEventListener('scroll', updateState);
+  }, 1);
+});
+
+window.addEventListener('popstate', loadState);

docs/assets/split.css

@@ -0,0 +1,15 @@
+.gutter {
+    background-color: #f5f5f5;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: ns-resize;
+}
+
+.gutter.gutter-horizontal {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: ew-resize;
+}