community_dev start adding percent param to slider_navigation

library/ZendAfi/View/Helper/Accueil/Base.php

@@ -375,6 +375,7 @@ class ZendAfi_View_Helper_Accueil_Base extends ZendAfi_View_Helper_ModuleAbstrac
 		$options->width = $preferences['op_navigation_window_width'];
 		$options->height= $preferences['op_navigation_window_height'];
 		$options->strategy = $preferences['op_navigation_mode'];
+		$options->unit = $preferences['op_navigation_unit'];
 		$options->cycle = isset($preferences['op_navigation_cycle']) ? $preferences['op_navigation_cycle'] : 0 ;
 
 		Class_ScriptLoader::getInstance()

public/opac/java/diaporama_navigation/properties.phtml

@@ -8,14 +8,24 @@ $form
 									 'multiOptions' => ['buttons' => $this->_('Un bouton pour chaque élément'),
 																			'next_previous' => $this->_('Boutons précédent et suivant'),
 																			'preview' => $this->_('Une miniature pour chaque élément')]])
+
+->addElement('select',
+						 'op_navigation_unit',
+						 ['label' => $this->_('Unité utilisée pour la largeur du widget'),
+							'value' => $this->preferences['op_navigation_unit'],
+							'multiOptions' => ['px' => $this->_('Pixels'),
+																 '%' => $this->_('Pourcentages')]])
+
 ->addElement('text',
 						 'op_navigation_window_width',
-						 ['label' => $this->_('Largeur du widget en pixels'),
+						 ['label' => $this->_('Largeur du widget'),
 							'value' => $this->preferences['op_navigation_window_width']])
+
 ->addElement('text',
 						 'op_navigation_window_height',
 						 ['label' => $this->_('Hauteur du widget en pixels'),
 							'value' => $this->preferences['op_navigation_window_height']])
+
 ->addElement('text',
 						 'op_navigation_cycle',
 						 ['label' => $this->_('Délai de défilement en millisecondes'),

public/opac/java/slider_navigation/slider_navigation.js

@@ -30,8 +30,8 @@
       return html;
     
     html = upgradeHtml(html);
-    html = setWindowAndArticleSize(html, 'width:' + options.width + 'px;height:' + options.height + 'px');
-    html = placeArticlesWithPosition(html, 0, options.width);
+    html = setWindowAndArticleSize(html, 'width:' + options.width + options.unit + ';height:' + options.height + 'px', options);
+    html = placeArticlesWithPosition(html, 0, options.width, options.unit);
 
     var strategy = getStrategy(options.strategy);
     html = strategy.generateButtons(html);
@@ -71,23 +71,26 @@
     }
 
     
-    function setWindowAndArticleSize(html, size) {
+    function setWindowAndArticleSize(html, size, properties) {
       html.find('article').attr('style', size);
+      if(properties.unit == '%')
+	html.find('article').css('width', (properties.width / html.find('article').length) + properties.unit);
+
       html.find('div.window').attr('style', size);
       return html;
     }
 
 
-    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);
+    function placeArticlesWithPosition(html, position, width, unit) {
+      html.find('div.news_row').css('margin-left', position + unit);
+      html.find('div.news_row').css('width' ,(html.find('article').length * width) + unit);
       return html;
     }
   };
 
   
-  function initCssForHorizontalSlide(length) {
-    return {'margin-left': length+'px', 
+  function initCssForHorizontalSlide(length, unit) {
+    return {'margin-left': length + unit, 
 	    'transition-property': 'all', 
 	    'transition-duration': '0.8s'};
   }
@@ -118,7 +121,7 @@
 	html.find('div[data-article]').removeClass('selected');
 	$(this).addClass('selected');
 	my.current_position = $(this).data('article');
-	html.find('div.news_row').css(initCssForHorizontalSlide(((-1) * ((my.current_position-1) * properties.width))));
+	html.find('div.news_row').css(initCssForHorizontalSlide(((-1) * ((my.current_position-1) * properties.width)), properties.unit));
       });
       return html;
     }
