Skip to content

Commit fa68a68

Browse files
legomushroomlegomushroom
committed
API: add destroy method
1 parent dccb319 commit fa68a68

14 files changed

+937
-912
lines changed

‎app/build/mojs-curve-editor.js‎

Lines changed: 805 additions & 844 deletions
Large diffs are not rendered by default.

‎app/build/mojs-curve-editor.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/css/blocks/curve-editor.postcss.css.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve-editor":"_curve-editor_10g8s_3","curve-editor__left":"_curve-editor__left_10g8s_1","curve-editor__right":"_curve-editor__right_10g8s_133","curve-editor__resize-handle":"_curve-editor__resize-handle_10g8s_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_10g8s_128","curve-editor__mojs-logo":"_curve-editor__mojs-logo_10g8s_111","is-inactive":"_is-inactive_10g8s_110","is-minimized":"_is-minimized_10g8s_118","curve__svg-wrapper":"_curve__svg-wrapper_10g8s_137","is-hidden-on-min":"_is-hidden-on-min_10g8s_147"}
1+
{"curve-editor":"_curve-editor_d81sj_3","curve-editor__left":"_curve-editor__left_d81sj_1","curve-editor__right":"_curve-editor__right_d81sj_138","curve-editor__resize-handle":"_curve-editor__resize-handle_d81sj_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_d81sj_133","curve-editor__mojs-logo":"_curve-editor__mojs-logo_d81sj_116","is-inactive":"_is-inactive_d81sj_115","is-minimized":"_is-minimized_d81sj_123","curve__svg-wrapper":"_curve__svg-wrapper_d81sj_142","is-hidden-on-min":"_is-hidden-on-min_d81sj_152"}

‎app/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,12 @@
7171
name: 'some name',
7272
// onChange(path) { console.log(path); },
7373
// isHiddenOnMin: true
74-
}).toggleSize();
74+
});
75+
76+
// setTimeout( () => {
77+
// curveEditor.destroy();
78+
// }, 5000 );
79+
7580

7681
</script>
7782

‎app/js/app.babel.jsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class API {
4545
}
4646

