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