From bd76632b96a7608df7157f6dc8dc1cdcd600cbf5 Mon Sep 17 00:00:00 2001
From: Steven Wittens <steven@10.no-reply.drupal.org>
Date: Mon, 14 May 2001 23:27:41 +0000
Subject: [PATCH] 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.
---
 themes/goofy/goofy.theme | 225 +++++++++------------------------------
 1 file changed, 49 insertions(+), 176 deletions(-)

diff --git a/themes/goofy/goofy.theme b/themes/goofy/goofy.theme
index d6dbfdd5709a..0d0dfeb97c59 100644
--- a/themes/goofy/goofy.theme
+++ b/themes/goofy/goofy.theme
@@ -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
 
 ?>
-- 
GitLab