[refactor] improve dropdown

Author: zombieFox

src/css/form.css

@@ -1308,7 +1308,7 @@ input[type="range"]:disabled::-moz-range-progress{
 border-radius:var(--theme-radius);
 padding:0.5em0;
 position: absolute;
-top:calc(100%+calc(var(--layout-line-width) *2));
+top:100%;
 left:0;
 width:100%;
 min-width:12em;

src/js/dropdown.js

@@ -1,5 +1,7 @@
 vardropdown=(function(){
 
+var_currentFormDropdown=null;
+
 varmod={};
 
 mod.open=function(){
@@ -36,30 +38,46 @@ var dropdown = (function(){
 
 varbind={};
 
+vardocumentEvent={};
+
+documentEvent.add=function(){
+document.addEventListener("click",documentEvent.clickOut,false);
+};
+
+documentEvent.remove=function(){
+document.removeEventListener("click",documentEvent.clickOut,false);
+};
+
+documentEvent.clickOut=function(){
+if(!event.path.includes(_currentFormDropdown)){
+close();
+};
+};
+
 bind.formDropdown=function(){
 varallFormDropdown=helper.eA(".form-dropdown");
 allFormDropdown.forEach(function(arrayItem,index){
 varformDropdown=arrayItem;
 varformDropdownToggle=formDropdown.querySelector(".form-dropdown-toggle");
 varallFormDropdownMenuItem=formDropdown.querySelectorAll(".form-dropdown-menu-item");
 formDropdownToggle.addEventListener("click",function(){
+_currentFormDropdown=formDropdown;
 mod.toggle();
-render.toggle(formDropdown);
-render.offset(formDropdown);
+render.toggle();
 },false);
 allFormDropdownMenuItem.forEach(function(arrayItem,index){
 arrayItem.addEventListener("click",function(){
 mod.close();
-render.close(formDropdown);
+render.close();
 },false);
 });
 });
 };
 
 varrender={};
 
-render.offset=function(formDropdown){
-varformDropdownMenu=formDropdown.querySelector(".form-dropdown-menu");
+render.offset=function(){
+varformDropdownMenu=_currentFormDropdown.querySelector(".form-dropdown-menu");
 varbox=formDropdownMenu.getBoundingClientRect();
 if(box.left+box.width>window.innerWidth){
 formDropdownMenu.style.right="0";
@@ -69,28 +87,33 @@ var dropdown = (function(){
 };
 };
 
-render.toggle=function(formDropdown){
-if(formDropdown.classList.contains("form-dropdown-open")){
+render.toggle=function(){
+if(_currentFormDropdown.classList.contains("form-dropdown-open")){
 mod.close();
-helper.removeClass(formDropdown,"form-dropdown-open");
+helper.removeClass(_currentFormDropdown,"form-dropdown-open");
+documentEvent.remove();
+render.offset();
+_currentFormDropdown=null;
 }else{
 mod.open();
-helper.addClass(formDropdown,"form-dropdown-open");
+_currentFormDropdown=_currentFormDropdown;
+helper.addClass(_currentFormDropdown,"form-dropdown-open");
+documentEvent.add(_currentFormDropdown);
+render.offset();
 };
 };
 
-render.close=function(formDropdown){
+render.close=function(){
 mod.close();
-helper.removeClass(formDropdown,"form-dropdown-open");
-};
-
-render.open=function(formDropdown){
-mod.open();
-helper.addClass(formDropdown,"form-dropdown-open");
+helper.removeClass(_currentFormDropdown,"form-dropdown-open");
+documentEvent.remove();
+render.offset();
+_currentFormDropdown=null;
 };
 
 varclose=function(){
 mod.close();
+render.close();
 varallFormDropdown=helper.eA(".form-dropdown");
 allFormDropdown.forEach(function(arrayItem,index){
 helper.removeClass(arrayItem,"form-dropdown-open");