implemented callback feature

Author: Recks11

lazy-transition.d.ts

@@ -29,7 +29,7 @@ export declare class ObserverService {
 
   get observer (): IntersectionObserver
 
-  startObserving (el: Element): void
+  startObserving (el: FunctionalVueElement, callback?: Function, addEvents?: boolean, transitionName?: string): void
   stopObserving (el: Element): void
   disposeObserver (): void
 }
@@ -45,3 +45,13 @@ export interface VueElement extends HTMLElement {
   isFromDirective: boolean
   binding: DirectiveBinding
 }
+
+export interface FunctionalVueElement extends VueElement {
+  callback?: Function
+  transition?: string
+}
+
+export type FunctionalElementBinding = {
+  transition?: string
+  onView: Function
+}

notes

@@ -0,0 +1,18 @@
+-- TODO(FEATURES)
+    - Implement feature to play reverse transition when element goes out of viewport.
+    - Try to implement lazy loading
+
+-- TODO(IDEAS)
+    - maybe add functionality to provide custom observer
+    - maybe add functionality to have more than one observer and a way to reference them like an observer factory
+        [the observer factory will not be seen by the plugin user. to them it will just be add/remove observer]
+    - maybe change directive syntax to v-lazy then parameters will decide functionality
+        example <div v-lazy.load> </div> will be for lazy loading on view
+        example <div v-lazy.transition> </div> will be for lazy transitions [normal behavior]
+        example <div v-lazy.animate> </div> will be for lazy animations
+    - maybe add functionality to supply callback to be executed when element is in view
+        instead of only transitions and animations
+    - maybe restructure the directive values supplied to allow for more custom transitions and other css changes
+        example <div v-lazy.transition="{from: '', to: ''}"> </div>
+        example <div v-lazy.transition.cssClass="'css-class-name'"> </div>
+        example <div v-lazy.transition.style="'element-style'"> </div>

src/FunctionComponent.vue

