@ulu/frontend-vue 0.1.0-beta.1

package/lib/components/systems/scroll-anchors/UluScrollAnchors.vue

@@ -0,0 +1,152 @@
+<!-- Version: 0.0.2? (NEED to diff, unsure of changes) -->
+<template>
+  <div class="scroll-anchors">
+    <slot/>
+  </div>
+</template>
+
+<script>
+  import { computed } from "vue";
+  import { SECTIONS, REGISTER, UNREGISTER } from "./symbols.js";
+  export default {
+    name: "ScrollAnchors",
+    props: {
+      firstItemActive: Boolean,
+      /**
+       * Observe 
+       */
+      observerOptions: {
+        type: Object,
+        default: () => ({
+          root: null,
+          threshhold: [0,1],
+          rootMargin: "-25% 0px -55% 0px"
+          // root: null,
+          // threshhold: [0,1],
+          // rootMargin: "25% 0px 75% 0px"
+        })
+      }
+    },
+    data() {
+      return {
+        isMounted: false,
+        sections: [], // Child components will section themselves
+      };
+    },
+    /**
+     * Interface for chil components to register themselves
+     * - Uses symbols
+     */
+    provide() {
+      return {
+        [SECTIONS]: computed(() => this.sections),
+        [REGISTER]: (instance) => {
+          const { titleId, title } = instance;
+          const { element } = instance.$refs;
+          this.sections.push({ 
+            instance, 
+            titleId, 
+            title,
+            element,
+            active: false 
+          });
+          this.update();
+        },
+        [UNREGISTER]: (instance) => {
+          const sections = this.sections;
+          const index = sections.findIndex(r => r.instance === instance);
+          if (index > -1) {
+            sections.splice(index, 1);
+          }
+          this.update();
+        },
+      };
+    },
+    methods: {
+      update() {
+        if (this.isMounted) {
+          this.observeItems();
+        }
+      },
+      getSectionIndex(el) {
+        return this.sections.findIndex(({ element }) => el === element);
+      },
+      /**
+       * Sets up a new observer to watch the section visibility
+       */
+      createObserver() {
+        const { observerOptions, sections, removeActive, firstItemActive } = this;
+        let lastY = 0;
+        // Observer callback, basically just sets active state for a given slide
+        // - isIntersecting will change when the element enters and leaves
+        const onObserve = (entries) => {
+          entries.forEach(({ target, isIntersecting }) => {
+            const index = this.getSectionIndex(target);
+            const y = target.offsetTop;
+            const section = sections[index];
+            const firstExiting = index === 0 && lastY > y;
+            const lastExiting = index === sections.length - 1 && lastY < y;
+            if (section) {
+              this.$nextTick(() => {
+                if (isIntersecting) {
+                  removeActive(section);
+                  section.active = true;
+                // Only allow first and last to 
+                } else if (firstExiting && !firstItemActive) {
+                  removeActive();
+                } else if (lastExiting && section.active) {
+                  removeActive();
+                }
+                this.$emit("sectionChange", { 
+                  section, 
+                  sections, 
+                  active: isIntersecting 
+                });
+              });
+            }
+          });
+        };
+        // Add non-reactive prop for removal and changes to targets
+        this.observer = new IntersectionObserver(onObserve, observerOptions);
+      },
+      /**
+       * Add all slide elements as targets in observer
+       */
+      observeItems() {
+        const { observer, sections } = this;
+        observer.disconnect();
+        sections.forEach(({ element }) => {
+          if (element) {
+            observer.observe(element);
+          }
+        });
+      },
+      removeActive(except = null) {
+        this.sections.forEach(s => {
+          if (s !== except) {
+            s.active = false;
+          }
+        });
+      },
+      /**
+       * Remove observer and it's internal DOM references (GC)
+       */
+      destroyObserver() {
+        this.observer.disconnect();
+        this.observer = null;
+      },
+    },
+    mounted() {
+      const first = this.sections[0];
+      if (this.firstItemActive && first) {
+        first.active = true;
+      }
+      this.createObserver();
+      this.observeItems();
+      this.isMounted = true;
+    },
+    unmounted() {
+      this.destroyObserver();
+    },
+  };
+</script>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsNav.vue

@@ -0,0 +1,37 @@
+<template>
+  <component 
+    v-if="sections.length" 
+    :is="element"
+    class="scroll-anchors__nav"
+  >
+    <ul>
+      <li 
+        v-for="(item, index) in sections" :key="index"
+        :class="{ 'is-active' : item.active }"
+      >
+        <a 
+          :class="{ 'is-active' : item.active }"
+          :href="`#${ item.titleId }`" 
+        >
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+  </component>
+</template>
+
+<script>
+  import { SECTIONS } from "./symbols.js";
+  export default {
+    name: "ScrollAnchorsNav",
+    inject: {
+      sections: { from: SECTIONS }
+    },
+    props: {
+      element: {
+        type: String,
+        default: "nav"
+      }
+    }
+  };
+</script>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue

