<html>
<head>
<title>Select Font</title>
<style><%include editor_dialog.css%></style>
<script>
var ie = false;
var ie6 = false;
if (window.navigator.appVersion.search('MSIE') > 0) ie = true;
// Allow for possible future versions of IE, which hopefully will support what IE6 supports
if (window.navigator.appVersion.search('MSIE 6') > 0 ||
window.navigator.appVersion.search('MSIE 7') > 0 ||
window.navigator.appVersion.search('MSIE 8') > 0)
ie6 = true;
var fontList, styleList, sizeList, underline, colorList, fontBox, styleBox, sizeBox, sample, dlg, dialogWindow;
var editor = opener.dialogWindow.editor;
function initDialog() {
fontList = document.getElementById('fontList');
styleList = document.getElementById('styleList');
sizeList = document.getElementById('sizeList');
underline = document.getElementById('underline');
fontBox = document.getElementById('fontBox');
colorList = document.getElementById('colorList');
styleBox = document.getElementById('styleBox');
sizeBox = document.getElementById('sizeBox');
sample = document.getElementById('sample');
dlg = document.getElementById('dlg');
populateFont();
editor.fontLoad(fontList, styleList, sizeList, colorList, underline);
fontList.onchange = loadFont;
styleList.onchange = loadFont;
sizeList.onchange = loadFont;
underline.onclick = loadFont;
colorList.onchange = loadFont;
if (!ie) {
// Mozilla's default groove coloring isn't very nice; use a better one:
document.getElementById('groove1').style.borderColor = 'ThreeDLightShadow';
document.getElementById('groove2').style.borderColor = 'ThreeDLightShadow';
/* The following Javascript is used to change the styles on the various font
* elements under Mozilla to adjust them slightly to look more or less the same
* as they do under IE. The specific problem arises because IE considers
* positions to be relative to the element excluding the border, but Mozilla
* includes the border. Mozilla's approach seems more "correct", but since the
* primary user base of the advanced editor is using IE, we do the dynamic
* adjustments for Mozilla instead of IE. They are relatively minor tweaks,
* and taking them out certainly won't break anything.
*/
fontBox.style.width = parseInt(fontBox.style.width) + 2 + 'px';
fontBox.style.left = parseInt(fontBox.style.left) - 1 + 'px';
fontBox.style.top = parseInt(fontBox.style.top) - 1 + 'px';
styleBox.style.width = parseInt(styleBox.style.width) + 2 + 'px';
styleBox.style.left = parseInt(styleBox.style.left) - 1 + 'px';
styleBox.style.top = parseInt(styleBox.style.top) - 1 + 'px';
sizeBox.style.width = parseInt(sizeBox.style.width) + 2 + 'px';
sizeBox.style.left = parseInt(sizeBox.style.left) - 1 + 'px';
sizeBox.style.top = parseInt(sizeBox.style.top) - 1 + 'px';
var sampleTable = document.getElementById('sampleTable');
sampleTable.style.height = parseInt(sampleTable.style.height) + 2 + 'px';
sample.style.width = parseInt(sample.style.width) + 4 + 'px';
}
loadFont();
}
function populateFont() {
if (ie6) {
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');
}
}
function addFont (sel, fontName) {
var o = document.createElement("OPTION");
sel.options.add(o);
o.innerHTML = fontName;
o.value = fontName;
}
function loadFont() {
if (fontList.selectedIndex >= 0) {
var font = fontList.options[fontList.selectedIndex].value;
fontBox.value = font
sample.style.fontFamily = font;
}
if (styleList.selectedIndex >= 0) {
var style = styleList.options[styleList.selectedIndex].value;
if (style == 'r') {
styleBox.value = 'Regular';
sample.style.fontStyle = 'normal';
sample.style.fontWeight = 'normal';
}
else if (style == 'b') {
styleBox.value = 'Bold';
sample.style.fontStyle = 'normal';
sample.style.fontWeight = 'bold';
}
else if (style == 'i') {
styleBox.value = 'Italic';
sample.style.fontWeight = 'normal';
sample.style.fontStyle = 'italic';
}
else if (style == 'bi') {
styleBox.value = 'Bold Italic';
sample.style.fontWeight = 'bold';
sample.style.fontStyle = 'italic';
}
}
if (sizeList.selectedIndex >= 0) {
sizeBox.value = sizeList.options[sizeList.selectedIndex].innerHTML;
sample.style.fontSize = sizeList.options[sizeList.selectedIndex].innerHTML;
}
if (colorList.selectedIndex >= 0) {
sample.style.color = colorList.options[colorList.selectedIndex].value;
}
if (underline.checked)
sample.style.textDecoration = 'underline';
else
sample.style.textDecoration = 'none';
}
function colorDialog (width, height) {
/*------------------------------------------------------------
* show dialog window
*/
var url = editor.config.baseURL + 'editor_color;' + editor.config.extraURL;
if (!dialogWindow) dialogWindow = new Object();
if (dialogWindow.win && !dialogWindow.win.closed && dialogWindow.url == url) {
dialogWindow.win.focus();
}
else {
if (dialogWindow.win && !dialogWindow.win.closed) dialogWindow.win.close();
dialogWindow.returnFunc = colorReturn;
dialogWindow.url = url;
dialogWindow.width = width;
dialogWindow.height = height;
dialogWindow.name = Math.random().toString().replace(/\./, "");
dialogWindow.left = (screen.width - width) / 2;
dialogWindow.top = (screen.height - height) / 2;
dialogWindow.attribs = 'left=' + dialogWindow.left + ',' +
'top=' + dialogWindow.top + ',' +
'resizable=no,statusbar=yes,' +
'width=' + dialogWindow.width + ',' +
'height=' + dialogWindow.height;
dialogWindow.currentColor = colorList.value;
dialogWindow.win = window.open(dialogWindow.url, dialogWindow.name, dialogWindow.attribs);
dialogWindow.editor = editor;
dialogWindow.win.focus();
}
}
function colorReturn(color) {
var clr = color.toUpperCase();
var select;
if (clr == '#000000') select = 'black';
else if (clr == '#000080') select = 'navy';
else if (clr == '#0000FF') select = 'blue';
else if (clr == '#008000') select = 'green';
else if (clr == '#008080') select = 'teal';
else if (clr == '#00FF00') select = 'lime';
else if (clr == '#00FFFF') select = 'aqua';
else if (clr == '#800000') select = 'maroon';
else if (clr == '#800080') select = 'purple';
else if (clr == '#808000') select = 'olive';
else if (clr == '#808080') select = 'gray';
else if (clr == '#C0C0C0') select = 'silver';
else if (clr == '#FF0000') select = 'red';
else if (clr == '#FF00FF') select = 'fuchsia';
else if (clr == '#FFFF00') select = 'yellow';
else if (clr == '#FFFFFF') select = 'white';
if (select) colorList.value = select;
else {
colorList.selectedIndex = colorList.options.length - 1;
colorList.options[colorList.selectedIndex].value = color;
colorList.options[colorList.selectedIndex].innerHTML = color;
}
loadFont();
}
function returnFont() {
var font, size, color, under, bold, italic;
if (fontList.selectedIndex >= 0) font = fontList.options[fontList.selectedIndex].value;
if (sizeList.selectedIndex >= 0) size = sizeList.options[sizeList.selectedIndex].value;
if (colorList.selectedIndex >= 0) color = colorList.options[colorList.selectedIndex].value;
var under = underline.checked;
var bold = /b/.test(styleList.value);
var italic = /i/.test(styleList.value);
editor.returnFont(font, size, color, bold, italic, under);
window.close();
}
</script>
</head>
<body onLoad="initDialog()" class="body">
<!-- In IE6, this object can be used to get a list of system fonts. Using document.write to create it resulted in a crash on some computers -->
<object id="dlg" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>
<div style="position: absolute; top: 7px; left: 10px" >Font:</div>
<input type="text" 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"></select>
<div style="border: 1px groove; position: absolute; top: 175px; left: 10px; height: 100px; width: 160px" id="groove1"><div style="position: relative; top: -9px; left: 5px; width: 4.25em; background-color: ButtonFace"> Effects </div></div>
<input type="checkbox" id="underline" style="position: absolute; top: 192px; left: 25px">
<div type="text" style="font-family: 'MS Sans Serif'; font-size: 8pt; border-width: 0px; position: absolute; top: 194px; left: 48px; width: 60px" onclick="underline.click()">Underline</div>
<div style="position: absolute; top: 218px; left: 25px">Color:</div>
<select id="colorList" size="1" style="font-face: 8pt; width: 80; position: absolute; top: 238px; left: 25px">
<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>
<script>
document.write('<button style="position: absolute; top: 235px; left: 115px; height: 25px; width: 25px; padding: 0px" onclick="colorDialog(345, 193)" onmousedown="pressColorButton()" onmouseup="releaseColorButton()" onmouseout="releaseColorButton()">' +
'<img src="' + editor.config.imageURL + '/color.gif" id="colorButtonImage" style="position: relative; ' + (ie ? 'left: -3px' : 'left: -5px') + '; top: -1px; width: 23px; height: 23px; border: 0px"></button>');
function pressColorButton () {
var img = document.getElementById('colorButtonImage');
img.style.left = ie ? '-2px' : '-4px';
img.style.top = '0px';
}
function releaseColorButton () {
var img = document.getElementById('colorButtonImage');
img.style.left = ie ? '-3px' : '-5px';
img.style.top = '-1px';
}
</script>
<div style="position: absolute; top: 7px; left: 180px">Style:</div>
<input type="text" 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">
<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" 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">
<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: 1px groove; position: absolute; top: 175px; left: 185px; height: 100px; width: 153px" id="groove2"><div style="position: relative; top: -9px; left: 5px; width: 4.30em; background-color: buttonface"> Sample </div></div>
<table width="131" style="position: absolute; top: 189px; left: 195px; height: 76px" cellpadding=0 cellspacing=0 id="sampleTable"><tr><td valign="middle" align="center" class="sample"><div style="overflow: hidden; width: 131px" id="sample">AaBbYyZz</div></td></tr></table>
<button class="button" onclick="returnFont()" 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>