Meta Issue: Convert JavaScript to Vanilla JS

[chipcullen]

As a learning exercise, I'm going to convert the Font Combinator JavaScript to Vanilla JS. This would force me to learn and use things like Object Oriented JavaScript.

Large issues / drawbacks of abandoning jQuery:

• I currently rely on several plugins that are JavaScript dependent:
  • Chosen this is the biggest problem. This creates the dropdowns that are stylable, which gives the very useful font preview for each font
  • A color picker
  • A range slider polyfill

The last one is no longer needed.

The color picker could be replaced by the Color input type, but it doesn't have support in IE or Safari.

Will break the Chosen issue into it's own issue.

[chipcullen]

If I do decide to retain jQuery, try the jQuery builder - http://projects.jga.me/jquery-builder/

[chipcullen]

The old Font Combinator file had 26 functions, outlined below:

// getURLVars - parsed set variables from the URL
// config - set default fonts , checking for URL vars
// parameterFonts - acted on the set parameters, including variants, checked for existing matches
// variantsSelectAttach - added variants dropdown, set the selected attribute if needed, styled options
// getFonts - this is a big one: removes default variants list, caches default list, adds link elements to for each font, reappends system font set, set font styling
// bit_url - call bit.ly passing link
// focusShareTextShort - just selected text in shortURL field
// hide submit button
// adding the share link
// selectText - i'm really not sure what this does
// adding controls that only work with js
// changeFonts - another biggie - responds to options changing, attaches full font, actually changes the font
// chosenAttach - added chosen to a bunch of stuff
// defaultFontChange - worked when no google fonts
// variantChange - changed font variant of target element
// font-size change
// line height change
// color change
// hiding elementst
// turned off body spellchecker
// control option change - not sure
// carousel nav - tabbing
// external links
// ajax request
// error handler
// onJSON - what to do when JSON returns
// switching controls when user clicks on an element