metanohi-misc-subsites/old-projects/x/richtext.htm

229 lines
4.6 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="da">
<head>
<title>The RichTextDevice</title>
<style type='text/css'>
* {
margin:0;
padding:0;
text-decoration:none;
font-weight:normal;
color:#000;
font:12px arial;
}
body {
font:12px arial;
background-color:#000;
overflow:hidden;
}
#wrapper {
width:400px;
margin:0 auto;
}
#wrapper * {
padding:4px;
color:#fff;
border-style:solid;
border-color:#fff;
}
#header {
height:25px;
padding-top:25px;
font-size:20px;
border-width:0 2px 2px 2px;
}
#tools {
height:20px;
border-width:0 2px 2px 2px;
}
#content {
height:350px;
border-width:0 2px 2px 2px;
overflow:hidden;
}
#footer {
text-align:center;
font-size:11px;
border-width:0 2px 2px 2px;
}
.inl {
font-size:12px;
display:inline;
border-width:0;
}
#t {
position:absolute;
top:-100px;
left:-100px;
width:50px;
height:50px;
visibility:hidden;
}
#tools a {
padding:0;
border-width:1px;
float:left;
width:18px;
height:18px;
margin-right:5px;
background-repeat:no-repeat;
}
#b {
background-image:url('img/bold.png');
}
#i {
background-image:url('img/italic.png');
}
#u {
background-image:url('img/underline.png');
}
#tools a:link,#tools a:visited,a.almtd:link,#tools a.almtd:visited {
background-color:#000;
}
#tools a:hover {
background-color:#606060;
}
#tools a.almtd:hover {
background-color:#000;
}
#tools a.chot:link,#tools a.chot:visited,a.cho:link,#tools a.cho:visited {
background-color:#006600;
}
#tools a.chot:hover {
background-color:#006600;
}
#tools a.cho:hover {
background-color:#404040;
}
#content div {
padding:0;
border-width:0;
display:inline;
}
.b {
font-weight:bold;
}
.i {
font-style:italic;
}
.u {
text-decoration:underline;
}
.bi {
font-weight:bold;
font-style:italic;
}
.bu {
font-weight:bold;
text-decoration:underline;
}
.biu {
font-weight:bold;
font-style:italic;
text-decoration:underline;
}
.iu {
font-style:italic;
text-decoration:underline;
}
</style>
<script type='text/javascript'>
function wtd() {
t=document.getElementById("t")
t.focus()
c=document.getElementById("content")
ft=t.value
cin=c.innerHTML
if (c.className=="y") {
ft=ft+"</b>"
cin=cin.substr(0,cin.length-6)
}
c.innerHTML=cin+ft
t.value=""
a=setTimeout("wtd()",25)
}
function choit(pid) {
c=document.getElementById("content")
b=document.getElementById("b")
i=document.getElementById("i")
u=document.getElementById("u")
tid=document.getElementById(pid)
if (tid.className=="" || tid.className=="almtd") {
tid.className="chot"
tid.onmouseout=function () {
tid.className="cho"
tid.onmouseout=""
}
c.className="y"
}
else {
tid.className="almtd"
tid.onmouseout=function () {
tid.className=""
tid.onmouseout=""
}
}
if (b.className!="" && b.className!="almtd" && (i.className=="" || i.className=="almtd") && (u.className=="" || u.className=="almtd"))
fid="b"
else if (i.className!="" && i.className!="almtd" && (u.className=="" || u.className=="almtd") && (b.className=="" || b.className=="almtd"))
fid="i"
else if (u.className!="" && u.className!="almtd" && (b.className=="" || b.className=="almtd") && (i.className=="" || i.className=="almtd"))
fid="u"
else if (b.className!="" && b.className!="almtd" && i.className!="" && i.className!="almtd" && (u.className=="" || u.className=="almtd"))
fid="bi"
else if (b.className!="" && b.className!="almtd" && u.className!="" && u.className!="almtd" && (i.className=="" || i.className=="almtd"))
fid="bu"
else if (b.className!="" && b.className!="almtd" && i.className!="" && i.className!="almtd" && u.className!="" && u.className!="almtd")
fid="biu"
else if (i.className!="" && i.className!="almtd" && u.className!="" && u.className!="almtd" && (b.className=="" || b.className=="almtd"))
fid="iu"
else
fid=""
if (fid!="")
c.innerHTML=c.innerHTML+"<div class='"+fid+"'></div>"
else
c.className=""
}
window.onload=wtd
</script>
</head>
<body>
<textarea id='t'></textarea>
<div id='wrapper'>
<div id='header'>The RichTextDevice <div class='inl'>(press a key on your keyboard)</div</div>
<div id='tools'>
<a href='#' id='b' onclick='choit("b")'></a>
<a href='#' id='i' onclick='choit("i")'></a>
<a href='#' id='u' onclick='choit("u")'></a>
</div>
<div id='content'></div>
<div id='footer'>&copy; nqpz 2008 - "And Now For Something Completely Different" (this)</div>
</div>
</body>
</html>