/**
* @author jittagorn pitakmetagoon
* create 19/04/2014
* source http://na5cent.blogspot.com/2014/04/primefaces-dialog-listener-javascript.html
*/
window.PrimefacesDialog = window.PrimefacesDialog || (function(global) {
var listener = [];
function isString(data) {
return typeof data === 'string';
}
function isFunction(data) {
return typeof data === 'function';
}
function forEachProperty(object, callback, ctx) {
for (var prop in object) {
if (object.hasOwnProperty(prop)) {
callback.call(ctx, object[prop], prop, object);
}
}
}
function forEachIndex(array, callback, ctx) {
var length = array.length;
for (var i = 0; i < length; i++) {
callback.call(ctx, array[i], i, array, length);
}
}
function forEachDialog(callback, ctx) {
forEachProperty(global, function(value, prop, object) {
if (isDialog(value)) {
callback.call(ctx, value, prop, object);
}
});
}
function isDialog(object) {
return object && object.jq
&& object.jq.attr
&& object.jq.attr('class')
&& object.jq.attr('class').indexOf('ui-dialog') !== -1;
}
function bind(type, name) {
return function() {
var that = this;
forEachIndex(listener, function(list) {
if (list.type !== type) {
return;
}
if (list.dialog) {
list.dialog === name && list.callback.call(that, name);
} else {
list.callback.call(that, name);
}
});
};
}
function initialize() {
forEachDialog(function(dialog, name) {
dialog.cfg.onShow = bind('show', name);
dialog.cfg.onHide = bind('hide', name);
});
}
global.addEventListener('load', initialize);
return {
/**/
initialize: initialize,
/**
* for listen dialog event
*
* @param {String} type - (show, hide)
* @param {String} dialogWidgetVar_opt - optional
* @param {Function} callback
*/
on: function(type, dialogWidgetVar_opt, callback) {
if (isFunction(dialogWidgetVar_opt)) {
callback = dialogWidgetVar_opt;
dialogWidgetVar_opt = undefined;
}
if (!isString(type)) {
throw new Error('require type is string.');
}
if (dialogWidgetVar_opt && !isString(dialogWidgetVar_opt)) {
throw new Error('require dialogWidgetVar_opt is string.');
}
if (!isFunction(callback)) {
throw new Error('require callback is function.');
}
listener.push({
type: type,
dialog: dialogWidgetVar_opt,
callback: callback
});
return PrimefacesDialog;
}
};
})(window);
Syntax
PrimefacesDialog.on(event_type, widget_dialog_name, callback_function)
parameters
-------------------------------
String event_type (show, hide)
String widget_dialog_name (define by attribute widgetVar of <p:dialog/>) - optional
Function callback_function
Example
<p:dialog widgetvar="addWidgetDialog">
....
....
....
</p:dialog>
//for listen all dialogs
PrimefacesDialog.on('show', function(name){
console.log('on ' + name + ' show --> ', this);
})
//specific dialog
PrimefacesDialog.on('hide', 'addWidgetDialog', function(name){
console.log('on ' + name + ' hide --> ', this);
})
for make body overflow hidden (hide window scrollbar) when dialog show (fixed content position)
var dialogs = [];
PrimefacesDialog.on('show', function(dialog) {
dialogs.push(dialog);
jQuery('body').css('overflow', 'hidden');
}).on('hide', function() {
dialogs.pop();
if (!dialogs.length) {
jQuery('body').css('overflow', 'auto');
}
});
มันแตกต่างกับการใช้ p:dialog ยังไงอะ
ตอบลบ1. code ไม่ผูกติดกับ dialog แต่ละตัว
ตอบลบ(คือไม่ได้ไปเขียน script ผูกไว้ที่ dialog โดยตรง)
2. สามารถ ดักจับการ show, hide ของ dialog ทุกตัวได้ในที่เดียวครับ
PrimefacesDialog.on('show', function(name){
console.log('on ' + name + ' show --> ', this);
});
คือบางที เวลาผมใช้งาน แล้ว ผมอยากทำอะไรบางอย่างตอนที่ dialog มันโชว์
ถ้าเป็นแต่ก่อนก็คง ไปเขียน script ผูกไว้ที่ dialog นั้นๆ
ทีนี้ มันมีบางอย่างที่ผมอยากให้มันทำเหมือนๆ กันใน ทุกๆ dialog
code มันก็เริ่มเยอะ
เลยมาเขียนเป็นแบบนี้ดีกว่าครับ
วัตถุประสงค์ มันก็เหมือนกับ event listener ของ jqeury อ่ะครับ เช่น
ตอบลบ$('#myButton').on('click', function(){
//
});