Knockout Passport Popup Form

by Rupesh Kokal

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Go caps</button>
<br />
<button data-bind="click: SubmitForm">Submit</button>
<button data-bind="click: CancelForm">Cancel</button>

CSS

body {
 border-right: 0px; 
 border-top: 0px; 
 border-bottom: 0px; 
 border-left: 0px; 
 margin: 0px; 
 cursor: default; 
 background-color: #ffffff;
 border:1px solid white;
}
.sf-formbackground
{
    background: url(../images/popup-bgnew.jpg);
    /*background-color:#FFFFFF;*/
    
     /* Mozilla overlay */
}
.sf-headerbar
{
    background-color:#F1F1F1;
}
.sf-gridrowappended
{
    background-color:#BCD2EE;
    border-bottom-style:none;
    border-left-style:none;
    border-right-style:none;
    border-top-style:none;    
}
.sf-formlabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
font-size: 11px;
padding-bottom: 0px;
text-decoration: none;
vertical-align:middle;
font-weight:bold;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-right:1px solid #F5F5F5;

}
.sf-formlabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size: 11px;
font-weight:normal;
padding-bottom: 8px;
text-decoration: none;

}
.sf-formbody{
font-family:Verdana;
font-size:.7em;
vertical-align:top;
padding:3px 6px 4px 6px;
background-color:#FAFAFA;
border-bottom:1px solid #F5F5F5;
}
.sf-formfirstlabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
vertical-align:middle;
border-right:1px solid #F5F5F5;
font-size: 11px;
padding-bottom: 0px;
font-weight:bold;
text-decoration: none;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-top:1px solid #F5F5F5;
}
.sf-formfirstlabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size: 11px;
padding-bottom: 8px;
font-weight:normal;
text-decoration: none;
}

.sf-formEcslabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
vertical-align:middle;
border-right:1px solid #F5F5F5;
font-size: 11px;
padding-bottom: 0px;
font-weight:bold;
text-decoration: none;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-top:1px solid #F5F5F5;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.sf-formEcslabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size:...

JavaScript

//
        // IE browsers do not support indexOf method for an Array. Hence 
        // we add it below after performing the check on the existence of
        // the same.
        //
        if (!Array.prototype.indexOf)
        {
            Array.prototype.indexOf = function (obj, start)
            {
                for (var i = (start || 0), j = this.length; i < j; i++)
                {
                    if (this[i] === obj)
                    {
                        return i;
                    }
                }
                return -1;
            };
        }

function X2JS() {
    var VERSION = "1.0.6"

    var DOMNodeTypes = {
        ELEMENT_NODE        : 1,
        TEXT_NODE           : 3,
        CDATA_SECTION_NODE : 4,
        DOCUMENT_NODE        : 9
    }
    
    function getNodeLocalName( node ) {
        var nodeLocalName = node.localName;            
        if(nodeLocalName == null) // Yeah, this is IE!! 
            nodeLocalName = node.baseName;
        if(nodeLocalName == null || nodeLocalName=="") // =="" is IE too
            nodeLocalName = node.nodeName;
        return nodeLocalName;
    }
    
    function getNodePrefix(node) {
        return node.prefix;
    }

    function parseDOMChildren( node ) {
        if(node.nodeType == DOMNodeTypes.DOCUMENT_NODE) {
            var result = new Object;
            var child = node.firstChild; 
            var childName = getNodeLocalName(child);
            result[childName] = parseDOMChildren(child);
            return result;
        }
        else
        if(node.nodeType == DOMNodeTypes.ELEMENT_NODE) {
            var result = new Object;
            result.__cnt=0;
            
            var nodeChildren = node.childNodes;
            
            // Children nodes
            for(var cidx=0; cidx <nodeChildren.length; cidx++) {
                var child = nodeChildren.item(cidx); // nodeChildren[cidx];
                var childName = getNodeLocalName(child);
               ...