Эх сурвалжийг харах

Initial support for jHueSelector

Enrico Berti 13 жил өмнө
parent
commit
7068611496

+ 5 - 0
apps/useradmin/src/useradmin/templates/edit_group.mako

@@ -59,4 +59,9 @@ ${layout.menubar(section='groups')}
 		</div>
 	</form>
 </div>
+<script type="text/javascript" charset="utf-8">
+	$(document).ready(function(){
+		$("#id_members").jHueSelector();
+	});
+</script>
 ${commonfooter()}

+ 6 - 6
desktop/core/src/desktop/templates/commonheader.html

@@ -39,14 +39,15 @@ limitations under the License.
 	<script src="/static/js/Source/jHue/jquery.showusername.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/js/Source/jHue/jquery.filechooser.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/js/Source/jHue/jquery.contextmenu.js" type="text/javascript" charset="utf-8"></script>
+	<script src="/static/js/Source/jHue/jquery.selector.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/ext/js/jquery/plugins/jquery.simpleplaceholder.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/ext/js/bootstrap-tabs.js" type="text/javascript" charset="utf-8"></script>
-	<script src="/static/ext/js/bootstrap-dropdown.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="/static/ext/js/bootstrap-tabs.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="/static/ext/js/bootstrap-modal.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="/static/ext/js/bootstrap-twipsy.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="/static/ext/js/bootstrap-popover.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="/static/ext/js/bootstrap-dropdown.js" type="text/javascript" charset="utf-8"></script>
+	<script src="/static/ext/js/bootstrap-tabs.js" type="text/javascript" charset="utf-8"></script>
+	<script src="/static/ext/js/bootstrap-modal.js" type="text/javascript" charset="utf-8"></script>
+	<script src="/static/ext/js/bootstrap-twipsy.js" type="text/javascript" charset="utf-8"></script>
+	<script src="/static/ext/js/bootstrap-popover.js" type="text/javascript" charset="utf-8"></script>
 	<script src="/static/ext/js/fileuploader.js" type="text/javascript" charset="utf-8"></script>
 
 	<script type="text/javascript" charset="utf-8">
@@ -85,4 +86,3 @@ limitations under the License.
 		</div>
 	</div>
 
-	

+ 51 - 4
desktop/core/static/css/jhue.css