@@ -0,0 +1,72 @@
+<template>
+  <section class="animated bg-darkslategray" ref="pageEnd">
+    This element does not use the v-lazytransition binding or lazy-transition component.
+    <p> {{ text }} </p>
+  </section>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { FunctionalVueElement, VueElement } from '../lazy-transition';
+
+export default Vue.extend({
+  name: 'function-component',
+  data () {
+    return {
+      text: ''
+    }
+  },
+  methods: {
+    showThings () {
+      setTimeout(() => {
+        this.text = 'But it\'s special'
+        setTimeout(() => {
+          this.text = 'It executes a callback using the global variables.'
+          setTimeout(() => {
+            this.text = 'This callback keeps cloning nodes as you scroll. ' +
+              'but there will never be more than 12 nodes at a time' +
+              'no matter how much you scroll'
+            this.duplicateAndClone()
+          }, 1000)
+        }, 1000)
+      }, 1000)
+    },
+    duplicateAndClone () {
+      const el = this.$refs.pageEnd as FunctionalVueElement
+      const newNode = el.cloneNode() as FunctionalVueElement;
+      const secondNode = el.cloneNode() as FunctionalVueElement; // node to be cloned
+      secondNode.innerText = 'This is the initial cloned node';
+      newNode.classList.remove('animated', 'bg-darkslategray');
+
+      el.parentElement!.appendChild(newNode)
+      newNode.appendChild(secondNode)
+
+      this.$lazyObserver.startObserving(secondNode, () => {
+        this.cloneChildNode(secondNode, newNode)
+      }, true, 'side-fade-right')
+    },
+    cloneChildNode (childNode: FunctionalVueElement, parentNode: FunctionalVueElement) {
+      if (parentNode.children.length > 20) parentNode.firstChild!.remove();
+      const node = childNode.cloneNode() as VueElement;
+      node.textContent = 'CLONED NODE'
+      parentNode.append(node)
+      this.$lazyObserver.startObserving(node, () => {
+        this.cloneChildNode(node, parentNode)
+      }, true, 'side-fade-right')
+    }
+  },
+  mounted (): void {
+    const el = this.$refs.pageEnd as VueElement
+
+    this.$lazyObserver.startObserving(el, this.showThings)
+  },
+  beforeDestroy (): void {
+    const el = this.$refs.pageEnd as VueElement
+    this.$lazyObserver.stopObserving(el)
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/component/LazyTransition.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import Vue from 'vue'
+import { VueElement } from '../../lazy-transition';
 
 interface AnimatedItem {
   show: boolean;
@@ -23,13 +24,13 @@ export default Vue.extend({
     };
   },
   mounted(): void {
-    const el = this.$refs.animateditem as Element;
+    const el = this.$refs.animateditem as VueElement;
     this.$lazyObserver.startObserving(el);
   },
   beforeDestroy(): void {
-    const el = this.$refs.animateditem as Element;
+    const el = this.$refs.animateditem as VueElement;
     this.$lazyObserver.stopObserving(el);
-  },
+  }
 });
 </script>
 

src/directive/index.ts

@@ -1,23 +1,25 @@
-import { VueElement } from '../../lazy-transition'
+import { VueElement } from '@/../lazy-transition'
 import _Vue, { VNode } from 'vue'
-import { isHtmlElement, isVueComponent } from '@/service/Helpers'
+import { getVueInstance, isHtmlElement, isVueComponent } from '@/service/Helpers'
 import { DirectiveBinding } from 'vue/types/options'
 
 function prepareAndWatch (el: Element, binding: DirectiveBinding, node: VNode) {
   const element = el as VueElement
   element.isFromDirective = true
   element.binding = binding
 
-  if (isHtmlElement(el)) {
-    node.context!.$lazyObserver.startObserving(element)
+  if (isHtmlElement(el) && !isVueComponent(el)) {
+    node.context!.$lazyObserver.startObserving(element, binding.value.onView)
   } else if (isVueComponent(el)) {
-    element.__vue__.$lazyObserver.startObserving(element)
+    getVueInstance(el).$lazyObserver.startObserving(element, binding.value.onView)
   }
 }
 
 export const lazyAnimateDirective = (app: typeof _Vue) => app.directive('lazytransition', {
   bind: (el, binding, vnode) => {
-    prepareAndWatch(el, binding, vnode)
+    if (el.getAttribute('lazy-observing') !== 'true') {
+      prepareAndWatch(el, binding, vnode)
+    }
   }
 })
 
@@ -27,7 +29,9 @@ export const lazyAnimateGroup = (app: typeof _Vue) => app.directive('lazytransit
       const numberOfChildren = el.children.length
       for (let i = 0; i < numberOfChildren; i++) {
         const elm = el.children.item(i)!;
-        prepareAndWatch(elm, binding, vnode)
+        if (elm.getAttribute('lazy-observing') !== 'true') {
+          prepareAndWatch(elm, binding, vnode)
+        }
       }
     }
   }

src/dummy-component.vue

@@ -1,6 +1,32 @@
 <template>
-  <section class="animated mb-5"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur exercitationem
-    inventore iure, molestias nisi odit praesentium quam, recusandae similique sunt veritatis, voluptas. Asperiores
-    dolores maxime minima recusandae reprehenderit sed ullam!
+  <section class="animated mb-5" id="inner"
+           v-lazytransition.function="{transition: this.transition, onView: this.changeText}">
+    Dummy component: <slot/>
+    <p> {{ this.text }} </p>
   </section>
 </template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'dummy-component',
+  props: {
+    transition: {
+      type: String,
+      required: false
+    }
+  },
+  data () {
+    return {
+      text: 'Data property in dummy component'
+    }
+  },
+  methods: {
+    changeText () {
+      setTimeout(() => {
+        this.text = this.text + ' that changed 2 seconds after it got here'
+      }, 2000)
+    }
+  }
+})
+</script>

src/serve-dev.ts

@@ -11,7 +11,6 @@ Vue.use(LazyTransition, {
   },
   intersectionRatio: 0.5
 })
-
 new Vue({
   render: (h): VNode => h(Dev),
 }).$mount('#app');