Skip to content
Permalink
Browse files

Conditional Visibility Episode Complete

  • Loading branch information...
JeffreyWay committed May 30, 2019
1 parent f044467 commit 0b2651c885a74d627b9b633d6caea4a1e02d10c7
Showing with 56 additions and 4 deletions.
  1. +3 −0 package.json
  2. +2 −0 resources/js/app.js
  3. +39 −0 resources/js/components/Visible.vue
  4. +12 −4 resources/views/conditional-visibility.php
@@ -22,5 +22,8 @@
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"in-viewport": "^3.6.0"
}
}
@@ -2,11 +2,13 @@ import Vue from 'vue';

import ScrollLink from './components/ScrollLink';
import Dropdown from './components/Dropdown';
import Visible from './components/Visible';

window.Vue = Vue;

Vue.component('scroll-link', ScrollLink);
Vue.component('dropdown', Dropdown);
Vue.component('visible', Visible);

new Vue({
el: '#app'
@@ -0,0 +1,39 @@
<template>
<transition name="fade">
<div v-show="shouldDisplay">
<slot></slot>
</div>
</transition>
</template>

<script>
import inViewport from 'in-viewport';
export default {
props: ['whenHidden'],
data() {
return {
shouldDisplay: false
}
},
mounted() {
window.addEventListener('scroll', () => {
this.shouldDisplay = ! inViewport(
document.querySelector(this.whenHidden)
);
}, { passive: true });
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
@@ -14,11 +14,19 @@
<div id="app" class="relative flex flex-col items-center p-8">
<h1 class="text-2xl font-bold mb-8">Conditional Visibility</h1>
<div class="container bg-gray-200 p-4" style="height: 2000px">
<a href="#" class="text-blue-500">New Post</a>
</div>
<div class="container w-3/4 bg-gray-200 p-4" style="height: 2000px">
<a
id="new-post-link"
href="#"
class="text-blue-500"
>New Post</a>
<button class="bg-blue-500 hover:bg-blue-600 rounded-full w-24 h-24 text-white text-4xl fixed z-10 right-0 bottom-0 mr-8 mb-8">+</button>
<visible when-hidden="#new-post-link">
<button
class="bg-blue-500 hover:bg-blue-600 rounded-full w-24 h-24 text-white text-4xl fixed z-10 right-0 bottom-0 mr-4 mb-4"
>+</button>
</visible>
</div>
</div>
<script src="/js/app.js"></script>

0 comments on commit 0b2651c

Please sign in to comment.
You can’t perform that action at this time.