ENHANCEMENT Making TreeDropdownField and TreeMultiSelectField servers…

…ide markup more unobtrusive, adding DOM elements required by javascript through TreeDropdownField.js
silverstripe · Mar 22, 2011 · f06480d · f06480d
1 parent e7ad682
commit f06480d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 51 deletions.
diff --git 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'
-				),
-				'&nbsp;'
 			)
 		);
 	}
@@ -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
@@ -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 <<<HTML
-			<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>		
-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
@@ -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('<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() {
 				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();