From fe5c789b5d41fa7879443270661a47b59388b5c9 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Fri, 28 Jun 2019 19:50:36 +0000 Subject: [PATCH] Fixes and improvements in preparation for launch. #2033 @5 --- .../views/helpers/CasestudiesRelatedList.php | 213 ++++++++++++++++++ .../views/scripts/templates/casestudies.phtml | 1 + .../views/scripts/templates/expertise.phtml | 7 +- js/casestudies.js | 122 +++++----- js/fancy-select.js | 212 +++++++++++++++++ js/header.js | 6 +- less/agence.less | 6 +- less/fancy-select.less | 112 +++++++++ less/link-arrow.less | 57 +++-- less/list.less | 4 + 10 files changed, 653 insertions(+), 87 deletions(-) create mode 100644 framework/application/views/helpers/CasestudiesRelatedList.php create mode 100644 js/fancy-select.js create mode 100644 less/fancy-select.less diff --git a/framework/application/views/helpers/CasestudiesRelatedList.php b/framework/application/views/helpers/CasestudiesRelatedList.php new file mode 100644 index 0000000..43999f3 --- /dev/null +++ b/framework/application/views/helpers/CasestudiesRelatedList.php @@ -0,0 +1,213 @@ +addScriptAndStyle('casestudies_grid'); + $this->_datas = $datas; + $listStudies = array(); + $listStudiesPropulsed = array(); + + // ToDo: see if there's a better way to do this + $this->_page_data = Bootstrap::getInstance()->getCMSDatasOfPage(4); // ID 4 = casestudies page + + if ($currentStudie != null) { + // fb($currentStudie); + $studieCategorie = $currentStudie->categories; + $studieSecondaires = $currentStudie->tags_secondaires; + $studieTechnologies = $currentStudie->technologies; + $studieDomaines = $currentStudie->domaines; + $studieDate = $currentStudie->annee; + } + + $acl = Bootstrap::getInstance()->isAllowed("edition"); + + $db = Zend_Db_Table::getDefaultAdapter(); + $s = $db->select()->from('casestudies') + ->order('annee DESC'); + + if(is_array($categories)) { + $s->where('categories IN (?)', $categories); + } + + // Fetch specific case study IDs + if(is_array($IDs)) { + $s->where('id IN (?)', $IDs); + } + + if($limit) { + $s->limit($limit); + } + + if (!$acl) { + $s->where('online = ?', 1); + } + $q = $s->query(); + + $count = 1; + + $res = ''; + + while ($r = $q->fetch()) { + + if (null === $currentStudie || $r->id != $currentStudie->id) { + $r = CubeIT_Util_Cms::unserialize($r); + $r->point = 0; + + $addSpacer = false; + + if ($count == 3) { + $count = 1; + $addClass = ''; + } else { + $addClass = ' blocmargin'; + $count++; + } + + $addOffline = ''; + if ($acl && $r->online == 0) { + $addOffline = 'data-offline="1"'; + } + + if ($currentStudie != null) { + if ($r->propulse == 1) { + $r->point += 10000; + } + + if ($r->categories == $studieCategorie) { + $r->point += 1000; + } + + if (is_array($r->tags_secondaires) && is_array($currentStudie->tags_secondaires)) { + if (count($r->tags_secondaires) >= 1 && count($currentStudie->tags_secondaires) >= 1) { + + for ($i = 0; $i < count($studieSecondaires); $i++) { + if (in_array($currentStudie->tags_secondaires[$i], $r->tags_secondaires)) { + $r->point += 100; + } + } + } + } + + if (is_array($r->technologies) && is_array($currentStudie->technologies)) { + if (count($r->technologies) >= 1 && count($currentStudie->technologies) >= 1) { + + foreach ($currentStudie->technologies as $t) { + if (in_array([$i], $r->technologies)) { + $r->point += 15; + } + } + } + } + + if ($r->domaines != '') { + if ($r->domaines == $currentStudie->domaines) + $r->point += 10; + } + + if ($r->annee != '') { + if ($r->annee == $currentStudie->annee) + $r->point += 5; + } + } + + if (count($listStudies) < 3) { + array_push($listStudies, $r); + } else { + if ($r->point > $listStudies[0]->point) { + $listStudies[2] = $listStudies[1]; + $listStudies[1] = $listStudies[0]; + $listStudies[0] = $r; + } else if ($r->point > $listStudies[1]->point) { + $listStudies[2] = $listStudies[1]; + $listStudies[1] = $r; + } else if ($r->point > $listStudies[2]->point) { + $listStudies[2] = $r; + } else { + + } + } + + + if ($currentStudie == null) { + $res.=$this->_case($r); + } + } + } + + if ($currentStudie != null) { + + $nbStudies = 0; + $count = 1; + + $listStudies = array_reverse($listStudies); + + + foreach ($listStudies as $i => $s) { + $res.=$this->_case($s); + } + } + return $res; + } + + protected function _case($study) { + + // Max display size is 512 but we over-sample the size by 20% because there is a CSS scale effect on hover + $image = $this->view->imageProcess($study->visuel, $study->titre, 615, 615, ['class' => 'responsive casestudies-grid-item-image']); + $url = Cubedesigners_Util::generateAutoUri($study, $this->_page_data['seourl_stu']); + + /* + $tag_names = []; + foreach ($study->tags_secondaires as $categoryID) { + $tag_names[] = $this->_getTagName($categoryID); + } + */ + + $hover_style = empty($study->hover_color) ? '' : 'background-color:'. CubeIT_Util_Cms::hexToRGBA($study->hover_color, 0.75) .';'; + + $c = $image; + $c.= '
'; + $c.= '

