From 5b8d459c1b77e06fdbe7e12ceaa3facc6fbc98fc Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 29 Dec 2017 12:56:50 +0300 Subject: [PATCH] Version 2.0 --- README.md | 29 +++--- getmdl-select.min.css | 2 +- getmdl-select.min.css.map | 2 +- getmdl-select.min.js | 2 +- getmdl-select.min.js.map | 2 +- package.json | 2 +- src/js/getmdl-select.js | 183 +++++++++++++++++++++++++++++------- src/scss/getmdl-select.scss | 31 +++--- 8 files changed, 193 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index d0baff8..c8c27c4 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Check out the [example](http://creativeit.github.io/getmdl-select/) There are three ways to install getmdl-select: - 1. Using [npm](http://npmjs.org/): + 1. Using [npm](http://npmjs.org/): Use this command in your command line: ```bash npm install getmdl-select @@ -51,15 +51,19 @@ To use any MDL component, you must include the minified CSS and JavaScript files ### Example -Select field. +Simple select field. To see other examples visit [this page](http://creativeit.github.io/getmdl-select/). ```html -
- - - +
+ + + +
    +
  • Belarus
    • +
  • Brazil
    • +
  • France
    • +
  • Germany
    • +
  • Russia
    • +
``` ### Important @@ -72,11 +76,14 @@ For dynamically usage, you must add `getmdlSelect.init(cssSelector)` in javascri #### data-val Every `li` should have its own `data-val` attribute. Choosing any element of select you change `input`'s `data-val` property, which you can get using `document.querySelector(selector).getAttribute('data-val');`, where selector is your `input`'s id. +#### Pre-selected item +To set pre-selected value add `data-selected="true"` attribute to corresponding `li` in your list. + #### Width -Initial Select takes the default width (300px). If you want that Select automatically adapt to the maximum width add class `getmdl-select__fullwidth`. +Initial Select takes the default width (300px). You can change it by overriding the CSS property `width`. #### Height -Select automatically adapt to the maximum height. If you want to use small height (300px) and see scroll bar, add class `getmdl-select__fix-height`. +Options list automatically adapt to the maximum height by content. If you want to use small height (300px) and see scroll bar, add class `getmdl-select__fix-height`. ## LICENSE See the [LICENSE file](https://github.com/CreativeIT/getmdl-select/blob/master/LICENSE.txt) for license rights and limitations (MIT). diff --git a/getmdl-select.min.css b/getmdl-select.min.css index 8637282..384f9a4 100644 --- a/getmdl-select.min.css +++ b/getmdl-select.min.css @@ -1,3 +1,3 @@ -.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4)}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5}.getmdl-select .mdl-menu__container{width:100% !important;overflow:hidden}.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item{font-size:16px}.getmdl-select__fullwidth .mdl-menu{width:100%}.getmdl-select__fix-height .mdl-menu__container{overflow-y:auto;max-height:300px !important}.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left{bottom:auto;top:0} +.getmdl-select{outline:none}.getmdl-select .mdl-textfield__input{cursor:pointer}.getmdl-select .selected{background-color:#ddd}.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4);transform:rotate(0);transition:transform 0.3s}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5;transform:rotate(180deg)}.getmdl-select .mdl-menu__container{width:100% !important;margin-top:2px}.getmdl-select .mdl-menu__container .mdl-menu{width:100%}.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item{font-size:16px}.getmdl-select__fix-height .mdl-menu__container .mdl-menu{overflow-y:auto;max-height:288px !important}.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left{bottom:auto;top:0} /*# sourceMappingURL=getmdl-select.min.css.map */ diff --git a/getmdl-select.min.css.map b/getmdl-select.min.css.map index 12c9839..fe07286 100644 --- a/getmdl-select.min.css.map +++ b/getmdl-select.min.css.map @@ -1 +1 @@ -{"version":3,"file":"getmdl-select.min.css","sources":["getmdl-select.scss"],"sourcesContent":[".getmdl-select {\r\n\r\n .mdl-icon-toggle__label {\r\n float: right;\r\n margin-top: -30px;\r\n color: rgba(0, 0, 0, 0.4);\r\n }\r\n &.is-focused {\r\n .mdl-icon-toggle__label {\r\n color: #3f51b5;\r\n }\r\n }\r\n\r\n .mdl-menu__container {\r\n width: 100% !important;\r\n overflow: hidden;\r\n .mdl-menu .mdl-menu__item {\r\n font-size: 16px;\r\n }\r\n }\r\n}\r\n.getmdl-select__fullwidth {\r\n .mdl-menu {\r\n width: 100%;\r\n }\r\n}\r\n\r\n.getmdl-select__fix-height{\r\n .mdl-menu__container{\r\n overflow-y: auto;\r\n max-height: 300px !important;\r\n }\r\n .mdl-menu.mdl-menu--top-left {\r\n bottom: auto;\r\n top: 0;\r\n }\r\n}"],"mappings":"AAAA,AAEE,cAFY,CAEZ,uBAAuB,AAAC,CACtB,KAAK,CAAE,KAAM,CACb,UAAU,CAAE,KAAM,CAClB,KAAK,CAAE,eAAI,CACZ,AANH,AAQI,cARU,AAOX,WAAW,CACV,uBAAuB,AAAC,CACtB,KAAK,CAAE,OAAQ,CAChB,AAVL,AAaE,cAbY,CAaZ,oBAAoB,AAAC,CACnB,KAAK,CAAE,eAAgB,CACvB,QAAQ,CAAE,MAAO,CAIlB,AAnBH,AAgBc,cAhBA,CAaZ,oBAAoB,CAGlB,SAAS,CAAC,eAAe,AAAC,CACxB,SAAS,CAAE,IAAK,CACjB,AAGL,AACE,yBADuB,CACvB,SAAS,AAAC,CACR,KAAK,CAAE,IAAK,CACb,AAGH,AACE,0BADwB,CACxB,oBAAoB,AAAA,CAClB,UAAU,CAAE,IAAK,CACjB,UAAU,CAAE,gBAAiB,CAC9B,AAJH,AAKW,0BALe,CAKxB,SAAS,AAAA,mBAAmB,AAAC,CAC3B,MAAM,CAAE,IAAK,CACb,GAAG,CAAE,CAAE,CACR","names":[]} \ No newline at end of file +{"version":3,"file":"getmdl-select.min.css","sources":["getmdl-select.scss"],"sourcesContent":[".getmdl-select {\r\n outline: none;\r\n .mdl-textfield__input {\r\n cursor: pointer;\r\n }\r\n .selected {\r\n background-color: #ddd;\r\n }\r\n .mdl-icon-toggle__label {\r\n float: right;\r\n margin-top: -30px;\r\n color: rgba(0, 0, 0, 0.4);\r\n transform: rotate(0);\r\n transition: transform 0.3s;\r\n }\r\n &.is-focused {\r\n .mdl-icon-toggle__label {\r\n color: #3f51b5;\r\n transform: rotate(180deg);\r\n }\r\n }\r\n\r\n .mdl-menu__container {\r\n width: 100% !important;\r\n margin-top: 2px;\r\n .mdl-menu {\r\n width: 100%;\r\n .mdl-menu__item {\r\n font-size: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.getmdl-select__fix-height {\r\n .mdl-menu__container .mdl-menu {\r\n overflow-y: auto;\r\n max-height: 288px !important;\r\n }\r\n .mdl-menu.mdl-menu--top-left {\r\n bottom: auto;\r\n top: 0;\r\n }\r\n}"],"mappings":"AAAA,AAAA,cAAc,AAAC,CACb,OAAO,CAAE,IAAK,CA+Bf,AAhCD,AAEE,cAFY,CAEZ,qBAAqB,AAAC,CACpB,MAAM,CAAE,OAAQ,CACjB,AAJH,AAKE,cALY,CAKZ,SAAS,AAAC,CACR,gBAAgB,CAAE,IAAK,CACxB,AAPH,AAQE,cARY,CAQZ,uBAAuB,AAAC,CACtB,KAAK,CAAE,KAAM,CACb,UAAU,CAAE,KAAM,CAClB,KAAK,CAAE,eAAI,CACX,SAAS,CAAE,SAAM,CACjB,UAAU,CAAE,cAAe,CAC5B,AAdH,AAgBI,cAhBU,AAeX,WAAW,CACV,uBAAuB,AAAC,CACtB,KAAK,CAAE,OAAQ,CACf,SAAS,CAAE,cAAM,CAClB,AAnBL,AAsBE,cAtBY,CAsBZ,oBAAoB,AAAC,CACnB,KAAK,CAAE,eAAgB,CACvB,UAAU,CAAE,GAAI,CAOjB,AA/BH,AAyBI,cAzBU,CAsBZ,oBAAoB,CAGlB,SAAS,AAAC,CACR,KAAK,CAAE,IAAK,CAIb,AA9BL,AA2BM,cA3BQ,CAsBZ,oBAAoB,CAGlB,SAAS,CAEP,eAAe,AAAC,CACd,SAAS,CAAE,IAAK,CACjB,AAKP,AACuB,0BADG,CACxB,oBAAoB,CAAC,SAAS,AAAC,CAC7B,UAAU,CAAE,IAAK,CACjB,UAAU,CAAE,gBAAiB,CAC9B,AAJH,AAKW,0BALe,CAKxB,SAAS,AAAA,mBAAmB,AAAC,CAC3B,MAAM,CAAE,IAAK,CACb,GAAG,CAAE,CAAE,CACR","names":[]} \ No newline at end of file diff --git a/getmdl-select.min.js b/getmdl-select.min.js index 1abfad5..197dfeb 100644 --- a/getmdl-select.min.js +++ b/getmdl-select.min.js @@ -1,2 +1,2 @@ -"use strict";!function(){function e(){getmdlSelect.init(".getmdl-select")}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();var getmdlSelect={_defaultValue:{width:300},_addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelectorAll("li"),l=e.querySelector(".mdl-js-menu");t.onkeydown=function(e){38!=e.keyCode&&40!=e.keyCode||l.MaterialMenu.show()},l.onkeydown=function(e){13==e.keyCode&&t.focus()},[].forEach.call(n,function(n){n.onclick=function(){var a=n.textContent.trim();if(t.value=a,e.MaterialTextfield.change(a),setTimeout(function(){e.MaterialTextfield.updateClasses_()},250),t.dataset.val=n.dataset.val||"","createEvent"in document){var d=document.createEvent("HTMLEvents");d.initEvent("change",!1,!0),l.MaterialMenu.hide(),t.dispatchEvent(d)}else t.fireEvent("onchange")}})},init:function(e,t){var n=document.querySelectorAll(e);[].forEach.call(n,function(e){getmdlSelect._addEventListeners(e);var n=t||(e.querySelector(".mdl-menu").offsetWidth?e.querySelector(".mdl-menu").offsetWidth:getmdlSelect._defaultValue.width);e.style.width=n+"px",componentHandler.upgradeElement(e),componentHandler.upgradeElement(e.querySelector("ul"))})}}; +"use strict";!function(){function e(){getmdlSelect.init(".getmdl-select")}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();var getmdlSelect={_defaultValue:{width:300},_addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelector('input[type="hidden"]'),l=e.querySelectorAll("li"),a=e.querySelector(".mdl-js-menu"),o=e.querySelector(".mdl-icon-toggle__label"),i="",c="",s="",u=!1,d=function(o){var i=o.textContent.trim();if(t.value=i,l.forEach(function(e){e.classList.remove("selected")}),o.classList.add("selected"),e.MaterialTextfield.change(i),setTimeout(function(){e.MaterialTextfield.updateClasses_()},250),n.value=o.dataset.val||"",c=t.value,s=n.value,"createEvent"in document){var u=document.createEvent("HTMLEvents");u.initEvent("change",!1,!0),a.MaterialMenu.hide(),t.dispatchEvent(u)}else t.fireEvent("onchange")},r=function(){u=!1,t.value=c,n.value=s,e.querySelector(".mdl-menu__container").classList.contains("is-visible")||e.classList.remove("is-focused");var l=document.querySelectorAll(".getmdl-select .mdl-js-menu");[].forEach.call(l,function(e){e.MaterialMenu.hide()});var o=new Event("closeSelect");a.dispatchEvent(o)};document.body.addEventListener("click",r,!1),e.onkeydown=function(l){9==l.keyCode&&(t.value=c,n.value=s,a.MaterialMenu.hide(),e.classList.remove("is-focused"))},t.onfocus=function(e){a.MaterialMenu.show(),a.focus(),u=!0},t.onblur=function(e){e.stopPropagation()},t.onclick=function(t){t.stopPropagation(),a.classList.contains("is-visible")?(a.MaterialMenu.hide(),u=!1):(a.MaterialMenu.show(),r(),e.classList.add("is-focused"),u=!0)},t.onkeydown=function(l){27==l.keyCode&&(t.value=c,n.value=s,a.MaterialMenu.hide(),e.MaterialTextfield.onBlur_(),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i=""))},a.addEventListener("closeSelect",function(l){t.value=c,n.value=s,e.classList.remove("is-focused"),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i="")}),a.onkeydown=function(l){27==l.keyCode&&(t.value=c,n.value=s,e.classList.remove("is-focused"),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i=""))},o&&(o.onclick=function(l){l.stopPropagation(),u?(a.MaterialMenu.hide(),u=!1,e.classList.remove("is-focused"),e.MaterialTextfield.onBlur_(),t.value=c,n.value=s):(r(),e.MaterialTextfield.onFocus_(),t.focus(),a.MaterialMenu.show(),u=!0)}),[].forEach.call(l,function(n){n.onfocus=function(){e.classList.add("is-focused");var l=n.textContent.trim();t.value=l,e.classList.contains("mdl-textfield--floating-label")||""!=i||(i=e.querySelector(".mdl-textfield__label").textContent.trim(),e.querySelector(".mdl-textfield__label").textContent="")},n.onclick=function(){d(n)},n.dataset.selected&&d(n)})},init:function(e){var t=document.querySelectorAll(e);[].forEach.call(t,function(e){getmdlSelect._addEventListeners(e),componentHandler.upgradeElement(e),componentHandler.upgradeElement(e.querySelector("ul"))})}}; //# sourceMappingURL=getmdl-select.min.js.map \ No newline at end of file diff --git a/getmdl-select.min.js.map b/getmdl-select.min.js.map index f5b9a71..d7c6d1b 100644 --- a/getmdl-select.min.js.map +++ b/getmdl-select.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["src\\js\\getmdl-select.js"],"names":["whenLoaded","getmdlSelect","init","window","addEventListener","attachEvent","_defaultValue","width","_addEventListeners","dropdown","input","querySelector","list","querySelectorAll","menu","onkeydown","event","keyCode","show","focus","forEach","call","li","onclick","value","textContent","trim","MaterialTextfield","change","setTimeout","updateClasses_","dataset","val","document","evt","createEvent","initEvent","hide","dispatchEvent","fireEvent","selector","widthDef","dropdowns","i","offsetWidth","style","componentHandler","upgradeElement"],"mappings":"AAAA,cAII,WACI,QAASA,KACLC,aAAaC,KAAK,kBAGtBC,OAAOC,iBAAmBD,OAAOC,iBAAiB,OAAQJ,GAAY,GAASG,OAAOE,aAAeF,OAAOE,YAAY,SAAUL,KAGtI,IAAIC,eACAK,eACIC,MAAO,KAEXC,mBAAoB,SAA4BC,GAC5C,GAAIC,GAAQD,EAASE,cAAc,SAC/BC,EAAOH,EAASI,iBAAiB,MACjCC,EAAOL,EAASE,cAAc,eAGlCD,GAAMK,UAAY,SAAUC,GACH,IAAjBA,EAAMC,SAAkC,IAAjBD,EAAMC,SAC7BH,EAAmB,aAAEI,QAK7BJ,EAAKC,UAAY,SAAUC,GACF,IAAjBA,EAAMC,SACNP,EAAMS,YAIXC,QAAQC,KAAKT,EAAM,SAAUU,GAC5BA,EAAGC,QAAU,WACT,GAAIC,GAAQF,EAAGG,YAAYC,MAU3B,IATAhB,EAAMc,MAAQA,EACdf,EAASkB,kBAAkBC,OAAOJ,GAClCK,WAAW,WACPpB,EAASkB,kBAAkBG,kBAC5B,KAGHpB,EAAMqB,QAAQC,IAAMV,EAAGS,QAAQC,KAAO,GAElC,eAAiBC,UAAU,CAC3B,GAAIC,GAAMD,SAASE,YAAY,aAC/BD,GAAIE,UAAU,UAAU,GAAO,GAC/BtB,EAAmB,aAAEuB,OACrB3B,EAAM4B,cAAcJ,OAEpBxB,GAAM6B,UAAU,gBAKhCrC,KAAM,SAAcsC,EAAUC,GAC1B,GAAIC,GAAYT,SAASpB,iBAAiB2B,MACvCpB,QAAQC,KAAKqB,EAAW,SAAUC,GACjC1C,aAAaO,mBAAmBmC,EAChC,IAAIpC,GAAQkC,IAAsBE,EAAEhC,cAAc,aAAaiC,YAAcD,EAAEhC,cAAc,aAAaiC,YAAc3C,aAAaK,cAAcC,MACnJoC,GAAEE,MAAMtC,MAAQA,EAAQ,KACxBuC,iBAAiBC,eAAeJ,GAChCG,iBAAiBC,eAAeJ,EAAEhC,cAAc","file":"getmdl-select.min.js","sourceRoot":"D:\\projects\\CreativeIt\\getmdl-select\\getmdl-select"} \ No newline at end of file +{"version":3,"sources":["src\\js\\getmdl-select.js"],"names":["whenLoaded","getmdlSelect","init","window","addEventListener","attachEvent","_defaultValue","width","_addEventListeners","dropdown","input","querySelector","hiddenInput","list","querySelectorAll","menu","arrow","label","previousValue","previousDataVal","opened","setSlectedItem","li","value","textContent","trim","forEach","classList","remove","add","MaterialTextfield","change","setTimeout","updateClasses_","dataset","val","document","evt","createEvent","initEvent","hide","dispatchEvent","fireEvent","hideAllMenus","contains","menus","call","event","Event","body","onkeydown","keyCode","onfocus","e","show","focus","onblur","stopPropagation","onclick","onBlur_","onFocus_","selected","selector","dropdowns","componentHandler","upgradeElement"],"mappings":"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","file":"getmdl-select.min.js","sourceRoot":"E:\\html5\\GitHub\\getmdl-select"} \ No newline at end of file diff --git a/package.json b/package.json index 3617a6c..a9109a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "getmdl-select", - "version": "1.1.0", + "version": "2.0.0", "description": "select for material-design-lite", "repository": { "type": "git", diff --git a/src/js/getmdl-select.js b/src/js/getmdl-select.js index 9617b60..3a5cb46 100644 --- a/src/js/getmdl-select.js +++ b/src/js/getmdl-select.js @@ -12,59 +12,178 @@ }()); var getmdlSelect = { - _defaultValue: { - width: 300 - }, _addEventListeners: function (dropdown) { var input = dropdown.querySelector('input'); + var hiddenInput = dropdown.querySelector('input[type="hidden"]'); var list = dropdown.querySelectorAll('li'); var menu = dropdown.querySelector('.mdl-js-menu'); + var arrow = dropdown.querySelector('.mdl-icon-toggle__label'); + var label = ''; + var previousValue = ''; + var previousDataVal = ''; + var opened = false; - //show menu on arrow down or arrow up - input.onkeydown = function (event) { - if (event.keyCode == 38 || event.keyCode == 40) { + var setSelectedItem = function (li) { + var value = li.textContent.trim(); + input.value = value; + list.forEach(function (li) { + li.classList.remove('selected'); + }); + li.classList.add('selected'); + dropdown.MaterialTextfield.change(value); // handles css class changes + setTimeout(function () { + dropdown.MaterialTextfield.updateClasses_(); //update css class + }, 250); + + // update input with the "id" value + hiddenInput.value = li.dataset.val || ''; + + previousValue = input.value; + previousDataVal = hiddenInput.value; + + if ("createEvent" in document) { + var evt = document.createEvent("HTMLEvents"); + evt.initEvent("change", false, true); + menu['MaterialMenu'].hide(); + input.dispatchEvent(evt); + } else { + input.fireEvent("onchange"); + } + } + + var hideAllMenus = function () { + opened = false; + input.value = previousValue; + hiddenInput.value = previousDataVal; + if (!dropdown.querySelector('.mdl-menu__container').classList.contains('is-visible')) { + dropdown.classList.remove('is-focused'); + } + var menus = document.querySelectorAll('.getmdl-select .mdl-js-menu'); + [].forEach.call(menus, function (menu) { + menu['MaterialMenu'].hide(); + }); + var event = new Event('closeSelect'); + menu.dispatchEvent(event); + }; + document.body.addEventListener('click', hideAllMenus, false); + + //hide previous select after press TAB + dropdown.onkeydown = function (event) { + if (event.keyCode == 9) { + input.value = previousValue; + hiddenInput.value = previousDataVal; + menu['MaterialMenu'].hide(); + dropdown.classList.remove('is-focused'); + } + }; + + //show select if it have focus + input.onfocus = function (e) { + menu['MaterialMenu'].show(); + menu.focus(); + opened = true; + }; + + input.onblur = function (e) { + e.stopPropagation(); + }; + + //hide all old opened selects and opening just clicked select + input.onclick = function (e) { + e.stopPropagation(); + if (!menu.classList.contains('is-visible')) { menu['MaterialMenu'].show(); + hideAllMenus(); + dropdown.classList.add('is-focused'); + opened = true; + } else { + menu['MaterialMenu'].hide(); + opened = false; } }; - //return focus to input - menu.onkeydown = function (event) { - if (event.keyCode == 13) { - input.focus(); + input.onkeydown = function (event) { + if (event.keyCode == 27) { + input.value = previousValue; + hiddenInput.value = previousDataVal; + menu['MaterialMenu'].hide(); + dropdown.MaterialTextfield.onBlur_(); + if (label !== '') { + dropdown.querySelector('.mdl-textfield__label').textContent = label; + label = ''; + } } }; - [].forEach.call(list, function (li) { - li.onclick = function () { - var value = li.textContent.trim(); - input.value = value; - dropdown.MaterialTextfield.change(value); // handles css class changes - setTimeout(function () { - dropdown.MaterialTextfield.updateClasses_(); //update css class - }, 250); + menu.addEventListener('closeSelect', function (e) { + input.value = previousValue; + hiddenInput.value = previousDataVal; + dropdown.classList.remove('is-focused'); + if (label !== '') { + dropdown.querySelector('.mdl-textfield__label').textContent = label; + label = ''; + } + }); - // update input with the "id" value - input.dataset.val = li.dataset.val || ''; + //set previous value and data-val if ESC was pressed + menu.onkeydown = function (event) { + if (event.keyCode == 27) { + input.value = previousValue; + hiddenInput.value = previousDataVal; + dropdown.classList.remove('is-focused'); + if (label !== '') { + dropdown.querySelector('.mdl-textfield__label').textContent = label; + label = ''; + } + } + }; - if ("createEvent" in document) { - var evt = document.createEvent("HTMLEvents"); - evt.initEvent("change", false, true); + if (arrow) { + arrow.onclick = function (e) { + e.stopPropagation(); + if (opened) { menu['MaterialMenu'].hide(); - input.dispatchEvent(evt); + opened = false; + dropdown.classList.remove('is-focused'); + dropdown.MaterialTextfield.onBlur_(); + input.value = previousValue; + hiddenInput.value = previousDataVal; } else { - input.fireEvent("onchange"); + hideAllMenus(); + dropdown.MaterialTextfield.onFocus_(); + input.focus(); + menu['MaterialMenu'].show(); + opened = true; + } + }; + } + + [].forEach.call(list, function (li) { + li.onfocus = function () { + dropdown.classList.add('is-focused'); + var value = li.textContent.trim(); + input.value = value; + if (!dropdown.classList.contains('mdl-textfield--floating-label') && label == '') { + label = dropdown.querySelector('.mdl-textfield__label').textContent.trim(); + dropdown.querySelector('.mdl-textfield__label').textContent = ''; } }; + + li.onclick = function () { + setSelectedItem(li); + }; + + if (li.dataset.selected) { + setSelectedItem(li); + } }); }, - init: function (selector, widthDef) { + init: function (selector) { var dropdowns = document.querySelectorAll(selector); - [].forEach.call(dropdowns, function (i) { - getmdlSelect._addEventListeners(i); - var width = widthDef ? widthDef : (i.querySelector('.mdl-menu').offsetWidth ? i.querySelector('.mdl-menu').offsetWidth : getmdlSelect._defaultValue.width); - i.style.width = width + 'px'; - componentHandler.upgradeElement(i); - componentHandler.upgradeElement(i.querySelector('ul')); + [].forEach.call(dropdowns, function (dropdown) { + getmdlSelect._addEventListeners(dropdown); + componentHandler.upgradeElement(dropdown); + componentHandler.upgradeElement(dropdown.querySelector('ul')); }); } }; diff --git a/src/scss/getmdl-select.scss b/src/scss/getmdl-select.scss index de63930..03100f1 100644 --- a/src/scss/getmdl-select.scss +++ b/src/scss/getmdl-select.scss @@ -1,34 +1,41 @@ .getmdl-select { - + outline: none; + .mdl-textfield__input { + cursor: pointer; + } + .selected { + background-color: #ddd; + } .mdl-icon-toggle__label { float: right; margin-top: -30px; color: rgba(0, 0, 0, 0.4); + transform: rotate(0); + transition: transform 0.3s; } &.is-focused { .mdl-icon-toggle__label { color: #3f51b5; + transform: rotate(180deg); } } .mdl-menu__container { width: 100% !important; - overflow: hidden; - .mdl-menu .mdl-menu__item { - font-size: 16px; + margin-top: 2px; + .mdl-menu { + width: 100%; + .mdl-menu__item { + font-size: 16px; + } } } } -.getmdl-select__fullwidth { - .mdl-menu { - width: 100%; - } -} -.getmdl-select__fix-height{ - .mdl-menu__container{ +.getmdl-select__fix-height { + .mdl-menu__container .mdl-menu { overflow-y: auto; - max-height: 300px !important; + max-height: 288px !important; } .mdl-menu.mdl-menu--top-left { bottom: auto;