Merge pull request #127 from hlxsites/feature/model-image

Feature/model image

blocks/model-image/model-image.css

@@ -0,0 +1,151 @@
+.model-image .img-colorbox-popup  {
+  margin: 0.6em 0;
+}
+
+.model-image {
+  position: relative;
+}
+
+.model-image .img-colorbox-popup img {
+  width: 100%;
+}
+
+#cboxOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow: hidden;
+  transform: translate3d(0,0,0);
+  background: #0009;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+#cboxLoadingOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%
+}
+
+.cboxPhoto {
+  float: left;
+  margin: auto;
+  border: 0;
+  display: block;
+  max-width: none;
+}
+
+#colorbox{
+  box-sizing: content-box;
+  outline: 0;
+  animation: create-box 1s;
+}
+
+#cboxContent {
+  margin-top: 20px;
+  background: #fff;
+  box-sizing: content-box;
+  position: relative;
+}
+
+.picture-wrapper {
+  overflow: scroll;
+}
+
+#cboxContent .button {
+  padding: .6em 1em;
+  margin-top: 10px
+}
+
+#cboxClose:active {
+  outline: 0
+}
+
+#cboxClose {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 28px;
+  font-family: Arial,Helvetica;
+  line-height: 32px;
+  background-color: #ec8f2d;
+  color: #fff;
+  border-radius: 0;
+  border: 0;
+  margin: 0;
+  overflow: visible;
+}
+
+#cboxClose:hover {
+  background-color: #00000050 !important
+}
+
+.model-image .icon-search {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: block;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  font-size: 16px;
+  line-height: 32px;
+  background-color: #ec8f2d;
+  color: #fff;
+  border-radius: 0
+}
+
+.model-image .icon-search:hover {
+  background-color: #000 !important
+}
+
+@keyframes create-box {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.image-wrapper{
+  border-radius: 5px;
+  box-shadow: 0 2px 8px rgba(0 0 0 / 10%);
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.image-wrapper-ani{
+  animation: create-box1 0s;
+}
+
+@keyframes create-box1 {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1.5);
+  }
+}
+
+.colorbox-wrapper{
+  position: absolute;
+  z-index: 999;
+}

blocks/model-image/model-image.js

@@ -0,0 +1,128 @@
+// creating the elements with class names
+const creteEleAddCls = (obj) => {
+  const { classes } = obj;
+  let { targetEle } = obj;
+  targetEle = document.createElement(targetEle);
+  if (classes && classes.length > 0) {
+    targetEle.classList.add(...classes);
+  }
+  return targetEle;
+};
+// Adding the inline-styles for the element
+const addStyles = (ele, styles) => {
+  Object.entries(styles).forEach(([key, value]) => {
+    ele.style[key] = value;
+  });
+};
+
+// Setting the attributes for the element
+const setAttributes = (ele, attributes) => {
+  Object.entries(attributes).forEach(([key, value]) => {
+    ele.setAttribute(key, value);
+  });
+};
+
+export default function decorate(block) {
+  const imgWrap = creteEleAddCls({ targetEle: 'div', classes: ['img-colorbox-popup', 'cboxElement'] });
+  const pictureTag = block.querySelector('img');
+  const pictureTagForZoom = pictureTag.cloneNode(true);
+  addStyles(pictureTagForZoom, { cursor: 'pointer' });
+  imgWrap.append(pictureTag);
+  imgWrap.classList.add('image-wrapper');
+  block.textContent = '';
+  block.append(imgWrap);
+  const overlayDiv = creteEleAddCls({ targetEle: 'div', classes: [] });
+  addStyles(overlayDiv, {
+    display: 'none',
+    cursor: 'pointer',
+    visibility: 'visible',
+  });
+  setAttributes(overlayDiv, {
+    id: 'cboxOverlay',
+  });
+  block.appendChild(overlayDiv);
+
+  const colorboxWrapper = creteEleAddCls({ targetEle: 'div', classes: ['colorbox-wrapper'] });
+  const colorboxDiv = creteEleAddCls({ targetEle: 'div', classes: [] });
+  setAttributes(colorboxDiv, {
+    id: 'colorbox',
+    role: 'dialog',
+    tabindex: '-1',
+  });
+  addStyles(colorboxDiv, {
+    display: 'none',
+    visibility: 'visible',
+  });
+
+  colorboxWrapper.append(colorboxDiv);
+  overlayDiv.appendChild(colorboxWrapper);
+  const pictureWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-wrapper'] });
+  const pictureOverflowWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-overflow-wrap'] });
+  pictureOverflowWrapperDiv.append(pictureTagForZoom);
+  pictureTagForZoom.style.width = '100%';
+  pictureTagForZoom.style.height = '100%';
+  pictureWrapperDiv.append(pictureOverflowWrapperDiv);
+  colorboxDiv.append(pictureWrapperDiv);
+  const cboxWrapperSecondChildCboxbtnIconSearch = creteEleAddCls({ targetEle: 'span', classes: ['button', 'icon-search'] });
+  const cboxWrapperSecondChildCboxCloseBtn = creteEleAddCls({ targetEle: 'button', classes: [] });
+  setAttributes(cboxWrapperSecondChildCboxCloseBtn, {
+    id: 'cboxClose',
+    type: 'button',
+  });
+  cboxWrapperSecondChildCboxCloseBtn.innerHTML = '&#215';
+  colorboxDiv.append(cboxWrapperSecondChildCboxCloseBtn);
+  colorboxDiv.append(cboxWrapperSecondChildCboxbtnIconSearch);
+  block.querySelector('.img-colorbox-popup.cboxElement').addEventListener('click', (e) => {
+    e.stopPropagation();
+    addStyles(overlayDiv, {
+      display: 'flex',
+      cursor: 'pointer',
+      visibility: 'visible',
+    });
+    addStyles(colorboxDiv, {
+      display: 'block',
+      visibility: 'visible',
+      'z-index': '9999',
+      'background-color': 'white',
+      padding: '15px',
+    });
+  });
+  cboxWrapperSecondChildCboxCloseBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    addStyles(overlayDiv, {
+      display: 'none',
+    });
+    addStyles(colorboxDiv, {
+      display: 'none',
+    });
+    pictureTagForZoom.style.width = '100%';
+    pictureTagForZoom.style.height = 'auto';
+    pictureTagForZoom.style.maxWidth = '100%';
+    pictureTagForZoom.style.maxHeight = '100%';
+  });
+  overlayDiv.addEventListener('click', (e) => {
+    e.stopPropagation();
+    addStyles(overlayDiv, {
+      display: 'none',
+    });
+    addStyles(colorboxDiv, {
+      display: 'none',
+    });
+    pictureTagForZoom.style.width = '100%';
+    pictureTagForZoom.style.height = 'auto';
+    pictureTagForZoom.style.maxWidth = '100%';
+    pictureTagForZoom.style.maxHeight = '100%';
+  });
+  pictureTagForZoom.addEventListener('click', (e) => {
+    e.stopPropagation();
+    pictureTagForZoom.style.width = '150%';
+    pictureTagForZoom.style.height = '150%';
+    pictureTagForZoom.style.maxWidth = '150%';
+  });
+  block.querySelector('.button.icon-search').addEventListener('click', (e) => {
+    e.stopPropagation();
+    pictureTagForZoom.style.width = '150%';
+    pictureTagForZoom.style.height = '150%';
+    pictureTagForZoom.style.maxWidth = '150%';
+  });
+}