MINOR,FEAT,HELPERS,CONVINENCE: Couple functions/changes

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
                         );
                 }

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,

src/context/extStore.js

@@ -332,3 +332,58 @@ function identifyAndResolveOverwrite(targetContainer, compareKey, newValue, over
     targetContainer[compareKey] = newValue;
     return compareKey;
 }
+
+/**
+ * 
+ * @param {Array<SStoreDefinition>} 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<string,string>} stylingMap 
+ * @returns {string}
+ */
+function getStylingInjectionText(selector, stylingMap) {
+    function keyValueToString(key) {
+        return `${key}: ${stylingMap[key]}; `;
+    }
+
+    return `${selector
+        } { ${Object.keys(stylingMap)
+            .map(keyValueToString)
+            .join(" ")
+        } }; `;
+}
+
+/**
+ * 
+ * @param {Array<SStoreDefinition>} 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;
+}

src/context/generalHelpers.js

@@ -20,4 +20,99 @@ function fillAttrsInContainerByCb(attrs, intoContainer, cb) {
         cb(keys[i], attrs[keys[i]], intoContainer);
     }
     return intoContainer;
-}
+}
+
+/**
+ * 
+ */
+class ObjectAccessObject {
+    /**
+     * 
+     * @param {Object} object 
+     */
+    constructor(object = null) {
+        /**
+         * @type {Array<string>}
+         */
+        this.keys = (object ? Object.keys(object) : []);
+        /**
+         * @type {Object}
+         */
+        this.objects = (object ? object : {});
+    }
+
+    /**
+     * 
+     * @param {Array<string>} 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;
+    }
+}

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);