← All changes
|
includes/__js/admin/settings/ui_sidebar_left__actions.js
+162
-56
11.6.1
→
11.9
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | "use strict"; |
| 2 | 2 | // ===================================================================================================================== |
| 3 | 3 | // == Left Bar - expand / colapse functions == |
| 4 | 4 | // ===================================================================================================================== |
| @@ -31,8 +31,72 @@ | ||
| 31 | 31 | wpbc_save_custom_user_data_from_element( $saver.get( 0 ) ); |
| 32 | 32 | } |
| 33 | 33 | |
| 34 | 34 | /** |
| 35 | + * Reveal the active item inside the scrollable left navigation. | |
| 36 | + * | |
| 37 | + * The active item itself is aligned with a small leading offset, regardless of | |
| 38 | + * its position inside a root section. Scrolling is applied only to SimpleBar's | |
| 39 | + * internal scroll element so the WordPress administration document does not | |
| 40 | + * move. | |
| 41 | + * | |
| 42 | + * @param {Object|null|undefined} simplebar_instance Optional initialized SimpleBar instance. | |
| 43 | + * @return {void} | |
| 44 | + */ | |
| 45 | +function wpbc_admin_ui__sidebar_left__scroll_to_active_item( simplebar_instance ) { | |
| 46 | + var left_navigation_element = document.querySelector( '.wpbc_ui_el__vert_left_bar__content' ); | |
| 47 | + | |
| 48 | + if ( | |
| 49 | + ! simplebar_instance | |
| 50 | + && 'undefined' !== typeof SimpleBar | |
| 51 | + && SimpleBar.instances | |
| 52 | + && left_navigation_element | |
| 53 | + ) { | |
| 54 | + simplebar_instance = SimpleBar.instances.get( left_navigation_element ); | |
| 55 | + } | |
| 56 | + | |
| 57 | + if ( | |
| 58 | + ! simplebar_instance | |
| 59 | + || 'function' !== typeof simplebar_instance.getScrollElement | |
| 60 | + || 'function' !== typeof simplebar_instance.getContentElement | |
| 61 | + ) { | |
| 62 | + return; | |
| 63 | + } | |
| 64 | + | |
| 65 | + window.requestAnimationFrame( function () { | |
| 66 | + var scroll_element = simplebar_instance.getScrollElement(); | |
| 67 | + var content_element = simplebar_instance.getContentElement(); | |
| 68 | + | |
| 69 | + if ( | |
| 70 | + ! scroll_element | |
| 71 | + || ! content_element | |
| 72 | + || ! content_element.closest( '.wpbc_ui_el__vert_left_bar__content' ) | |
| 73 | + ) { | |
| 74 | + return; | |
| 75 | + } | |
| 76 | + | |
| 77 | + simplebar_instance.recalculate(); | |
| 78 | + | |
| 79 | + var active_item = content_element.querySelector( '.wpbc_ui_el__vert_nav_item.active' ); | |
| 80 | + | |
| 81 | + if ( ! active_item || null === active_item.offsetParent || 0 >= scroll_element.clientHeight ) { | |
| 82 | + return; | |
| 83 | + } | |
| 84 | + | |
| 85 | + var scroll_rect = scroll_element.getBoundingClientRect(); | |
| 86 | + var active_rect = active_item.getBoundingClientRect(); | |
| 87 | + var current_top = scroll_element.scrollTop; | |
| 88 | + var leading_offset = 85; | |
| 89 | + var active_top = current_top + active_rect.top - scroll_rect.top; | |
| 90 | + var target_top = active_top - leading_offset; | |
| 91 | + | |
| 92 | + var maximum_top = Math.max( 0, scroll_element.scrollHeight - scroll_element.clientHeight ); | |
| 93 | + | |
| 94 | + scroll_element.scrollTop = Math.max( 0, Math.min( Math.round( target_top ), maximum_top ) ); | |
| 95 | + } ); | |
| 96 | +} | |
| 97 | + | |
| 98 | +/** | |
| 35 | 99 | * Expand Vertical Left Bar. |
| 36 | 100 | * |
| 37 | 101 | * @param bool is_save_user_state Save this mode as user's preference. |
| 38 | 102 | */ |
| @@ -43,8 +107,9 @@ | ||
| 43 | 107 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 44 | 108 | |
| 45 | 109 | jQuery( '.wp-admin' ).removeClass( 'wpbc_page_wrapper_left_min wpbc_page_wrapper_left_max wpbc_page_wrapper_left_compact wpbc_page_wrapper_left_none' ); |
| 46 | 110 | jQuery( '.wp-admin' ).addClass( 'wpbc_page_wrapper_left_max' ); |
| 111 | + wpbc_admin_ui__sidebar_left__scroll_to_active_item(); | |
| 47 | 112 | |
| 48 | 113 | if ( is_save_user_state ) { |
| 49 | 114 | wpbc_admin_ui__sidebar_left__save_mode( 'max' ); |
| 50 | 115 | } |
| @@ -81,8 +146,9 @@ | ||
| 81 | 146 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 82 | 147 | |
| 83 | 148 | jQuery( '.wp-admin' ).removeClass( 'wpbc_page_wrapper_left_min wpbc_page_wrapper_left_max wpbc_page_wrapper_left_compact wpbc_page_wrapper_left_none' ); |
| 84 | 149 | jQuery( '.wp-admin' ).addClass( 'wpbc_page_wrapper_left_compact' ); |
| 150 | + wpbc_admin_ui__sidebar_left__scroll_to_active_item(); | |
| 85 | 151 | |
| 86 | 152 | if ( is_save_user_state ) { |
| 87 | 153 | wpbc_admin_ui__sidebar_left__save_mode( 'compact' ); |
| 88 | 154 | } |
| @@ -118,8 +184,21 @@ | ||
| 118 | 184 | // == Right Side Bar - expand / colapse functions == |
| 119 | 185 | // ===================================================================================================================== |
| 120 | 186 | |
| 121 | 187 | /** |
| 188 | + * Synchronize the document body marker for the expanded right sidebar. | |
| 189 | + * | |
| 190 | + * The marker is domain-neutral so individual administration pages can adjust | |
| 191 | + * their presentation without duplicating right-sidebar state handling. | |
| 192 | + * | |
| 193 | + * @param {boolean} is_open Whether the right sidebar is fully expanded. | |
| 194 | + * @return {void} | |
| 195 | + */ | |
| 196 | +function wpbc_admin_ui__sidebar_right__set_body_open_state( is_open ) { | |
| 197 | + jQuery( 'body' ).toggleClass( 'wpbc_ui_el__vert_right_bar__wrapper_opened', !! is_open ); | |
| 198 | +} | |
| 199 | + | |
| 200 | +/** | |
| 122 | 201 | * Expand Vertical Right Bar. |
| 123 | 202 | */ |
| 124 | 203 | function wpbc_admin_ui__sidebar_right__do_max() { |
| 125 | 204 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| @@ -125,8 +204,9 @@ | ||
| 125 | 204 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 126 | 205 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'max_right' ); |
| 127 | 206 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 128 | 207 | jQuery( '.wpbc_ui__top_nav__btn_hide_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 208 | + wpbc_admin_ui__sidebar_right__set_body_open_state( true ); | |
| 129 | 209 | } |
| 130 | 210 | |
| 131 | 211 | /** |
| 132 | 212 | * Hide Vertical Right Bar. |
| @@ -135,8 +215,9 @@ | ||
| 135 | 215 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 136 | 216 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'min_right' ); |
| 137 | 217 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 138 | 218 | jQuery( '.wpbc_ui__top_nav__btn_hide_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 219 | + wpbc_admin_ui__sidebar_right__set_body_open_state( false ); | |
| 139 | 220 | } |
| 140 | 221 | |
| 141 | 222 | /** |
| 142 | 223 | * Colapse Vertical Right Bar. |
| @@ -145,72 +226,97 @@ | ||
| 145 | 226 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 146 | 227 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'compact_right' ); |
| 147 | 228 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 148 | 229 | jQuery( '.wpbc_ui__top_nav__btn_hide_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 230 | + wpbc_admin_ui__sidebar_right__set_body_open_state( false ); | |
| 149 | 231 | } |
| 150 | 232 | |
| 151 | 233 | /** |
| 152 | 234 | * Completely Hide Vertical Right Bar. |
| 153 | 235 | */ |
| 154 | -function wpbc_admin_ui__sidebar_right__do_hide() { | |
| 155 | - jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); | |
| 156 | - jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'none_right' ); | |
| 236 | +function wpbc_admin_ui__sidebar_right__do_hide() { | |
| 237 | + jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); | |
| 238 | + jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'none_right' ); | |
| 157 | 239 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 158 | 240 | jQuery( '.wpbc_ui__top_nav__btn_hide_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 159 | 241 | // Hide top "Menu" button with divider. |
| 160 | - jQuery( '.wpbc_ui__top_nav__btn_show_right_vertical_nav,.wpbc_ui__top_nav__btn_show_right_vertical_nav_divider' ).addClass( 'wpbc_ui__hide' ); | |
| 161 | -} | |
| 162 | - | |
| 163 | -/** | |
| 164 | - * Collapse an expanded right sidebar after an opted-in page-content click. | |
| 165 | - * | |
| 166 | - * Pages enable this behavior through the page-structure | |
| 167 | - * right_vertical_sidebar__content_click_collapse_mode option. Interactive | |
| 168 | - * controls that open or retain sidebar content can opt out by placing the | |
| 169 | - * data-wpbc-right-sidebar-keep-open attribute on themselves or an ancestor. | |
| 170 | - * | |
| 171 | - * @param {jQuery.Event} event Content click event. | |
| 172 | - * @return {void} | |
| 173 | - */ | |
| 174 | -function wpbc_admin_ui__sidebar_right__collapse_from_content_click( event ) { | |
| 175 | - var $content = jQuery( event.currentTarget ); | |
| 176 | - var $wrapper = $content.closest( '.wpbc_settings_page_wrapper' ); | |
| 177 | - var collapse_mode = String( $wrapper.attr( 'data-wpbc-right-sidebar-content-click-collapse-mode' ) || '' ); | |
| 178 | - var before_collapse_event; | |
| 179 | - | |
| 180 | - if ( ! $wrapper.hasClass( 'max_right' ) || [ 'min', 'compact', 'none' ].indexOf( collapse_mode ) === -1 ) { | |
| 181 | - return; | |
| 182 | - } | |
| 183 | - if ( jQuery( event.target ).closest( '[data-wpbc-right-sidebar-keep-open]' ).length ) { | |
| 184 | - return; | |
| 185 | - } | |
| 186 | - | |
| 187 | - before_collapse_event = jQuery.Event( 'wpbc:right-sidebar-before-content-collapse' ); | |
| 188 | - $wrapper.trigger( before_collapse_event, [ event ] ); | |
| 189 | - if ( before_collapse_event.isDefaultPrevented() ) { | |
| 190 | - return; | |
| 191 | - } | |
| 192 | - | |
| 193 | - if ( 'compact' === collapse_mode ) { | |
| 194 | - wpbc_admin_ui__sidebar_right__do_compact(); | |
| 195 | - } else if ( 'none' === collapse_mode ) { | |
| 196 | - wpbc_admin_ui__sidebar_right__do_hide(); | |
| 197 | - } else { | |
| 198 | - wpbc_admin_ui__sidebar_right__do_min(); | |
| 199 | - } | |
| 200 | - | |
| 201 | - jQuery( document ).trigger( 'wpbc_setup_wizard_layout_changed' ); | |
| 202 | -} | |
| 203 | - | |
| 204 | -jQuery( document ).on( | |
| 205 | - 'click', | |
| 206 | - '.wpbc_settings_page_wrapper[data-wpbc-right-sidebar-content-click-collapse-mode] > .wpbc_settings_page_content', | |
| 207 | - wpbc_admin_ui__sidebar_right__collapse_from_content_click | |
| 208 | -); | |
| 209 | - | |
| 210 | - | |
| 211 | -/** | |
| 212 | - * Action on click "Go Back" - show root menu | |
| 242 | + jQuery( '.wpbc_ui__top_nav__btn_show_right_vertical_nav,.wpbc_ui__top_nav__btn_show_right_vertical_nav_divider' ).addClass( 'wpbc_ui__hide' ); | |
| 243 | + wpbc_admin_ui__sidebar_right__set_body_open_state( false ); | |
| 244 | +} | |
| 245 | + | |
| 246 | +/** | |
| 247 | + * Restore the body marker when a page renders with the right sidebar open. | |
| 248 | + */ | |
| 249 | +jQuery( document ).ready( function () { | |
| 250 | + wpbc_admin_ui__sidebar_right__set_body_open_state( 0 < jQuery( '.wpbc_settings_page_wrapper.max_right' ).length ); | |
| 251 | +} ); | |
| 252 | + | |
| 253 | +/** | |
| 254 | + * Collapse an expanded right sidebar after an opted-in page-content click. | |
| 255 | + * | |
| 256 | + * Pages enable this behavior through the page-structure | |
| 257 | + * right_vertical_sidebar__content_click_collapse_mode option. Interactive | |
| 258 | + * controls that open or retain sidebar content can opt out by placing the | |
| 259 | + * data-wpbc-right-sidebar-keep-open attribute on themselves or an ancestor. | |
| 260 | + * | |
| 261 | + * @param {MouseEvent} event Content click event captured before catalog rows. | |
| 262 | + * @return {void} | |
| 263 | + */ | |
| 264 | +function wpbc_admin_ui__sidebar_right__collapse_from_content_click( event ) { | |
| 265 | + var event_target = event.target && 1 === event.target.nodeType ? event.target : null; | |
| 266 | + var content_element = event_target && 'function' === typeof event_target.closest | |
| 267 | + ? event_target.closest( '.wpbc_settings_page_wrapper[data-wpbc-right-sidebar-content-click-collapse-mode] > .wpbc_settings_page_content' ) | |
| 268 | + : null; | |
| 269 | + var $content; | |
| 270 | + var $wrapper; | |
| 271 | + var collapse_mode; | |
| 272 | + var before_collapse_event; | |
| 273 | + | |
| 274 | + if ( ! content_element ) { | |
| 275 | + return; | |
| 276 | + } | |
| 277 | + | |
| 278 | + $content = jQuery( content_element ); | |
| 279 | + $wrapper = $content.closest( '.wpbc_settings_page_wrapper' ); | |
| 280 | + collapse_mode = String( $wrapper.attr( 'data-wpbc-right-sidebar-content-click-collapse-mode' ) || '' ); | |
| 281 | + | |
| 282 | + if ( ! $wrapper.hasClass( 'max_right' ) || [ 'min', 'compact', 'none' ].indexOf( collapse_mode ) === -1 ) { | |
| 283 | + return; | |
| 284 | + } | |
| 285 | + if ( jQuery( event.target ).closest( '[data-wpbc-right-sidebar-keep-open]' ).length ) { | |
| 286 | + return; | |
| 287 | + } | |
| 288 | + | |
| 289 | + /* | |
| 290 | + * This click belongs to the open-sidebar dismissal layer. Consume it before | |
| 291 | + * domain row handlers run so the same pointer action cannot close one | |
| 292 | + * inspector and immediately open another one underneath it. | |
| 293 | + */ | |
| 294 | + event.preventDefault(); | |
| 295 | + event.stopImmediatePropagation(); | |
| 296 | + | |
| 297 | + before_collapse_event = jQuery.Event( 'wpbc:right-sidebar-before-content-collapse' ); | |
| 298 | + $wrapper.trigger( before_collapse_event, [ event ] ); | |
| 299 | + if ( before_collapse_event.isDefaultPrevented() ) { | |
| 300 | + return; | |
| 301 | + } | |
| 302 | + | |
| 303 | + if ( 'compact' === collapse_mode ) { | |
| 304 | + wpbc_admin_ui__sidebar_right__do_compact(); | |
| 305 | + } else if ( 'none' === collapse_mode ) { | |
| 306 | + wpbc_admin_ui__sidebar_right__do_hide(); | |
| 307 | + } else { | |
| 308 | + wpbc_admin_ui__sidebar_right__do_min(); | |
| 309 | + } | |
| 310 | + | |
| 311 | + jQuery( document ).trigger( 'wpbc_setup_wizard_layout_changed' ); | |
| 312 | +} | |
| 313 | + | |
| 314 | +document.addEventListener( 'click', wpbc_admin_ui__sidebar_right__collapse_from_content_click, true ); | |
| 315 | + | |
| 316 | + | |
| 317 | +/** | |
| 318 | + * Action on click "Go Back" - show root menu | |
| 213 | 319 | * or some other section in right sidebar. |
| 214 | 320 | * |
| 215 | 321 | * @param string menu_to_show - menu slug. |
| 216 | 322 | */ |