[Kimchi-devel] [PATCH V2] UI: Adding selectmenu widget for kimchi new UI

V1 -> V2: 1) Fix bug of multiple open menu-list 2) Menu-list showed on top of other content Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/selectmenu-flat.css | 86 ++++++++++++++++++++ ui/js/widgets/selectmenu-flat.js | 130 +++++++++++++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 ui/css/theme-default/selectmenu-flat.css create mode 100644 ui/js/widgets/selectmenu-flat.js diff --git a/ui/css/theme-default/selectmenu-flat.css b/ui/css/theme-default/selectmenu-flat.css new file mode 100644 index 0000000..272fe22 --- /dev/null +++ b/ui/css/theme-default/selectmenu-flat.css @@ -0,0 +1,86 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.select-content { + position: relative; + height: 30px; + width: 170px; +} + +.selected-box { + width: 75%; + height: 30px; + border: 1px solid #d8d8d8; + border-radius: 3px; + cursor: pointer; + background: #FFFFFF; + float: right; +} + +.select-val { + display: none; +} + +.select-label { + line-height: 32px; + vertical-align: middle; + position: relative; + margin-left: 20px; +} + +.select-icon { + position: relative; + float: right; + line-height: 30px; + vertical-align: middle; + padding-right: 10px; + padding-left: 10px; + color: #555555; + font-size: 10px; +} + +.select-icon:hover { + background: #FCFCFC; +} + +.selectmenu-opt { + background: #FFFFFF; +} + +.selectmenu-list { + border: 1px solid #d8d8d8; + width: 100%; + position: absolute; + top: 31px; + cursor: pointer; +} + +.selectmenu-list li { + list-style: none; + position: relative; + height: 20px; + padding: 5px 0 5px 20px; + line-height: 21px; + vertical-align: middle; + border-bottom: 1px solid #d8d8d8; + z-index: 3; +} + +.selectmenu-opt:hover { + background: #FCFCFC; +} diff --git a/ui/js/widgets/selectmenu-flat.js b/ui/js/widgets/selectmenu-flat.js new file mode 100644 index 0000000..6bf791b --- /dev/null +++ b/ui/js/widgets/selectmenu-flat.js @@ -0,0 +1,130 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +// How to use: +// $(".selector").selectmenuFlat({ +// content: [1,2,3,4,5,6], //Set content of the select menu +// selected: 2 // set the selected option, starts from "1" +// }); +// $(".selector").selectmenuFlat("value", "4"); //Set value. +// var t = $(".selector").selectmenuFlat("value"); //Get value +// console.log(t); + + + (function( $ ) { + $.widget("kimchi.selectmenuFlat", { + + options: { + content: null, + name: null, + selected: null, + parentid: null + }, + + _create: function() { + var that = this; + var name = that.options.name || $(this.element).attr("id"); + var value = that.options.content; + var parentid = $(this.element).attr("id"); + that.options.parentid = parentid; + var html = "<div class='selected-box'>" + + "<input class='select-val'>" + + "<span class='select-label'></span>" + + "<span class='select-icon icon-down-open'></span>" + + "</div>"; + $(html).appendTo(that.element); + html = that._setValue(value); + $(html).appendTo(that.element); + $("#" + parentid).addClass("select-content"); + var sel = that.options.selected || 1; + sel = that.options.content[Number(sel) -1]; + that.options.selected = $.inArray(sel, that.options.content) + 1; + $(".select-val", "#" + parentid).text(sel); + $(".select-label", "#" + parentid).text(sel); + $(".selected-box", "#" + parentid).on("click", this._toggleOpt); + $(".selectmenu-opt", "#" + parentid).on("click", function() { + var selectedText = $(this).text(); + that.options.selected = $.inArray(selectedText, that.options.content) +1; + $(".selected-box .select-label", "#" + parentid).text(selectedText); + $(".select-val", "#" + parentid).text(selectedText); + $(".selectmenu-list", "#" + parentid).prop("style", "display:none"); + $(".select-icon", "#" + parentid).removeClass("icon-up-open"); + $(".select-icon", "#" + parentid).addClass("icon-down-open").css({ + "border-left": "none" + }); + }); + $(document).mouseup(function(e) { + var container = $(".selectmenu-opt"); + if(!container.is(e.target) && container.has(e.target).length === 0 && $(".select-icon").hasClass("icon-up-open")) { + $(".selectmenu-list", "#" + parentid).prop("style", "display:none"); + $(".select-icon", "#" + parentid).removeClass("icon-up-open"); + $(".select-icon", "#" + parentid).addClass("icon-down-open").css({ + "border-left": "none" + }); + } + }); + }, + + _setValue: function(value) { + var that = this; + var html = "<ul class='selectmenu-list' style='display:none'>"; + var name = this.options.name || $(this.element).attr("id"); + $.each(value, function(index, data) { + that.options.content[index] = data.toString(); + html += "<li id='" + name + index + "' class='selectmenu-opt'>" + data + "</li>"; + }); + html += "</ul>"; + return html; + }, + + _toggleOpt: function() { + var thisButton = $(this).parent().attr("id"); + if($(".select-icon", "#" + thisButton).hasClass("icon-down-open")) { + $(".selectmenu-list", "#" + thisButton).prop("style", "display"); + $(".select-icon", "#" + thisButton).removeClass("icon-down-open"); + $(".select-icon", "#" + thisButton).addClass("icon-up-open").css({ + "border-left": "1px solid #d8d8d8" + }); + } else { + $(".selectmenu-list", "#" + thisButton).prop("style", "display:none"); + $(".select-icon", "#" + thisButton).removeClass("icon-up-open"); + $(".select-icon", "#" + thisButton).addClass("icon-down-open").css({ + "border-left": "none" + }); + } + }, + + value: function(value) { + var parentid = this.options.parentid; + if(!value) { + return $(".selected-box .select-val", "#" + parentid).text(); + } + if (value <= this.options.content.length) { + this.options.selected = value; + var selectedText = this.options.content[value-1]; + $(".selected-box .select-label", "#" + parentid).text(selectedText); + $(".selected-box .select-val", "#" + parentid).text(selectedText); + } + }, + + _destroy: function() { + this.element.remove(); + } + }); + })(jQuery); \ No newline at end of file -- 2.1.0