lambdaway :: scroll

2 | list | login |load

| |

_h1 [[show]] | [[slide_show|?view=lib_slideshow]] | scroll_snap

_p Following a code found in [[https://calendar.perfplanet.com/|https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/]] by Anthony Ricaud.
 
{div {@ class="demo-center"}
°°°
 {div {@ class="demo-thumbnails"}
       {S.map {wpc_thumb https://placekitten.com 50} {S.serie 1 5}} 
       {thumb data/amelie_poulain 50 6} 
       {thumb http://epsilonwiki.free.fr/epsilonwiki/data/gandhi_adami.jpg 50 7}
       {thumb data/bibliotheque_virtuelle.jpg 50 8}
  }  
°°°
  {div {@ class="diaporama smooth-scroll"}
       {S.map {wpc_image https://placekitten.com 500} {S.serie 1 5}}
       {image data/amelie_poulain.jpg 500 6} 
       {image http://epsilonwiki.free.fr/epsilonwiki/data/gandhi_adami.jpg 500 7}
       {image data/bibliotheque_virtuelle.jpg 500 8}
  }
 
}

_h2 user lambdatalk code

{pre
'{div {@ class="demo-center"}
  {div {@ class="diaporama smooth-scroll"}
       {S.map {wpc_image https://placekitten.com 500} 
              {S.serie 1 5}}
       {image data/amelie_poulain.jpg 500 6} 
       {image http://epsilonwiki.free.fr/epsilonwiki/data/gandhi_adami.jpg 500 7}
       {image data/bibliotheque_virtuelle.jpg 500 8}
  }
  {div {@ class="demo-thumbnails"}
       {S.map {wpc_thumb https://placekitten.com 50}
              {S.serie 1 5}} 
       {thumb data/amelie_poulain 50 6} 
       {thumb http://epsilonwiki.free.fr/epsilonwiki/data/gandhi_adami.jpg 50 7}
       {thumb data/bibliotheque_virtuelle.jpg 50 8}
  } 
}
}

_p {b Don't forget} to tune up the width in the style part

{pre
.diaporama '{
    width: 500px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
   ;; display: flex;
}
}

_p {b To do}: improve the code to manage non squared pictures.
_p See also [[show]].

;; coder's corner

{{hide} lambdatalk code

{def image
 {lambda {:url :size :id}
  {img {@ src=":url" width=":size"  ;; height=":size" 
          alt="" class="frame" data-frame id="image-:id"}} }}

{def thumb
 {lambda {:url :size :id}
  {a {@ href="#image-:id" class="demo-thumbnail"}
   {img {@ src=":url" width=":size" ;; height=":size" 
           alt=""}} }}}

to manage pictures in https://calendar.perfplanet.com/ :

{def wpc_image
 {lambda {:url :size :id}
  {img {@ src=":url/:size/:size?image=:id"  
          width=":size" ;; height=":size" 
          alt="" class="frame" data-frame id="image-:id"}} }}

{def wpc_thumb
 {lambda {:url :size :id}
  {a {@ href="#image-:id" class="demo-thumbnail"}
   {img {@ src=":url/:size/:size?image=:id" 
           width=":size" ;; height=":size" 
           alt=""}} }}}
}

{style 
.diaporama {
    width: 500px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    ;; display: flex;
}
.smooth-scroll {
    scroll-behavior: smooth;
}

.frame {
    scroll-snap-align: start;
    vertical-align:top;
}

/* Extra code for the look of the demo */
.demo-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.demo-thumbnails {
    display: flex;
    margin: 1rem 0;
}
.demo-thumbnail {
    margin: 0 4px;
    border: 2px solid #0ff;
    display: flex;
}
.demo-thumbnail:hover, .demo-thumbnail:focus, .demo-thumbnail.displayed {
    border-color: #f00;
    outline: 0;
}
}

{style 
body { background:#444; } 
#page_frame { border:0; background:#444; width:600px; }
#page_content { background:transparent; color:#fff; border:0; box-shadow:0 0 0; font-family:papyrus, optima; }
.page_menu { background:transparent; color:#fff; }
a { color:#f80; }
pre { box-shadow:0 0 8px #000; padding:5px; background:#444; color:#fff; font:normal 1.0em courier; }
b { color:cyan; }

}

{{hide} 
const frameObserver = new IntersectionObserver(
    highlightThumbnailOfDisplayedFrame,
    {
        threshold: 0.5
    }
);

function observeDisplayedFrame() {
    const frames = document.querySelectorAll("[data-frame]");
    for (const frame of frames) {
        frameObserver.observe(frame);
    }
}

function highlightThumbnailOfDisplayedFrame(entries) {
    for (const entry of entries) {
        const thumbnail = document.querySelector(
            '[href="#' + entry.target.id + '"]'
        );
        const isDiplayed =
            entry.isIntersecting && entry.intersectionRatio > 0.5;
        thumbnail.classList.toggle("displayed", isDiplayed);
    }
}

}