@@ -66,7 +66,7 @@
 }
 
 .sectionbar h3 {
-	float:left;	
+	float:left;
 	padding-left:6px;
 	color:#CCC;
 	font-size:12px;
@@ -319,7 +319,7 @@ table.display {
 	width: 100%;
 
 	/* Note Firefox 3.5 and before have a bug with border-collapse
-	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
+	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
 	 * border-spacing: 0; is one possible option. Conditional-css.com is
 	 * useful for this kind of thing
 	 *
@@ -327,7 +327,7 @@ table.display {
 	 * It subtracts one px relative to the other browsers from the first column, and
 	 * adds one to the end...
 	 *
-	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
+	 * If you want that effect I'd suggest setting a border-top/left on th/td's and
 	 * then filling in the gaps with other borders.
 	 */
 }
@@ -532,7 +532,7 @@ table.display tr.odd.row_selected td {
 /*
  * Sorting classes for columns
  */
-/* For the standard odd/even 
+/* For the standard odd/even
 tr.odd td.sorting_1 {
 	background-color: #E8F1F7;
 }
@@ -742,4 +742,51 @@ div.box {
 	overflow: auto;
 	border: 1px solid #8080FF;
 	background-color: #E5E5FF;
+}
+
+/*
+ * jHueSelector
+ */
+
+.jHueSelector {
+	border:1px solid #CCC;
+	padding:0;
+	margin:0;
+	width:300px;
+}
+.jHueSelectorHeader {
+	background-color:#CCC;
+	padding:4px;
+}
+
+.jHueSelector label {
+	width:10px;
+	float: none;
+	padding-left:4px;
+}
+.jHueSelector label input[type=checkbox] {
+	margin-right:3px;
+}
+
+.jHueSelectorHeader input[type=text] {
+	float:right;
+	width:100px;
+	height:20px;
+}
+
+.jHueSelectorBody {
+	height:150px;
+	overflow:auto;
+}
+.jHueSelector ul, li {
+	margin: 0;
+	padding: 0;
+}
+.jHueSelector ul {
+	padding:4px;
+	list-style: none;
+}
+.jHueSelector li.selectorDivider {
+	background-color:#EEE;
+	padding:4px;
 }

+ 125 - 0
desktop/core/static/js/Source/jHue/jquery.selector.js

@@ -0,0 +1,125 @@
+/*
+* jHue selector plugin
+* it tranforms a select multiple into a searchable/selectable alphabetical list
+*/
+;(function ($, window, document, undefined) {
+
+	var pluginName = "jHueSelector",
+	defaults = {
+		selectAllLabel: "Select all",
+		searchPlaceholder: "Search"
+	};
+
+	function Plugin(element, options) {
+		this.element = element;
+		this.options = $.extend({}, defaults, options) ;
+		this._defaults = defaults;
+		this._name = pluginName;
+		this.init();
+	}
+
+	Plugin.prototype.setOptions = function(options) {
+		this.options = $.extend({}, defaults, options) ;
+	};
+
+	Plugin.prototype.init = function () {
+		var _this = this;
+		var addressBook = [];
+		var selectorContainer = $("<div>").addClass("jHueSelector");
+		$(_this.element).hide();
+		$(_this.element).find("option").each(function(cnt, opt){
+			var initial = $(opt).text().substr(0,1).toLowerCase();
+			if (addressBook[initial] == null){
+				addressBook[initial] = [];
+			}
+			addressBook[initial].push($(opt));
+		});
+		var sortedKeys = [];
+		for (var key in addressBook){
+			sortedKeys.push(key);
+		}
+		sortedKeys.sort();
+
+		var body = $("<div>").addClass("jHueSelectorBody");
+		body.appendTo(selectorContainer);
+
+		for (var i=0; i<sortedKeys.length; i++){
+			var key = sortedKeys[i];
+			var ul = $("<ul>");
+			var dividerLi = $("<li>").addClass("selectorDivider");
+			dividerLi.html("<strong>"+key.toUpperCase()+"</strong>");
+			dividerLi.appendTo(ul);
+			$.each(addressBook[key], function(cnt, opt){
+				var li = $("<li>");
+				var lbl = $("<label>").text(opt.text());
+				$("<input>").attr("type","checkbox").addClass("selector").change(function(){
+					if ($(this).is(":checked")){
+						$(this).data("opt").attr("selected", "selected");
+					}
+					else {
+						$(this).data("opt").removeAttr("selected");
+					}
+				}).data("opt",opt).prependTo(lbl);
+				lbl.appendTo(li);
+				li.appendTo(ul);
+			});
+			ul.appendTo(body);
+		}
+
+		var header = $("<div>").addClass("jHueSelectorHeader");
+		header.prependTo(selectorContainer);
+
+		var selectAll = $("<label>").text(this.options.selectAllLabel);
+		$("<input>").attr("type","checkbox").change(function(){
+			var isChecked = $(this).is(":checked");
+			selectorContainer.find("input.selector:visible").each(function(){
+				if (isChecked){
+					$(this).attr("checked", "checked");
+					$(this).data("opt").attr("selected", "selected");
+				}
+				else {
+					$(this).removeAttr("checked");
+					$(this).data("opt").removeAttr("selected");
+				}
+			});
+			if (searchBox.val() != ""){
+				$(this).removeAttr("checked");
+			}
+		}).prependTo(selectAll);
+		selectAll.appendTo(header);
+
+		var searchBox = $("<input>").attr("type","text").attr("placeholder", this.options.searchPlaceholder).keyup(function(){
+			var q = $(this).val().trim();
+			if (q != ""){
+				body.find("li.selectorDivider").hide();
+				body.find("label").each(function(){
+					if ($(this).text().toLowerCase().indexOf(q) > -1){
+						$(this).show();
+					}
+					else {
+						$(this).hide();
+					}
+				});
+			}
+			else {
+				body.find("li.selectorDivider").show();
+				body.find("label").show();
+			}
+		});
+		searchBox.appendTo(header);
+
+		$(_this.element).after(selectorContainer);
+	};
+
+	$.fn[pluginName] = function (options) {
+		return this.each(function () {
+			if (!$.data(this, 'plugin_' + pluginName)) {
+				$.data(this, 'plugin_' + pluginName, new Plugin( this, options));
+			}
+			else {
+				$.data(this, 'plugin_' + pluginName).setOptions(options);
+			}
+		});
+	}
+
+})(jQuery, window, document);