FE Exercise - new custom element

frontend/bundles/bundle-default/styleguide/_navigation.config.json

@@ -256,6 +256,10 @@
         {
           "displayName": "Standard List L",
           "page": "/page/list/PageListStandardL.json"
+        },
+        {
+          "displayName": "Standard List N",
+          "page": "/page/list/PageListStandardN.json"
         }
       ]
     },

frontend/bundles/bundle-default/styleguide/image/Image.hbs

@@ -1,3 +1,5 @@
+
+{{#if (get "enableZoomImage")}}<bsp-imagezoom>{{/if}}
 <picture>
     {{!-- You can suffix imageSizes with "Alt" for automatic assignment of crop, or set imageSizeAlt otherwise--}}
     {{#set imageSize=(fallback (get "imageSizeAlt") (concat (fallback (get "imageSize") "medium-4x3") "Alt"))}}
@@ -12,3 +14,5 @@
     {{/set}}
     {{include "/image/ImageTag.hbs" this}}
 </picture>
+
+{{#if (get "enableZoomImage")}}</bsp-imagezoom>{{/if}}

frontend/bundles/bundle-default/styleguide/image/ImageZoom.js

@@ -0,0 +1,34 @@
+export class ImageZoom extends HTMLElement {
+  static get observedAttributes() {
+    return ['data-zoomed']
+  }
+
+  get pictureEl() {
+    return this.querySelector('picture')
+  }
+
+  get zoomed() {
+    return this.hasAttribute('data-zoomed')
+  }
+
+  set zoomed(bool) {
+    if (bool) {
+      this.setAttribute('data-zoomed', '')
+    } else {
+      this.removeAttribute('data-zoomed')
+    }
+  }
+
+  connectedCallback() {
+    const zoomButtonEl = document.createElement('button')
+    zoomButtonEl.classList.add('bsp-imagezoom__button')
+    zoomButtonEl.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.zoomed = !this.zoomed
+    })
+    const pictureElClone = this.pictureEl.cloneNode(true)
+    pictureElClone.classList.add('clone')
+    pictureElClone.appendChild(zoomButtonEl)
+    this.appendChild(pictureElClone)
+  }
+}

frontend/bundles/bundle-default/styleguide/page/list/Page-withStandardLists.json

@@ -43,6 +43,9 @@
     },
     {
       "_include": "/page/list/PageListStandardL.json"
+    },
+    {
+      "_include": "/page/list/PageListStandardN.json"
     }
   ]
 }

frontend/bundles/bundle-default/styleguide/page/list/PageListStandardN.hbs

@@ -0,0 +1,32 @@
+{{#if items}}
+<div class="PageListStandardN" data-module{{include "includes/PageList-attributes.hbs" this}}>
+    {{include "includes/PageList-header.hbs" this}}
+
+    {{#set enableZoomImage=true imageSize="xl-16x9"}}
+        <div class="PageList-items">
+            <div class="PageList-items-item">
+                {{#with items.[0]}}
+                    {{#eq this._template "/page/promo/PagePromo.hbs"}}
+                        {{include "/page/promo/PagePromo.hbs" this}}
+                    {{else}}
+                        {{render this}}
+                    {{/eq}}
+                {{/with}}
+            </div>
+            {{#each items}}
+                {{#if (gt @index 0)}}
+                    <div class="PageList-items-item">
+                        {{#eq this._template "/page/promo/PagePromo.hbs"}}
+                            {{include "/page/promo/PagePromo.hbs" this}}
+                        {{else}}
+                            {{render this}}
+                        {{/eq}}
+                    </div>
+                {{/if}}
+            {{/each}}
+        </div>
+    {{/set}}
+
+    {{include "includes/PageList-footer.hbs" this}}
+</div>
+{{/if}}

frontend/bundles/bundle-default/styleguide/page/list/PageListStandardN.json

@@ -0,0 +1,13 @@
+{
+  "_template": "/page/list/PageList.hbs",
+  "_styledTemplate": "/page/list/PageListStandardN.hbs",
+  "title": "Standard List N",
+  "ctaUrl": "#",
+  "ctaTarget": "_self",
+  "items": [
+    {
+      "_include": "/page/promo/PagePromo.json",
+      "_repeat": 9
+    }
+  ]
+}

frontend/bundles/bundle-default/styleguide/page/list/_PageList.config.json

@@ -142,6 +142,16 @@
             "imagePositionHorizontal"
           ]
         },
+        {
+          "displayName": "Standard - List N",
+          "example": "/page/list/PageListStandardN.json",
+          "height": 800,
+          "width": 1024,
+          "fields": [
+            "backgroundColor",
+            "inverseColors"
+          ]
+        },
 
 
 

frontend/bundles/bundle-default/styleguide/styles/default/All.js

@@ -21,6 +21,7 @@ import { GalleryPage } from '../../gallery/GalleryPage'
 import { GoogleDfp } from '../../dfp/GoogleDfp'
 import { HiddenCookieInput } from '../../form/input/HiddenCookieInput.js'
 import { HiddenDocumentReferrerInput } from '../../form/input/HiddenDocumentReferrerInput.js'
+import { ImageZoom } from '../../image/ImageZoom.js'
 import { ModuleAnimations } from '../../util/ModuleAnimations'
 import { PageHeadingVideo } from '../../page/PageHeadingVideo'
 import { PageListAutoRotate } from '../../page/list/PageListAutoRotate'
@@ -57,6 +58,7 @@ function registerCustomElements() {
     HiddenDocumentReferrerInput
   )
   window.customElements.define('bsp-html5player', HTML5VideoPlayer)
+  window.customElements.define('bsp-imagezoom', ImageZoom)
   window.customElements.define('bsp-jw-player', JwVideoPlayer)
   window.customElements.define('bsp-language', LanguageMenu)
   window.customElements.define('bsp-load-more', LoadMore)

frontend/bundles/bundle-default/styleguide/styles/default/All.less

@@ -71,6 +71,7 @@ img {
 @import 'faq/All';
 @import 'figure/All';
 @import 'form/All';
+@import 'image/All';
 @import 'jwplayer/All';
 @import 'languages/All';
 @import 'link/All';

frontend/bundles/bundle-default/styleguide/styles/default/image/All.less

@@ -0,0 +1 @@
+@import 'ImageZoom';

frontend/bundles/bundle-default/styleguide/styles/default/image/ImageZoom.less

@@ -0,0 +1,80 @@
+
+bsp-imagezoom {
+    display: block;
+    position: relative;
+
+    picture {
+        position: relative;
+
+        &.clone {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: inline-block;
+            z-index: 2;
+
+            .bsp-imagezoom__button {
+                position: absolute;
+                top: 2px;
+                right: 2px;
+                width: 23px;
+                height: 23px;
+                z-index: 6;
+                opacity: 0.3;
+                border-radius: 0;
+                background-color: white;
+                cursor: pointer;
+
+                &:before {
+                    content: '+';
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    font-size: 20px;
+                    line-height: 1;
+                }
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            img {
+                transition: width 300ms ease-in-out, height 150ms ease-in-out;
+            }
+        }
+    }
+
+    &[data-zoomed] {
+        picture.clone {
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 4;
+            display: block;
+            width: 100vw;
+            height: 100vh;
+            background-color: rgba(255, 255, 255, 0.7);
+
+            .bsp-imagezoom__button {
+                top: 2vh;
+                right: 2vw;
+                opacity: 1;
+
+                &:before {
+                    content: '×';
+                }
+            }
+
+            img {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 90vw;
+                height: auto;
+            }
+        }
+    }
+}

frontend/bundles/bundle-default/styleguide/styles/default/page/list/All.less

@@ -14,6 +14,7 @@
 @import 'PageListStandardJ';
 @import 'PageListStandardK';
 @import 'PageListStandardL';
+@import 'PageListStandardN';
 
 // ---- Carousel Page List styles
 @import 'PageListCarousel';

frontend/bundles/bundle-default/styleguide/styles/default/page/list/PageListStandardN.less

@@ -0,0 +1,55 @@
+.PageListStandardN {
+  .PageList-items {
+    display: grid;
+    gap: 20px;
+
+    &-item {
+      border-bottom: 1px solid var(--color-list-border);
+      padding-bottom: 20px;
+
+      &:not(:first-child) {
+        .PagePromo {
+          &-title {
+            &:extend(.promo-title-6 all);
+          }
+        }
+      }
+    }
+  }
+
+  @media @mq-md {
+    .PageList-items {
+      display: grid;
+      gap: 20px;
+      grid-template-columns: repeat(2, 1fr);
+      grid-auto-flow: dense;
+
+      &-item {
+        grid-column: span 1;
+
+        &:nth-of-type(1) {
+          grid-column: span 2;
+          grid-row: span 1;
+        }
+      }
+    }
+  }
+
+  @media @mq-lg {
+    .PageList-items {
+      display: grid;
+      gap: 20px;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-flow: dense;
+
+      &-item {
+        grid-column: span 1;
+
+        &:nth-of-type(1) {
+          grid-column: span 4;
+          grid-row: span 1;
+        }
+      }
+    }
+  }
+}