Javascript color select

Sorry Ninja Overlord, at the moment i have no time for developement...

EDIT:: Made additional check for cookies when we first load the addon.js. This allows us to grab the current settings so we don't overwrite them. :O oops. It's all fixed now: 9/15/08 11:30am.

EDIT: Final Change, should be ready for primetime. I added check to make sure that we have cookiedata before trying to apply it. Fixed as of 9/16/08 - 12:45pm.

To the maintainer:
Thanks for the development time that you have put into this, it really is a great theme! Here's the code changes if you want to implement them, however, they are not formatted to the likings of durpal's code format, my editor isn't setup for a Kernighan & Ritchie style; personally I hate it. :)

To others wanting this addition before he can check it in
Obviously use this code at your discretion and format it to the way that you see fit. If you are not the code maintainer, I would suggest copying the fourseasons theme directory and creating a whole new theme to test with and run under it. I created a new theme called 'customfourseasons' for my testing. Also attached is the 'customfourseasons' theme zipped up and attached to this issue. The reason it's a separate theme is so when the maintainer updates his theme you can check to see if he added this ability and get it or continue with this one until he ready to check it in. Please test this out for the maintainer, the sooner he knows the code works, the sooner he can commit it.

Files changed(3):
.info
template.php
page.tpl.php

Files added(1):
addon.js

Step 1

First I created a additional javascript file ('addon.js'), we'll change the info file in a second, that contains function calls to create a cookie called 'fourseasons' on the users machine. It is set to expire in 365 days from the point it's last changed. Here's the code for the addon.js:

var cookiename = 'fourseasons';
var usercolor = '';
var usersize = '';

function saveColor( newUserColor )
{
  usercolor = newUserColor;
  changeCookieValues();
}

function saveSize( newUserSize )
{
  usersize = newUserSize;
  changeCookieValues();
}

function changeCookieValues()
{
  // Build our values;
  var values = escape( 'usercolor='+usercolor+'|usersize='+usersize );

  // Build our expiration date.
  var date = new Date();
  date.setTime( date.getTime() + (365*24*60*60*1000) );

  var expires = "; expires="+date.toGMTString();

  // Set our cookie.
  document.cookie = cookiename+"="+values+expires+"; path=/";
}

function getCookieValues()
{
  var cookiedata = document.cookie.match ( '(' + cookiename + '=)([^;]*)(;|$)' );
  if ( cookiedata )
  {
    var parts = unescape( cookiedata[2] ).split('|') ;
    usercolor = parts[0].split('=')[1];
    usersize = parts[1].split('=')[1];
  }
}

getCookieValues();

Step 2

Next edit the .info file and add a line after the regions, add this line:
scripts[] = addon.js

Step 3

Now we will create the methods to call in order to 'create' the cookie. Since the user can always select the default, I didn't build a way to delete the cookie. Open up template.php, go to line 84, this should be the start of the toggle_style hrefs. If not, find the function 'fourseasons_adminwidget' and find the line containing the output for the href anchors in that function.
Add the 'saveColor( this color )' call to the onclick:
Before: <a href="#" style="background-color:#FF9900;" onclick="toggle_style(\'#FF9900\');></a>
After: <a href="#" style="background-color:#FF9900;" onclick="toggle_style(\'#FF9900\');saveColor(\'#FF9900\');"></a>

Repeat for all the lines that change the color.

Step 4

Directly below the last lines you altered, find the onclick properties for the font-size changes. Add the 'saveSize( this size )' call to the onclick, just as before:
Before: <a href="#" onclick="$(\'body\').css(\'font-size\',\'60%\');">60%</a>
After: <a href="#" onclick="$(\'body\').css(\'font-size\',\'60%\');saveSize(\'60%\');">60%</a>

Step 5

Now we need to 'read' from the cookie we previously saved to BEFORE the document is rendered, this will allow us to change the colors before it loads and not after; creating a much more professional and cleaner look.
In the same file, 'template.php', we are going to add two theme functions, add the very bottom of the page, add the following lines of code:

