Location: PHPKode > projects > PHP Manual Creator > adm/scripts/moz/list.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<style>
.box{cursor:default;border:#9B95A6 1px solid;width:40px;background:white;}
</style>
<script>
	var sLangDir=window.opener.oUtil.langDir;
	document.write("<scr"+"ipt src='../language/"+sLangDir+"/list.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>

//parameter for popup window, since standard window.open doesn't support parameter
var dialogArgument;

//reference to pop up window
var activeModalWin;

function tabClick(n)
    {
    var tab1 = document.getElementById("tab1");
    var tab2 = document.getElementById("tab2");
    
    var divNumbered = document.getElementById("divNumbered");
    var divBulleted = document.getElementById("divBulleted");
    
    tab1.removeAttribute("style");
    tab2.removeAttribute("style");
    
    tab1.style.cursor  = "pointer";
    tab1.style.padding = "6px";
    tab2.style.cursor  = "pointer";
    tab2.style.padding = "6px";
    switch(n)
        {
        case 1:         
            tab1.style.border="#D6D6E2 2px solid";
            tab1.style.borderBottom="none"; 
            tab1.style.background="#F2F1F8";
            tab1.style.cursor="";
            
            tab2.style.border="#D6D6E2 2px solid";
            tab2.style.borderLeft="none";
            tab2.style.background="#E9E8F2";
            tab2.style.cursor="hand";
            
            divNumbered.style.display="block"
            divBulleted.style.display="none"
                        
            break;
        case 2:
            tab1.style.border="#D6D6E2 2px solid";
            tab1.style.borderRight="none";
            tab1.style.background="#E9E8F2";
            tab1.style.cursor="hand";
            
            tab2.style.border="#D6D6E2 2px solid";
            tab2.style.borderBottom="none"; 
            tab2.style.background="#F2F1F8";
            tab2.style.cursor="";   
            
            divNumbered.style.display="none"
            divBulleted.style.display="block"       
                    
            break;      
        }
    }   

function GetElement(oElement,sMatchTag)
    {
    while (oElement!=null&&oElement.tagName!=sMatchTag)
        {
        if(oElement.tagName=="BODY")return null;
        oElement=oElement.parentNode;
        }
    return oElement;
    }
    
function doWindowFocus()
    {
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    }
    
function bodyOnLoad()
    {   
    tabClick(1);
    window.onfocus=doWindowFocus;   
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    
    if(window.opener.oUtil.obj.cmdAssetManager!="")
        document.getElementById("btnAsset").style.display="block";
    
    realTime()
    }
    
function openAsset()
    {
    eval(window.opener.oUtil.obj.cmdAssetManager);    
    }
    
function setAssetValue(v) 
    {
    document.getElementById("inpImgURL").value = v;
    }    
    
function modalDialogShow(url,width,height)
    {
    if(url.indexOf("?")==-1) url=url+"?ffilter=image";//no querystring
    else url=url+"&ffilter=image";
    
    var left = screen.availWidth/2 - width/2;
    var top = screen.availHeight/2 - height/2;
    activeModalWin = window.open(url, "", "width="+width+"px,height="+height+",left="+left+",top="+top);
    window.onfocus = function(){if (activeModalWin.closed == false){activeModalWin.focus();};};
    
    }
    
function realTime()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    
    var oElement = window.opener.getSelectedElement(oSel);
    while (oElement!=null && oElement.nodeName!="UL" && oElement.nodeName!="OL")
        {
        if(oElement.nodeName=="BODY") return;
        oElement=oElement.parentNode;
        }

    var range = oEditor.document.createRange();
    range.selectNode(oElement);
    oSel = oEditor.getSelection();
    oSel.removeAllRanges();
    oSel.addRange(range);
    
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");
    var box5 = document.getElementById("box5");
    var box6 = document.getElementById("box6");
    var box7 = document.getElementById("box7");
    var box8 = document.getElementById("box8");
    
    var inpStarting = document.getElementById("inpStarting");
    var inpLeftMargin1 = document.getElementById("inpLeftMargin1");
    var inpLeftMargin2 = document.getElementById("inpLeftMargin2");
    var inpImgURL = document.getElementById("inpImgURL");
    
    if(oElement.nodeName=="OL")
        {
        tabClick(1);
        if(oElement.type==""||oElement.type=="1")doClick1(box1);
        if(oElement.type=="A")doClick1(box2);
        if(oElement.type=="a")doClick1(box3);
        if(oElement.type=="I")doClick1(box4);
        if(oElement.type=="i")doClick1(box5);
        }
    if(oElement.nodeName=="UL")
        {
        tabClick(2);
        if(oElement.type==""||oElement.type=="disc")doClick1(box6);
        if(oElement.type=="circle")doClick1(box7);
        if(oElement.type=="square")doClick1(box8);          
        }
    if(oElement.start && oElement.start != -1)
        inpStarting.value=oElement.start;
    else
        inpStarting.value="";

    if(oElement.style.marginLeft=="")
        {
        inpLeftMargin1.value="";
        inpLeftMargin2.value="";
        }
    else
        {
        inpLeftMargin1.value=oElement.style.marginLeft;
        inpLeftMargin2.value=oElement.style.marginLeft;
        }

    //list-style-image
    if(oElement.style.listStyleImage=="")
        {           
        inpImgURL.value=""
        }
    else
        {
        s=oElement.style.listStyleImage;
        s=s.substring(4,s.length-1);
        inpImgURL.value=s;
        }
    }
    
function setLeftMargin1(oEl)
    {
    var inpLeftMargin1 = document.getElementById("inpLeftMargin1");
    
    if(inpLeftMargin1.value!="")
        oEl.style.marginLeft=inpLeftMargin1.value;
    else
        oEl.style.marginLeft="";    
    }
    
function setLeftMargin2(oEl)
    {
    var inpLeftMargin2 = document.getElementById("inpLeftMargin2");
    
    if(inpLeftMargin2.value!="")
        oEl.style.marginLeft=inpLeftMargin2.value;
    else
        oEl.style.marginLeft="";    
    }
    
function doApply()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
	var obj=window.opener.oUtil.obj;
    obj.saveForUndo();
   
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");
    var box5 = document.getElementById("box5");
    var box6 = document.getElementById("box6");
    var box7 = document.getElementById("box7");
    var box8 = document.getElementById("box8");

	var bBox1=false;var bBox2=false;var bBox3=false;var bBox4=false;
	var bBox5=false;var bBox6=false;var bBox7=false;var bBox8=false;
	if(box1.getAttribute("selThis")=="selThis")bBox1=true;
	if(box2.getAttribute("selThis")=="selThis")bBox2=true;
	if(box3.getAttribute("selThis")=="selThis")bBox3=true;
	if(box4.getAttribute("selThis")=="selThis")bBox4=true;
	if(box5.getAttribute("selThis")=="selThis")bBox5=true;
	if(box6.getAttribute("selThis")=="selThis")bBox6=true;
	if(box7.getAttribute("selThis")=="selThis")bBox7=true;
	if(box8.getAttribute("selThis")=="selThis")bBox8=true;
    
    var inpStarting = document.getElementById("inpStarting");
    var inpLeftMargin1 = document.getElementById("inpLeftMargin1");
    var inpLeftMargin2 = document.getElementById("inpLeftMargin2");
    var inpImgURL = document.getElementById("inpImgURL");

    var oElement = window.opener.getSelectedElement(oSel);
    while (oElement!=null && oElement.nodeName!="UL" && oElement.nodeName!="OL")
        {
        if(oElement.nodeName=="BODY")obj.doCmd("InsertUnOrderedList");
        oElement=oElement.parentNode;
        }

    var oElement = window.opener.getSelectedElement(oSel);
    while (oElement!=null && oElement.nodeName!="UL" && oElement.nodeName!="OL")
        {
        if(oElement.nodeName=="BODY")return
        oElement=oElement.parentNode;
        }    
 
    oElement.removeAttribute("type");
    oElement.removeAttribute("start");

    //list-style-image
    if(inpImgURL.value!="")
        {
        oElement.style.listStyleImage="url('"+inpImgURL.value+"')";
        setLeftMargin2(oElement);

        if(bBox6)oElement.type="disc";
        if(bBox7)oElement.type="circle";
        if(bBox8)oElement.type="square";

        if(oElement.tagName=="OL")
            obj.doCmd("InsertUnOrderedList");
        return;
        }
    else
        {
        oElement.style.listStyleImage="";
        }       

    if(inpStarting.value=="")
        nStart=1;
    else
        nStart=inpStarting.value;

    if(bBox1)
        {
        if(oElement.tagName=="UL")obj.doCmd("InsertOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="1";
        oElement.start=nStart;
        setLeftMargin1(oElement);        
        }
    if(bBox2)
        {
        if(oElement.tagName=="UL")obj.doCmd("InsertOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="A";
        oElement.start=nStart;
        setLeftMargin1(oElement);        
        }
    if(bBox3)
        {
        if(oElement.tagName=="UL")obj.doCmd("InsertOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="a";
        oElement.start=nStart;
        setLeftMargin1(oElement);        
        }
    if(bBox4)
        {
        if(oElement.tagName=="UL")obj.doCmd("InsertOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="I";
        oElement.start=nStart;
        setLeftMargin1(oElement);        
        }
    if(bBox5)
        {
        if(oElement.tagName=="UL")obj.doCmd("InsertOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="i";
        oElement.start=nStart;
        setLeftMargin1(oElement);        
        }       

    if(bBox6)
        {
        if(oElement.tagName=="OL")obj.doCmd("InsertUnOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="disc";
        setLeftMargin2(oElement);        
        }
    if(bBox7)
        {
        if(oElement.tagName=="OL")obj.doCmd("InsertUnOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="circle";
        setLeftMargin2(oElement);        
        }
    if(bBox8)
        {
        if(oElement.tagName=="OL")obj.doCmd("InsertUnOrderedList");
        oElement = window.opener.getSelectedElement(oSel);

        oElement.type="square";
        setLeftMargin2(oElement);        
        }
    realTime();
    }   
    
function doClick1(oEl)
    {
    var inpImgURL = document.getElementById("inpImgURL");
    
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");
    var box5 = document.getElementById("box5");
    var box6 = document.getElementById("box6");
    var box7 = document.getElementById("box7");
    var box8 = document.getElementById("box8");
    
    box1.style.border='white 2px solid';
    box1.setAttribute("selThis", "");
    box2.style.border='white 2px solid';
    box2.setAttribute("selThis", "");
    box3.style.border='white 2px solid';
    box3.setAttribute("selThis", "");
    box4.style.border='white 2px solid';
    box4.setAttribute("selThis", "");
    box5.style.border='white 2px solid';
    box5.setAttribute("selThis", "");
    box6.style.border='white 2px solid';
    box6.setAttribute("selThis", "");
    box7.style.border='white 2px solid';
    box7.setAttribute("selThis", "");
    box8.style.border='white 2px solid';
    box8.setAttribute("selThis", "");
    
    oEl.style.border='#708090 2px solid';
    oEl.setAttribute("selThis", "selThis");
    
    inpImgURL.value="";
    }
    
function doMouseOut(oEl)    
    {
    if(oEl.getAttribute("selThis")=="selThis")
        {
        oEl.style.border='#708090 2px solid';
        }
    else
        {
        oEl.style.border='white 2px solid';
        }
    }
    
function doMouseOver(oEl)   
    {
    if(oEl.getAttribute("selThis")!="selThis") 
        {
        oEl.style.border='#e0e0e0 2px solid';
        }
    
    }
    
</script>
</head>
<body onload="loadText();bodyOnLoad();this.focus()" style="overflow:hidden;">

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

    <table cellpadding=0 cellspacing=0>
    <tr>
    <td id=tab1 style="cursor:hand;padding:6px;border:#D6D6E2 2px solid;border-bottom:none;background:#E9E8F2" onclick="tabClick(1)" nowrap><b><span id=txtLang name=txtLang>Numbered</span></b></td>
    <td id=tab2 style="cursor:hand;padding:6px;border:#D6D6E2 2px solid;border-left:none;background:#E9E8F2" onclick="tabClick(2)" nowrap><b><span id=txtLang name=txtLang>Bulleted</span></b></td>
    <td style="border-bottom:#D6D6E2 2px solid;" width=100%>&nbsp;</td>
    </tr>
    </table>    
    

    <table cellpadding=0 cellspacing=0 style="border:#D6D6E2 2px solid;border-top:none;width:100%;height:195px;background:#F2F1F8;" id="Table3">
    <tr>
    <td style="padding:7px;" valign=top height=100%>

    <!-- NUMBERED -->
    <div id=divNumbered style="display:block;">
    
    <table>
    <tr>
    <td class="box" style="padding:1px">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box1" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ol style="margin-left:1px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="1">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ol>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box2" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ol style="margin-left:1px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="A">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ol>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box3" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ol style="margin-left:1px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="a">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ol>   
        </td>
        </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box4" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ol style="margin-left:1px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="I">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ol>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box5" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ol style="margin-left:1px;margin-right:6px;margin-top:2px;margin-bottom:2px" type="i">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ol>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td nowrap colspan="5" style="padding-top:5px">
        <span id=txtLang name=txtLang style="width:90px">Starting Number</span>: <input class="inpTxt" type="text" name="inpStarting" id="inpStarting" value="1" size="3">
    </td>
    </tr>
    <tr>
    <td nowrap colspan="5" style="padding-top:5px">
        <span id=txtLang name=txtLang style="width:90px">Left Margin</span>: 
        <select name="inpLeftMargin1" id="inpLeftMargin1" class="inpSel">
            <option value=""></option>
            <option value="1em" selected>1em</option>
            <option value="2em">2em</option>
            <option value="3em">3em</option>
            <option value="4em">4em</option>
            <option value="5em">5em</option>
            <option value="6em">6em</option>
            <option value="7em">7em</option>            
        </select>
    </td>
    </tr>
    </table>
    
    </div>

    <!-- BULLETED -->
    <div id="divBulleted" style="display:none;">

    <table>
    <tr>
    <td class="box" style="padding:1px">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box6" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ul style="margin-left:1px;margin-right:5px;margin-top:2px;margin-bottom:2px" type="disc">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ul>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box7" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ul style="margin-left:1px;margin-right:5px;margin-top:2px;margin-bottom:2px" type="circle">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ul>   
        </td>
        </tr>
        </table>
    </td>
    <td>&nbsp;</td>
    <td class="box">
        <table cellpadding="0" cellspacing="0">
        <tr>
        <td id="box8" style="color:#555555;border:white 2px solid;padding:3px;padding-right:0px"
            onclick="doClick1(this)" 
            onmouseover="doMouseOver(this)" 
            onmouseout="doMouseOut(this)">
        <ul style="margin-left:1px;margin-right:5px;margin-top:2px;margin-bottom:2px" type="square">
        <li>-----</li>
        <li>-----</li>
        <li>-----</li>
        </ul>   
        </td>
        </tr>
        </table>
    </td>
    </tr>
    <!--
    <tr>
    <td colspan="5" style="padding-top:5px;height:86px">&nbsp;
    </td>
    </tr>
    -->
    <tr>
    <td colspan="5" style="padding-top:5px;height:57px">&nbsp;
    </td>
    </tr>
    <tr>
    <td colspan="5" style="padding-top:5px">
        <table cellpadding="0" cellspacing="0" style="width:100%" id="Table1">
        <tr>
        <td nowrap><span id=txtLang name=txtLang style="width:90px">Using Image - url</span>:</td>
        <td style="width:100%;padding-left:3px">
          <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:20px;height:16px;border:#a5acb2 1px solid;margin-left:1px;">
        </td>
        </tr>
        </table>
    </td>
    </tr>
    
    <tr>
    <td colspan="5" style="padding-top:5px">
        <span nowrap id=txtLang name=txtLang style="width:90px">Left Margin</span>: 
        <select name="inpLeftMargin2" id="inpLeftMargin2" class="inpSel">
            <option value=""></option>
            <option value="1em" selected>1em</option>
            <option value="2em">2em</option>
            <option value="3em">3em</option>
            <option value="4em">4em</option>
            <option value="5em">5em</option>
            <option value="6em">6em</option>
            <option value="7em">7em</option>            
        </select>
    </td>
    </tr>
    </table>
    
    </div>

    </td>
    </tr>
    </table>
    
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13px;padding-top:7px;padding-bottom:7px;" 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=btnApply id=btnApply value="apply" onclick="doApply();window.focus();" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>
Return current item: PHP Manual Creator