add test case for zmgr

Author: zbryikt

web/.view/index.js

@@ -124,7 +124,7 @@ pug_mixins["css"]("/assets/lib/ldloader/dev/ldld.css");
 ;pug_debug_line = 11;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
 pug_html = pug_html + "\u003Cstyle type=\"text\u002Fcss\"\u003E";
 ;pug_debug_line = 11;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_html = pug_html + ".btn-test {\n  width: 300px;\n  height: 300px;\n  background: #ccc;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.btn-test:hover {\n  background: #f00;\n}\n\u003C\u002Fstyle\u003E\u003C\u002Fhead\u003E";
+pug_html = pug_html + ".btn-test {\n  width: 100px;\n  height: 100px;\n  background: #ccc;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.btn-test:hover {\n  background: #f00;\n}\n#content {\n  width: 100%;\n  height: 3em;\n  background: #e1e2e3;\n  margin: 0.5em 0;\n  position: relative;\n}\n#content div {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.35s linear;\n}\n#content div.running {\n  opacity: 1;\n}\n.ldld-1 {\n  width: 100%;\n  background: #f00;\n}\n.ldld-2 {\n  width: 80%;\n  background: #f90;\n}\n.ldld-3 {\n  width: 60%;\n  background: #ff0;\n}\n.ldld-4 {\n  width: 40%;\n  background: #9f0;\n}\n\u003C\u002Fstyle\u003E\u003C\u002Fhead\u003E";
 ;pug_debug_line = 12;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
 pug_html = pug_html + "\u003Cbody\u003E";
 ;pug_debug_line = 13;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
@@ -202,15 +202,21 @@ pug_html = pug_html + "All 3 ";
 ;pug_debug_line = 33;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
 pug_html = pug_html + "\u003Cdiv class=\"ld ld-ring ld-spin\"\u003E\u003C\u002Fdiv\u003E";
 ;pug_debug_line = 33;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
-;pug_debug_line = 35;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_mixins["script"]("/assets/lib/ldcover/main/ldcv.min.js");
+pug_html = pug_html + "\u003C\u002Fdiv\u003E";
+;pug_debug_line = 34;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
+pug_html = pug_html + "\u003Cdiv id=\"content\"\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 ;pug_debug_line = 36;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_mixins["script"]("/assets/lib/ldloader/dev/ldld.js");
+pug_mixins["script"]("/assets/lib/@loadingio/debounce.js/main/debounce.min.js");
 ;pug_debug_line = 37;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
+pug_mixins["script"]("/assets/lib/ldcover/main/ldcv.min.js");
+;pug_debug_line = 38;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
+pug_mixins["script"]("/assets/lib/zmgr/main/index.min.js");
+;pug_debug_line = 39;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
+pug_mixins["script"]("/assets/lib/ldloader/dev/ldld.js");
+;pug_debug_line = 40;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
 pug_html = pug_html + "\u003Cscript\u003E";
