runopencode/dm-accordion-behavior-plugin

dmAccordionBehaviorPlugin - Accordion Front Behavior for Diem Extended

dmAccordionBehaviorPlugin for Diem Extended

Author: TheCelavi
Version: 1.0.0
Stability: Stable
Date: November 10th, 2012
Courtesy of Run Open Code
License: Free for all, _(*1)

dmAccordionBehaviorPlugin for Diem Extended is simple accordion UI control., _(*2)

Usage

The simplest and most easiest way to use accordion is to add widgets into zone, and attach dmAccordionBehaviorPlugin to the zone. The behavior will make every odd widget into accordion header end every even widget into accordion content., _(*3)

However, it can work with any HTML element with following structure:, _(*4)

<container>
    <acc-header></acc-header>
    <acc-content></acc-content>
    <acc-header></acc-header>
    <acc-content></acc-content>
    .....
</container>

In order to achieve that, you have to specify the Inner target selector for <container> tag so accordion can identify it and headers and contents as well., _(*5)

Note that in this example tags such as container, acc-header and acc-content are just examples, of course, any HTML structure will work, like using DIV or perhaps UL and LI, _(*6)

HTML output

The behavior will not change structure, it will only add some CSS classes to the tags., _(*7)

<container class="dmAccordionBehavior theme">
    <acc-header class="accordion-title accordion-title-index-0 open"></acc-header>
    <acc-content class="accordion-content accordion-content-index-0 open"></acc-content>
    <acc-header class="accordion-title accordion-title-index-1 closed"></acc-header>
    <acc-content class="accordion-content accordion-content-index-1 closed"></acc-content>
    <acc-header class="accordion-title accordion-title-index-2 closed"></acc-header>
    <acc-content class="accordion-content accordion-content-index-2 closed"></acc-content>      
    .....
</container>

Note theme class at <container> tag - it will be the name of the theme that you have selected in behavior configuration form. In that matter you can style the accordion., _(*8)

Configuration and theming

In dmAccordionBehaviorPlugin/config/dm/config.yml are configuration parameters for this behavior., _(*9)

default:
  dmAccordionBehavior:
    defaults: 
      inner_target: ''
      theme: default
      event: click_open_close
      colapsable: true
      initialy_open: 1 
      animation: slide
      easing: jswing
      duration: 500
    themes: 
      default: 'dmAccordionBehaviorPlugin.default' 

If you have download the behavior via Github, you can modify this file. If you have installed it via Composer, then you have to use Symfony config cascade to override this settings., _(*10)

Section defaults contains default settings for behavior, which behavior form initially displays. If you want some other settings to be shown as default, this is the place for change., _(*11)

Section themes is for theme, and it gets configured as theme_key: path_to_css_file. If user in behavior form selects a default theme, the accordiong view HTML structure will be:, _(*12)

<div class="dmAccordionBehavior default">
    .... titles and contents
</div>

Note that a default class is added, that is, the theme key. Of course, the theme CSS file will be loaded as well. So, for you is just to theme it., _(*13)