{ "version": 3, "sources": ["../../../node_modules/@rails/actioncable/src/adapters.js", "../../../node_modules/@rails/actioncable/src/logger.js", "../../../node_modules/@rails/actioncable/src/connection_monitor.js", "../../../node_modules/@rails/actioncable/src/internal.js", "../../../node_modules/@rails/actioncable/src/connection.js", "../../../node_modules/@rails/actioncable/src/subscription.js", "../../../node_modules/@rails/actioncable/src/subscription_guarantor.js", "../../../node_modules/@rails/actioncable/src/subscriptions.js", "../../../node_modules/@rails/actioncable/src/consumer.js", "../../../node_modules/@rails/actioncable/src/index.js", "../../../node_modules/outlayer/node_modules/ev-emitter/ev-emitter.js", "../../../node_modules/get-size/get-size.js", "../../../node_modules/desandro-matches-selector/matches-selector.js", "../../../node_modules/fizzy-ui-utils/utils.js", "../../../node_modules/outlayer/item.js", "../../../node_modules/outlayer/outlayer.js", "../../../node_modules/masonry-layout/masonry.js", "../../../node_modules/ev-emitter/ev-emitter.js", "../../../node_modules/imagesloaded/imagesloaded.js", "webpack:///webpack/universalModuleDefinition", "webpack:///webpack/bootstrap", "webpack:///webpack/runtime/define%20property%20getters", "webpack:///webpack/runtime/hasOwnProperty%20shorthand", "webpack:///webpack/runtime/make%20namespace%20object", "webpack:///src/js/utils/utils.js", "webpack:///src/js/utils/color.js", "webpack:///src/js/utils/hsvacolor.js", "webpack:///src/js/libs/moveable.js", "webpack:///src/js/libs/selectable.js", "webpack:///src/js/template.js", "webpack:///node_modules/.pnpm/nanopop@2.4.2/node_modules/nanopop/dist/nanopop.mjs", "webpack:///src/js/pickr.js", "../../../src/js/util/util.js", "../../../src/js/util/dom-events.js", "../../../src/js/util/viewport-size.js", "../../../src/js/slide/pan-bounds.js", "../../../src/js/slide/zoom-level.js", "../../../src/js/slide/slide.js", "../../../src/js/gestures/drag-handler.js", "../../../src/js/gestures/zoom-handler.js", "../../../src/js/gestures/tap-handler.js", "../../../src/js/gestures/gestures.js", "../../../src/js/main-scroll.js", "../../../src/js/keyboard.js", "../../../src/js/util/css-animation.js", "../../../src/js/util/spring-easer.js", "../../../src/js/util/spring-animation.js", "../../../src/js/util/animations.js", "../../../src/js/scroll-wheel.js", "../../../src/js/ui/ui-element.js", "../../../src/js/ui/button-arrow.js", "../../../src/js/ui/button-close.js", "../../../src/js/ui/button-zoom.js", "../../../src/js/ui/loading-indicator.js", "../../../src/js/ui/counter-indicator.js", "../../../src/js/ui/ui.js", "../../../src/js/slide/get-thumb-bounds.js", "../../../src/js/core/eventable.js", "../../../src/js/slide/placeholder.js", "../../../src/js/slide/content.js", "../../../src/js/slide/loader.js", "../../../src/js/core/base.js", "../../../src/js/opener.js", "../../../src/js/photoswipe.js", "../../../node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/snakeize.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable_stream_source_element.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/fetch_requests.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/index.js", "../../../node_modules/@hotwired/stimulus/dist/stimulus.js", "../../javascript/controllers/application.js", "../../javascript/controllers/image_card_controller.js", "../../javascript/controllers/images_list_controller.js", "../../javascript/controllers/game_controller.js", "../../javascript/controllers/railsui/select_all_controller.js", "../../../node_modules/stimulus-use/dist/index.js", "../../javascript/controllers/railsui/visibility_controller.js", "../../javascript/controllers/railsui/properties_controller.js", "../../../node_modules/hotkeys-js/dist/hotkeys.esm.js", "../../javascript/controllers/railsui/search_controller.js", "../../../node_modules/apexcharts/dist/apexcharts.esm.js", "../../javascript/controllers/railsui/insight_chart_controller.js", "../../javascript/controllers/railsui/help_search_controller.js", "../../javascript/controllers/railsui/scroll_spy_controller.js", "../../javascript/controllers/railsui/dark_mode_controller.js", "../../javascript/controllers/railsui/auto_expand_text_area_controller.js", "../../javascript/controllers/railsui/inbox_controller.js", "../../javascript/controllers/railsui/smooth_scroll_controller.js", "../../../src/js/util/util.js", "../../../src/js/core/eventable.js", "../../../src/js/slide/placeholder.js", "../../../src/js/slide/content.js", "../../../src/js/util/viewport-size.js", "../../../src/js/slide/zoom-level.js", "../../../src/js/slide/loader.js", "../../../src/js/core/base.js", "../../../src/js/lightbox/lightbox.js", "../../javascript/controllers/railsui/gallery_controller.js", "../../javascript/controllers/railsui/insights_controller.js", "../../javascript/controllers/railsui/pricing_controller.js", "../../javascript/controllers/railsui/nav_controller.js", "../../javascript/controllers/railsui/counter_input_controller.js", "../../../node_modules/railsui-stimulus/dist/railsui-stimulus.module.js", "../../javascript/controllers/railsui/index.js", "../../javascript/controllers/index.js", "../../../node_modules/trix/src/trix/config/attachments.js", "../../../node_modules/trix/src/trix/config/block_attributes.js", "../../../node_modules/trix/src/trix/config/browser.js", "../../../node_modules/trix/src/trix/config/dompurify.js", "../../../node_modules/trix/src/trix/config/lang.js", "../../../node_modules/trix/src/trix/config/file_size_formatting.js", "../../../node_modules/trix/src/trix/constants.js", "../../../node_modules/trix/src/trix/core/helpers/extend.js", "../../../node_modules/trix/src/trix/core/helpers/dom.js", "../../../node_modules/trix/src/trix/config/input.js", "../../../node_modules/trix/src/trix/config/key_names.js", "../../../node_modules/trix/src/trix/config/parser.js", "../../../node_modules/trix/src/trix/config/text_attributes.js", "../../../node_modules/trix/src/trix/config/toolbar.js", "../../../node_modules/trix/src/trix/config/undo.js", "../../../node_modules/trix/src/trix/config/css.js", "../../../node_modules/trix/src/trix/core/basic_object.js", "../../../node_modules/trix/src/trix/core/utilities/utf16_string.js", "../../../node_modules/trix/src/trix/core/object.js", "../../../node_modules/trix/src/trix/core/helpers/arrays.js", "../../../node_modules/trix/src/trix/core/helpers/bidi.js", "../../../node_modules/trix/src/trix/core/helpers/config.js", "../../../node_modules/trix/src/trix/core/helpers/custom_elements.js", "../../../node_modules/trix/src/trix/core/helpers/events.js", "../../../node_modules/trix/src/trix/core/helpers/functions.js", "../../../node_modules/trix/src/trix/core/helpers/objects.js", "../../../node_modules/trix/src/trix/core/helpers/ranges.js", "../../../node_modules/trix/src/trix/observers/selection_change_observer.js", "../../../node_modules/trix/src/trix/core/helpers/strings.js", "../../../node_modules/trix/src/trix/core/collections/hash.js", "../../../node_modules/trix/src/trix/core/collections/object_group.js", "../../../node_modules/trix/src/trix/core/collections/object_map.js", "../../../node_modules/trix/src/trix/core/collections/element_store.js", "../../../node_modules/trix/src/trix/core/utilities/operation.js", "../../../node_modules/trix/src/trix/views/object_view.js", "../../../node_modules/trix/src/trix/models/html_sanitizer.js", "../../../node_modules/trix/src/trix/views/attachment_view.js", "../../../node_modules/trix/src/trix/views/previewable_attachment_view.js", "../../../node_modules/trix/src/trix/views/piece_view.js", "../../../node_modules/trix/src/trix/views/text_view.js", "../../../node_modules/trix/src/trix/views/block_view.js", "../../../node_modules/trix/src/trix/views/document_view.js", "../../../node_modules/trix/src/trix/models/piece.js", "../../../node_modules/trix/src/trix/operations/image_preload_operation.js", "../../../node_modules/trix/src/trix/models/attachment.js", "../../../node_modules/trix/src/trix/models/attachment_piece.js", "../../../node_modules/trix/src/trix/models/string_piece.js", "../../../node_modules/trix/src/trix/models/splittable_list.js", "../../../node_modules/trix/src/trix/models/text.js", "../../../node_modules/trix/src/trix/models/block.js", "../../../node_modules/trix/src/trix/models/document.js", "../../../node_modules/trix/src/trix/models/html_parser.js", "../../../node_modules/trix/src/trix/core/serialization.js", "../../../node_modules/trix/src/trix/models/managed_attachment.js", "../../../node_modules/trix/src/trix/models/attachment_manager.js", "../../../node_modules/trix/src/trix/models/line_break_insertion.js", "../../../node_modules/trix/src/trix/models/composition.js", "../../../node_modules/trix/src/trix/models/undo_manager.js", "../../../node_modules/trix/src/trix/filters/filter.js", "../../../node_modules/trix/src/trix/filters/attachment_gallery_filter.js", "../../../node_modules/trix/src/trix/models/editor.js", "../../../node_modules/trix/src/trix/models/location_mapper.js", "../../../node_modules/trix/src/trix/models/point_mapper.js", "../../../node_modules/trix/src/trix/models/selection_manager.js", "../../../node_modules/trix/src/trix/controllers/attachment_editor_controller.js", "../../../node_modules/trix/src/trix/controllers/composition_controller.js", "../../../node_modules/trix/src/trix/controllers/controller.js", "../../../node_modules/trix/src/trix/observers/mutation_observer.js", "../../../node_modules/trix/src/trix/operations/file_verification_operation.js", "../../../node_modules/trix/src/trix/models/flaky_android_keyboard_detector.js", "../../../node_modules/trix/src/trix/controllers/input_controller.js", "../../../node_modules/trix/src/trix/controllers/level_0_input_controller.js", "../../../node_modules/trix/src/trix/controllers/level_2_input_controller.js", "../../../node_modules/trix/src/trix/controllers/toolbar_controller.js", "../../../node_modules/trix/src/trix/controllers/editor_controller.js", "../../../node_modules/trix/src/trix/elements/trix_toolbar_element.js", "../../../node_modules/trix/src/trix/elements/trix_editor_element.js", "../../../node_modules/trix/src/trix/trix.js", "../../../node_modules/@rails/actiontext/app/assets/javascripts/actiontext.esm.js"], "sourcesContent": ["export default {\n logger: typeof console !== \"undefined\" ? console : undefined,\n WebSocket: typeof WebSocket !== \"undefined\" ? WebSocket : undefined,\n}\n", "import adapters from \"./adapters\"\n\n// The logger is disabled by default. You can enable it with:\n//\n// ActionCable.logger.enabled = true\n//\n// Example:\n//\n// import * as ActionCable from '@rails/actioncable'\n//\n// ActionCable.logger.enabled = true\n// ActionCable.logger.log('Connection Established.')\n//\n\nexport default {\n log(...messages) {\n if (this.enabled) {\n messages.push(Date.now())\n adapters.logger.log(\"[ActionCable]\", ...messages)\n }\n },\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring the cable connection is in good health by validating the heartbeat pings sent from the server, and attempting\n// revival reconnections if things go astray. Internal class, not intended for direct user manipulation.\n\nconst now = () => new Date().getTime()\n\nconst secondsSince = time => (now() - time) / 1000\n\nclass ConnectionMonitor {\n constructor(connection) {\n this.visibilityDidChange = this.visibilityDidChange.bind(this)\n this.connection = connection\n this.reconnectAttempts = 0\n }\n\n start() {\n if (!this.isRunning()) {\n this.startedAt = now()\n delete this.stoppedAt\n this.startPolling()\n addEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(`ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`)\n }\n }\n\n stop() {\n if (this.isRunning()) {\n this.stoppedAt = now()\n this.stopPolling()\n removeEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(\"ConnectionMonitor stopped\")\n }\n }\n\n isRunning() {\n return this.startedAt && !this.stoppedAt\n }\n\n recordMessage() {\n this.pingedAt = now()\n }\n\n recordConnect() {\n this.reconnectAttempts = 0\n delete this.disconnectedAt\n logger.log(\"ConnectionMonitor recorded connect\")\n }\n\n recordDisconnect() {\n this.disconnectedAt = now()\n logger.log(\"ConnectionMonitor recorded disconnect\")\n }\n\n // Private\n\n startPolling() {\n this.stopPolling()\n this.poll()\n }\n\n stopPolling() {\n clearTimeout(this.pollTimeout)\n }\n\n poll() {\n this.pollTimeout = setTimeout(() => {\n this.reconnectIfStale()\n this.poll()\n }\n , this.getPollInterval())\n }\n\n getPollInterval() {\n const { staleThreshold, reconnectionBackoffRate } = this.constructor\n const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10))\n const jitterMax = this.reconnectAttempts === 0 ? 1.0 : reconnectionBackoffRate\n const jitter = jitterMax * Math.random()\n return staleThreshold * 1000 * backoff * (1 + jitter)\n }\n\n reconnectIfStale() {\n if (this.connectionIsStale()) {\n logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`)\n this.reconnectAttempts++\n if (this.disconnectedRecently()) {\n logger.log(`ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(this.disconnectedAt)} s`)\n } else {\n logger.log(\"ConnectionMonitor reopening\")\n this.connection.reopen()\n }\n }\n }\n\n get refreshedAt() {\n return this.pingedAt ? this.pingedAt : this.startedAt\n }\n\n connectionIsStale() {\n return secondsSince(this.refreshedAt) > this.constructor.staleThreshold\n }\n\n disconnectedRecently() {\n return this.disconnectedAt && (secondsSince(this.disconnectedAt) < this.constructor.staleThreshold)\n }\n\n visibilityDidChange() {\n if (document.visibilityState === \"visible\") {\n setTimeout(() => {\n if (this.connectionIsStale() || !this.connection.isOpen()) {\n logger.log(`ConnectionMonitor reopening stale connection on visibilitychange. visibilityState = ${document.visibilityState}`)\n this.connection.reopen()\n }\n }\n , 200)\n }\n }\n\n}\n\nConnectionMonitor.staleThreshold = 6 // Server::Connections::BEAT_INTERVAL * 2 (missed two pings)\nConnectionMonitor.reconnectionBackoffRate = 0.15\n\nexport default ConnectionMonitor\n", "export default {\n \"message_types\": {\n \"welcome\": \"welcome\",\n \"disconnect\": \"disconnect\",\n \"ping\": \"ping\",\n \"confirmation\": \"confirm_subscription\",\n \"rejection\": \"reject_subscription\"\n },\n \"disconnect_reasons\": {\n \"unauthorized\": \"unauthorized\",\n \"invalid_request\": \"invalid_request\",\n \"server_restart\": \"server_restart\",\n \"remote\": \"remote\"\n },\n \"default_mount_path\": \"/cable\",\n \"protocols\": [\n \"actioncable-v1-json\",\n \"actioncable-unsupported\"\n ]\n}\n", "import adapters from \"./adapters\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport INTERNAL from \"./internal\"\nimport logger from \"./logger\"\n\n// Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.\n\nconst {message_types, protocols} = INTERNAL\nconst supportedProtocols = protocols.slice(0, protocols.length - 1)\n\nconst indexOf = [].indexOf\n\nclass Connection {\n constructor(consumer) {\n this.open = this.open.bind(this)\n this.consumer = consumer\n this.subscriptions = this.consumer.subscriptions\n this.monitor = new ConnectionMonitor(this)\n this.disconnected = true\n }\n\n send(data) {\n if (this.isOpen()) {\n this.webSocket.send(JSON.stringify(data))\n return true\n } else {\n return false\n }\n }\n\n open() {\n if (this.isActive()) {\n logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)\n return false\n } else {\n const socketProtocols = [...protocols, ...this.consumer.subprotocols || []]\n logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${socketProtocols}`)\n if (this.webSocket) { this.uninstallEventHandlers() }\n this.webSocket = new adapters.WebSocket(this.consumer.url, socketProtocols)\n this.installEventHandlers()\n this.monitor.start()\n return true\n }\n }\n\n close({allowReconnect} = {allowReconnect: true}) {\n if (!allowReconnect) { this.monitor.stop() }\n // Avoid closing websockets in a \"connecting\" state due to Safari 15.1+ bug. See: https://github.com/rails/rails/issues/43835#issuecomment-1002288478\n if (this.isOpen()) {\n return this.webSocket.close()\n }\n }\n\n reopen() {\n logger.log(`Reopening WebSocket, current state is ${this.getState()}`)\n if (this.isActive()) {\n try {\n return this.close()\n } catch (error) {\n logger.log(\"Failed to reopen WebSocket\", error)\n }\n finally {\n logger.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`)\n setTimeout(this.open, this.constructor.reopenDelay)\n }\n } else {\n return this.open()\n }\n }\n\n getProtocol() {\n if (this.webSocket) {\n return this.webSocket.protocol\n }\n }\n\n isOpen() {\n return this.isState(\"open\")\n }\n\n isActive() {\n return this.isState(\"open\", \"connecting\")\n }\n\n triedToReconnect() {\n return this.monitor.reconnectAttempts > 0\n }\n\n // Private\n\n isProtocolSupported() {\n return indexOf.call(supportedProtocols, this.getProtocol()) >= 0\n }\n\n isState(...states) {\n return indexOf.call(states, this.getState()) >= 0\n }\n\n getState() {\n if (this.webSocket) {\n for (let state in adapters.WebSocket) {\n if (adapters.WebSocket[state] === this.webSocket.readyState) {\n return state.toLowerCase()\n }\n }\n }\n return null\n }\n\n installEventHandlers() {\n for (let eventName in this.events) {\n const handler = this.events[eventName].bind(this)\n this.webSocket[`on${eventName}`] = handler\n }\n }\n\n uninstallEventHandlers() {\n for (let eventName in this.events) {\n this.webSocket[`on${eventName}`] = function() {}\n }\n }\n\n}\n\nConnection.reopenDelay = 500\n\nConnection.prototype.events = {\n message(event) {\n if (!this.isProtocolSupported()) { return }\n const {identifier, message, reason, reconnect, type} = JSON.parse(event.data)\n this.monitor.recordMessage()\n switch (type) {\n case message_types.welcome:\n if (this.triedToReconnect()) {\n this.reconnectAttempted = true\n }\n this.monitor.recordConnect()\n return this.subscriptions.reload()\n case message_types.disconnect:\n logger.log(`Disconnecting. Reason: ${reason}`)\n return this.close({allowReconnect: reconnect})\n case message_types.ping:\n return null\n case message_types.confirmation:\n this.subscriptions.confirmSubscription(identifier)\n if (this.reconnectAttempted) {\n this.reconnectAttempted = false\n return this.subscriptions.notify(identifier, \"connected\", {reconnected: true})\n } else {\n return this.subscriptions.notify(identifier, \"connected\", {reconnected: false})\n }\n case message_types.rejection:\n return this.subscriptions.reject(identifier)\n default:\n return this.subscriptions.notify(identifier, \"received\", message)\n }\n },\n\n open() {\n logger.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`)\n this.disconnected = false\n if (!this.isProtocolSupported()) {\n logger.log(\"Protocol is unsupported. Stopping monitor and disconnecting.\")\n return this.close({allowReconnect: false})\n }\n },\n\n close(event) {\n logger.log(\"WebSocket onclose event\")\n if (this.disconnected) { return }\n this.disconnected = true\n this.monitor.recordDisconnect()\n return this.subscriptions.notifyAll(\"disconnected\", {willAttemptReconnect: this.monitor.isRunning()})\n },\n\n error() {\n logger.log(\"WebSocket onerror event\")\n }\n}\n\nexport default Connection\n", "// A new subscription is created through the ActionCable.Subscriptions instance available on the consumer.\n// It provides a number of callbacks and a method for calling remote procedure calls on the corresponding\n// Channel instance on the server side.\n//\n// An example demonstrates the basic functionality:\n//\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\", {\n// connected() {\n// // Called once the subscription has been successfully completed\n// },\n//\n// disconnected({ willAttemptReconnect: boolean }) {\n// // Called when the client has disconnected with the server.\n// // The object will have an `willAttemptReconnect` property which\n// // says whether the client has the intention of attempting\n// // to reconnect.\n// },\n//\n// appear() {\n// this.perform('appear', {appearing_on: this.appearingOn()})\n// },\n//\n// away() {\n// this.perform('away')\n// },\n//\n// appearingOn() {\n// $('main').data('appearing-on')\n// }\n// })\n//\n// The methods #appear and #away forward their intent to the remote AppearanceChannel instance on the server\n// by calling the `perform` method with the first parameter being the action (which maps to AppearanceChannel#appear/away).\n// The second parameter is a hash that'll get JSON encoded and made available on the server in the data parameter.\n//\n// This is how the server component would look:\n//\n// class AppearanceChannel < ApplicationActionCable::Channel\n// def subscribed\n// current_user.appear\n// end\n//\n// def unsubscribed\n// current_user.disappear\n// end\n//\n// def appear(data)\n// current_user.appear on: data['appearing_on']\n// end\n//\n// def away\n// current_user.away\n// end\n// end\n//\n// The \"AppearanceChannel\" name is automatically mapped between the client-side subscription creation and the server-side Ruby class name.\n// The AppearanceChannel#appear/away public methods are exposed automatically to client-side invocation through the perform method.\n\nconst extend = function(object, properties) {\n if (properties != null) {\n for (let key in properties) {\n const value = properties[key]\n object[key] = value\n }\n }\n return object\n}\n\nexport default class Subscription {\n constructor(consumer, params = {}, mixin) {\n this.consumer = consumer\n this.identifier = JSON.stringify(params)\n extend(this, mixin)\n }\n\n // Perform a channel action with the optional data passed as an attribute\n perform(action, data = {}) {\n data.action = action\n return this.send(data)\n }\n\n send(data) {\n return this.consumer.send({command: \"message\", identifier: this.identifier, data: JSON.stringify(data)})\n }\n\n unsubscribe() {\n return this.consumer.subscriptions.remove(this)\n }\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.\n// Internal class, not intended for direct user manipulation.\n\nclass SubscriptionGuarantor {\n constructor(subscriptions) {\n this.subscriptions = subscriptions\n this.pendingSubscriptions = []\n }\n\n guarantee(subscription) {\n if(this.pendingSubscriptions.indexOf(subscription) == -1){ \n logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`)\n this.pendingSubscriptions.push(subscription) \n }\n else {\n logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`)\n }\n this.startGuaranteeing()\n }\n\n forget(subscription) {\n logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`)\n this.pendingSubscriptions = (this.pendingSubscriptions.filter((s) => s !== subscription))\n }\n\n startGuaranteeing() {\n this.stopGuaranteeing()\n this.retrySubscribing()\n }\n \n stopGuaranteeing() {\n clearTimeout(this.retryTimeout)\n }\n\n retrySubscribing() {\n this.retryTimeout = setTimeout(() => {\n if (this.subscriptions && typeof(this.subscriptions.subscribe) === \"function\") {\n this.pendingSubscriptions.map((subscription) => {\n logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`)\n this.subscriptions.subscribe(subscription)\n })\n }\n }\n , 500)\n }\n}\n\nexport default SubscriptionGuarantor", "import Subscription from \"./subscription\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport logger from \"./logger\"\n\n// Collection class for creating (and internally managing) channel subscriptions.\n// The only method intended to be triggered by the user is ActionCable.Subscriptions#create,\n// and it should be called through the consumer like so:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n\nexport default class Subscriptions {\n constructor(consumer) {\n this.consumer = consumer\n this.guarantor = new SubscriptionGuarantor(this)\n this.subscriptions = []\n }\n\n create(channelName, mixin) {\n const channel = channelName\n const params = typeof channel === \"object\" ? channel : {channel}\n const subscription = new Subscription(this.consumer, params, mixin)\n return this.add(subscription)\n }\n\n // Private\n\n add(subscription) {\n this.subscriptions.push(subscription)\n this.consumer.ensureActiveConnection()\n this.notify(subscription, \"initialized\")\n this.subscribe(subscription)\n return subscription\n }\n\n remove(subscription) {\n this.forget(subscription)\n if (!this.findAll(subscription.identifier).length) {\n this.sendCommand(subscription, \"unsubscribe\")\n }\n return subscription\n }\n\n reject(identifier) {\n return this.findAll(identifier).map((subscription) => {\n this.forget(subscription)\n this.notify(subscription, \"rejected\")\n return subscription\n })\n }\n\n forget(subscription) {\n this.guarantor.forget(subscription)\n this.subscriptions = (this.subscriptions.filter((s) => s !== subscription))\n return subscription\n }\n\n findAll(identifier) {\n return this.subscriptions.filter((s) => s.identifier === identifier)\n }\n\n reload() {\n return this.subscriptions.map((subscription) =>\n this.subscribe(subscription))\n }\n\n notifyAll(callbackName, ...args) {\n return this.subscriptions.map((subscription) =>\n this.notify(subscription, callbackName, ...args))\n }\n\n notify(subscription, callbackName, ...args) {\n let subscriptions\n if (typeof subscription === \"string\") {\n subscriptions = this.findAll(subscription)\n } else {\n subscriptions = [subscription]\n }\n\n return subscriptions.map((subscription) =>\n (typeof subscription[callbackName] === \"function\" ? subscription[callbackName](...args) : undefined))\n }\n\n subscribe(subscription) {\n if (this.sendCommand(subscription, \"subscribe\")) {\n this.guarantor.guarantee(subscription)\n }\n }\n\n confirmSubscription(identifier) {\n logger.log(`Subscription confirmed ${identifier}`)\n this.findAll(identifier).map((subscription) =>\n this.guarantor.forget(subscription))\n }\n\n sendCommand(subscription, command) {\n const {identifier} = subscription\n return this.consumer.send({command, identifier})\n }\n}\n", "import Connection from \"./connection\"\nimport Subscriptions from \"./subscriptions\"\n\n// The ActionCable.Consumer establishes the connection to a server-side Ruby Connection object. Once established,\n// the ActionCable.ConnectionMonitor will ensure that its properly maintained through heartbeats and checking for stale updates.\n// The Consumer instance is also the gateway to establishing subscriptions to desired channels through the #createSubscription\n// method.\n//\n// The following example shows how this can be set up:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n//\n// When a consumer is created, it automatically connects with the server.\n//\n// To disconnect from the server, call\n//\n// App.cable.disconnect()\n//\n// and to restart the connection:\n//\n// App.cable.connect()\n//\n// Any channel subscriptions which existed prior to disconnecting will\n// automatically resubscribe.\n\nexport default class Consumer {\n constructor(url) {\n this._url = url\n this.subscriptions = new Subscriptions(this)\n this.connection = new Connection(this)\n this.subprotocols = []\n }\n\n get url() {\n return createWebSocketURL(this._url)\n }\n\n send(data) {\n return this.connection.send(data)\n }\n\n connect() {\n return this.connection.open()\n }\n\n disconnect() {\n return this.connection.close({allowReconnect: false})\n }\n\n ensureActiveConnection() {\n if (!this.connection.isActive()) {\n return this.connection.open()\n }\n }\n\n addSubProtocol(subprotocol) {\n this.subprotocols = [...this.subprotocols, subprotocol]\n }\n}\n\nexport function createWebSocketURL(url) {\n if (typeof url === \"function\") {\n url = url()\n }\n\n if (url && !/^wss?:/i.test(url)) {\n const a = document.createElement(\"a\")\n a.href = url\n // Fix populating Location properties in IE. Otherwise, protocol will be blank.\n a.href = a.href\n a.protocol = a.protocol.replace(\"http\", \"ws\")\n return a.href\n } else {\n return url\n }\n}\n", "import Connection from \"./connection\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport Consumer, { createWebSocketURL } from \"./consumer\"\nimport INTERNAL from \"./internal\"\nimport Subscription from \"./subscription\"\nimport Subscriptions from \"./subscriptions\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport adapters from \"./adapters\"\nimport logger from \"./logger\"\n\nexport {\n Connection,\n ConnectionMonitor,\n Consumer,\n INTERNAL,\n Subscription,\n Subscriptions,\n SubscriptionGuarantor,\n adapters,\n createWebSocketURL,\n logger,\n}\n\nexport function createConsumer(url = getConfig(\"url\") || INTERNAL.default_mount_path) {\n return new Consumer(url)\n}\n\nexport function getConfig(name) {\n const element = document.head.querySelector(`meta[name='action-cable-${name}']`)\n if (element) {\n return element.getAttribute(\"content\")\n }\n}\n", "/**\n * EvEmitter v1.1.0\n * Lil' event emitter\n * MIT License\n */\n\n/* jshint unused: true, undef: true, strict: true */\n\n( function( global, factory ) {\n // universal module definition\n /* jshint strict: false */ /* globals define, module, window */\n if ( typeof define == 'function' && define.amd ) {\n // AMD - RequireJS\n define( factory );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS - Browserify, Webpack\n module.exports = factory();\n } else {\n // Browser globals\n global.EvEmitter = factory();\n }\n\n}( typeof window != 'undefined' ? window : this, function() {\n\n\"use strict\";\n\nfunction EvEmitter() {}\n\nvar proto = EvEmitter.prototype;\n\nproto.on = function( eventName, listener ) {\n if ( !eventName || !listener ) {\n return;\n }\n // set events hash\n var events = this._events = this._events || {};\n // set listeners array\n var listeners = events[ eventName ] = events[ eventName ] || [];\n // only add once\n if ( listeners.indexOf( listener ) == -1 ) {\n listeners.push( listener );\n }\n\n return this;\n};\n\nproto.once = function( eventName, listener ) {\n if ( !eventName || !listener ) {\n return;\n }\n // add event\n this.on( eventName, listener );\n // set once flag\n // set onceEvents hash\n var onceEvents = this._onceEvents = this._onceEvents || {};\n // set onceListeners object\n var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};\n // set flag\n onceListeners[ listener ] = true;\n\n return this;\n};\n\nproto.off = function( eventName, listener ) {\n var listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) {\n return;\n }\n var index = listeners.indexOf( listener );\n if ( index != -1 ) {\n listeners.splice( index, 1 );\n }\n\n return this;\n};\n\nproto.emitEvent = function( eventName, args ) {\n var listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) {\n return;\n }\n // copy over to avoid interference if .off() in listener\n listeners = listeners.slice(0);\n args = args || [];\n // once stuff\n var onceListeners = this._onceEvents && this._onceEvents[ eventName ];\n\n for ( var i=0; i < listeners.length; i++ ) {\n var listener = listeners[i]\n var isOnce = onceListeners && onceListeners[ listener ];\n if ( isOnce ) {\n // remove listener\n // remove before trigger to prevent recursion\n this.off( eventName, listener );\n // unset once flag\n delete onceListeners[ listener ];\n }\n // trigger listener\n listener.apply( this, args );\n }\n\n return this;\n};\n\nproto.allOff = function() {\n delete this._events;\n delete this._onceEvents;\n};\n\nreturn EvEmitter;\n\n}));\n", "/*!\n * getSize v2.0.3\n * measure size of elements\n * MIT license\n */\n\n/* jshint browser: true, strict: true, undef: true, unused: true */\n/* globals console: false */\n\n( function( window, factory ) {\n /* jshint strict: false */ /* globals define, module */\n if ( typeof define == 'function' && define.amd ) {\n // AMD\n define( factory );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS\n module.exports = factory();\n } else {\n // browser global\n window.getSize = factory();\n }\n\n})( window, function factory() {\n'use strict';\n\n// -------------------------- helpers -------------------------- //\n\n// get a number from a string, not a percentage\nfunction getStyleSize( value ) {\n var num = parseFloat( value );\n // not a percent like '100%', and a number\n var isValid = value.indexOf('%') == -1 && !isNaN( num );\n return isValid && num;\n}\n\nfunction noop() {}\n\nvar logError = typeof console == 'undefined' ? noop :\n function( message ) {\n console.error( message );\n };\n\n// -------------------------- measurements -------------------------- //\n\nvar measurements = [\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'paddingBottom',\n 'marginLeft',\n 'marginRight',\n 'marginTop',\n 'marginBottom',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'borderBottomWidth'\n];\n\nvar measurementsLength = measurements.length;\n\nfunction getZeroSize() {\n var size = {\n width: 0,\n height: 0,\n innerWidth: 0,\n innerHeight: 0,\n outerWidth: 0,\n outerHeight: 0\n };\n for ( var i=0; i < measurementsLength; i++ ) {\n var measurement = measurements[i];\n size[ measurement ] = 0;\n }\n return size;\n}\n\n// -------------------------- getStyle -------------------------- //\n\n/**\n * getStyle, get style of element, check for Firefox bug\n * https://bugzilla.mozilla.org/show_bug.cgi?id=548397\n */\nfunction getStyle( elem ) {\n var style = getComputedStyle( elem );\n if ( !style ) {\n logError( 'Style returned ' + style +\n '. Are you running this code in a hidden iframe on Firefox? ' +\n 'See https://bit.ly/getsizebug1' );\n }\n return style;\n}\n\n// -------------------------- setup -------------------------- //\n\nvar isSetup = false;\n\nvar isBoxSizeOuter;\n\n/**\n * setup\n * check isBoxSizerOuter\n * do on first getSize() rather than on page load for Firefox bug\n */\nfunction setup() {\n // setup once\n if ( isSetup ) {\n return;\n }\n isSetup = true;\n\n // -------------------------- box sizing -------------------------- //\n\n /**\n * Chrome & Safari measure the outer-width on style.width on border-box elems\n * IE11 & Firefox<29 measures the inner-width\n */\n var div = document.createElement('div');\n div.style.width = '200px';\n div.style.padding = '1px 2px 3px 4px';\n div.style.borderStyle = 'solid';\n div.style.borderWidth = '1px 2px 3px 4px';\n div.style.boxSizing = 'border-box';\n\n var body = document.body || document.documentElement;\n body.appendChild( div );\n var style = getStyle( div );\n // round value for browser zoom. desandro/masonry#928\n isBoxSizeOuter = Math.round( getStyleSize( style.width ) ) == 200;\n getSize.isBoxSizeOuter = isBoxSizeOuter;\n\n body.removeChild( div );\n}\n\n// -------------------------- getSize -------------------------- //\n\nfunction getSize( elem ) {\n setup();\n\n // use querySeletor if elem is string\n if ( typeof elem == 'string' ) {\n elem = document.querySelector( elem );\n }\n\n // do not proceed on non-objects\n if ( !elem || typeof elem != 'object' || !elem.nodeType ) {\n return;\n }\n\n var style = getStyle( elem );\n\n // if hidden, everything is 0\n if ( style.display == 'none' ) {\n return getZeroSize();\n }\n\n var size = {};\n size.width = elem.offsetWidth;\n size.height = elem.offsetHeight;\n\n var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';\n\n // get all measurements\n for ( var i=0; i < measurementsLength; i++ ) {\n var measurement = measurements[i];\n var value = style[ measurement ];\n var num = parseFloat( value );\n // any 'auto', 'medium' value will be 0\n size[ measurement ] = !isNaN( num ) ? num : 0;\n }\n\n var paddingWidth = size.paddingLeft + size.paddingRight;\n var paddingHeight = size.paddingTop + size.paddingBottom;\n var marginWidth = size.marginLeft + size.marginRight;\n var marginHeight = size.marginTop + size.marginBottom;\n var borderWidth = size.borderLeftWidth + size.borderRightWidth;\n var borderHeight = size.borderTopWidth + size.borderBottomWidth;\n\n var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;\n\n // overwrite width and height if we can get it from style\n var styleWidth = getStyleSize( style.width );\n if ( styleWidth !== false ) {\n size.width = styleWidth +\n // add padding and border unless it's already including it\n ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );\n }\n\n var styleHeight = getStyleSize( style.height );\n if ( styleHeight !== false ) {\n size.height = styleHeight +\n // add padding and border unless it's already including it\n ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );\n }\n\n size.innerWidth = size.width - ( paddingWidth + borderWidth );\n size.innerHeight = size.height - ( paddingHeight + borderHeight );\n\n size.outerWidth = size.width + marginWidth;\n size.outerHeight = size.height + marginHeight;\n\n return size;\n}\n\nreturn getSize;\n\n});\n", "/**\n * matchesSelector v2.0.2\n * matchesSelector( element, '.selector' )\n * MIT license\n */\n\n/*jshint browser: true, strict: true, undef: true, unused: true */\n\n( function( window, factory ) {\n /*global define: false, module: false */\n 'use strict';\n // universal module definition\n if ( typeof define == 'function' && define.amd ) {\n // AMD\n define( factory );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS\n module.exports = factory();\n } else {\n // browser global\n window.matchesSelector = factory();\n }\n\n}( window, function factory() {\n 'use strict';\n\n var matchesMethod = ( function() {\n var ElemProto = window.Element.prototype;\n // check for the standard method name first\n if ( ElemProto.matches ) {\n return 'matches';\n }\n // check un-prefixed\n if ( ElemProto.matchesSelector ) {\n return 'matchesSelector';\n }\n // check vendor prefixes\n var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];\n\n for ( var i=0; i < prefixes.length; i++ ) {\n var prefix = prefixes[i];\n var method = prefix + 'MatchesSelector';\n if ( ElemProto[ method ] ) {\n return method;\n }\n }\n })();\n\n return function matchesSelector( elem, selector ) {\n return elem[ matchesMethod ]( selector );\n };\n\n}));\n", "/**\n * Fizzy UI utils v2.0.7\n * MIT license\n */\n\n/*jshint browser: true, undef: true, unused: true, strict: true */\n\n( function( window, factory ) {\n // universal module definition\n /*jshint strict: false */ /*globals define, module, require */\n\n if ( typeof define == 'function' && define.amd ) {\n // AMD\n define( [\n 'desandro-matches-selector/matches-selector'\n ], function( matchesSelector ) {\n return factory( window, matchesSelector );\n });\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS\n module.exports = factory(\n window,\n require('desandro-matches-selector')\n );\n } else {\n // browser global\n window.fizzyUIUtils = factory(\n window,\n window.matchesSelector\n );\n }\n\n}( window, function factory( window, matchesSelector ) {\n\n'use strict';\n\nvar utils = {};\n\n// ----- extend ----- //\n\n// extends objects\nutils.extend = function( a, b ) {\n for ( var prop in b ) {\n a[ prop ] = b[ prop ];\n }\n return a;\n};\n\n// ----- modulo ----- //\n\nutils.modulo = function( num, div ) {\n return ( ( num % div ) + div ) % div;\n};\n\n// ----- makeArray ----- //\n\nvar arraySlice = Array.prototype.slice;\n\n// turn element or nodeList into an array\nutils.makeArray = function( obj ) {\n if ( Array.isArray( obj ) ) {\n // use object if already an array\n return obj;\n }\n // return empty array if undefined or null. #6\n if ( obj === null || obj === undefined ) {\n return [];\n }\n\n var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';\n if ( isArrayLike ) {\n // convert nodeList to array\n return arraySlice.call( obj );\n }\n\n // array of single index\n return [ obj ];\n};\n\n// ----- removeFrom ----- //\n\nutils.removeFrom = function( ary, obj ) {\n var index = ary.indexOf( obj );\n if ( index != -1 ) {\n ary.splice( index, 1 );\n }\n};\n\n// ----- getParent ----- //\n\nutils.getParent = function( elem, selector ) {\n while ( elem.parentNode && elem != document.body ) {\n elem = elem.parentNode;\n if ( matchesSelector( elem, selector ) ) {\n return elem;\n }\n }\n};\n\n// ----- getQueryElement ----- //\n\n// use element as selector string\nutils.getQueryElement = function( elem ) {\n if ( typeof elem == 'string' ) {\n return document.querySelector( elem );\n }\n return elem;\n};\n\n// ----- handleEvent ----- //\n\n// enable .ontype to trigger from .addEventListener( elem, 'type' )\nutils.handleEvent = function( event ) {\n var method = 'on' + event.type;\n if ( this[ method ] ) {\n this[ method ]( event );\n }\n};\n\n// ----- filterFindElements ----- //\n\nutils.filterFindElements = function( elems, selector ) {\n // make array of elems\n elems = utils.makeArray( elems );\n var ffElems = [];\n\n elems.forEach( function( elem ) {\n // check that elem is an actual element\n if ( !( elem instanceof HTMLElement ) ) {\n return;\n }\n // add elem if no selector\n if ( !selector ) {\n ffElems.push( elem );\n return;\n }\n // filter & find items if we have a selector\n // filter\n if ( matchesSelector( elem, selector ) ) {\n ffElems.push( elem );\n }\n // find children\n var childElems = elem.querySelectorAll( selector );\n // concat childElems to filterFound array\n for ( var i=0; i < childElems.length; i++ ) {\n ffElems.push( childElems[i] );\n }\n });\n\n return ffElems;\n};\n\n// ----- debounceMethod ----- //\n\nutils.debounceMethod = function( _class, methodName, threshold ) {\n threshold = threshold || 100;\n // original method\n var method = _class.prototype[ methodName ];\n var timeoutName = methodName + 'Timeout';\n\n _class.prototype[ methodName ] = function() {\n var timeout = this[ timeoutName ];\n clearTimeout( timeout );\n\n var args = arguments;\n var _this = this;\n this[ timeoutName ] = setTimeout( function() {\n method.apply( _this, args );\n delete _this[ timeoutName ];\n }, threshold );\n };\n};\n\n// ----- docReady ----- //\n\nutils.docReady = function( callback ) {\n var readyState = document.readyState;\n if ( readyState == 'complete' || readyState == 'interactive' ) {\n // do async to allow for other scripts to run. metafizzy/flickity#441\n setTimeout( callback );\n } else {\n document.addEventListener( 'DOMContentLoaded', callback );\n }\n};\n\n// ----- htmlInit ----- //\n\n// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/\nutils.toDashed = function( str ) {\n return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {\n return $1 + '-' + $2;\n }).toLowerCase();\n};\n\nvar console = window.console;\n/**\n * allow user to initialize classes via [data-namespace] or .js-namespace class\n * htmlInit( Widget, 'widgetName' )\n * options are parsed from data-namespace-options\n */\nutils.htmlInit = function( WidgetClass, namespace ) {\n utils.docReady( function() {\n var dashedNamespace = utils.toDashed( namespace );\n var dataAttr = 'data-' + dashedNamespace;\n var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );\n var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );\n var elems = utils.makeArray( dataAttrElems )\n .concat( utils.makeArray( jsDashElems ) );\n var dataOptionsAttr = dataAttr + '-options';\n var jQuery = window.jQuery;\n\n elems.forEach( function( elem ) {\n var attr = elem.getAttribute( dataAttr ) ||\n elem.getAttribute( dataOptionsAttr );\n var options;\n try {\n options = attr && JSON.parse( attr );\n } catch ( error ) {\n // log error, do not initialize\n if ( console ) {\n console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +\n ': ' + error );\n }\n return;\n }\n // initialize\n var instance = new WidgetClass( elem, options );\n // make available via $().data('namespace')\n if ( jQuery ) {\n jQuery.data( elem, namespace, instance );\n }\n });\n\n });\n};\n\n// ----- ----- //\n\nreturn utils;\n\n}));\n", "/**\n * Outlayer Item\n */\n\n( function( window, factory ) {\n // universal module definition\n /* jshint strict: false */ /* globals define, module, require */\n if ( typeof define == 'function' && define.amd ) {\n // AMD - RequireJS\n define( [\n 'ev-emitter/ev-emitter',\n 'get-size/get-size'\n ],\n factory\n );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS - Browserify, Webpack\n module.exports = factory(\n require('ev-emitter'),\n require('get-size')\n );\n } else {\n // browser global\n window.Outlayer = {};\n window.Outlayer.Item = factory(\n window.EvEmitter,\n window.getSize\n );\n }\n\n}( window, function factory( EvEmitter, getSize ) {\n'use strict';\n\n// ----- helpers ----- //\n\nfunction isEmptyObj( obj ) {\n for ( var prop in obj ) {\n return false;\n }\n prop = null;\n return true;\n}\n\n// -------------------------- CSS3 support -------------------------- //\n\n\nvar docElemStyle = document.documentElement.style;\n\nvar transitionProperty = typeof docElemStyle.transition == 'string' ?\n 'transition' : 'WebkitTransition';\nvar transformProperty = typeof docElemStyle.transform == 'string' ?\n 'transform' : 'WebkitTransform';\n\nvar transitionEndEvent = {\n WebkitTransition: 'webkitTransitionEnd',\n transition: 'transitionend'\n}[ transitionProperty ];\n\n// cache all vendor properties that could have vendor prefix\nvar vendorProperties = {\n transform: transformProperty,\n transition: transitionProperty,\n transitionDuration: transitionProperty + 'Duration',\n transitionProperty: transitionProperty + 'Property',\n transitionDelay: transitionProperty + 'Delay'\n};\n\n// -------------------------- Item -------------------------- //\n\nfunction Item( element, layout ) {\n if ( !element ) {\n return;\n }\n\n this.element = element;\n // parent layout class, i.e. Masonry, Isotope, or Packery\n this.layout = layout;\n this.position = {\n x: 0,\n y: 0\n };\n\n this._create();\n}\n\n// inherit EvEmitter\nvar proto = Item.prototype = Object.create( EvEmitter.prototype );\nproto.constructor = Item;\n\nproto._create = function() {\n // transition objects\n this._transn = {\n ingProperties: {},\n clean: {},\n onEnd: {}\n };\n\n this.css({\n position: 'absolute'\n });\n};\n\n// trigger specified handler for event type\nproto.handleEvent = function( event ) {\n var method = 'on' + event.type;\n if ( this[ method ] ) {\n this[ method ]( event );\n }\n};\n\nproto.getSize = function() {\n this.size = getSize( this.element );\n};\n\n/**\n * apply CSS styles to element\n * @param {Object} style\n */\nproto.css = function( style ) {\n var elemStyle = this.element.style;\n\n for ( var prop in style ) {\n // use vendor property if available\n var supportedProp = vendorProperties[ prop ] || prop;\n elemStyle[ supportedProp ] = style[ prop ];\n }\n};\n\n // measure position, and sets it\nproto.getPosition = function() {\n var style = getComputedStyle( this.element );\n var isOriginLeft = this.layout._getOption('originLeft');\n var isOriginTop = this.layout._getOption('originTop');\n var xValue = style[ isOriginLeft ? 'left' : 'right' ];\n var yValue = style[ isOriginTop ? 'top' : 'bottom' ];\n var x = parseFloat( xValue );\n var y = parseFloat( yValue );\n // convert percent to pixels\n var layoutSize = this.layout.size;\n if ( xValue.indexOf('%') != -1 ) {\n x = ( x / 100 ) * layoutSize.width;\n }\n if ( yValue.indexOf('%') != -1 ) {\n y = ( y / 100 ) * layoutSize.height;\n }\n // clean up 'auto' or other non-integer values\n x = isNaN( x ) ? 0 : x;\n y = isNaN( y ) ? 0 : y;\n // remove padding from measurement\n x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;\n y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;\n\n this.position.x = x;\n this.position.y = y;\n};\n\n// set settled position, apply padding\nproto.layoutPosition = function() {\n var layoutSize = this.layout.size;\n var style = {};\n var isOriginLeft = this.layout._getOption('originLeft');\n var isOriginTop = this.layout._getOption('originTop');\n\n // x\n var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';\n var xProperty = isOriginLeft ? 'left' : 'right';\n var xResetProperty = isOriginLeft ? 'right' : 'left';\n\n var x = this.position.x + layoutSize[ xPadding ];\n // set in percentage or pixels\n style[ xProperty ] = this.getXValue( x );\n // reset other property\n style[ xResetProperty ] = '';\n\n // y\n var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';\n var yProperty = isOriginTop ? 'top' : 'bottom';\n var yResetProperty = isOriginTop ? 'bottom' : 'top';\n\n var y = this.position.y + layoutSize[ yPadding ];\n // set in percentage or pixels\n style[ yProperty ] = this.getYValue( y );\n // reset other property\n style[ yResetProperty ] = '';\n\n this.css( style );\n this.emitEvent( 'layout', [ this ] );\n};\n\nproto.getXValue = function( x ) {\n var isHorizontal = this.layout._getOption('horizontal');\n return this.layout.options.percentPosition && !isHorizontal ?\n ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';\n};\n\nproto.getYValue = function( y ) {\n var isHorizontal = this.layout._getOption('horizontal');\n return this.layout.options.percentPosition && isHorizontal ?\n ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';\n};\n\nproto._transitionTo = function( x, y ) {\n this.getPosition();\n // get current x & y from top/left\n var curX = this.position.x;\n var curY = this.position.y;\n\n var didNotMove = x == this.position.x && y == this.position.y;\n\n // save end position\n this.setPosition( x, y );\n\n // if did not move and not transitioning, just go to layout\n if ( didNotMove && !this.isTransitioning ) {\n this.layoutPosition();\n return;\n }\n\n var transX = x - curX;\n var transY = y - curY;\n var transitionStyle = {};\n transitionStyle.transform = this.getTranslate( transX, transY );\n\n this.transition({\n to: transitionStyle,\n onTransitionEnd: {\n transform: this.layoutPosition\n },\n isCleaning: true\n });\n};\n\nproto.getTranslate = function( x, y ) {\n // flip cooridinates if origin on right or bottom\n var isOriginLeft = this.layout._getOption('originLeft');\n var isOriginTop = this.layout._getOption('originTop');\n x = isOriginLeft ? x : -x;\n y = isOriginTop ? y : -y;\n return 'translate3d(' + x + 'px, ' + y + 'px, 0)';\n};\n\n// non transition + transform support\nproto.goTo = function( x, y ) {\n this.setPosition( x, y );\n this.layoutPosition();\n};\n\nproto.moveTo = proto._transitionTo;\n\nproto.setPosition = function( x, y ) {\n this.position.x = parseFloat( x );\n this.position.y = parseFloat( y );\n};\n\n// ----- transition ----- //\n\n/**\n * @param {Object} style - CSS\n * @param {Function} onTransitionEnd\n */\n\n// non transition, just trigger callback\nproto._nonTransition = function( args ) {\n this.css( args.to );\n if ( args.isCleaning ) {\n this._removeStyles( args.to );\n }\n for ( var prop in args.onTransitionEnd ) {\n args.onTransitionEnd[ prop ].call( this );\n }\n};\n\n/**\n * proper transition\n * @param {Object} args - arguments\n * @param {Object} to - style to transition to\n * @param {Object} from - style to start transition from\n * @param {Boolean} isCleaning - removes transition styles after transition\n * @param {Function} onTransitionEnd - callback\n */\nproto.transition = function( args ) {\n // redirect to nonTransition if no transition duration\n if ( !parseFloat( this.layout.options.transitionDuration ) ) {\n this._nonTransition( args );\n return;\n }\n\n var _transition = this._transn;\n // keep track of onTransitionEnd callback by css property\n for ( var prop in args.onTransitionEnd ) {\n _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];\n }\n // keep track of properties that are transitioning\n for ( prop in args.to ) {\n _transition.ingProperties[ prop ] = true;\n // keep track of properties to clean up when transition is done\n if ( args.isCleaning ) {\n _transition.clean[ prop ] = true;\n }\n }\n\n // set from styles\n if ( args.from ) {\n this.css( args.from );\n // force redraw. http://blog.alexmaccaw.com/css-transitions\n var h = this.element.offsetHeight;\n // hack for JSHint to hush about unused var\n h = null;\n }\n // enable transition\n this.enableTransition( args.to );\n // set styles that are transitioning\n this.css( args.to );\n\n this.isTransitioning = true;\n\n};\n\n// dash before all cap letters, including first for\n// WebkitTransform => -webkit-transform\nfunction toDashedAll( str ) {\n return str.replace( /([A-Z])/g, function( $1 ) {\n return '-' + $1.toLowerCase();\n });\n}\n\nvar transitionProps = 'opacity,' + toDashedAll( transformProperty );\n\nproto.enableTransition = function(/* style */) {\n // HACK changing transitionProperty during a transition\n // will cause transition to jump\n if ( this.isTransitioning ) {\n return;\n }\n\n // make `transition: foo, bar, baz` from style object\n // HACK un-comment this when enableTransition can work\n // while a transition is happening\n // var transitionValues = [];\n // for ( var prop in style ) {\n // // dash-ify camelCased properties like WebkitTransition\n // prop = vendorProperties[ prop ] || prop;\n // transitionValues.push( toDashedAll( prop ) );\n // }\n // munge number to millisecond, to match stagger\n var duration = this.layout.options.transitionDuration;\n duration = typeof duration == 'number' ? duration + 'ms' : duration;\n // enable transition styles\n this.css({\n transitionProperty: transitionProps,\n transitionDuration: duration,\n transitionDelay: this.staggerDelay || 0\n });\n // listen for transition end event\n this.element.addEventListener( transitionEndEvent, this, false );\n};\n\n// ----- events ----- //\n\nproto.onwebkitTransitionEnd = function( event ) {\n this.ontransitionend( event );\n};\n\nproto.onotransitionend = function( event ) {\n this.ontransitionend( event );\n};\n\n// properties that I munge to make my life easier\nvar dashedVendorProperties = {\n '-webkit-transform': 'transform'\n};\n\nproto.ontransitionend = function( event ) {\n // disregard bubbled events from children\n if ( event.target !== this.element ) {\n return;\n }\n var _transition = this._transn;\n // get property name of transitioned property, convert to prefix-free\n var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;\n\n // remove property that has completed transitioning\n delete _transition.ingProperties[ propertyName ];\n // check if any properties are still transitioning\n if ( isEmptyObj( _transition.ingProperties ) ) {\n // all properties have completed transitioning\n this.disableTransition();\n }\n // clean style\n if ( propertyName in _transition.clean ) {\n // clean up style\n this.element.style[ event.propertyName ] = '';\n delete _transition.clean[ propertyName ];\n }\n // trigger onTransitionEnd callback\n if ( propertyName in _transition.onEnd ) {\n var onTransitionEnd = _transition.onEnd[ propertyName ];\n onTransitionEnd.call( this );\n delete _transition.onEnd[ propertyName ];\n }\n\n this.emitEvent( 'transitionEnd', [ this ] );\n};\n\nproto.disableTransition = function() {\n this.removeTransitionStyles();\n this.element.removeEventListener( transitionEndEvent, this, false );\n this.isTransitioning = false;\n};\n\n/**\n * removes style property from element\n * @param {Object} style\n**/\nproto._removeStyles = function( style ) {\n // clean up transition styles\n var cleanStyle = {};\n for ( var prop in style ) {\n cleanStyle[ prop ] = '';\n }\n this.css( cleanStyle );\n};\n\nvar cleanTransitionStyle = {\n transitionProperty: '',\n transitionDuration: '',\n transitionDelay: ''\n};\n\nproto.removeTransitionStyles = function() {\n // remove transition\n this.css( cleanTransitionStyle );\n};\n\n// ----- stagger ----- //\n\nproto.stagger = function( delay ) {\n delay = isNaN( delay ) ? 0 : delay;\n this.staggerDelay = delay + 'ms';\n};\n\n// ----- show/hide/remove ----- //\n\n// remove element from DOM\nproto.removeElem = function() {\n this.element.parentNode.removeChild( this.element );\n // remove display: none\n this.css({ display: '' });\n this.emitEvent( 'remove', [ this ] );\n};\n\nproto.remove = function() {\n // just remove element if no transition support or no transition\n if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {\n this.removeElem();\n return;\n }\n\n // start transition\n this.once( 'transitionEnd', function() {\n this.removeElem();\n });\n this.hide();\n};\n\nproto.reveal = function() {\n delete this.isHidden;\n // remove display: none\n this.css({ display: '' });\n\n var options = this.layout.options;\n\n var onTransitionEnd = {};\n var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');\n onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;\n\n this.transition({\n from: options.hiddenStyle,\n to: options.visibleStyle,\n isCleaning: true,\n onTransitionEnd: onTransitionEnd\n });\n};\n\nproto.onRevealTransitionEnd = function() {\n // check if still visible\n // during transition, item may have been hidden\n if ( !this.isHidden ) {\n this.emitEvent('reveal');\n }\n};\n\n/**\n * get style property use for hide/reveal transition end\n * @param {String} styleProperty - hiddenStyle/visibleStyle\n * @returns {String}\n */\nproto.getHideRevealTransitionEndProperty = function( styleProperty ) {\n var optionStyle = this.layout.options[ styleProperty ];\n // use opacity\n if ( optionStyle.opacity ) {\n return 'opacity';\n }\n // get first property\n for ( var prop in optionStyle ) {\n return prop;\n }\n};\n\nproto.hide = function() {\n // set flag\n this.isHidden = true;\n // remove display: none\n this.css({ display: '' });\n\n var options = this.layout.options;\n\n var onTransitionEnd = {};\n var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');\n onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;\n\n this.transition({\n from: options.visibleStyle,\n to: options.hiddenStyle,\n // keep hidden stuff hidden\n isCleaning: true,\n onTransitionEnd: onTransitionEnd\n });\n};\n\nproto.onHideTransitionEnd = function() {\n // check if still hidden\n // during transition, item may have been un-hidden\n if ( this.isHidden ) {\n this.css({ display: 'none' });\n this.emitEvent('hide');\n }\n};\n\nproto.destroy = function() {\n this.css({\n position: '',\n left: '',\n right: '',\n top: '',\n bottom: '',\n transition: '',\n transform: ''\n });\n};\n\nreturn Item;\n\n}));\n", "/*!\n * Outlayer v2.1.1\n * the brains and guts of a layout library\n * MIT license\n */\n\n( function( window, factory ) {\n 'use strict';\n // universal module definition\n /* jshint strict: false */ /* globals define, module, require */\n if ( typeof define == 'function' && define.amd ) {\n // AMD - RequireJS\n define( [\n 'ev-emitter/ev-emitter',\n 'get-size/get-size',\n 'fizzy-ui-utils/utils',\n './item'\n ],\n function( EvEmitter, getSize, utils, Item ) {\n return factory( window, EvEmitter, getSize, utils, Item);\n }\n );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS - Browserify, Webpack\n module.exports = factory(\n window,\n require('ev-emitter'),\n require('get-size'),\n require('fizzy-ui-utils'),\n require('./item')\n );\n } else {\n // browser global\n window.Outlayer = factory(\n window,\n window.EvEmitter,\n window.getSize,\n window.fizzyUIUtils,\n window.Outlayer.Item\n );\n }\n\n}( window, function factory( window, EvEmitter, getSize, utils, Item ) {\n'use strict';\n\n// ----- vars ----- //\n\nvar console = window.console;\nvar jQuery = window.jQuery;\nvar noop = function() {};\n\n// -------------------------- Outlayer -------------------------- //\n\n// globally unique identifiers\nvar GUID = 0;\n// internal store of all Outlayer intances\nvar instances = {};\n\n\n/**\n * @param {Element, String} element\n * @param {Object} options\n * @constructor\n */\nfunction Outlayer( element, options ) {\n var queryElement = utils.getQueryElement( element );\n if ( !queryElement ) {\n if ( console ) {\n console.error( 'Bad element for ' + this.constructor.namespace +\n ': ' + ( queryElement || element ) );\n }\n return;\n }\n this.element = queryElement;\n // add jQuery\n if ( jQuery ) {\n this.$element = jQuery( this.element );\n }\n\n // options\n this.options = utils.extend( {}, this.constructor.defaults );\n this.option( options );\n\n // add id for Outlayer.getFromElement\n var id = ++GUID;\n this.element.outlayerGUID = id; // expando\n instances[ id ] = this; // associate via id\n\n // kick it off\n this._create();\n\n var isInitLayout = this._getOption('initLayout');\n if ( isInitLayout ) {\n this.layout();\n }\n}\n\n// settings are for internal use only\nOutlayer.namespace = 'outlayer';\nOutlayer.Item = Item;\n\n// default options\nOutlayer.defaults = {\n containerStyle: {\n position: 'relative'\n },\n initLayout: true,\n originLeft: true,\n originTop: true,\n resize: true,\n resizeContainer: true,\n // item options\n transitionDuration: '0.4s',\n hiddenStyle: {\n opacity: 0,\n transform: 'scale(0.001)'\n },\n visibleStyle: {\n opacity: 1,\n transform: 'scale(1)'\n }\n};\n\nvar proto = Outlayer.prototype;\n// inherit EvEmitter\nutils.extend( proto, EvEmitter.prototype );\n\n/**\n * set options\n * @param {Object} opts\n */\nproto.option = function( opts ) {\n utils.extend( this.options, opts );\n};\n\n/**\n * get backwards compatible option value, check old name\n */\nproto._getOption = function( option ) {\n var oldOption = this.constructor.compatOptions[ option ];\n return oldOption && this.options[ oldOption ] !== undefined ?\n this.options[ oldOption ] : this.options[ option ];\n};\n\nOutlayer.compatOptions = {\n // currentName: oldName\n initLayout: 'isInitLayout',\n horizontal: 'isHorizontal',\n layoutInstant: 'isLayoutInstant',\n originLeft: 'isOriginLeft',\n originTop: 'isOriginTop',\n resize: 'isResizeBound',\n resizeContainer: 'isResizingContainer'\n};\n\nproto._create = function() {\n // get items from children\n this.reloadItems();\n // elements that affect layout, but are not laid out\n this.stamps = [];\n this.stamp( this.options.stamp );\n // set container style\n utils.extend( this.element.style, this.options.containerStyle );\n\n // bind resize method\n var canBindResize = this._getOption('resize');\n if ( canBindResize ) {\n this.bindResize();\n }\n};\n\n// goes through all children again and gets bricks in proper order\nproto.reloadItems = function() {\n // collection of item elements\n this.items = this._itemize( this.element.children );\n};\n\n\n/**\n * turn elements into Outlayer.Items to be used in layout\n * @param {Array or NodeList or HTMLElement} elems\n * @returns {Array} items - collection of new Outlayer Items\n */\nproto._itemize = function( elems ) {\n\n var itemElems = this._filterFindItemElements( elems );\n var Item = this.constructor.Item;\n\n // create new Outlayer Items for collection\n var items = [];\n for ( var i=0; i < itemElems.length; i++ ) {\n var elem = itemElems[i];\n var item = new Item( elem, this );\n items.push( item );\n }\n\n return items;\n};\n\n/**\n * get item elements to be used in layout\n * @param {Array or NodeList or HTMLElement} elems\n * @returns {Array} items - item elements\n */\nproto._filterFindItemElements = function( elems ) {\n return utils.filterFindElements( elems, this.options.itemSelector );\n};\n\n/**\n * getter method for getting item elements\n * @returns {Array} elems - collection of item elements\n */\nproto.getItemElements = function() {\n return this.items.map( function( item ) {\n return item.element;\n });\n};\n\n// ----- init & layout ----- //\n\n/**\n * lays out all items\n */\nproto.layout = function() {\n this._resetLayout();\n this._manageStamps();\n\n // don't animate first layout\n var layoutInstant = this._getOption('layoutInstant');\n var isInstant = layoutInstant !== undefined ?\n layoutInstant : !this._isLayoutInited;\n this.layoutItems( this.items, isInstant );\n\n // flag for initalized\n this._isLayoutInited = true;\n};\n\n// _init is alias for layout\nproto._init = proto.layout;\n\n/**\n * logic before any new layout\n */\nproto._resetLayout = function() {\n this.getSize();\n};\n\n\nproto.getSize = function() {\n this.size = getSize( this.element );\n};\n\n/**\n * get measurement from option, for columnWidth, rowHeight, gutter\n * if option is String -> get element from selector string, & get size of element\n * if option is Element -> get size of element\n * else use option as a number\n *\n * @param {String} measurement\n * @param {String} size - width or height\n * @private\n */\nproto._getMeasurement = function( measurement, size ) {\n var option = this.options[ measurement ];\n var elem;\n if ( !option ) {\n // default to 0\n this[ measurement ] = 0;\n } else {\n // use option as an element\n if ( typeof option == 'string' ) {\n elem = this.element.querySelector( option );\n } else if ( option instanceof HTMLElement ) {\n elem = option;\n }\n // use size of element, if element\n this[ measurement ] = elem ? getSize( elem )[ size ] : option;\n }\n};\n\n/**\n * layout a collection of item elements\n * @api public\n */\nproto.layoutItems = function( items, isInstant ) {\n items = this._getItemsForLayout( items );\n\n this._layoutItems( items, isInstant );\n\n this._postLayout();\n};\n\n/**\n * get the items to be laid out\n * you may want to skip over some items\n * @param {Array} items\n * @returns {Array} items\n */\nproto._getItemsForLayout = function( items ) {\n return items.filter( function( item ) {\n return !item.isIgnored;\n });\n};\n\n/**\n * layout items\n * @param {Array} items\n * @param {Boolean} isInstant\n */\nproto._layoutItems = function( items, isInstant ) {\n this._emitCompleteOnItems( 'layout', items );\n\n if ( !items || !items.length ) {\n // no items, emit event with empty array\n return;\n }\n\n var queue = [];\n\n items.forEach( function( item ) {\n // get x/y object from method\n var position = this._getItemLayoutPosition( item );\n // enqueue\n position.item = item;\n position.isInstant = isInstant || item.isLayoutInstant;\n queue.push( position );\n }, this );\n\n this._processLayoutQueue( queue );\n};\n\n/**\n * get item layout position\n * @param {Outlayer.Item} item\n * @returns {Object} x and y position\n */\nproto._getItemLayoutPosition = function( /* item */ ) {\n return {\n x: 0,\n y: 0\n };\n};\n\n/**\n * iterate over array and position each item\n * Reason being - separating this logic prevents 'layout invalidation'\n * thx @paul_irish\n * @param {Array} queue\n */\nproto._processLayoutQueue = function( queue ) {\n this.updateStagger();\n queue.forEach( function( obj, i ) {\n this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );\n }, this );\n};\n\n// set stagger from option in milliseconds number\nproto.updateStagger = function() {\n var stagger = this.options.stagger;\n if ( stagger === null || stagger === undefined ) {\n this.stagger = 0;\n return;\n }\n this.stagger = getMilliseconds( stagger );\n return this.stagger;\n};\n\n/**\n * Sets position of item in DOM\n * @param {Outlayer.Item} item\n * @param {Number} x - horizontal position\n * @param {Number} y - vertical position\n * @param {Boolean} isInstant - disables transitions\n */\nproto._positionItem = function( item, x, y, isInstant, i ) {\n if ( isInstant ) {\n // if not transition, just set CSS\n item.goTo( x, y );\n } else {\n item.stagger( i * this.stagger );\n item.moveTo( x, y );\n }\n};\n\n/**\n * Any logic you want to do after each layout,\n * i.e. size the container\n */\nproto._postLayout = function() {\n this.resizeContainer();\n};\n\nproto.resizeContainer = function() {\n var isResizingContainer = this._getOption('resizeContainer');\n if ( !isResizingContainer ) {\n return;\n }\n var size = this._getContainerSize();\n if ( size ) {\n this._setContainerMeasure( size.width, true );\n this._setContainerMeasure( size.height, false );\n }\n};\n\n/**\n * Sets width or height of container if returned\n * @returns {Object} size\n * @param {Number} width\n * @param {Number} height\n */\nproto._getContainerSize = noop;\n\n/**\n * @param {Number} measure - size of width or height\n * @param {Boolean} isWidth\n */\nproto._setContainerMeasure = function( measure, isWidth ) {\n if ( measure === undefined ) {\n return;\n }\n\n var elemSize = this.size;\n // add padding and border width if border box\n if ( elemSize.isBorderBox ) {\n measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +\n elemSize.borderLeftWidth + elemSize.borderRightWidth :\n elemSize.paddingBottom + elemSize.paddingTop +\n elemSize.borderTopWidth + elemSize.borderBottomWidth;\n }\n\n measure = Math.max( measure, 0 );\n this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';\n};\n\n/**\n * emit eventComplete on a collection of items events\n * @param {String} eventName\n * @param {Array} items - Outlayer.Items\n */\nproto._emitCompleteOnItems = function( eventName, items ) {\n var _this = this;\n function onComplete() {\n _this.dispatchEvent( eventName + 'Complete', null, [ items ] );\n }\n\n var count = items.length;\n if ( !items || !count ) {\n onComplete();\n return;\n }\n\n var doneCount = 0;\n function tick() {\n doneCount++;\n if ( doneCount == count ) {\n onComplete();\n }\n }\n\n // bind callback\n items.forEach( function( item ) {\n item.once( eventName, tick );\n });\n};\n\n/**\n * emits events via EvEmitter and jQuery events\n * @param {String} type - name of event\n * @param {Event} event - original event\n * @param {Array} args - extra arguments\n */\nproto.dispatchEvent = function( type, event, args ) {\n // add original event to arguments\n var emitArgs = event ? [ event ].concat( args ) : args;\n this.emitEvent( type, emitArgs );\n\n if ( jQuery ) {\n // set this.$element\n this.$element = this.$element || jQuery( this.element );\n if ( event ) {\n // create jQuery event\n var $event = jQuery.Event( event );\n $event.type = type;\n this.$element.trigger( $event, args );\n } else {\n // just trigger with type if no event available\n this.$element.trigger( type, args );\n }\n }\n};\n\n// -------------------------- ignore & stamps -------------------------- //\n\n\n/**\n * keep item in collection, but do not lay it out\n * ignored items do not get skipped in layout\n * @param {Element} elem\n */\nproto.ignore = function( elem ) {\n var item = this.getItem( elem );\n if ( item ) {\n item.isIgnored = true;\n }\n};\n\n/**\n * return item to layout collection\n * @param {Element} elem\n */\nproto.unignore = function( elem ) {\n var item = this.getItem( elem );\n if ( item ) {\n delete item.isIgnored;\n }\n};\n\n/**\n * adds elements to stamps\n * @param {NodeList, Array, Element, or String} elems\n */\nproto.stamp = function( elems ) {\n elems = this._find( elems );\n if ( !elems ) {\n return;\n }\n\n this.stamps = this.stamps.concat( elems );\n // ignore\n elems.forEach( this.ignore, this );\n};\n\n/**\n * removes elements to stamps\n * @param {NodeList, Array, or Element} elems\n */\nproto.unstamp = function( elems ) {\n elems = this._find( elems );\n if ( !elems ){\n return;\n }\n\n elems.forEach( function( elem ) {\n // filter out removed stamp elements\n utils.removeFrom( this.stamps, elem );\n this.unignore( elem );\n }, this );\n};\n\n/**\n * finds child elements\n * @param {NodeList, Array, Element, or String} elems\n * @returns {Array} elems\n */\nproto._find = function( elems ) {\n if ( !elems ) {\n return;\n }\n // if string, use argument as selector string\n if ( typeof elems == 'string' ) {\n elems = this.element.querySelectorAll( elems );\n }\n elems = utils.makeArray( elems );\n return elems;\n};\n\nproto._manageStamps = function() {\n if ( !this.stamps || !this.stamps.length ) {\n return;\n }\n\n this._getBoundingRect();\n\n this.stamps.forEach( this._manageStamp, this );\n};\n\n// update boundingLeft / Top\nproto._getBoundingRect = function() {\n // get bounding rect for container element\n var boundingRect = this.element.getBoundingClientRect();\n var size = this.size;\n this._boundingRect = {\n left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,\n top: boundingRect.top + size.paddingTop + size.borderTopWidth,\n right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),\n bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )\n };\n};\n\n/**\n * @param {Element} stamp\n**/\nproto._manageStamp = noop;\n\n/**\n * get x/y position of element relative to container element\n * @param {Element} elem\n * @returns {Object} offset - has left, top, right, bottom\n */\nproto._getElementOffset = function( elem ) {\n var boundingRect = elem.getBoundingClientRect();\n var thisRect = this._boundingRect;\n var size = getSize( elem );\n var offset = {\n left: boundingRect.left - thisRect.left - size.marginLeft,\n top: boundingRect.top - thisRect.top - size.marginTop,\n right: thisRect.right - boundingRect.right - size.marginRight,\n bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom\n };\n return offset;\n};\n\n// -------------------------- resize -------------------------- //\n\n// enable event handlers for listeners\n// i.e. resize -> onresize\nproto.handleEvent = utils.handleEvent;\n\n/**\n * Bind layout to window resizing\n */\nproto.bindResize = function() {\n window.addEventListener( 'resize', this );\n this.isResizeBound = true;\n};\n\n/**\n * Unbind layout to window resizing\n */\nproto.unbindResize = function() {\n window.removeEventListener( 'resize', this );\n this.isResizeBound = false;\n};\n\nproto.onresize = function() {\n this.resize();\n};\n\nutils.debounceMethod( Outlayer, 'onresize', 100 );\n\nproto.resize = function() {\n // don't trigger if size did not change\n // or if resize was unbound. See #9\n if ( !this.isResizeBound || !this.needsResizeLayout() ) {\n return;\n }\n\n this.layout();\n};\n\n/**\n * check if layout is needed post layout\n * @returns Boolean\n */\nproto.needsResizeLayout = function() {\n var size = getSize( this.element );\n // check that this.size and size are there\n // IE8 triggers resize on body size change, so they might not be\n var hasSizes = this.size && size;\n return hasSizes && size.innerWidth !== this.size.innerWidth;\n};\n\n// -------------------------- methods -------------------------- //\n\n/**\n * add items to Outlayer instance\n * @param {Array or NodeList or Element} elems\n * @returns {Array} items - Outlayer.Items\n**/\nproto.addItems = function( elems ) {\n var items = this._itemize( elems );\n // add items to collection\n if ( items.length ) {\n this.items = this.items.concat( items );\n }\n return items;\n};\n\n/**\n * Layout newly-appended item elements\n * @param {Array or NodeList or Element} elems\n */\nproto.appended = function( elems ) {\n var items = this.addItems( elems );\n if ( !items.length ) {\n return;\n }\n // layout and reveal just the new items\n this.layoutItems( items, true );\n this.reveal( items );\n};\n\n/**\n * Layout prepended elements\n * @param {Array or NodeList or Element} elems\n */\nproto.prepended = function( elems ) {\n var items = this._itemize( elems );\n if ( !items.length ) {\n return;\n }\n // add items to beginning of collection\n var previousItems = this.items.slice(0);\n this.items = items.concat( previousItems );\n // start new layout\n this._resetLayout();\n this._manageStamps();\n // layout new stuff without transition\n this.layoutItems( items, true );\n this.reveal( items );\n // layout previous items\n this.layoutItems( previousItems );\n};\n\n/**\n * reveal a collection of items\n * @param {Array of Outlayer.Items} items\n */\nproto.reveal = function( items ) {\n this._emitCompleteOnItems( 'reveal', items );\n if ( !items || !items.length ) {\n return;\n }\n var stagger = this.updateStagger();\n items.forEach( function( item, i ) {\n item.stagger( i * stagger );\n item.reveal();\n });\n};\n\n/**\n * hide a collection of items\n * @param {Array of Outlayer.Items} items\n */\nproto.hide = function( items ) {\n this._emitCompleteOnItems( 'hide', items );\n if ( !items || !items.length ) {\n return;\n }\n var stagger = this.updateStagger();\n items.forEach( function( item, i ) {\n item.stagger( i * stagger );\n item.hide();\n });\n};\n\n/**\n * reveal item elements\n * @param {Array}, {Element}, {NodeList} items\n */\nproto.revealItemElements = function( elems ) {\n var items = this.getItems( elems );\n this.reveal( items );\n};\n\n/**\n * hide item elements\n * @param {Array}, {Element}, {NodeList} items\n */\nproto.hideItemElements = function( elems ) {\n var items = this.getItems( elems );\n this.hide( items );\n};\n\n/**\n * get Outlayer.Item, given an Element\n * @param {Element} elem\n * @param {Function} callback\n * @returns {Outlayer.Item} item\n */\nproto.getItem = function( elem ) {\n // loop through items to get the one that matches\n for ( var i=0; i < this.items.length; i++ ) {\n var item = this.items[i];\n if ( item.element == elem ) {\n // return item\n return item;\n }\n }\n};\n\n/**\n * get collection of Outlayer.Items, given Elements\n * @param {Array} elems\n * @returns {Array} items - Outlayer.Items\n */\nproto.getItems = function( elems ) {\n elems = utils.makeArray( elems );\n var items = [];\n elems.forEach( function( elem ) {\n var item = this.getItem( elem );\n if ( item ) {\n items.push( item );\n }\n }, this );\n\n return items;\n};\n\n/**\n * remove element(s) from instance and DOM\n * @param {Array or NodeList or Element} elems\n */\nproto.remove = function( elems ) {\n var removeItems = this.getItems( elems );\n\n this._emitCompleteOnItems( 'remove', removeItems );\n\n // bail if no items to remove\n if ( !removeItems || !removeItems.length ) {\n return;\n }\n\n removeItems.forEach( function( item ) {\n item.remove();\n // remove item from collection\n utils.removeFrom( this.items, item );\n }, this );\n};\n\n// ----- destroy ----- //\n\n// remove and disable Outlayer instance\nproto.destroy = function() {\n // clean up dynamic styles\n var style = this.element.style;\n style.height = '';\n style.position = '';\n style.width = '';\n // destroy items\n this.items.forEach( function( item ) {\n item.destroy();\n });\n\n this.unbindResize();\n\n var id = this.element.outlayerGUID;\n delete instances[ id ]; // remove reference to instance by id\n delete this.element.outlayerGUID;\n // remove data for jQuery\n if ( jQuery ) {\n jQuery.removeData( this.element, this.constructor.namespace );\n }\n\n};\n\n// -------------------------- data -------------------------- //\n\n/**\n * get Outlayer instance from element\n * @param {Element} elem\n * @returns {Outlayer}\n */\nOutlayer.data = function( elem ) {\n elem = utils.getQueryElement( elem );\n var id = elem && elem.outlayerGUID;\n return id && instances[ id ];\n};\n\n\n// -------------------------- create Outlayer class -------------------------- //\n\n/**\n * create a layout class\n * @param {String} namespace\n */\nOutlayer.create = function( namespace, options ) {\n // sub-class Outlayer\n var Layout = subclass( Outlayer );\n // apply new options and compatOptions\n Layout.defaults = utils.extend( {}, Outlayer.defaults );\n utils.extend( Layout.defaults, options );\n Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions );\n\n Layout.namespace = namespace;\n\n Layout.data = Outlayer.data;\n\n // sub-class Item\n Layout.Item = subclass( Item );\n\n // -------------------------- declarative -------------------------- //\n\n utils.htmlInit( Layout, namespace );\n\n // -------------------------- jQuery bridge -------------------------- //\n\n // make into jQuery plugin\n if ( jQuery && jQuery.bridget ) {\n jQuery.bridget( namespace, Layout );\n }\n\n return Layout;\n};\n\nfunction subclass( Parent ) {\n function SubClass() {\n Parent.apply( this, arguments );\n }\n\n SubClass.prototype = Object.create( Parent.prototype );\n SubClass.prototype.constructor = SubClass;\n\n return SubClass;\n}\n\n// ----- helpers ----- //\n\n// how many milliseconds are in each unit\nvar msUnits = {\n ms: 1,\n s: 1000\n};\n\n// munge time-like parameter into millisecond number\n// '0.4s' -> 40\nfunction getMilliseconds( time ) {\n if ( typeof time == 'number' ) {\n return time;\n }\n var matches = time.match( /(^\\d*\\.?\\d*)(\\w*)/ );\n var num = matches && matches[1];\n var unit = matches && matches[2];\n if ( !num.length ) {\n return 0;\n }\n num = parseFloat( num );\n var mult = msUnits[ unit ] || 1;\n return num * mult;\n}\n\n// ----- fin ----- //\n\n// back in global\nOutlayer.Item = Item;\n\nreturn Outlayer;\n\n}));\n", "/*!\n * Masonry v4.2.2\n * Cascading grid layout library\n * https://masonry.desandro.com\n * MIT License\n * by David DeSandro\n */\n\n( function( window, factory ) {\n // universal module definition\n /* jshint strict: false */ /*globals define, module, require */\n if ( typeof define == 'function' && define.amd ) {\n // AMD\n define( [\n 'outlayer/outlayer',\n 'get-size/get-size'\n ],\n factory );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS\n module.exports = factory(\n require('outlayer'),\n require('get-size')\n );\n } else {\n // browser global\n window.Masonry = factory(\n window.Outlayer,\n window.getSize\n );\n }\n\n}( window, function factory( Outlayer, getSize ) {\n\n'use strict';\n\n// -------------------------- masonryDefinition -------------------------- //\n\n // create an Outlayer layout class\n var Masonry = Outlayer.create('masonry');\n // isFitWidth -> fitWidth\n Masonry.compatOptions.fitWidth = 'isFitWidth';\n\n var proto = Masonry.prototype;\n\n proto._resetLayout = function() {\n this.getSize();\n this._getMeasurement( 'columnWidth', 'outerWidth' );\n this._getMeasurement( 'gutter', 'outerWidth' );\n this.measureColumns();\n\n // reset column Y\n this.colYs = [];\n for ( var i=0; i < this.cols; i++ ) {\n this.colYs.push( 0 );\n }\n\n this.maxY = 0;\n this.horizontalColIndex = 0;\n };\n\n proto.measureColumns = function() {\n this.getContainerWidth();\n // if columnWidth is 0, default to outerWidth of first item\n if ( !this.columnWidth ) {\n var firstItem = this.items[0];\n var firstItemElem = firstItem && firstItem.element;\n // columnWidth fall back to item of first element\n this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||\n // if first elem has no width, default to size of container\n this.containerWidth;\n }\n\n var columnWidth = this.columnWidth += this.gutter;\n\n // calculate columns\n var containerWidth = this.containerWidth + this.gutter;\n var cols = containerWidth / columnWidth;\n // fix rounding errors, typically with gutters\n var excess = columnWidth - containerWidth % columnWidth;\n // if overshoot is less than a pixel, round up, otherwise floor it\n var mathMethod = excess && excess < 1 ? 'round' : 'floor';\n cols = Math[ mathMethod ]( cols );\n this.cols = Math.max( cols, 1 );\n };\n\n proto.getContainerWidth = function() {\n // container is parent if fit width\n var isFitWidth = this._getOption('fitWidth');\n var container = isFitWidth ? this.element.parentNode : this.element;\n // check that this.size and size are there\n // IE8 triggers resize on body size change, so they might not be\n var size = getSize( container );\n this.containerWidth = size && size.innerWidth;\n };\n\n proto._getItemLayoutPosition = function( item ) {\n item.getSize();\n // how many columns does this brick span\n var remainder = item.size.outerWidth % this.columnWidth;\n var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';\n // round if off by 1 pixel, otherwise use ceil\n var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );\n colSpan = Math.min( colSpan, this.cols );\n // use horizontal or top column position\n var colPosMethod = this.options.horizontalOrder ?\n '_getHorizontalColPosition' : '_getTopColPosition';\n var colPosition = this[ colPosMethod ]( colSpan, item );\n // position the brick\n var position = {\n x: this.columnWidth * colPosition.col,\n y: colPosition.y\n };\n // apply setHeight to necessary columns\n var setHeight = colPosition.y + item.size.outerHeight;\n var setMax = colSpan + colPosition.col;\n for ( var i = colPosition.col; i < setMax; i++ ) {\n this.colYs[i] = setHeight;\n }\n\n return position;\n };\n\n proto._getTopColPosition = function( colSpan ) {\n var colGroup = this._getTopColGroup( colSpan );\n // get the minimum Y value from the columns\n var minimumY = Math.min.apply( Math, colGroup );\n\n return {\n col: colGroup.indexOf( minimumY ),\n y: minimumY,\n };\n };\n\n /**\n * @param {Number} colSpan - number of columns the element spans\n * @returns {Array} colGroup\n */\n proto._getTopColGroup = function( colSpan ) {\n if ( colSpan < 2 ) {\n // if brick spans only one column, use all the column Ys\n return this.colYs;\n }\n\n var colGroup = [];\n // how many different places could this brick fit horizontally\n var groupCount = this.cols + 1 - colSpan;\n // for each group potential horizontal position\n for ( var i = 0; i < groupCount; i++ ) {\n colGroup[i] = this._getColGroupY( i, colSpan );\n }\n return colGroup;\n };\n\n proto._getColGroupY = function( col, colSpan ) {\n if ( colSpan < 2 ) {\n return this.colYs[ col ];\n }\n // make an array of colY values for that one group\n var groupColYs = this.colYs.slice( col, col + colSpan );\n // and get the max value of the array\n return Math.max.apply( Math, groupColYs );\n };\n\n // get column position based on horizontal index. #873\n proto._getHorizontalColPosition = function( colSpan, item ) {\n var col = this.horizontalColIndex % this.cols;\n var isOver = colSpan > 1 && col + colSpan > this.cols;\n // shift to next row if item can't fit on current row\n col = isOver ? 0 : col;\n // don't let zero-size items take up space\n var hasSize = item.size.outerWidth && item.size.outerHeight;\n this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;\n\n return {\n col: col,\n y: this._getColGroupY( col, colSpan ),\n };\n };\n\n proto._manageStamp = function( stamp ) {\n var stampSize = getSize( stamp );\n var offset = this._getElementOffset( stamp );\n // get the columns that this stamp affects\n var isOriginLeft = this._getOption('originLeft');\n var firstX = isOriginLeft ? offset.left : offset.right;\n var lastX = firstX + stampSize.outerWidth;\n var firstCol = Math.floor( firstX / this.columnWidth );\n firstCol = Math.max( 0, firstCol );\n var lastCol = Math.floor( lastX / this.columnWidth );\n // lastCol should not go over if multiple of columnWidth #425\n lastCol -= lastX % this.columnWidth ? 0 : 1;\n lastCol = Math.min( this.cols - 1, lastCol );\n // set colYs to bottom of the stamp\n\n var isOriginTop = this._getOption('originTop');\n var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +\n stampSize.outerHeight;\n for ( var i = firstCol; i <= lastCol; i++ ) {\n this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );\n }\n };\n\n proto._getContainerSize = function() {\n this.maxY = Math.max.apply( Math, this.colYs );\n var size = {\n height: this.maxY\n };\n\n if ( this._getOption('fitWidth') ) {\n size.width = this._getContainerFitWidth();\n }\n\n return size;\n };\n\n proto._getContainerFitWidth = function() {\n var unusedCols = 0;\n // count unused columns\n var i = this.cols;\n while ( --i ) {\n if ( this.colYs[i] !== 0 ) {\n break;\n }\n unusedCols++;\n }\n // fit container to columns that have been used\n return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;\n };\n\n proto.needsResizeLayout = function() {\n var previousWidth = this.containerWidth;\n this.getContainerWidth();\n return previousWidth != this.containerWidth;\n };\n\n return Masonry;\n\n}));\n", "/**\n * EvEmitter v2.1.1\n * Lil' event emitter\n * MIT License\n */\n\n( function( global, factory ) {\n // universal module definition\n if ( typeof module == 'object' && module.exports ) {\n // CommonJS - Browserify, Webpack\n module.exports = factory();\n } else {\n // Browser globals\n global.EvEmitter = factory();\n }\n\n}( typeof window != 'undefined' ? window : this, function() {\n\nfunction EvEmitter() {}\n\nlet proto = EvEmitter.prototype;\n\nproto.on = function( eventName, listener ) {\n if ( !eventName || !listener ) return this;\n\n // set events hash\n let events = this._events = this._events || {};\n // set listeners array\n let listeners = events[ eventName ] = events[ eventName ] || [];\n // only add once\n if ( !listeners.includes( listener ) ) {\n listeners.push( listener );\n }\n\n return this;\n};\n\nproto.once = function( eventName, listener ) {\n if ( !eventName || !listener ) return this;\n\n // add event\n this.on( eventName, listener );\n // set once flag\n // set onceEvents hash\n let onceEvents = this._onceEvents = this._onceEvents || {};\n // set onceListeners object\n let onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};\n // set flag\n onceListeners[ listener ] = true;\n\n return this;\n};\n\nproto.off = function( eventName, listener ) {\n let listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) return this;\n\n let index = listeners.indexOf( listener );\n if ( index != -1 ) {\n listeners.splice( index, 1 );\n }\n\n return this;\n};\n\nproto.emitEvent = function( eventName, args ) {\n let listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) return this;\n\n // copy over to avoid interference if .off() in listener\n listeners = listeners.slice( 0 );\n args = args || [];\n // once stuff\n let onceListeners = this._onceEvents && this._onceEvents[ eventName ];\n\n for ( let listener of listeners ) {\n let isOnce = onceListeners && onceListeners[ listener ];\n if ( isOnce ) {\n // remove listener\n // remove before trigger to prevent recursion\n this.off( eventName, listener );\n // unset once flag\n delete onceListeners[ listener ];\n }\n // trigger listener\n listener.apply( this, args );\n }\n\n return this;\n};\n\nproto.allOff = function() {\n delete this._events;\n delete this._onceEvents;\n return this;\n};\n\nreturn EvEmitter;\n\n} ) );\n", "/*!\n * imagesLoaded v5.0.0\n * JavaScript is all like \"You images are done yet or what?\"\n * MIT License\n */\n\n( function( window, factory ) {\n // universal module definition\n if ( typeof module == 'object' && module.exports ) {\n // CommonJS\n module.exports = factory( window, require('ev-emitter') );\n } else {\n // browser global\n window.imagesLoaded = factory( window, window.EvEmitter );\n }\n\n} )( typeof window !== 'undefined' ? window : this,\n function factory( window, EvEmitter ) {\n\nlet $ = window.jQuery;\nlet console = window.console;\n\n// -------------------------- helpers -------------------------- //\n\n// turn element or nodeList into an array\nfunction makeArray( obj ) {\n // use object if already an array\n if ( Array.isArray( obj ) ) return obj;\n\n let isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';\n // convert nodeList to array\n if ( isArrayLike ) return [ ...obj ];\n\n // array of single index\n return [ obj ];\n}\n\n// -------------------------- imagesLoaded -------------------------- //\n\n/**\n * @param {[Array, Element, NodeList, String]} elem\n * @param {[Object, Function]} options - if function, use as callback\n * @param {Function} onAlways - callback function\n * @returns {ImagesLoaded}\n */\nfunction ImagesLoaded( elem, options, onAlways ) {\n // coerce ImagesLoaded() without new, to be new ImagesLoaded()\n if ( !( this instanceof ImagesLoaded ) ) {\n return new ImagesLoaded( elem, options, onAlways );\n }\n // use elem as selector string\n let queryElem = elem;\n if ( typeof elem == 'string' ) {\n queryElem = document.querySelectorAll( elem );\n }\n // bail if bad element\n if ( !queryElem ) {\n console.error(`Bad element for imagesLoaded ${queryElem || elem}`);\n return;\n }\n\n this.elements = makeArray( queryElem );\n this.options = {};\n // shift arguments if no options set\n if ( typeof options == 'function' ) {\n onAlways = options;\n } else {\n Object.assign( this.options, options );\n }\n\n if ( onAlways ) this.on( 'always', onAlways );\n\n this.getImages();\n // add jQuery Deferred object\n if ( $ ) this.jqDeferred = new $.Deferred();\n\n // HACK check async to allow time to bind listeners\n setTimeout( this.check.bind( this ) );\n}\n\nImagesLoaded.prototype = Object.create( EvEmitter.prototype );\n\nImagesLoaded.prototype.getImages = function() {\n this.images = [];\n\n // filter & find items if we have an item selector\n this.elements.forEach( this.addElementImages, this );\n};\n\nconst elementNodeTypes = [ 1, 9, 11 ];\n\n/**\n * @param {Node} elem\n */\nImagesLoaded.prototype.addElementImages = function( elem ) {\n // filter siblings\n if ( elem.nodeName === 'IMG' ) {\n this.addImage( elem );\n }\n // get background image on element\n if ( this.options.background === true ) {\n this.addElementBackgroundImages( elem );\n }\n\n // find children\n // no non-element nodes, #143\n let { nodeType } = elem;\n if ( !nodeType || !elementNodeTypes.includes( nodeType ) ) return;\n\n let childImgs = elem.querySelectorAll('img');\n // concat childElems to filterFound array\n for ( let img of childImgs ) {\n this.addImage( img );\n }\n\n // get child background images\n if ( typeof this.options.background == 'string' ) {\n let children = elem.querySelectorAll( this.options.background );\n for ( let child of children ) {\n this.addElementBackgroundImages( child );\n }\n }\n};\n\nconst reURL = /url\\((['\"])?(.*?)\\1\\)/gi;\n\nImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {\n let style = getComputedStyle( elem );\n // Firefox returns null if in a hidden iframe https://bugzil.la/548397\n if ( !style ) return;\n\n // get url inside url(\"...\")\n let matches = reURL.exec( style.backgroundImage );\n while ( matches !== null ) {\n let url = matches && matches[2];\n if ( url ) {\n this.addBackground( url, elem );\n }\n matches = reURL.exec( style.backgroundImage );\n }\n};\n\n/**\n * @param {Image} img\n */\nImagesLoaded.prototype.addImage = function( img ) {\n let loadingImage = new LoadingImage( img );\n this.images.push( loadingImage );\n};\n\nImagesLoaded.prototype.addBackground = function( url, elem ) {\n let background = new Background( url, elem );\n this.images.push( background );\n};\n\nImagesLoaded.prototype.check = function() {\n this.progressedCount = 0;\n this.hasAnyBroken = false;\n // complete if no images\n if ( !this.images.length ) {\n this.complete();\n return;\n }\n\n /* eslint-disable-next-line func-style */\n let onProgress = ( image, elem, message ) => {\n // HACK - Chrome triggers event before object properties have changed. #83\n setTimeout( () => {\n this.progress( image, elem, message );\n } );\n };\n\n this.images.forEach( function( loadingImage ) {\n loadingImage.once( 'progress', onProgress );\n loadingImage.check();\n } );\n};\n\nImagesLoaded.prototype.progress = function( image, elem, message ) {\n this.progressedCount++;\n this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;\n // progress event\n this.emitEvent( 'progress', [ this, image, elem ] );\n if ( this.jqDeferred && this.jqDeferred.notify ) {\n this.jqDeferred.notify( this, image );\n }\n // check if completed\n if ( this.progressedCount === this.images.length ) {\n this.complete();\n }\n\n if ( this.options.debug && console ) {\n console.log( `progress: ${message}`, image, elem );\n }\n};\n\nImagesLoaded.prototype.complete = function() {\n let eventName = this.hasAnyBroken ? 'fail' : 'done';\n this.isComplete = true;\n this.emitEvent( eventName, [ this ] );\n this.emitEvent( 'always', [ this ] );\n if ( this.jqDeferred ) {\n let jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';\n this.jqDeferred[ jqMethod ]( this );\n }\n};\n\n// -------------------------- -------------------------- //\n\nfunction LoadingImage( img ) {\n this.img = img;\n}\n\nLoadingImage.prototype = Object.create( EvEmitter.prototype );\n\nLoadingImage.prototype.check = function() {\n // If complete is true and browser supports natural sizes,\n // try to check for image status manually.\n let isComplete = this.getIsImageComplete();\n if ( isComplete ) {\n // report based on naturalWidth\n this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );\n return;\n }\n\n // If none of the checks above matched, simulate loading on detached element.\n this.proxyImage = new Image();\n // add crossOrigin attribute. #204\n if ( this.img.crossOrigin ) {\n this.proxyImage.crossOrigin = this.img.crossOrigin;\n }\n this.proxyImage.addEventListener( 'load', this );\n this.proxyImage.addEventListener( 'error', this );\n // bind to image as well for Firefox. #191\n this.img.addEventListener( 'load', this );\n this.img.addEventListener( 'error', this );\n this.proxyImage.src = this.img.currentSrc || this.img.src;\n};\n\nLoadingImage.prototype.getIsImageComplete = function() {\n // check for non-zero, non-undefined naturalWidth\n // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671\n return this.img.complete && this.img.naturalWidth;\n};\n\nLoadingImage.prototype.confirm = function( isLoaded, message ) {\n this.isLoaded = isLoaded;\n let { parentNode } = this.img;\n // emit progress with parent or self \n let elem = parentNode.nodeName === 'PICTURE' ? parentNode : this.img;\n this.emitEvent( 'progress', [ this, elem, message ] );\n};\n\n// ----- events ----- //\n\n// trigger specified handler for event type\nLoadingImage.prototype.handleEvent = function( event ) {\n let method = 'on' + event.type;\n if ( this[ method ] ) {\n this[ method ]( event );\n }\n};\n\nLoadingImage.prototype.onload = function() {\n this.confirm( true, 'onload' );\n this.unbindEvents();\n};\n\nLoadingImage.prototype.onerror = function() {\n this.confirm( false, 'onerror' );\n this.unbindEvents();\n};\n\nLoadingImage.prototype.unbindEvents = function() {\n this.proxyImage.removeEventListener( 'load', this );\n this.proxyImage.removeEventListener( 'error', this );\n this.img.removeEventListener( 'load', this );\n this.img.removeEventListener( 'error', this );\n};\n\n// -------------------------- Background -------------------------- //\n\nfunction Background( url, element ) {\n this.url = url;\n this.element = element;\n this.img = new Image();\n}\n\n// inherit LoadingImage prototype\nBackground.prototype = Object.create( LoadingImage.prototype );\n\nBackground.prototype.check = function() {\n this.img.addEventListener( 'load', this );\n this.img.addEventListener( 'error', this );\n this.img.src = this.url;\n // check if image is already complete\n let isComplete = this.getIsImageComplete();\n if ( isComplete ) {\n this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );\n this.unbindEvents();\n }\n};\n\nBackground.prototype.unbindEvents = function() {\n this.img.removeEventListener( 'load', this );\n this.img.removeEventListener( 'error', this );\n};\n\nBackground.prototype.confirm = function( isLoaded, message ) {\n this.isLoaded = isLoaded;\n this.emitEvent( 'progress', [ this, this.element, message ] );\n};\n\n// -------------------------- jQuery -------------------------- //\n\nImagesLoaded.makeJQueryPlugin = function( jQuery ) {\n jQuery = jQuery || window.jQuery;\n if ( !jQuery ) return;\n\n // set local variable\n $ = jQuery;\n // $().imagesLoaded()\n $.fn.imagesLoaded = function( options, onAlways ) {\n let instance = new ImagesLoaded( this, options, onAlways );\n return instance.jqDeferred.promise( $( this ) );\n };\n};\n// try making plugin\nImagesLoaded.makeJQueryPlugin();\n\n// -------------------------- -------------------------- //\n\nreturn ImagesLoaded;\n\n} );\n", "(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Pickr\"] = factory();\n\telse\n\t\troot[\"Pickr\"] = factory();\n})(self, () => {\nreturn ", "// The require scope\nvar __webpack_require__ = {};\n\n", "// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};", "__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))", "// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};", "/* eslint-disable prefer-rest-params */\nfunction eventListener(method, elements, events, fn, options = {}) {\n\n // Normalize array\n if (elements instanceof HTMLCollection || elements instanceof NodeList) {\n elements = Array.from(elements);\n } else if (!Array.isArray(elements)) {\n elements = [elements];\n }\n\n if (!Array.isArray(events)) {\n events = [events];\n }\n\n for (const el of elements) {\n for (const ev of events) {\n el[method](ev, fn, {capture: false, ...options});\n }\n }\n\n return Array.prototype.slice.call(arguments, 1);\n}\n\n/**\n * Add event(s) to element(s).\n * @param elements DOM-Elements\n * @param events Event names\n * @param fn Callback\n * @param options Optional options\n * @return Array passed arguments\n */\nexport const on = eventListener.bind(null, 'addEventListener');\n\n/**\n * Remove event(s) from element(s).\n * @param elements DOM-Elements\n * @param events Event names\n * @param fn Callback\n * @param options Optional options\n * @return Array passed arguments\n */\nexport const off = eventListener.bind(null, 'removeEventListener');\n\n/**\n * Creates an DOM-Element out of a string (Single element).\n * @param html HTML representing a single element\n * @returns {Element | null} The element.\n */\nexport function createElementFromString(html) {\n const div = document.createElement('div');\n div.innerHTML = html.trim();\n return div.firstElementChild;\n}\n\n/**\n * Creates a new html element, every element which has\n * a ':ref' attribute will be saved in a object (which will be returned)\n * where the value of ':ref' is the object-key and the value the HTMLElement.\n *\n * It's possible to create a hierarchy if you add a ':obj' attribute. Every\n * sibling will be added to the object which will get the name from the 'data-con' attribute.\n *\n * If you want to create an Array out of multiple elements, you can use the ':arr' attribute,\n * the value defines the key and all elements, which has the same parent and the same 'data-arr' attribute,\n * would be added to it.\n *\n * @param str - The HTML String.\n */\n\nexport function createFromTemplate(str) {\n\n // Removes an attribute from a HTMLElement and returns the value.\n const removeAttribute = (el, name) => {\n const value = el.getAttribute(name);\n el.removeAttribute(name);\n return value;\n };\n\n // Recursive function to resolve template\n const resolve = (element, base = {}) => {\n\n // Check key and container attribute\n const con = removeAttribute(element, ':obj');\n const key = removeAttribute(element, ':ref');\n const subtree = con ? (base[con] = {}) : base;\n\n // Check and save element\n key && (base[key] = element);\n for (const child of Array.from(element.children)) {\n const arr = removeAttribute(child, ':arr');\n const sub = resolve(child, arr ? {} : subtree);\n\n if (arr) {\n\n // Check if there is already an array and add element\n (subtree[arr] || (subtree[arr] = []))\n .push(Object.keys(sub).length ? sub : child);\n }\n }\n\n return base;\n };\n\n return resolve(createElementFromString(str));\n}\n\n/**\n * Polyfill for safari & firefox for the eventPath event property.\n * @param evt The event object.\n * @return [String] event path.\n */\nexport function eventPath(evt) {\n let path = evt.path || (evt.composedPath && evt.composedPath());\n if (path) {\n return path;\n }\n\n let el = evt.target.parentElement;\n path = [evt.target, el];\n while (el = el.parentElement) {\n path.push(el);\n }\n\n path.push(document, window);\n return path;\n}\n\n/**\n * Resolves a HTMLElement by query.\n * @param val\n * @returns {null|Document|Element}\n */\nexport function resolveElement(val) {\n if (val instanceof Element) {\n return val;\n } else if (typeof val === 'string') {\n return val.split(/>>/g).reduce((pv, cv, ci, a) => {\n pv = pv.querySelector(cv);\n return ci < a.length - 1 ? pv.shadowRoot : pv;\n }, document);\n }\n\n return null;\n}\n\n/**\n * Creates the ability to change numbers in an input field with the scroll-wheel.\n * @param el\n * @param mapper\n */\nexport function adjustableInputNumbers(el, mapper = v => v) {\n\n function handleScroll(e) {\n const inc = ([0.001, 0.01, 0.1])[Number(e.shiftKey || e.ctrlKey * 2)] * (e.deltaY < 0 ? 1 : -1);\n\n let index = 0;\n let off = el.selectionStart;\n el.value = el.value.replace(/[\\d.]+/g, (v, i) => {\n\n // Check if number is in cursor range and increase it\n if (i <= off && i + v.length >= off) {\n off = i;\n return mapper(Number(v), inc, index);\n }\n\n index++;\n return v;\n });\n\n el.focus();\n el.setSelectionRange(off, off);\n\n // Prevent default and trigger input event\n e.preventDefault();\n el.dispatchEvent(new Event('input'));\n }\n\n // Bind events\n on(el, 'focus', () => on(window, 'wheel', handleScroll, {passive: false}));\n on(el, 'blur', () => off(window, 'wheel', handleScroll));\n}\n", "// Shorthands\nconst {min, max, floor, round} = Math;\n\n/**\n * Tries to convert a color name to rgb/a hex representation\n * @param name\n * @returns {string | CanvasGradient | CanvasPattern}\n */\nfunction standardizeColor(name) {\n\n // Since invalid color's will be parsed as black, filter them out\n if (name.toLowerCase() === 'black') {\n return '#000';\n }\n\n const ctx = document.createElement('canvas').getContext('2d');\n ctx.fillStyle = name;\n return ctx.fillStyle === '#000' ? null : ctx.fillStyle;\n}\n\n/**\n * Convert HSV spectrum to RGB.\n * @param h Hue\n * @param s Saturation\n * @param v Value\n * @returns {number[]} Array with rgb values.\n */\nexport function hsvToRgb(h, s, v) {\n h = (h / 360) * 6;\n s /= 100;\n v /= 100;\n\n const i = floor(h);\n\n const f = h - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n\n const mod = i % 6;\n const r = [v, q, p, p, t, v][mod];\n const g = [t, v, v, q, p, p][mod];\n const b = [p, p, t, v, v, q][mod];\n\n return [\n r * 255,\n g * 255,\n b * 255\n ];\n}\n\n/**\n * Convert HSV spectrum to Hex.\n * @param h Hue\n * @param s Saturation\n * @param v Value\n * @returns {string[]} Hex values\n */\nexport function hsvToHex(h, s, v) {\n return hsvToRgb(h, s, v).map(v =>\n round(v).toString(16).padStart(2, '0')\n );\n}\n\n/**\n * Convert HSV spectrum to CMYK.\n * @param h Hue\n * @param s Saturation\n * @param v Value\n * @returns {number[]} CMYK values\n */\nexport function hsvToCmyk(h, s, v) {\n const rgb = hsvToRgb(h, s, v);\n const r = rgb[0] / 255;\n const g = rgb[1] / 255;\n const b = rgb[2] / 255;\n\n const k = min(1 - r, 1 - g, 1 - b);\n const c = k === 1 ? 0 : (1 - r - k) / (1 - k);\n const m = k === 1 ? 0 : (1 - g - k) / (1 - k);\n const y = k === 1 ? 0 : (1 - b - k) / (1 - k);\n\n return [\n c * 100,\n m * 100,\n y * 100,\n k * 100\n ];\n}\n\n/**\n * Convert HSV spectrum to HSL.\n * @param h Hue\n * @param s Saturation\n * @param v Value\n * @returns {number[]} HSL values\n */\nexport function hsvToHsl(h, s, v) {\n s /= 100;\n v /= 100;\n\n const l = (2 - s) * v / 2;\n\n if (l !== 0) {\n if (l === 1) {\n s = 0;\n } else if (l < 0.5) {\n s = s * v / (l * 2);\n } else {\n s = s * v / (2 - l * 2);\n }\n }\n\n return [\n h,\n s * 100,\n l * 100\n ];\n}\n\n/**\n * Convert RGB to HSV.\n * @param r Red\n * @param g Green\n * @param b Blue\n * @return {number[]} HSV values.\n */\nfunction rgbToHsv(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n\n const minVal = min(r, g, b);\n const maxVal = max(r, g, b);\n const delta = maxVal - minVal;\n\n let h, s;\n const v = maxVal;\n if (delta === 0) {\n h = s = 0;\n } else {\n s = delta / maxVal;\n const dr = (((maxVal - r) / 6) + (delta / 2)) / delta;\n const dg = (((maxVal - g) / 6) + (delta / 2)) / delta;\n const db = (((maxVal - b) / 6) + (delta / 2)) / delta;\n\n if (r === maxVal) {\n h = db - dg;\n } else if (g === maxVal) {\n h = (1 / 3) + dr - db;\n } else if (b === maxVal) {\n h = (2 / 3) + dg - dr;\n }\n\n if (h < 0) {\n h += 1;\n } else if (h > 1) {\n h -= 1;\n }\n }\n\n return [\n h * 360,\n s * 100,\n v * 100\n ];\n}\n\n/**\n * Convert CMYK to HSV.\n * @param c Cyan\n * @param m Magenta\n * @param y Yellow\n * @param k Key (Black)\n * @return {number[]} HSV values.\n */\nfunction cmykToHsv(c, m, y, k) {\n c /= 100;\n m /= 100;\n y /= 100;\n k /= 100;\n\n const r = (1 - min(1, c * (1 - k) + k)) * 255;\n const g = (1 - min(1, m * (1 - k) + k)) * 255;\n const b = (1 - min(1, y * (1 - k) + k)) * 255;\n\n return [...rgbToHsv(r, g, b)];\n}\n\n/**\n * Convert HSL to HSV.\n * @param h Hue\n * @param s Saturation\n * @param l Lightness\n * @return {number[]} HSV values.\n */\nfunction hslToHsv(h, s, l) {\n s /= 100;\n l /= 100;\n s *= l < 0.5 ? l : 1 - l;\n\n const ns = (2 * s / (l + s)) * 100;\n const v = (l + s) * 100;\n return [h, isNaN(ns) ? 0 : ns, v];\n}\n\n/**\n * Convert HEX to HSV.\n * @param hex Hexadecimal string of rgb colors, can have length 3 or 6.\n * @return {number[]} HSV values.\n */\nfunction hexToHsv(hex) {\n return rgbToHsv(...hex.match(/.{2}/g).map(v => parseInt(v, 16)));\n}\n\n/**\n * Try's to parse a string which represents a color to a HSV array.\n * Current supported types are cmyk, rgba, hsla and hexadecimal.\n * @param str\n * @return {*}\n */\nexport function parseToHSVA(str) {\n\n // Check if string is a color-name\n str = str.match(/^[a-zA-Z]+$/) ? standardizeColor(str) : str;\n\n // Regular expressions to match different types of color represention\n const regex = {\n cmyk: /^cmyk\\D+([\\d.]+)\\D+([\\d.]+)\\D+([\\d.]+)\\D+([\\d.]+)/i,\n rgba: /^rgba?\\D+([\\d.]+)(%?)\\D+([\\d.]+)(%?)\\D+([\\d.]+)(%?)\\D*?(([\\d.]+)(%?)|$)/i,\n hsla: /^hsla?\\D+([\\d.]+)\\D+([\\d.]+)\\D+([\\d.]+)\\D*?(([\\d.]+)(%?)|$)/i,\n hsva: /^hsva?\\D+([\\d.]+)\\D+([\\d.]+)\\D+([\\d.]+)\\D*?(([\\d.]+)(%?)|$)/i,\n hexa: /^#?(([\\dA-Fa-f]{3,4})|([\\dA-Fa-f]{6})|([\\dA-Fa-f]{8}))$/i\n };\n\n /**\n * Takes an Array of any type, convert strings which represents\n * a number to a number an anything else to undefined.\n * @param array\n * @return {*}\n */\n const numarize = array => array.map(v => /^(|\\d+)\\.\\d+|\\d+$/.test(v) ? Number(v) : undefined);\n\n let match;\n invalid: for (const type in regex) {\n\n // Check if current scheme passed\n if (!(match = regex[type].exec(str))) {\n continue;\n }\n\n // Try to convert\n switch (type) {\n case 'cmyk': {\n const [, c, m, y, k] = numarize(match);\n\n if (c > 100 || m > 100 || y > 100 || k > 100) {\n break invalid;\n }\n\n return {values: cmykToHsv(c, m, y, k), type};\n }\n case 'rgba': {\n let [, r, , g, , b, , , a] = numarize(match);\n\n r = match[2] === '%' ? (r / 100) * 255 : r;\n g = match[4] === '%' ? (g / 100) * 255 : g;\n b = match[6] === '%' ? (b / 100) * 255 : b;\n a = match[9] === '%' ? (a / 100) : a;\n\n if (r > 255 || g > 255 || b > 255 || a < 0 || a > 1) {\n break invalid;\n }\n\n return {values: [...rgbToHsv(r, g, b), a], a, type};\n }\n case 'hexa': {\n let [, hex] = match;\n\n if (hex.length === 4 || hex.length === 3) {\n hex = hex.split('').map(v => v + v).join('');\n }\n\n const raw = hex.substring(0, 6);\n let a = hex.substring(6);\n\n // Convert 0 - 255 to 0 - 1 for opacity\n a = a ? (parseInt(a, 16) / 255) : undefined;\n\n return {values: [...hexToHsv(raw), a], a, type};\n }\n case 'hsla': {\n let [, h, s, l, , a] = numarize(match);\n a = match[6] === '%' ? (a / 100) : a;\n\n if (h > 360 || s > 100 || l > 100 || a < 0 || a > 1) {\n break invalid;\n }\n\n return {values: [...hslToHsv(h, s, l), a], a, type};\n }\n case 'hsva': {\n let [, h, s, v, , a] = numarize(match);\n a = match[6] === '%' ? (a / 100) : a;\n\n if (h > 360 || s > 100 || v > 100 || a < 0 || a > 1) {\n break invalid;\n }\n\n return {values: [h, s, v, a], a, type};\n }\n }\n }\n\n return {values: null, type: null};\n}\n", "import {hsvToCmyk, hsvToHex, hsvToHsl, hsvToRgb} from './color';\n\n/**\n * Simple class which holds the properties\n * of the color represention model hsla (hue saturation lightness alpha)\n */\nexport function HSVaColor(h = 0, s = 0, v = 0, a = 1) {\n const mapper = (original, next) => (precision = -1) => {\n return next(~precision ? original.map(v => Number(v.toFixed(precision))) : original);\n };\n\n const that = {\n h, s, v, a,\n\n toHSVA() {\n const hsva = [that.h, that.s, that.v, that.a];\n hsva.toString = mapper(hsva, arr => `hsva(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${that.a})`);\n return hsva;\n },\n\n toHSLA() {\n const hsla = [...hsvToHsl(that.h, that.s, that.v), that.a];\n hsla.toString = mapper(hsla, arr => `hsla(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${that.a})`);\n return hsla;\n },\n\n toRGBA() {\n const rgba = [...hsvToRgb(that.h, that.s, that.v), that.a];\n rgba.toString = mapper(rgba, arr => `rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, ${that.a})`);\n return rgba;\n },\n\n toCMYK() {\n const cmyk = hsvToCmyk(that.h, that.s, that.v);\n cmyk.toString = mapper(cmyk, arr => `cmyk(${arr[0]}%, ${arr[1]}%, ${arr[2]}%, ${arr[3]}%)`);\n return cmyk;\n },\n\n toHEXA() {\n const hex = hsvToHex(that.h, that.s, that.v);\n\n // Check if alpha channel make sense, convert it to 255 number space, convert\n // To hex and pad it with zeros if needet.\n const alpha = that.a >= 1 ? '' : Number((that.a * 255).toFixed(0))\n .toString(16)\n .toUpperCase().padStart(2, '0');\n\n alpha && hex.push(alpha);\n hex.toString = () => `#${hex.join('').toUpperCase()}`;\n return hex;\n },\n\n clone: () => HSVaColor(that.h, that.s, that.v, that.a)\n };\n\n return that;\n}\n", "import * as _ from '../utils/utils';\n\nconst clamp = v => Math.max(Math.min(v, 1), 0);\nexport default function Moveable(opt) {\n\n const that = {\n\n // Assign default values\n options: Object.assign({\n lock: null,\n onchange: () => 0,\n onstop: () => 0\n }, opt),\n\n _keyboard(e) {\n const {options} = that;\n const {type, key} = e;\n\n // Check to see if the Movable is focused and then move it based on arrow key inputs\n // For improved accessibility\n if (document.activeElement === options.wrapper) {\n const {lock} = that.options;\n const up = key === 'ArrowUp';\n const right = key === 'ArrowRight';\n const down = key === 'ArrowDown';\n const left = key === 'ArrowLeft';\n\n if (type === 'keydown' && (up || right || down || left)) {\n let xm = 0;\n let ym = 0;\n\n if (lock === 'v') {\n xm = (up || right) ? 1 : -1;\n } else if (lock === 'h') {\n xm = (up || right) ? -1 : 1;\n } else {\n ym = up ? -1 : (down ? 1 : 0);\n xm = left ? -1 : (right ? 1 : 0);\n }\n\n that.update(\n clamp(that.cache.x + (0.01 * xm)),\n clamp(that.cache.y + (0.01 * ym))\n );\n e.preventDefault();\n } else if (key.startsWith('Arrow')) {\n that.options.onstop();\n e.preventDefault();\n }\n }\n },\n\n _tapstart(evt) {\n _.on(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);\n _.on(document, ['mousemove', 'touchmove'], that._tapmove);\n\n if (evt.cancelable) {\n evt.preventDefault();\n }\n\n // Trigger\n that._tapmove(evt);\n },\n\n _tapmove(evt) {\n const {options, cache} = that;\n const {lock, element, wrapper} = options;\n const b = wrapper.getBoundingClientRect();\n\n let x = 0, y = 0;\n if (evt) {\n const touch = evt && evt.touches && evt.touches[0];\n x = evt ? (touch || evt).clientX : 0;\n y = evt ? (touch || evt).clientY : 0;\n\n // Reset to bounds\n if (x < b.left) {\n x = b.left;\n } else if (x > b.left + b.width) {\n x = b.left + b.width;\n }\n if (y < b.top) {\n y = b.top;\n } else if (y > b.top + b.height) {\n y = b.top + b.height;\n }\n\n // Normalize\n x -= b.left;\n y -= b.top;\n } else if (cache) {\n x = cache.x * b.width;\n y = cache.y * b.height;\n }\n\n if (lock !== 'h') {\n element.style.left = `calc(${x / b.width * 100}% - ${element.offsetWidth / 2}px)`;\n }\n\n if (lock !== 'v') {\n element.style.top = `calc(${y / b.height * 100}% - ${element.offsetHeight / 2}px)`;\n }\n\n that.cache = {x: x / b.width, y: y / b.height};\n const cx = clamp(x / b.width);\n const cy = clamp(y / b.height);\n\n switch (lock) {\n case 'v':\n return options.onchange(cx);\n case 'h':\n return options.onchange(cy);\n default:\n return options.onchange(cx, cy);\n }\n },\n\n _tapstop() {\n that.options.onstop();\n _.off(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);\n _.off(document, ['mousemove', 'touchmove'], that._tapmove);\n },\n\n trigger() {\n that._tapmove();\n },\n\n update(x = 0, y = 0) {\n const {left, top, width, height} = that.options.wrapper.getBoundingClientRect();\n\n if (that.options.lock === 'h') {\n y = x;\n }\n\n that._tapmove({\n clientX: left + width * x,\n clientY: top + height * y\n });\n },\n\n destroy() {\n const {options, _tapstart, _keyboard} = that;\n _.off(document, ['keydown', 'keyup'], _keyboard);\n _.off([options.wrapper, options.element], 'mousedown', _tapstart);\n _.off([options.wrapper, options.element], 'touchstart', _tapstart, {\n passive: false\n });\n }\n };\n\n // Initilize\n const {options, _tapstart, _keyboard} = that;\n _.on([options.wrapper, options.element], 'mousedown', _tapstart);\n _.on([options.wrapper, options.element], 'touchstart', _tapstart, {\n passive: false\n });\n\n _.on(document, ['keydown', 'keyup'], _keyboard);\n\n return that;\n}\n", "import * as _ from '../utils/utils';\n\nexport default function Selectable(opt = {}) {\n opt = Object.assign({\n onchange: () => 0,\n className: '',\n elements: []\n }, opt);\n\n const onTap = _.on(opt.elements, 'click', evt => {\n opt.elements.forEach(e =>\n e.classList[evt.target === e ? 'add' : 'remove'](opt.className)\n );\n\n opt.onchange(evt);\n\n // Fix for https://github.com/Simonwep/pickr/issues/243\n evt.stopPropagation();\n });\n\n return {\n destroy: () => _.off(...onTap)\n };\n}\n", "import * as _ from './utils/utils';\n\nexport default instance => {\n\n const {\n components,\n useAsButton,\n inline,\n appClass,\n theme,\n lockOpacity\n } = instance.options;\n\n // Utils\n const hidden = con => con ? '' : 'style=\"display:none\" hidden';\n const t = str => instance._t(str);\n\n const root = _.createFromTemplate(`\n
\n\n ${useAsButton ? '' : ''}\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n `);\n\n const int = root.interaction;\n\n // Select option which is not hidden\n int.options.find(o => !o.hidden && !o.classList.add('active'));\n\n // Append method to find currently active option\n int.type = () => int.options.find(e => e.classList.contains('active'));\n return root;\n};\n", "/*! NanoPop 2.4.2 MIT | https://github.com/Simonwep/nanopop */\nconst N = \"2.4.2\", I = {\n variantFlipOrder: { start: \"sme\", middle: \"mse\", end: \"ems\" },\n positionFlipOrder: { top: \"tbrl\", right: \"rltb\", bottom: \"btrl\", left: \"lrbt\" },\n position: \"bottom\",\n margin: 8,\n padding: 0\n}, J = (n, i, m) => {\n const {\n container: r,\n arrow: a,\n margin: e,\n padding: l,\n position: V,\n variantFlipOrder: C,\n positionFlipOrder: M\n } = {\n container: document.documentElement.getBoundingClientRect(),\n ...I,\n ...m\n }, { left: F, top: K } = i.style;\n i.style.left = \"0\", i.style.top = \"0\";\n const t = n.getBoundingClientRect(), o = i.getBoundingClientRect(), P = {\n t: t.top - o.height - e,\n b: t.bottom + e,\n r: t.right + e,\n l: t.left - o.width - e\n }, R = {\n vs: t.left,\n vm: t.left + t.width / 2 - o.width / 2,\n ve: t.left + t.width - o.width,\n hs: t.top,\n hm: t.bottom - t.height / 2 - o.height / 2,\n he: t.bottom - o.height\n }, [$, E = \"middle\"] = V.split(\"-\"), L = M[$], j = C[E], { top: y, left: x, bottom: B, right: O } = r;\n for (const c of L) {\n const s = c === \"t\" || c === \"b\";\n let p = P[c];\n const [d, g] = s ? [\"top\", \"left\"] : [\"left\", \"top\"], [u, v] = s ? [o.height, o.width] : [o.width, o.height], [z, T] = s ? [B, O] : [O, B], [H, k] = s ? [y, x] : [x, y];\n if (!(p < H || p + u + l > z))\n for (const b of j) {\n let f = R[(s ? \"v\" : \"h\") + b];\n if (!(f < k || f + v + l > T)) {\n if (f -= o[g], p -= o[d], i.style[g] = `${f}px`, i.style[d] = `${p}px`, a) {\n const w = s ? t.width / 2 : t.height / 2, h = v / 2, S = w > h, q = {\n s: S ? h : w,\n m: h,\n e: S ? h : v - w\n }, A = {\n t: u,\n b: 0,\n r: 0,\n l: u\n }, D = f + q[b], G = p + A[c];\n a.style[g] = `${D}px`, a.style[d] = `${G}px`;\n }\n return c + b;\n }\n }\n }\n return i.style.left = F, i.style.top = K, null;\n}, Q = (n, i, m) => {\n const r = typeof n == \"object\" && !(n instanceof HTMLElement) ? n : { reference: n, popper: i, ...m };\n return {\n /**\n * Repositions the current popper.\n * @param options Optional options which get merged with the current ones.\n */\n update(a = r) {\n const { reference: e, popper: l } = Object.assign(r, a);\n if (!l || !e)\n throw new Error(\"Popper- or reference-element missing.\");\n return J(e, l, r);\n }\n };\n};\nexport {\n Q as createPopper,\n I as defaults,\n J as reposition,\n N as version\n};\n//# sourceMappingURL=nanopop.mjs.map\n", "import * as _ from './utils/utils';\nimport {parseToHSVA} from './utils/color';\nimport {HSVaColor} from './utils/hsvacolor';\nimport Moveable from './libs/moveable';\nimport Selectable from './libs/selectable';\nimport buildPickr from './template';\nimport {createPopper} from 'nanopop';\n\nexport default class Pickr {\n\n // Expose pickr utils\n static utils = _;\n\n // Assign version and export\n static version = VERSION;\n\n // Default strings\n static I18N_DEFAULTS = {\n\n // Strings visible in the UI\n 'ui:dialog': 'color picker dialog',\n 'btn:toggle': 'toggle color picker dialog',\n 'btn:swatch': 'color swatch',\n 'btn:last-color': 'use previous color',\n 'btn:save': 'Save',\n 'btn:cancel': 'Cancel',\n 'btn:clear': 'Clear',\n\n // Strings used for aria-labels\n 'aria:btn:save': 'save and close',\n 'aria:btn:cancel': 'cancel and close',\n 'aria:btn:clear': 'clear and close',\n 'aria:input': 'color input field',\n 'aria:palette': 'color selection area',\n 'aria:hue': 'hue selection slider',\n 'aria:opacity': 'selection slider'\n };\n\n // Default options\n static DEFAULT_OPTIONS = {\n appClass: null,\n theme: 'classic',\n useAsButton: false,\n padding: 8,\n disabled: false,\n comparison: true,\n closeOnScroll: false,\n outputPrecision: 0,\n lockOpacity: false,\n autoReposition: true,\n container: 'body',\n\n components: {\n interaction: {}\n },\n\n i18n: {},\n swatches: null,\n inline: false,\n sliders: null,\n\n default: '#42445a',\n defaultRepresentation: null,\n position: 'bottom-middle',\n adjustableNumbers: true,\n showAlways: false,\n\n closeWithKey: 'Escape'\n };\n\n // Will be used to prevent specific actions during initilization\n _initializingActive = true;\n\n // If the current color value should be recalculated\n _recalc = true;\n\n // Positioning engine and DOM-Tree\n _nanopop = null;\n _root = null;\n\n // Current and last color for comparison\n _color = HSVaColor();\n _lastColor = HSVaColor();\n _swatchColors = [];\n\n // Animation frame used for setup.\n // Will be cancelled in case of destruction.\n _setupAnimationFrame = null;\n\n // Evenlistener name: [callbacks]\n _eventListener = {\n init: [],\n save: [],\n hide: [],\n show: [],\n clear: [],\n change: [],\n changestop: [],\n cancel: [],\n swatchselect: []\n };\n\n constructor(opt) {\n\n // Assign default values\n this.options = opt = Object.assign({...Pickr.DEFAULT_OPTIONS}, opt);\n\n const {swatches, components, theme, sliders, lockOpacity, padding} = opt;\n\n if (['nano', 'monolith'].includes(theme) && !sliders) {\n opt.sliders = 'h';\n }\n\n // Check interaction section\n if (!components.interaction) {\n components.interaction = {};\n }\n\n // Overwrite palette if preview, opacity or hue are true\n const {preview, opacity, hue, palette} = components;\n components.opacity = (!lockOpacity && opacity);\n components.palette = palette || preview || opacity || hue;\n\n // Initialize picker\n this._preBuild();\n this._buildComponents();\n this._bindEvents();\n this._finalBuild();\n\n // Append pre-defined swatch colors\n if (swatches && swatches.length) {\n swatches.forEach(color => this.addSwatch(color));\n }\n\n // Initialize positioning engine\n const {button, app} = this._root;\n this._nanopop = createPopper(button, app, {\n margin: padding\n });\n\n // Initialize accessibility\n button.setAttribute('role', 'button');\n button.setAttribute('aria-label', this._t('btn:toggle'));\n\n // Initilization is finish, pickr is visible and ready for usage\n const that = this;\n this._setupAnimationFrame = requestAnimationFrame((function cb() {\n\n // TODO: Performance issue due to high call-rate?\n if (!app.offsetWidth) {\n return requestAnimationFrame(cb);\n }\n\n // Apply default color\n that.setColor(opt.default);\n that._rePositioningPicker();\n\n // Initialize color representation\n if (opt.defaultRepresentation) {\n that._representation = opt.defaultRepresentation;\n that.setColorRepresentation(that._representation);\n }\n\n // Show pickr if locked\n if (opt.showAlways) {\n that.show();\n }\n\n // Initialization is done - pickr is usable, fire init event\n that._initializingActive = false;\n that._emit('init');\n }));\n }\n\n // Create instance via method\n static create = options => new Pickr(options);\n\n // Does only the absolutly basic thing to initialize the components\n _preBuild() {\n const {options} = this;\n\n // Resolve elements\n for (const type of ['el', 'container']) {\n options[type] = _.resolveElement(options[type]);\n }\n\n // Create element and append it to body to\n // Prevent initialization errors\n this._root = buildPickr(this);\n\n // Check if a custom button is used\n if (options.useAsButton) {\n this._root.button = options.el; // Replace button with customized button\n }\n\n options.container.appendChild(this._root.root);\n }\n\n _finalBuild() {\n const opt = this.options;\n const root = this._root;\n\n // Remove from body\n opt.container.removeChild(root.root);\n\n if (opt.inline) {\n const parent = opt.el.parentElement;\n\n if (opt.el.nextSibling) {\n parent.insertBefore(root.app, opt.el.nextSibling);\n } else {\n parent.appendChild(root.app);\n }\n } else {\n opt.container.appendChild(root.app);\n }\n\n // Don't replace the the element if a custom button is used\n if (!opt.useAsButton) {\n\n // Replace element with actual color-picker\n opt.el.parentNode.replaceChild(root.root, opt.el);\n } else if (opt.inline) {\n opt.el.remove();\n }\n\n // Check if it should be immediatly disabled\n if (opt.disabled) {\n this.disable();\n }\n\n // Check if color comparison is disabled, if yes - remove transitions so everything keeps smoothly\n if (!opt.comparison) {\n root.button.style.transition = 'none';\n\n if (!opt.useAsButton) {\n root.preview.lastColor.style.transition = 'none';\n }\n }\n\n this.hide();\n }\n\n _buildComponents() {\n\n // Instance reference\n const inst = this;\n const cs = this.options.components;\n const sliders = (inst.options.sliders || 'v').repeat(2);\n const [so, sh] = sliders.match(/^[vh]+$/g) ? sliders : [];\n\n // Re-assign if null\n const getColor = () =>\n this._color || (this._color = this._lastColor.clone());\n\n const components = {\n\n palette: Moveable({\n element: inst._root.palette.picker,\n wrapper: inst._root.palette.palette,\n\n onstop: () => inst._emit('changestop', 'slider', inst),\n onchange(x, y) {\n if (!cs.palette) {\n return;\n }\n\n const color = getColor();\n const {_root, options} = inst;\n const {lastColor, currentColor} = _root.preview;\n\n // Update the input field only if the user is currently not typing\n if (inst._recalc) {\n\n // Calculate saturation based on the position\n color.s = x * 100;\n\n // Calculate the value\n color.v = 100 - y * 100;\n\n // Prevent falling under zero\n color.v < 0 ? color.v = 0 : 0;\n inst._updateOutput('slider');\n }\n\n // Set picker and gradient color\n const cssRGBaString = color.toRGBA().toString(0);\n this.element.style.background = cssRGBaString;\n this.wrapper.style.background = `\n linear-gradient(to top, rgba(0, 0, 0, ${color.a}), transparent),\n linear-gradient(to left, hsla(${color.h}, 100%, 50%, ${color.a}), rgba(255, 255, 255, ${color.a}))\n `;\n\n // Check if color is locked\n if (!options.comparison) {\n _root.button.style.setProperty('--pcr-color', cssRGBaString);\n\n // If the user changes the color, remove the cleared icon\n _root.button.classList.remove('clear');\n } else if (!options.useAsButton && !inst._lastColor) {\n\n // Apply color to both the last and current color since the current state is cleared\n lastColor.style.setProperty('--pcr-color', cssRGBaString);\n }\n\n // Check if there's a swatch which color matches the current one\n const hexa = color.toHEXA().toString();\n for (const {el, color} of inst._swatchColors) {\n el.classList[hexa === color.toHEXA().toString() ? 'add' : 'remove']('pcr-active');\n }\n\n // Change current color\n currentColor.style.setProperty('--pcr-color', cssRGBaString);\n }\n }),\n\n hue: Moveable({\n lock: sh === 'v' ? 'h' : 'v',\n element: inst._root.hue.picker,\n wrapper: inst._root.hue.slider,\n\n onstop: () => inst._emit('changestop', 'slider', inst),\n onchange(v) {\n if (!cs.hue || !cs.palette) {\n return;\n }\n\n const color = getColor();\n\n // Calculate hue\n if (inst._recalc) {\n color.h = v * 360;\n }\n\n // Update color\n this.element.style.backgroundColor = `hsl(${color.h}, 100%, 50%)`;\n components.palette.trigger();\n }\n }),\n\n opacity: Moveable({\n lock: so === 'v' ? 'h' : 'v',\n element: inst._root.opacity.picker,\n wrapper: inst._root.opacity.slider,\n\n onstop: () => inst._emit('changestop', 'slider', inst),\n onchange(v) {\n if (!cs.opacity || !cs.palette) {\n return;\n }\n\n const color = getColor();\n\n // Calculate opacity\n if (inst._recalc) {\n color.a = Math.round(v * 1e2) / 100;\n }\n\n // Update color\n this.element.style.background = `rgba(0, 0, 0, ${color.a})`;\n components.palette.trigger();\n }\n }),\n\n selectable: Selectable({\n elements: inst._root.interaction.options,\n className: 'active',\n\n onchange(e) {\n inst._representation = e.target.getAttribute('data-type').toUpperCase();\n inst._recalc && inst._updateOutput('swatch');\n }\n })\n };\n\n this._components = components;\n }\n\n _bindEvents() {\n const {_root, options} = this;\n\n const eventBindings = [\n\n // Clear color\n _.on(_root.interaction.clear, 'click', () => this._clearColor()),\n\n // Select last color on click\n _.on([\n _root.interaction.cancel,\n _root.preview.lastColor\n ], 'click', () => {\n this.setHSVA(...(this._lastColor || this._color).toHSVA(), true);\n this._emit('cancel');\n }),\n\n // Save color\n _.on(_root.interaction.save, 'click', () => {\n !this.applyColor() && !options.showAlways && this.hide();\n }),\n\n // User input\n _.on(_root.interaction.result, ['keyup', 'input'], e => {\n\n // Fire listener if initialization is finish and changed color was valid\n if (this.setColor(e.target.value, true) && !this._initializingActive) {\n this._emit('change', this._color, 'input', this);\n this._emit('changestop', 'input', this);\n }\n\n e.stopImmediatePropagation();\n }),\n\n // Detect user input and disable auto-recalculation\n _.on(_root.interaction.result, ['focus', 'blur'], e => {\n this._recalc = e.type === 'blur';\n this._recalc && this._updateOutput(null);\n }),\n\n // Cancel input detection on color change\n _.on([\n _root.palette.palette,\n _root.palette.picker,\n _root.hue.slider,\n _root.hue.picker,\n _root.opacity.slider,\n _root.opacity.picker\n ], ['mousedown', 'touchstart'], () => this._recalc = true, {passive: true})\n ];\n\n // Provide hiding / showing abilities only if showAlways is false\n if (!options.showAlways) {\n const ck = options.closeWithKey;\n\n eventBindings.push(\n\n // Save and hide / show picker\n _.on(_root.button, 'click', () => this.isOpen() ? this.hide() : this.show()),\n\n // Close with escape key\n _.on(document, 'keyup', e => this.isOpen() && (e.key === ck || e.code === ck) && this.hide()),\n\n // Cancel selecting if the user taps behind the color picker\n _.on(document, ['touchstart', 'mousedown'], e => {\n if (this.isOpen() && !_.eventPath(e).some(el => el === _root.app || el === _root.button)) {\n this.hide();\n }\n }, {capture: true})\n );\n }\n\n // Make input adjustable if enabled\n if (options.adjustableNumbers) {\n const ranges = {\n rgba: [255, 255, 255, 1],\n hsva: [360, 100, 100, 1],\n hsla: [360, 100, 100, 1],\n cmyk: [100, 100, 100, 100]\n };\n\n _.adjustableInputNumbers(_root.interaction.result, (o, step, index) => {\n const range = ranges[this.getColorRepresentation().toLowerCase()];\n\n if (range) {\n const max = range[index];\n\n // Calculate next reasonable number\n const nv = o + (max >= 100 ? step * 1000 : step);\n\n // Apply range of zero up to max, fix floating-point issues\n return nv <= 0 ? 0 : Number((nv < max ? nv : max).toPrecision(3));\n }\n\n return o;\n });\n }\n\n if (options.autoReposition && !options.inline) {\n let timeout = null;\n const that = this;\n\n // Re-calc position on window resize, scroll and wheel\n eventBindings.push(\n _.on(window, ['scroll', 'resize'], () => {\n if (that.isOpen()) {\n\n if (options.closeOnScroll) {\n that.hide();\n }\n\n if (timeout === null) {\n timeout = setTimeout(() => timeout = null, 100);\n\n // Update position on every frame\n requestAnimationFrame(function rs() {\n that._rePositioningPicker();\n (timeout !== null) && requestAnimationFrame(rs);\n });\n } else {\n clearTimeout(timeout);\n timeout = setTimeout(() => timeout = null, 100);\n }\n }\n }, {capture: true})\n );\n }\n\n // Save bindings\n this._eventBindings = eventBindings;\n }\n\n _rePositioningPicker() {\n const {options} = this;\n\n // No repositioning needed if inline\n if (!options.inline) {\n const success = this._nanopop.update({\n container: document.body.getBoundingClientRect(),\n position: options.position\n });\n\n if (!success) {\n const el = this._root.app;\n const eb = el.getBoundingClientRect();\n el.style.top = `${(window.innerHeight - eb.height) / 2}px`;\n el.style.left = `${(window.innerWidth - eb.width) / 2}px`;\n }\n }\n }\n\n _updateOutput(eventSource) {\n const {_root, _color, options} = this;\n\n // Check if component is present\n if (_root.interaction.type()) {\n\n // Construct function name and call if present\n const method = `to${_root.interaction.type().getAttribute('data-type')}`;\n _root.interaction.result.value = typeof _color[method] === 'function' ?\n _color[method]().toString(options.outputPrecision) : '';\n }\n\n // Fire listener if initialization is finish\n if (!this._initializingActive && this._recalc) {\n this._emit('change', _color, eventSource, this);\n }\n }\n\n _clearColor(silent = false) {\n const {_root, options} = this;\n\n // Change only the button color if it isn't customized\n if (!options.useAsButton) {\n _root.button.style.setProperty('--pcr-color', 'rgba(0, 0, 0, 0.15)');\n }\n\n _root.button.classList.add('clear');\n\n if (!options.showAlways) {\n this.hide();\n }\n\n this._lastColor = null;\n if (!this._initializingActive && !silent) {\n\n // Fire listener\n this._emit('save', null);\n this._emit('clear');\n }\n }\n\n _parseLocalColor(str) {\n const {values, type, a} = parseToHSVA(str);\n const {lockOpacity} = this.options;\n const alphaMakesAChange = a !== undefined && a !== 1;\n\n // If no opacity is applied, add undefined at the very end which gets\n // Set to 1 in setHSVA\n if (values && values.length === 3) {\n values[3] = undefined;\n }\n\n return {\n values: (!values || (lockOpacity && alphaMakesAChange)) ? null : values,\n type\n };\n }\n\n _t(key) {\n return this.options.i18n[key] || Pickr.I18N_DEFAULTS[key];\n }\n\n _emit(event, ...args) {\n this._eventListener[event].forEach(cb => cb(...args, this));\n }\n\n on(event, cb) {\n this._eventListener[event].push(cb);\n return this;\n }\n\n off(event, cb) {\n const callBacks = (this._eventListener[event] || []);\n const index = callBacks.indexOf(cb);\n\n if (~index) {\n callBacks.splice(index, 1);\n }\n\n return this;\n }\n\n /**\n * Appends a color to the swatch palette\n * @param color\n * @returns {boolean}\n */\n addSwatch(color) {\n const {values} = this._parseLocalColor(color);\n\n if (values) {\n const {_swatchColors, _root} = this;\n const color = HSVaColor(...values);\n\n // Create new swatch HTMLElement\n const el = _.createElementFromString(\n `