--- /dev/null
+<?php
+
+class Cubedesigners_View_Helper_CategoriesDropdown extends CubeIT_View_Helper_Abstract {
+
+ public function CategoriesDropdown($table, $listID, $columnWidth = '170', $gutterSize = '32') {
+
+ $this->headScript()->addIsotope();
+ $this->addScriptAndStyle('isotope-select');
+
+ $is_admin = Bootstrap::getInstance()->isAllowed("edition");
+ $db = Zend_Db_Table::getDefaultAdapter();
+
+ // Get distinct list of categories present in the table
+ $select = $db->select()
+ ->from($table, [$table.'.categories'])
+ ->joinInner('categories', $table.'.categories = categories.id', ['categories.name'])
+ ->group($table.'.categories')
+ ->order('categories.sort_order ASC');
+
+ if (!$is_admin) {
+ $select->where($table.'.online = ?', 1);
+ }
+
+ //echo 'QUERY: '. (string) $select;
+
+ $query = $select->query();
+
+ $categories = [
+ '' => __('Choisir un domaine...'),
+ '0' => __('Tout voir')
+ ];
+ while ($row = $query->fetch()) {
+ $categories[$row->categories] = CubeIT_Util_Cms::unserialize($row->name);
+ }
+
+ return $this->formSelect(
+ $listID . '-filter', // Select element's name
+ null, // Value
+ [
+ // Attributes
+ 'class' => 'category-dropdown form-select',
+ 'data-container-id' => $listID,
+ 'data-column-width' => $columnWidth,
+ 'data-gutter' => $gutterSize
+ ],
+ $categories // Options
+ );
+ }
+
+}
--- /dev/null
+(function ($) {
+ function JQFilterList(element) {
+
+ // Store name of the list
+ this.filterID = $(element).attr('id');
+ this.storageID = this.filterID;
+
+
+ this.element = element;
+ this.columnWidth = parseInt(this.element.data('column-width'));
+ this.gutter = parseInt(this.element.data('gutter'));
+ //this.list = $(this.element.data('list'));
+ this.container = $('#' + this.element.data('container-id'));
+
+ // Store font size for headings - used to scale fonts in resize function
+ this.headingSize = parseInt($(this.container).find('h2').css('font-size'));
+
+
+ // Persist filter settings
+ var initFilter = ''; // This will select the empty item the dropdown. Set to 0 to set it to the "all" label
+ if (Modernizr.sessionstorage) {
+ var f = sessionStorage.getItem(this.storageID);
+ if (f !== null) {
+ initFilter = f;
+ }
+ }
+
+ this.init(initFilter);
+ }
+
+ JQFilterList.prototype = {
+ init: function (initFilter) {
+ var $this = this;
+
+ // Clear filter first...
+ $this.filter('none'); // Dummy value so nothing is selected
+
+ // Set up Isotope
+ this.container.isotope({
+ itemSelector: 'a',
+ layoutMode: 'masonry',
+ masonry: {
+ columnWidth: this.columnWidth,
+ gutter: this.gutter
+ },
+
+ transitionDuration: 0 // Disable isotope animations because they interfere with WOW.js
+ // animationOptions: {
+ // duration: 0,
+ // easing: 'linear',
+ // queue: false
+ // }
+ // hiddenStyle: {
+ // opacity: 0,
+ // transform: 'scale(2)'
+ // },
+ // visibleStyle: {
+ // opacity: 1,
+ // transform: 'scale(1)'
+ // }
+ });
+
+ // Show the container now Isotope is active
+ this.container.css('display', 'block');
+
+ // Now run filter based on any previous settings
+ $this.filter(initFilter);
+
+ // Reveal all items after init for onload animation
+ // https://github.com/metafizzy/isotope/issues/733#issuecomment-52868221
+ //var iso = this.container.data('isotope');
+ //this.container.isotope( 'reveal', iso.items );
+
+ // Also handle resizing of the window
+ $(window).on('cubeitresize', function () {
+ $this.resize();
+ });
+ $this.resize();
+ window.setTimeout(function () {
+ $this.resize();
+ }, 500);
+
+ // Make sure grid is sized properly once page has loaded fully
+ $(window).on('load', function () {
+ $this.resize();
+ });
+
+
+ // Handle dropdown change
+ $(document).on('change', '#' + this.filterID, function () {
+
+ var filterID = $(this).val();
+
+ if (filterID === '') return false;
+
+ // Reset animations on elements for WOW.js when re-filtering
+ // Ref: https://github.com/matthieua/WOW/issues/46#issuecomment-133760823
+ $this.container.find('a').each(function() {
+
+ $(this).css({
+ 'visibility' : 'hidden',
+ 'animation-name' : 'none'
+ });
+
+ $(this).removeClass('animated');
+
+ wow.addBox(this);
+ });
+
+ // Bump scroll so WOW.js runs... There must be a better way to do this
+ window.scrollTo(window.scrollX, window.scrollY + 1);
+ window.scrollTo(window.scrollX, window.scrollY - 1);
+
+ $this.filter(filterID);
+
+ return false;
+ });
+
+ },
+ filter: function (id) {
+
+ //fb('Filter ID: ' + id);
+
+ // Select correct item in dropdown (useful when filter is updated programmatically)
+ this.element.val(id);
+
+ var filterClass;
+
+ if (id == 0) {
+ filterClass = '*';
+ } else {
+ filterClass = '[data-cat="' + id + '"]';
+ }
+
+ //fb('Filtering... ' + filterClass);
+ this.container.isotope({
+ filter: filterClass
+ });
+
+ // Save filter for future sessions
+ if (Modernizr.sessionstorage) {
+ sessionStorage.setItem(this.storageID, id);
+ }
+ },
+ resize: function () {
+
+ //fb('Running resize...');
+
+ var container = this.container
+ var margin = this.gutter;
+ var naturalWidth = this.columnWidth;
+ var scaleFactor = 1;
+
+ var ww = Math.min($(window).width(), 1920);
+
+ ww *= 0.8; // Remove margins (10% each side)
+
+ // Handle extra padding that is added for small screens
+ //if ($('html').hasClass('small')) {
+ // ww = ww - parseInt($('#main .content').css('paddingLeft')) - parseInt($('#main .content').css('paddingRight'));
+ // ww = ww - 68;
+ //}
+
+ var nbcol = Math.ceil(ww / (naturalWidth + margin));
+ var ew = Math.floor((ww - (margin * (nbcol - 1))) / nbcol);
+ if (ew > naturalWidth) {
+ nbcol++; // Add a column when elements are too big
+ ew = Math.floor((ww - (margin * (nbcol - 1))) / nbcol);
+ }
+
+ // Dynamically size text based on element width
+ if (ew < naturalWidth) {
+ scaleFactor = ew / naturalWidth;
+ $(container).find('h2').css('font-size', Math.ceil(scaleFactor * this.headingSize));
+ }
+
+ // Resize elements
+ var a = $(container).find('a');
+ $(a).css('width', ew);
+ //var naturalHeight = $(a).find('img').attr('height');
+ //var imageRatio = naturalWidth / naturalHeight;
+ //$(a).find('img').css({width: ew, height: ew / imageRatio});
+ //$(a).find('.img-wrapper').css({width: ew, height: ew / imageRatio});
+
+ // Reset isotope grid
+ $(container).isotope({
+ masonry: {
+ columnWidth: ew,
+ gutter: margin
+ }
+ });
+
+ }
+
+ };
+
+ jQuery.fn.filterlist = function () {
+ return this.each(function () {
+ var $this = $(this);
+ $(this).data('filterlist', new JQFilterList($this));
+ });
+ };
+})(jQuery);
+
+
+registerLoader(load_filterlist);
+
+function load_filterlist() {
+
+ $('#main').css('overflow-y', 'hidden'); // Stops extra scrollbars appearing
+
+ $('.category-dropdown').filterlist();
+}
}
}
+
+// Standard select dropdown
+.form-select {
+ appearance: none;
+ padding-right: 1.5em;
+ background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14.6 8" style="enable-background:new 0 0 14.6 8;" xml:space="preserve"><path d="M14.3,0.4c-0.2-0.2-0.5-0.2-0.7,0L7.3,6.6L1.1,0.4c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7,7.7c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.4,0.1c0,0,0,0,0,0s0,0,0,0c0.1,0,0.3,0,0.4-0.1c0,0,0,0,0,0l6.6-6.6C14.5,0.9,14.5,0.5,14.3,0.4z"/></svg>') center right no-repeat;
+ background-size: auto 0.4em;
+ border: none;
+ border-radius: 0;
+ font-size: 18px;
+}
projects / cubedesigners-v7.git / commitdiff