pleiade-custom-theme/templates/layout/page.html.twig

{#
/**
 * @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  -->
      <!-- ============================================================== -->