@massimo-cassandro/minimo 0.12.15 → 0.13.0

package/index.js

@@ -14,3 +14,4 @@ export { innerNav } from './src/components/inner-nav/inner-nav.js';
 export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
 export { sf_macro } from './src/components/sf-macro/sf-macro.js';
 export { snackbar } from './src/components/snackbar/snackbar.js';
+export { unsplashPageJS } from './src/components/unsplash-page/unsplash-page.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.12.15",
+  "version": "0.13.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -42,22 +42,22 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.3",
     "@csstools/postcss-global-data": "^4.0.0",
-    "@massimo-cassandro/dev-updater": "^3.0.3",
-    "@massimo-cassandro/eslint-config": "^3.0.6",
-    "@massimo-cassandro/stylelint-config": "^2.3.4",
+    "@massimo-cassandro/dev-updater": "^3.0.4",
+    "@massimo-cassandro/eslint-config": "^3.0.7",
+    "@massimo-cassandro/stylelint-config": "^2.3.6",
     "autoprefixer": "^10.5.0",
     "babel-loader": "^10.1.1",
     "css-loader": "^7.1.4",
     "css-minimizer-webpack-plugin": "^8.0.0",
-    "cssnano": "^7.1.5",
+    "cssnano": "^7.1.7",
     "ejs-loader": "^0.5.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.7",
     "mini-css-extract-plugin": "^2.10.2",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.5.10",
+    "postcss": "^8.5.13",
     "postcss-custom-media": "^12.0.1",
     "postcss-loader": "^8.2.1",
     "postcss-preset-env": "^11.2.1",
@@ -68,7 +68,7 @@
     "svgo": "^4.0.1",
     "svgo-add-viewbox": "^3.1.0",
     "svgo-loader": "^5.0.0",
-    "terser-webpack-plugin": "^5.4.0",
+    "terser-webpack-plugin": "^5.5.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"

package/src/components/unsplash-page/TODO.md

@@ -0,0 +1,2 @@
+riscrivere css con sizes
+rivedere js

package/src/components/unsplash-page/fetch-unsplash-data.js

@@ -0,0 +1,65 @@
+
+export async function fetchUnsplashData(settings) {
+
+  const default_settings = {
+    unsplash_data_url: null
+  };
+
+  settings = {...default_settings, ...settings};
+
+  try {
+
+    if(!settings.unsplash_data_url) {
+      throw new Error( 'Unsplash data url must be defined' );
+    }
+
+    const imgData = await (async () => {
+      const response = await fetch(settings.unsplash_data_url);
+      if (!response.ok) {
+        /* eslint-disable no-console */
+        console.error('Ajax error on: ' + settings.unsplash_data_url);
+        console.error(response);
+        /* eslint-enable no-console */
+        throw new Error( `Loading error: ${response.status}` );
+      }
+      const data = await response.json();
+      return data;
+    })()
+      .then(data => {
+
+        // console.log(data);
+
+        // used data
+        return {
+          id                 : data.id,
+          color              : data.color,
+          width              : data.width,
+          height             : data.height,
+          // description        : data.description,
+          // location           : data.location.name,
+          alt_description    : data.alt_description,
+          date               : data.created_at,
+          base_url           : data.urls.raw,
+          unsplash_url       : data.links.html,
+          author             : data.user.name?? data.user.username,
+          author_profile     : data.user.links.html,
+          blur_hash          : data.blur_hash,
+          image_description  : (() => {
+            let location = data.location.name,
+              description = data.description?? data.alt_description;
+            if(data.description && location) {
+              location = (new RegExp(location, 'i')).test(description)? null : location;
+            }
+            return [description, location]
+              .filter(i => i != null).join (' / ');
+          })()
+
+        };
+      });
+
+    return imgData;
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+  }
+}

package/src/components/unsplash-page/img-breakpoints.js

