@inc2734/unitone-css 0.42.5 → 0.42.6

package/dist/app.js

@@ -1 +1 @@
-!function(){"use strict";var t={};function e(t,e){var o="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!o){if(Array.isArray(t)||(o=function(t,e){if(t){if("string"==typeof t)return n(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?n(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){o&&(t=o);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,l=!0,u=!1;return{s:function(){o=o.call(t)},n:function(){var t=o.next();return l=t.done,t},e:function(t){u=!0,a=t},f:function(){try{l||null==o.return||o.return()}finally{if(u)throw a}}}}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}t.d=function(e,n){for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var o=new ResizeObserver((function(t){var n,o,r,i,a=e(t);try{for(a.s();!(n=a.n()).done;){o=n.value.target,void 0,void 0,r=parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size")),i=parseFloat(window.getComputedStyle(o).getPropertyValue("font-size")),o.style.setProperty("--unitone--fluid-font-size-magnification",i/r)}}catch(t){a.e(t)}finally{a.f()}}));document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout~="-fluid-typography"]').forEach((function(t){o.observe(t)}))}));var r=function(t){var e,n,o=null===(e=[].slice.call(t.children))||void 0===e?void 0:e[0];o&&[].slice.call(t.children).forEach((function(t){var e,r=o.getBoundingClientRect(),i=null===(e=n)||void 0===e?void 0:e.getBoundingClientRect(),a=t.getBoundingClientRect(),l=(t.getAttribute("data-unitone-layout")||"").split(" ");r.top<a.top?l.includes("-linewrap")||l.push("-linewrap"):l=l.filter((function(t){return"-linewrap"!==t})),o===t||null!=i&&i.top&&i.top<a.top?l.includes("-bol")||l.push("-bol"):l=l.filter((function(t){return"-bol"!==t})),t.setAttribute("data-unitone-layout",l.join(" ")),n=t}))},i=new ResizeObserver((function(t){var n,o=e(t);try{for(o.s();!(n=o.n()).done;){var i=n.value;r(i.target)}}catch(t){o.e(t)}finally{o.f()}}));document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout*="-divider:"]').forEach((function(t){i.observe(t)}))}));var a=function(t){var e=t.parentNode;e.style.height="",t.style.columnCount="";var n,o=t.getBoundingClientRect();if([].slice.call(t.children).reverse().some((function(t){if(!["absolute","fixed"].includes(getComputedStyle(t).position))return n=t,!0})),n){var r=n.getBoundingClientRect().left,i=Math.ceil((-1*r+o.left+o.width)/o.width),a="calc(".concat(i," * ").concat(getComputedStyle(t).getPropertyValue("--unitone--max-height")," + ").concat(i-1," * ").concat(getComputedStyle(t).getPropertyValue("--unitone--column-gap")," )");e.style.height=a,o.left>r&&(t.style.columnCount=2);var l=[];[].slice.call(t.children).forEach((function(t){var e=t.getBoundingClientRect();l.push(e.top+e.height)}));var u=Math.max.apply(Math,l);if(1<i){var c=Math.ceil(u-o.top);e.style.height=c?"".concat(c,"px"):""}else e.style.height="",t.style.columnCount=""}},l=new ResizeObserver((function(t){var n,o=e(t);try{for(o.s();!(n=o.n()).done;){var r=n.value;a(r.target)}}catch(t){o.e(t)}finally{o.f()}}));document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout~="vertical-writing"]').forEach((function(t){l.observe(t)}))}))}();
+!function(){"use strict";var e={};function t(e,t){var o="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!o){if(Array.isArray(e)||(o=function(e,t){if(e){if("string"==typeof e)return n(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?n(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){o&&(e=o);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u,l=!0,a=!1;return{s:function(){o=o.call(e)},n:function(){var e=o.next();return l=e.done,e},e:function(e){a=!0,u=e},f:function(){try{l||null==o.return||o.return()}finally{if(a)throw u}}}}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}e.d=function(t,n){for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o=new ResizeObserver((function(e){var n,o,r,i,u=t(e);try{for(u.s();!(n=u.n()).done;){o=n.value.target,void 0,void 0,r=parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size")),i=parseFloat(window.getComputedStyle(o).getPropertyValue("font-size")),o.style.setProperty("--unitone--fluid-font-size-magnification",i/r)}}catch(e){u.e(e)}finally{u.f()}}));document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout~="-fluid-typography"]').forEach((function(e){o.observe(e)}))}));var r=function(e){var t,n,o=null===(t=[].slice.call(e.children))||void 0===t?void 0:t[0];o&&[].slice.call(e.children).forEach((function(e){var t,r=o.getBoundingClientRect(),i=null===(t=n)||void 0===t?void 0:t.getBoundingClientRect(),u=e.getBoundingClientRect(),l=(e.getAttribute("data-unitone-layout")||"").split(" ");r.top<u.top?l.includes("-linewrap")||l.push("-linewrap"):l=l.filter((function(e){return"-linewrap"!==e})),o===e||null!=i&&i.top&&i.top<u.top?l.includes("-bol")||l.push("-bol"):l=l.filter((function(e){return"-bol"!==e})),e.setAttribute("data-unitone-layout",l.join(" ")),n=e}))},i=new ResizeObserver((function(e){var n,o=t(e);try{for(o.s();!(n=o.n()).done;){var i=n.value;r(i.target)}}catch(e){o.e(e)}finally{o.f()}}));document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout*="-divider:"]').forEach((function(e){i.observe(e)}))}));var u=function(e){var t;e.parentNode,e.style.columnCount="",[].slice.call(e.children).reverse().some((function(e){if(!["absolute","fixed"].includes(getComputedStyle(e).position))return t=e,!0})),t&&function n(o){e.style.columnCount=o;var r=e.getBoundingClientRect().top+e.getBoundingClientRect().height,i=t.getBoundingClientRect().top+t.getBoundingClientRect().height,u=e.getBoundingClientRect().left,l=t.getBoundingClientRect().left;(r<i||u>l)&&n(o+1)}(1)};document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll('[data-unitone-layout~="vertical-writing"]').forEach((function(e){!function(e){var n=0,o=new ResizeObserver((function(e){var o,r=t(e);try{for(r.s();!(o=r.n()).done;){var i,l=o.value,a=null===(i=l.borderBoxSize)||void 0===i?void 0:i[0].blockSize;a!==n&&(n=a,u(l.target))}}catch(e){r.e(e)}finally{r.f()}}));o.unobserve(e),o.observe(e)}(e)}))}))}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "0.42.5",
+  "version": "0.42.6",
   "description": "",
   "main": "index.js",
   "license": "MIT",

