? css/horizontal_tab.css ? js/horizontal_tab.js Index: elements.module =================================================================== RCS file: /cvs/drupal-contrib/contributions/modules/elements/elements.module,v retrieving revision 1.1.2.2.2.9.2.2 diff -u -p -r1.1.2.2.2.9.2.2 elements.module --- elements.module 12 Dec 2010 00:24:16 -0000 1.1.2.2.2.9.2.2 +++ elements.module 2 Feb 2011 18:23:26 -0000 @@ -51,6 +51,11 @@ function elements_element_info() { '#theme' => 'rangefield', '#theme_wrappers' => array('form_element'), ); + $types['vertical_accordion'] = array( + '#theme_wrappers' => array('vertical_accordion', 'fieldset'), + '#pre_render' => array('form_pre_render_fieldset', 'form_pre_render_vertical_accordion'), + '#process' => array('form_process_fieldset'), + ); return $types; } @@ -105,6 +110,14 @@ function elements_theme() { 'render element' => 'element', 'file' => 'elements.theme.inc', ), + 'vertical_accordion' => array( + 'render element' => 'element', + 'file' => 'elements.theme.inc', + ), + 'vertical_accordion_pane' => array( + 'render element' => 'element', + 'file' => 'elements.theme.inc', + ), ); } @@ -154,3 +167,25 @@ function form_process_placeholder($eleme } return $element; } + +/** + * Alters fieldset children of this element to have a specific theme wrapper + * + * @param $element + */ +function form_pre_render_vertical_accordion($element) { + // Add a special theme wrapper to the children of this element. + $children = element_children($element); + foreach($children as $key) { + if ($element[$key]['#type']) { + $element[$key]['#theme_wrappers'] = array('vertical_accordion_pane'); + } + } + + // Add JS and CSS necessary for the vertical accordion. + drupal_add_js(drupal_get_path('module', 'elements') . '/js/vertical_accordion.js', array('group' => 'JS_DEFAULT', 'weight' => 50)); + drupal_add_css(drupal_get_path('module', 'elements') . '/css/vertical_accordion.css'); + drupal_add_library('system', 'ui.accordion'); + + return $element; +} Index: elements.theme.inc =================================================================== RCS file: /cvs/drupal-contrib/contributions/modules/elements/Attic/elements.theme.inc,v retrieving revision 1.1.4.2 diff -u -p -r1.1.4.2 elements.theme.inc --- elements.theme.inc 11 Dec 2010 22:32:35 -0000 1.1.4.2 +++ elements.theme.inc 2 Feb 2011 18:23:27 -0000 @@ -142,3 +142,35 @@ function theme_rangefield($variables) { return $output; } + +/** + * Returns HTML for an element's children fieldsets as a vertical accordion. + * + * @param $variables + */ +function theme_vertical_accordion($variables) { + $element = $variables['element']; + + $output = '
' . $element['#children'] . '
'; + return $output; +} + +/** + * Returns HTML for a vertical accordion's children fieldsets as panes. + * + * @param $variables + */ +function theme_vertical_accordion_pane($variables) { + $element = $variables['element']; + + $output = '' . $element['#title'] . ''; + $output .= '
' . $element['#children']; + + if (isset($element['#value'])) { + $output .= $element['#value']; + } + + $output .= '
'; + + return $output; +} Index: css/vertical_accordion.css =================================================================== RCS file: css/vertical_accordion.css diff -N css/vertical_accordion.css --- /dev/null 1 Jan 1970 00:00:00 -0000 +++ css/vertical_accordion.css 2 Feb 2011 18:23:27 -0000 @@ -0,0 +1,105 @@ +/* $Id: vertical_accordion.css,v 1.1 2010/12/21 15:19:26 jameselliott Exp $ */ + +/* @group Pane header */ + +.vertical-accordion .pane-header { + background: repeat scroll 0 0 #dfdfdf; + background: + -moz-linear-gradient( + -90deg, + #fcfcfc 0pt, + #e3e3e1 100%) + repeat scroll 0 0 #d8d8d8; + background: + -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.0, rgba(252, 252, 252, 1.0)), + color-stop(1.0, rgba(227, 227, 225, 1.0)) + ); + display: block; + filter: progid:DXImageTransform.Microsoft.gradient( + GradientType='0', + startColorstr=#fcfcfc, + endColorstr=#e3e3e1); + font-size: 0.9231em; + line-height: 1; + margin-top: 0; + padding: 6px 3px 5px 11px; + text-transform: none; +} + +.vertical-accordion .pane-header:hover { + background: repeat scroll 0 0 #d9d9d9; + background: + -moz-linear-gradient( + -90deg, + #f6f6f6 0pt, + #d6d6d4 100%) + repeat scroll 0 0 #d8d8d8; + background: + -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.0, rgba(246, 246, 246, 1.0)), + color-stop(1.0, rgba(214, 214, 212, 1.0)) + ); + filter: progid:DXImageTransform.Microsoft.gradient( + GradientType='0', + startColorstr=#f6f6f6, + endColorstr=#d6d6d4); + text-decoration: none; +} + +.vertical-accordion .pane-header ~ .pane-header { + border-top-width: 0; +} + +.vertical-accordion .pane-header .ui-icon { + color: inherit; + display: none; + background: none; + /* CSS triangle */ + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid; + height: 0; + left: 11px; + margin-top: 0; + top: 45%; + width: 0; +} + +.vertical-accordion .pane-header.ui-state-active { + font-weight: normal; + padding-left: 24px; +} + +.vertical-accordion .pane-header.ui-state-active .ui-icon { + display: block; +} + +/* @end */ + +/* @group Pane content */ + +.vertical-accordion .ui-accordion-content { + margin: 0; + padding: 0 11px; + top: auto; +} + +.vertical-accordion .ui-accordion-content > :first-child { + margin-top: 10px; + padding-top: 0; +} + +.vertical-accordion .ui-accordion-content > :last-child { + margin-bottom: 10px; + padding-bottom: 0; +} + +/* @end */ Index: js/vertical_accordion.js =================================================================== RCS file: js/vertical_accordion.js diff -N js/vertical_accordion.js --- /dev/null 1 Jan 1970 00:00:00 -0000 +++ js/vertical_accordion.js 2 Feb 2011 18:23:27 -0000 @@ -0,0 +1,20 @@ +// $Id: vertical_accordion.js,v 1.2 2010/12/21 15:54:27 jameselliott Exp $ + +(function ($) { + +/** + * Call jQuery Accordion on vertical_accordion elements + */ +Drupal.behaviors.verticalAccordion = { + attach: function (context) { + $('.vertical-accordion', context).once('vertical-accordion', function(){ + $(this).accordion({ + header: '.pane-header', + clearStyle: true, + autoHeight: false + }); + }); + } +}; + +})(jQuery);