deadhead1971

Isotope select lists in Toolset Views

Nov 23rd, 2015
102
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML
  2.  
  3. <!-- Standard show all results view. This isn't a Parametric Search view. -->
  4. [wpv-layout-start]
  5. <div class="themes-filter">
  6. <select class="filter option-set" data-filter-group="local">
  7. <option data-filter-value="">Any</option>
  8. <option data-filter-value=".national">National</option>
  9. <option data-filter-value=".local">Local</option>
  10. </select>
  11. <br />
  12.  
  13. <select class="filter option-set" data-filter-group="type">
  14. <option data-filter-value="">Any</option>
  15. <option data-filter-value=".general">General</option>
  16. <option data-filter-value=".sport">Play/Sport</option>
  17. <option data-filter-value=".vision">Vision & Hearing</option>
  18. </select>
  19.  
  20. <br />
  21.  
  22. <select class="filter option-set" data-filter-group="structure">
  23. <option data-filter-value="">Any</option>
  24. <option data-filter-value=".statutory">Statutory</option>
  25. <option data-filter-value=".voluntary">Voluntary</option>
  26. <option data-filter-value=".grant">Grant funded</option>
  27. </select>
  28. </div>
  29. [wpv-items-found]
  30. <!-- wpv-loop-start -->
  31. <div class="grid">
  32. <wpv-loop>
  33. <!-- Using WPV-POST-TAXONOMY short-code to product category name as an additional CSS class. -->
  34. <!-- The category name as class, is being used to enable filters above. -->
  35. <div class='item [wpv-post-taxonomy type="organisation-type" format="slug" separator=" "] [types field="organisation-main-topic" separator=" "][/types] [types field="structure" separator=" "][/types]'>
  36. [wpv-post-link]
  37. </div>
  38. </wpv-loop>
  39. </div>
  40. <!-- wpv-loop-end -->
  41. [/wpv-items-found]
  42. [wpv-no-items-found]
  43. [wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
  44. [/wpv-no-items-found]
  45. [wpv-layout-end]
  46.  
  47.  
  48. CSS
  49.  
  50. .item {
  51. margin-top: 10px;
  52. margin-right: 6px;
  53. margin-bottom: 5px;
  54. height: 100px;
  55. width: 31%;
  56. border: 1px solid darkgray;
  57. border-top-left-radius: 30px;
  58. border-bottom-right-radius: 30px;
  59. padding: 10px;
  60. text-align: center;
  61. }
  62.  
  63. #titleholder {
  64. height: 60px;
  65. }
  66.  
  67. #logoholder {
  68. height: 130px;
  69. }
  70.  
  71. * {
  72. -webkit-box-sizing: border-box;
  73. -moz-box-sizing: border-box;
  74. box-sizing: border-box;
  75. }
  76.  
  77. /* ---- btton ---- */
  78.  
  79. .btton {
  80. display: inline-block;
  81. padding: 0.5em 1.0em;
  82. background: #EEE;
  83. border: none;
  84. border-radius: 7px;
  85. background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  86. color: #222;
  87. font-family: sans-serif;
  88. font-size: 16px;
  89. text-shadow: 0 1px white;
  90. cursor: pointer;
  91. }
  92.  
  93. .btton:hover {
  94. background-color: #8CF;
  95. text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  96. color: #222;
  97. }
  98.  
  99. .btton:active,
  100. .btton.is-checked {
  101. background-color: #28F;
  102. }
  103.  
  104. .btton.is-checked {
  105. color: white;
  106. text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
  107. }
  108.  
  109. .btton:active {
  110. box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
  111. }
  112.  
  113. /* ---- buttn ---- */
  114.  
  115. .buttn {
  116. display: inline-block;
  117. padding: 0.5em 1.0em;
  118. background: #EEE;
  119. border: none;
  120. border-radius: 7px;
  121. background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  122. color: #222;
  123. font-family: sans-serif;
  124. font-size: 16px;
  125. text-shadow: 0 1px white;
  126. cursor: pointer;
  127. }
  128.  
  129. .buttn:hover {
  130. background-color: #8CF;
  131. text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  132. color: #222;
  133. }
  134.  
  135. .buttn:active,
  136. .buttn.is-checked {
  137. background-color: #28F;
  138. }
  139.  
  140. .buttn.is-checked {
  141. color: white;
  142. text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
  143. }
  144.  
  145. .buttn:active {
  146. box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
  147. }
  148.  
  149. /* ---- button-group ---- */
  150.  
  151. .button-group:after {
  152. content: '';
  153. display: block;
  154. clear: both;
  155. }
  156.  
  157. .button-group .btton {
  158. float: left;
  159. border-radius: 0;
  160. margin-left: 0;
  161. margin-right: 1px;
  162. }
  163.  
  164. .button-group .btton:first-child { border-radius: 0.5em 0 0 0.5em; }
  165. .button-group .btton:last-child { border-radius: 0 0.5em 0.5em 0; }
  166.  
  167. /* ---- button-group-type ---- */
  168.  
  169. .button-group-type:after {
  170. content: '';
  171. display: block;
  172. clear: both;
  173. }
  174.  
  175. .button-group-type .buttn {
  176. float: left;
  177. border-radius: 0;
  178. margin-left: 0;
  179. margin-right: 1px;
  180. }
  181.  
  182. /* ---- isotope ---- */
  183.  
  184. .grid {
  185. max-width: 1200px;
  186. }
  187.  
  188. /* clear fix */
  189. .grid:after {
  190. content: '';
  191. display: block;
  192. clear: both;
  193. }
  194.  
  195. /* ui group */
  196.  
  197. .ui-group {
  198. display: inline-block;
  199. }
  200.  
  201. .ui-group h3 {
  202. display: inline-block;
  203. vertical-align: top;
  204. line-height: 32px;
  205. margin-right: 0.2em;
  206. font-size: 16px;
  207. }
  208.  
  209. .ui-group .button-group {
  210. display: inline-block;
  211. margin-right: 20px;
  212. }
  213.  
  214.  
  215. JS
  216.  
  217. jQuery( function() {
  218. // init Isotope
  219. var $grid = jQuery('.grid').isotope({
  220. itemSelector: '.item',
  221. layoutMode: 'fitRows'
  222. });
  223.  
  224. var $select = jQuery('.themes-filter select');
  225. var filters = {};
  226.  
  227. $select.change(function() {
  228. var $this = jQuery(this);
  229. var $optionSet = $this;
  230. var group = $optionSet.attr('data-filter-group');
  231. filters[group] = $this.find('option:selected').attr('data-filter-value');
  232.  
  233. var isoFilters = [];
  234. for (var prop in filters) {
  235. isoFilters.push(filters[prop])
  236. }
  237. var selector = isoFilters.join('');
  238.  
  239. $grid.isotope({ filter: selector });
  240. });
  241.  
  242.  
  243. });
  244.  
  245.  
  246.  
  247.  
  248.  
  249.  
  250. edit: added code to reset the filters and labels: (add to bottom of JS code within last }); and add a button or some text to reset the form, under a div id = "button--reset"
  251.  
  252.  
  253. jQuery('#button--reset').on( 'click', function() {
  254. //reset labels
  255. jQuery('.filter option').prop('selected', function() {
  256. return this.defaultSelected;
  257. });
  258. // reset filters
  259. filters = {};
  260. $grid.isotope({ filter: '*' });
  261. // reset buttons
  262. $buttons.removeClass('is-checked');
  263. $anyButtons.addClass('is-checked');
  264. });
RAW Paste Data