Skip to content

Commit cb82abc

Browse files
igorMSoaresigorMSoares
committed
docs: update documentation
1 parent 90750fd commit cb82abc

20 files changed

+1161
-204
lines changed

‎docs/animate.md‎

Lines changed: 106 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,20 @@ Handles all the animation process
1414
- [animate(element, action, id, opts)](#animate-element-action-id-opts)
1515
- [preset(el, args)](#preset-el-args)
1616
- [isEnabled(element)](#isenabled-element) ⇒ <code>boolean</code>
17+
- [removeCustomCssProperties(element)](#removecustomcssproperties-element)
18+
- [setCssProperty(element, property, value)](#setcssproperty-element-property-value)
19+
- [updateCssProperties(element, opts)](#updatecssproperties-element-opts)
20+
- [updateDefaultConfig(opts)](#updatedefaultconfig-opts)
21+
- [resetDefaultConfig()](#resetdefaultconfig)
1722

1823
- _inner_
1924

25+
- [configurations](#configurations) : <code>Object</code>
26+
- [configHandler()](#confighandler)
27+
- [CONFIG](#config) : <code>Object</code>
2028
- [DURATION_REGEX](#duration-regex) : <code>RegExp</code>
2129
- [CALLBACK_TRACKER](#callback-tracker) : <code>Object</code>
2230
- [TARGETS_STACK](#targets-stack) : <code>Object</code>
23-
- [removeCustomCssProperties(element)](#removecustomcssproperties-element)
24-
- [setCssProperty(element, property, value)](#setcssproperty-element-property-value)
25-
- [updateCssProperties(element, opts)](#updatecssproperties-element-opts)
2631
- [getTargetSelector(eventTarget)](#gettargetselector-eventtarget) ⇒ <code>string</code>
2732
- [getTimeInMs(value)](#gettimeinms-value) ⇒ <code>number</code>
2833
- [getTotalAnimTime(element)](#gettotalanimtime-element) ⇒ <code>Object</code>
@@ -42,7 +47,7 @@ Handles all the animation process
4247

4348
Initiate the event listener with the animation
4449

45-
**Kind**: static function of [<code>animate</code>](#animate)
50+
**Kind**: static function of [<code>animate</code>](#animate-js)
4651

4752
**See**:
4853

@@ -59,7 +64,8 @@ Initiate the event listener with the animation
5964

6065
Handles all the animation process
6166

62-
**Kind**: static function of [<code>animate</code>](#animate)
67+
**Kind**: static function of [<code>animate</code>](#animate-js)
68+
6369
**See**:
6470

6571
- [globals.VISIBILITY_ANIMS_ID](globals.html#visibility-anims-id)
@@ -77,7 +83,7 @@ Handles all the animation process
7783
Sets the CSS properties customized by the user,
7884
prior to the begining of the animation
7985

80-
**Kind**: static function of [<code>animate</code>](#animate)
86+
**Kind**: static function of [<code>animate</code>](#animate-js)
8187

8288
| Param | Type | Description |
8389
| ----- | ------------------------ | ------------------------------------------------------------------ |
@@ -88,18 +94,51 @@ prior to the begining of the animation
8894

8995
Verifies if an element is already being animated or not
9096

91-
**Kind**: static function of [<code>animate</code>](#animate)
97+
**Kind**: static function of [<code>animate</code>](#animate-js)
98+
9299
**Returns**: True if the element is not currently being animated
93100

94101
| Param | Type | Description |
95102
| ------- | ------------------------ | ------------------------ |
96103
| element | <code>HTMLElement</code> | The DOM element to check |
97104

105+
### configurations : <code>Object.&lt;string, any&gt;</code>
106+
107+
Contains the default value for each custom option.
108+
Those values can be overwritten by the user by calling jsCssAnimations.config()
109+
and passing new default values for all the animations.
110+
111+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
112+
113+
**See**: [js-css-animations.config()](js-css-animations.html#config-opts)
114+
115+
### configHandler
116+
117+
ProxyHandler passed to the _CONFIG_ object to ensure that
118+
if an option is not customized by the user, the default value set
119+
in _configurations.default_ will be returned instead.
120+
121+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
122+
123+
**See**
124+
125+
- [CONFIG](#config)
126+
- [configurations](#configurations)
127+
128+
### CONFIG : <code>Object.&lt;string, any&gt;</code>
129+
130+
Object that handles configurations, either customized by the user
131+
or default values defined in _configurations.default_ object
132+
133+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
134+
135+
**See**: [configurations](#configurations)
136+
98137
## DURATION_REGEX : <code>RegExp</code>
99138

100139
Matches duration or delay CSS properties values
101140

102-
**Kind**: inner constant of [<code>animate</code>](#animate)
141+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
103142

104143
## CALLBACK_TRACKER : <code>Object</code>
105144

@@ -109,7 +148,7 @@ multiple times if multiple elements are being animated by a single trigger.
109148
When an element triggers an animation, no matter how many elements are being animated,
110149
the start() and complete() callbacks should each be executed only once.
111150

112-
**Kind**: inner constant of [<code>animate</code>](#animate)
151+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
113152

114153
- [CALLBACK_TRACKER](#callback-tracker) : <code>Object</code>
115154
- [.init(trigger)](#callback-tracker-init-trigger)
@@ -142,18 +181,18 @@ Keeps track of all the targets being animated to ensure that the callback tracke
142181
will be removed only when all the targets have been animated. Also ensures that
143182
all targets will be re-enabled only when all targets have already been animated.
144183

145-
**Kind**: inner constant of [<code>animate</code>](#animate)
184+
**Kind**: inner constant of [<code>animate</code>](#animate-js)
146185

147-
- [TARGETS_STACK](#TARGETS_STACK) : <code>Object</code>
148-
- [.add(elem, trigger)](#TARGETS_STACK.add)
149-
- [.remove(trigger)](#TARGETS_STACK.remove)
150-
- [.get(trigger)](#TARGETS_STACK.get) ⇒ <code>Array.&lt;HTMLElement&gt;</code>
186+
- [TARGETS_STACK](#targets-stack) : <code>Object</code>
187+
- [.add(elem, trigger)](#targets-stack-add-elem-trigger)
188+
- [.remove(trigger)](#targets-stack-remove-trigger)
189+
- [.get(trigger)](#targets-stack-get-trigger) ⇒ <code>Array.&lt;HTMLElement&gt;</code>
151190

152191
### TARGETS_STACK.add(elem, trigger)
153192

154193
Adds an element to the stack
155194

156-
**Kind**: static function of [<code>TARGETS_STACK</code>](#TARGETS_STACK)
195+
**Kind**: static function of [<code>TARGETS_STACK</code>](#targets-stack)
157196

158197
| Param | Type | Description |
159198
| ------- | ------------------------ | --------------------------------------------------------- |
@@ -164,7 +203,7 @@ Adds an element to the stack
164203

165204
Removes from the stack all the elements animated by the same trigger button
166205

167-
**Kind**: static function of [<code>TARGETS_STACK</code>](#TARGETS_STACK)
206+
**Kind**: static function of [<code>TARGETS_STACK</code>](#targets-stack)
168207

169208
| Param | Type | Description |
170209
| ------- | ------------------- | --------------------------------------------------------- |
@@ -174,18 +213,41 @@ Removes from the stack all the elements animated by the same trigger button
174213

175214
Gets all elements included in the stack for a given trigger button
176215

177-
**Kind**: static function of [<code>TARGETS_STACK</code>](#TARGETS_STACK)
216+
**Kind**: static function of [<code>TARGETS_STACK</code>](#targets-stack)
217+
178218
**Returns**: An array of elements that have been animated by the same trigger button
179219

180220
| Param | Type | Description |
181221
| ------- | ------------------- | --------------------------------------------------------- |
182222
| trigger | <code>string</code> | CSS selector for the element that triggered the animation |
183223

224+
### updateDefaultConfig(opts)
225+
226+
Customize the default animations configurations by overwriting
227+
the _CONFIG_ values
228+
229+
**Kind**: inner method of [<code>animate</code>](#animate-js)
230+
231+
**See**: [CONFIG](#config)
232+
233+
| Param | Type | Description |
234+
| ----- | ------------------- | -------------------------------------- |
235+
| opts | <code>Object</code> | All the options customized by the user |
236+
237+
### resetDefaultConfig()
238+
239+
Reset the configurations to its default values
240+
by removing from _CONFIG_ all options customized by the user
241+
242+
**Kind**: inner method of [<code>animate</code>](#animate-js)
243+
244+
**See**: [CONFIG](#config)
245+
184246
## removeCustomCssProperties(element)
185247

186248
Removes the CSS properties customized by the user
187249

188-
**Kind**: static function of [<code>animate</code>](#animate)
250+
**Kind**: static function of [<code>animate</code>](#animate-js)
189251

190252
| Param | Type | Description |
191253
| ------- | ------------------------ | ---------------------------------------------- |
@@ -195,7 +257,7 @@ Removes the CSS properties customized by the user
195257

196258
Sets an inline CSS property
197259

198-
**Kind**: static function of [<code>animate</code>](#animate)
260+
**Kind**: static function of [<code>animate</code>](#animate-js)
199261

200262
**See**: [globals.PROPERTY_NAMES](globals.html#property-names)
201263

@@ -209,7 +271,7 @@ Sets an inline CSS property
209271

210272
Sets the CSS properties customized by the user in the animation function's options
211273

212-
**Kind**: inner method of [<code>animate</code>](#animate)
274+
**Kind**: static function of [<code>animate</code>](#animate-js)
213275

214276
| Param | Type | Description |
215277
| ------- | ------------------------------------------ | --------------------------------------------------------------------- |
@@ -225,7 +287,8 @@ will bubbles up untill the attribute is found.
225287
If no attribute is found, an empty string is returned and so
226288
no element will be selected to be animated
227289

228-
**Kind**: inner method of [<code>animate</code>](#animate)
290+
**Kind**: inner method of [<code>animate</code>](#animate-js)
291+
229292
**Returns**: The CSS selector for the animation target(s) or an empty string
230293

231294
| Param | Type | Description |
@@ -236,7 +299,8 @@ no element will be selected to be animated
236299

237300
Removes the unit from the duration or delay and returns the value in milliseconds
238301

239-
**Kind**: inner method of [<code>animate</code>](#animate)
302+
**Kind**: inner method of [<code>animate</code>](#animate-js)
303+
240304
**Returns**: The duration or delay in milliseconds
241305

242306
| Param | Type | Description |
@@ -247,7 +311,8 @@ Removes the unit from the duration or delay and returns the value in millisecond
247311

248312
Returns an object with the duration and delay time in milliseconds
249313

250-
**Kind**: inner method of [<code>animate</code>](#animate)
314+
**Kind**: inner method of [<code>animate</code>](#animate-js)
315+
251316
**Returns**: Both the duration and delay, in milliseconds
252317

253318
| Param | Type | Description |
@@ -258,7 +323,8 @@ Returns an object with the duration and delay time in milliseconds
258323

259324
Returns true if the animation type is 'visibility'
260325

261-
**Kind**: inner method of [<code>animate</code>](#animate)
326+
**Kind**: inner method of [<code>animate</code>](#animate-js)
327+
262328
**Returns**: True if animation type is 'visibility'. False otherwise.
263329

264330
| Param | Type | Description |
@@ -269,7 +335,8 @@ Returns true if the animation type is 'visibility'
269335

270336
Returns true if the animation type is 'motion'
271337

272-
**Kind**: inner method of [<code>animate</code>](#animate)
338+
**Kind**: inner method of [<code>animate</code>](#animate-js)
339+
273340
**Returns**: True if animation type is 'motion'. False otherwise.
274341

275342
| Param | Type | Description |
@@ -280,7 +347,7 @@ Returns true if the animation type is 'motion'
280347

281348
Removes the current motion animation CSS class from the element
282349

283-
**Kind**: inner method of [<code>animate</code>](#animate)
350+
**Kind**: inner method of [<code>animate</code>](#animate-js)
284351

285352
| Param | Type | Description |
286353
| ------- | ------------------------ | ------------------------------ |
@@ -291,7 +358,7 @@ Removes the current motion animation CSS class from the element
291358
Sets an attribute to indicate that the element is currently being animated
292359
and so can not perform any other animations
293360

294-
**Kind**: inner method of [<code>animate</code>](#animate)
361+
**Kind**: inner method of [<code>animate</code>](#animate-js)
295362

296363
| Param | Type | Description |
297364
| ------- | ------------------------ | ------------------------------ |
@@ -301,7 +368,7 @@ and so can not perform any other animations
301368

302369
Removes the attribute that indicates that an element is currently being animated
303370

304-
**Kind**: inner method of [<code>animate</code>](#animate)
371+
**Kind**: inner method of [<code>animate</code>](#animate-js)
305372

306373
| Param | Type |
307374
| ------- | ------------------------ |
@@ -311,7 +378,8 @@ Removes the attribute that indicates that an element is currently being animated
311378

312379
Verifies if an element has defined an iteration CSS property
313380

314-
**Kind**: inner method of [<code>animate</code>](#animate)
381+
**Kind**: inner method of [<code>animate</code>](#animate-js)
382+
315383
**Returns**: True if the element has an iteration CSS property set, False otherwise
316384

317385
| Param | Type |
@@ -324,7 +392,7 @@ Sets the parent element dimensions, if needed.
324392

325393
Removes the collapsed or hidden class from the element, when necessary
326394

327-
**Kind**: inner method of [<code>animate</code>](#animate)
395+
**Kind**: inner method of [<code>animate</code>](#animate-js)
328396

329397
| Param | Type | Description |
330398
| ------- | ------------------------ | ------------------------------ |
@@ -336,7 +404,7 @@ Removes the collapsed or hidden class from the element, when necessary
336404
Adds the hidden or collapsed class, when necessary.
337405
Finalize parent element's resize operations, if needed.
338406

339-
**Kind**: inner method of [<code>animate</code>](#animate)
407+
**Kind**: inner method of [<code>animate</code>](#animate-js)
340408

341409
| Param | Type | Description |
342410
| ------- | ------------------------ | ------------------------------ |
@@ -348,7 +416,7 @@ Finalize parent element's resize operations, if needed.
348416
Executes a given callback, checking, when necessary, if the callback was already
349417
executed by another element being animated by the same trigger button
350418

351-
**Kind**: inner method of [<code>animate</code>](#animate)
419+
**Kind**: inner method of [<code>animate</code>](#animate-js)
352420

353421
| Param | Type | Description |
354422
| ------- | --------------------- | ------------------------------------------------------------ |
@@ -360,7 +428,8 @@ executed by another element being animated by the same trigger button
360428

361429
Checks which animation CSS class is set to determine wich action to perform next
362430

363-
**Kind**: inner method of [<code>animate</code>](#animate)
431+
**Kind**: inner method of [<code>animate</code>](#animate-js)
432+
364433
**Returns**: 'show' or 'hide' or 'move' or 'moveBack'
365434

366435
| Param | Type | Description |
@@ -372,8 +441,10 @@ Checks which animation CSS class is set to determine wich action to perform next
372441

373442
Generates the handler function to be passed to the event listener
374443

375-
**Kind**: inner method of [<code>animate</code>](#animate)
376-
**Returns**: A function to be passed to the addEventListener() as a handler
444+
**Kind**: inner method of [<code>animate</code>](#animate-js)
445+
446+
**Returns**: A function to be passed to the addEventListener() as a handler
447+
377448
**See**:
378449

379450
- [globals.VISIBILITY_ANIMS_ID](globals.html#visibility-anims-id)

‎docs/globals.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ The key is the name of the animation function
2323
and the value is the index of the CSS class name
2424
inside CLASS_NAMES.hide and CLASS_NAMES.show
2525

26-
**Kind**: static constant of [<code>globals</code>](#globals-js)
26+
**Kind**: static constant of [<code>globals</code>](#globals-js)
27+
2728
**See**: [globals.CLASS_NAMES](#class-names)
2829

2930
## MOTION_ANIMS_ID : <code>Object.&lt;string, number&gt;</code>
@@ -34,7 +35,8 @@ The key is the name of the animation function
3435
and the value is the index of the CSS class name
3536
inside CLASS_NAMES.move and CLASS_NAMES.moveBack
3637

37-
**Kind**: static constant of [<code>globals</code>](#globals-js)
38+
**Kind**: static constant of [<code>globals</code>](#globals-js)
39+
3840
**See**: [globals.CLASS_NAMES](#class-names)
3941

4042
## PROPERTY_NAMES : <code>Object.&lt;string, string&gt;</code>

0 commit comments

Comments
 (0)