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",