death to slider!
This commit is contained in:
Matt Claypotch
Родитель
c689cca85c
Коммит
d2cde9bce2
|
|
@ -0,0 +1,55 @@
|
|||
.categories {
|
||||
.icon {
|
||||
background: #D9DDE0 url(../../img/mkt/glyphs/rocket.png) 50% -3px no-re$
|
||||
&:after {
|
||||
top: auto;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
&.cat-books-reference {
|
||||
background-image: url(../../img/mkt/glyphs/books-reference.png);
|
||||
}
|
||||
&.cat-business {
|
||||
background-image: url(../../img/mkt/glyphs/business.png);
|
||||
}
|
||||
&.cat-education {
|
||||
background-image: url(../../img/mkt/glyphs/education.png);
|
||||
}
|
||||
&.cat-entertainment-sports {
|
||||
background-image: url(../../img/mkt/glyphs/entertainment-sports.png$
|
||||
}
|
||||
&.cat-games {
|
||||
background-image: url(../../img/mkt/glyphs/games.png);
|
||||
}
|
||||
&.cat-health-fitness {
|
||||
background-image: url(../../img/mkt/glyphs/health-fitness.png);
|
||||
}
|
||||
&.cat-lifestyle {
|
||||
background-image: url(../../img/mkt/glyphs/lifestyle.png);
|
||||
}
|
||||
&.cat-music {
|
||||
background-image: url(../../img/mkt/glyphs/music.png);
|
||||
}
|
||||
&.cat-news-weather {
|
||||
background-image: url(../../img/mkt/glyphs/news-weather.png);
|
||||
}
|
||||
&.cat-photos-media {
|
||||
background-image: url(../../img/mkt/glyphs/photos-media.png);
|
||||
}
|
||||
&.cat-productivity {
|
||||
background-image: url(../../img/mkt/glyphs/productivity.png);
|
||||
}
|
||||
&.cat-shopping {
|
||||
background-image: url(../../img/mkt/glyphs/shopping.png);
|
||||
}
|
||||
&.cat-social {
|
||||
background-image: url(../../img/mkt/glyphs/social.png);
|
||||
}
|
||||
&.cat-travel {
|
||||
background-image: url(../../img/mkt/glyphs/travel.png);
|
||||
}
|
||||
&.cat-utilities {
|
||||
background-image: url(../../img/mkt/glyphs/utilities.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import 'lib';
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
(function() {
|
||||
z.page.on('fragmentloaded', function() {
|
||||
function initSliders() {
|
||||
// Is this a finger-friendly device?
|
||||
if (z.capabilities.touch) {
|
||||
// is overflow-scrolling: touch supported?
|
||||
if (!z.capabilities.nativeScroll) {
|
||||
$('.slider').each(touchSlider);
|
||||
}
|
||||
return;
|
||||
}
|
||||
//$('.categories h3').linefit();
|
||||
$('.slider').each(mouseSlider);
|
||||
}
|
||||
|
||||
initSliders();
|
||||
$(window).bind('saferesize', initSliders);
|
||||
});
|
||||
|
||||
function touchSlider() {
|
||||
var $el = $(this),
|
||||
$ul = $('ul', $el).eq(0),
|
||||
ulRaw = $ul[0],
|
||||
startX,
|
||||
newX,
|
||||
prevX,
|
||||
currentX = 0,
|
||||
lastMove = 0,
|
||||
contentWidth = 0,
|
||||
prop = z.prefixUpper + 'Transform',
|
||||
sliderWidth = $el.outerWidth();
|
||||
$ul.find('li').each(function() {
|
||||
contentWidth += $(this).outerWidth();
|
||||
});
|
||||
var maxScroll = sliderWidth - contentWidth;
|
||||
$el.find('img').bind('mousedown mouseup mousemove', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
$el.bind('touchstart', function(e) {
|
||||
// e.preventDefault();
|
||||
var oe = e.originalEvent;
|
||||
startX = oe.touches[0].pageX;
|
||||
$ul.addClass('panning');
|
||||
$ul.css('-webkit-transition-timing', null);
|
||||
lastMove = oe.timeStamp;
|
||||
});
|
||||
$el.bind('touchmove', function(e) {
|
||||
// e.preventDefault();
|
||||
prevX = newX;
|
||||
newX = currentX + (e.originalEvent.targetTouches[0].pageX - startX);
|
||||
ulRaw.style[prop] = 'translate3d(' + newX + 'px, 0, 0)';
|
||||
lastMove = e.originalEvent.timeStamp;
|
||||
});
|
||||
$el.bind('touchend', function(e) {
|
||||
var oe = e.originalEvent;
|
||||
var eX = oe.changedTouches[0].pageX;
|
||||
newX = currentX + (eX - startX);
|
||||
var dist = newX - prevX;
|
||||
if (Math.abs(startX - newX) < 10) {
|
||||
return true;
|
||||
}
|
||||
e.preventDefault();
|
||||
var time = oe.timeStamp - lastMove;
|
||||
var finalX = newX + (dist * 350 / time);
|
||||
// if (finalX > 0 || finalX < contentWidth) {
|
||||
// var overShoot = Math.abs(finalX > 0 ? finalX : (contentWidth - finalX));
|
||||
// var after_finalX = Math.min(Math.max(finalX, maxScroll), 0);
|
||||
// $ul.one('webkitTransitionEnd', function() {
|
||||
// $ul.css('-webkit-transform', 'translate3d(' + after_finalX + 'px, 0, 0)');
|
||||
// currentX = after_finalX;
|
||||
// });
|
||||
// } else {
|
||||
finalX = Math.min(Math.max(finalX, maxScroll), 0);
|
||||
// }
|
||||
currentX = finalX;
|
||||
$ul.removeClass('panning');
|
||||
$ul.css('-moz-transform', 'translate3d(' + currentX + 'px, 0, 0)');
|
||||
$ul.css('-webkit-transform', 'translate3d(' + currentX + 'px, 0, 0)');
|
||||
});
|
||||
$(window).bind('saferesize', function() {
|
||||
sliderWidth = $el.outerWidth();
|
||||
maxScroll = sliderWidth - contentWidth;
|
||||
});
|
||||
}
|
||||
|
||||
function mouseSlider() {
|
||||
var currentPage,
|
||||
$this = $(this),
|
||||
$nextLink = $('.next-page', $this),
|
||||
$prevLink = $('.prev-page', $this),
|
||||
$li = $('li', $this),
|
||||
perPage = itemsPerPage($li),
|
||||
maxPage = numPages($li, perPage);
|
||||
|
||||
$prevLink.on('click', _pd(prevPage));
|
||||
$nextLink.on('click', _pd(nextPage));
|
||||
|
||||
var showNext = false,
|
||||
$window = $(window),
|
||||
fold = $window.width() + $window.scrollLeft();
|
||||
$li.each(function() {
|
||||
var $this = $(this);
|
||||
// Check if this item is off screen!
|
||||
if ($this.offset().left + $this.outerWidth() > fold) {
|
||||
return showNext = true;
|
||||
}
|
||||
});
|
||||
// Show "next" arrow if there is at least one page.
|
||||
$nextLink.toggleClass('show', showNext && !!maxPage);
|
||||
|
||||
gotoPage(0);
|
||||
|
||||
function gotoPage(n) {
|
||||
if (n < 0 || n > maxPage) {
|
||||
return;
|
||||
}
|
||||
var val = n * perPage * $li.outerWidth(true);
|
||||
// Have no idea why the magic number is needed.
|
||||
val += n * (perPage + ($this.hasClass('categories') ? 14 : 7));
|
||||
currentPage = n;
|
||||
$this.find('ul').css(z.prefixed('transform'),
|
||||
'translateX(-'+val+'px)');
|
||||
if (n === 0) {
|
||||
$prevLink.removeClass('show');
|
||||
} else if (n == maxPage) {
|
||||
$nextLink.removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (currentPage < maxPage) {
|
||||
$prevLink.addClass('show');
|
||||
gotoPage(currentPage+1);
|
||||
}
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (currentPage) {
|
||||
$nextLink.addClass('show');
|
||||
gotoPage(currentPage-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function itemsPerPage($li) {
|
||||
var contWidth = $li.closest('.promo-slider').width();
|
||||
if (!contWidth) {
|
||||
contWidth = $li.closest('.alt-slider').width();
|
||||
}
|
||||
return Math.floor(contWidth / $li.outerWidth(true)) || 1;
|
||||
}
|
||||
|
||||
function numPages($li, perPage) {
|
||||
var rawVal = $li.length / perPage,
|
||||
floorVal = Math.floor($li.length / perPage);
|
||||
return rawVal == floorVal ? floorVal - 1 : floorVal;
|
||||
}
|
||||
})();
|
||||
|
|
@ -86,7 +86,7 @@ CSS = {
|
|||
'css/mkt/ratings.less',
|
||||
'css/mkt/device.less',
|
||||
'css/mkt/abuse.less',
|
||||
'css/mkt/slider.less',
|
||||
'css/mkt/categories.less',
|
||||
'css/mkt/menu.less',
|
||||
'css/mkt/infobox.less',
|
||||
'css/mkt/promo-grid.less',
|
||||
|
|
@ -205,7 +205,6 @@ JS = {
|
|||
'js/mkt/fragments.js',
|
||||
'js/mkt/recaptcha.js',
|
||||
'js/mkt/overlay.js',
|
||||
'js/mkt/slider.js',
|
||||
'js/mkt/login.js',
|
||||
'js/mkt/install.js',
|
||||
'js/mkt/payments.js',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче