@designcrowd/fe-shared-lib 1.2.27 → 1.2.28-pre-brooke-remove-observe-visibility

package/src/atoms/thirdparty-components/VueMasonryWall/VueMasonryWall.vue

@@ -7,24 +7,16 @@
 
       <div
         ref="bottom"
-        v-observe-visibility="{ callback: (v) => v && _fill(), throttle: _options.throttle }"
         class="masonry-bottom"
         :data-column="index"
       ></div>
     </div>
   </div>
 </template>
-<!-- eslint-disable no-underscore-dangle -->
-<!-- eslint-disable no-plusplus -->
-<!-- eslint-disable vue/require-default-prop -->
+
 <script>
-import { ObserveVisibility } from 'vue-observe-visibility';
 import maxBy from './maxBy';
 
-/**
- * @param count number of columns to create
- * @returns {[{i: number, indexes: []},...]}
- */
 const _newColumns = (count) => {
   const columns = [];
   for (let i = 0; i < count; i++) {
@@ -35,47 +27,15 @@ const _newColumns = (count) => {
 
 export default {
   name: 'VueMasonryWall',
-  directives: {
-    'observe-visibility': ObserveVisibility,
-  },
   props: {
-    /**
-     * Array of items to add into masonry
-     */
     items: {
       type: Array,
       required: true,
     },
-
-    /**
-     * Options to config masonry.
-     *
-     * {
-     *     width: 300,
-     *     padding: {
-     *         default: 12,
-     *         1: 6,
-     *         2: 8,
-     *     },
-     *     throttle: 300
-     * }
-     */
     options: {
       type: Object,
       required: false,
     },
-
-    /**
-     * SSR has no clue what is the size of your height of your element or width of the browser.
-     * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
-     * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
-     *
-     * Once the client is mounted, it will redraw if the config is different from SSR.
-     *
-     * {
-     *     column: 2
-     * }
-     */
     ssr: {
       type: Object,
       required: false,
@@ -85,11 +45,9 @@ export default {
     const count = this.ssr && this.ssr.columns;
     if (count > 0) {
       const columns = _newColumns(count);
-
       for (let i = 0; i < this.items.length; i++) {
         columns[i % count].indexes.push(i);
       }
-
       return {
         columns,
         cursor: this.items.length,
@@ -104,11 +62,6 @@ export default {
     };
   },
   computed: {
-    /**
-     * Options with default override if not given
-     *
-     * @private
-     */
     _options() {
       const { options } = this;
       return {
@@ -119,11 +72,6 @@ export default {
         throttle: (options && options.throttle) || 300,
       };
     },
-
-    /**
-     * Style of wall, column and item for padding
-     * @private
-     */
     _style() {
       let padding = this.options && this.options.padding;
       if (padding && typeof padding !== 'number') {
@@ -131,65 +79,55 @@ export default {
       }
 
       return {
-        wall: {
-          margin: `-${padding}px`,
-        },
-        lane: {
-          paddingLeft: `${padding}px`,
-          paddingRight: `${padding}px`,
-        },
-        item: {
-          paddingTop: `${padding}px`,
-          paddingBottom: `${padding}px`,
-        },
+        wall: { margin: `-${padding}px` },
+        lane: { paddingLeft: `${padding}px`, paddingRight: `${padding}px` },
+        item: { paddingTop: `${padding}px`, paddingBottom: `${padding}px` },
       };
     },
   },
   watch: {
-    items: {
-      handler() {
-        this._fill();
-      },
-      deep: true,
-    },
+    items: { handler() { this._fill(); }, deep: true },
     options: {
       handler(oldValue, newValue) {
-        if (oldValue.width === newValue.width) {
-          return;
-        }
-
+        if (oldValue.width === newValue.width) return;
         this.redraw();
       },
       deep: true,
     },
   },
-  /**
-   * For detecting browser resize event to redraw the columns.
-   */
   mounted() {
     this.$resize = () => {
-      if (this.columns.length !== this._columnSize()) {
-        this.redraw();
-      }
+      if (this.columns.length !== this._columnSize()) this.redraw();
     };
-
     this.$resize();
+    window.addEventListener('resize', this.$resize);
 
-    // set opacity to 1 when ssr.columns is recieved and  this.columns.length === this._columnSize() so redraw does not get called for the first time.
     if (!this.ready) this.ready = true;
 
-    window.addEventListener('resize', this.$resize);
+    // IntersectionObserver for infinite scroll
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) this._fill();
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    this.$nextTick(() => {
+      // Observe all bottom elements
+      if (Array.isArray(this.$refs.bottom)) {
+        this.$refs.bottom.forEach((el) => this._observer.observe(el));
+      } else if (this.$refs.bottom) {
+        this._observer.observe(this.$refs.bottom);
+      }
+    });
   },
-  /**
-   * Remove resize event listener
-   */
   beforeDestroy() {
     window.removeEventListener('resize', this.$resize);
+    if (this._observer) this._observer.disconnect();
   },
   methods: {
-    /**
-     * Redraw masonry
-     */
     redraw() {
       this.ready = false;
       this.columns.splice(0);
@@ -198,50 +136,24 @@ export default {
       this.ready = true;
       this._fill();
     },
-
-    /**
-     *
-     * @returns {number}
-     * @private internal component use
-     */
     _columnSize() {
-      if (!this.$refs.wall) {
-        return 1;
-      }
-
+      if (!this.$refs.wall) return 1;
       const length = Math.round(this.$refs.wall.scrollWidth / this._options.width);
-      if (length < 1) return 1;
-      return length;
+      return length < 1 ? 1 : length;
     },
-
-    /**
-     * Add items into masonry columns, items are added to the shortest column first.
-     *
-     * @private internal component use
-     */
     _fill() {
       if (!this.ready) return;
-
       if (this.cursor >= this.items.length) {
-        // Request for more items
         this.$emit('append');
         return;
       }
 
-      // Keep filling until no more items
       this.$nextTick(() => {
         const bottom = maxBy(this.$refs.bottom, (spacer) => spacer.clientHeight || 0);
         this._addItem(bottom.dataset.column);
         this._fill();
       });
     },
-
-    /**
-     * Items will automatically be taken from items with cursor.
-     *
-     * @param index of the column to add to
-     * @private internal component use
-     */
     _addItem(index) {
       const column = this.columns[index];
       if (this.items[this.cursor]) {
@@ -254,27 +166,8 @@ export default {
 </script>
 
 <style scoped>
-.masonry-wall {
-  display: flex;
-}
-
-.masonry-wall:not(.ready) {
-  opacity: 0;
-}
-
-.masonry-column {
-  flex-grow: 1;
-  flex-basis: 0;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.masonry-bottom {
-  flex-grow: 1;
-  margin-top: -300px;
-  padding-top: 300px;
-  min-height: 100px;
-  z-index: -1;
-}
+.masonry-wall { display: flex; }
+.masonry-wall:not(.ready) { opacity: 0; }
+.masonry-column { flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; }
+.masonry-bottom { flex-grow: 1; margin-top: -300px; padding-top: 300px; min-height: 100px; z-index: -1; }
 </style>

package/src/experiences/components/AuthFlow/SignIn.vue

@@ -375,7 +375,18 @@ export default {
     },
     getSignInAction() {
       const params = new URLSearchParams();
+
       params.set('locale', this.currentLocale);
+
+      if (this.$route?.query) {
+        Object.entries(this.$route.query).forEach(([key, value]) => {
+          if (key !== 'locale' && value != null) {
+            const paramValue = Array.isArray(value) ? value[0] : value;
+            params.set(key, paramValue);
+          }
+        });
+      }
+
       return `/identity/account/signin?${params.toString()}`;
     },
   },