diff --git a/forms/TreeDropdownField.php b/forms/TreeDropdownField.php
index 605df359743..954dd83895e 100755
--- a/forms/TreeDropdownField.php
+++ b/forms/TreeDropdownField.php
@@ -134,8 +134,9 @@ public function Field() {
'div',
array (
'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') : "",
+ 'data-title' => $title,
),
$this->createTag (
'input',
@@ -145,29 +146,6 @@ public function Field() {
'name' => $this->name,
'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 @@ public function tree(SS_HTTPRequest $request) {
// Regular source specification
$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');
if($ID) {
diff --git a/forms/TreeMultiselectField.php b/forms/TreeMultiselectField.php
index a177e467743..5eca6df0499 100755
--- a/forms/TreeMultiselectField.php
+++ b/forms/TreeMultiselectField.php
@@ -79,22 +79,19 @@ function getItems() {
* formfield can contain multiple values.
*/
function Field() {
- $value = '';
- $itemList = '';
-
Requirements::add_i18n_javascript(SAPPHIRE_DIR . '/javascript/lang');
-
- Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/prototype.js');
- Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/behaviour/behaviour.js');
- Requirements::javascript(SAPPHIRE_DIR . '/javascript/tree/tree.js');
- // needed for errorMessage()
- Requirements::javascript(SAPPHIRE_DIR . '/javascript/LeftAndMain.js');
- Requirements::javascript(SAPPHIRE_DIR . '/javascript/TreeSelectorField.js');
-
- Requirements::css(SAPPHIRE_DIR . '/javascript/tree/tree.css');
+
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery/jquery.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jstree/jquery.jstree.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/javascript/TreeDropdownField.js');
+
+ Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.all.css');
Requirements::css(SAPPHIRE_DIR . '/css/TreeDropdownField.css');
-
-
+
+ $value = '';
+ $itemList = '';
$items = $this->getItems();
if($items && count($items)) {
@@ -104,16 +101,31 @@ function Field() {
}
if(isset($titleArray)) {
- $itemList = implode(", ", $titleArray);
+ $title = implode(", ", $titleArray);
$value = implode(",", $idArray);
}
+ } else {
+ $title = _t('DropdownField.CHOOSE', '(Choose)', PR_MEDIUM, 'start value of a dropdown');
}
-
- $id = $this->id();
- return <<$itemList
-HTML;
+ return $this->createTag (
+ 'div',
+ array (
+ 'id' => "TreeDropdownField_{$this->id()}",
+ '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
+ )
+ )
+ );
}
/**
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 8e52ff84d85..4e28990b854 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -1,22 +1,41 @@
(function($) {
$.entwine('ss', function($){
+ var strings = {
+ 'openlink': 'Open',
+ 'searchFieldTitle': '(choose or search)'
+ };
+
/**
- * @todo Locale support
- * @todo Multiselect
- * @todo Search
+ * @todo Locale support/form serialization
+ * @todo Multiselect: Select items after tree load, serialize titles, override title on select but keep panel open
+ * @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({
onmatch: function() {
- this.append('');
+ this.append(
+ '' +
+ '' +
+ ''
+ );
+ if(this.data('title')) this.setTitle(this.data('title'));
+ this.getPanel().hide();
+
+ this._super();
},
getPanel: function() {
return this.find('.panel');
},
openPanel: function() {
- var panel = this.getPanel();
+ var panel = this.getPanel(), tree = this.find('.tree-holder');
panel.show();
- if(!panel.find('li').length) this.loadTree();
+ if(tree.is(':empty')) this.loadTree();
},
closePanel: function() {
this.getPanel().hide();