fix bug: resizeObserver should be installed after root is correctly set

loadingio · Apr 2, 2022 · ac33b7e · ac33b7e
1 parent eba7411
commit ac33b7e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -1,7 +1,7 @@
 (function(){
   var ldslider;
   ldslider = function(opt){
-    var root, ro, i$, to$, i, that, handle, el, mouse, this$ = this;
+    var root, i$, to$, i, that, handle, ro, el, mouse, this$ = this;
     opt == null && (opt = {});
     this.evtHandler = {};
     this.opt = import$({
@@ -18,12 +18,6 @@
     this.root = root = typeof opt.root === 'string'
       ? document.querySelector(opt.root)
       : opt.root;
-    if (typeof ResizeObserver != 'undefined' && ResizeObserver !== null) {
-      ro = new ResizeObserver(function(es){
-        return this$.set(this$.get());
-      });
-      ro.observe(this.root);
-    }
     if (this.root.tagName === 'INPUT') {
       this.input = this.root;
       ld$.attr(this.input, 'type', 'hidden');
@@ -64,6 +58,12 @@
       this.input.addEventListener('change', handle);
       this.input.addEventListener('input', handle);
     }
+    if (typeof ResizeObserver != 'undefined' && ResizeObserver !== null) {
+      ro = new ResizeObserver(function(es){
+        return this$.set(this$.get());
+      });
+      ro.observe(this.root);
+    }
     this.root._ldrs = this;
     this.root.classList.add('ldrs');
     this.root.innerHTML = "<div class=\"bar\">\n  <div class=\"cap\"></div>\n  <div class=\"cap\"></div>\n  <div class=\"bar-inner\">\n    <div class=\"bk\"></div>\n    <div class=\"fg\"></div>\n    <div class=\"line lock\"></div>\n    <div class=\"line p\"></div>\n    <div class=\"hint p\"></div>\n    <div class=\"line p alt\"></div>\n    <div class=\"hint p alt\"></div>\n  </div>\n</div>\n<div class=\"hint l\"></div>\n<div class=\"hint lock\"></div>\n<div class=\"hint r\"></div>";

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/src/index.ls b/src/index.ls
@@ -2,9 +2,6 @@ ldslider = (opt={}) ->
   @ <<< evt-handler: {}, opt: {min: 0, max: 100, from: 0, to: 0, step: 1} <<< opt
   @val = {to: 0, from: 0}
   @root = root = if typeof(opt.root) == \string => document.querySelector(opt.root) else opt.root
-  if ResizeObserver? =>
-    ro = new ResizeObserver (es) ~> @set @get!
-    ro.observe @root
   if @root.tagName == \INPUT =>
     @input = @root
     ld$.attr @input, \type, \hidden
@@ -28,6 +25,10 @@ ldslider = (opt={}) ->
     @input.addEventListener \change, handle
     @input.addEventListener \input, handle
 
+  if ResizeObserver? =>
+    ro = new ResizeObserver (es) ~> @set @get!
+    ro.observe @root
+
   @root._ldrs = @
   @root.classList.add \ldrs
   @root.innerHTML = """

diff --git a/web/static/assets/lib/ldslider/dev/index.js b/web/static/assets/lib/ldslider/dev/index.js
@@ -1,7 +1,7 @@
 (function(){
   var ldslider;
   ldslider = function(opt){
-    var root, ro, i$, to$, i, that, handle, el, mouse, this$ = this;
+    var root, i$, to$, i, that, handle, ro, el, mouse, this$ = this;
     opt == null && (opt = {});
     this.evtHandler = {};
     this.opt = import$({
@@ -18,12 +18,6 @@
     this.root = root = typeof opt.root === 'string'
       ? document.querySelector(opt.root)
       : opt.root;
-    if (typeof ResizeObserver != 'undefined' && ResizeObserver !== null) {
-      ro = new ResizeObserver(function(es){
-        return this$.set(this$.get());
-      });
-      ro.observe(this.root);
-    }
     if (this.root.tagName === 'INPUT') {
       this.input = this.root;
       ld$.attr(this.input, 'type', 'hidden');
@@ -64,6 +58,12 @@
       this.input.addEventListener('change', handle);
       this.input.addEventListener('input', handle);
     }
+    if (typeof ResizeObserver != 'undefined' && ResizeObserver !== null) {
+      ro = new ResizeObserver(function(es){
+        return this$.set(this$.get());
+      });
+      ro.observe(this.root);
+    }
     this.root._ldrs = this;
     this.root.classList.add('ldrs');
     this.root.innerHTML = "<div class=\"bar\">\n  <div class=\"cap\"></div>\n  <div class=\"cap\"></div>\n  <div class=\"bar-inner\">\n    <div class=\"bk\"></div>\n    <div class=\"fg\"></div>\n    <div class=\"line lock\"></div>\n    <div class=\"line p\"></div>\n    <div class=\"hint p\"></div>\n    <div class=\"line p alt\"></div>\n    <div class=\"hint p alt\"></div>\n  </div>\n</div>\n<div class=\"hint l\"></div>\n<div class=\"hint lock\"></div>\n<div class=\"hint r\"></div>";