' . $study->titre . '

'; + //$c.= '

' . implode(' / ', $tag_names) . '

'; + $c.= '

' . $study->legende . '

'; + $c.= '
'; // .casestudies-grid-item-label + + + + // Create a staggered delay for each row (3 items per row) + $delay = 300 + (($this->_counter % 3) * 200); + + $this->_counter++; + + return $this->link($c, $url, array( + 'data-cat' => $study->categories, + 'class' => 'casestudies-grid-item wow fadeInUp', + 'data-wow-delay' => $delay . 'ms', + )) . ' '; // Space needed between elements for justified alignment + } + + // Get secondary category names + protected function _getTagName($catID) { + + // Cache the query data if it's not already done + if (!$this->_tags) { + + $db = Zend_Db_Table::getDefaultAdapter(); + $query = $db->select()->from('tags')->query(); + + while ($category = $query->fetch()) { + $category = CubeIT_Util_Cms::unserializeRow($category); + $this->_tags[$category->id] = CubeIT_Util_Object::toArray($category); + } + } + + return $this->_tags[$catID]['name']; + } + +} diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml index d26b5b4..0ae7b56 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -1,4 +1,5 @@ headScript()->addScriptAndStyle('fancy-select'); $this->headScript()->addScriptAndStyle('casestudies'); ?> diff --git a/framework/application/views/scripts/templates/expertise.phtml b/framework/application/views/scripts/templates/expertise.phtml index acdb854..244221c 100644 --- a/framework/application/views/scripts/templates/expertise.phtml +++ b/framework/application/views/scripts/templates/expertise.phtml @@ -1,6 +1,7 @@ headScript()->addScriptAndStyle('expertises'); +$this->headScript()->addScriptAndStyle('fancy-select'); echo $this->twocols(); if(!empty($this->citation)) { @@ -15,12 +16,14 @@ $casestudy_page_data = Bootstrap::getInstance()->getCMSDatasOfPage(4); // Fetch $related_casestudies = CubeIT_Util_Cms::unserialize($this->related_casestudies); -echo '
'; +echo '
'; echo '
'; echo '

'. __('Case Studies') .'

'; echo '

'. $related_casestudies['title'] .'

'; echo '
'; // .title $limit_results = 3; // How many case studies to return -echo $this->CasestudiesList($casestudy_page_data, null, null, $limit_results, $related_casestudies['casestudies']); +echo '
'; +echo $this->CasestudiesRelatedList($casestudy_page_data, null, null, $limit_results, $related_casestudies['casestudies']); +echo '
'; // .casestudies-grid echo '
'; // .casestudies-list diff --git a/js/casestudies.js b/js/casestudies.js index c312610..6123d26 100644 --- a/js/casestudies.js +++ b/js/casestudies.js @@ -1,64 +1,72 @@ TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_casestudies();'; -var showIds = new Array(); - function load_casestudies() { - initTagsLink(); - - // Check referrer and if it is a cubedesigners page, switch to a history.back() link instead of a standard link to speed things up - if(document.referrer.indexOf("cubedesigners.") > -1) { - $("#closeButton").on('click',function(){ - console.log('using back button...'); - history.back(); - return false; - }); - } - -} - -function initTagsLink() { - $(".tag").click(function () { - $(this).toggleClass('active'); - - if ($(this).hasClass('active')) { - if ($(this).attr("data-id") != 0) { - showIds.push($(this).attr("data-id")); - } else { - showIds = new Array(); - $(".tag").removeClass('active'); - } - } else { - var index = $.inArray($(this).attr("data-id"), showIds); - showIds.splice(index, 1); - } - - if (showIds.length > 0) { - $(".tag:first").removeClass('active'); - } else { - $(".tag:first").addClass('active'); - } - - displayStudies(); - }); - + $('#casestudies-list-filter').fancySelect().on('change.fs', function() { + $(this).trigger('change.$'); + }); // trigger the DOM's change event when changing FancySelect } -function displayStudies() { - if (showIds.length) { - $('#casestudies-list .bloc').each(function () { - var categories = $(this).attr("data-categories"); - if ($.inArray(categories, showIds) == -1) { - $(this).fadeOut(500, function () { - }); - } else { - $(this).fadeIn(500, function () { - }); - } - }); - } else { - $('#casestudies-list .bloc').fadeIn(500, function () { - }); - } -} +// +// var showIds = new Array(); +// +// function load_casestudies() { +// initTagsLink(); +// +// // Check referrer and if it is a cubedesigners page, switch to a history.back() link instead of a standard link to speed things up +// if(document.referrer.indexOf("cubedesigners.") > -1) { +// $("#closeButton").on('click',function(){ +// console.log('using back button...'); +// history.back(); +// return false; +// }); +// } +// +// } +// +// function initTagsLink() { +// $(".tag").click(function () { +// $(this).toggleClass('active'); +// +// if ($(this).hasClass('active')) { +// if ($(this).attr("data-id") != 0) { +// showIds.push($(this).attr("data-id")); +// } else { +// showIds = new Array(); +// $(".tag").removeClass('active'); +// } +// } else { +// var index = $.inArray($(this).attr("data-id"), showIds); +// showIds.splice(index, 1); +// } +// +// if (showIds.length > 0) { +// $(".tag:first").removeClass('active'); +// } else { +// $(".tag:first").addClass('active'); +// } +// +// displayStudies(); +// }); +// +// } +// +// function displayStudies() { +// +// if (showIds.length) { +// $('#casestudies-list .bloc').each(function () { +// var categories = $(this).attr("data-categories"); +// if ($.inArray(categories, showIds) == -1) { +// $(this).fadeOut(500, function () { +// }); +// } else { +// $(this).fadeIn(500, function () { +// }); +// } +// }); +// } else { +// $('#casestudies-list .bloc').fadeIn(500, function () { +// }); +// } +// } diff --git a/js/fancy-select.js b/js/fancy-select.js new file mode 100644 index 0000000..64afa53 --- /dev/null +++ b/js/fancy-select.js @@ -0,0 +1,212 @@ +/* https://github.com/paulstraw/FancySelect */ +(function() { + var $; + + $ = window.jQuery || window.Zepto || window.$; + + $.fn.fancySelect = function(opts) { + var isiOS, settings; + if (opts == null) { + opts = {}; + } + settings = $.extend({ + forceiOS: false, + includeBlank: false, + optionTemplate: function(optionEl) { + return optionEl.text(); + }, + triggerTemplate: function(optionEl) { + return optionEl.text(); + } + }, opts); + isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i); + return this.each(function() { + var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper; + sel = $(this); + if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') { + return; + } + sel.addClass('fancified'); + sel.css({ + width: 1, + height: 1, + display: 'block', + position: 'absolute', + bottom: 0, + right: 0, + opacity: 0 + }); + sel.wrap('
'); + wrapper = sel.parent(); + if (sel.data('class')) { + wrapper.addClass(sel.data('class')); + } + wrapper.append('
'); + if (!(isiOS && !settings.forceiOS)) { + wrapper.append('
    '); + } + trigger = wrapper.find('.trigger'); + options = wrapper.find('.options'); + disabled = sel.prop('disabled'); + if (disabled) { + wrapper.addClass('disabled'); + } + updateTriggerText = function() { + var triggerHtml; + triggerHtml = settings.triggerTemplate(sel.find(':selected')); + return trigger.html(triggerHtml); + }; + sel.on('blur.fs', function() { + if (trigger.hasClass('open')) { + return setTimeout(function() { + return trigger.trigger('close.fs'); + }, 120); + } + }); + trigger.on('close.fs', function() { + trigger.removeClass('open'); + return options.removeClass('open'); + }); + trigger.on('click.fs', function() { + + // Close if it is already open + if(trigger.hasClass('open')) { + return trigger.trigger('close.fs'); + } + + var offParent, parent; + if (!disabled) { + trigger.toggleClass('open'); + if (isiOS && !settings.forceiOS) { + if (trigger.hasClass('open')) { + return sel.focus(); + } + } else { + if (trigger.hasClass('open')) { + parent = trigger.parent(); + offParent = parent.offsetParent(); + if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height() + $(window).scrollTop()) { + options.addClass('overflowing'); + } else { + options.removeClass('overflowing'); + } + } + options.toggleClass('open'); + if (!isiOS) { + return sel.focus(); + } + } + } + }); + sel.on('enable', function() { + sel.prop('disabled', false); + wrapper.removeClass('disabled'); + disabled = false; + return copyOptionsToList(); + }); + sel.on('disable', function() { + sel.prop('disabled', true); + wrapper.addClass('disabled'); + return disabled = true; + }); + sel.on('change.fs', function(e) { + // if (e.originalEvent && e.originalEvent.isTrusted) { + // return e.stopPropagation(); + // } else { + return updateTriggerText(); + // } + }); + sel.on('keydown', function(e) { + var hovered, newHovered, w; + w = e.which; + hovered = options.find('.hover'); + hovered.removeClass('hover'); + if (!options.hasClass('open')) { + if (w === 13 || w === 32 || w === 38 || w === 40) { + e.preventDefault(); + return trigger.trigger('click.fs'); + } + } else { + if (w === 38) { + e.preventDefault(); + if (hovered.length && hovered.index() > 0) { + hovered.prev().addClass('hover'); + } else { + options.find('li:last-child').addClass('hover'); + } + } else if (w === 40) { + e.preventDefault(); + if (hovered.length && hovered.index() < options.find('li').length - 1) { + hovered.next().addClass('hover'); + } else { + options.find('li:first-child').addClass('hover'); + } + } else if (w === 27) { + e.preventDefault(); + trigger.trigger('click.fs'); + } else if (w === 13 || w === 32) { + e.preventDefault(); + hovered.trigger('mousedown.fs'); + } else if (w === 9) { + if (trigger.hasClass('open')) { + trigger.trigger('close.fs'); + } + } + newHovered = options.find('.hover'); + if (newHovered.length) { + options.scrollTop(0); + return options.scrollTop(newHovered.position().top - 12); + } + } + }); + options.on('mousedown.fs', 'li', function(e) { + var clicked; + clicked = $(this); + sel.val(clicked.data('raw-value')); + if (!isiOS) { + sel.trigger('blur.fs').trigger('focus.fs'); + } + options.find('.selected').removeClass('selected'); + clicked.addClass('selected'); + trigger.addClass('selected'); + return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs'); + }); + options.on('mouseenter.fs', 'li', function() { + var hovered, nowHovered; + nowHovered = $(this); + hovered = options.find('.hover'); + hovered.removeClass('hover'); + return nowHovered.addClass('hover'); + }); + options.on('mouseleave.fs', 'li', function() { + return options.find('.hover').removeClass('hover'); + }); + copyOptionsToList = function() { + var selOpts; + updateTriggerText(); + if (isiOS && !settings.forceiOS) { + return; + } + selOpts = sel.find('option'); + return sel.find('option').each(function(i, opt) { + var optHtml; + opt = $(opt); + if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) { + optHtml = settings.optionTemplate(opt); + if (opt.prop('selected')) { + return options.append("
  • " + optHtml + "
    • "); + } else { + return options.append("
  • " + optHtml + "
    • "); + } + } + }); + }; + sel.on('update.fs', function() { + wrapper.find('.options').empty(); + return copyOptionsToList(); + }); + return copyOptionsToList(); + }); + }; + +}).call(this); diff --git a/js/header.js b/js/header.js index c1073e6..72c26ca 100644 --- a/js/header.js +++ b/js/header.js @@ -19,10 +19,10 @@ function load_header() { htl.add(TweenMax.fromTo(nav, 1, {marginTop: 59}, {marginTop: 24}), 0); // Logo var logo = $(h).find('.logo'); - htl.add(TweenMax.fromTo(logo, 1, {top: 36, maxWidth: 263}, {top: 14, maxWidth: 57}), 0); + htl.add(TweenMax.fromTo(logo, 1, {top: 36}, {top: 14}), 0); // Resize cube logo (two parts) - //var img = $(logo).find('img'); - htl.add(TweenMax.fromTo(logo, 1, {height: 48}, {height: 40}), 0); + var logoSVG = $(logo).find('svg'); + htl.add(TweenMax.fromTo(logoSVG, 1, {height: 48}, {height: 40}), 0); // Typo logo var typo = $(logo).find('.logo-text'); htl.add(TweenMax.fromTo(typo, 1, {opacity: 1}, {opacity: 0}), 1); diff --git a/less/agence.less b/less/agence.less index 83c11e1..69e62d2 100644 --- a/less/agence.less +++ b/less/agence.less @@ -89,8 +89,7 @@ } .blocs { - padding: 40px 0 0 0; - margin-top: -25px; + padding: 15px 0 0 0; } .spacer { @@ -115,8 +114,9 @@ } - @media screen and (max-width: 1048px) { + @media screen and (max-width: 1200px) { width: 100%; + padding: 0 !important; } } diff --git a/less/fancy-select.less b/less/fancy-select.less new file mode 100644 index 0000000..691a392 --- /dev/null +++ b/less/fancy-select.less @@ -0,0 +1,112 @@ +@import "00-constants"; + +div.fancy-select { + position: relative; + font-weight: 300; + font-size: 20px; + + .m & { + font-size: 11px; + } + + &.disabled { + opacity: 0.5; + } + + select:focus + div.trigger { + //box-shadow: 0 0 0 1px #aaa; // Outline box + } + + select:focus + div.trigger.open { + box-shadow: none; + } + + div.trigger { + background: url('data:image/svg+xml;utf8,') center right no-repeat; + background-size: auto 0.4em; + cursor: pointer; + padding: 0 1.5em 0 0.4em; + line-height: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + //background: #f8f8f8; + //color: #aaa; // Placeholder text + //width: 100%; + display: inline-block; + z-index: 2; + transition: all 140ms ease-out; + + &.selected { + color: #323232; + } + + &.open { + box-shadow: none; + } + } + + ul.options { + list-style: none; + margin: 0; + position: absolute; + top: 100%; + right: 0; + visibility: hidden; + opacity: 0; + z-index: 1; + //max-height: 0; // Start hidden and expand up + //max-height: unit(10*2*0.8,em); // Show 10 max + //width: 100%; + overflow: auto; + background: #fff; + //border-top: 1px solid #7DD8D2; + //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + transition: all 150ms ease-out; + + &.open { + z-index: 10; + visibility: visible; + opacity: 1; + + /* have to use a non-visibility transition to prevent this iOS issue (bug?): */ + /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/ + //transition: opacity, max-height 200ms ease-out; + } + + &.overflowing { + top: auto; + bottom: 110%; + + &.open { + //transition: opacity, max-height 300ms ease-out; + } + } + + li { + padding: 0.5em 2em; + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: left; + //transition: all 100ms ease-out; + + &:before { + display: none; + } + + &.selected { + background: rgba(200,200,200,0.2); + color: #000; + } + + &.hover { + background: @yellow; + color: #fff; + } + } + } + +} diff --git a/less/link-arrow.less b/less/link-arrow.less index 1c97668..25666b7 100644 --- a/less/link-arrow.less +++ b/less/link-arrow.less @@ -3,7 +3,7 @@ @import "00-constants"; // Variables -@black: #666; +@black: #222428; @hover-color: @yellow; @text-arrow-space: 10px; @@ -19,7 +19,7 @@ // The Arrow .the-arrow { width: @shaft-width; - transition: all 0.2s; + //transition: transform 0.2s; &.-left { position: absolute; @@ -27,13 +27,19 @@ left: 0; > .shaft { - width: 0; + //width: 0; + width: @shaft-width; + transform: scaleX(0); background-color: currentColor; + transition-duration: 0.1s; &:before, &:after { - width: 0; + //width: 0; + width: @arrow-head-width; + transform: scaleX(0); background-color: currentColor; + transition-duration: 0.1s; } &:before { @@ -51,13 +57,13 @@ > .shaft { width: @shaft-width; - transition-delay: 0.2s; + transition-delay: 0.1s; &:before, &:after { width: @arrow-head-width; - transition-delay: 0.3s; - transition: all 0.5s; + transition-delay: 0.1s; + transition: transform 0.3s; } &:before { @@ -75,8 +81,8 @@ display: block; height: @shaft-thickness; position: relative; - transition: all 0.2s; - transition-delay: 0; + transition: transform 0.2s; + transition-delay: 0s; will-change: transform; &:before, @@ -88,8 +94,8 @@ position: absolute; top: 0; right: 0; - transition: all 0.2s; - transition-delay: 0; + transition: transform 0.2s; + transition-delay: 0s; } &:before { @@ -113,20 +119,20 @@ //font-style: italic; //text-decoration: none; position: relative; - transition: all 0.2s; + //transition: all 0.2s; - &:hover { + &:hover, &:active { color: @hover-color; > .the-arrow.-left { > .shaft { - width: @shaft-width; + transform: scaleX(1); transition-delay: 0.1s; background-color: @hover-color; &:before, &:after { - width: @arrow-head-width; + transform: scaleX(1); transition-delay: 0.1s; background-color: @hover-color; } @@ -143,18 +149,24 @@ > .main { transform: translateX(@shaft-width + @text-arrow-space); + color: @hover-color; > .the-arrow.-right { + //color: @black; + > .shaft { - width: 0; - transform: translateX(200%); - transition-delay: 0; + //color: @black; + //width: 0; + transform: scaleX(0); + transform-origin: left; + transition-delay: 0s; &:before, &:after { - width: 0; - transition-delay: 0; - transition: all 0.1s; + //width: 0; + transform: scaleX(0); + transition-delay: 0s; + transition: transform 0.1s; } &:before { @@ -172,7 +184,8 @@ > .main { display: flex; align-items: center; - transition: all 0.2s; + transition: transform 0.2s; + transition-delay: 0.2s; > .text { margin: 0 @text-arrow-space 0 0; diff --git a/less/list.less b/less/list.less index b6abc95..001e033 100644 --- a/less/list.less +++ b/less/list.less @@ -80,6 +80,10 @@ section.list { margin: 0 0 50px 0; &:extend(.media); + &:last-child { + margin-bottom: 0; + } + .text { &:extend(.media--body); } -- 2.39.5