From 9b45cbb77cc6e55654d5ec7adc6a315813bd5289 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Wed, 28 Mar 2018 12:54:27 +0200 Subject: [PATCH] fix masonry on productions and home --- .../edlp_search/assets/js/edlp_search.js | 3 + .../edlptheme/assets/dist/scripts/main.min.js | 139 ++++++++++-------- .../edlptheme/assets/dist/styles/app.min.css | 3 +- .../custom/edlptheme/assets/scripts/main.js | 139 ++++++++++-------- .../custom/edlptheme/assets/styles/app.scss | 1 + .../templates/content/edlp-home.html.twig | 24 +-- .../content/edlp-productions.html.twig | 14 +- 7 files changed, 176 insertions(+), 147 deletions(-) diff --git a/sites/all/modules/figli/edlp_search/assets/js/edlp_search.js b/sites/all/modules/figli/edlp_search/assets/js/edlp_search.js index 2b3e91f01..a5d6d4ee5 100644 --- a/sites/all/modules/figli/edlp_search/assets/js/edlp_search.js +++ b/sites/all/modules/figli/edlp_search/assets/js/edlp_search.js @@ -18,6 +18,9 @@ }; function initAjax(){ + _$form = $('#edlp-search-form:not(.ajax-enabled)'); + if(!_$form.length) return false; + console.log('EdlpSearch initAjaxForm()'); _$form = $('#edlp-search-form:not(.ajax-enabled)') .on('submit', onSubmitForm) diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index d8d96a807..75f574ab2 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js @@ -186,9 +186,10 @@ console.log('ajax link loaded : data', data); _$body.removeClass('ajax-loading'); - // replace all content with newly loaded + // reset all style may been added by other pages (like masonry for productions) + // and replace all content with newly loaded // TODO: build a system to replace or append contents (like studio + search) - _$row.html(data.rendered); + _$row.removeAttr('style').html(data.rendered); // add close btn if(sys_path != 'procuction'){ @@ -228,9 +229,9 @@ initAjaxLinks(); + // trigger other modules behaviours _$body.trigger({'type':'new-content-ajax-loaded'}); - - // call behaviours + // and call druapl behaviours Drupal.attachBehaviors(_$row[0]); }; @@ -799,28 +800,36 @@ showHideControls(){ // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused); // global playing - if(this.playing && !this.paused){ - this.$controls.addClass('is-playing'); - }else{ - this.$controls.removeClass('is-playing'); + if(this.$controls){ + if(this.playing && !this.paused){ + this.$controls.addClass('is-playing'); + }else{ + this.$controls.removeClass('is-playing'); + } } // playpause - if(this.playlist.length > 0){ - this.$playpause.addClass('is-active'); - }else{ - this.$playpause.removeClass('is-active'); + if(this.$playpause){ + if(this.playlist.length > 0){ + this.$playpause.addClass('is-active'); + }else{ + this.$playpause.removeClass('is-active'); + } } // next - if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){ - this.$next.addClass('is-active'); - }else{ - this.$next.removeClass('is-active'); + if(this.$next){ + if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){ + this.$next.addClass('is-active'); + }else{ + this.$next.removeClass('is-active'); + } } // previous - if(this.playing && this.playlist.length > 1 && this.current_index > 0){ - this.$previous.addClass('is-active'); - }else{ - this.$previous.removeClass('is-active'); + if(this.$previous){ + if(this.playing && this.playlist.length > 1 && this.current_index > 0){ + this.$previous.addClass('is-active'); + }else{ + this.$previous.removeClass('is-active'); + } } return this; }, @@ -859,51 +868,6 @@ }; - // _ _ - // | || |___ _ __ ___ - // | __ / _ \ ' \/ -_) - // |_||_\___/_|_|_\___| - function initHome(){ - addCloseBtnToCols(); - - console.log('theme : initProductions'); - var $grid = $('.row', _$row).masonry({ - itemSelector:'.col', - columnWidth:'.col-2' - }); - - // layout Masonry after each image loads - $grid.imagesLoaded().progress( function() { - $grid.masonry('layout'); - }); - - } - - - // ___ _ _ _ - // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ - // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< - // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/ - function initProductions(){ - console.log('theme : initProductions'); - var $grid = $('.row', _$row).masonry({ - itemSelector:'.col', - columnWidth:'.col-2' - }); - - // layout Masonry after each image loads - $grid.imagesLoaded().progress( function() { - $grid.masonry('layout'); - }); - // var $grid = $('.row', _$row).imagesLoaded( function() { - // // init Masonry after all images have loaded - // $grid.masonry({ - // itemSelector:'.col', - // columnWidth:'.col-2' - // }); - // }); - }; - // ___ _ ___ // | __| _ ___ _ _| |_| _ \__ _ __ _ ___ // | _| '_/ _ \ ' \ _| _/ _` / _` / -_) @@ -917,6 +881,51 @@ } + function initHome(){ + addCloseBtnToCols(); + console.log('theme : initHome'); + // console.log('theme : initProductions'); + var $grid = $('.grid',_$row).masonry({ + itemSelector:'.col', + columnWidth:'.col-2', + horizontalOrder: true, + containerStyle: null, + // disable initial layout + initLayout: false, + }); + // bind event + // $grid.masonry( 'on', 'layoutComplete', function() { + // console.log('layout is complete'); + // }); + $grid.imagesLoaded(function(){ + $grid.masonry(); + }); + } + + + // ___ _ _ _ + // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ + // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< + // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/ + function initProductions(){ + // console.log('theme : initProductions'); + var $grid = $('.grid',_$row).masonry({ + itemSelector:'.col', + columnWidth:'.col-2', + horizontalOrder: true, + containerStyle: null, + // disable initial layout + initLayout: false, + }); + // bind event + // $grid.masonry( 'on', 'layoutComplete', function() { + // console.log('layout is complete'); + // }); + $grid.imagesLoaded(function(){ + $grid.masonry(); + }); + }; + // __ __ _ _ // | \/ |___ __| |__ _| |___ // | |\/| / _ \/ _` / _` | (_-< diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 3aa77e637..a32c4bc80 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -2144,7 +2144,8 @@ body.path-agenda main .col > .wrapper { text-transform: uppercase; } body.path-frontpage .layout-content .row, body.path-productions .layout-content .row { - white-space: normal; } + white-space: normal; + min-height: 100%; } body.path-frontpage .layout-content .row .col, body.path-productions .layout-content .row .col { height: auto; } body.path-frontpage .layout-content .row .col.col-2:last-child, body.path-productions .layout-content .row .col.col-2:last-child { diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index d8d96a807..75f574ab2 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -186,9 +186,10 @@ console.log('ajax link loaded : data', data); _$body.removeClass('ajax-loading'); - // replace all content with newly loaded + // reset all style may been added by other pages (like masonry for productions) + // and replace all content with newly loaded // TODO: build a system to replace or append contents (like studio + search) - _$row.html(data.rendered); + _$row.removeAttr('style').html(data.rendered); // add close btn if(sys_path != 'procuction'){ @@ -228,9 +229,9 @@ initAjaxLinks(); + // trigger other modules behaviours _$body.trigger({'type':'new-content-ajax-loaded'}); - - // call behaviours + // and call druapl behaviours Drupal.attachBehaviors(_$row[0]); }; @@ -799,28 +800,36 @@ showHideControls(){ // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused); // global playing - if(this.playing && !this.paused){ - this.$controls.addClass('is-playing'); - }else{ - this.$controls.removeClass('is-playing'); + if(this.$controls){ + if(this.playing && !this.paused){ + this.$controls.addClass('is-playing'); + }else{ + this.$controls.removeClass('is-playing'); + } } // playpause - if(this.playlist.length > 0){ - this.$playpause.addClass('is-active'); - }else{ - this.$playpause.removeClass('is-active'); + if(this.$playpause){ + if(this.playlist.length > 0){ + this.$playpause.addClass('is-active'); + }else{ + this.$playpause.removeClass('is-active'); + } } // next - if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){ - this.$next.addClass('is-active'); - }else{ - this.$next.removeClass('is-active'); + if(this.$next){ + if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){ + this.$next.addClass('is-active'); + }else{ + this.$next.removeClass('is-active'); + } } // previous - if(this.playing && this.playlist.length > 1 && this.current_index > 0){ - this.$previous.addClass('is-active'); - }else{ - this.$previous.removeClass('is-active'); + if(this.$previous){ + if(this.playing && this.playlist.length > 1 && this.current_index > 0){ + this.$previous.addClass('is-active'); + }else{ + this.$previous.removeClass('is-active'); + } } return this; }, @@ -859,51 +868,6 @@ }; - // _ _ - // | || |___ _ __ ___ - // | __ / _ \ ' \/ -_) - // |_||_\___/_|_|_\___| - function initHome(){ - addCloseBtnToCols(); - - console.log('theme : initProductions'); - var $grid = $('.row', _$row).masonry({ - itemSelector:'.col', - columnWidth:'.col-2' - }); - - // layout Masonry after each image loads - $grid.imagesLoaded().progress( function() { - $grid.masonry('layout'); - }); - - } - - - // ___ _ _ _ - // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ - // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< - // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/ - function initProductions(){ - console.log('theme : initProductions'); - var $grid = $('.row', _$row).masonry({ - itemSelector:'.col', - columnWidth:'.col-2' - }); - - // layout Masonry after each image loads - $grid.imagesLoaded().progress( function() { - $grid.masonry('layout'); - }); - // var $grid = $('.row', _$row).imagesLoaded( function() { - // // init Masonry after all images have loaded - // $grid.masonry({ - // itemSelector:'.col', - // columnWidth:'.col-2' - // }); - // }); - }; - // ___ _ ___ // | __| _ ___ _ _| |_| _ \__ _ __ _ ___ // | _| '_/ _ \ ' \ _| _/ _` / _` / -_) @@ -917,6 +881,51 @@ } + function initHome(){ + addCloseBtnToCols(); + console.log('theme : initHome'); + // console.log('theme : initProductions'); + var $grid = $('.grid',_$row).masonry({ + itemSelector:'.col', + columnWidth:'.col-2', + horizontalOrder: true, + containerStyle: null, + // disable initial layout + initLayout: false, + }); + // bind event + // $grid.masonry( 'on', 'layoutComplete', function() { + // console.log('layout is complete'); + // }); + $grid.imagesLoaded(function(){ + $grid.masonry(); + }); + } + + + // ___ _ _ _ + // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ + // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< + // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/ + function initProductions(){ + // console.log('theme : initProductions'); + var $grid = $('.grid',_$row).masonry({ + itemSelector:'.col', + columnWidth:'.col-2', + horizontalOrder: true, + containerStyle: null, + // disable initial layout + initLayout: false, + }); + // bind event + // $grid.masonry( 'on', 'layoutComplete', function() { + // console.log('layout is complete'); + // }); + $grid.imagesLoaded(function(){ + $grid.masonry(); + }); + }; + // __ __ _ _ // | \/ |___ __| |__ _| |___ // | |\/| / _ \/ _` / _` | (_-< diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index ad767a7a0..2138812d7 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -1043,6 +1043,7 @@ body.path-agenda main .col{ body.path-frontpage, body.path-productions{ .layout-content .row{ white-space: normal; + min-height: 100%; .col{ height:auto; &.col-2:last-child{ diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig index 8b51e5b81..33fb73974 100644 --- a/sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig +++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig @@ -15,17 +15,21 @@ #} -{% for node in nodes %} -
+
+ + {% for node in nodes %} +
+
+ {{ node.build }} +
+
+ {% endfor %} + + +
- {{ node.build }} + {{ agenda }}
-{% endfor %} - - -
-
- {{ agenda }} -
+
diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig index 59fe571dc..03f3c5f38 100644 --- a/sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig +++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig @@ -1,7 +1,9 @@ -{% for node in nodes %} -
-
- {{ node.build }} +
+ {% for node in nodes %} +
+
+ {{ node.build }} +
-
-{% endfor %} + {% endfor %} +