created production menu block, styled links, ajaxified links

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-02 18:56:08 +01:00
parent 80afea9c7d
commit 55f5d5b2f0
7 changed files with 127 additions and 33 deletions
@@ -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
@@ -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();
};
@@ -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 {
@@ -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();
};
@@ -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;
@@ -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: { }
@@ -1,5 +1,5 @@
uuid: 0f3cb8e8-0a25-4d13-a7a9-d6879d44bfed
langcode: fr
langcode: und
status: true
dependencies: { }
id: productions