Rewoked TAccordion (fixes #340); added AnimationDuration parameter, added example in quickstart.

2 files changed, 97 insertions, 64 deletions

diff --git a/framework/Web/UI/WebControls/TAccordion.php b/framework/Web/UI/WebControls/TAccordion.php
index 7ab35e39..29427195 100644
--- a/framework/Web/UI/WebControls/TAccordion.php
+++ b/framework/Web/UI/WebControls/TAccordion.php
@@ -35,6 +35,14 @@
  * - {@link setActiveHeaderCssClass ActiveHeaderCssClass} - the CSS class name for the active accordion div element (defaults to 'accordion-header-active');

  * - {@link setViewCssClass ViewCssClass} - the CSS class for the div element enclosing view content (defaults to 'accordion-view');

  *

+ * When the user clicks on a view header, the switch between the old visible view and the clicked one is animated.

+ * You can use the {@link setAnimationDuration AnimationDuration} property to set the animation length in seconds;

+ * it defaults to 1 second, and when set to 0 it will produce an immediate switch with no animation.

+ *

+ * The TAccordion auto-sizes itself to the largest of all views, so it can encompass all of them without scrolling.

+ * If you want to specify a fixed height (in pixels), use the {@link setViewHeight ViewHeight} property.

+ * When a TAccordion is nested inside another, it's adviced to manually specify a {@link setViewHeight ViewHeight} for the internal TAccordion

+ *

  * To use TAccordion, write a template like following:

  * <code>

  * <com:TAccordion>

@@ -82,8 +90,8 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 

 	/**

 	 * Returns the index of the active accordion view.

-	 * Note, this property may not return the correct index.

-	 * To ensure the correctness, call {@link getActiveView()} first.

+     * Note, this property may not return the correct index.

+     * To ensure the correctness, call {@link getActiveView()} first.

 	 * @return integer the zero-based index of the active accordion view. If -1, it means no active accordion view. Default is 0 (the first view is active).

 	 */

 	public function getActiveViewIndex()

@@ -100,24 +108,24 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 		$this->setViewState('ActiveViewIndex',TPropertyValue::ensureInteger($value),0);

 	}

 

-	/**

+    /**

 	 * Returns the ID of the active accordion view.

-	 * Note, this property may not return the correct ID.

-	 * To ensure the correctness, call {@link getActiveView()} first.

+     * Note, this property may not return the correct ID.

+     * To ensure the correctness, call {@link getActiveView()} first.

 	 * @return string The ID of the active accordion view. Defaults to '', meaning not set.

-	 */

-	public function getActiveViewID()

-	{

+     */

+    public function getActiveViewID()

+    {

 		return $this->getViewState('ActiveViewID','');

-	}

+    }

 

-	/**

+    /**

 	 * @param string The ID of the active accordion view.

-	 */

-	public function setActiveViewID($value)

-	{

+     */

+    public function setActiveViewID($value)

+    {

 		$this->setViewState('ActiveViewID',$value,'');

-	}

+    }

 

 	/**

 	 * Returns the currently active view.

@@ -173,47 +181,63 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 	}

 

 	/**

-	 * @return string URL for the CSS file including all relevant CSS class definitions. Defaults to ''.

-	 */

+	* @return string URL for the CSS file including all relevant CSS class definitions. Defaults to ''.

+	*/

 	public function getCssUrl()

 	{

 		return $this->getViewState('CssUrl','default');

 	}

 

 	/**

-	 * @param string URL for the CSS file including all relevant CSS class definitions.

-	 */

+	* @param string URL for the CSS file including all relevant CSS class definitions.

+	*/

 	public function setCssUrl($value)

 	{

 		$this->setViewState('CssUrl',TPropertyValue::ensureString($value),'');

 	}

 

 	/**

-	 * @return string CSS class for the whole accordion control div. 

-	 */

+		* @return string CSS class for the whole accordion control div. 

+	*/

 	public function getCssClass()

 	{

 		$cssClass=parent::getCssClass();

-		return $cssClass===''?'accordion':$cssClass;

+			return $cssClass===''?'accordion':$cssClass;

 	}

 

 	/**

-	 * @return string CSS class for the currently displayed view div. Defaults to 'accordion-view'.

-	 */

+		* @return string CSS class for the currently displayed view div. Defaults to 'accordion-view'.

+	*/

 	public function getViewCssClass()

 	{

 		return $this->getViewStyle()->getCssClass();

 	}

 

 	/**

-	 * @param string CSS class for the currently displayed view div.

-	 */

+	* @param string CSS class for the currently displayed view div.

+	*/

 	public function setViewCssClass($value)

 	{

 		$this->getViewStyle()->setCssClass($value);

 	}

 

 	/**

+		* @return string CSS class for the currently displayed view div. Defaults to 'accordion-view'.

+	*/

+	public function getAnimationDuration()

+	{

+		return $this->getViewState('AnimationDuration','1');

+	}

+

+	/**

+	* @param string CSS class for the currently displayed view div.

+	*/

+	public function setAnimationDuration($value)

+	{

+		$this->setViewState('AnimationDuration',$value);

+	}

+

+	/**

 	 * @return TStyle the style for all the view div

 	 */

 	public function getViewStyle()

@@ -227,21 +251,21 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 		return $style;

 	}

 

-	/**

+    /**

 	 * @return string CSS class for view headers. Defaults to 'accordion-header'.

-	 */

+     */

 	public function getHeaderCssClass()

-	{

+    {

 		return $this->getHeaderStyle()->getCssClass();

-	}

+    }

 

-	/**

+    /**

 	 * @param string CSS class for view headers.

-	 */

+     */

 	public function setHeaderCssClass($value)

