3.26.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. $(document).ready(function() {
  2. // Enable hover effect on the style switcher
  3. $('#switcher').hover(function() {
  4. $(this).addClass('hover');
  5. }, function() {
  6. $(this).removeClass('hover');
  7. });
  8. // Allow the style switcher to expand and collapse.
  9. var toggleSwitcher = function(event) {
  10. if (!$(event.target).is('button')) {
  11. $('#switcher button').toggleClass('hidden');
  12. }
  13. };
  14. $('#switcher').on('click', toggleSwitcher);
  15. // Simulate a click so we start in a collaped state.
  16. $('#switcher').click();
  17. // The setBodyClass() function changes the page style.
  18. // The style switcher state is also updated.
  19. var setBodyClass = function(className) {
  20. $('body').removeClass().addClass(className);
  21. $('#switcher button').removeClass('selected');
  22. $('#switcher-' + className).addClass('selected');
  23. $('#switcher').off('click', toggleSwitcher);
  24. if (className == 'default') {
  25. $('#switcher').on('click', toggleSwitcher);
  26. }
  27. };
  28. // begin with the switcher-default button "selected"
  29. $('#switcher-default').addClass('selected');
  30. // Map key codes to their corresponding buttons to click
  31. var triggers = {
  32. D: 'default',
  33. N: 'narrow',
  34. L: 'large'
  35. };
  36. // Call setBodyClass() when a button is clicked.
  37. $('#switcher').click(function(event) {
  38. if ($(event.target).is('button')) {
  39. var bodyClass = event.target.id.split('-')[1];
  40. setBodyClass(bodyClass);
  41. }
  42. });
  43. // Call setBodyClass() when a key is pressed.
  44. $(document).keyup(function(event) {
  45. var key = String.fromCharCode(event.which);
  46. if (key in triggers) {
  47. setBodyClass(triggers[key]);
  48. }
  49. });
  50. });