@schukai/monster 1.26.1 → 1.27.0

package/source/util/freeze.js

@@ -14,7 +14,7 @@ import {validateObject} from '../types/validate.js';
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * Monster.Util.deepFreeze({})
  * </script>
  * ```
@@ -23,7 +23,7 @@ import {validateObject} from '../types/validate.js';
  *
  * ```
  * <script type="module">
- * import {deepFreeze} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/util/freeze.js';
+ * import {deepFreeze} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/util/freeze.js';
  * deepFreeze({})
  * </script>
  * ```

package/source/util/processing.js

@@ -77,7 +77,7 @@ class Callback {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * new Monster.Util.Processing()
  * </script>
  * ```
@@ -86,13 +86,13 @@ class Callback {
  *
  * ```
  * <script type="module">
- * import {Processing} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/util/processing.js';
+ * import {Processing} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/util/processing.js';
  * new Processing();
  * </script>
  * ```
  *
  * @example
- * import {Processing} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/util/processing.js';
+ * import {Processing} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/util/processing.js';
  *
  * let startTime = +new Date();
  *

package/source/util/trimspaces.js

@@ -16,7 +16,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * Monster.Util.trimSpaces(" hello ")
  * </script>
  * ```
@@ -25,7 +25,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {trimSpaces} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/util/trimspaces.js';
+ * import {trimSpaces} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/util/trimspaces.js';
  * trimSpaces(' hello \\ ')
  * </script>
  * ```

package/test/cases/dom/attributes.js

@@ -14,7 +14,8 @@ import {
     removeAttributeToken,
     removeObjectLink,
     replaceAttributeToken,
-    toggleAttributeToken
+    toggleAttributeToken,
+    findClosestByClass
 } from "../../../source/dom/attributes.js";
 
 import {initJSDOM} from "../../util/jsdom.js";
@@ -37,12 +38,13 @@ describe('Attributes', function () {
     </div>
 </div>
 `;
+        
         html3 = `<div data-monster-role="test1">
-    <div data-monster-role="sub1" id="a1">
-        <div data-monster-role="sub2" id="a2">
-            <div data-monster-role="sub3" id="a3">
-                <div data-monster-role="sub4" id="a4">
-                    <div data-monster-role="sub5" id="a5"></div>
+    <div data-monster-role="sub1" id="a1" class="sub1">
+        <div data-monster-role="sub2" id="a2" class="sub2">
+            <div data-monster-role="sub3" id="a3" class="sub3">
+                <div data-monster-role="sub4" id="a4" class="sub4">
+                    <div data-monster-role="sub5" id="a5" class="sub5"></div>
                 </div>
             </div>
         </div>
@@ -154,6 +156,27 @@ describe('Attributes', function () {
                 })
 
 
+            });
+        }); 
+        
+        describe('find closest Element with class', function () {
+
+            [
+                ['a5',  'sub3', 'sub3'],
+                ['a5',  'sub1', 'sub1'],
+                ['a4',  'sub1', 'sub1'],
+                ['a3',  'sub1', 'sub1'],
+                ['a5',  'sub5', 'sub5']
+            ].forEach(function (data) {
+
+                let a = data.shift()
+                let b = data.shift()
+                let c = data.shift()
+                it('findClosestByClass(' + a + ', ' + b + ') should return ' + c, function () {
+                    expect(findClosestByClass(document.getElementById(a), b).getAttribute('class')).to.be.equal(c);
+                })
+
+
             });
         });
     });

package/test/cases/dom/template.js

@@ -1,16 +1,11 @@
 'use strict';
 
 import {expect} from "chai"
+import {ATTRIBUTE_THEME_NAME} from "../../../source/dom/constants.js";
 
 import {findDocumentTemplate, Template} from "../../../source/dom/template.js";
 import {initJSDOM} from "../../util/jsdom.js";
 
