markuapad 0.2.1 → 0.2.2

data/lib/markuapad/version.rb

@@ -1,3 +1,3 @@
 module Markuapad
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

data/src/file_accessor.js

@@ -69,6 +69,14 @@ class FileAccessor {
     this.fileAccessorDelegate.onAdd(...arguments);
   }
 
+  onProgress() {
+    this.fileAccessorDelegate.onProgress(...arguments);
+  }
+
+  onProgressStarted() {
+    this.fileAccessorDelegate.onProgressStarted(...arguments);
+  }
+
   supportsImageUploads() {
     return this.fileAccessorDelegate.supportsImageUploads;
   }

data/src/index.js

@@ -43,6 +43,8 @@ class ExampleFileAccessor {
     this.onAddCallbacks = [];
     this.onDeleteCallbacks = [];
     this.onManuscriptChangeCallbacks = [];
+    this.onProgressStartedCallbacks = [];
+    this.onProgressCallbacks = [];
     this.manifestFilesKey = `${this.projectRoot}/manifest_files`;
     this.manifestCodeKey = `${this.projectRoot}/manifest_code`;
     this.manifestImagesKey = `${this.projectRoot}/manifest_images`;
@@ -175,6 +177,14 @@ class ExampleFileAccessor {
   onManuscriptChange(cb = noop) {
     this.onManuscriptChangeCallbacks.push(cb);
   }
+
+  onProgress(cb = noop) {
+    this.onProgressCallbacks.push(cb);
+  }
+
+  onProgressStarted(cb = noop) {
+    this.onProgressStartedCallbacks.push(cb);
+  }
 }
 
 window.ExampleFileAccessor = ExampleFileAccessor;

data/src/jsx/main.jsx

@@ -40,6 +40,8 @@ class Main extends React.Component {
     FileAccessor.onDelete(this.onManuscriptChange);
     FileAccessor.onManuscriptChange(this.onManuscriptChange);
     FileAccessor.onAdd(this.onFileAdded);
+    FileAccessor.onProgress(this.onProgress);
+    FileAccessor.onProgressStarted(this.onProgressStarted);
   }
 
   // Lifecycle methods
@@ -60,6 +62,20 @@ class Main extends React.Component {
       this.onGeneratePreview();
   }
 
+  onProgress = (progressType) => {
+    this.setState({ progressType: progressType, inProgress: false })
+
+    clearInterval(this.progressUpdateInterval)
+
+    this.progressUpdateInterval = setTimeout(() => {
+      this.setState({ progressType: null })
+    }, 1000)
+  }
+
+  onProgressStarted = () => {
+    this.setState({ inProgress: true })
+  }
+
   onPreviewImage(file) {
     this.setState({ imageFile: file });
   }
@@ -113,6 +129,8 @@ class Main extends React.Component {
     return (
       <section className="markuapad">
         <Toolbar
+          inProgress={this.state.inProgress}
+          progressType={this.state.progressType}
           bookTitle={this.props.bookTitle}
           onGeneratePreview={this.onGeneratePreview}
           toggleLiveMode={this.toggleLiveMode}

data/src/jsx/toolbar.jsx

@@ -1,27 +1,41 @@
 import React from "react";
 
+let PROGRESS_TYPE_MAP = {
+  'manuscript_update': 'Manuscript Updated.',
+  'file_save': 'Saved.',
+  'image_create': 'Image Created.',
+  'file_delete': 'File Deleted'
+}
+
 class Toolbar extends React.Component {
   render() {
-    if (this.props.enablePreview) {
-      return (
-        <nav className="toolbar">
-          <h3 className="book-title">{ this.props.bookTitle}</h3>
-          <ul className="actions">
-            <li><a className={this.props.inLiveMode ? 'active' : '' } onClick={this.props.toggleLiveMode}><i className="fa fa-columns"></i> Live Mode</a></li>
-            <li><a className={this.props.inLiveMode ? 'disabled' : ''} onClick={this.props.onGeneratePreview}><i className="fa fa-play"></i> Preview</a></li>
-          </ul>
-        </nav>
-      );
-    } else {
-      return (
-        <span />
-      );
-    }
+    return (
+      <nav className="toolbar">
+        <h3 className="book-title">{ this.props.bookTitle}</h3>
+        <ul className="actions">
+          <li>
+            <a className={`progressMessage ${this.props.inProgress ? 'active' : ''}`}>
+              { this.props.inProgress ? <i className="fa fa-refresh fa-spin"></i> : null } { PROGRESS_TYPE_MAP[this.props.progressType] || 'Working...' }
+            </a>
+          </li>
+          {
+            this.props.enablePreview  ?
+              [
+                <li key="toggleLive"><a className={this.props.inLiveMode ? 'active' : '' } onClick={this.props.toggleLiveMode}><i className="fa fa-columns"></i> Live Mode</a></li>,
+                <li key="preview"><a className={this.props.inLiveMode ? 'disabled' : '' } onClick={this.props.onGeneratePreview}><i className="fa fa-play"></i> Preview</a></li>
+              ]
+            : null
+          }
+        </ul>
+      </nav>
+    );
   }
 }
 
 Toolbar.propTypes = {
   enablePreview: React.PropTypes.bool.isRequired,
+  inProgress: React.PropTypes.bool.isRequired,
+  progressType: React.PropTypes.string,
   inLiveMode: React.PropTypes.bool.isRequired,
   toggleLiveMode: React.PropTypes.func.isRequired,
   onGeneratePreview: React.PropTypes.func.isRequired,

data/src/styles/_toolbar.scss

@@ -25,6 +25,17 @@
       color: #aaa;
     }
   }
+
+  > a.progressMessage {
+    @include transition(opacity 1s ease-in-out);
+    opacity: 0;
+    border: none; 
+    &.active {
+      opacity: .7;
+      background: initial;
+      color: #555;
+    }
+  }
 }
 
 .markuapad .toolbar {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: markuapad
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Braden Simpson
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-05 00:00:00.000000000 Z
+date: 2015-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -50,6 +50,7 @@ files:
 - ".jshintrc"
 - CODE_OF_CONDUCT.md
 - Gemfile
+- Gemfile.lock
 - LICENSE
 - README.md
 - Rakefile
@@ -74,6 +75,7 @@ files:
 - markuapad-0.1.8.gem
 - markuapad-0.1.9.gem
 - markuapad-0.2.0.gem
+- markuapad-0.2.1.gem
 - markuapad.gemspec
 - package.json
 - prepare_gem.sh