created production menu block, styled links, ajaxified links
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user