Skip to content

Commit

Permalink
ID, classes and html5 data attr options.
Browse files Browse the repository at this point in the history 
And some house cleaning. Closes #21 and closes #22.
  • Loading branch information
@mhulse
mhulse committed Jun 25, 2014
1 parent f959937 commit 7aa9992
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 190 deletions.
173 changes: 78 additions & 95 deletions build/src/jquery.harmonia.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
/**
* Function-level strict mode syntax.
*
* @see rgne.ws/XcZgn8
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode
*/

'use strict';
Expand All @@ -30,7 +30,7 @@
/**
* Javascript console.
*
* @see rgne.ws/12p2bvl
* @see http://www.paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
*/

var console = window.console || { log : $.noop, warn : $.noop },
Expand All @@ -41,17 +41,37 @@
* The plugin namespace.
*/

NS = 'harmonia', // The plugin namespace.
NS = 'harmonia',

//----------------------------------
//--------------------------------------------------------------------------
//
// Defaults/settings:
//
//--------------------------------------------------------------------------

/**
* Settings object.
* Public defaults.
*
* @type { object }
*/

settings = {}, // Initialize settings object.
defaults = {

currentPage : false, // Select the current page?
optionDefault : 'Choose...', // Default option for `<select>`.
openTab : false, // Open link in new tab? Default is current window.
classSelect : NS + '-select', // Class name for `<select>`.
classInit : NS + '-js-enabled', // Target menu.
idSelect : '', // ID name for `<select>`.

// Callbacks:

onInit : $.noop, // After plugin data initialized.
onAfterInit : $.noop, // After plugin initialization.
onAddOption : $.noop, // Called when a new option has been added.
onChange : $.noop // Called when `<select>` changes.

}, // defaults.external

//--------------------------------------------------------------------------
//
Expand All @@ -71,12 +91,12 @@
* Init constructor.
*
* @type { function }
* @param { object } opts Options object literal.
* @param { object } options Options object literal.
* @this { object.jquery }
* @return { object.jquery } Returns target object(s) for chaining purposes.
*/

