added on/off switch to corpus-map, added loader svg for ajax (remains to animate it
This commit is contained in:
Bachir Soussi Chiadmi
@@ -20,8 +20,9 @@
|
||||
(function($) {
|
||||
|
||||
EdlpCorpus = function(){
|
||||
var _activated = false;
|
||||
var _$container = $('body');
|
||||
var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
|
||||
var _$canvas = $('<canvas id="corpus-map">').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');
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -20,8 +20,9 @@
|
||||
(function($) {
|
||||
|
||||
EdlpCorpus = function(){
|
||||
var _activated = false;
|
||||
var _$container = $('body');
|
||||
var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
|
||||
var _$canvas = $('<canvas id="corpus-map">').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');
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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('');
|
||||
};
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<?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#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
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"
|
||||
height="40"
|
||||
width="40">
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:path-effect
|
||||
effect="interpolate_points"
|
||||
id="path-effect866"
|
||||
is_visible="true"
|
||||
interpolator_type="CentripetalCatmullRom" />
|
||||
</defs>
|
||||
<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" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-286.41665)">
|
||||
<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"
|
||||
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" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -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('');
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="row">
|
||||
<div class="col small-col-12 med-col-6 large-col-3 ">
|
||||
<div class="col small-col-12 med-col-12 large-col-8 ">
|
||||
<div class="wrapper">
|
||||
<div id="agenda">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user