bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix masonry on productions and home

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-28 12:54:27 +02:00
parent f4ad71e57a
commit 9b45cbb77c
7 changed files with 176 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_search/assets/js/edlp_search.js
+3
View File
@@ -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)
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+74 -65
View File
@@ -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();
});
};
// __ __ _ _
// | \/ |___ __| |__ _| |___
// | |\/| / _ \/ _` / _` | (_-<
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+2 -1
View File
@@ -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 {
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+74 -65
View File
@@ -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();
});
};
// __ __ _ _
// | \/ |___ __| |__ _| |___
// | |\/| / _ \/ _` / _` | (_-<
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+1
View File
@@ -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{
sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig
+14 -10
View File
@@ -15,17 +15,21 @@
</div>
</div>
#}
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="grid">
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="wrapper">
{{ node.build }}
</div>
</div>
{% endfor %}
<div class="agenda col col-2">
<div class="wrapper">
{{ node.build }}
{{ agenda }}
</div>
</div>
{% endfor %}
<div class="agenda col col-2">
<div class="wrapper">
{{ agenda }}
</div>
</div>
sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig
+8 -6
View File
@@ -1,7 +1,9 @@
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="wrapper">
{{ node.build }}
<div class="grid">
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="wrapper">
{{ node.build }}
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>