init : function(opts) {
init : function(options) {

//----------------------------------
// Loop & return each this:
Expand All @@ -85,14 +105,12 @@
return this.each(function() {

//----------------------------------
// Declare/initialize:
// Declare, hoist and initialize:
//----------------------------------

var $this = $(this), // Target object.
data = $this.data(NS), // Namespace instance data.
options,
$hrefs,
$select;
settings; // Settings object.

//----------------------------------
// Data?
Expand All @@ -104,22 +122,20 @@
// Initialize:
//----------------------------------

options = $.extend({}, settings.external, $.fn[NS].defaults, opts); // Merge settings, defaults and opts.
$hrefs = $this.find('> li > a');
$select = $('<select>', { 'class' : options.selectClass });
settings = $.extend(true, {}, defaults, $.fn[NS].defaults, options, $this.data(NS + 'Options')); // Recursively merge defaults, options and HTML5 `data-` attribute options.

//----------------------------------
// Namespaced instance data:
//----------------------------------

$this.data(NS, {

hrefs : $hrefs,
init : false,
matched : false,
options : options,
select : $select,
target : $this
init : false,
settings : settings,
target : $this,
matched : false,
hrefs : $this.find('> li > a'),
select : $('<select>', { 'class' : settings.classSelect })

});

Expand Down Expand Up @@ -149,9 +165,7 @@
// Ouch!
//----------------------------------

console.warn('jQuery.' + NS, 'thinks it\'s already initialized on', this);

//return this; // Needed?
console.warn('jQuery.%s thinks it\'s already initialized on %o.', NS, this);

}

Expand All @@ -178,7 +192,7 @@
return this.each(function() {

//----------------------------------
// Declare/initialize:
// Declare, hoist and initialize:
//----------------------------------

var $this = $(this),
Expand All @@ -190,23 +204,17 @@

if (data) {

//----------------------------------
// Local variable(s):
//----------------------------------

//var options = data.options;

//----------------------------------
// Remove root menu CSS class:
//----------------------------------

$this.removeClass(settings.internal.initClass);
$this.removeClass(data.settings.classInit);

//----------------------------------
// Remove generated HTML:
//----------------------------------

data.select.remove(); // All bound events and jQuery data associated with the elements are removed: rgne.ws/LqMnF5
data.select.remove(); // All bound events and jQuery data associated with the elements are removed: http://api.jquery.com/remove/

//----------------------------------
// Namespaced instance data:
Expand Down Expand Up @@ -239,7 +247,7 @@
_main = function(data) {

//----------------------------------
// Declare:
// Declare, hoist and initialize:
//----------------------------------

var $default;
Expand Down Expand Up @@ -274,7 +282,7 @@
// Callback:
//----------------------------------

data.options.onInit.call(data.target);
data.settings.onInit.call(data.target);

//----------------------------------
// Check for object(s):
Expand All @@ -286,19 +294,33 @@
// Root menu CSS class:
//----------------------------------

data.target.addClass(settings.internal.initClass);
data.target.addClass(data.settings.classInit);

//----------------------------------
// Is there a `<select>` ID?
//----------------------------------

if (data.settings.idSelect.length) {

//----------------------------------
// Apply to `<select>`:
//----------------------------------

data.select.attr('id', data.settings.idSelect);

}

//----------------------------------
// Default `<select>` `<option>`?
//----------------------------------

if (data.options.defaultOption) {
if (data.settings.optionDefault) {

//----------------------------------
// Get the `<option>`:
//----------------------------------

$default = _optionize.call(data.target, $('<a />'), data.options.defaultOption);
$default = _optionize.call(data.target, $('<a />'), data.settings.optionDefault);

//----------------------------------
// Append `<option>` to `<select>`:
Expand All @@ -319,7 +341,7 @@
data.hrefs.each(function() {

//----------------------------------
// Declare/initialize:
// Declare, hoist and initialize:
//----------------------------------

var $option = _optionize.call(data.target, $(this)); // Get the `<option>`.
Expand All @@ -343,7 +365,7 @@
data.select.change(function() {

//----------------------------------
// Declare/initialize:
// Declare, hoist and initialize:
//----------------------------------

var $this = $(this),
Expand All @@ -353,7 +375,7 @@
// Callback:
//----------------------------------

data.options.onChange.call(data.target, $this); // @TODO: Is this the best spot for this?
data.settings.onChange.call(data.target, $this); // @TODO: Is this the best spot for this?

//----------------------------------
// Get link value:
Expand All @@ -371,13 +393,13 @@
// Ignore default `<select>`:
//----------------------------------

if (val !== data.options.defaultOption) {
if (val !== data.settings.optionDefault) {

//----------------------------------
// Open tab or use current window:
//----------------------------------

if (data.options.openTab) {
if (data.settings.openTab) {

window.open(val); // New tab.

Expand All @@ -403,15 +425,15 @@
// Callback:
//----------------------------------

data.options.onAfterInit.call(data.target);
data.settings.onAfterInit.call(data.target);

} else {

//----------------------------------
// Problemos:
//----------------------------------

console.warn('jQuery.' + NS, 'thinks there\'s a problem with your markup');
console.warn('jQuery.%s there\'s a problem with your markup', NS);

}

Expand All @@ -435,7 +457,7 @@
_optionize = function($a, text) {

//----------------------------------
// Declare/initialize:
// Declare, hoist and initialize:
//----------------------------------

var $return = '',
Expand Down Expand Up @@ -486,7 +508,7 @@

selected = true; // Yup. Force selected.

} else if (data.options.currentPage) {
} else if (data.settings.currentPage) {

//----------------------------------
// Ignore hashes and compare URLs:
Expand All @@ -505,7 +527,7 @@
// Compare directly or indexOf():
//----------------------------------

if ((href == ahref) || (href.indexOf(ahref) != -1)) { // rgne.ws/XypNhG
if ((href == ahref) || (href.indexOf(ahref) != -1)) { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

selected = true;

Expand Down Expand Up @@ -565,7 +587,7 @@
// Callback:
//----------------------------------

data.options.onAddOption.call(this, $return);
data.settings.onAddOption.call(this, $return);

//----------------------------------
// Return `<option>` or nothing:
Expand Down Expand Up @@ -620,64 +642,25 @@

} else {

$.error('jQuery.' + NS + ' thinks that ' + method + ' doesn\'t exist'); // Should I override? rgne.ws/MwgkP8
$.error('jQuery.' + NS + ' thinks that ' + method + ' doesn\'t exist');

}

}; // $.fn[NS]

//--------------------------------------------------------------------------
//
// Defaults and settings:
//
//--------------------------------------------------------------------------

/**
* Private settings.
*
* @private
* @type { object }
*/

settings.internal = {

initClass : NS + '-js-enabled' // Target menu.

}; // settings.internal

//----------------------------------

/**
* Public settings.
* Public defaults.
*
* @type { object }
*/

settings.external = {

currentPage : false, // Select the current page?
defaultOption : 'Choose...', // Default option for `<select>`.
openTab : false, // Open link in new tab? Default is current window.
selectClass : NS + '-select', // Class name for `<select>`.
selectId : false, // ID name for `<select>`.

// Callbacks:

onInit : $.noop, // After plugin data initialized.
onAfterInit : $.noop, // After plugin initialization.
onAddOption : $.noop, // Called when a new option has been added.
onChange : $.noop // Called when `<select>` changes.

}; // settings.external

//----------------------------------

/**
* Assign defaults to external.
* Example:
* $.fn.harmonia.defaults.idSelect = 'foo';
*
* @see http://stackoverflow.com/questions/11306375/plugin-authoring-how-to-allow-myplugin-defaults-key-value
*
* @type { object }
*/

$.fn[NS].defaults = settings.external; // rgne.ws/Mxifnq
$.fn[NS].defaults = defaults;

}(jQuery, window, document));
Loading

0 comments on commit 7aa9992

Please sign in to comment.