First Commit
This commit is contained in:
commit
076b58a997
28
README.md
Executable file
28
README.md
Executable file
@ -0,0 +1,28 @@
|
||||
# Expanding Bar Menus
|
||||
|
||||
An experimental tab-like navigation that expands a content area when clicked.
|
||||
|
||||
[Article on Codrops](https://tympanus.net/codrops/?p=30460)
|
||||
|
||||
[Demo](http://tympanus.net/Development/ExpandingBarMenus/)
|
||||
|
||||
## Credits
|
||||
|
||||
- Artwork copyright by [RuleByArt](https://creativemarket.com/RuleByArt). Purchase on [Creative Market](https://creativemarket.com/RuleByArt/468537-Flight).
|
||||
- [Anime.js](http://anime-js.com/) by Julian Garnier
|
||||
- [Enquire.js](http://wicky.nillia.ms/enquire.js/) by Nick Williams
|
||||
- Photography from [https://unsplash.com](Unsplash.com)
|
||||
|
||||
## License
|
||||
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
|
||||
|
||||
## Misc
|
||||
|
||||
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
|
||||
|
||||
[© Codrops 2017](http://www.codrops.com)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
333
contract.html
Normal file
333
contract.html
Normal file
@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ranchi Mall FLO Explorer</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="author" content="Ranchi Mall" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
|
||||
|
||||
/*body {
|
||||
position:relative;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 1.05em;
|
||||
margin: 40px;
|
||||
text-align:justify;
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, tr, th, td {
|
||||
border: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4CAF50; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.activeButton {
|
||||
color: black;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.firstColumn {
|
||||
position: absolute;;
|
||||
left:200px;
|
||||
|
||||
}
|
||||
|
||||
.secondColumn {
|
||||
position: absolute;
|
||||
left:450px;
|
||||
top:194px;
|
||||
}
|
||||
|
||||
.dispBalTable {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>document.documentElement.className = 'js';</script>
|
||||
</head>
|
||||
<body class="demo-2">
|
||||
<svg class="hidden">
|
||||
<symbol id="icon-arrow" viewBox="0 0 24 24">
|
||||
<title>arrow</title>
|
||||
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
|
||||
</symbol>
|
||||
<symbol id="icon-drop" viewBox="0 0 24 24">
|
||||
<title>drop</title>
|
||||
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-caret" viewBox="0 0 24 24">
|
||||
<title>caret</title>
|
||||
<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-menu" viewBox="0 0 24 24">
|
||||
<title>menu</title>
|
||||
<path d="M23.8,6H0.1V3h23.7V6z M23.8,10.5H0.1v3h23.7V10.5z M14.2,18h-14v3h14V18z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cross" viewBox="0 0 24 24">
|
||||
<title>cross</title>
|
||||
<path d="M14.1,12l7.3,7.3l-2.1,2.1L12,14.1l-7.3,7.3l-2.1-2.1L9.9,12L2.6,4.7l2.1-2.1L12,9.9l7.3-7.3l2.1,2.1L14.1,12z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main class="view">
|
||||
<div class="content">
|
||||
<div class="deco">
|
||||
<!--<p class="deco__text">elementum recolligo huic commodo locus mihi vestri vox</p>-->
|
||||
</div>
|
||||
<header class="codrops-header">
|
||||
<div class="codrops-links">
|
||||
<button class="btn btn--menu">
|
||||
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
|
||||
</button>
|
||||
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
|
||||
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
|
||||
</div>
|
||||
<p id="contractText" class="codrops-header__info"></p>
|
||||
<nav class="demos">
|
||||
<a class="demo demo--current" href="index2.html">2</a>
|
||||
<a class="demo" href="index3.html">View All</a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<nav class="tabsnav tabsnav--vertical tabsnav--zeru">
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Play</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Participate</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Track tokens</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Track Contracts</h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tabscontent">
|
||||
<div class="tabscontent__item">
|
||||
<div class="column">
|
||||
<h3 class="column__title">03/09/2017</h3>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">magnitude</h4>
|
||||
<h4 class="column__text">saponification</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3 class="column__title">07/23/2017</h3>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">neutrophil</h4>
|
||||
<h4 class="column__text">energetic</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- This is where the code for webwallet will be up -->
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- Token Tracking -->
|
||||
<div id='token_column1' class="column">
|
||||
<h3 class="column__title">Enter Address/Token name</h3>
|
||||
<form name="myForm" onsubmit="return validateForm()" method="post">
|
||||
<input type="text" name="fname">
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
<!--<h4 class="column__text">saponification</h4>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">magnitude</h4>-->
|
||||
</div>
|
||||
<div id='token_column2' class="column">
|
||||
<h3 class="column__title">Active Tokens</h3>
|
||||
<!--<h4 class="column__text">energetic</h4>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">neutrophil</h4>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- Smart Contract Tracking -->
|
||||
<div id='contract_column1' class="column">
|
||||
<h3 class="column__title">Top Contracts</h3>
|
||||
<!--<h4 class="column__text">energetic</h4>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">neutrophil</h4>-->
|
||||
</div>
|
||||
<div id='contract_column2' class="column">
|
||||
<h3 class="column__title">Enter Address/Contract name</h3>
|
||||
<div>
|
||||
<input type="text" id='addressName' name="addressName">
|
||||
<button type="submit" id='addressName_submit'>Submit</button>
|
||||
</div>
|
||||
|
||||
<!--<form name="myForm" onsubmit="return validateForm()" method="post">
|
||||
<input type="text" id='addressName' name="vivek">
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
<input class="form-control" id="contractAddInput" length="34" name="address" placeholder="Enter FLO address" required="" type="text" value="">
|
||||
<h4 class="column__text">saponification</h4>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">magnitude</h4>-->
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/anime.min.js"></script>
|
||||
<script src="js/enquire.min.js"></script>
|
||||
<script src="js/tabsnav.js"></script>
|
||||
<script src="js/demo2.js"></script>
|
||||
|
||||
<script>
|
||||
const form = {
|
||||
addressName: document.getElementById('addressName'),
|
||||
submit: document.getElementById('addressName_submit')
|
||||
};
|
||||
|
||||
form.submit.addEventListener('click', () => {
|
||||
console.log('button press');
|
||||
form['addressName'] = document.getElementById('addressName');
|
||||
|
||||
// Find out if it is a contract name or FLO address
|
||||
console.log(form['addressName'].value);
|
||||
|
||||
if (form['addressName'].value.slice(0,1) == 'F' && form['addressName'].value.length == 34){
|
||||
fetch(`http://localhost:5010/api/v1.0/getparticipantdetails?floaddress=${form["addressName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
contractDetailColumn = document.getElementById('contract_column2');
|
||||
|
||||
// Check which type of address it is
|
||||
if (data['result']=='ok' && data['type']=='participant'){
|
||||
for (i = 0; i < data['participatedContracts'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['participatedContracts'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['participatedContracts'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Token amount:'+ data['participatedContracts'][i]['tokenAmount'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Transaction hash:'+ data['participatedContracts'][i]['transactionHash'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result']=='ok' && data['type']=='contract'){
|
||||
for (i = 0; i < data['contractInfo'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo'][i]['contractType'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo'][i]['expiryTime'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result'] == 'error'){
|
||||
alert("error");
|
||||
}
|
||||
|
||||
//contractText = document.getElementById('contractText');
|
||||
//contractText.innerHTML = data['contractInfo']['contractName']+"<br>"+data['contractInfo']['tokenAmountDeposited'].toFixed(4)+" "+data['contractInfo']['tokenIdentification']+" deposited<br>"+data['contractInfo']['numberOfParticipants']+" participants"+"<br>conditions -> "+data['contractInfo']['exitconditions'][0]+"<br>"+data['contractInfo']['exitconditions'][1];
|
||||
});
|
||||
}
|
||||
else{
|
||||
// Entered data is contract name
|
||||
fetch(`http://localhost:5010/api/v1.0/getsmartContractlist?contractName=${form["addressName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
contractDetailColumn = document.getElementById('contract_column2');
|
||||
if (data['smartContracts'].length == 1){
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][0]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['smartContracts'][0]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Status:'+ data['smartContracts'][0]['status'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['smartContracts'][0]['expiryDate'] +'</h4><br>' ;
|
||||
}
|
||||
else if (data['smartContracts'].length > 1){
|
||||
for (i = 0; i < data['smartContracts'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['smartContracts'][i]['contractAddress'] +'</h4>' ;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
contractText1 = document.getElementById("contractText");
|
||||
contractText1.addEventListener("click", function(){ console.log('Hello'); });
|
||||
</script>
|
||||
<script>
|
||||
fetch('http://localhost:5010/api/v1.0/getsmartContractinfo?name=india-elections-2019&contractAddress=F7osBpjDDV1mSSnMNrLudEQQ3cwDJ2dPR1')
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
contractText = document.getElementById('contractText');
|
||||
contractText.innerHTML = data['contractInfo']['contractName']+"<br>"+data['contractInfo']['tokenAmountDeposited'].toFixed(4)+" "+data['contractInfo']['tokenIdentification']+" deposited<br>"+data['contractInfo']['numberOfParticipants']+" participants"+"<br>conditions -> "+data['contractInfo']['exitconditions'][0]+"<br>"+data['contractInfo']['exitconditions'][1];
|
||||
});
|
||||
|
||||
fetch('http://localhost:5010/api/v1.0/getsmartContractlist')
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
contract_column1 = document.getElementById('contract_column1');
|
||||
for (var i = 0; i < data['smartContracts'].length; i++) {
|
||||
var contractName = data['smartContracts'][i];
|
||||
var lastIndex = contractName.lastIndexOf("-");
|
||||
contractName = contractName.substring(0,lastIndex)
|
||||
contract_column1.innerHTML = contract_column1.innerHTML + '<h4 class="column__text">'+ contractName +'</h4>'
|
||||
console.log(data['smartContracts'])
|
||||
}
|
||||
});
|
||||
|
||||
fetch('http://localhost:5010/api/v1.0/gettokenlist')
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
token_column2 = document.getElementById('token_column2');
|
||||
for (var i = 0; i < data['tokens'].length; i++) {
|
||||
token_column2.innerHTML = token_column2.innerHTML + '<h4 class="column__text">'+ data['tokens'][i] +'</h4>'
|
||||
console.log(data['tokens'])
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
css/component.css
Executable file
126
css/component.css
Executable file
@ -0,0 +1,126 @@
|
||||
.tabsnav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tabsnav--hidden {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tabsnav__item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabsnav__bar {
|
||||
background: currentColor;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabsnav__title {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Vertical Menu */
|
||||
.tabsnav--vertical {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabsnav--vertical .tabsnav__item {
|
||||
flex: none;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabsnav--vertical .tabsnav__title {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Individual menu styles (Basque names) */
|
||||
|
||||
/* Ander */
|
||||
.tabsnav--ander {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.tabsnav--ander .tabsnav__bar {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabsnav--ander .tabsnav__title {
|
||||
color: #1d48f3;
|
||||
}
|
||||
|
||||
.tabsnav--ander .tabsnav__item:not(:last-child) {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
/* Zeru */
|
||||
.tabsnav--zeru {
|
||||
background: #222525;
|
||||
}
|
||||
|
||||
.tabsnav--zeru .tabsnav__item:first-child .tabsnav__bar {
|
||||
background: #161919;
|
||||
}
|
||||
|
||||
.tabsnav--zeru .tabsnav__item:nth-child(2) .tabsnav__bar {
|
||||
background: #222525;
|
||||
}
|
||||
|
||||
.tabsnav--zeru .tabsnav__item:nth-child(3) .tabsnav__bar {
|
||||
background: #2e3131;
|
||||
}
|
||||
|
||||
.tabsnav--zeru .tabsnav__title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Ibai */
|
||||
.tabsnav--ibai {
|
||||
top: 50%;
|
||||
margin-top: -115px;
|
||||
}
|
||||
|
||||
.tabsnav--ibai .tabsnav__item {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.tabsnav--ibai .tabsnav__bar {
|
||||
background: #414a52;
|
||||
}
|
||||
|
||||
.tabsnav--ibai .tabsnav__title {
|
||||
color: #fc0;
|
||||
}
|
||||
|
||||
.tabsnav--ibai .tabsnav__item:not(:last-child) {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
/* don't show a background if on mobile */
|
||||
.tabsnav {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
594
css/demo.css
Normal file
594
css/demo.css
Normal file
@ -0,0 +1,594 @@
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
|
||||
color: #393a3e;
|
||||
background: lavender;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1d48f3;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon {
|
||||
display: block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin: 0 auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
margin: 0 0 0 215px;
|
||||
}
|
||||
|
||||
.content {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 25px 50px;
|
||||
background: url(../img/bg_lavender.jpg) no-repeat top left;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.deco__text {
|
||||
font-size: 0.8em;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
color: #bcb8e8;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.codrops-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.codrops-header__info {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
/*font-style: italic;*/
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.codrops-header__info::after {
|
||||
font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 8em;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0%;
|
||||
right: 52.5%;
|
||||
letter-spacing: -0.05em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.codrops-header__deco {
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
padding: 1em 0;
|
||||
color: #1d48f3;
|
||||
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.codrops-header__title {
|
||||
font-size: 8.5em;
|
||||
line-height: 0.8;
|
||||
margin: 0 -7px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.codrops-header__tagline {
|
||||
width: 50%;
|
||||
margin: 0 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Top Navigation Style */
|
||||
.codrops-links {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.codrops-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.codrops-icon:last-child {
|
||||
margin: 0 0 0 2em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn--back {
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
opacity: 0;
|
||||
color: #1d48f3;
|
||||
}
|
||||
|
||||
.btn--menu {
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
margin: 10px 0 0 6px;
|
||||
}
|
||||
|
||||
.btn--menu-active .icon--menu,
|
||||
.icon--cross {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn--menu-active .icon--cross {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Demo links */
|
||||
.demos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 2em 0 0 auto;
|
||||
}
|
||||
|
||||
.demos__text {
|
||||
font-size: 0.8em;
|
||||
display: block;
|
||||
margin: 0 2em 0 0;
|
||||
color: #bcb8e8;
|
||||
}
|
||||
|
||||
.demo {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 0 0 1.5em;
|
||||
}
|
||||
|
||||
.demo:hover,
|
||||
.demo:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.demo--current {
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo--current::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: -17px 0 0 -16px;
|
||||
border-radius: 50%;
|
||||
background: #1d48f3;
|
||||
}
|
||||
/* Content */
|
||||
.tabscontent {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabscontent__item {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tabscontent__item--current,
|
||||
.tabscontent__item--current ~ .btn--back {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.poster {
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
margin: 10vh auto;
|
||||
padding: 0 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.poster__img {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.poster__caption {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.poster__box {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
border: 10px solid;
|
||||
}
|
||||
|
||||
.poster__number {
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
line-height: 0.7;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: calc(100% - 50px + 5px);
|
||||
color: lavender;
|
||||
}
|
||||
|
||||
.poster__title {
|
||||
font-size: 6em;
|
||||
line-height: 0.7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin: 0 0 -0.25em 0.15em;
|
||||
text-indent: -0.75em;
|
||||
}
|
||||
|
||||
.poster__deco {
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
margin: 0 -1.25em 0 auto;
|
||||
color: #1d48f3;
|
||||
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.column__title {
|
||||
color: #ff764b;
|
||||
}
|
||||
|
||||
.column__text {
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
color: #fff4d7;
|
||||
}
|
||||
|
||||
/* Individual demos */
|
||||
.demo-2 {
|
||||
background: #fff4d7;
|
||||
}
|
||||
|
||||
.demo-2 .view {
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
.demo-2 .content {
|
||||
background-image: url(../img/bg_yellow.jpg);
|
||||
}
|
||||
|
||||
.demo-2 .codrops-header__info::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo-2 .codrops-header__deco,
|
||||
.demo-2 a:hover,
|
||||
.demo-2 a:focus {
|
||||
color: #ff764b;
|
||||
}
|
||||
|
||||
.demo-2 .deco__text,
|
||||
.demo-2 .demos__text {
|
||||
color: #d8c184;
|
||||
}
|
||||
|
||||
.demo-2 .demo--current::before {
|
||||
background: #ff764b;
|
||||
}
|
||||
|
||||
.demo-2 .btn--back {
|
||||
color: #ff764b;
|
||||
}
|
||||
|
||||
.demo-3 {
|
||||
color: #fc0;
|
||||
background: #2a3137;
|
||||
}
|
||||
|
||||
.demo-3 a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo-3 a:hover,
|
||||
.demo-3 a:focus,
|
||||
.demo-3 .btn--menu:hover {
|
||||
color: #fc0;
|
||||
}
|
||||
|
||||
.demo-3 .view {
|
||||
margin: 0;
|
||||
padding: 5vw 5vw calc(10vw + 1em);
|
||||
}
|
||||
|
||||
.demo-3 .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-3 .codrops-header {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
height: calc(100% + 3.25em);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.demo-3 .codrops-header__title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 7em;
|
||||
line-height: 0.6;
|
||||
margin: auto 0 0 -40px;
|
||||
padding: 0.2em 0 0 0;
|
||||
}
|
||||
|
||||
.demo-3 .codrops-header__tagline {
|
||||
font-size: 1.5em;
|
||||
margin: 0.25em 0 0 -0.3em;
|
||||
}
|
||||
|
||||
.demo-3 .btn--menu {
|
||||
font-size: 1em;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin: 0 -0.75em 1em;
|
||||
color: #fbf9fa;
|
||||
}
|
||||
|
||||
.demo-3 .content {
|
||||
background: url(../img/img4.jpg) no-repeat 50% 20%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.demo-3 .codrops-links {
|
||||
align-self: flex-end;
|
||||
margin: 1.5em 1.5em auto;
|
||||
}
|
||||
|
||||
.demo-3 .demos {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.demo-3 .demo:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo-3 .demo.demo--current {
|
||||
color: #2a3137;
|
||||
}
|
||||
|
||||
.demo-3 .demo--current::before {
|
||||
background: #fc0;
|
||||
}
|
||||
|
||||
.demo-3 .btn--back {
|
||||
color: #6c7d8c;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.demo-3 .btn--back .icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.demo-3 .codrops-header__deco {
|
||||
font-size: 2.25em;
|
||||
position: absolute;
|
||||
right: -0.575em;
|
||||
bottom: 2em;
|
||||
color: #fc0;
|
||||
}
|
||||
|
||||
.demo-3 .codrops-header::after {
|
||||
content: '03';
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -40px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
width: 40vw;
|
||||
min-width: 300px;
|
||||
height: calc(90vh - 120px);
|
||||
margin-top: 40px;
|
||||
background-size: cover;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
|
||||
.box__title {
|
||||
font-size: 6em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -1em;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabscontent__item:first-child .box {
|
||||
background-image: url(../img/portrait1.jpg);
|
||||
}
|
||||
|
||||
.tabscontent__item:nth-child(2) .box {
|
||||
background-image: url(../img/portrait2.jpg);
|
||||
}
|
||||
|
||||
.tabscontent__item:nth-child(3) .box {
|
||||
background-image: url(../img/portrait3.jpg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.view {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
min-height: calc(100vh - 69px);
|
||||
margin: 0;
|
||||
}
|
||||
.demo-3 .view {
|
||||
height: calc(100vh - 69px);
|
||||
}
|
||||
.content {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
.codrops-header__info {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
.deco__text,
|
||||
.demos__text {
|
||||
display: none;
|
||||
}
|
||||
.codrops-links {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.codrops-icon {
|
||||
font-size: 1em;
|
||||
}
|
||||
.codrops-header__deco {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.codrops-header__title {
|
||||
font-size: 5.5em;
|
||||
margin: 0 -4px;
|
||||
}
|
||||
.codrops-header__tagline {
|
||||
width: auto;
|
||||
}
|
||||
.demos {
|
||||
align-items: flex-start;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.codrops-header__info::after {
|
||||
font-size: 7em;
|
||||
}
|
||||
.poster__box {
|
||||
top: -20px;
|
||||
left: 30px;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
border: 7px solid;
|
||||
}
|
||||
.poster__deco {
|
||||
font-size: 1em;
|
||||
}
|
||||
.poster__number {
|
||||
font-size: 2em;
|
||||
left: calc(100% - 90px);
|
||||
}
|
||||
.poster__title {
|
||||
font-size: 3em;
|
||||
}
|
||||
.btn--back {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.btn--menu {
|
||||
display: block;
|
||||
}
|
||||
.demo-2 .btn--menu {
|
||||
position: relative;
|
||||
margin: 0 2em 0 0;
|
||||
}
|
||||
.demo-2 .tabscontent__item {
|
||||
font-size: 0.575em;
|
||||
flex-direction: column;
|
||||
}
|
||||
.column__title {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
.demo-3 .codrops-header__title {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
}
|
||||
.demo-3 .codrops-header__tagline {
|
||||
font-size: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.demo-3 .codrops-header::after {
|
||||
font-size: 3em;
|
||||
left: 10px;
|
||||
}
|
||||
.demo-3 .codrops-header__deco {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
1
css/normalize.css
vendored
Normal file
1
css/normalize.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
|
||||
781
d3_realui7.html
Normal file
781
d3_realui7.html
Normal file
File diff suppressed because one or more lines are too long
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/.DS_Store
vendored
Normal file
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
img/bg_lavender.jpg
Normal file
BIN
img/bg_lavender.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
img/bg_yellow.jpg
Normal file
BIN
img/bg_yellow.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
img/img1.jpg
Normal file
BIN
img/img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
img/img2.jpg
Normal file
BIN
img/img2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
img/img3.jpg
Normal file
BIN
img/img3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
img/img4.jpg
Normal file
BIN
img/img4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
img/portrait1.jpg
Normal file
BIN
img/portrait1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
img/portrait2.jpg
Normal file
BIN
img/portrait2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/portrait3.jpg
Normal file
BIN
img/portrait3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
133
index.html
Executable file
133
index.html
Executable file
@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Expanding Bar Menus | Demo 1 | Codrops</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<script>document.documentElement.className = 'js';</script>
|
||||
</head>
|
||||
<body class="demo-1">
|
||||
<svg class="hidden">
|
||||
<symbol id="icon-arrow" viewBox="0 0 24 24">
|
||||
<title>arrow</title>
|
||||
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
|
||||
</symbol>
|
||||
<symbol id="icon-drop" viewBox="0 0 24 24">
|
||||
<title>drop</title>
|
||||
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-caret" viewBox="0 0 24 24">
|
||||
<title>caret</title>
|
||||
<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-menu" viewBox="0 0 24 24">
|
||||
<title>menu</title>
|
||||
<path d="M23.8,6H0.1V3h23.7V6z M23.8,10.5H0.1v3h23.7V10.5z M14.2,18h-14v3h14V18z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cross" viewBox="0 0 24 24">
|
||||
<title>cross</title>
|
||||
<path d="M14.1,12l7.3,7.3l-2.1,2.1L12,14.1l-7.3,7.3l-2.1-2.1L9.9,12L2.6,4.7l2.1-2.1L12,9.9l7.3-7.3l2.1,2.1L14.1,12z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main class="view">
|
||||
<div class="content">
|
||||
<div class="deco">
|
||||
<p class="deco__text">elementum recolligo huic commodo locus mihi vestri vox</p>
|
||||
</div>
|
||||
<header class="codrops-header">
|
||||
<div class="codrops-links">
|
||||
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
|
||||
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
|
||||
</div>
|
||||
<p class="codrops-header__info">India Election 2019<br>$1800 deposited<br>20 participants<br>conditions -> NAMO=WIN<br>NAMO=LOSE</p>
|
||||
<h1 class="codrops-header__title">wild</h1>
|
||||
<p class="codrops-header__tagline">expanding bar menus</p>
|
||||
<nav class="demos">
|
||||
<span class="demos__text">cors tuum magicus urn, aeternus canum fidelis, lapis et caro per sempre, nunquam intervalum</span>
|
||||
<a class="demo demo--current" href="index.html">1</a>
|
||||
<a class="demo" href="index2.html">2</a>
|
||||
<a class="demo" href="index3.html">3</a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<button class="btn btn--menu">
|
||||
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
|
||||
</button>
|
||||
<nav class="tabsnav tabsnav--vertical tabsnav--ander">
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Starters</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Test/Play</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Participate</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Track</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Obtain Tokens</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Comittee</h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tabscontent">
|
||||
<div class="tabscontent__item">
|
||||
<figure class="poster">
|
||||
<img class="poster__img" src="img/img1.jpg" alt="Poster 1"/>
|
||||
<figcaption class="poster__caption">
|
||||
<h2 class="poster__title">wild<br/>corn</h2>
|
||||
<p class="poster__deco">nothing lost</p>
|
||||
<div class="poster__box"></div>
|
||||
<span class="poster__number">01</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<figure class="poster">
|
||||
<img class="poster__img" src="img/img1.jpg" alt="Poster 1"/>
|
||||
<figcaption class="poster__caption">
|
||||
<h2 class="poster__title">blue<br/>gun</h2>
|
||||
<p class="poster__deco">fingerpaint</p>
|
||||
<div class="poster__box"></div>
|
||||
<span class="poster__number">02</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<figure class="poster">
|
||||
<img class="poster__img" src="img/img1.jpg" alt="Poster 1"/>
|
||||
<figcaption class="poster__caption">
|
||||
<h2 class="poster__title">home<br/>maze</h2>
|
||||
<p class="poster__deco">binary sun</p>
|
||||
<div class="poster__box"></div>
|
||||
<span class="poster__number">03</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/anime.min.js"></script>
|
||||
<script src="js/enquire.min.js"></script>
|
||||
<script src="js/tabsnav.js"></script>
|
||||
<script src="js/demo1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
425
index2.html
Normal file
425
index2.html
Normal file
@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ranchi Mall FLO Explorer</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="author" content="Ranchi Mall" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
|
||||
|
||||
/*body {
|
||||
position:relative;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 1.05em;
|
||||
margin: 40px;
|
||||
text-align:justify;
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, tr, th, td {
|
||||
border: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4CAF50; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.activeButton {
|
||||
color: black;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
|
||||
.firstColumn {
|
||||
position: absolute;;
|
||||
left:200px;
|
||||
}
|
||||
|
||||
.secondColumn {
|
||||
position: absolute;
|
||||
left:450px;
|
||||
top:194px;
|
||||
}
|
||||
|
||||
.dispBalTable {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>document.documentElement.className = 'js';</script>
|
||||
</head>
|
||||
<body class="demo-2">
|
||||
<svg class="hidden">
|
||||
<symbol id="icon-arrow" viewBox="0 0 24 24">
|
||||
<title>arrow</title>
|
||||
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
|
||||
</symbol>
|
||||
<symbol id="icon-drop" viewBox="0 0 24 24">
|
||||
<title>drop</title>
|
||||
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-caret" viewBox="0 0 24 24">
|
||||
<title>caret</title>
|
||||
<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-menu" viewBox="0 0 24 24">
|
||||
<title>menu</title>
|
||||
<path d="M23.8,6H0.1V3h23.7V6z M23.8,10.5H0.1v3h23.7V10.5z M14.2,18h-14v3h14V18z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cross" viewBox="0 0 24 24">
|
||||
<title>cross</title>
|
||||
<path d="M14.1,12l7.3,7.3l-2.1,2.1L12,14.1l-7.3,7.3l-2.1-2.1L9.9,12L2.6,4.7l2.1-2.1L12,9.9l7.3-7.3l2.1,2.1L14.1,12z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main class="view">
|
||||
<div class="content">
|
||||
<div class="deco">
|
||||
<!--<p class="deco__text">elementum recolligo huic commodo locus mihi vestri vox</p>-->
|
||||
</div>
|
||||
<header class="codrops-header">
|
||||
<div class="codrops-links">
|
||||
<button class="btn btn--menu">
|
||||
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
|
||||
</button>
|
||||
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
|
||||
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
|
||||
</div>
|
||||
<p id="contractText" class="codrops-header__info"></p>
|
||||
<nav class="demos">
|
||||
<a class="demo demo--current" href="index2.html">2</a>
|
||||
<a class="demo" href="index3.html">View All</a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<nav class="tabsnav tabsnav--vertical tabsnav--zeru">
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Play</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Participate</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Track tokens</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Track Contracts</h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tabscontent">
|
||||
<div class="tabscontent__item">
|
||||
<div class="column">
|
||||
<h3 class="column__title">03/09/2017</h3>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">magnitude</h4>
|
||||
<h4 class="column__text">saponification</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3 class="column__title">07/23/2017</h3>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">neutrophil</h4>
|
||||
<h4 class="column__text">energetic</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- This is where the code for webwallet will be up -->
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- Token Tracking -->
|
||||
<div id='token_column1' class="column">
|
||||
<h3 class="column__title">Active Tokens</h3>
|
||||
<!--<h4 class="column__text">energetic</h4>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">neutrophil</h4>-->
|
||||
</div>
|
||||
<div id='token_column2' class="column">
|
||||
<h3 class="column__title">Enter Address/Token name</h3>
|
||||
<div>
|
||||
<input type="text" id='tokenName' name="tokenName">
|
||||
<button type="submit" id='tokenName_submit'>Submit</button>
|
||||
</div>
|
||||
<!--<h4 class="column__text">saponification</h4>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">magnitude</h4>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<!-- Smart Contract Tracking -->
|
||||
<div id='contract_column1' class="column">
|
||||
<h3 class="column__title">Top Contracts</h3>
|
||||
<!--<h4 class="column__text">energetic</h4>
|
||||
<h4 class="column__text">hematocrit</h4>
|
||||
<h4 class="column__text">gaussian</h4>
|
||||
<h4 class="column__text">amphiphilic</h4>
|
||||
<h4 class="column__text">neutrophil</h4>-->
|
||||
</div>
|
||||
<div id='contract_column2' class="column">
|
||||
<h3 class="column__title">Enter Address/Contract name</h3>
|
||||
<div>
|
||||
<input type="text" id='addressName' name="addressName">
|
||||
<button type="submit" id='addressName_submit'>Submit</button>
|
||||
</div>
|
||||
|
||||
<!--<form name="myForm" onsubmit="return validateForm()" method="post">
|
||||
<input type="text" id='addressName' name="vivek">
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
<input class="form-control" id="contractAddInput" length="34" name="address" placeholder="Enter FLO address" required="" type="text" value="">
|
||||
<h4 class="column__text">saponification</h4>
|
||||
<h4 class="column__text">velocity</h4>
|
||||
<h4 class="column__text">ionization</h4>
|
||||
<h4 class="column__text">geocentric</h4>
|
||||
<h4 class="column__text">magnitude</h4>-->
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/anime.min.js"></script>
|
||||
<script src="js/enquire.min.js"></script>
|
||||
<script src="js/tabsnav.js"></script>
|
||||
<script src="js/demo2.js"></script>
|
||||
|
||||
<script>
|
||||
const contractForm = {
|
||||
addressName: document.getElementById('addressName'),
|
||||
submit: document.getElementById('addressName_submit')
|
||||
};
|
||||
|
||||
contractForm.submit.addEventListener('click', () => {
|
||||
console.log('button press');
|
||||
contractForm['addressName'] = document.getElementById('addressName');
|
||||
|
||||
// Find out if it is a contract name or FLO address
|
||||
console.log(contractForm['addressName'].value);
|
||||
|
||||
if (contractForm['addressName'].value.slice(0,1) == 'F' && contractForm['addressName'].value.length == 34){
|
||||
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getparticipantdetails?floaddress=${contractForm["addressName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
contractDetailColumn = document.getElementById('contract_column2');
|
||||
|
||||
// Check which type of address it is
|
||||
if (data['result']=='ok' && data['type']=='participant'){
|
||||
for (i = 0; i < data['participatedContracts'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['participatedContracts'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['participatedContracts'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Token amount:'+ data['participatedContracts'][i]['tokenAmount'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Transaction hash:'+ data['participatedContracts'][i]['transactionHash'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result']=='ok' && data['type']=='contract'){
|
||||
for (i = 0; i < data['contractInfo'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo'][i]['contractType'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo'][i]['expiryTime'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result'] == 'error'){
|
||||
alert("error");
|
||||
}
|
||||
|
||||
//contractText = document.getElementById('contractText');
|
||||
//contractText.innerHTML = data['contractInfo']['contractName']+"<br>"+data['contractInfo']['tokenAmountDeposited'].toFixed(4)+" "+data['contractInfo']['tokenIdentification']+" deposited<br>"+data['contractInfo']['numberOfParticipants']+" participants"+"<br>conditions -> "+data['contractInfo']['userChoice'][0]+"<br>"+data['contractInfo']['userChoice'][1];
|
||||
});
|
||||
}
|
||||
else{
|
||||
// Entered data is contract name
|
||||
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getsmartContractlist?contractName=${contractForm["addressName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
contractDetailColumn = document.getElementById('contract_column2');
|
||||
if (data['smartContracts'].length == 1){
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][0]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['smartContracts'][0]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Status:'+ data['smartContracts'][0]['status'] +'</h4>' ;
|
||||
if (data['smartContracts'][0]['expiryDate']){
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['smartContracts'][0]['expiryDate'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['smartContracts'].length > 1){
|
||||
for (i = 0; i < data['smartContracts'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['smartContracts'][i]['contractAddress'] +'</h4>' ;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const tokenForm = {
|
||||
tokenName: document.getElementById('tokenName'),
|
||||
submit: document.getElementById('tokenName_submit')
|
||||
};
|
||||
|
||||
tokenForm.submit.addEventListener('click', () => {
|
||||
console.log('button press');
|
||||
tokenForm['tokenName'] = document.getElementById('tokenName');
|
||||
|
||||
// Find out if it is a contract name or FLO address
|
||||
console.log(tokenForm['tokenName'].value);
|
||||
|
||||
if (tokenForm['tokenName'].value.slice(0,1) == 'F' && tokenForm['tokenName'].value.length == 34){
|
||||
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?floaddress=${tokenForm["tokenName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
contractDetailColumn = document.getElementById('contract_column2');
|
||||
|
||||
// Check which type of address it is
|
||||
if (data['result']=='ok' && data['type']=='participant'){
|
||||
for (i = 0; i < data['participatedContracts'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['participatedContracts'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['participatedContracts'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Token amount:'+ data['participatedContracts'][i]['tokenAmount'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Transaction hash:'+ data['participatedContracts'][i]['transactionHash'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result']=='ok' && data['type']=='contract'){
|
||||
for (i = 0; i < data['contractInfo'].length; i++) {
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo'][i]['contractName'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo'][i]['contractAddress'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo'][i]['contractType'] +'</h4>' ;
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo'][i]['expiryTime'] +'</h4><br>' ;
|
||||
}
|
||||
}
|
||||
else if (data['result'] == 'error'){
|
||||
alert("error");
|
||||
}
|
||||
|
||||
//contractText = document.getElementById('contractText');
|
||||
//contractText.innerHTML = data['contractInfo']['contractName']+"<br>"+data['contractInfo']['tokenAmountDeposited'].toFixed(4)+" "+data['contractInfo']['tokenIdentification']+" deposited<br>"+data['contractInfo']['numberOfParticipants']+" participants"+"<br>conditions -> "+data['contractInfo']['userChoice'][0]+"<br>"+data['contractInfo']['userChoice'][1];
|
||||
});
|
||||
}
|
||||
else{
|
||||
// Entered data is contract name
|
||||
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?token=${tokenForm["tokenName"].value}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
tokenDetailColumn = document.getElementById('token_column2');
|
||||
|
||||
tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Token name: '+ data['token'] +'</h4>' ;
|
||||
tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Incorp address: '+ data['incorporationAddress'] +'</h4>' ;
|
||||
tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Active addresses:'+ data['activeAddress_no'] +'</h4>' ;
|
||||
tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Transaction hash:'+ data['transactionHash'] +'</h4>' ;
|
||||
if (data['smartContracts'][0]['expiryDate']){
|
||||
contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['smartContracts'][0]['expiryDate'] +'</h4><br>' ;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
contractText1 = document.getElementById("contractText");
|
||||
contractText1.addEventListener("click", function(){ console.log('Hello'); });
|
||||
</script>
|
||||
<script>
|
||||
var topSmartContract = {};
|
||||
topSmartContract = getTopSmartContract();
|
||||
getSmartContractInfo(topSmartContract.name,topSmartContract.floAddress);
|
||||
|
||||
|
||||
function getTopSmartContract(){
|
||||
var topSmartContract = {};
|
||||
topSmartContract.name = "india-elections-2019";
|
||||
topSmartContract.floAddress = "F7osBpjDDV1mSSnMNrLudEQQ3cwDJ2dPR1";
|
||||
return topSmartContract;
|
||||
}
|
||||
|
||||
function getSmartContractInfo(name,contractAddress){
|
||||
fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getsmartContractinfo?name=${name}&contractAddress=${contractAddress}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
showSmartContractInfo(data);
|
||||
});
|
||||
}
|
||||
|
||||
function showSmartContractInfo(data){
|
||||
contractText = document.getElementById('contractText');
|
||||
contractText.innerHTML = data['contractInfo']['contractName']+"<br>"+data['contractInfo']['tokenAmountDeposited'].toFixed(4)+" "+data['contractInfo']['tokenIdentification']+" deposited<br>"+data['contractInfo']['numberOfParticipants']+" participants"+"<br>conditions -> "+data['contractInfo']['userChoice'][0]+"<br>"+data['contractInfo']['userChoice'][1];
|
||||
|
||||
}
|
||||
|
||||
function getsmartContractList(){
|
||||
fetch('https://ranchimallflo.duckdns.org/api/v1.0/getsmartContractlist')
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
contract_column1 = document.getElementById('contract_column1');
|
||||
for (var i = 0; i < data['smartContracts'].length; i++) {
|
||||
var contractName = data['smartContracts'][i]['contractName'];
|
||||
contract_column1.innerHTML = contract_column1.innerHTML + '<h4 class="column__text">'+ contractName +'</h4>'
|
||||
console.log(data['smartContracts'])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getTokenList(){
|
||||
fetch('https://ranchimallflo.duckdns.org/api/v1.0/gettokenlist')
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
token_column1 = document.getElementById('token_column1');
|
||||
for (var i = 0; i < data['tokens'].length; i++) {
|
||||
token_column1.innerHTML = token_column1.innerHTML + '<h4 class="column__text">'+ data['tokens'][i] +'</h4>'
|
||||
console.log(data['tokens'])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var es = new EventSource('https://ranchimallflo.duckdns.org/sse');
|
||||
es.onmessage = function (event) {
|
||||
console.log(event.data);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
99
index3.html
Normal file
99
index3.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Expanding Bar Menus | Demo 3 | Codrops</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<script>document.documentElement.className = 'js';</script>
|
||||
</head>
|
||||
<body class="demo-3">
|
||||
<svg class="hidden">
|
||||
<symbol id="icon-arrow" viewBox="0 0 24 24">
|
||||
<title>arrow</title>
|
||||
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
|
||||
</symbol>
|
||||
<symbol id="icon-drop" viewBox="0 0 24 24">
|
||||
<title>drop</title>
|
||||
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-caret" viewBox="0 0 24 24">
|
||||
<title>caret</title>
|
||||
<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-menu" viewBox="0 0 24 24">
|
||||
<title>menu</title>
|
||||
<path d="M23.7,3H0V0h23.7V3z M23.7,7.5H0v3h23.7V7.5z M18.9,15h-14v3h14V15z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cross" viewBox="0 0 24 24">
|
||||
<title>cross</title>
|
||||
<path d="M14.1,12l7.3,7.3l-2.1,2.1L12,14.1l-7.3,7.3l-2.1-2.1L9.9,12L2.6,4.7l2.1-2.1L12,9.9l7.3-7.3l2.1,2.1L14.1,12z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main class="view">
|
||||
<div class="content">
|
||||
<header class="codrops-header">
|
||||
<div class="codrops-links">
|
||||
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
|
||||
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
|
||||
</div>
|
||||
<h1 class="codrops-header__title">400mm</h1>
|
||||
<span class="codrops-header__deco">shutter angle</span>
|
||||
<p class="codrops-header__tagline">expanding bar menus</p>
|
||||
<nav class="demos">
|
||||
<a class="demo" href="index.html">1</a>
|
||||
<a class="demo" href="index2.html">2</a>
|
||||
<a class="demo demo--current" href="index3.html">3</a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<button class="btn btn--menu">
|
||||
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
|
||||
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
|
||||
</button>
|
||||
<nav class="tabsnav tabsnav--ibai tabsnav--hidden tabsnav--hidden-default">
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Serendipity</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Telekinesis</h3>
|
||||
</div>
|
||||
<div class="tabsnav__item">
|
||||
<div class="tabsnav__bar"></div>
|
||||
<h3 class="tabsnav__title">Footalicious</h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tabscontent">
|
||||
<div class="tabscontent__item">
|
||||
<div class="box">
|
||||
<h3 class="box__title">Scenic</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<div class="box">
|
||||
<h3 class="box__title">Pano</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabscontent__item">
|
||||
<div class="box">
|
||||
<h3 class="box__title">Depth</h3>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/anime.min.js"></script>
|
||||
<script src="js/enquire.min.js"></script>
|
||||
<script src="js/tabsnav.js"></script>
|
||||
<script src="js/demo3.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
js/.DS_Store
vendored
Normal file
BIN
js/.DS_Store
vendored
Normal file
Binary file not shown.
27
js/anime.min.js
vendored
Normal file
27
js/anime.min.js
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
/*
|
||||
2017 Julian Garnier
|
||||
Released under the MIT license
|
||||
*/
|
||||
var $jscomp$this=this;
|
||||
(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})}
|
||||
function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0>
|
||||
c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1<a.indexOf("translate"))return"px";
|
||||
if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function G(a,b){return g.fnc(a)?a(b.target,b.id,b.total):a}function B(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function H(a,b){if(g.dom(a)&&E(U,b))return"transform";if(g.dom(a)&&(a.getAttribute(b)||g.svg(a)&&a[b]))return"attribute";if(g.dom(a)&&"transform"!==b&&B(a,b))return"css";if(null!=a[b])return"object"}function V(a,b){var c=T(b),c=-1<b.indexOf("scale")?
|
||||
1:0+c;a=a.style.transform;if(!a)return c;for(var d=[],e=[],k=[],h=/(\w+)\((.+?)\)/g;d=h.exec(a);)e.push(d[1]),k.push(d[2]);a=k.filter(function(a,c){return e[c]===b});return a.length?a[0]:c}function I(a,b){switch(H(a,b)){case "transform":return V(a,b);case "css":return B(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0}function J(a,b){var c=/^(\*=|\+=|-=)/.exec(a);if(!c)return a;b=parseFloat(b);a=parseFloat(a.replace(c[0],""));switch(c[0][0]){case "+":return b+a;case "-":return b-a;case "*":return b*
|
||||
a}}function C(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function W(a,b){function c(c){c=void 0===c?0:c;return a.el.getPointAtLength(1<=b+c?b+c:0)}var d=c(),e=c(-1),k=c(1);switch(a.property){case "x":return d.x;case "y":return d.y;case "angle":return 180*Math.atan2(k.y-e.y,k.x-e.x)/Math.PI}}function K(a,b){var c=/-?\d*\.?\d+/g;a=C(a)?a.totalLength:a;if(g.col(a))b=g.rgb(a)?a:g.hex(a)?R(a):g.hsl(a)?S(a):void 0;else{var d=w(a);a=d?a.substr(0,a.length-d.length):a;b=b?a+b:a}b+="";return{original:b,
|
||||
numbers:b.match(c)?b.match(c).map(Number):[0],strings:b.split(c)}}function X(a,b){return b.reduce(function(b,d,e){return b+a[e-1]+d})}function L(a){return(a?r(g.arr(a)?a.map(v):v(a)):[]).filter(function(a,c,d){return d.indexOf(a)===c})}function Y(a){var b=L(a);return b.map(function(a,d){return{target:a,id:d,total:b.length}})}function Z(a,b){var c=z(b);if(g.arr(a)){var d=a.length;2!==d||g.obj(a[0])?g.fnc(b.duration)||(c.duration=b.duration/d):a={value:a}}return v(a).map(function(a,c){c=c?0:b.delay;
|
||||
a=g.obj(a)&&!C(a)?a:{value:a};g.und(a.delay)&&(a.delay=c);return a}).map(function(a){return A(a,c)})}function aa(a,b){var c={},d;for(d in a){var e=G(a[d],b);g.arr(e)&&(e=e.map(function(a){return G(a,b)}),1===e.length&&(e=e[0]));c[d]=e}c.duration=parseFloat(c.duration);c.delay=parseFloat(c.delay);return c}function ba(a){return g.arr(a)?x.apply(this,a):M[a]}function ca(a,b){var c;return a.tweens.map(function(d){d=aa(d,b);var e=d.value,k=I(b.target,a.name),h=c?c.to.original:k,h=g.arr(e)?e[0]:h,n=J(g.arr(e)?
|
||||
e[1]:e,h),k=w(n)||w(h)||w(k);d.isPath=C(e);d.from=K(h,k);d.to=K(n,k);d.start=c?c.end:a.offset;d.end=d.start+d.delay+d.duration;d.easing=ba(d.easing);d.elasticity=(1E3-Math.min(Math.max(d.elasticity,1),999))/1E3;g.col(d.from.original)&&(d.round=1);return c=d})}function da(a,b){return r(a.map(function(a){return b.map(function(b){var c=H(a.target,b.name);if(c){var d=ca(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}
|
||||
function N(a,b,c){var d="delay"===a?Math.min:Math.max;return b.length?d.apply(Math,b.map(function(b){return b[a]})):c[a]}function ea(a){var b=F(fa,a),c=F(ga,a),d=Y(a.targets),e=[],g=A(b,c),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:Z(a[h],c)});a=da(d,e);return A(b,{animatables:d,animations:a,duration:N("duration",a,c),delay:N("delay",a,c)})}function m(a){function b(){return window.Promise&&new Promise(function(a){return P=a})}function c(a){return f.reversed?
|
||||
f.duration-a:a}function d(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,n=g.tweens;e.tween=n.filter(function(b){return a<b.end})[0]||n[n.length-1];e.isPath$0=e.tween.isPath;e.round=e.tween.round;e.eased=e.tween.easing(Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration,e.tween.elasticity);n=X(e.tween.to.numbers.map(function(a){return function(b,c){c=a.isPath$0?0:a.tween.from.numbers[c];b=c+a.eased*(b-c);a.isPath$0&&(b=W(a.tween.value,
|
||||
b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);ha[g.type](h.target,g.property,n,c,h.id);g.currentValue=n;b++;e={isPath$0:e.isPath$0,tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var k in c)D||(D=B(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[k].target.style[D]=c[k].join(" ");f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,
|
||||
k=f.offset,m=f.delay,O=f.currentTime,p=f.reversed,q=c(a),q=Math.min(Math.max(q,0),h);q>k&&q<h?(d(q),!f.began&&q>=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h<a.length;h++)a[h].seek(q);e("update")}a=void 0===a?{}:a;var n,t,l=0,P=null,Q=b(),f=ea(a);f.reset=function(){var a=
|
||||
f.direction,b=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===b?2:b};f.tick=function(a){n=a;t||(t=n);h((l+n-t)*m.speed)};f.seek=function(a){h(c(a))};f.pause=function(){var a=p.indexOf(f);-1<a&&p.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=!1,t=0,l=f.completed?0:c(f.currentTime),p.push(f),y||ia())};f.reverse=function(){f.reversed=!f.reversed;t=0;l=c(f.currentTime)};f.restart=function(){f.pause();
|
||||
f.reset();f.play()};f.finished=Q;f.reset();f.autoplay&&f.play();return f}var fa={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},ga={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},U="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),D,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof
|
||||
SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||g.rgb(a)||g.hsl(a)}},x=function(){function a(a,c,d){return(((1-3*d+3*c)*a+(3*d-6*c))*a+3*c)*a}return function(b,c,d,e){if(0<=b&&1>=b&&
|
||||
0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0<n?k=m:l=m;while(1e-7<Math.abs(n)&&
|
||||
10>++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],
|
||||
[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]=
|
||||
c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;e<c;)p[e]&&p[e].tick(b),e++;a()}else cancelAnimationFrame(y),y=0}return a}();m.version="2.0.1";m.speed=1;m.running=p;m.remove=function(a){a=L(a);for(var b=p.length-1;0<=b;b--)for(var c=p[b],d=c.animations,e=d.length-1;0<=e;e--)E(a,
|
||||
d[e].animatable.target)&&(d.splice(e,1),d.length||c.pause())};m.getValue=I;m.path=function(a,b){var c=g.str(a)?u(a)[0]:a,d=b||100;return function(a){return{el:c,property:a,totalLength:c.getTotalLength()*(d/100)}}};m.setDashoffset=function(a){var b=a.getTotalLength();a.setAttribute("stroke-dasharray",b);return b};m.bezier=x;m.easings=M;m.timeline=function(a){var b=m(a);b.duration=0;b.children=[];b.add=function(a){v(a).forEach(function(a){var c=a.offset,d=b.duration;a.autoplay=!1;a.offset=g.und(c)?
|
||||
d:J(c,d);a=m(a);a.duration>d&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m});
|
||||
157
js/demo1.js
Normal file
157
js/demo1.js
Normal file
@ -0,0 +1,157 @@
|
||||
(function() {
|
||||
// Initialize the TabsNav.
|
||||
var tnav = new TabsNav(document.querySelector('nav.tabsnav'), {
|
||||
movable: 'all',
|
||||
extramovable: '.content',
|
||||
layout: 'vertical',
|
||||
animeduration: 700,
|
||||
animeeasing: 'easeInOutCubic',
|
||||
animedelay: 100,
|
||||
onOpenBarsUpdate: openTabCallback,
|
||||
onOpenTab: function() {
|
||||
// Show the back button after the tab is open.
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 800,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [0,1],
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 300,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
|
||||
// The content items and the back control.
|
||||
contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')),
|
||||
backCtrl = document.querySelector('.tabscontent > button.btn--back'),
|
||||
// menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs)
|
||||
menuCtrl = document.querySelector('button.btn--menu'),
|
||||
isContentShown = false, current;
|
||||
|
||||
function openTabCallback(anim, idx, tab) {
|
||||
if( anim.progress > 60 && !isContentShown ) {
|
||||
isContentShown = true;
|
||||
current = idx;
|
||||
|
||||
var contentItem = contentItems[idx],
|
||||
content = {
|
||||
img: contentItem.querySelector('img.poster__img'),
|
||||
title: contentItem.querySelector('.poster__title'),
|
||||
deco: contentItem.querySelector('.poster__deco'),
|
||||
box: contentItem.querySelector('.poster__box'),
|
||||
number: contentItem.querySelector('.poster__number')
|
||||
};
|
||||
|
||||
// Hide the content elements.
|
||||
content.img.style.opacity = content.title.style.opacity = content.deco.style.opacity = content.box.style.opacity = content.number.style.opacity = 0;
|
||||
// Show content item.
|
||||
contentItem.style.opacity = 1;
|
||||
contentItem.classList.add('tabscontent__item--current');
|
||||
|
||||
// Animate content elements in.
|
||||
anime.remove([content.img, content.title, content.box, content.number, content.deco]);
|
||||
anime({
|
||||
targets: [content.img, content.title, content.box, content.number, content.deco],
|
||||
easing: 'easeOutExpo',
|
||||
duration: function(t,i) {
|
||||
return 600 + i*100;
|
||||
},
|
||||
scaleX: function(t,i) {
|
||||
return i === 0 ? [0,1] : 1;
|
||||
},
|
||||
translateX: function(t,i) {
|
||||
return [-80-i*150,0];
|
||||
},
|
||||
rotate: function(t,i) {
|
||||
return i === 2 ? [-40,0] : 0;
|
||||
},
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 300,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
backCtrl.addEventListener('click', closeTabs);
|
||||
|
||||
function closeTabs() {
|
||||
if( !tnav.isOpen ) return;
|
||||
|
||||
var contentItem = contentItems[current],
|
||||
content = {
|
||||
img: contentItem.querySelector('img.poster__img'),
|
||||
title: contentItem.querySelector('.poster__title'),
|
||||
deco: contentItem.querySelector('.poster__deco'),
|
||||
box: contentItem.querySelector('.poster__box'),
|
||||
number: contentItem.querySelector('.poster__number')
|
||||
};
|
||||
|
||||
// Hide the content elements.
|
||||
anime.remove([content.img, content.title, content.box, content.number, content.deco]);
|
||||
// Animate content elements out.
|
||||
anime({
|
||||
targets: [content.deco, content.number, content.box, content.title, content.img],
|
||||
easing: 'easeInOutCubic',
|
||||
duration: function(t,i) {
|
||||
return 600 + i*100;
|
||||
},
|
||||
delay: function(t,i,c) {
|
||||
return (c-i-1)*35;
|
||||
},
|
||||
translateX: function(t,i) {
|
||||
return [0,-200-i*150];
|
||||
},
|
||||
rotate: function(t,i) {
|
||||
return i === 2 ? [0,-40] : 0;
|
||||
},
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 450
|
||||
},
|
||||
update: function(anim) {
|
||||
if( anim.progress > 20 && isContentShown ) {
|
||||
isContentShown = false;
|
||||
// Close tab.
|
||||
tnav.close();
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
// Hide content item.
|
||||
contentItem.style.opacity = 0;
|
||||
contentItem.classList.remove('tabscontent__item--current');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide back ctrl
|
||||
anime.remove(backCtrl);
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 800,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [1,0],
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 200,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menuCtrl.addEventListener('click', toggleTabs);
|
||||
|
||||
function toggleTabs() {
|
||||
var state = tnav.toggleVisibility();
|
||||
if( state === 0 ) {
|
||||
menuCtrl.classList.remove('btn--menu-active');
|
||||
}
|
||||
else if( state === 1 ) {
|
||||
menuCtrl.classList.add('btn--menu-active');
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
133
js/demo2.js
Normal file
133
js/demo2.js
Normal file
@ -0,0 +1,133 @@
|
||||
(function() {
|
||||
var tnav = new TabsNav(document.querySelector('nav.tabsnav'), {
|
||||
movable: 'all',
|
||||
layout: 'vertical',
|
||||
animeduration: 1000,
|
||||
animeeasing: 'easeOutExpo',
|
||||
onOpenBarsUpdate: openTabCallback,
|
||||
onOpenTab: function() {
|
||||
// Show the back button after the tab is open.
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 600,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [0,1],
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 300,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
|
||||
// The content items and the back control.
|
||||
contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')),
|
||||
backCtrl = document.querySelector('.tabscontent > button.btn--back'),
|
||||
// menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs)
|
||||
menuCtrl = document.querySelector('button.btn--menu'),
|
||||
isContentShown = false, current;
|
||||
|
||||
function openTabCallback(anim, idx, tab) {
|
||||
if( anim.progress > 10 && !isContentShown ) {
|
||||
isContentShown = true;
|
||||
current = idx;
|
||||
|
||||
var contentItem = contentItems[idx],
|
||||
content = [].slice.call(contentItem.querySelectorAll('.column > *'));
|
||||
|
||||
// Hide the content elements.
|
||||
content.forEach(function(el) { el.style.opacity = 0; });
|
||||
// Show content item.
|
||||
contentItem.style.opacity = 1;
|
||||
contentItem.classList.add('tabscontent__item--current');
|
||||
|
||||
// Animate content elements in.
|
||||
anime.remove(content);
|
||||
anime({
|
||||
targets: content,
|
||||
easing: 'easeOutExpo',
|
||||
duration: 600,
|
||||
delay: function(t,i) {
|
||||
return i*30;
|
||||
},
|
||||
translateY: function(t,i) {
|
||||
return [50+10*i,0];
|
||||
},
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 600,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
backCtrl.addEventListener('click', closeTabs);
|
||||
|
||||
function closeTabs() {
|
||||
if( !tnav.isOpen ) return;
|
||||
|
||||
var contentItem = contentItems[current],
|
||||
content = [].slice.call(contentItem.querySelectorAll('.column > *'));
|
||||
|
||||
// Hide the content elements.
|
||||
anime.remove(content);
|
||||
// Animate content elements out.
|
||||
anime({
|
||||
targets: content,
|
||||
easing: 'easeOutExpo',
|
||||
duration: 600,
|
||||
delay: function(t,i,c) {
|
||||
return (c-i-1)*20;
|
||||
},
|
||||
translateY: function(t,i) {
|
||||
return [0,50+10*i];
|
||||
},
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
},
|
||||
update: function(anim) {
|
||||
if( anim.progress > 20 && isContentShown ) {
|
||||
isContentShown = false;
|
||||
// Close tab.
|
||||
tnav.close();
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
// Hide content item.
|
||||
contentItem.style.opacity = 0;
|
||||
contentItem.classList.remove('tabscontent__item--current');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide back ctrl
|
||||
anime.remove(backCtrl);
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 300,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [1,0],
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menuCtrl.addEventListener('click', toggleTabs);
|
||||
|
||||
function toggleTabs() {
|
||||
var state = tnav.toggleVisibility();
|
||||
if( state === 0 ) {
|
||||
menuCtrl.classList.remove('btn--menu-active');
|
||||
}
|
||||
else if( state === 1 ) {
|
||||
menuCtrl.classList.add('btn--menu-active');
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
142
js/demo3.js
Normal file
142
js/demo3.js
Normal file
@ -0,0 +1,142 @@
|
||||
(function() {
|
||||
var tnav = new TabsNav(document.querySelector('nav.tabsnav'), {
|
||||
movable: 'all',
|
||||
layout: 'horizontal',
|
||||
animeduration: 600,
|
||||
animeeasing: [0.2,1,0.3,1],
|
||||
animedelay: 50,
|
||||
onOpenBarsUpdate: openTabCallback,
|
||||
onOpenTab: function() {
|
||||
// Show the back button after the tab is open.
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 600,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [0,1],
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 300,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
// The content items and the back control.
|
||||
contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')),
|
||||
backCtrl = document.querySelector('.tabscontent > button.btn--back'),
|
||||
// menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs)
|
||||
menuCtrl = document.querySelector('button.btn--menu'),
|
||||
isContentShown = false, current;
|
||||
|
||||
function openTabCallback(anim, idx, tab) {
|
||||
if( anim.progress > 40 && !isContentShown ) {
|
||||
isContentShown = true;
|
||||
current = idx;
|
||||
|
||||
var contentItem = contentItems[idx],
|
||||
content = contentItem.querySelector('.box');
|
||||
|
||||
// Hide the content elements.
|
||||
content.style.opacity = 0;
|
||||
// Show content item.
|
||||
contentItem.style.opacity = 1;
|
||||
contentItem.classList.add('tabscontent__item--current');
|
||||
|
||||
// Animate content elements in.
|
||||
anime.remove(content);
|
||||
anime({
|
||||
targets: content,
|
||||
easing: [0.2,1,0.3,1],
|
||||
duration: 600,
|
||||
translateY: [400,0],
|
||||
opacity: {
|
||||
value: 1,
|
||||
duration: 600,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
backCtrl.addEventListener('click', closeTabs);
|
||||
|
||||
function closeTabs() {
|
||||
if( !tnav.isOpen ) return;
|
||||
|
||||
var contentItem = contentItems[current],
|
||||
content = contentItem.querySelector('.box');
|
||||
|
||||
// Hide the content elements.
|
||||
anime.remove(content);
|
||||
// Animate content elements out.
|
||||
anime({
|
||||
targets: content,
|
||||
duration: 600,
|
||||
easing: [0.2,1,0.3,1],
|
||||
translateY: [0,400],
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
},
|
||||
update: function(anim) {
|
||||
if( anim.progress > 30 && isContentShown ) {
|
||||
isContentShown = false;
|
||||
// Close tab.
|
||||
tnav.close();
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
// Hide content item.
|
||||
contentItem.style.opacity = 0;
|
||||
contentItem.classList.remove('tabscontent__item--current');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide back ctrl
|
||||
anime.remove(backCtrl);
|
||||
anime({
|
||||
targets: backCtrl,
|
||||
duration: 300,
|
||||
easing: 'easeOutExpo',
|
||||
scale: [1,0],
|
||||
opacity: {
|
||||
value: 0,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menuCtrl.addEventListener('click', toggleTabs);
|
||||
|
||||
function toggleTabs() {
|
||||
var state = tnav.toggleVisibility();
|
||||
if( state === 0 ) {
|
||||
menuCtrl.classList.remove('btn--menu-active');
|
||||
|
||||
// Scale up content
|
||||
anime.remove('.content');
|
||||
anime({
|
||||
targets: '.content',
|
||||
duration: 600,
|
||||
easing: [0.2,1,0.7,1],
|
||||
opacity: 1,
|
||||
scale: 1
|
||||
});
|
||||
}
|
||||
else if( state === 1 ) {
|
||||
menuCtrl.classList.add('btn--menu-active');
|
||||
|
||||
// Scale down content
|
||||
anime.remove('.content');
|
||||
anime({
|
||||
targets: '.content',
|
||||
duration: 600,
|
||||
easing: [0.2,1,0.7,1],
|
||||
opacity: 0.2,
|
||||
scale: 0.9
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
6
js/enquire.min.js
vendored
Executable file
6
js/enquire.min.js
vendored
Executable file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* enquire.js v2.1.6 - Awesome Media Queries in JavaScript
|
||||
* Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/enquire.js
|
||||
* License: MIT */
|
||||
|
||||
!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.enquire=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a,b){this.query=a,this.isUnconditional=b,this.handlers=[],this.mql=window.matchMedia(a);var c=this;this.listener=function(a){c.mql=a.currentTarget||a,c.assess()},this.mql.addListener(this.listener)}var e=a(3),f=a(4).each;d.prototype={constuctor:d,addHandler:function(a){var b=new e(a);this.handlers.push(b),this.matches()&&b.on()},removeHandler:function(a){var b=this.handlers;f(b,function(c,d){if(c.equals(a))return c.destroy(),!b.splice(d,1)})},matches:function(){return this.mql.matches||this.isUnconditional},clear:function(){f(this.handlers,function(a){a.destroy()}),this.mql.removeListener(this.listener),this.handlers.length=0},assess:function(){var a=this.matches()?"on":"off";f(this.handlers,function(b){b[a]()})}},b.exports=d},{3:3,4:4}],2:[function(a,b,c){function d(){if(!window.matchMedia)throw new Error("matchMedia not present, legacy browsers require a polyfill");this.queries={},this.browserIsIncapable=!window.matchMedia("only all").matches}var e=a(1),f=a(4),g=f.each,h=f.isFunction,i=f.isArray;d.prototype={constructor:d,register:function(a,b,c){var d=this.queries,f=c&&this.browserIsIncapable;return d[a]||(d[a]=new e(a,f)),h(b)&&(b={match:b}),i(b)||(b=[b]),g(b,function(b){h(b)&&(b={match:b}),d[a].addHandler(b)}),this},unregister:function(a,b){var c=this.queries[a];return c&&(b?c.removeHandler(b):(c.clear(),delete this.queries[a])),this}},b.exports=d},{1:1,4:4}],3:[function(a,b,c){function d(a){this.options=a,!a.deferSetup&&this.setup()}d.prototype={constructor:d,setup:function(){this.options.setup&&this.options.setup(),this.initialised=!0},on:function(){!this.initialised&&this.setup(),this.options.match&&this.options.match()},off:function(){this.options.unmatch&&this.options.unmatch()},destroy:function(){this.options.destroy?this.options.destroy():this.off()},equals:function(a){return this.options===a||this.options.match===a}},b.exports=d},{}],4:[function(a,b,c){function d(a,b){var c=0,d=a.length;for(c;c<d&&b(a[c],c)!==!1;c++);}function e(a){return"[object Array]"===Object.prototype.toString.apply(a)}function f(a){return"function"==typeof a}b.exports={isFunction:f,isArray:e,each:d}},{}],5:[function(a,b,c){var d=a(2);b.exports=new d},{2:2}]},{},[5])(5)});
|
||||
463
js/tabsnav.js
Normal file
463
js/tabsnav.js
Normal file
@ -0,0 +1,463 @@
|
||||
/**
|
||||
* main.js
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2017, Codrops
|
||||
* http://www.codrops.com
|
||||
*
|
||||
*
|
||||
* todos:
|
||||
* Need to fix extramovable elements animations. For example, for the demos provided, need to fix the direction of the animation for the content element when it's on the left or under the tabs.
|
||||
* Add animation settings for the toggle visibility function.
|
||||
* Count with scroll values in the calculations.
|
||||
* Control the tite better so one could remove it from the page once open.
|
||||
* ...
|
||||
*/
|
||||
;(function(window) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// Helper vars and functions.
|
||||
function extend( a, b ) {
|
||||
for( var key in b ) {
|
||||
if( b.hasOwnProperty( key ) ) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// From https://davidwalsh.name/javascript-debounce-function.
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
var win = {width: window.innerWidth, height: window.innerHeight};
|
||||
|
||||
/**
|
||||
* TabsNav obj.
|
||||
*/
|
||||
function TabsNav(el, options) {
|
||||
this.DOM = {};
|
||||
this.DOM.el = el;
|
||||
this.options = extend({}, this.options);
|
||||
extend(this.options, options);
|
||||
this._init();
|
||||
}
|
||||
|
||||
/**
|
||||
* TabsNav default options.
|
||||
*/
|
||||
TabsNav.prototype.options = {
|
||||
movable: 'all', // 'all': all the tabs || 'single': only the clicked tab
|
||||
//extramovable: null,
|
||||
layout: 'vertical', // or 'horizontal'
|
||||
animeduration: 1300,
|
||||
animeeasing: 'easeOutExpo',
|
||||
animedelay: 0,
|
||||
onOpenTab: function(idx, tab) { return false; },
|
||||
onCloseTab: function(idx, tab) { return false; },
|
||||
onOpenBarsUpdate: function(anim, idx, tab) {return false; }
|
||||
};
|
||||
|
||||
/**
|
||||
* Init. Create layout and initialize/bind any events.
|
||||
*/
|
||||
TabsNav.prototype._init = function() {
|
||||
this.DOM.tabs = [].slice.call(this.DOM.el.querySelectorAll('.tabsnav__item'));
|
||||
this.DOM.bars = [].slice.call(this.DOM.el.querySelectorAll('.tabsnav__bar'));
|
||||
|
||||
this.totalTabs = this.DOM.tabs.length;
|
||||
this.extraEl = document.querySelector(this.options.extramovable);
|
||||
|
||||
this._initEvents();
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize/Bind any events.
|
||||
*/
|
||||
TabsNav.prototype._initEvents = function() {
|
||||
var self = this;
|
||||
|
||||
// Clicking a tab.
|
||||
this._openTabFn = function(ev) {
|
||||
if( !self.isOpen ) {
|
||||
self._openTab(ev.target);
|
||||
}
|
||||
};
|
||||
this.DOM.tabs.forEach(function(tab) {
|
||||
// Clicking a tab...
|
||||
tab.addEventListener('click', self._openTabFn);
|
||||
});
|
||||
|
||||
// Window resize.
|
||||
this.debounceResizeFn = debounce(function() {
|
||||
self._resize();
|
||||
}, 10);
|
||||
window.addEventListener('resize', this.debounceResizeFn);
|
||||
|
||||
enquire.register('screen and (min-width:0) and (max-width:40em)', {
|
||||
match: function() {
|
||||
// hide if tabs are not open
|
||||
if(!self.isOpen && !self.isVisible) {
|
||||
self.DOM.el.classList.add('tabsnav--hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
enquire.register('screen and (min-width:40em)', {
|
||||
match: function() {
|
||||
// show
|
||||
if( !self.DOM.el.classList.contains('tabsnav--hidden-default') ) {
|
||||
self.DOM.el.classList.remove('tabsnav--hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Opens a tab/page.
|
||||
*/
|
||||
TabsNav.prototype._openTab = function(tab) {
|
||||
// If animating do nothing.
|
||||
if( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
// Update current value (index of the current tab).
|
||||
this.current = this.DOM.tabs.indexOf(tab);
|
||||
|
||||
var bounds = tab.getBoundingClientRect(),
|
||||
currentDimensions = { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height },
|
||||
self = this;
|
||||
|
||||
// Choose the dimentions based on the layout mode.
|
||||
this.dim = {
|
||||
measure: this.options.layout === 'vertical' ? currentDimensions.width : currentDimensions.height,
|
||||
position: this.options.layout === 'vertical' ? currentDimensions.left : currentDimensions.top,
|
||||
win: this.options.layout === 'vertical' ? win.width : win.height
|
||||
};
|
||||
|
||||
this.DOM.bars.forEach(function(bar) {
|
||||
// Set transform origin on the respective bar.
|
||||
bar.style.transformOrigin = self.options.layout === 'vertical' ? '0% 50%' : '50% 0%';
|
||||
});
|
||||
|
||||
// Set z-indexes.
|
||||
this.DOM.tabs.forEach(function(tab, idx) { tab.style.zIndex = idx === self.current ? 100 : 1; });
|
||||
|
||||
// Animate tabs and bars.
|
||||
var animeTabs = { targets: this.options.movable === 'all' ? this.DOM.tabs : this.DOM.tabs[this.current] },
|
||||
animeBars = { targets: this.options.movable === 'all' ? this.DOM.bars : this.DOM.bars[this.current] },
|
||||
animeTabsDelay = function(target, index, cnt) {
|
||||
if( cnt === 1 || self.options.animedelay === 0 ) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
var total = cnt+1, middle = Math.floor(total/2);
|
||||
if( self.current >= middle ) {
|
||||
return index <= self.current ? index * self.options.animedelay : (total - index - 1) * self.options.animedelay;
|
||||
}
|
||||
else {
|
||||
return index < self.current ? index * self.options.animedelay : (total - index - 1) * self.options.animedelay;
|
||||
}
|
||||
}
|
||||
},
|
||||
animeTabsTranslation = function(target, index, cnt) {
|
||||
if( index === self.current || cnt === 1 ) {
|
||||
return -1 * self.dim.position;
|
||||
}
|
||||
else {
|
||||
var pixels = 1; // adding an extra pixel for the translation due to the fuzzy rendering.
|
||||
return index > self.current ? self.dim.win - (self.dim.position + self.dim.measure) - pixels : -1 * self.dim.position + pixels;
|
||||
}
|
||||
},
|
||||
animeBarsScale = function(target, index, cnt) {
|
||||
return index === self.current || cnt === 1 ? self.dim.win/self.dim.measure : 1;
|
||||
}
|
||||
|
||||
animeTabs.duration = animeBars.duration = this.options.animeduration;
|
||||
animeTabs.easing = animeBars.easing = this.options.animeeasing;
|
||||
animeTabs.delay = animeBars.delay = animeTabsDelay;
|
||||
animeTabs[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = animeTabsTranslation;
|
||||
animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = animeBarsScale;
|
||||
animeTabs.complete = function() {
|
||||
self.isAnimating = false;
|
||||
self.isOpen = true;
|
||||
// Callback
|
||||
self.options.onOpenTab(self.current, tab);
|
||||
};
|
||||
animeBars.update = function(anim) {
|
||||
self.options.onOpenBarsUpdate(anim, self.current, tab);
|
||||
}
|
||||
|
||||
anime(animeTabs);
|
||||
anime(animeBars);
|
||||
|
||||
// Animate extramovable elements.
|
||||
if( this.extraEl ) {
|
||||
var animeExtra = {
|
||||
targets: this.extraEl,
|
||||
duration: this.options.animeduration,
|
||||
easing: this.options.animeeasing,
|
||||
delay: 0
|
||||
},
|
||||
extraBounds = this.extraEl.getBoundingClientRect(),
|
||||
animeExtraTranslation = this.options.layout === 'vertical' ? this.dim.win - (this.dim.position + this.dim.measure) + Math.abs(extraBounds.left - this.dim.position) + this.dim.measure : -1 * this.dim.position;
|
||||
|
||||
animeExtra[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = animeExtraTranslation;
|
||||
anime(animeExtra);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Closes a tab/page.
|
||||
*/
|
||||
TabsNav.prototype._closeTab = function(tab) {
|
||||
// If animating do nothing.
|
||||
if( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
// Animate tabs and bars.
|
||||
var self = this,
|
||||
animeTabs = { targets: this.options.movable === 'all' ? this.DOM.tabs : this.DOM.tabs[this.current] },
|
||||
animeBars = { targets: this.options.movable === 'all' ? this.DOM.bars : this.DOM.bars[this.current] },
|
||||
animeTabsDelay = function(target, index, cnt) {
|
||||
return cnt === 1 || self.options.animedelay === 0 ? 0 : Math.abs(self.current - index) * self.options.animedelay;
|
||||
};
|
||||
|
||||
animeTabs.duration = animeBars.duration = this.options.animeduration;
|
||||
animeTabs.easing = animeBars.easing = this.options.animeeasing;
|
||||
animeTabs.delay = animeBars.delay = animeTabsDelay;
|
||||
animeTabs[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = 0;
|
||||
animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = 1;
|
||||
animeTabs.complete = function() {
|
||||
// Reset z-indexes.
|
||||
tab.style.zIndex = 1;
|
||||
self.isAnimating = false;
|
||||
self.isOpen = false;
|
||||
// Callback
|
||||
self.options.onCloseTab(self.current, tab);
|
||||
};
|
||||
|
||||
anime(animeTabs);
|
||||
anime(animeBars);
|
||||
|
||||
// Animate extramovable elements.
|
||||
if( this.extraEl ) {
|
||||
var animeExtra = {
|
||||
targets: this.extraEl,
|
||||
duration: this.options.animeduration,
|
||||
easing: this.options.animeeasing,
|
||||
delay: Math.abs(this.current - this.totalTabs) * this.options.animedelay
|
||||
};
|
||||
|
||||
animeExtra[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = 0;
|
||||
anime(animeExtra);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Closes the tabs.
|
||||
*/
|
||||
TabsNav.prototype.close = function(tab) {
|
||||
this._closeTab(tab || this.DOM.tabs[this.current]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the TabsNav element.
|
||||
*/
|
||||
TabsNav.prototype.show = function(callback) {
|
||||
var self = this;
|
||||
|
||||
this.isVisible = true;
|
||||
|
||||
this.DOM.tabs.forEach(function(tab) {
|
||||
var bar = tab.querySelector('.tabsnav__bar'),
|
||||
title = tab.querySelector('.tabsnav__title');
|
||||
|
||||
// Set transform origin.
|
||||
bar.style.transformOrigin = '50% 50%';
|
||||
bar.style.transform = self.options.layout === 'vertical' ? 'scaleX(0)' : 'scaleY(0)';
|
||||
|
||||
title.style.opacity = 0;
|
||||
title.style.transform = self.options.layout === 'vertical' ? 'translateX(10) rotate(-90)' : 'translateY(10)';
|
||||
});
|
||||
|
||||
this.DOM.el.classList.remove('tabsnav--hidden');
|
||||
|
||||
// Animate bars.
|
||||
anime.remove(this.DOM.bars);
|
||||
var animeBars = {
|
||||
targets: this.DOM.bars,
|
||||
duration: 500,
|
||||
delay: function(t,i) {
|
||||
return i*50;
|
||||
},
|
||||
easing: 'easeOutExpo',
|
||||
complete: function() {
|
||||
if( typeof callback === 'function' ) {
|
||||
callback.call();
|
||||
}
|
||||
}
|
||||
};
|
||||
animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = [0,1];
|
||||
anime(animeBars);
|
||||
|
||||
// Animate titles.
|
||||
var titles = this.DOM.el.querySelectorAll('.tabsnav__title');
|
||||
anime.remove(titles);
|
||||
var animeTitles = {
|
||||
targets: titles,
|
||||
duration: 500,
|
||||
delay: function(t,i) {
|
||||
return i*50;
|
||||
},
|
||||
easing: 'easeOutExpo',
|
||||
opacity: [0,1]
|
||||
};
|
||||
animeTitles[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = [10,0];
|
||||
animeTitles.rotate = self.options.layout === 'vertical' ? [-90,-90] : 0;
|
||||
anime(animeTitles);
|
||||
}
|
||||
/**
|
||||
* Hides the TabsNav element.
|
||||
*/
|
||||
TabsNav.prototype.hide = function(callback) {
|
||||
var self = this;
|
||||
|
||||
this.isVisible = false;
|
||||
|
||||
this.DOM.bars.forEach(function(bar) {
|
||||
// Set transform origin.
|
||||
bar.style.transformOrigin = '50% 50%';
|
||||
});
|
||||
|
||||
// Animate bars.
|
||||
anime.remove(this.DOM.bars);
|
||||
var animeBars = {
|
||||
targets: this.DOM.bars,
|
||||
duration: 500,
|
||||
easing: 'easeOutExpo',
|
||||
delay: function(t,i,c) {
|
||||
return (c-i-1)*50;
|
||||
},
|
||||
complete: function() {
|
||||
self.DOM.el.classList.add('tabsnav--hidden');
|
||||
// reset all values.
|
||||
self.DOM.tabs.forEach(function(tab) {
|
||||
var bar = tab.querySelector('.tabsnav__bar'),
|
||||
title = tab.querySelector('.tabsnav__title');
|
||||
|
||||
bar.style.transform = self.options.layout === 'vertical' ? 'scaleX(1)' : 'scaleY(1)';
|
||||
|
||||
title.style.opacity = 1;
|
||||
title.style.transform = self.options.layout === 'vertical' ? 'translateX(0) rotate(-90)' : 'translateY(0)';
|
||||
});
|
||||
|
||||
if( typeof callback === 'function' ) {
|
||||
callback.call();
|
||||
}
|
||||
}
|
||||
};
|
||||
animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = [1,0];
|
||||
anime(animeBars);
|
||||
|
||||
// Animate titles.
|
||||
var titles = this.DOM.el.querySelectorAll('.tabsnav__title');
|
||||
anime.remove(titles);
|
||||
var animeTitles = {
|
||||
targets: titles,
|
||||
duration: 100,
|
||||
delay: function(t,i,c) {
|
||||
return (c-i-1)*50;
|
||||
},
|
||||
easing: 'linear',
|
||||
opacity: [1,0]
|
||||
};
|
||||
anime(animeTitles);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle visibility.
|
||||
*/
|
||||
TabsNav.prototype.toggleVisibility = function() {
|
||||
// If animating do nothing.
|
||||
if( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
var self = this, endAnimation = function() { self.isAnimating = false; };
|
||||
|
||||
if( this.isVisible ) {
|
||||
this.hide(endAnimation);
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
this.show(endAnimation);
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Resizing the window.
|
||||
*/
|
||||
TabsNav.prototype._resize = function() {
|
||||
var self = this;
|
||||
win = {width: window.innerWidth, height: window.innerHeight};
|
||||
|
||||
// If tabs are open then update translate & scale values taking in consideration the new window sizes.
|
||||
if( this.isOpen ) {
|
||||
// Update dim.win value.
|
||||
this.dim.win = this.options.layout === 'vertical' ? win.width : win.height;
|
||||
|
||||
var currentTab = this.DOM.tabs[this.current],
|
||||
translateStr = this.options.layout === 'vertical' ? 'translateX' : 'translateY',
|
||||
scaleStr = this.options.layout === 'vertical' ? 'scaleX' : 'scaleY';
|
||||
|
||||
// Reset tabs/bars translation and scale values.
|
||||
this.DOM.tabs.forEach(function(tab, idx) {
|
||||
if( self.options.movable === 'all' || self.options.movable === 'single' && idx === self.current ) {
|
||||
var bar = self.DOM.bars[idx], tVal, sVal;
|
||||
|
||||
if( idx === self.current ) {
|
||||
tVal = -1 * self.dim.position;
|
||||
sVal = self.dim.win/self.dim.measure;
|
||||
}
|
||||
else {
|
||||
tVal = idx > self.current ? self.dim.win - (self.dim.position + self.dim.measure) : -1 * self.dim.position;
|
||||
sVal = 1;
|
||||
}
|
||||
|
||||
tab.style.transform = translateStr + '(' + tVal + 'px)';
|
||||
bar.style.transform = scaleStr + '(' + sVal + ')';
|
||||
}
|
||||
});
|
||||
|
||||
// Reset extramovable elements
|
||||
if( this.extraEl ) {
|
||||
this.extraEl.style.transform = translateStr + '(' + (this.options.layout === 'vertical' ? this.dim.win - (this.dim.position + this.dim.measure) : -1 * this.dim.position) + 'px)';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.TabsNav = TabsNav;
|
||||
|
||||
})(window);
|
||||
Loading…
Reference in New Issue
Block a user