function theme_cookie_is_set()
{
   if ( isset( $_COOKIE["fourseasons"] ) )
   {
      return true;
   } else {
      return false;
   }
}


function theme_get_cookie_setting( $setting )
{
   $valStr = urldecode( $_COOKIE["fourseasons"] );

   $parts = explode( "|", $valStr );

   $userColor = explode( "=", $parts[0] );
   $userSize = explode( "=", $parts[1] );

   if ( $setting == "color" )
   {
      return $userColor[1];
   } else if ( $setting == "size" ) {
      return $userSize[1];
   }
}

The first function checks to see if the cookie is set and returns true if it is or false if it isn't, this way we don't have any crashing code from us trying to get a cookie that's not set. The second function will allow is to ask for the user setting using two strings for now, 'color' and 'size'. In the future, the maintainer might want to add additional user settings without having to create additional cookies.

Step 6

We need to alter the page.tpl.php template so we can display the color and size that the user selected.
Replace the following lines:

#header-image { background-color: <?php print theme_get_setting('fourseasons_basecolor') ?>; <?php if(theme_get_setting('fourseasons_basecolor') != '#FF9900') print 'background-image:none;' ?> }                                                                            
h1, h2, h3, h4, h5, #headline a { color: <?php print theme_get_setting('fourseasons_basecolor') ?>; }

With this:

    <?php if ( theme_cookie_is_set() != false ) { ?>
      /** get our color settings **/
      <?php if ( theme_get_cookie_setting('color') ) { ?>
        #header-image { background-color: <?php print theme_get_cookie_setting('color') ?>; <?php if( theme_get_cookie_setting('color') != '#FF9900') print 'background-image:none;' ?> }                                                                                           
        h1, h2, h3, h4, h5, #headline a { color: <?php print theme_get_cookie_setting('color') ?>; }                                                                                                                                                                                
      <?php } ?>
      <?php if ( theme_get_cookie_setting('size') ) { ?>
        body { font-size: <?php print theme_get_cookie_setting('size') ?>; }
      <?php } ?>
    <?php } else { ?>
      #header-image { background-color: <?php print theme_get_setting('fourseasons_basecolor') ?>; <?php if(theme_get_setting('fourseasons_basecolor') != '#FF9900') print 'background-image:none;' ?> }                                                                            
      h1, h2, h3, h4, h5, #headline a { color: <?php print theme_get_setting('fourseasons_basecolor') ?>; }                                                                                                                                                                         
    <?php }  ?>

What we are doing here is checking if the cookie is set, if it is, then ask for the 'color' and 'size' settings from the cookie. The genius part is if there isn't a setting, it will use the default setting in the css or the browser, but once the user chooses one, it will be in the cookie until the cookie expires or the user chooses a different choice.

Wow, thanks dkleehammer for posting this. I hope there will be some feedback on this. I'm open to implement this in the next version of fourseasons.

No problem at all. ;)

Feel free to contact me with any issues that may show up. I've had it up and running in my test site without fail on IE6, IE7, FF3, Safari 3, and Google Chrome.

I would like to know if these changes may be applied to 5.18 version as well...

I've created the 5.x version as well, it was generously sponsored by the user enli, first name Enrico.

He said it was working great, can someone else confirm that it's 100% ready for production environment?

I'm using the customfourseasons at http://www.vflfooty.com/ (for Drupal 6) and its working beautifully for me. Thanks to all those involved with the theme and the modified version.

Thanks for the code, but it doesn't work well when page caching is enabled (and visitor has not logged in). In this case, if a page has already been cached, it'll be presented to the visitor directly from the cache, i.e. the code in page.tpl.php that updates the color and font size settings according to the cookie wouldn't be able to alter such a page from the cache. The result is that colors and font sizes might vary from page to page. I've tested this with Drupal 6.x, but this could presumably affect Drupal 5.x as well.

This solution is great! It works fine! But I can report, that it don't work in combination with Boost module, because Boost cache the pages in html. This is just side effect for users running boost caching :)

Works great!

Thanks heaps,

Works for me, although I forgot to clear the cache and didn't understand why it wasn't working. Remember - flush the cache :-)