fix(core): update
This commit is contained in:
@ -1,5 +1,61 @@
|
||||
export class DeesDomTools {
|
||||
public static createDomTools = () => {
|
||||
globalThis.deesDomTools = new DeesDomTools();
|
||||
import * as plugins from './domtools.plugins';
|
||||
import { Stringmap, FastMap } from '@pushrocks/lik';
|
||||
|
||||
export class DomTools {
|
||||
public static async setupDomTools() {
|
||||
let domToolsInstance: DomTools;
|
||||
if (!globalThis.deesDomTools) {
|
||||
globalThis.deesDomTools = new DomTools();
|
||||
domToolsInstance = globalThis.deesDomTools;
|
||||
// lets make sure the dom is ready
|
||||
const readyStateChangedFunc = () => {
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
domToolsInstance.headElement = document.querySelector('head');
|
||||
domToolsInstance.bodyElement = document.querySelector('body');
|
||||
domToolsInstance.domReady.resolve();
|
||||
}
|
||||
};
|
||||
document.addEventListener('readystatechange', readyStateChangedFunc);
|
||||
domToolsInstance.domToolsReady.resolve();
|
||||
} else {
|
||||
domToolsInstance = globalThis.deesDomTools;
|
||||
}
|
||||
await domToolsInstance.domToolsReady.promise;
|
||||
return domToolsInstance;
|
||||
}
|
||||
|
||||
public domToolsReady = plugins.smartpromise.defer();
|
||||
public domReady = plugins.smartpromise.defer();
|
||||
public globalStylesReady = plugins.smartpromise.defer();
|
||||
|
||||
// elements
|
||||
public headElement: HTMLElement;
|
||||
public bodyElement: HTMLElement;
|
||||
|
||||
public async setGlobalStyles(stylesText: string) {
|
||||
await this.domReady.promise;
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.type = 'text/css';
|
||||
styleElement.appendChild(document.createTextNode(stylesText));
|
||||
this.headElement.appendChild(styleElement);
|
||||
}
|
||||
|
||||
private runOnceTrackerStringMap = new Stringmap();
|
||||
private runOnceResultMap = new FastMap();
|
||||
public async runOnce<T>(identifierArg: string, funcArg: () => Promise<T>) {
|
||||
const runningId = `${identifierArg}+runningCheck`;
|
||||
if(!this.runOnceTrackerStringMap.checkString(identifierArg)) {
|
||||
this.runOnceTrackerStringMap.addString(identifierArg);
|
||||
this.runOnceTrackerStringMap.addString(runningId);
|
||||
const result = await funcArg();
|
||||
this.runOnceResultMap.addToMap(identifierArg, result);
|
||||
this.runOnceTrackerStringMap.removeString(runningId);
|
||||
}
|
||||
return await this.runOnceTrackerStringMap.registerUntilTrue(stringMap => {
|
||||
return !stringMap.includes(runningId);
|
||||
}, () => {
|
||||
return this.runOnceResultMap.getByKey(identifierArg);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
47
ts/domtools.elementbasic.ts
Normal file
47
ts/domtools.elementbasic.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import * as plugins from './domtools.plugins';
|
||||
import { DomTools } from './domtools.classes.domtools';
|
||||
|
||||
|
||||
import { html } from 'lit-element';
|
||||
export const styles = html`
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
|
||||
/**
|
||||
* a basic setup for elements
|
||||
* makes sure everything is in check
|
||||
*/
|
||||
export const setup = async () => {
|
||||
const domTools = await DomTools.setupDomTools();
|
||||
domTools.runOnce('elementBasicSetup', async () => {
|
||||
// bodyStyles
|
||||
domTools.setGlobalStyles(`
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`);
|
||||
|
||||
// material font
|
||||
domTools.setGlobalStyles(`
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
|
||||
}
|
||||
`);
|
||||
|
||||
// Roboto Font
|
||||
domTools.setGlobalStyles(`
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
`);
|
||||
});
|
||||
};
|
@ -1,69 +0,0 @@
|
||||
import { defer } from '@pushrocks/smartpromise';
|
||||
|
||||
const createStyleElement = (headElement: HTMLElement, styleText: string) => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.type = 'text/css';
|
||||
styleElement.appendChild(document.createTextNode(styleText));
|
||||
headElement.appendChild(styleElement);
|
||||
};
|
||||
|
||||
/**
|
||||
* a basic setup for elements
|
||||
* makes sure everything is in check
|
||||
*/
|
||||
export const elementBasicSetup = async () => {
|
||||
if (globalThis.deesCssToolsReady) {
|
||||
await globalThis.deesCssToolsReady.promise;
|
||||
} else {
|
||||
// lets prevent double execution
|
||||
globalThis.deesCssToolsReady = defer();
|
||||
|
||||
// lets make sure the dom is ready
|
||||
const documentReady = defer();
|
||||
const readyStateChangedFunc = () => {
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
console.log('elementBasicSetup: element basic setup complete')
|
||||
documentReady.resolve();
|
||||
} else {
|
||||
console.log('elementBasicSetup: document not yet ready');
|
||||
}
|
||||
};
|
||||
document.addEventListener('readystatechange', readyStateChangedFunc);
|
||||
console.log('elementBasicSetup: waiting for document to be ready');
|
||||
await documentReady.promise;
|
||||
console.log('elementBasicSetup: document ready!');
|
||||
|
||||
// lets get started
|
||||
const head = document.querySelector('head');
|
||||
const body = document.querySelector('body');
|
||||
|
||||
// bodyStyles
|
||||
const bodyStyles = `
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
createStyleElement(head, bodyStyles);
|
||||
|
||||
// material font
|
||||
const materialFontStyles = `
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
|
||||
}
|
||||
`;
|
||||
createStyleElement(head, materialFontStyles);
|
||||
|
||||
// Roboto Font
|
||||
const robotoFontCss = `
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
`;
|
||||
createStyleElement(head, robotoFontCss);
|
||||
|
||||
globalThis.deesCssToolsReady.resolve();
|
||||
}
|
||||
};
|
@ -1,9 +0,0 @@
|
||||
import { html } from 'lit-element';
|
||||
export const elementBasicStyles = html`
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
`;
|
8
ts/domtools.plugins.ts
Normal file
8
ts/domtools.plugins.ts
Normal file
@ -0,0 +1,8 @@
|
||||
// pushrocks scope
|
||||
import * as smartpromise from '@pushrocks/smartpromise';
|
||||
import * as smartstate from '@pushrocks/smartstate';
|
||||
|
||||
export {
|
||||
smartpromise,
|
||||
smartstate
|
||||
};
|
@ -1,15 +1,9 @@
|
||||
export * from './domtools.colors';
|
||||
|
||||
import * as elementBasicSetup from './domtools.elementbasicsetup';
|
||||
import * as elementBasicStyles from './domtools.elementbasicstyles';
|
||||
import * as elementBasic from './domtools.elementbasic';
|
||||
import * as breakpoints from './domtools.breakpoints';
|
||||
import * as css from './domtools.css';
|
||||
|
||||
const elementBasic = {
|
||||
setup: elementBasicSetup.elementBasicSetup,
|
||||
styles: elementBasicStyles.elementBasicStyles
|
||||
};
|
||||
|
||||
export {
|
||||
css,
|
||||
breakpoints,
|
||||
|
Reference in New Issue
Block a user