added animation to edlp loader, created edlp_ajax_node module
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,11 @@
|
||||
# @Author: Bachir Soussi Chiadmi <bach>
|
||||
# @Email: bachir@figureslibres.io
|
||||
# @Filename: edlp_ajax_node.info.yml
|
||||
# @License: GPL-V3
|
||||
|
||||
|
||||
name: Edlp Ajax Node
|
||||
type: module
|
||||
description: Manage ajax node loading for edlp d8.
|
||||
core: 8.x
|
||||
package: Edlp
|
||||
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
# @Author: Bachir Soussi Chiadmi <bach>
|
||||
# @Email: bachir@figureslibres.io
|
||||
# @Filename: edlp_ajax_node.module
|
||||
# @License: GPL-V3
|
||||
|
||||
/**
|
||||
* Implements hook_theme().
|
||||
*/
|
||||
function edlp_ajax_node_theme($existing, $type, $theme, $path) {
|
||||
// @see https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-from-custom-module
|
||||
return array(
|
||||
'edlp_ajax_node' => array(
|
||||
'file' => 'includes/edlp_ajax_node.inc',
|
||||
'variables' => array(
|
||||
'node' => NULL
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
# @Author: Bachir Soussi Chiadmi <bach>
|
||||
# @Date: 13-12-2017
|
||||
# @Email: bachir@figureslibres.io
|
||||
# @Filename: edlp_corpus.routing.yml
|
||||
# @Last modified by: bach
|
||||
# @Last modified time: 20-12-2017
|
||||
# @License: GPL-V3
|
||||
|
||||
edlp_ajax_node.node:
|
||||
path: '/edlp/node/{nid}'
|
||||
defaults:
|
||||
_controller: '\Drupal\edlp_ajax_node\Controller\EdlpAjaxNodeController::node'
|
||||
_title: 'Node'
|
||||
requirements:
|
||||
_permission: 'access content'
|
||||
|
||||
edlp_ajax_node.ajaxnode:
|
||||
path: '/edlp/node/{nid}/ajax'
|
||||
defaults:
|
||||
_controller: '\Drupal\edlp_ajax_node\Controller\EdlpAjaxNodeController::nodejson'
|
||||
_title: 'AjaxNode'
|
||||
requirements:
|
||||
_permission: 'access content'
|
||||
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
// use Drupal\Core\Url;
|
||||
|
||||
function template_preprocess_edlp_ajax_node(&$vars){
|
||||
// dpm($vars);
|
||||
/*
|
||||
@see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
|
||||
*/
|
||||
$view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
|
||||
$vars['node'] = $view_builder->view($vars['node'], 'default');
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\edlp_ajax_node\Controller;
|
||||
|
||||
use Drupal\Core\Controller\ControllerBase;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
|
||||
|
||||
class EdlpAjaxNodeController extends ControllerBase {
|
||||
|
||||
private function query() {
|
||||
$this->node = entity_load('node', $this->nid);
|
||||
}
|
||||
|
||||
private function toRenderable(){
|
||||
$this->query();
|
||||
// dpm($this->future_nodes);
|
||||
return array(
|
||||
"#theme"=>'edlp_ajax_node',
|
||||
'#node' => $this->node,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display node as a page.
|
||||
*
|
||||
* @return renderable array
|
||||
*/
|
||||
public function node($nid) {
|
||||
$this->nid = $nid;
|
||||
return $this->toRenderable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get node as json through ajax.
|
||||
*
|
||||
* @return json
|
||||
*/
|
||||
public function nodejson($nid) {
|
||||
$this->nid = $nid;
|
||||
$response = new JsonResponse();
|
||||
$renderable = $this->toRenderable();
|
||||
$rendered = render($renderable);
|
||||
|
||||
$response->setData([
|
||||
'test'=>'hello edlp ajax node',
|
||||
'nid' => $this->nid,
|
||||
'rendered'=> $rendered
|
||||
]);
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{{ node }}
|
||||
@@ -29,6 +29,7 @@ edlp_vars = {
|
||||
var _is_front = _$body.is('.path-frontpage');
|
||||
var _$corpus_map;
|
||||
var _$content_container = $('.layout-container>main>.layout-content');
|
||||
var _$ajaxLinks;
|
||||
|
||||
function init(){
|
||||
console.log("EdlpTheme init()");
|
||||
@@ -53,30 +54,59 @@ edlp_vars = {
|
||||
// / _ \ | / _` \ \ /
|
||||
// /_/ \_\/ \__,_/_\_\
|
||||
// |__/
|
||||
|
||||
// TODO: add url hash nav
|
||||
// TODO: implement history.js
|
||||
function initAjaxLinks(){
|
||||
console.log('initAjaxLinks');
|
||||
$('a', '#block-mainnavigation').on('click', onClickAjaxLink);
|
||||
$('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
|
||||
|
||||
_$ajaxLinks = $('.ajax-link')
|
||||
.each(function(i,e){
|
||||
var $this = $(this);
|
||||
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]);
|
||||
}
|
||||
})
|
||||
.on('click', onClickAjaxLink);
|
||||
;
|
||||
};
|
||||
|
||||
function onClickAjaxLink(e){
|
||||
e.preventDefault();
|
||||
// TODO: drupal settings not defined on NOT front page
|
||||
var $link = $(this);
|
||||
|
||||
if($link.is('.is-active'))
|
||||
return false;
|
||||
|
||||
var sys_path = $(this).attr('data-drupal-link-system-path');
|
||||
if(sys_path == '<front>'){
|
||||
closeAllModals();
|
||||
return false;
|
||||
}
|
||||
|
||||
// TODO: drupal settings not defined on NOT front page
|
||||
var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
|
||||
closeAllModals();
|
||||
_$body.addClass('ajax-loading');
|
||||
$link.addClass('ajax-loading');
|
||||
$.getJSON(path, {}, function(data){
|
||||
onAjaxLinkLoaded(data, sys_path);
|
||||
onAjaxLinkLoaded(data, $link, sys_path);
|
||||
});
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
function onAjaxLinkLoaded(data, sys_path){
|
||||
function onAjaxLinkLoaded(data, $link, sys_path){
|
||||
console.log('ajax link loaded : data', data);
|
||||
_$content_container.html(data.rendered);
|
||||
_$body.removeClass().addClass('path-'+sys_path);
|
||||
_$body.removeClass('ajax-loading');
|
||||
_$body.removeClass().addClass('path-'+sys_path);
|
||||
_$ajaxLinks.removeClass('is-active');
|
||||
$link.removeClass('ajax-loading').addClass('is-active');
|
||||
initScrollbars();
|
||||
};
|
||||
|
||||
@@ -95,6 +125,9 @@ edlp_vars = {
|
||||
console.log('theme : closeAllModals');
|
||||
// TODO: animate the remove
|
||||
_$content_container.html('');
|
||||
_$ajaxLinks.removeClass('is-active');
|
||||
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
|
||||
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
@@ -1202,6 +1202,25 @@ header[role="banner"] {
|
||||
height: 0.6em;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.3em; }
|
||||
#block-mainnavigation ul li a.ajax-loading:before {
|
||||
-webkit-animation: rotation 2s infinite linear;
|
||||
animation: rotation 2s infinite linear; }
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg); } }
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg); } }
|
||||
#block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before {
|
||||
border-color: red;
|
||||
background-color: red; }
|
||||
@@ -1249,16 +1268,16 @@ body.ajax-loading main[role="main"]:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: calc(50% - 25px);
|
||||
left: calc(50% - 25px);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
background-color: white;
|
||||
background-image: url(../../img/edlp-loader.svg);
|
||||
background-image: url(../../img/edlp-loader-anim.svg);
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 25px; }
|
||||
border-radius: 30px; }
|
||||
|
||||
body.path-agenda main .col, body.path-agenda main .col > .wrapper {
|
||||
height: 100%; }
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
fill="#ffffff"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect
|
||||
id="bg"
|
||||
x="0" y="0"
|
||||
width="40" height="40"
|
||||
>
|
||||
</rect>
|
||||
<rect
|
||||
id="blak-line"
|
||||
x="0" y="19"
|
||||
width="50" height="2"
|
||||
fill="#000000"
|
||||
transform="rotate(315 22 26)">
|
||||
</rect>
|
||||
<rect
|
||||
id="red-line"
|
||||
x="11" y="18"
|
||||
width="18" height="4"
|
||||
fill="#ff0004"
|
||||
transform="rotate(45 20 20)">
|
||||
</rect>
|
||||
<animate
|
||||
xlink:href="#red-line"
|
||||
attributeName="y"
|
||||
from="1"
|
||||
to="1"
|
||||
dur="1.5s"
|
||||
values="1;18;35;18;1"
|
||||
keyTimes="0;0.25;0.5;0.75;1"
|
||||
keySplines=".42 0 1 1;
|
||||
0 0 .59 1;
|
||||
.42 0 1 1"
|
||||
fill="freeze"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
id="red-anim-one"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 906 B |
@@ -1,6 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
@@ -9,45 +7,35 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
sodipodi:docname="edlp-loader.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 10.583333 10.583334"
|
||||
width="40"
|
||||
height="40"
|
||||
width="40">
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:path-effect
|
||||
effect="interpolate_points"
|
||||
id="path-effect866"
|
||||
is_visible="true"
|
||||
interpolator_type="CentripetalCatmullRom" />
|
||||
</defs>
|
||||
viewBox="0 0 10.583333 10.583334"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
sodipodi:docname="edlp-loader.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||
<sodipodi:namedview
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-height="1025"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:snap-bbox-midpoints="true"
|
||||
inkscape:snap-bbox-edge-midpoints="true"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:bbox-paths="true"
|
||||
inkscape:snap-bbox="true"
|
||||
units="px"
|
||||
showgrid="false"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:cy="12.514606"
|
||||
inkscape:cx="17.614095"
|
||||
inkscape:zoom="16"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
borderopacity="1.0"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff"
|
||||
id="base" />
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1025"
|
||||
id="namedview941"
|
||||
showgrid="false"
|
||||
inkscape:zoom="22.5"
|
||||
inkscape:cx="20"
|
||||
inkscape:cy="20"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg8" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
@@ -61,19 +49,20 @@
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-286.41665)">
|
||||
transform="translate(0,-286.41665)"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0.28364121,296.71886 C 10.346939,286.74502 10.346939,286.74502 10.346939,286.74502"
|
||||
id="path815"
|
||||
style="fill:#000000;fill-opacity:1;"
|
||||
d="m 10.160156,286.55664 c -3.3541666,3.32487 -6.7083332,6.64974 -10.06249975,9.97461 0.13135558,0.1048 0.26232471,0.31854 0.3939252,0.35431 3.34720715,-3.31732 6.69441435,-6.63465 10.04162155,-9.95197 -0.124349,-0.12565 -0.248698,-0.2513 -0.373047,-0.37695 z"
|
||||
id="black-line"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#ff0004;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;image-rendering:optimizeSpeed"
|
||||
d="m 3.636975,290.03857 c 3.3566295,3.38673 3.3566295,3.38673 3.3566295,3.38673"
|
||||
id="path815-9"
|
||||
inkscape:connector-curvature="0" />
|
||||
style="fill:#ff0004;fill-opacity:1;"
|
||||
d="m 4.0136719,289.66602 c -0.250651,0.24805 -0.5013021,0.49609 -0.7519531,0.74414 1.1184896,1.12891 2.2369791,2.25781 3.3554687,3.38672 0.250651,-0.24805 0.5013021,-0.4961 0.7519531,-0.74415 -1.1184896,-1.1289 -2.2369791,-2.25781 -3.3554687,-3.38671 z"
|
||||
id="red-line"
|
||||
inkscape:connector-curvature="0" >
|
||||
<!-- <animateMotion path="H 20 Z" dur="2s" repeatCount="indefinite" /> -->
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.4 KiB |
@@ -6,6 +6,7 @@
|
||||
var _is_front = _$body.is('.path-frontpage');
|
||||
var _$corpus_map;
|
||||
var _$content_container = $('.layout-container>main>.layout-content');
|
||||
var _$ajaxLinks;
|
||||
|
||||
function init(){
|
||||
console.log("EdlpTheme init()");
|
||||
@@ -30,30 +31,59 @@
|
||||
// / _ \ | / _` \ \ /
|
||||
// /_/ \_\/ \__,_/_\_\
|
||||
// |__/
|
||||
|
||||
// TODO: add url hash nav
|
||||
// TODO: implement history.js
|
||||
function initAjaxLinks(){
|
||||
console.log('initAjaxLinks');
|
||||
$('a', '#block-mainnavigation').on('click', onClickAjaxLink);
|
||||
$('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
|
||||
|
||||
_$ajaxLinks = $('.ajax-link')
|
||||
.each(function(i,e){
|
||||
var $this = $(this);
|
||||
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]);
|
||||
}
|
||||
})
|
||||
.on('click', onClickAjaxLink);
|
||||
;
|
||||
};
|
||||
|
||||
function onClickAjaxLink(e){
|
||||
e.preventDefault();
|
||||
// TODO: drupal settings not defined on NOT front page
|
||||
var $link = $(this);
|
||||
|
||||
if($link.is('.is-active'))
|
||||
return false;
|
||||
|
||||
var sys_path = $(this).attr('data-drupal-link-system-path');
|
||||
if(sys_path == '<front>'){
|
||||
closeAllModals();
|
||||
return false;
|
||||
}
|
||||
|
||||
// TODO: drupal settings not defined on NOT front page
|
||||
var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
|
||||
closeAllModals();
|
||||
_$body.addClass('ajax-loading');
|
||||
$link.addClass('ajax-loading');
|
||||
$.getJSON(path, {}, function(data){
|
||||
onAjaxLinkLoaded(data, sys_path);
|
||||
onAjaxLinkLoaded(data, $link, sys_path);
|
||||
});
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
function onAjaxLinkLoaded(data, sys_path){
|
||||
function onAjaxLinkLoaded(data, $link, sys_path){
|
||||
console.log('ajax link loaded : data', data);
|
||||
_$content_container.html(data.rendered);
|
||||
_$body.removeClass().addClass('path-'+sys_path);
|
||||
_$body.removeClass('ajax-loading');
|
||||
_$body.removeClass().addClass('path-'+sys_path);
|
||||
_$ajaxLinks.removeClass('is-active');
|
||||
$link.removeClass('ajax-loading').addClass('is-active');
|
||||
initScrollbars();
|
||||
};
|
||||
|
||||
@@ -72,6 +102,9 @@
|
||||
console.log('theme : closeAllModals');
|
||||
// TODO: animate the remove
|
||||
_$content_container.html('');
|
||||
_$ajaxLinks.removeClass('is-active');
|
||||
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
|
||||
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
@@ -90,6 +90,13 @@ header[role="banner"]{
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
&.ajax-loading:before{
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
&.is-active:before,
|
||||
&:hover:before{
|
||||
border-color: red;
|
||||
@@ -144,11 +151,11 @@ main[role="main"]{
|
||||
content:"";
|
||||
display: block;
|
||||
position: absolute;
|
||||
$s:50px;
|
||||
$s:60px;
|
||||
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-image: url(../../img/edlp-loader-anim.svg);
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="row">
|
||||
<div class="col small-col-12 med-col-12 large-col-8 ">
|
||||
<div class="wrapper">
|
||||
{{ node }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user