diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js index 8cbe06e9..8a88b57d 100644 --- a/assets/js/dropdown.js +++ b/assets/js/dropdown.js @@ -22,7 +22,7 @@ } self.$dropdown = self.$menu.clone(); - self.$dropdown.on('click', 'li a', self.itemHandler); /* add the handler for menu items */ + self.$dropdown.on('click', 'li a', self.itemHandler).attr('data-cloned', '1'); /* add the handler for menu items */ $(window).on('resize', self.updatePosition); /* update the position on window resize */ var parent = '' !== self.data.parent ? self.data.parent : document.body; @@ -54,8 +54,11 @@ }, hideAll: function () { - self.hide(); - $('body > div.um-new-dropdown').remove(); + if ( self.$element.data('um-new-dropdown-show') ) { + self.hide(); + } + + $( 'div.um-new-dropdown[data-cloned="1"]' ).remove(); $('.um-new-dropdown-shown').removeClass('um-new-dropdown-shown').data('um-new-dropdown-show', false); return self; @@ -69,9 +72,15 @@ var offset; if ( '' !== self.data.parent ) { - offset = self.$element.offset(); - } else { + var parentPos = $( self.data.parent ).offset(); + var childPos = self.$element.offset(); + offset = { + top: childPos.top - parentPos.top, + left: childPos.left - parentPos.left + }; + } else { + offset = self.$element.offset(); } var base_width = '' !== self.data.parent ? $( self.data.parent )[0].offsetWidth : window.innerWidth; @@ -135,10 +144,12 @@ self.$menu.find('li a[class="' + attrClass + '"]').trigger('click'); /* hide dropdown */ - self.hide(); + if ( self.$element.data('um-new-dropdown-show') ) { + self.hide(); + } }, - triggerHandler: function (e) { + triggerHandler: function(e) { e.stopPropagation(); self.$element = $(e.currentTarget); @@ -151,26 +162,41 @@ } }; + // hidden dropdown menu block generated via PHP. Is used for cloning when 'action' on the 'link' self.$menu = $(element); + // 'link' data self.data = self.$menu.data(); + // base 'link' which we use for 'action' and show a clone of the hidden dropdown self.$element = self.$menu.closest(self.data.element); - if ( !self.$element.length ) { - self.$element = $(self.data.element).first(); + 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' ) { + // single init based on 'initted' data and add 'action' handler for the 'link' self.$menu.data('initted', true); - $(document.body).on(self.data.trigger, self.data.element, self.triggerHandler); + self.data = self.$menu.data(); + + // screenTriggers is used to not duplicate the triggers for more than 1 element on the page + if ( typeof um_dropdownMenu.screenTriggers === 'undefined' ) { + um_dropdownMenu.screenTriggers = {}; + } + + if ( um_dropdownMenu.screenTriggers[ self.data.element ] !== self.data.trigger ) { + um_dropdownMenu.screenTriggers[ self.data.element ] = self.data.trigger; + $(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 ) { + //var globalParent = '' !== self.data.parent ? self.data.parent : document.body; + $( document.body ).on('click', function(e) { + if ( ! $( e.target ).closest('.um-new-dropdown').length ) { self.hideAll(); } }); diff --git a/assets/js/dropdown.min.js b/assets/js/dropdown.min.js index 184bd409..1847c151 100644 --- a/assets/js/dropdown.min.js +++ b/assets/js/dropdown.min.js @@ -1 +1 @@ -function um_init_new_dropdown(){jQuery(".um-new-dropdown").um_dropdownMenu()}!function(p){function d(e){var i={get:function(){return i},show:function(){i.hideAll(),i.$menu=i.$element.find(".um-new-dropdown"),i.$menu.length||(i.$menu=p('div.um-new-dropdown[data-element="'+i.data.element+'"]').first()),i.$dropdown=i.$menu.clone(),i.$dropdown.on("click","li a",i.itemHandler),p(window).on("resize",i.updatePosition);var e=""!==i.data.parent?i.data.parent:document.body;return p(e).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")&&(p(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(),p("body > div.um-new-dropdown").remove(),p(".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=""!==i.data.parent?p(i.data.parent)[0].offsetWidth:window.innerWidth,a={position:"absolute",width:o+"px"};switch((""!==i.data.parent?p(i.data.parent)[0].offsetHeight:window.innerHeight)-n.bottom>t?(a.top=e.top+n.height+"px",d+="bottom"):(d+="top",a.top=e.top-t+"px"),e.left>o||e.left>r/2?(a.left=e.left+n.width-o+"px",d+="-left"):(a.left=e.left+"px",d+="-right"),d){case"bottom-right":a.borderRadius="0px 5px 5px 5px";break;case"bottom-left":a.borderRadius="5px 0px 5px 5px";break;case"top-right":a.borderRadius="5px 5px 5px 0px";break;case"top-left":a.borderRadius="5px 5px 0px 5px"}return a},updatePosition:function(){return i.$dropdown&&i.$dropdown.is(":visible")&&i.$dropdown.css(i.calculatePosition()),i},itemHandler:function(e){e.stopPropagation();var n=p(e.currentTarget).attr("class");i.$menu.find('li a[class="'+n+'"]').trigger("click"),i.hide()},triggerHandler:function(e){e.stopPropagation(),i.$element=p(e.currentTarget),i.$element.data("um-new-dropdown-show")?i.hide():i.show()}};return i.$menu=p(e),i.data=i.$menu.data(),i.$element=i.$menu.closest(i.data.element),i.$element.length||(i.$element=p(i.data.element).first()),i.$dropdown=p(document.body).children('div[data-element="'+i.data.element+'"]'),void 0===i.data.initted&&(i.$menu.data("initted",!0),p(document.body).on(i.data.trigger,i.data.element,i.triggerHandler)),void 0===d.globalHandlersInitted&&(d.globalHandlersInitted=!0,p(document.body).on("click",function(e){p(e.target).closest(".um-new-dropdown").length||i.hideAll()})),i}p.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 +function um_init_new_dropdown(){jQuery(".um-new-dropdown").um_dropdownMenu()}!function(u){function d(e){var l={get:function(){return l},show:function(){l.hideAll(),l.$menu=l.$element.find(".um-new-dropdown"),l.$menu.length||(l.$menu=u('div.um-new-dropdown[data-element="'+l.data.element+'"]').first()),l.$dropdown=l.$menu.clone(),l.$dropdown.on("click","li a",l.itemHandler).attr("data-cloned","1"),u(window).on("resize",l.updatePosition);var e=""!==l.data.parent?l.data.parent:document.body;return u(e).append(l.$dropdown),l.$element.trigger("um_new_dropdown_render",{dropdown_layout:l.$dropdown,trigger:l.data.trigger,element:l.data.elemen,obj:l.$element}),l.$dropdown.css(l.calculatePosition()).show(),l.$element.addClass("um-new-dropdown-shown").data("um-new-dropdown-show",!0),l},hide:function(){return l.$dropdown&&l.$dropdown.is(":visible")&&(u(window).off("resize",l.updatePosition),l.$dropdown.remove(),l.$element.removeClass("um-new-dropdown-shown").data("um-new-dropdown-show",!1)),l},hideAll:function(){return l.$element.data("um-new-dropdown-show")&&l.hide(),u('div.um-new-dropdown[data-cloned="1"]').remove(),u(".um-new-dropdown-shown").removeClass("um-new-dropdown-shown").data("um-new-dropdown-show",!1),l},calculatePosition:function(){var e,t=l.$element.get(0).getBoundingClientRect(),n=l.$dropdown.innerHeight()||150,o=l.data.width||150,d="";if(""!==l.data.parent){var r=u(l.data.parent).offset(),a=l.$element.offset();e={top:a.top-r.top,left:a.left-r.left}}else e=l.$element.offset();var i=""!==l.data.parent?u(l.data.parent)[0].offsetWidth:window.innerWidth,p={position:"absolute",width:o+"px"};switch((""!==l.data.parent?u(l.data.parent)[0].offsetHeight:window.innerHeight)-t.bottom>n?(p.top=e.top+t.height+"px",d+="bottom"):(d+="top",p.top=e.top-n+"px"),e.left>o||e.left>i/2?(p.left=e.left+t.width-o+"px",d+="-left"):(p.left=e.left+"px",d+="-right"),d){case"bottom-right":p.borderRadius="0px 5px 5px 5px";break;case"bottom-left":p.borderRadius="5px 0px 5px 5px";break;case"top-right":p.borderRadius="5px 5px 5px 0px";break;case"top-left":p.borderRadius="5px 5px 0px 5px"}return p},updatePosition:function(){return l.$dropdown&&l.$dropdown.is(":visible")&&l.$dropdown.css(l.calculatePosition()),l},itemHandler:function(e){e.stopPropagation();var t=u(e.currentTarget).attr("class");l.$menu.find('li a[class="'+t+'"]').trigger("click"),l.$element.data("um-new-dropdown-show")&&l.hide()},triggerHandler:function(e){e.stopPropagation(),l.$element=u(e.currentTarget),l.$element.data("um-new-dropdown-show")?l.hide():l.show()}};return l.$menu=u(e),l.data=l.$menu.data(),l.$element=l.$menu.closest(l.data.element),l.$element.length||(l.$element=u(l.data.element).first()),l.$dropdown=u(document.body).children('div[data-element="'+l.data.element+'"]'),void 0===l.data.initted&&(l.$menu.data("initted",!0),l.data=l.$menu.data(),void 0===d.screenTriggers&&(d.screenTriggers={}),d.screenTriggers[l.data.element]!==l.data.trigger&&(d.screenTriggers[l.data.element]=l.data.trigger,u(document.body).on(l.data.trigger,l.data.element,l.triggerHandler))),void 0===d.globalHandlersInitted&&(d.globalHandlersInitted=!0,u(document.body).on("click",function(e){u(e.target).closest(".um-new-dropdown").length||l.hideAll()})),l}u.fn.um_dropdownMenu=function(o){return"string"==typeof o&&o?this.map(function(e,t){var n=d(t);return"function"==typeof n[o]?n[o]():n[o]}).toArray():this.each(function(e,t){d(t)})}}(jQuery),jQuery(document).ready(function(e){um_init_new_dropdown()}); \ No newline at end of file