Skip to content
This repository has been archived by the owner on Jun 23, 2020. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Extract some styling from js to css
  • Loading branch information
jcamenisch committed Apr 3, 2012
1 parent e8ca3da commit e5f9d34
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 57 deletions.
1 change: 1 addition & 0 deletions .gitignore
@@ -0,0 +1 @@
.sass-cache/
23 changes: 23 additions & 0 deletions slidable.css
@@ -0,0 +1,23 @@
.slidable-wrapper button {
position: absolute;
top: 50%;
margin-top: -12px;
width: 24px;
height: 24px;
padding: 0;
border: none;
background-color: transparent;
background-image: url("slidable.png");
background-repeat: no-repeat;
background-size: auto auto;
border: none;
z-index: 1;
}
.slidable-wrapper button.next {
background-position: -24px 0;
right: -24px;
}
.slidable-wrapper button.prev {
background-position: 0 0;
left: -24px;
}
89 changes: 32 additions & 57 deletions slidable.js
Expand Up @@ -36,26 +36,6 @@
} }


var spriteButton = function(kind, css) { var spriteButton = function(kind, css) {
css = $.extend({
position: 'absolute',
top: '50%',
width: '24px',
height: '24px',
padding: '0',
border: 'none',
backgroundColor: 'transparent',
backgroundImage: 'url("slidable.png")',
backgroundRepeat: 'no-repeat',
backgroundSize: 'auto auto',
border: 'none',
zIndex: '1'
}, css);
width = +css.width.replace(/[^0-9]/g,'');
height = +css.height.replace(/[^0-9]/g,'');

css.backgroundPosition = -width * {prev: 0, next: 1}[kind] + 'px 0px';
css.marginTop = css.marginTop || Math.round(-height/2) + 'px';
css[{prev: 'left',next: 'right'}[kind]] = -width + 'px';
return $('<button />').addClass(kind).css(css); return $('<button />').addClass(kind).css(css);
} }


Expand Down Expand Up @@ -121,24 +101,17 @@
else else
columns = Math.ceil(items.size()/rows); columns = Math.ceil(items.size()/rows);


wrapper.css($.extend( wrapper.css(options.css.wrapper);
{ height: rows * itemHeight},
options.css.wrapper
));


var default_list_css = vertical ? var default_list_css = vertical ?
{ {
width: itemWidth * itemsWide, width: itemWidth * itemsWide
height: itemHeight * Math.max(rows, itemsHigh)
} : { } : {
width: itemWidth * Math.max(columns, itemsWide), width: itemWidth * Math.max(columns, itemsWide)
height: itemHeight * itemsHigh
} }
; ;
list.css($.extend(default_list_css, options.css.list)); list.css($.extend(default_list_css, options.css.list));
viewport.css(options.css.viewport = $.extend({ viewport.css(options.css.viewport);
width: itemWidth * itemsWide + 'px'
}, options.css.viewport ));


list.slide_increment = options.slide_increment || 1; list.slide_increment = options.slide_increment || 1;
list.slide_position = 0; list.slide_position = 0;
Expand Down Expand Up @@ -220,35 +193,37 @@
} }
} }


if (list.options.pager) list.pager = $(list.options.pager, list.parent().parent().parent()); if (list.options.pager) {
if (list.pager.length && list.max_slide_position) { list.pager = $(list.options.pager, list.parent().parent().parent());
var if (list.pager.length && list.max_slide_position) {
pager = list.pager, var
button_el = pager.is('ul') ? 'li' : 'span', pager = list.pager,
positions = [], last_position = list.max_slide_position button_el = pager.is('ul') ? 'li' : 'span',
; positions = [], last_position = list.max_slide_position
;


for (var i = 0; i < last_position; i += list.slide_increment) positions.push(i); for (var i = 0; i < last_position; i += list.slide_increment) positions.push(i);
positions.push(last_position); positions.push(last_position);
$.each(positions, function(i, position) { $.each(positions, function(i, position) {
var button = $('<'+button_el+' />'), a = $('<a />'); var button = $('<'+button_el+' />'), a = $('<a />');
a.attr({ a.attr({
href: '#position-'+position, href: '#position-'+position,
'class': position === 0 ? 'active' : '', 'class': position === 0 ? 'active' : '',
'data-index': position 'data-index': position
}); });
a.click(function(){ a.click(function(){
list.scrollTo($(this).data('index')); list.scrollTo($(this).data('index'));
list.autoRotate(false); list.autoRotate(false);
return false; return false;
});
a.appendTo(button);
button.appendTo(pager);
}); });
a.appendTo(button);
button.appendTo(pager);
});


list.options.beforeScroll = function(position){ list.options.beforeScroll = function(position){
$('.active', pager).removeClass('active'); $('.active', pager).removeClass('active');
$('a[data-index='+(position)+']', pager).addClass('active'); $('a[data-index='+(position)+']', pager).addClass('active');
}
} }
} }
list.autoRotate = function(delay){ list.autoRotate = function(delay){
Expand Down
24 changes: 24 additions & 0 deletions slidable.sass
@@ -0,0 +1,24 @@
.slidable-wrapper

$button-size: 24px

button
position: absolute
top: 50%
margin-top: -$button-size/2
width: $button-size
height: $button-size
padding: 0
border: none
background-color: transparent
background-image: url("slidable.png")
background-repeat: no-repeat
background-size: auto auto
border: none
z-index: 1
&.next
background-position: -$button-size 0
right: -$button-size
&.prev
background-position: 0 0
left: -$button-size

0 comments on commit e5f9d34

Please sign in to comment.