Skip to content
Snippets Groups Projects
Commit dac658aa authored by Ghislain Loas's avatar Ghislain Loas
Browse files

dev #64573 use simple multiple columns carousel

parent e794cf2b
Branches
Tags
3 merge requests!3297WIP: Master,!3037Master,!2988Dev#64573 templates pour l interface publique libraire bootstrap
Pipeline #5564 failed with stage
in 26 minutes and 54 seconds
Hide whitespace changes
Inline Side-by-side
library/templates/Intonation/Assets/css/intonation.css
+ 5
− 63
View file @ dac658aa
......@@ -71,7 +71,7 @@ body {
[class^="fa"].ico_xl {
display: block;
font-size: 6em;
font-size: 4em;
}
.card-img-overlay a,
......@@ -92,6 +92,8 @@ p > i {
.card-body.behind_image {
position: absolute;
top: 0;
max-height: 100%;
overflow-y: scroll;
}
.no_overflow {
......@@ -106,72 +108,12 @@ p > i {
min-height: 500px;
}
.multiple_carousel .carousel-item.active,
.multiple_carousel .carousel-item.active ~ .carousel-item {
display: inline-block;
}
.multiple_carousel .carousel-item {
backface-visibility: visible;
visibility: visible;
white-space: normal;
}
.multiple_carousel .card {
display: inline-block;
width: 100%;
height: 100%;
}
.multiple_carousel .behind_image {
max-height: 300px;
overflow: hidden;
}
.multiple_carousel .carousel-inner {
display: flex;
white-space: nowrap;
}
.multiple_carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.multiple_carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) ~ .carousel-item {
transition: none;
}
.multiple_carousel .carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
.multiple_carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
.multiple_carousel .carousel-item-next.carousel-item-left ~ .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.multiple_carousel .carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
** top: 0;
** left: 0;
** z-index: -1;
display: block;
visibility: visible;
transform: translate3d(-100%, 0, 0);
transition: none;
}
/* right or prev direction */
.multiple_carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.multiple_carousel .carousel-item-prev.carousel-item-right + .carousel-item,
.multiple_carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.multiple_carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
.multiple_carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
.multiple_carousel .img_as_background {
height: 100%;
}
\ No newline at end of file
library/templates/Intonation/View/Gridify.php 0 → 100644
+ 66
− 0
View file @ dac658aa
<?php
/**
* Copyright (c) 2012-2018, Agence Française Informatique (AFI). All rights reserved.
*
* BOKEH is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* BOKEH is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with BOKEH; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
class Intonation_View_Gridify extends ZendAfi_View_Helper_BaseHelper {
protected $_number_of_items_by_row = 3;
public function gridify($elements) {
$number_of_rows = ceil(count($elements) / $this->_number_of_items_by_row);
$rows = [];
for ($i = 0; $i < $number_of_rows; $i++) {
$items = array_slice($elements,
$i * $this->_number_of_items_by_row,
$this->_number_of_items_by_row);
$counter = count($items);
$items = array_map(function($item) use ($counter)
{
return $this->_wrapWithCol($item, $counter);
},
$items);
$rows [$i] = $this->_tag('div',
implode($items),
['class' => 'row']);
}
return new Storm_Collection($rows);
}
protected function _wrapWithCol($html, $counter) {
$bootstrap_size = 12;
if (2 == $counter)
$bootstrap_size = 6;
if (3 == $counter)
$bootstrap_size = 4;
return $this->_tag('div',
$html,
['class' => 'col-sm-' . $bootstrap_size]);
}
}
\ No newline at end of file
library/templates/Intonation/View/RenderMultipleCarousel.php
+ 19
− 55
View file @ dac658aa
......@@ -25,17 +25,9 @@ class Intonation_View_RenderMultipleCarousel extends ZendAfi_View_Helper_BaseHel
$id = 'carousel_' . md5(rand(1000, 9999));
$content = $this->_carouselInner($collection, $id)
. $this->_carouselControl($id);
Class_ScriptLoader::getInstance()
->addJqueryReady(sprintf('
$("#%1$s .carousel-item:last").insertBefore($("#%1$s .carousel-item:first"));
$("#%1$s").on("slid.bs.carousel", function() {
$("#%1$s .carousel-item:last").prev().filter(".active").siblings(":first").insertAfter($("#%1$s .carousel-item:last"));
$("#%1$s .carousel-item:last").prev().prev().filter(".active").siblings(":first").insertAfter($("#%1$s .carousel-item:last"));
$("#%1$s .carousel-item:first").filter(".active").siblings(":last").insertBefore($("#%1$s .carousel-item:first"));
});',
$id));
. ((3 < $collection->count())
? $this->_carouselControl($id)
: '');
return $this->_tag('div',
$content,
......@@ -47,13 +39,22 @@ $("#%1$s").on("slid.bs.carousel", function() {
protected function _carouselInner($collection, $id) {
$html = array_filter($collection->injectInto([], function($html, $element)
{
$html [] = $this->_tag('div',
$this->view->cardify($element),
['class' => 'carousel-item col-12 col-sm-4' . (0 == count($html) ? ' active' : '')]);
return $html;
}));
$cards = array_filter($collection->injectInto([], function($html, $element)
{
$html [] = $this->view->cardify($element);
return $html;
}));
$grid = $this->view->gridify($cards);
$html = array_filter($grid->injectInto([],
function($html, $row)
{
$html [] = $this->_tag('div',
$row,
['class' => 'carousel-item' . (0 == count($html) ? ' active' : '')]);
return $html;
}));
return $this->_tag('div',
implode($html),
......@@ -61,43 +62,6 @@ $("#%1$s").on("slid.bs.carousel", function() {
}
protected function _cardify($element) {
return $this->_tag('div',
$this->view->tagImg($this->view->url(['module' => 'opac',
'controller' => 'index',
'action' => 'picture',
'url' => $element->getPicture()], null, true),
['class' => 'img_as_background',
'alt' => ''])
. $this->_tag('div',
$this->_card($element),
['class' => 'card-block card-img-overlay text-center']),
['class' => 'card text-center']);
}
protected function _card($element) {
$info = $this->_tag('p',
$element->getExplicitTitle(),
['class' => 'lead']);
$doc_type = Class_Template::current()
->getIco($this->view,
$element->getDocType(),
'doc_types',
['class' => 'ico_xl',
'alt' => $this->_('Type de document : %s', $element->getDocTypeLabel())]);
$content = $info . $doc_type;
return $this->view->tagAnchor($element->getUrl(),
$content,
['class' => 'card-link',
'title' => $element->getLinkTitle()]);
}
protected function _carouselControl($id) {
return $this->_tag('a',
Class_Template::current()->getIco($this->view, 'previous', 'utils', ['class' => 'ico_xl'])
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment