diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js index c3e6d5b5..9e3a8d23 100644 --- a/assets/js/dropdown.js +++ b/assets/js/dropdown.js @@ -1,85 +1,194 @@ -var um_dropdown_triggers = {}; +(function ($) { -function um_init_new_dropdown() { - jQuery('.um-new-dropdown').each( function() { - var menu = jQuery(this); + /** + * The constructor of the dropdown object + * @param {object} element The menu element. + * @returns {object} The dropdown menu object. + */ + function um_dropdownMenu(element) { - var is_inited = menu.data( 'um-dropdown-inited' ); - if ( is_inited ) { - return; - } + var self = { + get: function(){ + return self; + }, - var element = menu.data('element'); - var trigger = menu.data('trigger'); + show: function () { + self.hideAll(); - menu.data( 'um-dropdown-inited', true ); + /* add dropdown into the */ + self.$menu = self.$element.find('.um-new-dropdown'); + if ( !self.$menu.length ) { + self.$menu = $('div.um-new-dropdown[data-element="' + self.data.element + '"]').first(); + } + self.$dropdown = self.$menu.clone(); + self.$dropdown.on('click', 'li a', self.itemHandler); /* add the handler for menu items */ + $(window).on('resize', self.updatePosition); /* update the position on window resize */ + $(document.body).append(self.$dropdown); - if ( -1 === jQuery.inArray( element, um_dropdown_triggers[ trigger ] ) ) { - jQuery( document.body ).on( trigger, element, function(e) { - var obj = jQuery(this); + /* trigger event */ + self.$element.trigger('um_new_dropdown_render', { + dropdown_layout: self.$dropdown, + trigger: self.data.trigger, + element: self.data.elemen, + obj: self.$element + }); - if ( obj.data( 'um-new-dropdown-show' ) === true ) { - obj.data( 'um-new-dropdown-show', false ); - obj.find( '.um-new-dropdown' ).hide(); - } else { - jQuery('.um-new-dropdown').hide(); - jQuery('.um-new-dropdown').parent().data( 'um-new-dropdown-show', false ); + /* set styles and show */ + self.$dropdown.css(self.calculatePosition()).show(); + self.$element.addClass('um-new-dropdown-shown').data('um-new-dropdown-show', true); - if ( ! obj.find( '.um-new-dropdown' ).length ) { - var dropdown_layout = menu.clone(); + return self; + }, - // dropdown_layout.css({ - // top : '20px', - // width: '150px', - // right: 0 - // }); - - obj.append( dropdown_layout ); - - obj.trigger( 'fmwp_dropdown_render', { dropdown_layout:dropdown_layout, trigger:trigger, element:element, obj:obj} ); - - dropdown_layout.show(); - } else { - obj.find( '.um-new-dropdown' )./*css({ - top : '20px', - width: '150px', - right: 0 - }).*/show(); + hide: function () { + if ( self.$dropdown && self.$dropdown.is(':visible') ) { + $(window).off('resize', self.updatePosition); + self.$dropdown.remove(); + self.$element.removeClass('um-new-dropdown-shown').data('um-new-dropdown-show', false); } - obj.data( 'um-new-dropdown-show', true ); + return self; + }, - jQuery( document.body ).bind( 'click', function( event ) { - - if ( jQuery('.um-new-dropdown').find( '.' + jQuery( event.target ).attr('class').trim().replace( ' ', '.' ) ).length === 0 && - + hideAll: function () { + self.hide(); + $('body > div.um-new-dropdown').remove(); + $('.um-new-dropdown-shown').removeClass('um-new-dropdown-shown').data('um-new-dropdown-show', false); - jQuery( '.' + jQuery(event.target).attr('class').trim() ) !== element ) { - //event = ev; - jQuery('.um-new-dropdown').hide(); - jQuery('.um-new-dropdown').parent().data( 'um-new-dropdown-show', false ); - jQuery( document.body ).unbind( event ); + return self; + }, - } - }); + calculatePosition: function () { + var offset = self.$element.offset(), + rect = self.$element.get(0).getBoundingClientRect(), + height = self.$dropdown.innerHeight() || 150, + width = self.data.width || 150, + place = ''; + + var css = { + position: 'absolute', + width: width + 'px' + }; + + /* vertical position */ + if ( window.innerHeight - rect.bottom > height ) { + css.top = offset.top + rect.height + 'px'; + place += 'bottom'; + } else { + place += 'top'; + css.top = offset.top - height + 'px'; + } + + /* horisontal position */ + if ( offset.left > width || offset.left > window.innerWidth / 2 ) { + css.left = offset.left + rect.width - width + 'px'; + place += '-left'; + } else { + css.left = offset.left + 'px'; + place += '-right'; + } + + /* border */ + switch ( place ) { + case 'bottom-right': + css.borderRadius = '0px 5px 5px 5px'; + break; + case 'bottom-left': + css.borderRadius = '5px 0px 5px 5px'; + break; + case 'top-right': + css.borderRadius = '5px 5px 5px 0px'; + break; + case 'top-left': + css.borderRadius = '5px 5px 0px 5px'; + break; + } + + return css; + }, + + updatePosition: function () { + if ( self.$dropdown && self.$dropdown.is(':visible') ) { + self.$dropdown.css(self.calculatePosition()); + } + + return self; + }, + + itemHandler: function (e) { + e.stopPropagation(); + + /* trigger 'click' in the original menu */ + var attrClass = $(e.currentTarget).attr('class'); + self.$menu.find('li a[class="' + attrClass + '"]').trigger('click'); + + /* hide dropdown */ + self.hide(); + }, + + triggerHandler: function (e) { + e.stopPropagation(); + + self.$element = $(e.currentTarget); + + if ( self.$element.data('um-new-dropdown-show') ) { + self.hide(); + } else { + self.show(); + } } - }); + }; - if ( typeof um_dropdown_triggers[ trigger ] == 'undefined' ) { - um_dropdown_triggers[ trigger ] = []; - } - um_dropdown_triggers[ trigger ].push( element ); + self.$menu = $(element); + + self.data = self.$menu.data(); + + self.$element = self.$menu.closest(self.data.element); + if ( !self.$element.length ) { + self.$element = $(self.data.element).first(); } - }); + + self.$dropdown = $(document.body).children('div[data-element="' + self.data.element + '"]'); + + if ( typeof self.data.initted === 'undefined' ) { + self.$menu.data('initted', true); + $(document.body).on(self.data.trigger, self.data.element, self.triggerHandler); + } + + if ( typeof um_dropdownMenu.globalHandlersInitted === 'undefined' ) { + um_dropdownMenu.globalHandlersInitted = true; + $(document.body).on('click', function (e) { + if ( !$(e.target).closest('.um-new-dropdown').length ) { + self.hideAll(); + } + }); + } + + return self; + } + + /* Add the method um_dropdownMenu() to the jQuery */ + $.fn.um_dropdownMenu = function (action) { + if ( typeof action === 'string' && action ) { + return this.map( function (i, menu) { + var obj = um_dropdownMenu( menu ); + return typeof obj[action] === 'function' ? obj[action]() : obj[action]; + } ).toArray(); + } else { + return this.each( function (i, menu) { + um_dropdownMenu( menu ); + } ); + } + }; + +})(jQuery); + + +function um_init_new_dropdown() { + jQuery('.um-new-dropdown').um_dropdownMenu(); } +/* Init all dropdown menus on page load */ jQuery( document ).ready( function($) { um_init_new_dropdown(); - - jQuery( document.body ).on( 'click', '.um-new-dropdown a', function(e) { - jQuery(this).parents('.um-new-dropdown').hide(); - jQuery(this).parents('.um-new-dropdown').parent().data( 'um-new-dropdown-show', false ); - jQuery('body').trigger('click'); - e.stopPropagation(); - }); }); \ No newline at end of file diff --git a/assets/js/dropdown.min.js b/assets/js/dropdown.min.js index f2549127..b8181004 100644 --- a/assets/js/dropdown.min.js +++ b/assets/js/dropdown.min.js @@ -1 +1 @@ -var um_dropdown_triggers={};function um_init_new_dropdown(){jQuery(".um-new-dropdown").each(function(){var r=jQuery(this);if(!r.data("um-dropdown-inited")){var e=r.data("element"),u=r.data("trigger");r.data("um-dropdown-inited",!0),-1===jQuery.inArray(e,um_dropdown_triggers[u])&&(jQuery(document.body).on(u,e,function(d){var n=jQuery(this);if(!0===n.data("um-new-dropdown-show"))n.data("um-new-dropdown-show",!1),n.find(".um-new-dropdown").hide();else{if(jQuery(".um-new-dropdown").hide(),jQuery(".um-new-dropdown").parent().data("um-new-dropdown-show",!1),n.find(".um-new-dropdown").length)n.find(".um-new-dropdown").show();else{var o=r.clone();n.append(o),n.trigger("fmwp_dropdown_render",{dropdown_layout:o,trigger:u,element:e,obj:n}),o.show()}n.data("um-new-dropdown-show",!0),jQuery(document.body).bind("click",function(d){0===jQuery(".um-new-dropdown").find("."+jQuery(d.target).attr("class").trim().replace(" ",".")).length&&jQuery("."+jQuery(d.target).attr("class").trim())!==e&&(jQuery(".um-new-dropdown").hide(),jQuery(".um-new-dropdown").parent().data("um-new-dropdown-show",!1),jQuery(document.body).unbind(d))})}}),void 0===um_dropdown_triggers[u]&&(um_dropdown_triggers[u]=[]),um_dropdown_triggers[u].push(e))}})}jQuery(document).ready(function(d){um_init_new_dropdown(),jQuery(document.body).on("click",".um-new-dropdown a",function(d){jQuery(this).parents(".um-new-dropdown").hide(),jQuery(this).parents(".um-new-dropdown").parent().data("um-new-dropdown-show",!1),jQuery("body").trigger("click"),d.stopPropagation()})}); \ No newline at end of file +function um_init_new_dropdown(){jQuery(".um-new-dropdown").um_dropdownMenu()}!function(t){function d(e){var i={get:function(){return i},show:function(){return i.hideAll(),i.$menu=i.$element.find(".um-new-dropdown"),i.$menu.length||(i.$menu=t('div.um-new-dropdown[data-element="'+i.data.element+'"]').first()),i.$dropdown=i.$menu.clone(),i.$dropdown.on("click","li a",i.itemHandler),t(window).on("resize",i.updatePosition),t(document.body).append(i.$dropdown),i.$element.trigger("um_new_dropdown_render",{dropdown_layout:i.$dropdown,trigger:i.data.trigger,element:i.data.elemen,obj:i.$element}),i.$dropdown.css(i.calculatePosition()).show(),i.$element.addClass("um-new-dropdown-shown").data("um-new-dropdown-show",!0),i},hide:function(){return i.$dropdown&&i.$dropdown.is(":visible")&&(t(window).off("resize",i.updatePosition),i.$dropdown.remove(),i.$element.removeClass("um-new-dropdown-shown").data("um-new-dropdown-show",!1)),i},hideAll:function(){return i.hide(),t("body > div.um-new-dropdown").remove(),t(".um-new-dropdown-shown").removeClass("um-new-dropdown-shown").data("um-new-dropdown-show",!1),i},calculatePosition:function(){var e=i.$element.offset(),n=i.$element.get(0).getBoundingClientRect(),t=i.$dropdown.innerHeight()||150,o=i.data.width||150,d="",r={position:"absolute",width:o+"px"};switch(window.innerHeight-n.bottom>t?(r.top=e.top+n.height+"px",d+="bottom"):(d+="top",r.top=e.top-t+"px"),e.left>o||e.left>window.innerWidth/2?(r.left=e.left+n.width-o+"px",d+="-left"):(r.left=e.left+"px",d+="-right"),d){case"bottom-right":r.borderRadius="0px 5px 5px 5px";break;case"bottom-left":r.borderRadius="5px 0px 5px 5px";break;case"top-right":r.borderRadius="5px 5px 5px 0px";break;case"top-left":r.borderRadius="5px 5px 0px 5px"}return r},updatePosition:function(){return i.$dropdown&&i.$dropdown.is(":visible")&&i.$dropdown.css(i.calculatePosition()),i},itemHandler:function(e){e.stopPropagation();var n=t(e.currentTarget).attr("class");i.$menu.find('li a[class="'+n+'"]').trigger("click"),i.hide()},triggerHandler:function(e){e.stopPropagation(),i.$element=t(e.currentTarget),i.$element.data("um-new-dropdown-show")?i.hide():i.show()}};return i.$menu=t(e),i.data=i.$menu.data(),i.$element=i.$menu.closest(i.data.element),i.$element.length||(i.$element=t(i.data.element).first()),i.$dropdown=t(document.body).children('div[data-element="'+i.data.element+'"]'),void 0===i.data.initted&&(i.$menu.data("initted",!0),t(document.body).on(i.data.trigger,i.data.element,i.triggerHandler)),void 0===d.globalHandlersInitted&&(d.globalHandlersInitted=!0,t(document.body).on("click",function(e){t(e.target).closest(".um-new-dropdown").length||i.hideAll()})),i}t.fn.um_dropdownMenu=function(o){return"string"==typeof o&&o?this.map(function(e,n){var t=d(n);return"function"==typeof t[o]?t[o]():t[o]}).toArray():this.each(function(e,n){d(n)})}}(jQuery),jQuery(document).ready(function(e){um_init_new_dropdown()}); \ No newline at end of file diff --git a/templates/members-list.php b/templates/members-list.php index 1355fa24..aa2ddc1a 100644 --- a/templates/members-list.php +++ b/templates/members-list.php @@ -109,8 +109,9 @@ $unique_hash = substr( md5( $args['form_id'] ), 10, 5 ); ?> - member_directory()->dropdown_menu_js( '.um-member-cog', 'click', 'user' ); ?> + + member_directory()->dropdown_menu_js( '.um-member-cog', 'click', 'user' ); ?> <# } #>