[$] Pr1v473 xHeEl B4ckD00RzZ [$]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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=parent.oUtil.langDir;
document.write("<scr"+"ipt src='language/"+sLangDir+"/table_edit.js'></scr"+"ipt>");
</script>
<script language="JavaScript" src="color_picker.js"></script>
<script>writeTitle()</script>
<script language="JavaScript" src="table.js"></script>
<script>
var dialogArgument=['parent', 'parent'];
function modalDialogShow(url,width,height)
{
parent.modalDialogShow(parent.oUtil.obj.scriptPath+url,width,height,window);
}
document.onclick=hideAll;
function hideAll()
{
oColor1.hide();
}
function tabClick(n)
{
switch(n)
{
case 1:
tab1.style.border="#e5e5e5 1px solid";
tab1.style.borderBottom="none";
tab1.style.background="#ffffff";
tab1.style.cursor="";
tab2.style.border="#e5e5e5 1px solid";
tab2.style.borderLeft="none";
tab2.style.background="#e5e5e5";
tab2.style.cursor="pointer";
tab3.style.border="#e5e5e5 1px solid";
tab3.style.borderLeft="none";
tab3.style.background="#e5e5e5";
tab3.style.cursor="pointer";
divAutoFit.style.display="block"
divProperties.style.display="none"
divStyle.style.display="none"
break;
case 2:
tab1.style.border="#e5e5e5 1px solid";
tab1.style.borderRight="none";
tab1.style.background="#e5e5e5";
tab1.style.cursor="pointer";
tab2.style.border="#e5e5e5 1px solid";
tab2.style.borderBottom="none";
tab2.style.background="#ffffff";
tab2.style.cursor="";
tab3.style.border="#e5e5e5 1px solid";
tab3.style.borderLeft="none";
tab3.style.background="#e5e5e5";
tab3.style.cursor="pointer";
divAutoFit.style.display="none"
divProperties.style.display="block"
divStyle.style.display="none"
break;
case 3:
tab1.style.border="#e5e5e5 1px solid";
tab1.style.borderRight="none";
tab1.style.background="#e5e5e5";
tab1.style.cursor="pointer";
tab2.style.border="#e5e5e5 1px solid";
tab2.style.background="#e5e5e5";
tab2.style.cursor="pointer";
tab3.style.border="#e5e5e5 1px solid";
tab3.style.borderBottom="none";
tab3.style.background="#ffffff";
tab3.style.cursor="";
divAutoFit.style.display="none"
divProperties.style.display="none"
divStyle.style.display="block"
break;
}
}
/************************
COMMON
************************/
function GetElement(oElement,sMatchTag)
{
while (oElement!=null&&oElement.tagName!=sMatchTag)
{
if(oElement.tagName=="BODY")return null;
oElement=oElement.parentElement;
}
return oElement;
}
/************************
REAL TIME
************************/
function doWindowFocus()
{
parent.oUtil.onSelectionChanged=new Function("realTime()");
}
function bodyOnLoad()
{
loadTxt();
//tabClick(1);
window.onfocus=doWindowFocus;
parent.oUtil.onSelectionChanged=new Function("realTime()");
realTime();
}
function bodyOnUnload() {
parent.oUtil.onSelectionChanged=null;
}
function realTime()
{
if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
var oEditor=parent.oUtil.oEditor;
var oSel=oEditor.document.selection.createRange();
var oTable = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"));
if (oTable == null) return;
//Align
inpAlign.value = oTable.align;
if(oTable.caption) inpCaption.value=oTable.caption.innerText;
if(oTable.getAttribute("summary")) {
inpSummary.value=oTable.getAttribute("summary");
}
//Margin
//Berkaitan dgn "Not Available"
if(oTable.style.marginLeft!="")
{
if(oTable.style.marginLeft.substr(oTable.style.marginLeft.length-2,2)!="px") inpMarginLeft.value = "na";
else inpMarginLeft.value = oTable.style.marginLeft.substring(0,oTable.style.marginLeft.length-2);
}
else inpMarginLeft.value="";
if(oTable.style.marginRight!="")
{
if(oTable.style.marginRight.substr(oTable.style.marginRight.length-2,2)!="px") inpMarginRight.value = "na";
else inpMarginRight.value = oTable.style.marginRight.substring(0,oTable.style.marginRight.length-2);
}
else inpMarginRight.value ="";
if(oTable.style.marginTop!="")
{
if(oTable.style.marginTop.substr(oTable.style.marginTop.length-2,2)!="px") inpMarginTop.value = "na";
else inpMarginTop.value = oTable.style.marginTop.substring(0,oTable.style.marginTop.length-2);
}
else inpMarginTop.value ="";
if(oTable.style.marginBottom!="")
{
if(oTable.style.marginBottom.substr(oTable.style.marginBottom.length-2,2)!="px") inpMarginBottom.value = "na";
else inpMarginBottom.value = oTable.style.marginBottom.substring(0,oTable.style.marginBottom.length-2);
}
else inpMarginBottom.value ="";
//background (harus lebih dulu dari background color)
if(oTable.style.backgroundImage=="")
{
if(oTable.background)
{
divPreviewTable.style.background="url('"+oTable.background+"')";
}
else
{
divPreviewTable.style.background="";
}
}
else
{
divPreviewTable.style.background=oTable.style.backgroundImage + " " + oTable.style.backgroundColor + " " + oTable.style.backgroundRepeat + " " + oTable.style.backgroundPositionX + " " + oTable.style.backgroundPositionY;
//ini sekaligus meng-apply color, dll
}
//backgroundColor
if(oTable.style.backgroundColor=="")
{
if(oTable.bgColor)
{
inpBackgroundColor.style.backgroundColor=oTable.bgColor;
oColor1.color=oTable.bgColor;
}
else
{
inpBackgroundColor.style.backgroundColor="";
oColor1.color="";
}
}
else
{
inpBackgroundColor.style.backgroundColor=oTable.style.backgroundColor;
oColor1.color=oTable.style.backgroundColor;
}
if(oTable.style.borderCollapse=="collapse")
{
inpCollapse.value="Yes"
}
else
{
inpCollapse.value="No"
}
if(oTable.cellSpacing!="")
{
inpCellSpacing.value=oTable.cellSpacing;
}
else
{
inpCellSpacing.value=""
}
if(oTable.cellPadding!="")
{
inpCellPadding.value=oTable.cellPadding;
}
else
{
inpCellPadding.value=""
}
//CSS Text
inpCSSText.value = oTable.style.cssText
//Table Width
inpWidth.value=="";//reset
if(oTable.style.width == "")
{
if(oTable.width.substr(oTable.width.length-1,1)=="%")
{
if(oTable.width.substr(0,oTable.width.length-1)=="100")
{
inpAutoFit1[2].checked=true;
}
else
{
inpAutoFit1[1].checked=true;
inpAutoFitMeasure1.value = "%";
inpWidth.value = oTable.width.substr(0,oTable.width.length-1)
}
}
else if(oTable.width!="")
{
inpAutoFit1[1].checked=true;
inpAutoFitMeasure1.value = "px";
inpWidth.value = oTable.width;
}
else
{
inpAutoFit1[0].checked=true;
}
}
else
{
if(oTable.style.width.substr(oTable.style.width.length-2,2)=="px")
{
inpAutoFit1[1].checked=true;
inpAutoFitMeasure1.value = "px";
inpWidth.value = oTable.style.width.substr(0,oTable.style.width.length-2);
}
if(oTable.style.width.substr(oTable.style.width.length-1,1)=="%")
{
if(oTable.style.width.substr(0,oTable.style.width.length-1)=="100")
{
inpAutoFit1[2].checked=true;
}
else
{
inpAutoFit1[1].checked=true;
inpAutoFitMeasure1.value = "%";
inpWidth.value = oTable.style.width.substr(0,oTable.style.width.length-1)
}
}
}
//Table Height
inpHeight.value=="";//reset
if(oTable.style.height == "")
{
if(oTable.height.substr(oTable.height.length-1,1)=="%")
{
if(oTable.height.substr(0,oTable.height.length-1)=="100")
{
inpAutoFit2[2].checked=true;
}
else
{
inpAutoFit2[1].checked=true;
inpAutoFitMeasure2.value = "%";
inpHeight.value = oTable.height.substr(0,oTable.height.length-1)
}
}
else if(oTable.height!="")
{
inpAutoFit2[1].checked=true;
inpAutoFitMeasure2.value = "px";
inpHeight.value = oTable.height;
}
else
{
inpAutoFit2[0].checked=true;
}
}
else
{
if(oTable.style.height.substr(oTable.style.height.length-2,2)=="px")
{
inpAutoFit2[1].checked=true;
inpAutoFitMeasure2.value = "px";
inpHeight.value = oTable.style.height.substr(0,oTable.style.height.length-2);
}
if(oTable.style.height.substr(oTable.style.height.length-1,1)=="%")
{
if(oTable.style.height.substr(0,oTable.style.height.length-1)=="100")
{
inpAutoFit2[2].checked=true;
}
else
{
inpAutoFit2[1].checked=true;
inpAutoFitMeasure2.value = "%";
inpHeight.value = oTable.style.height.substr(0,oTable.style.height.length-1)
}
}
}
}
/************************
APPLY
************************/
function doApply()
{
parent.oUtil.obj.setFocus();
if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
var oEditor=parent.oUtil.oEditor;
var oSel=oEditor.document.selection.createRange();
parent.oUtil.obj.saveForUndo();
var oTable = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"));
if (oTable == null) return;
oTable.style.cssText = inpCSSText.value;
if(divStyle.style.display=="block")
{
//*** RUNTIME BORDERS ***
parent.oUtil.obj.runtimeBorder(false);
//***********************
realTime();
return;
}
if(inpAutoFit1[0].checked)//AutoFit to contents
{
oTable.width = "";
oTable.style.width = "";
}
if(inpAutoFit1[1].checked)//Fixed cell width
{
if(inpWidth.value!="")
{
oTable.width = "";
oTable.style.width = inpWidth.value + inpAutoFitMeasure1.value;
}
}
if(inpAutoFit1[2].checked)//AutoFit to window
{
oTable.width = "";
oTable.style.width = "100%";
}
if(inpAutoFit2[0].checked)//AutoFit to contents
{
oTable.height = "";
oTable.style.height = "";
}
if(inpAutoFit2[1].checked)//Fixed cell height
{
if(inpHeight.value!="")
{
oTable.height = "";
oTable.style.height = inpHeight.value + inpAutoFitMeasure2.value;
}
}
if(inpAutoFit2[2].checked)//AutoFit to window
{
oTable.height = "";
oTable.style.height = "100%";
}
oTable.align = inpAlign.value;
//Berkaitan dgn "Not Available"
if(inpMarginLeft.value!="na") oTable.style.marginLeft = inpMarginLeft.value; //by default satuanya pixel
if(inpMarginRight.value!="na") oTable.style.marginRight = inpMarginRight.value;
if(inpMarginTop.value!="na") oTable.style.marginTop = inpMarginTop.value;
if(inpMarginBottom.value!="na") oTable.style.marginBottom = inpMarginBottom.value;
//Background sec. umum harus lebih dulu, baru kmd background color.
oTable.style.background=divPreviewTable.style.background;
oTable.style.backgroundColor = inpBackgroundColor.style.backgroundColor;
oTable.removeAttribute("bgColor",0);
//Clean
if(oTable.style.backgroundImage=="none" &&
oTable.style.backgroundRepeat=="repeat" &&
oTable.style.backgroundPosition=="0% 0%" &&
oTable.style.backgroundAttachment=="scroll")
{
oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-IMAGE: none/,"")
oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-REPEAT: repeat/,"")
oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-POSITION: 0% 0%/,"")
oTable.style.cssText=oTable.style.cssText.replace(/BACKGROUND-ATTACHMENT: scroll/,"")
}
if(inpBorder.value!="")
{
if(inpBorder.value==0)oTable.style.border="none";
else oTable.style.border = "black " + inpBorder.value + "px solid";
for (var i=0;i<oTable.rows.length;i++)
{
var oTR=oTable.rows[i];
for (var j=0;j<oTR.childNodes.length;j++)
{
var oTD=oTR.childNodes[j];
if(inpBorder.value!=0)
oTD.style.border = "black " + inpBorder.value + "px solid";
else
oTD.style.border = "none";
}
}
}
if(inpCollapse.value=="Yes")
{
oTable.style.borderCollapse="collapse";
}
else
{
oTable.style.borderCollapse="";
}
if(inpCellSpacing.value!="")
{
oTable.cellSpacing=inpCellSpacing.value;
}
else
{
//oTable.cellSpacing=""
oTable.removeAttribute("cellSpacing",0);
}
if(inpCellPadding.value!="")
{
oTable.cellPadding=inpCellPadding.value;
for(var i=0;i<oTable.rows.length;i++)
{
var oTR=oTable.rows[i]
for(var j=0;j<oTR.childNodes.length;j++)
{
var oTD=oTR.childNodes[j]
oTD.style.padding=""
}
}
}
else
{
//oTable.cellPadding=""
oTable.removeAttribute("cellPadding",0);
}
if(inpCaption.value!="") {
if (!oTable.caption) oTable.createCaption();
oTable.caption.innerText=inpCaption.value;
}
if(inpSummary.value!="") {
oTable.setAttribute("summary", inpSummary.value);
}
//*** RUNTIME BORDERS ***
parent.oUtil.obj.runtimeBorder(false);
//***********************
realTime()
}
</script>
</head>
<body style="overflow:hidden;">
<table width=100% height=100% align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding-top:15px;padding-left:13px;padding-right:13px;padding-bottom:0px;height:100%">
<table cellpadding=0 cellspacing=0 style="border-collapse:collapse;width:100%;">
<tr>
<td id=tab1 style="cursor:pointer;padding:8px; border:#e5e5e5 1px solid;border-bottom:none;background:#ffffff;cursor:" onclick="tabClick(1)" nowrap><b><span id=txtLang name=txtLang>AutoFit</span></b></td>
<td id=tab2 style="cursor:pointer;padding:8px; border:#e5e5e5 1px solid;border-left:none;background:#e5e5e5;cursor:pointer" onclick="tabClick(2)" nowrap><b><span id=txtLang name=txtLang>Properties</span></b></td>
<td id=tab3 style="cursor:pointer;padding:8px; border:#e5e5e5 1px solid;border-left:none;background:#e5e5e5;cursor:pointer" onclick="tabClick(3)" nowrap><b><span id=txtLang name=txtLang>Style</span></b></td>
<td style="border-bottom:#e5e5e5 1px solid;" width=100%></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 style="border:#e5e5e5 1px solid;border-top:none;border-collapse:collapse;width:100%;height:298px;background:#ffffff;">
<tr>
<td style="padding:10px;" valign=top nowrap>
<!-- AUTOFIT -->
<div id=divAutoFit style="display:block;">
<div style="margin-bottom:7px;margin-top:3px;">
<span id=txtLang name=txtLang>Width</span>:</div>
<input type="radio" class=inpRdo name="inpAutoFit1"><span id=txtLang name=txtLang>AutoFit to contents</span><br>
<input type="radio" class=inpRdo name="inpAutoFit1"><span id=txtLang name=txtLang>Fixed table width</span>:
<input type="text" name="inpWidth" size=3 onblur="inpAutoFit1[1].checked=true" class="inpTxt">
<select ID="inpAutoFitMeasure1" name="inpAutoFitMeasure1" class="inpSel">
<option value="px" id="optLang" name="optLang">pixels</option>
<option value="%" id="optLang" name="optLang">percent</option>
</select><br>
<input type="radio" class=inpRdo name="inpAutoFit1"><span id=txtLang name=txtLang>AutoFit to window</span>
<br><br>
<div style="margin-bottom:7px;margin-top:3px;">
<span id=txtLang name=txtLang>Height</span>:</div>
<input type="radio" class=inpRdo name="inpAutoFit2">
<span id=txtLang name=txtLang>AutoFit to contents</span><br>
<input type="radio" class=inpRdo name="inpAutoFit2">
<span id=txtLang name=txtLang>Fixed table height</span>:
<input type="text" name="inpHeight" size=3 onblur="inpAutoFit2[1].checked=true" class="inpTxt">
<select ID="inpAutoFitMeasure2" name="inpAutoFitMeasure2" class="inpSel">
<option value="px" id="optLang" name="optLang">pixels</option>
<option value="%" id="optLang" name="optLang">percent</option>
</select><br>
<input type="radio" class=inpRdo name="inpAutoFit2">
<span id=txtLang name=txtLang>AutoFit to window</span>
</div>
<!-- PROPERTIES -->
<div id="divProperties" style="display:none;">
<table>
<tr>
<td nowrap>
<span id="txtLang" name=txtLang>Cell Padding</span>:
</td>
<td>
<input type="text" id="inpCellPadding" name="inpCellPadding" size=1 class="inpTxt"> px
</td>
<td> </td>
</tr>
<tr>
<td nowrap>
<span id=txtLang name=txtLang>Cell Spacing</span>:
</td>
<td>
<input type="text" ID="inpCellSpacing" NAME="inpCellSpacing" size=1 class="inpTxt"> px
</td>
<td> </td>
</tr>
<tr>
<td>
<span id=txtLang name=txtLang>Borders</span>:
</td>
<td colspan=2 nowrap>
<table cellpadding=0 cellspacing=0>
<tr>
<td>
<select ID="inpBorder" NAME="inpBorder" class="inpSel">
<option value="" selected></option>
<option value=0 id="optLang" name="optLang">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 nowrap>
<span id=txtLang name=txtLang>Collapse</span>:
<select name="inpCollapse" ID="inpCollapse" class="inpSel">
<option value="Yes" id="optLang" name="optLang">Yes</option>
<option value="No" id="optLang" name="optLang">No</option>
</select>
</td>
</tr>
</table>
</td>
<tr>
<td style="padding-top:5px;padding-bottom:5px">
<span id=txtLang name=txtLang>Background</span>:
</td>
<td style="padding-top:5;padding-bottom:5">
<span style="background:#ffffff"><span id="inpBackgroundColor" style="border:gray 1px solid;width:16px;height:16px;margin-right:3px;"> </span></span>
<input type=button name="btnPick" id="btnPick" value=Pick onclick="oColor1.show(this);event.cancelBubble=true;" />
<script>
var oColor1 = new ColorPicker("oColor1");
oColor1.onPickColor = new Function("inpBackgroundColor.style.backgroundColor=oColor1.color;");
oColor1.onRemoveColor = new Function("inpBackgroundColor.style.backgroundColor='';");
oColor1.align="left";
oColor1.txtCustomColors=getTxt("Custom Colors");
oColor1.txtMoreColors=getTxt("More Colors...");
oColor1.url = parent.oUtil.obj.scriptPath + "color_picker.htm";
oColor1.RENDER();
</script>
<table id=divPreviewTable name=divPreviewTable style="display:none"><tr><td></td></tr></table>
<input type="button" name="btnImage" id="btnImage" value="Image" onclick="modalDialogShow('image_background.htm?divPreviewTable', 380, 196);" />
</td>
<td> </td>
</tr>
<tr><td colspan="3"><div style="border-bottom:#e2e2e2 1px solid;margin-top:0px;margin-bottom:10px;font-size:7px;"> </div></td></tr>
<tr>
<td>
<span id=txtLang name=txtLang>Alignment</span>:
</td>
<td colspan=2>
<select name="inpAlign" style="width:100%" class="inpSel">
<option value="" name="optLang" id="optLang" selected> </option>
<option value="left" id="optLang" name="optLang">left</option>
<option value="center" id="optLang" name="optLang">center</option>
<option value="right" id="optLang" name="optLang">right</option>
</select>
</td>
</tr>
<tr>
<td>
<span id=txtLang name=txtLang>Margin</span>
</td>
<td colspan=2>
<table cellpadding=2 cellspacing=0>
<tr>
<td><span id="txtLang" name=txtLang>Left</span>:</td>
<td><input type="text" name="inpMarginLeft" size=1 class="inpTxt"></td>
<td> px</td>
<td> </td>
<td align=right><span id=txtLang name=txtLang>Right</span>:</td>
<td><input type="text" name="inpMarginRight" size=1 class="inpTxt"></td>
<td> px</td>
</tr>
<tr>
<td><span id=txtLang name=txtLang>Top</span>:</td>
<td><input type="text" name="inpMarginTop" size=1 class="inpTxt"></td>
<td> px</td>
<td> </td>
<td align=right><span id=txtLang name=txtLang>Bottom</span>:</td>
<td><input type="text" name="inpMarginBottom" size=1 class="inpTxt"></td>
<td> px</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="3"><div style="border-bottom:#e2e2e2 1px solid;margin-top:0px;margin-bottom:10px;font-size:7px;"> </div></td></tr>
<tr>
<td><span id="txtLang" name=txtLang>Caption</span>:</td>
<td colspan='2'><input type="text" id="inpCaption" name="inpCaption" size="40" value=""></td>
</tr>
<tr>
<td><span id="txtLang" name=txtLang>Summary</span>:</td>
<td colspan='2'><input type="text" id="inpSummary" name="inpSummary" size="40" value=""></td>
</tr>
</table>
</div>
<!-- CSS -->
<div id="divStyle" style="display:none;">
<div style="margin-bottom:9px;margin-top:3px;">
<span id=txtLang name=txtLang>CSS Text</span>: <br>
<textarea name="inpCSSText" style="width:100%;height:158px;font-family:verdana;font-size:10px" class="inpTxt"></textarea>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-top:10px;" align="right">
<table cellpadding=0 cellspacing=0>
<tr>
<td>
<input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
<td>
<input type="button" name=btnApply id=btnApply value="apply" onclick="doApply()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
<td>
<input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>