jquery.mjs.nestedSortable.js
1 week ago
jquery.ui.touch-punch.min.js
1 week ago
nestedpages-factory.js
1 week ago
nestedpages.bulk-actions.js
1 week ago
nestedpages.check-all.js
1 week ago
nestedpages.clone.js
1 week ago
nestedpages.confirm-delete.js
1 week ago
nestedpages.dropdowns.js
1 week ago
nestedpages.formatter.js
1 week ago
nestedpages.hidden-item-count.js
1 week ago
nestedpages.manual-sync.js
1 week ago
nestedpages.menu-links.js
1 week ago
nestedpages.menu-search.js
1 week ago
nestedpages.menu-toggle.js
1 week ago
nestedpages.modals.js
1 week ago
nestedpages.move-post.js
1 week ago
nestedpages.nesting.js
1 week ago
nestedpages.new-post.js
1 week ago
nestedpages.page-toggle.js
1 week ago
nestedpages.post-search.js
1 week ago
nestedpages.quickedit-link.js
1 week ago
nestedpages.quickedit-post.js
1 week ago
nestedpages.settings-admin-customization.js
1 week ago
nestedpages.settings-reset.js
1 week ago
nestedpages.settings.js
1 week ago
nestedpages.sync-menu-setting.js
1 week ago
nestedpages.tabs.js
1 week ago
nestedpages.trash-with-children.js
1 week ago
nestedpages.trash.js
1 week ago
nestedpages.userprefs-reset.js
1 week ago
nestedpages.wpml.js
1 week ago
nestedpages.dropdowns.js
89 lines
| 1 | var NestedPages = NestedPages || {}; |
| 2 | /** |
| 3 | * Dropdowns |
| 4 | * |
| 5 | * @author Kyle Phillips |
| 6 | * |
| 7 | * To use, wrap dropdown content and toggle link/button in an element with data attribute of data-dropdown |
| 8 | * Give content data attribute of data-dropdown-content and toggle element data attribute of data-dropdown-toggle |
| 9 | * For CSS, wrapping/parent element gets class of "dropdown", content gets class of "dropdown-content" |
| 10 | */ |
| 11 | NestedPages.Dropdowns = function() |
| 12 | { |
| 13 | var self = this; |
| 14 | var $ = jQuery; |
| 15 | |
| 16 | self.dropdown = ''; // The Active Dropdown |
| 17 | self.activeBtn = ''; // The Active Button |
| 18 | self.activeContent = ''; // The Active Dropdown Content |
| 19 | self.toggleBtn = '[data-dropdown-toggle]'; |
| 20 | self.dropdownContainer = '[data-dropdown]'; |
| 21 | self.dropdownContent = '[data-dropdown-content]' |
| 22 | |
| 23 | self.selectors = { |
| 24 | caret_up : 'icon-arrow_drop_up', |
| 25 | caret_down : 'icon-arrow_drop_down' |
| 26 | } |
| 27 | |
| 28 | self.bindEvents = function() |
| 29 | { |
| 30 | $(document).on('click', self.toggleBtn, function(e){ |
| 31 | e.preventDefault(); |
| 32 | self.activeBtn = $(this); |
| 33 | self.dropdown = $(this).parents(self.dropdownContainer); |
| 34 | self.toggleDropdown(); |
| 35 | }); |
| 36 | $(document).on('click', function(e){ |
| 37 | self.closeDropdowns(e.target); |
| 38 | }); |
| 39 | $(document).on('dropdown-opened', function(e, content){ |
| 40 | if ( $(content).parents(NestedPages.selectors.row).length > 0 ){ |
| 41 | $(content).parents(NestedPages.selectors.row).addClass('active'); |
| 42 | } |
| 43 | }); |
| 44 | $(document).on('dropdown-closed', function(){ |
| 45 | $(NestedPages.selectors.row).removeClass('active'); |
| 46 | }); |
| 47 | } |
| 48 | |
| 49 | self.toggleDropdown = function() |
| 50 | { |
| 51 | $('.' + self.selectors.caret_up).attr('class', self.selectors.caret_down); |
| 52 | var content = $(self.dropdown).find(self.dropdownContent); |
| 53 | self.activeContent = content; |
| 54 | if ( $(content).hasClass('active') ){ |
| 55 | $(content).removeClass('active'); |
| 56 | $(self.activeBtn).removeClass('active'); |
| 57 | $(self.activeBtn).find('.' + self.selectors.caret_up).attr('class', self.selectors.caret_down); |
| 58 | $(document).trigger('dropdown-closed', content); |
| 59 | return; |
| 60 | } |
| 61 | self.setPositioning(); |
| 62 | $(self.toggleBtn).removeClass('active'); |
| 63 | $(self.dropdownContent).removeClass('active'); |
| 64 | $(content).addClass('active'); |
| 65 | $(self.activeBtn).find('.' + self.selectors.caret_down).attr('class', self.selectors.caret_up); |
| 66 | $(self.activeBtn).addClass('active'); |
| 67 | $(document).trigger('dropdown-opened', content); |
| 68 | } |
| 69 | |
| 70 | |
| 71 | self.setPositioning = function() |
| 72 | { |
| 73 | var buttonHeight = $(self.activeBtn).outerHeight(); |
| 74 | $(self.activeContent).css('top', buttonHeight + 'px'); |
| 75 | } |
| 76 | |
| 77 | self.closeDropdowns = function(target) |
| 78 | { |
| 79 | if ( $(target).parents(self.dropdownContainer).length === 0 ){ |
| 80 | $(self.dropdownContent).removeClass('active'); |
| 81 | $(self.toggleBtn).removeClass('active'); |
| 82 | $(self.activeBtn).find('.' + self.selectors.caret_up).attr('class', self.selectors.caret_down); |
| 83 | var content; |
| 84 | $(document).trigger('dropdown-closed', content); |
| 85 | } |
| 86 | } |
| 87 | |
| 88 | return self.bindEvents(); |
| 89 | } |