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 [email protected]