@@ -0,0 +1,55 @@
+export const breakpoints = [
+  {
+    name: 'xxl',
+    mq: '(min-width: 1400px)',
+    w: 1920,
+    h: 1080,
+    dpr2: false
+  },
+  {
+    name: 'xl',
+    mq: '(min-width: 1200px) and (max-width: 1399px)',
+    w: 1400,
+    h: 788,
+    dpr2: false
+  },
+  {
+    name: 'lg',
+    mq: '(min-width: 992px) and (max-width: 1199px)',
+    w: 1200,
+    h: 675,
+    dpr2: false
+  },
+  {
+    name: 'md',
+    ar: '16/9',
+    mq: '(min-width: 768px) and (max-width: 991px)',
+    w: 992,
+    h: 558,
+    dpr2: true
+  },
+  {
+    name: 'sm',
+    ar: '16/9',
+    mq: '(min-width: 576px) and (max-width: 767px)',
+    w: 768,
+    h: 432,
+    dpr2: true
+  },
+  {
+    name: 'xs-portrait',
+    ar: '16/9',
+    mq: '(orientation: portrait) and (max-width: 575px)',
+    w: 324,
+    h: 576,
+    dpr2: true
+  },
+  {
+    name: 'xs-landscape',
+    ar: '16/9',
+    mq: '(orientation: landscape) and (max-width: 575px)',
+    w: 576,
+    h: 324,
+    dpr2: true
+  }
+];

package/src/components/unsplash-page/unsplash-page-body-reset.css

@@ -0,0 +1,14 @@
+/* reset padding e margin */
+/* tenuto separato in caso di conflitti con altre impostazioni */
+
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+}
+
+*, *::before, *::after {
+  /* stylelint-disable declaration-no-important */
+  box-sizing: border-box !important;
+}

package/src/components/unsplash-page/unsplash-page.js

