0byt3m1n1

Path: /data/17/1/18/11/1670011/user/1801231/htdocs/marketting/js/scripts/ [ Home ]
File: image.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+"/image.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
var dialogArgument;
var activeModalWin;

function doWindowFocus()
  {
  window.opener.oUtil.onSelectionChanged=new Function("realTime()");
  }
function bodyOnLoad()
  {
  window.onfocus=doWindowFocus;
  window.opener.oUtil.onSelectionChanged=new Function("realTime()");

  if(window.opener.oUtil.obj.cmdAssetManager!="")btnAsset.style.display="block";
  if(window.opener.oUtil.obj.cmdImageManager!="")btnAsset.style.display="block";

  realTime()
  }
function openAsset()
  {
  if(window.opener.oUtil.obj.cmdAssetManager!="")
    eval(window.opener.oUtil.obj.cmdAssetManager);
  if(window.opener.oUtil.obj.cmdImageManager!="")
    eval(window.opener.oUtil.obj.cmdImageManager);
  }
function setAssetValue(v)
  {
  document.getElementById("inpImgURL").value = v;
  }
function modalDialogShow(url,width,height)
  {
  var left = screen.availWidth/2 - width/2;
  var top = screen.availHeight/2 - height/2;

  if(url.indexOf("?")==-1) url=url+"?ffilter=image";//no querystring
  else url=url+"&ffilter=image";

  activeModalWin = window.open(url,"","top="+top+"px,left="+left+"px,width="+width+"px,height="+height+"px;toolbar=no,menubar=no,location=no,directories=no,status=yes,resizable=yes,scrollbars=yes");
  window.onfocus = function(){
    try {
      if (activeModalWin.closed == false){activeModalWin.focus();};
    } catch(e) {}
  };
  }

