0byt3m1n1

Path: /data/17/1/18/11/1670011/user/1801231/htdocs/marketting/js/scripts/saf/ [ Home ]
File: table_insert.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=window.opener.oUtil.langDir;
  document.write("<scr"+"ipt src='../language/"+sLangDir+"/table_insert.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>

var oTU=new TableUtilities();
    
function TableUtilities()
    {
    this.oTD;
    }

function GetElement(oElement,sMatchTag)
    {
    while (oElement!=null&&oElement.tagName!=sMatchTag)
        {
        if(oElement.tagName=="BODY")return null;
        oElement=oElement.parentNode;
        }
    return oElement;
    }
        
function tableClick(oTD)
    {
    if(oTD.tagName!="TD")return;
    
    oTable=GetElement(oTD,"TABLE");
    
    for(var i=0;i<oTable.rows.length;i++)
        {
        oCurrTR=oTable.rows[i];
        for(var j=0;j<oCurrTR.cells.length;j++)
            {
            oCurrTD=oCurrTR.cells[j]
            oCurrTD.style.backgroundColor="white";
            }
        }
    oTD.style.backgroundColor="#fac606";
    oTU.oTD=oTD;
    }

function doColSpan()
    {
    if(oTU.oTD==null)return;
    var oTD = oTU.oTD
    var oTable=GetElement(oTD,"TABLE")

    if(oTD.nextSibling!=null)
        {
        var numOfSpan=oTD.nextSibling.getAttribute("COLSPAN");
        numOfSpan = numOfSpan==null ? 1 : parseInt(numOfSpan);
        oTable.rows[oTD.parentNode.rowIndex].deleteCell(oTD.nextSibling.cellIndex);
        var curCellSpan = oTD.getAttribute("COLSPAN");
        curCellSpan = curCellSpan==null ? 1 : parseInt(curCellSpan);
        oTD.setAttribute("COLSPAN", curCellSpan + numOfSpan);
        }
    }
        
function doRowSpan()
    {
    if(oTU.oTD==null)return;
    var oTD = oTU.oTD
    var oTable=GetElement(oTD,"TABLE")
        
    selectedRow=oTD.innerHTML.split(",")[0]*1//asumsi:displayed=actual
    selectedCol=oTD.innerHTML.split(",")[1]*1
    
    var isFinish=false
    for(var k=1;k<oTable.rows.length-(selectedRow);k++)
        {
        var isExist=false;
        for(var i=0;i<oTable.rows[selectedRow+k].cells.length;i++)
            {
            if(oTable.rows[selectedRow+k].cells[i].innerHTML.split(",")[1]*1==selectedCol)
                {
                nActualToDelete=i;
                isExist=true;
                }
            }       
        if(isExist)
            {
            if(!isFinish)
                {
                var curRowSpan = oTD.getAttribute("ROWSPAN")==null ? 1 : oTD.getAttribute("ROWSPAN");
                var delRowSpan = oTable.rows[selectedRow+k].cells[nActualToDelete].getAttribute("ROWSPAN");
                if (delRowSpan==null) delRowSpan = 1;
                oTD.setAttribute("ROWSPAN", parseInt(curRowSpan) + parseInt(delRowSpan)); 
                oTable.rows[selectedRow+k].deleteCell(nActualToDelete)
                isFinish=true
                }
            }
        }
    }

function doPreview()
    {
    var inpCollapse = document.getElementById("inpCollapse");
    var inpCols = document.getElementById("inpCols");
    var inpRows = document.getElementById("inpRows");
    var inpBorder = document.getElementById("inpBorder");
    var inpSpacing = document.getElementById("inpSpacing");
    var inpPadding = document.getElementById("inpPadding");

  var sCellSpacing="";
  if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;
  var sCellPadding="";
  if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value; 
 
    if(inpCollapse.value=="Yes")
        sTmp="BORDER-COLLAPSE: collapse"
    else
        sTmp="";        
    sHTML="<table id=idTable style='"+sTmp+";background-color:white' "+sCellSpacing+" "+sCellPadding+" width=100% height=100%>"
        
    for(var i=0;i<inpRows.value;i++)
        {
        sHTML+="<tr>"
        for(var j=0;j<inpCols.value;j++)
            {
            if(inpBorder.value==0)
                sHTML+="<td style='border:black 1px dotted;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
            else
                sHTML+="<td style='border:black " + inpBorder.value + "px solid;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
            }
        sHTML+="</tr>"
        }
    sHTML+="</table>"
    document.getElementById("idPreview").innerHTML=sHTML
    }
    
function doPreview2()
    {
    var inpCollapse = document.getElementById("inpCollapse");
    var inpCols = document.getElementById("inpCols");
    var inpRows = document.getElementById("inpRows");
    var inpBorder = document.getElementById("inpBorder");
    var inpSpacing = document.getElementById("inpSpacing");
    var inpPadding = document.getElementById("inpPadding");
    
    var oTable=document.getElementById("idTable");

    if(inpCollapse.value=="Yes") 
        {
            oTable.style.borderCollapse="";
            oTable.style.borderCollapse="collapse";
        } else {
            oTable.style.borderCollapse="";
        }
    
    oTable.setAttribute("CELLSPACING", inpSpacing.value);
    oTable.setAttribute("CELLPADDING", inpPadding.value);

    for(var i=0;i<oTable.rows.length;i++)
        {
        oCurrTR=oTable.rows[i]
        for(var j=0;j<oCurrTR.cells.length;j++)
            {
            oCurrTD=oCurrTR.cells[j];
            if(inpBorder.value==0) 
                oCurrTD.style.border="black 1px dotted";
            else 
                oCurrTD.style.border="black " + inpBorder.value + "px solid";
            }
        }
        
    }   
    
function doInsert()
    {
    
    var idPreview = document.getElementById("idPreview");
    var inpCollapse = document.getElementById("inpCollapse");
    var inpBorder = document.getElementById("inpBorder");
    var inpSpacing = document.getElementById("inpSpacing");
    var inpPadding = document.getElementById("inpPadding");  
    var inpSummary = document.getElementById("inpSummary");  
    var inpCaption = document.getElementById("inpCaption");  

  var sCellSpacing="";
  if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;
  var sCellPadding="";
  if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value;   
    
    window.opener.oUtil.obj.saveForUndo();

    var oNodes=idPreview.childNodes[0].childNodes[0].childNodes

    if(inpCollapse.value=="Yes")
        sTmp="BORDER-COLLAPSE:collapse"
    else
        sTmp=""
    sHTML="<table style='"+sTmp+";width:100%;' "+sCellSpacing+" "+sCellPadding+ (inpSummary.value==""?"":" summary=\"" + inpSummary.value + "\" ") + " selThis=\"selThis\">" //BORDER-COLLAPSE:collapse; cellpadding=0 cellspacing=0
    if(inpCaption.value!="") sHTML+="<caption>"+inpCaption.value+"</caption>"; 
    
    for(var i=0;i<oNodes.length;i++)
        {
        sHTML+="<tr>"
        for(var j=0;j<oNodes[i].childNodes.length;j++)
            {           
            nRowSpan=oNodes[i].childNodes[j].getAttribute("ROWSPAN");
            nRowSpan=nRowSpan==null ? 1 : parseInt(nRowSpan); 
            nColSpan=oNodes[i].childNodes[j].getAttribute("COLSPAN");
            nColSpan=nColSpan==null ? 1 : parseInt(nColSpan); 
            var sRowSpan=(nRowSpan>1 ? " rowspan="+nRowSpan+ " " : "");
            var sColSpan=(nColSpan>1 ? " colspan="+nColSpan+ " " : "");
            if(inpBorder.value==0)
                sHTML+="<td "+sRowSpan+sColSpan+" style='vertical-align:top'>&nbsp;</td>";
            else
                sHTML+="<td style='border:black " + inpBorder.value + "px solid;vertical-align:top' "+sRowSpan+sColSpan+">&nbsp;</td>";
            }
        sHTML+="</tr>"
        }
    sHTML+="</table>"
    
    
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var range = oSel.getRangeAt(0);
                
    var docFrag = range.createContextualFragment(sHTML);
    range.deleteContents();            
    range.insertNode(docFrag);
   
    var allTabs = oEditor.document.getElementsByTagName("TABLE");
    for(var i=0; i<allTabs.length; i++) {
        if (allTabs[i].getAttribute("selThis") == "selThis") {
            oSel=oEditor.getSelection();
            range = oEditor.document.createRange();
            range.selectNode(allTabs[i]);
            oSel.removeAllRanges();
            oSel.addRange(range);
            allTabs[i].removeAttribute("selThis");
            break;
        }
    }
  
    //*** RUNTIME BORDERS ***
    //window.opener.oUtil.obj.runtimeBorder(false);
    //***********************   
    
    window.opener.realTime(window.opener.oUtil.obj);
    window.opener.oUtil.obj.selectElement(0);
    }
    
function bodyOnload()
    {
    document.getElementById("btnInsert").focus();
    }
    
</script>
</head>
<body onload="bodyOnload();loadTxt();doPreview()" style="overflow:hidden;">
<!-- do not remove "filter" -->

<table width=100% height="100%" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:7;padding-left:10;">

<!----> 
    <table style="margin-bottom:4">
    <tr>
        <td><span id="txtLang" name="txtLang">Rows</span>:</td>
        <td><input type="text" ID="inpRows" NAME="inpRows" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
        <td>&nbsp;</td>
        <td><span id="txtLang" name=txtLang>Spacing</span>:</td>
        <td><select id="inpSpacing" name="inpSpacing" onchange="doPreview2()" class="inpSel">
        <option value="" selected></option>
                <option value=0>0px</option>
                <option value=1>1px</option>
                <option value=2>2px</option>
                <option value=3>3px</option>
                <option value=4>4px</option>
                <option value=5>5px</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><span id="txtLang" name="txtLang">Columns</span>:</td>
        <td><input type="text" id="inpCols" name="inpCols" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
        <td>&nbsp;</td>
        <td><span id="txtLang" name="txtLang">Padding</span>:</td>
        <td><select id="inpPadding" name="inpPadding" onchange="doPreview2()" class="inpSel">
        <option value="" selected></option>
                <option value=0>0px</option>
                <option value=1>1px</option>
                <option value=2>2px</option>
                <option value=3>3px</option>
                <option value=4>4px</option>
                <option value=5>5px</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><span id="txtLang" name="txtLang">Borders</span>:</td>
        <td>
            <select ID="inpBorder" NAME="inpBorder" onchange="doPreview2()" class="inpSel">
                <option value=0 id="optLang" name="optLang" selected>No Border</option>
                <option value=1>1px</option>
                <option value=2>2px</option>
                <option value=3>3px</option>
                <option value=4>4px</option>
                <option value=5>5px</option>
            </select>
        </td>
        <td>-</td>
        <td><span id="txtLang" name="txtLang">Collapse</span>:</td>
        <td>
            <select ID="inpCollapse" NAME="inpCollapse" onchange="doPreview2()" class="inpSel">
                <option value="Yes" id="optLang" name="optLang">Yes</option>
                <option value="No" id="optLang" name="optLang" selected>No</option>
            </select>   
        </td>
<!---->
    </tr>
    <tr>
      <td><span id=txtLang name=txtLang>Caption</span>:</td>
      <td colspan='4'><input type="text" id="inpCaption" name="inpCaption" size="40" value=""></td>
    </tr>
    <tr>
      <td><span id=txtLang name=txtLang>Summary</span>:</td>
      <td colspan='4'><input type="text" id="inpSummary" name="inpSummary" size="40" value=""></td>
    </tr>    
    </table>


    <table style="width:100%;height:140px;" cellpadding=0 cellspacing=0 border=0>

    <tr>
        <td style="background-color:ghostWhite; padding:5px;border:#999999 1px solid" height=100%>
            <div id=idPreview style="overflow:auto;height:100%;padding:0"></div>
        </td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr>
        <td align=center>
            <INPUT type="button" id="btnSpan2" name="btnSpan2" value="Span >;" onclick="doColSpan()" unselectable=on style="width:90px;height:22px;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
            <INPUT type="button" id="btnSpan1" name="btnSpan1" value="Span v" onclick="doRowSpan()" unselectable=on style="width:90px;height:22px;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
        </td>
    </tr>
    </table>
    

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13;padding-top:7;padding-bottom:7;" align="right">
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnInsert id=btnInsert value="insert" onclick="doInsert();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>