Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var ComponentsDropdowns = function () { |
| 2 | |||
| 3 | var handleSelect2 = function () { |
||
| 4 | |||
| 5 | $('#select2_sample1').select2({ |
||
| 6 | placeholder: "Select an option", |
||
| 7 | allowClear: true |
||
| 8 | }); |
||
| 9 | |||
| 10 | $('#select2_sample2').select2({ |
||
| 11 | placeholder: "Select a State", |
||
| 12 | allowClear: true |
||
| 13 | }); |
||
| 14 | |||
| 15 | $("#select2_sample3").select2({ |
||
| 16 | placeholder: "Select...", |
||
| 17 | allowClear: true, |
||
| 18 | minimumInputLength: 1, |
||
| 19 | query: function (query) { |
||
| 20 | var data = { |
||
| 21 | results: [] |
||
| 22 | }, i, j, s; |
||
| 23 | for (i = 1; i < 5; i++) { |
||
| 24 | s = ""; |
||
| 25 | for (j = 0; j < i; j++) { |
||
| 26 | s = s + query.term; |
||
| 27 | } |
||
| 28 | data.results.push({ |
||
| 29 | id: query.term + i, |
||
| 30 | text: s |
||
| 31 | }); |
||
| 32 | } |
||
| 33 | query.callback(data); |
||
| 34 | } |
||
| 35 | }); |
||
| 36 | |||
| 37 | function format(state) { |
||
| 38 | if (!state.id) return state.text; // optgroup |
||
| 39 | return "<img class='flag' src='" + Metronic.getGlobalImgPath() + "flags/" + state.id.toLowerCase() + ".png'/> " + state.text; |
||
| 40 | } |
||
| 41 | $("#select2_sample4").select2({ |
||
| 42 | placeholder: "Select a Country", |
||
| 43 | allowClear: true, |
||
| 44 | formatResult: format, |
||
| 45 | formatSelection: format, |
||
| 46 | escapeMarkup: function (m) { |
||
| 47 | return m; |
||
| 48 | } |
||
| 49 | }); |
||
| 50 | |||
| 51 | $("#select2_sample5").select2({ |
||
| 52 | tags: ["red", "green", "blue", "yellow", "pink"] |
||
| 53 | }); |
||
| 54 | |||
| 55 | |||
| 56 | function movieFormatResult(movie) { |
||
| 57 | var markup = "<table class='movie-result'><tr>"; |
||
| 58 | if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { |
||
| 59 | markup += "<td valign='top'><img src='" + movie.posters.thumbnail + "'/></td>"; |
||
| 60 | } |
||
| 61 | markup += "<td valign='top'><h5>" + movie.title + "</h5>"; |
||
| 62 | if (movie.critics_consensus !== undefined) { |
||
| 63 | markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>"; |
||
| 64 | } else if (movie.synopsis !== undefined) { |
||
| 65 | markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>"; |
||
| 66 | } |
||
| 67 | markup += "</td></tr></table>" |
||
| 68 | return markup; |
||
| 69 | } |
||
| 70 | |||
| 71 | function movieFormatSelection(movie) { |
||
| 72 | return movie.title; |
||
| 73 | } |
||
| 74 | |||
| 75 | $("#select2_sample6").select2({ |
||
| 76 | placeholder: "Search for a movie", |
||
| 77 | minimumInputLength: 1, |
||
| 78 | ajax: { // instead of writing the function to execute the request we use Select2's convenient helper |
||
| 79 | url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", |
||
| 80 | dataType: 'jsonp', |
||
| 81 | data: function (term, page) { |
||
| 82 | return { |
||
| 83 | q: term, // search term |
||
| 84 | page_limit: 10, |
||
| 85 | apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working |
||
| 86 | }; |
||
| 87 | }, |
||
| 88 | results: function (data, page) { // parse the results into the format expected by Select2. |
||
| 89 | // since we are using custom formatting functions we do not need to alter remote JSON data |
||
| 90 | return { |
||
| 91 | results: data.movies |
||
| 92 | }; |
||
| 93 | } |
||
| 94 | }, |
||
| 95 | initSelection: function (element, callback) { |
||
| 96 | // the input tag has a value attribute preloaded that points to a preselected movie's id |
||
| 97 | // this function resolves that id attribute to an object that select2 can render |
||
| 98 | // using its formatResult renderer - that way the movie name is shown preselected |
||
| 99 | var id = $(element).val(); |
||
| 100 | if (id !== "") { |
||
| 101 | $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/" + id + ".json", { |
||
| 102 | data: { |
||
| 103 | apikey: "ju6z9mjyajq2djue3gbvv26t" |
||
| 104 | }, |
||
| 105 | dataType: "jsonp" |
||
| 106 | }).done(function (data) { |
||
| 107 | callback(data); |
||
| 108 | }); |
||
| 109 | } |
||
| 110 | }, |
||
| 111 | formatResult: movieFormatResult, // omitted for brevity, see the source of this page |
||
| 112 | formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page |
||
| 113 | dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller |
||
| 114 | escapeMarkup: function (m) { |
||
| 115 | return m; |
||
| 116 | } // we do not want to escape markup since we are displaying html in results |
||
| 117 | }); |
||
| 118 | } |
||
| 119 | |||
| 120 | var handleSelect2Modal = function () { |
||
| 121 | |||
| 122 | $('#select2_sample_modal_1').select2({ |
||
| 123 | placeholder: "Select an option", |
||
| 124 | allowClear: true |
||
| 125 | }); |
||
| 126 | |||
| 127 | $('#select2_sample_modal_2').select2({ |
||
| 128 | placeholder: "Select a State", |
||
| 129 | allowClear: true |
||
| 130 | }); |
||
| 131 | |||
| 132 | $("#select2_sample_modal_3").select2({ |
||
| 133 | allowClear: true, |
||
| 134 | minimumInputLength: 1, |
||
| 135 | query: function (query) { |
||
| 136 | var data = { |
||
| 137 | results: [] |
||
| 138 | }, i, j, s; |
||
| 139 | for (i = 1; i < 5; i++) { |
||
| 140 | s = ""; |
||
| 141 | for (j = 0; j < i; j++) { |
||
| 142 | s = s + query.term; |
||
| 143 | } |
||
| 144 | data.results.push({ |
||
| 145 | id: query.term + i, |
||
| 146 | text: s |
||
| 147 | }); |
||
| 148 | } |
||
| 149 | query.callback(data); |
||
| 150 | } |
||
| 151 | }); |
||
| 152 | |||
| 153 | function format(state) { |
||
| 154 | if (!state.id) return state.text; // optgroup |
||
| 155 | return "<img class='flag' src='" + Metronic.getGlobalImgPath() + "flags/" + state.id.toLowerCase() + ".png'/> " + state.text; |
||
| 156 | } |
||
| 157 | $("#select2_sample_modal_4").select2({ |
||
| 158 | allowClear: true, |
||
| 159 | formatResult: format, |
||
| 160 | formatSelection: format, |
||
| 161 | escapeMarkup: function (m) { |
||
| 162 | return m; |
||
| 163 | } |
||
| 164 | }); |
||
| 165 | |||
| 166 | $("#select2_sample_modal_5").select2({ |
||
| 167 | tags: ["red", "green", "blue", "yellow", "pink"] |
||
| 168 | }); |
||
| 169 | |||
| 170 | |||
| 171 | function movieFormatResult(movie) { |
||
| 172 | var markup = "<table class='movie-result'><tr>"; |
||
| 173 | if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { |
||
| 174 | markup += "<td valign='top'><img src='" + movie.posters.thumbnail + "'/></td>"; |
||
| 175 | } |
||
| 176 | markup += "<td valign='top'><h5>" + movie.title + "</h5>"; |
||
| 177 | if (movie.critics_consensus !== undefined) { |
||
| 178 | markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>"; |
||
| 179 | } else if (movie.synopsis !== undefined) { |
||
| 180 | markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>"; |
||
| 181 | } |
||
| 182 | markup += "</td></tr></table>" |
||
| 183 | return markup; |
||
| 184 | } |
||
| 185 | |||
| 186 | function movieFormatSelection(movie) { |
||
| 187 | return movie.title; |
||
| 188 | } |
||
| 189 | |||
| 190 | $("#select2_sample_modal_6").select2({ |
||
| 191 | placeholder: "Search for a movie", |
||
| 192 | minimumInputLength: 1, |
||
| 193 | ajax: { // instead of writing the function to execute the request we use Select2's convenient helper |
||
| 194 | url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", |
||
| 195 | dataType: 'jsonp', |
||
| 196 | data: function (term, page) { |
||
| 197 | return { |
||
| 198 | q: term, // search term |
||
| 199 | page_limit: 10, |
||
| 200 | apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working |
||
| 201 | }; |
||
| 202 | }, |
||
| 203 | results: function (data, page) { // parse the results into the format expected by Select2. |
||
| 204 | // since we are using custom formatting functions we do not need to alter remote JSON data |
||
| 205 | return { |
||
| 206 | results: data.movies |
||
| 207 | }; |
||
| 208 | } |
||
| 209 | }, |
||
| 210 | initSelection: function (element, callback) { |
||
| 211 | // the input tag has a value attribute preloaded that points to a preselected movie's id |
||
| 212 | // this function resolves that id attribute to an object that select2 can render |
||
| 213 | // using its formatResult renderer - that way the movie name is shown preselected |
||
| 214 | var id = $(element).val(); |
||
| 215 | if (id !== "") { |
||
| 216 | $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/" + id + ".json", { |
||
| 217 | data: { |
||
| 218 | apikey: "ju6z9mjyajq2djue3gbvv26t" |
||
| 219 | }, |
||
| 220 | dataType: "jsonp" |
||
| 221 | }).done(function (data) { |
||
| 222 | callback(data); |
||
| 223 | }); |
||
| 224 | } |
||
| 225 | }, |
||
| 226 | formatResult: movieFormatResult, // omitted for brevity, see the source of this page |
||
| 227 | formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page |
||
| 228 | dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller |
||
| 229 | escapeMarkup: function (m) { |
||
| 230 | return m; |
||
| 231 | } // we do not want to escape markup since we are displaying html in results |
||
| 232 | }); |
||
| 233 | } |
||
| 234 | |||
| 235 | var handleBootstrapSelect = function() { |
||
| 236 | $('.bs-select').selectpicker({ |
||
| 237 | iconBase: 'fa', |
||
| 238 | tickIcon: 'fa-check' |
||
| 239 | }); |
||
| 240 | } |
||
| 241 | |||
| 242 | var handleMultiSelect = function () { |
||
| 243 | $('#my_multi_select1').multiSelect(); |
||
| 244 | $('#my_multi_select2').multiSelect({ |
||
| 245 | selectableOptgroup: true |
||
| 246 | }); |
||
| 247 | } |
||
| 248 | |||
| 249 | return { |
||
| 250 | //main function to initiate the module |
||
| 251 | init: function () { |
||
| 252 | handleSelect2(); |
||
| 253 | handleSelect2Modal(); |
||
| 254 | handleMultiSelect(); |
||
| 255 | handleBootstrapSelect(); |
||
| 256 | } |
||
| 257 | }; |
||
| 258 | |||
| 259 | }(); |