Update syntax and Add visible
This commit is contained in:
Andros Fenollosa
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test syntax</title>
|
||||
<title>Test is-click</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
@ -21,9 +21,9 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" id="nav" i-click="class:remove('show')">Mi nav</nav>
|
||||
<button i-click="class:add('show', '#nav')">add</button>
|
||||
<button i-click="class:remove('show', '#nav')">remove</button>
|
||||
<button i-click="class:toggle('show', '#nav')">toggle</button>
|
||||
<nav class="nav" id="nav" is-click="class:remove('show')">Mi nav</nav>
|
||||
<button is-click="class:add('show', '#nav')">add</button>
|
||||
<button is-click="class:remove('show', '#nav')">remove</button>
|
||||
<button is-click="class:toggle('show', '#nav')">toggle</button>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test i-hover</title>
|
||||
<title>Test is-hover</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.uppercase {
|
||||
@ -11,14 +11,14 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p i-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p>
|
||||
<p is-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p>
|
||||
<p class="text__1--hover">
|
||||
Quisque id diam vel quam elementum pulvinar etiam non quam?
|
||||
</p>
|
||||
<p class="text__1--hover">
|
||||
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
|
||||
</p>
|
||||
<p class="text__1--hover" i-hover="class:add('uppercase')">
|
||||
<p class="text__1--hover" is-hover="class:add('uppercase')">
|
||||
Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
|
||||
</p>
|
||||
<p class="text__1--hover">
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test i-scroll</title>
|
||||
<title>Test is-scroll</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<style>
|
||||
.nav {
|
||||
@ -21,8 +21,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
|
||||
<p i-scroll-down="class:toggle('ala')">
|
||||
<nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
|
||||
<p is-scroll-down="class:toggle('ala')">
|
||||
Ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis.
|
||||
</p>
|
||||
<p>
|
||||
47
test/is-visible.html
Normal file
47
test/is-visible.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Test is-visible</title>
|
||||
<script src="../dist/ffnm.min.js"></script>
|
||||
<link href="https://unpkg.com/spectre.css/dist/spectre.min.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.image-1 {
|
||||
transition: 1s;
|
||||
transform: translateY(-2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.image-2 {
|
||||
transform: scale(.5);
|
||||
transition: 1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero hero-lg">
|
||||
<div class="hero-body">
|
||||
<h1 class="text-center">Please scroll down</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center">
|
||||
<img is-visible="class:add('show')" class="image-1" src="https://source.unsplash.com/random/500x300?cat" alt="Image 1">
|
||||
</p>
|
||||
|
||||
<p class="text-center">
|
||||
<img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-2" src="https://source.unsplash.com/random/500x300?dog" alt="Image 2">
|
||||
</p>
|
||||
|
||||
<p class="text-center">
|
||||
<img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-1" src="https://source.unsplash.com/random/500x300?koala" alt="Image 1">
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -7,97 +7,110 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- Class with ID -->
|
||||
<div i-click="class:add('show1', '#menu1')">add</div>
|
||||
<div i-click="class:remove('show2', '#menu2')">remove</div>
|
||||
<div i-click="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<div is-click="class:add('show1', '#menu1')">add</div>
|
||||
<div is-click="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-click="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div i-click="class:add('show1', '.menu1')">add</div>
|
||||
<div i-click="class:remove('show2', '.menu2')">remove</div>
|
||||
<div i-click="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<div is-click="class:add('show1', '.menu1')">add</div>
|
||||
<div is-click="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-click="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div i-click="class:add('show1', 'a')">add</div>
|
||||
<div i-click="class:remove('show2', 'li')">remove</div>
|
||||
<div i-click="class:toggle('show3', 'button')">toggle</div>
|
||||
<div is-click="class:add('show1', 'a')">add</div>
|
||||
<div is-click="class:remove('show2', 'li')">remove</div>
|
||||
<div is-click="class:toggle('show3', 'button')">toggle</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
<!-- Class with ID -->
|
||||
<div i-scroll-up="class:add('show1', '#menu1')">add</div>
|
||||
<div i-scroll-up="class:remove('show2', '#menu2')">remove</div>
|
||||
<div i-scroll-up="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<div is-scroll-up="class:add('show1', '#menu1')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-scroll-up="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div i-scroll-up="class:add('show1', '.menu1')">add</div>
|
||||
<div i-scroll-up="class:remove('show2', '.menu2')">remove</div>
|
||||
<div i-scroll-up="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<div is-scroll-up="class:add('show1', '.menu1')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-scroll-up="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div i-scroll-up="class:add('show1', 'a')">add</div>
|
||||
<div i-scroll-up="class:remove('show2', 'li')">remove</div>
|
||||
<div i-scroll-up="class:toggle('show3', 'button')">toggle</div>
|
||||
<div is-scroll-up="class:add('show1', 'a')">add</div>
|
||||
<div is-scroll-up="class:remove('show2', 'li')">remove</div>
|
||||
<div is-scroll-up="class:toggle('show3', 'button')">toggle</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
<!-- Class with ID -->
|
||||
<div i-scroll-down="class:add('show1', '#menu1')">add</div>
|
||||
<div i-scroll-down="class:remove('show2', '#menu2')">remove</div>
|
||||
<div i-scroll-down="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<div is-scroll-down="class:add('show1', '#menu1')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-scroll-down="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div i-scroll-down="class:add('show1', '.menu1')">add</div>
|
||||
<div i-scroll-down="class:remove('show2', '.menu2')">remove</div>
|
||||
<div i-scroll-down="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<div is-scroll-down="class:add('show1', '.menu1')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-scroll-down="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div i-scroll-down="class:add('show1', 'a')">add</div>
|
||||
<div i-scroll-down="class:remove('show2', 'li')">remove</div>
|
||||
<div i-scroll-down="class:toggle('show3', 'button')">toggle</div>
|
||||
<div is-scroll-down="class:add('show1', 'a')">add</div>
|
||||
<div is-scroll-down="class:remove('show2', 'li')">remove</div>
|
||||
<div is-scroll-down="class:toggle('show3', 'button')">toggle</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
<!-- Class with ID -->
|
||||
<div i-hover="class:add('show1', '#menu1')">add</div>
|
||||
<div i-hover="class:remove('show2', '#menu2')">remove</div>
|
||||
<div i-hover="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<div is-hover="class:add('show1', '#menu1')">add</div>
|
||||
<div is-hover="class:remove('show2', '#menu2')">remove</div>
|
||||
<div is-hover="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div i-hover="class:add('show1', '.menu1')">add</div>
|
||||
<div i-hover="class:remove('show2', '.menu2')">remove</div>
|
||||
<div i-hover="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<div is-hover="class:add('show1', '.menu1')">add</div>
|
||||
<div is-hover="class:remove('show2', '.menu2')">remove</div>
|
||||
<div is-hover="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div i-hover="class:add('show1', 'a')">add</div>
|
||||
<div i-hover="class:remove('show2', 'li')">remove</div>
|
||||
<div i-hover="class:toggle('show3', 'button')">toggle</div>
|
||||
<div is-hover="class:add('show1', 'a')">add</div>
|
||||
<div is-hover="class:remove('show2', 'li')">remove</div>
|
||||
<div is-hover="class:toggle('show3', 'button')">toggle</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
<!-- Class with ID -->
|
||||
<div i-view="class:add('show1', '#menu1')">add</div>
|
||||
<div i-view="class:remove('show2', '#menu2')">remove</div>
|
||||
<div i-view="class:toggle('show3', '#menu3')">toggle</div>
|
||||
<div is-visible="class:add('show1', '#menu1')">add</div>
|
||||
<div is-visible="class:remove('show2', '#menu2')">remove</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div i-view="class:add('show1', '.menu1')">add</div>
|
||||
<div i-view="class:remove('show2', '.menu2')">remove</div>
|
||||
<div i-view="class:toggle('show3', '.menu3')">toggle</div>
|
||||
<div is-visible="class:add('show1', '.menu1')">add</div>
|
||||
<div is-visible="class:remove('show2', '.menu2')">remove</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div i-view="class:add('show1', 'a')">add</div>
|
||||
<div i-view="class:remove('show2', 'li')">remove</div>
|
||||
<div i-view="class:toggle('show3', 'button')">toggle</div>
|
||||
<div is-visible="class:add('show1', 'a')">add</div>
|
||||
<div is-visible="class:remove('show2', 'li')">remove</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
<!-- Class with ID -->
|
||||
<div is-not-visible="class:add('show1', '#menu1')">add</div>
|
||||
<div is-not-visible="class:remove('show2', '#menu2')">remove</div>
|
||||
<!-- End Class with ID -->
|
||||
|
||||
<!-- Class with class -->
|
||||
<div is-not-visible="class:add('show1', '.menu1')">add</div>
|
||||
<div is-not-visible="class:remove('show2', '.menu2')">remove</div>
|
||||
<!-- End Class with class -->
|
||||
|
||||
<!-- Class with tag -->
|
||||
<div is-not-visible="class:add('show1', 'a')">add</div>
|
||||
<div is-not-visible="class:remove('show2', 'li')">remove</div>
|
||||
<!-- End Class with tag -->
|
||||
|
||||
|
||||
<!-- Errors -->
|
||||
<div i-click="class:dd('show1', '.menu1')">add</div>
|
||||
<div is-click="class:dd('show1', '.menu1')">add</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user