หน้าเว็บ

วันเสาร์ที่ 19 เมษายน พ.ศ. 2557

Primefaces dialog listener javascript



PrimefacesDialog.js
/**
 * @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');
    }
});

3 ความคิดเห็น:

  1. มันแตกต่างกับการใช้ p:dialog ยังไงอะ

    ตอบลบ
  2. 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 มันก็เริ่มเยอะ
    เลยมาเขียนเป็นแบบนี้ดีกว่าครับ

    ตอบลบ
  3. วัตถุประสงค์ มันก็เหมือนกับ event listener ของ jqeury อ่ะครับ เช่น
    $('#myButton').on('click', function(){
    //
    });

    ตอบลบ