fix: immersive at mobile and expand class for expand_background

package/css/awselect.css

@@ -147,8 +147,6 @@ Github: https://github.com/prevwong/awesome-select/
       transform: rotate(0deg) translateY(-50%); }
     .awselect.animate > .frame > .content {
       color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000)); }
-      .awselect.animate > .frame > .content > .value {
-        opacity: 0; }
     .awselect.animate > .expand_background {
       height: 100%; }
   .awselect.animate2 > .expand_background {
@@ -165,11 +163,9 @@ Github: https://github.com/prevwong/awesome-select/
     transition: none !important; }
   .awselect.animate > .expand_frame, .awselect.animating > .expand_frame {
     display: block; }
-  .awselect.animating > .frame > .content > .value {
-    opacity: 0; }
-  .awselect:not(.animate):not(.animating) > .expand_frame {
+  .awselect:not(.expand) > .expand_frame {
     display: none; }
-  .awselect:not(.animate):not(.animating) > .expand_background {
+  .awselect:not(.expand) > .expand_background {
     transform: scaleY(0); }
   .awselect:not(.animate) > .frame > .content > .value + .placeholder {
     transform: translateY(20px);

package/css/awselect.scss

@@ -171,9 +171,6 @@ transition: 0.2s ease-in;
 			}
 			> .content {
 				color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000));
-				> .value {
-					opacity: 0;
-				}
 			}
 		}
 		> .expand_background {
@@ -213,10 +210,7 @@ transition: 0.2s ease-in;
 	&.animating > .expand_frame{
 		display: block;
 	}
-	&.animating > .frame > .content > .value {
-		opacity: 0;
-	}
-	&:not(.animate):not(.animating) {
+	&:not(.expand) {
 		> .expand_frame{
 			display: none;
 		}

package/js/awselect.js

@@ -64,8 +64,7 @@ HTMLSelectElement.prototype.awselect = {
         }
         setTimeout(function() {
             let expand_frame = this.expand_frame;
-            let expand_background = this.expand_background;
-            expand_background.style.transform = '';
+            this.classList.add('expand');
             (document.documentElement.clientWidth < mobile_width || immersive) &&
             (this.style.top = parseInt(this.style.top) - expand_frame.clientHeight + 'px');
 
@@ -90,8 +89,8 @@ HTMLSelectElement.prototype.awselect = {
             HTMLSelectElement.prototype.awselect.html_padding_right = `${ window.innerWidth - document.documentElement.clientWidth }px`;
             document.documentElement.style.paddingRight = `calc(${ getComputedStyle(document.documentElement).paddingRight } + ${ window.innerWidth - document.documentElement.clientWidth }px)`;
             document.documentElement.classList.add('immersive_awselect');
+            document.body.classList.add('immersive_awselect');
         }
-        document.body.classList.add('immersive_awselect');
         let immersive_background = document.createElement('div');
         immersive_background.classList.add('awselect_immersive_background');
         this.immersive_background = immersive_background;
@@ -146,7 +145,7 @@ HTMLSelectElement.prototype.awselect = {
         }, 300);
         this.classList.remove('animate2');
         this.expand_frame.classList.remove('overflow');
-        this.classList.remove('animate', 'placeholder_animate2');
+        this.classList.remove('animate', 'placeholder_animate2', 'expand');
         HTMLSelectElement.prototype.awselect.animates = HTMLSelectElement.prototype.awselect.animates.filter(function (index) { return index !== this;}.bind(this));
         setTimeout(function() {
             let immersive_shadow = this.immersive_shadow;
@@ -161,7 +160,7 @@ HTMLSelectElement.prototype.awselect = {
                 setTimeout(function(){
                     immersive_shadow.remove();
                     this.immersive_shadow = undefined;
-                    if (document.documentElement.matches('.immersive_awselect')) {
+                    if (document.body.matches('.immersive_awselect')) {
                         document.documentElement.style.paddingRight = `calc(${ getComputedStyle(document.documentElement).paddingRight } - ${ HTMLSelectElement.prototype.awselect.html_padding_right })`;
                         document.documentElement.classList.remove('immersive_awselect');
                         document.body.classList.remove('immersive_awselect');
@@ -263,18 +262,17 @@ HTMLSelectElement.prototype.__defineGetter__('awselect', function () {
     return (!!this.awselect_section || !(this instanceof HTMLSelectElement)) ? this.__awselect :
         (!HTMLSelectElement.prototype.awselect_document_event &&
         (document.addEventListener('click', function (event) {
-                let option = event.target.closest('.awselect ul li a');
-                let awselect = event.target.closest('.awselect');
-                if (!!option) {
-                    awselect.select.value = awselect.select.children[[...option.closest('li').parentElement.children].indexOf(option.closest('li'))].value;
-                    awselect.dispatchEvent(new Event("change"));
-                } else {
-                    !!awselect && awselect.dispatchEvent(new CustomEvent(awselect.classList.contains('animate') ? 'aw:deanimate' : 'aw:animate', {}));
-                }
-
-            }) ||
-            (new MutationObserver(function () {HTMLSelectElement.prototype.awselect.animates = [...document.getElementsByClassName("awselect animate")]})).observe(document.body, { childList: true, subtree: true }) ||
-            document.addEventListener("mouseup", function (event) {
-                !event.target.closest('.awselect') && HTMLSelectElement.prototype.awselect.deanimate_all();
-            })  || (HTMLSelectElement.prototype.awselect_document_event = true)), this.__awselect.constructor);
+            let option = event.target.closest('.awselect ul li a');
+            let awselect = event.target.closest('.awselect');
+            if (!!option) {
+                awselect.select.value = awselect.select.children[[...option.closest('li').parentElement.children].indexOf(option.closest('li'))].value;
+                awselect.dispatchEvent(new Event("change"));
+            } else {
+                !!awselect && awselect.dispatchEvent(new CustomEvent(awselect.classList.contains('animate') ? 'aw:deanimate' : 'aw:animate', {}));
+            }
+        }) ||
+        (new MutationObserver(function () {HTMLSelectElement.prototype.awselect.animates = [...document.getElementsByClassName("awselect animate")]})).observe(document.body, { childList: true, subtree: true }) ||
+        document.addEventListener("mouseup", function (event) {
+            !event.target.closest('.awselect') && HTMLSelectElement.prototype.awselect.deanimate_all();
+        })  || (HTMLSelectElement.prototype.awselect_document_event = true)), this.__awselect.constructor);
 });