BUG Fixing ToggleField to work correctly with jQuery

This commit is contained in:
Sean Harvey 2012-11-16 11:33:58 +13:00
parent 77337ae58c
commit 4651e9bbc9
2 changed files with 15 additions and 37 deletions

View File

@ -3,6 +3,8 @@
* ReadonlyField with added toggle-capabilities - will preview the first sentence of the contained text-value,
* and show the full content by a javascript-switch.
*
* @deprecated 3.1 Use custom javascript with a ReadonlyField.
*
* Caution: Strips HTML-encoding for the preview.
* @package forms
* @subpackage fields-dataless
@ -49,8 +51,7 @@ class ToggleField extends ReadonlyField {
public function Field($properties = array()) {
$content = '';
Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/prototype/prototype.js");
Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/behaviour/behaviour.js");
Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
Requirements::javascript(FRAMEWORK_DIR . "/javascript/ToggleField.js");
if($this->startClosed) $this->addExtraClass('startClosed');

View File

@ -1,35 +1,12 @@
// Shortcut-function (until we update to Prototye v1.5)
if(typeof $$ != "Function") $$ = document.getElementsBySelector;
var field = $('div.toggleField');
var ToggleField = Class.create();
ToggleField.prototype = {
initialize: function() {
var rules = {};
rules['#' + this.id + ' .triggerMore'] = {
onclick: function(e) {
Element.toggle(this);
Event.stop(e); return false;
}.bind(this)
};
rules['#' + this.id + ' .triggerLess'] = {
onclick: function(e) {
Element.toggle(this);
Event.stop(e); return false;
}.bind(this)
};
Behaviour.register(rules);
if(Element.hasClassName(this, 'startClosed')) {
Element.toggle(this);
}
},
toggle: function() {
var lessDivs = $$('#' + this.id + ' .contentLess');
if(lessDivs) Element.toggle(lessDivs[0]);
var moreDivs = $$('#' + this.id + ' .contentMore');
if(moreDivs) Element.toggle(moreDivs[0]);
}
if(field.hasClass('startClosed')) {
field.find('div.contentMore').hide();
field.find('div.contentLess').show();
}
ToggleField.applyTo('div.toggleField');
$('div.toggleField .triggerLess, div.toggleField .triggerMore').click(function() {
field.find('div.contentMore').toggle();
field.find('div.contentLess').toggle();
});