-const html1 = `
-
-<template id="mytemplate"></template>
-
-`;
-
 
 describe('Template', function () {
 
@@ -20,7 +15,8 @@ describe('Template', function () {
 
     beforeEach(() => {
         let mocks = document.getElementById('mocks');
-        mocks.innerHTML = html1;
+        mocks.innerHTML = `
+            <template id="mytemplate"></template>`;
     })
 
     afterEach(() => {
@@ -75,14 +71,76 @@ describe('Template', function () {
     });
 
     describe('.findDocumentTemplate()', function () {
-        it('should throw Template not found', function () {
-            const div = document.createElement('div');
-            div.remove();
-            let t = findDocumentTemplate("mytemplate", div);
-            expect(t).is.instanceof(Template);
+        describe('Template', function () {
+            it('should find template over ownerDocument', function () {
+                const div = document.createElement('div');
+                div.remove();
+                let t = findDocumentTemplate("mytemplate", div);
+                expect(t).is.instanceof(Template);
+
+            })
+        });
 
-        })
-    });
+        describe('Thmened Template', function () {
+            let memAttributeValue;
+
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <template id="mytemplate"><p>1</p></template>
+                    <template id="mytemplate-monster"><p>2</p></template>
+                    <template id="mytemplate-testtheme"><p>4</p></template>
+                    <template id="myprefix-mytemplate-monster"><p>3</p></template>
+                `;
+
+                let html = document.querySelector('html');
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    memAttributeValue = html.getAttribute(ATTRIBUTE_THEME_NAME)
+                }
+
+            })
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
 
+                let html = document.querySelector('html');
 
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    html.removeAttribute(ATTRIBUTE_THEME_NAME);
+                }
+
+                if (memAttributeValue) {
+                    html.setAttribute(ATTRIBUTE_THEME_NAME, memAttributeValue)
+                }
+
+            })
+
+
+            it('should find template over ownerDocument', function () {
+                let html = document.querySelector('html');
+                const div = document.createElement('div');
+                div.setAttribute('data-monster-template-prefix', 'myprefix')
+                div.remove();
+                let t1 = findDocumentTemplate("mytemplate", div);
+                expect(t1).is.instanceof(Template);
+                expect(t1.createDocumentFragment().textContent).is.equal("3");
+
+                div.removeAttribute('data-monster-template-prefix')
+                let t2 = findDocumentTemplate("mytemplate", div);
+                expect(t2).is.instanceof(Template);
+                expect(t2.createDocumentFragment().textContent).is.equal("2");
+
+                html.setAttribute(ATTRIBUTE_THEME_NAME,'testtheme');
+                let a= html.outerHTML;
+                let t3 = findDocumentTemplate("mytemplate", div);
+                expect(t3).is.instanceof(Template);
+                expect(t3.createDocumentFragment().textContent).is.equal("4");
+
+
+            })
+        });
+
+
+    });
 });

package/test/cases/dom/updater.js

@@ -12,99 +12,100 @@ let expect = chai.expect;
 
 chai.use(chaiDom);
 
-let html1 = `<template id="current">
-    <li data-monster-replace="path:current | tojson"></li>
-</template>
-<div id="test1">
-    <ul data-monster-insert="current path:a.b">
-    </ul>
-</div>
-<div id="test2">
-    <ul data-monster-insert="current path:a.b | doit">
-    </ul>
-</div>
-<div id="test3">
-    <div data-monster-attributes="class path:a.b">
-        <input data-monster-attributes="value path:a.c" id="input1">
-        <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
-        <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
-        <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
-        <input type="radio" name="radio" value="r2" id="r2">
-        <input type="radio" name="radio" value="rx" id="rx">
-
-        <select data-monster-attributes="value path:a.select" name="select" id="select">
-            <option value="other-value">value1</option>
-            <option>value2</option>
-        </select>
-
-        <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option value="other-value5">value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
-
+let html1 = `
+    <template id="current">
+        <li data-monster-replace="path:current | tojson"></li>
+    </template>
+    <div id="test1">
+        <ul data-monster-insert="current path:a.b">
+        </ul>
+    </div>
+    <div id="test2">
+        <ul data-monster-insert="current path:a.b | doit">
+        </ul>
+    </div>
+    <div id="test3">
+        <div data-monster-attributes="class path:a.b">
+            <input data-monster-attributes="value path:a.c" id="input1">
+            <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
+            <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
+            <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
+            <input type="radio" name="radio" value="r2" id="r2">
+            <input type="radio" name="radio" value="rx" id="rx">
+
+            <select data-monster-attributes="value path:a.select" name="select" id="select">
+                <option value="other-value">value1</option>
+                <option>value2</option>
+            </select>
+
+            <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option value="other-value5">value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
+
+        </div>
     </div>
-</div>
 
 `;
 
 let html2 = `
     <div id="test1">
-        <div data-monster-replace="path:text | tolower"> </div>
-        <div data-monster-replace="path:text | call:myformatter"> </div>
+        <div data-monster-replace="path:text | tolower"></div>
+        <div data-monster-replace="path:text | call:myformatter"></div>
         <div data-monster-replace="static:hello\\ "></div>
     </div>
 `;
 
 let html3 = `
 
-<template id="myinnerid">
-    <span data-monster-replace="path:myinnerid | tojson"></span>
-</template>
+    <template id="myinnerid">
+        <span data-monster-replace="path:myinnerid | tojson"></span>
+    </template>
 
-<template id="myid">
-   <p data-monster-insert="myinnerid path:a.b"></p>
-</template>
+    <template id="myid">
+        <p data-monster-insert="myinnerid path:a.b"></p>
+    </template>
 
-<div id="test1">
-    <div data-monster-insert="myid path:a.b"></div>
-</div>
+    <div id="test1">
+        <div data-monster-insert="myid path:a.b"></div>
+    </div>
 
 `;
 
 let html4 = `
-<div>
-    <form id="form1">
-        <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
-        <input type="text" name="text">
-        <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
-        <input type="button" name="button">
-
-        <select name="select1" id="select1" data-monster-bind="path:select">
-            <option>value1</option>
-            <option>value2</option>
-        </select>
-
-        <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option>value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
+    <div>
+        <form id="form1">
+            <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
+            <input type="text" name="text">
+            <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
+            <input type="button" name="button">
+
+            <select name="select1" id="select1" data-monster-bind="path:select">
+                <option>value1</option>
+                <option>value2</option>
+            </select>
+
+            <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option>value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
             
         </textarea>
 
-    </form>
-</div>
+        </form>
+    </div>
 
 `;
 
@@ -515,7 +516,7 @@ describe('DOM', function () {
                         })
                 }, 100)
 
-            }); 
+            });
         });
     });
 