4747
_vars () {
48-
this.revision = '1.5.0';
48+
this.revision = '1.6.0';
4949
this.store = initStore();
5050

5151
this._easings = [];
@@ -72,7 +72,7 @@ class API {
7272
}
7373

7474
_renderApp () {
75-
render(
75+
this._rootEl = render(
7676
<Provider store={this.store}>
7777
<CurveEditor progressLines={this._progressLines}
7878
options={this._props}
@@ -177,6 +177,11 @@ class API {
177177
el.style.left = `${p*100}%`;
178178
}
179179

180+
/****** Public API ******/
181+
182+
/* Function to get the easing function compiled from the curve.
183+
@param {Object} Options.
184+
*/
180185
getEasing (o={}) {
181186
// get the easing function regarding reverse options
182187
const fun = (() => {
@@ -196,17 +201,38 @@ class API {
196201
return fun;
197202
}
198203

204+
/* Minimize the curve editor - save as clicking the `minimize` button.
205+
*/
199206
minimize() { this.store.dispatch({ type: 'SET_MINIMIZE', data: true }); }
200207

208+
/* Maximize the curve editor - save as clicking the `maximize` button.
209+
*/
201210
maximize() { this.store.dispatch({ type: 'SET_MINIMIZE', data: false }); }
202211

212+
/* Toggles between `maximize` and `minimize` states.
213+
*/
203214
toggleSize() {
204215
const state = this.store.getState();
205216
const {controls} = state;
206217

207218
controls.isMinimize ? this.maximize() : this.minimize();
208219
}
209220

221+
/* Destroys the app and ensures the `componentWillUnmount` is called
222+
on the each component in the Components Tree.
223+
*/
224+
destroy() {
225+
// console.log(this._rootEl);
226+
const NullComponent = () => { return null };
227+
render(
228+
<NullComponent />,
229+
document.body,
230+
this._rootEl
231+
);
232+
}
233+
234+
235+
210236
// highlight() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: true }); }
211237
// dim() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: false }); }
212238
// toggleHighlight() {

‎app/js/tags/code-button.babel.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ class CodeButton extends Component {
1414
}
1515
componentDidMount () {
1616
const {store} = this.context;
17-
const mc = propagating(new Hammer.Manager(this.base));
18-
mc.add(new Hammer.Tap);
17+
this._mc = propagating(new Hammer.Manager(this.base));
18+
this._mc.add(new Hammer.Tap);
1919

20-
mc.on('tap', (e) => { store.dispatch({ type: 'CODE_TAP' }); });
20+
this._mc.on('tap', (e) => { store.dispatch({ type: 'CODE_TAP' }); });
2121
}
22+
23+
componentWillUnmount() { this._mc.off('tap'); }
2224
}
2325

2426
export default CodeButton;

‎app/js/tags/curve-editor.babel.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,12 @@ class CurveEditor extends Component {
6969
componentDidMount () {
7070
this._resetCounter = 0;
7171

72-
const {store} = this.context,
73-
el = this.base.querySelector('#js-left-panel'),
74-
mc = propagating(new Hammer.Manager(el));
72+
const {store} = this.context;
73+
const el = this.base.querySelector('#js-left-panel');
74+
this._mc = propagating(new Hammer.Manager(el));
7575

76-
mc.add(new Hammer.Pan({ threshold: 0 }));
77-
mc
76+
this._mc.add(new Hammer.Pan({ threshold: 0 }));
77+
this._mc
7878
.on('pan', (e) => {
7979
const x = e.deltaX, y = e.deltaY;
8080
store.dispatch({ type: 'EDITOR_TRANSLATE', data: { x, y } });
@@ -89,6 +89,11 @@ class CurveEditor extends Component {
8989
store.subscribe(this.forceUpdate.bind(this));
9090
}
9191

92+
componentWillUnmount() {
93+
this._mc.off('pan');
94+
this._mc.off('panend');
95+
}
96+
9297
_addKeyUp () { document.addEventListener('keyup', this._onKeyUp.bind(this)); }
9398

9499
_onKeyUp (e) {
@@ -149,7 +154,6 @@ class CurveEditor extends Component {
149154
store.dispatch({ type: 'SET_ACTIVE', data: false });
150155
}
151156
}
152-
153157
}
154158

155159

‎app/js/tags/curve.babel.jsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -171,15 +171,14 @@ class Curve extends Component {
171171
componentDidMount () {
172172
this._updateDomProgressLines();
173173

174-
const {store} = this.context,
175-
el = this.base.querySelector('#js-segments'),
176-
mc = propagating(new Hammer.Manager(el));
177-
174+
const {store} = this.context;
175+
const el = this.base.querySelector('#js-segments');
176+
this._mc = propagating(new Hammer.Manager(el));
178177

179178
// mc.add(new Hammer.Pan({ threshold: 0 }));
180-
mc.add(new Hammer.Tap);
179+
this._mc.add(new Hammer.Tap);
181180

182-
mc
181+
this._mc
183182
.on('tap', (e) => {
184183
const {state} = this.props;
185184
const ev = e.srcEvent;
@@ -216,13 +215,13 @@ class Curve extends Component {
216215
e.stopPropagation();
217216
});
218217

219-
const svg = this.base.querySelector('#js-svg'),
220-
svgMc = propagating(new Hammer.Manager(this.base));
218+
const svg = this.base.querySelector('#js-svg');
219+
this._svgMc = propagating(new Hammer.Manager(this.base));
221220

222-
svgMc.add(new Hammer.Tap);
223-
svgMc.add(new Hammer.Pan);
221+
this._svgMc.add(new Hammer.Tap);
222+
this._svgMc.add(new Hammer.Pan);
224223

225-
svgMc
224+
this._svgMc
226225
.on('tap', (e) => {
227226
store.dispatch({ type: 'POINT_DESELECT_ALL' });
228227
})
@@ -232,7 +231,13 @@ class Curve extends Component {
232231
.on('panend', (e) => {
233232
store.dispatch({ type: 'EDITOR_PAN_END', data: e.deltaY });
234233
});
234+
}
235235

236+
componentWillUnmount() {
237+
this._mc.off('tap');
238+
this._svgMc.off('tap');
239+
this._svgMc.off('pan');
240+
this._svgMc.off('panend');
236241
}
237242
}
238243

‎app/js/tags/icon-button.babel.jsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,24 @@ class IconButton extends Component {
99
render () {
1010
const p = this.props;
1111
const check = (p.isCheck) ? CLASSES['is-checked'] : '';
12-
return <div className={`${CLASSES['icon-button']} ${check}`}
13-
title={ p.title || '' }
14-
data-component={'icon-button'}>
15-
<Icon shape={this.props.shape} />
16-
</div>;
12+
return (
13+
<div className={`${CLASSES['icon-button']} ${check}`}
14+
title={ p.title || '' }
15+
data-component={'icon-button'}>
16+
<Icon shape={this.props.shape} />
17+
</div>
18+
);
1719
}
1820

1921
componentDidMount () {
2022
if ( typeof this.props.onTap === 'function' ) {
21-
var hammertime = new Hammer(this.base)
23+
this._mc = new Hammer(this.base)
2224
.on('tap', (e) => { this.props.onTap( e, this.props ) });
2325
}
2426
}
27+
28+
componentWillUnmount() {
29+
if ( typeof this.props.onTap === 'function' ) { this._mc.off('tap'); } }
2530
}
2631

2732
export default IconButton;

‎app/js/tags/maximize-button.babel.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@ class MaximizeButton extends Component {
1414
}
1515
componentDidMount () {
1616
const {store} = this.context;
17-
const mc = propagating(new Hammer.Manager(this.base));
18-
mc.add(new Hammer.Tap);
17+
this._mc = propagating(new Hammer.Manager(this.base));
18+
this._mc.add(new Hammer.Tap);
1919

20-
mc.on('tap', (e) => {
20+
this._mc.on('tap', (e) => {
2121
store.dispatch({ type: 'SET_MINIMIZE', data: false });
2222
});
2323
}
24+
25+
componentWillUnmount() { this._mc.off('tap'); }
2426
}
2527

2628
export default MaximizeButton;

0 commit comments

Comments
 (0)