Skip to content

Commit

Permalink
Add scroll bar support
Browse files Browse the repository at this point in the history
  • Loading branch information
Valery Kamensky committed Feb 26, 2013
1 parent 9f0138c commit 65a85b9
Show file tree
Hide file tree
Showing 9 changed files with 2,251 additions and 16 deletions.
6 changes: 4 additions & 2 deletions Gruntfile.js
View file
Expand Up @@ -13,7 +13,9 @@ module.exports = function(grunt) {
paths: {
'backbone': '../vendor/backbone-min',
'underscore': '../vendor/underscore-min',
'jquery': '../vendor/jquery-1.9.0.min'
'jquery': '../vendor/jquery-1.9.0.min',
'draggable': '../vendor/jquery-ui-1.10.1.draggable'

},

baseUrl: 'src',
Expand All @@ -22,7 +24,7 @@ module.exports = function(grunt) {

out: 'dist/lenta.js',

exclude: ['backbone', 'underscore', 'jquery']
exclude: ['backbone', 'underscore', 'jquery', 'draggable']
}

}
Expand Down
17 changes: 17 additions & 0 deletions demo/example1.html
View file
Expand Up @@ -7,6 +7,23 @@

html, body {height: 100%}
body {margin: 0; padding: 0;}

.lenta .lenta-viewport ul li {
margin: 100px;
padding: 100px;
}

.lenta .lenta-viewport ul li:last-child {
padding-right: 0;
margin-right: 0;

}

.lenta .lenta-viewport ul li:first-child {
padding-left: 0;
margin-left: 0;
border: 1px solid red;
}

</style>
<link rel="stylesheet" type="text/css" href="../css/lenta.css" />
Expand Down
1 change: 1 addition & 0 deletions demo/example2.html
View file
Expand Up @@ -24,6 +24,7 @@

<div class="lenta loading"
data-lenta-height="400"
data-lenta-vertical-align="center"
data-lenta-aspect-ratio="1" style="border: 1px solid red; margin-left: auto; margin-right: auto;">

<a class="lenta-next lenta-btn" href="#next">next</a>
Expand Down
130 changes: 130 additions & 0 deletions demo/example3.html
View file
@@ -0,0 +1,130 @@
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="../vendor/require.js"></script>
<link rel="stylesheet" type="text/css" href="../css/lenta.css" />
<style type="text/css">

html, body {height: 100%}
body {margin: 0; padding: 0;}


.lenta-scrollbar-handler {
height: 10px;
width: 10px;
position: absolute;
bottom: 0px;
background: #666;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.lenta-scrollbar {
height: 10px;
width: 100%;
position: absolute;
bottom: 0px;
background: #ddd;
z-index: 9999;
}

</style>

</head>
<body>

<div class="lenta loading"
data-lenta-height="600">

<a class="lenta-next lenta-btn" href="#next">next</a>
<a class="lenta-prev lenta-btn" href="#prev">prev</a>

<div class="lenta-viewport">
<ul>
<li class="loading" data-lenta-width="612" data-lenta-height="612">
<img data-src="images/1.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="1024" data-lenta-height="681">
<img data-src="images/2.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="424" data-lenta-height="684">
<img data-src="images/3.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="940" data-lenta-height="660">
<img data-src="images/4.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="424" data-lenta-height="684">
<img data-src="images/5.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="987" data-lenta-height="684">
<img data-src="images/6.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="940" data-lenta-height="668">
<img data-src="images/7.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="612" data-lenta-height="612">
<img data-src="images/8.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="940" data-lenta-height="656">
<img data-src="images/9.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="1024" data-lenta-height="666">
<img data-src="images/10.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="457" data-lenta-height="684">
<img data-src="images/11.jpg" src="data:image/gif," alt=""/>
</li>
<li class="loading" data-lenta-width="710" data-lenta-height="300">
<img data-src="images/12.jpg" src="data:image/gif," alt=""/>
</li>
</ul>
<div class="lenta-scrollbar"><div class="lenta-scrollbar-handler"></div></div>
</div>

</div>

<script>

