/* http://keith-wood.name/themes.html Applying CSS themes for jQuery v1.2.0. Written by Keith Wood (kbwood{at}iinet.com.au) September 2008. Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. Please attribute the author if you use it. */ /* Apply various themes to your site. Attach the functionality with options like: $('link').themes({themes: ['cupertino', 'smoothness']}); */ (function($) { // Hide scope, no $ conflict var COOKIE_NAME = 'themeID'; /* Theme sharing manager. */ function Themes() { this.currentTheme = ''; this._uuid = new Date().getTime(); this._linkID = 'th' + this._uuid; this._defaults = { themeBase: '', // The base URL for all the theme files defaultTheme: '', // The ID of the default theme, first one if blank cookieExpiry: 0, // The expiry time for the theme cookie, date or number of days cookiePath: '/', // The path that the cookie applies to cookieDomain: '', // The domain that the cookie applies to onSelect: null // Callback on theme selection, theme ID and URL are passed as parameters }; this._settings = { themes: [], // List of theme IDs to use, empty for all icons: 'img/themes.gif', // Horizontal amalgamation of all theme icons iconSize: [23, 20], // The width and height of the individual icons previews: 'img/themes-preview.gif', // Horizontal amalgamation of all theme previews previewSize: [90, 80], // The width and height of the individual previews showPreview: true, // True to display a popup preview, false to not show it compact: true // True if a compact presentation should be used, false for full }; this._themes = { // The definitions of the available themes 'blacktie': {display: 'Black Tie', icon: 0, preview: 0, url: 'black-tie/ui.all.css'}, 'blitzer': {display: 'Blitzer', icon: 1, preview: 1, url: 'blitzer/ui.all.css'}, 'cupertino': {display: 'Cupertino', icon: 2, preview: 2, url: 'cupertino/ui.all.css'}, 'darkhive': {display: 'Dark Hive', icon: 17, preview: 17, url: 'dark-hive/ui.all.css'}, 'dotluv': {display: 'Dot Luv', icon: 3, preview: 3, url: 'dot-luv/ui.all.css'}, 'eggplant': {display: 'Eggplant', icon: 18, preview: 18, url: 'eggplant/ui.all.css'}, 'excitebike': {display: 'Excite Bike', icon: 4, preview: 4, url: 'excite-bike/ui.all.css'}, 'flick': {display: 'Flick', icon: 19, preview: 19, url: 'flick/ui.all.css'}, 'hotsneaks': {display: 'Hot Sneaks', icon: 5, preview: 5, url: 'hot-sneaks/ui.all.css'}, 'humanity': {display: 'Humanity', icon: 6, preview: 6, url: 'humanity/ui.all.css'}, 'lefrog': {display: 'Le Frog', icon: 20, preview: 20, url: 'le-frog/ui.all.css'}, 'mintchoc': {display: 'Mint Choc', icon: 7, preview: 7, url: 'mint-choc/ui.all.css'}, 'overcast': {display: 'Overcast', icon: 21, preview: 21, url: 'overcast/ui.all.css'}, 'peppergrinder': {display: 'Pepper Grinder', icon: 22, preview: 22, url: 'pepper-grinder/ui.all.css'}, 'redmond': {display: 'Redmond', icon: 8, preview: 8, url: 'redmond/ui.all.css'}, 'smoothness': {display: 'Smoothness', icon: 9, preview: 9, url: 'smoothness/ui.all.css'}, 'southstreet': {display: 'South Street', icon: 10, preview: 10, url: 'south-street/ui.all.css'}, 'start': {display: 'Start', icon: 11, preview: 11, url: 'start/ui.all.css'}, 'sunny': {display: 'Sunny', icon: 23, preview: 23, url: 'sunny/ui.all.css'}, 'swankypurse': {display: 'Swanky Purse', icon: 12, preview: 12, url: 'swanky-purse/ui.all.css'}, 'trontastic': {display: 'Trontastic', icon: 13, preview: 13, url: 'trontastic/ui.all.css'}, 'uidarkness': {display: 'UI Darkess', icon: 14, preview: 14, url: 'ui-darkness/ui.all.css'}, 'uilightness': {display: 'UI Lightness', icon: 15, preview: 15, url: 'ui-lightness/ui.all.css'}, 'vader': {display: 'Vader', icon: 16, preview: 16, url: 'vader/ui.all.css'} }; } $.extend(Themes.prototype, { /* Class name added to elements to indicate already configured with themeing. */ markerClassName: 'hasThemes', /* Override the default settings for all theme instances. @param settings (object) the new settings to use as defaults @return (Theme object) this object */ setDefaults: function(settings) { extendRemove(this._defaults, settings || {}); return this; }, /* Initialise the theme for the page. @param settings (object, optional) default settings to be used @return (Theme object) this object */ init: function(settings) { if (settings) { this.setDefaults(settings); } var search = new RegExp(COOKIE_NAME + '=([^;]*)'); var matches = search.exec(document.cookie); var themeId = (matches ? matches[1] : '') || this._defaults.defaultTheme; var firstId = ''; var found = false; for (var id in this._themes) { firstId = firstId || id; found = (themeId == id); if (found) { break; } } themeId = (found ? themeId : firstId); this._setTheme(themeId, this._themes[themeId].display, this._defaults.themeBase + this._themes[themeId].url, true); return this; }, /* Add a new theme to the list. @param id (string) the ID of the new theme @param display (string) the display name for this theme @param icon (url) the location of an icon for this theme (25x22), or (number) the index of the icon within the combined image @param preview (url) the location of a preview for this theme (105x92), or (number) the index of the preview within the combined image @param url (url) the URL for the theme definition (CSS) @return (Theme object) this object */ addTheme: function(id, display, icon, preview, url) { this._themes[id] = {display: display, icon: icon, preview: preview, url: url}; return this; }, /* Return the list of defined themes. @return (object[]) indexed by theme id (string), each object contains display (string) the display name, icon (string) the location of the icon,, or (number) the icon's index in the combined image url (string) the URL for the theme's CSS definition */ getThemes: function() { return this._themes; }, /* Attach the themeing widget to a div. @param target (element) the element to attach to @param settings (object) the settings for this element */ _attachThemes: function(target, settings) { target = $(target); if (target.hasClass(this.markerClassName)) { return; } target.addClass(this.markerClassName); this._updateTheme(target, settings); }, /* Reconfigure the settings for a theme link. @param target (element) the element to change settings for @param settings (object) the changed settings for this element */ _changeThemes: function(target, settings) { target = $(target); if (!target.hasClass(this.markerClassName)) { return; } this._updateTheme(target, settings); }, /* Construct the requested themeing links. @param target (element) the element to attach to @param settings (object) the settings for this element */ _updateTheme: function(target, settings) { settings = extendRemove($.extend({}, this._settings, this._defaults), settings); var themes = settings.themes; if (themes.length == 0) { $.each(this._themes, function(id) { themes[themes.length] = id; }); } var escape = function(value) { return value.replace(/'/, '\\\''); }; var previewId = 'th' + ++this._uuid; var html = '