UnitApi /
js
| 1 | var Load = function (target, success, error) { |
||
| 2 | //url is URL of external file, success is the code |
||
| 3 | //to be called from the file, location is the location to |
||
| 4 | //insert the <script> element |
||
| 5 | this.cfg = {}; |
||
| 6 | this.cfg.target = target; |
||
| 7 | this.cfg.delay = 0; |
||
| 8 | this.cfg.cache = 1; |
||
| 9 | this.cfg.domain = ''; |
||
| 10 | this.cfg.env = ''; |
||
| 11 | |||
| 12 | this.success = success; |
||
| 13 | this.error = error; |
||
| 14 | |||
| 15 | |||
| 16 | var self = this; |
||
| 17 | |||
| 18 | |||
| 19 | this.env = function (env) { |
||
| 20 | self.cfg.env = env; |
||
| 21 | |||
| 22 | return this; |
||
| 23 | }; |
||
| 24 | |||
| 25 | |||
| 26 | this.domain = function (domain) { |
||
| 27 | self.cfg.domain = domain; |
||
| 28 | |||
| 29 | return this; |
||
| 30 | }; |
||
| 31 | |||
| 32 | this.target = function (target) { |
||
| 33 | self.cfg.target = target; |
||
| 34 | return this; |
||
| 35 | }; |
||
| 36 | |||
| 37 | this.delay = function (delay) { |
||
| 38 | self.cfg.delay = delay; |
||
| 39 | return this; |
||
| 40 | }; |
||
| 41 | |||
| 42 | this.cache = function (cache) { |
||
| 43 | self.cfg.cache = cache; |
||
| 44 | return this; |
||
| 45 | }; |
||
| 46 | |||
| 47 | this.cacheOff = function () { |
||
| 48 | self.cfg.cache = 0; |
||
| 49 | |||
| 50 | return this; |
||
| 51 | }; |
||
| 52 | |||
| 53 | this.cacheOn = function () { |
||
| 54 | self.cfg.cache = 1; |
||
| 55 | |||
| 56 | return this; |
||
| 57 | }; |
||
| 58 | |||
| 59 | this.js = function (url) { |
||
| 60 | if (typeof self.cfg.delay === 'number' && self.cfg.delay > 1) { |
||
| 61 | setTimeout(function () { |
||
| 62 | console.log('delayed', self.cfg.delay, url); |
||
|
0 ignored issues
–
show
Debugging Code
introduced
by
Loading history...
|
|||
| 63 | self.loadJs(url, self.cfg.target, self.success, self.error); |
||
| 64 | }, |
||
| 65 | self.cfg.delay |
||
| 66 | ); |
||
| 67 | } else { |
||
| 68 | console.log('loaded', url); |
||
|
0 ignored issues
–
show
|
|||
| 69 | self.loadJs(url, self.cfg.target, self.success, self.error); |
||
| 70 | } |
||
| 71 | return this; |
||
| 72 | }; |
||
| 73 | this.javascript = this.js; |
||
| 74 | this.script = this.js; |
||
| 75 | |||
| 76 | |||
| 77 | // TODO: check if is loaded |
||
| 78 | this.loadJs = function (url, target, success, error) { |
||
| 79 | var suffix = ''; |
||
| 80 | if (typeof self.cfg.cache === 'number' && self.cfg.cache !== 1) { |
||
| 81 | suffix = '?' + time(); |
||
| 82 | } |
||
| 83 | |||
| 84 | var domain = ''; |
||
| 85 | if (typeof self.cfg.domain === 'string' && self.cfg.domain.length > 0) { |
||
| 86 | domain = self.cfg.domain; |
||
| 87 | } |
||
| 88 | |||
| 89 | if (typeof url === 'object') { |
||
| 90 | //console.log('obj:', obj); |
||
| 91 | |||
| 92 | for (var i in url) { |
||
|
0 ignored issues
–
show
A for in loop automatically includes the property of any prototype object, consider checking the key using
hasOwnProperty.
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject;
for (var key in someObject) {
if ( ! someObject.hasOwnProperty(key)) {
continue; // Skip keys from the prototype.
}
doSomethingWith(key);
}
Loading history...
|
|||
| 93 | |||
| 94 | console.log('load js url[i]', url[i]); |
||
|
0 ignored issues
–
show
|
|||
| 95 | |||
| 96 | try { |
||
| 97 | var exe = includeJs(domain + url[i] + suffix, target, success, error); |
||
| 98 | console.log('load js ', url[i], exe); |
||
| 99 | } catch (err) { |
||
| 100 | console.error('!load js ', url[i], err); |
||
| 101 | } |
||
| 102 | } |
||
| 103 | } else { |
||
| 104 | includeJs(domain + url + suffix, target, success, error); |
||
| 105 | // console.error('apiunit obj: is not object:', obj); |
||
| 106 | } |
||
| 107 | |||
| 108 | return this; |
||
| 109 | }; |
||
| 110 | |||
| 111 | |||
| 112 | this.html = function (url) { |
||
| 113 | if (typeof url === 'object') { |
||
| 114 | //console.log('obj:', obj); |
||
| 115 | |||
| 116 | for (var i in url) { |
||
|
0 ignored issues
–
show
A for in loop automatically includes the property of any prototype object, consider checking the key using
hasOwnProperty.
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject;
for (var key in someObject) {
if ( ! someObject.hasOwnProperty(key)) {
continue; // Skip keys from the prototype.
}
doSomethingWith(key);
}
Loading history...
|
|||
| 117 | |||
| 118 | console.log('load js url[i]', url[i]); |
||
|
0 ignored issues
–
show
|
|||
| 119 | |||
| 120 | try { |
||
| 121 | var exe = includeHtml(url[i], self.cfg.target, success, error); |
||
| 122 | console.log('load js ', url[i], exe); |
||
| 123 | } catch (err) { |
||
| 124 | console.error('!load js ', url[i], err); |
||
| 125 | } |
||
| 126 | } |
||
| 127 | } else { |
||
| 128 | includeHtml(url, self.cfg.target, success, error); |
||
| 129 | // console.error('apiunit obj: is not object:', obj); |
||
| 130 | } |
||
| 131 | return this; |
||
| 132 | }; |
||
| 133 | |||
| 134 | |||
| 135 | this.style = function (url) { |
||
| 136 | if (typeof url === 'object') { |
||
| 137 | //console.log('obj:', obj); |
||
| 138 | |||
| 139 | for (var i in url) { |
||
|
0 ignored issues
–
show
A for in loop automatically includes the property of any prototype object, consider checking the key using
hasOwnProperty.
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject;
for (var key in someObject) {
if ( ! someObject.hasOwnProperty(key)) {
continue; // Skip keys from the prototype.
}
doSomethingWith(key);
}
Loading history...
|
|||
| 140 | |||
| 141 | console.log('load js url[i]', url[i]); |
||
|
0 ignored issues
–
show
|
|||
| 142 | |||
| 143 | try { |
||
| 144 | var exe = includeStyle(url[i], self.cfg.target, success, error); |
||
| 145 | console.log('load js ', url[i], exe); |
||
| 146 | } catch (err) { |
||
| 147 | console.error('!load js ', url[i], err); |
||
| 148 | } |
||
| 149 | } |
||
| 150 | } else { |
||
| 151 | includeHtml(url, self.cfg.target, success, error); |
||
| 152 | // console.error('apiunit obj: is not object:', obj); |
||
| 153 | } |
||
| 154 | return this; |
||
| 155 | }; |
||
| 156 | this.css = this.style; |
||
| 157 | |||
| 158 | this.image = function (url) { |
||
| 159 | if (typeof self.cfg.delay === 'number' && self.cfg.delay > 1) { |
||
| 160 | setTimeout(function () { |
||
| 161 | console.log('image delayed', self.cfg.delay, url); |
||
|
0 ignored issues
–
show
|
|||
| 162 | self.loadImage(url, self.cfg.target, self.success, self.error); |
||
| 163 | }, |
||
| 164 | self.cfg.delay |
||
| 165 | ); |
||
| 166 | } else { |
||
| 167 | console.log('image loaded', url, self.cfg.delay); |
||
|
0 ignored issues
–
show
|
|||
| 168 | self.loadImage(url, self.cfg.target, self.success, self.error); |
||
| 169 | } |
||
| 170 | return this; |
||
| 171 | }; |
||
| 172 | |||
| 173 | this.loadImage = function (url, target, success, error) { |
||
| 174 | if (typeof url === 'object') { |
||
| 175 | //console.log('obj:', obj); |
||
| 176 | |||
| 177 | for (var i in url) { |
||
|
0 ignored issues
–
show
A for in loop automatically includes the property of any prototype object, consider checking the key using
hasOwnProperty.
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject;
for (var key in someObject) {
if ( ! someObject.hasOwnProperty(key)) {
continue; // Skip keys from the prototype.
}
doSomethingWith(key);
}
Loading history...
|
|||
| 178 | |||
| 179 | console.log('load js url[i]', url[i]); |
||
|
0 ignored issues
–
show
|
|||
| 180 | |||
| 181 | try { |
||
| 182 | var exe = includeImage(url[i], target, success, error); |
||
|
0 ignored issues
–
show
|
|||
| 183 | console.log('load js ', url[i], exe); |
||
| 184 | } catch (err) { |
||
| 185 | console.error('!load js ', url[i], err); |
||
| 186 | } |
||
| 187 | } |
||
| 188 | } else { |
||
| 189 | includeImage(url, self.cfg.target, success, error); |
||
| 190 | // console.error('apiunit obj: is not object:', obj); |
||
| 191 | } |
||
| 192 | return this; |
||
| 193 | }; |
||
| 194 | |||
| 195 | this.img = this.image; |
||
| 196 | |||
| 197 | return this; |
||
| 198 | }; |
||
| 199 | |||
| 200 | function includeJs(url, target, success, error) { |
||
| 201 | var scriptTag = document.createElement('script'); |
||
| 202 | scriptTag.src = url; |
||
| 203 | scriptTag.type = 'text/javascript'; |
||
| 204 | |||
| 205 | scriptTag.onerror = error; |
||
| 206 | scriptTag.onload = success; |
||
| 207 | scriptTag.onreadystatechange = success; |
||
| 208 | |||
| 209 | if (typeof target === 'undefined') { |
||
| 210 | target = document.body; |
||
| 211 | } |
||
| 212 | return target.appendChild(scriptTag); |
||
| 213 | } |
||
| 214 | |||
| 215 | View Code Duplication | function includeHtml(url, target, success, error) { |
|
|
0 ignored issues
–
show
|
|||
| 216 | var xhttp; |
||
| 217 | |||
| 218 | var el = new E(target); |
||
| 219 | var elmnt = el.first(); |
||
| 220 | |||
| 221 | if (typeof success !== 'function') { |
||
| 222 | success = function () { |
||
| 223 | console.log('includeHtml success', "included"); |
||
|
0 ignored issues
–
show
|
|||
| 224 | } |
||
| 225 | } |
||
| 226 | |||
| 227 | if (typeof error !== 'function') { |
||
| 228 | error = function () { |
||
| 229 | console.log('includeHtml error', "Page not found."); |
||
|
0 ignored issues
–
show
|
|||
| 230 | } |
||
| 231 | } |
||
| 232 | console.log('includeHtml url', url); |
||
|
0 ignored issues
–
show
|
|||
| 233 | |||
| 234 | if (url) { |
||
| 235 | /* Make an HTTP request using the attribute value as the url name: */ |
||
| 236 | xhttp = new XMLHttpRequest(); |
||
| 237 | xhttp.onreadystatechange = function () { |
||
| 238 | console.log('includeHtml el_id', target); |
||
|
0 ignored issues
–
show
|
|||
| 239 | |||
| 240 | if (this.readyState == 4) { |
||
| 241 | if (this.status == 200) { |
||
| 242 | // console.log('elmnt', elmnt); |
||
| 243 | // console.log('responseText', this.responseText); |
||
| 244 | // elmnt.innerHTML = this.responseText; |
||
| 245 | // elmnt.appendChild(this.responseText); |
||
| 246 | // elmnt.insertAdjacentHTML('beforeend', this.responseText); |
||
| 247 | // var e = document.createElement('div'); |
||
| 248 | // e.innerHTML = this.responseText; |
||
| 249 | // while(e.firstChild) { |
||
| 250 | // elmnt.appendChild(e); |
||
| 251 | // } |
||
| 252 | |||
| 253 | // elmnt.insertAdjacentHTML('afterend', this.responseText); |
||
| 254 | elmnt.insertAdjacentHTML('beforeend', this.responseText); |
||
| 255 | |||
| 256 | success(this); |
||
|
0 ignored issues
–
show
|
|||
| 257 | } |
||
| 258 | if (this.status == 404) { |
||
| 259 | elmnt.innerHTML = "includeHtml Page not found."; |
||
| 260 | error(this); |
||
|
0 ignored issues
–
show
|
|||
| 261 | } |
||
| 262 | /* Remove the attribute, and call this function once more: */ |
||
| 263 | // includeHtml(url, success, error); |
||
| 264 | } |
||
| 265 | } |
||
| 266 | xhttp.open("GET", url, true); |
||
| 267 | xhttp.send(); |
||
| 268 | /* Exit the function: */ |
||
| 269 | return this; |
||
| 270 | } |
||
| 271 | return false; |
||
| 272 | |||
| 273 | } |
||
| 274 | |||
| 275 | function includeStyle(url, target, success, error) { |
||
| 276 | if (typeof target === 'undefined') { |
||
| 277 | // target = document.body; |
||
| 278 | target = document.getElementsByTagName('head')[0]; |
||
| 279 | } |
||
| 280 | |||
| 281 | var link = document.createElement('link'); |
||
| 282 | link.rel = 'stylesheet'; |
||
| 283 | link.type = 'text/css'; |
||
| 284 | link.href = url; |
||
| 285 | |||
| 286 | link.onerror = error; |
||
| 287 | link.onload = success; |
||
| 288 | link.onreadystatechange = success; |
||
| 289 | |||
| 290 | return target.appendChild(link); |
||
| 291 | } |
||
| 292 | |||
| 293 | // function includeImage(url, target, success, error) { |
||
| 294 | |||
| 295 | function includeImage(url, target) { |
||
| 296 | console.log('includeImg url: ', url); |
||
|
0 ignored issues
–
show
|
|||
| 297 | var el = new E(target); |
||
| 298 | var elmnt = el.first(); |
||
| 299 | |||
| 300 | let img = new Image; |
||
|
0 ignored issues
–
show
The variable
Image seems to be never declared. If this is a global, consider adding a /** global: Image */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 301 | img.onload = function () { |
||
| 302 | console.log("includeImg onload: ", url); |
||
|
0 ignored issues
–
show
|
|||
| 303 | elmnt.appendChild(img); |
||
| 304 | }; |
||
| 305 | |||
| 306 | return img.src = url; // erst nach dem Event Listener! |
||
| 307 | |||
| 308 | // var image = document.images[0]; |
||
| 309 | // var downloadingImage = new Image(); |
||
| 310 | // downloadingImage.onload = function () { |
||
| 311 | // image.src = this.src; |
||
| 312 | // }; |
||
| 313 | // downloadingImage.src = url; |
||
| 314 | } |
||
| 315 | |||
| 316 | |||
| 317 | var time = Date.now || function () { |
||
| 318 | return +new Date; |
||
| 319 | }; |
||
| 320 | |||
| 321 | // var time = new Date().getTime().toString(); |
||
| 322 | |||
| 323 | // time(); |
||
| 324 | // environment |
||
| 325 | // var ua = navigator.userAgent; |
||
| 326 | // |
||
| 327 | // if(ua.indexOf('Firefox') !== -1) { |
||
| 328 | // // run Firefox-specific code |
||
| 329 | // } else if(ua.indexOf('Chrome') !== -1) { |
||
| 330 | // // run Chrome-specific code |
||
| 331 | // } |
||
| 332 | |||
| 333 | |||
| 334 | // https://github.com/filamentgroup/loadCSS |
||
| 335 | |||
| 336 | |||
| 337 | View Code Duplication | var E = function (selector, area, error, success) { |
|
|
0 ignored issues
–
show
|
|||
| 338 | this.cfg = {}; |
||
| 339 | this.cfg.area = document; |
||
| 340 | this.cfg.selector = selector; |
||
| 341 | this.cfg.exist = false; |
||
| 342 | |||
| 343 | this.success = function (elem) { |
||
| 344 | console.log("Element elem: ", elem); |
||
|
0 ignored issues
–
show
|
|||
| 345 | }; |
||
| 346 | |||
| 347 | this.error = function (elem) { |
||
| 348 | console.error("! Element elem: ", elem); |
||
| 349 | }; |
||
| 350 | |||
| 351 | if (typeof success === 'function') { |
||
| 352 | this.success = success; |
||
| 353 | } |
||
| 354 | |||
| 355 | if (typeof error === 'function') { |
||
| 356 | this.error = error; |
||
| 357 | } |
||
| 358 | |||
| 359 | |||
| 360 | var self = this; |
||
| 361 | |||
| 362 | this.selector = function (selector) { |
||
| 363 | self.cfg.selector = selector; |
||
| 364 | return this; |
||
| 365 | } |
||
| 366 | |||
| 367 | this.first = function (error, success) { |
||
| 368 | if (typeof success !== 'function') { |
||
| 369 | success = self.success; |
||
| 370 | } |
||
| 371 | if (typeof error !== 'function') { |
||
| 372 | error = self.error; |
||
| 373 | } |
||
| 374 | |||
| 375 | const elem = document.querySelector(self.cfg.selector); |
||
| 376 | |||
| 377 | console.log('E first self.cfg.selector', self.cfg.selector); |
||
|
0 ignored issues
–
show
|
|||
| 378 | console.log('E first elem', elem); |
||
| 379 | |||
| 380 | if (elem !== null) { |
||
| 381 | self.cfg.exist = true; |
||
| 382 | success(elem); |
||
| 383 | return elem; |
||
| 384 | } else { |
||
|
0 ignored issues
–
show
|
|||
| 385 | self.cfg.exist = false; |
||
| 386 | error(); |
||
| 387 | } |
||
| 388 | |||
| 389 | return elem; |
||
| 390 | } |
||
| 391 | |||
| 392 | this.all = function (error, success) { |
||
| 393 | if (typeof success !== 'function') { |
||
| 394 | success = self.success; |
||
| 395 | } |
||
| 396 | if (typeof error !== 'function') { |
||
| 397 | error = self.error; |
||
| 398 | } |
||
| 399 | |||
| 400 | const elem = document.querySelectorAll(self.cfg.selector); |
||
| 401 | |||
| 402 | console.log('E all self.cfg.selector', self.cfg.selector); |
||
|
0 ignored issues
–
show
|
|||
| 403 | console.log('E all elem', elem); |
||
| 404 | |||
| 405 | if (elem !== null) { |
||
| 406 | self.cfg.exist = true; |
||
| 407 | success(elem); |
||
| 408 | } else { |
||
| 409 | self.cfg.exist = false; |
||
| 410 | error(elem); |
||
| 411 | } |
||
| 412 | |||
| 413 | return elem; |
||
| 414 | } |
||
| 415 | }; |
||
| 416 |