Skip to content

Instantly share code, notes, and snippets.

@eiswind
Created May 20, 2013 12:09
Show Gist options
  • Save eiswind/5611866 to your computer and use it in GitHub Desktop.
Save eiswind/5611866 to your computer and use it in GitHub Desktop.
rap client js for select2 combo-replacement
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);
};
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment