@builder.io/sdk 1.3.0 → 1.3.1-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.
Files changed (65) hide show
  1. package/.yarnrc.yml +1 -0
  2. package/CHANGELOG.md +1 -1
  3. package/coverage/clover.xml +3801 -108
  4. package/coverage/coverage-final.json +18 -2
  5. package/coverage/lcov-report/index.html +76 -31
  6. package/coverage/lcov-report/src/builder.class.ts.html +8107 -0
  7. package/coverage/lcov-report/src/classes/animator.class.ts.html +847 -0
  8. package/coverage/lcov-report/src/classes/cookies.class.ts.html +559 -0
  9. package/coverage/lcov-report/src/classes/index.html +74 -14
  10. package/coverage/lcov-report/src/classes/observable.class.ts.html +388 -0
  11. package/coverage/lcov-report/src/classes/promise.class.ts.html +607 -0
  12. package/coverage/lcov-report/src/classes/query-string.class.ts.html +47 -47
  13. package/coverage/lcov-report/src/functions/assign.function.ts.html +139 -0
  14. package/coverage/lcov-report/src/functions/fetch.function.ts.html +427 -0
  15. package/coverage/lcov-report/src/functions/get-top-level-domain.ts.html +121 -0
  16. package/coverage/lcov-report/src/functions/index.html +236 -0
  17. package/coverage/lcov-report/src/functions/next-tick.function.ts.html +184 -0
  18. package/coverage/lcov-report/src/functions/omit.function.ts.html +106 -0
  19. package/coverage/lcov-report/src/functions/server-only-require.function.ts.html +121 -0
  20. package/coverage/lcov-report/src/functions/throttle.function.ts.html +181 -0
  21. package/coverage/lcov-report/src/functions/to-error.ts.html +133 -0
  22. package/coverage/lcov-report/src/functions/uuid.ts.html +136 -0
  23. package/coverage/lcov-report/src/index.html +29 -14
  24. package/coverage/lcov-report/src/polyfills/custom-event-polyfill.js.html +121 -0
  25. package/coverage/lcov-report/src/polyfills/index.html +116 -0
  26. package/coverage/lcov-report/src/types/api-version.ts.html +91 -0
  27. package/coverage/lcov-report/src/types/index.html +116 -0
  28. package/coverage/lcov-report/src/url.ts.html +61 -61
  29. package/coverage/lcov.info +4234 -155
  30. package/dist/index.browser.js +1 -1
  31. package/dist/index.browser.js.map +1 -1
  32. package/dist/index.cjs.js +13 -3
  33. package/dist/index.cjs.js.map +1 -1
  34. package/dist/index.d.ts +7 -7
  35. package/dist/index.esm.js +13 -3
  36. package/dist/index.esm.js.map +1 -1
  37. package/dist/index.umd.js +13 -3
  38. package/dist/index.umd.js.map +1 -1
  39. package/dist/package.json +3 -7
  40. package/dist/src/builder.class.d.ts +1 -0
  41. package/dist/src/builder.class.js +12 -2
  42. package/dist/src/builder.class.js.map +1 -1
  43. package/dist/src/builder.class.test.d.ts +1 -0
  44. package/dist/src/builder.class.test.js +23 -0
  45. package/dist/src/builder.class.test.js.map +1 -0
  46. package/dist/src/classes/animator.class.d.ts +26 -26
  47. package/dist/src/classes/promise.class.d.ts +17 -17
  48. package/dist/src/classes/query-string.class.d.ts +9 -9
  49. package/dist/src/classes/query-string.class.test.d.ts +1 -1
  50. package/dist/src/constants/builder.d.ts +2 -2
  51. package/dist/src/functions/assign.function.d.ts +1 -1
  52. package/dist/src/functions/fetch.function.d.ts +28 -28
  53. package/dist/src/functions/finder.function.d.ts +10 -10
  54. package/dist/src/functions/get-top-level-domain.d.ts +6 -6
  55. package/dist/src/functions/omit.function.d.ts +1 -1
  56. package/dist/src/functions/throttle.function.d.ts +1 -1
  57. package/dist/src/functions/to-error.d.ts +13 -13
  58. package/dist/src/functions/uuid.d.ts +8 -8
  59. package/dist/src/types/api-version.d.ts +2 -2
  60. package/dist/src/types/content.d.ts +31 -31
  61. package/dist/src/types/element.d.ts +60 -60
  62. package/dist/src/url.test.d.ts +1 -1
  63. package/dist/tsconfig.tsbuildinfo +1 -1
  64. package/jest.config.ts +1 -3
  65. package/package.json +4 -8
