Commit bd76632b authored by Steven Wittens's avatar Steven Wittens
Browse files

This is a major rewrite of the Goofy-theme.... the major problem with it was...

This is a major rewrite of the Goofy-theme.... the major problem with it was that it required a *lot* of overhead for a simple box, due to the fancy borders. To counter this, I've added simple functions in JavaScript to output the actual boxes, while the PHP functions themselves output simple function calls to them.

The result is an incredible loss of size, especially on larger pages.... on a typical drupal page (header/footer, 1 story box, 1 comment mod box, 4 comments and 1 side box) the difference was 23K vs 15K, which I find quite good. You should also notice how big some pages were in the old version, which are still tiny in the new version.

There are a few problems though:
 - You can't use it in some parts of the admin section (preview a story), since admin.php leaves out the header(), so the html-generating functions are not included there.
 - Because drop can occasionally insert HTML directly, without going through themes, I have to wrap each box in its own <script> tag. The optimization would benefit even more if i could group all function calls in one <script> tag, but it's not possible at the moment.

I suggest you take a snapshot of an original goofy-page (drop.org) and compare it with the output of this one (cvs-version) to see how it works exactly. And finally, it works on both IE5 and NS4, so I assume it does on most browsers.
parent ce2ad0bd
......@@ -12,7 +12,6 @@
*********************************************************************/
class Theme {
function header() {
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
......@@ -52,23 +51,30 @@ function header() {
-->
</style>
<script language="JavaScript" type="text/javascript"><!--
function b(title,content) {document.writeln("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\"><tr><td><img src=\"themes/goofy/images/or-ul.png\" alt=\"\"></td><td class=\"oru\" width=\"100%\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td><img src=\"themes/goofy/images/or-ur.png\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\" valign=\"top\">" + title + "</td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\"><img src=\"themes/goofy/images/null.gif\" height=\"5\" alt=\"\"></td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\"><img src=\"themes/goofy/images/null.gif\" height=\"4\" alt=\"\"></td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\">" + content + "</td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td><img src=\"themes/goofy/images/lg-dl.png\" alt=\"\"></td><td class=\"lgd\" width=\"100%\"><img src=\"themes/goofy/images/null.gif\" width=\"150\" height=\"1\" alt=\"\"></td><td><img src=\"themes/goofy/images/lg-dr.png\" alt=\"\"></td></tr></table><br>");}
function s(title,subleft,subright,body) {document.writeln("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\"><tr><td><img src=\"themes/goofy/images/or-ul.png\" alt=\"\"></td><td class=\"oru\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td><img src=\"themes/goofy/images/or-ur.png\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\" valign=\"top\" colspan=\"2\">" + title + "</td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" height=\"5\" alt=\"\"></td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" height=\"4\" alt=\"\"></td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\"><small>" + subleft + "</small></td><td class=\"lgcnt\" nowrap><div align=\"right\">" + subright + "</div></td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\" colspan=\"2\"><hr color=\"#404040\" size=\"1\">" + body + "</div></td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td><img src=\"themes/goofy/images/lg-dl.png\" alt=\"\"></td><td class=\"lgd\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td><img src=\"themes/goofy/images/lg-dr.png\" alt=\"\"></td></tr></table><br>");}
function c(subject,mod,author,date,body) {document.writeln("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\"><tr><td><img src=\"themes/goofy/images/or-ul.png\" alt=\"\"></td><td class=\"oru\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td><img src=\"themes/goofy/images/or-ur.png\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\" valign=\"top\" colspan=\"2\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\"><tr><td valign=\"top\" width=\"5%\"><div align=\"right\"><b><?php echo t("Subject"); ?>:</b>&nbsp;</div></td><td width=\"80%\"><b>" + subject + "</b></td><td rowspan=\"3\" valign=\"middle\" width=\"15%\"><div align=\"right\">" + mod + "</div></td></tr><tr><td valign=\"top\"><div align=\"right\"><?php echo t("Author"); ?>:&nbsp;</div></td><td>" + author + "</td></tr><tr><td><div align=\"right\"><?php echo t("Date"); ?>:&nbsp;</div></td><td>" + date + "</td></tr></table></td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"orl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"orcnt\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" height=\"5\" alt=\"\"></td><td class=\"orr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr><tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" height=\"4\" alt=\"\"></td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr>");if(body){document.writeln("<tr><td class=\"lgl\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td class=\"lgcnt\" width=\"100%\" colspan=\"2\">" + body + "</td><td class=\"lgr\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td></tr>");};document.writeln("<tr><td><img src=\"themes/goofy/images/lg-dl.png\" alt=\"\"></td><td class=\"lgd\" width=\"100%\" colspan=\"2\"><img src=\"themes/goofy/images/null.gif\" alt=\"\"></td><td><img src=\"themes/goofy/images/lg-dr.png\" alt=\"\"></td></tr></table><br>");}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="3" cellpadding="0" width="100%">
<tr>
<td colspan="2" width="100%"><img src="themes/goofy/images/logo.png" alt=""><br>
<?php $this->linksbar(); ?>
<?php $this->linksbar(); ?>
</td>
</tr>
<tr>
<td valign="top" width="100%">
<?php
} // close header function
function linksbar() {
?>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
function linksbar() { // helper function to prevent double code
?>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="themes/goofy/images/lg-ul.png" alt=""></td>
<td class="lgu" width="100%"><img src="themes/goofy/images/null.gif" alt=""></td>
......@@ -85,201 +91,68 @@ function linksbar() {
<td><img src="themes/goofy/images/lg-dr.png" alt=""></td>
</tr>
</table>
<?php
}
function story($story, $main = 0) {
<?php
} // close linksbar function
echo "\n<!-- story: \"$story->title\" -->\n";
?>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="themes/goofy/images/or-ul.png" alt=""></td>
<td class="oru" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" alt=""></td>
<td><img src="themes/goofy/images/or-ur.png" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%" valign="top" colspan="2"><?php echo check_output($story->title); ?></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" height="5" alt=""></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" height="4" alt=""></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt"><small><?php echo strtr(t("Submitted by %a on %b"), array("%a" => format_username($story->userid), "%b" => format_date($story->timestamp, "large"))); ?></small></td>
<td class="lgcnt" nowrap><div align="right"><?php echo category_name($story->cid) ." / ". topic_name($story->tid); ?></div></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%" colspan="2"><hr color="#404040" size="1">
<?php
echo check_output($story->abstract, 1) . "<br>";
if (!$main && $story->body)
echo "<br>" . check_output($story->body, 1);
?>
<hr color="#404040" size="1"><div align="right">
<?php
if ($main)
echo theme_morelink($this, $story);
?></div></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td><img src="themes/goofy/images/lg-dl.png" alt=""></td>
<td class="lgd" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" alt=""></td>
<td><img src="themes/goofy/images/lg-dr.png" alt=""></td>
</tr>
</table><br>
<?php
function story($story, $main = 0) {
echo "\n<!-- story: \"$story->title\" -->\n";
$title = check_output($story->title);
$subleft = strtr(t("Submitted by %a on %b"), array("%a" => format_username($story->userid), "%b" => format_date($story->timestamp, "large")));
$subright = category_name($story->cid) ." / ". topic_name($story->tid);
$body = check_output($story->abstract, 1) . "<br>" . ((!$main && $story->body)?"<br>" . check_output($story->body, 1):"") . "<hr color=\"#404040\" size=\"1\"><div align=\"right\">" . ($main?theme_morelink($this, $story):"");
print "<script language=\"JavaScript\"><!--\ns(\"". $this->stripbreaks(addslashes($title)) ."\",\"". $this->stripbreaks(addslashes($subleft)) ."\",\"". $this->stripbreaks(addslashes($subright)) ."\",\"". $this->stripbreaks(addslashes($body)) ."\"); // -->\n</script>\n";
} // close story function
function comment($comment, $link = "") {
echo "<A NAME=\"$comment->cid\"></A>\n";
?>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="themes/goofy/images/or-ul.png" alt=""></td>
<td class="oru" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" alt=""></td>
<td><img src="themes/goofy/images/or-ur.png" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%" valign="top" colspan="2"><?php
echo " <table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\">";
// Subject:
echo " <tr>";
echo " <td valign=\"top\" width=\"5%\"><div align=\"right\"><b>" . t("Subject") . ":</b>&nbsp;</div></td><td width=\"80%\"><b>" . check_output($comment->subject) . "</b></td>";
// Moderation:
echo " <td rowspan=\"3\" valign=\"middle\" width=\"15%\"><div align=\"right\">" . comment_moderation($comment) . "</div></td>";
echo " </tr>";
// Author:
echo " <tr>";
echo " <td valign=\"top\"><div align=\"right\">" . t("Author") . ":&nbsp;</div></td><td><b>" . format_username($comment->userid) . "</b>";
if ($comment->userid) {
// Display extra information line:
if ($comment->fake_email) $info .= format_email($comment->fake_email);
if (eregi("http://",$comment->url)) $info .= ($info?" | ":"") . format_url($comment->url);
if ($info) echo "<br>[ $info ]";
}
echo " </td>";
echo " </tr>";
// Date
echo " <tr><td><div align=\"right\">" . t("Date:") . "&nbsp;</div></td><td>". format_date($comment->timestamp) ."</td></tr>";
echo " </table>";
?></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" height="5" alt=""></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" height="4" alt=""></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<?php
if ($comment) {
?>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%" colspan="2"><?php
echo check_output($comment->comment, 1);
echo "<br><hr color=\"#404040\" size=\"1\"><div align=\"right\">[ $link ]</div>";
?></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<?php
}
?>
<tr>
<td><img src="themes/goofy/images/lg-dl.png" alt=""></td>
<td class="lgd" width="100%" colspan="2"><img src="themes/goofy/images/null.gif" alt=""></td>
<td><img src="themes/goofy/images/lg-dr.png" alt=""></td>
</tr>
</table><br>
<?php
$author = "<b>" . format_username($comment->userid) . "</b>";
if ($comment->userid) {
if ($comment->fake_email) $info[] = format_email($comment->fake_email);
if (eregi("http://",$comment->url)) $info[] = format_url($comment->url);
if ($info) $author .= "<br>[ ". implode(" | ",$info) . "]";
}
$body = check_output($comment->comment, 1) . "<br><hr color=\"#404040\" size=\"1\"><div align=\"right\">[ $link ]</div>";
print "<script language=\"JavaScript\"><!--\nc(\"". $this->stripbreaks(addslashes(check_output($comment->subject))) ."\",\"". $this->stripbreaks(addslashes(comment_moderation($comment))) ."\",\"". $this->stripbreaks(addslashes($author)) ."\",\"". $this->stripbreaks(addslashes(format_date($comment->timestamp))) ."\",\"". $this->stripbreaks(addslashes($body)) ."\"); // -->\n</script>\n";
} // close comment function
function stripbreaks($a) { // helper function for generating the javascripted boxes
return str_replace("\n","\\n",str_replace("\r","\\r",$a));
} // close stripbreaks function
function box($subject, $content, $options = "") {
?>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="themes/goofy/images/or-ul.png" alt=""></td>
<td class="oru" width="100%"><img src="themes/goofy/images/null.gif" alt=""></td>
<td><img src="themes/goofy/images/or-ur.png" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%" valign="top"><?php echo $subject; ?></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="orl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="orcnt" width="100%"><img src="themes/goofy/images/null.gif" height="5" alt=""></td>
<td class="orr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%"><img src="themes/goofy/images/null.gif" height="4" alt=""></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td class="lgl"><img src="themes/goofy/images/null.gif" alt=""></td>
<td class="lgcnt" width="100%"><?php echo $content; ?></td>
<td class="lgr"><img src="themes/goofy/images/null.gif" alt=""></td>
</tr>
<tr>
<td><img src="themes/goofy/images/lg-dl.png" alt=""></td>
<td class="lgd" width="100%"><img src="themes/goofy/images/null.gif" width="150" height="1" alt=""></td>
<td><img src="themes/goofy/images/lg-dr.png" alt=""></td>
</tr>
</table><br>
<?php
print "<script language=\"JavaScript\"><!--\nb(\"". $this->stripbreaks(addslashes($subject)) ."\",\"". $this->stripbreaks(addslashes($content)) ."\"); // -->\n</script>\n";
} // close box function
function footer() {
?>
</td>
<td valign="top">
<?php
global $PHP_SELF;
theme_account($this);
theme_blocks("all", $this);
?>
</td>
</tr>
<tr><td colspan="2"><?php $this->linksbar(); ?></td></tr>
<tr><td colspan="2">
<?php $this->linksbar(); ?>
</td></tr>
</table>
</body>
</html>
<?
}
}
} // close footer function
} // close theme-class
?>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment