fix issue with jquery ready wrapper

mojs · Oct 12, 2016 · 7d21599 · 7d21599
1 parent f672ff4
commit 7d21599
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 67 deletions.
diff --git a/app/build/mojs-curve-editor.js b/app/build/mojs-curve-editor.js
@@ -160,7 +160,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: '_vars',
 	    value: function _vars() {
-	      this.revision = '1.4.5';
+	      this.revision = '1.4.6';
 	      this.store = (0, _store2.default)();
 
 	      this._easings = [];
@@ -177,34 +177,47 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: function _render() {
 	      var _this = this;
 
-	      document.addEventListener('DOMContentLoaded', function () {
-	        (0, _preact.render)((0, _preact.h)(
-	          _preactRedux.Provider,
-	          { store: _this.store },
-	          (0, _preact.h)(_curveEditor2.default, { progressLines: _this._progressLines,
-	            ref: function ref(el) {
-	              _this._el = el;
-	            } })
-	        ), document.body);
+	      var doc = document;
+	      var docState = doc.readyState;
+	      if (docState === "complete" || docState === "loaded" || docState === "interactive") {
+	        return this._renderApp();
+	      }
+
+	      doc.addEventListener('DOMContentLoaded', function () {
+	        _this._renderApp();
 	      });
 	    }
+	  }, {
+	    key: '_renderApp',
+	    value: function _renderApp() {
+	      var _this2 = this;
+
+	      (0, _preact.render)((0, _preact.h)(
+	        _preactRedux.Provider,
+	        { store: this.store },
+	        (0, _preact.h)(_curveEditor2.default, { progressLines: this._progressLines,
+	          ref: function ref(el) {
+	            _this2._el = el;
+	          } })
+	      ), document.body);
+	    }
 	  }, {
 	    key: '_listenUnload',
 	    value: function _listenUnload() {
-	      var _this2 = this;
+	      var _this3 = this;
 
 	      var unloadEvent = 'onpagehide' in window ? 'pagehide' : 'beforeunload';
 	      window.addEventListener(unloadEvent, function () {
-	        if (_this2._props.isSaveState) {
-	          var preState = (0, _extends3.default)({}, _this2.store.getState());
+	        if (_this3._props.isSaveState) {
+	          var preState = (0, _extends3.default)({}, _this3.store.getState());
 
 	          delete preState.points.history;
 	          delete preState.pointControls.history;
 	          preState.progressLines.lines = [];
 
-	          localStorage.setItem(_this2._localStorage, (0, _stringify2.default)(preState));
+	          localStorage.setItem(_this3._localStorage, (0, _stringify2.default)(preState));
 	        } else {
-	          localStorage.removeItem(_this2._localStorage);
+	          localStorage.removeItem(_this3._localStorage);
 	        }
 	      });
 	    }
@@ -236,7 +249,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: '_compilePath',
 	    value: function _compilePath() {
-	      var _this3 = this;
+	      var _this4 = this;
 
 	      var state = this.store.getState();
 	      var points = state.points.present;
@@ -249,10 +262,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      clearTimeout(this._tm);
 	      this._tm = setTimeout(function () {
-	        if (_this3._prevPath !== path) {
-	          _this3._prevPath = path;
-	          _this3._easing = mojs.easing.path(path);
-	          _this3._fireOnChange(path);
+	        if (_this4._prevPath !== path) {
+	          _this4._prevPath = path;
+	          _this4._easing = mojs.easing.path(path);
+	          _this4._fireOnChange(path);
 	        }
 	      }, 40);
 	    }
@@ -302,25 +315,25 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'getEasing',
 	    value: function getEasing() {
-	      var _this4 = this;
+	      var _this5 = this;
 
 	      var o = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
 	      // get the easing function regarding reverse options
 	      var fun = function () {
-	        var i = _this4._easings.length;
+	        var i = _this5._easings.length;
 	        return function (k) {
-	          _this4._updateProgressLine(k, i, _this4._progressLines);
-	          var transform = _this4._easings[i].options.transform;
-	          return transform ? transform(_this4._easing(k)) : _this4._easing(k);
+	          _this5._updateProgressLine(k, i, _this5._progressLines);
+	          var transform = _this5._easings[i].options.transform;
+	          return transform ? transform(_this5._easing(k)) : _this5._easing(k);
 	        };
 	      }();
 
 	      this.store.dispatch({ type: 'ADD_PROGRESS_LINE', data: {} });
 	      this._easings.push({ options: o, easing: fun });
 
 	      (0, _defer2.default)(function () {
-	        _this4._fireOnChange(_this4._prevPath);
+	        _this5._fireOnChange(_this5._prevPath);
 	      });
 	      return fun;
 	    }

diff --git a/app/build/mojs-curve-editor.min.js b/app/build/mojs-curve-editor.min.js
diff --git a/app/index.html b/app/index.html
@@ -66,37 +66,14 @@
   <script src="../node_modules/mojs-player/build/mojs-player.js" charset="utf-8"></script>
   <script src="build/mojs-curve-editor.js" charset="utf-8"></script>
 
-  <script>
-
-
-
-    const mojsCurve = new MojsCurveEditor({
-      name:         'b curve'
-    });
-
-    const rect = new mojs.Shape({
-      shape:        'rect',
-
-      left:         {'0%':'100%'},
-      top:          0,
-      fill:         'none',
-      radius:       20,
-      stroke:       { 'rgba(0,255,255, 1)' : 'magenta',  easing: mojsCurve.getEasing() },
-      strokeWidth:  { 10: 0 },
-      angle:        { 0: 180 },
-
-      duration:     1500,
-    });
-
-    const mainTimeline = new mojs.Timeline;
-    mainTimeline.add( rect );
-    const mojsPlayer = new MojsPlayer({ add: mainTimeline });
-
+  <script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
 
+  <script>
 
+    // jQuery(function ($) { new MojsCurveEditor({ name: 'some name' }); });
+    new MojsCurveEditor({ name: 'some name' });
 
 
-    // new MojsCurveEditor({ name: 'some name' });
 
     // var scaleCurve  = new window.MojsCurveEditor({ name: 'curve_scale' });
     // var rotateCurve = new window.MojsCurveEditor({ name: 'curve_rotate' });

diff --git a/app/js/app.babel.jsx b/app/js/app.babel.jsx
@@ -43,7 +43,7 @@ class API {
   }
 
   _vars () {
-    this.revision = '1.4.5';
+    this.revision = '1.4.6';
     this.store    = initStore();
 
     this._easings = [];
@@ -57,13 +57,25 @@ class API {
   }
 
   _render () {
-    document.addEventListener('DOMContentLoaded', () => {
-      render(
-        <Provider store={this.store}>
-          <CurveEditor  progressLines = {this._progressLines}
-                        ref={ (el) => { this._el = el; }} />
-        </Provider>, document.body);
-    });
+    const doc = document;
+    const docState = doc.readyState;
+    if (docState === "complete" ||
+        docState === "loaded"  ||
+        docState === "interactive") {
+        return this._renderApp();
+    }
+
+    doc.addEventListener('DOMContentLoaded', () => {this._renderApp()});
+  }
+
+  _renderApp () {
+    render(
+      <Provider store={this.store}>
+        <CurveEditor  progressLines = {this._progressLines}
+                      ref={ (el) => { this._el = el; }} />
+      </Provider>,
+      document.body
+    );
   }
 
   _listenUnload () {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mojs-curve-editor",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "mojs GUI for editing easing/property curves",
   "keywords": [
     "mojs",