Save in gist

hooks/createGist.js

@@ -0,0 +1,28 @@
+module['exports'] = function myService (hook) { 
+
+  var github = require('octonode');
+
+  var filename = hook.params.filename;
+  var description = hook.params.description;
+  var spec = hook.params.spec;
+
+  var client = github.client();
+
+  var files = {};
+
+  files[filename] = {"content": spec};
+
+  var ghgist = client.gist();
+
+	 ghgist.create({
+	   description: description,
+	   files: files,
+       public: true
+	 }, function(err, g){
+       if (err) {
+         return hook.res.json(err);   
+       }
+       hook.res.json(g.files); 
+
+     });
+};

src/actions/editor.js

@@ -9,6 +9,7 @@ export const TOGGLE_AUTO_PARSE = 'TOGGLE_AUTO_PARSE';
 export const CYCLE_RENDERER = 'CYCLE_RENDERER';
 export const SHOW_COMPILED_VEGA_SPEC = 'SHOW_COMPILED_VEGA_SPEC'
 export const SET_MODE = 'SET_MODE'
+import { hashHistory } from 'react-router';
 
 export function setMode (mode) {
   return {
@@ -54,22 +55,67 @@ export function updateVegaLiteSpec (spec) {
   };
 };
 
-export function setGistVegaSpec (gist, spec) {
-  return {
-    type: SET_GIST_VEGA_SPEC,
-    gist: gist,
-    spec: spec
-  };
-};
+const getSpecFromGistURL = (gistUrl, mode, cb) => {
+  let prefix = 'https://hook.io/tianyiii/vegaeditor/';
+  let hookUrl = prefix + mode + '/'
+    + gistUrl.substring(gistUrl.indexOf('.com/') + '.com/'.length);
+  let suffix = hookUrl.substring(prefix.length);
 
-export function setGistVegaLiteSpec (gist, spec) {
-  return {
-    type: SET_GIST_VEGA_LITE_SPEC,
-    gist: gist,
-    spec: spec
+  return fetch(hookUrl, {
+    method: 'get',
+    mode: 'cors'
+  })
+  .then((response) => {
+    if (response.status === 200) {
+      return Promise.resolve(response);
+    } else {
+      return Promise.reject(new Error(response.statusText));
+    }
+  })
+  .then((response) => {
+    let arrayNames = suffix.split('/');
+    if (arrayNames.length < 3) {
+      console.warn('invalid url');
+      return;
+    }
+    let username = arrayNames[1];
+    let id = arrayNames[2];
+    hashHistory.push('/gist/' + mode +'/' + username + '/' + id);
+    return response.text();
+  })
+}
+
+export function setGistVegaLite(url) {
+  return dispatch => {
+    getSpecFromGistURL(url, 'vega-lite')
+      .then((data) => {
+        if (data['message'] !== 'Not Found') {
+          dispatch({
+            type: SET_GIST_VEGA_LITE_SPEC,
+            gist: url,
+            spec: data
+          });
+        }
+      });
+  }
+}
+
+export function setGistVega (url) {
+  return dispatch => {
+    getSpecFromGistURL(url, 'vega')
+      .then((data) => {
+        if (data['message'] !== 'Not Found') {
+          dispatch({
+            type: SET_GIST_VEGA_SPEC,
+            gist: url,
+            spec: data
+          });
+        }
+      });
   };
 };
 
+
 export function toggleAutoParse () {
   return {
     type: TOGGLE_AUTO_PARSE

src/components/app.js

@@ -41,17 +41,17 @@ class App extends React.Component {
     }
 
     setTimeout(() => {
-      this.setExample(this.props.params);
+      this.loadSpecFromCurrentURL(this.props.params);
     }, 500);
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.params !== nextProps.params) {
-      this.setExample(nextProps.params);
+      this.loadSpecFromCurrentURL(nextProps.params);
     }
   }
 
-  setExample(parameter) {
+  loadSpecFromCurrentURL(parameter) {
     if (hashHistory.getCurrentLocation().pathname.indexOf('/edited') === -1) {
       if (parameter && parameter.example_name) {
         const name = parameter.example_name;
@@ -72,6 +72,13 @@ class App extends React.Component {
             });
           }
         }
+      } else if (parameter && parameter.username && parameter.id) {
+        const url = `https://gist.github.com/${parameter.username}/${parameter.id}`;
+        if (parameter.mode === 'vega') {
+          this.props.setGistVega(url);
+        } else {
+          this.props.setGistVegaLite(url);
+        }
       }
     }
   }
@@ -109,6 +116,12 @@ const mapDispatchToProps = function (dispatch) {
     },
     setVegaLiteExample: (example, val) => {
       dispatch(EditorActions.setVegaLiteExample(example, val));
+    },
+    setGistVegaLite: (url) => {
+      dispatch(EditorActions.setGistVegaLite(url));
+    },
+    setGistVega: (url) => {
+      dispatch(EditorActions.setGistVega(url));
     }
   };
 };

