diff --git a/js/flat-lazy.js b/js/flat-lazy.js index b13f1c9..b1ac7e4 100644 --- a/js/flat-lazy.js +++ b/js/flat-lazy.js @@ -1,144 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./node_modules/intersection-observer/intersection-observer.js": -/*!*********************************************************************!*\ - !*** ./node_modules/intersection-observer/intersection-observer.js ***! - \*********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -eval("/**\n * Copyright 2016 Google Inc. All Rights Reserved.\n *\n * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.\n *\n * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document\n *\n */\n(function() {\n'use strict';\n\n// Exit early if we're not running in a browser.\nif (typeof window !== 'object') {\n return;\n}\n\n// Exit early if all IntersectionObserver and IntersectionObserverEntry\n// features are natively supported.\nif ('IntersectionObserver' in window &&\n 'IntersectionObserverEntry' in window &&\n 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {\n\n // Minimal polyfill for Edge 15's lack of `isIntersecting`\n // See: https://github.com/w3c/IntersectionObserver/issues/211\n if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {\n Object.defineProperty(window.IntersectionObserverEntry.prototype,\n 'isIntersecting', {\n get: function () {\n return this.intersectionRatio > 0;\n }\n });\n }\n return;\n}\n\n/**\n * Returns the embedding frame element, if any.\n * @param {!Document} doc\n * @return {!Element}\n */\nfunction getFrameElement(doc) {\n try {\n return doc.defaultView && doc.defaultView.frameElement || null;\n } catch (e) {\n // Ignore the error.\n return null;\n }\n}\n\n/**\n * A local reference to the root document.\n */\nvar document = (function(startDoc) {\n var doc = startDoc;\n var frame = getFrameElement(doc);\n while (frame) {\n doc = frame.ownerDocument;\n frame = getFrameElement(doc);\n }\n return doc;\n})(window.document);\n\n/**\n * An IntersectionObserver registry. This registry exists to hold a strong\n * reference to IntersectionObserver instances currently observing a target\n * element. Without this registry, instances without another reference may be\n * garbage collected.\n */\nvar registry = [];\n\n/**\n * The signal updater for cross-origin intersection. When not null, it means\n * that the polyfill is configured to work in a cross-origin mode.\n * @type {function(DOMRect|ClientRect, DOMRect|ClientRect)}\n */\nvar crossOriginUpdater = null;\n\n/**\n * The current cross-origin intersection. Only used in the cross-origin mode.\n * @type {DOMRect|ClientRect}\n */\nvar crossOriginRect = null;\n\n\n/**\n * Creates the global IntersectionObserverEntry constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry\n * @param {Object} entry A dictionary of instance properties.\n * @constructor\n */\nfunction IntersectionObserverEntry(entry) {\n this.time = entry.time;\n this.target = entry.target;\n this.rootBounds = ensureDOMRect(entry.rootBounds);\n this.boundingClientRect = ensureDOMRect(entry.boundingClientRect);\n this.intersectionRect = ensureDOMRect(entry.intersectionRect || getEmptyRect());\n this.isIntersecting = !!entry.intersectionRect;\n\n // Calculates the intersection ratio.\n var targetRect = this.boundingClientRect;\n var targetArea = targetRect.width * targetRect.height;\n var intersectionRect = this.intersectionRect;\n var intersectionArea = intersectionRect.width * intersectionRect.height;\n\n // Sets intersection ratio.\n if (targetArea) {\n // Round the intersection ratio to avoid floating point math issues:\n // https://github.com/w3c/IntersectionObserver/issues/324\n this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));\n } else {\n // If area is zero and is intersecting, sets to 1, otherwise to 0\n this.intersectionRatio = this.isIntersecting ? 1 : 0;\n }\n}\n\n\n/**\n * Creates the global IntersectionObserver constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface\n * @param {Function} callback The function to be invoked after intersection\n * changes have queued. The function is not invoked if the queue has\n * been emptied by calling the `takeRecords` method.\n * @param {Object=} opt_options Optional configuration options.\n * @constructor\n */\nfunction IntersectionObserver(callback, opt_options) {\n\n var options = opt_options || {};\n\n if (typeof callback != 'function') {\n throw new Error('callback must be a function');\n }\n\n if (options.root && options.root.nodeType != 1) {\n throw new Error('root must be an Element');\n }\n\n // Binds and throttles `this._checkForIntersections`.\n this._checkForIntersections = throttle(\n this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);\n\n // Private properties.\n this._callback = callback;\n this._observationTargets = [];\n this._queuedEntries = [];\n this._rootMarginValues = this._parseRootMargin(options.rootMargin);\n\n // Public properties.\n this.thresholds = this._initThresholds(options.threshold);\n this.root = options.root || null;\n this.rootMargin = this._rootMarginValues.map(function(margin) {\n return margin.value + margin.unit;\n }).join(' ');\n\n /** @private @const {!Array} */\n this._monitoringDocuments = [];\n /** @private @const {!Array} */\n this._monitoringUnsubscribes = [];\n}\n\n\n/**\n * The minimum interval within which the document will be checked for\n * intersection changes.\n */\nIntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;\n\n\n/**\n * The frequency in which the polyfill polls for intersection changes.\n * this can be updated on a per instance basis and must be set prior to\n * calling `observe` on the first target.\n */\nIntersectionObserver.prototype.POLL_INTERVAL = null;\n\n/**\n * Use a mutation observer on the root element\n * to detect intersection changes.\n */\nIntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;\n\n\n/**\n * Sets up the polyfill in the cross-origin mode. The result is the\n * updater function that accepts two arguments: `boundingClientRect` and\n * `intersectionRect` - just as these fields would be available to the\n * parent via `IntersectionObserverEntry`. This function should be called\n * each time the iframe receives intersection information from the parent\n * window, e.g. via messaging.\n * @return {function(DOMRect|ClientRect, DOMRect|ClientRect)}\n */\nIntersectionObserver._setupCrossOriginUpdater = function() {\n if (!crossOriginUpdater) {\n /**\n * @param {DOMRect|ClientRect} boundingClientRect\n * @param {DOMRect|ClientRect} intersectionRect\n */\n crossOriginUpdater = function(boundingClientRect, intersectionRect) {\n if (!boundingClientRect || !intersectionRect) {\n crossOriginRect = getEmptyRect();\n } else {\n crossOriginRect = convertFromParentRect(boundingClientRect, intersectionRect);\n }\n registry.forEach(function(observer) {\n observer._checkForIntersections();\n });\n };\n }\n return crossOriginUpdater;\n};\n\n\n/**\n * Resets the cross-origin mode.\n */\nIntersectionObserver._resetCrossOriginUpdater = function() {\n crossOriginUpdater = null;\n crossOriginRect = null;\n};\n\n\n/**\n * Starts observing a target element for intersection changes based on\n * the thresholds values.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.observe = function(target) {\n var isTargetAlreadyObserved = this._observationTargets.some(function(item) {\n return item.element == target;\n });\n\n if (isTargetAlreadyObserved) {\n return;\n }\n\n if (!(target && target.nodeType == 1)) {\n throw new Error('target must be an Element');\n }\n\n this._registerInstance();\n this._observationTargets.push({element: target, entry: null});\n this._monitorIntersections(target.ownerDocument);\n this._checkForIntersections();\n};\n\n\n/**\n * Stops observing a target element for intersection changes.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.unobserve = function(target) {\n this._observationTargets =\n this._observationTargets.filter(function(item) {\n return item.element != target;\n });\n this._unmonitorIntersections(target.ownerDocument);\n if (this._observationTargets.length == 0) {\n this._unregisterInstance();\n }\n};\n\n\n/**\n * Stops observing all target elements for intersection changes.\n */\nIntersectionObserver.prototype.disconnect = function() {\n this._observationTargets = [];\n this._unmonitorAllIntersections();\n this._unregisterInstance();\n};\n\n\n/**\n * Returns any queue entries that have not yet been reported to the\n * callback and clears the queue. This can be used in conjunction with the\n * callback to obtain the absolute most up-to-date intersection information.\n * @return {Array} The currently queued entries.\n */\nIntersectionObserver.prototype.takeRecords = function() {\n var records = this._queuedEntries.slice();\n this._queuedEntries = [];\n return records;\n};\n\n\n/**\n * Accepts the threshold value from the user configuration object and\n * returns a sorted array of unique threshold values. If a value is not\n * between 0 and 1 and error is thrown.\n * @private\n * @param {Array|number=} opt_threshold An optional threshold value or\n * a list of threshold values, defaulting to [0].\n * @return {Array} A sorted list of unique and valid threshold values.\n */\nIntersectionObserver.prototype._initThresholds = function(opt_threshold) {\n var threshold = opt_threshold || [0];\n if (!Array.isArray(threshold)) threshold = [threshold];\n\n return threshold.sort().filter(function(t, i, a) {\n if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {\n throw new Error('threshold must be a number between 0 and 1 inclusively');\n }\n return t !== a[i - 1];\n });\n};\n\n\n/**\n * Accepts the rootMargin value from the user configuration object\n * and returns an array of the four margin values as an object containing\n * the value and unit properties. If any of the values are not properly\n * formatted or use a unit other than px or %, and error is thrown.\n * @private\n * @param {string=} opt_rootMargin An optional rootMargin value,\n * defaulting to '0px'.\n * @return {Array} An array of margin objects with the keys\n * value and unit.\n */\nIntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {\n var marginString = opt_rootMargin || '0px';\n var margins = marginString.split(/\\s+/).map(function(margin) {\n var parts = /^(-?\\d*\\.?\\d+)(px|%)$/.exec(margin);\n if (!parts) {\n throw new Error('rootMargin must be specified in pixels or percent');\n }\n return {value: parseFloat(parts[1]), unit: parts[2]};\n });\n\n // Handles shorthand.\n margins[1] = margins[1] || margins[0];\n margins[2] = margins[2] || margins[0];\n margins[3] = margins[3] || margins[1];\n\n return margins;\n};\n\n\n/**\n * Starts polling for intersection changes if the polling is not already\n * happening, and if the page's visibility state is visible.\n * @param {!Document} doc\n * @private\n */\nIntersectionObserver.prototype._monitorIntersections = function(doc) {\n var win = doc.defaultView;\n if (!win) {\n // Already destroyed.\n return;\n }\n if (this._monitoringDocuments.indexOf(doc) != -1) {\n // Already monitoring.\n return;\n }\n\n // Private state for monitoring.\n var callback = this._checkForIntersections;\n var monitoringInterval = null;\n var domObserver = null;\n\n // If a poll interval is set, use polling instead of listening to\n // resize and scroll events or DOM mutations.\n if (this.POLL_INTERVAL) {\n monitoringInterval = win.setInterval(callback, this.POLL_INTERVAL);\n } else {\n addEvent(win, 'resize', callback, true);\n addEvent(doc, 'scroll', callback, true);\n if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in win) {\n domObserver = new win.MutationObserver(callback);\n domObserver.observe(doc, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true\n });\n }\n }\n\n this._monitoringDocuments.push(doc);\n this._monitoringUnsubscribes.push(function() {\n // Get the window object again. When a friendly iframe is destroyed, it\n // will be null.\n var win = doc.defaultView;\n\n if (win) {\n if (monitoringInterval) {\n win.clearInterval(monitoringInterval);\n }\n removeEvent(win, 'resize', callback, true);\n }\n\n removeEvent(doc, 'scroll', callback, true);\n if (domObserver) {\n domObserver.disconnect();\n }\n });\n\n // Also monitor the parent.\n if (doc != (this.root && this.root.ownerDocument || document)) {\n var frame = getFrameElement(doc);\n if (frame) {\n this._monitorIntersections(frame.ownerDocument);\n }\n }\n};\n\n\n/**\n * Stops polling for intersection changes.\n * @param {!Document} doc\n * @private\n */\nIntersectionObserver.prototype._unmonitorIntersections = function(doc) {\n var index = this._monitoringDocuments.indexOf(doc);\n if (index == -1) {\n return;\n }\n\n var rootDoc = (this.root && this.root.ownerDocument || document);\n\n // Check if any dependent targets are still remaining.\n var hasDependentTargets =\n this._observationTargets.some(function(item) {\n var itemDoc = item.element.ownerDocument;\n // Target is in this context.\n if (itemDoc == doc) {\n return true;\n }\n // Target is nested in this context.\n while (itemDoc && itemDoc != rootDoc) {\n var frame = getFrameElement(itemDoc);\n itemDoc = frame && frame.ownerDocument;\n if (itemDoc == doc) {\n return true;\n }\n }\n return false;\n });\n if (hasDependentTargets) {\n return;\n }\n\n // Unsubscribe.\n var unsubscribe = this._monitoringUnsubscribes[index];\n this._monitoringDocuments.splice(index, 1);\n this._monitoringUnsubscribes.splice(index, 1);\n unsubscribe();\n\n // Also unmonitor the parent.\n if (doc != rootDoc) {\n var frame = getFrameElement(doc);\n if (frame) {\n this._unmonitorIntersections(frame.ownerDocument);\n }\n }\n};\n\n\n/**\n * Stops polling for intersection changes.\n * @param {!Document} doc\n * @private\n */\nIntersectionObserver.prototype._unmonitorAllIntersections = function() {\n var unsubscribes = this._monitoringUnsubscribes.slice(0);\n this._monitoringDocuments.length = 0;\n this._monitoringUnsubscribes.length = 0;\n for (var i = 0; i < unsubscribes.length; i++) {\n unsubscribes[i]();\n }\n};\n\n\n/**\n * Scans each observation target for intersection changes and adds them\n * to the internal entries queue. If new entries are found, it\n * schedules the callback to be invoked.\n * @private\n */\nIntersectionObserver.prototype._checkForIntersections = function() {\n if (!this.root && crossOriginUpdater && !crossOriginRect) {\n // Cross origin monitoring, but no initial data available yet.\n return;\n }\n\n var rootIsInDom = this._rootIsInDom();\n var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();\n\n this._observationTargets.forEach(function(item) {\n var target = item.element;\n var targetRect = getBoundingClientRect(target);\n var rootContainsTarget = this._rootContainsTarget(target);\n var oldEntry = item.entry;\n var intersectionRect = rootIsInDom && rootContainsTarget &&\n this._computeTargetAndRootIntersection(target, targetRect, rootRect);\n\n var newEntry = item.entry = new IntersectionObserverEntry({\n time: now(),\n target: target,\n boundingClientRect: targetRect,\n rootBounds: crossOriginUpdater && !this.root ? null : rootRect,\n intersectionRect: intersectionRect\n });\n\n if (!oldEntry) {\n this._queuedEntries.push(newEntry);\n } else if (rootIsInDom && rootContainsTarget) {\n // If the new entry intersection ratio has crossed any of the\n // thresholds, add a new entry.\n if (this._hasCrossedThreshold(oldEntry, newEntry)) {\n this._queuedEntries.push(newEntry);\n }\n } else {\n // If the root is not in the DOM or target is not contained within\n // root but the previous entry for this target had an intersection,\n // add a new record indicating removal.\n if (oldEntry && oldEntry.isIntersecting) {\n this._queuedEntries.push(newEntry);\n }\n }\n }, this);\n\n if (this._queuedEntries.length) {\n this._callback(this.takeRecords(), this);\n }\n};\n\n\n/**\n * Accepts a target and root rect computes the intersection between then\n * following the algorithm in the spec.\n * TODO(philipwalton): at this time clip-path is not considered.\n * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo\n * @param {Element} target The target DOM element\n * @param {Object} targetRect The bounding rect of the target.\n * @param {Object} rootRect The bounding rect of the root after being\n * expanded by the rootMargin value.\n * @return {?Object} The final intersection rect object or undefined if no\n * intersection is found.\n * @private\n */\nIntersectionObserver.prototype._computeTargetAndRootIntersection =\n function(target, targetRect, rootRect) {\n // If the element isn't displayed, an intersection can't happen.\n if (window.getComputedStyle(target).display == 'none') return;\n\n var intersectionRect = targetRect;\n var parent = getParentNode(target);\n var atRoot = false;\n\n while (!atRoot && parent) {\n var parentRect = null;\n var parentComputedStyle = parent.nodeType == 1 ?\n window.getComputedStyle(parent) : {};\n\n // If the parent isn't displayed, an intersection can't happen.\n if (parentComputedStyle.display == 'none') return null;\n\n if (parent == this.root || parent.nodeType == /* DOCUMENT */ 9) {\n atRoot = true;\n if (parent == this.root || parent == document) {\n if (crossOriginUpdater && !this.root) {\n if (!crossOriginRect ||\n crossOriginRect.width == 0 && crossOriginRect.height == 0) {\n // A 0-size cross-origin intersection means no-intersection.\n parent = null;\n parentRect = null;\n intersectionRect = null;\n } else {\n parentRect = crossOriginRect;\n }\n } else {\n parentRect = rootRect;\n }\n } else {\n // Check if there's a frame that can be navigated to.\n var frame = getParentNode(parent);\n var frameRect = frame && getBoundingClientRect(frame);\n var frameIntersect =\n frame &&\n this._computeTargetAndRootIntersection(frame, frameRect, rootRect);\n if (frameRect && frameIntersect) {\n parent = frame;\n parentRect = convertFromParentRect(frameRect, frameIntersect);\n } else {\n parent = null;\n intersectionRect = null;\n }\n }\n } else {\n // If the element has a non-visible overflow, and it's not the \n // or element, update the intersection rect.\n // Note: and cannot be clipped to a rect that's not also\n // the document rect, so no need to compute a new intersection.\n var doc = parent.ownerDocument;\n if (parent != doc.body &&\n parent != doc.documentElement &&\n parentComputedStyle.overflow != 'visible') {\n parentRect = getBoundingClientRect(parent);\n }\n }\n\n // If either of the above conditionals set a new parentRect,\n // calculate new intersection data.\n if (parentRect) {\n intersectionRect = computeRectIntersection(parentRect, intersectionRect);\n }\n if (!intersectionRect) break;\n parent = parent && getParentNode(parent);\n }\n return intersectionRect;\n};\n\n\n/**\n * Returns the root rect after being expanded by the rootMargin value.\n * @return {ClientRect} The expanded root rect.\n * @private\n */\nIntersectionObserver.prototype._getRootRect = function() {\n var rootRect;\n if (this.root) {\n rootRect = getBoundingClientRect(this.root);\n } else {\n // Use / instead of window since scroll bars affect size.\n var html = document.documentElement;\n var body = document.body;\n rootRect = {\n top: 0,\n left: 0,\n right: html.clientWidth || body.clientWidth,\n width: html.clientWidth || body.clientWidth,\n bottom: html.clientHeight || body.clientHeight,\n height: html.clientHeight || body.clientHeight\n };\n }\n return this._expandRectByRootMargin(rootRect);\n};\n\n\n/**\n * Accepts a rect and expands it by the rootMargin value.\n * @param {DOMRect|ClientRect} rect The rect object to expand.\n * @return {ClientRect} The expanded rect.\n * @private\n */\nIntersectionObserver.prototype._expandRectByRootMargin = function(rect) {\n var margins = this._rootMarginValues.map(function(margin, i) {\n return margin.unit == 'px' ? margin.value :\n margin.value * (i % 2 ? rect.width : rect.height) / 100;\n });\n var newRect = {\n top: rect.top - margins[0],\n right: rect.right + margins[1],\n bottom: rect.bottom + margins[2],\n left: rect.left - margins[3]\n };\n newRect.width = newRect.right - newRect.left;\n newRect.height = newRect.bottom - newRect.top;\n\n return newRect;\n};\n\n\n/**\n * Accepts an old and new entry and returns true if at least one of the\n * threshold values has been crossed.\n * @param {?IntersectionObserverEntry} oldEntry The previous entry for a\n * particular target element or null if no previous entry exists.\n * @param {IntersectionObserverEntry} newEntry The current entry for a\n * particular target element.\n * @return {boolean} Returns true if a any threshold has been crossed.\n * @private\n */\nIntersectionObserver.prototype._hasCrossedThreshold =\n function(oldEntry, newEntry) {\n\n // To make comparing easier, an entry that has a ratio of 0\n // but does not actually intersect is given a value of -1\n var oldRatio = oldEntry && oldEntry.isIntersecting ?\n oldEntry.intersectionRatio || 0 : -1;\n var newRatio = newEntry.isIntersecting ?\n newEntry.intersectionRatio || 0 : -1;\n\n // Ignore unchanged ratios\n if (oldRatio === newRatio) return;\n\n for (var i = 0; i < this.thresholds.length; i++) {\n var threshold = this.thresholds[i];\n\n // Return true if an entry matches a threshold or if the new ratio\n // and the old ratio are on the opposite sides of a threshold.\n if (threshold == oldRatio || threshold == newRatio ||\n threshold < oldRatio !== threshold < newRatio) {\n return true;\n }\n }\n};\n\n\n/**\n * Returns whether or not the root element is an element and is in the DOM.\n * @return {boolean} True if the root element is an element and is in the DOM.\n * @private\n */\nIntersectionObserver.prototype._rootIsInDom = function() {\n return !this.root || containsDeep(document, this.root);\n};\n\n\n/**\n * Returns whether or not the target element is a child of root.\n * @param {Element} target The target element to check.\n * @return {boolean} True if the target element is a child of root.\n * @private\n */\nIntersectionObserver.prototype._rootContainsTarget = function(target) {\n return containsDeep(this.root || document, target) &&\n (!this.root || this.root.ownerDocument == target.ownerDocument);\n};\n\n\n/**\n * Adds the instance to the global IntersectionObserver registry if it isn't\n * already present.\n * @private\n */\nIntersectionObserver.prototype._registerInstance = function() {\n if (registry.indexOf(this) < 0) {\n registry.push(this);\n }\n};\n\n\n/**\n * Removes the instance from the global IntersectionObserver registry.\n * @private\n */\nIntersectionObserver.prototype._unregisterInstance = function() {\n var index = registry.indexOf(this);\n if (index != -1) registry.splice(index, 1);\n};\n\n\n/**\n * Returns the result of the performance.now() method or null in browsers\n * that don't support the API.\n * @return {number} The elapsed time since the page was requested.\n */\nfunction now() {\n return window.performance && performance.now && performance.now();\n}\n\n\n/**\n * Throttles a function and delays its execution, so it's only called at most\n * once within a given time period.\n * @param {Function} fn The function to throttle.\n * @param {number} timeout The amount of time that must pass before the\n * function can be called again.\n * @return {Function} The throttled function.\n */\nfunction throttle(fn, timeout) {\n var timer = null;\n return function () {\n if (!timer) {\n timer = setTimeout(function() {\n fn();\n timer = null;\n }, timeout);\n }\n };\n}\n\n\n/**\n * Adds an event handler to a DOM node ensuring cross-browser compatibility.\n * @param {Node} node The DOM node to add the event handler to.\n * @param {string} event The event name.\n * @param {Function} fn The event handler to add.\n * @param {boolean} opt_useCapture Optionally adds the even to the capture\n * phase. Note: this only works in modern browsers.\n */\nfunction addEvent(node, event, fn, opt_useCapture) {\n if (typeof node.addEventListener == 'function') {\n node.addEventListener(event, fn, opt_useCapture || false);\n }\n else if (typeof node.attachEvent == 'function') {\n node.attachEvent('on' + event, fn);\n }\n}\n\n\n/**\n * Removes a previously added event handler from a DOM node.\n * @param {Node} node The DOM node to remove the event handler from.\n * @param {string} event The event name.\n * @param {Function} fn The event handler to remove.\n * @param {boolean} opt_useCapture If the event handler was added with this\n * flag set to true, it should be set to true here in order to remove it.\n */\nfunction removeEvent(node, event, fn, opt_useCapture) {\n if (typeof node.removeEventListener == 'function') {\n node.removeEventListener(event, fn, opt_useCapture || false);\n }\n else if (typeof node.detatchEvent == 'function') {\n node.detatchEvent('on' + event, fn);\n }\n}\n\n\n/**\n * Returns the intersection between two rect objects.\n * @param {Object} rect1 The first rect.\n * @param {Object} rect2 The second rect.\n * @return {?Object|?ClientRect} The intersection rect or undefined if no\n * intersection is found.\n */\nfunction computeRectIntersection(rect1, rect2) {\n var top = Math.max(rect1.top, rect2.top);\n var bottom = Math.min(rect1.bottom, rect2.bottom);\n var left = Math.max(rect1.left, rect2.left);\n var right = Math.min(rect1.right, rect2.right);\n var width = right - left;\n var height = bottom - top;\n\n return (width >= 0 && height >= 0) && {\n top: top,\n bottom: bottom,\n left: left,\n right: right,\n width: width,\n height: height\n } || null;\n}\n\n\n/**\n * Shims the native getBoundingClientRect for compatibility with older IE.\n * @param {Element} el The element whose bounding rect to get.\n * @return {DOMRect|ClientRect} The (possibly shimmed) rect of the element.\n */\nfunction getBoundingClientRect(el) {\n var rect;\n\n try {\n rect = el.getBoundingClientRect();\n } catch (err) {\n // Ignore Windows 7 IE11 \"Unspecified error\"\n // https://github.com/w3c/IntersectionObserver/pull/205\n }\n\n if (!rect) return getEmptyRect();\n\n // Older IE\n if (!(rect.width && rect.height)) {\n rect = {\n top: rect.top,\n right: rect.right,\n bottom: rect.bottom,\n left: rect.left,\n width: rect.right - rect.left,\n height: rect.bottom - rect.top\n };\n }\n return rect;\n}\n\n\n/**\n * Returns an empty rect object. An empty rect is returned when an element\n * is not in the DOM.\n * @return {ClientRect} The empty rect.\n */\nfunction getEmptyRect() {\n return {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n width: 0,\n height: 0\n };\n}\n\n\n/**\n * Ensure that the result has all of the necessary fields of the DOMRect.\n * Specifically this ensures that `x` and `y` fields are set.\n *\n * @param {?DOMRect|?ClientRect} rect\n * @return {?DOMRect}\n */\nfunction ensureDOMRect(rect) {\n // A `DOMRect` object has `x` and `y` fields.\n if (!rect || 'x' in rect) {\n return rect;\n }\n // A IE's `ClientRect` type does not have `x` and `y`. The same is the case\n // for internally calculated Rect objects. For the purposes of\n // `IntersectionObserver`, it's sufficient to simply mirror `left` and `top`\n // for these fields.\n return {\n top: rect.top,\n y: rect.top,\n bottom: rect.bottom,\n left: rect.left,\n x: rect.left,\n right: rect.right,\n width: rect.width,\n height: rect.height\n };\n}\n\n\n/**\n * Inverts the intersection and bounding rect from the parent (frame) BCR to\n * the local BCR space.\n * @param {DOMRect|ClientRect} parentBoundingRect The parent's bound client rect.\n * @param {DOMRect|ClientRect} parentIntersectionRect The parent's own intersection rect.\n * @return {ClientRect} The local root bounding rect for the parent's children.\n */\nfunction convertFromParentRect(parentBoundingRect, parentIntersectionRect) {\n var top = parentIntersectionRect.top - parentBoundingRect.top;\n var left = parentIntersectionRect.left - parentBoundingRect.left;\n return {\n top: top,\n left: left,\n height: parentIntersectionRect.height,\n width: parentIntersectionRect.width,\n bottom: top + parentIntersectionRect.height,\n right: left + parentIntersectionRect.width\n };\n}\n\n\n/**\n * Checks to see if a parent element contains a child element (including inside\n * shadow DOM).\n * @param {Node} parent The parent element.\n * @param {Node} child The child element.\n * @return {boolean} True if the parent node contains the child node.\n */\nfunction containsDeep(parent, child) {\n var node = child;\n while (node) {\n if (node == parent) return true;\n\n node = getParentNode(node);\n }\n return false;\n}\n\n\n/**\n * Gets the parent node of an element or its host element if the parent node\n * is a shadow root.\n * @param {Node} node The node whose parent to get.\n * @return {Node|null} The parent node or null if no parent exists.\n */\nfunction getParentNode(node) {\n var parent = node.parentNode;\n\n if (node.nodeType == /* DOCUMENT */ 9 && node != document) {\n // If this node is a document node, look for the embedding frame.\n return getFrameElement(node);\n }\n\n if (parent && parent.nodeType == 11 && parent.host) {\n // If the parent is a shadow root, return the host element.\n return parent.host;\n }\n\n if (parent && parent.assignedSlot) {\n // If the parent is distributed in a , return the parent of a slot.\n return parent.assignedSlot.parentNode;\n }\n\n return parent;\n}\n\n\n// Exposes the constructors globally.\nwindow.IntersectionObserver = IntersectionObserver;\nwindow.IntersectionObserverEntry = IntersectionObserverEntry;\n\n}());\n\n\n//# sourceURL=webpack:///./node_modules/intersection-observer/intersection-observer.js?"); - -/***/ }), - -/***/ "./src/dimensions.js": -/*!***************************!*\ - !*** ./src/dimensions.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -eval("module.exports = function getViewportDimensions(w) {\n\n // Use the specified window or the current window if no argument\n w = w || window;\n\n // This works for all browsers except IE8 and before\n if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };\n\n // For IE (or any browser) in Standards mode\n var d = w.document;\n if (document.compatMode == \"CSS1Compat\")\n return { w: d.documentElement.clientWidth,\n h: d.documentElement.clientHeight };\n\n // For browsers in Quirks mode\n return { w: d.body.clientWidth, h: d.body.clientHeight };\n};\n\n\n//# sourceURL=webpack:///./src/dimensions.js?"); - -/***/ }), - -/***/ "./src/index.js": -/*!**********************!*\ - !*** ./src/index.js ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -eval("if (!'IntersectionObserver' in window &&\n !'IntersectionObserverEntry' in window &&\n !'intersectionRatio' in window.IntersectionObserverEntry.prototype) {\n __webpack_require__(/*! intersection-observer */ \"./node_modules/intersection-observer/intersection-observer.js\");\n}\n\n(function() {\n\n window.addEventListener('load', function(event) {\n\n let getViewportDimensions = __webpack_require__(/*! ./dimensions */ \"./src/dimensions.js\");\n let lazyLoader = __webpack_require__(/*! ./loader */ \"./src/loader.js\");\n let viewportHeight = getViewportDimensions(window).h;\n console.log(viewportHeight);\n let intersectObserver = new IntersectionObserver(lazyLoader, {\n\n root: document,\n rootMargin: `${viewportHeight}px 0px ${viewportHeight}px 0px`,\n threshold: 0.5\n });\n\n // finding lazy loadable images\n let targets = document.querySelectorAll('[data-flat-lazy-load-image][data-loaded=\"0\"]');\n\n // adding to intersect observer\n targets.forEach(function(target) {\n intersectObserver.observe(target);\n });\n\n // lazy loading new elements\n let observeMutations = __webpack_require__(/*! ./mutations */ \"./src/mutations.js\");\n observeMutations(intersectObserver);\n });\n\n})();\n\n\n//# sourceURL=webpack:///./src/index.js?"); - -/***/ }), - -/***/ "./src/loader.js": -/*!***********************!*\ - !*** ./src/loader.js ***! - \***********************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -eval("module.exports = function loader(entries, observer) {\n\n entries.forEach(function(entry) {\n\n let target = entry.target;\n\n if (entry.isIntersecting === true && target.getAttribute('data-loaded') == '0') {\n\n // loading image\n target.src = target.getAttribute('data-src');\n\n // marking it as loaded\n target.setAttribute('data-loaded', '1');\n\n // removing image from observer\n observer.unobserve(target);\n\n // dispatch lazyload intersected event if applicable\n if (target.getAttribute('data-flat-lazy-load-intersected') == '1') {\n target.dispatchEvent(new CustomEvent('flat.lazyload.intersected', {bubbles: true}));\n }\n }\n });\n};\n\n\n//# sourceURL=webpack:///./src/loader.js?"); - -/***/ }), - -/***/ "./src/mutations.js": -/*!**************************!*\ - !*** ./src/mutations.js ***! - \**************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -eval("module.exports = function observeMutations(observer) {\n\n // observing mutations DOM of gallery grid\n let mutation = function(entries, mutationObserver) {\n\n entries.forEach(function(entry) {\n\n if (entry.type === 'childList') {\n\n // fetching only added nodes mutation\n // and filtering nodes to only observe grid item node\n Array.from(entry.addedNodes)\n .filter(function(node) {\n return typeof node.classList !== 'undefined' && node.classList.contains('flat-gallery-grid-item');\n })\n .forEach(function(node) {\n\n let image = node.querySelector('img');\n\n if (typeof image !== 'undefined') {\n observer.observe(image);\n }\n });\n }\n });\n };\n\n let grid = document.querySelector('[data-role=\"flat-gallery-grid\"]');\n\n if (grid) {\n\n // grid found in document, starting mutation observer\n let mutationObserver = new MutationObserver(mutation);\n mutationObserver.observe(grid, {\n\n childList: true,\n attributes: false,\n subtree: false,\n });\n }\n};\n\n\n//# sourceURL=webpack:///./src/mutations.js?"); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){!1 in window&&!1 in window&&!1 in window.IntersectionObserverEntry.prototype&&n(1),window.addEventListener("load",(function(t){let e=n(2),o=n(3),i=e(window).h,r=new IntersectionObserver(o,{root:document,rootMargin:`${i}px 0px ${i}px 0px`,threshold:.1});document.querySelectorAll('[data-flat-lazy-load-image="true"][data-loaded="0"]').forEach((function(t){t.setAttribute("data-observing",!0),r.observe(t)})),n(4)(r)}))},function(t,e){!function(){"use strict";if("object"==typeof window)if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype)"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var t=function(t){for(var e=window.document,n=i(e);n;)n=i(e=n.ownerDocument);return e}(),e=[],n=null,o=null;s.prototype.THROTTLE_TIMEOUT=100,s.prototype.POLL_INTERVAL=null,s.prototype.USE_MUTATION_OBSERVER=!0,s._setupCrossOriginUpdater=function(){return n||(n=function(t,n){o=t&&n?l(t,n):{top:0,bottom:0,left:0,right:0,width:0,height:0},e.forEach((function(t){t._checkForIntersections()}))}),n},s._resetCrossOriginUpdater=function(){n=null,o=null},s.prototype.observe=function(t){if(!this._observationTargets.some((function(e){return e.element==t}))){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(t.ownerDocument),this._checkForIntersections()}},s.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter((function(e){return e.element!=t})),this._unmonitorIntersections(t.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},s.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},s.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},s.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter((function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]}))},s.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map((function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}}));return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},s.prototype._monitorIntersections=function(e){var n=e.defaultView;if(n&&-1==this._monitoringDocuments.indexOf(e)){var o=this._checkForIntersections,r=null,s=null;if(this.POLL_INTERVAL?r=n.setInterval(o,this.POLL_INTERVAL):(u(n,"resize",o,!0),u(e,"scroll",o,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in n&&(s=new n.MutationObserver(o)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push((function(){var t=e.defaultView;t&&(r&&t.clearInterval(r),c(t,"resize",o,!0)),c(e,"scroll",o,!0),s&&s.disconnect()})),e!=(this.root&&this.root.ownerDocument||t)){var h=i(e);h&&this._monitorIntersections(h.ownerDocument)}}},s.prototype._unmonitorIntersections=function(e){var n=this._monitoringDocuments.indexOf(e);if(-1!=n){var o=this.root&&this.root.ownerDocument||t;if(!this._observationTargets.some((function(t){var n=t.element.ownerDocument;if(n==e)return!0;for(;n&&n!=o;){var r=i(n);if((n=r&&r.ownerDocument)==e)return!0}return!1}))){var r=this._monitoringUnsubscribes[n];if(this._monitoringDocuments.splice(n,1),this._monitoringUnsubscribes.splice(n,1),r(),e!=o){var s=i(e);s&&this._unmonitorIntersections(s.ownerDocument)}}}},s.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0,this._monitoringUnsubscribes.length=0;for(var e=0;e=0&&m>=0&&{top:c,bottom:a,left:d,right:p,width:g,height:m}||null),!b)break;v=v&&f(v)}return b}},s.prototype._getRootRect=function(){var e;if(this.root)e=h(this.root);else{var n=t.documentElement,o=t.body;e={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(e)},s.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map((function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100})),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},s.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i= 2.1.2 < 3" + } + }, "ieee754": { "version": "1.1.13", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz", @@ -1861,6 +2063,30 @@ } } }, + "is-path-cwd": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", + "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", + "dev": true + }, + "is-path-in-cwd": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz", + "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==", + "dev": true, + "requires": { + "is-path-inside": "^2.1.0" + } + }, + "is-path-inside": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz", + "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==", + "dev": true, + "requires": { + "path-is-inside": "^1.0.2" + } + }, "is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -1954,6 +2180,12 @@ "path-exists": "^3.0.0" } }, + "lodash.sortby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", + "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", + "dev": true + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -2315,6 +2547,12 @@ "p-limit": "^2.0.0" } }, + "p-map": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz", + "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==", + "dev": true + }, "p-try": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", @@ -2389,6 +2627,12 @@ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, + "path-is-inside": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", + "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=", + "dev": true + }, "path-key": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", @@ -2421,6 +2665,21 @@ "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, + "requires": { + "pinkie": "^2.0.0" + } + }, "pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -2711,6 +2970,12 @@ "ret": "~0.1.10" } }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, "schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -2782,6 +3047,15 @@ "safe-buffer": "^5.0.1" } }, + "shallow-clone": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", + "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==", + "dev": true, + "requires": { + "kind-of": "^6.0.2" + } + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -2916,6 +3190,58 @@ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true }, + "source-map-loader": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-1.0.1.tgz", + "integrity": "sha512-DE4CJyfCVoxFLsHyuVE9Sjcib8cs5qdmOq3wcev1Un/r6F2AfQJDhag4rzpPPA48A2QZyV3CTbc+NGoFMfKIOQ==", + "dev": true, + "requires": { + "data-urls": "^2.0.0", + "iconv-lite": "^0.5.1", + "loader-utils": "^2.0.0", + "schema-utils": "^2.6.6", + "source-map": "^0.6.0" + }, + "dependencies": { + "json5": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", + "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz", + "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.4", + "ajv": "^6.12.2", + "ajv-keywords": "^3.4.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "source-map-resolve": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", @@ -3186,6 +3512,15 @@ "repeat-string": "^1.6.1" } }, + "tr46": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz", + "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==", + "dev": true, + "requires": { + "punycode": "^2.1.1" + } + }, "tslib": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", @@ -3486,6 +3821,12 @@ } } }, + "webidl-conversions": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz", + "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==", + "dev": true + }, "webpack": { "version": "4.44.1", "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz", @@ -3536,6 +3877,16 @@ "yargs": "^13.3.2" } }, + "webpack-merge": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.1.1.tgz", + "integrity": "sha512-UhIkHAVqeG9EqFfYo7dRELrVfH6HYaOTYM7ssKCwfIIHYnWepGVOFp1E166GwgPGFqV6M68UgRiKOERjVOKIXA==", + "dev": true, + "requires": { + "clone-deep": "^4.0.1", + "wildcard": "^2.0.0" + } + }, "webpack-sources": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", @@ -3554,6 +3905,23 @@ } } }, + "whatwg-mimetype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz", + "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==", + "dev": true + }, + "whatwg-url": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.1.0.tgz", + "integrity": "sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==", + "dev": true, + "requires": { + "lodash.sortby": "^4.7.0", + "tr46": "^2.0.2", + "webidl-conversions": "^5.0.0" + } + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -3569,6 +3937,12 @@ "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", "dev": true }, + "wildcard": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz", + "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==", + "dev": true + }, "worker-farm": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz", diff --git a/package.json b/package.json index ac89e7b..b6c9849 100644 --- a/package.json +++ b/package.json @@ -9,13 +9,17 @@ } ], "scripts": { - "build": "webpack" + "build:dev": "webpack-cli -w --config webpack.dev.js", + "build:prod": "webpack-cli --config webpack.prod.js" }, "dependencies": { "intersection-observer": "^0.11.0" }, "devDependencies": { + "clean-webpack-plugin": "^3.0.0", + "source-map-loader": "^1.0.1", "webpack": "^4.44.1", - "webpack-cli": "^3.3.12" + "webpack-cli": "^3.3.12", + "webpack-merge": "^5.1.1" } } diff --git a/src/index.js b/src/index.js index fd30478..8f71af7 100644 --- a/src/index.js +++ b/src/index.js @@ -16,14 +16,16 @@ if (!'IntersectionObserver' in window && root: document, rootMargin: `${viewportHeight}px 0px ${viewportHeight}px 0px`, - threshold: 0.5 + threshold: 0.1 }); // finding lazy loadable images - let targets = document.querySelectorAll('[data-flat-lazy-load-image][data-loaded="0"]'); + let targets = document.querySelectorAll('[data-flat-lazy-load-image="true"][data-loaded="0"]'); // adding to intersect observer targets.forEach(function(target) { + + target.setAttribute('data-observing', true); intersectObserver.observe(target); }); diff --git a/src/mutations.js b/src/mutations.js index 7d406d5..26d7ee2 100644 --- a/src/mutations.js +++ b/src/mutations.js @@ -17,7 +17,9 @@ module.exports = function observeMutations(observer) { let image = node.querySelector('img'); - if (typeof image !== 'undefined') { + if (image !== null && false === image.hasAttribute('data-observing')) { + console.log(image); + image.setAttribute('data-observing', true); observer.observe(image); } }); diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 680014d..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require('path'); - -module.exports = { - entry: './src/index.js', - mode: 'development', - output: { - filename: 'flat-lazy.js', - path: path.resolve(__dirname, 'js'), - }, -}; diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000..6030725 --- /dev/null +++ b/webpack.dev.js @@ -0,0 +1,25 @@ +const path = require('path'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); + +module.exports = { + entry: './src/index.js', + mode: 'development', + output: { + filename: 'flat-lazy.js', + path: path.resolve(__dirname, 'js'), + }, + + // enable sourcemaps for debugging webpack's output. + devtool: "source-map", + + module: { + rules: [ + // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. + { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' } + ] + }, + + plugins: [ + new CleanWebpackPlugin(), + ] +}; diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000..271c9ec --- /dev/null +++ b/webpack.prod.js @@ -0,0 +1,8 @@ +const { merge } = require('webpack-merge'); +const dev = require('./webpack.dev.js'); + +module.exports = merge(dev, { + + mode: 'production', + devtool: false +});