jquery.selector.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. searchPlaceholder: "Search",
  26. noChoicesFound: "No choices found for this element",
  27. width: 300,
  28. height: 200,
  29. onChange: function () {
  30. }
  31. };
  32. function Plugin(element, options) {
  33. this.element = element;
  34. this.options = $.extend({}, defaults, options);
  35. this._defaults = defaults;
  36. this._name = pluginName;
  37. this.init();
  38. }
  39. Plugin.prototype.setOptions = function (options) {
  40. this.options = $.extend({}, defaults, options);
  41. };
  42. Plugin.prototype.init = function () {
  43. var _this = this;
  44. var addressBook = [];
  45. var selectorContainer = $("<div>");
  46. if (this.options.width != 300) {
  47. selectorContainer.width(this.options.width);
  48. }
  49. $(_this.element).hide();
  50. $(_this.element).find("option").each(function (cnt, opt) {
  51. var initial = $(opt).text().substr(0, 1).toLowerCase();
  52. if (addressBook[initial] == null) {
  53. addressBook[initial] = [];
  54. }
  55. addressBook[initial].push($(opt));
  56. });
  57. var sortedKeys = [];
  58. for (var key in addressBook) {
  59. if (addressBook.hasOwnProperty(key)) {
  60. sortedKeys.push(key);
  61. }
  62. }
  63. sortedKeys.sort();
  64. if (sortedKeys.length == 0) {
  65. $(_this.element).after($("<div>").addClass("alert").css("margin-top", "-2px").css("float", "left").html(this.options.noChoicesFound));
  66. }
  67. else {
  68. selectorContainer.addClass("jHueSelector");
  69. var body = $("<div>").addClass("jHueSelectorBody");
  70. body.appendTo(selectorContainer);
  71. for (var i = 0; i < sortedKeys.length; i++) {
  72. var key = sortedKeys[i];
  73. var ul = $("<ul>");
  74. var dividerLi = $("<li>").addClass("selectorDivider");
  75. dividerLi.html("<strong>" + key.toUpperCase() + "</strong>");
  76. dividerLi.appendTo(ul);
  77. $.each(addressBook[key], function (cnt, opt) {
  78. var li = $("<li>");
  79. var lbl = $("<label>").text(opt.text());
  80. var chk = $("<input>").attr("type", "checkbox").addClass("selector").change(function () {
  81. if ($(this).is(":checked")) {
  82. $(this).data("opt").attr("selected", "selected");
  83. }
  84. else {
  85. $(this).data("opt").removeAttr("selected");
  86. }
  87. _this.options.onChange();
  88. }).data("opt", opt).prependTo(lbl);
  89. if (opt.is(":selected")) {
  90. chk.attr("checked", "checked");
  91. }
  92. lbl.appendTo(li);
  93. li.appendTo(ul);
  94. });
  95. ul.appendTo(body);
  96. }
  97. var header = $("<div>").addClass("jHueSelectorHeader");
  98. header.prependTo(selectorContainer);
  99. var selectAll = $("<label>").text(this.options.selectAllLabel);
  100. $("<input>").attr("type", "checkbox").change(function () {
  101. var isChecked = $(this).is(":checked");
  102. selectorContainer.find("input.selector:visible").each(function () {
  103. if (isChecked) {
  104. $(this).attr("checked", "checked");
  105. $(this).data("opt").attr("selected", "selected");
  106. }
  107. else {
  108. $(this).removeAttr("checked");
  109. $(this).data("opt").removeAttr("selected");
  110. }
  111. });
  112. if (searchBox.val() != "") {
  113. $(this).removeAttr("checked");
  114. }
  115. _this.options.onChange();
  116. }).prependTo(selectAll);
  117. selectAll.appendTo(header);
  118. var searchBox = $("<input>").attr("type", "text").attr("placeholder", this.options.searchPlaceholder).keyup(function () {
  119. body.find("ul").attr("show", true).show();
  120. var q = $.trim($(this).val());
  121. if (q != "") {
  122. body.find("li.selectorDivider").hide();
  123. body.find("label").each(function () {
  124. if ($(this).text().toLowerCase().indexOf(q.toLowerCase()) > -1) {
  125. $(this).parent().show();
  126. }
  127. else {
  128. $(this).parent().hide();
  129. }
  130. });
  131. body.find("ul").attr("show", false);
  132. body.find("ul > *:visible").parent().attr("show", true).find("li.selectorDivider").show();
  133. }
  134. else {
  135. body.find("li.selectorDivider").show();
  136. body.find("label").parent().show();
  137. }
  138. body.find("ul[show=false]").hide();
  139. body.find("ul[show=true]").show();
  140. });
  141. if (this.options.width != 300) {
  142. searchBox.css("margin-left", this.options.width - 120 + "px");
  143. }
  144. searchBox.prependTo(header);
  145. body.height(this.options.height - header.outerHeight());
  146. $(_this.element).after(selectorContainer);
  147. }
  148. };
  149. $.fn[pluginName] = function (options) {
  150. return this.each(function () {
  151. if (!$.data(this, 'plugin_' + pluginName)) {
  152. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  153. }
  154. else {
  155. $.data(this, 'plugin_' + pluginName).setOptions(options);
  156. }
  157. });
  158. }
  159. })(jQuery, window, document);