✨ Adding two news properties for configuration

DOCS-es_ES.md

@@ -52,6 +52,8 @@ Para una configuración personalizada debemos **crear una variable llamada 'layo
 | prefix          | string   | ''          | Define cual será el prefijo para todas las clases CSS que se agregarán a los nodos, esto con el fin de salvaguardar alguna colición con otras clases definidas.                                                      |
 | debug           | boolean  | true        | Sirve para habilitar el `console.error` para cuando ocurre alguna definición inconsistente o se presenta algun error de procesamiento.                                                                               |
 | bridge          | boolean  | true        | Permite insertar los estilos creados por el sistema a travez del método 'insert' del tag scope, sin agregarlo como nodo de texto hijo. **OJO:** _Deshabilita esta opción si el DOM es manipulado por otra librería._ |
+| searchOnInit    | boolean  | true        | Define si se buscará en el DOM todos los Nodos con cualquier directiva permitida cuando se cargue la biblioteca                                                                                                      |
+| observer        | boolean  | true        | Define si el observador verificará cuando se agregue un nuevo nodo al DOM o si algún nodo existente agregó alguna **directiva de layouter** para procesarlo                                                          |
 | **ready**       | function | null        | Sirve como callback para indicar que el procesamiento inicial a finalizado. Se puede usar para quitar el loading overlay de la web (si es que se tiene, claro)                                                       |
 
 ### 📐 Breakpoints
@@ -1841,7 +1843,7 @@ layouter.styles = {
   "flex-jc\\:c": ".flex-jc\\:c{justify-content:center;display: flex}",
   ...
 }
-layouter.version = '1.6.0'
+layouter.version = '1.8.0'
 ```
 
 [↑ Volver Arriba](#utils)

DOCS.md

@@ -52,6 +52,8 @@ For a personalized configuration we must **create a variable called 'layoutercon
 | prefix          | string   | ''      | Define what the prefix will be for all CSS classes that will be added to the nodes, this in order to safeguard some collision with other defined classes.                                                                   |
 | debug           | boolean  | true    | It serves to enable the `console.eror` for when an inconsistent definition occurs or some processing error is presented.                                                                                                    |
 | bridge          | boolean  | true    | It allows to insert the styles created by the system through the 'insert' method of the Tag Scope, without adding it as a child text node. **Eye:** _Shabilite this option if the dom is manipulated by another bookstore._ |
+| searchOnInit    | boolean  | true    | Defines if will be search in the DOM all the Nodes with any directive allowed when the library loaded                                                                                                                       |
+| observer        | boolean  | true    | Defines if the observer will be checking when a new node is added to the DOM or some existed node added some **layouter directive** to process him                                                                          |
 | **ready**       | function | null    | It serves as callback to indicate that the initial processing at the end. It can be used to remove the Web's Loading Overlay (if you have, of course)                                                                       |
 
 ### 📐 Breakpoints
@@ -1842,7 +1844,7 @@ layouter.styles = {
   "flex-jc\\:c": ".flex-jc\\:c{justify-content:center;display: flex}",
   ...
 }
-layouter.version = '1.7.0'
+layouter.version = '1.8.0'
 ```
 
 [↑ Go back up](#utils)

dist/config/main.d.ts

@@ -10,6 +10,8 @@ export interface IConfigUser {
     bridge: boolean;
     debug?: boolean;
     ready?: (instance: ILayouter) => void;
+    searchOnInit: boolean;
+    observer: boolean;
 }
 interface IConfigNumsOut {
     scope: IScopes;

index.html

@@ -18,7 +18,7 @@
       <footer fx="jc:sb@sm">
         <div h="200" c="7/23@sm 9/29@md 12.33/39@lg"></div>
         <div h="200" c="7/23@sm 9/29@md 12.33/39@lg" my="24@-sm"></div>
-        <div h="200" c="7/23@sm 9/29@md 12.33/39@lg" id="square"></div>
+        <div h="200" c="7/23@sm 9/29@md 12.33/39@lg"></div>
       </footer>
     </main>
 
@@ -58,7 +58,7 @@
           console.timeEnd('layouter');
         },
       };
-      document.getElementById('square').addEventListener('layout:ready', () => {
+      document.querySelector('footer div:nth-child(3)').addEventListener('layout:ready', () => {
         console.log('Square layout ready!');
       });
     </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "layouter.js",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Layout builder without CSS, What???!!!",
   "homepage": "https://layouter.io",
   "main": "dist/layouter.umd.js",

src/config/main.ts

@@ -14,6 +14,8 @@ export interface IConfigUser {
   bridge: boolean;
   debug?: boolean;
   ready?: (instance: ILayouter) => void;
+  searchOnInit: boolean;
+  observer: boolean;
 }
 
 interface IConfigNumsIn {
@@ -74,6 +76,8 @@ export let baseConfig: IConfigUser = {
   breakpoints: breakpointsInit,
   bridge: true,
   debug: true,
+  searchOnInit: true,
+  observer: true,
 };
 
 let config: IConfig;

src/layouter.ts

@@ -305,10 +305,15 @@ const layouter = (
   };
 
   // Auto init process
-  searchAndProcess(instance, context.document).then(() => {
+  if (config.searchOnInit) {
+    searchAndProcess(instance, context.document).then(() => {
+      if (instance.ready) instance.ready(instance);
+      if (config.observer) mainObserver(instance);
+    });
+  } else {
+    if (config.observer) mainObserver(instance);
     if (instance.ready) instance.ready(instance);
-    mainObserver(instance);
-  });
+  }
 
   return instance;
 };