1// post grid 2// v1.0 3 4(function ($) { 5 6 // global vars 7 8 var ajax_url; 9 var query_string = '?'; 10 11 // custom select class 12 13 function post_grid(item, options) { 14 15 this.item = $(item); 16 17 // options 18 19 var defaults = { 20 instance_ID: null, 21 ajax_url: null, 22 isotope: { 23 use: true, 24 gutter: 0 25 }, 26 view: 'grid', 27 elements: { 28 wrap: null, 29 list: null, 30 filter: null, 31 spinner: null, 32 isotope: null, 33 } 34 }; 35 36 this.options = $.extend(true, defaults, options); 37 this.init(); 38 } 39 40 post_grid.prototype = { 41 42 // init 43 44 init: function () { 45 46 var plugin_instance = this; 47 var plugin_item = this.item; 48 var plugin_settings = plugin_instance.options; 49 var plugin_elements = plugin_settings.elements; 50 51 //console.log('----'); 52 //console.log('new post grid init'); 53 54 // set the global ajax URL 55 ajax_url = plugin_settings.ajax_url; 56 57 // get or create instance ID 58 if (typeof plugin_item.attr('id') !== "undefined" && plugin_item.attr('id') != '') { 59 plugin_settings.instance_ID = plugin_item.attr('id'); 60 } else { 61 plugin_settings.instance_ID = 'post-grid'; 62 } 63 64 // 65 // ELEMENTS 66 // 67 68 plugin_elements.wrap = plugin_item.find('.post-grid-wrap'); 69 plugin_elements.list = plugin_item.find('.post-grid-posts'); 70 plugin_elements.filter = plugin_item.find('.post-grid-filter'); 71 plugin_elements.view = plugin_item.find('.post-grid-view'); 72
73 plugin_elements.spinner = $('<div class="post-grid-spinner">Loading</div>').appendTo(plugin_elements.wrap); 74 75 //console.log('elements', plugin_elements); 76 77 // 78 // SETUP 79 // 80 81 //var isotope_setting = $(plugin_item).attr('data-isotope'); 82 83 if (typeof plugin_elements.wrap.attr('data-isotope') !== 'undefined') { 84 //console.log(plugin_item.attr('id') + ' data-isotope set to ' + plugin_elements.wrap.attr('data-isotope')); 85 86 plugin_settings.isotope.use = plugin_elements.wrap.attr('data-isotope'); 87 } 88 89 if (typeof plugin_elements.view.find('[data-view="grid"]') !== 'undefined') { 90 91 //console.log('view grid exists'); 92 plugin_settings.isotope.use = true; 93 94 } else { 95 96 plugin_settings.isotope.use = false; 97 98 } 99 100 // 101 102 plugin_item.addClass('post-grid-container'); 103 104 //console.log('set view to ' + plugin_settings.view); 105 106 plugin_elements.wrap.attr('data-view', plugin_settings.view); 107 108 // setup by initial view 109 110 plugin_instance._view_setup(); 111 112 // 113 // ACTIONS 114 // 115 116 // change views 117 118 plugin_elements.view.on('click', 'span', function() { 119 120 if (!$(this).hasClass('selected')) { 121 122 // swap classes 123 $(this).siblings('span').removeClass('selected'); 124 $(this).addClass('selected'); 125 126 // set the new view 127 var new_view = $(this).attr('data-view'); 128 plugin_settings.view = new_view; 129 130 // evaluate all filters 131 plugin_instance._evaluate_filters({ 132 133 }); 134 135 } 136 137 }); 138 139 // collapsible filter 140 141 plugin_elements.filter.find('.collapsible').find('.filter-label').click(function() { 142 143 if ($(this).hasClass('open')) { 144 $(this).removeClass('open'); 145 $(this).siblings('.post-grid-filter-item').slideUp(150); 146 } else { 147 $(this).addClass('open'); 148 $(this).siblings('.post-grid-filter-item').slideDown(150); 149 } 150 151 152 }); 153 154 // click filter 155 156 plugin_elements.filter.on('click', '.post-grid-filter-item li', function() { 157 158 plugin_item.find('.page-number').val(1); 159 160 if ($(this).hasClass('selected')) { 161 162 $(this).removeClass('selected'); 163 164 } else { 165 166 $(this).siblings('li').removeClass('selected'); 167 $(this).addClass('selected'); 168 169 $(this).closest('ul').attr('data-filter-value', $(this).attr('data-value')); 170 171 } 172 173 // evaluate all filters 174 plugin_instance._evaluate_filters(); 175 176 }); 177 178 // filter input change 179 180 plugin_elements.filter.find(':input').on('input', function() { 181 plugin_item.find('.page-number').val(1); 182 183 //console.log('input'); 184 185 setTimeout(function() { 186 plugin_instance._evaluate_filters(); 187 }, 150); 188 }); 189 190 // clear filters 191 192 plugin_elements.filter.on('click', '.clear-filter', function() { 193 194 $(this).siblings('.post-grid-filter-item').find('li').removeClass('selected'); 195 $(this).siblings(':input').val(''); 196 197 $(this).fadeOut(250); 198 199 // evaluate all filters 200 plugin_instance._evaluate_filters(); 201 202 }); 203 204 // next page 205 206 $('body').on('click', '#' + plugin_settings.instance_ID + ' .next-page-ajax a', function(e) { 207 e.preventDefault(); 208 209 var new_page = parseInt(plugin_item.find('.page-number').val()) + 1; 210 211 plugin_item.find('.page-number').val(new_page); 212 213 plugin_instance._evaluate_filters(); 214 215 }); 216 217 }, 218 219 _evaluate_filters: function(fn_options) { 220 221 var plugin_instance = this; 222 var plugin_item = this.item; 223 var plugin_settings = plugin_instance.options; 224 var plugin_elements = plugin_settings.elements; 225 226 // options 227 228 var defaults = { 229 load: true 230 }; 231 232 var settings = $.extend(true, defaults, fn_options); 233 234 var query_parameters = {}; 235 236 query_parameters[plugin_settings.instance_ID] = {}; 237 238 // view 239 240 query_parameters[plugin_settings.instance_ID]['view'] = plugin_settings.view; 241 query_parameters[plugin_settings.instance_ID]['filters'] = new Array; 242 243 // flag for whether to load or append the new data 244 // if a filter is set that isn't page #, set to true 245 246 var load_action = 'append'; 247 248 if (plugin_item.find('.page-number').val() == 1) { 249 load_action = 'insert'; 250 } 251 252 // 253 // PAGINATION 254 // 255 256 var new_param = { 257 'filter': 'show_page', 258 'value': plugin_item.find('.page-number').val() 259 }; 260 261 query_parameters[plugin_settings.instance_ID]['filters'].push(new_param); 262 263 // 264 // FILTERS 265 // 266 267 plugin_elements.filter.find('.post-grid-filter-item').each(function() { 268 269 //console.log($(this)); 270 271 var has_selection = false;
272 273 $(this).closest('.sidebar-block').removeClass('has-selection'); 274 275 if ($(this).is('ul')) { 276 277 $(this).find('li').each(function() { 278 279 if ($(this).hasClass('selected')) { 280 281 has_selection = true; 282 283 var this_filter = $(this).parents('.post-grid-filter-item').attr('data-filter'), 284 this_key = $(this).parents('.post-grid-filter-item').attr('data-filter-key'), 285 this_value = $(this).attr('data-value'); 286 287 //console.log(this_key); 288 //console.log(this_value); 289 290 var new_param = { 291 'filter': this_filter, 292 'key': this_key, 293 'value': this_value 294 }; 295 296 //console.log(new_param); 297 298 query_parameters[plugin_settings.instance_ID]['filters'].push(new_param); 299 300 } 301 302 }); 303 304 } else if ($(this).is('input[type="text"]')) { 305 306 if ($(this).val()) { 307 308 has_selection = true; 309 310 var this_key = $(this).attr('data-filter-key'), 311 this_value = $(this).val(); 312 313 var new_param = { 314 'filter': this_key, 315 'value': this_value 316 }; 317 318 //console.log(new_param); 319 320 query_parameters[plugin_settings.instance_ID]['filters'].push(new_param); 321 322 323/* 324 var new_param = { 325 'key': this_key, 326 'value': this_value 327 }; 328 329 console.log(new_param); 330 331 query_parameters[this_key] = this_value; 332*/ 333 334 } 335 336 } 337 338 //console.log($(this)); 339 //console.log(has_selection); 340 341 if (has_selection == true) { 342 $(this).closest('.sidebar-block').addClass('has-selection'); 343 } 344 345 }); 346 347 plugin_item.find('.sidebar-block').each(function() { 348 349 if ($(this).hasClass('has-selection')) { 350 $(this).find('.clear-filter').fadeIn(250); 351 } else { 352 $(this).find('.clear-filter').fadeOut(250); 353 } 354 355 }); 356 357 // reset the ajax URL so filtered content goes to page 1 358 //ajax_url = plugin_settings.ajax_url; 359 360 //console.log(load_action); 361 362 //console.log(query_parameters); 363 364 if (settings.load == true) { 365 plugin_instance.ajax({ 366 data: query_parameters, 367 load_action: load_action 368 }); 369 } 370 371 }, 372 373 ajax: function(fn_options) { 374 375 var plugin_instance = this; 376 var plugin_item = this.item; 377 var plugin_settings = plugin_instance.options; 378 var plugin_elements = plugin_settings.elements; 379 380 // options 381 382 var defaults = { 383 data: null, 384 load_action: 'insert' 385 }; 386 387 var settings = $.extend(true, defaults, fn_options); 388 389 //console.log(ajax_url); 390 //console.log(settings); 391 392 plugin_elements.spinner.fadeIn(250); 393 394 plugin_elements.wrap.animate({ 395 opacity: 0 396 }, { 397 duration: 500, 398 complete: function() { 399 400 plugin_elements.wrap.attr('data-view', plugin_settings.view); 401 402 $.ajax({ 403 url: ajax_url, 404 data: settings.data, 405 dataType: 'html', 406 success: function(data) { 407 408 // console.log($(data)); 409 console.log(data); 410 411 // remove the existing 'next' button 412 413 plugin_item.find('.next-page-ajax').fadeOut().remove(); 414 415 //console.log($(data).find('#' + plugin_settings.instance_ID + ' .parameter')); 416 417 plugin_instance._ajax_success({ 418 data: $(data).find('#' + plugin_settings.instance_ID + ' .post-grid-posts').html(), 419 load_action: settings.load_action, 420 next_btn: $(data).find('#' + plugin_settings.instance_ID + ' .next-page-ajax') 421 }); 422 423 }, 424 complete: function() { 425 plugin_instance._ajax_complete(); 426 plugin_instance._view_setup({ 427 view: settings.data.view 428 }); 429 } 430 }); 431 432 } 433 }); 434 435 }, 436 437 _ajax_success: function(fn_options) { 438 439 var plugin_instance = this; 440 var plugin_item = this.item; 441 var plugin_settings = plugin_instance.options; 442 var plugin_elements = plugin_settings.elements; 443 444 // options 445 446 var defaults = { 447 data: null, 448 load_action: null 449 }; 450 451 var settings = $.extend(true, defaults, fn_options); 452
453 plugin_elements.list.html(settings.data); 454 console.log(settings); 455 plugin_instance._view_setup(); 456 457 if (plugin_settings.view == 'grid' || plugin_settings.view == 'list') { 458 459 //console.log(settings.load_action); 460 461 // if resetting to page 1, remove existing posts 462 463 if (settings.load_action == 'insert') { 464 465 plugin_elements.list.find('.post').each(function() { 466 467 plugin_elements.isotope.isotope( 'remove', $(this) ); 468 469 }); 470 471 } 472 473 // if using isotope 474 475 if (plugin_settings.isotope.use == true) { 476 477 $(settings.data).filter('.post').each(function() { 478 479 plugin_instance._isotope_init(); 480 481 var $items = $(this); 482 plugin_elements.isotope.append($items).isotope('insert', $items); 483 484 }); 485 486 487 } else { 488 489 $(settings.data).filter('.post').each(function() { 490 491 $(this).appendTo(plugin_elements.list); 492 493 }); 494 495 } 496 497 } else if (plugin_settings.view == 'table') { 498 499 if (settings.load_action == 'insert') { 500 plugin_elements.list.find('.file:not(\'.header\')').remove(); 501 } 502 503 $(settings.data).filter('.file:not(.header)').each(function() { 504 $(this).appendTo(plugin_elements.list); 505 }); 506 507 } else if (plugin_settings.view == 'calendar') { 508 509 } else { 510 511 if (settings.load_action == 'insert') { 512 plugin_elements.list.empty(); 513 } 514 515 $(settings.data).each(function() { 516 $(this).appendTo(plugin_elements.list); 517 }); 518 519 } 520 521 // check for a 'next' button on the new page 522 523 if (settings.next_btn.length) { 524 //console.log('there is a next button'); 525 settings.next_btn.insertAfter(plugin_elements.list); 526 } 527 528 529 }, 530 531 _ajax_complete: function(fn_options) { 532 533 var plugin_instance = this; 534 var plugin_item = this.item; 535 var plugin_settings = plugin_instance.options; 536 var plugin_elements = plugin_settings.elements; 537 538 // options 539 540 var defaults = { 541 }; 542 543 var settings = $.extend(true, defaults, fn_options); 544 545 plugin_elements.wrap.animate({ 546 opacity: 1 547 }); 548 549 plugin_elements.spinner.fadeOut(250); 550 551 }, 552 553 // VIEWS 554 555 _view_setup: function (fn_options) { 556 557 var plugin_instance = this; 558 var plugin_item = this.item; 559 var plugin_settings = plugin_instance.options; 560 var plugin_elements = plugin_settings.elements; 561 562 // options 563 564 var defaults = { 565 }; 566 567 var settings = $.extend(true, defaults, fn_options); 568 569 //console.log('view setup'); 570 571 if (plugin_settings.view != 'grid') { 572 573 //console.log('view is not grid'); 574 575 if (plugin_settings.isotope.use != true) { 576 577 if (plugin_elements.list.data('isotope')) { 578 579 //console.log('2'); 580 plugin_elements.isotope.isotope('destroy'); 581 582 } 583 584 plugin_elements.wrap.css('height', 'auto'); 585 plugin_elements.list.attr('style', ''); 586 587 } 588 589 } 590 591 if (plugin_settings.view == 'grid') { 592 593 if (plugin_settings.isotope.use == true) { 594 595 plugin_instance._isotope_init(); 596 597 } 598 599 } else if (settings.view == 'list') { 600 601 if (plugin_settings.isotope.use == true) { 602 603 plugin_instance._isotope_init(); 604 605 } else { 606 607 plugin_elements.wrap.css('height', 'auto'); 608 609 } 610 611 } else if (settings.view == 'calendar') { 612 613 614 615 } 616 617 618 619 }, 620 621 // ISOTOPE 622 623 _isotope_init: function (fn_options) { 624 625 var plugin_instance = this; 626 var plugin_item = this.item; 627 var plugin_settings = plugin_instance.options; 628 var plugin_elements = plugin_settings.elements; 629 630 // options 631 632 var defaults = { 633 }; 634 635 var settings = $.extend(true, defaults, fn_options); 636 637 //console.log('initialize isotope for ' + plugin_item.attr('id')); 638 639 if (typeof plugin_elements.wrap.attr('data-gutter') !== "undefined") { 640 plugin_settings.isotope.gutter = parseInt(plugin_elements.wrap.attr('data-gutter')); 641 } 642 643 if (plugin_elements.isotope == null) { 644 645 plugin_elements.isotope = plugin_elements.list.isotope({ 646 layoutMode: 'packery', 647 packery: { 648 columnWidth: '.grid-sizer', 649 gutter: plugin_settings.isotope.gutter 650 }, 651 itemSelector: '.post', 652 stamp: '.stamp', 653 percentPosition: true, 654 stagger: 50 655 }); 656 657 } else { 658 659 setTimeout(function() { 660 661 plugin_elements.isotope.isotope('layout'); 662 663 }, 1000); 664 665 } 666 667 //console.log(Isotope.data(plugin_elements.list[0])); 668 669 } 670 671 } 672 673 // jQuery plugin interface 674 675 $.fn.post_grid = function (opt) { 676 var args = Array.prototype.slice.call(arguments, 1); 677 678 return this.each(function () { 679 680 var item = $(this); 681 var instance = item.data('post_grid'); 682 683 if (!instance) { 684 685 // create plugin instance if not created 686 item.data('post_grid', new post_grid(this, opt)); 687 688 } else { 689 690 // otherwise check arguments for method call 691 if (typeof opt === 'string') { 692 instance[opt].apply(instance, args); 693 } 694 console.log(instance); 695 696 } 697 }); 698 } 699 700}(jQuery));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.