feat: remove depend jquery

.gitignore

@@ -0,0 +1,2 @@
+.idea
+.sass-cache

LICENSE

@@ -1,33 +1,32 @@
 MIT License
 
-Copyright (c) 2017 Previnash Wong Sze Chuan <prevwong@gmail.com>
+Copyright (c) 2017 DIAN-XIU, Chen (Hugh Harlequin) <hugh2113@gmail.com>
 
-Permission is hereby granted, free of charge, to any person 
+Permission is hereby granted, free of charge, to any person
 obtaining a copy
-of this software and associated documentation files (the 
+of this software and associated documentation files (the
 "Software"), to deal
-in the Software without restriction, including without limitation 
+in the Software without restriction, including without limitation
 the rights
-to use, copy, modify, merge, publish, distribute, sublicense, 
+to use, copy, modify, merge, publish, distribute, sublicense,
 and/or sell
-copies of the Software, and to permit persons to whom the Software 
+copies of the Software, and to permit persons to whom the Software
 is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be 
+The above copyright notice and this permission notice shall be
 included in all
 copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
 SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
-DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

README.MD

@@ -1,5 +1,4 @@
 # AwesomeSelect
-[![Support](https://supporterhq.com/api/b/9okwcyts1gevgy53glt8ffpyc)](https://supporterhq.com/give/9okwcyts1gevgy53glt8ffpyc)
 
 Transform that boring <select> tag into something beautiful and minimal, with animations inspired from Material Design.
 

package/css/awselect.css

@@ -9,7 +9,7 @@ Github: https://github.com/prevwong/awesome-select/
 .immersive_awselect {
   overflow: hidden !important; }
 
-.awselect_bg {
+.awselect_immersive_background {
   position: fixed;
   z-index: 999;
   left: 0;
@@ -22,50 +22,56 @@ Github: https://github.com/prevwong/awesome-select/
   -moz-transition: 0.2s ease-in;
   -o-transition: 0.2s ease-in;
   transition: 0.2s ease-in; }
-  .awselect_bg.animate {
+  .awselect_immersive_background.animate {
     opacity: 1; }
 
 .awselect {
+  --awselect_frame_padding_x: 40px;
+  --awselect_frame_padding_y: 10px;
+  --awselect_frame_padding_t: unset;
+  --awselect_frame_padding_r: unset;
+  --awselect_frame_padding_b: unset;
+  --awselect_frame_padding_l: unset;
+  --awselect_option_padding_x: unset;
+  --awselect_option_padding_y: 5px;
+  --awselect_options_margin: 10px 0;
+  --awselect_icon_color: unset;
+  --awselect_placeholder_color: green;
+  --awselect_expand_placeholder_color: unset;
   float: left;
   width: 100%;
   position: relative;
   cursor: pointer;
+  background: var(--awselect_background, #e5e5e5);
   -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
   -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
   -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
-  .awselect > .bg {
-    background: #fff;
-    height: 0%;
+  .awselect > .expand_background {
+    background: var(--awselect_active_background, #fff);
+    height: 0;
     float: left;
     width: 100%;
     position: absolute;
     z-index: 1;
+    transform-origin: top;
     -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
-  .awselect .front_face {
+  .awselect > .frame {
     position: relative;
-    padding: 20px 40px;
+    padding: var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)) var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px));
     color: #000;
     float: left;
     width: 100%; }
-    .awselect .front_face > .bg {
-      position: absolute;
-      z-index: 0;
-      float: left;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      background: #e5e5e5;
-      top: 0; }
-    .awselect .front_face .content {
+    .awselect > .frame .content {
       float: left;
       width: 100%;
       position: relative;
-      z-index: 2; }
-    .awselect .front_face span {
+      z-index: 2;
+      color: var(--awselect_placeholder_color, #000); }
+    .awselect > .frame span {
       -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
@@ -73,29 +79,30 @@ Github: https://github.com/prevwong/awesome-select/
       float: left;
       width: 100%;
       color: inherit; }
-    .awselect .front_face .current_value {
+    .awselect > .frame .value {
       position: absolute;
       left: 0; }
-    .awselect .front_face .placeholder {
+    .awselect > .frame .placeholder {
       position: relative; }
-    .awselect .front_face .icon {
+    .awselect > .frame .icon {
       float: right;
       position: absolute;
-      right: 0px;
+      right: 0;
       top: 50%;
       transform: rotate(180deg) translateY(-50%);
       transform-origin: center 0;
+      fill: var(--awselect_icon_color, var(--awselect_placeholder_color, #000));
       -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
-      .awselect .front_face .icon svg {
+      .awselect > .frame .icon svg {
         width: 10px;
         height: 10px; }
-  .awselect .back_face {
+  .awselect .expand_frame {
     z-index: 2;
     position: absolute;
-    padding: 0px;
+    padding: 0;
     -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
@@ -106,19 +113,22 @@ Github: https://github.com/prevwong/awesome-select/
     width: 100%;
     max-height: 200px;
     overflow: hidden;
-    display: none; }
-    .awselect .back_face.overflow {
+    display: none;
+    top: 100%; }
+    .awselect .expand_frame.overflow {
       overflow-y: scroll; }
-    .awselect .back_face ul {
-      margin: 0;
+    .awselect .expand_frame > ul {
       float: left;
       padding: 0;
-      width: 100%; }
-      .awselect .back_face ul li {
+      width: 100%;
+      color: var(--awselect_options_color, #000);
+      margin: var(--awselect_options_margin); }
+      .awselect .expand_frame > ul li {
         float: left;
         width: 100%;
         display: block; }
-        .awselect .back_face ul li a {
+        .awselect .expand_frame > ul li a {
+          padding: var(--awselect_option_padding_y, var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px))) var(--awselect_option_padding_x, var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px)));
           color: inherit;
           opacity: 0.8;
           float: left;
@@ -127,30 +137,43 @@ Github: https://github.com/prevwong/awesome-select/
           -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
           -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
           transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
-          .awselect .back_face ul li a:hover {
+          .awselect .expand_frame > ul li a:hover {
             background: rgba(0, 0, 0, 0.07);
             opacity: 1; }
   .awselect.animate {
     z-index: 9999; }
-    .awselect.animate .front_face .icon {
+    .awselect.animate > .frame .icon {
+      color: var(--awselect_expand_icon_color, var(--awselect_icon_color, var(--awselect_placeholder_color, #000)));
       transform: rotate(0deg) translateY(-50%); }
-    .awselect.animate > .bg {
+    .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 > .bg {
+  .awselect.animate2 > .expand_background {
     box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); }
-  .awselect.animate2 .back_face {
+  .awselect.animate2 .expand_frame {
     transform: translateY(0px);
     opacity: 1; }
-  .awselect.hasValue .front_face .placeholder {
-    transform: translateY(20px);
+  .awselect.placeholder_animate > .frame .value {
     opacity: 0; }
-  .awselect.placeholder_animate .front_face .current_value {
-    opacity: 0; }
-  .awselect.placeholder_animate2 .front_face .placeholder {
+  .awselect.placeholder_animate2 .frame .placeholder {
     transform: translateY(0);
     opacity: 1; }
   .awselect.transition_paused {
     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 {
+    display: none; }
+  .awselect:not(.animate):not(.animating) > .expand_background {
+    transform: scaleY(0); }
+  .awselect:not(.animate) > .frame > .content > .value + .placeholder {
+    transform: translateY(20px);
+    opacity: 0; }
 
 .aw_cursor_pointer {
   float: left;
@@ -168,7 +191,7 @@ Github: https://github.com/prevwong/awesome-select/
   .aw_cursor_pointer .inner {
     float: left;
     width: 100%;
-    height: 0%;
+    height: 0;
     background: #fff;
     border-radius: 100%;
     -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
@@ -180,4 +203,8 @@ Github: https://github.com/prevwong/awesome-select/
     .aw_cursor_pointer.animate .inner {
       height: 100%; }
 
+.immersive_shadow {
+  position: relative;
+  float: left; }
+
 /*# sourceMappingURL=awselect.css.map */

package/css/awselect.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["awselect.scss"],"names":[],"mappings":"AA4BA,oBACC,0BAAA,CAGD,aACC,cAAA,CACA,WAAA,CACA,MAAA,CACA,KAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,yBAAA,CAnBA,8BAAA,CAED,yBAAA,CACA,sBAAA,CAkBC,qBACC,SAAA,CAIF,UACC,qCAAA,CACA,qCAAA,CAEA,UAAA,CACA,UAAA,CACA,iBAAA,CACA,cAAA,CACA,8CAAA,CAzCA,qDAAA,CAED,gDAAA,CACA,6CAAA,CAyCC,cACC,kDAAA,CACA,QAAA,CACA,UAAA,CACA,UAAA,CACA,iBAAA,CACA,SAAA,CACA,4BAAA,CAAA,wBAAA,CAAA,oBAAA,CAnDD,qDAAA,CAED,gDAAA,CACA,6CAAA,CAmDC,sBACC,iBAAA,CACA,+PAAA,CACA,UA9DkB,CA+DlB,UAAA,CACA,UAAA,CAEA,+BACC,UAAA,CACA,UAAA,CACA,iBAAA,CACA,SAAA,CAED,2BAnED,qDAAA,CAED,gDAAA,CACA,6CAAA,CAkEG,UAAA,CACA,UAAA,CACA,aAAA,CAED,qCACC,iBAAA,CACA,MAAA,CAED,mCACC,iBAAA,CAED,4BACC,WAAA,CACG,iBAAA,CACA,SAAA,CACA,OAAA,CACA,iDAAA,CAAA,6CAAA,CAAA,yCAAA,CACA,iCAAA,CAAA,6BAAA,CAAA,yBAAA,CAtFL,qDAAA,CAED,gDAAA,CACA,6CAAA,CAsFM,gCACC,UAAA,CACA,WAAA,CAIN,qBACC,SAAA,CACA,iBAAA,CACA,WAAA,CAlGD,qDAAA,CAED,gDAAA,CACA,6CAAA,CAiGE,kCAAA,CAAA,8BAAA,CAAA,0BAAA,CACA,SAAA,CACA,UAAA,CACA,UAAA,CACA,gBAAA,CACA,eAAA,CACA,YAAA,CACA,QAAA,CACA,8BACC,iBAAA,CAED,wBACC,QAAA,CACA,UAAA,CACA,SAAA,CACA,UAAA,CACA,yCAAA,CACA,2BACC,UAAA,CACA,UAAA,CACA,aAAA,CACA,6BACC,aAAA,CACA,UAAA,CACA,UAAA,CACA,UAAA,CA7HJ,qDAAA,CAED,gDAAA,CACA,6CAAA,CA4HK,mCACC,0BAAA,CACA,SAAA,CAOL,kBACC,YAAA,CAEC,oCACE,+CAAA,CAAA,2CAAA,CAAA,uCAAA,CAGH,sBACC,WAAA,CAID,uBACC,qDAAA,CAAA,6CAAA,CAED,8BACC,iCAAA,CAAA,6BAAA,CAAA,yBAAA,CACA,SAAA,CAKA,yDACC,SAAA,CAOD,wDACC,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CACA,SAAA,CAKH,4BACC,kCAAA,CAAA,6BAAA,CAAA,0BAAA,CAED,4DAEC,aAAA,CAED,mDACC,YAAA,CAED,yEACC,kCAAA,CAAA,8BAAA,CAAA,0BAAA,CACA,SAAA,CAIF,mBACC,UAAA,CACA,UAAA,CACA,WAAA,CACA,kBAAA,CACA,eAAA,CACA,eAAA,CACA,WAAA,CApMA,qDAAA,CAED,gDAAA,CACA,6CAAA,CAmMC,4BAAA,CAAA,wBAAA,CAAA,oBAAA,CACA,0BACC,UAAA,CACA,UAAA,CACA,SAAA,CACA,eAAA,CACA,kBAAA,CA5MD,qDAAA,CAED,gDAAA,CACA,6CAAA,CA6MC,2BACC,0BAAA,CAAA,sBAAA,CAAA,kBAAA,CACA,kCACC,WAAA","file":"awselect.min.css"}

package/css/awselect.scss

@@ -7,7 +7,6 @@ Github: https://github.com/prevwong/awesome-select/
 
 **/
 
-$bg_color: #fff;
 $placeholder_color: #000;
 $link_color: #000;
 
@@ -31,7 +30,7 @@ transition: 0.2s ease-in;
 	overflow:hidden!important;
 }
 
-.awselect_bg {
+.awselect_immersive_background {
 	position:fixed;
 	z-index:999;
 	left:0;
@@ -47,41 +46,49 @@ transition: 0.2s ease-in;
 }
 
 .awselect {
+	--awselect_frame_padding_x: 40px;
+	--awselect_frame_padding_y: 10px;
+	--awselect_frame_padding_t: unset;
+	--awselect_frame_padding_r: unset;
+	--awselect_frame_padding_b: unset;
+	--awselect_frame_padding_l: unset;
+	--awselect_option_padding_x: unset;
+	--awselect_option_padding_y: 5px;
+	--awselect_options_margin: 10px 0;
+	--awselect_icon_color: unset;
+	--awselect_placeholder_color: green;
+	--awselect_expand_placeholder_color: unset;
+
 	float:left;
 	width:100%;
 	position:relative;
 	cursor:pointer;
+	background: var(--awselect_background, #e5e5e5);
+
 	@include transition();
-	> .bg {
-		background:$bg_color;
-		height:0%;
+	> .expand_background {
+		background: var(--awselect_active_background, #fff);
+		height:0;
 		float:left;
 		width:100%;
 		position:absolute;
 		z-index:1;
+		transform-origin: top;
 		@include transition();
 	}
-	.front_face{
+	> .frame {
 		position:relative;
-		padding:20px 40px;
+		padding: var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)) var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px));
 		color : $placeholder_color;
 		float:left;
 		width:100%;
-		> .bg {
-			position:absolute;
-			z-index:0;
-			float:left;
-			width:100%;
-			height:100%;
-			left:0;
-			background:#e5e5e5;
-			top:0;
-		}
+
 		.content {
 			float:left;
 			width:100%;
 			position:relative;
 			z-index:2;
+			color: var(--awselect_placeholder_color, #000);
 		}
 		span {
 			@include transition();
@@ -89,7 +96,7 @@ transition: 0.2s ease-in;
 			width:100%;
 			color:inherit;
 		}
-		.current_value {
+		.value {
 			position:absolute;
 			left:0;
 		}
@@ -99,10 +106,11 @@ transition: 0.2s ease-in;
 		.icon {
 			float: right;
 		    position: absolute;
-		    right: 0px;
+		    right: 0;
 		    top: 50%;
 		    transform: rotate(180deg) translateY(-50%);
 		    transform-origin: center 0;
+			fill: var(--awselect_icon_color, var(--awselect_placeholder_color, #000));
 
 		    @include transition();
 		    svg {
@@ -111,10 +119,10 @@ transition: 0.2s ease-in;
 		    }
 		}
 	}
-	.back_face {
+	.expand_frame {
 		z-index:2;
 		position:absolute;
-		padding:0px;
+		padding:0;
 		@include transition();
 		transform:translateY(20px);
 		opacity:0;
@@ -123,19 +131,23 @@ transition: 0.2s ease-in;
 		max-height:200px;
 		overflow: hidden;
 		display:none;
-		&.overflow { 
+		top: 100%;
+		&.overflow {
 			overflow-y:scroll;
 		}
-		ul {
-			margin:0;
+		> ul {
 			float:left;
 			padding:0;
-				width:100%;
+			width:100%;
+			color: var(--awselect_options_color, #000);
+			margin: var(--awselect_options_margin);
 			li {
 				float:left;
 				width:100%;
 				display:block;
 				a {
+					padding: var(--awselect_option_padding_y, var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)))
+							 var(--awselect_option_padding_x, var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px)));
 					color:inherit;
 					opacity:0.8;
 					float:left;
@@ -149,48 +161,44 @@ transition: 0.2s ease-in;
 			}
 		}
 	}
-	&.dark_scheme { 
 
-	}
 	&.animate {
 		z-index:9999;
-		.front_face {
+		> .frame {
 			.icon {
+				color: var(--awselect_expand_icon_color, var(--awselect_icon_color, var(--awselect_placeholder_color, #000)));
 				 transform: rotate(0deg) translateY(-50%);
 			}
+			> .content {
+				color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000));
+				> .value {
+					opacity: 0;
+				}
+			}
 		}
-		> .bg {
+		> .expand_background {
 			height:100%;
 		}
 	}
 	&.animate2{
-		> .bg {
+		> .expand_background {
 			box-shadow:0px 11px 43px 11px rgba(0, 0, 0, 0.11);
 		}
-		.back_face {
+		.expand_frame {
 			transform:translateY(0px);
 			opacity:1;
 		}
 	}
-	&.hasValue {
-		.front_face {
-			.placeholder {
-				transform:translateY(20px);
-				opacity:0;
-			}
-
-		}
-	}
 	&.placeholder_animate {
-		.front_face {
-			.current_value {
+		>.frame {
+			.value {
 				opacity:0;
 			}
 		}
 	}
 	&.placeholder_animate2 {
-		.front_face {
-			
+		.frame {
+
 			.placeholder {
 				transform:translateY(0);
 				opacity:1;
@@ -201,6 +209,26 @@ transition: 0.2s ease-in;
 	&.transition_paused {
 		transition:none!important;
 	}
+	&.animate > .expand_frame,
+	&.animating > .expand_frame{
+		display: block;
+	}
+	&.animating > .frame > .content > .value {
+		opacity: 0;
+	}
+	&:not(.animate):not(.animating) {
+		> .expand_frame{
+			display: none;
+		}
+		> .expand_background {
+			transform: scaleY(0);
+		}
+	}
+
+	&:not(.animate) > .frame > .content > .value + .placeholder {
+		transform:translateY(20px);
+		opacity:0;
+	}
 }
 
 .aw_cursor_pointer {
@@ -214,11 +242,11 @@ transition: 0.2s ease-in;
 	@include transition();
 	transform:scale(0.5);
 	.inner {
-		float:left;
-		width:100%;
-		height: 0%;
-		background:#fff;
-		border-radius:100%;
+		float: left;
+		width: 100%;
+		height: 0;
+		background: #fff;
+		border-radius: 100%;
 		@include transition();
 
 	}
@@ -228,4 +256,8 @@ transition: 0.2s ease-in;
 			height:100%;
 		}
 	}
-}
+}
+.immersive_shadow{
+	position: relative;
+	float: left;
+}

package/js/awselect.js

@@ -7,320 +7,270 @@ Github: https://github.com/prevwong/awesome-select/
 
 **/
 
-var awselect_count = 0; // used for generating sequential ID for <select> that does not have ID
 var mobile_width = 800;
 
-(function($) {
-    $(document).mouseup(function(e) {
-        var awselect = $(".awselect");
-        if (!awselect.is(e.target) && awselect.has(e.target).length === 0) 
-        {
-            deanimate();
-        }
-    });
-    $.fn.awselect = function(options) {
-        var element = $(this);
-        var opts = $.extend({}, $.fn.awselect.defaults, options);
-        element.each(function() {
-            awselect_count += 1;
-            build($(this), opts);
-        });
-        this.on("aw:animate", function() {
-            animate(getawselectElement($(this)));
-            
-        });
-        this.on("change", function() {
-            setValue(this);
+
+HTMLSelectElement.prototype.__defineSetter__('awselect', function (awselect) {this.__awselect = awselect});
+
+HTMLSelectElement.prototype.awselect = {
+    constructor: function() {
+        this.awselect_section = true;
+        this.awselect.build.call(this);
+        this.awselect_section.addEventListener('aw:animate', function () {
+            this.animate();
         });
-        this.on("aw:deanimate", function() {
-           deanimate(getawselectElement($(this)))
+        this.awselect_section.addEventListener('aw:deanimate', function () {
+            this.deanimate()
         });
 
-        console.log(element.attr("id"));
-        return {
-            blue: function() {
-                element.css("color", "blue");
-            }
-        };
-    };
-    $.fn.awselect.defaults = {
-        background: "#e5e5e5",
-        active_background: "#fff",
-        placeholder_color: "#000",
-        placeholder_active_color: "#000",
-        option_color: "#000",
-        vertical_padding: "15px",
-        horizontal_padding: "40px",
-        immersive: false,
-    };
-    function getawselectElement(select) {
-        return $('.awselect[data-select="' + select.attr("id") + '"]');
-    }
-    function build(element, opts) {
-        var placeholder = element.attr("data-placeholder");
-        var id = element.attr("id");
-        var options = element.children("option");
-        var selected = false;
-        var classes = "awselect";
-        var options_html = "";
-        var background = opts["background"];
-        var active_background = opts["active_background"];
-        var placeholder_color = opts["placeholder_color"];
-        var placeholder_active_color = opts["placeholder_active_color"];
-        var option_color = opts["option_color"];
-        var vertical_padding = opts["vertical_padding"];
-        var horizontal_padding = opts["horizontal_padding"];
-        var immersive = opts["immersive"];
-        if ( immersive !== true ) {
-            var immersive = false;
-        }
+        this.awselect_section.addEventListener("change", function () {
+            let select = this.select;
 
-        options.each(function() {
-            if (typeof $(this).attr("selected") !== typeof undefined && $(this).attr("selected") !== false) {
-                selected = $(this).text();
-            }
-            options_html += '<li><a style="padding: 2px '+ horizontal_padding +'">' + $(this).text() + '</a></li>';
+            let text = '';
+            let selectedOptions = [...select.selectedOptions];
+            let selectedOptionLastIndex = selectedOptions.length - 1;
+            selectedOptions.forEach(function (item, index) {
+                text += item.text + (selectedOptionLastIndex !== index ? ',' : '');
+            });
+            let value = document.createElement('span');
+            value.classList.add('value');
+            value.innerHTML = text;
+
+            let content = this.querySelector(":scope > .frame > .content");
+            content.firstChild.classList.contains('value') ? content.firstChild.replaceWith(value) : content.prepend(value);
+
+            select.dispatchEvent(new Event("change"));
+            setTimeout(function () {
+                this.deanimate();
+            }.call(this), 100);
         });
-        if (selected !== false) {
-            classes += " hasValue";
-        }
-        if (typeof id !== typeof undefined && id !== false) {
-            id_html = id;
-        } else {
-            id_html = "awselect_" + awselect_count;
-            $(element).attr("id", id_html);
+    },
+    animate: function () {
+        if (this.classList.contains('animating')) {
+            return;
         }
-        var awselect_html = '<div data-immersive="'+ immersive +'" id="awselect_' + id_html + '" data-select="' + id_html + '" class = "' + classes + '"><div style="background:' + active_background + '" class = "bg"></div>';
-        awselect_html += '<div style="padding:' + vertical_padding + " " + horizontal_padding + '" class = "front_face">';
-        awselect_html += '<div style="background:' + background + '" class = "bg"></div>';
-        awselect_html += '<div data-inactive-color="' + placeholder_active_color + '" style="color:' + placeholder_color + '" class = "content">';
-        if (selected !== false) {
-            awselect_html += '<span class="current_value">' + selected + "</span>";
+        this.classList.add('animating');
+        let timeout = 100;
+        let all_awselect = [...document.getElementsByClassName("awselect animate")];
+
+        all_awselect.length > 0 && HTMLSelectElement.prototype.awselect.deanimate_all() && this.deanimate() && (timeout = 600);
+
+        let immersive = this.select.immersive;
+        if (document.documentElement.clientWidth < mobile_width || immersive) {
+            this.immersive_animate();
+            timeout += 200
         }
-        awselect_html += '<span class = "placeholder">' + placeholder + "</span>";
-        awselect_html += '<i class = "icon">' + icon(placeholder_color) + "</i>";
-        awselect_html += "</div>";
-        awselect_html += "</div>";
-        awselect_html += '<div style="padding:' + vertical_padding + ' 0;" class = "back_face"><ul style="color:' + option_color + '">';
-        awselect_html += options_html;
-        awselect_html += "</ul></div>";
-        awselect_html += "</div>";
-        $(awselect_html).insertAfter(element);
-       element.hide();
-    }
+        let that = this;
+        setTimeout(function() {
+            let expand_frame = that.expand_frame;
+            let expand_background = that.expand_background;
+            expand_background.style.transform = '';
 
-    function animate(element) {
-        if (element.hasClass("animating") == false) {
-            element.addClass("animating");
-            if ($(".awselect.animate").length > 0) {
-                deanimate($(".awselect").not(element));
-                var timeout = 600;
-            } else {
-                var timeout = 100;
-            }
-            var immersive = element.attr('data-immersive')
-            
-            if ($(window).width() < mobile_width || immersive == "true" ) {
-                immersive_animate(element);
-                timeout += 200
-            }
+            (document.documentElement.clientWidth < mobile_width || immersive) &&
+            (that.style.top = parseInt(that.style.top) - expand_frame.clientHeight + 'px');
+
+            that.classList.add("placeholder_animate");
             setTimeout(function() {
-                var back_face = element.find(".back_face");
-                back_face.show();
-                var bg = element.find("> .bg");
-                bg.css({
-                    height: element.outerHeight() + back_face.outerHeight()
-                });
-                back_face.css({
-                    "margin-top": $(element).outerHeight()
-                });
-                
-                if ( $(window).width() < mobile_width || immersive === "true" ) {
-                    element.css({
-                        "top": parseInt(element.css('top')) - back_face.height()
-                    })
-                }
-                element.addClass("placeholder_animate");
-                setTimeout(function() {
-                    switchPlaceholderColor(element);
-                    setTimeout(function(){
-                        if (back_face.outerHeight() == 200) {
-                            back_face.addClass("overflow");
-                        }
-                    }, 200);
-                  
-                    
-                    element.addClass("placeholder_animate2");
-                    element.addClass("animate");
-                    element.addClass("animate2");
-                    element.removeClass("animating");
-                }, 100);
-            }, timeout);
-        }
-    }
+                setTimeout(function(){
+                    if (expand_frame.clientHeight == 200) {
+                        expand_frame.addClass("overflow");
+                    }
+                }, 200);
 
-    function immersive_animate(element) {
-        $(".awselect_bg").remove()
-        $('body, html').addClass('immersive_awselect')
-        $('body').prepend('<div class = "awselect_bg"></div>')
+
+                that.classList.add('placeholder_animate2', 'animate', 'animate2');
+                that.classList.remove("animating");
+            }, 100);
+        }, timeout);
+    },
+    immersive_animate: function () {
+        this.immersive_background && this.immersive_background.remove();
+        document.documentElement.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;
+        document.body.prepend(immersive_background);
         setTimeout(function(){
-             $('.awselect_bg').addClass('animate')
+            immersive_background.classList.add('animate');
         }, 100)
-       
-       
-        var current_width = element.outerWidth()
-        var current_height = element.outerHeight()
-        var current_left = element.offset().left
-        var current_top = element.offset().top - $(window).scrollTop() 
-        element.attr('data-o-width', current_width)
-        element.attr('data-o-left', current_left)
-        element.attr('data-o-top', current_top)
-        element.addClass('transition_paused').css({
-            "width" : current_width,
-            "z-index": "9999"
-       })
-        setTimeout(function(){
-            $('<div class = "awselect_placebo" style="position:relative; width:'+ current_width +'px; height:'+ current_height +'px; float:left;ß"></div>').insertAfter(element)
-            element.css({
-                "position": "fixed",
-                "top" : current_top,
-                "left": current_left
-            })
-            element.removeClass('transition_paused')
+
+        let immersive_width = this.clientWidth + 'px';
+        let immersive_height = this.clientHeight + 'px';
+        let immersive_left = this.offsetLeft + 'px';
+        let immersive_top = this.offsetTop - window.scrollY + 'px';
+        this.immersive_width = immersive_width;
+        this.immersive_left = immersive_left;
+        this.immersive_top = immersive_top;
+        this.classList.add('transition_paused');
+        Object.assign(this.style,{
+            "width" : immersive_width,
+            "z-index": "9999",
+        });
+        let that = this;
+        setTimeout(function() {
+            let immersive_shadow = document.createElement('div');
+            Object.assign(immersive_shadow.style,{
+                "width" : immersive_width,
+                "height" : immersive_height,
+            });
+            immersive_shadow.classList.add('immersive_shadow');
+            that.insertAdjacentElement('afterend', immersive_shadow);
+            that.immersive_shadow = immersive_shadow;
+
+            Object.assign(that.style,{
+                position: 'fixed',
+                top: immersive_top,
+                left: immersive_left,
+            });
+
+            that.classList.remove('transition_paused')
             setTimeout(function(){
-                if ( $(window).width() < mobile_width ) {
-                     element.css('width', $(window).outerWidth() - 40 )
-                } else {
-                     element.css('width', $(window).outerWidth() / 2)
-                }
-               
-                element.css({
-                    "top" : $(window).outerHeight() / 2 + element.outerHeight() / 2,
-                    "left" : "50%",
-                    "transform": "translateX(-50%) translateY(-50%)"
-                })
+                that.style.width = (window.innerWidth < mobile_width ? window.innerWidth - 40 : window.innerWidth / 2) + 'px';
+                Object.assign(that.style,{
+                    top: (window.innerHeight / 2 + that.clientHeight / 2) + 'px',
+                    left: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                });
                 setTimeout(function(){
-                    animate(element)
-                 }, 100)
+                    that.animate();
+                }, 100)
             }, 100)
         }, 50)
-    }
-
-    function deanimate(awselects) {
-        if (awselects == null) {
-            var awselect = $(".awselect");
-        } else {
-            var awselect = awselects;
-        }
-        $(awselect).each(function() {
-            var element = $(this);
-            
-            if (element.hasClass("animate")) {
-                setTimeout(function() {
-               
-                }, 300);
-                element.removeClass("animate2");
-                element.find(".back_face").hide();
-                element.find('.back_face').removeClass('overflow')
-                element.removeClass("animate");
-                switchPlaceholderColor(element);
-
-                element.children(".bg").css({
-                    height: 0
-                });
-                element.removeClass("placeholder_animate2");
-                setTimeout(function() {
-                    immersive_deanimate(element)
-                    element.removeClass("placeholder_animate");
-                }, 100);
-            }
-        });
-    }
-    function immersive_deanimate(element){
-       
-        if ( element.siblings('.awselect_placebo').length > 0 ) {
-           
+    },
+    deanimate: function () {
+        setTimeout(function() {
 
-            setTimeout(function(){
-                var original_width = element.attr('data-o-width')
-                var original_left = element.attr('data-o-left')
-                var original_top = element.attr('data-o-top')
+        }, 300);
+        this.classList.remove('animate2');
+        this.expand_frame.classList.remove('overflow');
+        this.classList.remove('animate', 'placeholder_animate2');
+        let that = this;
 
-                element.css({
-                    "width" : original_width,
-                    "left" : original_left + "px",
+        setTimeout(function() {
+            let immersive_shadow = that.immersive_shadow;
+            !!immersive_shadow && setTimeout(function(){
+                Object.assign(that.style,{
+                    "width" : that.immersive_width,
+                    "left" : that.immersive_left,
                     "transform": "translateX(0) translateY(0)",
-                    "top" : original_top + "px"
+                    "top" : that.immersive_top
                 })
-                 $('.awselect_bg').removeClass('animate')
+                that.immersive_background.classList.remove('animate');
                 setTimeout(function(){
-                    $('.awselect_placebo').remove()
-                    $('body, html').removeClass('immersive_awselect')
-                    setTimeout(function(){ 
-                        $('.awselect_bg').removeClass('animate').remove()
+                    immersive_shadow.remove();
+                    that.immersive_shadow = undefined;
+                    document.documentElement.classList.remove('immersive_awselect');
+                    document.body.classList.remove('immersive_awselect');
+                    setTimeout(function(){
+                        that.immersive_background.classList.remove('animate');
+                        that.immersive_background.remove();
+                        that.immersive_background = undefined;
                     }, 200);
-                    element.attr('style', '')
+                    that.removeAttribute('style');
                 }, 300)
-            }, 100)
-            
-        }
-        
+            }, 100);
+            that.classList.remove('placeholder_animate');
+        }, 100);
+    },
+    deanimate_all: function () {
+        let all_awselect = [...document.getElementsByClassName("awselect animate")];
+        all_awselect.forEach(function (awselect) {
+            awselect.deanimate();
+        });
+    },
+    build: function () {
+        let id = this.id;
+        let options = this.querySelectorAll(`:scope > option`);
+        let classes = `${ this.className } awselect`;
+        let options_html = '<ul class="awselect-options">';
+        let awselect_icon = '<svg version="1.1" class="chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>';
+        let selected = false;
 
-    }
+        options.forEach(function(item) {
+            let text = item.text;
+            item.selected && (selected = text);
+            options_html += `<li><a>${ text }</a></li>`;
+        });
+        options_html += '</ul>';
 
-    function switchPlaceholderColor(element) {
-        var placeholder_inactive_color = element.find(".front_face .content").attr("data-inactive-color");
-        var placeholder_normal_color = element.find(".front_face .content").css("color");
-        element.find(".front_face .content").attr("data-inactive-color", placeholder_normal_color);
-        element.find(".front_face .content").css("color", placeholder_inactive_color);
-        element.find(".front_face .icon svg").css("fill", placeholder_inactive_color);
-    }
-    function setValue(select) {
-        var val = $(select).val();
-        var awselect = getawselectElement($(select));
-        var option_value = $(select).children('option[value="' + val + '"]').eq(0);
-        var callback = $(select).attr("data-callback");
-        $(awselect).find(".current_value").remove();
-        $(awselect).find(".front_face .content").prepend('<span class = "current_value">' + option_value.text() + "</span>");
-        $(awselect).addClass("hasValue");
-        if (typeof callback !== typeof undefined && callback !== false) {
-            window[callback](option_value.val());
+        if (!id) {
+            let xpath = '';
+            let item = this;
+            let slash = '';
+            [...Array(5).keys()].some(function (index) {
+                let tagName = item.tagName;
+                let id = item.id;
+                let siblingIndex = [...item.parentElement.querySelectorAll(`:scope > ${tagName}`)].indexOf(item);
+
+                xpath = (tagName === 'BODY' ? '//' : '') + (!!id ? `id("${id}")`  : `${tagName}[${siblingIndex + 1}]`) + slash + xpath;
+                slash = '/';
+                item = item.parentElement;
+                return !!id || tagName === 'BODY';
+            });
+            id = '$$$$-$$$$-$$$$-$$$$'.replace(/[$]/g, function(c, p) {
+                str = (new TextEncoder).encode(xpath).join('z');
+                return str[p % str.length];
+            });
+            this.id = id;
         }
-        setTimeout(function() {
-            deanimate();
-        }, 100);
-    }
-    function icon(color) {
-        return '<svg style="fill:' + color + '" version="1.1" id="Chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>';
-    }
-    function change(elem) {
-        elem.css("color", "green");
-    }
-})(jQuery);
+        this.immersive = this.attributes.immersive?.value === 'true';
 
+        let awselect_section = document.createElement('div');
+        awselect_section.id = 'awselect_' + id;
+        awselect_section.select = this;
+        awselect_section.classList.value = classes;
 
-$(document).ready(function() {
-    $("body").on("click", ".awselect .front_face", function() {
-        var dropdown = $(this).parent('.awselect');
-       
-        if ( dropdown.hasClass("animate") == false) {
-            $("select#" + dropdown.attr("id").replace("awselect_", "")).trigger("aw:animate");
-        } else {
-             $("select#" + dropdown.attr("id").replace("awselect_", "")).trigger("aw:deanimate");
-        }
-        
-    });
-
-
-
-    $("body").on("click", ".awselect ul li a", function() {
-        var dropdown = $(this).parents(".awselect");
-        var value_index = $(this).parent("li").index();
-        var id = dropdown.attr("data-select");
-        var select = $("select#" + id);
-        var option_value = $(select).children("option").eq(value_index);
-        var callback = $(select).attr("data-callback");
-        $(select).val(option_value.val());
-        $(select).trigger("change");
-    });
-});
+        let frame = document.createElement('div');
+        frame.classList.value = 'frame';
+        !!selected && (frame.innerHTML += `<span class="value">${ selected }</span>`);
+        !!this.attributes?.placeholder?.value
+        && (frame.innerHTML += `<span class="placeholder">${ this.attributes.placeholder.value }</span>`);
+        frame.innerHTML += `<i class="icon">${ awselect_icon }</i>`;
+        frame.innerHTML = `<div class="content">${ frame.innerHTML }</div>`;
+        awselect_section.append(frame);
+
+        let expand_background = document.createElement('div');
+        expand_background.classList.value = 'expand_background';
+        awselect_section.append(expand_background);
+
+        let expand_frame = document.createElement('div');
+        expand_frame.classList.value = 'expand_frame';
+        expand_frame.style.display = 'block';
+        expand_frame.innerHTML = options_html;
+        awselect_section.append(expand_frame);
+
+        this.insertAdjacentElement('afterend', awselect_section);
+        this.style.display = 'none';
+        this.awselect_section = awselect_section;
+        awselect_section.expand_background = expand_background;
+        awselect_section.expand_frame = expand_frame;
+        awselect_section.frame = frame;
+
+        expand_background.style.height = `calc(100% + ${ expand_frame.clientHeight }px)`;
+        expand_frame.removeAttribute('style');
+
+        this.awselect_section.animate = this.awselect.animate;
+        this.awselect_section.deanimate = this.awselect.deanimate;
+        this.awselect_section.immersive_animate = this.awselect.immersive_animate;
+    }
+};
+HTMLSelectElement.prototype.__defineGetter__('awselect', function () {
+    return (!!this.awselect_section || !(this instanceof HTMLSelectElement)) ? this.__awselect :
+        (!HTMLSelectElement.prototype.awselect_document_event &&
+        (document.addEventListener('click', function (event) {
+            console.log('click')
+            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', {}));
+            }
+
+        }) ||
+        document.addEventListener("mouseup", function (event) {
+            !event.target.closest('.awselect') && HTMLSelectElement.prototype.awselect.deanimate_all();
+        }) || (HTMLSelectElement.prototype.awselect_document_event = true)), this.__awselect.constructor);
+});