Vue 2.0 Hello World

by nachocab

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <wrapper></wrapper>
</div>


<template id="wrapper">
  <slide-deck>
    <slide>
      <p data-order="0">First paragraph</p>
      <p data-order="1">Second paragraph Hello from second fragment</p>
    </slide>

    <slide>
      <p data-order="0">First paragraph 2nd slide</p>
      <p data-order="1">Second paragraph 2nd slide</p>
    </slide>
  </slide-deck>
</template>

CSS

[data-hidden="true"] {
  color: grey
}

Babel + JSX

Vue.component('slide-deck', {
	data() {
   return {
   	currentSlideIndex: 0,
    currentFragmentIndex: 0,
    numFragmentsPerSlide: [2,2]
   }
  },
  computed: {
  	slideComponents() {
    	return this.$slots.default.filter(slot => slot.tag)
    },
    currentSlide() {
 			return this.slideComponents[this.currentSlideIndex]
    }
  },
  
  created () {
    window.addEventListener('keydown', this.handleKeydown);
        this.updateVisibilities();
  },
  destroyed() {
    window.removeEventListener('keydown', this.handleKeydown);
  },
  methods: {
  	handleKeydown(e) {
      if (e.code === 'ArrowRight') {
        this.increaseFragmentOrSlide()
      } else if (e.code === 'ArrowLeft') {
        this.decreaseFragmentOrSlide()
      }
    },

    increaseFragmentOrSlide() {
  		if (this.currentFragmentIndex < this.numFragmentsPerSlide[this.currentSlideIndex] - 1) {
        this.currentFragmentIndex +=1
        console.log('increased fragment index:', this.currentFragmentIndex)
      } else if (this.currentSlideIndex < this.numFragmentsPerSlide.length - 1){
       	this.currentSlideIndex += 1
        this.currentFragmentIndex = 0
        console.log('increased slide index:', this.currentSlideIndex)        
       }
      this.updateVisibilities()
    },
    
    decreaseFragmentOrSlide() {
  		if (this.currentFragmentIndex > 0) {
        this.currentFragmentIndex -=1
        console.log('decreased fragment:', this.currentFragmentIndex)
      } else if (this.currentSlideIndex > 0) {
       	this.currentSlideIndex -= 1
        this.currentFragmentIndex = 0
        console.log('decreased slide:', this.currentSlideIndex)                
       }
      this.updateVisibilities()    	
    },
    
    updateVisibilities() { 
      // this.$forceUpdate() // hack
      this.$nextTick(() => {
        const validElements = this.currentSlide.componentOptions.children.filter(child => child.tag)
        validElements.forEach(child => {
//          console.log(child, child.elm)
     ...