examples.mediagallery.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. (function ($) {
  2. $("#switch").click(function () {
  3. if ($(this).hasClass('btn-default')) {
  4. $(".fixed").scrollTop(0);
  5. $("#caret").css('transform', 'rotate(180deg)')
  6. $(this).removeClass('btn-default');
  7. $(this).addClass('btn-primary');
  8. $("#filter-content").fadeIn();
  9. } else {
  10. $("#caret").css('transform', 'rotate(0deg)')
  11. $(this).addClass('btn-default');
  12. $(this).removeClass('btn-primary');
  13. $("#filter-content").fadeOut();
  14. }
  15. });
  16. /*
  17. Thumbnail: Select
  18. */
  19. $('.mg-option input[type=checkbox]').on('change', function (ev) {
  20. var wrapper = $(this).parents('.thumbnail');
  21. if ($(this).is(':checked')) {
  22. wrapper.addClass('thumbnail-selected');
  23. } else {
  24. wrapper.removeClass('thumbnail-selected');
  25. }
  26. });
  27. $('.mg-option input[type=checkbox]:checked').trigger('change');
  28. /*
  29. Toolbar: Select All
  30. */
  31. $('#mgSelectAll').on('click', function (ev) {
  32. ev.preventDefault();
  33. var $this = $(this),
  34. $label = $this.find('> span');
  35. $checks = $("input[name='delCheck']")
  36. if ($this.attr('data-all-selected')) {
  37. $this.removeAttr('data-all-selected');
  38. $checks.prop('checked', false).trigger('change');
  39. $label.html($label.data('all-text'));
  40. } else {
  41. $this.attr('data-all-selected', 'true');
  42. $checks.prop('checked', true).trigger('change');
  43. $label.html($label.data('none-text'));
  44. }
  45. });
  46. /*
  47. Image Preview: Lightbox
  48. */
  49. $('.img-responsive').magnificPopup({
  50. type: 'image',
  51. closeOnContentClick: true,
  52. mainClass: 'mfp-img-mobile',
  53. image: {
  54. verticalFit: true
  55. }
  56. });
  57. /*$('.img-responsive').on('click', function (ev) {
  58. console.log(ev);
  59. ev.preventDefault();
  60. $(this).closest('.thumb-preview').triggerHandler('click');
  61. });*/
  62. var destination = $("[data-sort-destination]");
  63. /*$(window).load(function () {
  64. });*/
  65. function Filter() {
  66. var $this = $(this);
  67. var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
  68. var buttonResult = buttonFilter ? $this.is(buttonFilter) : true;
  69. var comboResult = comboFilter ? $this.is(comboFilter) : true;
  70. return searchResult && buttonResult && comboResult;
  71. }
  72. var buttonFilters = {};
  73. var buttonFilter;
  74. // quick search regex
  75. var qsRegex;
  76. var comboFilter;
  77. var $quicksearch = $('#quicksearch').keyup(debounce(function () {
  78. qsRegex = new RegExp($quicksearch.val(), 'gi');
  79. $grid.isotope({
  80. filter: Filter
  81. });
  82. }));
  83. // debounce so filtering doesn't happen every millisecond
  84. function debounce(fn, threshold) {
  85. var timeout;
  86. threshold = threshold || 100;
  87. return function debounced() {
  88. clearTimeout(timeout);
  89. var args = arguments;
  90. var _this = this;
  91. function delayed() {
  92. fn.apply(_this, args);
  93. }
  94. timeout = setTimeout(delayed, threshold);
  95. };
  96. }
  97. function concatValues(obj) {
  98. var value = '';
  99. for (var prop in obj) {
  100. value += obj[prop];
  101. }
  102. return value;
  103. }
  104. $('.button-group').each(function (i, buttonGroup) {
  105. var $buttonGroup = $(buttonGroup);
  106. $buttonGroup.on('click', 'a', function () {
  107. $buttonGroup.find('.active').removeClass('active');
  108. $(this).parents('li').addClass('active');
  109. });
  110. });
  111. $('.filters').on('click', '.button', function () {
  112. var $this = $(this);
  113. // get group key
  114. var $buttonGroup = $this.parents('.button-group');
  115. var filterGroup = $buttonGroup.attr('data-filter-group');
  116. // set filter for group
  117. buttonFilters[filterGroup] = $this.attr('data-filter');
  118. // combine filters
  119. buttonFilter = concatValues(buttonFilters);
  120. // Isotope arrange
  121. $grid.isotope({
  122. filter: Filter
  123. });
  124. });
  125. // store filter per group
  126. var filters = {};
  127. // do stuff when checkbox change
  128. $('#options').on('change', function (event) {
  129. var checkbox = event.target;
  130. var $checkbox = $(checkbox);
  131. var group = $checkbox.parents('.option-set').attr('data-group');
  132. // create array for filter group, if not there yet
  133. var filterGroup = filters[group];
  134. if (!filterGroup) {
  135. filterGroup = filters[group] = [];
  136. }
  137. // add/remove filter
  138. if (checkbox.checked) {
  139. // add filter
  140. filterGroup.push(checkbox.value);
  141. } else {
  142. // remove filter
  143. var index = filterGroup.indexOf(checkbox.value);
  144. filterGroup.splice(index, 1);
  145. }
  146. comboFilter = getComboFilter();
  147. $grid.isotope({
  148. filter: Filter
  149. });
  150. });
  151. function getComboFilter() {
  152. var combo = [];
  153. for (var prop in filters) {
  154. var group = filters[prop];
  155. if (!group.length) {
  156. // no filters in group, carry on
  157. continue;
  158. }
  159. // add first group
  160. if (!combo.length) {
  161. combo = group.slice(0);
  162. continue;
  163. }
  164. // add additional groups
  165. var nextCombo = [];
  166. // split group into combo: [ A, B ] & [ 1, 2 ] => [ A1, A2, B1, B2 ]
  167. for (var i = 0; i < combo.length; i++) {
  168. for (var j = 0; j < group.length; j++) {
  169. var item = combo[i] + group[j];
  170. nextCombo.push(item);
  171. }
  172. }
  173. combo = nextCombo;
  174. }
  175. var comboFilter = combo.join(', ');
  176. return comboFilter;
  177. }
  178. }(jQuery));