From 55f5d5b2f06fa5dbec500d9e7b1545912139bea2 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Fri, 2 Mar 2018 18:56:08 +0100 Subject: [PATCH] created production menu block, styled links, ajaxified links --- .../src/Controller/ProductionsController.php | 2 + .../edlptheme/assets/dist/scripts/main.min.js | 21 ++++--- .../edlptheme/assets/dist/styles/app.min.css | 26 ++++++++ .../custom/edlptheme/assets/scripts/main.js | 21 ++++--- .../custom/edlptheme/assets/styles/app.scss | 59 +++++++++++++------ .../config/sync/block.block.productions.yml | 29 +++++++++ .../config/sync/system.menu.productions.yml | 2 +- 7 files changed, 127 insertions(+), 33 deletions(-) create mode 100644 sites/default/config/sync/block.block.productions.yml diff --git a/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php b/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php index 3f42c1305..f8cb80094 100644 --- a/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php +++ b/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php @@ -80,6 +80,8 @@ class ProductionsController extends ControllerBase { $renderable = $this->toRenderable(); $rendered = render($renderable); + // TODO: add menu production block + $response->setData([ 'test'=>'hello', 'rendered'=> $rendered 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 2a17ebd89..b1e5d687e 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 @@ -62,19 +62,25 @@ edlp_vars = { // TODO: implement history.js function initAjaxLinks(){ console.log('initAjaxLinks'); - $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link'); + $('a', '#block-mainnavigation, #block-footer.menu--footer, #block-productions').addClass('ajax-link'); _$ajaxLinks = $('.ajax-link') .each(function(i,e){ var $this = $(this); + + // avoid already ajaxified links + if($this.is('.ajax-enable')) + return; + var sys_path = $this.attr('data-drupal-link-system-path'); if(sys_path){ // convert node link to edlp_ajax_node module links m = sys_path.match(/^\/?(node\/\d+)$/g); if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]); } + $this.on('click', onClickAjaxLink).addClass('ajax-enable'); }) - .on('click', onClickAjaxLink); + ; }; @@ -103,7 +109,7 @@ edlp_vars = { }; function onAjaxLinkLoaded(data, $link, sys_path){ - console.log('ajax link loaded : data', data); + console.log('ajax link loaded'); _$content_container.html(data.rendered); _$body.removeClass('ajax-loading'); // add body class for currently loaded content @@ -118,10 +124,11 @@ edlp_vars = { $link.removeClass('ajax-loading').addClass('is-active'); initScrollbars(); - console.log(sys_path); - if(sys_path == "productions"){ - window.requestAnimationFrame(initProductions); - } + + if(sys_path == "productions") + initProductions(); + + initAjaxLinks(); }; 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 7cad28a30..08d9e2324 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 @@ -1405,6 +1405,32 @@ footer { font-size: 0.756em; } footer .block-language ul li.is-active a { color: red; } + footer #block-productions ul { + white-space: nowrap; } + footer #block-productions ul li a { + pointer-events: all; + background-color: #fff; + padding-right: 0.4em; } + footer #block-productions ul li a:before { + content: ""; + display: inline-block; + width: 7px; + height: 7px; + border: 1px solid red; + margin-right: 0.5em; } + footer #block-productions ul li a:hover:before { + background-color: red; } + footer #block-productions ul li a.ajax-loading:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; } + +@keyframes rotation { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } footer .block-block-edlp-entrees { display: inline-block; } footer .block-block-edlp-entrees ul { diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index f3de1bc49..f202e5d0f 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -39,19 +39,25 @@ // TODO: implement history.js function initAjaxLinks(){ console.log('initAjaxLinks'); - $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link'); + $('a', '#block-mainnavigation, #block-footer.menu--footer, #block-productions').addClass('ajax-link'); _$ajaxLinks = $('.ajax-link') .each(function(i,e){ var $this = $(this); + + // avoid already ajaxified links + if($this.is('.ajax-enable')) + return; + var sys_path = $this.attr('data-drupal-link-system-path'); if(sys_path){ // convert node link to edlp_ajax_node module links m = sys_path.match(/^\/?(node\/\d+)$/g); if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]); } + $this.on('click', onClickAjaxLink).addClass('ajax-enable'); }) - .on('click', onClickAjaxLink); + ; }; @@ -80,7 +86,7 @@ }; function onAjaxLinkLoaded(data, $link, sys_path){ - console.log('ajax link loaded : data', data); + console.log('ajax link loaded'); _$content_container.html(data.rendered); _$body.removeClass('ajax-loading'); // add body class for currently loaded content @@ -95,10 +101,11 @@ $link.removeClass('ajax-loading').addClass('is-active'); initScrollbars(); - console.log(sys_path); - if(sys_path == "productions"){ - window.requestAnimationFrame(initProductions); - } + + if(sys_path == "productions") + initProductions(); + + initAjaxLinks(); }; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 892630d23..48c37f508 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -25,6 +25,14 @@ header[role="banner"]{ pointer-events: all; } +@mixin spining-loader-square{ + @keyframes rotation { + from {transform: rotate(0deg);} + to {transform: rotate(359deg);} + } + animation: rotation 2s infinite linear; +} + #block-edlptheme-branding{ display: inline-block; h1{ @@ -91,11 +99,7 @@ header[role="banner"]{ margin-right: 0.3em; } &.ajax-loading:before{ - @keyframes rotation { - from {transform: rotate(0deg);} - to {transform: rotate(359deg);} - } - animation: rotation 2s infinite linear; + @include spining-loader-square; } &.is-active:before, &:hover:before{ @@ -228,9 +232,7 @@ body.path-productions{ >.wrapper{ margin-bottom: 1em; padding:0; - >*{ - padding:0; - } + >*{padding:0;} article.node{ .field--name-field-visuel{ @@ -307,16 +309,9 @@ footer{ // outline: 1px dotted purple; // position: relative; } - .region-footer-left{ - text-align: left; - } - .region-footer-center{ - text-align: center; - } - .region-footer-right{ - text-align: right; - min-width: 30px; - } + .region-footer-left{text-align: left;} + .region-footer-center{text-align: center;} + .region-footer-right{text-align: right;min-width: 30px;} nav.block-menu{ display: inline-block; @@ -362,6 +357,34 @@ footer{ } } + #block-productions{ + ul{ + white-space: nowrap; + li{ + a{ + // 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 red; + margin-right: 0.5em; + } + &:hover:before{ + background-color: red; + } + &.ajax-loading:before{ + @include spining-loader-square; + } + } + } + } + } + .block-block-edlp-entrees{ display: inline-block; // vertical-align: top; diff --git a/sites/default/config/sync/block.block.productions.yml b/sites/default/config/sync/block.block.productions.yml new file mode 100644 index 000000000..4f0ad5e6f --- /dev/null +++ b/sites/default/config/sync/block.block.productions.yml @@ -0,0 +1,29 @@ +uuid: e389b1e8-b7f4-4d95-b994-aec2084b6404 +langcode: fr +status: true +dependencies: + config: + - system.menu.productions + module: + - system + theme: + - edlptheme +id: productions +theme: edlptheme +region: footer_center +weight: 0 +provider: null +plugin: 'system_menu_block:productions' +settings: + id: 'system_menu_block:productions' + label: Productions + provider: system + label_display: '0' + level: 1 + depth: 1 +visibility: + request_path: + id: request_path + pages: "/productions\r\n/productions/*" + negate: false + context_mapping: { } diff --git a/sites/default/config/sync/system.menu.productions.yml b/sites/default/config/sync/system.menu.productions.yml index bd6983e8e..ea3f1c262 100644 --- a/sites/default/config/sync/system.menu.productions.yml +++ b/sites/default/config/sync/system.menu.productions.yml @@ -1,5 +1,5 @@ uuid: 0f3cb8e8-0a25-4d13-a7a9-d6879d44bfed -langcode: fr +langcode: und status: true dependencies: { } id: productions