| Server IP : 185.208.173.17 / Your IP : 87.236.161.98 Web Server : Microsoft-IIS/10.0 System : Windows NT SRV8576125506 10.0 build 26100 (Windows Server 2016) AMD64 User : IUSR ( 0) PHP Version : 7.4.13 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/inetpub/wwwroot/parsmega.nuxt/node_modules/vue-waypoint/docs/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-waypoint</title>
<link href="https://fonts.googleapis.com/css?family=B612+Mono|Open+Sans" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37553464-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-37553464-3', { 'anonymize_ip': true });
</script>
<style>
#app .backlog {
position: fixed;
top: 0;
right: 0;
background: black;
width: 30%;
height: 100vh;
color: white;
box-sizing: border-box;
padding: 30px;
margin: 0;
display: block;
font-size: 12px;
font-family: 'B612 Mono', monospace;
}
#app .backlog span {
display: block;
line-height: 2.5;
}
#app .backlog span.log--hint {
display: inline;
font-weight: bold;
color: #fc7c7c;
}
#app .backlog span.log--hint:nth-child(even) {
color: #7cd7fc;
}
#app {
font-family: 'Open Sans', sans-serif;
}
#app div {
width: 60%;
background-color: #7cd7fc;
height: 300px;
margin: 30px 0;
display: flex;
justify-content: center;
align-items: center;
}
#app div:nth-child(even) {
background-color: #fc7c7c;
}
#app div.active {
border: 3px dashed rgb(0, 0, 0);
box-sizing: border-box;
}
#app .blank {
height: 100vh;
}
</style>
</head>
<body>
<div id="app">
<div class="backlog">
<span v-for="el of prettyLogs" v-html="el"></span>
</div>
<h1>vue-waypoint</h1>
<h2>demo page</h2>
<h3>100% threshold</h3>
<div v-waypoint="{ active: true, callback: logOne }" id="first">#first</div>
<div v-waypoint="{ active: true, callback: logOne }" id="second">#second</div>
<div v-waypoint="{ active: true, callback: logOne }" id="third">#third</div>
<div v-waypoint="{ active: true, callback: logOne }" id="fourth">#fourth</div>
<div v-waypoint="{ active: true, callback: logEvent }" id="fifth" @going-in="eventFromCB(fifthCustomData)">#fifth</div>
<h3>50% threshold</h3>
<div v-waypoint="{ active: true, callback: logOne, options: { threshold: [0.5] } }" id="first-half">#first-half</div>
<h3>25%-75% threshold</h3>
<div v-waypoint="{ active: true, callback: logOne, options: { threshold: [0.25,0.75] } }" id="second-half">#second-half</div>
<h3>0% threshold</h3>
<div v-waypoint="{ active: true, callback: logOne, options: { threshold: [0] } }" id="third-half">#third-half</div>
<h3>100% threshold</h3>
<div v-waypoint="{ active: true, callback: logOne, options: { threshold: [1] } }" id="fourth-half">#fourth-half</div>
<div class="blank"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>
<script src="vue-waypoint.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
logs: [],
halfOpts: { threshold: [0.5] },
fifthCustomData: 'I am here!'
}
},
computed: {
prettyLogs: {
get () {
return this.logs.slice(1).slice(-25)
}
}
},
methods: {
eventFromCB(text) {
this.log('Custom event text: ' + text)
},
log (txt) {
this.logs = this.logs.concat(txt)
},
logOne ({ el, going, direction }) {
this.log(`#${el.getAttribute('id')} is ${this.wrapSpan(going)} viewport, direction: ${this.wrapSpan(direction)}`)
el.classList.toggle('active', this.$waypointMap.GOING_IN === going)
},
logEvent (e) {
this.logOne(e)
if (this.$waypointMap.GOING_IN !== e.going) return
const outEvent = new CustomEvent('going-in')
e.el.dispatchEvent(outEvent)
},
wrapSpan (txt, cClass = 'log--hint') {
return `<span class="${cClass}">${txt}</span>`
}
}
})
</script>
</body>
</html>