No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

177 líneas
5.2 KiB

hace 6 años
  1. /*jslint unparam: true, browser: true, indent: 2 */
  2. ;(function ($, window, document, undefined) {
  3. 'use strict';
  4. Foundation.libs.dropdown = {
  5. name : 'dropdown',
  6. version : '4.3.0',
  7. settings : {
  8. activeClass: 'open',
  9. is_hover: false,
  10. opened: function(){},
  11. closed: function(){}
  12. },
  13. init : function (scope, method, options) {
  14. this.scope = scope || this.scope;
  15. Foundation.inherit(this, 'throttle scrollLeft data_options');
  16. if (typeof method === 'object') {
  17. $.extend(true, this.settings, method);
  18. }
  19. if (typeof method !== 'string') {
  20. if (!this.settings.init) {
  21. this.events();
  22. }
  23. return this.settings.init;
  24. } else {
  25. return this[method].call(this, options);
  26. }
  27. },
  28. events : function () {
  29. var self = this;
  30. $(this.scope)
  31. .on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
  32. var settings = $.extend({}, self.settings, self.data_options($(this)));
  33. e.preventDefault();
  34. if (!settings.is_hover) self.toggle($(this));
  35. })
  36. .on('mouseenter', '[data-dropdown]', function (e) {
  37. var settings = $.extend({}, self.settings, self.data_options($(this)));
  38. if (settings.is_hover) self.toggle($(this));
  39. })
  40. .on('mouseleave', '[data-dropdown-content]', function (e) {
  41. var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
  42. settings = $.extend({}, self.settings, self.data_options(target));
  43. if (settings.is_hover) self.close.call(self, $(this));
  44. })
  45. .on('opened.fndtn.dropdown', '[data-dropdown-content]', this.settings.opened)
  46. .on('closed.fndtn.dropdown', '[data-dropdown-content]', this.settings.closed);
  47. $(document).on('click.fndtn.dropdown', function (e) {
  48. var parent = $(e.target).closest('[data-dropdown-content]');
  49. if ($(e.target).data('dropdown')) {
  50. return;
  51. }
  52. if (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') || $.contains(parent.first()[0], e.target))) {
  53. e.stopPropagation();
  54. return;
  55. }
  56. self.close.call(self, $('[data-dropdown-content]'));
  57. });
  58. $(window).on('resize.fndtn.dropdown', self.throttle(function () {
  59. self.resize.call(self);
  60. }, 50)).trigger('resize');
  61. this.settings.init = true;
  62. },
  63. close: function (dropdown) {
  64. var self = this;
  65. dropdown.each(function () {
  66. if ($(this).hasClass(self.settings.activeClass)) {
  67. $(this)
  68. .css(Foundation.rtl ? 'right':'left', '-99999px')
  69. .removeClass(self.settings.activeClass);
  70. $(this).trigger('closed');
  71. }
  72. });
  73. },
  74. open: function (dropdown, target) {
  75. this
  76. .css(dropdown
  77. .addClass(this.settings.activeClass), target);
  78. dropdown.trigger('opened');
  79. },
  80. toggle : function (target) {
  81. var dropdown = $('#' + target.data('dropdown'));
  82. this.close.call(this, $('[data-dropdown-content]').not(dropdown));
  83. if (dropdown.hasClass(this.settings.activeClass)) {
  84. this.close.call(this, dropdown);
  85. } else {
  86. this.close.call(this, $('[data-dropdown-content]'))
  87. this.open.call(this, dropdown, target);
  88. }
  89. },
  90. resize : function () {
  91. var dropdown = $('[data-dropdown-content].open'),
  92. target = $("[data-dropdown='" + dropdown.attr('id') + "']");
  93. if (dropdown.length && target.length) {
  94. this.css(dropdown, target);
  95. }
  96. },
  97. css : function (dropdown, target) {
  98. var offset_parent = dropdown.offsetParent();
  99. // if (offset_parent.length > 0 && /body/i.test(dropdown.offsetParent()[0].nodeName)) {
  100. var position = target.offset();
  101. position.top -= offset_parent.offset().top;
  102. position.left -= offset_parent.offset().left;
  103. // } else {
  104. // var position = target.position();
  105. // }
  106. if (this.small()) {
  107. dropdown.css({
  108. position : 'absolute',
  109. width: '95%',
  110. left: '2.5%',
  111. 'max-width': 'none',
  112. top: position.top + this.outerHeight(target)
  113. });
  114. } else {
  115. if (!Foundation.rtl && $(window).width() > this.outerWidth(dropdown) + target.offset().left) {
  116. var left = position.left;
  117. if (dropdown.hasClass('right')) {
  118. dropdown.removeClass('right');
  119. }
  120. } else {
  121. if (!dropdown.hasClass('right')) {
  122. dropdown.addClass('right');
  123. }
  124. var left = position.left - (this.outerWidth(dropdown) - this.outerWidth(target));
  125. }
  126. dropdown.attr('style', '').css({
  127. position : 'absolute',
  128. top: position.top + this.outerHeight(target),
  129. left: left
  130. });
  131. }
  132. return dropdown;
  133. },
  134. small : function () {
  135. return $(window).width() < 768 || $('html').hasClass('lt-ie9');
  136. },
  137. off: function () {
  138. $(this.scope).off('.fndtn.dropdown');
  139. $('html, body').off('.fndtn.dropdown');
  140. $(window).off('.fndtn.dropdown');
  141. $('[data-dropdown-content]').off('.fndtn.dropdown');
  142. this.settings.init = false;
  143. },
  144. reflow : function () {}
  145. };
  146. }(Foundation.zj, this, this.document));