You are viewing a plain text version of this content. The canonical link for it is here.
Posted to svn@forrest.apache.org by th...@apache.org on 2005/11/01 15:16:17 UTC
svn commit: r330061 - in
/forrest/trunk/main/template-sites/v2/src/documentation:
content/xdocs/samples/index.fv
resources/themes/default/html/branding-theme-switcher.ft
resources/themes/default/js/cssStyleSwitcher.js
Author: thorsten
Date: Tue Nov 1 06:16:08 2005
New Revision: 330061
URL: http://svn.apache.org/viewcvs?rev=330061&view=rev
Log:
- Enabled theme-profiling in the theme switcher. In combination with the branding-theme-profiler this contract provides a quick way to create new
themes and switch them. The default theme can have unlimited color derivatives. If you turn on the color profiling this contract will activate the
default theme in combination with the profiling styles.
- Updated the example fv to enable the full power of the contract.
- removed static stuff in contract and made all possible values configurable via the fv.
- you can choose between an "a-link" switcher, that will output the possible themes in <a href="">theme</a>$seperator... gramatic, or as select box.
Modified:
forrest/trunk/main/template-sites/v2/src/documentation/content/xdocs/samples/index.fv
forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/html/branding-theme-switcher.ft
forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/js/cssStyleSwitcher.js
Modified: forrest/trunk/main/template-sites/v2/src/documentation/content/xdocs/samples/index.fv
URL: http://svn.apache.org/viewcvs/forrest/trunk/main/template-sites/v2/src/documentation/content/xdocs/samples/index.fv?rev=330061&r1=330060&r2=330061&view=diff
==============================================================================
--- forrest/trunk/main/template-sites/v2/src/documentation/content/xdocs/samples/index.fv (original)
+++ forrest/trunk/main/template-sites/v2/src/documentation/content/xdocs/samples/index.fv Tue Nov 1 06:16:08 2005
@@ -47,7 +47,115 @@
</forrest:property>
</forrest:properties>
</forrest:contract>-->
-
+ <forrest:contract name="branding-theme-profiler">
+ <forrest:properties contract="branding-theme-profiler">
+ <forrest:property name="branding-theme-profiler-theme">Pelt-Forrest</forrest:property>
+ <forrest:property name="branding-theme-profiler">
+ <color name="breadtrail" value="#cedfef" font="#0F3660"
+ link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="header" value="#294563"/>
+ <color name="tab-selected" value="#4a6d8c" link="#0F3660"
+ vlink="#0F3660" hlink="#000066"/>
+ <color name="tab-unselected" value="#b5c7e7" link="#0F3660"
+ vlink="#0F3660" hlink="#000066"/>
+ <color name="subtab-selected" value="#4a6d8c" link="#0F3660"
+ vlink="#0F3660" hlink="#000066"/>
+ <color name="subtab-unselected" value="#4a6d8c" link="#0F3660"
+ vlink="#0F3660" hlink="#000066"/>
+ <color name="heading" value="#294563"/>
+ <color name="subheading" value="#4a6d8c"/>
+ <color name="published" value="#4C6C8F" font="#FFFFFF"/>
+ <color name="feedback" value="#4C6C8F" font="#FFFFFF" align="center"/>
+ <color name="navstrip" value="#4a6d8c" font="#ffffff" link="#0F3660"
+ vlink="#0F3660" hlink="#000066"/>
+ <color name="menu" value="#4a6d8c" font="#cedfef" link="#ffffff"
+ vlink="#ffffff" hlink="#ffcf00"/>
+ <color name="toolbox" value="#4a6d8c"/>
+ <color name="border" value="#294563"/>
+ <color name="dialog" value="#4a6d8c"/>
+ <color name="searchbox" value="#4a6d8c" font="#000000"/>
+ <color name="body" value="#ffffff" link="#0F3660" vlink="#009999"
+ hlink="#000066"/>
+ <color name="table" value="#7099C5"/>
+ <color name="table-cell" value="#f0f0ff"/>
+ <color name="highlight" value="#ffff00"/>
+ <color name="fixme" value="#cc6600"/>
+ <color name="note" value="#006699"/>
+ <color name="warning" value="#990000"/>
+ <color name="code" value="#CFDCED"/>
+ <color name="footer" value="#cedfef"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ <forrest:contract name="branding-theme-profiler">
+ <forrest:properties contract="branding-theme-profiler">
+ <forrest:property name="branding-theme-profiler-theme">Pelt-Krysalis</forrest:property>
+ <forrest:property name="branding-theme-profiler">
+ <!-- Color group: Krysalis -->
+ <color name="header" value="#FFFFFF"/>
+ <color name="tab-selected" value="#a5b6c6" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="tab-unselected" value="#F7F7F7" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="subtab-selected" value="#a5b6c6" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="subtab-unselected" value="#a5b6c6" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="heading" value="#a5b6c6"/>
+ <color name="subheading" value="#CFDCED"/>
+ <color name="navstrip" value="#CFDCED" font="#000000" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="toolbox" value="#a5b6c6"/>
+ <color name="border" value="#a5b6c6"/>
+ <color name="menu" value="#F7F7F7" link="#000000" vlink="#000000"
+ hlink="#000000"/>
+ <color name="dialog" value="#F7F7F7"/>
+ <color name="body" value="#ffffff" link="#0F3660" vlink="#009999"
+ hlink="#000066"/>
+ <color name="table" value="#a5b6c6"/>
+ <color name="table-cell" value="#ffffff"/>
+ <color name="highlight" value="#ffff00"/>
+ <color name="fixme" value="#cc6600"/>
+ <color name="note" value="#006699"/>
+ <color name="warning" value="#990000"/>
+ <color name="code" value="#a5b6c6"/>
+ <color name="footer" value="#a5b6c6"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
+ <forrest:contract name="branding-theme-profiler">
+ <forrest:properties contract="branding-theme-profiler">
+ <forrest:property name="branding-theme-profiler-theme">Pelt-Collabnet</forrest:property>
+ <forrest:property name="branding-theme-profiler">
+ <!-- Color group: Collabnet -->
+ <color name="header" value="#003366"/>
+ <color name="tab-selected" value="#dddddd" link="#555555"
+ vlink="#555555" hlink="#555555"/>
+ <color name="tab-unselected" value="#999999" link="#ffffff"
+ vlink="#ffffff" hlink="#ffffff"/>
+ <color name="subtab-selected" value="#cccccc" link="#000000"
+ vlink="#000000" hlink="#000000"/>
+ <color name="subtab-unselected" value="#cccccc" link="#555555"
+ vlink="#555555" hlink="#555555"/>
+ <color name="heading" value="#003366"/>
+ <color name="subheading" value="#888888"/>
+ <color name="navstrip" value="#dddddd" font="#555555"/>
+ <color name="toolbox" value="#dddddd" font="#555555"/>
+ <color name="border" value="#999999"/>
+ <color name="menu" value="#ffffff"/>
+ <color name="dialog" value="#eeeeee"/>
+ <color name="body" value="#ffffff"/>
+ <color name="table" value="#ccc"/>
+ <color name="table-cell" value="#ffffff"/>
+ <color name="highlight" value="#ffff00"/>
+ <color name="fixme" value="#cc6600"/>
+ <color name="note" value="#006699"/>
+ <color name="warning" value="#990000"/>
+ <color name="code" value="#003366"/>
+ <color name="footer" value="#ffffff"/>
+ </forrest:property>
+ </forrest:properties>
+ </forrest:contract>
<forrest:hook name="container">
<forrest:contract name="helper-prototype-ajax"/>
<forrest:contract name="branding-breadcrumbs">
@@ -251,7 +359,18 @@
</forrest:properties>
</forrest:contract>
<forrest:hook name="example" class="example">
- <forrest:contract name="branding-theme-switcher"/>
+ <forrest:contract name="branding-theme-switcher">
+ <forrest:properties contract="branding-theme-switcher">
+ <!-- branding-theme-switcher-profiler and branding-theme-switcher-defaultTheme are required -->
+ <!-- branding-theme-switcher-profiler {true|false} only works on the defaultTheme -->
+ <forrest:property name="branding-theme-switcher-profiler" activated="true"/>
+ <forrest:property name="branding-theme-switcher-defaultTheme" defaultTheme="Pelt"/>
+ <!-- normally you are not using an "a link" switcher and a "selectbox" switcher at the same time
+ in the same position, so uncomment the one you want. -->
+ <!--<forrest:property name="branding-theme-switcher-a" seperator="|" caption="Theme switcher: "/>-->
+ <forrest:property name="branding-theme-switcher-select" caption="Theme switcher: "/>
+ </forrest:properties>
+ </forrest:contract>
</forrest:hook>
<forrest:hook name="example" class="example">
<forrest:contract name="ajax-example"/>
Modified: forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/html/branding-theme-switcher.ft
URL: http://svn.apache.org/viewcvs/forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/html/branding-theme-switcher.ft?rev=330061&r1=330060&r2=330061&view=diff
==============================================================================
--- forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/html/branding-theme-switcher.ft (original)
+++ forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/html/branding-theme-switcher.ft Tue Nov 1 06:16:08 2005
@@ -22,7 +22,7 @@
<description>
<p> <strong>branding-theme-switcher</strong> provides a way to switch the
- underlying stylesheets (it not a "real" theme switcher). </p>
+ underlying stylesheets (b). </p>
<pre class="code"><![CDATA[A theme is a presentation layer that provides an aggregation of
a) theme structure information (*.fv)
b) theme style information (*.css & *.png|jpg|gif|...)
@@ -30,42 +30,76 @@
<p> A "real" theme switcher would change a/b/c. </p>
<p> A "real" color-theme switcher should also provide a possibility to
change each color with a WEB-GUI. </p>
+ <div class="note">
+ <div class="label">Note</div>
+ <div class="content">
+ branding-theme-switcher-profiler and branding-theme-switcher-defaultTheme are required!<br/>
+ branding-theme-switcher-profiler {true|false} only works on the defaultTheme.<br/>
+ normally you are not using an "a link" (branding-theme-switcher-a) and a "selectbox"
+ (branding-theme-switcher-select) switcher at the same time in the same position, so uncomment the one you want.
+ </div>
+ </div>
+ <p>
+ In combination with the branding-theme-profiler this contract provides a quick way to create new themes. The default theme
+ can have unlimited color derivatives. If you turn on the color profiling this contract will activate the default theme in combination
+ with the profiling styles.
+ </p>
</description>
- <usage><![CDATA[<forrest:contract name="branding-theme-switcher"/>]]></usage>
+ <usage><![CDATA[<forrest:contract name="branding-theme-switcher">
+ <forrest:properties contract="branding-theme-switcher">
+ <!-- branding-theme-switcher-profiler and branding-theme-switcher-defaultTheme are required -->
+ <!-- branding-theme-switcher-profiler {true|false} only works on the defaultTheme -->
+ <forrest:property name="branding-theme-switcher-profiler" activated="true"/>
+ <forrest:property name="branding-theme-switcher-defaultTheme" defaultTheme="Pelt"/>
+ <!-- normally you are not using an "a link" (branding-theme-switcher-a) and a
+ "selectbox" (branding-theme-switcher-select) switcher at the same time
+ in the same position, so uncomment the one you want. -->
+ <!--<forrest:property name="branding-theme-switcher-a" seperator="|" caption="Theme switcher: "/>-->
+ <!--<forrest:property name="branding-theme-switcher-select" caption="Theme switcher: "/>-->
+ </forrest:properties>
+</forrest:contract>]]></usage>
<forrest:template xmlns:forrest="http://apache.org/forrest/templates/1.0"
format="html" name="branding-theme-switcher" inputFormat="xsl" body="true" head="true">
<xsl:stylesheet version="1.1"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="branding-theme-switcher-head">
- <!--<xsl:param name="branding-theme-switcher"/>
- <xsl:param name="branding-theme-switcher-theme"/>-->
+ <xsl:param name="branding-theme-switcher-defaultTheme" />
+ <xsl:param name="branding-theme-switcher-profiler" />
+ <xsl:variable name="defaultTheme" select="$branding-theme-switcher-defaultTheme/@defaultTheme"/>
+ <xsl:variable name="profilerActivated" select="$branding-theme-switcher-profiler/@activated"/>
<script type="text/javascript" language="javascript"
src="{$root}themes/cssStyleSwitcher.js"> </script>
+ <script type="text/javascript">
+ initBrandingThemeSwitcher('<xsl:value-of
+ select="$defaultTheme"/>','<xsl:value-of
+ select="$profilerActivated"/>'); </script>
</xsl:template>
<xsl:template name="branding-theme-switcher-body">
- <!--<xsl:param name="branding-theme-switcher"/>
- <xsl:param name="branding-theme-switcher-theme"/>-->
- Theme-switcher:<br/>
- <div id="theme-switcher-static">static:<br/>
- as links: <a href="javascript:switchTheme('default')">default</a>|<a href="javascript:switchTheme('Pelt')">pelt</a>
- <form action="">
- <select name="themeChanger" onchange="switchThemeSelect(this);">
- <option value="-1">Select a theme</option>
- <option value="default">Default</option>
- <option value="Pelt">Pelt</option>
- </select>
- </form>
- </div>
- <div id="theme-switcher-dyn">Dynamic:
- <form action="">
- <select id="themeSwitcherSelect" onchange="switchThemeSelect(this);">
- <option value="-1">Select a theme</option>
- </select>
- </form>
- <script type="text/javascript">
- initSelectSwitcher('themeSwitcherSelect');
- </script>
- </div>
+ <xsl:param name="branding-theme-switcher-a" select="false"/>
+ <xsl:param name="branding-theme-switcher-select" select="false"/>
+ <xsl:variable name="seperator" select="$branding-theme-switcher-a/@seperator"/>
+ <xsl:variable name="caption" select="$branding-theme-switcher-a/@caption"/>
+ <xsl:variable name="captionSelect" select="$branding-theme-switcher-select/@caption"/>
+ <xsl:if test="$branding-theme-switcher-a!='false'">
+ <xsl:value-of select="$caption"/>
+ <span id="theme-switcher-dyn-a">dynamic theme switcher links</span>
+ <script type="text/javascript">
+ initASwitcher('theme-switcher-dyn-a','<xsl:value-of
+ select="$seperator"/>'); </script>
+ </xsl:if>
+ <xsl:if test="$branding-theme-switcher-select!='false'">
+ <div id="theme-switcher-dyn">
+ <form action="">
+ <xsl:value-of select="$captionSelect"/>
+ <select id="themeSwitcherSelect"
+ onchange="switchThemeSelect(this);">
+ <option value="-1">Select a theme</option>
+ </select>
+ </form>
+ <script type="text/javascript">
+ initSelectSwitcher('themeSwitcherSelect'); </script>
+ </div>
+ </xsl:if>
</xsl:template>
</xsl:stylesheet>
</forrest:template>
Modified: forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/js/cssStyleSwitcher.js
URL: http://svn.apache.org/viewcvs/forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/js/cssStyleSwitcher.js?rev=330061&r1=330060&r2=330061&view=diff
==============================================================================
--- forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/js/cssStyleSwitcher.js (original)
+++ forrest/trunk/main/template-sites/v2/src/documentation/resources/themes/default/js/cssStyleSwitcher.js Tue Nov 1 06:16:08 2005
@@ -20,10 +20,12 @@
*
* cssStyleSwitcher.js
*/
+var THEME_SWITCHER_PROFILING=false;
+var THEME_SWITCHER_DEFAULT_THEME="";
function switchTheme(title){
- var linkElements= document.getElementsByTagName("link");
+ var linkElements= document.getElementsByTagName("link"); // get all linked objects
for(var i = 0; i <linkElements.length; i++) {
- var a = linkElements[i];
+ var a = linkElements[i]; // get linked object
//deactivate all screen css
if (a.getAttribute("media") == "screen") {
a.disabled=true;
@@ -31,13 +33,50 @@
}
//activate the selected theme
for(var i = 0; i <linkElements.length; i++) {
- var a = linkElements[i];
+ var a = linkElements[i]; // get all linked objects
if (a.getAttribute("media") == "screen" ) {
- a.disabled = (a.getAttribute("title") == title)?false:true;
+/* theme profiling will only change a couple of stylesheets so we need to include
+ the default theme on which the profiling is based on*/
+ if (THEME_SWITCHER_PROFILING){
+ if(title.lastIndexOf(THEME_SWITCHER_DEFAULT_THEME)>-1){
+ var profiled = (a.getAttribute("title") == THEME_SWITCHER_DEFAULT_THEME || a.getAttribute("title") == title)?true:false;
+ a.disabled = (profiled)?false:true;
+ }else{
+ a.disabled = (a.getAttribute("title") == title)?false:true;
+ }
+ }else{
+ a.disabled = (a.getAttribute("title") == title)?false:true;
+ }
+ }
+ }
+ var styleElements= document.getElementsByTagName("style");// get all inline style objects
+ for(var i = 0; i <styleElements.length; i++) {
+ var a = styleElements[i];
+ //deactivate all screen css
+ if (a.getAttribute("media") == "screen") {
+ a.disabled=true;
+ }
+ }
+ //activate the selected theme
+ for(var i = 0; i <styleElements.length; i++) {
+ var a = styleElements[i]; // get inline style object
+ if (a.getAttribute("media") == "screen" ) {
+/* theme profiling will only change a couple of stylesheets so we need to include
+ the default theme on which the profiling is based on*/
+ if (THEME_SWITCHER_PROFILING){
+ if(title.lastIndexOf(THEME_SWITCHER_DEFAULT_THEME)>-1){
+ var profiled = (a.getAttribute("title") == THEME_SWITCHER_DEFAULT_THEME || a.getAttribute("title") == title)?true:false;
+ a.disabled = (profiled)?false:true;
+ }else{
+ a.disabled = (a.getAttribute("title") == title)?false:true;
+ }
+ }else{
+ a.disabled = (a.getAttribute("title") == title)?false:true;
+ }
}
}
createCookie("style", title, 365);
-}
+} // end method switchTheme(title)
/* change the active (preferred) stylesheet to the selected one and save it */
function switchThemeSelect(selBox){
var selIndex= selBox.selectedIndex; // get the selected index
@@ -55,6 +94,19 @@
}
}
}
+function initASwitcher(themeSwitcherA,seperator){
+ var select = $(themeSwitcherA); // get the object where we want to insert the response
+ var output = "";// initialize output object
+ var themes = aviableThemes(); // get all aviable themes
+ var tempTheme = themes.split(';'); // get an array out of the themes
+ for(var xi=0;xi < tempTheme.length;xi++) {
+ if (tempTheme[xi].length>1){
+ output=output+"<a href=\"javascript:switchTheme('"+tempTheme[xi]+"')\">"+tempTheme[xi]+"</a>"+seperator; // add the theme to an a object
+ }
+ }
+ var response = output.substring(0, output.lastIndexOf(seperator)); // clean the output trailing seperator
+ $(select).innerHTML=response; // set the response
+}
function aviableThemes(){
var currentTheme;
var themes="";
@@ -76,6 +128,24 @@
}
}
}
+ var styleElements= document.getElementsByTagName("style");
+ for(var i = 0; i <styleElements.length; i++) {
+ var a = styleElements[i];
+ if (a.getAttribute("media") == "screen" && a.getAttribute("title")) {
+ currentTheme=a.getAttribute("title");
+ var tempTheme = themes.split(';');
+ var contained = false;
+ for(var xi=0;xi < tempTheme.length;xi++) {
+ var theme = tempTheme[xi];
+ if (theme==currentTheme){
+ contained=true;
+ }
+ }
+ if (contained==false){
+ themes=themes+currentTheme+";";
+ }
+ }
+ }
return themes;
}
@@ -96,8 +166,14 @@
}
return null;
}
-function initBrandingThemeSwitcher(){
- var cookie = readCookie("style");
- switchTheme((cookie)?cookie:'default');
+function initBrandingThemeSwitcher(defaultTheme,profilerActivated){
+ THEME_SWITCHER_PROFILING=profilerActivated;
+ THEME_SWITCHER_DEFAULT_THEME=defaultTheme;
+ var cookie = readCookie("style");
+ switchTheme((cookie)?cookie:defaultTheme);
+}
+//FIXME: Extract the following method to a helper class
+function startsWith(st, pref)
+{
+ return( (pref.length > 0) && (st.substring(0, pref.length) == pref) );
}
-initBrandingThemeSwitcher();