UNPKG

react-carousel-query

Version:

A infinite carousel component made with react that handles the pagination for you.

417 lines (307 loc) 15.8 kB
"use strict"; function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } require("core-js/modules/es.symbol.js"); require("core-js/modules/es.symbol.description.js"); require("core-js/modules/es.symbol.iterator.js"); require("core-js/modules/es.function.name.js"); require("core-js/modules/es.array.from.js"); require("core-js/modules/es.weak-map.js"); require("core-js/modules/es.object.get-own-property-descriptor.js"); Object.defineProperty(exports, "__esModule", { value: true }); exports.PostmsgTransport = exports.KEY = void 0; exports.default = createChannel; require("core-js/modules/es.array.iterator.js"); require("core-js/modules/es.object.from-entries.js"); require("core-js/modules/es.array.filter.js"); require("core-js/modules/es.object.to-string.js"); require("core-js/modules/es.object.entries.js"); require("core-js/modules/es.object.assign.js"); require("core-js/modules/es.number.is-integer.js"); require("core-js/modules/es.number.constructor.js"); require("core-js/modules/es.regexp.exec.js"); require("core-js/modules/es.string.search.js"); require("core-js/modules/es.promise.js"); require("core-js/modules/web.dom-collections.for-each.js"); require("core-js/modules/es.array.map.js"); require("core-js/modules/es.array.includes.js"); require("core-js/modules/es.string.includes.js"); require("core-js/modules/es.object.values.js"); require("core-js/modules/es.array.concat.js"); require("core-js/modules/es.string.iterator.js"); require("core-js/modules/web.dom-collections.iterator.js"); require("core-js/modules/web.url.js"); require("core-js/modules/web.url-search-params.js"); require("core-js/modules/es.array.slice.js"); var _global = _interopRequireDefault(require("global")); var EVENTS = _interopRequireWildcard(require("@storybook/core-events")); var _channels = _interopRequireDefault(require("@storybook/channels")); var _clientLogger = require("@storybook/client-logger"); var _telejson = require("telejson"); var _qs = _interopRequireDefault(require("qs")); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 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."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } var globalWindow = _global.default.window, document = _global.default.document, location = _global.default.location; var KEY = 'storybook-channel'; exports.KEY = KEY; var defaultEventOptions = { allowFunction: true, maxDepth: 25 }; // TODO: we should export a method for opening child windows here and keep track of em. // that way we can send postMessage to child windows as well, not just iframe // https://stackoverflow.com/questions/6340160/how-to-get-the-references-of-all-already-opened-child-windows var PostmsgTransport = /*#__PURE__*/function () { function PostmsgTransport(config) { _classCallCheck(this, PostmsgTransport); this.config = config; this.buffer = void 0; this.handler = void 0; this.connected = void 0; this.buffer = []; this.handler = null; globalWindow.addEventListener('message', this.handleEvent.bind(this), false); // Check whether the config.page parameter has a valid value if (config.page !== 'manager' && config.page !== 'preview') { throw new Error("postmsg-channel: \"config.page\" cannot be \"".concat(config.page, "\"")); } } _createClass(PostmsgTransport, [{ key: "setHandler", value: function setHandler(handler) { var _this = this; this.handler = function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } handler.apply(_this, args); if (!_this.connected && _this.getLocalFrame().length) { _this.flush(); _this.connected = true; } }; } /** * Sends `event` to the associated window. If the window does not yet exist * the event will be stored in a buffer and sent when the window exists. * @param event */ }, { key: "send", value: function send(event, options) { var _this2 = this; var _ref = options || {}, target = _ref.target, allowRegExp = _ref.allowRegExp, allowFunction = _ref.allowFunction, allowSymbol = _ref.allowSymbol, allowDate = _ref.allowDate, allowUndefined = _ref.allowUndefined, allowClass = _ref.allowClass, maxDepth = _ref.maxDepth, space = _ref.space, lazyEval = _ref.lazyEval; var eventOptions = Object.fromEntries(Object.entries({ allowRegExp: allowRegExp, allowFunction: allowFunction, allowSymbol: allowSymbol, allowDate: allowDate, allowUndefined: allowUndefined, allowClass: allowClass, maxDepth: maxDepth, space: space, lazyEval: lazyEval }).filter(function (_ref2) { var _ref3 = _slicedToArray(_ref2, 2), k = _ref3[0], v = _ref3[1]; return typeof v !== 'undefined'; })); var stringifyOptions = Object.assign({}, defaultEventOptions, _global.default.CHANNEL_OPTIONS || {}, eventOptions); // backwards compat: convert depth to maxDepth if (options && Number.isInteger(options.depth)) { stringifyOptions.maxDepth = options.depth; } var frames = this.getFrames(target); var query = _qs.default.parse(location.search, { ignoreQueryPrefix: true }); var data = (0, _telejson.stringify)({ key: KEY, event: event, refId: query.refId }, stringifyOptions); if (!frames.length) { return new Promise(function (resolve, reject) { _this2.buffer.push({ event: event, resolve: resolve, reject: reject }); }); } if (this.buffer.length) { this.flush(); } frames.forEach(function (f) { try { f.postMessage(data, '*'); } catch (e) { console.error('sending over postmessage fail'); } }); return Promise.resolve(null); } }, { key: "flush", value: function flush() { var _this3 = this; var buffer = this.buffer; this.buffer = []; buffer.forEach(function (item) { _this3.send(item.event).then(item.resolve).catch(item.reject); }); } }, { key: "getFrames", value: function getFrames(target) { if (this.config.page === 'manager') { var nodes = _toConsumableArray(document.querySelectorAll('iframe[data-is-storybook][data-is-loaded]')); var list = nodes.filter(function (e) { try { return !!e.contentWindow && e.dataset.isStorybook !== undefined && e.id === target; } catch (er) { return false; } }).map(function (e) { return e.contentWindow; }); return list.length ? list : this.getCurrentFrames(); } if (globalWindow && globalWindow.parent && globalWindow.parent !== globalWindow) { return [globalWindow.parent]; } return []; } }, { key: "getCurrentFrames", value: function getCurrentFrames() { if (this.config.page === 'manager') { var list = _toConsumableArray(document.querySelectorAll('[data-is-storybook="true"]')); return list.map(function (e) { return e.contentWindow; }); } if (globalWindow && globalWindow.parent) { return [globalWindow.parent]; } return []; } }, { key: "getLocalFrame", value: function getLocalFrame() { if (this.config.page === 'manager') { var list = _toConsumableArray(document.querySelectorAll('#storybook-preview-iframe')); return list.map(function (e) { return e.contentWindow; }); } if (globalWindow && globalWindow.parent) { return [globalWindow.parent]; } return []; } }, { key: "handleEvent", value: function handleEvent(rawEvent) { try { var data = rawEvent.data; var _ref4 = typeof data === 'string' && (0, _telejson.isJSON)(data) ? (0, _telejson.parse)(data, _global.default.CHANNEL_OPTIONS || {}) : data, key = _ref4.key, event = _ref4.event, refId = _ref4.refId; if (key === KEY) { var pageString = this.config.page === 'manager' ? "<span style=\"color: #37D5D3; background: black\"> manager </span>" : "<span style=\"color: #1EA7FD; background: black\"> preview </span>"; var eventString = Object.values(EVENTS).includes(event.type) ? "<span style=\"color: #FF4785\">".concat(event.type, "</span>") : "<span style=\"color: #FFAE00\">".concat(event.type, "</span>"); if (refId) { event.refId = refId; } event.source = this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent); if (!event.source) { _clientLogger.pretty.error("".concat(pageString, " received ").concat(eventString, " but was unable to determine the source of the event")); return; } var message = "".concat(pageString, " received ").concat(eventString, " (").concat(data.length, ")"); _clientLogger.pretty.debug.apply(_clientLogger.pretty, [location.origin !== event.source ? message : "".concat(message, " <span style=\"color: gray\">(on ").concat(location.origin, " from ").concat(event.source, ")</span>")].concat(_toConsumableArray(event.args))); this.handler(event); } } catch (error) { _clientLogger.logger.error(error); } } }]); return PostmsgTransport; }(); exports.PostmsgTransport = PostmsgTransport; var getEventSourceUrl = function getEventSourceUrl(event) { var frames = _toConsumableArray(document.querySelectorAll('iframe[data-is-storybook]')); // try to find the originating iframe by matching it's contentWindow // This might not be cross-origin safe var _frames$filter = frames.filter(function (element) { try { return element.contentWindow === event.source; } catch (err) {// continue } var src = element.getAttribute('src'); var origin; try { var _URL = new URL(src, document.location); origin = _URL.origin; } catch (err) { return false; } return origin === event.origin; }), _frames$filter2 = _toArray(_frames$filter), frame = _frames$filter2[0], remainder = _frames$filter2.slice(1); if (frame && remainder.length === 0) { var src = frame.getAttribute('src'); var _URL2 = new URL(src, document.location), protocol = _URL2.protocol, host = _URL2.host, pathname = _URL2.pathname; return "".concat(protocol, "//").concat(host).concat(pathname); } if (remainder.length > 0) { // If we found multiple matches, there's going to be trouble _clientLogger.logger.error('found multiple candidates for event source'); } // If we found no frames of matches return null; }; /** * Creates a channel which communicates with an iframe or child window. */ function createChannel(_ref5) { var page = _ref5.page; var transport = new PostmsgTransport({ page: page }); return new _channels.default({ transport: transport }); }