tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT Making TreeDropdownField and TreeMultiSelectField serverside markup more unobtrusive, adding DOM elements required by javascript through TreeDropdownField.js

Browse Source
This commit is contained in:
Ingo Schommer 2011-03-08 08:29:09 +13:00
parent e7ad682cf2
commit f06480da55
3 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
forms/TreeDropdownField.php
View File

@ -134,8 +134,9 @@ class TreeDropdownField extends FormField {
'div', 'div',
array ( array (
'id' => "TreeDropdownField_{$this->id()}", 'id' => "TreeDropdownField_{$this->id()}",
'class' => 'TreeDropdownField single' . ($this->extraClass() ? " {$this->extraClass()}" : ''), 'class' => 'TreeDropdownField single' . ($this->extraClass() ? " {$this->extraClass()}" : '') . ($this->showSearch ? " searchable" : ''),
'href' => $this->form ? $this->Link('tree') : "", 'href' => $this->form ? $this->Link('tree') : "",
'data-title' => $title,
), ),
$this->createTag ( $this->createTag (
'input', 'input',
@ -145,29 +146,6 @@ class TreeDropdownField extends FormField {
'name' => $this->name, 'name' => $this->name,
'value' => $this->value 'value' => $this->value
) )
) . ($this->showSearch ?
$this->createTag(
'input',
array(
'class' => 'title',
'value' => '(Choose or type search)'
)
) :
$this->createTag (
'span',
array (
'class' => 'items'
),
$title
)
) . $this->createTag (
'a',
array (
'href' => '#',
'title' => 'open',
'class' => 'editLink'
),
' '
) )
); );
} }
@ -192,7 +170,7 @@ class TreeDropdownField extends FormField {
// Regular source specification // Regular source specification
$isSubTree = false; $isSubTree = false;
$this->search = Convert::Raw2SQL($request->getVar('search')); $this->search = Convert::Raw2SQL($request->requestVar('search'));
$ID = (is_numeric($request->latestparam('ID'))) ? (int)$request->latestparam('ID') : (int)$request->requestVar('ID'); $ID = (is_numeric($request->latestparam('ID'))) ? (int)$request->latestparam('ID') : (int)$request->requestVar('ID');
if($ID) { if($ID) {

46
forms/TreeMultiselectField.php
View File

@ -79,22 +79,19 @@ class TreeMultiselectField extends TreeDropdownField {
* formfield can contain multiple values. * formfield can contain multiple values.
*/ */
function Field() { function Field() {
$value = '';
$itemList = '';
Requirements::add_i18n_javascript(SAPPHIRE_DIR . '/javascript/lang'); Requirements::add_i18n_javascript(SAPPHIRE_DIR . '/javascript/lang');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/prototype.js'); Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery/jquery.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/behaviour/behaviour.js'); Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/tree/tree.js'); Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
// needed for errorMessage() Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jstree/jquery.jstree.js');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/LeftAndMain.js'); Requirements::javascript(SAPPHIRE_DIR . '/javascript/TreeDropdownField.js');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/TreeSelectorField.js');
Requirements::css(SAPPHIRE_DIR . '/javascript/tree/tree.css'); Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.all.css');
Requirements::css(SAPPHIRE_DIR . '/css/TreeDropdownField.css'); Requirements::css(SAPPHIRE_DIR . '/css/TreeDropdownField.css');
$value = '';
$itemList = '';
$items = $this->getItems(); $items = $this->getItems();
if($items && count($items)) { if($items && count($items)) {
@ -104,16 +101,31 @@ class TreeMultiselectField extends TreeDropdownField {
} }
if(isset($titleArray)) { if(isset($titleArray)) {
$itemList = implode(", ", $titleArray); $title = implode(", ", $titleArray);
$value = implode(",", $idArray); $value = implode(",", $idArray);
} }
} else {
$title = _t('DropdownField.CHOOSE', '(Choose)', PR_MEDIUM, 'start value of a dropdown');
} }
$id = $this->id(); return $this->createTag (
'div',
return <<<HTML array (
<div class="TreeDropdownField multiple" href="{$this->Link()}"><input id="$id" type="hidden" name="$this->name" value="$value" /><span class="items">$itemList</span><a href="#" title="open" class="editLink">&nbsp;</a></div> 'id' => "TreeDropdownField_{$this->id()}",
HTML; 'class' => 'TreeDropdownField multiple' . ($this->extraClass() ? " {$this->extraClass()}" : '') . ($this->showSearch ? " searchable" : ''),
'href' => $this->form ? $this->Link('tree') : "",
'data-title' => $title,
),
$this->createTag (
'input',
array (
'id' => $this->id(),
'type' => 'hidden',
'name' => $this->name,
'value' => $value
)
)
);
} }
/** /**

31
javascript/TreeDropdownField.js
View File

@ -1,22 +1,41 @@
(function($) { (function($) {
$.entwine('ss', function($){ $.entwine('ss', function($){
var strings = {
'openlink': 'Open',
'searchFieldTitle': '(choose or search)'
};
/** /**
* @todo Locale support * @todo Locale support/form serialization
* @todo Multiselect * @todo Multiselect: Select items after tree load, serialize titles, override title on select but keep panel open
* @todo Search * @todo Error display
* @todo No results display for search
* @todo Automatic expansion of ajax children when multiselect is triggered
* @todo Automatic panel positioning based on available space (top/bottom)
* @todo forceValue
* @todo Automatic width
* @todo Expand title height to fit all elements
*/ */
$('.TreeDropdownField').entwine({ $('.TreeDropdownField').entwine({
onmatch: function() { onmatch: function() {
this.append('<div class="panel"><div class="tree-holder"></div></div>'); this.append(
'<span class="title"></span>' +
'<a href="#" title="' + strings.openLink + '" class="toggle-panel-link"></a>' +
'<div class="panel"><div class="tree-holder"></div></div>'
);
if(this.data('title')) this.setTitle(this.data('title'));
this.getPanel().hide();
this._super();
}, },
getPanel: function() { getPanel: function() {
return this.find('.panel'); return this.find('.panel');
}, },
openPanel: function() { openPanel: function() {
var panel = this.getPanel(); var panel = this.getPanel(), tree = this.find('.tree-holder');
panel.show(); panel.show();
if(!panel.find('li').length) this.loadTree(); if(tree.is(':empty')) this.loadTree();
}, },
closePanel: function() { closePanel: function() {
this.getPanel().hide(); this.getPanel().hide();