function realTime()
  {
  if(!window.opener.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=window.opener.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  if (oSel.parentElement) oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  clearAllProperties()

  if(oElement.tagName=="IMG")
    {
    //~~~~~~~~~~~~~~~~~~~~~~~~
    sTmp=oElement.outerHTML;
    sTmp=sTmp.substring(sTmp.indexOf("src")+5);
    sTmp=sTmp.substring(0,sTmp.indexOf('"'));
    var arrTmp = sTmp.split("&amp;");
    if (arrTmp.length > 1) sTmp = arrTmp.join("&");
    inpImgURL.value=sTmp

    //inpImgAlt.value = oElement.title;
    inpImgAlt.value = oElement.alt;

    inpImgAlign.value = oElement.align;

    idImg.style.borderTop=oElement.style.borderTop;
    idImg.style.borderBottom=oElement.style.borderBottom;
    idImg.style.borderLeft=oElement.style.borderLeft;
    idImg.style.borderRight=oElement.style.borderRight;

    inpImgWidth.value = oElement.width;
    inpImgHeight.value = oElement.height;

    if(oElement.style.marginTop.substr(oElement.style.marginTop.length-2,2)=="px")
      inpImgTop.value=oElement.style.marginTop.substr(0,oElement.style.marginTop.length-2);
    else inpImgTop.value="";

    if(oElement.style.marginBottom.substr(oElement.style.marginBottom.length-2,2)=="px")
      inpImgBottom.value=oElement.style.marginBottom.substr(0,oElement.style.marginBottom.length-2);
    else inpImgBottom.value="";

    if(oElement.style.marginLeft.substr(oElement.style.marginLeft.length-2,2)=="px")
      inpImgLeft.value=oElement.style.marginLeft.substr(0,oElement.style.marginLeft.length-2);
    else inpImgLeft.value="";

    if(oElement.style.marginRight.substr(oElement.style.marginRight.length-2,2)=="px")
      inpImgRight.value=oElement.style.marginRight.substr(0,oElement.style.marginRight.length-2);
    else inpImgRight.value="";

    btnApply.style.display="block";
    btnOk.style.display="block";
    btnInsert.style.display="none";

    doPreview();
    }
  else
    {
    btnApply.style.display="none";
    btnOk.style.display="none";
    btnInsert.style.display="block";
    }
  }

function clearAllProperties()
  {
  inpImgURL.value="";//always updated
  inpImgAlt.value="";//not set, krn tdk harus
  inpImgAlign.value="";
  inpImgWidth.value="";
  inpImgHeight.value="";
  inpImgTop.value="";
  inpImgBottom.value="";
  inpImgLeft.value="";
  inpImgRight.value="";
  }
function doPreview()
  {
  idImg.style.width="";
  idImg.style.height="";

  //idImg.title=inpImgAlt.value;
  idImg.alt=inpImgAlt.value;

  idImg.align=inpImgAlign.value;

  if(inpImgTop.value!="")idImg.style.marginTop=inpImgTop.value;
  else idImg.style.marginTop="";
  if(inpImgBottom.value!="")idImg.style.marginBottom=inpImgBottom.value;
  else idImg.style.marginBottom="";
  if(inpImgLeft.value!="")idImg.style.marginLeft=inpImgLeft.value;
  else idImg.style.marginLeft="";
  if(inpImgRight.value!="")idImg.style.marginRight=inpImgRight.value;
  else idImg.style.marginRight="";
  }

function doInsert()
  {
  if(!window.opener.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=window.opener.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  window.opener.oUtil.obj.saveForUndo();

  if (oSel.parentElement) oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  sImgAlt=inpImgAlt.value;
  sImgAlign=inpImgAlign.value;

  sImgBorderTop=idImg.style.borderTop;
  sImgBorderBottom=idImg.style.borderBottom;
  sImgBorderLeft=idImg.style.borderLeft;
  sImgBorderRight=idImg.style.borderRight;

  var bNoBorder=false;
  if((idImg.style.borderTopStyle=="none"||idImg.style.borderTop=="")&&
    (idImg.style.borderBottomStyle=="none"||idImg.style.borderBottom=="")&&
    (idImg.style.borderLeftStyle=="none"||idImg.style.borderLeft=="")&&
    (idImg.style.borderRightStyle=="none"||idImg.style.borderRight==""))
    bNoBorder=true;

  sImgWidth=inpImgWidth.value;
  sImgHeight=inpImgHeight.value;
  sImgTop=inpImgTop.value;
  sImgBottom=inpImgBottom.value;
  sImgLeft=inpImgLeft.value;
  sImgRight=inpImgRight.value;

  window.opener.oUtil.obj.doCmd("InsertImage",inpImgURL.value);

  var oSel=oEditor.document.selection.createRange();
  var sType=oEditor.document.selection.type;

  if (oSel.parentElement)oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  if (oElement.tagName=="IMG")
    {
    //oElement.title=sImgAlt;
    oElement.alt=sImgAlt;

    if (sImgAlign!="" && sImgAlign!=null) oElement.align=sImgAlign;

    if(bNoBorder)
      oElement.border=0;
    else
      {
      oElement.style.borderTop=sImgBorderTop;
      oElement.style.borderBottom=sImgBorderBottom;
      oElement.style.borderLeft=sImgBorderLeft;
      oElement.style.borderRight=sImgBorderRight;
      }

    if(sImgWidth!="")oElement.width=sImgWidth;
    if(sImgHeight!="")oElement.height=sImgHeight;

    if(sImgTop!="")oElement.style.marginTop=sImgTop;
    if(sImgBottom!="")oElement.style.marginBottom=sImgBottom;
    if(sImgLeft!="")oElement.style.marginLeft=sImgLeft;
    if(sImgRight!="")oElement.style.marginRight=sImgRight;
    }
  self.close()
  }

function doUpdate()
  {
  if(!window.opener.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=window.opener.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  if (oSel.parentElement) oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  if (oElement.tagName=="IMG")
    {
    window.opener.oUtil.obj.saveForUndo();

    //khusus insite
    try {
      oElement.src=inpImgURL.value;
    } catch(e) {
      doInsert();
      realTime();
      return;
    }

    //oElement.title=inpImgAlt.value;
    oElement.alt=inpImgAlt.value;

    if (inpImgAlign.value!="") oElement.align=inpImgAlign.value;

    oElement.style.borderTop=idImg.style.borderTop;
    oElement.style.borderBottom=idImg.style.borderBottom;
    oElement.style.borderLeft=idImg.style.borderLeft;
    oElement.style.borderRight=idImg.style.borderRight;

    if(idImg.style.borderTopStyle!="none"||
      idImg.style.borderBottomStyle!="none"||
      idImg.style.borderLeftStyle!="none"||
      idImg.style.borderRightStyle!="none")
      oElement.removeAttribute("border",0);
    if((idImg.style.borderTopStyle=="none"||idImg.style.borderTop=="")&&
      (idImg.style.borderBottomStyle=="none"||idImg.style.borderBottom=="")&&
      (idImg.style.borderLeftStyle=="none"||idImg.style.borderLeft=="")&&
      (idImg.style.borderRightStyle=="none"||idImg.style.borderRight==""))
      oElement.border=0;

    //clean
    if(idImg.style.borderTop=="medium none"||idImg.style.borderTopStyle=="none")
      {
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: medium none; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: medium none","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopColor+" "+idImg.style.borderTopWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopColor+" "+idImg.style.borderTopWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopColor+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-TOP: "+idImg.style.borderTopColor,"");
      }
    if(idImg.style.borderBottom=="medium none"||idImg.style.borderBottomStyle=="none")
      {
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: medium none; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: medium none","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomColor+" "+idImg.style.borderBottomWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomColor+" "+idImg.style.borderBottomWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomColor+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-BOTTOM: "+idImg.style.borderBottomColor,"");
      }
    if(idImg.style.borderLeft=="medium none"||idImg.style.borderLeftStyle=="none")
      {
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: medium none; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: medium none","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftColor+" "+idImg.style.borderLeftWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftColor+" "+idImg.style.borderLeftWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftColor+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-LEFT: "+idImg.style.borderLeftColor,"");
      }
    if(idImg.style.borderRight=="medium none"||idImg.style.borderRightStyle=="none")
      {
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: medium none; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: medium none","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightColor+" "+idImg.style.borderRightWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightColor+" "+idImg.style.borderRightWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightWidth+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightWidth,"");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightColor+"; ","");
      oElement.style.cssText=oElement.style.cssText.replace("BORDER-RIGHT: "+idImg.style.borderRightColor,"");
      }

    oElement.style.width="";
    oElement.style.height="";
    if(inpImgWidth.value!="")oElement.width=inpImgWidth.value;
    else oElement.removeAttribute("width",0);
    if(inpImgHeight.value!="")oElement.height=inpImgHeight.value;
    else oElement.removeAttribute("height",0);

    if(inpImgTop.value!="")oElement.style.marginTop=inpImgTop.value;
    else oElement.style.marginTop="";
    if(inpImgBottom.value!="")oElement.style.marginBottom=inpImgBottom.value;
    else oElement.style.marginBottom="";
    if(inpImgLeft.value!="")oElement.style.marginLeft=inpImgLeft.value;
    else oElement.style.marginLeft="";
    if(inpImgRight.value!="")oElement.style.marginRight=inpImgRight.value;
    else oElement.style.marginRight="";
    }
  }
function resetImageSize()
  {
  if(!window.opener.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=window.opener.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  if (oSel.parentElement) oElement=oSel.parentElement();
  else oElement=oSel.item(0);

  if (oElement.tagName=="IMG")
    {
    window.opener.oUtil.obj.saveForUndo();

    oElement.style.width="";
    oElement.style.height="";
    oElement.removeAttribute("width",0);
    oElement.removeAttribute("height",0);
    oElement.width=oElement.width;
    oElement.height=oElement.height;
    realTime();
    }
  }
</script>
</head>
<body onload="loadTxt();bodyOnLoad()" style="overflow:hidden;">

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

  <table width=100%>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Source</span>:
    </td>
    <td colspan=4 style="width:100%">
        <table cellpadding="0" cellspacing="0" style="width:100%">
        <tr>
        <td style="width:100%"><input type="text" id="inpImgURL" name=inpImgURL style="width:100%" class="inpTxt"></td>
        <td><input type="button" value="" onclick="openAsset()" id="btnAsset" name="btnAsset" style="display:none;background:url('openAsset.gif');width:23px;height:18px;border:#a5acb2 1px solid;margin-left:1px;"></td>
        </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Title</span>:&nbsp;
    </td>
    <td width="100%">
        <input type="text" id="inpImgAlt" name=inpImgAlt style="width:150px" class="inpTxt" onkeyup="doPreview()">
    </td>
    <td rowspan="5" style="padding-top:4;padding-right:7">
      <div style="height:112px;border-left:#c7c7c7 1 solid;width:1px"></div>
    </td>
    <td nowrap>
        <span id="txtLang" name="txtLang">Spacing</span>:&nbsp;
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Alignment</span>:
    </td>
    <td nowrap>
        <select id="inpImgAlign" name="inpImgAlign" style="width:150px" class="inpSel" onchange="doPreview()">
        <option value="" selected></option><!-- &lt;Not Set&gt; -->
        <option value="absBottom" id="optLang" name="optLang">absBottom</option>
        <option value="absMiddle" id="optLang" name="optLang">absMiddle</option>
        <option value="baseline" id="optLang" name="optLang">baseline</option>
        <option value="bottom" id="optLang" name="optLang">bottom</option>
        <option value="left" id="optLang" name="optLang">left</option>
        <option value="middle" id="optLang" name="optLang">middle</option>
        <option value="right" id="optLang" name="optLang">right</option>
        <option value="textTop" id="optLang" name="optLang">textTop</option>
        <option value="top" id="optLang" name="optLang">top</option>
        </select>&nbsp;
    </td>
    <td nowrap>
        <span id="txtLang" name="txtLang">Top</span>:&nbsp;
    </td>
    <td nowrap>
        <input type="text" name="inpImgTop" size=2 class="inpTxt" onkeyup="doPreview()"> &nbsp;px
    </td>
  </tr>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Border</span>:
    </td>
    <td nowrap>
      <input type="button" name=btnBorder id=btnBorder value=" Border Style " style="width:150px"
      onclick="dialogArgument=['window.opener.opener', 'window.opener.document.getElementById(\'idImg\')'];modalDialogShow('border.htm', 460, 260)" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    </td>
    <td nowrap>
        <span id="txtLang" name="txtLang">Bottom</span>:
    </td>
    <td nowrap>
        <input type="text" name="inpImgBottom" size=2 class="inpTxt" onkeyup="doPreview()"> &nbsp;px
    </td>
  </tr>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Width</span>:
    </td>
    <td nowrap rowspan="2">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td>
        <input type="text" name="inpImgWidth" size=2 class="inpTxt"> &nbsp;px
        </td>
        <td rowspan="2" height="50" style="padding-left:3;padding-top:6">
          <img src="img_reset.gif" align=left width="13" height="28">
        </td>
        <td rowspan="2" height="50" style="padding-top:7">
          <input type="button" name="btnReset" id="btnReset" value="reset" onclick="resetImageSize()">
        </td>
        </tr>
        <tr>
        <td>
        <input type="text" name="inpImgHeight" size=2 class="inpTxt"> &nbsp;px
        </td>
        </tr>
        </table>
    </td>
    <td nowrap>
        <span id="txtLang" name="txtLang">Left</span>:
    </td>
    <td nowrap>
        <input type="text" name="inpImgLeft" size=2 class="inpTxt" onkeyup="doPreview()" id="Text2"> &nbsp;px
    </td>
  </tr>
  <tr>
    <td nowrap>
        <span id="txtLang" name="txtLang">Height</span>:
    </td>

    <td nowrap>
        <span id="txtLang" name="txtLang">Right</span>:
    </td>
    <td nowrap>
        <input type="text" name="inpImgRight" size=2 class="inpTxt" onkeyup="doPreview()" id="Text1"> &nbsp;px
    </td>
  </tr>

  <tr>
    <td colspan="5">
      <div style="padding:3;"></div>
      <div id="divPreview" style="padding:5;padding-left:5;overflow:auto;border:1 dimgray solid;width:100%;height:85;background:#ffffff">
<img src="img.gif" id="idImg" align=left width="53" height="51">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

      </div>
      </div>
    </td>
  </tr>
  </table>

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:6;" align="right">
  <table cellpadding=1 cellspacing=0>
  <tr>
  <td>
  <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
  <input type="button" name=btnInsert id=btnInsert value="insert" onclick="doInsert()" style="display:block" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
  <input type="button" name=btnApply id=btnApply value="apply" onclick="doUpdate()" style="display:none" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
  <input type="button" name=btnOk id=btnOk value=" ok " onclick="doUpdate();self.close()" style="display:none;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </tr>
  </table>
</td>
</tr>
</table>

</body>
</html>