@quintype/components 3.8.7-fix-jsembed-element.0 → 3.8.8-add-collection-index.1

package/dist/cjs/index.js

@@ -21,10 +21,10 @@ var _extends = require('@babel/runtime/helpers/extends');
 var emptyWebGif = require('empty-web-gif');
 var quintypeJs = require('quintype-js');
 var reactHelmet = require('react-helmet');
+var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var classNames = require('classnames');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var getVideoID = require('get-video-id');
 var getYouTubeID = require('get-youtube-id');
 var ReactDOM = require('react-dom');
@@ -63,10 +63,10 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var emptyWebGif__default = /*#__PURE__*/_interopDefaultLegacy(emptyWebGif);
+var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var getVideoID__default = /*#__PURE__*/_interopDefaultLegacy(getVideoID);
 var getYouTubeID__default = /*#__PURE__*/_interopDefaultLegacy(getYouTubeID);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -1394,7 +1394,8 @@ function renderCollectionItem(collectionItem, index, collectionTemplates, storyT
         key: "".concat(index, "-").concat(collectionItem.id),
         index: index,
         collection: collectionItem,
-        metadata: collectionItem["associated-metadata"] || {}
+        metadata: collectionItem["associated-metadata"] || {},
+        collectionIndex: collectionItem === null || collectionItem === void 0 ? void 0 : collectionItem["collectionIndex"]
       }, otherProps));
 
     case "story":
@@ -1926,10 +1927,14 @@ function responsiveProps(props) {
     }, props.imgParams));
   }
 
+  var resolvePath = function resolvePath(size) {
+    return props.shouldDecodeImage ? decodeURIComponent(generatePath(size)) : generatePath(size);
+  };
+
   var imageProps = {
-    src: generatePath(props.defaultWidth),
+    src: resolvePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
-      return "".concat(generatePath(size), " ").concat(size, "w");
+      return "".concat(resolvePath(size), " ").concat(size, "w");
     }).join(',') : undefined,
     key: hashString(props.slug),
     sizes: props === null || props === void 0 ? void 0 : props.sizes
@@ -3752,38 +3757,47 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
     _classCallCheck__default["default"](this, StoryElementBase);
 
     _this2 = _super2.call(this, props);
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this2), "initiateObserver", function () {
+      if (_this2.props.disableAnalytics === true) return false;
+      var options = {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1.0
+      };
+      _this2.observer = new IntersectionObserver(_this2.observerCallback, options);
+
+      _this2.observer.observe(_this2.storyElementRef);
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this2), "destroyObserver", function () {
+      _this2.observer && _this2.observer.disconnect();
+    });
+
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this2), "observerCallback", function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          _this2.emitElementQlitics();
+        }
+      });
+    });
+
     _this2.observer = null;
     _this2.storyElementRef = null;
     return _this2;
-  } // componentDidMount() {
-  //   this.initiateObserver();
-  // }
-  // componentWillUnmount() {
-  //   this.destroyObserver();
-  // }
-  // initiateObserver = () => {
-  //   if (this.props.disableAnalytics === true) return false;
-  //   const options = {
-  //     root: null,
-  //     rootMargin: "200px",
-  //     threshold: 1.0,
-  //   };
-  //   this.observer = new IntersectionObserver(this.observerCallback, options);
-  //   this.observer.observe(this.storyElementRef);
-  // };
-  // destroyObserver = () => {
-  //   this.observer && this.observer.disconnect();
-  // };
-  // observerCallback = (entries) => {
-  //   entries.forEach((entry) => {
-  //     if (entry.isIntersecting) {
-  //       this.emitElementQlitics();
-  //     }
-  //   });
-  // };
-
+  }
 
   _createClass__default["default"](StoryElementBase, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initiateObserver();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.destroyObserver();
+    }
+  }, {
     key: "template",
     value: function template() {
       var storyElement = this.props.element;

package/dist/es/components/impl/collection-impl.js

@@ -25,7 +25,8 @@ export function renderCollectionItem(collectionItem, index, collectionTemplates,
         key: "".concat(index, "-").concat(collectionItem.id),
         index: index,
         collection: collectionItem,
-        metadata: collectionItem["associated-metadata"] || {}
+        metadata: collectionItem["associated-metadata"] || {},
+        collectionIndex: collectionItem === null || collectionItem === void 0 ? void 0 : collectionItem["collectionIndex"]
       }, otherProps));
 
     case "story":

package/dist/es/components/impl/thumbor-image.js

@@ -31,10 +31,14 @@ export function responsiveProps(props) {
     }, props.imgParams));
   }
 
+  var resolvePath = function resolvePath(size) {
+    return props.shouldDecodeImage ? decodeURIComponent(generatePath(size)) : generatePath(size);
+  };
+
   var imageProps = {
-    src: generatePath(props.defaultWidth),
+    src: resolvePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
-      return "".concat(generatePath(size), " ").concat(size, "w");
+      return "".concat(resolvePath(size), " ").concat(size, "w");
     }).join(',') : undefined,
     key: hashString(props.slug),
     sizes: props === null || props === void 0 ? void 0 : props.sizes

package/dist/es/components/story-element.js

@@ -1,5 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -244,38 +245,47 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
     _classCallCheck(this, StoryElementBase);
 
     _this2 = _super2.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this2), "initiateObserver", function () {
+      if (_this2.props.disableAnalytics === true) return false;
+      var options = {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1.0
+      };
+      _this2.observer = new IntersectionObserver(_this2.observerCallback, options);
+
+      _this2.observer.observe(_this2.storyElementRef);
+    });
+
+    _defineProperty(_assertThisInitialized(_this2), "destroyObserver", function () {
+      _this2.observer && _this2.observer.disconnect();
+    });
+
+    _defineProperty(_assertThisInitialized(_this2), "observerCallback", function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          _this2.emitElementQlitics();
+        }
+      });
+    });
+
     _this2.observer = null;
     _this2.storyElementRef = null;
     return _this2;
-  } // componentDidMount() {
-  //   this.initiateObserver();
-  // }
-  // componentWillUnmount() {
-  //   this.destroyObserver();
-  // }
-  // initiateObserver = () => {
-  //   if (this.props.disableAnalytics === true) return false;
-  //   const options = {
-  //     root: null,
-  //     rootMargin: "200px",
-  //     threshold: 1.0,
-  //   };
-  //   this.observer = new IntersectionObserver(this.observerCallback, options);
-  //   this.observer.observe(this.storyElementRef);
-  // };
-  // destroyObserver = () => {
-  //   this.observer && this.observer.disconnect();
-  // };
-  // observerCallback = (entries) => {
-  //   entries.forEach((entry) => {
-  //     if (entry.isIntersecting) {
-  //       this.emitElementQlitics();
-  //     }
-  //   });
-  // };
-
+  }
 
   _createClass(StoryElementBase, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initiateObserver();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.destroyObserver();
+    }
+  }, {
     key: "template",
     value: function template() {
       var storyElement = this.props.element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.8.7-fix-jsembed-element.0",
+  "version": "3.8.8-add-collection-index.1",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",