@@ -0,0 +1,146 @@
+import imageIcon from '../../icons/image-duotone.svg';
+import arrowIcon from '../icons/arrow-fat-lines-left-duotone.svg';
+import { breakpoints } from './img-breakpoints';
+import { fetchUnsplashData } from './fetch-unsplash-data';
+import { decode } from 'blurhash';
+
+export function unsplashPageJS(settings) {
+
+  const default_settings = {
+      targetElement    : null,
+      className        : null,
+      unsplashDataUrl  : null,
+      utmSource        : null,
+      title            : null,
+      text             : null,
+      backLink         : null,
+      hidePhotoLink    : true,
+      cssModulesObj    : null
+    },
+    required_settings = ['targetElement', 'unsplashDataUrl', 'utmSource', 'title'];
+
+  settings = {...default_settings, ...settings};
+
+
+  try {
+
+    if(required_settings
+      .map(i => settings[i])
+      .filter(i => i !== null && i !== '').length !== required_settings.length) {
+
+      throw new Error( `I parametri ${required_settings.map(i => `\`${i}\``).join(',')} sono obbligatori` );
+    }
+
+
+    const cssClass = classname => settings.cssModulesObj? settings.cssModulesObj[classname] : classname;
+
+    settings.targetElement.innerHTML = `<div class="${cssClass('upContainer') + (settings.className? ` ${settings.className}` : '')}"></div>`;
+    const container = settings.targetElement.querySelector('.' + cssClass('upContainer'));
+    container.innerHTML = `<div class="${cssClass('upLoaderWrapper')}"><div class="${cssClass('upLoader')}"></div></div>`;
+
+    fetchUnsplashData({unsplash_data_url: settings.unsplashDataUrl})
+      .then(photo => {
+
+        const pixels = decode(photo.blur_hash, container.offsetWidth, container.offsetHeight);
+
+        const canvas = document.createElement('canvas');
+        canvas.className = cssClass('upCanvas');
+        canvas.width = container.offsetWidth;
+        canvas.height = container.offsetHeight;
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.createImageData(container.offsetWidth, container.offsetHeight);
+        imageData.data.set(pixels);
+        ctx.putImageData(imageData, 0, 0);
+
+
+        container.insertAdjacentElement('afterbegin', canvas);
+
+        const formats = ['avif', 'webp', 'pjpg']; // `fm` parameter, in order of use
+
+        container.insertAdjacentHTML('beforeend',
+          '<picture>' +
+            breakpoints.map((brk, idx) => {
+
+              const is_last_brk = idx === breakpoints.length - 1;
+              return formats.map(fmt => {
+                const is_default_fmt = fmt === formats.at(-1);
+
+                // https://unsplash.com/documentation#supported-parameters
+                // https://docs.imgix.com/apis/rendering/size/w
+                // https://docs.imgix.com/apis/rendering/size/h
+                // https://docs.imgix.com/apis/rendering/size/ar
+                // https://docs.imgix.com/apis/rendering/size/fit
+                // https://docs.imgix.com/apis/rendering/size/crop
+                // https://docs.imgix.com/apis/rendering/format/q
+
+                let url = photo.base_url + (/\?/.test(photo.base_url)? '&' : '?') +
+                  'fit=crop&crop=focalpoint' + // top, bottom, left, right, faces, focalpoint, edges, and entropy
+                  '&q=60' +
+                  `&w=${brk.w}&h=${brk.h}` +
+                  `&fm=${fmt}`;
+
+                if(is_last_brk && is_default_fmt) {
+
+                  return '<img ' +
+                    `class="${cssClass('unsplashPhoto')}" `+
+                    `src="${url}" `+
+                    `srcset="${url}${brk.dpr2? ` 1x, ${url}&dpr=2 2x` : ''}" `+
+                    `alt="${photo.alt_description?? `${photo.author} / Unsplash`}" `+
+                    `width="${brk.w}" height="${brk.h}">`;
+
+                } else {
+                  return '<source ' +
+                    `srcset="${url}${brk.dpr2? ` 1x, ${url}&dpr=2 2x` : ''}" `+
+                    (!is_default_fmt? `type="image/${fmt}" ` : '')+
+                    `media="${brk.mq}" `+
+                    `width="${brk.w}" height="${brk.h}">`;
+                }
+              }).join('');
+            }).join('') +
+          '</picture>'
+        ); // end insert <picture>
+
+        const img = container.querySelector('.' + cssClass('unsplashPhoto'));
+        img.onload = () => {
+          container.querySelector('.' + cssClass('upLoaderWrapper'))?.remove();
+          container.classList.add(cssClass('show'));
+
+          container.insertAdjacentHTML('beforeend', `<div class="${cssClass('upMessageBox')}">
+            <div class="${cssClass('upMessage')}">
+              <h1>${settings.title}</h1>
+              ${settings.text? `<p>${settings.text}</p>` : ''}
+              ${settings.backLink ? `<p class="${cssClass('upBackLink')}">${settings.backLink}</p>` : ''}
+
+              <div class="${cssClass('upArrowWrapper')}" role="button">
+                <img src="${arrowIcon}" alt="Icona freccia">
+              </div>
+            </div>
+
+            <div class="${cssClass('upCredits')}">
+              <em>${photo.image_description}</em>
+              <span>Photo
+                <a href="${`${photo.author_profile}?utmSource=${settings.utmSource}&utm_medium=referral`}">
+                  ${photo.author} / Unsplash
+                </a>
+              </span>
+            </div>
+          </div>
+          <div class="${cssClass('unsplashPhotoLink')}${settings.hidePhotoLink? ` ${cssClass('upShowOnHover')}` : ''}">
+            <a href="${`${photo.unsplash_url}?utm_source=${settings.utmSource}&utm_medium=referral`}" target="_blank" rel="noopener noreferrer">
+              <img src="${imageIcon}" alt="Icona immagine" />
+            </a>
+          </div>`);
+
+          container.querySelector('.' + cssClass('upArrowWrapper')).addEventListener('click', e => {
+            e.target.closest(`.${cssClass('upMessage')}`).classList.toggle(cssClass('hidden'));
+          }, false);
+
+        }; // end img.onload
+
+      }); // end .then
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+  }
+
+}

package/src/components/unsplash-page/unsplash-page.module.css

@@ -0,0 +1,323 @@
+/*
+  PERSONALIZZAZIONE
+  custom properties (valori di default):
+
+  Basic props:
+  --up-bg-color: hsl(0deg 0% 0% / .7);
+  --up-text-color: #fff;
+  --up-line-height: 1.4;
+  --up-font-family: sans-serif;
+  --up-font-size: 1rem;
+  --up-font-variation-settings: unset;
+  --up-font-weight: 400;
+
+  Credits box
+  --up-credits-font-size: .8em;
+  --up-credits-font-weight: 400;
+  --up-credits-line-height: 1.3;
+
+  H1
+  --up-h1-color: var(--up-text-color);
+  --up-h1-font-size: 2rem;
+  --up-h1-font-variation-settings: unset;
+  --up-h1-font-weight: 700;
+  --up-h1-line-height: 1.25;
+
+  icons:
+  --up-icon-box-bg: var(--up-link-color);
+  --up-icon-fill-color: #333;
+  --up-icon-hover-box-bg: #fff;
+
+  links:
+  --up-link-color: #fc0;
+  --up-link-decoration: none;
+  --up-link-hover-color: #fc0;
+  --up-link-hover-decoration: underline;
+
+  loader:
+  --up-loader-color: hsl(0deg 0% 100% / .6);
+
+*/
+
+
+/* stylelint-disable declaration-no-important */
+
+.bodyNoScroll {
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+
+
+}
+/* stylelint-enable declaration-no-important */
+
+.upContainer {
+
+  position: relative;
+  width: 100dvw;
+  height: 100dvh;
+
+
+  font-family: var(--up-font-family, sans-serif);
+  font-size: var(--up-font-size, 1rem);
+  font-variation-settings: var(--up-font-variation-settings, unset);
+  font-weight: var(--up-font-weight, 400);
+  line-height: var(--up-line-height, 1.4);
+
+  background-color: #333;
+
+  a:is(:link, :visited) {
+    color: var(--up-link-color, #fc0);
+    text-decoration: var(--up-link-decoration, none);
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--up-link-hover-color, #fc0);
+        text-decoration: var(--up-link-hover-decoration, underline);
+      }
+    }
+  }
+}
+
+.upCanvas {
+  position: absolute;
+  /* z-index: -1; */
+  width: 100%;
+  height: 100%;
+}
+
+.unsplashPhoto { /* img */
+  position: relative;
+  z-index: 0;
+  display: block;
+  width: 100dvw;
+  height: 100dvh;
+  object-fit: cover;
+  object-position: center;
+
+  /* font-size: 1.2rem; */
+  /* color: #999; */
+  /* text-align: center; */
+
+}
+
+.unsplashPhoto, .upCredits {
+  opacity: 0;
+  transition: opacity .3s linear;
+
+  .show & {
+    opacity: 1;
+  }
+}
+
+.upMessageBox {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.upMessage, .upCredits {
+  color: var(--up-text-color, #fff);
+  background-color: var(--up-bg-color, hsl(0deg 0% 0% / .7));
+}
+
+.upMessage {
+  position: relative;
+  width: max-content;
+  max-width: 90dvw;
+  padding: 1rem 2rem;
+  text-align: center;
+  transition: translate .3s ease-in-out;
+
+  h1 {
+    margin: 0;
+    font-size: var(--up-h1-font-size, 2rem);
+    font-variation-settings: var(--up-h1-font-variation-settings, unset);
+    font-weight: var(--up-h1-font-weight, 700);
+    line-height: var(--up-h1-line-height, 1.25);
+    color: var(--up-h1-color, var(--up-text-color, #fff));
+  }
+
+  p {
+    margin: .5rem 0 0;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 60dvw;
+  }
+
+  .upBackLink {
+    margin-top: 1rem;
+  }
+
+  .upArrowWrapper {
+    --arrow-size: 2rem;
+    --arrow-position: calc(var(--arrow-size) * .25 * -1);
+
+    position: absolute;
+    bottom: var(--arrow-position);
+    left: var(--arrow-position);
+    width: var(--arrow-size);
+    height: var(--arrow-size);
+    color: var(--up-icon-fill-color, #333);
+    cursor: w-resize;
+    background-color: var(--up-icon-box-bg, var(--up-link-color, #fc0));
+    border-radius: 50%;
+    /* transition: all .2s ease-in-out; */
+    /* duration | easing-function | delay | iteration-count | direction | name */
+    animation: .2s ease-in 2s 2 reverse icon-shaking;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--up-icon-hover-box-bg, #fff);
+      }
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.hidden {
+    translate: calc(-1 * (50dvw + 50% - 2rem));
+    .upArrowWrapper {
+      right: var(--arrow-position);
+      left: auto;
+      cursor: e-resize;
+      rotate: .5turn;
+    }
+  }
+
+}
+
+@keyframes icon-shaking {
+  0% { transform: translateX(0); }
+  40% { transform: translateX(20px); }
+  80% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+.upCredits {
+  display: flex;
+  flex-flow: column wrap;
+  gap: .5rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: .2rem 1rem;
+  font-size: var(--up-credits-font-size, .8em);
+  font-weight: var(--up-credits-font-weight, 400);
+  line-height: var(--up-credits-line-height, 1.3);
+
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+
+/* link a scomparsa alla pagina della foto */
+.unsplashPhotoLink {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    aspect-ratio: 1;
+    padding: 4px;
+    color: #fff;
+    background-color: rgb(0 0 0 / .5);
+    border-radius: 50%;
+
+    &:active {
+      color: var(--up-icon-fill-color, #333);
+      background-color: var(--up-icon-box-bg, var(--up-link-color, #fc0));
+
+      img {
+        filter: none;
+        opacity: 1;
+      }
+    }
+  }
+  img {
+    display: block;
+    filter: brightness(0) invert(1);
+    opacity: .6;
+  }
+
+  @media (hover: hover) {
+
+    .show &:hover {
+      img {
+        opacity: 1;
+      }
+    }
+
+    &.upShowOnHover {
+      opacity: 0;
+      .show &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+
+/* https://wweb.dev/resources/loader-generator/ */
+.upLoaderWrapper {
+
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  /* z-index: -1; */
+  transform: translate(-50%, -50%);
+}
+.upLoader {
+  width: 80px;
+  aspect-ratio: 1;
+  background: conic-gradient(#000, var(--up-loader-color, hsl(0deg 0% 100% / .6))) content-box;
+  border-radius: 50%;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask:
+    repeating-conic-gradient(
+      #0000 0deg,
+      #000 1deg calc(360deg / 10 - 10deg - 1deg),
+      #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
+    ),
+    radial-gradient(
+      farthest-side,
+      #0000 calc(98% - 10px),
+      #000 calc(100% - 10px)
+    );
+  mask:
+    repeating-conic-gradient(
+      #0000 0deg,
+      #000 1deg calc(360deg / 10 - 10deg - 1deg),
+      #0000 calc(360deg / 10 - 10deg) calc(360deg / 10)
+    ),
+    radial-gradient(
+      farthest-side,
+      #0000 calc(98% - 10px),
+      #000 calc(100% - 10px)
+    );
+
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-composite: destination-in;
+  mask-composite: intersect;
+  animation: spin 1000ms infinite steps(10);
+}
+@keyframes spin { to { transform: rotate(1turn); } }
+

package/src/icons/arrow-fat-lines-left-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M152,80v96H120v48L24,128l96-96V80Z" opacity="0.2"></path><path d="M152,72H128V32a8,8,0,0,0-13.66-5.66l-96,96a8,8,0,0,0,0,11.32l96,96A8,8,0,0,0,128,224V184h24a8,8,0,0,0,8-8V80A8,8,0,0,0,152,72Zm-8,96H120a8,8,0,0,0-8,8v28.69L35.31,128,112,51.31V80a8,8,0,0,0,8,8h24Zm80-88v96a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Zm-32,0v96a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Z"></path></svg>

package/src/icons/image-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z" opacity="0.2"></path><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"></path></svg>