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

improved grid display without masonry

Browse Source
This commit is contained in:
bachir
2018-04-27 16:53:00 +02:00
parent 89f370d4b7
commit 51f25bd347
4 changed files with 160 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+5 -4
View File
@@ -1,6 +1,7 @@
(function($,Drupal,drupalSettings){EdlpTheme=function(){var _ajax_settings=drupalSettings.edlp_ajax;var _$body=$('body');var _corpus_ready=false;var _$corpus_canvas;var _$row=$('main[role="main"]>.layout-content>.row');var _$ajaxLinks;var _audioPlayer;var _randomPlayer;var _compoPlayer;var _ajax_timing={start:0,end:0};var _corpus_promise;function init(){void 0;initEvents();_audioPlayer=new AudioPlayer();_compoPlayer=new CompoPlayer();checkLayout();initAjaxLinks();initHistory();};function initEvents(){var $corpus_df=$.Deferred();_corpus_promise=$corpus_df.promise();_$body.on('corpus-map-ready',function(e){onCorpusMapReady(e);$corpus_df.resolve();}).on('on-studio-chutier-updated',initAjaxLinks).on('studio-initialized',function(e){_compoPlayer.newCompo();}).on('studio-not-active',function(e){_compoPlayer.deactivate();}).on('on-studio-compo-updated',function(e){initAjaxLinks();_compoPlayer.refresh();}).on('on-studio-compo-opened',function(e){initAjaxLinks();_compoPlayer.newCompo();}).on('search-results-loaded',initAjaxLinks).on('open_entree',function(e){void 0;closeAllModals();checkLayout();_$body.removeClass();if(typeof e.url!='undefined'){var state=getSysPathState(e.sys_path);history.pushState(state,null,e.url);if(typeof _paq!=='undefined'){_paq.push(['setCustomUrl',e.url]);_paq.push(['setDocumentTitle',e.title]);_paq.push(['trackPageView']);}}}).on('close_entree',function(e){backToFrontPage();checkLayout();});window.addEventListener('resize',checkLayout,false);}
function checkLayout(){var $audioplayer=$("#audio-player");if($audioplayer.length){var navpos=$('#block-mainnavigation').position();if(typeof navpos!='undefined'){$audioplayer.css({'width':navpos.left+'px'});}}};function initScrollbars(){};function getSysPathState(sys_path,view_mode){var state={'sys_path':sys_path,'ajax_path':sys_path};var node_match=state.ajax_path.match(/^\/?(node\/(\d+))$/i);void 0;var term_match=state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);void 0;if(node_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+node_match[1];state.node_nid=node_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}}else if(term_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+term_match[1];state.ajax_path=state.ajax_path.replace(/taxonomy\/term/,'taxonomy_term');state.entree_tid=term_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}else{state.ajax_path=null;}}else{state.ajax_path+='/ajax'}
function checkLayout(){var $audioplayer=$("#audio-player");if($audioplayer.length){var navpos=$('#block-mainnavigation').position();if(typeof navpos!='undefined'){$audioplayer.css({'width':navpos.left+'px'});}}
checkGridBlockHeight();checkGridBlockVisible();};function initScrollbars(){};function getSysPathState(sys_path,view_mode){var state={'sys_path':sys_path,'ajax_path':sys_path};var node_match=state.ajax_path.match(/^\/?(node\/(\d+))$/i);void 0;var term_match=state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);void 0;if(node_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+node_match[1];state.node_nid=node_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}}else if(term_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+term_match[1];state.ajax_path=state.ajax_path.replace(/taxonomy\/term/,'taxonomy_term');state.entree_tid=term_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}else{state.ajax_path=null;}}else{state.ajax_path+='/ajax'}
return state;};function ajaxLoadContent(state){void 0;_$body.addClass('ajax-loading');_ajax_timing.start=performance.now();var path=window.location.origin+Drupal.url(state.ajax_path);$.getJSON(path,{}).done(function(data){onAjaxLoaded(data,state);}).fail(function(jqxhr,textStatus,error){onAjaxLoadError(jqxhr,textStatus,error,state.sys_path);});};function onAjaxLoadError(jqxhr,textStatus,error,sys_path){void 0;$('.ajax-loading').removeClass('ajax-loading');_$body.removeClass('ajax-loading');};function onAjaxLoaded(data,state){void 0;if(data.entity_type=="node"&&data.bundle=="evenement"){if(_$row.find('.col.event').length){_$row.find('.col.event').replaceWith(data.rendered);}else if(_$row.find('.col.aside').length){_$row.find('.col.aside').replaceWith(data.rendered);}else{_$row.append(data.rendered);}}else{_$row.removeAttr('style').html(data.rendered);}
var body_classes=['path-'+state.sys_path.replace(/\//g,'-'),'entity-type-'+data.entity_type,'bundle-'+data.bundle,'view-mode-'+data.view_mode];_$body.removeClass().addClass(body_classes.join(' '));if(state.node_nid)
_$body.addClass('path-edlp-node');$('.ajax-loading').removeClass('ajax-loading');$('.ajax-link.is-active').removeClass('is-active');$('.is-active-trail').removeClass('is-active-trail');if(typeof state.selector!='undefined'){void 0;$('a[selector="'+state.selector+'"]').addClass('is-active');initAudioLinksInContent();}else{if(typeof state.view_mode!='undefined'){$('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');}else{$('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');}
@@ -9,7 +10,7 @@ if(typeof data.bundle!='undefined'&&data.bundle=="page"){$('a[data-drupal-link-s
if(typeof data.menu_parents!='undefined'){for(var i=0;i<data.menu_parents.length;i++){var menu_sys_path=data.menu_parents[i];$('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');}}
if(typeof data.documents_lies!='undefined'){if(_corpus_ready){_$body.trigger({type:'ajax-node-loaded-linked-documents',nids:data.documents_lies});}else{_corpus_promise.done(function(){_$body.trigger({type:'ajax-node-loaded-linked-documents',nids:data.documents_lies});});}}
if(typeof data.block!='undefined'){if(!$('#'+data.block.id,'.region-'+data.block.region).length){$('.region-'+data.block.region).append(data.block.rendered);}}
if(state.sys_path=="productions"){initProductions();}else{addCloseModalBtnToCols();}
if(state.sys_path=="productions"){initGrid();}else{addCloseModalBtnToCols();}
if(data.entity_type=="node"&&data.bundle=="enregistrement"&&data.view_mode=="transcript"){initEnregistrementTranscript();}
if(state.sys_path=="search"){initSearch();}
if(typeof data.translations_links!='undefined'){void 0;var lang_code=drupalSettings.path.currentLanguage;var $links=$(data.translations_links);$links.find('li[hreflang="'+lang_code+'"]').addClass('is-active').find('a').addClass('is-active');if(state.view_mode){$links.find('a').each(function(i,e){var $a=$(this);$a.attr('href',$a.attr('href')+'#'+state.view_mode);});}
@@ -21,7 +22,7 @@ checkRowEmpty();checkVisibleCorpusMapSpace();};function initHistory(){initFirstL
if(edlp_origin.audio_url){var node={nid:edlp_origin.entity_id,audio_url:edlp_origin.audio_url};_audioPlayer.openDocument(node,'history_first_load');if(view_mode==""){state.audio=true;state.node=node;_$body.attr('booted','booted');}else{ajaxLoadContent(state);}}
else if(state.ajax_path){ajaxLoadContent(state);}
if(state.entree_tid){openEntree(state.entree_tid);}
history.replaceState(state,null,edlp_origin.url+edlp_origin.hash);window.localStorage.removeItem("edlp_origin");}else{history.replaceState({home:true},null,window.location.pathname);_$body.attr('booted','booted');}};function onHistoryPopState(e){void 0;if(e.state.home){backToFrontPage(true);}
history.replaceState(state,null,edlp_origin.url+edlp_origin.hash);window.localStorage.removeItem("edlp_origin");}else{history.replaceState({home:true},null,window.location.pathname);initGrid();_$body.attr('booted','booted');}};function onHistoryPopState(e){void 0;if(e.state.home){backToFrontPage(true);}
else if(e.state.audio){_audioPlayer.openDocument(e.state.node,'popstate',e.state.historic_index);}
else{if(e.state.entree_tid){openEntree(e.state.entree_tid);}
if(e.state.ajax_path){e.state.url=null;ajaxLoadContent(e.state);}}};function initAjaxLinks(){$('a.site-name','#block-edlptheme-branding').add('a','#block-mainnavigation').add('a','#block-footer.menu--footer').add('a','#block-productions').add('a','article.node:not(.node--type-enregistrement) h2.node-title').add('a','.productions-subtree').add('a','.productions-parent').add('a','.field--name-field-son').addClass('ajax-link');$('a[data-drupal-link-system-path="<front>"]','#block-mainnavigation').removeClass('is-active');_$ajaxLinks=$('.ajax-link:not(.ajax-enabled)').each(function(i,e){var $this=$(this);if($this.is('.ajax-enable'))return;if($this.attr('data-drupal-link-system-path')||$this.is('[type^="audio"]')){$this.on('click',onClickAjaxLink).addClass('ajax-enable');}});};function onClickAjaxLink(e){e.preventDefault();var $link=$(this);if($link.is('.is-active'))
@@ -49,7 +50,7 @@ return this;},showHideControls(){if(this.$controls){if(this.playing&&!this.pause
if(this.$playpause){if(this.playlist.length>0){this.$playpause.addClass('is-active');}else{this.$playpause.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');}}
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;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){if(this.playing){this.next();}},};function initProductions(){void 0;return;var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});};function checkProductionBlockVisible(e,items){void 0;for(var i in items){if(!items[i].isTransitioning){void 0;void 0;if(items[i].position.y+items[i].size.outerHeight<_$row.height()){$(items[i].element).removeClass('offfield');}else{}}}}
return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){if(this.playing){this.next();}},};function initGrid(){void 0;checkGridBlockHeight();_$row.find('.col').addClass('offfield');if(false){var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});$grid.on('layoutComplete',checkGridBlockVisible);}else{checkGridBlockVisible();}};function checkGridBlockHeight(){void 0;var $r_h=_$row.height();$('.grid .col',_$row).each(function(i,e){if($(this).height()>$r_h){$(this).height($r_h);}});};function checkGridBlockVisible(){void 0;var $r_h=_$row.height();var $this,pos;$('.grid .col',_$row).each(function(i,e){$this=$(this);pos=$this.position();void 0;if(pos.top+$this.height()<=$r_h){$this.removeClass('offfield');}});}
function initSearch(){$('#edit-entries--wrapper legend','#edlp-search-form').on('click',function(){$(this).parent().toggleClass('opened');});};function initEnregistrementTranscript(){void 0;var $node=_$row.find('article.node--type-enregistrement.node--view-mode-transcript');var $nav=$('<nav>').prependTo($node);$node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label').clone().appendTo($nav).addClass('is-active').attr('field_target','.field--name-field-transcript-vo');$node.find('.field--name-field-transcript-trad').find('.field__label').clone().appendTo($nav).attr('field_target','.field--name-field-transcript-trad');$nav.find('.field__label').on('click',function(){var $this=$(this).addClass('is-active');$this.siblings('.is-active').removeClass('is-active');$this.parents('article.node').find('.field.visible').removeClass('visible');$this.parents('article.node').find($this.attr('field_target')).addClass('visible');});};function backToFrontPage(pop_state){void 0;closeAllModals();$('body').removeClass().addClass('path-frontpage');$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');_$corpus_canvas.trigger({'type':'close-all-entree'});_$corpus_canvas.trigger({'type':'scramble-collection'});if(typeof pop_state=="undefined"||!pop_state){void 0;history.pushState({home:true},null,drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);}}
function initHome(){addCloseModalBtnToCols();return;void 0;var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',horizontalOrder:true,containerStyle:null,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});}
function closeAllModals(){_$row.html('');_$ajaxLinks.removeClass('is-active');_$body.trigger({'type':'all-modal-closed'});};function checkRowEmpty(){if(!$('.col',_$row).length){if(!_$body.is('.entity-type-taxonomy_term.bundle-entrees')){if(!_$body.is('.entity-type-node.bundle-page')){backToFrontPage();}else{_$corpus_canvas.trigger({'type':'scramble-collection'});$('a[data-drupal-link-system-path="productions"]','#block-mainnavigation').removeClass('is-active').trigger('click');}}else{$('.entree-content a.is-active').removeClass('is-active');}}};init();}
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+124 -51
View File
@@ -38,7 +38,6 @@
initHistory();
// initHome();
// if(!drupalSettings.path.isFront)
// return;
@@ -129,7 +128,8 @@
});
}
}
checkGridBlockHeight();
checkGridBlockVisible();
// entrees
// TODO: center the entrees menu
@@ -310,7 +310,8 @@
// initScrollbars();
if(state.sys_path == "productions"){
initProductions();
// initProductions();
initGrid();
}else{
addCloseModalBtnToCols();
}
@@ -566,6 +567,8 @@
}else{
history.replaceState({home:true}, null, window.location.pathname);
// initHome();
initGrid();
_$body.attr('booted', 'booted');
}
};
@@ -1486,57 +1489,128 @@
// }
};
// ___ _ _
// / __|_ _(_)__| |
// | (_ | '_| / _` |
// \___|_| |_\__,_|
function initGrid(){
console.log('theme : initGrid');
checkGridBlockHeight();
_$row.find('.col').addClass('offfield');
if(false){
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
containerStyle: null,
resizeContainer:false,
// horizontalOrder: true,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
// bind event
// $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete');
// });
$grid.on('layoutComplete', checkGridBlockVisible);
}else{
// setTimeout(checkGridBlockVisible, 100);
checkGridBlockVisible();
}
};
function checkGridBlockHeight(){
console.log('checkGridBlockHeight');
var $r_h = _$row.height();
// console.log($r_h);
$('.grid .col', _$row).each(function(i,e){
// console.log($(this).height(), $(this).innerHeight(), $(this).outerHeight());
if($(this).height() > $r_h){
$(this).height($r_h);
}
// $(this).innerHeight(Math.min($(this).innerHeight(), _$row.height()));
});
};
function checkGridBlockVisible(){
console.log('checkGridBlockVisible');
var $r_h = _$row.height();
var $this,pos;
$('.grid .col', _$row).each(function(i,e){
// $(this).on('load',function(event){
$this = $(this);
pos = $this.position();
console.log(pos.top, $this.height(), pos.top+$this.height(), $r_h, $this);
if(pos.top+$this.height() <= $r_h){
$this.removeClass('offfield');
}
// });
});
// for (var i in items) {
// if(!items[i].isTransitioning){
// console.log('y+outerHeight', items[i].position.y+items[i].size.outerHeight);
// console.log('_$row.height()', _$row.height());
// if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
// $(items[i].element).removeClass('offfield');
// }else{
// // $(items[i].element).addClass('offfield');
// }
// }
// }
}
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
console.log('theme : initProductions');
return;
// _$row.find('.col').addClass('offfield');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
containerStyle: null,
resizeContainer:false,
// horizontalOrder: true,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
// bind event
// $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete');
// });
// $grid.on('layoutComplete', checkProductionBlockVisible);
};
function checkProductionBlockVisible(e,items){
console.log('checkProductionBlockVisible', e, items);
for (var i in items) {
if(!items[i].isTransitioning){
console.log('y+outerHeight', items[i].position.y+items[i].size.outerHeight);
console.log('_$row.height()', _$row.height());
if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
$(items[i].element).removeClass('offfield');
}else{
// $(items[i].element).addClass('offfield');
}
}
}
}
// function initProductions(){
// console.log('theme : initProductions');
//
// // _$row.find('.col').addClass('offfield');
// var $grid = $('.grid',_$row).masonry({
// itemSelector:'.col',
// columnWidth:'.col-2',
// containerStyle: null,
// resizeContainer:false,
// // horizontalOrder: true,
// transitionDuration:0,//'0.2s',
// // stagger:30,
// // disable initial layout
// // initLayout: false,
// });
//
// // layout Masonry after each image loads
// $grid.imagesLoaded().progress( function() {
// $grid.masonry('layout');
// });
//
// $grid.imagesLoaded(function(){
// $grid.masonry('layout');
// // checkProductionBlockVisible();
// });
//
// // bind event
// // $grid.masonry( 'on', 'layoutComplete', function() {
// // console.log('layout is complete');
// // });
// // $grid.on('layoutComplete', checkProductionBlockVisible);
// };
// ___ _
@@ -1601,7 +1675,6 @@
addCloseModalBtnToCols();
return;
console.log('theme : initHome');
// console.log('theme : initProductions');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+30 -8
View File
@@ -1433,6 +1433,7 @@ body.path-agenda main .col{
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
body.path-frontpage, body.path-productions{
.layout-content .row{
// opacity: 1;
white-space: normal;
min-height: 100%;
.grid{
@@ -1443,8 +1444,10 @@ body.path-frontpage, body.path-productions{
height:auto;
opacity:1;
transition: opacity 0.5s ease-in-out;
// box-sizing: content-box;
&.offfield{
opacity: 0;
transition: opacity 0s ease-in-out;
}
&.col-2:last-child{
padding-left: 0em;
@@ -1457,9 +1460,23 @@ body.path-frontpage, body.path-productions{
article.node{
.field--name-field-visuel{
a,img{
// a,img{
// display: block;
// width: 100%;
// height:auto;
// }
// http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
// maintain box size without waiting for image loading
a{
display: block;
width: 100%; height:auto;
width: 100%;
padding-bottom: 56.25%; // ratio 800*450;
// height:auto;
}
img{
// display: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
}
header{
@@ -1483,12 +1500,17 @@ body.path-frontpage, body.path-productions{
}
}
}
// &.node--view-mode-image-1-columns{
// h2.node-title{
// // font-size: 1em;
// // font-weight: 500;
// }
// }
&.node--view-mode-image-1-columns{
.field--name-field-visuel{
padding-bottom: 35px;
}
header{
box-sizing: border-box;
position: absolute;
bottom: 0; left:0;
}
}
&.node--view-mode-text-1-column{
padding:0 1em;
}