Merge pull request #1518 from cormacmccarthy/picker

Picker

bower.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "jquery": null,
     "jquery-1.9.1": "jquery#1.9.1",
-    "qunit": "~1.14.0",
+    "qunit": "1.x",
     "requirejs-text": "2.x",
     "underscore": "1.x",
     "blanket": "1.x"

grunt/config/concat.js

@@ -19,7 +19,8 @@ module.exports = function (grunt) {
 				'js/repeater.js',
 				'js/repeater-list.js',
 				'js/repeater-thumbnail.js',
-				'js/scheduler.js'
+				'js/scheduler.js',
+				'js/picker.js'
 			],
 			dest: 'dist/js/' + '<%= pkg.name %>' + '.js'
 		},
@@ -34,5 +35,5 @@ module.exports = function (grunt) {
 			}
 		}
 	}
-	
+
 };

index.html

@@ -2437,6 +2437,61 @@ <h2>Spinbox</h2>
 				</div>
 			</section>
 
+			<section id="picker">
+				<h2>Picker</h2>
+				<div class="thin-box">
+					<div class="picker" data-ellipsis="true" data-initialize="picker" id="mypicker">
+						<div class="form-inline">
+							<div class="form-group">
+								<input class="form-control picker-trigger" type="text" placeholder="choose folder location"/>
+							</div><div class="form-group">
+								<input class="btn btn-default picker-trigger" type="button" value="Choose..."/>
+							</div>
+						</div>
+						<div class="picker-popup">
+							<div class="picker-header">
+								<h5>Choose Folder Location</h5>
+							</div>
+
+							<div class="picker-body well">
+								<ul class="tree" id="myPickerTree1" role="tree">
+									<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
+										<div class="tree-branch-header">
+											<button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span>
+											</button>
+											<button type="button" class="tree-branch-name">
+												<span class="glyphicon icon-folder glyphicon-folder-close"></span>
+												<span class="tree-label"></span>
+											</button>
+										</div>
+										<ul class="tree-branch-children" role="group"></ul>
+										<div class="tree-loader" role="alert">Loading...</div>
+									</li>
+									<li class="tree-item hidden" data-template="treeitem" role="treeitem">
+										<button type="button" class="tree-item-name">
+											<span class="glyphicon icon-item fueluxicon-bullet"></span>
+											<span class="tree-label"></span>
+										</button>
+									</li>
+								</ul>
+							</div>
+
+							<div class="picker-footer">
+								<a class="picker-cancel" href="#">Cancel</a>
+								<button class="btn btn-primary btn-xs picker-accept" type="button">Save</button>
+							</div>
+						</div>
+
+					</div>
+
+				</div>
+				<div class="btn-panel">
+					<button type="button" class="btn btn-default" id="btnPickerEnable">enable</button>
+					<button type="button" class="btn btn-default" id="btnPickerDisable">disable</button>
+					<button type="button" class="btn btn-default" id="btnPickerDestroy">destroy and append</button>
+				</div>
+			</section>
+
 			<section id="tree">
 				<h2>Tree</h2>
 				<div class="thin-box">

index.js

@@ -12,8 +12,8 @@ define(function (require) {
 	};
 
 	// programmatically injecting this is so much easier than writing the html by hand 376 times...
-	$('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]').each(function (i) {
-		$(this).prepend(['<a class="header-anchor" href="#', this.id, '"><small><span class="glyphicon glyphicon-link"></span></a></small> '].join(''));
+	$('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id], section[id]').each(function (i) {
+		$(this).children('h2:first').prepend(['<a class="header-anchor" href="#', this.id, '"><small><span class="glyphicon glyphicon-link"></span></a></small> '].join(''));
 	});
 
 	// load fuel controls
@@ -945,13 +945,11 @@ define(function (require) {
 		$('#mySpinbox1').spinbox();
 	});
 
-
 	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 	 TREE
 	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-	$('#myTree1').tree({
-		dataSource: function (parentData, callback) {
+	 var treeDataSource =  function (parentData, callback) {
 			log("Opening branch data: ", parentData);
 
 			setTimeout(function () {
@@ -1018,7 +1016,10 @@ define(function (require) {
 					]
 				});
 			}, 400);
-		},
+		}
+
+	$('#myTree1').tree({
+		dataSource: treeDataSource,
 		cacheItems: true,
 		folderSelect: true,
 		multiSelect: true
@@ -1226,6 +1227,51 @@ define(function (require) {
 		log('Disclosed All, this many recursions: ', data.disclosures);
 	});
 
+	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+	 SUPERPICKER
+	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+	$('#btnPickerEnable').click(function () {
+		$('#mypicker').picker('enable');
+	});
+	$('#btnPickerDisable').click(function () {
+		$('#mypicker').picker('disable');
+	});
+	$('#btnPickerDestroy').click(function () {
+		var $container = $('#mypicker').parent();
+		var markup = $('#mypicker').picker('destroy');
+		log(markup);
+		$container.append(markup);
+		$('#mypicker').picker({
+			edit: true
+		});
+	});
+
+	$('#mypicker').on('accepted.fu.picker', function() {
+		console.log('accepted.fu.picker');
+	});
+	$('#mypicker').on('cancelled.fu.picker', function() {
+		console.log('cancelled.fu.picker');
+	});
+	$('#mypicker').on('exited.fu.picker', function() {
+		console.log('exited.fu.picker');
+	});
+	$('#mypicker').on('shown.fu.picker', function() {
+		console.log('shown.fu.picker');
+	});
+
+	$('#myPickerTree1').tree({
+		dataSource: treeDataSource,
+		cacheItems: true,
+		folderSelect: true,
+		multiSelect: true
+	});
+
+	// requires https://github.com/exacttarget/get-list-item-path
+	// $('#mypicker2').on('accepted.fu.picker', function(o){
+	// 	var selected = $('#myPickerTree1').find('.tree-selected');
+	// 	var selectedPaths = getListItemPaths('#myPickerTree1', selected, '.tree-label', '/', ', ');
+	// 	$('#mypicker2').picker('setValue', selectedPaths);
+	// });
 
 	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 	 WIZARD

js/all.js

@@ -39,6 +39,7 @@
 	require('fuelux/search');
 	require('fuelux/spinbox');
 	require('fuelux/selectlist');
+	require('fuelux/picker');
 	require('fuelux/tree');
 	require('fuelux/wizard');