Merge branch 'togglecompositefield' of https://github.com/ajshort/sapphire into ajshort-togglecompositefield

This commit is contained in:
Ingo Schommer 2012-06-13 10:23:22 +02:00
commit 666fa7a26e
6 changed files with 146 additions and 70 deletions

View File

@ -133,6 +133,8 @@ body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif;
.cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-sb47394f892.png') 0 -102px no-repeat; width: 30px; height: 30px; } .cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-sb47394f892.png') 0 -102px no-repeat; width: 30px; height: 30px; }
.cms .ui-state-hover { cursor: pointer; } .cms .ui-state-hover { cursor: pointer; }
.cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; } .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; }
.cms .ui-accordion .ui-accordion-header { border-color: #c0c0c2; margin-bottom: 0; }
.cms .ui-accordion .ui-accordion-content { border: 1px solid #c0c0c2; border-top: none; }
/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in framework/css/Form.css. @package framework @subpackage admin */ /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in framework/css/Form.css. @package framework @subpackage admin */
/** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */ /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */
@ -205,6 +207,13 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; } .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; }
.fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; } .fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; }
.ss-toggle { margin-bottom: 8px; }
.ss-toggle .ui-accordion-header { font-weight: bold; }
.ss-toggle .ui-accordion-header.ui-state-default { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNDEsIDI0MiwgMjQyLCAwLjgpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDIwMSwgMjA1LCAyMDYsIDAuOCkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 242, 242, 0.8)), color-stop(100%, rgba(201, 205, 206, 0.8))); background-image: -webkit-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -moz-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -o-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -ms-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.ss-toggle .ui-accordion-content { padding: 16px 0 8px 0; }
.ss-toggle .ui-accordion-content .field { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding-left: 16px; padding-right: 16px; }
.ss-toggle .ui-accordion-content .field:last-child { margin-bottom: 0; }
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */ /** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
.field.checkbox { padding-left: 184px; margin-bottom: 8px; } .field.checkbox { padding-left: 184px; margin-bottom: 8px; }
.field.checkbox input { margin-left: 0; } .field.checkbox input { margin-left: 0; }

View File

@ -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 * Checkbox Field
* ---------------------------------------------------- */ * ---------------------------------------------------- */

View File

@ -109,10 +109,15 @@
font-size: $font-base-size; font-size: $font-base-size;
font-family: $font-family; 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;
}
} }
} }

View File

@ -1,54 +1,94 @@
<?php <?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 * @package forms
* @subpackage fields-structural * @subpackage fields-structural
*/ */
class ToggleCompositeField extends CompositeField { class ToggleCompositeField extends CompositeField {
/** /**
* @var $headingLevel int * @var bool
*/ */
public $headingLevel = 2; protected $startClosed = true;
function __construct($name, $title, $children) { /**
* @var $int
*/
protected $headingLevel = 3;
public function __construct($name, $title, $children) {
$this->name = $name; $this->name = $name;
$this->title = $title; $this->title = $title;
$this->startClosed(true);
parent::__construct($children); parent::__construct($children);
} }
public function FieldHolder($properties = array()) { public function FieldHolder($properties = array()) {
Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/prototype/prototype.js"); Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/behaviour/behaviour.js"); Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
Requirements::javascript(FRAMEWORK_DIR . "/javascript/ToggleCompositeField.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; $obj = $properties ? $this->customise($properties) : $this;
return $obj->renderWith($this->getTemplates()); return $obj->renderWith($this->getTemplates());
}
/**
* Determines if the field should render open or closed by default.
*
* @param boolean
*/
public function startClosed($bool) {
($bool) ? $this->addExtraClass('startClosed') : $this->removeExtraClass('startClosed');
} }
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()
)
);
}
/** /**
* @return string * @return bool
*/ */
public function HeadingLevel() { public function getStartClosed() {
return $this->startClosed;
}
/**
* Controls whether the field is open or closed by default. By default the
* field is closed.
*
* @param bool $bool
*/
public function setStartClosed($bool) {
$this->startClosed = (bool) $bool;
}
/**
* @return int
*/
public function getHeadingLevel() {
return $this->headingLevel; 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);
}
} }

View File

@ -1,29 +1,26 @@
// Shortcut-function (until we update to Prototye v1.5) (function($){
if(typeof $$ != "Function") $$ = document.getElementsBySelector; $.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(); if(self.hasClass("ss-toggle-start-closed")) {
ToggleCompositeField.prototype = { opts.active = false;
initialize: function() { }
var rules = {};
rules['#' + this.id + ' .trigger'] = { if(tab.length) {
onclick: function(e) { tab.bind("tabsshow", function() {
this.toggle(); self.accordion("resize");
Event.stop(e); return false; });
}.bind(this) }
};
Behaviour.register(rules); this.accordion(opts);
},
// close content by default onunmatch: function() {
if(Element.hasClassName(this, 'startClosed')) { this._super();
Element.toggle($$('#' + this.id + ' .contentMore')[0]); }
} });
Element.toggle($$('#' + this.id + ' .triggerClosed')[0]); });
}, })(jQuery);
toggle: function() {
Element.toggle($$('#' + this.id + ' .contentMore')[0]);
Element.toggle($$('#' + this.id + ' .triggerClosed')[0]);
Element.toggle($$('#' + this.id + ' .triggerOpened')[0]);
}
}
ToggleCompositeField.applyTo('div.toggleCompositeField');

View File

@ -1,12 +1,8 @@
<div id="$Name" class="$Type $extraClass"> <div $AttributesHTML>
<h$HeadingLevel style="cursor: pointer;" class="trigger$ClosedClass"> <h$HeadingLevel><a href="#">$Title</a></h$HeadingLevel>
<img class="triggerClosed" src="$ModulePath(framework)/images/toggle-closed.gif" alt="+" style="display:none;" title="<% _t('SHOW', 'Show') %>" /> <div>
<img class="triggerOpened" src="$ModulePath(framework)/images/toggle-open.gif" alt="-" style="display:none;" title="<% _t('HIDE', 'Hide') %>" /> <% loop $FieldList %>
$Title $FieldHolder
</h$HeadingLevel> <% end_loop %>
<div class="contentMore">
<% loop $FieldList %>
$FieldHolder
<% end_loop %>
</div> </div>
</div> </div>