Skip to content
This repository has been archived by the owner on Nov 15, 2019. It is now read-only.

Commit

Permalink
Update jQuery <details> plugin to v0.0.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathiasbynens
mathiasbynens committed Feb 8, 2012
1 parent 4687bba commit c3fbc4d
Showing 1 changed file with 154 additions and 73 deletions.
227 changes: 154 additions & 73 deletions media/i/js/builderapp.js
View file
Expand Up @@ -338,80 +338,161 @@ jQuery(function($){



/*! http://mths.be/details v0.0.4 by @mathias | includes http://mths.be/noselect v1.0.3 */
;(function(document, $) {

var proto = $.fn,
details,
// :'(
isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
// Feature test for native `<details>` support
isDetailsSupported = (function(doc) {
var el = doc.createElement('details'),
fake,
root,
diff;
if (!('open' in el)) {
return false;
}
root = doc.body || (function() {
var de = doc.documentElement;
fake = true;
return de.insertBefore(doc.createElement('body'), de.firstElementChild || de.firstChild);
}());
el.innerHTML = '<summary>a</summary>b';
el.style.display = 'block';
root.appendChild(el);
diff = el.offsetHeight;
el.open = true;
diff = diff != el.offsetHeight;
root.removeChild(el);
if (fake) {
root.parentNode.removeChild(root);
}
return diff;
}(document)),
toggleOpen = function($details, $detailsSummary, $detailsNotSummary, toggle) {
var isOpen = typeof $details.attr('open') == 'string',
close = isOpen && toggle || !isOpen && !toggle;
if (close) {
$details.removeClass('open').prop('open', false).triggerHandler('close.details');
$detailsSummary.attr('aria-expanded', false);
$detailsNotSummary.hide();
} else {
$details.addClass('open').prop('open', true).triggerHandler('open.details');
$detailsSummary.attr('aria-expanded', true);
$detailsNotSummary.show();
}
};

/* http://mths.be/noselect v1.0.3 */
proto.noSelect = function() {

// Since the string 'none' is used three times, storing it in a variable gives better results after minification
var none = 'none';

// onselectstart and ondragstart for WebKit & IE
// onmousedown for WebKit & Opera
return this.bind('selectstart dragstart mousedown', function() {
return false;
}).css({
'MozUserSelect': none,
'msUserSelect': none,
'webkitUserSelect': none,
'userSelect': none
});

};

// Execute the fallback only if there’s no native `details` support
if (isDetailsSupported) {

details = proto.details = function() {

return this.each(function() {
var $details = $(this),
$summary = $('summary', $details);
$summary.attr({
'role': 'button',
'aria-expanded': $details.prop('open')
}).on('click', function() {
// the value of the `open` property is the old value
var close = $details.prop('open');
$summary.attr('aria-expanded', !close);
$details.triggerHandler((close ? 'close' : 'open') + '.details');
});
});

};

details.support = isDetailsSupported;

} else {

details = proto.details = function() {

// Loop through all `details` elements
return this.each(function() {

// Store a reference to the current `details` element in a variable
var $details = $(this),
// Store a reference to the `summary` element of the current `details` element (if any) in a variable
$detailsSummary = $('summary', $details),
// Do the same for the info within the `details` element
$detailsNotSummary = $details.children(':not(summary)'),
// This will be used later to look for direct child text nodes
$detailsNotSummaryContents = $details.contents(':not(summary)');

// If there is no `summary` in the current `details` element…
if (!$detailsSummary.length) {
// …create one with default text
$detailsSummary = $('<summary>').text('Details').prependTo($details);
}

// Look for direct child text nodes
if ($detailsNotSummary.length != $detailsNotSummaryContents.length) {
// Wrap child text nodes in a `span` element
$detailsNotSummaryContents.filter(function() {
// Only keep the node in the collection if it’s a text node containing more than only whitespace
// http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#space-character
return this.nodeType == 3 && /[^ \t\n\f\r]/.test(this.data);
}).wrap('<span>');
// There are now no direct child text nodes anymore — they’re wrapped in `span` elements
$detailsNotSummary = $details.children(':not(summary)');
}

// Hide content unless there’s an `open` attribute
toggleOpen($details, $detailsSummary, $detailsNotSummary);

// Add `role=button` and set the `tabindex` of the `summary` element to `0` to make it keyboard accessible
$detailsSummary.attr('role', 'button').noSelect().prop('tabIndex', 0).on('click', function() {
// Focus on the `summary` element
$detailsSummary.focus();
// Toggle the `open` and `aria-expanded` attributes and the `open` property of the `details` element and display the additional info
toggleOpen($details, $detailsSummary, $detailsNotSummary, true);
}).keyup(function(event) {
if (32 == event.keyCode && !isOpera || 13 == event.keyCode) {
// Space or Enter is pressed — trigger the `click` event on the `summary` element
// Opera already seems to trigger the `click` event when Enter is pressed
event.preventDefault();
$detailsSummary.click();
}
});

});

};

details.support = isDetailsSupported;

}

}(document, jQuery));

/*! <details> fallback by @mathias | http://mths.be/aaq | MIT/GPL license */
$(function() {

var isDetailsSupported = ('open' in document.createElement('details'));

// Execute the fallback only if there’s no native `details` support
if (!isDetailsSupported) {

document.documentElement.className += ' no-details';

// Loop through all `details` elements
$('details').each(function() {

// Store a reference to the current `details` element in a variable
var $details = $(this),
// Store a reference to the `summary` element of the current `details` element (if any) in a variable
$detailsSummary = $('summary', $details),
// Do the same for the info within the `details` element
$detailsNotSummary = $details.children(':not(summary)'),
// This will be used later to look for direct child text nodes
$detailsNotSummaryContents = $details.contents(':not(summary)'),
// This will be used later on
open = this.getAttribute('open');

// If there is no `summary` in the current `details` element…
if (!$detailsSummary.length) {
// …create one with default text
$detailsSummary = $(document.createElement('summary')).text('Details').prependTo($details);
}

// Look for direct child text nodes
if ($detailsNotSummary.length !== $detailsNotSummaryContents.length) {
// Wrap child text nodes in a `span` element
$detailsNotSummaryContents.filter(function() {
// Only keep the node in the collection if it’s a text node containing more than only whitespace
return (this.nodeType === 3) && (/[^\t\n\r ]/.test(this.data));
}).wrap('<span>');
// There are now no direct child text nodes anymore — they’re wrapped in `span` elements
$detailsNotSummary = $details.children(':not(summary)');
}

// Hide content unless there’s an `open` attribute
// Chrome 10 already recognizes the `open` attribute as a boolean (even though it doesn’t support rendering `<details>` yet
// Other browsers without `<details>` support treat it as a string
if (typeof open == 'string' || (typeof open == 'boolean' && open)) {
$details.addClass('open');
$detailsNotSummary.show();
} else {
$detailsNotSummary.hide();
}

// Set the `tabIndex` of the `summary` element to 0 to make it keyboard accessible
$detailsSummary.attr('tabIndex', 0).click(function() {
// Focus on the `summary` element
$detailsSummary.focus();
// Toggle the `open` attribute of the `details` element
typeof $details.attr('open') !== 'undefined' ? $details.removeAttr('open') : $details.attr('open', 'open');
// Toggle the additional information in the `details` element
$detailsNotSummary.toggle(0);
$details.toggleClass('open');
}).keyup(function(event) {
if (13 === event.keyCode || 32 === event.keyCode) {
// Enter or Space is pressed — trigger the `click` event on the `summary` element
// Opera already seems to trigger the `click` event when Enter is pressed
if (!($.browser.opera && 13 === event.keyCode)) {
event.preventDefault();
$detailsSummary.click();
}
}
});

});

}

$(function() {
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
$('details').details();
});

0 comments on commit c3fbc4d

Please sign in to comment.