@@ -638,14 +639,13 @@ describe('DOM', function () {
         });
     });
 
-
     describe('Get Attribute Pipe', function () {
         let id, mocks;
         beforeEach(() => {
             mocks = document.getElementById('mocks');
             id = new ID('monster');
             mocks.innerHTML = ` <div id="` + id + `"
-                             data-monster-replace="path:a | if:value:\\ "></div>`
+            data-monster-replace="path:a | if:value:\\ "></div>`
         })
 
         afterEach(() => {
@@ -661,4 +661,31 @@ describe('DOM', function () {
         });
     });
 
+
+    describe('manuel update', function () {
+        let id, mocks;
+        
+        beforeEach(() => {
+            mocks = document.getElementById('mocks');
+            id = new ID('monster').toString();
+            mocks.innerHTML = `<input id="` + id + `"data-monster-bind="path:myvalue">`
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+        })
+
+        it('should get value', function () {
+
+            document.getElementById(id).value="hello";
+            const updater = new Updater(mocks);
+            const subject = updater.getSubject();
+            
+            expect(subject).to.not.have.property('myvalue');
+            updater.retrieve();
+            expect(subject).to.have.property('myvalue');
+        });
+
+
+    });
 });

package/test/cases/monster.js

@@ -9,7 +9,7 @@ describe('Monster', function () {
         let monsterVersion
 
     /**#@+ dont touch, replaced by make with package.json version */
-    monsterVersion = new Version('1.26.1')
+    monsterVersion = new Version('1.27.0')
     /**#@-*/
 
         let m = Monster.getVersion();

package/test/web/monster-dev.html

@@ -10,13 +10,13 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
 
-    <script src="https://monsterjs.org/dist/1.26.1/dist/monster.dev.js"></script>
+    <script src="https://monsterjs.org/dist/1.27.0/dist/monster.dev.js"></script>
 
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.27.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 6. Dez 16:42:51 CET 2021</div>
 </div>
 </body>
 </html>

package/test/web/monster.html

@@ -14,8 +14,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.27.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 6. Dez 16:42:51 CET 2021</div>
 </div>
 </body>
 </html>

package/test/web/test.html

@@ -12,8 +12,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 1.26.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 2. Dez 12:05:05 CET 2021</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 1.27.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 6. Dez 16:42:51 CET 2021</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>