@zeecoder/container-query
Advanced tools
Comparing version 3.0.0-alpha.2 to 3.0.0-alpha.3
@@ -1,1 +0,1 @@ | ||
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var WeakMap=_interopDefault(require("es6-weak-map")),_union=_interopDefault(require("lodash/union")),_difference=_interopDefault(require("lodash/difference")),objectAssign=_interopDefault(require("object-assign")),ResizeObserver=_interopDefault(require("resize-observer-polyfill")),MutationObserver=_interopDefault(require("mutation-observer")),raf=_interopDefault(require("raf")),containerQueryMetaBuilder=require("@zeecoder/container-query-meta-builder");function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),e}function andCondition(e,r){for(var t=e.length,n=0;n<t;n++)if(!e[n](r))return!1;return!0}function orCondition(e,r){for(var t=e.length,n=0;n<t;n++)if(e[n](r))return!0;return!1}function noCondition(){return!0}function convertConditionArrayToFunction(e){var r=e[0],t=e[1],n=e[2];if("width"===r){if(">"===t)return function(e){return e.width>parseInt(n)};if(">="===t)return function(e){return e.width>=parseInt(n)};if("<"===t)return function(e){return e.width<parseInt(n)};if("<="===t)return function(e){return e.width<=parseInt(n)}}else if("height"===r){if(">"===t)return function(e){return e.height>parseInt(n)};if(">="===t)return function(e){return e.height>=parseInt(n)};if("<"===t)return function(e){return e.height<parseInt(n)};if("<="===t)return function(e){return e.height<=parseInt(n)}}else if("aspect-ratio"===r){if(">"===t)return function(e){return e.width/e.height>parseFloat(n)};if(">="===t)return function(e){return e.width/e.height>=parseFloat(n)};if("<"===t)return function(e){return e.width/e.height<parseFloat(n)};if("<="===t)return function(e){return e.width/e.height<=parseFloat(n)}}else if("orientation"===r)return"portrait"===n?function(e){return e.height>=e.width}:function(e){return e.height<e.width};return noCondition}function getConditionFunction(e){var r=this;return Array.isArray(e)&&0!==e.length?orCondition.bind(this,e.map(function(e){return andCondition.bind(r,e.map(convertConditionArrayToFunction))})):noCondition}function processMeta(e){if("object"!==_typeof(e)||"string"!=typeof e[containerQueryMetaBuilder.SELECTOR]||!Array.isArray(e[containerQueryMetaBuilder.QUERIES]))throw new Error("Invalid meta object. It's either not an object, or it's missing the '".concat(containerQueryMetaBuilder.SELECTOR,"' and/or the '").concat(containerQueryMetaBuilder.QUERIES,"' property."));var r=objectAssign({},e);return r[containerQueryMetaBuilder.QUERIES].forEach(function(e){e.conditionFunction=getConditionFunction(e[containerQueryMetaBuilder.CONDITIONS])}),r}function getContainerSize(e){return{width:e.clientWidth,height:e.clientHeight}}function applyStylesToElements(e,r){for(var t=r.length,n=0;n<t;n++)for(var i in e)r[n].style.setProperty(i,e[i])}var containerRegistry=new WeakMap,registry={set:function(e,r){containerRegistry.set(e,r)},get:function(e){return containerRegistry.get(e)},has:function(e){return containerRegistry.has(e)},delete:function(e){containerRegistry.delete(e)}};function convertSingleValue(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=r.toLowerCase().match(/^ *(\d+(\.\d+)?)([rwhminax]+) *$/i);if(!Array.isArray(n))return r;var i=n[1],o=n[3];if("rh"!==o&&"rw"!==o&&"rmin"!==o&&"rmax"!==o)return r;var a=("rh"===o||"rmin"===o&&e.height<e.width||"rmax"===o&&e.height>e.width?e.height:e.width)*parseFloat(i)/100;return"".concat(a.toFixed(t),"px")}function convertCompositValue(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=r.match(/\d+(\.\d+)?[rwhminax]+/gi);if(!Array.isArray(n))return r;var i={};n.forEach(function(r){i[r]=convertSingleValue(e,r,t)});var o=r;for(var a in i)o=o.replace(new RegExp(a,"g"),i[a]);return o}function adjustValueObjectByContainerSize(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=objectAssign({},r);for(var i in n)n[i]=convertCompositValue(e,n[i],t);return n}function getAffectedPropsByElementData(e){var r={};return objectAssign(r,e[containerQueryMetaBuilder.STYLES]),objectAssign(r,e[containerQueryMetaBuilder.VALUES]),Object.keys(r)}function getChangedStyles(e,r){var t=registry.get(e);if(!t)return{};for(var n=t.queryState,i=t.meta,o=t.instance,a={},u={},s=function(e){var t=i[containerQueryMetaBuilder.QUERIES][e],s="function"!=typeof t.conditionFunction||t.conditionFunction(r),c=n[e];n[e]=s,t[containerQueryMetaBuilder.ELEMENTS].forEach(function(e){var t=e[containerQueryMetaBuilder.SELECTOR]||":self";a[t]||(a[t]={addStyle:{},removeProps:[]}),u[t]||(u[t]=[]);var n=a[t],i=u[t];if(s&&c){var f={},l=0;for(var d in e[containerQueryMetaBuilder.VALUES])if(-1===i.indexOf(d)){l++,f[d]=e[containerQueryMetaBuilder.VALUES][d],i.push(d);var h=n.removeProps.indexOf(d);-1!==h&&n.removeProps.splice(h,1)}var y={};for(var v in e[containerQueryMetaBuilder.STYLES]){var p=n.removeProps.indexOf(v);-1!==p&&(n.removeProps.splice(p,1),y[v]=e[containerQueryMetaBuilder.STYLES][v]),-1===i.indexOf(v)&&i.push(v)}l>0&&objectAssign(y,adjustValueObjectByContainerSize(r,f,o.opts.valuePrecision)),objectAssign(a[t].addStyle,y)}else if(!s&&c){var g=getAffectedPropsByElementData(e),m=_difference(g,i);a[t].removeProps=_union(a[t].removeProps,m)}else if(s&&!c){var b={};for(var S in e[containerQueryMetaBuilder.STYLES])-1===i.indexOf(S)&&(b[S]=e[containerQueryMetaBuilder.STYLES][S],i.push(S));for(var E in e[containerQueryMetaBuilder.VALUES])-1===i.indexOf(E)&&(b[E]=e[containerQueryMetaBuilder.VALUES][E],i.push(E));var C=adjustValueObjectByContainerSize(r,b,o.opts.valuePrecision);for(var A in C){var j=a[t].removeProps.indexOf(A);-1!==j&&a[t].removeProps.splice(j,1)}objectAssign(a[t].addStyle,C)}})},c=i[containerQueryMetaBuilder.QUERIES].length-1;c>=0;c--)s(c);for(var f in a)0===Object.keys(a[f].addStyle).length&&delete a[f].addStyle,0===a[f].removeProps.length&&delete a[f].removeProps;return a}var findContainerDescendants=function(e,r,t){return r===t||":self"===t?[e]:Array.prototype.slice.call(e.querySelectorAll(t)).filter(function(r){return!hasDifferentContainerParent(e,r)})},hasDifferentContainerParent=function e(r,t){var n=t.parentElement;return!(!n||n===r)&&(!!registry.has(n)||e(r,n))};function adjustContainer(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,t=registry.get(e);if(t){r||(r=getContainerSize(e));var n=getChangedStyles(e,r),i=function(r){if(!n[r].addStyle&&!Array.isArray(n[r].removeProps))return"continue";var i=n[r].addStyle||{};Array.isArray(n[r].removeProps)&&n[r].removeProps.forEach(function(e){i[e]=""});var o=t.meta[containerQueryMetaBuilder.SELECTOR],a=":self"===r?[e]:findContainerDescendants(e,o,r);applyStylesToElements(i,a)};for(var o in n)i(o)}}var resizeObserver=new ResizeObserver(function(e){Array.isArray(e)&&e.forEach(function(e){var r=registry.get(e.target);void 0!==r&&"object"===_typeof(r)&&"object"===_typeof(r.instance)&&"function"==typeof r.instance.adjust?r.instance.adjust({width:e.contentRect.width,height:e.contentRect.height}):console.warn("Could not find Container instance for element:",e.target)})}),mutationObserver=new MutationObserver(function(e){e.forEach(function(e){for(var r=e.removedNodes.length,t=0;t<r;t++){var n=e.removedNodes[t];registry.has(n)&&(resizeObserver.unobserve(n),registry.delete(n))}})}),Container=function(){function e(r,t){var n=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,e),this.container=r,"string"==typeof t&&(t=JSON.parse(t.slice(1,-1))),this.meta=processMeta(t),this.opts=objectAssign({adjustOnResize:!0,adjustOnInstantiation:!0,valuePrecision:2},i);registry.set(r,{instance:this,meta:t,queryState:Array.isArray(t[containerQueryMetaBuilder.QUERIES])?t[containerQueryMetaBuilder.QUERIES].map(function(){return!1}):[]}),mutationObserver.observe(this.container.parentNode,{childList:!0}),this.opts.adjustOnResize&&this.observeResize(),this.opts.adjustOnInstantiation&&raf(function(){return n.adjust()})}return _createClass(e,[{key:"observeResize",value:function(){resizeObserver.observe(this.container)}},{key:"unobserveResize",value:function(){resizeObserver.unobserve(this.container)}},{key:"adjust",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;adjustContainer(this.container,e),"function"==typeof this.opts.handleResize&&this.opts.handleResize(e)}}]),e}();module.exports=Container; | ||
"use strict";function _interopDefault(r){return r&&"object"==typeof r&&"default"in r?r.default:r}var WeakMap=_interopDefault(require("es6-weak-map")),_union=_interopDefault(require("lodash/union")),_difference=_interopDefault(require("lodash/difference")),objectAssign=_interopDefault(require("object-assign")),ResizeObserver=_interopDefault(require("resize-observer-polyfill")),MutationObserver=_interopDefault(require("mutation-observer")),raf=_interopDefault(require("raf")),containerQueryMetaBuilder=require("@zeecoder/container-query-meta-builder");function _typeof(r){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r})(r)}function _classCallCheck(r,t){if(!(r instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(r,t){for(var n=0;n<t.length;n++){var e=t[n];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(r,e.key,e)}}function _createClass(r,t,n){return t&&_defineProperties(r.prototype,t),n&&_defineProperties(r,n),r}function andCondition(r,t){for(var n=r.length,e=0;e<n;e++)if(!r[e](t))return!1;return!0}function orCondition(r,t){for(var n=r.length,e=0;e<n;e++)if(r[e](t))return!0;return!1}function noCondition(){return!0}function convertConditionArrayToFunction(r){var t=r[0],n=r[1],e=r[2];if("width"===t){if(">"===n)return function(r){return r.width>parseInt(e)};if(">="===n)return function(r){return r.width>=parseInt(e)};if("<"===n)return function(r){return r.width<parseInt(e)};if("<="===n)return function(r){return r.width<=parseInt(e)}}else if("height"===t){if(">"===n)return function(r){return r.height>parseInt(e)};if(">="===n)return function(r){return r.height>=parseInt(e)};if("<"===n)return function(r){return r.height<parseInt(e)};if("<="===n)return function(r){return r.height<=parseInt(e)}}else if("aspect-ratio"===t){if(">"===n)return function(r){return r.width/r.height>parseFloat(e)};if(">="===n)return function(r){return r.width/r.height>=parseFloat(e)};if("<"===n)return function(r){return r.width/r.height<parseFloat(e)};if("<="===n)return function(r){return r.width/r.height<=parseFloat(e)}}else if("orientation"===t)return"portrait"===e?function(r){return r.height>=r.width}:function(r){return r.height<r.width};return noCondition}function getConditionFunction(r){var t=this;return Array.isArray(r)&&0!==r.length?orCondition.bind(this,r.map(function(r){return andCondition.bind(t,r.map(convertConditionArrayToFunction))})):noCondition}function processMeta(r){if("object"!==_typeof(r)||"string"!=typeof r[containerQueryMetaBuilder.SELECTOR]||!Array.isArray(r[containerQueryMetaBuilder.QUERIES]))throw new Error("Invalid meta object. It's either not an object, or it's missing the '".concat(containerQueryMetaBuilder.SELECTOR,"' and/or the '").concat(containerQueryMetaBuilder.QUERIES,"' property."));var t=objectAssign({},r);return t[containerQueryMetaBuilder.QUERIES].forEach(function(r){r.conditionFunction=getConditionFunction(r[containerQueryMetaBuilder.CONDITIONS])}),t}function getContainerSize(r){return{width:r.clientWidth,height:r.clientHeight}}function applyStylesToElements(r,t){for(var n=t.length,e=0;e<n;e++)for(var i in r)t[e].style.setProperty(i,r[i])}var containerRegistry=new WeakMap,registry={set:function(r,t){containerRegistry.set(r,t)},get:function(r){return containerRegistry.get(r)},has:function(r){return containerRegistry.has(r)},delete:function(r){containerRegistry.delete(r)}},isInteger=function(r){return"number"==typeof r&&isFinite(r)&&Math.floor(r)===r},round=function(r,t){if(isInteger(t)){var n=Math.pow(10,t);return Math.round(r*n)/n}return Math.round(r)};function convertSingleValue(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,e=t.toLowerCase().match(/^ *(\d+(\.\d+)?)([rwhminax]+) *$/i);if(!Array.isArray(e))return t;var i=e[1],u=e[3];if("rh"!==u&&"rw"!==u&&"rmin"!==u&&"rmax"!==u)return t;var o=("rh"===u||"rmin"===u&&r.height<r.width||"rmax"===u&&r.height>r.width?r.height:r.width)*parseFloat(i)/100,s=round(o,n);return"".concat(s,"px")}function convertCompositValue(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,e=t.match(/\d+(\.\d+)?[rwhminax]+/gi);if(!Array.isArray(e))return t;var i={};e.forEach(function(t){i[t]=convertSingleValue(r,t,n)});var u=t;for(var o in i)u=u.replace(new RegExp(o,"g"),i[o]);return u}function adjustValueObjectByContainerSize(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,e=objectAssign({},t);for(var i in e)e[i]=convertCompositValue(r,e[i],n);return e}function getAffectedPropsByElementData(r){var t={};return objectAssign(t,r[containerQueryMetaBuilder.STYLES]),objectAssign(t,r[containerQueryMetaBuilder.VALUES]),Object.keys(t)}function getChangedStyles(r,t){var n=registry.get(r);if(!n)return{};for(var e=n.queryState,i=n.meta,u=n.instance,o={},s={},f=function(r){var n=i[containerQueryMetaBuilder.QUERIES][r],f="function"!=typeof n.conditionFunction||n.conditionFunction(t),a=e[r];e[r]=f,n[containerQueryMetaBuilder.ELEMENTS].forEach(function(r){var n=r[containerQueryMetaBuilder.SELECTOR]||":self";o[n]||(o[n]={addStyle:{},removeProps:[]}),s[n]||(s[n]=[]);var e=o[n],i=s[n];if(f&&a){var h={},c=0;for(var d in r[containerQueryMetaBuilder.VALUES])if(-1===i.indexOf(d)){c++,h[d]=r[containerQueryMetaBuilder.VALUES][d],i.push(d);var y=e.removeProps.indexOf(d);-1!==y&&e.removeProps.splice(y,1)}var v={};for(var g in r[containerQueryMetaBuilder.STYLES]){var E=e.removeProps.indexOf(g);-1!==E&&(e.removeProps.splice(E,1),v[g]=r[containerQueryMetaBuilder.STYLES][g]),-1===i.indexOf(g)&&i.push(g)}c>0&&objectAssign(v,adjustValueObjectByContainerSize(t,h,u.opts.valuePrecision)),objectAssign(o[n].addStyle,v)}else if(!f&&a){var M=getAffectedPropsByElementData(r),b=_difference(M,i);o[n].removeProps=_union(o[n].removeProps,b)}else if(f&&!a){var w={};for(var Q in r[containerQueryMetaBuilder.STYLES])-1===i.indexOf(Q)&&(w[Q]=r[containerQueryMetaBuilder.STYLES][Q],i.push(Q));for(var j in r[containerQueryMetaBuilder.VALUES])-1===i.indexOf(j)&&(w[j]=r[containerQueryMetaBuilder.VALUES][j],i.push(j));var B=adjustValueObjectByContainerSize(t,w,u.opts.valuePrecision);for(var O in B){var R=o[n].removeProps.indexOf(O);-1!==R&&o[n].removeProps.splice(R,1)}objectAssign(o[n].addStyle,B)}})},a=i[containerQueryMetaBuilder.QUERIES].length-1;a>=0;a--)f(a);for(var h in o)0===Object.keys(o[h].addStyle).length&&delete o[h].addStyle,0===o[h].removeProps.length&&delete o[h].removeProps;return o}var findContainerDescendants=function(r,t,n){return t===n||":self"===n?[r]:Array.prototype.slice.call(r.querySelectorAll(n)).filter(function(t){return!hasDifferentContainerParent(r,t)})},hasDifferentContainerParent=function r(t,n){var e=n.parentElement;return!(!e||e===t)&&(!!registry.has(e)||r(t,e))};function adjustContainer(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=registry.get(r);if(n){t||(t=getContainerSize(r));var e=getChangedStyles(r,t),i=function(t){if(!e[t].addStyle&&!Array.isArray(e[t].removeProps))return"continue";var i=e[t].addStyle||{};Array.isArray(e[t].removeProps)&&e[t].removeProps.forEach(function(r){i[r]=""});var u=n.meta[containerQueryMetaBuilder.SELECTOR],o=":self"===t?[r]:findContainerDescendants(r,u,t);applyStylesToElements(i,o)};for(var u in e)i(u)}}var resizeObserver=new ResizeObserver(function(r){Array.isArray(r)&&r.forEach(function(r){var t=registry.get(r.target);void 0!==t&&"object"===_typeof(t)&&"object"===_typeof(t.instance)&&"function"==typeof t.instance.adjust?t.instance.adjust({width:r.contentRect.width,height:r.contentRect.height}):console.warn("Could not find Container instance for element:",r.target)})}),mutationObserver=new MutationObserver(function(r){r.forEach(function(r){for(var t=r.removedNodes.length,n=0;n<t;n++){var e=r.removedNodes[n];registry.has(e)&&(resizeObserver.unobserve(e),registry.delete(e))}})}),Container=function(){function r(t,n){var e=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,r),this.container=t,"string"==typeof n&&(n=JSON.parse(n.slice(1,-1))),this.meta=processMeta(n),this.opts=objectAssign({adjustOnResize:!0,adjustOnInstantiation:!0,valuePrecision:0},i);registry.set(t,{instance:this,meta:n,queryState:Array.isArray(n[containerQueryMetaBuilder.QUERIES])?n[containerQueryMetaBuilder.QUERIES].map(function(){return!1}):[]}),mutationObserver.observe(this.container.parentNode,{childList:!0}),this.opts.adjustOnResize&&this.observeResize(),this.opts.adjustOnInstantiation&&raf(function(){return e.adjust()})}return _createClass(r,[{key:"observeResize",value:function(){resizeObserver.observe(this.container)}},{key:"unobserveResize",value:function(){resizeObserver.unobserve(this.container)}},{key:"adjust",value:function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;adjustContainer(this.container,r),"function"==typeof this.opts.handleResize&&this.opts.handleResize(r)}}]),r}();module.exports=Container; |
@@ -1,1 +0,1 @@ | ||
import WeakMap from"es6-weak-map";import _union from"lodash/union";import _difference from"lodash/difference";import objectAssign from"object-assign";import ResizeObserver from"resize-observer-polyfill";import MutationObserver from"mutation-observer";import raf from"raf";import{SELECTOR,CONDITIONS,QUERIES,STYLES,VALUES,ELEMENTS}from"@zeecoder/container-query-meta-builder";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function andCondition(e,t){for(var r=e.length,n=0;n<r;n++)if(!e[n](t))return!1;return!0}function orCondition(e,t){for(var r=e.length,n=0;n<r;n++)if(e[n](t))return!0;return!1}function noCondition(){return!0}function convertConditionArrayToFunction(e){var t=e[0],r=e[1],n=e[2];if("width"===t){if(">"===r)return function(e){return e.width>parseInt(n)};if(">="===r)return function(e){return e.width>=parseInt(n)};if("<"===r)return function(e){return e.width<parseInt(n)};if("<="===r)return function(e){return e.width<=parseInt(n)}}else if("height"===t){if(">"===r)return function(e){return e.height>parseInt(n)};if(">="===r)return function(e){return e.height>=parseInt(n)};if("<"===r)return function(e){return e.height<parseInt(n)};if("<="===r)return function(e){return e.height<=parseInt(n)}}else if("aspect-ratio"===t){if(">"===r)return function(e){return e.width/e.height>parseFloat(n)};if(">="===r)return function(e){return e.width/e.height>=parseFloat(n)};if("<"===r)return function(e){return e.width/e.height<parseFloat(n)};if("<="===r)return function(e){return e.width/e.height<=parseFloat(n)}}else if("orientation"===t)return"portrait"===n?function(e){return e.height>=e.width}:function(e){return e.height<e.width};return noCondition}function getConditionFunction(e){var t=this;return Array.isArray(e)&&0!==e.length?orCondition.bind(this,e.map(function(e){return andCondition.bind(t,e.map(convertConditionArrayToFunction))})):noCondition}function processMeta(e){if("object"!==_typeof(e)||"string"!=typeof e[SELECTOR]||!Array.isArray(e[QUERIES]))throw new Error("Invalid meta object. It's either not an object, or it's missing the '".concat(SELECTOR,"' and/or the '").concat(QUERIES,"' property."));var t=objectAssign({},e);return t[QUERIES].forEach(function(e){e.conditionFunction=getConditionFunction(e[CONDITIONS])}),t}function getContainerSize(e){return{width:e.clientWidth,height:e.clientHeight}}function applyStylesToElements(e,t){for(var r=t.length,n=0;n<r;n++)for(var i in e)t[n].style.setProperty(i,e[i])}var containerRegistry=new WeakMap,registry={set:function(e,t){containerRegistry.set(e,t)},get:function(e){return containerRegistry.get(e)},has:function(e){return containerRegistry.has(e)},delete:function(e){containerRegistry.delete(e)}};function convertSingleValue(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=t.toLowerCase().match(/^ *(\d+(\.\d+)?)([rwhminax]+) *$/i);if(!Array.isArray(n))return t;var i=n[1],o=n[3];if("rh"!==o&&"rw"!==o&&"rmin"!==o&&"rmax"!==o)return t;var a=("rh"===o||"rmin"===o&&e.height<e.width||"rmax"===o&&e.height>e.width?e.height:e.width)*parseFloat(i)/100;return"".concat(a.toFixed(r),"px")}function convertCompositValue(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=t.match(/\d+(\.\d+)?[rwhminax]+/gi);if(!Array.isArray(n))return t;var i={};n.forEach(function(t){i[t]=convertSingleValue(e,t,r)});var o=t;for(var a in i)o=o.replace(new RegExp(a,"g"),i[a]);return o}function adjustValueObjectByContainerSize(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=objectAssign({},t);for(var i in n)n[i]=convertCompositValue(e,n[i],r);return n}function getAffectedPropsByElementData(e){var t={};return objectAssign(t,e[STYLES]),objectAssign(t,e[VALUES]),Object.keys(t)}function getChangedStyles(e,t){var r=registry.get(e);if(!r)return{};for(var n=r.queryState,i=r.meta,o=r.instance,a={},s={},u=function(e){var r=i[QUERIES][e],u="function"!=typeof r.conditionFunction||r.conditionFunction(t),f=n[e];n[e]=u,r[ELEMENTS].forEach(function(e){var r=e[SELECTOR]||":self";a[r]||(a[r]={addStyle:{},removeProps:[]}),s[r]||(s[r]=[]);var n=a[r],i=s[r];if(u&&f){var c={},l=0;for(var h in e[VALUES])if(-1===i.indexOf(h)){l++,c[h]=e[VALUES][h],i.push(h);var d=n.removeProps.indexOf(h);-1!==d&&n.removeProps.splice(d,1)}var v={};for(var p in e[STYLES]){var y=n.removeProps.indexOf(p);-1!==y&&(n.removeProps.splice(y,1),v[p]=e[STYLES][p]),-1===i.indexOf(p)&&i.push(p)}l>0&&objectAssign(v,adjustValueObjectByContainerSize(t,c,o.opts.valuePrecision)),objectAssign(a[r].addStyle,v)}else if(!u&&f){var g=getAffectedPropsByElementData(e),m=_difference(g,i);a[r].removeProps=_union(a[r].removeProps,m)}else if(u&&!f){var S={};for(var E in e[STYLES])-1===i.indexOf(E)&&(S[E]=e[STYLES][E],i.push(E));for(var b in e[VALUES])-1===i.indexOf(b)&&(S[b]=e[VALUES][b],i.push(b));var C=adjustValueObjectByContainerSize(t,S,o.opts.valuePrecision);for(var A in C){var O=a[r].removeProps.indexOf(A);-1!==O&&a[r].removeProps.splice(O,1)}objectAssign(a[r].addStyle,C)}})},f=i[QUERIES].length-1;f>=0;f--)u(f);for(var c in a)0===Object.keys(a[c].addStyle).length&&delete a[c].addStyle,0===a[c].removeProps.length&&delete a[c].removeProps;return a}var findContainerDescendants=function(e,t,r){return t===r||":self"===r?[e]:Array.prototype.slice.call(e.querySelectorAll(r)).filter(function(t){return!hasDifferentContainerParent(e,t)})},hasDifferentContainerParent=function e(t,r){var n=r.parentElement;return!(!n||n===t)&&(!!registry.has(n)||e(t,n))};function adjustContainer(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=registry.get(e);if(r){t||(t=getContainerSize(e));var n=getChangedStyles(e,t),i=function(t){if(!n[t].addStyle&&!Array.isArray(n[t].removeProps))return"continue";var i=n[t].addStyle||{};Array.isArray(n[t].removeProps)&&n[t].removeProps.forEach(function(e){i[e]=""});var o=r.meta[SELECTOR],a=":self"===t?[e]:findContainerDescendants(e,o,t);applyStylesToElements(i,a)};for(var o in n)i(o)}}var resizeObserver=new ResizeObserver(function(e){Array.isArray(e)&&e.forEach(function(e){var t=registry.get(e.target);void 0!==t&&"object"===_typeof(t)&&"object"===_typeof(t.instance)&&"function"==typeof t.instance.adjust?t.instance.adjust({width:e.contentRect.width,height:e.contentRect.height}):console.warn("Could not find Container instance for element:",e.target)})}),mutationObserver=new MutationObserver(function(e){e.forEach(function(e){for(var t=e.removedNodes.length,r=0;r<t;r++){var n=e.removedNodes[r];registry.has(n)&&(resizeObserver.unobserve(n),registry.delete(n))}})}),Container=function(){function e(t,r){var n=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,e),this.container=t,"string"==typeof r&&(r=JSON.parse(r.slice(1,-1))),this.meta=processMeta(r),this.opts=objectAssign({adjustOnResize:!0,adjustOnInstantiation:!0,valuePrecision:2},i);registry.set(t,{instance:this,meta:r,queryState:Array.isArray(r[QUERIES])?r[QUERIES].map(function(){return!1}):[]}),mutationObserver.observe(this.container.parentNode,{childList:!0}),this.opts.adjustOnResize&&this.observeResize(),this.opts.adjustOnInstantiation&&raf(function(){return n.adjust()})}return _createClass(e,[{key:"observeResize",value:function(){resizeObserver.observe(this.container)}},{key:"unobserveResize",value:function(){resizeObserver.unobserve(this.container)}},{key:"adjust",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;adjustContainer(this.container,e),"function"==typeof this.opts.handleResize&&this.opts.handleResize(e)}}]),e}();export default Container; | ||
import WeakMap from"es6-weak-map";import _union from"lodash/union";import _difference from"lodash/difference";import objectAssign from"object-assign";import ResizeObserver from"resize-observer-polyfill";import MutationObserver from"mutation-observer";import raf from"raf";import{SELECTOR,CONDITIONS,QUERIES,STYLES,VALUES,ELEMENTS}from"@zeecoder/container-query-meta-builder";function _typeof(r){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r})(r)}function _classCallCheck(r,t){if(!(r instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(r,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(r,i.key,i)}}function _createClass(r,t,n){return t&&_defineProperties(r.prototype,t),n&&_defineProperties(r,n),r}function andCondition(r,t){for(var n=r.length,i=0;i<n;i++)if(!r[i](t))return!1;return!0}function orCondition(r,t){for(var n=r.length,i=0;i<n;i++)if(r[i](t))return!0;return!1}function noCondition(){return!0}function convertConditionArrayToFunction(r){var t=r[0],n=r[1],i=r[2];if("width"===t){if(">"===n)return function(r){return r.width>parseInt(i)};if(">="===n)return function(r){return r.width>=parseInt(i)};if("<"===n)return function(r){return r.width<parseInt(i)};if("<="===n)return function(r){return r.width<=parseInt(i)}}else if("height"===t){if(">"===n)return function(r){return r.height>parseInt(i)};if(">="===n)return function(r){return r.height>=parseInt(i)};if("<"===n)return function(r){return r.height<parseInt(i)};if("<="===n)return function(r){return r.height<=parseInt(i)}}else if("aspect-ratio"===t){if(">"===n)return function(r){return r.width/r.height>parseFloat(i)};if(">="===n)return function(r){return r.width/r.height>=parseFloat(i)};if("<"===n)return function(r){return r.width/r.height<parseFloat(i)};if("<="===n)return function(r){return r.width/r.height<=parseFloat(i)}}else if("orientation"===t)return"portrait"===i?function(r){return r.height>=r.width}:function(r){return r.height<r.width};return noCondition}function getConditionFunction(r){var t=this;return Array.isArray(r)&&0!==r.length?orCondition.bind(this,r.map(function(r){return andCondition.bind(t,r.map(convertConditionArrayToFunction))})):noCondition}function processMeta(r){if("object"!==_typeof(r)||"string"!=typeof r[SELECTOR]||!Array.isArray(r[QUERIES]))throw new Error("Invalid meta object. It's either not an object, or it's missing the '".concat(SELECTOR,"' and/or the '").concat(QUERIES,"' property."));var t=objectAssign({},r);return t[QUERIES].forEach(function(r){r.conditionFunction=getConditionFunction(r[CONDITIONS])}),t}function getContainerSize(r){return{width:r.clientWidth,height:r.clientHeight}}function applyStylesToElements(r,t){for(var n=t.length,i=0;i<n;i++)for(var s in r)t[i].style.setProperty(s,r[s])}var containerRegistry=new WeakMap,registry={set:function(r,t){containerRegistry.set(r,t)},get:function(r){return containerRegistry.get(r)},has:function(r){return containerRegistry.has(r)},delete:function(r){containerRegistry.delete(r)}},isInteger=function(r){return"number"==typeof r&&isFinite(r)&&Math.floor(r)===r},round=function(r,t){if(isInteger(t)){var n=Math.pow(10,t);return Math.round(r*n)/n}return Math.round(r)};function convertSingleValue(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,i=t.toLowerCase().match(/^ *(\d+(\.\d+)?)([rwhminax]+) *$/i);if(!Array.isArray(i))return t;var s=i[1],f=i[3];if("rh"!==f&&"rw"!==f&&"rmin"!==f&&"rmax"!==f)return t;var o=("rh"===f||"rmin"===f&&r.height<r.width||"rmax"===f&&r.height>r.width?r.height:r.width)*parseFloat(s)/100,u=round(o,n);return"".concat(u,"px")}function convertCompositValue(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,i=t.match(/\d+(\.\d+)?[rwhminax]+/gi);if(!Array.isArray(i))return t;var s={};i.forEach(function(t){s[t]=convertSingleValue(r,t,n)});var f=t;for(var o in s)f=f.replace(new RegExp(o,"g"),s[o]);return f}function adjustValueObjectByContainerSize(r,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,i=objectAssign({},t);for(var s in i)i[s]=convertCompositValue(r,i[s],n);return i}function getAffectedPropsByElementData(r){var t={};return objectAssign(t,r[STYLES]),objectAssign(t,r[VALUES]),Object.keys(t)}function getChangedStyles(r,t){var n=registry.get(r);if(!n)return{};for(var i=n.queryState,s=n.meta,f=n.instance,o={},u={},e=function(r){var n=s[QUERIES][r],e="function"!=typeof n.conditionFunction||n.conditionFunction(t),h=i[r];i[r]=e,n[ELEMENTS].forEach(function(r){var n=r[SELECTOR]||":self";o[n]||(o[n]={addStyle:{},removeProps:[]}),u[n]||(u[n]=[]);var i=o[n],s=u[n];if(e&&h){var a={},c=0;for(var d in r[VALUES])if(-1===s.indexOf(d)){c++,a[d]=r[VALUES][d],s.push(d);var v=i.removeProps.indexOf(d);-1!==v&&i.removeProps.splice(v,1)}var g={};for(var y in r[STYLES]){var E=i.removeProps.indexOf(y);-1!==E&&(i.removeProps.splice(E,1),g[y]=r[STYLES][y]),-1===s.indexOf(y)&&s.push(y)}c>0&&objectAssign(g,adjustValueObjectByContainerSize(t,a,f.opts.valuePrecision)),objectAssign(o[n].addStyle,g)}else if(!e&&h){var m=getAffectedPropsByElementData(r),b=_difference(m,s);o[n].removeProps=_union(o[n].removeProps,b)}else if(e&&!h){var w={};for(var O in r[STYLES])-1===s.indexOf(O)&&(w[O]=r[STYLES][O],s.push(O));for(var j in r[VALUES])-1===s.indexOf(j)&&(w[j]=r[VALUES][j],s.push(j));var I=adjustValueObjectByContainerSize(t,w,f.opts.valuePrecision);for(var R in I){var C=o[n].removeProps.indexOf(R);-1!==C&&o[n].removeProps.splice(C,1)}objectAssign(o[n].addStyle,I)}})},h=s[QUERIES].length-1;h>=0;h--)e(h);for(var a in o)0===Object.keys(o[a].addStyle).length&&delete o[a].addStyle,0===o[a].removeProps.length&&delete o[a].removeProps;return o}var findContainerDescendants=function(r,t,n){return t===n||":self"===n?[r]:Array.prototype.slice.call(r.querySelectorAll(n)).filter(function(t){return!hasDifferentContainerParent(r,t)})},hasDifferentContainerParent=function r(t,n){var i=n.parentElement;return!(!i||i===t)&&(!!registry.has(i)||r(t,i))};function adjustContainer(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=registry.get(r);if(n){t||(t=getContainerSize(r));var i=getChangedStyles(r,t),s=function(t){if(!i[t].addStyle&&!Array.isArray(i[t].removeProps))return"continue";var s=i[t].addStyle||{};Array.isArray(i[t].removeProps)&&i[t].removeProps.forEach(function(r){s[r]=""});var f=n.meta[SELECTOR],o=":self"===t?[r]:findContainerDescendants(r,f,t);applyStylesToElements(s,o)};for(var f in i)s(f)}}var resizeObserver=new ResizeObserver(function(r){Array.isArray(r)&&r.forEach(function(r){var t=registry.get(r.target);void 0!==t&&"object"===_typeof(t)&&"object"===_typeof(t.instance)&&"function"==typeof t.instance.adjust?t.instance.adjust({width:r.contentRect.width,height:r.contentRect.height}):console.warn("Could not find Container instance for element:",r.target)})}),mutationObserver=new MutationObserver(function(r){r.forEach(function(r){for(var t=r.removedNodes.length,n=0;n<t;n++){var i=r.removedNodes[n];registry.has(i)&&(resizeObserver.unobserve(i),registry.delete(i))}})}),Container=function(){function r(t,n){var i=this,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,r),this.container=t,"string"==typeof n&&(n=JSON.parse(n.slice(1,-1))),this.meta=processMeta(n),this.opts=objectAssign({adjustOnResize:!0,adjustOnInstantiation:!0,valuePrecision:0},s);registry.set(t,{instance:this,meta:n,queryState:Array.isArray(n[QUERIES])?n[QUERIES].map(function(){return!1}):[]}),mutationObserver.observe(this.container.parentNode,{childList:!0}),this.opts.adjustOnResize&&this.observeResize(),this.opts.adjustOnInstantiation&&raf(function(){return i.adjust()})}return _createClass(r,[{key:"observeResize",value:function(){resizeObserver.observe(this.container)}},{key:"unobserveResize",value:function(){resizeObserver.unobserve(this.container)}},{key:"adjust",value:function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;adjustContainer(this.container,r),"function"==typeof this.opts.handleResize&&this.opts.handleResize(r)}}]),r}();export default Container; |
@@ -6,3 +6,3 @@ { | ||
"license": "MIT", | ||
"version": "3.0.0-alpha.2", | ||
"version": "3.0.0-alpha.3", | ||
"author": "Viktor Hubert <rpgmorpheus@gmail.com>", | ||
@@ -19,3 +19,4 @@ "main": "dist/bundle.cjs.js", | ||
"size:why": "size-limit --why", | ||
"prepublish": "yarn build" | ||
"prepare": "yarn build", | ||
"prepublishOnly": "yarn test" | ||
}, | ||
@@ -38,3 +39,3 @@ "devDependencies": { | ||
"dependencies": { | ||
"@zeecoder/container-query-meta-builder": "^3.0.0-alpha.2", | ||
"@zeecoder/container-query-meta-builder": "^3.0.0-alpha.3", | ||
"es6-weak-map": "^2.0.2", | ||
@@ -68,3 +69,3 @@ "lodash": "^4.17.4", | ||
}, | ||
"gitHead": "b9838e214cc8bf81d561d91a7e678993c119d224" | ||
"gitHead": "0462f82a4c558d5c639433c1cf13c45e91733a20" | ||
} |
92
20979
6