10h30/ultimatemember
1
0
Fork 0
mirror of https://github.com/10h30/ultimatemember.git synced 2026-07-11 18:56:10 +09:00
Code Issues Packages Projects Releases Wiki Activity

- enhancement for dropdown.js (not completed);

Browse Source
This commit is contained in:
Nikita Sinelnikov
2022-02-04 17:19:01 +02:00
parent 20cbab04fb
commit e0042ea13d
3 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/dropdown.js
+18 -6
View File
@@ -20,10 +20,13 @@
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);
var parent = '' !== self.data.parent ? self.data.parent : document.body;
$(parent).append(self.$dropdown);
/* trigger event */
self.$element.trigger('um_new_dropdown_render', {
@@ -59,19 +62,28 @@
},
calculatePosition: function () {
var offset = self.$element.offset(),
rect = self.$element.get(0).getBoundingClientRect(),
var rect = self.$element.get(0).getBoundingClientRect(),
height = self.$dropdown.innerHeight() || 150,
width = self.data.width || 150,
place = '';
var offset;
if ( '' !== self.data.parent ) {
offset = self.$element.offset();
} else {
}
var base_width = '' !== self.data.parent ? $( self.data.parent )[0].offsetWidth : window.innerWidth;
var base_height = '' !== self.data.parent ? $( self.data.parent )[0].offsetHeight : window.innerHeight;
var css = {
position: 'absolute',
width: width + 'px'
};
/* vertical position */
if ( window.innerHeight - rect.bottom > height ) {
if ( base_height - rect.bottom > height ) {
css.top = offset.top + rect.height + 'px';
place += 'bottom';
} else {
@@ -80,7 +92,7 @@
}
/* horisontal position */
if ( offset.left > width || offset.left > window.innerWidth / 2 ) {
if ( offset.left > width || offset.left > base_width / 2 ) {
css.left = offset.left + rect.width - width + 'px';
place += '-left';
} else {
@@ -191,4 +203,4 @@ function um_init_new_dropdown() {
/* Init all dropdown menus on page load */
jQuery( document ).ready( function($) {
um_init_new_dropdown();
});
});
assets/js/dropdown.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
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()});
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()});
includes/core/class-member-directory.php
+6 -4
View File
@@ -2586,12 +2586,13 @@ if ( ! class_exists( 'um\core\Member_Directory' ) ) {
* @param string $element
* @param string $trigger
* @param array $items
* @param string $parent
*/
function dropdown_menu( $element, $trigger, $items = array() ) {
function dropdown_menu( $element, $trigger, $items = array(), $parent = '' ) {
// !!!!Important: all links in the dropdown items must have "class" attribute
?>
<div class="um-new-dropdown" data-element="<?php echo $element; ?>" data-trigger="<?php echo $trigger; ?>">
<div class="um-new-dropdown" data-element="<?php echo $element; ?>" data-trigger="<?php echo $trigger; ?>" data-parent="<?php echo $parent; ?>">
<ul>
<?php foreach ( $items as $k => $v ) { ?>
<li><?php echo $v; ?></li>
@@ -2610,11 +2611,12 @@ if ( ! class_exists( 'um\core\Member_Directory' ) ) {
* @param string $trigger
* @param string $item
* @param string $additional_attributes
* @param string $parent
*/
function dropdown_menu_js( $element, $trigger, $item, $additional_attributes = '' ) {
function dropdown_menu_js( $element, $trigger, $item, $additional_attributes = '', $parent = '' ) {
?>
<div class="um-new-dropdown" data-element="<?php echo $element; ?>" data-trigger="<?php echo $trigger; ?>">
<div class="um-new-dropdown" data-element="<?php echo $element; ?>" data-trigger="<?php echo $trigger; ?>" data-parent="<?php echo $parent; ?>">
<ul>
<# _.each( <?php echo $item; ?>.dropdown_actions, function( action, key, list ) { #>
<li><a href="<# if ( typeof action.url != 'undefined' ) { #>{{{action.url}}}<# } else { #>javascript:void(0);<# }#>" class="{{{key}}}"<?php echo $additional_attributes ? " $additional_attributes" : '' ?>>{{{action.title}}}</a></li>