frayerjj-frontend 0.3.7 → 0.3.9

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/init.js +3 -3
  3. package/src/loading.js +91 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frayerjj-frontend",
3
- "version": "0.3.7",
3
+ "version": "0.3.9",
4
4
  "description": "My base frontend for various projects",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/init.js CHANGED
@@ -12,7 +12,7 @@ import { phoneInput } from './phoneInput';
12
12
  import { session } from './session';
13
13
  import { validate } from './validate';
14
14
 
15
- export const init = () => {
15
+ export const init = (args) => {
16
16
 
17
17
  window.bootstrap = bootstrap;
18
18
  window.createPopper = createPopper;
@@ -22,8 +22,8 @@ export const init = () => {
22
22
  window.validate = validate;
23
23
  window.loading = loading;
24
24
  window.ClassicEditor = ClassicEditor;
25
- loading.init();
26
-
25
+ loading.init(args.loadingAnimationStyle || 'default');
26
+
27
27
  window.addEventListener('load', () => {
28
28
 
29
29
  msg.verbose('Page Loaded, Initializing');
package/src/loading.js CHANGED
@@ -3,40 +3,105 @@ import { session } from './session';
3
3
 
4
4
  export const loading = {
5
5
 
6
- rotation: session.getIntVar('loadingRotation', 3),
6
+ planetarium: {
7
7
 
8
- build: el => {
9
- if (loading.interval != null) loading.clear();
10
- el.classList.add('loading')
11
- el.insertAdjacentHTML("afterbegin",
12
- '<div class="loader">' +
13
- '<div class="loader-circle"></div>' +
14
- '<div class="loader-line-mask" style="transform:rotate(' + loading.rotation + 'deg)">' +
15
- '<div class="loader-line"></div>' +
16
- '</div>' +
17
- '<div class="loader-logo"></div>' +
8
+ shadowOffset: session.getIntVar('loadingShadowOffset', -62),
9
+ logoOffset: session.getIntVar('loadingLogoOffset', -22),
10
+ wait: session.getIntVar('loadingWait', 20),
11
+ delay: session.getIntVar('loadingDelay', 10),
12
+
13
+ build: el => {
14
+ if (loading.interval != null) loading.clear();
15
+ el.classList.add('loading')
16
+ el.insertAdjacentHTML("afterbegin",
17
+ '<div class="loader planetarium">' +
18
+ '<div class="loader-circle"></div>' +
19
+ '<div class="loader-shadow" style="margin-top:' + (loading.planetarium.shadowOffset - 15) + 'px;margin-left:' + loading.planetarium.shadowOffset + 'px;">' +
20
+ '<div class="loader-logo" style="margin-top:' + loading.planetarium.logoOffset + 'px;margin-left:' + loading.planetarium.logoOffset + 'px;"></div>' +
21
+ '</div>' +
18
22
  '<div class="loader-text">Loading</div>' +
19
23
  '</div>');
24
+ },
25
+
26
+ animation: () => {
27
+ if (document.querySelector('.loading') == null) {
28
+ clearInterval(loading.interval);
29
+ loading.interval = null;
30
+ } else {
31
+ if (loading.shadowOffset == -40) {
32
+ clearInterval(loading.interval);
33
+ loading.planetarium.delay = 20;
34
+ loading.interval = setInterval(loading.animation, loading.planetarium.delay);
35
+ }
36
+ if (loading.shadowOffset == -100) {
37
+ clearInterval(loading.interval);
38
+ loading.planetarium.delay = 10;
39
+ loading.interval = setInterval(loading.animation, loading.planetarium.delay);
40
+ }
41
+ if (loading.planetarium.shadowOffset == -60 && loading.planetarium.wait > 0) loading.planetarium.wait--;
42
+ else if (loading.planetarium.wait == 0) {
43
+ loading.planetarium.shadowOffset -= 2;
44
+ loading.planetarium.logoOffset += 2;
45
+ loading.planetarium.wait = 20;
46
+ } else {
47
+ loading.planetarium.shadowOffset -= 2;
48
+ loading.planetarium.logoOffset += 2;
49
+ loading.planetarium.wait = 20;
50
+ }
51
+ if (loading.planetarium.shadowOffset == -180) {
52
+ loading.planetarium.shadowOffset = 60;
53
+ loading.planetarium.logoOffset = -144;
54
+ }
55
+ let shadow = document.querySelector('.loader-shadow');
56
+ if (shadow) shadow.style.cssText = 'margin-top:' + (loading.planetarium.shadowOffset - 15) + 'px;margin-left:' + loading.planetarium.shadowOffset + 'px;';
57
+ let logo = document.querySelector('.loader-logo');
58
+ if (logo) logo.style.cssText = 'margin-top:' + loading.planetarium.logoOffset + 'px;margin-left:' + loading.planetarium.logoOffset + 'px;';
59
+ session.set('loadingShadowOffset', loading.planetarium.shadowOffset);
60
+ session.set('loadingLogoOffset', loading.planetarium.logoOffset);
61
+ session.set('loadingWait', loading.planetarium.wait);
62
+ session.set('loadingDelay', loading.planetarium.delay);
63
+ }
64
+ }
20
65
  },
21
-
22
- animation: () => {
23
- if (document.querySelector('.loading') == null) {
24
- clearInterval(loading.interval);
25
- loading.interval = null;
26
- } else {
27
- loading.rotation += 3;
28
- if (loading.rotation >= 360) loading.rotation = 0;
29
- let mask = document.querySelector('.loader-line-mask');
30
- if (mask) mask.style.cssText = 'transform:rotate(' + loading.rotation + 'deg)';
31
- session.set('loadingRotation', loading.rotation);
66
+
67
+ default: {
68
+ rotation: session.getIntVar('loadingRotation', 3),
69
+
70
+ build: el => {
71
+ if (loading.interval != null) loading.clear();
72
+ el.classList.add('loading')
73
+ el.insertAdjacentHTML("afterbegin",
74
+ '<div class="loader">' +
75
+ '<div class="loader-circle"></div>' +
76
+ '<div class="loader-line-mask" style="transform:rotate(' + loading.default.rotation + 'deg)">' +
77
+ '<div class="loader-line"></div>' +
78
+ '</div>' +
79
+ '<div class="loader-logo"></div>' +
80
+ '<div class="loader-text">Loading</div>' +
81
+ '</div>');
82
+ },
83
+
84
+ animation: () => {
85
+ if (document.querySelector('.loading') == null) {
86
+ clearInterval(loading.interval);
87
+ loading.interval = null;
88
+ } else {
89
+ loading.default.rotation += 3;
90
+ if (loading.default.rotation >= 360) loading.default.rotation = 0;
91
+ let mask = document.querySelector('.loader-line-mask');
92
+ if (mask) mask.style.cssText = 'transform:rotate(' + loading.default.rotation + 'deg)';
93
+ session.set('loadingRotation', loading.default.rotation);
94
+ }
32
95
  }
33
96
  },
97
+
98
+ animationStyle: 'default',
34
99
 
35
100
  start: (unload = 0, el) => {
36
101
  if (loading.interval != null) return;
37
102
  else {
38
103
  if (el == null) el = document.querySelector('body');
39
- loading.build(el);
104
+ loading[loading.animationStyle].build(el);
40
105
  if (unload) {
41
106
  let opacity = 0;
42
107
  let fade = setInterval(() => {
@@ -47,7 +112,7 @@ export const loading = {
47
112
  }
48
113
  }, 50);
49
114
  }
50
- loading.interval = setInterval(loading.animation, 10);
115
+ loading.interval = setInterval(loading[loading.animationStyle].animation, 10);
51
116
  }
52
117
  },
53
118
 
@@ -70,7 +135,8 @@ export const loading = {
70
135
  }, 50);
71
136
  },
72
137
 
73
- init: () => {
138
+ init: (animationStyle = null) => {
139
+ if (animationStyle != null) loading.animationStyle = animationStyle;
74
140
  window.addEventListener('DOMContentLoaded', () => {
75
141
  msg.verbose('DOM Loaded, Starting Animation');
76
142
  loading.start();