Merge pull request #36 from colinedmz/feature-dropdownfield

Feature DropdownField

code/BootstrapDropdownField.php

@@ -0,0 +1,39 @@
+<?php
+
+class BootstrapDropdownField extends DropdownField {
+	protected $optionsList;
+
+	public function __construct($name, $title = NULL, $options = array(), $value = NULL) {
+		parent::__construct($name, $title, $value);
+		$this->optionsList = $options;
+
+		return $this;
+	}
+
+	public function setOptions($opts) {
+		$this->optionsList = $opts;
+
+		return $this;
+	}
+
+	public function getOptions() {
+		$options = ArrayList::create();
+		$selectedValue = $this->Value();
+		foreach ($this->optionsList as $val => $label) {
+			$isSelected = $selectedValue == (string) $val;
+			$options->push(ArrayData::create(array(
+				'Label' => $label,
+				'Value' => $val,
+				'Selected' => $isSelected
+			)));
+		}
+
+		return $options;
+	}
+
+	public function Field($attributes = array()) {
+		Requirements::javascript(BOOTSTRAP_FORMS_DIR . "/javascript/bootstrap_forms.js");
+
+		return $this->renderWith('BootstrapDropdownField');
+	}
+}

javascript/bootstrap_forms.js

@@ -50,6 +50,19 @@ $(function() {
 		}).filter('.active').click();	
 	}
 
+// dropdowns need to be configured when javascript is enabled.
+	$('.dropdown-select').hide();
+	$('.dropdown-toggle').show();
+
+	// sync selected list item with the select control
+	$('.dropdown-menu a').on('click', function(ev) {
+		var rel = $(this).attr('rel'),
+			value = $(this).data('value');
+
+		$(rel + '_select').val(value);
+		$(rel + '_select').change();
+		$(rel + '_label').text($(this).text());
+	});
 
   });
 

templates/BootstrapDropdownField.ss

@@ -0,0 +1,24 @@
+<span class="btn-group">
+	<select name="$Name" id="{$id}_select" class="dropdown-select">
+    <% loop $Options %>
+        <option <% if $Selected %>selected="selected"<% end_if %> value="$Value">$Label</option>
+    <% end_loop %>
+  </select>
+	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+    <% loop $Options %>
+      <% if $Selected %>
+          <span id="{$Top.id}_label" data-default="$Top.Title" class="dropdown-label">$Label</span>
+      <% end_if %>
+    <% end_loop %>
+      <span class="caret"></span>
+  </button>
+	<ul class="dropdown-menu" role="menu" aria-labelledby="{$id}_label">
+    <% loop $Options %>
+        <li role="presentation">
+            <a data-value="$Value" rel="#$Top.id" role="menuitem" tabindex="-1"
+               href="#">$Label
+            </a>
+        </li>
+    <% end_loop %>
+  </ul>
+</span>