diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js index 822ffb6e6..67bf166cb 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js @@ -20,8 +20,9 @@ (function($) { EdlpCorpus = function(){ + var _activated = false; var _$container = $('body'); - var _$canvas = $('').appendTo(_$container); + var _$canvas = $('').appendTo(_$container); var _canvas = _$canvas[0]; var _ctx = _canvas.getContext('2d'); var _canvas_props = { @@ -31,7 +32,7 @@ 'margin_left':0 }; var _physics = new Physics(); - // var _stage = new createjs.Stage('edlp-map'); + // var _stage = new createjs.Stage('corpus-map'); var _nodes = []; // var _particules = []; var _base_radius = 3; // nodes radius (real radius, not diametre) @@ -60,7 +61,11 @@ console.log("EdlpCorpus initMap()"); // console.log('_physics',_physics); initCanvas(); - loadCorpus(); + if(_activated){ + loadCorpus(); + }else{ + _$canvas.addClass('de-activated'); + } }; // ______ diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css index 9480053b9..dfb0ca670 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css @@ -1,7 +1,9 @@ -canvas#edlp-map { +canvas#corpus-map { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; z-index: 0; } + canvas#corpus-map.de-activated { + background-color: #f4f4f4; } diff --git a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js index 822ffb6e6..67bf166cb 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -20,8 +20,9 @@ (function($) { EdlpCorpus = function(){ + var _activated = false; var _$container = $('body'); - var _$canvas = $('').appendTo(_$container); + var _$canvas = $('').appendTo(_$container); var _canvas = _$canvas[0]; var _ctx = _canvas.getContext('2d'); var _canvas_props = { @@ -31,7 +32,7 @@ 'margin_left':0 }; var _physics = new Physics(); - // var _stage = new createjs.Stage('edlp-map'); + // var _stage = new createjs.Stage('corpus-map'); var _nodes = []; // var _particules = []; var _base_radius = 3; // nodes radius (real radius, not diametre) @@ -60,7 +61,11 @@ console.log("EdlpCorpus initMap()"); // console.log('_physics',_physics); initCanvas(); - loadCorpus(); + if(_activated){ + loadCorpus(); + }else{ + _$canvas.addClass('de-activated'); + } }; // ______ diff --git a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss index 2a4fc23d6..269a3c572 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss +++ b/sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss @@ -6,8 +6,10 @@ // @Last modified time: 20-12-2017 // @License: GPL-V3 -canvas#edlp-map{ - // background-color: grey; +canvas#corpus-map{ + &.de-activated{ + background-color: rgb(244, 244, 244); + } position: absolute; box-sizing: border-box; top:0; left:0; 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 7a101ade0..3c50c4a87 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 @@ -25,37 +25,34 @@ edlp_vars = { EdlpTheme = function(){ - var _is_front = $('body').is('.path-frontpage'); + var _$body = $('body'); + var _is_front = _$body.is('.path-frontpage'); var _$corpus_map; var _$content_container = $('.layout-container>main>.layout-content'); function init(){ console.log("EdlpTheme init()"); - // if(_is_front) initFront(); - - $('body').on('corpus-map-ready', onCorpusMapReady); - + _$body.on('corpus-map-ready', onCorpusMapReady); initScrollbars(); - initAjaxLinks(); }; - - - // function initFront(){ - // console.log('theme : initFront'); - // }; - + // ___ _ _ ___ + // / __| __ _ _ ___| | | _ ) __ _ _ _ ___ + // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-< + // |___/\__|_| \___/_|_|___/\__,_|_| /__/ function initScrollbars(){ + console.log("initScrollbars"); $('.os-scroll').overlayScrollbars({ overflowBehavior:{x:'h',y:'scroll'} }); - // $('.row .col>*', 'main[role="main"]').overlayScrollbars({ - // overflowBehavior:{x:'h',y:'scroll'} - // }); }; - // ajax + // _ _ + // /_\ (_)__ ___ __ + // / _ \ | / _` \ \ / + // /_/ \_\/ \__,_/_\_\ + // |__/ function initAjaxLinks(){ console.log('initAjaxLinks'); $('a', '#block-mainnavigation').on('click', onClickAjaxLink); @@ -64,22 +61,29 @@ edlp_vars = { function onClickAjaxLink(e){ e.preventDefault(); // TODO: drupal settings not defined on NOT front page - var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax'; - $.getJSON(path, {}, onAjaxLinkLoaded); + var sys_path = $(this).attr('data-drupal-link-system-path'); + var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax'; + closeAllModals(); + _$body.addClass('ajax-loading'); + $.getJSON(path, {}, function(data){ + onAjaxLinkLoaded(data, sys_path); + }); return false; }; - function onAjaxLinkLoaded(data){ + function onAjaxLinkLoaded(data, sys_path){ console.log('ajax link loaded : data', data); - $('main[role="main"] .layout-content').html(data.rendered); + _$content_container.html(data.rendered); + _$body.removeClass().addClass('path-'+sys_path); + _$body.removeClass('ajax-loading'); initScrollbars(); }; // corpus function onCorpusMapReady(e){ console.log('theme : onCorpusReady'); - _$corpus_map = $('canvas#edlp-map'); + _$corpus_map = $('canvas#corpus-map'); _$corpus_map.on('corpus-cliked-on-map', function(e) { console.log('theme : corpus-cliked-on-map'); closeAllModals(); @@ -89,7 +93,7 @@ edlp_vars = { //modals function closeAllModals(){ console.log('theme : closeAllModals'); - // TODO: animate the remove + // TODO: animate the remove _$content_container.html(''); }; 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 41a0cc957..465a0bff4 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 @@ -1127,6 +1127,9 @@ footer[role="contentinfo"] { bottom: 0; width: 100%; } +.os-scroll { + height: 100%; } + .layout-container { pointer-events: none; } @@ -1211,6 +1214,7 @@ main[role="main"] .layout-content { overflow: hidden; } main[role="main"] .layout-content .row .col { pointer-events: all; + max-height: 100%; position: relative; } main[role="main"] .layout-content .row .col > .wrapper { position: relative; @@ -1241,7 +1245,22 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first padding: 0; list-style: none; } -body.path-agenda main .col > .wrapper { +body.ajax-loading main[role="main"]:before { + content: ""; + display: block; + position: absolute; + width: 50px; + height: 50px; + top: calc(50% - 25px); + left: calc(50% - 25px); + background-color: white; + background-image: url(../../img/edlp-loader.svg); + background-size: 50%; + background-repeat: no-repeat; + background-position: center; + border-radius: 25px; } + +body.path-agenda main .col, body.path-agenda main .col > .wrapper { height: 100%; } #agenda { diff --git a/sites/all/themes/custom/edlptheme/assets/img/edlp-loader.svg b/sites/all/themes/custom/edlptheme/assets/img/edlp-loader.svg new file mode 100644 index 000000000..43efc4068 --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/img/edlp-loader.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index b27ae041d..af0d4ab4d 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -2,37 +2,34 @@ EdlpTheme = function(){ - var _is_front = $('body').is('.path-frontpage'); + var _$body = $('body'); + var _is_front = _$body.is('.path-frontpage'); var _$corpus_map; var _$content_container = $('.layout-container>main>.layout-content'); function init(){ console.log("EdlpTheme init()"); - // if(_is_front) initFront(); - - $('body').on('corpus-map-ready', onCorpusMapReady); - + _$body.on('corpus-map-ready', onCorpusMapReady); initScrollbars(); - initAjaxLinks(); }; - - - // function initFront(){ - // console.log('theme : initFront'); - // }; - + // ___ _ _ ___ + // / __| __ _ _ ___| | | _ ) __ _ _ _ ___ + // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-< + // |___/\__|_| \___/_|_|___/\__,_|_| /__/ function initScrollbars(){ + console.log("initScrollbars"); $('.os-scroll').overlayScrollbars({ overflowBehavior:{x:'h',y:'scroll'} }); - // $('.row .col>*', 'main[role="main"]').overlayScrollbars({ - // overflowBehavior:{x:'h',y:'scroll'} - // }); }; - // ajax + // _ _ + // /_\ (_)__ ___ __ + // / _ \ | / _` \ \ / + // /_/ \_\/ \__,_/_\_\ + // |__/ function initAjaxLinks(){ console.log('initAjaxLinks'); $('a', '#block-mainnavigation').on('click', onClickAjaxLink); @@ -41,22 +38,29 @@ function onClickAjaxLink(e){ e.preventDefault(); // TODO: drupal settings not defined on NOT front page - var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax'; - $.getJSON(path, {}, onAjaxLinkLoaded); + var sys_path = $(this).attr('data-drupal-link-system-path'); + var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax'; + closeAllModals(); + _$body.addClass('ajax-loading'); + $.getJSON(path, {}, function(data){ + onAjaxLinkLoaded(data, sys_path); + }); return false; }; - function onAjaxLinkLoaded(data){ + function onAjaxLinkLoaded(data, sys_path){ console.log('ajax link loaded : data', data); - $('main[role="main"] .layout-content').html(data.rendered); + _$content_container.html(data.rendered); + _$body.removeClass().addClass('path-'+sys_path); + _$body.removeClass('ajax-loading'); initScrollbars(); }; // corpus function onCorpusMapReady(e){ console.log('theme : onCorpusReady'); - _$corpus_map = $('canvas#edlp-map'); + _$corpus_map = $('canvas#corpus-map'); _$corpus_map.on('corpus-cliked-on-map', function(e) { console.log('theme : corpus-cliked-on-map'); closeAllModals(); @@ -66,7 +70,7 @@ //modals function closeAllModals(){ console.log('theme : closeAllModals'); - // TODO: animate the remove + // TODO: animate the remove _$content_container.html(''); }; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index eaec93e47..a77ace8cd 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -110,7 +110,7 @@ main[role="main"]{ overflow: hidden; .col{ pointer-events:all; - // height: 100%; + max-height: 100%; position: relative; &>.wrapper{ position: relative; @@ -118,7 +118,7 @@ main[role="main"]{ border-top: 1px solid red; border-bottom: 1px solid red; background-color: $transparent-bg; - max-height: 100%; + max-height: 100%; // this is not working :( padding:0 0 1em; &>*{ padding:0 1em; @@ -140,9 +140,25 @@ main[role="main"]{ margin:0; padding:0; list-style: none; } + body.ajax-loading &:before{ + content:""; + display: block; + position: absolute; + $s:50px; + width:$s; height:$s; + top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2}); + background-color: white; + background-image: url(../../img/edlp-loader.svg); + background-size: 50%; + background-repeat: no-repeat; + background-position: center; + border-radius: $s/2; + } } -body.path-agenda main .col>.wrapper{ - height:100%; +body.path-agenda main .col{ + &, &>.wrapper{ + height:100%; + } } #agenda{ position: relative; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss index ba6315aca..8722eb4f6 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss @@ -7,6 +7,7 @@ body, html{ font-style: normal; margin:0; padding:0; + // background-color: rgb(219, 219, 219); } div.layout-container{ @@ -48,6 +49,10 @@ footer[role="contentinfo"]{ width:100%; } -canvas#edlp-map{ +canvas#corpus-map{ // outline: 1px solid grey; } + +.os-scroll{ + height: 100%; +} diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig index 69372c57b..584c110ce 100644 --- a/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig +++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig @@ -1,5 +1,5 @@
-
+