|
|
| Line 1: |
Line 1: |
| console.log("trying to growl 1"); | | console.log("trying to growl 1"); |
|
| |
|
| var appStart =()=>{
| | console.log(μ); |
| console.log("trying to growl"); | |
| class MuseElement extends HTMLElement {
| |
| constructor() {
| |
| super();
| |
| }
| |
| | |
| makeTransitionState (stateName, loseName) {
| |
| var _this = this;
| |
| | |
| var capFirst = (string)=>string.charAt(0).toUpperCase() + string.slice(1);
| |
| | |
| var capped = capFirst(stateName);
| |
| | |
| if (typeof _this[stateName] != 'undefined') var oldState = _this[stateName];
| |
| | |
| var lost = `${capped}_state_lost`;
| |
| var lose = (loseName) ? `on${capFirst(loseName)}` : `onLose${capped}`;
| |
| var got = `${capped}_state_acquired`;
| |
| var onget = `on${capped}`;
| |
| | |
| this[lost] = ()=> {
| |
| | |
| if (_this.classList.contains(`${stateName}_running`)) {
| |
| _this[lose]();
| |
| }
| |
| | |
| _this.removeEventListener('transitionend', this[lost]);
| |
| this.classList.remove(`${stateName}_running`);
| |
| };
| |
| | |
| this[lose] = ()=> {
| |
| //console.log('lost ' + stateName);
| |
| };
| |
| | |
| this[got] = ()=> {
| |
| if (_this.classList.contains(`${stateName}_running`)) {
| |
| _this[onget]();
| |
| }
| |
| | |
| _this.removeEventListener('transitionend', this[got]);
| |
| this.classList.remove(`${stateName}_running`);
| |
| };
| |
| | |
| this[onget] = ()=> {
| |
| //console.log('gained ' + stateName);
| |
| };
| |
| | |
| this[`stop${capped}Transition`] = ()=> {
| |
| _this.removeEventListener('transitionend', this[got]);
| |
| _this.removeEventListener('transitionend', this[lost]);
| |
| this.classList.remove(`${stateName}_running`);
| |
| };
| |
| | |
| Object.defineProperty(_this, stateName, {
| |
| get: function () {
| |
| return (µ(`|>${stateName}`, _this) == '');
| |
| },
| |
| | |
| set: function (val) {
| |
| if (val != _this[stateName]) {
| |
| _this.classList.add(`${stateName}_running`);
| |
| if (val) {
| |
| _this.removeEventListener('transitionend', _this[lost]);
| |
| _this.addEventListener('transitionend', _this[got]);
| |
| _this.setAttribute(stateName, '');
| |
| } else {
| |
| _this.removeEventListener('transitionend', _this[got]);
| |
| _this.addEventListener('transitionend', _this[lost]);
| |
| _this.removeAttribute(stateName);
| |
| }
| |
| }
| |
| },
| |
| });
| |
| | |
| if (typeof oldState != 'undefined')_this[stateName] = oldState;
| |
| }
| |
| | |
| }
| |
| | |
| if (!customElements.get('muse-growl')) {
| |
| | |
| //window.loadCSS(__dirname + '/button.css');
| |
| | |
| class MuseGrowl extends MuseElement {
| |
| constructor() {
| |
| super();
| |
| | |
| this.displayTime = 3000;
| |
| }
| |
| | |
| message(text, type, persist) {
| |
| var _this = this;
| |
| this.display.textContent = text;
| |
| this.className = type;
| |
| this.persist = persist;
| |
| if (this.alert && !this.classList.contains('alert_running') && !persist) {
| |
| clearTimeout(_this.alertTO);
| |
| _this.alertTO = setTimeout(()=> {
| |
| _this.alert = false;
| |
| }, _this.displayTime);
| |
| }
| |
| | |
| this.alert = true;
| |
| }
| |
| | |
| dismiss() {
| |
| this.persist = false;
| |
| this.alert = false;
| |
| }
| |
| | |
| connectedCallback() {
| |
| //register events, check contents, etc.
| |
| var _this = this;
| |
| | |
| if (!_this.root) {
| |
| | |
| this.makeTransitionState('alert');
| |
| this.root = _this.attachShadow({ mode: 'open' });
| |
| this.root.innerHTML = `<style> @import "${µdir}/components/css/growl.css";</style>`;
| |
| | |
| _this.display = µ('+div', _this.root);
| |
| }
| |
| | |
| _this.onAlert = ()=> {
| |
| clearTimeout(_this.alertTO);
| |
| if (!_this.persist) {
| |
| _this.alertTO = setTimeout(()=> {
| |
| _this.alert = false;
| |
| }, _this.displayTime);
| |
| }
| |
| };
| |
| };
| |
| }
| |
| | |
| customElements.define('muse-growl', MuseGrowl);
| |
| }
| |
| | |
| document.body.appendChild(document.createElement('muse-growl');
| |
| }
| |
|
| |
|
| console.log('user script 1'); | | console.log('user script 1'); |
