Skip to content

Instantly share code, notes, and snippets.

@rn404

rn404/index.html

Created February 17, 2014 22:09
Show Gist options
  • Save rn404/9060255 to your computer and use it in GitHub Desktop.
Save rn404/9060255 to your computer and use it in GitHub Desktop.
Download ZIP
slide.js
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ff-a.sp.mbga.jp/smart/ffjm/css/min/ffjm-all.css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
<div class="container" data-slide-role="container">
<ul class="slide" data-slide-role="slide">
<li class="card" data-slide-role="card">
hogehoge1
</li>
<li class="card" data-slide-role="card">
hogehoge2
</li>
<li class="card" data-slide-role="card">
hogehoge3
</li>
</ul>
<span class="prev" data-slide-role="prev">prev</span>
<span class="next" data-slide-role="next">next</span>
<ol class="pager" data-slide-role="pager">
</ol>
</div>
<style>
.container{
/*
width: 320px;
*/
overflow: hidden;
-webkit-box-sizing: border-box;
}
.slide{
margin: 10px auto;
width: 100%;
display: table;
}
.card{
display: table-cell;
background-color: #6655ac;
border: 1px solid #c6b7fc;
padding: 10px;
height: 50px;
text-align: center;
}
.prev, .next{
display: inline-block;
border: 1px solid #fff;
padding: 5px;
text-align: center;
-webkit-box-sizing: border-box;
}
.prev.disabled, .next.disabled{
opacity: 0.7;
}
.pager{
margin-top: 5px;
text-align: center;
}
.pager li{
display: inline-block;
padding: 5px;
border: 1px solid #fff;
margin-right :5px;
}
.pager li.active{
border-color: cyan;
color: cyan;
font-weight: bold;
}
.pager li:list-child{
margin-right: 0;
}
</style>
<script src="http://ff-a.sp.mbga.jp/smart/ffjm/js/riddle.js"></script>
<script src="slide.js"></script>
</body>
</html>
Raw
slide.js
;(function (_win, undefined) {
var touch = 'ontouchend' in _win,
_doc = _win.document,
evt = {
start : touch ? 'touchstart' : 'mousedown',
move : touch ? 'touchmove' : 'mousemove',
end : touch ? 'touchend' : 'mouseup'
},
move = false;
// Extend method for apply
r.proxy = function(fn, scope) {
return function() {
fn.apply(scope, arguments);
}
}
function Slide () {
this.name = 'slide';
this.role = [ 'container', 'slide', 'card', 'prev', 'next', 'pager' ];
this.duration = 500;
this.flag = false;
this.current = 1;
this.reserve;
this.seat;
this._construct();
};
Slide.prototype = {
_construct: function () {
var _self = this;
_self.attrName = "data-"+_self.name+"-role";
_self.elms = _self._constElmArray(_self.role);
var temp = r('['+_self.attrName+']');
temp.forEach(function (elm) { _self._createElmArray(elm) });
_self._init();
},
_init: function () {
var _self = this,
elms = _self.elms,
seat = _self.seat = elms.card.length,
dx = elms.container[0].clientWidth,
overAllWidth = dx * seat;
for (var i = elms.card.length; i--; ){
elms.card[i].style.width = dx + 'px';
};
elms.slide[0].style.width = overAllWidth + 'px';
_self._createPager();
_self._switchView();
_self._bind();
},
_bind: function () {
var _self = this,
elms = _self.elms,
prev = r(_self.elms.prev[0]),
next = r(_self.elms.next[0]),
pageNum = r('li', _self.elms.pager[0]);
prev.bind(evt.start, r.proxy(this._resetFlags, this))
.bind(evt.move, r.proxy(this._checkMove, this))
.bind(evt.end, r.proxy(this._checkTap, this));
next.bind(evt.start, r.proxy(this._resetFlags, this))
.bind(evt.move, r.proxy(this._checkMove, this))
.bind(evt.end, r.proxy(this._checkTap, this));
pageNum.bind(evt.start, r.proxy(this._resetFlags, this))
.bind(evt.move, r.proxy(this._checkMove, this))
.bind(evt.end, r.proxy(this._checkTap, this));
},
_resetFlags: function () {
move = false;
},
_checkMove: function () {
move = true;
},
_checkSeat: function () {
if (this.reserve == this.current) {
this.reserve = undefined;
return false;
} else if (this.reserve <= 0){
this.reserve = this.seat;
} else if (this.reserve > this.seat) {
this.reserve = 1;
};
},
_checkTap: function (elm) {
if (move) return;
var role = elm.target.attributes[this.attrName] ?
elm.target.attributes[this.attrName].value : undefined;
if (role == 'prev') {
this.reserve = this.current -1;
} else if (role == 'next') {
this.reserve = this.current +1;
} else {
this.reserve = Math.abs(elm.target.innerHTML);
};
this._slideTo();
this._switchView();
},
_slideTo: function (index) {
if (this._checkSeat() == false) return false;
var slide = r(this.elms.slide[0]),
c = this.elms.container[0].clientWidth,
dX = (this.reserve -1) * (-1),
disX = dX * c,
duration = this.duration/1000;
slide.css({
'-webkit-transform' : 'translate3d(' + disX + 'px, 0px, 0px)',
'-webkit-transition' : duration + 's ease-in-out'
});
this.current = this.reserve;
this.reserve = undefined;
},
_switchView: function(){
var _self = this,
elms = this.elms,
nombre = r('li', elms.pager[0]),
pageNum = elms.card.length;
/*
if ( this.current == 1) {
r(elms.prev[0]).addClass('disabled');
} else {
r(elms.prev[0]).removeClass('disabled');
};
if ( this.current == pageNum) {
r(elms.next[0]).addClass('disabled');
} else {
r(elms.next[0]).removeClass('disabled');
};
*/
nombre.forEach(function (page) {
if (Math.abs(page.innerHTML) == _self.current) {
r(page).addClass('active');
} else {
r(page).removeClass('active');
};
});
},
_createPager: function () {
var _self = this,
elms = _self.elms,
pager = r(_self.elms.pager[0]),
pageNum = elms.card.length;
for (var i = 0; i < pageNum; i++ ){
var num = '<li>'+ (i+1) +'</li>';
pager.add(num);
};
},
_constElmArray: function (roles) {
var elms = {};
for (var i = roles.length; i--; ) {
var name = roles[i];
elms[name] = [];
};
return elms;
},
_createElmArray: function (elm) {
var _self= this,
role = r(elm).attr(_self.attrName);
for (var i = _self.role.length; i--; ) {
if (_self.role[i] == role){
_self.elms[role].push(elm);
};
};
}
};
_win.slide = new Slide();
})(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment