add children + dynamic bp

grottohub · Mar 11, 2021 · cb05f4d · cb05f4d
1 parent e07399f
commit cb05f4d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git a/core/blueprints.js b/core/blueprints.js
@@ -4,21 +4,45 @@ export let blueprints;
   const Blueprints = (function () {
     let allBlueprints = {};
 
-    const createElement = function createElementFromBlueprint(blueprint) {
+    const createElement = function createElementFromBlueprint(blueprint, content) {
       let element = document.createElement(blueprint.tag);
       allBlueprints[blueprint.attr.blueprint] = blueprint;
 
       Object.keys(blueprint.attr).forEach(attribute => {
         element[attribute] = blueprint.attr[attribute];
       });
 
+      // console.log(blueprint.content);
+      // console.log(content);
+      if (blueprint.content) {
+        content.forEach((data, idx) => {
+          let blueprintName = blueprint.attr.blueprint;
+
+          if (typeof data === "string") {
+            element[blueprint.content[idx]] = data;
+          } 
+
+          else if (data[blueprintName]) {
+            data[blueprintName].forEach((childData, idx) => {
+              element[blueprint.content[idx]] = childData;
+            });
+          }
+        });
+      }
+
       element.classList.add(...blueprint.classes);
 
+      if (blueprint.children) {
+        let children = blueprint.children.map(child => createElement(child, content));
+
+        children.forEach(child => element.appendChild(child));
+      }
+
       return element;
     };
 
-    const createFragment = function createFragmentForBlueprint(blueprint) {
-      let element = createElement(blueprint),
+    const createFragment = function createFragmentForBlueprint(blueprint, content) {
+      let element = createElement(blueprint, content),
           fragment = new DocumentFragment();
 
       fragment.appendChild(element);
@@ -36,8 +60,8 @@ export let blueprints;
     };
 
     return {
-      make(blueprint) {
-        return createFragment(blueprint);
+      make(blueprint, content) {
+        return createFragment(blueprint, content);
       },
 
       state(element, state) {

diff --git a/core/core.js b/core/core.js
@@ -266,8 +266,8 @@ export let minui;
         classList.forEach(klass => element.classList.toggle(klass));
       },
 
-      make(blueprint) {
-        return blueprints.make(blueprint);
+      make(blueprint, content = []) {
+        return blueprints.make(blueprint, content);
       },
 
       state(element, state) {

diff --git a/dist/core.js b/dist/core.js
@@ -50,21 +50,45 @@ let _ui;
     const Blueprints = (function () {
       let allBlueprints = {};
 
-      const createElement = function createElementFromBlueprint(blueprint) {
+      const createElement = function createElementFromBlueprint(blueprint, content) {
         let element = document.createElement(blueprint.tag);
         allBlueprints[blueprint.attr.blueprint] = blueprint;
 
         Object.keys(blueprint.attr).forEach(attribute => {
           element[attribute] = blueprint.attr[attribute];
         });
 
+        // console.log(blueprint.content);
+        // console.log(content);
+        if (blueprint.content) {
+          content.forEach((data, idx) => {
+            let blueprintName = blueprint.attr.blueprint;
+
+            if (typeof data === "string") {
+              element[blueprint.content[idx]] = data;
+            } 
+
+            else if (data[blueprintName]) {
+              data[blueprintName].forEach((childData, idx) => {
+                element[blueprint.content[idx]] = childData;
+              });
+            }
+          });
+        }
+
         element.classList.add(...blueprint.classes);
 
+        if (blueprint.children) {
+          let children = blueprint.children.map(child => createElement(child, content));
+
+          children.forEach(child => element.appendChild(child));
+        }
+
         return element;
       };
 
-      const createFragment = function createFragmentForBlueprint(blueprint) {
-        let element = createElement(blueprint),
+      const createFragment = function createFragmentForBlueprint(blueprint, content) {
+        let element = createElement(blueprint, content),
             fragment = new DocumentFragment();
 
         fragment.appendChild(element);
@@ -82,8 +106,8 @@ let _ui;
       };
 
       return {
-        make(blueprint) {
-          return createFragment(blueprint);
+        make(blueprint, content) {
+          return createFragment(blueprint, content);
         },
 
         state(element, state) {
@@ -488,8 +512,8 @@ let _ui;
           classList.forEach(klass => element.classList.toggle(klass));
         },
 
-        make(blueprint) {
-          return blueprints.make(blueprint);
+        make(blueprint, content = []) {
+          return blueprints.make(blueprint, content);
         },
 
         state(element, state) {