aboutsummaryrefslogtreecommitdiffstats
path: root/foundation-default-colours/static/js/foundation/foundation.dropdown.js
diff options
context:
space:
mode:
authorJustin Mayer <entroP@gmail.com>2014-01-27 09:55:49 -0800
committerJustin Mayer <entroP@gmail.com>2014-01-27 09:55:49 -0800
commitc35cbabcaf4807b9474203a2fbd809883b08ad50 (patch)
tree8cf56c29445167a9f09968cae3ff60ee2777ccdd /foundation-default-colours/static/js/foundation/foundation.dropdown.js
parente05a5db62451233729123a1c50e75290042c5ae2 (diff)
parent488efa23deb42f7425378595cc5af03f58803fa3 (diff)
downloadpelican-themes-c35cbabcaf4807b9474203a2fbd809883b08ad50.tar.gz
Merge pull request #186 from FuzzyWuzzie/master
Add theme based on Zurb Foundation 5.0.1
Diffstat (limited to 'foundation-default-colours/static/js/foundation/foundation.dropdown.js')
-rw-r--r--foundation-default-colours/static/js/foundation/foundation.dropdown.js184
1 files changed, 184 insertions, 0 deletions
diff --git a/foundation-default-colours/static/js/foundation/foundation.dropdown.js b/foundation-default-colours/static/js/foundation/foundation.dropdown.js
new file mode 100644
index 0000000..622db93
--- /dev/null
+++ b/foundation-default-colours/static/js/foundation/foundation.dropdown.js
@@ -0,0 +1,184 @@
+;(function ($, window, document, undefined) {
+ 'use strict';
+
+ Foundation.libs.dropdown = {
+ name : 'dropdown',
+
+ version : '5.0.0',
+
+ settings : {
+ active_class: 'open',
+ is_hover: false,
+ opened: function(){},
+ closed: function(){}
+ },
+
+ init : function (scope, method, options) {
+ Foundation.inherit(this, 'throttle');
+
+ this.bindings(method, options);
+ },
+
+ events : function (scope) {
+ var self = this;
+
+ $(this.scope)
+ .off('.dropdown')
+ .on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
+ var settings = $(this).data('dropdown-init');
+ e.preventDefault();
+
+ if (!settings.is_hover || Modernizr.touch) self.toggle($(this));
+ })
+ .on('mouseenter.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
+ var $this = $(this);
+ clearTimeout(self.timeout);
+
+ if ($this.data('dropdown')) {
+ var dropdown = $('#' + $this.data('dropdown')),
+ target = $this;
+ } else {
+ var dropdown = $this;
+ target = $("[data-dropdown='" + dropdown.attr('id') + "']");
+ }
+
+ var settings = target.data('dropdown-init');
+ if (settings.is_hover) self.open.apply(self, [dropdown, target]);
+ })
+ .on('mouseleave.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
+ var $this = $(this);
+ self.timeout = setTimeout(function () {
+ if ($this.data('dropdown')) {
+ var settings = $this.data('dropdown-init');
+ if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
+ } else {
+ var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
+ settings = target.data('dropdown-init');
+ if (settings.is_hover) self.close.call(self, $this);
+ }
+ }.bind(this), 150);
+ })
+ .on('click.fndtn.dropdown', function (e) {
+ var parent = $(e.target).closest('[data-dropdown-content]');
+
+ if ($(e.target).data('dropdown') || $(e.target).parent().data('dropdown')) {
+ return;
+ }
+ if (!($(e.target).data('revealId')) &&
+ (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') ||
+ $.contains(parent.first()[0], e.target)))) {
+ e.stopPropagation();
+ return;
+ }
+
+ self.close.call(self, $('[data-dropdown-content]'));
+ })
+ .on('opened.fndtn.dropdown', '[data-dropdown-content]', this.settings.opened)
+ .on('closed.fndtn.dropdown', '[data-dropdown-content]', this.settings.closed);
+
+ $(window)
+ .off('.dropdown')
+ .on('resize.fndtn.dropdown', self.throttle(function () {
+ self.resize.call(self);
+ }, 50)).trigger('resize');
+ },
+
+ close: function (dropdown) {
+ var self = this;
+ dropdown.each(function () {
+ if ($(this).hasClass(self.settings.active_class)) {
+ $(this)
+ .css(Foundation.rtl ? 'right':'left', '-99999px')
+ .removeClass(self.settings.active_class);
+ $(this).trigger('closed');
+ }
+ });
+ },
+
+ open: function (dropdown, target) {
+ this
+ .css(dropdown
+ .addClass(this.settings.active_class), target);
+ dropdown.trigger('opened');
+ },
+
+ toggle : function (target) {
+ var dropdown = $('#' + target.data('dropdown'));
+ if (dropdown.length === 0) {
+ // No dropdown found, not continuing
+ return;
+ }
+
+ this.close.call(this, $('[data-dropdown-content]').not(dropdown));
+
+ if (dropdown.hasClass(this.settings.active_class)) {
+ this.close.call(this, dropdown);
+ } else {
+ this.close.call(this, $('[data-dropdown-content]'))
+ this.open.call(this, dropdown, target);
+ }
+ },
+
+ resize : function () {
+ var dropdown = $('[data-dropdown-content].open'),
+ target = $("[data-dropdown='" + dropdown.attr('id') + "']");
+
+ if (dropdown.length && target.length) {
+ this.css(dropdown, target);
+ }
+ },
+
+ css : function (dropdown, target) {
+ var offset_parent = dropdown.offsetParent(),
+ position = target.offset();
+
+ position.top -= offset_parent.offset().top;
+ position.left -= offset_parent.offset().left;
+
+ if (this.small()) {
+ dropdown.css({
+ position : 'absolute',
+ width: '95%',
+ 'max-width': 'none',
+ top: position.top + target.outerHeight()
+ });
+ dropdown.css(Foundation.rtl ? 'right':'left', '2.5%');
+ } else {
+ if (!Foundation.rtl && $(window).width() > dropdown.outerWidth() + target.offset().left) {
+ var left = position.left;
+ if (dropdown.hasClass('right')) {
+ dropdown.removeClass('right');
+ }
+ } else {
+ if (!dropdown.hasClass('right')) {
+ dropdown.addClass('right');
+ }
+ var left = position.left - (dropdown.outerWidth() - target.outerWidth());
+ }
+
+ dropdown.attr('style', '').css({
+ position : 'absolute',
+ top: position.top + target.outerHeight(),
+ left: left
+ });
+ }
+
+ return dropdown;
+ },
+
+ small : function () {
+ return matchMedia(Foundation.media_queries.small).matches &&
+ !matchMedia(Foundation.media_queries.medium).matches;
+ },
+
+ off: function () {
+ $(this.scope).off('.fndtn.dropdown');
+ $('html, body').off('.fndtn.dropdown');
+ $(window).off('.fndtn.dropdown');
+ $('[data-dropdown-content]').off('.fndtn.dropdown');
+ this.settings.init = false;
+ },
+
+ reflow : function () {}
+ };
+}(jQuery, this, this.document));