src/components/header/index.css

@@ -192,6 +192,21 @@
   color: white;
 }
 
+.gist-save-button:hover  {
+  background: rgb(92, 64, 141);
+  color: white;
+}
+
+.gist-save-button {
+  background: white;
+  border: 1px solid #A9A9A9;
+  cursor: pointer;
+  width: 100%;
+  height: 30px;
+  font-size: 16px;
+  outline: none;
+}
+
 .gist-text {
   margin-top: 25px;
   font-size: 12px;
@@ -214,6 +229,31 @@
   padding: 5px;
 }
 
+.gist-save-input {
+  display: inline;
+  width: 100%;
+  resize: none;
+  font-size: 14px;
+  margin-top: 5px;
+  margin-bottom: 30px;
+  padding: 5px;
+}
+
+.gist-filename {
+  display: inline;
+}
+
+.gist-filename-text {
+  font-size: 12px;
+  font-style: italic;
+}
+
+.gist-filename-example {
+  font-size: 12px;
+  font-style: italic;
+  color: rgb(6,69,173);
+}
+
 .customSubmenu {
   border-left: solid 1px #666;
   border-right: solid 1px #666;
@@ -232,4 +272,33 @@
 
 #emptyButton:hover {
   border-bottom: solid 5px rgb(92, 64, 141);
+}
+
+
+
+@keyframes flickerAnimation {
+  0%   { opacity:1; }
+  50%  { opacity:0; }
+  100% { opacity:1; }
+}
+@-o-keyframes flickerAnimation{
+  0%   { opacity:1; }
+  50%  { opacity:0; }
+  100% { opacity:1; }
+}
+@-moz-keyframes flickerAnimation{
+  0%   { opacity:1; }
+  50%  { opacity:0; }
+  100% { opacity:1; }
+}
+@-webkit-keyframes flickerAnimation{
+  0%   { opacity:1; }
+  50%  { opacity:0; }
+  100% { opacity:1; }
+}
+.save-gist-content {
+   -webkit-animation: flickerAnimation 3s infinite;
+   -moz-animation: flickerAnimation 3s infinite;
+   -o-animation: flickerAnimation 3s infinite;
+    animation: flickerAnimation 3s infinite;
 }

src/components/header/index.js

@@ -4,18 +4,19 @@ import * as EditorActions from '../../actions/editor';
 
 const mapStateToProps = function (state, ownProps) {
   return {
+    editorString: state.app.editorString,
     mode: state.app.mode
   };
 };
 
 const mapDispatchToProps = function (dispatch) {
   return {
-    setGistVegaSpec: (gist, spec) => {
-      dispatch(EditorActions.setGistVegaSpec(gist, spec));
+    setGistVega: (url) => {
+      dispatch(EditorActions.setGistVega(url));
     },
 
-    setGistVegaLiteSpec: (gist, spec) => {
-      dispatch(EditorActions.setGistVegaLiteSpec(gist, spec));
+    setGistVegaLite: (url) => {
+      dispatch(EditorActions.setGistVegaLite(url));
     }
   };
 };