Skip to content
Snippets Groups Projects
Commit d31c468e authored by Ghislain Loas's avatar Ghislain Loas
Browse files

dev #16180 refacto slider_navigation.js

parent b192f08b
Branches
Tags
3 merge requests!529Hotline 6.56,!419Dev #15884 ccbs la boucle skin,!402Dev #15884 ccbs la boucle skin
Hide whitespace changes
Inline Side-by-side
public/opac/java/slider_navigation/slider_navigation.js
+ 77
− 103
View file @ d31c468e
......@@ -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);
}
};
......
public/opac/java/slider_navigation/tests/preview_slider_test.js
+ 4
− 4
View file @ d31c468e
......@@ -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());
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment