etro 0.8.0 → 0.8.3

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.
Files changed (97) hide show
  1. package/.github/workflows/nodejs.yml +3 -1
  2. package/.github/workflows/shipjs-trigger.yml +29 -0
  3. package/CHANGELOG.md +36 -13
  4. package/CODE_OF_CONDUCT.md +5 -5
  5. package/CONTRIBUTING.md +22 -72
  6. package/README.md +2 -2
  7. package/dist/effect/base.d.ts +14 -1
  8. package/dist/etro-cjs.js +189 -230
  9. package/dist/etro-iife.js +189 -230
  10. package/dist/layer/base.d.ts +13 -0
  11. package/eslint.conf.js +2 -1
  12. package/eslint.test-conf.js +1 -0
  13. package/examples/application/readme-screenshot.html +4 -8
  14. package/examples/application/video-player.html +3 -4
  15. package/examples/introduction/effects.html +23 -4
  16. package/karma.conf.js +4 -2
  17. package/package.json +8 -4
  18. package/scripts/gen-effect-samples.html +0 -3
  19. package/ship.config.js +80 -0
  20. package/src/effect/base.ts +29 -10
  21. package/src/effect/gaussian-blur.ts +10 -10
  22. package/src/effect/pixelate.ts +1 -2
  23. package/src/effect/shader.ts +18 -22
  24. package/src/effect/stack.ts +8 -4
  25. package/src/effect/transform.ts +13 -14
  26. package/src/event.ts +8 -14
  27. package/src/layer/audio-source.ts +16 -14
  28. package/src/layer/audio.ts +1 -2
  29. package/src/layer/base.ts +26 -7
  30. package/src/layer/visual.ts +11 -6
  31. package/src/movie.ts +70 -64
  32. package/src/util.ts +50 -57
  33. package/docs/effect.js.html +0 -1215
  34. package/docs/event.js.html +0 -145
  35. package/docs/index.html +0 -81
  36. package/docs/index.js.html +0 -92
  37. package/docs/layer.js.html +0 -888
  38. package/docs/module-effect-GaussianBlurComponent.html +0 -345
  39. package/docs/module-effect.Brightness.html +0 -339
  40. package/docs/module-effect.Channels.html +0 -319
  41. package/docs/module-effect.ChromaKey.html +0 -611
  42. package/docs/module-effect.Contrast.html +0 -339
  43. package/docs/module-effect.EllipticalMask.html +0 -200
  44. package/docs/module-effect.GaussianBlur.html +0 -202
  45. package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
  46. package/docs/module-effect.GaussianBlurVertical.html +0 -242
  47. package/docs/module-effect.Pixelate.html +0 -330
  48. package/docs/module-effect.Shader.html +0 -1227
  49. package/docs/module-effect.Stack.html +0 -406
  50. package/docs/module-effect.Transform.Matrix.html +0 -193
  51. package/docs/module-effect.Transform.html +0 -1174
  52. package/docs/module-effect.html +0 -148
  53. package/docs/module-event.html +0 -473
  54. package/docs/module-index.html +0 -186
  55. package/docs/module-layer-Media.html +0 -1116
  56. package/docs/module-layer-MediaMixin.html +0 -164
  57. package/docs/module-layer.Audio.html +0 -1188
  58. package/docs/module-layer.Base.html +0 -629
  59. package/docs/module-layer.Image.html +0 -1421
  60. package/docs/module-layer.Text.html +0 -1731
  61. package/docs/module-layer.Video.html +0 -1938
  62. package/docs/module-layer.Visual.html +0 -1698
  63. package/docs/module-layer.html +0 -137
  64. package/docs/module-movie.html +0 -3118
  65. package/docs/module-util.Color.html +0 -702
  66. package/docs/module-util.Font.html +0 -395
  67. package/docs/module-util.html +0 -845
  68. package/docs/movie.js.html +0 -689
  69. package/docs/scripts/collapse.js +0 -20
  70. package/docs/scripts/linenumber.js +0 -25
  71. package/docs/scripts/nav.js +0 -12
  72. package/docs/scripts/polyfill.js +0 -4
  73. package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
  74. package/docs/scripts/prettify/lang-css.js +0 -2
  75. package/docs/scripts/prettify/prettify.js +0 -28
  76. package/docs/scripts/search.js +0 -83
  77. package/docs/styles/jsdoc.css +0 -671
  78. package/docs/styles/prettify.css +0 -79
  79. package/docs/util.js.html +0 -503
  80. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  81. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  82. package/spec/assets/effect/grayscale.png +0 -0
  83. package/spec/assets/effect/original.png +0 -0
  84. package/spec/assets/effect/pixelate.png +0 -0
  85. package/spec/assets/effect/transform/multiply.png +0 -0
  86. package/spec/assets/effect/transform/rotate.png +0 -0
  87. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  88. package/spec/assets/effect/transform/scale.png +0 -0
  89. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  90. package/spec/assets/effect/transform/translate.png +0 -0
  91. package/spec/assets/layer/audio.wav +0 -0
  92. package/spec/assets/layer/image.jpg +0 -0
  93. package/spec/effect.spec.js +0 -421
  94. package/spec/event.spec.js +0 -39
  95. package/spec/layer.spec.js +0 -307
  96. package/spec/movie.spec.js +0 -346
  97. package/spec/util.spec.js +0 -294