@@ -0,0 +1,124 @@
+<!-- 
+Version: 0.0.2
+Changes: 
+  - 0.0.2 | Added transition initial state/class so the indicator 
+            doesn't transition at first
+-->
+<template>
+  <component 
+    v-if="sections.length" 
+    :is="element"
+    class="scroll-anchors__nav scroll-anchors__nav--animated"
+  >
+    <ul class="scroll-anchors__rail">
+      <li 
+        v-for="(item, index) in sections" :key="index"
+        :class="{ 'is-active' : item.active }"
+      >
+        <a 
+          :class="{ 'is-active' : item.active }"
+          :ref="(el) => addLinkRef(index, el)"
+          :href="`#${ item.titleId }`" 
+        >
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+    <div 
+      class="scroll-anchors__indicator"
+      :class="{
+        'scroll-anchors__indicator--can-transition' : indicatorAnimReady
+      }"
+      ref="indicator"
+      :style="{ 
+        opacity: indicatorStyles ? '1' : '0',
+        transform: `translateY(${ indicatorStyles.y }px)`,
+        height: `${ indicatorStyles.height }px`,
+      }"
+    ></div>
+  </component>
+</template>
+
+<script>
+  import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
+  import { SECTIONS } from "./symbols.js";
+  export default {
+    name: "ScrollAnchorsNavAnimated",
+    inject: {
+      sections: { from: SECTIONS }
+    },
+    props: {
+      /**
+       * Element to use for container
+       */
+      element: {
+        type: String,
+        default: "nav"
+      },
+    },
+    data() {
+      return {
+        linkRefs: {},
+        indicatorAnimReady: false
+      };
+    },
+    computed: {
+      indicatorStyles() {
+        const { sections, linkRefs } = this;
+        const linkCount = Object.keys(linkRefs).length;
+        // Checking for sections and link refs incase 
+        // we were waiting for the components to mount, etc
+        if (!sections || !linkCount) {
+          return false;
+        }
+        const activeIndex = sections.findIndex(s => s.active);
+        if (activeIndex === -1) {
+          return false;
+        }
+        const link = this.linkRefs[activeIndex];
+        const { offsetTop, offsetHeight } = link;
+        return {
+          y: offsetTop,
+          height: offsetHeight,
+          initial: this.inidica
+        };
+      }
+    },
+    watch: {
+      indicatorStyles(val) {
+        if (val && !this.indicatorAnimReady) {
+          runAfterFramePaint(() => {
+            this.indicatorAnimReady = true;
+          });
+        }
+      }
+    },
+    methods: {
+      addLinkRef(index, el) {
+        this.linkRefs[index] = el;
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  // User can override these styles
+  // - Think this is better than props/etc 
+  //   - Refactored from props to just plain css to be overridden
+  .scroll-anchors__rail {
+    border-left: 3px solid rgb(220, 220, 220);
+    padding-left: 1rem;
+  }
+  .scroll-anchors__indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3px;
+    background-color: black;
+  }
+  .scroll-anchors__indicator--can-transition {
+    transition-property: height, transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 250ms;
+  }
+</style>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="[wrapperClass, { [activeClass] : activeClass && section?.active }]" ref="element">
+    <component :is="titleElement" :class="titleClass" :id="titleId">
+      {{ title }}
+    </component>
+    <slot :section="section"></slot>
+  </div>
+</template>
+
+<script>
+  import { computed } from "vue";
+  import { urlize } from "@ulu/utils/string.js";
+  import { REGISTER, UNREGISTER, SECTIONS } from "./symbols.js";
+  export default {
+    name: "ScrollAnchorsSection",
+    props: {
+      title: String,
+      titleElement: {
+        type: String,
+        default: "h2"
+      },
+      titleClass: {
+        type: String,
+        default: "h2"
+      },
+      anchorId: String,
+      wrapperClass: {
+        type: String,
+        default: "scroll-anchors__section"
+      },
+      activeClass: {
+        type: String,
+        default: 'is-active'
+      }
+    },
+    inject: {
+      register: { from: REGISTER }, 
+      unregister: { from: UNREGISTER },
+      sections: { from: SECTIONS, default: () => computed(() => []) }
+    },
+    data() {
+      const { anchorId, title } = this;
+      return {
+        titleId: anchorId || `sas-title-${ urlize(title) }`
+      };
+    },
+    computed: {
+      section() {
+        return this.sections.find(s => s.instance === this);
+      }
+    },
+    mounted() {
+      if (this.register) {
+        this.register(this);
+      }
+    },
+    unmounted() {
+      if (this.unregister) {
+        this.unregister(this);
+      }
+    }
+  };
+</script>

package/lib/components/systems/scroll-anchors/symbols.js

@@ -0,0 +1,6 @@
+/**
+ * Symbol for register provide/inject
+ */
+export const REGISTER = Symbol();
+export const UNREGISTER = Symbol();
+export const SECTIONS = Symbol();

package/lib/components/systems/skeleton/UluShowSkeleton.vue

@@ -0,0 +1,13 @@
+<template>
+  <slot v-if="!when"/>
+  <SkeletonTextInline class="skeleton" v-else/>
+</template>
+
+<script>
+  export default {
+    name: "ShowSkeleton",
+    props: {
+      when: Boolean,
+    },
+  };
+</script>

package/lib/components/systems/skeleton/UluSkeletonContent.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="skeleton">
+    <div v-for="(line, index) in linesWithSegments" :key="index">
+      <span 
+        v-for="segment in line"
+        :key="segment"
+        class="skeleton__text skeleton__text--inline"
+        :class="{ 'skeleton__alt' : segment.alt }"
+        :style="{ width: `${ segment.width }%` }"
+      > 
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { randomInt } from "@ulu/utils/random.js";
+  import { arrayCreate } from "@ulu/utils/array.js";
+  export default {
+    name: "SkeletonContent",
+    props: {
+      lines: {
+        type: Number,
+        default: 6
+      },
+    },
+    methods: {
+      randomInt
+    },
+    computed: {
+      /**
+       * Creates the segments (like words) for the given line count
+       * - Uses random number of segments and makes sure to fill the line between 70% - 100%
+       */
+      linesWithSegments() {
+        return arrayCreate(this.lines, () => {
+          const minWidth = 15;
+          const total = randomInt(70, 100);
+          let widthCurrent = 0;
+          const newWidth = () => {
+            const remaining = total - widthCurrent;
+            const width = randomInt(minWidth, remaining);
+            widthCurrent += width;
+            return width;
+          };
+          const segments = [];
+          while (widthCurrent < total - minWidth) {
+            segments.push(newWidth());
+          }
+          const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
+          while (getActualTotal() >= total) {
+            let removed = segments.pop();
+            if (!removed) break;
+          }
+          return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
+        });
+      }
+    }
+  };
+</script>

package/lib/components/systems/skeleton/UluSkeletonMedia.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
+    <FaIcon style="font-size: 2rem" icon="image"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "SkeletonMedia",
+  };
+</script>

package/lib/components/systems/skeleton/UluSkeletonTextInline.vue

@@ -0,0 +1,9 @@
+<template>
+  <span class="skeleton__text skeleton__text--inline"></span>
+</template>
+
+<script>
+  export default {
+    name: "SkeletonTextInline",
+  };
+</script>

package/lib/components/systems/slider/UluImageSlideShow.vue

@@ -0,0 +1,75 @@
+<!-- 
+  Note: This is the image implementation of SlideShow 
+  Notes:
+    - Should the images resize to fit the nav?
+    - Should the nav slide based on the active index?
+
+-->
+<template>
+  <UluSlideShow 
+    class="slideshow--images" 
+    :items="images"
+    @slideChange="slideChange"
+  >
+    <template #slide="{ item }">
+      <img :src="item.src" :alt="item.alt">
+      <!-- Adding this in here for now, not generic meant for selection in compare ui -->
+      <div class="slideshow__image-actions">
+        <AppButton v-if="selectButton" class="type-small" icon="plus" small iconBefore>
+          Select
+        </AppButton>
+      </div>
+    </template>
+    <template #nav="{ index }">
+      <img :src="images[index].src" :alt="`View image ${ index }`">
+    </template>
+  </UluSlideShow>
+</template>
+
+<script>
+  import UluSlideShow from "./UluSlideShow.vue";
+  export default {
+    name: 'ImageSlideShow',
+    components: {
+      UluSlideShow,
+    },
+    props: {
+      images: Array,
+      selectButton: Boolean
+    },
+    watch: {
+      images() {
+        console.log('watch image from outer');
+      }
+    },
+    methods: {
+      /**
+       * Test to see if the active slide's nav button (thumbnail) is in view
+       * if not, scroll the nav to ensure it is visible. This function will take 
+       * into account which side of the overflow nav the item is hidden in and will 
+       * scroll either to fit it to the flush end (if overflow to the right) or flush start
+       */
+      slideChange({ slide, nav }) {
+        const { active, navElement } = slide;
+        if (!navElement) return;
+        const { offsetWidth, scrollLeft: left } = nav;
+        const { offsetLeft, offsetWidth: navWidth } = navElement;
+        const right = left + offsetWidth;
+        const navRight = offsetLeft + navWidth;
+        let amount = null;
+        console.log('left/right', left, right);
+        if (active && navElement) {
+          
+          if (navRight > right) {
+            amount = left + (navRight - right);
+          } else if (offsetLeft < left) {
+            amount = offsetLeft;
+          }
+          if (amount !== null) {
+            nav.scrollTo({ left: amount, top: 0, behavior: "smooth" });
+          }
+        }
+      }
+    }
+  }
+</script>