forrest-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From thors...@apache.org
Subject 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
Date Tue, 01 Nov 2005 14:16:17 GMT
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">&#160;</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();



Mime
View raw message