From b62bcffa0656439739b6f1b90e7cd1f3350e0bc2 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Thu, 11 Apr 2019 15:56:03 +0000 Subject: [PATCH] Allow multiple categories to be selected for Case Studies. Also fix Case Studies list display bug. Done #2671 @3 --- .../forms/CMS/Sub/Casestudies/Studies.php | 2 +- .../views/helpers/CasestudiesList.php | 11 +++- .../views/helpers/CategoriesDropdown.php | 4 ++ .../views/helpers/CategoriesFilter.php | 64 +++++++++++++++++++ .../views/scripts/templates/casestudies.phtml | 4 +- js/isotope-select.js | 30 +++++---- 6 files changed, 96 insertions(+), 19 deletions(-) create mode 100644 framework/application/views/helpers/CategoriesFilter.php diff --git a/framework/application/forms/CMS/Sub/Casestudies/Studies.php b/framework/application/forms/CMS/Sub/Casestudies/Studies.php index 4d200a9..dff148a 100644 --- a/framework/application/forms/CMS/Sub/Casestudies/Studies.php +++ b/framework/application/forms/CMS/Sub/Casestudies/Studies.php @@ -62,7 +62,7 @@ class Cubedesigners_Form_CMS_Sub_Casestudies_Studies extends CubeIT_Form_List_Mo $blocs->setLegend('Contenu'); $this->addSubForm($blocs, 'blocs'); - $categories = new Cubedesigners_Form_Element_Categories('categories'); + $categories = new Cubedesigners_Form_Element_CategoriesCheckboxes('categories'); $categories->setLabel('Catégories'); $this->addElement($categories); diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php index 711955e..9c19ca0 100644 --- a/framework/application/views/helpers/CasestudiesList.php +++ b/framework/application/views/helpers/CasestudiesList.php @@ -182,10 +182,17 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr */ $c.= '

' . $s->legende . '

'; + // Make a list of class names for each category this study is + // assigned to so it can be filtered later on the frontend + $category_classes = array_reduce($s->categories, function($list, $categoryID) { + $list .= ' cat-'. $categoryID; + return $list; + }); + return $this->link($c, $url, array( - 'data-cat' => $s->categories, - 'class' => 'wow fadeInUp', + //'data-cat' => $s->categories, + 'class' => 'wow fadeInUp' . $category_classes, 'data-wow-delay' => '300ms', )) . ' '; // Space needed between elements for justified alignment } diff --git a/framework/application/views/helpers/CategoriesDropdown.php b/framework/application/views/helpers/CategoriesDropdown.php index 7c81a3d..5e5585a 100644 --- a/framework/application/views/helpers/CategoriesDropdown.php +++ b/framework/application/views/helpers/CategoriesDropdown.php @@ -2,6 +2,10 @@ class Cubedesigners_View_Helper_CategoriesDropdown extends CubeIT_View_Helper_Abstract { + /* + * TODO: Refactor this to match new functionality of multiple categories per table? See CategoriesFilter.php. Also check that this isn't used elsewhere... + */ + public function CategoriesDropdown($table, $listID, $columnWidth = '170', $gutterSize = '32') { $this->headScript()->addIsotope(); diff --git a/framework/application/views/helpers/CategoriesFilter.php b/framework/application/views/helpers/CategoriesFilter.php new file mode 100644 index 0000000..b5711ce --- /dev/null +++ b/framework/application/views/helpers/CategoriesFilter.php @@ -0,0 +1,64 @@ +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 + // Since multiple categories can be assigned, we can't do an inner join for this + // Instead, get all studies and map them to their names + + // First, get all possible categories + $select_categories = $db->select() + ->from('categories') + ->order('sort_order ASC'); + + $query_categories = $select_categories->query(); + $all_categories = CubeIT_Util_Cms::unserialize($query_categories->fetchAll()); + //echo 'CAT QUERY: '. (string) $select_categories; + + // Next, get all case studies + $select = $db->select() + ->from($table, ['categories']); + + if (!$is_admin) { + $select->where($table.'.online = ?', 1); + } + + $query = $select->query(); + + $categories = [ + '' => __('Choisir un domaine...'), + '0' => __('Tout voir') + ]; + while ($row = $query->fetch()) { + + $row = CubeIT_Util_Cms::unserialize($row); + + foreach ($row->categories as $category) { + $categories[$category] = $all_categories[$category]->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 + ); + } + +} diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml index aa2e3fb..d26b5b4 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -7,9 +7,7 @@ $this->headScript()->addScriptAndStyle('casestudies');
- CategoriesDropdown('casestudies', 'casestudies-list', 512, 96); - ?> + CategoriesFilter('casestudies', 'casestudies-list', 512, 96); ?>
diff --git a/js/isotope-select.js b/js/isotope-select.js index 197a9a3..2cc5d09 100644 --- a/js/isotope-select.js +++ b/js/isotope-select.js @@ -129,7 +129,7 @@ if (id == 0) { filterClass = '*'; } else { - filterClass = '[data-cat="' + id + '"]'; + filterClass = '.cat-' + id; } //fb('Filtering... ' + filterClass); @@ -146,28 +146,32 @@ //fb('Running resize...'); - var container = this.container - var margin = this.gutter; + var container = this.container; var naturalWidth = this.columnWidth; var scaleFactor = 1; - var ww = Math.min($(window).width(), 1920); - - ww *= 0.8; // Remove margins (10% each side) + var containerWidth = $(this.element).closest('div').outerWidth(); // 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; + // containerWidth = containerWidth - parseInt($('#main .content').css('paddingLeft')) - parseInt($('#main .content').css('paddingRight')); + // containerWidth = containerWidth - 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); + // We define the number of columns based on available width + var columns = 3; + + if (containerWidth < 512) { + columns = 1; + } else if (containerWidth < 1024) { + columns = 2; } + // The margin ratio is based on the width of the main container + var marginRatio = 0.05; + var margin = marginRatio * containerWidth; + var ew = Math.floor((containerWidth - (margin * (columns - 1))) / columns); + // Dynamically size text based on element width if (ew < naturalWidth) { scaleFactor = ew / naturalWidth; -- 2.39.5