application/media/js/jquery.filterable.js

   1
   2 ( function ( jQuery, global ) {
   3
   4         var settings = {
   5
   6                 "limit": 1000,
   7                 "selector": "select[data-filterable]",
   8                 "host": window.location.protocol + "//" + window.location.host,
   9
  10                 "datasource": function ( select ) {
  11
  12                         var type = select.attr( 'data-type' ),
  13                                 root = settings.host + _site_domain + _index_page;
  14
  15                         return root + '/listview/fetch_ajax?query=[' + type + 's] all&columns[]=key&limit=1000000';
  16
  17                 },
  18
  19                 "collector": function ( select, data ) {
  20
  21                         var names = [];
  22                         for ( var i = 0; i < data.data.length; i++ ) {
  23                                 names.push( data.data[ i ].key );
  24                         }
  25                         select.filterable( names );
  26
  27                 },
  28
  29                 "ajax": {
  30                         dataType: 'json',
  31                         error: function( xhr ) {
  32                                 console.log( xhr.responseText );
  33                         }
  34                 }
  35
  36         };
  37
  38         var getBoxing = function ( filtered, multi ) {
  39
  40                 if ( multi ) {
  41                         return $( '<div class="jq-filterable-box">' ).append(
  42                                 $( '<div class="jq-filterable-left">' ).append(
  43                                         $( '<input type="text" class="jq-filterable-filter jq-filterable-larger" placeholder="Search...">' ),
  44                                         $( '<input type="button" value="➤" class="jq-filterable-move" title="Use objects matching search">' ),
  45                                         "<br>",
  46                                         filtered.clone()
  47                                                 .addClass( "jq-filterable-list" ),
  48                                         "<br>",
  49                                         $( '<div class="jq-filterable-stats jq-filterable-larger">' )
  50                                 ),$( '<div class="jq-filterable-right">' ).append(
  51                                         $( '<select multiple class="jq-filterable-results">' ),
  52                                         "<br>",
  53                                         $( '<div class="jq-filterable-result-stats jq-filterable-larger">' ).append( "No items selected..." )
  54                                 )
  55                         );
  56                 } else {
  57                         return $( '<div class="jq-filterable-box">' ).append(
  58                                 $( '<div class="jq-filterable-left">' ).append(
  59                                         $( '<input type="text" class="jq-filterable-filter" placeholder="Search...">' ),
  60                                         filtered.clone()
  61                                                 .addClass( "jq-filterable-list" ),
  62                                         "<br>",
  63                                         $( '<div class="jq-filterable-stats jq-filterable-largest">' )
  64                                 )
  65                         );
  66                 }
  67
  68         }
  69
  70         var Filterable = function Filterable ( filtered, data ) {
  71
  72                 var defaults = [];
  73
  74                 if ( filtered.find( 'option' ).length > 0 ) {
  75                         filtered.find( 'option' ).each( function ( i, e ) {
  76                                 defaults.push( e.value );
  77                         } );
  78                 }
  79
  80                 var self = this;
  81                 this.box = null;
  82                 this.matching = 0;
  83
  84                 if ( filtered.attr( "multiple" ) ) {
  85                         this.box = getBoxing( filtered, true );
  86                         this.multiple = true;
  87                 } else {
  88                         this.box = getBoxing( filtered, false );
  89                         this.multiple = false;
  90                 }
  91
  92                 if (!this.multiple && !filtered.attr('data-required')) {
  93                         data.unshift('');
  94                 }
  95
  96                 this.results =                  new Set();
  97                 this.memory =                           new Set();
  98                 this.data =                                     new Set( data );
  99
 100                 this.filter =                           this.box.find( ".jq-filterable-filter" );
 101                 this.filtered =                 this.box.find( ".jq-filterable-list" );
 102
 103                 this.statusbar =                this.box.find( '.jq-filterable-stats' );
 104                 this.selected =                 this.box.find( '.jq-filterable-results' );
 105                 this.resultstats =      this.box.find( '.jq-filterable-result-stats' );
 106                 this.mover =                            this.box.find( '.jq-filterable-move' );
 107
 108                 this.form = filtered.closest("form");
 109                 this.form.on( "submit", function ( e ) {
 110                         self.selected.find( "option" ).attr( "selected", true );
 111                 } );
 112
 113                 if ( this.multiple ) {
 114
 115                         this.selected.attr( "id", this.filtered.attr( "id" ) );
 116                         this.selected.attr( "name", this.filtered.attr( "name" ) );
 117
 118                         this.filtered.attr("id", this.selected.attr("id").replace('[', '_tmp['));
 119                         this.filtered.removeAttr( "name" );
 120
 121                 }
 122
 123                 filtered.replaceWith( this.box );
 124
 125                 var _default = filtered.find( ':selected' );
 126
 127                 if ( _default.length > 0 ) {
 128                         this.search( this.filter.val(), _default.val() );
 129                         if ( this.multiple && defaults.length > 0 ) {
 130                                 defaults = new Set( defaults );
 131                                 this.add( defaults );
 132                         }
 133                 } else {
 134                         this.search( this.filter.val() );
 135                         if ( defaults.length > 0 ) {
 136                                 defaults = new Set( defaults );
 137                                 this.add( defaults );
 138                         }
 139                 }
 140
 141                 // Add relevant events
 142
 143                 var key_timeout = null;
 144                 this.box.on( "keyup", ".jq-filterable-filter", function ( e ) {
 145
 146                         if ( $.inArray( e.which, [ 37, 38, 39, 40 ] ) >= 0 ) return;
 147                         else if ( e.which == 13 ) {
 148
 149                                 clearTimeout( key_timeout );
 150                                 self.search( self.filter.val() );
 151
 152                         } else {
 153
 154                                 clearTimeout( key_timeout );
 155                                 key_timeout = setTimeout( function () {
 156                                         self.search( self.filter.val() );
 157                                 }, 250 );
 158
 159                         }
 160
 161                 } );
 162
 163                 this.box.on('click', '.deselect_all', function( e ) {
 164                         e.preventDefault();
 165                         self.reset();
 166                 });
 167
 168                 if ( this.multiple ) {
 169
 170                         this.box.on( "change", ".jq-filterable-list, .jq-filterable-results", function ( e ) {
 171
 172                                 var parent = $( e.target ),
 173                                         values = null;
 174
 175                                 if ( parent.is( "option" ) ) {
 176                                         parent = parent.closest( 'select' );
 177                                 }
 178
 179                                 values = parent.val();
 180                                 values = new Set( values );
 181
 182                                 if ( parent[0] == self.selected[0] )
 183                                         self.remove( values );
 184                                 else self.add( values );
 185
 186                         } );
 187
 188                         this.mover.on( "click", function () {
 189
 190                                 var values = self.search( self.filter.val(), null, true );
 191                                 self.add( values );
 192
 193                         } );
 194
 195                 }
 196
 197         };
 198
 199         Filterable.prototype.batcher = function batcher ( set ) {
 200
 201                 var iterator = new SetIterator( set ),
 202                         self = this;
 203
 204                 this.selected.empty();
 205
 206                 return function () {
 207
 208                         var fragment = document.createDocumentFragment(),
 209                                 counter = 0,
 210                                 index = null,
 211                                 opt = null;
 212
 213                         while ( index = iterator.next() ) {
 214
 215                                 opt = document.createElement( 'option' );
 216                                 opt.innerHTML = index;
 217                                 opt.value = index;
 218
 219                                 fragment.appendChild( opt );
 220
 221                                 counter++;
 222                                 if ( counter > 1000 ) break;
 223
 224                         }
 225
 226                         self.selected.append( fragment );
 227                         return ( counter < 1000 );
 228
 229                 }
 230
 231         };
 232
 233         Filterable.prototype.add = function add ( set ) {
 234
 235                 var self = this;
 236
 237                 this.memory.reset();
 238                 this.memory = set.union( this.memory );
 239
 240                 this.filtered.attr( 'disabled', 'disabled' );
 241                 this.box.addClass( 'jq-filterable-working' );
 242
 243                 this.form.find( 'input[type="submit"]' )
 244                         .attr( 'disabled', 'disabled' );
 245
 246                 var batch = this.batcher( this.memory ),
 247                         completed = batch(),
 248                         interval = setInterval( function () {
 249
 250                                 completed = batch();
 251                                 if ( completed ) {
 252
 253                                         clearInterval( interval );
 254
 255                                         self.filtered.attr( 'disabled', false );
 256                                         self.form.find( 'input[type="submit"]' )
 257                                                 .attr( 'disabled', false );
 258
 259                                         self.box.removeClass( 'jq-filterable-working' );
 260                                         self.search( self.filter.val() );
 261
 262                                 }
 263                         }, 10 );
 264
 265         };
 266
 267         Filterable.prototype.remove = function remove ( set ) {
 268
 269                 var iterator = new SetIterator( set ),
 270                         index = null, i = null;
 271
 272                 while ( index = iterator.next() ) {
 273                         i = this.memory.find( index );
 274                         if ( i >= 0 ) this.memory.remove( i );
 275                         this.selected.find( 'option[value="' + index + '"]' ).remove();
 276                 }
 277
 278                 this.search( this.filter.val() );
 279
 280         };
 281
 282         Filterable.prototype.note = function note ( message, type ) {
 283
 284                 this.statusbar.html( message );
 285
 286                 if ( type && type == "error" )
 287                         this.statusbar.attr( "data-state", "error" );
 288                 else if ( type && type == "warning" )
 289                         this.statusbar.attr( "data-state", "warning" );
 290                 else this.statusbar.attr( "data-state", "info" );
 291
 292         };
 293
 294         Filterable.prototype.error = function error ( message ) {
 295
 296                 this.filter.css( { "border-color": "#f40" } );
 297                 this.note( message, "error" );
 298
 299         };
 300
 301         Filterable.prototype.reset = function reset () {
 302
 303                 this.memory.empty();
 304                 this.selected.empty();
 305                 this.search( this.filter.val() );
 306
 307         };
 308
 309         Filterable.prototype.update_labels = function update_labels ( ) {
 310
 311                 if ( this.matching >= settings.limit ) {
 312                         this.note( "Not all items shown; " + this.matching + "/" + this.data.size() );
 313                 } else {
 314                         this.note( this.matching + " Items" );
 315                 }
 316
 317                 // Fixes IE 9 error with dynamic options
 318                 this.selected.css( 'width', '0px' );
 319                 this.selected.css( 'width', '' );
 320
 321                 if( this.memory.size() > 0 ) {
 322                         this.resultstats.html( this.memory.size() + " items selected. <a href='#' class='deselect_all'>Deselect all</a>" );
 323                 } else {
 324                         this.resultstats.text( "No items selected..." );
 325                 }
 326
 327         };
 328
 329         /** method search ( string term )
 330           *
 331           * Searches the data array for regexp matches
 332           * against term, then runs method populate.
 333           *
 334           * @param string term
 335           * @param boolean respond
 336           * @return void
 337           */
 338         Filterable.prototype.search = function search ( term, source, respond ) {
 339
 340                 var memresult = [];
 341                 this.results = new Set();
 342
 343                 try {
 344                         term = new RegExp( term, "i" );
 345                 } catch ( e ) {
 346                         this.error( "Invalid search ( " + e.message + " ) " );
 347                         return;
 348                 }
 349
 350                 var iterator = new SetIterator( this.data ),
 351                         index = null;
 352
 353                 while ( ( index = iterator.next() ) != null ) {
 354                         if ( index.match( term ) )
 355                                 this.results.push( index );
 356                 }
 357
 358                 this.memory.reset();
 359                 this.results.reset();
 360
 361                 this.results = this.results.diff( this.memory );
 362                 this.matching = this.results.size();
 363
 364                 if ( respond ) {
 365                         this.results.reset();
 366                         return this.results;
 367                 } else {
 368                         this.results.shrink( 0, settings.limit );
 369                         this.populate( source );
 370                 }
 371
 372         };
 373
 374         /** method populate ( string array data )
 375           *
 376           * Searches the data array for regexp matches
 377           * against term, then runs method populate.
 378           *
 379           * @param string term
 380           * @return void
 381           */
 382         Filterable.prototype.populate = function populate ( source ) {
 383
 384                 var fragment = document.createDocumentFragment(),
 385                         iterator = null,
 386                         opt = null,
 387                         index = 0;
 388
 389                 iterator = new SetIterator( this.results );
 390
 391                 while ( ( index = iterator.next() ) != null ) {
 392
 393                         opt = document.createElement( 'option' );
 394                         opt.innerHTML = index;
 395                         opt.value = index;
 396
 397                         fragment.appendChild( opt );
 398
 399                 }
 400
 401                 this.filtered.empty();
 402                 this.filtered.append( fragment );
 403                 this.update_labels();
 404
 405                 if ( source ) {
 406                         this.filtered.val( source );
 407                 }
 408
 409                 if ( this.multiple ) {
 410                         this.filtered.val([]);
 411                 }
 412
 413         };
 414
 415         var Filterables = [];
 416         var FilterableFactory = function FilterableFactory ( data ) {
 417
 418                 var F = ( new Filterable( this, data ) );
 419                 Filterables.push( F );
 420                 return F;
 421
 422         };
 423
 424         jQuery.filterable_settings = function ( key, value ) {
 425                 if ( settings[ key ] ) {
 426                         settings[ key ] = value;
 427                 }
 428         }
 429
 430         jQuery.fn.filterable = FilterableFactory;
 431         jQuery.fn.filterable.find = function ( element ) {
 432
 433                 for ( var i = 0; i < Filterables.length; i++ ) {
 434                         if ( Filterables[ i ].selected[ 0 ] == element[ 0 ] ) {
 435                                 return Filterables[ i ];
 436                         }
 437                 }
 438
 439                 return null;
 440
 441         };
 442
 443         function selectload ( index, element ) {
 444
 445                 var select = $( element );
 446
 447                 if ( select.attr( 'data-type' ) ) {
 448
 449                         settings.ajax.success = function ( data ) {
 450                                 settings.collector( select, data );
 451                         };
 452
 453                         settings.ajax.url = settings.datasource( select );
 454                         $.ajax( settings.ajax );
 455
 456                 } else if (select.length) {
 457
 458                         var options = $.map( select.children(), function( option ) {
 459                                         return option.text;
 460                                 });
 461
 462                         select.children().each( function() {
 463                                 if (!$(this).attr('selected')) {
 464                                         select.removeOption(this.text);
 465                                 }
 466                         } );
 467
 468                         select.filterable( options );
 469
 470                 }
 471
 472         }
 473
 474         $( document ).ready( function () {
 475                 var selects = $( settings.selector );
 476                 selects.each( selectload );
 477         } );
 478
 479 } ) ( jQuery, window );