@@ -141,28 +144,38 @@
     };
 
     this.implementsButtons = function(html, properties) {
-      var right_cleat = ((html.find('article').length * properties.width) - properties.width) * (-1);
+      var right_cleat = (properties.width / html.find('article').length) * (-1);
+
+      if(properties.unit == 'px')
+	var right_cleat = ((html.find('article').length * properties.width) - properties.width) * (-1);
+
       this.right_cleat = right_cleat;
       var left_cleat = 0;
       this.left_cleat = left_cleat;
 
       html.find('div[data-event="next"]').click(function() {
 	var old_margin = parseInt( html.find('div.news_row').css('margin-left'));
+	if(properties.unit == "%")
+	  var old_margin = 100 * old_margin / html.find('div.news_row').width();
+
 	var length = (old_margin > right_cleat && (old_margin % properties.width == 0)) 
 	  ? old_margin - parseInt( properties.width )
 	  : right_cleat;
 
-	html.find('div.news_row').css(initCssForHorizontalSlide(length));
+	html.find('div.news_row').css(initCssForHorizontalSlide(length, properties.unit));
       });
 
 
       html.find('div[data-event="previous"]').click(function() {
 	var old_margin = parseInt( html.find('div.news_row').css('margin-left'));
+	if(properties.unit == "%")
+	  var old_margin = 100 * old_margin / html.find('div.news_row').width();
+
 	var length = (old_margin < left_cleat && (old_margin % properties.width == 0)) 
 	  ? old_margin + parseInt( properties.width )
 	  : 0;
 
-	html.find('div.news_row').css(initCssForHorizontalSlide(length));
+	html.find('div.news_row').css(initCssForHorizontalSlide(length, properties.unit));
       });
 
       return html;

public/opac/java/slider_navigation/tests/agenda_slider_test.js

@@ -28,7 +28,7 @@ QUnit.module('slider_navigation', {
 		+'<article>Bokeh la biquette</article>'
 		+'</div>');
 
-    fixture.slider_navigation({width:110, height:80, strategy:'next_previous', cycle: 500});
+    fixture.slider_navigation({width: 110, height: 80, strategy: 'next_previous', cycle: 500, unit: 'px'});
   }
 });
 

public/opac/java/slider_navigation/tests/news_slider_test.js

@@ -29,7 +29,7 @@ QUnit.module('slider_navigation', {
 		+'<article>Biquette</article>'
 		+'</div>');
 
-    fixture.slider_navigation({width:50, height:300});
+    fixture.slider_navigation({width:50, height:300, unit: 'px'});
   }
 });
 

public/opac/java/slider_navigation/tests/preview_slider_test.js

@@ -27,7 +27,7 @@ QUnit.module('slider_navigation', {
 		+'<article>Bokeh la biquette</article>'
 		+'</div>');
 
-    fixture.slider_navigation({width:110, height:80, strategy:'preview', cycle: '500'});
+    fixture.slider_navigation({width:110, height:80, strategy:'preview', cycle: '500', unit: 'px'});
   }
 });
 

tests/application/modules/admin/controllers/AccueilControllerCmsTest.php

@@ -77,13 +77,13 @@ class Admin_AccueilControllerCmsTestWithDefaultDiaporamaNavigation extends Admin
 
 	/** @test */
 	public function windowWidthShouldBeSetTo350px() {
-		$this->assertXPath('//div[@id="objet_props"]//input[@name="op_navigation_window_width"][@value="350"]');
+		$this->assertXPath('//div[@id="objet_props"]//input[@name="op_navigation_window_width"][@value="350px"]');
 	}
 
 
 	/** @test */
 	public function windowHeightShouldBeSetTo250px() {
-		$this->assertXPath('//div[@id="objet_props"]//input[@name="op_navigation_window_height"][@value="250"]');
+		$this->assertXPath('//div[@id="objet_props"]//input[@name="op_navigation_window_height"][@value="250px"]');
 	}
 }