@@ -1,671 +0,0 @@
1
- @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
2
-
3
- * {
4
- box-sizing: border-box
5
- }
6
-
7
- html, body {
8
- height: 100%;
9
- width: 100%;
10
- }
11
-
12
- body {
13
- color: #4d4e53;
14
- background-color: white;
15
- margin: 0 auto;
16
- padding: 0 20px;
17
- font-family: 'Helvetica Neue', Helvetica, sans-serif;
18
- font-size: 16px;
19
- }
20
-
21
- img {
22
- max-width: 100%;
23
- }
24
-
25
- a,
26
- a:active {
27
- color: #606;
28
- text-decoration: none;
29
- }
30
-
31
- a:hover {
32
- text-decoration: none;
33
- }
34
-
35
- article a {
36
- border-bottom: 1px solid #ddd;
37
- }
38
-
39
- article a:hover, article a:active {
40
- border-bottom-color: #222;
41
- }
42
-
43
- article .description a {
44
- word-break: break-word;
45
- }
46
-
47
- p, ul, ol, blockquote {
48
- margin-bottom: 1em;
49
- line-height: 160%;
50
- }
51
-
52
- h1, h2, h3, h4, h5, h6 {
53
- font-family: 'Montserrat', sans-serif;
54
- }
55
-
56
- h1, h2, h3, h4, h5, h6 {
57
- color: #000;
58
- font-weight: 400;
59
- margin: 0;
60
- }
61
-
62
- h1 {
63
- font-weight: 300;
64
- font-size: 48px;
65
- margin: 1em 0 .5em;
66
- }
67
-
68
- h1.page-title {
69
- font-size: 48px;
70
- margin: 1em 30px;
71
- line-height: 100%;
72
- word-wrap: break-word;
73
- }
74
-
75
- h2 {
76
- font-size: 24px;
77
- margin: 1.5em 0 .3em;
78
- }
79
-
80
- h3 {
81
- font-size: 24px;
82
- margin: 1.2em 0 .3em;
83
- }
84
-
85
- h4 {
86
- font-size: 18px;
87
- margin: 1em 0 .2em;
88
- color: #4d4e53;
89
- }
90
-
91
- h4.name {
92
- color: #fff;
93
- background: #6d426d;
94
- box-shadow: 0 .25em .5em #d3d3d3;
95
- border-top: 1px solid #d3d3d3;
96
- border-bottom: 1px solid #d3d3d3;
97
- margin: 1.5em 0 0.5em;
98
- padding: .75em 0 .75em 10px;
99
- }
100
-
101
- h4.name a {
102
- color: #fc83ff;
103
- }
104
-
105
- h4.name a:hover {
106
- border-bottom-color: #fc83ff;
107
- }
108
-
109
- h5, .container-overview .subsection-title {
110
- font-size: 120%;
111
- letter-spacing: -0.01em;
112
- margin: 8px 0 3px 0;
113
- }
114
-
115
- h6 {
116
- font-size: 100%;
117
- letter-spacing: -0.01em;
118
- margin: 6px 0 3px 0;
119
- font-style: italic;
120
- }
121
-
122
- tt, code, kbd, samp {
123
- font-family: Consolas, Monaco, 'Andale Mono', monospace;
124
- background: #f4f4f4;
125
- padding: 1px 5px;
126
- }
127
-
128
- .class-description {
129
- font-size: 130%;
130
- line-height: 140%;
131
- margin-bottom: 1em;
132
- margin-top: 1em;
133
- }
134
-
135
- .class-description:empty {
136
- margin: 0
137
- }
138
-
139
- #main {
140
- float: right;
141
- min-width: 360px;
142
- width: calc(100% - 240px);
143
- }
144
-
145
- header {
146
- display: block
147
- }
148
-
149
- section {
150
- display: block;
151
- background-color: #fff;
152
- padding: 0 0 0 30px;
153
- }
154
-
155
- .variation {
156
- display: none
157
- }
158
-
159
- .signature-attributes {
160
- font-size: 60%;
161
- color: #eee;
162
- font-style: italic;
163
- font-weight: lighter;
164
- }
165
-
166
- nav {
167
- float: left;
168
- display: block;
169
- width: 250px;
170
- background: #fff;
171
- overflow: auto;
172
- position: fixed;
173
- height: 100%;
174
- }
175
-
176
- nav #nav-search{
177
- width: 210px;
178
- height: 30px;
179
- padding: 5px 10px;
180
- font-size: 12px;
181
- line-height: 1.5;
182
- border-radius: 3px;
183
- margin-right: 20px;
184
- margin-top: 20px;
185
- }
186
-
187
- nav.wrap a{
188
- word-wrap: break-word;
189
- }
190
-
191
- nav h3 {
192
- margin-top: 12px;
193
- font-size: 13px;
194
- text-transform: uppercase;
195
- letter-spacing: 1px;
196
- font-weight: 700;
197
- line-height: 24px;
198
- margin: 15px 0 10px;
199
- padding: 0;
200
- color: #000;
201
- }
202
-
203
- nav ul {
204
- font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
205
- font-size: 100%;
206
- line-height: 17px;
207
- padding: 0;
208
- margin: 0;
209
- list-style-type: none;
210
- }
211
-
212
- nav ul a,
213
- nav ul a:active {
214
- font-family: 'Montserrat', sans-serif;
215
- line-height: 18px;
216
- padding: 0;
217
- display: block;
218
- font-size: 12px;
219
- }
220
-
221
- nav a:hover,
222
- nav a:active {
223
- color: #606;
224
- }
225
-
226
- nav > ul {
227
- padding: 0 10px;
228
- }
229
-
230
- nav > ul > li > a {
231
- color: #606;
232
- margin-top: 10px;
233
- }
234
-
235
- nav ul ul a {
236
- color: hsl(207, 1%, 60%);
237
- border-left: 1px solid hsl(207, 10%, 86%);
238
- }
239
-
240
- nav ul ul a,
241
- nav ul ul a:active {
242
- padding-left: 20px
243
- }
244
-
245
- nav h2 {
246
- font-size: 13px;
247
- margin: 10px 0 0 0;
248
- padding: 0;
249
- }
250
-
251
- nav > h2 > a {
252
- margin: 10px 0 -10px;
253
- color: #606 !important;
254
- }
255
-
256
- footer {
257
- color: hsl(0, 0%, 28%);
258
- margin-left: 250px;
259
- display: block;
260
- padding: 15px;
261
- font-style: italic;
262
- font-size: 90%;
263
- }
264
-
265
- .ancestors {
266
- color: #999
267
- }
268
-
269
- .ancestors a {
270
- color: #999 !important;
271
- }
272
-
273
- .clear {
274
- clear: both
275
- }
276
-
277
- .important {
278
- font-weight: bold;
279
- color: #950B02;
280
- }
281
-
282
- .yes-def {
283
- text-indent: -1000px
284
- }
285
-
286
- .type-signature {
287
- color: #CA79CA
288
- }
289
-
290
- .type-signature:last-child {
291
- color: #eee;
292
- }
293
-
294
- .name, .signature {
295
- font-family: Consolas, Monaco, 'Andale Mono', monospace
296
- }
297
-
298
- .signature {
299
- color: #fc83ff;
300
- }
301
-
302
- .details {
303
- margin-top: 6px;
304
- border-left: 2px solid #DDD;
305
- line-height: 20px;
306
- font-size: 14px;
307
- }
308
-
309
- .details dt {
310
- width: auto;
311
- float: left;
312
- padding-left: 10px;
313
- }
314
-
315
- .details dd {
316
- margin-left: 70px;
317
- margin-top: 6px;
318
- margin-bottom: 6px;
319
- }
320
-
321
- .details ul {
322
- margin: 0
323
- }
324
-
325
- .details ul {
326
- list-style-type: none
327
- }
328
-
329
- .details pre.prettyprint {
330
- margin: 0
331
- }
332
-
333
- .details .object-value {
334
- padding-top: 0
335
- }
336
-
337
- .description {
338
- margin-bottom: 1em;
339
- margin-top: 1em;
340
- }
341
-
342
- .code-caption {
343
- font-style: italic;
344
- font-size: 107%;
345
- margin: 0;
346
- }
347
-
348
- .prettyprint {
349
- font-size: 14px;
350
- overflow: auto;
351
- }
352
-
353
- .prettyprint.source {
354
- width: inherit;
355
- line-height: 18px;
356
- display: block;
357
- background-color: #0d152a;
358
- color: #aeaeae;
359
- }
360
-
361
- .prettyprint code {
362
- line-height: 18px;
363
- display: block;
364
- background-color: #0d152a;
365
- color: #4D4E53;
366
- }
367
-
368
- .prettyprint > code {
369
- padding: 15px;
370
- }
371
-
372
- .prettyprint .linenums code {
373
- padding: 0 15px
374
- }
375
-
376
- .prettyprint .linenums li:first-of-type code {
377
- padding-top: 15px
378
- }
379
-
380
- .prettyprint code span.line {
381
- display: inline-block
382
- }
383
-
384
- .prettyprint.linenums {
385
- padding-left: 70px;
386
- -webkit-user-select: none;
387
- -moz-user-select: none;
388
- -ms-user-select: none;
389
- user-select: none;
390
- }
391
-
392
- .prettyprint.linenums ol {
393
- padding-left: 0
394
- }
395
-
396
- .prettyprint.linenums li {
397
- border-left: 3px #34446B solid;
398
- }
399
-
400
- .prettyprint.linenums li.selected, .prettyprint.linenums li.selected * {
401
- background-color: #34446B;
402
- }
403
-
404
- .prettyprint.linenums li * {
405
- -webkit-user-select: text;
406
- -moz-user-select: text;
407
- -ms-user-select: text;
408
- user-select: text;
409
- }
410
-
411
- table {
412
- border-spacing: 0;
413
- border: 1px solid #ddd;
414
- border-collapse: collapse;
415
- border-radius: 3px;
416
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
417
- width: 100%;
418
- font-size: 14px;
419
- margin: 1em 0;
420
- }
421
-
422
- td, th {
423
- margin: 0px;
424
- text-align: left;
425
- vertical-align: top;
426
- padding: 10px;
427
- display: table-cell;
428
- }
429
-
430
- thead tr, thead tr {
431
- background-color: #fff;
432
- font-weight: bold;
433
- border-bottom: 1px solid #ddd;
434
- }
435
-
436
- .params .type {
437
- white-space: nowrap;
438
- }
439
-
440
- .params code {
441
- white-space: pre;
442
- }
443
-
444
- .params td, .params .name, .props .name, .name code {
445
- color: #4D4E53;
446
- font-family: Consolas, Monaco, 'Andale Mono', monospace;
447
- font-size: 100%;
448
- }
449
-
450
- .params td {
451
- border-top: 1px solid #eee
452
- }
453
-
454
- .params td.description > p:first-child, .props td.description > p:first-child {
455
- margin-top: 0;
456
- padding-top: 0;
457
- }
458
-
459
- .params td.description > p:last-child, .props td.description > p:last-child {
460
- margin-bottom: 0;
461
- padding-bottom: 0;
462
- }
463
-
464
- span.param-type, .params td .param-type, .param-type dd {
465
- color: #606;
466
- font-family: Consolas, Monaco, 'Andale Mono', monospace
467
- }
468
-
469
- .param-type dt, .param-type dd {
470
- display: inline-block
471
- }
472
-
473
- .param-type {
474
- margin: 14px 0;
475
- }
476
-
477
- .disabled {
478
- color: #454545
479
- }
480
-
481
- /* navicon button */
482
- .navicon-button {
483
- display: none;
484
- position: relative;
485
- padding: 2.0625rem 1.5rem;
486
- transition: 0.25s;
487
- cursor: pointer;
488
- -webkit-user-select: none;
489
- -moz-user-select: none;
490
- -ms-user-select: none;
491
- user-select: none;
492
- opacity: .8;
493
- }
494
- .navicon-button .navicon:before, .navicon-button .navicon:after {
495
- transition: 0.25s;
496
- }
497
- .navicon-button:hover {
498
- transition: 0.5s;
499
- opacity: 1;
500
- }
501
- .navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
502
- transition: 0.25s;
503
- }
504
- .navicon-button:hover .navicon:before {
505
- top: .825rem;
506
- }
507
- .navicon-button:hover .navicon:after {
508
- top: -.825rem;
509
- }
510
-
511
- /* navicon */
512
- .navicon {
513
- position: relative;
514
- width: 2.5em;
515
- height: .3125rem;
516
- background: #000;
517
- transition: 0.3s;
518
- border-radius: 2.5rem;
519
- }
520
- .navicon:before, .navicon:after {
521
- display: block;
522
- content: "";
523
- height: .3125rem;
524
- width: 2.5rem;
525
- background: #000;
526
- position: absolute;
527
- z-index: -1;
528
- transition: 0.3s 0.25s;
529
- border-radius: 1rem;
530
- }
531
- .navicon:before {
532
- top: .625rem;
533
- }
534
- .navicon:after {
535
- top: -.625rem;
536
- }
537
-
538
- /* open */
539
- .nav-trigger:checked + label:not(.steps) .navicon:before,
540
- .nav-trigger:checked + label:not(.steps) .navicon:after {
541
- top: 0 !important;
542
- }
543
-
544
- .nav-trigger:checked + label .navicon:before,
545
- .nav-trigger:checked + label .navicon:after {
546
- transition: 0.5s;
547
- }
548
-
549
- /* Minus */
550
- .nav-trigger:checked + label {
551
- -webkit-transform: scale(0.75);
552
- transform: scale(0.75);
553
- }
554
-
555
- /* × and + */
556
- .nav-trigger:checked + label.plus .navicon,
557
- .nav-trigger:checked + label.x .navicon {
558
- background: transparent;
559
- }
560
-
561
- .nav-trigger:checked + label.plus .navicon:before,
562
- .nav-trigger:checked + label.x .navicon:before {
563
- -webkit-transform: rotate(-45deg);
564
- transform: rotate(-45deg);
565
- background: #FFF;
566
- }
567
-
568
- .nav-trigger:checked + label.plus .navicon:after,
569
- .nav-trigger:checked + label.x .navicon:after {
570
- -webkit-transform: rotate(45deg);
571
- transform: rotate(45deg);
572
- background: #FFF;
573
- }
574
-
575
- .nav-trigger:checked + label.plus {
576
- -webkit-transform: scale(0.75) rotate(45deg);
577
- transform: scale(0.75) rotate(45deg);
578
- }
579
-
580
- .nav-trigger:checked ~ nav {
581
- left: 0 !important;
582
- }
583
-
584
- .nav-trigger:checked ~ .overlay {
585
- display: block;
586
- }
587
-
588
- .nav-trigger {
589
- position: fixed;
590
- top: 0;
591
- clip: rect(0, 0, 0, 0);
592
- }
593
-
594
- .overlay {
595
- display: none;
596
- position: fixed;
597
- top: 0;
598
- bottom: 0;
599
- left: 0;
600
- right: 0;
601
- width: 100%;
602
- height: 100%;
603
- background: hsla(0, 0%, 0%, 0.5);
604
- z-index: 1;
605
- }
606
-
607
- /* nav level */
608
- .level-hide {
609
- display: none;
610
- }
611
- html[data-search-mode] .level-hide {
612
- display: block;
613
- }
614
-
615
-
616
- @media only screen and (min-width: 320px) and (max-width: 680px) {
617
- body {
618
- overflow-x: hidden;
619
- }
620
-
621
- nav {
622
- background: #FFF;
623
- width: 250px;
624
- height: 100%;
625
- position: fixed;
626
- top: 0;
627
- right: 0;
628
- bottom: 0;
629
- left: -250px;
630
- z-index: 3;
631
- padding: 0 10px;
632
- transition: left 0.2s;
633
- }
634
-
635
- .navicon-button {
636
- display: inline-block;
637
- position: fixed;
638
- top: 1.5em;
639
- right: 0;
640
- z-index: 2;
641
- }
642
-
643
- #main {
644
- width: 100%;
645
- min-width: 360px;
646
- }
647
-
648
- #main h1.page-title {
649
- margin: 1em 0;
650
- }
651
-
652
- #main section {
653
- padding: 0;
654
- }
655
-
656
- footer {
657
- margin-left: 0;
658
- }
659
- }
660
-
661
- /** Add a '#' to static members */
662
- [data-type="member"] a::before {
663
- content: '#';
664
- display: inline-block;
665
- margin-left: -14px;
666
- margin-right: 5px;
667
- }
668
-
669
- #disqus_thread{
670
- margin-left: 30px;
671
- }
@@ -1,79 +0,0 @@
1
- .pln {
2
- color: #ddd;
3
- }
4
-
5
- /* string content */
6
- .str {
7
- color: #61ce3c;
8
- }
9
-
10
- /* a keyword */
11
- .kwd {
12
- color: #fbde2d;
13
- }
14
-
15
- /* a comment */
16
- .com {
17
- color: #aeaeae;
18
- }
19
-
20
- /* a type name */
21
- .typ {
22
- color: #8da6ce;
23
- }
24
-
25
- /* a literal value */
26
- .lit {
27
- color: #fbde2d;
28
- }
29
-
30
- /* punctuation */
31
- .pun {
32
- color: #ddd;
33
- }
34
-
35
- /* lisp open bracket */
36
- .opn {
37
- color: #000000;
38
- }
39
-
40
- /* lisp close bracket */
41
- .clo {
42
- color: #000000;
43
- }
44
-
45
- /* a markup tag name */
46
- .tag {
47
- color: #8da6ce;
48
- }
49
-
50
- /* a markup attribute name */
51
- .atn {
52
- color: #fbde2d;
53
- }
54
-
55
- /* a markup attribute value */
56
- .atv {
57
- color: #ddd;
58
- }
59
-
60
- /* a declaration */
61
- .dec {
62
- color: #EF5050;
63
- }
64
-
65
- /* a variable name */
66
- .var {
67
- color: #c82829;
68
- }
69
-
70
- /* a function name */
71
- .fun {
72
- color: #4271ae;
73
- }
74
-
75
- /* Specify class=linenums on a pre to get line numbering */
76
- ol.linenums {
77
- margin-top: 0;
78
- margin-bottom: 0;
79
- }