public/assets/scripts/components-dropdowns.js

   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           },
  23           i, j, s;
  24         for (i = 1; i < 5; i++) {
  25           s = "";
  26           for (j = 0; j < i; j++) {
  27             s = s + query.term;
  28           }
  29           data.results.push({
  30             id: query.term + i,
  31             text: s
  32           });
  33         }
  34         query.callback(data);
  35       }
  36     });
  37
  38     function format(state) {
  39       if (!state.id) return state.text; // optgroup
  40       return "<img class='flag' src='" + Metronic.getGlobalImgPath() +
  41         "flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
  42     }
  43     $("#select2_sample4").select2({
  44       placeholder: "Select a Country",
  45       allowClear: true,
  46       formatResult: format,
  47       formatSelection: format,
  48       escapeMarkup: function(m) {
  49         return m;
  50       }
  51     });
  52
  53     $("#select2_sample5").select2({
  54       tags: ["red", "green", "blue", "yellow", "pink"]
  55     });
  56
  57
  58     function movieFormatResult(movie) {
  59       var markup = "<table class='movie-result'><tr>";
  60       if (movie.posters !== undefined && movie.posters.thumbnail !==
  61         undefined) {
  62         markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
  63           "'/></td>";
  64       }
  65       markup += "<td valign='top'><h5>" + movie.title + "</h5>";
  66       if (movie.critics_consensus !== undefined) {
  67         markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
  68           "</div>";
  69       } else if (movie.synopsis !== undefined) {
  70         markup += "<div class='movie-synopsis'>" + movie.synopsis +
  71           "</div>";
  72       }
  73       markup += "</td></tr></table>"
  74       return markup;
  75     }
  76
  77     function movieFormatSelection(movie) {
  78       return movie.title;
  79     }
  80
  81     $("#select2_sample6").select2({
  82       placeholder: "Search for a movie",
  83       minimumInputLength: 1,
  84       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
  85         url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
  86         dataType: 'jsonp',
  87         data: function(term, page) {
  88           return {
  89             q: term, // search term
  90             page_limit: 10,
  91             apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
  92           };
  93         },
  94         results: function(data, page) { // parse the results into the format expected by Select2.
  95           // since we are using custom formatting functions we do not need to alter remote JSON data
  96           return {
  97             results: data.movies
  98           };
  99         }
 100       },
 101       initSelection: function(element, callback) {
 102         // the input tag has a value attribute preloaded that points to a preselected movie's id
 103         // this function resolves that id attribute to an object that select2 can render
 104         // using its formatResult renderer - that way the movie name is shown preselected
 105         var id = $(element).val();
 106         if (id !== "") {
 107           $.ajax(
 108             "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
 109             id + ".json", {
 110               data: {
 111                 apikey: "ju6z9mjyajq2djue3gbvv26t"
 112               },
 113               dataType: "jsonp"
 114             }).done(function(data) {
 115             callback(data);
 116           });
 117         }
 118       },
 119       formatResult: movieFormatResult, // omitted for brevity, see the source of this page
 120       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
 121       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
 122       escapeMarkup: function(m) {
 123           return m;
 124         } // we do not want to escape markup since we are displaying html in results
 125     });
 126   }
 127
 128   var handleSelect2Modal = function() {
 129
 130     $('#select2_sample_modal_1').select2({
 131       placeholder: "Select an option",
 132       allowClear: true
 133     });
 134
 135     $('#select2_sample_modal_2').select2({
 136       placeholder: "Select a State",
 137       allowClear: true
 138     });
 139
 140     $("#select2_sample_modal_3").select2({
 141       allowClear: true,
 142       minimumInputLength: 1,
 143       query: function(query) {
 144         var data = {
 145             results: []
 146           },
 147           i, j, s;
 148         for (i = 1; i < 5; i++) {
 149           s = "";
 150           for (j = 0; j < i; j++) {
 151             s = s + query.term;
 152           }
 153           data.results.push({
 154             id: query.term + i,
 155             text: s
 156           });
 157         }
 158         query.callback(data);
 159       }
 160     });
 161
 162     function format(state) {
 163       if (!state.id) return state.text; // optgroup
 164       return "<img class='flag' src='" + Metronic.getGlobalImgPath() +
 165         "flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
 166     }
 167     $("#select2_sample_modal_4").select2({
 168       allowClear: true,
 169       formatResult: format,
 170       formatSelection: format,
 171       escapeMarkup: function(m) {
 172         return m;
 173       }
 174     });
 175
 176     $("#select2_sample_modal_5").select2({
 177       tags: ["red", "green", "blue", "yellow", "pink"]
 178     });
 179
 180
 181     function movieFormatResult(movie) {
 182       var markup = "<table class='movie-result'><tr>";
 183       if (movie.posters !== undefined && movie.posters.thumbnail !==
 184         undefined) {
 185         markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
 186           "'/></td>";
 187       }
 188       markup += "<td valign='top'><h5>" + movie.title + "</h5>";
 189       if (movie.critics_consensus !== undefined) {
 190         markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
 191           "</div>";
 192       } else if (movie.synopsis !== undefined) {
 193         markup += "<div class='movie-synopsis'>" + movie.synopsis +
 194           "</div>";
 195       }
 196       markup += "</td></tr></table>"
 197       return markup;
 198     }
 199
 200     function movieFormatSelection(movie) {
 201       return movie.title;
 202     }
 203
 204     $("#select2_sample_modal_6").select2({
 205       placeholder: "Search for a movie",
 206       minimumInputLength: 1,
 207       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
 208         url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
 209         dataType: 'jsonp',
 210         data: function(term, page) {
 211           return {
 212             q: term, // search term
 213             page_limit: 10,
 214             apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
 215           };
 216         },
 217         results: function(data, page) { // parse the results into the format expected by Select2.
 218           // since we are using custom formatting functions we do not need to alter remote JSON data
 219           return {
 220             results: data.movies
 221           };
 222         }
 223       },
 224       initSelection: function(element, callback) {
 225         // the input tag has a value attribute preloaded that points to a preselected movie's id
 226         // this function resolves that id attribute to an object that select2 can render
 227         // using its formatResult renderer - that way the movie name is shown preselected
 228         var id = $(element).val();
 229         if (id !== "") {
 230           $.ajax(
 231             "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
 232             id + ".json", {
 233               data: {
 234                 apikey: "ju6z9mjyajq2djue3gbvv26t"
 235               },
 236               dataType: "jsonp"
 237             }).done(function(data) {
 238             callback(data);
 239           });
 240         }
 241       },
 242       formatResult: movieFormatResult, // omitted for brevity, see the source of this page
 243       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
 244       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
 245       escapeMarkup: function(m) {
 246           return m;
 247         } // we do not want to escape markup since we are displaying html in results
 248     });
 249   }
 250
 251   var handleBootstrapSelect = function() {
 252     $('.bs-select').selectpicker({
 253       iconBase: 'fa',
 254       tickIcon: 'fa-check'
 255     });
 256   }
 257
 258   var handleMultiSelect = function() {
 259     $('#my_multi_select1').multiSelect();
 260     $('#my_multi_select2').multiSelect({
 261       selectableOptgroup: true,
 262       afterSelect: function(values) {
 263         console.log(values);
 264       },
 265       afterDeselect: function(values) {
 266         console.log(values);
 267       }
 268     });
 269   }
 270
 271   var bindTeam = function(teamAgents, agents, teams) {
 272     var select = document.createElement('select');
 273     select.className = 'multi-select';
 274     select.setAttribute('multiple', 'multiple');
 275
 276     for (var agent in agents) {
 277       var option = document.createElement('option');
 278       option.value = agents[agent].id;
 279       option.text = agents[agent].fullname + ' <' + agents[agent].name + ',' + agents[agent].internal + '>';
 280
 281       if (_.includes(teamAgents, agents[agent].id)) {
 282         option.setAttribute('selected', '');
 283       }
 284
 285       select.appendChild(option);
 286     }
 287
 288     var div = document.getElementById('multi-select-team');
 289     div.innerHTML = '';
 290     div.appendChild(select);
 291
 292     $(select).multiSelect({
 293       selectableFooter: 'Agents available',
 294       selectionFooter: 'Agents associated',
 295       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 296       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 297       afterInit: function(ms) {
 298         var that = this,
 299           $selectableSearch = that.$selectableUl.prev(),
 300           $selectionSearch = that.$selectionUl.prev(),
 301           selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
 302           selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
 303
 304         that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
 305           .on('keydown', function(e) {
 306             if (e.which === 40) {
 307               that.$selectableUl.focus();
 308               return false;
 309             }
 310           });
 311
 312         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 313           .on('keydown', function(e) {
 314             if (e.which == 40) {
 315               that.$selectionUl.focus();
 316               return false;
 317             }
 318           });
 319       },
 320       afterSelect: function(values) {
 321         this.qs1.cache();
 322         this.qs2.cache();
 323         teams().select(values);
 324       },
 325       afterDeselect: function(values) {
 326         this.qs1.cache();
 327         this.qs2.cache();
 328         teams().deselect(values);
 329       }
 330     });
 331   }
 332
 333   var bindQueue = function(teams, queues, agents) {
 334     var select = document.createElement('select');
 335     select.className = 'multi-select';
 336     select.setAttribute('multiple', 'multiple');
 337
 338     for (var team in teams) {
 339       var optgroup = document.createElement('optgroup');
 340       optgroup.label = teams[team].name;
 341
 342       for (var user in teams[team].Users) {
 343         var option = document.createElement('option');
 344         option.value = teams[team].Users[user].id;
 345         option.text = teams[team].Users[user].fullname + ' <' + teams[team].Users[user].name + ',' + teams[team].Users[user].internal + '>';
 346         if (_.includes(_.map(queues, 'id'), teams[team].Users[user].id)) {
 347           option.setAttribute('selected', '');
 348           var user = _.find(queues, {
 349             id: teams[team].Users[user].id
 350           });
 351           option.text += user.hasOwnProperty('penalty') ? ' (' + user.penalty + ')' : '';
 352         }
 353
 354         optgroup.appendChild(option);
 355       }
 356       select.appendChild(optgroup);
 357     }
 358
 359     var div = document.getElementById('multi-select-team');
 360     div.innerHTML = '';
 361     div.appendChild(select);
 362
 363     $(select).multiSelect({
 364       selectableFooter: 'Agents available',
 365       selectionFooter: 'Agents associated',
 366       selectableOptgroup: true,
 367       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 368       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 369       afterInit: function(ms) {
 370         var that = this,
 371           $selectableSearch = that.$selectableUl.prev(),
 372           $selectionSearch = that.$selectionUl.prev(),
 373           selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
 374           selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
 375
 376         that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
 377           .on('keydown', function(e) {
 378             if (e.which === 40) {
 379               that.$selectableUl.focus();
 380               return false;
 381             }
 382           });
 383
 384         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 385           .on('keydown', function(e) {
 386             if (e.which == 40) {
 387               that.$selectionUl.focus();
 388               return false;
 389             }
 390           });
 391       },
 392       afterSelect: function(values) {
 393         this.qs1.cache();
 394         this.qs2.cache();
 395         agents().select(values);
 396       },
 397       afterDeselect: function(values) {
 398         this.qs1.cache();
 399         this.qs2.cache();
 400         agents().deselect(values);
 401       }
 402     });
 403   }
 404
 405   return {
 406     //main function to initiate the module
 407     init: function() {
 408       handleSelect2();
 409       handleSelect2Modal();
 410       handleMultiSelect();
 411       handleBootstrapSelect();
 412     },
 413     bindTeam: bindTeam,
 414     bindMailQueue: bindQueue,
 415     bindChatQueue: bindQueue,
 416     bindFaxQueue: bindQueue,
 417     bindQueue: bindQueue
 418   };
 419
 420 }();