Current File : //var/wcp4/demo1812/public_html/file/private/templates.old/common/editor_font.html
<html>
<head><title>Select Font</title>
<style>
<%include editor_dialog.css%>
</style>
<script language=JScript>
<!--
returnValue = [];

var font, size, color, b, i, u, input;

function initDialog () {

    input = window.dialogArguments;
    // input is: [font, size, color, b, i, u]

    populateFont();

    if (input[1]) { // Size
        sizeList.selectedIndex = input[1] - 1;
        sizeList.fireEvent("onchange");
    }

    if (input[2]) { // Color. This is actually something very strange - instead of RGB, it's BGR ???
        var hexColor = input[2].toString(16);
        if (hexColor.length < 6) hexColor = "000000".substring(0, 6 - hexColor.length) + hexColor;
        hexColor = hexColor.substring(4, 6) + hexColor.substring(2, 4) + hexColor.substring(0, 2);
        colorList.selectedIndex = 16;
        setColor(hexColor);
    }

    if (input[3] != null || input[4] != null) {
        if (input[3] && input[4])
            styleList.selectedIndex = 3;
        else if (input[3])
            styleList.selectedIndex = 1;
        else if (input[4])
            styleList.selectedIndex = 2;
        else
            styleList.selectedIndex = 0;

        styleList.fireEvent("onchange");
    }

    if (input[5] != null && underlineBox.checked != input[5]) {
        underlineBox.click();
    }

}

function addFont (select, fontName) {
    var option = document.createElement("OPTION");
    select.options.add(option);
    option.innerText = fontName;
    option.value = fontName;
    if (input[0] && input[0] == fontName) {
        select.selectedIndex = select.options.length - 1;
        select.fireEvent("onchange");
    }
}

function populateFont() {
<%if ie_version >= 6%>
    var fonts = [];
    for (var i = 1; i <= dlg.fonts.count; i++) fonts[i - 1] = dlg.fonts(i);
    fonts.sort();
    for (var i = 0; i < fonts.length; i++) addFont(fontList, fonts[i]);
<%else%>
    addFont(fontList, 'Arial');
    addFont(fontList, 'Arial Black');
    addFont(fontList, 'Arial Narrow');
    addFont(fontList, 'Century Gothic');
    addFont(fontList, 'Comic Sans MS');
    addFont(fontList, 'Courier');
    addFont(fontList, 'Courier New');
    addFont(fontList, 'Fixedsys');
    addFont(fontList, 'Garamond');
    addFont(fontList, 'Georgia');
    addFont(fontList, 'Lucida Console');
    addFont(fontList, 'MS Sans Serif');
    addFont(fontList, 'MS Serif');
    addFont(fontList, 'System');
    addFont(fontList, 'Tahoma');
    addFont(fontList, 'Times New Roman');
    addFont(fontList, 'Verdana');
    addFont(fontList, 'Webdings');
    addFont(fontList, 'Wingdings');
    addFont(fontList, 'Wingdings 2');
    addFont(fontList, 'Wingdings 3');
<%endif%>
}

function setFont() {
    font = event.srcElement.value;
    fontBox.innerText = font;
    sample.style.fontFamily = font;
}

