Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var ComponentsSelect2 = function() { |
| 2 | |||
| 3 | var handleDemo = function() { |
||
| 4 | |||
| 5 | // Set the "bootstrap" theme as the default theme for all Select2 |
||
| 6 | // widgets. |
||
| 7 | // |
||
| 8 | // @see https://github.com/select2/select2/issues/2927 |
||
| 9 | $.fn.select2.defaults.set("theme", "bootstrap"); |
||
| 10 | |||
| 11 | var placeholder = "Select a State"; |
||
| 12 | |||
| 13 | $(".select2, .select2-multiple").select2({ |
||
| 14 | placeholder: placeholder, |
||
| 15 | width: null |
||
| 16 | }); |
||
| 17 | |||
| 18 | $(".select2-allow-clear").select2({ |
||
| 19 | allowClear: true, |
||
| 20 | placeholder: placeholder, |
||
| 21 | width: null |
||
| 22 | }); |
||
| 23 | |||
| 24 | // @see https://select2.github.io/examples.html#data-ajax |
||
| 25 | function formatRepo(repo) { |
||
| 26 | if (repo.loading) return repo.text; |
||
| 27 | |||
| 28 | var markup = "<div class='select2-result-repository clearfix'>" + |
||
| 29 | "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + |
||
| 30 | "<div class='select2-result-repository__meta'>" + |
||
| 31 | "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; |
||
| 32 | |||
| 33 | if (repo.description) { |
||
| 34 | markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; |
||
| 35 | } |
||
| 36 | |||
| 37 | markup += "<div class='select2-result-repository__statistics'>" + |
||
| 38 | "<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" + |
||
| 39 | "<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" + |
||
| 40 | "<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" + |
||
| 41 | "</div>" + |
||
| 42 | "</div></div>"; |
||
| 43 | |||
| 44 | return markup; |
||
| 45 | } |
||
| 46 | |||
| 47 | function formatRepoSelection(repo) { |
||
| 48 | return repo.full_name || repo.text; |
||
| 49 | } |
||
| 50 | |||
| 51 | $(".js-data-example-ajax").select2({ |
||
| 52 | width: "off", |
||
| 53 | ajax: { |
||
| 54 | url: "https://api.github.com/search/repositories", |
||
| 55 | dataType: 'json', |
||
| 56 | delay: 250, |
||
| 57 | data: function(params) { |
||
| 58 | return { |
||
| 59 | q: params.term, // search term |
||
| 60 | page: params.page |
||
| 61 | }; |
||
| 62 | }, |
||
| 63 | processResults: function(data, page) { |
||
| 64 | // parse the results into the format expected by Select2. |
||
| 65 | // since we are using custom formatting functions we do not need to |
||
| 66 | // alter the remote JSON data |
||
| 67 | return { |
||
| 68 | results: data.items |
||
| 69 | }; |
||
| 70 | }, |
||
| 71 | cache: true |
||
| 72 | }, |
||
| 73 | escapeMarkup: function(markup) { |
||
| 74 | return markup; |
||
| 75 | }, // let our custom formatter work |
||
| 76 | minimumInputLength: 1, |
||
| 77 | templateResult: formatRepo, |
||
| 78 | templateSelection: formatRepoSelection |
||
| 79 | }); |
||
| 80 | |||
| 81 | $("button[data-select2-open]").click(function() { |
||
| 82 | $("#" + $(this).data("select2-open")).select2("open"); |
||
| 83 | }); |
||
| 84 | |||
| 85 | $(":checkbox").on("click", function() { |
||
| 86 | $(this).parent().nextAll("select").prop("disabled", !this.checked); |
||
| 87 | }); |
||
| 88 | |||
| 89 | // copy Bootstrap validation states to Select2 dropdown |
||
| 90 | // |
||
| 91 | // add .has-waring, .has-error, .has-succes to the Select2 dropdown |
||
| 92 | // (was #select2-drop in Select2 v3.x, in Select2 v4 can be selected via |
||
| 93 | // body > .select2-container) if _any_ of the opened Select2's parents |
||
| 94 | // has one of these forementioned classes (YUCK! ;-)) |
||
| 95 | $(".select2, .select2-multiple, .select2-allow-clear, .js-data-example-ajax").on("select2:open", function() { |
||
| 96 | if ($(this).parents("[class*='has-']").length) { |
||
| 97 | var classNames = $(this).parents("[class*='has-']")[0].className.split(/\s+/); |
||
| 98 | |||
| 99 | for (var i = 0; i < classNames.length; ++i) { |
||
| 100 | if (classNames[i].match("has-")) { |
||
| 101 | $("body > .select2-container").addClass(classNames[i]); |
||
| 102 | } |
||
| 103 | } |
||
| 104 | } |
||
| 105 | }); |
||
| 106 | |||
| 107 | $(".js-btn-set-scaling-classes").on("click", function() { |
||
| 108 | $("#select2-multiple-input-sm, #select2-single-input-sm").next(".select2-container--bootstrap").addClass("input-sm"); |
||
| 109 | $("#select2-multiple-input-lg, #select2-single-input-lg").next(".select2-container--bootstrap").addClass("input-lg"); |
||
| 110 | $(this).removeClass("btn-primary btn-outline").prop("disabled", true); |
||
| 111 | }); |
||
| 112 | } |
||
| 113 | |||
| 114 | return { |
||
| 115 | //main function to initiate the module |
||
| 116 | init: function() { |
||
| 117 | handleDemo(); |
||
| 118 | } |
||
| 119 | }; |
||
| 120 | |||
| 121 | }(); |
||
| 122 | |||
| 123 | if (App.isAngularJsApp() === false) { |
||
| 124 | jQuery(document).ready(function() { |
||
| 125 | ComponentsSelect2.init(); |
||
| 126 | }); |
||
| 127 | } |