learning_jquery/Chapter 3/03.js

/**
 * Something like PHP array_values().
 *
 * @param {Object} a
 * @returns {Array}
 */
function values(a) {
  "use strict";
  var result = [];
  for (var i in a) {
    if (a.hasOwnProperty(i)) {
      result.push(a[i]);
    }
  }
  return result;
}

$(document).ready(function () {
  'use strict';

  // Enable hover effect on the style switcher
  $('#switcher').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

  // Allow the style switcher to expand and collapse.
  var toggleSwitcher = function(event) {
    if (!$(event.target).is('button')) {
      $('#switcher').find('button').toggleClass('hidden');
    }
  };
  $('#switcher').on('click', toggleSwitcher);

  // Simulate a click so we start in a collapsed state.
  $('#switcher').click();

  // The setBodyClass() function changes the page style.
  // The style switcher state is also updated.
  var setBodyClass = function (className) {
    $('body').removeClass().addClass(className);

    $('#switcher').find('button').removeClass('selected');
    $('#switcher-' + className).addClass('selected');

    $('#switcher').off('click', toggleSwitcher);

    if (className === 'default') {
      $('#switcher').on('click', toggleSwitcher);
    }
  };

  // begin with the switcher-default button "selected"
  $('#switcher-default').addClass('selected');

  // Map key codes to their corresponding buttons to click
  var triggers = {
    D: 'default',
    N: 'narrow',
    L: 'large'
  };

  // Call setBodyClass() when a button is clicked.
  $('#switcher').click(function(event) {
    if ($(event.target).is('button')) {
      var bodyClass = event.target.id.split('-')[1];
      setBodyClass(bodyClass);
    }
  });

  // Call setBodyClass() when a key is pressed.
  // Use keydown/keyup to identify key, keypress to identify resulting letter.
  $(document).keyup(function (event) {
    var key = String.fromCharCode(event.which);
    if (key in triggers) {
      setBodyClass(triggers[key]);
    }
  });

  // Exercise 1.
  $('.author').click(function () {
    $(this).toggleClass('selected');
  });

  // Exercise 2.
  $('.chapter-title').dblclick(function () {
    $(this).siblings().toggleClass('hidden');
  });

  // Exercise 3.
  var triggerValues = values(triggers);
  setBodyClass('default');
  $('body').keyup(function (event) {
    if (event.which !== 39) {
      return;
    }

    // Assume the only classes are those handled by this code. Not true in the
    // general case but sufficient for the exercise.
    var currentClass = $('body').attr('class');

    var currentIndex = triggerValues.indexOf(currentClass);
    var nextIndex = (currentIndex + 1) % triggerValues.length;
    var nextClass = triggerValues[nextIndex];
    setBodyClass(nextClass);
  });

  // Exercise 4.
  var tracker = function(event) {
    console.log(event.pageX, event.pageY);
  };
  var jP = $('p');
  jP.mouseenter(function () {
    $(this).mousemove(tracker);
  }).mouseleave(function () {
    $(this).off('mousemove');
  });

  // Exercise 5.
  var trackerY = 0;
  $('html').mousedown(function (event) {
    trackerY = event.pageY;
    console.log('Pressed at ' + trackerY);
  }).mouseup(function (event) {
    console.log('Released at ' + event.pageY);
    if (event.pageY < trackerY) {
      jP.addClass('hidden');
    }
    else if (event.pageY > trackerY) {
      jP.removeClass('hidden');
    }

  });
});