/** * @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(){
//
});