@roots/bud-client 0.0.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.
- package/LICENSE.md +19 -0
- package/README.md +77 -0
- package/lib/hot/client.d.ts +6 -0
- package/lib/hot/client.d.ts.map +1 -0
- package/lib/hot/client.js +143 -0
- package/lib/hot/components/index.d.ts +2 -0
- package/lib/hot/components/index.d.ts.map +1 -0
- package/lib/hot/components/index.js +32 -0
- package/lib/hot/components/indicator/index.d.ts +4 -0
- package/lib/hot/components/indicator/index.d.ts.map +1 -0
- package/lib/hot/components/indicator/index.js +17 -0
- package/lib/hot/components/indicator/indicator.component.d.ts +84 -0
- package/lib/hot/components/indicator/indicator.component.d.ts.map +1 -0
- package/lib/hot/components/indicator/indicator.component.js +175 -0
- package/lib/hot/components/indicator/indicator.controller.d.ts +45 -0
- package/lib/hot/components/indicator/indicator.controller.d.ts.map +1 -0
- package/lib/hot/components/indicator/indicator.controller.js +54 -0
- package/lib/hot/components/indicator/indicator.pulse.d.ts +9 -0
- package/lib/hot/components/indicator/indicator.pulse.d.ts.map +1 -0
- package/lib/hot/components/indicator/indicator.pulse.js +36 -0
- package/lib/hot/components/overlay/index.d.ts +4 -0
- package/lib/hot/components/overlay/index.d.ts.map +1 -0
- package/lib/hot/components/overlay/index.js +17 -0
- package/lib/hot/components/overlay/overlay.component.d.ts +20 -0
- package/lib/hot/components/overlay/overlay.component.d.ts.map +1 -0
- package/lib/hot/components/overlay/overlay.component.js +146 -0
- package/lib/hot/components/overlay/overlay.controller.d.ts +46 -0
- package/lib/hot/components/overlay/overlay.controller.d.ts.map +1 -0
- package/lib/hot/components/overlay/overlay.controller.js +70 -0
- package/lib/hot/events.d.ts +98 -0
- package/lib/hot/events.d.ts.map +1 -0
- package/lib/hot/events.js +89 -0
- package/lib/hot/index.cjs +5 -0
- package/lib/hot/index.d.cts +2 -0
- package/lib/hot/index.d.cts.map +1 -0
- package/lib/hot/index.d.mts +2 -0
- package/lib/hot/index.d.mts.map +1 -0
- package/lib/hot/index.mjs +17 -0
- package/lib/hot/log.d.ts +11 -0
- package/lib/hot/log.d.ts.map +1 -0
- package/lib/hot/log.js +37 -0
- package/lib/hot/options.d.ts +17 -0
- package/lib/hot/options.d.ts.map +1 -0
- package/lib/hot/options.js +33 -0
- package/lib/index.cjs +3 -0
- package/lib/index.d.cts +13 -0
- package/lib/index.d.cts.map +1 -0
- package/lib/index.d.mts +13 -0
- package/lib/index.d.mts.map +1 -0
- package/lib/index.mjs +3 -0
- package/lib/intercept/index.d.ts +3 -0
- package/lib/intercept/index.d.ts.map +1 -0
- package/lib/intercept/index.js +18 -0
- package/lib/intercept/proxy-click-interceptor.d.ts +2 -0
- package/lib/intercept/proxy-click-interceptor.d.ts.map +1 -0
- package/lib/intercept/proxy-click-interceptor.js +26 -0
- package/package.json +79 -0
- package/src/hot/client.test.ts +78 -0
- package/src/hot/client.ts +156 -0
- package/src/hot/components/index.ts +33 -0
- package/src/hot/components/indicator/index.ts +11 -0
- package/src/hot/components/indicator/indicator.component.ts +216 -0
- package/src/hot/components/indicator/indicator.controller.ts +76 -0
- package/src/hot/components/indicator/indicator.pulse.ts +43 -0
- package/src/hot/components/overlay/index.ts +12 -0
- package/src/hot/components/overlay/overlay.component.ts +165 -0
- package/src/hot/components/overlay/overlay.controller.ts +86 -0
- package/src/hot/events.ts +93 -0
- package/src/hot/index.cts +7 -0
- package/src/hot/index.mts +9 -0
- package/src/hot/log.ts +42 -0
- package/src/hot/options.ts +40 -0
- package/src/index.cts +16 -0
- package/src/index.mts +16 -0
- package/src/intercept/index.ts +33 -0
- package/src/intercept/proxy-click-interceptor.ts +18 -0
- package/src/types/index.d.ts +54 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Copyright © Roots Software Foundation LLC
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
4
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
5
|
+
the Software without restriction, including without limitation the rights to
|
|
6
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
7
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
8
|
+
so, subject to the following conditions:
|
|
9
|
+
|
|
10
|
+
The above copyright notice and this permission notice shall be included in all
|
|
11
|
+
copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
19
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<p align="center"><img src="https://cdn.roots.io/app/uploads/logo-bud.svg" height="100" alt="bud.js" /></p>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img alt="MIT License" src="https://img.shields.io/github/license/roots/bud?color=%23525ddc&style=flat-square" />
|
|
5
|
+
<img alt="npm" src="https://img.shields.io/npm/v/@roots/bud.svg?color=%23525ddc&style=flat-square" />
|
|
6
|
+
<img alt="Follow Roots" src="https://img.shields.io/twitter/follow/rootswp.svg?color=%23525ddc&style=flat-square" />
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<h1 align="center"><strong>@roots/bud-client</strong></h1>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
Client scripts for @roots/bud
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
Install **@roots/bud-client** to your project.
|
|
20
|
+
|
|
21
|
+
Yarn:
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
yarn add @roots/bud-client --dev
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
npm:
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
npm install @roots/bud-client --save-dev
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Contributing
|
|
34
|
+
|
|
35
|
+
Contributions are welcome from everyone.
|
|
36
|
+
|
|
37
|
+
We have [contribution guidelines](https://github.com/roots/guidelines/blob/master/CONTRIBUTING.md) to help you get started.
|
|
38
|
+
|
|
39
|
+
## License
|
|
40
|
+
|
|
41
|
+
@roots/bud-client is licensed under MIT.
|
|
42
|
+
|
|
43
|
+
## Community
|
|
44
|
+
|
|
45
|
+
Keep track of development and community news.
|
|
46
|
+
|
|
47
|
+
- Join us on Roots Slack by becoming a [GitHub
|
|
48
|
+
sponsor](https://github.com/sponsors/roots)
|
|
49
|
+
- Participate on the [Roots Discourse](https://discourse.roots.io/)
|
|
50
|
+
- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
|
|
51
|
+
- Read and subscribe to the [Roots Blog](https://roots.io/blog/)
|
|
52
|
+
- Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)
|
|
53
|
+
|
|
54
|
+
## Sponsors
|
|
55
|
+
|
|
56
|
+
**Bud** is an open source project and completely free to use.
|
|
57
|
+
|
|
58
|
+
However, the amount of effort needed to maintain and develop new features and projects within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider [sponsoring Roots](https://github.com/sponsors/roots).
|
|
59
|
+
|
|
60
|
+
<a href="https://k-m.com/">
|
|
61
|
+
<img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="200" height="150"/>
|
|
62
|
+
</a>
|
|
63
|
+
<a href="https://carrot.com/">
|
|
64
|
+
<img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="200" height="150"/>
|
|
65
|
+
</a>
|
|
66
|
+
<a href="https://wordpress.com/">
|
|
67
|
+
<img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="200" height="150"/>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="https://pantheon.io/">
|
|
70
|
+
<img src="https://cdn.roots.io/app/uploads/pantheon.svg" alt="Pantheon" width="200" height="150"/>
|
|
71
|
+
</a>
|
|
72
|
+
<a href="https://worksitesafety.ca/careers/">
|
|
73
|
+
<img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="200" height="150"/>
|
|
74
|
+
</a>
|
|
75
|
+
<a href="https://www.copiadigital.com/">
|
|
76
|
+
<img src="https://cdn.roots.io/app/uploads/copia-digital.svg" alt="Copia Digital" width="200" height="150"/>
|
|
77
|
+
</a>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hot/client.ts"],"names":[],"mappings":";AASA;;GAEG;AACH,eAAO,MAAM,MAAM,gBACJ,MAAM,cACP,mBAAmB,GAAG,qBA6InC,CAAA"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
/* global __resourceQuery */
|
|
3
|
+
/* global __webpack_hash__ */
|
|
4
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
5
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
6
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
7
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
8
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
9
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
10
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
import * as components from './components/index.js';
|
|
14
|
+
import { injectEvents } from './events.js';
|
|
15
|
+
import { makeLogger } from './log.js';
|
|
16
|
+
import * as clientOptions from './options.js';
|
|
17
|
+
/**
|
|
18
|
+
* Initializes bud.js HMR handling
|
|
19
|
+
*/
|
|
20
|
+
export const client = (queryString, webpackHot) => __awaiter(void 0, void 0, void 0, function* () {
|
|
21
|
+
/* Guard: EventSource browser support */
|
|
22
|
+
if (typeof (window === null || window === void 0 ? void 0 : window.EventSource) === `undefined`) {
|
|
23
|
+
console.error(`[bud] hot module reload requires EventSource to work. https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools`);
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
/* Guard: webpackHot api availability */
|
|
27
|
+
if (!webpackHot) {
|
|
28
|
+
console.error(`[bud] hot module reload requires the webpack hot api to be available`);
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
/* Set client options from URL params */
|
|
32
|
+
const options = clientOptions.setFromParameters(queryString);
|
|
33
|
+
/* Setup logger */
|
|
34
|
+
const logger = makeLogger(options);
|
|
35
|
+
if (typeof window.bud === `undefined`) {
|
|
36
|
+
window.bud = {
|
|
37
|
+
current: {},
|
|
38
|
+
hmr: {},
|
|
39
|
+
controllers: [],
|
|
40
|
+
listeners: {},
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
if (!window.bud.current[options.name]) {
|
|
44
|
+
window.bud.current[options.name] = null;
|
|
45
|
+
}
|
|
46
|
+
const isStale = (hash) => {
|
|
47
|
+
if (hash)
|
|
48
|
+
window.bud.current[options.name] = hash;
|
|
49
|
+
return __webpack_hash__ === window.bud.current[options.name];
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Webpack HMR check handler
|
|
53
|
+
*
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
const check = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
57
|
+
if (webpackHot.status() === `idle`) {
|
|
58
|
+
yield webpackHot.check(false);
|
|
59
|
+
requestAnimationFrame(function whenReady() {
|
|
60
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
61
|
+
if (webpackHot.status() === `ready`) {
|
|
62
|
+
yield update();
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
requestAnimationFrame(whenReady);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
/**
|
|
72
|
+
* Webpack HMR unaccepted module handler
|
|
73
|
+
*
|
|
74
|
+
* @internal
|
|
75
|
+
*/
|
|
76
|
+
const onUnacceptedOrDeclined = (info) => {
|
|
77
|
+
console.warn(`[${options.name}] ${info.type}`, info);
|
|
78
|
+
options.reload && window.location.reload();
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* Webpack HMR error handler
|
|
82
|
+
*
|
|
83
|
+
* @internal
|
|
84
|
+
*/
|
|
85
|
+
const onErrored = (error) => {
|
|
86
|
+
window.bud.controllers.map(controller => controller === null || controller === void 0 ? void 0 : controller.update({
|
|
87
|
+
errors: [error],
|
|
88
|
+
}));
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Webpack HMR update handler
|
|
92
|
+
*
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
95
|
+
const update = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
96
|
+
try {
|
|
97
|
+
yield webpackHot.apply({
|
|
98
|
+
ignoreUnaccepted: true,
|
|
99
|
+
ignoreDeclined: true,
|
|
100
|
+
ignoreErrored: true,
|
|
101
|
+
onErrored,
|
|
102
|
+
onUnaccepted: onUnacceptedOrDeclined,
|
|
103
|
+
onDeclined: onUnacceptedOrDeclined,
|
|
104
|
+
});
|
|
105
|
+
if (!isStale())
|
|
106
|
+
yield check();
|
|
107
|
+
}
|
|
108
|
+
catch (error) {
|
|
109
|
+
logger.error(error);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
/* Instantiate indicator, overlay */
|
|
113
|
+
yield components.make(options);
|
|
114
|
+
/* Instantiate eventSource */
|
|
115
|
+
const events = injectEvents(EventSource).make(options);
|
|
116
|
+
if (!window.bud.listeners[options.name]) {
|
|
117
|
+
window.bud.listeners[options.name] = (payload) => __awaiter(void 0, void 0, void 0, function* () {
|
|
118
|
+
var _a;
|
|
119
|
+
if (!payload)
|
|
120
|
+
return;
|
|
121
|
+
if (options.reload && payload.action === `reload`)
|
|
122
|
+
return window.location.reload();
|
|
123
|
+
if (payload.name !== options.name)
|
|
124
|
+
return;
|
|
125
|
+
window.bud.controllers.map(controller => controller === null || controller === void 0 ? void 0 : controller.update(payload));
|
|
126
|
+
if (((_a = payload.errors) === null || _a === void 0 ? void 0 : _a.length) > 0)
|
|
127
|
+
return;
|
|
128
|
+
if (payload.action === `built` || payload.action === `sync`) {
|
|
129
|
+
if (isStale(payload.hash))
|
|
130
|
+
return;
|
|
131
|
+
if (payload.action === `built`) {
|
|
132
|
+
logger.log(`built in ${payload.time}ms`);
|
|
133
|
+
}
|
|
134
|
+
yield check();
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
/*
|
|
138
|
+
* Instantiate HMR event source
|
|
139
|
+
* and register client listeners
|
|
140
|
+
*/
|
|
141
|
+
events.addListener(window.bud.listeners[options.name]);
|
|
142
|
+
}
|
|
143
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hot/components/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,EAAE,CACjB,OAAO,EAAE,OAAO,KACb,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAc7B,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
export const make = (options) => __awaiter(void 0, void 0, void 0, function* () {
|
|
11
|
+
if (options.indicator && !customElements.get(`bud-activity-indicator`)) {
|
|
12
|
+
yield import(`./indicator/index.js`)
|
|
13
|
+
.then(makeController)
|
|
14
|
+
.then(maybePushController);
|
|
15
|
+
}
|
|
16
|
+
if (options.overlay && !customElements.get(`bud-error`)) {
|
|
17
|
+
yield import(`./overlay/index.js`)
|
|
18
|
+
.then(makeController)
|
|
19
|
+
.then(maybePushController);
|
|
20
|
+
}
|
|
21
|
+
return window.bud.controllers;
|
|
22
|
+
});
|
|
23
|
+
const makeController = (module) => __awaiter(void 0, void 0, void 0, function* () {
|
|
24
|
+
if (!module)
|
|
25
|
+
return;
|
|
26
|
+
return yield module.make();
|
|
27
|
+
});
|
|
28
|
+
const maybePushController = (controller) => {
|
|
29
|
+
if (!controller)
|
|
30
|
+
return;
|
|
31
|
+
window.bud.controllers.push(controller);
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hot/components/indicator/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;mBACA,OAAO,KAAK,IAAI;EAMhC,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { Component } from './indicator.component.js';
|
|
11
|
+
import { Controller } from './indicator.controller.js';
|
|
12
|
+
export const make = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
13
|
+
if (customElements.get(`bud-activity-indicator`))
|
|
14
|
+
return;
|
|
15
|
+
customElements.define(`bud-activity-indicator`, Component);
|
|
16
|
+
return new Controller();
|
|
17
|
+
});
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
/**
|
|
3
|
+
* Indicator web component
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare class Component extends HTMLElement {
|
|
7
|
+
/**
|
|
8
|
+
* Has component rendered
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
rendered: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Component name
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
16
|
+
name: string;
|
|
17
|
+
/**
|
|
18
|
+
* Root div querySelector selector
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
get selector(): string;
|
|
22
|
+
/**
|
|
23
|
+
* Timer
|
|
24
|
+
* @public
|
|
25
|
+
*/
|
|
26
|
+
hideTimeout: NodeJS.Timer;
|
|
27
|
+
/**
|
|
28
|
+
* Get accessor: has errors
|
|
29
|
+
* @public
|
|
30
|
+
*/
|
|
31
|
+
get hasErrors(): boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Get accessor: has warnings
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
get hasWarnings(): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Status indicator colors
|
|
39
|
+
* @public
|
|
40
|
+
*/
|
|
41
|
+
colors: Record<string, [number, number, number, number]>;
|
|
42
|
+
/**
|
|
43
|
+
* Class constructor
|
|
44
|
+
* @public
|
|
45
|
+
*/
|
|
46
|
+
constructor();
|
|
47
|
+
/**
|
|
48
|
+
* Render status indicator
|
|
49
|
+
* @public
|
|
50
|
+
*/
|
|
51
|
+
renderShadow(): void;
|
|
52
|
+
/**
|
|
53
|
+
* Show status indicator
|
|
54
|
+
* @public
|
|
55
|
+
*/
|
|
56
|
+
show(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Hide status indicator
|
|
59
|
+
*/
|
|
60
|
+
hide(): void;
|
|
61
|
+
/**
|
|
62
|
+
* Status is pending
|
|
63
|
+
* @public
|
|
64
|
+
*/
|
|
65
|
+
onPending(): void;
|
|
66
|
+
/**
|
|
67
|
+
* Status is success
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
onSuccess(): void;
|
|
71
|
+
/**
|
|
72
|
+
* Status is error
|
|
73
|
+
* @public
|
|
74
|
+
*/
|
|
75
|
+
onError(): void;
|
|
76
|
+
/**
|
|
77
|
+
* Status is warning
|
|
78
|
+
* @public
|
|
79
|
+
*/
|
|
80
|
+
onWarning(): void;
|
|
81
|
+
static get observedAttributes(): string[];
|
|
82
|
+
attributeChangedCallback(): void;
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=indicator.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/hot/components/indicator/indicator.component.ts"],"names":[],"mappings":";AAEA;;;GAGG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC;;;OAGG;IACI,QAAQ,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACI,IAAI,EAAE,MAAM,CAA2B;IAE9C;;;OAGG;IACH,IAAW,QAAQ,WAElB;IAED;;;OAGG;IACI,WAAW,EAAE,MAAM,CAAC,KAAK,CAAA;IAEhC;;;OAGG;IACH,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED;;;OAGG;IACH,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAK9D;IAED;;;OAGG;;IAMH;;;OAGG;IACI,YAAY;IA4CnB;;;OAGG;IACI,IAAI;IAKX;;OAEG;IACI,IAAI;IAMX;;;OAGG;IACI,SAAS;IAYhB;;;OAGG;IACI,SAAS;IAYhB;;;OAGG;IACI,OAAO;IASd;;;OAGG;IACI,SAAS;IAUhB,WAAkB,kBAAkB,aAEnC;IAEM,wBAAwB;CAiBhC"}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import { pulse } from './indicator.pulse.js';
|
|
2
|
+
/**
|
|
3
|
+
* Indicator web component
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export class Component extends HTMLElement {
|
|
7
|
+
/**
|
|
8
|
+
* Root div querySelector selector
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
get selector() {
|
|
12
|
+
return `.${this.name}`;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Get accessor: has errors
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
get hasErrors() {
|
|
19
|
+
return this.getAttribute(`has-errors`) == `true`;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Get accessor: has warnings
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
get hasWarnings() {
|
|
26
|
+
return this.getAttribute(`has-warnings`) == `true`;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Class constructor
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
/**
|
|
35
|
+
* Component name
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
this.name = `bud-activity-indicator`;
|
|
39
|
+
/**
|
|
40
|
+
* Status indicator colors
|
|
41
|
+
* @public
|
|
42
|
+
*/
|
|
43
|
+
this.colors = {
|
|
44
|
+
success: [4, 120, 87, 1],
|
|
45
|
+
error: [220, 38, 38, 1],
|
|
46
|
+
warn: [252, 211, 77, 1],
|
|
47
|
+
pending: [59, 130, 246, 1],
|
|
48
|
+
};
|
|
49
|
+
this.renderShadow();
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Render status indicator
|
|
53
|
+
* @public
|
|
54
|
+
*/
|
|
55
|
+
renderShadow() {
|
|
56
|
+
const container = document.createElement(`div`);
|
|
57
|
+
container.classList.add(this.name);
|
|
58
|
+
container.innerHTML = `
|
|
59
|
+
<style>
|
|
60
|
+
.bud-activity-indicator {
|
|
61
|
+
position: fixed;
|
|
62
|
+
width: 10px;
|
|
63
|
+
height: 10px;
|
|
64
|
+
left: 10px;
|
|
65
|
+
bottom: 10px;
|
|
66
|
+
z-index: 9999;
|
|
67
|
+
margin: 5px;
|
|
68
|
+
padding: 5px;
|
|
69
|
+
-webkit-transition:
|
|
70
|
+
all .6s ease-in-out,
|
|
71
|
+
transition:
|
|
72
|
+
all .6s ease-in-out;
|
|
73
|
+
animation-fill-mode: forwards;
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
border-radius: 50%;
|
|
76
|
+
transform: scale(0);
|
|
77
|
+
opacity: 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.show {
|
|
81
|
+
opacity: 1;
|
|
82
|
+
background-color: rgba(255, 255, 255, 1);
|
|
83
|
+
transform: scale(1);
|
|
84
|
+
transition:
|
|
85
|
+
all .6s ease-in-out;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
${pulse(`success`, this.colors.success)}
|
|
89
|
+
${pulse(`error`, this.colors.error)}
|
|
90
|
+
${pulse(`warning`, this.colors.warn)}
|
|
91
|
+
${pulse(`pending`, this.colors.pending)}
|
|
92
|
+
|
|
93
|
+
</style>
|
|
94
|
+
`;
|
|
95
|
+
this.attachShadow({ mode: `open` }).appendChild(container);
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Show status indicator
|
|
99
|
+
* @public
|
|
100
|
+
*/
|
|
101
|
+
show() {
|
|
102
|
+
this.hideTimeout && clearTimeout(this.hideTimeout);
|
|
103
|
+
this.shadowRoot.querySelector(this.selector).classList.add(`show`);
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Hide status indicator
|
|
107
|
+
*/
|
|
108
|
+
hide() {
|
|
109
|
+
this.hideTimeout = setTimeout(() => {
|
|
110
|
+
this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
|
|
111
|
+
}, 2000);
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Status is pending
|
|
115
|
+
* @public
|
|
116
|
+
*/
|
|
117
|
+
onPending() {
|
|
118
|
+
this.show();
|
|
119
|
+
this.shadowRoot
|
|
120
|
+
.querySelector(this.selector)
|
|
121
|
+
.classList.remove(`error`, `warning`, `success`);
|
|
122
|
+
this.shadowRoot.querySelector(this.selector).classList.add(`pending`);
|
|
123
|
+
this.hide();
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Status is success
|
|
127
|
+
* @public
|
|
128
|
+
*/
|
|
129
|
+
onSuccess() {
|
|
130
|
+
this.show();
|
|
131
|
+
this.shadowRoot
|
|
132
|
+
.querySelector(this.selector)
|
|
133
|
+
.classList.remove(`error`, `warning`, `pending`);
|
|
134
|
+
this.shadowRoot.querySelector(this.selector).classList.add(`success`);
|
|
135
|
+
this.hide();
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* Status is error
|
|
139
|
+
* @public
|
|
140
|
+
*/
|
|
141
|
+
onError() {
|
|
142
|
+
this.show();
|
|
143
|
+
this.shadowRoot
|
|
144
|
+
.querySelector(this.selector)
|
|
145
|
+
.classList.remove(`warning`, `success`, `pending`);
|
|
146
|
+
this.shadowRoot.querySelector(this.selector).classList.add(`error`);
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* Status is warning
|
|
150
|
+
* @public
|
|
151
|
+
*/
|
|
152
|
+
onWarning() {
|
|
153
|
+
this.show();
|
|
154
|
+
this.shadowRoot
|
|
155
|
+
.querySelector(this.selector)
|
|
156
|
+
.classList.remove(`error`, `success`, `pending`);
|
|
157
|
+
this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
|
|
158
|
+
}
|
|
159
|
+
static get observedAttributes() {
|
|
160
|
+
return [`has-errors`, `has-warnings`, `action`];
|
|
161
|
+
}
|
|
162
|
+
attributeChangedCallback() {
|
|
163
|
+
if (this.hasAttribute(`has-errors`))
|
|
164
|
+
return this.onError();
|
|
165
|
+
if (this.hasAttribute(`has-warnings`))
|
|
166
|
+
return this.onWarning();
|
|
167
|
+
if (!this.hasAttribute(`has-errors`) &&
|
|
168
|
+
!this.hasAttribute(`has-warnings`) &&
|
|
169
|
+
this.getAttribute(`action`) === `built`)
|
|
170
|
+
return this.onSuccess();
|
|
171
|
+
if (this.getAttribute(`action`) == `building` ||
|
|
172
|
+
this.getAttribute(`action`) == `sync`)
|
|
173
|
+
return this.onPending();
|
|
174
|
+
}
|
|
175
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
/**
|
|
3
|
+
* Activity indicator controller
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare class Controller {
|
|
7
|
+
/**
|
|
8
|
+
* DOM node
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
node: HTMLElement;
|
|
12
|
+
/**
|
|
13
|
+
* Active WHM payload
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
16
|
+
payload: any;
|
|
17
|
+
/**
|
|
18
|
+
* Timer handler
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
timer: NodeJS.Timeout;
|
|
22
|
+
/**
|
|
23
|
+
* Initialization
|
|
24
|
+
* @public
|
|
25
|
+
*/
|
|
26
|
+
constructor();
|
|
27
|
+
/**
|
|
28
|
+
* Append `bud-error` element to the DOM
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
addNode(): void;
|
|
33
|
+
/**
|
|
34
|
+
* Remove `bud-error` element from the DOM (if present)
|
|
35
|
+
*
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
removeNode(): void;
|
|
39
|
+
/**
|
|
40
|
+
* Update activity indicator
|
|
41
|
+
* @public
|
|
42
|
+
*/
|
|
43
|
+
update(payload: Payload): void;
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=indicator.controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indicator.controller.d.ts","sourceRoot":"","sources":["../../../../src/hot/components/indicator/indicator.controller.ts"],"names":[],"mappings":";AAAA;;;GAGG;AACH,qBAAa,UAAU;IACrB;;;OAGG;IACI,IAAI,EAAE,WAAW,CAAA;IAExB;;;OAGG;IACI,OAAO,MAAO;IAErB;;;OAGG;IACI,KAAK,EAAE,MAAM,CAAC,OAAO,CAAA;IAE5B;;;OAGG;;IAMH;;;;OAIG;IACI,OAAO;IAUd;;;;OAIG;IACI,UAAU;IAIjB;;;OAGG;IACI,MAAM,CAAC,OAAO,EAAE,OAAO;CAe/B"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Activity indicator controller
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export class Controller {
|
|
6
|
+
/**
|
|
7
|
+
* Initialization
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
constructor() {
|
|
11
|
+
/**
|
|
12
|
+
* Active WHM payload
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
this.payload = null;
|
|
16
|
+
this.node = document.createElement(`bud-activity-indicator`);
|
|
17
|
+
this.update = this.update.bind(this);
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Append `bud-error` element to the DOM
|
|
21
|
+
*
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
addNode() {
|
|
25
|
+
var _a;
|
|
26
|
+
if (document.body.querySelector(`bud-activity-indicator`)) {
|
|
27
|
+
if (typeof this.timer.unref === `function`)
|
|
28
|
+
this.timer.unref();
|
|
29
|
+
this.removeNode();
|
|
30
|
+
}
|
|
31
|
+
(_a = document.body) === null || _a === void 0 ? void 0 : _a.appendChild(this.node);
|
|
32
|
+
this.timer = setTimeout(this.removeNode, 3000);
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Remove `bud-error` element from the DOM (if present)
|
|
36
|
+
*
|
|
37
|
+
* @public
|
|
38
|
+
*/
|
|
39
|
+
removeNode() {
|
|
40
|
+
var _a;
|
|
41
|
+
(_a = document.body.querySelector(`bud-activity-indicator`)) === null || _a === void 0 ? void 0 : _a.remove();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Update activity indicator
|
|
45
|
+
* @public
|
|
46
|
+
*/
|
|
47
|
+
update(payload) {
|
|
48
|
+
var _a, _b;
|
|
49
|
+
this.node.toggleAttribute(`has-errors`, ((_a = payload.errors) === null || _a === void 0 ? void 0 : _a.length) ? true : false);
|
|
50
|
+
this.node.toggleAttribute(`has-warnings`, ((_b = payload.warnings) === null || _b === void 0 ? void 0 : _b.length) ? true : false);
|
|
51
|
+
this.node.setAttribute(`action`, payload.action);
|
|
52
|
+
this.addNode();
|
|
53
|
+
}
|
|
54
|
+
}
|