diff --git a/src/component.js b/src/component.js index 3d35f89..87eaa5a 100644 --- a/src/component.js +++ b/src/component.js @@ -107,6 +107,8 @@ class Component extends StyleAndScriptStoringComponent { * @returns {Component} */ hidden(untilFound = false) { + Page.registerStyling(".compel-mech-hidden", { "hidden": "hidden" }); + this._modifier.removeStyleRule("display"); this.setAttribute( "hidden", @@ -130,7 +132,7 @@ class Component extends StyleAndScriptStoringComponent { * When generate() is called, * the created Element will be registered (added) in every list * within the list. - * @param {Array} listName + * @param {*|string|Array<*>} listName */ subscribeOnGenerate(listName) { this._toRegister.push(listName); @@ -232,6 +234,8 @@ class Component extends StyleAndScriptStoringComponent { */ draggable(dndGroup = null) { let selector = this._element.getAttribute("data-autocompel"); + Page.registerStyling(".grabbin-cursor", { "cursor": "grab" }); + return this.addStyleClass("comp-el-mech-draggable") .setAttribute("draggable", "true") .setAttribute("dropEffect", "none") @@ -239,9 +243,10 @@ class Component extends StyleAndScriptStoringComponent { CommonEvents.DRAG_START, function (event) { console.log("DragEvent", event, "on", selector); - e.dataTransfer + event.target.classList.toggle("grabbin-cursor"); + event.dataTransfer .setData( - "text/plain", + "text/html", selector ); } diff --git a/src/componentAncestry/modifiableComponent.js b/src/componentAncestry/modifiableComponent.js index 7bd8922..7edab5c 100644 --- a/src/componentAncestry/modifiableComponent.js +++ b/src/componentAncestry/modifiableComponent.js @@ -28,13 +28,14 @@ class ModifiableComponent extends ChildbearerComponent { */ modifier(modifier, underTheName = "", extStore = false) { if (underTheName === "") { - underTheName = `${this._compName}-style-${this._styles.length}`; - } + underTheName = `.${this._compName}-style-${this._styles.length}`; + } if (!extStore) { this._modifier = this._modifier .join(modifier.ensureModifier()); } else { + this.addStyleClass(underTheName); this._styles.push( new SStoreDefinition( underTheName, diff --git a/src/context/extStore.js b/src/context/extStore.js index 33d1a84..1cd76cd 100644 --- a/src/context/extStore.js +++ b/src/context/extStore.js @@ -332,3 +332,58 @@ function identifyAndResolveOverwrite(targetContainer, compareKey, newValue, over targetContainer[compareKey] = newValue; return compareKey; } + +/** + * + * @param {Array} ssdArray + * @returns {HTMLScriptElement} + */ +function generateAndFillScriptTag(ssdArray) { + let tag = document.createElement("script"); + tag.setAttribute("data-compel-gen", "true"); + + for (let i = 0; i < ssdArray.length; i++) { + const ssd = ssdArray[i]; + tag.innerText += getScriptTagInjectionText( + clearFunctionDeclarationText(ssd._definition), + ssd._identifier + ); + } + + return tag; +} + +/** + * + * @param {string} selector + * @param {Map} stylingMap + * @returns {string} + */ +function getStylingInjectionText(selector, stylingMap) { + function keyValueToString(key) { + return `${key}: ${stylingMap[key]}; `; + } + + return `${selector + } { ${Object.keys(stylingMap) + .map(keyValueToString) + .join(" ") + } }; `; +} + +/** + * + * @param {Array} ssdArray + * @returns {HTMLStyleElement} + */ +function generateAndFillStyleTag(ssdArray) { + let tag = document.createElement("style"); + tag.setAttribute("data-compel-gen", "true"); + + for (let i = 0; i < ssdArray.length; i++) { + const ssd = ssdArray[i]; + tag.innerText += getStylingInjectionText(ssd._identifier, ssd._definition); + } + + return tag; +} diff --git a/src/context/generalHelpers.js b/src/context/generalHelpers.js index cfeb5ac..3691ec8 100644 --- a/src/context/generalHelpers.js +++ b/src/context/generalHelpers.js @@ -20,4 +20,99 @@ function fillAttrsInContainerByCb(attrs, intoContainer, cb) { cb(keys[i], attrs[keys[i]], intoContainer); } return intoContainer; -} \ No newline at end of file +} + +/** + * + */ +class ObjectAccessObject { + /** + * + * @param {Object} object + */ + constructor(object = null) { + /** + * @type {Array} + */ + this.keys = (object ? Object.keys(object) : []); + /** + * @type {Object} + */ + this.objects = (object ? object : {}); + } + + /** + * + * @param {Array} keyArr + * @param {Object} refObject + * @returns + */ + fillByArrayReference(keyArr, refObject) { + this.keys = keyArr; + refObject = keyArr.reduce((a, c) => Object.assign(a, { [c]: refObject[c] }), {}); + return this; + } + + /** + * + * @param {string} key + * @param {*} value + * @returns {ObjectAccessObject} + */ + add(key, value) { + this.objects[key, value]; + this.keys.push(key); + return this; + } + + /** + * + * @param {string} key + * @returns {*} + */ + remove(key) { + let tmp = this.objects[key]; + delete this.objects[key]; + return tmp; + } + +} + + + +/** + * + * @param {string} autocompelSelector + * @returns {boolean} for true element is now hidden and false it is not hidden. + */ +function toggleElementVisibility(autocompelSelector, ensureHidden = false) { + /** + * @type {HTMLElement} + */ + let el = document.querySelector(autocompelSelector); + let name = el.getAttribute("data-autocompel"); + + console.log("De-/hiding", name, autocompelSelector); + console.log(el); + + + el.classList.toggle("compel-mech-hidden"); + + let isNowHidden = false; + + if (el.hasAttribute("hidden")) { + el.removeAttribute("hidden"); + el.style["display"] = "flex"; + isNowHidden = false; + } else { + el.setAttribute("hidden", "hidden"); + el.style.removeProperty("display"); + isNowHidden = true; + } + + if (ensureHidden && !isNowHidden) { + return toggleElementVisibility(autocompelSelector) + } else { + return isNowHidden; + } +} diff --git a/src/context/scriptAndStyleContext.js b/src/context/scriptAndStyleContext.js index 998e663..87a2f5a 100644 --- a/src/context/scriptAndStyleContext.js +++ b/src/context/scriptAndStyleContext.js @@ -244,6 +244,7 @@ class ScriptAndStyleContext { */ let containersTag = document.createElement('script'); + containersTag.setAttribute("data-compel-mech-script", "main"); containersTag.innerText = 'const delayed = {}; '; containersTag.innerText += 'const repeated = {}; '; head.appendChild(containersTag);