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

corpus carre vide et plus petit

Browse Source 
hover audio link -> node_popup on map
index sort title
corpus map : white safety zone arround squares
aside squares not collisioning
square faded not interactive (article filtre)
node_popup show chutier icon only if action not add
fade not active entries in entrees block
closing notice|index doesn't close entree on block
and many little things
This commit is contained in:
bachir
2018-04-17 15:07:57 +02:00
parent 76ff40f8bb
commit a3a4e3922c
26 changed files with 7318 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js
Vendored
+19 -1
View File
@@ -1,2 +1,20 @@
console.log('EDLP THEME HISTORY.js');
// var edlp is provided by edlp_ajax.module file
if(edlp.redirect){
console.log('history redirect', edlp);
console.log('window.location', window.location);
// window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
edlp.sys_path = edlp.sys_path.replace(/^\//, '');
void 0;if(edlp.redirect){void 0;void 0;edlp.sys_path=edlp.sys_path.replace(/^\//,'');edlp.url=window.location.pathname;edlp.hash=window.location.hash;window.localStorage.setItem('edlp_origin',JSON.stringify(edlp));window.location.replace(window.location.origin+'/'+edlp.lang_code);}else{void 0;}
// window.localStorage.setItem('edlp_origin_url', window.location.pathname);
edlp.url = window.location.pathname;
// window.localStorage.setItem('edlp_origin_hash', window.location.hash);
edlp.hash = window.location.hash;
window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
// redirect to home
window.location.replace(window.location.origin+'/'+edlp.lang_code);
}else{
console.log('history do not redirect');
}
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+1382 -50
View File
File diff suppressed because it is too large Load Diff
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+2774 -1
View File
File diff suppressed because one or more lines are too long
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+77 -32
View File
@@ -81,7 +81,9 @@
history.pushState(state, null, e.url);
}
})
.on('close_entree', backToFrontPage);
.on('close_entree', function(e){
backToFrontPage();
});
}
// ___ _ _ ___
@@ -203,8 +205,10 @@
if(typeof state.selector != 'undefined'){
// in case of entree link (actualy, selector is used only for entries links)
// TODO: unfortunatly on initFirstLoad there is no selector property
console.log('selector', state.selector);
$('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');
@@ -297,6 +301,31 @@
}
};
function initAudioLinksInContent(){
// console.log('initAudioLinksInContent');
_$row.find('a.audio-link')
.on('mouseover', function(event) {
event.preventDefault();
// console.log('onmouseover audio-link');
if(_corpus_ready){
_$corpus_canvas.trigger({
type:'mouseover-audio-link',
nid:$(this).attr('nid')
});
}
})
.on('mouseout', function(event) {
event.preventDefault();
// console.log('onmouseout audio-link');
if(_corpus_ready){
_$corpus_canvas.trigger({
type:'mouseout-audio-link',
nid:$(this).attr('nid')
});
}
});
};
function addCloseModalBtnToCols(){
$('.col', _$row).each(function(index, el) {
@@ -305,25 +334,28 @@
$(this).children('.wrapper').prepend($('<span>')
.addClass('close-col-btn')
.on('click', function(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty and we are not in productions call closeAllModals()
if(!$('.col', _$row).length
&& !_$body.is('.entity-type-node.bundle-page')){
backToFrontPage();
}
})
.on('click', onCloseModal)
);
});
};
function onCloseModal(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty and we are not in productions or entree notice|index call closeAllModals()
if(!$('.col', _$row).length
&& !_$body.is('.entity-type-node.bundle-page')
&& !_$body.is('.entity-type-taxonomy_term.bundle-entrees')){
backToFrontPage();
}
};
// _ _ ___ _ _
// /_\ (_)__ ___ __ | _ ) |___ __| |__ ___
// / _ \ | / _` \ \ / | _ \ / _ \/ _| / /(_-<
@@ -367,37 +399,47 @@
// var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
var edlp_origin = JSON.parse(window.localStorage.getItem('edlp_origin'));
console.log('edlp_origin', edlp_origin);
if(edlp_origin != null && edlp_origin.sys_path){
// var origin_url = window.localStorage.getItem('edlp_origin_url');
// origin_hash is used as viewmode for taxonomy term entrees load (index or notice)
// var origin_hash = window.localStorage.getItem('edlp_origin_hash');
// hash is used as viewmode for taxonomy term entrees load (index or notice)
// and for audio contents (article|transcript)
var view_mode = edlp_origin.hash.replace('#', '');
// // TODO: refactorize with new infos from edlp_origin
if(view_mode){
var $link = $('[href="'+edlp_origin.url+'"][viewmode="'+view_mode+'"]');
var selector = $link.attr('selector') || null;
if(selector){
// create history state
var state = getSysPathState(edlp_origin.sys_path, view_mode);
// open entree tray in case of entree index|notice
// (index or notice will be opened with ajaxLoadContent)
// refactorized with new infos from edlp_origin
// if(view_mode){
if(edlp_origin.entity_type == "taxonomy_term"
&& edlp_origin.entity_bundle == "entrees"
&& view_mode){
// var $link = $('[href="'+edlp_origin.url+'"][viewmode="'+view_mode+'"]');
// var selector = $link.attr('selector') || null;
// record the selector in the state for actions after ajaxContentLoaded
state.selector = 'entree-'+view_mode+'-link-'+edlp_origin.entity_id; // entree-index-link-125
// if(selector){
// in case of entree link (actualy, selector is used only for entries links)
// TODO: use a promise
// TODO: but what if corpus ready before onAjaxLoaded >> use a promise !!
if(_corpus_ready){
_$corpus_canvas.trigger({
type:'open-entree',
tid:$link.attr('tid')
// tid:$link.attr('tid')
tid:edlp_origin.entity_id
});
}else{
// else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
// .is-active class is added by onAjaxLoaded() (when content is loaded)
// but what if corpus ready before onAjaxLoaded >> use a promise !!
$('li.entree[tid="'+$link.attr('tid')+'"] a.term-link').addClass('is-active');
// $('li.entree[tid="'+$link.attr('tid')+'"] a.term-link').addClass('is-active');
$('li.entree[tid="'+edlp_origin.entity_id+'"] a.term-link').addClass('is-active');
}
}
// }
}
// create history state
var state = getSysPathState(edlp_origin.sys_path, view_mode);
// check if audio link
if(edlp_origin.audio_url){
var node = {
@@ -1205,13 +1247,16 @@
// |_||_| \___/_||_\__|_| \__,_\__, \___|
// |___/
function backToFrontPage(pop_state){
console.log('backToFrontPage', pop_state);
closeAllModals();
// assume we are going back to front page
$('body').removeClass().addClass('path-frontpage');
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
// close entrees
_$corpus_canvas.trigger({'type':'close-all-entree'});
if(!pop_state){
if(typeof pop_state == "undefined" || !pop_state){
console.log('backToFrontPage push state');
history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
}
}
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+172 -156
View File
@@ -339,9 +339,12 @@ main[role="main"]{
}
div.taxonomy-term{
>h2{display:none;}
>h2{
// display:none;
@include content_subtitles;
margin: 1em 0 0.5em;
}
>.content{
margin-top: 1em;
}
.field__label{
@include content_titles;
@@ -1537,185 +1540,195 @@ footer{
display: inline-block;
// vertical-align: top;
ul{
margin:0;
white-space: nowrap;
li{
@include oblique-list;
div.item-list{
ul{
margin:0;
white-space: nowrap;
pointer-events: none;
span.oblique-wrapper{
height:120px; // this is needed to respect the height of oblique links :(
display: inline-block;
vertical-align: bottom;
position: relative;
width:1.5em;
}
a.term-link, a.articles-link{
// outline: 1px solid blue;
pointer-events: all;
background-color: #fff;
padding-right: 0.4em;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid #000;
background-color: #000;
margin-right: 0.5em;
transition: background-color 0.1s ease-in-out;
li{
@include oblique-list;
margin:0;
white-space: nowrap;
pointer-events: none;
span.oblique-wrapper{
height:120px; // this is needed to respect the height of oblique links :(
display: inline-block;
vertical-align: bottom;
position: relative;
width:1.5em;
}
&.articles-link{
margin-left: 4em;
text-transform: capitalize;
}
}
.entree-content{
display: inline-block;
// outline: 1px solid green;
width:0;
overflow: hidden;
opacity: 0;
transition: all 300ms ease-in-out;
transition-property: width,opacity;
span.oblique-wrapper:first-of-type{
margin-left: 0.5em;
}
span.oblique-wrapper a{
text-transform: none;
pointer-events: auto;
a.term-link, a.articles-link{
// outline: 1px solid blue;
pointer-events: all;
// background-color: #fff;
background-color: rgba(255,255,255, 0.6);
padding-right: 0.4em;
color:black;
transition: color 0.3s ease-in-out;
&:before{
content: "";
display:inline-block;
$sq:5px;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid #000;
background-color: #000;
margin-right: 0.5em;
transition: background-color 0.1s ease-in-out;
}
&.ajax-loading:before{
@include spining-loader-square;
&.articles-link{
margin-left: 4em;
text-transform: capitalize;
}
}
.term-description{
.entree-content{
display: inline-block;
margin-left: 1.5em;
text-align: left;
width:250px;
word-wrap:break-word;
// word-break:break-all;
hyphens: auto;
white-space: normal;
background-color: $transparent-bg;
padding:0.5em;
padding-bottom:0;
p{
font-size: 0.65em;
margin:0;
// outline: 1px solid green;
width:0;
overflow: hidden;
opacity: 0;
transition: all 300ms ease-in-out;
transition-property: width,opacity;
span.oblique-wrapper:first-of-type{
margin-left: 0.5em;
}
span.oblique-wrapper a{
text-transform: none;
pointer-events: auto;
&:before{
content: "";
display:inline-block;
$sq:5px;
width: $sq; height:$sq;
border: 1px solid #000;
margin-right: 0.5em;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
.term-description{
display: inline-block;
margin-left: 1.5em;
text-align: left;
width:250px;
word-wrap:break-word;
// word-break:break-all;
hyphens: auto;
white-space: normal;
background-color: $transparent-bg;
padding:0.5em;
padding-bottom:0;
p{
font-size: 0.65em;
margin:0;
}
}
}
}
// TODO: replace variable system by attribute color
// a.term-link:before, .entree-content span.oblique-wrapper a:before{
// border-color: attr(color);
// background-color: attr(color);
// }
// TODO: replace variable system by attribute color
// a.term-link:before, .entree-content span.oblique-wrapper a:before{
// border-color: attr(color);
// background-color: attr(color);
// }
&[tid='134']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-134);background-color: var(--e-col-134);}}
&[tid='121']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-121);background-color: var(--e-col-121);}}
&[tid='125']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-125);background-color: var(--e-col-125);}}
&[tid='119']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-119);background-color: var(--e-col-119);}}
&[tid='132']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-132);background-color: var(--e-col-132);}}
&[tid='122']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-122);background-color: var(--e-col-122);}}
&[tid='129']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-129);background-color: var(--e-col-129);}}
&[tid='120']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-120);background-color: var(--e-col-120);}}
&[tid='130']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-130);background-color: var(--e-col-130);}}
&[tid='118']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-118);background-color: var(--e-col-118);}}
&[tid='127']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-127);background-color: var(--e-col-127);}}
&[tid='133']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-133);background-color: var(--e-col-133);}}
&[tid='128']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-128);background-color: var(--e-col-128);}}
&[tid='124']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-124);background-color: var(--e-col-124);}}
&[tid='116']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-116);background-color: var(--e-col-116);}}
&[tid='117']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-117);background-color: var(--e-col-117);}}
&[tid='131']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-131);background-color: var(--e-col-131);}}
&[tid='126']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-126);background-color: var(--e-col-126);}}
&[tid='123']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-123);background-color: var(--e-col-123);}}
&[tid='134']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-134);background-color: var(--e-col-134);}}
&[tid='121']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-121);background-color: var(--e-col-121);}}
&[tid='125']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-125);background-color: var(--e-col-125);}}
&[tid='119']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-119);background-color: var(--e-col-119);}}
&[tid='132']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-132);background-color: var(--e-col-132);}}
&[tid='122']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-122);background-color: var(--e-col-122);}}
&[tid='129']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-129);background-color: var(--e-col-129);}}
&[tid='120']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-120);background-color: var(--e-col-120);}}
&[tid='130']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-130);background-color: var(--e-col-130);}}
&[tid='118']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-118);background-color: var(--e-col-118);}}
&[tid='127']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-127);background-color: var(--e-col-127);}}
&[tid='133']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-133);background-color: var(--e-col-133);}}
&[tid='128']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-128);background-color: var(--e-col-128);}}
&[tid='124']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-124);background-color: var(--e-col-124);}}
&[tid='116']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-116);background-color: var(--e-col-116);}}
&[tid='117']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-117);background-color: var(--e-col-117);}}
&[tid='131']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-131);background-color: var(--e-col-131);}}
&[tid='126']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-126);background-color: var(--e-col-126);}}
&[tid='123']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-123);background-color: var(--e-col-123);}}
// &.highlighted{
// a.term_link{
// color: red;
// }
// }
.entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
// &.highlighted{
// a.term_link{
// color: red;
// }
// }
.entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
a.articles-link:not(:hover):not(.is-active):before{
background-color: #fff!important;
}
&:not(.opened){
a.term-link:not(:hover):not(.highlighted):before{
a.articles-link:not(:hover):not(.is-active):before{
background-color: #fff!important;
}
}
&.opened{
// outline: 1px solid purple;
a.term-link:after {
content: '';
position: absolute;
left: 15px; right:0;
bottom: -3px;
border-bottom: 1px solid grey;
&:not(.opened):not(.highlighted){
a.term-link:not(:hover):before{
background-color: #fff!important;
}
}
.entree-content{
width:350px;
opacity: 1;
&.opened{
// outline: 1px solid purple;
a.term-link:after {
content: '';
position: absolute;
left: 15px; right:0;
bottom: -3px;
border-bottom: 1px solid grey;
}
.entree-content{
width:350px;
opacity: 1;
}
}
// &:not(:first-of-type) .entree-content{display: none;}
}
}
&.opened, &.highlighted{
li:not(.opened):not(.highlighted){
a.term-link{
color:#a1a1a1;
}
}
// &:not(:first-of-type) .entree-content{display: none;}
}
}
}
@@ -1854,6 +1867,9 @@ footer{
}
}
.chutier-icon{
&[action="add"]{
display:none;
}
position:absolute;
top:0.4em; right:0.4em;
}
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+1 -1
View File
@@ -28,7 +28,7 @@ header[role="banner"]{
>.wrapper{
position: relative;
padding:0.5em 0;
border-bottom: 1px solid red;
// border-bottom: 1px solid red;
// TODO: what header height to fit well with player ??
height:70px;
>.region{
sites/all/themes/custom/edlptheme/edlptheme.theme
+1 -1
View File
@@ -69,7 +69,7 @@ function edlptheme_preprocess_edlp_home(&$vars){
$cols = 2;
break;
default:
$cols = 2;
$cols = 3;
};
$node['cols'] = $cols;
}
sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig
+2 -2
View File
@@ -26,10 +26,10 @@
{% endfor %}
<div class="agenda col col-2">
<div class="agenda col col-3">
<div class="wrapper">
{{ agenda }}
</div>
</div>
</div>