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();