requirejs.config({
baseUrl: '../' + (document.location.hash == '#dist'? 'dist': 'src'),
paths: {
'backbone': '../vendor/backbone-min',
'underscore': '../vendor/underscore-min',
'jquery': '../vendor/jquery-1.9.0.min',
'loading-queue': '../vendor/jquery.loading-queue.min',
'draggable': '../vendor/jquery-ui-1.10.1.draggable'
},
shim: {
'draggable': {
deps: ['jquery'],
exports: '$'
},
'loading-queue': {
deps: ['jquery'],
exports: '$'
},
'backbone': {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
}
}
});

require(['lenta', 'loading-queue'],function(Lenta){

var lenta = new Lenta({
el: $('.lenta')
});

lenta.render();

$('img').each(function() {
$(this).loadingQueue().then(function(img) {
$(img).parent('li').removeClass('loading');
});
});
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion dist/lenta.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

78 changes: 66 additions & 12 deletions src/lenta.js
View file
Expand Up @@ -2,16 +2,20 @@ define([

'backbone',
'lenta/slide',
'lenta/mixins/data-options'

], function(Backbone, Slide, DataOptionsMixin) {
'lenta/scrollbar',
'lenta/mixins/data-options',
'draggable'

], function(Backbone, Slide, Scrollbar, DataOptionsMixin) {

var Lenta = Backbone.View.extend({

timerMoveOnResize: null,

options: {
height: 0,
scrollbarSelector: '.lenta-scrollbar',
viewportSelector: '.lenta-viewport',
sliderSelector: '.lenta-viewport > ul',
slidesSelector: '.lenta-viewport > ul > li',
prevBtnSelector: '.lenta-prev',
Expand All @@ -20,7 +24,9 @@ define([
index: 0,
onMovingCssClass: 'moving',
onFocusCssClass: 'focus',
aspectRatio: null
aspectRatio: null,
align: 'left',
verticalAlign: 'top'
},

initialize: function() {
Expand All @@ -29,9 +35,11 @@ define([

this.parseOptions();

this.scrollbar = null;
this.slider = this.$(this.options.sliderSelector);
this.prevBtn = this.$(this.options.prevBtnSelector);
this.nextBtn = this.$(this.options.nextBtnSelector);
this.viewport = this.$(this.options.viewportSelector);

this.nextBtn
.on('click', this.next);
Expand All @@ -40,11 +48,19 @@ define([
.on('click', this.prev);

this.$(this.options.slidesSelector)
.on('click', this.toSlide);
.on('click', this.onSlideClick);

this.on('moving', this.initControls);

$(window).resize(this.onWindowResize);

if(this.$(this.options.scrollbarSelector).length) {

this.scrollbar = new Scrollbar({
el: this.$(this.options.scrollbarSelector),
lenta: this
});
}
},

onWindowResize: function() {
Expand Down Expand Up @@ -78,16 +94,21 @@ define([
}
},

toSlide: function(e) {
onSlideClick: function(e) {
var slide = $(e.currentTarget);
this.toSlide(slide);
},

toSlide: function(slideNode) {

var isFocused = $(e.currentTarget)
var isFocused = slideNode
.hasClass(this.options.onFocusCssClass);

if(!isFocused) {

var index = this.$el
.find(this.options.slidesSelector)
.index(e.currentTarget);
.index(slideNode);

if(index + 1 <= this.slides.length && index >= 0)
this.move(this.options.index = index);
Expand Down Expand Up @@ -180,11 +201,44 @@ define([

this.slider.width(width);

this.align();

this.trigger('resized');

return this;
},

render: function() {
align: function() {

if(this.options.align == 'center') {

var left = this.$el.parent().width() / 2 - this.$el.width() / 2;

this.$el.css('left', left);

} else if(this.options.align == 'right') {

var left = this.$el.parent().width() - this.$el.width();

this.$el.css('left', left);
}

if(this.options.verticalAlign == 'center') {

var top = this.$el.parent().height() / 2 - this.$el.height() / 2;

this.$el.css('top', top);

} else if(this.options.verticalAlign == 'bottom') {

var top = this.$el.parent().height() - this.$el.height();

this.$el.css('top', top);
}
},

render: function() {

this.$el.css({
'position': 'relative',
'max-height': this.options.height
Expand All @@ -203,7 +257,7 @@ define([
this.resize().move(this.options.index);

this.$el.removeClass('loading');

return this;
}
});
Expand Down

0 comments on commit 65a85b9

Please sign in to comment.