-;pug_debug_line = 37;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_html = pug_html + "var ldld, show, btnTest, f;\nldld = {};\n['full', 'default', 'btn'].map(function(it){\n  return ldld[it] = new ldLoader({\n    root: \".test.\" + it\n  });\n});\nldld.ctrl = new ldLoader({\n  root: \".test.ctrl\",\n  ctrl: {\n    step: function(t){\n      return this.innerText = Math.round(t \u002F 100) \u002F 10 + \"s passed.\";\n    },\n    done: function(t){\n      return this.innerText = \"Finished.\";\n    }\n  }\n});\nldld.all = new ldLoader({\n  root: Array.from(document.querySelectorAll(\".all\"))\n});\nshow = function(name){\n  ldld[name].on();\n  return ldld[name].off(2000);\n};\nbtnTest = document.querySelector('.btn-test');\nf = function(t){\n  var x;\n  requestAnimationFrame(f);\n  x = Math.round(Math.sin(t * 0.001) * 300);\n  return btnTest.style.left = x + \"px\";\n};\nrequestAnimationFrame(f);\u003C\u002Fscript\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";
+;pug_debug_line = 40;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
+pug_html = pug_html + "var ldld, show, btnTest, f, zmgr, content, ldldZ;\nldld = {};\n['full', 'default', 'btn'].map(function(it){\n  return ldld[it] = new ldloader({\n    root: \".test.\" + it\n  });\n});\nldld.ctrl = new ldloader({\n  root: \".test.ctrl\",\n  ctrl: {\n    step: function(t){\n      return this.innerText = Math.round(t \u002F 100) \u002F 10 + \"s passed.\";\n    },\n    done: function(t){\n      return this.innerText = \"Finished.\";\n    }\n  }\n});\nldld.all = new ldLoader({\n  root: Array.from(document.querySelectorAll(\".all\"))\n});\nshow = function(name){\n  ldld[name].on();\n  return ldld[name].off(2000);\n};\nbtnTest = document.querySelector('.btn-test');\nf = function(t){\n  var x;\n  requestAnimationFrame(f);\n  x = Math.round(Math.sin(t * 0.001) * 300);\n  return btnTest.style.left = x + \"px\";\n};\nrequestAnimationFrame(f);\nzmgr = new zmgr();\ncontent = document.querySelectorAll('#content');\nldldZ = [\n  new ldloader({\n    container: content,\n    className: 'ldld ldld-4',\n    zmgr: zmgr,\n    autoZ: true\n  }), new ldloader({\n    container: content,\n    className: 'ldld ldld-3',\n    zmgr: zmgr,\n    autoZ: true\n  }), new ldloader({\n    container: content,\n    className: 'ldld ldld-2',\n    zmgr: zmgr,\n    autoZ: true\n  }), new ldloader({\n    container: content,\n    className: 'ldld ldld-1',\n    zmgr: zmgr,\n    autoZ: true\n  })\n];\ndebounce(1000).then(function(){\n  return ldldZ[3].on().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[2].on().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[1].on().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[0].on().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[3].off().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[2].off().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[1].off().then(function(){\n    return debounce(1000);\n  });\n}).then(function(){\n  return ldldZ[0].off().then(function(){\n    return debounce(1000);\n  });\n});\u003C\u002Fscript\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";
     }.call(this, "JSON" in locals_for_with ?
         locals_for_with.JSON :
         typeof JSON !== 'undefined' ? JSON : undefined, "b64img" in locals_for_with ?

web/src/pug/index.ls

@@ -1,7 +1,7 @@
 ldld = {}
 <[full default btn]>.map ->
-  ldld[it] = new ldLoader root: ".test.#it"
-ldld.ctrl = new ldLoader root: ".test.ctrl", ctrl: do
+  ldld[it] = new ldloader root: ".test.#it"
+ldld.ctrl = new ldloader root: ".test.ctrl", ctrl: do
   step: (t) -> @innerText = "#{Math.round(t/100)/10}s passed."
   done: (t) -> @innerText = "Finished."
 
@@ -16,3 +16,21 @@ f = (t) ->
   btn-test.style.left = "#{x}px"
 
 requestAnimationFrame f
+
+zmgr = new zmgr!
+content = document.querySelectorAll(\#content)
+ldld-z = [
+  new ldloader container: content, class-name: 'ldld ldld-4', zmgr: zmgr, auto-z: true
+  new ldloader container: content, class-name: 'ldld ldld-3', zmgr: zmgr, auto-z: true
+  new ldloader container: content, class-name: 'ldld ldld-2', zmgr: zmgr, auto-z: true
+  new ldloader container: content, class-name: 'ldld ldld-1', zmgr: zmgr, auto-z: true
+]
+debounce 1000
+  .then -> ldld-z.3.on!  .then -> debounce 1000
+  .then -> ldld-z.2.on!  .then -> debounce 1000
+  .then -> ldld-z.1.on!  .then -> debounce 1000
+  .then -> ldld-z.0.on!  .then -> debounce 1000
+  .then -> ldld-z.3.off! .then -> debounce 1000
+  .then -> ldld-z.2.off! .then -> debounce 1000
+  .then -> ldld-z.1.off! .then -> debounce 1000
+  .then -> ldld-z.0.off! .then -> debounce 1000

web/src/pug/index.pug

@@ -31,7 +31,10 @@ html
       .btn.btn-outline-secondary.mr-2.all.ld-ext-right All 1 #[.ld.ld-ring.ld-spin]
       .btn.btn-outline-secondary.mr-2.all.ld-ext-left All 2 #[.ld.ld-ring.ld-spin]
       .btn.btn-outline-secondary.mr-2.all.ld-ext-top All 3 #[.ld.ld-ring.ld-spin]
+      #content
 
+    +script("/assets/lib/@loadingio/debounce.js/main/debounce.min.js")
     +script("/assets/lib/ldcover/main/ldcv.min.js")
+    +script("/assets/lib/zmgr/main/index.min.js")
     +script("/assets/lib/ldloader/dev/ldld.js")
     script: include:lsc index.ls

web/src/pug/index.styl

@@ -1,6 +1,6 @@
 .btn-test
-  width: 300px
-  height: 300px
+  width: 100px
+  height: 100px
   background: #ccc
   margin: auto
   position: absolute
@@ -11,3 +11,37 @@
   &:hover
     background: #f00
 
+#content
+  width: 100%
+  height: 3em
+  background: #e1e2e3
+  margin: .5em 0
+  position: relative
+  div
+    position: absolute
+    top: 0
+    left: 0
+    height: 100%
+    opacity: 0
+    transition: all .35s linear
+  div.running
+    opacity: 1
+
+
+.ldld-1
+  width: 100%
+  background: #f00
+
+.ldld-2
+  width: 80%
+  background: #f90
+
+.ldld-3
+  width: 60%
+  background: #ff0
+
+.ldld-4
+  width: 40%
+  background: #9f0
+
+

web/static/assets/lib/@loadingio/debounce.js/0.0.1/debounce.js

@@ -0,0 +1 @@
+0.0.1

web/static/assets/lib/@loadingio/debounce.js/0.0.1/debounce.min.js

@@ -10,11 +10,18 @@
       className: '',
       atomic: true
     }, opt);