-	{

+    {

 		$this->getHeaderStyle()->setCssClass($value);

-	}

+    }

 

 	/**

 	 * @return TStyle the style for all the inactive header div

@@ -257,22 +281,21 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 		return $style;

 	}

 

-	/**

+    /**

 	 * @return string Extra CSS class for the active header. Defaults to 'accordion-header-active'.

-	 */

+     */

 	public function getActiveHeaderCssClass()

-	{

+    {

 		return $this->getActiveHeaderStyle()->getCssClass();

-	}

+    }

 

-	/**

+    /**

 	 * @param string Extra CSS class for the active header. Will be added to the normal header specified by HeaderCssClass.

-	 */

+     */

 	public function setActiveHeaderCssClass($value)

-	{

+    {

 		$this->getActiveHeaderStyle()->setCssClass($value);

-	}

-

+    }

 

 	/**

 	 * @return TStyle the style for the active header div

@@ -403,15 +426,15 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 	protected function registerStyleSheet()

 	{

 		$url = $this->getCssUrl();

-

+		

 		if($url === '') {

 			return;

 		}

-

+		

 		if($url === 'default') {

 			$url = $this->getApplication()->getAssetManager()->publishFilePath(dirname(__FILE__).DIRECTORY_SEPARATOR.'assets'.DIRECTORY_SEPARATOR.'accordion.css');

 		}

-

+		

 		if($url !== '') {

 			$this->getPage()->getClientScript()->registerStyleSheetFile($url, $url);

 		}

@@ -423,15 +446,20 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 	protected function registerClientScript()

 	{

 		$id=$this->getClientID();

-		$options = TJavaScript::encode($this->getClientOptions());

+		$options=TJavaScript::encode($this->getClientOptions());

 		$className=$this->getClientClassName();

 		$page=$this->getPage();

 		$cs=$page->getClientScript();

 		$cs->registerPradoScript('accordion');

-		$code = "new $className($options);";

+		$code="new $className($options);";

 		$cs->registerEndScript("prado:$id", $code);

-		$cs->registerHiddenField($id.'_1',$this->getActiveViewIndex());

+		// ensure an item is always active and visible

+		$index = $this->getActiveViewIndex();

+		if(!$this->getViews()->itemAt($index)->Visible)

+			$index=0;

+		$cs->registerHiddenField($id.'_1', $index);

 		$page->registerRequiresPostData($this);

+		$page->registerRequiresPostData($id."_1");

 	}

 

 	/**

@@ -450,21 +478,22 @@ class TAccordion extends TWebControl implements IPostBackDataHandler
 	protected function getClientOptions()

 	{

 		$options['ID']=$this->getClientID();

-		$options['toggleActive']=$this->getActiveHeaderCssClass();

-		$options['toggleClass']=$this->getHeaderCssClass();

-		$options['contentClass']=$this->getViewCssClass();

-		$options['defaultExpandedCount']=$this->getActiveViewIndex()+1;

+		$options['ActiveHeaderCssClass']=$this->getActiveHeaderCssClass();

+		$options['HeaderCssClass']=$this->getHeaderCssClass();

+		$options['Duration']=$this->getAnimationDuration();

+

 		if (($viewheight = $this->getViewHeight())>0)

 			$options['maxHeight'] = $viewheight;

-		/*

-		$viewIDs=array();

+		$views='';

 		foreach($this->getViews() as $view)

 		{

-			if($view->getVisible())

-				$viewIDs[]=$view->getClientID();

+			if($views!='') 

+				$views.=', ';

+			$views.= '"'.$view->getClientID().'":'.($view->getVisible() ? '1': '0' );

 		}

-		$options['Views']='[\''.implode('\',\'',$viewIDs).'\']';

-		*/

+

+		$options['Views']='{'.$views.='}';

+		$viewIDs=array();

 

 		return $options;

 	}

@@ -525,6 +554,9 @@ class TAccordionView extends TWebControl
 	 */

 	protected function addAttributesToRender($writer)

 	{

+		if(!$this->getActive() && $this->getPage()->getClientSupportsJavaScript())

+			$this->getStyle()->setStyleField('display','none');

+

 		$this->getStyle()->mergeWith($this->getParent()->getViewStyle());

 

 		parent::addAttributesToRender($writer);

@@ -622,8 +654,7 @@ class TAccordionView extends TWebControl
 		{

 			$writer->addAttribute('id',$this->getClientID().'_0');

 

-//			$style=$this->getActive()?$this->getParent()->getActiveHeaderStyle():$this->getParent()->getHeaderStyle();

-			$style=$this->getParent()->getHeaderStyle();

+			$style=$this->getActive()?$this->getParent()->getActiveHeaderStyle():$this->getParent()->getHeaderStyle();

 			

 			$style->addAttributesToRender($writer);

 

@@ -687,4 +718,4 @@ class TAccordionViewCollection extends TControlCollection
 	}

 }

 

-?>
\ No newline at end of file
+?>

diff --git a/framework/Web/UI/WebControls/assets/accordion.css b/framework/Web/UI/WebControls/assets/accordion.css
index 09ac764d..842868e7 100644
--- a/framework/Web/UI/WebControls/assets/accordion.css
+++ b/framework/Web/UI/WebControls/assets/accordion.css
@@ -7,16 +7,18 @@ div.accordion-header {
 	padding: 3px; 

 	z-index: 10; position: relative; 

 	cursor: pointer;

-}

-

-div.accordion-header {

 	background-color: #5577aa;

 	color: white; font-weight: bold;

 	border: 1px solid;

 }

 

 div.accordion-header-active {

+	padding: 3px; 

+	z-index: 10; position: relative; 

+	cursor: pointer;

 	background-color: #334477;

+	color: red; font-weight: bold;

+	border: 1px solid red;

 }

 

 div.accordion-view {