diff --git a/dist/css/foundation-select.css b/dist/css/foundation-select.css index c041f5b..9ccd667 100644 --- a/dist/css/foundation-select.css +++ b/dist/css/foundation-select.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.3.1 + * Version 6.4.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -71,17 +71,30 @@ position: relative; max-height: 18.75rem; } .select-wrapper .select-container .select-dropdown > div ul, .select-wrapper .select-container .multiple-select > div ul { + padding: 0; margin: 0; - list-style-type: none; } - .select-wrapper .select-container .select-dropdown > div ul > li, .select-wrapper .select-container .multiple-select > div ul > li { - display: table-cell; - vertical-align: middle; } - [data-whatinput='mouse'] .select-wrapper .select-container .select-dropdown > div ul > li, [data-whatinput='mouse'] .select-wrapper .select-container .multiple-select > div ul > li { - outline: 0; } - .select-wrapper .select-container .select-dropdown > div ul > li > a, .select-wrapper .select-container .multiple-select > div ul > li > a { + list-style: none; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + [data-whatinput='mouse'] .select-wrapper .select-container .select-dropdown > div ul li, [data-whatinput='mouse'] .select-wrapper .select-container .multiple-select > div ul li { + outline: 0; } + .select-wrapper .select-container .select-dropdown > div ul a, + .select-wrapper .select-container .select-dropdown > div ul .button, .select-wrapper .select-container .multiple-select > div ul a, + .select-wrapper .select-container .multiple-select > div ul .button { + line-height: 1; + text-decoration: none; display: block; - padding: 0.7rem 1rem; - line-height: 1; } + padding: 0.7rem 1rem; } .select-wrapper .select-container .select-dropdown > div ul input, .select-wrapper .select-container .select-dropdown > div ul select, .select-wrapper .select-container .select-dropdown > div ul a, @@ -90,8 +103,8 @@ .select-wrapper .select-container .multiple-select > div ul a, .select-wrapper .select-container .multiple-select > div ul button { margin-bottom: 0; } - .select-wrapper .select-container .select-dropdown > div ul > li, .select-wrapper .select-container .multiple-select > div ul > li { - display: block; } + .select-wrapper .select-container .select-dropdown > div ul input, .select-wrapper .select-container .multiple-select > div ul input { + display: inline-block; } .select-wrapper .select-container .select-dropdown > div ul li a, .select-wrapper .select-container .multiple-select > div ul li a { color: #0a0a0a; padding: 0.5rem; diff --git a/dist/js/foundation.select.js b/dist/js/foundation.select.js index a9a5c8c..2814b15 100755 --- a/dist/js/foundation.select.js +++ b/dist/js/foundation.select.js @@ -118,7 +118,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons 'data-dropdown': '', 'data-v-offset': 0, 'data-h-offset': 0, - 'data-close-on-click': true + 'data-close-on-click': true, + 'data-position': 'bottom', + 'data-alignment': 'right' }); this.$dropdown.append(this.$scroll); $container.append(this.$dropdown); diff --git a/dist/js/foundation.select.min.js b/dist/js/foundation.select.min.js index 95329ef..ad3c86b 100755 --- a/dist/js/foundation.select.min.js +++ b/dist/js/foundation.select.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var s=0;s element.")}return _createClass(t,[{key:"_initMultiple",value:function(){var t=this,s=Foundation.GetYoDigits(6,"select"),i=e('label[for="'+this.$select.attr("id")+'"]'),l=e('
'),n=e('
'),o=e("
");this.$select.wrap(l),this.$select.after(n),this.$element=e('
'),this.$element.append(o),n.append(this.$element),i.attr("for",s),this.$list=e("
    "),o.append(this.$list),this.$options={},this.$autoSelect=[],this.$select.find("option").each(this._setOption.bind(this)),this.$element.attr("placeholder",this.options.placeholder),n.foundation(),this._eventsMultiple(),this.$autoSelect.length&&e.each(this.$autoSelect,function(e,s){t.$options[s].find("a").trigger("click")})}},{key:"_init",value:function(){var t=this,s=Foundation.GetYoDigits(6,"select"),i=Foundation.GetYoDigits(6,"select-dropdown"),l=e('label[for="'+this.$select.attr("id")+'"]'),n=e('
    '),o=e('
    ');this.$select.wrap(n),this.$select.after(o),this.$element=e(''),o.append(this.$element),l.attr("for",s),this.$selectTriangle=e(''),o.append(this.$selectTriangle),this.$scroll=e("
    "),this.$dropdown=e("
    "),this.$dropdown.attr({id:i,class:"select-dropdown","data-dropdown":"","data-v-offset":0,"data-h-offset":0,"data-close-on-click":!0}),this.$dropdown.append(this.$scroll),o.append(this.$dropdown),this.$list=e("
      "),this.$scroll.append(this.$list),this.$options={},this.$autoSelect=[],this.$select.find("option").each(this._setOption.bind(this)),this.$element.attr("placeholder",this.options.placeholder),o.foundation(),this._events(),this.$autoSelect.length&&e.each(this.$autoSelect,function(e,s){t.$options[s].find("a").trigger("click")})}},{key:"_setOption",value:function(t,s){var i=e(s).val(),l=e(s).text();return""==i?void(this.options.placeholder=""==this.options.placeholder?l:this.options.placeholder):(e(s).is(":selected")&&(this.$autoSelect[this.$autoSelect.length]=i),void(this.$options[i]=e('
    • '+l+"
    • ").appendTo(this.$list)))}},{key:"_selectArrowDown",value:function(t){t.preventDefault();var s=e(this.$list.find("a.selected")[0]),i=void 0;i=s.parent().is(":last-child")?s:s.length>0?s.parent().next().find("a"):this.$list.find("li:first-child a"),this.$select.val(i.data("value")),this.$element.val(i.text()),this.$list.find("li a").removeClass("selected"),i.addClass("selected"),this.$dropdown.hasClass("is-open")&&this.$scroll.foundation("scrollToElement",i)}},{key:"_selectArrowUp",value:function(t){t.preventDefault();var s=e(this.$list.find("a.selected")[this.$list.find("a.selected").length-1]),i=void 0;s.parent().is(":first-child")||(i=s.length>0?s.parent().prev().find("a"):this.$list.find("li:last-child a"),this.$select.val(i.data("value")),this.$element.val(i.text()),this.$list.find("li a").removeClass("selected"),i.addClass("selected"),this.$dropdown.hasClass("is-open")&&this.$scroll.foundation("scrollToElement",i))}},{key:"_eventsMultiple",value:function(){var t=this;this.$element.add(this.$dropdown).off("keybord.zf.dropdown").on("keydown.zf.select",function(e){Foundation.Keyboard.handleKey(e,"Select",{select_down:function(){return t._selectArrowDown(e)},select_up:function(){return t._selectArrowUp(e)}})}),e.each(this.$options,function(s,i){var l=e(i).find("a");l.on("click",t.select.bind(t))})}},{key:"_events",value:function(){var t=this;this.$element.off("mousewheel.zf.select").on("mousewheel.zf.select",function(e){t.$element.is(":focus")&&(e.originalEvent.deltaY>0?t._selectArrowDown(e):t._selectArrowUp(e))}).add(this.$dropdown).off("keybord.zf.dropdown").on("keydown.zf.select",function(e){Foundation.Keyboard.handleKey(e,"Select",{open:function(){$target.is(t.$element)&&(t.$dropdown.trigger("open"),t.$dropdown.attr("tabindex",-1).focus(),e.preventDefault())},select_down:function(){return t._selectArrowDown(e)},select_up:function(){return t._selectArrowUp(e)},tab:function(){t.$dropdown.trigger("close")},close:function(){t.$dropdown.trigger("close"),t.$element.focus()}})}),e.each(this.$options,function(s,i){var l=e(i).find("a");l.on("click",t.select.bind(t))})}},{key:"select",value:function(t){t.preventDefault();var s=e(t.currentTarget),i=this,l=!1;this.$select.is("select[multiple]")&&(t.ctrlKey||t.isTrigger)?(t.ctrlKey&&e.each(this.$select.val(),function(e,t){if(s.data("value")==t){var n=i.$select.val();n.splice(e,1),i.$select.val(n),l=!0}}),l||this.$select.val((e.isArray(this.$select.val())?this.$select.val():[]).concat(s.data("value")))):this.$select.is("select[multiple]")?(this.$select.val(s.data("value")),this.$list.find("li a").removeClass("selected")):(this.$select.val(s.data("value")),this.$element.val(s.text()),this.$list.find("li a").removeClass("selected"),this.$dropdown.trigger("close")),l?s.removeClass("selected"):s.addClass("selected"),this.$element.trigger("selected.zf.select"),this.$select.trigger("change"),this.$element.focus()}},{key:"destroy",value:function(){this.$wrapper.after(this.$select.detach()),this.$wrapper.remove(),Foundation.unregisterPlugin(this)}}],[{key:"defaults",get:function(){return{iconClass:"fa-caret-down",placeholder:"",value:""}}}]),t}();Foundation.plugin(t,"Select")}(jQuery); \ No newline at end of file +"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var s=0;s element.")}return _createClass(t,[{key:"_initMultiple",value:function(){var t=this,s=Foundation.GetYoDigits(6,"select"),i=e('label[for="'+this.$select.attr("id")+'"]'),l=e('
      '),n=e('
      '),o=e("
      ");this.$select.wrap(l),this.$select.after(n),this.$element=e('
      '),this.$element.append(o),n.append(this.$element),i.attr("for",s),this.$list=e("
        "),o.append(this.$list),this.$options={},this.$autoSelect=[],this.$select.find("option").each(this._setOption.bind(this)),this.$element.attr("placeholder",this.options.placeholder),n.foundation(),this._eventsMultiple(),this.$autoSelect.length&&e.each(this.$autoSelect,function(e,s){t.$options[s].find("a").trigger("click")})}},{key:"_init",value:function(){var t=this,s=Foundation.GetYoDigits(6,"select"),i=Foundation.GetYoDigits(6,"select-dropdown"),l=e('label[for="'+this.$select.attr("id")+'"]'),n=e('
        '),o=e('
        ');this.$select.wrap(n),this.$select.after(o),this.$element=e(''),o.append(this.$element),l.attr("for",s),this.$selectTriangle=e(''),o.append(this.$selectTriangle),this.$scroll=e("
        "),this.$dropdown=e("
        "),this.$dropdown.attr({id:i,class:"select-dropdown","data-dropdown":"","data-v-offset":0,"data-h-offset":0,"data-close-on-click":!0,"data-position":"bottom","data-alignment":"right"}),this.$dropdown.append(this.$scroll),o.append(this.$dropdown),this.$list=e("
          "),this.$scroll.append(this.$list),this.$options={},this.$autoSelect=[],this.$select.find("option").each(this._setOption.bind(this)),this.$element.attr("placeholder",this.options.placeholder),o.foundation(),this._events(),this.$autoSelect.length&&e.each(this.$autoSelect,function(e,s){t.$options[s].find("a").trigger("click")})}},{key:"_setOption",value:function(t,s){var i=e(s).val(),l=e(s).text();return""==i?void(this.options.placeholder=""==this.options.placeholder?l:this.options.placeholder):(e(s).is(":selected")&&(this.$autoSelect[this.$autoSelect.length]=i),void(this.$options[i]=e('
        • '+l+"
        • ").appendTo(this.$list)))}},{key:"_selectArrowDown",value:function(t){t.preventDefault();var s=e(this.$list.find("a.selected")[0]),i=void 0;i=s.parent().is(":last-child")?s:s.length>0?s.parent().next().find("a"):this.$list.find("li:first-child a"),this.$select.val(i.data("value")),this.$element.val(i.text()),this.$list.find("li a").removeClass("selected"),i.addClass("selected"),this.$dropdown.hasClass("is-open")&&this.$scroll.foundation("scrollToElement",i)}},{key:"_selectArrowUp",value:function(t){t.preventDefault();var s=e(this.$list.find("a.selected")[this.$list.find("a.selected").length-1]),i=void 0;s.parent().is(":first-child")||(i=s.length>0?s.parent().prev().find("a"):this.$list.find("li:last-child a"),this.$select.val(i.data("value")),this.$element.val(i.text()),this.$list.find("li a").removeClass("selected"),i.addClass("selected"),this.$dropdown.hasClass("is-open")&&this.$scroll.foundation("scrollToElement",i))}},{key:"_eventsMultiple",value:function(){var t=this;this.$element.add(this.$dropdown).off("keybord.zf.dropdown").on("keydown.zf.select",function(e){Foundation.Keyboard.handleKey(e,"Select",{select_down:function(){return t._selectArrowDown(e)},select_up:function(){return t._selectArrowUp(e)}})}),e.each(this.$options,function(s,i){var l=e(i).find("a");l.on("click",t.select.bind(t))})}},{key:"_events",value:function(){var t=this;this.$element.off("mousewheel.zf.select").on("mousewheel.zf.select",function(e){t.$element.is(":focus")&&(e.originalEvent.deltaY>0?t._selectArrowDown(e):t._selectArrowUp(e))}).add(this.$dropdown).off("keybord.zf.dropdown").on("keydown.zf.select",function(e){Foundation.Keyboard.handleKey(e,"Select",{open:function(){$target.is(t.$element)&&(t.$dropdown.trigger("open"),t.$dropdown.attr("tabindex",-1).focus(),e.preventDefault())},select_down:function(){return t._selectArrowDown(e)},select_up:function(){return t._selectArrowUp(e)},tab:function(){t.$dropdown.trigger("close")},close:function(){t.$dropdown.trigger("close"),t.$element.focus()}})}),e.each(this.$options,function(s,i){var l=e(i).find("a");l.on("click",t.select.bind(t))})}},{key:"select",value:function(t){t.preventDefault();var s=e(t.currentTarget),i=this,l=!1;this.$select.is("select[multiple]")&&(t.ctrlKey||t.isTrigger)?(t.ctrlKey&&e.each(this.$select.val(),function(e,t){if(s.data("value")==t){var n=i.$select.val();n.splice(e,1),i.$select.val(n),l=!0}}),l||this.$select.val((e.isArray(this.$select.val())?this.$select.val():[]).concat(s.data("value")))):this.$select.is("select[multiple]")?(this.$select.val(s.data("value")),this.$list.find("li a").removeClass("selected")):(this.$select.val(s.data("value")),this.$element.val(s.text()),this.$list.find("li a").removeClass("selected"),this.$dropdown.trigger("close")),l?s.removeClass("selected"):s.addClass("selected"),this.$element.trigger("selected.zf.select"),this.$select.trigger("change"),this.$element.focus()}},{key:"destroy",value:function(){this.$wrapper.after(this.$select.detach()),this.$wrapper.remove(),Foundation.unregisterPlugin(this)}}],[{key:"defaults",get:function(){return{iconClass:"fa-caret-down",placeholder:"",value:""}}}]),t}();Foundation.plugin(t,"Select")}(jQuery); \ No newline at end of file diff --git a/src/js/foundation.select.js b/src/js/foundation.select.js index da4701c..dbae450 100755 --- a/src/js/foundation.select.js +++ b/src/js/foundation.select.js @@ -108,7 +108,9 @@ 'data-dropdown': '', 'data-v-offset': 0, 'data-h-offset': 0, - 'data-close-on-click': true + 'data-close-on-click': true, + 'data-position': 'bottom', + 'data-alignment': 'right' }); this.$dropdown.append(this.$scroll); $container.append(this.$dropdown);