Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Commit

Permalink
1.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniandl
daniandl committed Nov 14, 2020
1 parent 513fc3f commit fa5cf5c
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 48 deletions.
6 changes: 3 additions & 3 deletions dist/element-queries.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/element-queries.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

92 changes: 54 additions & 38 deletions lib/ElementQueries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ exports["default"] = void 0;

var _utils = require("./utils");

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
Expand All @@ -17,6 +15,8 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
Expand Down Expand Up @@ -54,7 +54,7 @@ var ElementQueries = /*#__PURE__*/function () {

if (!('ResizeObserver' in window)) {
// not throwing to avoid breaking client's apps
console.error(_utils.Errors.NOT_SUPPORTED);
console.error((0, _utils.prefixLog)(_utils.Errors.NOT_SUPPORTED));
return;
}

Expand All @@ -81,7 +81,7 @@ var ElementQueries = /*#__PURE__*/function () {

if (this.opts.observeDom) {
if (!('MutationObserver' in window)) {
console.error(_utils.Errors.NOT_SUPPORTED_OBSERVE);
console.error((0, _utils.prefixLog)(_utils.Errors.NOT_SUPPORTED_OBSERVE));
} else {
this.domObserver = new MutationObserver(this.onDomMutation.bind(this));
this.domObserver.observe(document.body, {
Expand Down Expand Up @@ -147,8 +147,8 @@ var ElementQueries = /*#__PURE__*/function () {
if ((0, _utils.isValidElement)(element) && hasBreakpoints) {
try {
this.watch(element);
} catch (e) {
console.error(e, element);
} catch (error) {
console.error((0, _utils.prefixLog)(error), element);
}
}
}
Expand All @@ -170,7 +170,6 @@ var ElementQueries = /*#__PURE__*/function () {
var elements = document.querySelectorAll(attrs.map(function (i) {
return "[".concat(i, "]");
}).join(','));
console.log(elements);

var _iterator = _createForOfIteratorHelper(elements),
_step;
Expand All @@ -182,7 +181,7 @@ var ElementQueries = /*#__PURE__*/function () {
try {
this.watch(element);
} catch (error) {
console.error(error, element);
console.error((0, _utils.prefixLog)(error), element);
}
}
} catch (err) {
Expand All @@ -194,45 +193,29 @@ var ElementQueries = /*#__PURE__*/function () {
/**
* Watch an element manually
* @param {HTMLElement, SVGElement} element The DOM element you would like to watch
* @param {Object} [bps] breakpoints to use instead of looking in html attributes
*/

}, {
key: "watch",
value: function watch(element) {
var _this$opts3 = this.opts,
htmlAttrBreakpoints = _this$opts3.htmlAttrBreakpoints,
htmlAttrHeightBreakpoints = _this$opts3.htmlAttrHeightBreakpoints;
var bps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

if (!element || !(0, _utils.isValidElement)(element)) {
throw new Error(_utils.Errors.INVALID_ELEMENT);
}

var breakpointAttrs = {
width: element.getAttribute(htmlAttrBreakpoints),
height: element.getAttribute(htmlAttrHeightBreakpoints)
};
if (bps) {
if (this.opts.observeDom) {
console.warn((0, _utils.prefixLog)(_utils.Errors.DOM_OBSERVE_CONFLICT));
}

if (!Object.values(breakpointAttrs).filter(Boolean).length) {
throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
if (_typeof(bps) !== 'object' || !bps.width && !bps.height) {
throw new Error(_utils.Errors.BREAKPOINTS_INVALID);
}
}

var breakpoints = Object.entries(breakpointAttrs).reduce(function (acc, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
v = _ref2[1];

if (!v) return acc;

var matches = _toConsumableArray((0, _utils.removeWhitespace)(v).matchAll(_utils.BREAKPOINT_REGEX));

if (!matches) return acc;
acc[k] = matches.reduce(function (accumulator, match) {
if (!match[1] || !match[2]) return accumulator;
accumulator[match[1]] = +match[2];
return accumulator;
}, {});
return acc;
}, {});
var breakpoints = bps || this.getBreakpointsFromAttrs(element);

if (!Object.values(breakpoints).filter(Boolean).length) {
throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
Expand Down Expand Up @@ -281,10 +264,10 @@ var ElementQueries = /*#__PURE__*/function () {
if (!entry || !ElementQueries.hasBreakpoints(entry)) return {
v: void 0
};
var activeBreakpoints = Object.entries(entry.breakpoints).reduce(function (acc, _ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
k = _ref4[0],
bps = _ref4[1];
var activeBreakpoints = Object.entries(entry.breakpoints).reduce(function (acc, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
bps = _ref2[1];

acc[k] = ElementQueries.getActiveBreakpoint(entry[k], bps);
return acc;
Expand Down Expand Up @@ -322,6 +305,39 @@ var ElementQueries = /*#__PURE__*/function () {
this.elements = new WeakMap();
} // internal

}, {
key: "getBreakpointsFromAttrs",
value: function getBreakpointsFromAttrs(element) {
var _this$opts3 = this.opts,
htmlAttrBreakpoints = _this$opts3.htmlAttrBreakpoints,
htmlAttrHeightBreakpoints = _this$opts3.htmlAttrHeightBreakpoints;
var breakpointAttrs = {
width: element.getAttribute(htmlAttrBreakpoints),
height: element.getAttribute(htmlAttrHeightBreakpoints)
};

if (!Object.values(breakpointAttrs).filter(Boolean).length) {
throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
}

return Object.entries(breakpointAttrs).reduce(function (acc, _ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
k = _ref4[0],
v = _ref4[1];

if (!v) return acc;

var matches = _toConsumableArray((0, _utils.removeWhitespace)(v).matchAll(_utils.BREAKPOINT_REGEX));

if (!matches) return acc;
acc[k] = matches.reduce(function (accumulator, match) {
if (!match[1] || !match[2]) return accumulator;
accumulator[match[1]] = +match[2];
return accumulator;
}, {});
return acc;
}, {});
}
}], [{
key: "hasBreakpoints",
value: function hasBreakpoints(entry) {
Expand Down
Loading

0 comments on commit fa5cf5c

Please sign in to comment.