1/* ---------------------------------------------------------------------- */ 2/* Style Switcher 3/* ---------------------------------------------------------------------- */ 4 5var enable_switcher = false; 6 7jQuery(document).ready(function($) { 8 9 if (enable_switcher) { 10 11 var currentColor1 = getCookie("cookie_color1"), 12 currentColor2 = getCookie("cookie_color2"), 13 currentBgPalette = getCookie("cookie_bg_palette"), 14 enableStickyMenu = getCookie("cookie_enable_sm"), 15 stickyMenuTouchscreen = getCookie("cookie_enable_sm_ts"); 16 17 if (currentColor1) { $('#main-color1').attr('href', 'css/main_color1/' + currentColor1 + '.css'); } 18 else { currentColor1 = 'olive'; } 19 if (currentColor2) { $('#main-color2').attr('href', 'css/main_color2/' + currentColor2 + '.css'); } 20 else { currentColor2 = 'red'; } 21 if (currentBgPalette) { $('#main-bg-scheme').attr('href', 'css/main_bg/' + currentBgPalette + '.css'); } 22 else { currentBgPalette = 'green'; } 23 if (enableStickyMenu) { enable_sticky_menu = (enableStickyMenu == 'true') ? true : false; } 24 if (stickyMenuTouchscreen) { sticky_menu_touchscreen = (stickyMenuTouchscreen == 'true') ? true : false; } 25 26 var $switcher = $('<div id="style-switcher"> \ 27 <span class="toggle-button"></span> \ 28 <h5>Picked Color Schemes</h5> \ 29 <ul id="sw-color-schemes" class="thumbs clearfix"> \ 30 <li><a href="#" title="Olive + Red + Green Background"> \ 31 <div data-sm="color1-sm" class="color1-olive"></div> \ 32 <div data-sm="color2-sm" class="color2-red"></div> \ 33 <div data-sm="bg-sm" class="palette-green"></div> \ 34 </a></li> \ 35 <li><a href="#" title="Beige + Red + Brown Background"> \ 36 <div data-sm="color1-sm" class="color1-beige"></div> \ 37 <div data-sm="color2-sm" class="color2-red"></div> \ 38 <div data-sm="bg-sm" class="palette-brown"></div> \ 39 </a></li> \ 40 <li><a href="#" title="Brown + Orange + Brown Background"> \ 41 <div data-sm="color1-sm" class="color1-brown"></div> \ 42 <div data-sm="color2-sm" class="color2-orange"></div> \ 43 <div data-sm="bg-sm" class="palette-brown"></div> \ 44 </a></li> \ 45 <li><a href="#" title="Rust + Red + Red Background"> \ 46 <div data-sm="color1-sm" class="color1-rust"></div> \ 47 <div data-sm="color2-sm" class="color2-red"></div> \ 48 <div data-sm="bg-sm" class="palette-red"></div> \ 49 </a></li> \ 50 <li><a href="#" title="Copper Rose + Pink + Red Background"> \ 51 <div data-sm="color1-sm" class="color1-copper-rose"></div> \ 52 <div data-sm="color2-sm" class="color2-pink"></div> \ 53 <div data-sm="bg-sm" class="palette-red"></div> \ 54 </a></li> \ 55 <li><a href="#" title="Violet + Red + Blue Background"> \ 56 <div data-sm="color1-sm" class="color1-violet"></div> \ 57 <div data-sm="color2-sm" class="color2-red"></div> \ 58 <div data-sm="bg-sm" class="palette-blue"></div> \ 59 </a></li> \ 60 <li><a href="#" title="Blue + Red + Blue Background"> \ 61 <div data-sm="color1-sm" class="color1-blue"></div> \ 62 <div data-sm="color2-sm" class="color2-red"></div> \ 63 <div data-sm="bg-sm" class="palette-blue"></div> \ 64 </a></li> \ 65 <li><a href="#" title="Navy + Orange + Blue Background"> \ 66 <div data-sm="color1-sm" class="color1-navy"></div> \ 67 <div data-sm="color2-sm" class="color2-orange"></div> \ 68 <div data-sm="bg-sm" class="palette-blue"></div> \ 69 </a></li> \ 70 <li><a href="#" title="Navy + Dark Yellow + Blue Background"> \ 71 <div data-sm="color1-sm" class="color1-navy"></div> \ 72 <div data-sm="color2-sm" class="color2-dark-yellow"></div> \ 73 <div data-sm="bg-sm" class="palette-blue"></div> \ 74 </a></li> \ 75 <li><a href="#" title="Light Blue + Red + Blue Background"> \ 76 <div data-sm="color1-sm" class="color1-light-blue"></div> \ 77 <div data-sm="color2-sm" class="color2-red"></div> \ 78 <div data-sm="bg-sm" class="palette-blue"></div> \ 79 </a></li> \ 80 <li>
80<a href="#" title="Sea Green + Pink + Blue Background"> \ 81 <div data-sm="color1-sm" class="color1-sea-green"></div> \ 82 <div data-sm="color2-sm" class="color2-pink"></div> \ 83 <div data-sm="bg-sm" class="palette-blue"></div> \ 84 </a></li> \ 85 <li><a href="#" title="Green + Red + Green Background"> \ 86 <div data-sm="color1-sm" class="color1-green"></div> \ 87 <div data-sm="color2-sm" class="color2-red"></div> \ 88 <div data-sm="bg-sm" class="palette-green"></div> \ 89 </a></li> \ 90 </ul> \ 91 <h5>Main Color 1</h5> \ 92 <ul id="sw-color1" class="thumbs clearfix"> \ 93 <li><a href="#" title="Color 1: Olive"> \ 94 <div data-sm="color1-sm" class="color1-olive"></div> \ 95 </a></li> \ 96 <li><a href="#" title="Color 1: Beige"> \ 97 <div data-sm="color1-sm" class="color1-beige"></div> \ 98 </a></li> \ 99 <li><a href="#" title="Color 1: Brown"> \ 100 <div data-sm="color1-sm" class="color1-brown"></div> \ 101 </a></li> \ 102 <li><a href="#" title="Color 1: Rust"> \ 103 <div data-sm="color1-sm" class="color1-rust"></div> \ 104 </a></li> \ 105 <li><a href="#" title="Color 1: Copper Rose"> \ 106 <div data-sm="color1-sm" class="color1-copper-rose"></div> \ 107 </a></li> \ 108 <li><a href="#" title="Color 1: Maroon"> \ 109 <div data-sm="color1-sm" class="color1-maroon"></div> \ 110 </a></li> \ 111 <li><a href="#" title="Color 1: Violet"> \ 112 <div data-sm="color1-sm" class="color1-violet"></div> \ 113 </a></li> \ 114 <li><a href="#" title="Color 1: Blue"> \ 115 <div data-sm="color1-sm" class="color1-blue"></div> \ 116 </a></li> \ 117 <li><a href="#" title="Color 1: Navy"> \ 118 <div data-sm="color1-sm" class="color1-navy"></div> \ 119 </a></li> \ 120 <li><a href="#" title="Color 1: Light Blue"> \ 121 <div data-sm="color1-sm" class="color1-light-blue"></div> \ 122 </a></li> \ 123 <li><a href="#" title="Color 1: Sea Green"> \ 124 <div data-sm="color1-sm" class="color1-sea-green"></div> \ 125 </a></li> \ 126 <li><a href="#" title="Color 1: Irish Green"> \ 127 <div data-sm="color1-sm" class="color1-irish-green"></div> \ 128 </a></li> \ 129 <li><a href="#" title="Color 1: Green"> \ 130 <div data-sm="color1-sm" class="color1-green"></div> \ 131 </a></li> \ 132 </ul> \ 133 <h5>Main Color 2</h5> \ 134 <ul id="sw-color2" class="thumbs clearfix"> \ 135 <li><a href="#" title="Color 2: Red"> \ 136 <div data-sm="color2-sm" class="color2-red"></div> \ 137 </a></li> \ 138 <li><a href="#" title="Color 2: Orange"> \ 139 <div data-sm="color2-sm" class="color2-orange"></div> \ 140 </a></li> \ 141 <li><a href="#" title="Color 2: Dark Yellow"> \ 142 <div data-sm="color2-sm" class="color2-dark-yellow"></div> \ 143 </a></li> \ 144 <li><a href="#" title="Color 2: Pink"> \ 145 <div data-sm="color2-sm" class="color2-pink"></div> \ 146 </a></li> \ 147 </ul> \ 148 <h5>Main Background</h5> \ 149 <ul id="sw-bg-palettes" class="thumbs clearfix mb-10px"> \ 150 <li><a href="#" title="Green Background"> \ 151 <div data-sm="bg-sm" class="palette-green"></div> \ 152 </a></li> \ 153 <li><a href="#" title="Blue Background"> \ 154 <div data-sm="bg-sm" class="palette-blue"></div> \ 155 </a></li> \ 156 <li><a href="#" title="Red Background"> \ 157 <div data-sm="bg-sm" class="palette-red"></div> \ 158 </a></li> \ 159 <li><a href="#" title="Brown Background"> \ 160 <div data-sm="bg-sm" class="palette-brown"></div> \ 161 </a></li> \ 162 </ul> \ 163 <h5>Fixed (sticky) menu:</h5> \ 164 <div class="checkbox-fields"> \ 165 <input name="sm-enabled" type="checkbox" id="sticky-menu-mode"> \ 166 <label for="sm-enabled">enable</label> \ 167 <input name="sm-enabled-ts" type="checkbox" id="sticky-menu-mode-ts"> \ 168 <label for="sm-enabled-ts">also enable on touch screens</label> \ 169 </div> \ 170 <a href="#" id="reset">Reset styles</a> \ 171 </div>'); 172 $switcher.insertAfter('#footer-bottom'); 173 174 $switcher.find('#sw-color1 [data-sm="color1-sm"].color1-' + currentColor1).parent().addClass('active'); 175 $switcher.find('#sw-color2 [data-sm="color2-sm"].color2-' + currentColor2).parent().addClass('active'); 176 $switcher.find('#sw-bg-palettes [data-sm="bg-sm"].palette-' + currentBgPalette).parent().addClass('active'); 177 178 if (enable_sticky_menu ) { $('#sticky-menu-mode').prop('checked', true); } 179 else { $('#sticky-menu-mode-ts').prop('disabled', true); } 180 if (sticky_menu_touchscreen) { $('#sticky-menu-mode-ts').prop('checked', true); } 181 182 $switcher.find('.toggle-button').click(function() { 183 if ($switcher.css('left') === '-335px') { 184 $switcher.animate({left: '0px'}); 185 } else { 186 $switcher.animate({left: '-335px'}); 187 } 188 return false;
189 }); 190 191 // Check color scheme 192 function checkColorScheme() { 193 $switcher.find('#sw-color-schemes li').each(function() { 194 var color1Name = $('a [data-sm="color1-sm"]', this).attr('class').substr(7), 195 color2Name = $('a [data-sm="color2-sm"]', this).attr('class').substr(7), 196 bgPaletteName = $('a [data-sm="bg-sm"]', this).attr('class').substr(8); 197 198 if (color1Name == currentColor1 && color2Name == currentColor2 && bgPaletteName == currentBgPalette) { 199 $('a', this).addClass('active'); 200 } else { 201 $('a', this).removeClass('active'); 202 } 203 }); 204 } 205 checkColorScheme(); 206 207 // Change color scheme 208 $switcher.find('#sw-color-schemes li a').click(function() { 209 var color1Name = $('[data-sm="color1-sm"]', this).attr('class').substr(7), 210 color2Name = $('[data-sm="color2-sm"]', this).attr('class').substr(7), 211 bgPaletteName = $('[data-sm="bg-sm"]', this).attr('class').substr(8), 212 color1Button = $switcher.find('#sw-color1 [data-sm="color1-sm"].color1-' + color1Name).parent(), 213 color2Button = $switcher.find('#sw-color2 [data-sm="color2-sm"].color2-' + color2Name).parent(), 214 bgPaletteButton = $switcher.find('#sw-bg-palettes [data-sm="bg-sm"].palette-' + bgPaletteName).parent(); 215 216 changeMainColor1(color1Button); 217 changeMainColor2(color2Button); 218 changeMainBg(bgPaletteButton); 219 $(this).parent().siblings().find('a').removeClass('active'); 220 $(this).addClass('active'); 221 return false; 222 }); 223 224 // Change main color 1 225 $switcher.find('#sw-color1 li a').click(function() { 226 changeMainColor1(this); 227 checkColorScheme(); 228 return false; 229 }); 230 231 function changeMainColor1(a) { 232 currentColor1 = $('[data-sm="color1-sm"]', a).attr('class').substr(7); 233 $('#main-color1' ).attr('href', 'css/main_color1/' + currentColor1 + '.css'); 234 $(a).parent().siblings().find('a').removeClass('active'); 235 $(a).addClass('active'); 236 changeCookies(); 237 } 238 239 // Change main color 2 240 $switcher.find('#sw-color2 li a').click(function() { 241 changeMainColor2(this); 242 checkColorScheme(); 243 return false; 244 }); 245 246 function changeMainColor2(a) { 247 currentColor2 = $('[data-sm="color2-sm"]', a).attr('class').substr(7); 248 $('#main-color2' ).attr('href', 'css/main_color2/' + currentColor2 + '.css'); 249 $(a).parent().siblings().find('a').removeClass('active'); 250 $(a).addClass('active'); 251 changeCookies(); 252 } 253 254 // Change main background 255 $switcher.find('#sw-bg-palettes li a').click(function() { 256 changeMainBg(this); 257 checkColorScheme(); 258 return false; 259 }); 260 261 function changeMainBg(a) { 262 currentBgPalette = $('[data-sm="bg-sm"]', a).attr('class').substr(8); 263 $('#main-bg-scheme' ).attr('href', 'css/main_bg/' + currentBgPalette + '.css'); 264 $(a).parent().siblings().find('a').removeClass('active'); 265 $(a).addClass('active'); 266 changeCookies(); 267 } 268 269 $('#sticky-menu-mode').change(function() { 270 if ($(this).is(':checked')) { 271 enable_sticky_menu = true; 272 $('#sticky-menu-mode-ts').prop('disabled', false); 273 adjustStickyMenu(); 274 } else { 275 enable_sticky_menu = false; 276 $('#sticky-menu-mode-ts').prop('disabled', true); 277 if ($('body').hasClass('sticky-menu-active')) { 278 $('body').removeClass('sticky-menu-active').css('padding-top', 0); 279 $('#logo').off('click'); 280 $('#header').css('top', ''); 281 } 282 } 283 changeCookies(); 284 }); 285 286 $('#sticky-menu-mode-ts').change(function() { 287 if ($(this).is(':checked')) { 288 sticky_menu_touchscreen = true; 289 adjustStickyMenu(); 290 } else { 291 sticky_menu_touchscreen = false; 292 if (isTouchScreenDevice && $('body').hasClass('sticky-menu-active')) { 293 $('body').removeClass('sticky-menu-active').css('padding-top', 0); 294 $('#logo').off('click'); 295 $('#header').css('top', ''); 296 } 297 } 298 changeCookies(); 299 }); 300 301 // Reset settings 302 $switcher.find('#reset').click(function() { 303 $('#main-color1').attr('href', 'css/main_color1/olive.css'); 304 $('#main-color2').attr('href', 'css/main_color2/red.css'); 305 $('#main-bg-scheme').attr('href', 'css/main_bg/green.css'); 306 307 $switcher.find('#sw-color1 li a').removeClass('active').find('.color1-olive').parent().addClass('active'); 308 $switcher.find('#sw-color2 li a').removeClass('active').find('.color2-red').parent().addClass('active'); 309 $switcher.find('#sw-bg-palettes li a').removeClass('active').find('.palette-green').parent().addClass('active'); 310 311 currentColor1 = 'olive'; 312 currentColor2 = 'red'; 313 currentBgPalette = 'green'; 314 enable_sticky_menu = false;
315 sticky_menu_touchscreen = true; 316 checkColorScheme(); 317 318 $('#sticky-menu-mode').prop('checked', false); 319 $('#sticky-menu-mode-ts').prop('checked', true); 320 $('#sticky-menu-mode-ts').prop('disabled', true); 321 if ($('body').hasClass('sticky-menu-active')) { 322 $('body').removeClass('sticky-menu-active').css('padding-top', 0); 323 $('#logo').off('click'); 324 $('#header').css('top', ''); 325 } 326 327 deleteCookie("cookie_color1", "/"); 328 deleteCookie("cookie_color2", "/"); 329 deleteCookie("cookie_bg_palette", "/"); 330 deleteCookie("cookie_enable_sm", "/"); 331 deleteCookie("cookie_enable_sm_ts", "/"); 332 333 return false; 334 }); 335 336 // Change cookies 337 function changeCookies() { 338 var expiry = new Date(); 339 expiry.setTime(expiry.getTime() + 30*60*1000); 340 setCookie("cookie_color1", currentColor1, expiry.toGMTString(), "/"); 341 setCookie("cookie_color2", currentColor2, expiry.toGMTString(), "/"); 342 setCookie("cookie_bg_palette", currentBgPalette, expiry.toGMTString(), "/"); 343 setCookie("cookie_enable_sm", enable_sticky_menu.toString(), expiry.toGMTString(), "/"); 344 setCookie("cookie_enable_sm_ts", sticky_menu_touchscreen.toString(), expiry.toGMTString(), "/"); 345 } 346 347 } 348 349}); 350 351function setCookie (name, value, expires, path, domain, secure) { 352 document.cookie = name + "=" + escape(value) + 353 (expires ? "; expires=" + expires : "") + 354 (path ? "; path=" + path : "") + 355 (domain ? "; domain=" + domain : "") + 356 (secure ? "; secure" : ""); 357} 358 359function getCookie(name) { 360 var prefix = name + "="; 361 var cookieStartIndex = document.cookie.indexOf(prefix); 362 if (cookieStartIndex == -1) return null; 363 var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length); 364 if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; 365 return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)); 366} 367function deleteCookie(name, path, domain) { 368 if (getCookie(name)) { 369 document.cookie = name + "=" + (path ? "; path=" + path : "") + (domain ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; 370 } 371}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.