@ckeditor/ckeditor5-utils 34.0.0 → 35.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +324 -0
- package/LICENSE.md +3 -3
- package/package.json +19 -8
- package/src/areconnectedthroughproperties.js +0 -92
- package/src/ckeditorerror.js +0 -218
- package/src/collection.js +0 -785
- package/src/comparearrays.js +0 -51
- package/src/config.js +0 -246
- package/src/count.js +0 -26
- package/src/diff.js +0 -138
- package/src/difftochanges.js +0 -86
- package/src/dom/createelement.js +0 -49
- package/src/dom/emittermixin.js +0 -341
- package/src/dom/getancestors.js +0 -31
- package/src/dom/getborderwidths.js +0 -27
- package/src/dom/getcommonancestor.js +0 -31
- package/src/dom/getdatafromelement.js +0 -24
- package/src/dom/getpositionedancestor.js +0 -28
- package/src/dom/global.js +0 -26
- package/src/dom/indexof.js +0 -25
- package/src/dom/insertat.js +0 -19
- package/src/dom/iscomment.js +0 -20
- package/src/dom/isnode.js +0 -26
- package/src/dom/isrange.js +0 -18
- package/src/dom/istext.js +0 -18
- package/src/dom/isvisible.js +0 -25
- package/src/dom/iswindow.js +0 -30
- package/src/dom/position.js +0 -518
- package/src/dom/rect.js +0 -443
- package/src/dom/remove.js +0 -21
- package/src/dom/resizeobserver.js +0 -378
- package/src/dom/scroll.js +0 -302
- package/src/dom/setdatainelement.js +0 -24
- package/src/dom/tounit.js +0 -27
- package/src/elementreplacer.js +0 -57
- package/src/emittermixin.js +0 -719
- package/src/env.js +0 -190
- package/src/eventinfo.js +0 -79
- package/src/fastdiff.js +0 -261
- package/src/first.js +0 -24
- package/src/focustracker.js +0 -157
- package/src/index.js +0 -45
- package/src/inserttopriorityarray.js +0 -42
- package/src/isiterable.js +0 -18
- package/src/keyboard.js +0 -301
- package/src/keystrokehandler.js +0 -130
- package/src/language.js +0 -26
- package/src/locale.js +0 -176
- package/src/mapsequal.js +0 -32
- package/src/mix.js +0 -47
- package/src/nth.js +0 -31
- package/src/objecttomap.js +0 -29
- package/src/observablemixin.js +0 -908
- package/src/priorities.js +0 -44
- package/src/spy.js +0 -25
- package/src/toarray.js +0 -18
- package/src/tomap.js +0 -29
- package/src/translation-service.js +0 -216
- package/src/uid.js +0 -59
- package/src/unicode.js +0 -106
- package/src/version.js +0 -157
package/src/observablemixin.js
DELETED
|
@@ -1,908 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @module utils/observablemixin
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import EmitterMixin from './emittermixin';
|
|
11
|
-
import CKEditorError from './ckeditorerror';
|
|
12
|
-
import { extend, isObject } from 'lodash-es';
|
|
13
|
-
|
|
14
|
-
const observablePropertiesSymbol = Symbol( 'observableProperties' );
|
|
15
|
-
const boundObservablesSymbol = Symbol( 'boundObservables' );
|
|
16
|
-
const boundPropertiesSymbol = Symbol( 'boundProperties' );
|
|
17
|
-
|
|
18
|
-
const _decoratedMethods = Symbol( 'decoratedMethods' );
|
|
19
|
-
const _decoratedOriginal = Symbol( 'decoratedOriginal' );
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* A mixin that injects the "observable properties" and data binding functionality described in the
|
|
23
|
-
* {@link ~Observable} interface.
|
|
24
|
-
*
|
|
25
|
-
* Read more about the concept of observables in the:
|
|
26
|
-
* * {@glink framework/guides/architecture/core-editor-architecture#event-system-and-observables Event system and observables}
|
|
27
|
-
* section of the {@glink framework/guides/architecture/core-editor-architecture Core editor architecture} guide,
|
|
28
|
-
* * {@glink framework/guides/deep-dive/observables Observables deep dive} guide.
|
|
29
|
-
*
|
|
30
|
-
* @mixin ObservableMixin
|
|
31
|
-
* @mixes module:utils/emittermixin~EmitterMixin
|
|
32
|
-
* @implements module:utils/observablemixin~Observable
|
|
33
|
-
*/
|
|
34
|
-
const ObservableMixin = {
|
|
35
|
-
/**
|
|
36
|
-
* @inheritDoc
|
|
37
|
-
*/
|
|
38
|
-
set( name, value ) {
|
|
39
|
-
// If the first parameter is an Object, iterate over its properties.
|
|
40
|
-
if ( isObject( name ) ) {
|
|
41
|
-
Object.keys( name ).forEach( property => {
|
|
42
|
-
this.set( property, name[ property ] );
|
|
43
|
-
}, this );
|
|
44
|
-
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
initObservable( this );
|
|
49
|
-
|
|
50
|
-
const properties = this[ observablePropertiesSymbol ];
|
|
51
|
-
|
|
52
|
-
if ( ( name in this ) && !properties.has( name ) ) {
|
|
53
|
-
/**
|
|
54
|
-
* Cannot override an existing property.
|
|
55
|
-
*
|
|
56
|
-
* This error is thrown when trying to {@link ~Observable#set set} a property with
|
|
57
|
-
* a name of an already existing property. For example:
|
|
58
|
-
*
|
|
59
|
-
* let observable = new Model();
|
|
60
|
-
* observable.property = 1;
|
|
61
|
-
* observable.set( 'property', 2 ); // throws
|
|
62
|
-
*
|
|
63
|
-
* observable.set( 'property', 1 );
|
|
64
|
-
* observable.set( 'property', 2 ); // ok, because this is an existing property.
|
|
65
|
-
*
|
|
66
|
-
* @error observable-set-cannot-override
|
|
67
|
-
*/
|
|
68
|
-
throw new CKEditorError( 'observable-set-cannot-override', this );
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
Object.defineProperty( this, name, {
|
|
72
|
-
enumerable: true,
|
|
73
|
-
configurable: true,
|
|
74
|
-
|
|
75
|
-
get() {
|
|
76
|
-
return properties.get( name );
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
set( value ) {
|
|
80
|
-
const oldValue = properties.get( name );
|
|
81
|
-
|
|
82
|
-
// Fire `set` event before the new value will be set to make it possible
|
|
83
|
-
// to override observable property without affecting `change` event.
|
|
84
|
-
// See https://github.com/ckeditor/ckeditor5-utils/issues/171.
|
|
85
|
-
let newValue = this.fire( 'set:' + name, name, value, oldValue );
|
|
86
|
-
|
|
87
|
-
if ( newValue === undefined ) {
|
|
88
|
-
newValue = value;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Allow undefined as an initial value like A.define( 'x', undefined ) (#132).
|
|
92
|
-
// Note: When properties map has no such own property, then its value is undefined.
|
|
93
|
-
if ( oldValue !== newValue || !properties.has( name ) ) {
|
|
94
|
-
properties.set( name, newValue );
|
|
95
|
-
this.fire( 'change:' + name, name, newValue, oldValue );
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
} );
|
|
99
|
-
|
|
100
|
-
this[ name ] = value;
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* @inheritDoc
|
|
105
|
-
*/
|
|
106
|
-
bind( ...bindProperties ) {
|
|
107
|
-
if ( !bindProperties.length || !isStringArray( bindProperties ) ) {
|
|
108
|
-
/**
|
|
109
|
-
* All properties must be strings.
|
|
110
|
-
*
|
|
111
|
-
* @error observable-bind-wrong-properties
|
|
112
|
-
*/
|
|
113
|
-
throw new CKEditorError( 'observable-bind-wrong-properties', this );
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
if ( ( new Set( bindProperties ) ).size !== bindProperties.length ) {
|
|
117
|
-
/**
|
|
118
|
-
* Properties must be unique.
|
|
119
|
-
*
|
|
120
|
-
* @error observable-bind-duplicate-properties
|
|
121
|
-
*/
|
|
122
|
-
throw new CKEditorError( 'observable-bind-duplicate-properties', this );
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
initObservable( this );
|
|
126
|
-
|
|
127
|
-
const boundProperties = this[ boundPropertiesSymbol ];
|
|
128
|
-
|
|
129
|
-
bindProperties.forEach( propertyName => {
|
|
130
|
-
if ( boundProperties.has( propertyName ) ) {
|
|
131
|
-
/**
|
|
132
|
-
* Cannot bind the same property more than once.
|
|
133
|
-
*
|
|
134
|
-
* @error observable-bind-rebind
|
|
135
|
-
*/
|
|
136
|
-
throw new CKEditorError( 'observable-bind-rebind', this );
|
|
137
|
-
}
|
|
138
|
-
} );
|
|
139
|
-
|
|
140
|
-
const bindings = new Map();
|
|
141
|
-
|
|
142
|
-
// @typedef {Object} Binding
|
|
143
|
-
// @property {Array} property Property which is bound.
|
|
144
|
-
// @property {Array} to Array of observable–property components of the binding (`{ observable: ..., property: .. }`).
|
|
145
|
-
// @property {Array} callback A function which processes `to` components.
|
|
146
|
-
bindProperties.forEach( a => {
|
|
147
|
-
const binding = { property: a, to: [] };
|
|
148
|
-
|
|
149
|
-
boundProperties.set( a, binding );
|
|
150
|
-
bindings.set( a, binding );
|
|
151
|
-
} );
|
|
152
|
-
|
|
153
|
-
// @typedef {Object} BindChain
|
|
154
|
-
// @property {Function} to See {@link ~ObservableMixin#_bindTo}.
|
|
155
|
-
// @property {Function} toMany See {@link ~ObservableMixin#_bindToMany}.
|
|
156
|
-
// @property {module:utils/observablemixin~Observable} _observable The observable which initializes the binding.
|
|
157
|
-
// @property {Array} _bindProperties Array of `_observable` properties to be bound.
|
|
158
|
-
// @property {Array} _to Array of `to()` observable–properties (`{ observable: toObservable, properties: ...toProperties }`).
|
|
159
|
-
// @property {Map} _bindings Stores bindings to be kept in
|
|
160
|
-
// {@link ~ObservableMixin#_boundProperties}/{@link ~ObservableMixin#_boundObservables}
|
|
161
|
-
// initiated in this binding chain.
|
|
162
|
-
return {
|
|
163
|
-
to: bindTo,
|
|
164
|
-
toMany: bindToMany,
|
|
165
|
-
|
|
166
|
-
_observable: this,
|
|
167
|
-
_bindProperties: bindProperties,
|
|
168
|
-
_to: [],
|
|
169
|
-
_bindings: bindings
|
|
170
|
-
};
|
|
171
|
-
},
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* @inheritDoc
|
|
175
|
-
*/
|
|
176
|
-
unbind( ...unbindProperties ) {
|
|
177
|
-
// Nothing to do here if not inited yet.
|
|
178
|
-
if ( !( this[ observablePropertiesSymbol ] ) ) {
|
|
179
|
-
return;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const boundProperties = this[ boundPropertiesSymbol ];
|
|
183
|
-
const boundObservables = this[ boundObservablesSymbol ];
|
|
184
|
-
|
|
185
|
-
if ( unbindProperties.length ) {
|
|
186
|
-
if ( !isStringArray( unbindProperties ) ) {
|
|
187
|
-
/**
|
|
188
|
-
* Properties must be strings.
|
|
189
|
-
*
|
|
190
|
-
* @error observable-unbind-wrong-properties
|
|
191
|
-
*/
|
|
192
|
-
throw new CKEditorError( 'observable-unbind-wrong-properties', this );
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
unbindProperties.forEach( propertyName => {
|
|
196
|
-
const binding = boundProperties.get( propertyName );
|
|
197
|
-
|
|
198
|
-
// Nothing to do if the binding is not defined
|
|
199
|
-
if ( !binding ) {
|
|
200
|
-
return;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
let toObservable, toProperty, toProperties, toPropertyBindings;
|
|
204
|
-
|
|
205
|
-
binding.to.forEach( to => {
|
|
206
|
-
// TODO: ES6 destructuring.
|
|
207
|
-
toObservable = to[ 0 ];
|
|
208
|
-
toProperty = to[ 1 ];
|
|
209
|
-
toProperties = boundObservables.get( toObservable );
|
|
210
|
-
toPropertyBindings = toProperties[ toProperty ];
|
|
211
|
-
|
|
212
|
-
toPropertyBindings.delete( binding );
|
|
213
|
-
|
|
214
|
-
if ( !toPropertyBindings.size ) {
|
|
215
|
-
delete toProperties[ toProperty ];
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
if ( !Object.keys( toProperties ).length ) {
|
|
219
|
-
boundObservables.delete( toObservable );
|
|
220
|
-
this.stopListening( toObservable, 'change' );
|
|
221
|
-
}
|
|
222
|
-
} );
|
|
223
|
-
|
|
224
|
-
boundProperties.delete( propertyName );
|
|
225
|
-
} );
|
|
226
|
-
} else {
|
|
227
|
-
boundObservables.forEach( ( bindings, boundObservable ) => {
|
|
228
|
-
this.stopListening( boundObservable, 'change' );
|
|
229
|
-
} );
|
|
230
|
-
|
|
231
|
-
boundObservables.clear();
|
|
232
|
-
boundProperties.clear();
|
|
233
|
-
}
|
|
234
|
-
},
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* @inheritDoc
|
|
238
|
-
*/
|
|
239
|
-
decorate( methodName ) {
|
|
240
|
-
const originalMethod = this[ methodName ];
|
|
241
|
-
|
|
242
|
-
if ( !originalMethod ) {
|
|
243
|
-
/**
|
|
244
|
-
* Cannot decorate an undefined method.
|
|
245
|
-
*
|
|
246
|
-
* @error observablemixin-cannot-decorate-undefined
|
|
247
|
-
* @param {Object} object The object which method should be decorated.
|
|
248
|
-
* @param {String} methodName Name of the method which does not exist.
|
|
249
|
-
*/
|
|
250
|
-
throw new CKEditorError(
|
|
251
|
-
'observablemixin-cannot-decorate-undefined',
|
|
252
|
-
this,
|
|
253
|
-
{ object: this, methodName }
|
|
254
|
-
);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
this.on( methodName, ( evt, args ) => {
|
|
258
|
-
evt.return = originalMethod.apply( this, args );
|
|
259
|
-
} );
|
|
260
|
-
|
|
261
|
-
this[ methodName ] = function( ...args ) {
|
|
262
|
-
return this.fire( methodName, args );
|
|
263
|
-
};
|
|
264
|
-
|
|
265
|
-
this[ methodName ][ _decoratedOriginal ] = originalMethod;
|
|
266
|
-
|
|
267
|
-
if ( !this[ _decoratedMethods ] ) {
|
|
268
|
-
this[ _decoratedMethods ] = [];
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
this[ _decoratedMethods ].push( methodName );
|
|
272
|
-
}
|
|
273
|
-
};
|
|
274
|
-
|
|
275
|
-
extend( ObservableMixin, EmitterMixin );
|
|
276
|
-
|
|
277
|
-
// Override the EmitterMixin stopListening method to be able to clean (and restore) decorated methods.
|
|
278
|
-
// This is needed in case of:
|
|
279
|
-
// 1. Have x.foo() decorated.
|
|
280
|
-
// 2. Call x.stopListening()
|
|
281
|
-
// 3. Call x.foo(). Problem: nothing happens (the original foo() method is not executed)
|
|
282
|
-
ObservableMixin.stopListening = function( emitter, event, callback ) {
|
|
283
|
-
// Removing all listeners so let's clean the decorated methods to the original state.
|
|
284
|
-
if ( !emitter && this[ _decoratedMethods ] ) {
|
|
285
|
-
for ( const methodName of this[ _decoratedMethods ] ) {
|
|
286
|
-
this[ methodName ] = this[ methodName ][ _decoratedOriginal ];
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
delete this[ _decoratedMethods ];
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
EmitterMixin.stopListening.call( this, emitter, event, callback );
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
export default ObservableMixin;
|
|
296
|
-
|
|
297
|
-
// Init symbol properties needed for the observable mechanism to work.
|
|
298
|
-
//
|
|
299
|
-
// @private
|
|
300
|
-
// @param {module:utils/observablemixin~ObservableMixin} observable
|
|
301
|
-
function initObservable( observable ) {
|
|
302
|
-
// Do nothing if already inited.
|
|
303
|
-
if ( observable[ observablePropertiesSymbol ] ) {
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
// The internal hash containing the observable's state.
|
|
308
|
-
//
|
|
309
|
-
// @private
|
|
310
|
-
// @type {Map}
|
|
311
|
-
Object.defineProperty( observable, observablePropertiesSymbol, {
|
|
312
|
-
value: new Map()
|
|
313
|
-
} );
|
|
314
|
-
|
|
315
|
-
// Map containing bindings to external observables. It shares the binding objects
|
|
316
|
-
// (`{ observable: A, property: 'a', to: ... }`) with {@link module:utils/observablemixin~ObservableMixin#_boundProperties} and
|
|
317
|
-
// it is used to observe external observables to update own properties accordingly.
|
|
318
|
-
// See {@link module:utils/observablemixin~ObservableMixin#bind}.
|
|
319
|
-
//
|
|
320
|
-
// A.bind( 'a', 'b', 'c' ).to( B, 'x', 'y', 'x' );
|
|
321
|
-
// console.log( A._boundObservables );
|
|
322
|
-
//
|
|
323
|
-
// Map( {
|
|
324
|
-
// B: {
|
|
325
|
-
// x: Set( [
|
|
326
|
-
// { observable: A, property: 'a', to: [ [ B, 'x' ] ] },
|
|
327
|
-
// { observable: A, property: 'c', to: [ [ B, 'x' ] ] }
|
|
328
|
-
// ] ),
|
|
329
|
-
// y: Set( [
|
|
330
|
-
// { observable: A, property: 'b', to: [ [ B, 'y' ] ] },
|
|
331
|
-
// ] )
|
|
332
|
-
// }
|
|
333
|
-
// } )
|
|
334
|
-
//
|
|
335
|
-
// A.bind( 'd' ).to( B, 'z' ).to( C, 'w' ).as( callback );
|
|
336
|
-
// console.log( A._boundObservables );
|
|
337
|
-
//
|
|
338
|
-
// Map( {
|
|
339
|
-
// B: {
|
|
340
|
-
// x: Set( [
|
|
341
|
-
// { observable: A, property: 'a', to: [ [ B, 'x' ] ] },
|
|
342
|
-
// { observable: A, property: 'c', to: [ [ B, 'x' ] ] }
|
|
343
|
-
// ] ),
|
|
344
|
-
// y: Set( [
|
|
345
|
-
// { observable: A, property: 'b', to: [ [ B, 'y' ] ] },
|
|
346
|
-
// ] ),
|
|
347
|
-
// z: Set( [
|
|
348
|
-
// { observable: A, property: 'd', to: [ [ B, 'z' ], [ C, 'w' ] ], callback: callback }
|
|
349
|
-
// ] )
|
|
350
|
-
// },
|
|
351
|
-
// C: {
|
|
352
|
-
// w: Set( [
|
|
353
|
-
// { observable: A, property: 'd', to: [ [ B, 'z' ], [ C, 'w' ] ], callback: callback }
|
|
354
|
-
// ] )
|
|
355
|
-
// }
|
|
356
|
-
// } )
|
|
357
|
-
//
|
|
358
|
-
// @private
|
|
359
|
-
// @type {Map}
|
|
360
|
-
Object.defineProperty( observable, boundObservablesSymbol, {
|
|
361
|
-
value: new Map()
|
|
362
|
-
} );
|
|
363
|
-
|
|
364
|
-
// Object that stores which properties of this observable are bound and how. It shares
|
|
365
|
-
// the binding objects (`{ observable: A, property: 'a', to: ... }`) with
|
|
366
|
-
// {@link module:utils/observablemixin~ObservableMixin#_boundObservables}. This data structure is
|
|
367
|
-
// a reverse of {@link module:utils/observablemixin~ObservableMixin#_boundObservables} and it is helpful for
|
|
368
|
-
// {@link module:utils/observablemixin~ObservableMixin#unbind}.
|
|
369
|
-
//
|
|
370
|
-
// See {@link module:utils/observablemixin~ObservableMixin#bind}.
|
|
371
|
-
//
|
|
372
|
-
// A.bind( 'a', 'b', 'c' ).to( B, 'x', 'y', 'x' );
|
|
373
|
-
// console.log( A._boundProperties );
|
|
374
|
-
//
|
|
375
|
-
// Map( {
|
|
376
|
-
// a: { observable: A, property: 'a', to: [ [ B, 'x' ] ] },
|
|
377
|
-
// b: { observable: A, property: 'b', to: [ [ B, 'y' ] ] },
|
|
378
|
-
// c: { observable: A, property: 'c', to: [ [ B, 'x' ] ] }
|
|
379
|
-
// } )
|
|
380
|
-
//
|
|
381
|
-
// A.bind( 'd' ).to( B, 'z' ).to( C, 'w' ).as( callback );
|
|
382
|
-
// console.log( A._boundProperties );
|
|
383
|
-
//
|
|
384
|
-
// Map( {
|
|
385
|
-
// a: { observable: A, property: 'a', to: [ [ B, 'x' ] ] },
|
|
386
|
-
// b: { observable: A, property: 'b', to: [ [ B, 'y' ] ] },
|
|
387
|
-
// c: { observable: A, property: 'c', to: [ [ B, 'x' ] ] },
|
|
388
|
-
// d: { observable: A, property: 'd', to: [ [ B, 'z' ], [ C, 'w' ] ], callback: callback }
|
|
389
|
-
// } )
|
|
390
|
-
//
|
|
391
|
-
// @private
|
|
392
|
-
// @type {Map}
|
|
393
|
-
Object.defineProperty( observable, boundPropertiesSymbol, {
|
|
394
|
-
value: new Map()
|
|
395
|
-
} );
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
// A chaining for {@link module:utils/observablemixin~ObservableMixin#bind} providing `.to()` interface.
|
|
399
|
-
//
|
|
400
|
-
// @private
|
|
401
|
-
// @param {...[Observable|String|Function]} args Arguments of the `.to( args )` binding.
|
|
402
|
-
function bindTo( ...args ) {
|
|
403
|
-
const parsedArgs = parseBindToArgs( ...args );
|
|
404
|
-
const bindingsKeys = Array.from( this._bindings.keys() );
|
|
405
|
-
const numberOfBindings = bindingsKeys.length;
|
|
406
|
-
|
|
407
|
-
// Eliminate A.bind( 'x' ).to( B, C )
|
|
408
|
-
if ( !parsedArgs.callback && parsedArgs.to.length > 1 ) {
|
|
409
|
-
/**
|
|
410
|
-
* Binding multiple observables only possible with callback.
|
|
411
|
-
*
|
|
412
|
-
* @error observable-bind-to-no-callback
|
|
413
|
-
*/
|
|
414
|
-
throw new CKEditorError( 'observable-bind-to-no-callback', this );
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
// Eliminate A.bind( 'x', 'y' ).to( B, callback )
|
|
418
|
-
if ( numberOfBindings > 1 && parsedArgs.callback ) {
|
|
419
|
-
/**
|
|
420
|
-
* Cannot bind multiple properties and use a callback in one binding.
|
|
421
|
-
*
|
|
422
|
-
* @error observable-bind-to-extra-callback
|
|
423
|
-
*/
|
|
424
|
-
throw new CKEditorError(
|
|
425
|
-
'observable-bind-to-extra-callback',
|
|
426
|
-
this
|
|
427
|
-
);
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
parsedArgs.to.forEach( to => {
|
|
431
|
-
// Eliminate A.bind( 'x', 'y' ).to( B, 'a' )
|
|
432
|
-
if ( to.properties.length && to.properties.length !== numberOfBindings ) {
|
|
433
|
-
/**
|
|
434
|
-
* The number of properties must match.
|
|
435
|
-
*
|
|
436
|
-
* @error observable-bind-to-properties-length
|
|
437
|
-
*/
|
|
438
|
-
throw new CKEditorError( 'observable-bind-to-properties-length', this );
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
// When no to.properties specified, observing source properties instead i.e.
|
|
442
|
-
// A.bind( 'x', 'y' ).to( B ) -> Observe B.x and B.y
|
|
443
|
-
if ( !to.properties.length ) {
|
|
444
|
-
to.properties = this._bindProperties;
|
|
445
|
-
}
|
|
446
|
-
} );
|
|
447
|
-
|
|
448
|
-
this._to = parsedArgs.to;
|
|
449
|
-
|
|
450
|
-
// Fill {@link BindChain#_bindings} with callback. When the callback is set there's only one binding.
|
|
451
|
-
if ( parsedArgs.callback ) {
|
|
452
|
-
this._bindings.get( bindingsKeys[ 0 ] ).callback = parsedArgs.callback;
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
attachBindToListeners( this._observable, this._to );
|
|
456
|
-
|
|
457
|
-
// Update observable._boundProperties and observable._boundObservables.
|
|
458
|
-
updateBindToBound( this );
|
|
459
|
-
|
|
460
|
-
// Set initial values of bound properties.
|
|
461
|
-
this._bindProperties.forEach( propertyName => {
|
|
462
|
-
updateBoundObservableProperty( this._observable, propertyName );
|
|
463
|
-
} );
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
// Binds to an attribute in a set of iterable observables.
|
|
467
|
-
//
|
|
468
|
-
// @private
|
|
469
|
-
// @param {Array.<Observable>} observables
|
|
470
|
-
// @param {String} attribute
|
|
471
|
-
// @param {Function} callback
|
|
472
|
-
function bindToMany( observables, attribute, callback ) {
|
|
473
|
-
if ( this._bindings.size > 1 ) {
|
|
474
|
-
/**
|
|
475
|
-
* Binding one attribute to many observables only possible with one attribute.
|
|
476
|
-
*
|
|
477
|
-
* @error observable-bind-to-many-not-one-binding
|
|
478
|
-
*/
|
|
479
|
-
throw new CKEditorError( 'observable-bind-to-many-not-one-binding', this );
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
this.to(
|
|
483
|
-
// Bind to #attribute of each observable...
|
|
484
|
-
...getBindingTargets( observables, attribute ),
|
|
485
|
-
// ...using given callback to parse attribute values.
|
|
486
|
-
callback
|
|
487
|
-
);
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
// Returns an array of binding components for
|
|
491
|
-
// {@link Observable#bind} from a set of iterable observables.
|
|
492
|
-
//
|
|
493
|
-
// @param {Array.<Observable>} observables
|
|
494
|
-
// @param {String} attribute
|
|
495
|
-
// @returns {Array.<String|Observable>}
|
|
496
|
-
function getBindingTargets( observables, attribute ) {
|
|
497
|
-
const observableAndAttributePairs = observables.map( observable => [ observable, attribute ] );
|
|
498
|
-
|
|
499
|
-
// Merge pairs to one-dimension array of observables and attributes.
|
|
500
|
-
return Array.prototype.concat.apply( [], observableAndAttributePairs );
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
// Check if all entries of the array are of `String` type.
|
|
504
|
-
//
|
|
505
|
-
// @private
|
|
506
|
-
// @param {Array} arr An array to be checked.
|
|
507
|
-
// @returns {Boolean}
|
|
508
|
-
function isStringArray( arr ) {
|
|
509
|
-
return arr.every( a => typeof a == 'string' );
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
// Parses and validates {@link Observable#bind}`.to( args )` arguments and returns
|
|
513
|
-
// an object with a parsed structure. For example
|
|
514
|
-
//
|
|
515
|
-
// A.bind( 'x' ).to( B, 'a', C, 'b', call );
|
|
516
|
-
//
|
|
517
|
-
// becomes
|
|
518
|
-
//
|
|
519
|
-
// {
|
|
520
|
-
// to: [
|
|
521
|
-
// { observable: B, properties: [ 'a' ] },
|
|
522
|
-
// { observable: C, properties: [ 'b' ] },
|
|
523
|
-
// ],
|
|
524
|
-
// callback: call
|
|
525
|
-
// }
|
|
526
|
-
//
|
|
527
|
-
// @private
|
|
528
|
-
// @param {...*} args Arguments of {@link Observable#bind}`.to( args )`.
|
|
529
|
-
// @returns {Object}
|
|
530
|
-
function parseBindToArgs( ...args ) {
|
|
531
|
-
// Eliminate A.bind( 'x' ).to()
|
|
532
|
-
if ( !args.length ) {
|
|
533
|
-
/**
|
|
534
|
-
* Invalid argument syntax in `to()`.
|
|
535
|
-
*
|
|
536
|
-
* @error observable-bind-to-parse-error
|
|
537
|
-
*/
|
|
538
|
-
throw new CKEditorError( 'observable-bind-to-parse-error', null );
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
const parsed = { to: [] };
|
|
542
|
-
let lastObservable;
|
|
543
|
-
|
|
544
|
-
if ( typeof args[ args.length - 1 ] == 'function' ) {
|
|
545
|
-
parsed.callback = args.pop();
|
|
546
|
-
}
|
|
547
|
-
|
|
548
|
-
args.forEach( a => {
|
|
549
|
-
if ( typeof a == 'string' ) {
|
|
550
|
-
lastObservable.properties.push( a );
|
|
551
|
-
} else if ( typeof a == 'object' ) {
|
|
552
|
-
lastObservable = { observable: a, properties: [] };
|
|
553
|
-
parsed.to.push( lastObservable );
|
|
554
|
-
} else {
|
|
555
|
-
throw new CKEditorError( 'observable-bind-to-parse-error', null );
|
|
556
|
-
}
|
|
557
|
-
} );
|
|
558
|
-
|
|
559
|
-
return parsed;
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
// Synchronizes {@link module:utils/observablemixin#_boundObservables} with {@link Binding}.
|
|
563
|
-
//
|
|
564
|
-
// @private
|
|
565
|
-
// @param {Binding} binding A binding to store in {@link Observable#_boundObservables}.
|
|
566
|
-
// @param {Observable} toObservable A observable, which is a new component of `binding`.
|
|
567
|
-
// @param {String} toPropertyName A name of `toObservable`'s property, a new component of the `binding`.
|
|
568
|
-
function updateBoundObservables( observable, binding, toObservable, toPropertyName ) {
|
|
569
|
-
const boundObservables = observable[ boundObservablesSymbol ];
|
|
570
|
-
const bindingsToObservable = boundObservables.get( toObservable );
|
|
571
|
-
const bindings = bindingsToObservable || {};
|
|
572
|
-
|
|
573
|
-
if ( !bindings[ toPropertyName ] ) {
|
|
574
|
-
bindings[ toPropertyName ] = new Set();
|
|
575
|
-
}
|
|
576
|
-
|
|
577
|
-
// Pass the binding to a corresponding Set in `observable._boundObservables`.
|
|
578
|
-
bindings[ toPropertyName ].add( binding );
|
|
579
|
-
|
|
580
|
-
if ( !bindingsToObservable ) {
|
|
581
|
-
boundObservables.set( toObservable, bindings );
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
// Synchronizes {@link Observable#_boundProperties} and {@link Observable#_boundObservables}
|
|
586
|
-
// with {@link BindChain}.
|
|
587
|
-
//
|
|
588
|
-
// Assuming the following binding being created
|
|
589
|
-
//
|
|
590
|
-
// A.bind( 'a', 'b' ).to( B, 'x', 'y' );
|
|
591
|
-
//
|
|
592
|
-
// the following bindings were initialized by {@link Observable#bind} in {@link BindChain#_bindings}:
|
|
593
|
-
//
|
|
594
|
-
// {
|
|
595
|
-
// a: { observable: A, property: 'a', to: [] },
|
|
596
|
-
// b: { observable: A, property: 'b', to: [] },
|
|
597
|
-
// }
|
|
598
|
-
//
|
|
599
|
-
// Iterate over all bindings in this chain and fill their `to` properties with
|
|
600
|
-
// corresponding to( ... ) arguments (components of the binding), so
|
|
601
|
-
//
|
|
602
|
-
// {
|
|
603
|
-
// a: { observable: A, property: 'a', to: [ B, 'x' ] },
|
|
604
|
-
// b: { observable: A, property: 'b', to: [ B, 'y' ] },
|
|
605
|
-
// }
|
|
606
|
-
//
|
|
607
|
-
// Then update the structure of {@link Observable#_boundObservables} with updated
|
|
608
|
-
// binding, so it becomes:
|
|
609
|
-
//
|
|
610
|
-
// Map( {
|
|
611
|
-
// B: {
|
|
612
|
-
// x: Set( [
|
|
613
|
-
// { observable: A, property: 'a', to: [ [ B, 'x' ] ] }
|
|
614
|
-
// ] ),
|
|
615
|
-
// y: Set( [
|
|
616
|
-
// { observable: A, property: 'b', to: [ [ B, 'y' ] ] },
|
|
617
|
-
// ] )
|
|
618
|
-
// }
|
|
619
|
-
// } )
|
|
620
|
-
//
|
|
621
|
-
// @private
|
|
622
|
-
// @param {BindChain} chain The binding initialized by {@link Observable#bind}.
|
|
623
|
-
function updateBindToBound( chain ) {
|
|
624
|
-
let toProperty;
|
|
625
|
-
|
|
626
|
-
chain._bindings.forEach( ( binding, propertyName ) => {
|
|
627
|
-
// Note: For a binding without a callback, this will run only once
|
|
628
|
-
// like in A.bind( 'x', 'y' ).to( B, 'a', 'b' )
|
|
629
|
-
// TODO: ES6 destructuring.
|
|
630
|
-
chain._to.forEach( to => {
|
|
631
|
-
toProperty = to.properties[ binding.callback ? 0 : chain._bindProperties.indexOf( propertyName ) ];
|
|
632
|
-
|
|
633
|
-
binding.to.push( [ to.observable, toProperty ] );
|
|
634
|
-
updateBoundObservables( chain._observable, binding, to.observable, toProperty );
|
|
635
|
-
} );
|
|
636
|
-
} );
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
// Updates an property of a {@link Observable} with a value
|
|
640
|
-
// determined by an entry in {@link Observable#_boundProperties}.
|
|
641
|
-
//
|
|
642
|
-
// @private
|
|
643
|
-
// @param {Observable} observable A observable which property is to be updated.
|
|
644
|
-
// @param {String} propertyName An property to be updated.
|
|
645
|
-
function updateBoundObservableProperty( observable, propertyName ) {
|
|
646
|
-
const boundProperties = observable[ boundPropertiesSymbol ];
|
|
647
|
-
const binding = boundProperties.get( propertyName );
|
|
648
|
-
let propertyValue;
|
|
649
|
-
|
|
650
|
-
// When a binding with callback is created like
|
|
651
|
-
//
|
|
652
|
-
// A.bind( 'a' ).to( B, 'b', C, 'c', callback );
|
|
653
|
-
//
|
|
654
|
-
// collect B.b and C.c, then pass them to callback to set A.a.
|
|
655
|
-
if ( binding.callback ) {
|
|
656
|
-
propertyValue = binding.callback.apply( observable, binding.to.map( to => to[ 0 ][ to[ 1 ] ] ) );
|
|
657
|
-
} else {
|
|
658
|
-
propertyValue = binding.to[ 0 ];
|
|
659
|
-
propertyValue = propertyValue[ 0 ][ propertyValue[ 1 ] ];
|
|
660
|
-
}
|
|
661
|
-
|
|
662
|
-
if ( Object.prototype.hasOwnProperty.call( observable, propertyName ) ) {
|
|
663
|
-
observable[ propertyName ] = propertyValue;
|
|
664
|
-
} else {
|
|
665
|
-
observable.set( propertyName, propertyValue );
|
|
666
|
-
}
|
|
667
|
-
}
|
|
668
|
-
|
|
669
|
-
// Starts listening to changes in {@link BindChain._to} observables to update
|
|
670
|
-
// {@link BindChain._observable} {@link BindChain._bindProperties}. Also sets the
|
|
671
|
-
// initial state of {@link BindChain._observable}.
|
|
672
|
-
//
|
|
673
|
-
// @private
|
|
674
|
-
// @param {BindChain} chain The chain initialized by {@link Observable#bind}.
|
|
675
|
-
function attachBindToListeners( observable, toBindings ) {
|
|
676
|
-
toBindings.forEach( to => {
|
|
677
|
-
const boundObservables = observable[ boundObservablesSymbol ];
|
|
678
|
-
let bindings;
|
|
679
|
-
|
|
680
|
-
// If there's already a chain between the observables (`observable` listens to
|
|
681
|
-
// `to.observable`), there's no need to create another `change` event listener.
|
|
682
|
-
if ( !boundObservables.get( to.observable ) ) {
|
|
683
|
-
observable.listenTo( to.observable, 'change', ( evt, propertyName ) => {
|
|
684
|
-
bindings = boundObservables.get( to.observable )[ propertyName ];
|
|
685
|
-
|
|
686
|
-
// Note: to.observable will fire for any property change, react
|
|
687
|
-
// to changes of properties which are bound only.
|
|
688
|
-
if ( bindings ) {
|
|
689
|
-
bindings.forEach( binding => {
|
|
690
|
-
updateBoundObservableProperty( observable, binding.property );
|
|
691
|
-
} );
|
|
692
|
-
}
|
|
693
|
-
} );
|
|
694
|
-
}
|
|
695
|
-
} );
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
/**
|
|
699
|
-
* An interface which adds "observable properties" and data binding functionality.
|
|
700
|
-
*
|
|
701
|
-
* Can be easily implemented by a class by mixing the {@link module:utils/observablemixin~ObservableMixin} mixin.
|
|
702
|
-
*
|
|
703
|
-
* Read more about the usage of this interface in the:
|
|
704
|
-
* * {@glink framework/guides/architecture/core-editor-architecture#event-system-and-observables Event system and observables}
|
|
705
|
-
* section of the {@glink framework/guides/architecture/core-editor-architecture Core editor architecture} guide,
|
|
706
|
-
* * {@glink framework/guides/deep-dive/observables Observables deep dive} guide.
|
|
707
|
-
*
|
|
708
|
-
* @interface Observable
|
|
709
|
-
* @extends module:utils/emittermixin~Emitter
|
|
710
|
-
*/
|
|
711
|
-
|
|
712
|
-
/**
|
|
713
|
-
* Fired when a property changed value.
|
|
714
|
-
*
|
|
715
|
-
* observable.set( 'prop', 1 );
|
|
716
|
-
*
|
|
717
|
-
* observable.on( 'change:prop', ( evt, propertyName, newValue, oldValue ) => {
|
|
718
|
-
* console.log( `${ propertyName } has changed from ${ oldValue } to ${ newValue }` );
|
|
719
|
-
* } );
|
|
720
|
-
*
|
|
721
|
-
* observable.prop = 2; // -> 'prop has changed from 1 to 2'
|
|
722
|
-
*
|
|
723
|
-
* @event change:{property}
|
|
724
|
-
* @param {String} name The property name.
|
|
725
|
-
* @param {*} value The new property value.
|
|
726
|
-
* @param {*} oldValue The previous property value.
|
|
727
|
-
*/
|
|
728
|
-
|
|
729
|
-
/**
|
|
730
|
-
* Fired when a property value is going to be set but is not set yet (before the `change` event is fired).
|
|
731
|
-
*
|
|
732
|
-
* You can control the final value of the property by using
|
|
733
|
-
* the {@link module:utils/eventinfo~EventInfo#return event's `return` property}.
|
|
734
|
-
*
|
|
735
|
-
* observable.set( 'prop', 1 );
|
|
736
|
-
*
|
|
737
|
-
* observable.on( 'set:prop', ( evt, propertyName, newValue, oldValue ) => {
|
|
738
|
-
* console.log( `Value is going to be changed from ${ oldValue } to ${ newValue }` );
|
|
739
|
-
* console.log( `Current property value is ${ observable[ propertyName ] }` );
|
|
740
|
-
*
|
|
741
|
-
* // Let's override the value.
|
|
742
|
-
* evt.return = 3;
|
|
743
|
-
* } );
|
|
744
|
-
*
|
|
745
|
-
* observable.on( 'change:prop', ( evt, propertyName, newValue, oldValue ) => {
|
|
746
|
-
* console.log( `Value has changed from ${ oldValue } to ${ newValue }` );
|
|
747
|
-
* } );
|
|
748
|
-
*
|
|
749
|
-
* observable.prop = 2; // -> 'Value is going to be changed from 1 to 2'
|
|
750
|
-
* // -> 'Current property value is 1'
|
|
751
|
-
* // -> 'Value has changed from 1 to 3'
|
|
752
|
-
*
|
|
753
|
-
* **Note:** The event is fired even when the new value is the same as the old value.
|
|
754
|
-
*
|
|
755
|
-
* @event set:{property}
|
|
756
|
-
* @param {String} name The property name.
|
|
757
|
-
* @param {*} value The new property value.
|
|
758
|
-
* @param {*} oldValue The previous property value.
|
|
759
|
-
*/
|
|
760
|
-
|
|
761
|
-
/**
|
|
762
|
-
* Creates and sets the value of an observable property of this object. Such a property becomes a part
|
|
763
|
-
* of the state and is observable.
|
|
764
|
-
*
|
|
765
|
-
* It accepts also a single object literal containing key/value pairs with properties to be set.
|
|
766
|
-
*
|
|
767
|
-
* This method throws the `observable-set-cannot-override` error if the observable instance already
|
|
768
|
-
* has a property with the given property name. This prevents from mistakenly overriding existing
|
|
769
|
-
* properties and methods, but means that `foo.set( 'bar', 1 )` may be slightly slower than `foo.bar = 1`.
|
|
770
|
-
*
|
|
771
|
-
* @method #set
|
|
772
|
-
* @param {String|Object} name The property's name or object with `name=>value` pairs.
|
|
773
|
-
* @param {*} [value] The property's value (if `name` was passed in the first parameter).
|
|
774
|
-
*/
|
|
775
|
-
|
|
776
|
-
/**
|
|
777
|
-
* Binds {@link #set observable properties} to other objects implementing the
|
|
778
|
-
* {@link module:utils/observablemixin~Observable} interface.
|
|
779
|
-
*
|
|
780
|
-
* Read more in the {@glink framework/guides/deep-dive/observables#property-bindings dedicated guide}
|
|
781
|
-
* covering the topic of property bindings with some additional examples.
|
|
782
|
-
*
|
|
783
|
-
* Consider two objects: a `button` and an associated `command` (both `Observable`).
|
|
784
|
-
*
|
|
785
|
-
* A simple property binding could be as follows:
|
|
786
|
-
*
|
|
787
|
-
* button.bind( 'isEnabled' ).to( command, 'isEnabled' );
|
|
788
|
-
*
|
|
789
|
-
* or even shorter:
|
|
790
|
-
*
|
|
791
|
-
* button.bind( 'isEnabled' ).to( command );
|
|
792
|
-
*
|
|
793
|
-
* which works in the following way:
|
|
794
|
-
*
|
|
795
|
-
* * `button.isEnabled` **instantly equals** `command.isEnabled`,
|
|
796
|
-
* * whenever `command.isEnabled` changes, `button.isEnabled` will immediately reflect its value.
|
|
797
|
-
*
|
|
798
|
-
* **Note**: To release the binding, use {@link module:utils/observablemixin~Observable#unbind}.
|
|
799
|
-
*
|
|
800
|
-
* You can also "rename" the property in the binding by specifying the new name in the `to()` chain:
|
|
801
|
-
*
|
|
802
|
-
* button.bind( 'isEnabled' ).to( command, 'isWorking' );
|
|
803
|
-
*
|
|
804
|
-
* It is possible to bind more than one property at a time to shorten the code:
|
|
805
|
-
*
|
|
806
|
-
* button.bind( 'isEnabled', 'value' ).to( command );
|
|
807
|
-
*
|
|
808
|
-
* which corresponds to:
|
|
809
|
-
*
|
|
810
|
-
* button.bind( 'isEnabled' ).to( command );
|
|
811
|
-
* button.bind( 'value' ).to( command );
|
|
812
|
-
*
|
|
813
|
-
* The binding can include more than one observable, combining multiple data sources in a custom callback:
|
|
814
|
-
*
|
|
815
|
-
* button.bind( 'isEnabled' ).to( command, 'isEnabled', ui, 'isVisible',
|
|
816
|
-
* ( isCommandEnabled, isUIVisible ) => isCommandEnabled && isUIVisible );
|
|
817
|
-
*
|
|
818
|
-
* Using a custom callback allows processing the value before passing it to the target property:
|
|
819
|
-
*
|
|
820
|
-
* button.bind( 'isEnabled' ).to( command, 'value', value => value === 'heading1' );
|
|
821
|
-
*
|
|
822
|
-
* It is also possible to bind to the same property in an array of observables.
|
|
823
|
-
* To bind a `button` to multiple commands (also `Observables`) so that each and every one of them
|
|
824
|
-
* must be enabled for the button to become enabled, use the following code:
|
|
825
|
-
*
|
|
826
|
-
* button.bind( 'isEnabled' ).toMany( [ commandA, commandB, commandC ], 'isEnabled',
|
|
827
|
-
* ( isAEnabled, isBEnabled, isCEnabled ) => isAEnabled && isBEnabled && isCEnabled );
|
|
828
|
-
*
|
|
829
|
-
* @method #bind
|
|
830
|
-
* @param {...String} bindProperties Observable properties that will be bound to other observable(s).
|
|
831
|
-
* @returns {Object} The bind chain with the `to()` and `toMany()` methods.
|
|
832
|
-
*/
|
|
833
|
-
|
|
834
|
-
/**
|
|
835
|
-
* Removes the binding created with {@link #bind}.
|
|
836
|
-
*
|
|
837
|
-
* // Removes the binding for the 'a' property.
|
|
838
|
-
* A.unbind( 'a' );
|
|
839
|
-
*
|
|
840
|
-
* // Removes bindings for all properties.
|
|
841
|
-
* A.unbind();
|
|
842
|
-
*
|
|
843
|
-
* @method #unbind
|
|
844
|
-
* @param {...String} [unbindProperties] Observable properties to be unbound. All the bindings will
|
|
845
|
-
* be released if no properties are provided.
|
|
846
|
-
*/
|
|
847
|
-
|
|
848
|
-
/**
|
|
849
|
-
* Turns the given methods of this object into event-based ones. This means that the new method will fire an event
|
|
850
|
-
* (named after the method) and the original action will be plugged as a listener to that event.
|
|
851
|
-
*
|
|
852
|
-
* Read more in the {@glink framework/guides/deep-dive/observables#decorating-object-methods dedicated guide}
|
|
853
|
-
* covering the topic of decorating methods with some additional examples.
|
|
854
|
-
*
|
|
855
|
-
* Decorating the method does not change its behavior (it only adds an event),
|
|
856
|
-
* but it allows to modify it later on by listening to the method's event.
|
|
857
|
-
*
|
|
858
|
-
* For example, to cancel the method execution the event can be {@link module:utils/eventinfo~EventInfo#stop stopped}:
|
|
859
|
-
*
|
|
860
|
-
* class Foo {
|
|
861
|
-
* constructor() {
|
|
862
|
-
* this.decorate( 'method' );
|
|
863
|
-
* }
|
|
864
|
-
*
|
|
865
|
-
* method() {
|
|
866
|
-
* console.log( 'called!' );
|
|
867
|
-
* }
|
|
868
|
-
* }
|
|
869
|
-
*
|
|
870
|
-
* const foo = new Foo();
|
|
871
|
-
* foo.on( 'method', ( evt ) => {
|
|
872
|
-
* evt.stop();
|
|
873
|
-
* }, { priority: 'high' } );
|
|
874
|
-
*
|
|
875
|
-
* foo.method(); // Nothing is logged.
|
|
876
|
-
*
|
|
877
|
-
*
|
|
878
|
-
* **Note**: The high {@link module:utils/priorities~PriorityString priority} listener
|
|
879
|
-
* has been used to execute this particular callback before the one which calls the original method
|
|
880
|
-
* (which uses the "normal" priority).
|
|
881
|
-
*
|
|
882
|
-
* It is also possible to change the returned value:
|
|
883
|
-
*
|
|
884
|
-
* foo.on( 'method', ( evt ) => {
|
|
885
|
-
* evt.return = 'Foo!';
|
|
886
|
-
* } );
|
|
887
|
-
*
|
|
888
|
-
* foo.method(); // -> 'Foo'
|
|
889
|
-
*
|
|
890
|
-
* Finally, it is possible to access and modify the arguments the method is called with:
|
|
891
|
-
*
|
|
892
|
-
* method( a, b ) {
|
|
893
|
-
* console.log( `${ a }, ${ b }` );
|
|
894
|
-
* }
|
|
895
|
-
*
|
|
896
|
-
* // ...
|
|
897
|
-
*
|
|
898
|
-
* foo.on( 'method', ( evt, args ) => {
|
|
899
|
-
* args[ 0 ] = 3;
|
|
900
|
-
*
|
|
901
|
-
* console.log( args[ 1 ] ); // -> 2
|
|
902
|
-
* }, { priority: 'high' } );
|
|
903
|
-
*
|
|
904
|
-
* foo.method( 1, 2 ); // -> '3, 2'
|
|
905
|
-
*
|
|
906
|
-
* @method #decorate
|
|
907
|
-
* @param {String} methodName Name of the method to decorate.
|
|
908
|
-
*/
|