package/src/app.js

@@ -67,13 +67,10 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 
-const setHeightForVertical = (target) => {
+const setColumnCountForVertical = (target) => {
   const parent = target.parentNode;
-  parent.style.height = '';
   target.style.columnCount = '';
 
-  const targetRect = target.getBoundingClientRect();
-
   let lastChild;
   [].slice
     .call(target.children)
@@ -88,46 +85,43 @@ const setHeightForVertical = (target) => {
   if (!lastChild) {
     return;
   }
-  const childrenMinX = lastChild.getBoundingClientRect().left;
-  const preRowCount = Math.ceil(
-    (childrenMinX * -1 + targetRect.left + targetRect.width) / targetRect.width,
-  );
-  const preHeight = `calc(${preRowCount} * ${getComputedStyle(target).getPropertyValue(
-    '--unitone--max-height',
-  )} + ${preRowCount - 1} * ${getComputedStyle(target).getPropertyValue(
-    '--unitone--column-gap',
-  )} )`;
-
-  parent.style.height = preHeight;
-  if (targetRect.left > childrenMinX) {
-    target.style.columnCount = 2;
-  }
 
-  const childrenY = [];
-  [].slice.call(target.children).forEach((child) => {
-    const childRect = child.getBoundingClientRect();
-    childrenY.push(childRect.top + childRect.height);
-  });
-  const childrenMaxY = Math.max(...childrenY);
-
-  if (1 < preRowCount) {
-    const height = Math.ceil(childrenMaxY - targetRect.top);
-    parent.style.height = !!height ? `${height}px` : '';
-  } else {
-    parent.style.height = '';
-    target.style.columnCount = '';
-  }
+  const setColumnCount = (columnCount) => {
+    target.style.columnCount = columnCount;
+    const targetY = target.getBoundingClientRect().top + target.getBoundingClientRect().height;
+    const lastChildY =
+      lastChild.getBoundingClientRect().top + lastChild.getBoundingClientRect().height;
+
+    const targetX = target.getBoundingClientRect().left;
+    const lastChildX = lastChild.getBoundingClientRect().left;
+
+    if (targetY < lastChildY || targetX > lastChildX) {
+      setColumnCount(columnCount + 1);
+    }
+  };
+  setColumnCount(1);
 };
 
-export const verticalsResizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    setHeightForVertical(entry.target);
-  }
-});
+export const verticalsResizeObserve = (target) => {
+  let prevWidth = 0;
+
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const width = entry.borderBoxSize?.[0].blockSize;
+      if (width !== prevWidth) {
+        prevWidth = width;
+        setColumnCountForVertical(entry.target);
+      }
+    }
+  });
+
+  observer.unobserve(target);
+  observer.observe(target);
+};
 
 document.addEventListener('DOMContentLoaded', () => {
   const verticals = document.querySelectorAll('[data-unitone-layout~="vertical-writing"]');
   verticals.forEach((target) => {
-    verticalsResizeObserver.observe(target);
+    verticalsResizeObserve(target);
   });
 });