Permalink
Browse files

ENHANCEMENT: Refactored ToggleCompositeField.

* Use jquery ui accordion for the field, and implemented an admin theme.
* Made the setting of configuration consistent with other form fields.
* ToggleComposteField->startClosed() has been deprecated in favour of
  setStartClosed().
* Removed public access to the heading level, instead use getHeadingLevel()
  or setHeadingLevel().
  • Loading branch information...
1 parent ce3d48e commit aa67b56b10e2cd99a5f710288d78a7d8933924d9 @ajshort ajshort committed Jun 13, 2012
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -429,6 +429,35 @@ form.small .field, .field.small {
}
}
}
+
+.ss-toggle {
+ margin-bottom: $grid-y;
+
+ .ui-accordion-header {
+ font-weight: bold;
+
+ &.ui-state-default {
+ @include background-image(
+ linear-gradient(lighten($color-shadow-light, 15%), $color-shadow-light)
+ );
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+ }
+ }
+
+ .ui-accordion-content {
+ padding: $grid-y*2 0 $grid-y 0;
+
+ .field {
+ @include box-shadow(none);
+ padding-left: $grid-x*2;
+ padding-right: $grid-x*2;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
/** ----------------------------------------------------
* Checkbox Field
* ---------------------------------------------------- */
View
@@ -109,10 +109,15 @@
font-size: $font-base-size;
font-family: $font-family;
}
-
- .ss-ui-button,
- .ui-widget-content .ss-ui-button,
- .ui-widget-header .ss-ui-button {
+ .ui-accordion {
+ .ui-accordion-header {
+ border-color: $color-button-generic-border;
+ margin-bottom: 0;
+ }
+ .ui-accordion-content {
+ border: 1px solid $color-button-generic-border;
+ border-top: none;
+ }
}
}
@@ -1,54 +1,94 @@
<?php
/**
- * Allows visibility of a group of fields to be toggled using '+' and '-' icons
+ * Allows visibility of a group of fields to be toggled.
*
* @package forms
* @subpackage fields-structural
*/
class ToggleCompositeField extends CompositeField {
-
+
+ /**
+ * @var bool
+ */
+ protected $startClosed = true;
+
/**
- * @var $headingLevel int
+ * @var $int
*/
- public $headingLevel = 2;
-
- function __construct($name, $title, $children) {
+ protected $headingLevel = 3;
+
+ public function __construct($name, $title, $children) {
$this->name = $name;
$this->title = $title;
- $this->startClosed(true);
-
parent::__construct($children);
}
-
+
public function FieldHolder($properties = array()) {
- Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/prototype/prototype.js");
- Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/behaviour/behaviour.js");
- Requirements::javascript(FRAMEWORK_DIR . "/javascript/ToggleCompositeField.js");
-
+ Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
+ Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
+ Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+ Requirements::javascript(FRAMEWORK_DIR . '/javascript/ToggleCompositeField.js');
+ Requirements::css(FRAMEWORK_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.css');
+
$obj = $properties ? $this->customise($properties) : $this;
-
return $obj->renderWith($this->getTemplates());
- }
-
+ }
+
+ public function getAttributes() {
+ if($this->getStartClosed()) {
+ $class = 'ss-toggle ss-toggle-start-closed';
+ } else {
+ $class = 'ss-toggle';
+ }
+
+ return array_merge(
+ $this->attributes,
+ array(
+ 'id' => $this->id(),
+ 'class' => $class . ' ' . $this->extraClass()
+ )
+ );
+ }
+
/**
- * Determines if the field should render open or closed by default.
- *
- * @param boolean
+ * @return bool
*/
- public function startClosed($bool) {
- ($bool) ? $this->addExtraClass('startClosed') : $this->removeExtraClass('startClosed');
+ public function getStartClosed() {
+ return $this->startClosed;
}
-
+
/**
- * @return string
+ * Controls whether the field is open or closed by default. By default the
+ * field is closed.
+ *
+ * @param bool $bool
*/
- public function HeadingLevel() {
+ public function setStartClosed($bool) {
+ $this->startClosed = (bool) $bool;
+ }
+
+ /**
+ * @return int
+ */
+ public function getHeadingLevel() {
return $this->headingLevel;
}
- public function Type() {
- return ' toggleCompositeField';
+ /**
+ * @param int $level
+ */
+ public function setHeadingLevel($level) {
+ $this->headingLevel = $level;
}
+
+ /**
+ * @deprecated 3.0
+ */
+ public function startClosed($bool) {
+ Deprecation::notice('3.0', 'Please use ToggleCompositeField->setStartClosed()');
+ $this->setStartClosed($bool);
+ }
+
}
@@ -1,29 +1,26 @@
-// Shortcut-function (until we update to Prototye v1.5)
-if(typeof $$ != "Function") $$ = document.getElementsBySelector;
+(function($){
+ $.entwine('ss', function($){
+ $('.ss-toggle').entwine({
+ onmatch: function() {
+ var self = $(this);
+ var opts = { collapsible: true };
+ var tab = self.parents(".ss-tabset");
-var ToggleCompositeField = Class.create();
-ToggleCompositeField.prototype = {
- initialize: function() {
- var rules = {};
- rules['#' + this.id + ' .trigger'] = {
- onclick: function(e) {
- this.toggle();
- Event.stop(e); return false;
- }.bind(this)
- };
- Behaviour.register(rules);
-
- // close content by default
- if(Element.hasClassName(this, 'startClosed')) {
- Element.toggle($$('#' + this.id + ' .contentMore')[0]);
- }
- Element.toggle($$('#' + this.id + ' .triggerClosed')[0]);
- },
-
- toggle: function() {
- Element.toggle($$('#' + this.id + ' .contentMore')[0]);
- Element.toggle($$('#' + this.id + ' .triggerClosed')[0]);
- Element.toggle($$('#' + this.id + ' .triggerOpened')[0]);
- }
-}
-ToggleCompositeField.applyTo('div.toggleCompositeField');
+ if(self.hasClass("ss-toggle-start-closed")) {
+ opts.active = false;
+ }
+
+ if(tab.length) {
+ tab.bind("tabsshow", function() {
+ self.accordion("resize");
+ });
+ }
+
+ this.accordion(opts);
+ },
+ onunmatch: function() {
+ this._super();
+ }
+ });
+ });
+})(jQuery);
@@ -1,12 +1,8 @@
-<div id="$Name" class="$Type $extraClass">
- <h$HeadingLevel style="cursor: pointer;" class="trigger$ClosedClass">
- <img class="triggerClosed" src="$ModulePath(framework)/images/toggle-closed.gif" alt="+" style="display:none;" title="<% _t('SHOW', 'Show') %>" />
- <img class="triggerOpened" src="$ModulePath(framework)/images/toggle-open.gif" alt="-" style="display:none;" title="<% _t('HIDE', 'Hide') %>" />
- $Title
- </h$HeadingLevel>
- <div class="contentMore">
- <% loop $FieldList %>
- $FieldHolder
- <% end_loop %>
+<div $AttributesHTML>
+ <h$HeadingLevel><a href="#">$Title</a></h$HeadingLevel>
+ <div>
+ <% loop $FieldList %>
+ $FieldHolder
+ <% end_loop %>
</div>
</div>

0 comments on commit aa67b56

Please sign in to comment.