You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
8.8 KiB
299 lines
8.8 KiB
{#
|
|
/**
|
|
* @file
|
|
* Theme override to display a single page.
|
|
*
|
|
* The doctype, html, head and body tags are not in this template. Instead they
|
|
* can be found in the html.html.twig template in this directory.
|
|
*
|
|
* Available variables:
|
|
*
|
|
* General utility variables:
|
|
* - base_path: The base URL path of the Drupal installation. Will usually be
|
|
* "/" unless you have installed Drupal in a sub-directory.
|
|
* - is_front: A flag indicating if the current page is the front page.
|
|
* - logged_in: A flag indicating if the user is registered and signed in.
|
|
* - is_admin: A flag indicating if the user has permission to access
|
|
* administration pages.
|
|
*
|
|
* Site identity:
|
|
* - front_page: The URL of the front page. Use this instead of base_path when
|
|
* linking to the front page. This includes the language domain or prefix.
|
|
*
|
|
* Page content (in order of occurrence in the default page.html.twig):
|
|
* - node: Fully loaded node, if there is an automatically-loaded node
|
|
* associated with the page and the node ID is the second argument in the
|
|
* page's path (e.g. node/12345 and node/12345/revisions, but not
|
|
* comment/reply/12345).
|
|
*
|
|
* Regions:
|
|
* - page.header: Items for the header region.
|
|
* - page.primary_menu: Items for the primary menu region.
|
|
* - page.secondary_menu: Items for the secondary menu region.
|
|
* - page.highlighted: Items for the highlighted content region.
|
|
* - page.help: Dynamic help text, mostly for admin pages.
|
|
* - page.content: The main content of the current page.
|
|
* - page.sidebar_first: Items for the first sidebar.
|
|
* - page.sidebar_second: Items for the second sidebar.
|
|
* - page.footer: Items for the footer region.
|
|
* - page.breadcrumb: Items for the breadcrumb region.
|
|
*
|
|
* @see template_preprocess_page()
|
|
* @see html.html.twig
|
|
*/
|
|
#}
|
|
<!-- ============================================================== -->
|
|
<!-- Topbar header - style you can find in pages.scss -->
|
|
<!-- ============================================================== -->
|
|
{% include '@pleiadebv/templates/layout/parts/header.html.twig' %}
|
|
<!-- ============================================================== -->
|
|
<!-- End Topbar header -->
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
{% include '@pleiadebv/templates/layout/parts/left-sidebar.html.twig' %}
|
|
<!-- ============================================================== -->
|
|
<!-- End Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Page wrapper -->
|
|
<!-- ============================================================== -->
|
|
<div class="page-wrapper" >
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<!-- Géré par le block breadcrumbs natif Drupal + module Easy Breadcrumbs -->
|
|
<div class="page-breadcrumb">
|
|
<div class="row">
|
|
<div class="col-md-12 align-self-center">
|
|
<div class="d-flex align-items-center">
|
|
{# <nav aria-label="breadcrumb"> #}
|
|
{{ page.breadcrumb }}
|
|
{# </nav> #}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Container fluid -->
|
|
<!-- ============================================================== -->
|
|
<div class="container-fluid">
|
|
{% if node.nid.value == '46' %}
|
|
<style>
|
|
|
|
.line {
|
|
width:100px;
|
|
height:1px;
|
|
margin:20px auto 40px auto;
|
|
border-bottom:1px solid white;
|
|
}
|
|
|
|
img {
|
|
width:100%;
|
|
display:block;
|
|
}
|
|
|
|
|
|
#before-after-slider {
|
|
width:100%;
|
|
position:relative;
|
|
overflow:hidden;
|
|
border:3px solid white;
|
|
}
|
|
|
|
#after-image {
|
|
display:block
|
|
}
|
|
|
|
#before-image {
|
|
position:absolute;
|
|
height:100%;
|
|
width:50%;
|
|
top:0;
|
|
left:0;
|
|
overflow:hidden;
|
|
z-index:2;
|
|
}
|
|
|
|
#resizer {
|
|
position:absolute;
|
|
display:flex;
|
|
align-items:center;
|
|
z-index:5;
|
|
top:0;
|
|
left:50%;
|
|
height:100%;
|
|
width:4px;
|
|
background:white;
|
|
/*Stop vertical scrolling on touch*/
|
|
-ms-touch-action: pan-y;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
#resizer:after {
|
|
background:linear-gradient(62deg,#c93072 5%,#3365c0);
|
|
font-family: "Font Awesome 5 Free";
|
|
content:'\f337';
|
|
font-weight:900;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
color:white;
|
|
position:absolute;
|
|
margin: 0 0 0 -22px;
|
|
width:40px;
|
|
height:40px;
|
|
border-radius:50%;
|
|
border:3px solid white;
|
|
|
|
}
|
|
|
|
@media (max-width:767px) {
|
|
.container {
|
|
width:100%;
|
|
padding:0 20px
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
<div id="before-after-slider">
|
|
<div id="before-image">
|
|
<img src="sites/default/files/default_images/pleiade_before.png" alt="before"/>
|
|
</div>
|
|
|
|
<div id="after-image">
|
|
<img src="sites/default/files/default_images/pleiade_after.png" alt="After"/>
|
|
</div>
|
|
|
|
<div id="resizer"></div>
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const slider = document.getElementById('before-after-slider');
|
|
const before = document.getElementById('before-image');
|
|
const beforeImage = before.getElementsByTagName('img')[0];
|
|
const resizer = document.getElementById('resizer');
|
|
|
|
let active = false;
|
|
|
|
//Sort overflow out for Overlay Image
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let width = slider.offsetWidth;
|
|
console.log(width);
|
|
beforeImage.style.width = width + 'px';
|
|
});
|
|
|
|
//Adjust width of image on resize
|
|
window.addEventListener('resize', function() {
|
|
let width = slider.offsetWidth;
|
|
console.log(width);
|
|
beforeImage.style.width = width + 'px';
|
|
})
|
|
|
|
resizer.addEventListener('mousedown',function(){
|
|
active = true;
|
|
resizer.classList.add('resize');
|
|
|
|
});
|
|
|
|
document.body.addEventListener('mouseup',function(){
|
|
active = false;
|
|
resizer.classList.remove('resize');
|
|
});
|
|
|
|
document.body.addEventListener('mouseleave', function() {
|
|
active = false;
|
|
resizer.classList.remove('resize');
|
|
});
|
|
|
|
document.body.addEventListener('mousemove',function(e){
|
|
if (!active) return;
|
|
let x = e.pageX;
|
|
x -= slider.getBoundingClientRect().left;
|
|
slideIt(x);
|
|
pauseEvent(e);
|
|
});
|
|
|
|
resizer.addEventListener('touchstart',function(){
|
|
active = true;
|
|
resizer.classList.add('resize');
|
|
});
|
|
|
|
document.body.addEventListener('touchend',function(){
|
|
active = false;
|
|
resizer.classList.remove('resize');
|
|
});
|
|
|
|
document.body.addEventListener('touchcancel',function(){
|
|
active = false;
|
|
resizer.classList.remove('resize');
|
|
});
|
|
|
|
//calculation for dragging on touch devices
|
|
document.body.addEventListener('touchmove',function(e){
|
|
if (!active) return;
|
|
let x;
|
|
|
|
let i;
|
|
for (i=0; i < e.changedTouches.length; i++) {
|
|
x = e.changedTouches[i].pageX;
|
|
}
|
|
|
|
x -= slider.getBoundingClientRect().left;
|
|
slideIt(x);
|
|
pauseEvent(e);
|
|
});
|
|
|
|
function slideIt(x){
|
|
let transform = Math.max(0,(Math.min(x,slider.offsetWidth)));
|
|
before.style.width = transform+"px";
|
|
resizer.style.left = transform-0+"px";
|
|
}
|
|
|
|
//stop divs being selected.
|
|
function pauseEvent(e){
|
|
if(e.stopPropagation) e.stopPropagation();
|
|
if(e.preventDefault) e.preventDefault();
|
|
e.cancelBubble=true;
|
|
e.returnValue=false;
|
|
return false;
|
|
}
|
|
|
|
|
|
</script>
|
|
{% endif %}
|
|
{{ page.content}}
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Container fluid -->
|
|
<!-- ============================================================== -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- footer -->
|
|
<!-- ============================================================== -->
|
|
{% include '@pleiadebv/templates/layout/parts/footer.html.twig' %}
|
|
<!-- ============================================================== -->
|
|
<!-- End footer -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Page wrapper -->
|
|
<!-- ============================================================== --> |