diff --git a/public/opac/java/slider_navigation/slider_navigation.js b/public/opac/java/slider_navigation/slider_navigation.js
index c20e8954207851c2ecc6b88f7d4a8d3cd3eaa65c..120b292cea64fbe4be6594f4e32e68de87c12a4a 100755
--- a/public/opac/java/slider_navigation/slider_navigation.js
+++ b/public/opac/java/slider_navigation/slider_navigation.js
@@ -25,103 +25,103 @@
var html = $(this);
var articles = html.find('article');
-
- if(!articles.length>0){
- return $(this);
- }
- var article_width = width;
- var article_height = height;
- var article_size = 'width:'+article_width+'px;height:'+article_height+'px';
-
- prepareHtml();
-
- var news_row = html.find('div.news_row');
- var position = 0;
-
- var strategy;
-
- initArticles();
-
- strategy = getStrategy();
-
- html = strategy.createButton();
- html = strategy.implementsButtons();
+ if(!articles.length>0)
+ return html;
+
+ var properties = new SliderProperties({'url' : url,
+ 'width' : width,
+ 'height' : height,
+ 'strategy_label' : button_strategy});
+
+ html = upgradeHtml(html);
+ html = setWindowAndArticleSize(html, properties.article_size);
+ html = placeArticlesWithPosition(html, properties.position, properties.width);
+ var strategy = getStrategy(properties.strategy_label);
+ html = strategy.generateButtons(html);
+ html = strategy.implementsButtons(html, properties);
- function getStrategy() {
- if(button_strategy === "next_previous")
- return new Strategy_Next_Previous(html, articles, article_width, news_row);
+ function getStrategy(strategy) {
+ if(strategy === "next_previous")
+ return new Strategy_Next_Previous();
- if(button_strategy ==="preview")
- return new Strategy_Preview(html, articles, article_width, position, news_row)
+ if(strategy ==="preview")
+ return new Strategy_Preview()
- return new Strategy(html, articles, article_width, position, news_row);
+ return new Strategy();
}
- function prepareHtml() {
+ function upgradeHtml(html) {
html.find('div.article_full_separator').remove();
- articles.wrapAll('<div class="news_row"></div>');
+ html.find('article').wrapAll('<div class="news_row"></div>');
html.find('div.news_row').wrap('<div class="window"></div>');
html.find('div.window').wrap('<div class="slider_navigation"></div>');
html.find('div.slider_navigation').append('<div class="slider_navigation_controls"></div>');
- setSize();
+ return html;
}
- function setSize() {
- articles.attr('style', article_size);
- html.find('div.window').attr('style', article_size);
+ function setWindowAndArticleSize(html, size) {
+ html.find('article').attr('style', size);
+ html.find('div.window').attr('style', size);
+ return html;
}
- function initArticles() {
- news_row.css('margin-left', position+'px');
- news_row.width(articles.length*article_width);
+ function placeArticlesWithPosition(html, position, width) {
+ html.find('div.news_row').css('margin-left', position+'px');
+ html.find('div.news_row').width(html.find('article').length * width);
+ return html;
}
};
- var initCssForHorizontalSlideOnElement = function(element, length) {
- return element.css({'margin-left': length+'px',
- 'transition-property': 'all',
- 'transition-duration': '0.8s'});
+
+
+ function initCssForHorizontalSlide(length) {
+ return {'margin-left': length+'px',
+ 'transition-property': 'all',
+ 'transition-duration': '0.8s'};
+ }
+
+
+
+
+ function SliderProperties(options, jquery) {
+ this.url = options.url;
+ this.width = options.width;
+ this.height = options.height;
+ this.strategy_label = options.strategy_label;
+ this.article_size = 'width:' + this.width + 'px;height:' + this.height + 'px';
+ return this;
}
- var Strategy = function(html, articles, article_width, position, news_row) {
- var html = html;
- var articles = articles;
- var article_width = article_width;
- var position = position;
- var news_row = news_row;
+
+
+ function Strategy() {
- this.createButton = function() {
- var slider_controls = html.find('div.slider_navigation_controls');
- articles.each(function(index) {
- slider_controls.append('<div class="slider_button" data-article="'+(index+=1)+'"></div>');
+ this.generateButtons = function(html) {
+ html.find('article').each(function(index) {
+ html.find('div.slider_navigation_controls').append('<div class="slider_button" data-article="'+(index+=1)+'"></div>');
});
return html;
};
- this.implementsButtons = function() {
+ this.implementsButtons = function(html, properties) {
html.find('div[data-article=1]').addClass('selected');
+ html.find('div.news_row').css(initCssForHorizontalSlide(0));
var current_position = 0;
-
html.find('div[data-article]').click(function() {
-
html.find('div[data-article]').removeClass('selected');
$(this).addClass('selected');
-
current_position = $(this).data('article');
-
- position = (-1) * (current_position-1) * article_width;
-
- initCssForHorizontalSlideOnElement(news_row, position);
+ html.find('div.news_row').css(initCssForHorizontalSlide(((-1) * ((current_position-1) * properties.width))));
});
return html;
}
@@ -129,40 +129,35 @@
- var Strategy_Next_Previous = function(html, articles, article_width, news_row) {
- var html = html;
- var articles = articles;
- var article_width = article_width;
- var news_row = news_row;
-
- this.createButton = function() {
+ function Strategy_Next_Previous() {
+ this.generateButtons = function(html) {
html.find('div.slider_navigation_controls')
.append('<div class="slider_button" data-event="previous"></div>')
.append('<div class="slider_button" data-event="next"></div>');
return html;
};
- this.implementsButtons = function() {
- var right_cleat = ((articles.length * article_width) - article_width) * (-1);
+ this.implementsButtons = function(html, properties) {
+ var right_cleat = ((html.find('article').length * properties.width) - properties.width) * (-1);
var left_cleat = 0;
-
+ html.find('div.news_row').css(initCssForHorizontalSlide(0));
html.find('div[data-event="next"]').click(function() {
- var old_margin = parseInt( news_row.css('margin-left'));
- var length = (old_margin > right_cleat && (old_margin % article_width == 0))
- ? old_margin - article_width
+ var old_margin = parseInt( html.find('div.news_row').css('margin-left'));
+ var length = (old_margin > right_cleat && (old_margin % properties.width == 0))
+ ? old_margin - properties.width
: right_cleat;
- initCssForHorizontalSlideOnElement(news_row, length);
+ html.find('div.news_row').css(initCssForHorizontalSlide(length));
});
html.find('div[data-event="previous"]').click(function() {
- var old_margin = parseInt( news_row.css('margin-left'));
- var length = (old_margin < left_cleat && (old_margin % article_width == 0))
- ? old_margin + article_width
+ var old_margin = parseInt( html.find('div.news_row').css('margin-left'));
+ var length = (old_margin < left_cleat && (old_margin % properties.width == 0))
+ ? old_margin + properties.width
: 0;
- initCssForHorizontalSlideOnElement(news_row, length);
+ html.find('div.news_row').css(initCssForHorizontalSlide(length));
});
return html;
@@ -171,16 +166,9 @@
- var Strategy_Preview = function(html, articles, article_width, position, news_row) {
- var html = html;
- var articles = articles;
- var article_width = article_width;
- var position = position;
- var news_row = news_row;
-
- this.createButton = function() {
- var slider_controls = html.find('div.slider_navigation_controls');
- articles.each(function(index) {
+ function Strategy_Preview() {
+ this.generateButtons = function(html, properties) {
+ html.find('article').each(function(index) {
var image_url = $(this).find('.article_content img').attr('src');
var title = $(this).find('header h2').text();
@@ -191,27 +179,13 @@
if(!image_url) {
image_url= baseUrl + '/public/opac/images/buttons/no_preview.png';
}
- slider_controls.append('<div class="preview_button" data-article="'+(index+=1)+'"><img src='+image_url+'></img><span>'+title+'</span></div>');
+ html.find('div.slider_navigation_controls').append('<div class="preview_button" data-article="'+(index+=1)+'"><img src='+image_url+'></img><span>'+title+'</span></div>');
});
return html;
};
- this.implementsButtons = function() {
- html.find('div[data-article=1]').addClass('selected');
- var current_position = 0;
-
- html.find('div[data-article]').click(function() {
-
- html.find('div[data-article]').removeClass('selected');
- $(this).addClass('selected');
-
- current_position = $(this).data('article');
-
- position = (-1) * (current_position-1) * article_width;
-
- initCssForHorizontalSlideOnElement(news_row, position);
- });
- return html;
+ this.implementsButtons = function(html, properties) {
+ return (new Strategy()).implementsButtons(html, properties);
}
};
diff --git a/public/opac/java/slider_navigation/tests/preview_slider_test.js b/public/opac/java/slider_navigation/tests/preview_slider_test.js
index e59adb5f3101b889cc61b7cc98904b9bd6626f2a..5e957218636065c683281779a9d3f943c9070f84 100644
--- a/public/opac/java/slider_navigation/tests/preview_slider_test.js
+++ b/public/opac/java/slider_navigation/tests/preview_slider_test.js
@@ -32,16 +32,16 @@ QUnit.module('slider_navigation', {
});
-test('first button should have preview.png as background', function() {
- deepEqual(fixture.find('div.preview_button[data-article="1"][style="background: url(preview.png) no-repeat center;"]').length, 1, fixture.html());
+test('first button should have preview.png as img', function() {
+ deepEqual(fixture.find('div.preview_button[data-article="1"]').find('img').attr('src'), 'preview.png', fixture.html());
});
test('second button should have playa.png as background', function() {
- deepEqual(fixture.find('div.preview_button[data-article="2"][style="background: url(../folder/playa.png) no-repeat center;"]').length, 1, fixture.html());
+ deepEqual(fixture.find('div.preview_button[data-article="2"]').find('img').attr('src'), '../folder/playa.png', fixture.html());
});
test('third button should have no_preview.png as background', function() {
- deepEqual(fixture.find('div.preview_button[data-article="3"][style="background: url(../public/opac/images/buttons/no_preview.png) no-repeat center;"]').length, 1, fixture.html());
+ deepEqual(fixture.find('div.preview_button[data-article="3"]').find('img').attr('src'), '../public/opac/images/buttons/no_preview.png', fixture.html());
});