<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Rplus/pen/MwOqaN?limit=all&page=4&q=mobile" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">/* $mobile-height: 90vh; */
* {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: sans-serif;
background-color: #31465b;
background-image: -webkit-linear-gradient(120deg, rgba(0, 0, 0, 0.3), transparent 50%);
background-image: linear-gradient(-30deg, rgba(0, 0, 0, 0.3), transparent 50%);
}
.intro {
width: 80%;
max-width: 30rem;
padding-bottom: 1rem;
margin: .5em auto 1em;
text-align: center;
text-transform: capitalize;
border-bottom: 1px dashed #999;
color: #fff;
}
.intro small {
display: block;
opacity: .5;
font-style: italic;
text-transform: capitalize;
}
.info {
margin: 1em;
font-size: .9em;
font-style: italic;
font-family: serif;
text-align: right;
color: #fff;
text-shadow: 1px 1px 3px #000;
}
.info a {
color: inherit;
}
.fa,
[class^="icon-"] {
display: inline-block;
margin: 0 .5em;
width: 1em;
text-align: center;
line-height: inherit;
cursor: pointer;
}
.fa::before,
[class^="icon-"]::before {
display: block;
}
.mobile-wrap {
max-width: 375px;
height: 100vh;
max-height: 100vh;
margin: auto;
/* margin: 5vh auto; */
overflow: hidden;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 1px;
background-color: #005a94;
}
.statusbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 5px;
line-height: 24px;
font-size: 12px;
background-color: #005a94;
color: #fff;
}
.statusbar :first-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.main-header {
overflow: hidden;
background-color: #0073bd;
color: #fff;
}
.click-circle {
position: absolute;
top: 100px;
left: 350px;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
}
.click-circle.active {
-webkit-animation: circle .3s;
animation: circle .3s;
visibility: visible;
}
@-webkit-keyframes circle {
0% {
width: 0;
height: 0;
box-shadow: inset 0px 0px 0px 30px #fff, inset 1px 1px 0px 30px #000, 1px 1px 0px 0px #000;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
box-shadow: inset 0px 0px 0px 1px #fff, inset 1px 1px 0px 1px rgba(0, 0, 0, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
opacity: .6;
}
}
@keyframes circle {
0% {
width: 0;
height: 0;
box-shadow: inset 0px 0px 0px 30px #fff, inset 1px 1px 0px 30px #000, 1px 1px 0px 0px #000;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
box-shadow: inset 0px 0px 0px 1px #fff, inset 1px 1px 0px 1px rgba(0, 0, 0, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
opacity: .6;
}
}
.toolbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 3em;
line-height: 3em;
}
.main-title {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 1em;
font-size: 1.25em;
font-weight: normal;
}
.minimap {
position: relative;
height: 200px;
-webkit-transition: height 0.5s cubic-bezier(0.75, 1.75, 0.9, 0.8);
transition: height 0.5s cubic-bezier(0.75, 1.75, 0.9, 0.8);
background-color: #0073bd;
color: #fff;
overflow-x: auto;
overflow-y: visible;
}
.is-mini .minimap {
height: 75px;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.is-hidden .minimap {
height: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.mini-lists {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 50%;
margin: auto 85% auto 15%;
list-style-type: none;
text-align: center;
white-space: nowrap;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.is-mini .mini-lists {
-webkit-transform: scaleX(0.375);
transform: scaleX(0.375);
}
.mini-list {
position: relative;
display: inline-block;
width: 60px;
vertical-align: top;
cursor: pointer;
}
.mini-list::before, .mini-list::after {
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.mini-list::before {
content: attr(data-title);
position: absolute;
top: -25px;
left: 0;
right: 0;
font-size: 12px;
line-height: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
white-space: normal;
opacity: .8;
}
.is-mini .mini-list::before {
opacity: 0;
visibility: hidden;
}
.mini-list::after {
content: "";
display: block;
background-color: #fff;
max-width: 50%;
height: 100%;
margin: auto;
border-radius: 5px;
opacity: .3;
}
.mini-list:hover::after {
opacity: .5;
}
.mini-list.active::before, .mini-list.active::after {
opacity: 1;
}
.lists-wrap {
position: relative;
}
.lists-wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 0;
height: 72px;
background-image: -webkit-linear-gradient(top, #0073bd 0, #0073bd 48px, rgba(0, 0, 0, 0.2) 48px, transparent 57.6px);
background-image: linear-gradient(to bottom, #0073bd 0, #0073bd 48px, rgba(0, 0, 0, 0.2) 48px, transparent 57.6px);
}
.lists {
position: relative;
white-space: nowrap;
letter-spacing: normal;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.list {
display: inline-block;
vertical-align: top;
width: 75%;
margin: 0 2.5%;
background-color: #e7ebed;
border-radius: 5px;
}
.list:nth-of-type(1) {
margin-left: 12.5%;
}
.list-header {
position: relative;
height: 48px;
line-height: 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background-color: #e7ebed;
color: rgba(0, 0, 0, 0.5);
cursor: -webkit-grab;
border-radius: 5px 5px 0 0;
}
.list-header::-moz-selection {
background-color: transparent;
}
.list-header::selection {
background-color: transparent;
}
.primary-plus {
position: absolute;
right: 5%;
top: 100%;
width: 2rem;
height: 2rem;
line-height: 2rem;
border-radius: 50%;
color: #fff;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-style: normal;
font-size: 1.5em;
font-weight: 100;
background-color: #ccc;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.primary-plus:hover {
background-color: #c7c7c7;
}
.primary-plus:active {
margin-left: 1px;
margin-top: 1px;
background-color: #bfbfbf;
}
.list-items {
max-height: calc(100vh - 325px);
padding-top: 16px;
overflow: auto;
-webkit-transition: max-height .3s;
transition: max-height .3s;
will-change: max-height;
}
.is-mini .list-items {
max-height: calc(100vh - 200px);
}
.is-hidden .list-items {
max-height: calc(100vh - 125px);
}
.list-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 3em;
padding: 10px;
margin: .5em;
background-color: #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.list-avatar {
border-radius: 5px;
}
.list-tags {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.list-tag {
display: inline-block;
width: 3em;
margin-right: 5px;
border-bottom: 5px solid;
border-radius: 5px;
}
.list-thumb {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: -10px -10px 0;
border-radius: 5px 5px 0 0;
padding-bottom: 50%;
min-height: 80px;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
}
.list-tag--1 {
border-color: #ffee99;
}
.list-tag--2 {
border-color: #bbff99;
}
.list-tag--3 {
border-color: #99ffcc;
}
.list-tag--4 {
border-color: #99ddff;
}
.list-tag--5 {
border-color: #aa99ff;
}
</style></head><body>
<div class="mobile-wrap">
<div class="statusbar">
<div class="left"></div>
<div class="right"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i><i class="fa fa-heart-o"></i>
<time datetime="2015-06-25T12:30:30" class="time">12:30</time>
</div>
</div>
<header class="main-header">
<div class="toolbar"><i class="fa fa-arrow-left"></i>
<h2 class="main-title">My board</h2><i class="fa fa-search"></i><i class="fa fa-ellipsis-v"></i></div>
</header>
<main class="main-content is-mini">
<nav class="minimap">
<ul class="mini-lists">
<li data-title="UI" class="mini-list active"></li>
<li data-title="RD" class="mini-list"></li>
<li data-title="SA" class="mini-list"></li>
<li data-title="User Test blabla" class="mini-list"></li>
<li data-title="PM" class="mini-list"></li>
<li data-title="M1" class="mini-list"></li>
<li data-title="M2" class="mini-list"></li>
<li data-title="M3" class="mini-list"></li>
</ul>
</nav>
<div class="lists-wrap">
<ul class="lists">
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>UI<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--3"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>RD<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--2"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>SA<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>User Test blabla<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--5"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--2"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>PM<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--1"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M1<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--5"></span></div>
</div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M2<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--4"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
</div>
</li>
<li class="list">
<h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M3<i class="primary-plus">+</i></h3>
<div class="list-items">
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span></div>
</div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div>
<div class="list-item">
<div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--1"></span></div>
</div>
<div class="list-item">
<div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div>
</div>
</div>
</li>
</ul>
</div>
</main>
<div class="click-circle"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/* global $, document, console, window */
(function () {
'use strict';
var $mobileWrap = document.querySelector('.mobile-wrap');
var $mainHeader = document.querySelector('.main-header');
var $toolbar = document.querySelector('.toolbar');
var $minimap = document.querySelector('.minimap');
var $miniLists = document.querySelector('.mini-lists');
var $miniList = document.querySelectorAll('.mini-list');
var $mainContent = document.querySelector('.main-content');
var $listsWrap = document.querySelector('.lists-wrap');
var $lists = document.querySelector('.lists');
var $list = document.querySelectorAll('.list');
var $listItems = document.querySelectorAll('.list-items');
var $clickCircle = document.querySelector('.click-circle');
var $listHeader = document.querySelector('.list-header');
var _mainHeaderTop = $mainHeader.getBoundingClientRect().top;
var _mobileWrapWidth = $mobileWrap.getBoundingClientRect().width;
var _docWidth = document.documentElement.clientWidth;
var _miniListsWidth = 60 * $miniList.length / 0.85; // 15% margin-left
var _listGap = $list[1].getBoundingClientRect().left - $list[0].getBoundingClientRect().left; // 15% margin-left
var _listLen = $list.length;
var currentIndex = 0;
var newIndex = 0;
// minimap state
var minimapClass = ['', 'is-mini', 'is-mini is-hidden'];
var minimapClassLen = minimapClass.length;
var minimapClassCount = 1;
var setMiniMapState = function(dir) {
dir = (dir > 0) ? 1 : -1;
if (minimapClassCount === minimapClassLen - 1 && 1 === dir) { return; }
minimapClassCount = (minimapClassCount + dir) % minimapClassLen;
$mainContent.className = 'main-content ' + minimapClass[minimapClassCount];
};
// var getIndex = function(node) {
// var i = 0;
// while(node.previousSibling){
// node = node.previousSibling;
// if(node.nodeType === 1) {
// i++;
// }
// }
// return i;
// };
var updateMinimapScroll = function() {
var x = Math.round((_miniListsWidth - _mobileWrapWidth) * newIndex / ($miniList.length - 1));
var shiftX = function(dx) {
$minimap.scrollLeft = dx;
};
var _x = $minimap.scrollLeft;
(function animloop(){
var dir = (_x > x) ? -1 : 1;
var step = dir * 10;
if ((x - _x) * dir > (step * dir - 1)) {
shiftX(_x + step);
window.requestAnimationFrame(animloop);
} else {
shiftX(x);
}
_x += step;
})();
};
var switcher = function(_newIndex) {
newIndex = _newIndex;
// avoid switching to currentItem
if (newIndex === currentIndex) { return; }
[].forEach.call($miniList, function(_list, v) {
_list.classList.remove('active');
});
$miniList[newIndex].classList.add('active');
updateMinimapScroll();
$lists.style.transform = 'translateX(-' + _listGap * (newIndex) + 'px)';
currentIndex = _newIndex;
// minify minimap
if (minimapClassCount === 0) {
setMiniMapState(1);
}
};
// $('.list-items').on('scroll', function(event) {
// console.log(111511);
// if (0 === this.scrollTop) {
// console.log(11111);
// setMiniMapState(-1);
// }
// });
///
///
///
$clickCircle.addEventListener('animationend', function() {
$clickCircle.classList.remove('active');
});
$miniLists.addEventListener('click', function(e) {
var _this = e.target;
// cirecle position & animation
$clickCircle.classList.remove('active');
$clickCircle.style.cssText = 'top: ' + e.pageY + 'px; left: ' + e.pageX + 'px;';
$clickCircle.classList.add('active');
if (_this.classList.contains('mini-list')) {
switcher($(_this).index());
}
});
$($lists).on('click', '.list', function(event) {
switcher($(this).index());
});
// $($listItems).on('scroll', function(event) {
// if (0 === this.scrollTop) {
// setMiniMapState(-1);
// } else {
// console.log(minimapClassCount);
// setMiniMapState(1);
// }
// });
var init = (function() {
var _listItemHeight = (function() {
var _maxHeight = 0;
[].forEach.call($listItems, function(_item) {
_maxHeight = _item.scrollHeight > _maxHeight ? _item.scrollHeight : _maxHeight;
});
return _maxHeight;
})();
// sync height
[].forEach.call($listItems, function(_item) {
$miniList[$(_item).parent().index()].style.height = (100 * _item.scrollHeight / _listItemHeight) + '%';
});
})();
// swipe detect ref.: http://stackoverflow.com/a/23230280
$listsWrap.addEventListener('touchstart', handleTouchStart, true);
$listsWrap.addEventListener('touchmove', handleTouchMove, true);
$mainContent.addEventListener('mousedown', handleTouchStart, true);
$mainContent.addEventListener('mousemove', handleTouchMove, true);
$mainContent.addEventListener('mouseup', handleTouchEnd, true);
var xDown = null;
var yDown = null;
var swipStartEle;
function handleTouchStart(evt) {
// console.log('handleTouchStart');
var _target = $(evt.target);
// if (_target.hasClass('list-header') || _target.parents('.list-header').length) { return; }
// console.log(_target, 333);
if ('touchstart' === evt.type) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
} else {
xDown = evt.clientX;
yDown = evt.clientY;
}
swipStartEle = evt.target;
}
function handleTouchEnd(evt) {
xDown = null;
yDown = null;
}
function handleTouchMove(evt) {
var xUp ,yUp;
if ( ! xDown || ! yDown ) {
return;
}
if ('touchmove' === evt.type) {
xUp = evt.touches[0].clientX;
yUp = evt.touches[0].clientY;
} else {
xUp = evt.clientX;
yUp = evt.clientY;
}
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) {
// ledt
switcher(Math.min(currentIndex + 1, _listLen - 1));
} else {
// right
switcher(Math.max(currentIndex - 1, 0));
}
} else {
if ( yDiff > 0 ) {
// up
setMiniMapState(1);
} else {
// down
if (swipStartEle.classList.contains('list-header') || $(swipStartEle).parents('.list-header').length || !$(evt.target).closest('.list-items').scrollTop()) {
setMiniMapState(-1);
updateMinimapScroll();
}
}
}
/* reset values */
xDown = null;
yDown = null;
}
})();
//# sourceURL=pen.js
</script>
</body></html>
