User:Ajhg/common.js: Difference between revisions
From Makerpedia
No edit summary |
No edit summary |
||
| (25 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
var appStart =()=>{ | var appStart =()=>{ | ||
window.µ = function (id, elem) { | |||
var ret; | |||
var root = ((elem) ? elem : document); | |||
switch (id.charAt(0)) { | |||
case '|': | |||
ret = root; | |||
break; | |||
case '+': | |||
ret = document.createElement(id.substring(1)); | |||
if (elem) elem.appendChild(ret); | |||
break; | |||
case '#': | |||
ret = root.querySelector(id); | |||
break; | |||
default: | |||
ret = Array.prototype.slice.call(root.querySelectorAll(id)); | |||
break; | |||
} | |||
return ret; | |||
}; | |||
console.log("trying to growl"); | console.log("trying to growl"); | ||
class MuseElement extends HTMLElement { | class MuseElement extends HTMLElement { | ||
| Line 23: | Line 46: | ||
this[lost] = ()=> { | this[lost] = ()=> { | ||
if (_this.classList.contains(`${stateName}_running`)) { | |||
_this[lose](); | _this[lose](); | ||
} | } | ||
| Line 44: | Line 66: | ||
this.classList.remove(`${stateName}_running`); | this.classList.remove(`${stateName}_running`); | ||
}; | }; | ||
this[onget] = ()=> { | |||
//console.log('gained ' + stateName); | //console.log('gained ' + stateName); | ||
}; | }; | ||
| Line 63: | Line 84: | ||
if (val != _this[stateName]) { | if (val != _this[stateName]) { | ||
_this.classList.add(`${stateName}_running`); | _this.classList.add(`${stateName}_running`); | ||
if (val) { | |||
_this.removeEventListener('transitionend', _this[lost]); | _this.removeEventListener('transitionend', _this[lost]); | ||
_this.addEventListener('transitionend', _this[got]); | _this.addEventListener('transitionend', _this[got]); | ||
| Line 106: | Line 128: | ||
this.alert = true; | this.alert = true; | ||
} | } | ||
dismiss() { | dismiss() { | ||
this.persist = false; | this.persist = false; | ||
| Line 115: | Line 136: | ||
//register events, check contents, etc. | //register events, check contents, etc. | ||
var _this = this; | var _this = this; | ||
if (!_this.root) { | if (!_this.root) { | ||
this.makeTransitionState('alert'); | this.makeTransitionState('alert'); | ||
this.root = _this.attachShadow({ mode: 'open' }); | this.root = _this.attachShadow({ mode: 'open' }); | ||
_this.display = µ('+div', _this.root); | _this.display = µ('+div', _this.root); | ||
| Line 127: | Line 146: | ||
_this.onAlert = ()=> { | _this.onAlert = ()=> { | ||
clearTimeout(_this.alertTO); | clearTimeout(_this.alertTO); | ||
if (!_this.persist) { | |||
_this.alertTO = setTimeout(()=> { | _this.alertTO = setTimeout(()=> { | ||
_this.alert = false; | _this.alert = false; | ||
| Line 135: | Line 154: | ||
}; | }; | ||
} | } | ||
console.log("growls"); | |||
customElements.define('muse-growl', MuseGrowl); | customElements.define('muse-growl', MuseGrowl); | ||
} | } | ||
document.body.appendChild( | var Growls=customElements.get('muse-growl') | ||
var grwl = new Growls(); | |||
grwl.id = "Growl"; | |||
document.body.appendChild(grwl); | |||
//grwl.message("test", "warn"); | |||
}; | |||
if(!window.widgets) window.widgets = []; | //if(!window.widgets) window.widgets = []; | ||
window.widgets.push(appStart); | //window.widgets.push(appStart); | ||
appStart() | |||
console.log('user script'); | console.log('user script'); | ||
Latest revision as of 13:15, 24 March 2025
console.log("trying to growl 1");
var appStart =()=>{
window.µ = function (id, elem) {
var ret;
var root = ((elem) ? elem : document);
switch (id.charAt(0)) {
case '|':
ret = root;
break;
case '+':
ret = document.createElement(id.substring(1));
if (elem) elem.appendChild(ret);
break;
case '#':
ret = root.querySelector(id);
break;
default:
ret = Array.prototype.slice.call(root.querySelectorAll(id));
break;
}
return ret;
};
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.display = µ('+div', _this.root);
}
_this.onAlert = ()=> {
clearTimeout(_this.alertTO);
if (!_this.persist) {
_this.alertTO = setTimeout(()=> {
_this.alert = false;
}, _this.displayTime);
}
};
};
}
console.log("growls");
customElements.define('muse-growl', MuseGrowl);
}
var Growls=customElements.get('muse-growl')
var grwl = new Growls();
grwl.id = "Growl";
document.body.appendChild(grwl);
//grwl.message("test", "warn");
};
//if(!window.widgets) window.widgets = [];
//window.widgets.push(appStart);
appStart()
console.log('user script');