Add post shuffling

assets/Defer.js

@@ -0,0 +1,87 @@
+export default function (count = 20) {
+    return {
+        data() {
+            return {
+                displayPriority: 0,
+            };
+        },
+
+        mounted() {
+            this.runDisplayPriority();
+        },
+
+        computed: {
+            numShuffles() {
+                return this.$store.state.numShuffles;
+            },
+
+            layout() {
+                return this.$store.state.layout;
+            },
+
+            showNsfw() {
+                return this.$store.state.showNsfw;
+            },
+
+            filterNsfw() {
+                return this.$store.state.filterNsfw;
+            },
+        },
+
+        watch: {
+            // Watch the store values that cause the most intense operations 
+            // when they change so mounting posts can be deferred. The display 
+            // priority val has to be reset each time deferring is needed.
+            numShuffles: {
+                deep: false,
+                handler() {
+                    this.resetDisplayPriority();
+                },
+            },
+
+            layout: {
+                deep: false,
+                handler() {
+                    this.resetDisplayPriority();
+                },
+            },
+
+            showNsfw: {
+                deep: false,
+                handler() {
+                    this.resetDisplayPriority();
+                },
+            },
+
+            filterNsfw: {
+                deep: false,
+                handler() {
+                    this.resetDisplayPriority();
+                },
+            },
+        },
+
+        methods: {
+            runDisplayPriority() {
+                const step = () => {
+                    requestAnimationFrame(() => {
+                        this.displayPriority++;
+                        if (this.displayPriority < count) {
+                            step();
+                        }
+                    });
+                }
+                step();
+            },
+
+            defer(priority) {
+                return this.displayPriority >= priority;
+            },
+
+            resetDisplayPriority() {
+                this.displayPriority = 0;
+                this.runDisplayPriority();
+            }
+        },
+    };
+}

assets/Shuffle.js

@@ -0,0 +1,35 @@
+// Randomize array elements without mutating the original array using the 
+// Durstenfeld shuffle algorithm.
+export function shuffleArray(array) {
+    let shuffledArray = [...array];
+    for (let i = shuffledArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+    }
+    return shuffledArray;
+}
+
+// Randomize array elements without mutating the original array using a 
+// modification of Mike Bostock's implementation of the Fisher-Yates algorithm.
+export function shuffleArrayWithSeed(array, seed) {
+    let shuffledArray = [...array];
+    let toShuffleCount = shuffledArray.length;
+
+    while (toShuffleCount) {
+        let randIndex = Math.floor(random(seed) * toShuffleCount--);
+
+        let swapTmp = shuffledArray[toShuffleCount];
+        shuffledArray[toShuffleCount] = shuffledArray[randIndex];
+        shuffledArray[randIndex] = swapTmp;
+
+        ++seed;
+    }
+
+    return shuffledArray;
+}
+
+function random(seed) {
+    let x = Math.sin(seed++) * 10000;
+    let r = x - Math.floor(x);
+    return r;
+}

components/Grid.vue

@@ -13,13 +13,23 @@
             :gutter="{ default: '30px' }"
         >
             <Thing
-                v-for="item in saved"
+                v-for="item in saved.slice(0, 100)"
                 :key="item.name"
                 :item="item"
                 :width="width"
                 :height-limit="heightLimit"
                 @observe="observe"
             />
+            <template v-if="defer(10)">
+                <Thing
+                    v-for="item in saved.slice(100, saved.length)"
+                    :key="item.name"
+                    :item="item"
+                    :width="width"
+                    :height-limit="heightLimit"
+                    @observe="observe"
+                />
+            </template>
         </masonry>
     </div>
 </template>
@@ -97,6 +107,7 @@
 <script>
     import Vue from 'vue';
     import Masonry from 'vue-masonry-css';
+    import Defer from "../assets/Defer";
 
     import Thing from './Thing.vue';
 
@@ -106,6 +117,9 @@
         components: {
             Thing,
         },
+        mixins: [
+            Defer(),
+        ],
         data() {
             return {
                 observer: null,

components/Menu.vue

@@ -249,6 +249,81 @@
                 </button>
             </div>
 
+            <div class="menu__section menu__section-header">
+                Shuffle 
+                <small>
+                    Behavior for the shuffle button.
+                    Shuffling all posts in quick succession may impact performance
+                </small>
+            </div>
+
+            <div class="menu__section">
+                <button
+                    :class="[
+                        'button',
+                        'button--toggle',
+                        {
+                            'button--toggle-active': numShuffledPosts === -1,
+                        }
+                    ]"
+                    @click.prevent="setNumShuffledPosts(-1)"
+                >
+                    Shuffle all saved posts
+                </button>
+
+                <button
+                    :class="[
+                        'button',
+                        'button--toggle',
+                        {
+                            'button--toggle-active': numShuffledPosts !== -1,
+                        }
+                    ]"
+                    @click.prevent="setNumShuffledPosts(30)"
+                >
+                    Display a number of random posts
+                </button>
+
+                <input
+                    v-if="numShuffledPosts !== -1"
+                    v-model="numShuffledPosts"
+                    type="text"
+                    placeholder="Number of random posts to display..."
+                    class="menu__num-random-posts"
+                >
+            </div>
+
+            <div 
+                v-if="numShuffledPosts !== -1"
+                class="menu__section"
+            >
+                <button
+                    :class="[
+                        'button',
+                        'button--toggle',
+                        {
+                            'button--toggle-active': !trueRandomization,
+                        }
+                    ]"
+                    @click.prevent="setTrueRandomization(false)"
+                >
+                    Unique randomization
+                </button>
+
+                <button
+                    :class="[
+                        'button',
+                        'button--toggle',
+                        {
+                            'button--toggle-active': trueRandomization,
+                        }
+                    ]"
+                    @click.prevent="setTrueRandomization(true)"
+                >
+                    True randomization
+                </button>
+            </div>
+
             <div class="menu__section menu__section-header">
                 Support
             </div>
@@ -423,10 +498,8 @@
         }
     }
 
-    .menu__filter-subreddit {
-        width: 100%;
-
-        height: 40px;
+    input {
+        height: 45px;
         padding: 0 20px;
 
         @include font-main();
@@ -442,7 +515,10 @@
         &:focus {
             outline: none;
         }
+    }
 
+    .menu__filter-subreddit {
+        width: 100%;
     }
 
     .menu__filter-clear {
@@ -473,6 +549,13 @@
         text-decoration: underline;
         text-underline-offset: 2px;
     }
+
+    .menu__num-random-posts {
+        align-self: center;
+
+        width: 80px;
+        margin: 5px;
+    }
 </style>
 
 <script>
@@ -537,6 +620,22 @@
             theme() {
                 return this.$store.state.theme;
             },
+
+            numShuffledPosts: {
+                get() {
+                    return this.$store.state.numShuffledPosts;
+                },
+                set(num) {
+                    num = Math.floor(num.data || num);
+                    if (!isNaN(num)) {
+                        this.$store.dispatch('setNumShuffledPosts', num);
+                    }
+                }
+            },
+
+            trueRandomization() {
+                return this.$store.state.shuffleSeed === null;
+            },
         },
         methods: {
             close() {
@@ -574,6 +673,14 @@
             setTheme(theme) {
                 this.$store.dispatch('setTheme', theme);
             },
+
+            setNumShuffledPosts(num) {
+                this.numShuffledPosts = num
+            },
+
+            setTrueRandomization(val) {
+                this.$store.dispatch('setTrueRandomization', val);
+            },
         },
     };
 </script>