OpenPKG CVS Repository http://cvs.openpkg.org/ ____________________________________________________________________________
Server: cvs.openpkg.org Name: Ralf S. Engelschall Root: /v/openpkg/cvs Email: [EMAIL PROTECTED] Module: openpkg-meta Date: 09-Mar-2006 20:12:11 Branch: HEAD Handle: 2006030919121000 Added files: openpkg-meta canvas-js.php Modified files: openpkg-meta canvas-layout.php canvas-nav-bar.php canvas-nav-tab.php canvas-nav-title.php canvas-style.php canvas.php Log: flush all other pending changes to improve the website layout Summary: Revision Changes Path 1.1 +76 -0 openpkg-meta/canvas-js.php 1.11 +50 -53 openpkg-meta/canvas-layout.php 1.8 +13 -3 openpkg-meta/canvas-nav-bar.php 1.6 +66 -55 openpkg-meta/canvas-nav-tab.php 1.3 +9 -1 openpkg-meta/canvas-nav-title.php 1.5 +10 -1 openpkg-meta/canvas-style.php 1.13 +35 -13 openpkg-meta/canvas.php ____________________________________________________________________________ patch -p0 <<'@@ .' Index: openpkg-meta/canvas-js.php ============================================================================ $ cvs diff -u -r0 -r1.1 canvas-js.php --- /dev/null 2006-03-09 20:11:59 +0100 +++ canvas-js.php 2006-03-09 20:12:10 +0100 @@ -0,0 +1,76 @@ +<script language="php"> +## +## Copyright (c) 2005-2006 OpenPKG Foundation e.V. <http://openpkg.net/> +## Copyright (c) 2005-2006 Ralf S. Engelschall <http://engelschall.com/> +## +## Permission to use, copy, modify, and distribute this software for +## any purpose with or without fee is hereby granted, provided that +## the above copyright notice and this permission notice appear in all +## copies. +## +## THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESSED OR IMPLIED +## WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +## MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. +## IN NO EVENT SHALL THE AUTHORS AND COPYRIGHT HOLDERS AND THEIR +## CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +## SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +## LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF +## USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND +## ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +## OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT +## OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF +## SUCH DAMAGE. +## +## canvas-js.php: javascript reuseable components +## +</script> + +<script language="php"> + divert("html-head"); +</script> + +<!-- Yahoo! UI DOM --> +<!-- see http://developer.yahoo.net/yui/dom/index.html for more details. --> +<script src="/dhtml/yui/YAHOO.js" type="text/javascript"></script> +<script src="/dhtml/yui/event.js" type="text/javascript"></script> +<script src="/dhtml/yui/dom.js" type="text/javascript"></script> + +<!-- CSS-style DOM node selection --> +<!-- see http://dean.edwards.name/my/cssQuery/ for more details. --> +<script src="<script language="php">echo $rooturl</script>canvas-js.d/cssquery.js" type="text/javascript"></script> + +<!-- create own convenience JavaScript object --> +<script type="text/javascript"> +DOM = { + getNode: function (str, obj) { + return cssQuery(str, obj); + }, + getPosition: function (obj) { + var pos = YAHOO.util.Dom.getXY(obj); + return { x: pos[0], y: pos[1] }; + }, + setPosition: function (obj, pos) { + YAHOO.util.Dom.setXY(obj, [ pos.x, pos.y ], true); + }, + getStyle: function (obj, name) { + return YAHOO.util.Dom.getStyle(obj, name); + }, + setStyle: function (obj, name, value) { + YAHOO.util.Dom.setStyle(obj, name, value); + }, + getViewport: function () { + return [ YAHOO.util.Dom.getClientWidth(), YAHOO.util.Dom.getClientHeight() ]; + }, + setEvent: function (obj, name, cb, ctx, override) { + YAHOO.util.Event.addListener(obj, name, cb, ctx, override); + } +}; +</script> + +<!-- compliance patch for Microsoft Internet Explorer 5.5 and 6.0 --> +<!-- see http://dean.edwards.name/IE7/ for more details. --> +<!--[if lt IE 7]> +<script type="text/javascript">IE7_PNG_SUFFIX = "-T.png";</script> +<script src="<script language="php">echo $rooturl</script>canvas-js.d/ie7.js" type="text/javascript"></script> +<![endif]--> + @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas-layout.php ============================================================================ $ cvs diff -u -r1.10 -r1.11 canvas-layout.php --- openpkg-meta/canvas-layout.php 20 Feb 2006 08:34:35 -0000 1.10 +++ openpkg-meta/canvas-layout.php 9 Mar 2006 19:12:10 -0000 1.11 @@ -32,125 +32,124 @@ BODY { left: 0px; top: 0px; - margin: 0px; - padding: 0px; - height: 100%; - min-height: 100%; /*for mozilla*/ - width: 100%; - background-repeat: no-repeat; - background-position: right top; - background-image: url('<?php echo $rooturl ?>canvas/canvas-crop-background.jpg'); + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; + background-color: #000000; + background-image: url('<?php echo $rooturl ?>canvas/canvas-crop-gradient.png'); + background-position: left top; + background-repeat: repeat-x; background-attachment: fixed; - background-color: #ffffff; color: #000000; + position: relative; } DIV#canvas { - width: 100%; - height: 100%; + position: absolute; + left: 0px; + right: 0px; + <script language="php">if ($stretch == "margin") {</script> + margin-left: auto; + margin-right: auto; + width: 800px; + <script language="php">} else {</script> + margin-left: 40px; + margin-right: 40px; + width: auto; + <script language="php">}</script> + min-height: 900px; + margin-bottom: 20px; + top: 20px; + border-top: 1px solid #a09080; + border-left: 1px solid #a09080; + border-right: 1px solid #504030; + border-bottom: 1px solid #504030; + background-color: #ffffff; + background-repeat: no-repeat; + background-position: right top; + background-image: url('<?php echo $rooturl ?>canvas/canvas-crop-background.jpg'); z-index: 1; } DIV#canvas_logo { - position: fixed; + position: absolute; right: 0px; top: 0px; z-index: 20; } DIV#canvas_head { - position: fixed; - background-color: #908070; + position: absolute; + background-color: #706050; top: 0px; left: 0px; width: 100%; height: 110px; } DIV#canvas_head IMG { - position: fixed; + position: absolute; right: 0px; top: 0px; } DIV#canvas_tabs { - position: fixed; - left: 80px; + position: absolute; + left: 60px; top: 90px; height: 20px; z-index: 10; } DIV#canvas_title IMG { - position: fixed; - left: 80px; + position: absolute; + left: 60px; top: 130px; } -DIV#canvas_titlearea { - position: fixed; - left: 0px; - top: 110px; - width: 100%; - background-repeat: no-repeat; - background-position: right top; - background-image: url('<?php echo $rooturl ?>canvas/canvas-crop-background.jpg'); - background-attachment: fixed; - background-color: #ffffff; -} - H1 { margin: 0px; - position: fixed; - left: 80px; - height: 40px; + position: absolute; + left: 60px; + height: auto; } <script language="php">if ($pane == "1") {</script> -DIV#canvas_titlearea { - height: 150px; -} - H1 { top: 220px; } DIV#canvas_body { margin-top: 260px; - margin-left: 80px; - margin-right: 80px; + margin-left: 60px; + margin-right: 60px; margin-bottom: 80px; z-index: 1; } DIV#canvas_nav { - position: fixed; - margin-left: 80px; - margin-right: 80px; + position: absolute; + margin-left: 60px; + margin-right: 60px; top: 190px; height: 20px; } <script language="php">} else if ($pane == "2") {</script> -DIV#canvas_titlearea { - height: 120px; -} - H1 { top: 190px; } DIV#canvas_body { margin-top: 230px; - margin-left: 80px; + margin-left: 60px; margin-right: 300px; margin-bottom: 80px; z-index: 1; } DIV#canvas_nav { - position: fixed; + position: absolute; right: 40px; top: 230px; width: 180px; @@ -159,7 +158,7 @@ <script language="php">}</script> DIV#canvas_foot { - position: fixed; + position: absolute; left: 0px; bottom: 0px; width: 100%; @@ -179,7 +178,7 @@ } DIV#canvas_foot DIV.canvas_foot_left { position: absolute; - left: 80px; + left: 60px; bottom: 4px; } DIV#canvas_foot DIV.canvas_foot_right { @@ -211,8 +210,6 @@ <div id="canvas_tabs"> <script language="php">echo undivert("canvas-tabs");</script> </div> - <div id="canvas_titlearea"> - </div> <div id="canvas_title"> <script language="php">echo undivert("canvas-title");</script> </div> @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas-nav-bar.php ============================================================================ $ cvs diff -u -r1.7 -r1.8 canvas-nav-bar.php --- openpkg-meta/canvas-nav-bar.php 20 Feb 2006 08:34:35 -0000 1.7 +++ openpkg-meta/canvas-nav-bar.php 9 Mar 2006 19:12:10 -0000 1.8 @@ -89,13 +89,21 @@ } $html = implode("\n", $html); $html = preg_replace("/(<li id=\"navbar.$path\")/s", "$1 class=\"active\"", $html); - $html = preg_replace("/(<li id=\"(.+?)\"[^>]*><a)/s", "$1 onMouseOver=\"navbar_over('$2'); return true;\" onMouseOut=\"navbar_out('$2'); return true;\"", $html); + #$html = preg_replace("/(<li id=\"(.+?)\"[^>]*><a)/s", "$1 onMouseOver=\"navbar_over('$2'); return true;\" onMouseOut=\"navbar_out('$2'); return true;\"", $html); divert("canvas-nav"); echo "<div class=\"navbar\" id=\"navbar\">\n"; echo $html; echo "</div>\n"; </script> +<script type="text/javascript"> +var nodes = DOM.getNode("DIV.navbar LI"); +for (var i = 0; i < nodes.length; i++) { + DOM.setEvent(nodes[i], "mouseover", navbar_over, nodes[i].id, true); /* "navbar_over('"+nodes[i].id+"'); return true;"); */ + DOM.setEvent(nodes[i], "mouseout", navbar_out, nodes[i].id, true); /* ('"+nodes[i].id+"'); return true;"); */ +} +</script> + <script language="php"> divert("js"); </script> @@ -126,7 +134,8 @@ var navbar_active = navbar_default; function navbar_over (id) { - var el = document.getElementById(id).getElementsByTagName('a')[0]; + /* var el = document.getElementById(id).getElementsByTagName('a')[0]; */ + var el = document.getElementById(this).getElementsByTagName('a')[0]; window.status = el.href; navbar_active = id; defer_cancel("navbar_out"); @@ -135,7 +144,8 @@ function navbar_out (id) { window.status = ""; - defer_schedule("navbar_out", "navbar_out_stage2('"+id+"');", 4000); + /* defer_schedule("navbar_out", "navbar_out_stage2('"+id+"');", 4000); */ + defer_schedule("navbar_out", "navbar_out_stage2('"+this+"');", 4000); } function navbar_out_stage2 (id) { @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas-nav-tab.php ============================================================================ $ cvs diff -u -r1.5 -r1.6 canvas-nav-tab.php --- openpkg-meta/canvas-nav-tab.php 20 Feb 2006 08:34:35 -0000 1.5 +++ openpkg-meta/canvas-nav-tab.php 9 Mar 2006 19:12:10 -0000 1.6 @@ -29,90 +29,101 @@ divert("css"); </script> -TABLE.navtab { - margin-top: 1px; - height: 100%; - border-collapse: separate; -} -TABLE.navtab TD { +ul.navtab { + padding: 0px; + margin: 0px; + height: 20px; + list-style: none; +} +ul.navtab li { + display: inline; + float: left; border-top: 1px solid #c0b0a0; border-left: 1px solid #c0b0a0; border-right: 1px solid #504030; border-bottom: none; - padding: 2px 15px 0px 15px; - color: #000000; - background-attachment: fixed; - background-repeat: no-repeat; - background-position: right top; - background-image: url('canvas/canvas-crop-head-light.png'); - background-color: #b2a69b; - font-weight: normal; + margin: 0px 2px 0px 0px; + padding: 1px 6px 0px 6px; + height: 18px; + background-attachment: scroll; + background-repeat: no-repeat; /* FIXME: doesn't work for Konqueror */ + background-position: left top; + background-image: url('canvas/canvas-crop-glass-light-T.png'); + color: #333333; } -TABLE.navtab TD.active { +ul.navtab li.active { border-top: 1px solid #f5f5f5; border-left: 1px solid #f0f0f0; border-right: 1px solid #333333; - background-attachment: fixed; - background-repeat: no-repeat; - background-position: right top; + background-position: 0px 0px; /* dynamically adjusted! (see below) */ background-image: url('canvas/canvas-crop-background.jpg'); background-color: #ffffff; - color: inherit; -} -TABLE.navtab TD.active A { - font-weight: bold; + color: #000000; } -TABLE.navtab TD:hover { +ul.navtab li.inactive:hover { border-top: 1px solid #807060; border-left: 1px solid #807060; border-right: 1px solid #504030; - background-attachment: fixed; - background-repeat: no-repeat; - background-position: right top; - background-image: url('canvas/canvas-crop-head-dark.png'); - background-color: #73665a; - color: inherit; + background-position: left top; + background-image: url('canvas/canvas-crop-glass-dark-T.png'); + color: #f0f0f0; } -TABLE.navtab TD:hover.active { - border-top: 1px solid #f5f5f5; - border-left: 1px solid #f0f0f0; - border-right: 1px solid #333333; - background-image: url('canvas/canvas-crop-background.jpg'); - background-color: #ffffff; - color: inherit; -} -TABLE.navtab TD A { +ul.navtab li a { text-decoration: none; - background-color: inherit; - color: #000000; font-weight: normal; + font-family: tahoma,helvetica,lucida,verdana,arial,sans-serif; + font-size: 9pt; + color: inherit; +} +ul.navtab li.active a { + font-weight: bold; } <script language="php"> + divert("js"); +</script> + +/* define tab background update function */ +function nav_tab_update (e) { + /* determine outer canvas box and active navigation tab */ + var box = DOM.getNode("div#canvas")[0]; + var tab = DOM.getNode("ul.navtab li.active")[0]; + + /* determine viewport-relative positions of the two elements */ + var box_pos = DOM.getPosition(box); + var tab_pos = DOM.getPosition(tab); + + /* determine effective width of box and its background image */ + var box_width = DOM.getStyle(box, "width") || "0px"; + box_width = box_width.replace(/px/, "") - 0; + var img_width = 720; /* FIXME: hard-coded width of background image */ + + /* re-calculate and set new position of tab background image */ + var x = box_pos.x + box_width - img_width - tab_pos.x; + var y = box_pos.y - tab_pos.y; + DOM.setStyle(tab, "backgroundPosition", x+'px '+y+'px'); +} + +/* activate tab background update function */ +/* DOM.setEvent(window, "resize", nav_tab_update); */ +DOM.setEvent(window, "load", nav_tab_update); + +<script language="php"> divert("canvas-tabs"); </script> <script language="php"> + # determine the active/inactive CSS class for the tabs $class = array(); $class["project"] = "inactive"; $class["corporation"] = "inactive"; $class["foundation"] = "inactive"; $class[$this["site"]] = "active"; </script> -<table class="navtab"> - <tr> - <td class="<?php echo $class["project"] ?>"><a href="http://www.openpkg.org/">OpenPKG Project</a></td> - <td class="<?php echo $class["corporation"] ?>"><a href="http://www.openpkg.com/">OpenPKG Corporation</a></td> - <td class="<?php echo $class["foundation"] ?>"><a href="http://www.openpkg.net/">OpenPKG Foundation</a></td> - </tr> -</table> - -<script language="php"> - divert("canvas-title"); -</script> -<img - src="<?php echo $rooturl."canvas/canvas-crop-title-".$this["site"]."-T.png" ?>" - width="500" height="50" alt="OpenPKG" -/> +<ul class="navtab"> + <li class="<?php echo $class["project"] ?>"><a href="http://www.openpkg.org/">OpenPKG Project</a></li> + <li class="<?php echo $class["corporation"] ?>"><a href="http://www.openpkg.com/">OpenPKG Corporation</a></li> + <li class="<?php echo $class["foundation"] ?>"><a href="http://www.openpkg.net/">OpenPKG Foundation</a></li> +</ul> @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas-nav-title.php ============================================================================ $ cvs diff -u -r1.2 -r1.3 canvas-nav-title.php --- openpkg-meta/canvas-nav-title.php 20 Feb 2006 08:34:35 -0000 1.2 +++ openpkg-meta/canvas-nav-title.php 9 Mar 2006 19:12:10 -0000 1.3 @@ -26,6 +26,7 @@ </script> <script language="php"> + # determine page title $html = undivert("nav"); $html = explode("\n", $html); $count = count($html); @@ -38,8 +39,15 @@ } } } - $title = implode(": ", $list); + + # render as HTML title divert("html-head"); + $title = implode(": ", $list); echo "<title>$title</title>\n"; + + # render as content title + divert("canvas-title"); + echo "<img src=\"".$rooturl."canvas/canvas-crop-title-".$this["site"]."-T.png\""; + echo " width=\"500\" height=\"50\" alt=\"".$list[0]."\"/>"; </script> @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas-style.php ============================================================================ $ cvs diff -u -r1.4 -r1.5 canvas-style.php --- openpkg-meta/canvas-style.php 20 Feb 2006 08:34:35 -0000 1.4 +++ openpkg-meta/canvas-style.php 9 Mar 2006 19:12:10 -0000 1.5 @@ -94,7 +94,7 @@ H1, H2, H3 { font-family: tahoma,arial,helvetica,lucida,sans-serif; font-weight: bold; - color: #999999; + color: #807060; } H1 { font-size: 200% !important; @@ -125,3 +125,12 @@ float: right; } +/* boxes */ +div.boxed { + display: block; + padding: 10px; + background-attachment: scroll; + background-position: left top; + background-image: url('canvas/canvas-full-glass-dark2-T.png'); +} + @@ . patch -p0 <<'@@ .' Index: openpkg-meta/canvas.php ============================================================================ $ cvs diff -u -r1.12 -r1.13 canvas.php --- openpkg-meta/canvas.php 20 Feb 2006 08:34:35 -0000 1.12 +++ openpkg-meta/canvas.php 9 Mar 2006 19:12:10 -0000 1.13 @@ -24,12 +24,27 @@ ## canvas.php: canvas rendering driver ## +## url ::= "http://meta.openpkg.org/" . option* +## option ::= # content dispatching (internal) +## ("type=" . ("html"|"css"|"js")) +## | # content embedding +## ("embed=" . ("css"|"js") . (",".("css"|"js"))?) +## | # content path selection +## ("path=" . site.(".".area.(".".page.(".".part)?)?)? +## | # content layouting +## ("pane=" . ("1"|"2")) +## | # x-axis streching +## ("stretch=" . ("canvas"|"margin")) +## | # root URL type +## ("root=" . ("absolute"|"relative")) + # determine input parameters -$type = isset($_GET["type"]) ? $_GET["type"] : "html"; -$path = isset($_GET["path"]) ? $_GET["path"] : "project"; -$embed = isset($_GET["embed"]) ? $_GET["embed"] : ""; -$pane = isset($_GET["pane"]) ? $_GET["pane"] : "2"; -$root = isset($_GET["root"]) ? $_GET["root"] : "relative"; +$type = isset($_GET["type"]) ? $_GET["type"] : "html"; +$embed = isset($_GET["embed"]) ? $_GET["embed"] : ""; +$path = isset($_GET["path"]) ? $_GET["path"] : "project"; +$pane = isset($_GET["pane"]) ? $_GET["pane"] : "2"; +$stretch = isset($_GET["stretch"]) ? $_GET["stretch"] : "margin"; +$root = isset($_GET["root"]) ? $_GET["root"] : "relative"; # parse path into parts $x = explode(".", $path); @@ -116,11 +131,6 @@ return $diversion_data[$name]; } -# page epilog processing -function canvas_output () { - global $type; -} - # load content generation parts divert("/dev/null"); include("canvas-nav.php"); @@ -131,12 +141,13 @@ else if ($pane == "2") include("canvas-nav-bar.php"); include("canvas-style.php"); -include("canvas-hack.php"); +include("canvas-js.php"); +include("canvas-php.php"); include("canvas-layout.php"); # divert into HTML diversion by default +# and start generating the HTML document divert("html") - </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> @@ -145,26 +156,37 @@ <meta name="Copyright" content="2005-2006 OpenPKG Foundation e.V."/> <meta name="Copyright" content="2005-2006 Ralf S. Engelschall"/> <script language="php"> + # the standard HTML head element + echo undivert("html-head"); + + # Cascading Style Sheet (CSS) if ($embed["css"]) { + # internally embedded echo "<style type=\"text/css\">\n"; echo undivert("css"); echo "</style>\n"; } else { + # externally linked + # (path intentionally left out for caching because functionally unimportant) echo "<link rel=\"stylesheet\" type=\"text/css\""; echo " href=\"$rooturl?type=css&pane=$pane\"/>\n"; } + + # JavaScript (JS) if ($embed["js"]) { + # internally embedded echo "<script language=\"javascript\" type=\"text/javascript\">\n"; echo undivert("js"); echo "</script>\n"; } else { + # externally linked + # (path intentionally included because functionally important) echo "<script type=\"text/javascript\""; echo " src=\"$rooturl?type=js&pane=$pane&path=$path\"></script>\n"; } </script> - <script language="php">echo undivert("html-head");</script> </head> <body> <script language="php">echo undivert("html-body");</script> @@ . ______________________________________________________________________ The OpenPKG Project www.openpkg.org CVS Repository Commit List openpkg-cvs@openpkg.org