var cssSizeConv = [null, '8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];

function setSize() {
    var opt = sizeList.options[sizeList.selectedIndex];
    size = opt.value; // 1 - 7, use on cssSizeConv
    sample.style.fontSize = cssSizeConv[size];
    sizeBox.innerText = opt.innerText;
}

function setStyle() {
    var opt = styleList.options[styleList.selectedIndex];
    styleBox.innerText = opt.innerText;
    if (opt.value == 'r') {
        b = false;
        i = false;
        sample.style.fontWeight = "normal";
        sample.style.fontStyle = "normal";
    }
    else if (opt.value == 'b') {
        b = true;
        i = false;
        sample.style.fontWeight = "bold";
        sample.style.fontStyle = "normal";
    }
    else if (opt.value == 'i') {
        b = false;
        i = true;
        sample.style.fontWeight = "normal";
        sample.style.fontStyle = "italic";
    }
    else if (opt.value == 'bi') {
        b = true;
        i = true;
        sample.style.fontWeight = "bold";
        sample.style.fontStyle = "italic";
    }
}

function setUnderline(val) { // val should be true or false
    u = val;
    sample.style.textDecorationUnderline = val;
}

function setReturn () {
    returnValue = [font, size, color, b, i, u];
}

function setColor (clr) {
    if (clr) {
        color = clr;
        sample.style.color = clr;
    }
    else {
        color = null;
        sample.style.color = 'black';
    }
}

// Bug? The '/' on the following line shouldn't be needed (and isn't needed from the main page). Why is it needed here???
var url = window.location.protocol + '//' + window.location.hostname + '/' + window.location.pathname + '?<%url_opts%>';
function colorDialog () {
<%if ie_version >= 6%>
    var hexColor = dlg.ChooseColorDlg().toString(16);
    if (hexColor.length < 6) hexColor = "000000".substring(0, 6 - hexColor.length) + hexColor;
<%else%>
    var hexColor = showModalDialog(url + '&fdo=cmd_show&page=common/editor_color.html', null, "dialogHeight: 380px; dialogWidth: 115px; scroll: no; help: no; status: no");
<%endif%>

    setColor(hexColor);
}

-->
</script>
</head>
<body onLoad="initDialog()">
<%if ie_version >= 6%><object id="dlg" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object><%endif%>
  
  <div style="position: absolute; top: 7px; left: 10px">Font:</div>
  <input type="text" class="textbox" id="fontBox" style="font-size: 8pt; font-family: MS Sans Serif; height: 22px; width: 160px; position: absolute; top: 27px; left: 10px">
  <select id="fontList" size="7" style="width: 162px; position: absolute; top: 49px; left: 9px" onchange="setFont()"></select>

  <div style="border-style: groove; border-width: 2px; position: absolute; top: 190px; left: 10px; height: 100px; width: 160px"><div style="position: relative; top: -9px; left: 5px; width: 0px; background-color: buttonface">&nbsp;Effects&nbsp;</div></div>
  <input type="checkbox" id="underlineBox" style="position: absolute; top: 207px; left: 25px" onclick="setUnderline(this.checked)">
  <div type="text" style="font-family: 'MS Sans Serif'; font-size: 8pt; border-width: 0px; position: absolute; top: 209px; left: 48px; width: 60px" onclick="underlineBox.click()">Underline</div>

  <div style="position: absolute; top: 233px; left: 25px">Color:</div>
  <select id="colorList" size="1" style="font-face: 8pt; width: 80; position: absolute; top: 253px; left: 25px" onchange="setColor(this.value)">
    <option value="black">Black</option>
    <option value="gray">Gray</option>
    <option value="silver">Silver</option>
    <option value="white">White</option>
    <option value="lime">Lime</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
    <option value="olive">Olive</option>
    <option value="red">Red</option>
    <option value="maroon">Maroon</option>
    <option value="fuchsia">Fuchsia</option>
    <option value="purple">Purple</option>
    <option value="aqua">Aqua</option>
    <option value="teal">Teal</option>
    <option value="navy">Navy</option>
    <option value="blue">Blue</option>
    <option value="">Custom</option>
  </select>
  <button style="position: absolute; top: 250px; left: 115px; font-family: 'MS Sans Serif'; font-size: 8pt; height: 25px; width: 25px" onclick="colorList.selectedIndex = colorList.options.length - 1; colorDialog()"><img src="<%html_url%>/toolbar/font_color.gif" width="23" height="23"></button>
  
  <div style="position: absolute; top: 7px; left: 180px">Style:</div>
  <input type="text" class="textbox" id="styleBox" style="font-size: 8pt; height: 22px; width: 77px; position: absolute; top: 27px; left: 185px" readonly>
  <select id="styleList" size="7" style="width: 79px; position: absolute; top: 49px; left: 184px" onchange="setStyle()">
    <option value="r">Regular</option>
    <option value="b">Bold</option>
    <option value="i">Italic</option>
    <option value="bi">Bold Italic</option>
  </select>
  
  <div style="position: absolute; top: 7px; left: 277px">Size:</div>
  <input type="text" class="textbox" id="sizeBox" style="font-size: 8pt; height: 22px; width: 60px; position: absolute; top: 27px; left: 277px" readonly>
  <select id="sizeList" size="7" style="width: 62px; position: absolute; top: 49px; left: 276px" onchange="setSize()">
    <option value="1">8</option>
    <option value="2">10</option>
    <option value="3">12</option>
    <option value="4">14</option>
    <option value="5">18</option>
    <option value="6">24</option>
    <option value="7">36</option>
  </select>

  <div style="border-style: groove; border-width: 2px; position: absolute; top: 190px; left: 185px; height: 100px; width: 153px"><div style="position: relative; top: -9px; left: 5px; width: 0px; background-color: buttonface">&nbsp;Sample&nbsp;</div></div>
  <table width="131" height="70" style="position: absolute; top: 207px; left: 195px" cellpadding=0 cellspacing=0><tr><td valign="middle" align="center" id="sample" class="sample"><span style="overflow: hidden; width: 131px">AaBbYyZz</span></td></tr></table>

  <button class="button" onclick="setReturn(); window.close()" style="position: absolute; top: 26px; left: 345px">OK</button>
  <button class="button" onclick="window.close()" style="position: absolute; top: 54px; left: 345px">Cancel</button>

</body>
</html>