Bound Dialogue

Implemented a checkbox, input and a button, all bound to a object.

by Ben Clayton

HTML

<div id="popup">
    <button id="close">OK</button><br/>
</div>

CSS

body,input {font-family:arial;font-size:12px;}
#popup {position:absolute;
    left:80px;
    top:80px;
    border:1px solid grey;
    padding:10px
}

label {min-width:90px;
        display:inline-block}

#close {float:right;clear:both}

JavaScript

function dialog(obj,cfg){
    for(var i=0;i<cfg.length;i++){
        if(cfg[i].cntrl=='array-input'){
            for(var j=0;j<obj[cfg[i].name].length;j++){
                attachControl(obj[cfg[i].name],cfg[i].label+" "+j,j,'input');
            }
        }else{
            attachControl(obj,cfg[i].label,cfg[i].name,cfg[i].cntrl);
        }
    }    

    function attachControl(obj,lbl,nm,cntrl){
        var v=obj[nm];
        var c;
        if(cntrl=='checkbox'){
            c=$("<input type='checkbox' value=1 "+(v?'checked':'')+" ></input><br/>");
        }else if(cntrl=='input'){
            c=$("<input type='input' value=\""+v+"\" /><br/>");   
        }else if(cntrl=='button'){
            c=$("<button>Click</button><br/>");   
        }
        $("<label>"+lbl+"</label>").appendTo("#popup");
        var $cn =$(c).appendTo("#popup");
        $cn.data('obj',obj);
        $cn.data('prop',nm);
        $cn.on('change',function(){
            var o = $(this).data('obj');
            var p = $(this).data('prop');
            if($(this).attr('type')=='checkbox') o[p]=$(this).prop('checked')?1:0;
            if($(this).attr('type')=='input') o[p]=$(this).val();
        });
        $cn.on('click',function(){
            var o = $(this).data('obj');
            var p = $(this).data('prop');
            if($(this).prop('tagName')=='BUTTON') o[p]();
        });
    }
}
//==================================================================================
var editor_settings={
        lock:0,
        speed:100,
    widths:['100px','200px','100%','22px'],
    cb:function(){alert('run a function in scope of object\nspeed:'+this.speed+' \nwidths[2]'+this.widths[2])}
};

$("#close").on('click',function(){
    alert('lock: '+editor_settings.lock+"\nspeed: "+editor_settings.speed);
});

dialog(editor_settings,[
    {label:'Lock',name:'lock', cntrl:'checkbox'},
    {label:'Speed',name:'speed', cntrl:'input'},
    {label:'Widths',name:'widths', cntrl:'array-input'},
   ...