jquery.selector.js 5.8 KB

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