package/coverage/lcov-report/src/classes/animator.class.ts.html ADDED
@@ -0,0 +1,847 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/classes/animator.class.ts</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../../prettify.css" />
9
+ <link rel="stylesheet" href="../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/classes</a> animator.class.ts</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">24.01% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>61/254</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">100% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>1/1</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">11.11% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>1/9</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">24.01% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>61/254</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line low'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a>
276
+ <a name='L211'></a><a href='#L211'>211</a>
277
+ <a name='L212'></a><a href='#L212'>212</a>
278
+ <a name='L213'></a><a href='#L213'>213</a>
279
+ <a name='L214'></a><a href='#L214'>214</a>
280
+ <a name='L215'></a><a href='#L215'>215</a>
281
+ <a name='L216'></a><a href='#L216'>216</a>
282
+ <a name='L217'></a><a href='#L217'>217</a>
283
+ <a name='L218'></a><a href='#L218'>218</a>
284
+ <a name='L219'></a><a href='#L219'>219</a>
285
+ <a name='L220'></a><a href='#L220'>220</a>
286
+ <a name='L221'></a><a href='#L221'>221</a>
287
+ <a name='L222'></a><a href='#L222'>222</a>
288
+ <a name='L223'></a><a href='#L223'>223</a>
289
+ <a name='L224'></a><a href='#L224'>224</a>
290
+ <a name='L225'></a><a href='#L225'>225</a>
291
+ <a name='L226'></a><a href='#L226'>226</a>
292
+ <a name='L227'></a><a href='#L227'>227</a>
293
+ <a name='L228'></a><a href='#L228'>228</a>
294
+ <a name='L229'></a><a href='#L229'>229</a>
295
+ <a name='L230'></a><a href='#L230'>230</a>
296
+ <a name='L231'></a><a href='#L231'>231</a>
297
+ <a name='L232'></a><a href='#L232'>232</a>
298
+ <a name='L233'></a><a href='#L233'>233</a>
299
+ <a name='L234'></a><a href='#L234'>234</a>
300
+ <a name='L235'></a><a href='#L235'>235</a>
301
+ <a name='L236'></a><a href='#L236'>236</a>
302
+ <a name='L237'></a><a href='#L237'>237</a>
303
+ <a name='L238'></a><a href='#L238'>238</a>
304
+ <a name='L239'></a><a href='#L239'>239</a>
305
+ <a name='L240'></a><a href='#L240'>240</a>
306
+ <a name='L241'></a><a href='#L241'>241</a>
307
+ <a name='L242'></a><a href='#L242'>242</a>
308
+ <a name='L243'></a><a href='#L243'>243</a>
309
+ <a name='L244'></a><a href='#L244'>244</a>
310
+ <a name='L245'></a><a href='#L245'>245</a>
311
+ <a name='L246'></a><a href='#L246'>246</a>
312
+ <a name='L247'></a><a href='#L247'>247</a>
313
+ <a name='L248'></a><a href='#L248'>248</a>
314
+ <a name='L249'></a><a href='#L249'>249</a>
315
+ <a name='L250'></a><a href='#L250'>250</a>
316
+ <a name='L251'></a><a href='#L251'>251</a>
317
+ <a name='L252'></a><a href='#L252'>252</a>
318
+ <a name='L253'></a><a href='#L253'>253</a>
319
+ <a name='L254'></a><a href='#L254'>254</a>
320
+ <a name='L255'></a><a href='#L255'>255</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
321
+ <span class="cline-any cline-yes">1x</span>
322
+ <span class="cline-any cline-yes">1x</span>
323
+ <span class="cline-any cline-yes">1x</span>
324
+ <span class="cline-any cline-no">&nbsp;</span>
325
+ <span class="cline-any cline-yes">1x</span>
326
+ <span class="cline-any cline-yes">1x</span>
327
+ <span class="cline-any cline-yes">1x</span>
328
+ <span class="cline-any cline-yes">1x</span>
329
+ <span class="cline-any cline-yes">1x</span>
330
+ <span class="cline-any cline-yes">1x</span>
331
+ <span class="cline-any cline-yes">1x</span>
332
+ <span class="cline-any cline-yes">1x</span>
333
+ <span class="cline-any cline-yes">1x</span>
334
+ <span class="cline-any cline-yes">1x</span>
335
+ <span class="cline-any cline-yes">1x</span>
336
+ <span class="cline-any cline-yes">1x</span>
337
+ <span class="cline-any cline-yes">1x</span>
338
+ <span class="cline-any cline-yes">1x</span>
339
+ <span class="cline-any cline-yes">1x</span>
340
+ <span class="cline-any cline-yes">1x</span>
341
+ <span class="cline-any cline-yes">1x</span>
342
+ <span class="cline-any cline-yes">1x</span>
343
+ <span class="cline-any cline-yes">1x</span>
344
+ <span class="cline-any cline-yes">1x</span>
345
+ <span class="cline-any cline-yes">1x</span>
346
+ <span class="cline-any cline-yes">1x</span>
347
+ <span class="cline-any cline-yes">1x</span>
348
+ <span class="cline-any cline-yes">1x</span>
349
+ <span class="cline-any cline-yes">1x</span>
350
+ <span class="cline-any cline-no">&nbsp;</span>
351
+ <span class="cline-any cline-no">&nbsp;</span>
352
+ <span class="cline-any cline-no">&nbsp;</span>
353
+ <span class="cline-any cline-no">&nbsp;</span>
354
+ <span class="cline-any cline-no">&nbsp;</span>
355
+ <span class="cline-any cline-no">&nbsp;</span>
356
+ <span class="cline-any cline-no">&nbsp;</span>
357
+ <span class="cline-any cline-no">&nbsp;</span>
358
+ <span class="cline-any cline-no">&nbsp;</span>
359
+ <span class="cline-any cline-no">&nbsp;</span>
360
+ <span class="cline-any cline-no">&nbsp;</span>
361
+ <span class="cline-any cline-yes">1x</span>
362
+ <span class="cline-any cline-yes">1x</span>
363
+ <span class="cline-any cline-yes">1x</span>
364
+ <span class="cline-any cline-yes">1x</span>
365
+ <span class="cline-any cline-yes">1x</span>
366
+ <span class="cline-any cline-no">&nbsp;</span>
367
+ <span class="cline-any cline-yes">1x</span>
368
+ <span class="cline-any cline-yes">1x</span>
369
+ <span class="cline-any cline-yes">1x</span>
370
+ <span class="cline-any cline-no">&nbsp;</span>
371
+ <span class="cline-any cline-no">&nbsp;</span>
372
+ <span class="cline-any cline-no">&nbsp;</span>
373
+ <span class="cline-any cline-no">&nbsp;</span>
374
+ <span class="cline-any cline-no">&nbsp;</span>
375
+ <span class="cline-any cline-no">&nbsp;</span>
376
+ <span class="cline-any cline-no">&nbsp;</span>
377
+ <span class="cline-any cline-no">&nbsp;</span>
378
+ <span class="cline-any cline-no">&nbsp;</span>
379
+ <span class="cline-any cline-no">&nbsp;</span>
380
+ <span class="cline-any cline-no">&nbsp;</span>
381
+ <span class="cline-any cline-no">&nbsp;</span>
382
+ <span class="cline-any cline-no">&nbsp;</span>
383
+ <span class="cline-any cline-no">&nbsp;</span>
384
+ <span class="cline-any cline-yes">1x</span>
385
+ <span class="cline-any cline-yes">1x</span>
386
+ <span class="cline-any cline-yes">1x</span>
387
+ <span class="cline-any cline-yes">1x</span>
388
+ <span class="cline-any cline-yes">1x</span>
389
+ <span class="cline-any cline-yes">1x</span>
390
+ <span class="cline-any cline-no">&nbsp;</span>
391
+ <span class="cline-any cline-no">&nbsp;</span>
392
+ <span class="cline-any cline-no">&nbsp;</span>
393
+ <span class="cline-any cline-no">&nbsp;</span>
394
+ <span class="cline-any cline-no">&nbsp;</span>
395
+ <span class="cline-any cline-no">&nbsp;</span>
396
+ <span class="cline-any cline-no">&nbsp;</span>
397
+ <span class="cline-any cline-no">&nbsp;</span>
398
+ <span class="cline-any cline-no">&nbsp;</span>
399
+ <span class="cline-any cline-yes">1x</span>
400
+ <span class="cline-any cline-yes">1x</span>
401
+ <span class="cline-any cline-yes">1x</span>
402
+ <span class="cline-any cline-no">&nbsp;</span>
403
+ <span class="cline-any cline-no">&nbsp;</span>
404
+ <span class="cline-any cline-no">&nbsp;</span>
405
+ <span class="cline-any cline-no">&nbsp;</span>
406
+ <span class="cline-any cline-no">&nbsp;</span>
407
+ <span class="cline-any cline-no">&nbsp;</span>
408
+ <span class="cline-any cline-no">&nbsp;</span>
409
+ <span class="cline-any cline-no">&nbsp;</span>
410
+ <span class="cline-any cline-no">&nbsp;</span>
411
+ <span class="cline-any cline-no">&nbsp;</span>
412
+ <span class="cline-any cline-no">&nbsp;</span>
413
+ <span class="cline-any cline-no">&nbsp;</span>
414
+ <span class="cline-any cline-no">&nbsp;</span>
415
+ <span class="cline-any cline-no">&nbsp;</span>
416
+ <span class="cline-any cline-no">&nbsp;</span>
417
+ <span class="cline-any cline-no">&nbsp;</span>
418
+ <span class="cline-any cline-no">&nbsp;</span>
419
+ <span class="cline-any cline-no">&nbsp;</span>
420
+ <span class="cline-any cline-no">&nbsp;</span>
421
+ <span class="cline-any cline-no">&nbsp;</span>
422
+ <span class="cline-any cline-no">&nbsp;</span>
423
+ <span class="cline-any cline-no">&nbsp;</span>
424
+ <span class="cline-any cline-no">&nbsp;</span>
425
+ <span class="cline-any cline-no">&nbsp;</span>
426
+ <span class="cline-any cline-no">&nbsp;</span>
427
+ <span class="cline-any cline-no">&nbsp;</span>
428
+ <span class="cline-any cline-no">&nbsp;</span>
429
+ <span class="cline-any cline-no">&nbsp;</span>
430
+ <span class="cline-any cline-no">&nbsp;</span>
431
+ <span class="cline-any cline-no">&nbsp;</span>
432
+ <span class="cline-any cline-no">&nbsp;</span>
433
+ <span class="cline-any cline-no">&nbsp;</span>
434
+ <span class="cline-any cline-no">&nbsp;</span>
435
+ <span class="cline-any cline-no">&nbsp;</span>
436
+ <span class="cline-any cline-no">&nbsp;</span>
437
+ <span class="cline-any cline-no">&nbsp;</span>
438
+ <span class="cline-any cline-no">&nbsp;</span>
439
+ <span class="cline-any cline-no">&nbsp;</span>
440
+ <span class="cline-any cline-no">&nbsp;</span>
441
+ <span class="cline-any cline-no">&nbsp;</span>
442
+ <span class="cline-any cline-yes">1x</span>
443
+ <span class="cline-any cline-yes">1x</span>
444
+ <span class="cline-any cline-yes">1x</span>
445
+ <span class="cline-any cline-yes">1x</span>
446
+ <span class="cline-any cline-yes">1x</span>
447
+ <span class="cline-any cline-no">&nbsp;</span>
448
+ <span class="cline-any cline-no">&nbsp;</span>
449
+ <span class="cline-any cline-no">&nbsp;</span>
450
+ <span class="cline-any cline-no">&nbsp;</span>
451
+ <span class="cline-any cline-no">&nbsp;</span>
452
+ <span class="cline-any cline-no">&nbsp;</span>
453
+ <span class="cline-any cline-no">&nbsp;</span>
454
+ <span class="cline-any cline-no">&nbsp;</span>
455
+ <span class="cline-any cline-no">&nbsp;</span>
456
+ <span class="cline-any cline-no">&nbsp;</span>
457
+ <span class="cline-any cline-no">&nbsp;</span>
458
+ <span class="cline-any cline-no">&nbsp;</span>
459
+ <span class="cline-any cline-no">&nbsp;</span>
460
+ <span class="cline-any cline-no">&nbsp;</span>
461
+ <span class="cline-any cline-no">&nbsp;</span>
462
+ <span class="cline-any cline-no">&nbsp;</span>
463
+ <span class="cline-any cline-no">&nbsp;</span>
464
+ <span class="cline-any cline-no">&nbsp;</span>
465
+ <span class="cline-any cline-no">&nbsp;</span>
466
+ <span class="cline-any cline-no">&nbsp;</span>
467
+ <span class="cline-any cline-no">&nbsp;</span>
468
+ <span class="cline-any cline-no">&nbsp;</span>
469
+ <span class="cline-any cline-no">&nbsp;</span>
470
+ <span class="cline-any cline-no">&nbsp;</span>
471
+ <span class="cline-any cline-no">&nbsp;</span>
472
+ <span class="cline-any cline-no">&nbsp;</span>
473
+ <span class="cline-any cline-no">&nbsp;</span>
474
+ <span class="cline-any cline-no">&nbsp;</span>
475
+ <span class="cline-any cline-no">&nbsp;</span>
476
+ <span class="cline-any cline-no">&nbsp;</span>
477
+ <span class="cline-any cline-no">&nbsp;</span>
478
+ <span class="cline-any cline-no">&nbsp;</span>
479
+ <span class="cline-any cline-yes">1x</span>
480
+ <span class="cline-any cline-yes">1x</span>
481
+ <span class="cline-any cline-yes">1x</span>
482
+ <span class="cline-any cline-yes">1x</span>
483
+ <span class="cline-any cline-yes">1x</span>
484
+ <span class="cline-any cline-yes">1x</span>
485
+ <span class="cline-any cline-yes">1x</span>
486
+ <span class="cline-any cline-no">&nbsp;</span>
487
+ <span class="cline-any cline-no">&nbsp;</span>
488
+ <span class="cline-any cline-no">&nbsp;</span>
489
+ <span class="cline-any cline-no">&nbsp;</span>
490
+ <span class="cline-any cline-no">&nbsp;</span>
491
+ <span class="cline-any cline-no">&nbsp;</span>
492
+ <span class="cline-any cline-no">&nbsp;</span>
493
+ <span class="cline-any cline-no">&nbsp;</span>
494
+ <span class="cline-any cline-no">&nbsp;</span>
495
+ <span class="cline-any cline-no">&nbsp;</span>
496
+ <span class="cline-any cline-no">&nbsp;</span>
497
+ <span class="cline-any cline-no">&nbsp;</span>
498
+ <span class="cline-any cline-no">&nbsp;</span>
499
+ <span class="cline-any cline-no">&nbsp;</span>
500
+ <span class="cline-any cline-no">&nbsp;</span>
501
+ <span class="cline-any cline-no">&nbsp;</span>
502
+ <span class="cline-any cline-no">&nbsp;</span>
503
+ <span class="cline-any cline-no">&nbsp;</span>
504
+ <span class="cline-any cline-no">&nbsp;</span>
505
+ <span class="cline-any cline-no">&nbsp;</span>
506
+ <span class="cline-any cline-no">&nbsp;</span>
507
+ <span class="cline-any cline-no">&nbsp;</span>
508
+ <span class="cline-any cline-no">&nbsp;</span>
509
+ <span class="cline-any cline-no">&nbsp;</span>
510
+ <span class="cline-any cline-no">&nbsp;</span>
511
+ <span class="cline-any cline-no">&nbsp;</span>
512
+ <span class="cline-any cline-no">&nbsp;</span>
513
+ <span class="cline-any cline-no">&nbsp;</span>
514
+ <span class="cline-any cline-no">&nbsp;</span>
515
+ <span class="cline-any cline-no">&nbsp;</span>
516
+ <span class="cline-any cline-no">&nbsp;</span>
517
+ <span class="cline-any cline-no">&nbsp;</span>
518
+ <span class="cline-any cline-no">&nbsp;</span>
519
+ <span class="cline-any cline-no">&nbsp;</span>
520
+ <span class="cline-any cline-no">&nbsp;</span>
521
+ <span class="cline-any cline-no">&nbsp;</span>
522
+ <span class="cline-any cline-no">&nbsp;</span>
523
+ <span class="cline-any cline-no">&nbsp;</span>
524
+ <span class="cline-any cline-no">&nbsp;</span>
525
+ <span class="cline-any cline-no">&nbsp;</span>
526
+ <span class="cline-any cline-no">&nbsp;</span>
527
+ <span class="cline-any cline-no">&nbsp;</span>
528
+ <span class="cline-any cline-no">&nbsp;</span>
529
+ <span class="cline-any cline-no">&nbsp;</span>
530
+ <span class="cline-any cline-no">&nbsp;</span>
531
+ <span class="cline-any cline-no">&nbsp;</span>
532
+ <span class="cline-any cline-no">&nbsp;</span>
533
+ <span class="cline-any cline-no">&nbsp;</span>
534
+ <span class="cline-any cline-no">&nbsp;</span>
535
+ <span class="cline-any cline-no">&nbsp;</span>
536
+ <span class="cline-any cline-no">&nbsp;</span>
537
+ <span class="cline-any cline-no">&nbsp;</span>
538
+ <span class="cline-any cline-no">&nbsp;</span>
539
+ <span class="cline-any cline-no">&nbsp;</span>
540
+ <span class="cline-any cline-no">&nbsp;</span>
541
+ <span class="cline-any cline-no">&nbsp;</span>
542
+ <span class="cline-any cline-no">&nbsp;</span>
543
+ <span class="cline-any cline-no">&nbsp;</span>
544
+ <span class="cline-any cline-no">&nbsp;</span>
545
+ <span class="cline-any cline-no">&nbsp;</span>
546
+ <span class="cline-any cline-no">&nbsp;</span>
547
+ <span class="cline-any cline-no">&nbsp;</span>
548
+ <span class="cline-any cline-no">&nbsp;</span>
549
+ <span class="cline-any cline-no">&nbsp;</span>
550
+ <span class="cline-any cline-no">&nbsp;</span>
551
+ <span class="cline-any cline-no">&nbsp;</span>
552
+ <span class="cline-any cline-no">&nbsp;</span>
553
+ <span class="cline-any cline-no">&nbsp;</span>
554
+ <span class="cline-any cline-no">&nbsp;</span>
555
+ <span class="cline-any cline-no">&nbsp;</span>
556
+ <span class="cline-any cline-no">&nbsp;</span>
557
+ <span class="cline-any cline-no">&nbsp;</span>
558
+ <span class="cline-any cline-no">&nbsp;</span>
559
+ <span class="cline-any cline-no">&nbsp;</span>
560
+ <span class="cline-any cline-no">&nbsp;</span>
561
+ <span class="cline-any cline-no">&nbsp;</span>
562
+ <span class="cline-any cline-no">&nbsp;</span>
563
+ <span class="cline-any cline-no">&nbsp;</span>
564
+ <span class="cline-any cline-no">&nbsp;</span>
565
+ <span class="cline-any cline-no">&nbsp;</span>
566
+ <span class="cline-any cline-no">&nbsp;</span>
567
+ <span class="cline-any cline-no">&nbsp;</span>
568
+ <span class="cline-any cline-no">&nbsp;</span>
569
+ <span class="cline-any cline-no">&nbsp;</span>
570
+ <span class="cline-any cline-no">&nbsp;</span>
571
+ <span class="cline-any cline-yes">1x</span>
572
+ <span class="cline-any cline-yes">1x</span>
573
+ <span class="cline-any cline-yes">1x</span>
574
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { throttle } from '../functions/throttle.function';
575
+ import { assign } from '../functions/assign.function';
576
+ &nbsp;
577
+ const camelCaseToKebabCase = <span class="fstat-no" title="function not covered" >(str?: string) =&gt;</span>
578
+ <span class="cstat-no" title="statement not covered" > str ? str.replace(/([A-Z])/g, g =&gt; `-${g[0].toLowerCase()}`) : '';</span>
579
+ &nbsp;
580
+ export interface AnimationStep {
581
+ // First one is always start state
582
+ // isStartState?: boolean;
583
+ styles: { [key: string]: string };
584
+ delay?: number;
585
+ }
586
+ &nbsp;
587
+ export interface Animation {
588
+ elementId: string;
589
+ trigger: string;
590
+ steps: AnimationStep[];
591
+ duration: number;
592
+ delay?: number;
593
+ easing?: string;
594
+ // TODO: deprecate - only here because of an API bug
595
+ id?: string;
596
+ // only apply in scrollInView
597
+ repeat?: boolean;
598
+ // only apply in scrollInView, number from -1 to 1
599
+ thresholdPercent?: number;
600
+ }
601
+ &nbsp;
602
+ export class Animator {
603
+ <span class="fstat-no" title="function not covered" > bindAnimations(animations: Animation[]) {</span>
604
+ <span class="cstat-no" title="statement not covered" > for (const animation of animations) {</span>
605
+ <span class="cstat-no" title="statement not covered" > switch (animation.trigger) {</span>
606
+ <span class="cstat-no" title="statement not covered" > case 'pageLoad':</span>
607
+ <span class="cstat-no" title="statement not covered" > this.triggerAnimation(animation);</span>
608
+ <span class="cstat-no" title="statement not covered" > break;</span>
609
+ <span class="cstat-no" title="statement not covered" > case 'hover':</span>
610
+ <span class="cstat-no" title="statement not covered" > this.bindHoverAnimation(animation);</span>
611
+ <span class="cstat-no" title="statement not covered" > break;</span>
612
+ <span class="cstat-no" title="statement not covered" > case 'scrollInView':</span>
613
+ <span class="cstat-no" title="statement not covered" > this.bindScrollInViewAnimation(animation);</span>
614
+ <span class="cstat-no" title="statement not covered" > break;</span>
615
+ }
616
+ }
617
+ }
618
+ &nbsp;
619
+ private <span class="fstat-no" title="function not covered" >warnElementNotPresent(id: string) {</span>
620
+ <span class="cstat-no" title="statement not covered" > console.warn(`Cannot animate element: element with ID ${id} not found!`);</span>
621
+ }
622
+ &nbsp;
623
+ private <span class="fstat-no" title="function not covered" >augmentAnimation(animation: Animation, element: HTMLElement) {</span>
624
+ <span class="cstat-no" title="statement not covered" > const stylesUsed = this.getAllStylesUsed(animation);</span>
625
+ <span class="cstat-no" title="statement not covered" > const computedStyle: any = getComputedStyle(element);</span>
626
+ <span class="cstat-no" title="statement not covered" > // const computedStyle = getComputedStyle(element);</span>
627
+ <span class="cstat-no" title="statement not covered" > // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm</span>
628
+ <span class="cstat-no" title="statement not covered" > // Need to use transform instead of left since left can change on screen sizes</span>
629
+ <span class="cstat-no" title="statement not covered" > const firstStyles = animation.steps[0].styles;</span>
630
+ <span class="cstat-no" title="statement not covered" > const lastStyles = animation.steps[animation.steps.length - 1]!.styles;</span>
631
+ <span class="cstat-no" title="statement not covered" > const bothStyles = [firstStyles, lastStyles];</span>
632
+ <span class="cstat-no" title="statement not covered" ></span>
633
+ <span class="cstat-no" title="statement not covered" > // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this</span>
634
+ <span class="cstat-no" title="statement not covered" > for (const styles of bothStyles) {</span>
635
+ <span class="cstat-no" title="statement not covered" > for (const style of stylesUsed) {</span>
636
+ <span class="cstat-no" title="statement not covered" > if (!(style in styles)) {</span>
637
+ <span class="cstat-no" title="statement not covered" > styles[style] = computedStyle[style];</span>
638
+ }
639
+ }
640
+ }
641
+ }
642
+ &nbsp;
643
+ private <span class="fstat-no" title="function not covered" >getAllStylesUsed(animation: Animation) {</span>
644
+ <span class="cstat-no" title="statement not covered" > const properties: (keyof CSSStyleDeclaration)[] = [];</span>
645
+ <span class="cstat-no" title="statement not covered" > for (const step of animation.steps) {</span>
646
+ <span class="cstat-no" title="statement not covered" > for (const key in step.styles) {</span>
647
+ <span class="cstat-no" title="statement not covered" > if (properties.indexOf(key as any) === -1) {</span>
648
+ <span class="cstat-no" title="statement not covered" > properties.push(key as any);</span>
649
+ <span class="cstat-no" title="statement not covered" > }</span>
650
+ <span class="cstat-no" title="statement not covered" > }</span>
651
+ <span class="cstat-no" title="statement not covered" > }</span>
652
+ <span class="cstat-no" title="statement not covered" > return properties;</span>
653
+ }
654
+ &nbsp;
655
+ <span class="fstat-no" title="function not covered" > triggerAnimation(animation: Animation) {</span>
656
+ <span class="cstat-no" title="statement not covered" > // TODO: do for ALL elements</span>
657
+ <span class="cstat-no" title="statement not covered" > const elements = Array.prototype.slice.call(</span>
658
+ <span class="cstat-no" title="statement not covered" > document.getElementsByClassName(animation.elementId || animation.id || '')</span>
659
+ <span class="cstat-no" title="statement not covered" > ) as HTMLElement[];</span>
660
+ <span class="cstat-no" title="statement not covered" > if (!elements.length) {</span>
661
+ <span class="cstat-no" title="statement not covered" > this.warnElementNotPresent(animation.elementId || animation.id || '');</span>
662
+ <span class="cstat-no" title="statement not covered" > return;</span>
663
+ <span class="cstat-no" title="statement not covered" > }</span>
664
+ <span class="cstat-no" title="statement not covered" ></span>
665
+ <span class="cstat-no" title="statement not covered" > Array.from(elements).forEach(element =&gt; {</span>
666
+ <span class="cstat-no" title="statement not covered" > this.augmentAnimation(animation, element);</span>
667
+ <span class="cstat-no" title="statement not covered" > // TODO: do this properly, may have other animations of different properties</span>
668
+ <span class="cstat-no" title="statement not covered" ></span>
669
+ <span class="cstat-no" title="statement not covered" > // TODO: only override the properties</span>
670
+ <span class="cstat-no" title="statement not covered" > // TODO: if there is an entrance and hover animation, the transition duration will get effed</span>
671
+ <span class="cstat-no" title="statement not covered" > // element.setAttribute('style', '');</span>
672
+ <span class="cstat-no" title="statement not covered" ></span>
673
+ <span class="cstat-no" title="statement not covered" > // const styledUsed = this.getAllStylesUsed(animation);</span>
674
+ <span class="cstat-no" title="statement not covered" > element.style.transition = 'none';</span>
675
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = '0';</span>
676
+ <span class="cstat-no" title="statement not covered" > assign(element.style, animation.steps[0].styles);</span>
677
+ <span class="cstat-no" title="statement not covered" > // TODO: queue/batch these timeouts</span>
678
+ <span class="cstat-no" title="statement not covered" > // TODO: only include properties explicitly set in the animation</span>
679
+ <span class="cstat-no" title="statement not covered" > // using Object.keys(styles)</span>
680
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
681
+ <span class="cstat-no" title="statement not covered" > element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(</span>
682
+ <span class="cstat-no" title="statement not covered" > animation.easing</span>
683
+ <span class="cstat-no" title="statement not covered" > )}`;</span>
684
+ <span class="cstat-no" title="statement not covered" > if (animation.delay) {</span>
685
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = animation.delay + 's';</span>
686
+ <span class="cstat-no" title="statement not covered" > }</span>
687
+ <span class="cstat-no" title="statement not covered" > assign(element.style, animation.steps[1].styles);</span>
688
+ <span class="cstat-no" title="statement not covered" > // TODO: maybe remove/reset transitoin property after animation duration</span>
689
+ <span class="cstat-no" title="statement not covered" ></span>
690
+ <span class="cstat-no" title="statement not covered" > // TODO: queue timers</span>
691
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
692
+ <span class="cstat-no" title="statement not covered" > // TODO: what if has other transition (reset back to what it was)</span>
693
+ <span class="cstat-no" title="statement not covered" > element.style.transition = '';</span>
694
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = '';</span>
695
+ <span class="cstat-no" title="statement not covered" > }, (animation.delay || 0) * 1000 + animation.duration * 1000 + 100);</span>
696
+ });
697
+ });
698
+ }
699
+ &nbsp;
700
+ <span class="fstat-no" title="function not covered" > bindHoverAnimation(animation: Animation) {</span>
701
+ <span class="cstat-no" title="statement not covered" > // TODO: is it multiple binding when editing...?</span>
702
+ <span class="cstat-no" title="statement not covered" > // TODO: unbind on element remove</span>
703
+ <span class="cstat-no" title="statement not covered" > // TODO: apply to ALL elements</span>
704
+ <span class="cstat-no" title="statement not covered" > const elements = Array.prototype.slice.call(</span>
705
+ <span class="cstat-no" title="statement not covered" > document.getElementsByClassName(animation.elementId || animation.id || '')</span>
706
+ <span class="cstat-no" title="statement not covered" > ) as HTMLElement[];</span>
707
+ <span class="cstat-no" title="statement not covered" > if (!elements.length) {</span>
708
+ <span class="cstat-no" title="statement not covered" > this.warnElementNotPresent(animation.elementId || animation.id || '');</span>
709
+ <span class="cstat-no" title="statement not covered" > return;</span>
710
+ <span class="cstat-no" title="statement not covered" > }</span>
711
+ <span class="cstat-no" title="statement not covered" ></span>
712
+ <span class="cstat-no" title="statement not covered" > Array.from(elements).forEach(element =&gt; {</span>
713
+ <span class="cstat-no" title="statement not covered" > this.augmentAnimation(animation, element);</span>
714
+ <span class="cstat-no" title="statement not covered" ></span>
715
+ <span class="cstat-no" title="statement not covered" > const defaultState = animation.steps[0].styles;</span>
716
+ <span class="cstat-no" title="statement not covered" > const hoverState = animation.steps[1].styles;</span>
717
+ <span class="cstat-no" title="statement not covered" > function attachDefaultState() {</span>
718
+ <span class="cstat-no" title="statement not covered" > assign(element!.style, defaultState);</span>
719
+ <span class="cstat-no" title="statement not covered" > }</span>
720
+ <span class="cstat-no" title="statement not covered" > function attachHoverState() {</span>
721
+ <span class="cstat-no" title="statement not covered" > assign(element!.style, hoverState);</span>
722
+ <span class="cstat-no" title="statement not covered" > }</span>
723
+ <span class="cstat-no" title="statement not covered" > attachDefaultState();</span>
724
+ <span class="cstat-no" title="statement not covered" > element.addEventListener('mouseenter', attachHoverState);</span>
725
+ <span class="cstat-no" title="statement not covered" > element.addEventListener('mouseleave', attachDefaultState);</span>
726
+ <span class="cstat-no" title="statement not covered" > // TODO: queue/batch these timeouts</span>
727
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
728
+ <span class="cstat-no" title="statement not covered" > element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(</span>
729
+ <span class="cstat-no" title="statement not covered" > animation.easing</span>
730
+ <span class="cstat-no" title="statement not covered" > )}`;</span>
731
+ <span class="cstat-no" title="statement not covered" > if (animation.delay) {</span>
732
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = animation.delay + 's';</span>
733
+ }
734
+ });
735
+ });
736
+ }
737
+ &nbsp;
738
+ // TODO: unbind on element remove
739
+ <span class="fstat-no" title="function not covered" > bindScrollInViewAnimation(animation: Animation) {</span>
740
+ <span class="cstat-no" title="statement not covered" > // TODO: apply to ALL matching elements</span>
741
+ <span class="cstat-no" title="statement not covered" > const elements = Array.prototype.slice.call(</span>
742
+ <span class="cstat-no" title="statement not covered" > document.getElementsByClassName(animation.elementId || animation.id || '')</span>
743
+ <span class="cstat-no" title="statement not covered" > ) as HTMLElement[];</span>
744
+ <span class="cstat-no" title="statement not covered" > if (!elements.length) {</span>
745
+ <span class="cstat-no" title="statement not covered" > this.warnElementNotPresent(animation.elementId || animation.id || '');</span>
746
+ <span class="cstat-no" title="statement not covered" > return;</span>
747
+ <span class="cstat-no" title="statement not covered" > }</span>
748
+ <span class="cstat-no" title="statement not covered" ></span>
749
+ <span class="cstat-no" title="statement not covered" > // TODO: if server side rendered and scrolled into view don't animate...</span>
750
+ <span class="cstat-no" title="statement not covered" > Array.from(elements).forEach(element =&gt; {</span>
751
+ <span class="cstat-no" title="statement not covered" > this.augmentAnimation(animation, element);</span>
752
+ <span class="cstat-no" title="statement not covered" ></span>
753
+ <span class="cstat-no" title="statement not covered" > let triggered = false;</span>
754
+ <span class="cstat-no" title="statement not covered" > let pendingAnimation = false;</span>
755
+ <span class="cstat-no" title="statement not covered" > function immediateOnScroll() {</span>
756
+ <span class="cstat-no" title="statement not covered" > if (!triggered &amp;&amp; isScrolledIntoView(element)) {</span>
757
+ <span class="cstat-no" title="statement not covered" > triggered = true;</span>
758
+ <span class="cstat-no" title="statement not covered" > pendingAnimation = true;</span>
759
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
760
+ <span class="cstat-no" title="statement not covered" > assign(element!.style, animation.steps[1].styles);</span>
761
+ <span class="cstat-no" title="statement not covered" > if (!animation.repeat) {</span>
762
+ <span class="cstat-no" title="statement not covered" > document.removeEventListener('scroll', onScroll);</span>
763
+ <span class="cstat-no" title="statement not covered" > }</span>
764
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
765
+ <span class="cstat-no" title="statement not covered" > pendingAnimation = false;</span>
766
+ <span class="cstat-no" title="statement not covered" > if (!animation.repeat) {</span>
767
+ <span class="cstat-no" title="statement not covered" > element.style.transition = '';</span>
768
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = '';</span>
769
+ <span class="cstat-no" title="statement not covered" > }</span>
770
+ <span class="cstat-no" title="statement not covered" > }, (animation.duration + (animation.delay || 0)) * 1000 + 100);</span>
771
+ <span class="cstat-no" title="statement not covered" > });</span>
772
+ <span class="cstat-no" title="statement not covered" > } else if (</span>
773
+ <span class="cstat-no" title="statement not covered" > animation.repeat &amp;&amp;</span>
774
+ <span class="cstat-no" title="statement not covered" > triggered &amp;&amp;</span>
775
+ <span class="cstat-no" title="statement not covered" > !pendingAnimation &amp;&amp;</span>
776
+ <span class="cstat-no" title="statement not covered" > !isScrolledIntoView(element)</span>
777
+ <span class="cstat-no" title="statement not covered" > ) {</span>
778
+ <span class="cstat-no" title="statement not covered" > // we want to repeat the animation every time the the element is out of view and back again</span>
779
+ <span class="cstat-no" title="statement not covered" > triggered = false;</span>
780
+ <span class="cstat-no" title="statement not covered" > assign(element!.style, animation.steps[0].styles);</span>
781
+ <span class="cstat-no" title="statement not covered" > }</span>
782
+ <span class="cstat-no" title="statement not covered" > }</span>
783
+ <span class="cstat-no" title="statement not covered" ></span>
784
+ <span class="cstat-no" title="statement not covered" > // TODO: roll all of these in one for more efficiency of checking all the rects</span>
785
+ <span class="cstat-no" title="statement not covered" > const onScroll = throttle(immediateOnScroll, 200, { leading: false });</span>
786
+ <span class="cstat-no" title="statement not covered" ></span>
787
+ <span class="cstat-no" title="statement not covered" > // TODO: fully in view or partially</span>
788
+ <span class="cstat-no" title="statement not covered" > function isScrolledIntoView(elem: HTMLElement) {</span>
789
+ <span class="cstat-no" title="statement not covered" > const rect = elem.getBoundingClientRect();</span>
790
+ <span class="cstat-no" title="statement not covered" ></span>
791
+ <span class="cstat-no" title="statement not covered" > const windowHeight = window.innerHeight;</span>
792
+ <span class="cstat-no" title="statement not covered" ></span>
793
+ <span class="cstat-no" title="statement not covered" > const thresholdPercent = (animation.thresholdPercent || 0) / 100;</span>
794
+ <span class="cstat-no" title="statement not covered" > const threshold = thresholdPercent * windowHeight;</span>
795
+ <span class="cstat-no" title="statement not covered" ></span>
796
+ <span class="cstat-no" title="statement not covered" > // TODO: partial in view? or what if element is larger than screen itself</span>
797
+ <span class="cstat-no" title="statement not covered" > return (</span>
798
+ <span class="cstat-no" title="statement not covered" > rect.bottom &gt; threshold &amp;&amp; rect.top &lt; windowHeight - threshold // Element is peeking top or bottom</span>
799
+ <span class="cstat-no" title="statement not covered" > // (rect.top &gt; 0 &amp;&amp; rect.bottom &lt; window.innerHeight) || // element fits within the screen and is fully on screen (not hanging off at all)</span>
800
+ <span class="cstat-no" title="statement not covered" > // (rect.top &lt; 0 &amp;&amp; rect.bottom &gt; window.innerHeight) // element is larger than the screen and hangs over the top and bottom</span>
801
+ <span class="cstat-no" title="statement not covered" > );</span>
802
+ <span class="cstat-no" title="statement not covered" > }</span>
803
+ <span class="cstat-no" title="statement not covered" ></span>
804
+ <span class="cstat-no" title="statement not covered" > const defaultState = animation.steps[0].styles;</span>
805
+ <span class="cstat-no" title="statement not covered" > function attachDefaultState() {</span>
806
+ <span class="cstat-no" title="statement not covered" > assign(element!.style, defaultState);</span>
807
+ <span class="cstat-no" title="statement not covered" > }</span>
808
+ <span class="cstat-no" title="statement not covered" > attachDefaultState();</span>
809
+ <span class="cstat-no" title="statement not covered" ></span>
810
+ <span class="cstat-no" title="statement not covered" > // TODO: queue/batch these timeouts!</span>
811
+ <span class="cstat-no" title="statement not covered" > setTimeout(() =&gt; {</span>
812
+ <span class="cstat-no" title="statement not covered" > element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(</span>
813
+ <span class="cstat-no" title="statement not covered" > animation.easing</span>
814
+ <span class="cstat-no" title="statement not covered" > )}`;</span>
815
+ <span class="cstat-no" title="statement not covered" > if (animation.delay) {</span>
816
+ <span class="cstat-no" title="statement not covered" > element.style.transitionDelay = animation.delay + 's';</span>
817
+ <span class="cstat-no" title="statement not covered" > }</span>
818
+ <span class="cstat-no" title="statement not covered" > });</span>
819
+ <span class="cstat-no" title="statement not covered" ></span>
820
+ <span class="cstat-no" title="statement not covered" > // TODO: one listener for everything</span>
821
+ <span class="cstat-no" title="statement not covered" > document.addEventListener('scroll', onScroll, { capture: true, passive: true } as any);</span>
822
+ <span class="cstat-no" title="statement not covered" ></span>
823
+ <span class="cstat-no" title="statement not covered" > // Do an initial check</span>
824
+ <span class="cstat-no" title="statement not covered" > immediateOnScroll();</span>
825
+ });
826
+ }
827
+ }
828
+ &nbsp;</pre></td></tr></table></pre>
829
+
830
+ <div class='push'></div><!-- for sticky footer -->
831
+ </div><!-- /wrapper -->
832
+ <div class='footer quiet pad2 space-top1 center small'>
833
+ Code coverage generated by
834
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
835
+ at 2024-01-24T22:41:55.009Z
836
+ </div>
837
+ <script src="../../prettify.js"></script>
838
+ <script>
839
+ window.onload = function () {
840
+ prettyPrint();
841
+ };
842
+ </script>
843
+ <script src="../../sorter.js"></script>
844
+ <script src="../../block-navigation.js"></script>
845
+ </body>
846
+ </html>
847
+