+    if (opt.zmgr) {
+      this.zmgr(opt.zmgr);
+    }
     ['root', 'container'].map(function(n){
+      var list;
       if (opt[n]) {
-        return this$[n] = (Array.isArray(opt[n])
+        list = Array.isArray(opt[n])
           ? opt[n]
-          : [opt[n]]).map(function(it){
+          : opt[n] instanceof NodeList
+            ? Array.from(opt[n])
+            : [opt[n]];
+        return this$[n] = list.map(function(it){
           var ret;
           ret = typeof it === 'string' ? document.querySelector(it) : it;
           if (!ret) {
@@ -53,6 +60,13 @@
     return this;
   };
   ldloader.prototype = import$(Object.create(Object.prototype), {
+    zmgr: function(it){
+      if (it != null) {
+        return this._zmgr = it;
+      } else {
+        return this._zmgr;
+      }
+    },
     isOn: function(){
       return this.running;
     },
@@ -134,7 +148,7 @@
         });
       }
       return new Promise(function(res, rej){
-        var ref$, running, idx;
+        var ref$, running, zmgr;
         this$.count = (ref$ = this$.count + d) > 0 ? ref$ : 0;
         if (!force && !this$.opt.atomic && (this$.count >= 2 || (this$.count === 1 && d < 0))) {
           return res();
@@ -152,25 +166,26 @@
         if (!this$.opt.autoZ) {
           return res();
         }
+        zmgr = this$._zmgr || ldloader._zmgr;
         if (running) {
-          if (ldloader.zmgr) {
-            this$.z = ldloader.zmgr.add(this$.opt.baseZ);
-          } else {
-            this$.z = ((ref$ = ldloader.zstack)[ref$.length - 1] || this$.opt.baseZ) + 1;
-            ldloader.zstack.push(z);
-          }
+          this$.z = zmgr.add(this$.opt.baseZ);
+          /*
+          if zmgr => @z = zmgr.add @opt.base-z
+          else
+            @z = (ldloader.zstack[* - 1] or @opt.base-z) + 1
+            ldloader.zstack.push z
+          */
           this$.root.map(function(it){
             return it.style.zIndex = this$.z;
           });
         } else {
-          if (ldloader.zmgr) {
-            ldloader.zmgr.remove(this$.z);
-          } else {
-            if ((idx = ldloader.zstack.indexOf(this$.z)) < 0) {
-              return res();
-            }
-            ldloader.zstack.splice(idx, 1);
-          }
+          zmgr.remove(this$.z);
+          /*
+          if zmgr => zmgr.remove @z
+          else
+            if (idx = ldloader.zstack.indexOf(@z)) < 0 => return res!
+            ldloader.zstack.splice(idx, 1)
+          */
           this$.root.map(function(it){
             return it.style.zIndex = "";
           });
@@ -179,10 +194,31 @@
       });
     }
   });
+  /*
+  ldloader <<< do
+    zstack: []
+    zmgr: -> if it? => @_zmgr = it else @_zmgr
+  */
   import$(ldloader, {
-    zstack: [],
-    setZmgr: function(it){
-      return this.zmgr = it;
+    _zmgr: {
+      add: function(v){
+        var z, ref$;
+        (this.s || (this.s = [])).push(z = Math.max(v || 0, ((ref$ = this.s)[ref$.length - 1] || 0) + 1));
+        return z;
+      },
+      remove: function(v){
+        var i;
+        if ((i = (this.s || (this.s = [])).indexOf(v)) < 0) {} else {
+          return this.s.splice(i, 1);
+        }
+      }
+    },
+    zmgr: function(it){
+      if (it != null) {
+        return this._zmgr = it;
+      } else {
+        return this._zmgr;
+      }
     }
   });
   if (typeof module != 'undefined' && module !== null) {