314 lines
14 KiB
HTML
314 lines
14 KiB
HTML
|
<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>
|