jquery.selector.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. /*
  17. * jHue selector plugin
  18. * it tranforms a select multiple into a searchable/selectable alphabetical list
  19. */
  20. ;
  21. (function ($, window, document, undefined) {
  22. var pluginName = "jHueSelector",
  23. defaults = {
  24. selectAllLabel: "Select all",
  25. showSelectAll: true,
  26. searchPlaceholder: "Search",
  27. noChoicesFound: "No choices found for this element",
  28. width: 300,
  29. height: 200,
  30. onChange: function () {
  31. }
  32. };
  33. function Plugin(element, options) {
  34. this.element = element;
  35. this.options = $.extend({}, defaults, options);
  36. this._defaults = defaults;
  37. this._name = pluginName;
  38. this.init();
  39. }
  40. Plugin.prototype.setOptions = function (options) {
  41. this.options = $.extend({}, defaults, options);
  42. };
  43. Plugin.prototype.init = function () {
  44. var _this = this;
  45. var addressBook = [];
  46. var selectorContainer = $("<div>");
  47. if (this.options.width != 300) {
  48. selectorContainer.width(this.options.width);
  49. }
  50. $(_this.element).hide();
  51. $(_this.element).find("option").each(function (cnt, opt) {
  52. var initial = $(opt).text().substr(0, 1).toLowerCase();
  53. if (addressBook[initial] == null) {
  54. addressBook[initial] = [];
  55. }
  56. addressBook[initial].push($(opt));
  57. });
  58. var sortedKeys = [];
  59. for (var key in addressBook) {
  60. if (addressBook.hasOwnProperty(key)) {
  61. sortedKeys.push(key);
  62. }
  63. }
  64. sortedKeys.sort();
  65. if (sortedKeys.length == 0) {
  66. $(_this.element).after($("<div>").addClass("alert").css("margin-top", "-2px").css("float", "left").html(this.options.noChoicesFound));
  67. }
  68. else {
  69. selectorContainer.addClass("jHueSelector");
  70. var body = $("<div>").addClass("jHueSelectorBody");
  71. body.appendTo(selectorContainer);
  72. for (var i = 0; i < sortedKeys.length; i++) {
  73. var key = sortedKeys[i];
  74. var ul = $("<ul>");
  75. var dividerLi = $("<li>").addClass("selectorDivider");
  76. dividerLi.html("<strong>" + key.toUpperCase() + "</strong>");
  77. dividerLi.appendTo(ul);
  78. $.each(addressBook[key], function (cnt, opt) {
  79. var li = $("<li>");
  80. var lbl = $("<label>").text(opt.text());
  81. var chk = $("<input>").attr("type", "checkbox").addClass("selector").change(function () {
  82. if ($(this).is(":checked")) {
  83. $(this).data("opt").attr("selected", "selected");
  84. }
  85. else {
  86. $(this).data("opt").removeAttr("selected");
  87. }
  88. _this.options.onChange();
  89. }).data("opt", opt).prependTo(lbl);
  90. if (opt.is(":selected")) {
  91. chk.attr("checked", "checked");
  92. }
  93. lbl.appendTo(li);
  94. li.appendTo(ul);
  95. });
  96. ul.appendTo(body);
  97. }
  98. var header = $("<div>").addClass("jHueSelectorHeader");
  99. header.prependTo(selectorContainer);
  100. var selectAll = $("<label>").html("&nbsp;");
  101. if (this.options.showSelectAll) {
  102. selectAll.text(this.options.selectAllLabel);
  103. $("<input>").attr("type", "checkbox").change(function () {
  104. var isChecked = $(this).is(":checked");
  105. selectorContainer.find("input.selector:visible").each(function () {
  106. if (isChecked) {
  107. $(this).attr("checked", "checked");
  108. $(this).data("opt").attr("selected", "selected");
  109. }
  110. else {
  111. $(this).removeAttr("checked");
  112. $(this).data("opt").removeAttr("selected");
  113. }
  114. });
  115. if (searchBox.val() != "") {
  116. $(this).removeAttr("checked");
  117. }
  118. _this.options.onChange();
  119. }).prependTo(selectAll);
  120. }
  121. selectAll.appendTo(header);
  122. var searchBox = $("<input>").attr("type", "text").attr("placeholder", this.options.searchPlaceholder).keyup(function () {
  123. body.find("ul").attr("show", true).show();
  124. var q = $.trim($(this).val());
  125. if (q != "") {
  126. body.find("li.selectorDivider").hide();
  127. body.find("label").each(function () {
  128. if ($(this).text().toLowerCase().indexOf(q.toLowerCase()) > -1) {
  129. $(this).parent().show();
  130. }
  131. else {
  132. $(this).parent().hide();
  133. }
  134. });
  135. body.find("ul").attr("show", false);
  136. body.find("ul > *:visible").parent().attr("show", true).find("li.selectorDivider").show();
  137. }
  138. else {
  139. body.find("li.selectorDivider").show();
  140. body.find("label").parent().show();
  141. }
  142. body.find("ul[show=false]").hide();
  143. body.find("ul[show=true]").show();
  144. });
  145. if (this.options.width != 300) {
  146. searchBox.css("margin-left", this.options.width - 120 + "px");
  147. }
  148. searchBox.prependTo(header);
  149. body.height(this.options.height - header.outerHeight());
  150. $(_this.element).after(selectorContainer);
  151. }
  152. };
  153. $.fn[pluginName] = function (options) {
  154. return this.each(function () {
  155. if (!$.data(this, 'plugin_' + pluginName)) {
  156. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  157. }
  158. else {
  159. $.data(this, 'plugin_' + pluginName).setOptions(options);
  160. }
  161. });
  162. }
  163. })(jQuery, window, document);