gistfile1.js

var SELECT2_BASEPATH = "rwt-resources/select2/";

(function() {
	'use strict';

	rap.registerTypeHandler("eiswind.Select2", {

		factory : function(properties) {
			return new eiswind.Select2(properties);
		},

		destructor : "destroy",

		properties : [ "data", "multi", "selection", "allowClear",
				"placeHolder" ],

		events : [ "selection" ]
	});

	if (!window.eiswind) {
		window.eiswind = {};
	}

	if (document.createStyleSheet) {
		document.createStyleSheet(SELECT2_BASEPATH + "select2/select2.css");
	} else {
		$("head")
				.append(
						$("<link rel='stylesheet' href='"
								+ SELECT2_BASEPATH
								+ "select2/select2.css' type='text/css' media='screen' />"));
	}

	eiswind.Select2 = function(properties) {
		try {
			bindAll(this, [ "layout", "onReady", "onSend", "onRender" ]);
			this.parent = rap.getObject(properties.parent);
			this.element = document.createElement("div");
			this.parent.append(this.element);
			this.parent.addListener("Resize", this.layout);
			console.log("before create");
			$(this.element).append("<input type=\"hidden\"/>");
			console.log("after create");
			this.select2 = $(this.element).children()[0];
		} catch (e) {
			console.log(e);
		}
		console.log("before connect render");
		rap.on("render", this.onRender);
	};

	eiswind.Select2.prototype = {

		ready : false,

		onReady : function() {

			this.ready = true;
			this.layout();

			if (this._data) {
				this.setData(this._data);
				delete this._data;
			}

			if (this._multi) {
				this.setMulti(this._multi);
				delete this._multi;
			}

			// must be set after data & multi so that data is ready to be
			// selected
			if (this._selection) {
				this.setSelection(this._selection);
				delete this._selection;
			}

		},

		onRender : function() {
			console.log("jupi");
			if (this.element.parentNode) {
				console.log("onRender")
				rap.off("render", this.onRender);
				var self = this;

				this.select2init = $(this.select2).select2({
					query : function(query) {
						self.query(query);
					},
					formatResult : function(item) {
						var str = "<strong>" + item.shortText + "</strong>";
						if (item.text.length > 0) {

							str = str + "<br>" + item.text;
						}
						;
						return str;
					},

					formatSelection : function(item) {
						return item.shortText;
					},

					escapeMarkup : function(m) {
						return m;
					},

					multiple : (this._multi || this.multi),

					allowClear : this.allowClear,
					placeholder : this.placeHolder,

					initSelection : function(element, callback) {

						var result = [];
						$(element.val().split(",")).each(function() {
							var sid = this;
							$(self.data.results).each(function() {

								if (this.id == sid) {

									result.push(this);
									return;
								}
							});
						});

						// if not multi mode we must return a single object
						if (self.multi) {
							callback(result);
						} else {
							if (result.length > 0) {
								callback(result[0]);
							}
						}
					}
				});

				$(this.select2).on("change", function(e) {

					self.handleChange(e);
				});

				this.onReady();

				rap.on("send", this.onSend);
			}
		},

		onSend : function() {

		},

		handleChange : function(e) {

			this.selection = e.val;
			var remoteObject = rap.getRemoteObject(this);
			remoteObject.notify("selection", {
				value : this.selection
			});
		},

		setData : function(data) {
			if (this.ready) {
				this.data = data;
			} else {
				this._data = data;
			}
		},

		setSelection : function(sel) {
			if (this.ready) {
				this.selection = sel;
				this.select2init.select2("val", sel);
			} else {
				this._selection = sel;
			}
		},

		setMulti : function(m) {
			if (this.ready) {
				this.multi = m;
			} else {
				this._multi = m;
			}
		},

		setAllowClear : function(m) {

			this.allowClear = m;

		},

		setPlaceHolder : function(s) {
			this.placeHolder = s;
		},

		query : function(q) {
			if (typeof this.data == 'undefined') {
				this.data = {
					results : []
				};
			}

			q.callback(this.data);
		},

		format : function(item) {
			return item.text;
		},

		destroy : function() {
			rap.off("send", this.onSend);

			this.element.parentNode.removeChild(this.element);
		},

		layout : function() {

			if (this.ready) {
				var area = this.parent.getClientArea();
				this.element.style.left = area[0] + "px";

				this.element.style.top = area[1] + "px";
				this.element.style.right = area[2] + "px";
				this.element.style.bottom = area[3] + "px";

				$(this.element).children('.select2-container').css({
					width : (area[2] - area[0]) + "px"
				});
			}
		}

	};

	var bind = function(context, method) {
		return function() {
			return method.apply(context, arguments);
		};
	};

	var bindAll = function(context, methodNames) {
		for ( var i = 0; i < methodNames.length; i++) {
			var method = context[methodNames[i]];
			context[methodNames[i]] = bind(context, method);
		}
	};

	var async = function(context, func) {
		window.setTimeout(function() {
			func.apply(context);
		}, 0);
	};

}());