← All changes
|
includes/__js/admin/settings/ui_sidebar_left__actions.js
+203
-3
11.2
→
11.9
View file →
| @@ -3,11 +3,105 @@ | ||
| 3 | 3 | // == Left Bar - expand / colapse functions == |
| 4 | 4 | // ===================================================================================================================== |
| 5 | 5 | |
| 6 | 6 | /** |
| 7 | + * Save user's preferred left sidebar mode. | |
| 8 | + * | |
| 9 | + * @param string mode | |
| 10 | + */ | |
| 11 | +function wpbc_admin_ui__sidebar_left__save_mode( mode ) { | |
| 12 | + var allowed_modes = [ 'min', 'compact', 'max' ]; | |
| 13 | + | |
| 14 | + if ( allowed_modes.indexOf( mode ) === -1 ) { | |
| 15 | + return; | |
| 16 | + } | |
| 17 | + | |
| 18 | + var $saver = jQuery( '#wpbc_left_sidebar_view_mode_saver' ); | |
| 19 | + | |
| 20 | + if ( ! $saver.length ) { | |
| 21 | + return; | |
| 22 | + } | |
| 23 | + | |
| 24 | + if ( 'function' !== typeof wpbc_save_custom_user_data_from_element ) { | |
| 25 | + return; | |
| 26 | + } | |
| 27 | + | |
| 28 | + $saver.data( 'wpbc-u-save-value', mode ); | |
| 29 | + $saver.attr( 'data-wpbc-u-save-value', mode ); | |
| 30 | + | |
| 31 | + wpbc_save_custom_user_data_from_element( $saver.get( 0 ) ); | |
| 32 | +} | |
| 33 | + | |
| 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 | +/** | |
| 7 | 99 | * Expand Vertical Left Bar. |
| 100 | + * | |
| 101 | + * @param bool is_save_user_state Save this mode as user's preference. | |
| 8 | 102 | */ |
| 9 | -function wpbc_admin_ui__sidebar_left__do_max() { | |
| 103 | +function wpbc_admin_ui__sidebar_left__do_max( is_save_user_state ) { | |
| 10 | 104 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min max compact none' ); |
| 11 | 105 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'max' ); |
| 12 | 106 | jQuery( '.wpbc_ui__top_nav__btn_open_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 13 | 107 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| @@ -13,14 +107,21 @@ | ||
| 13 | 107 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 14 | 108 | |
| 15 | 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' ); |
| 16 | 110 | jQuery( '.wp-admin' ).addClass( 'wpbc_page_wrapper_left_max' ); |
| 111 | + wpbc_admin_ui__sidebar_left__scroll_to_active_item(); | |
| 112 | + | |
| 113 | + if ( is_save_user_state ) { | |
| 114 | + wpbc_admin_ui__sidebar_left__save_mode( 'max' ); | |
| 115 | + } | |
| 17 | 116 | } |
| 18 | 117 | |
| 19 | 118 | /** |
| 20 | 119 | * Hide Vertical Left Bar. |
| 120 | + * | |
| 121 | + * @param bool is_save_user_state Save this mode as user's preference. | |
| 21 | 122 | */ |
| 22 | -function wpbc_admin_ui__sidebar_left__do_min() { | |
| 123 | +function wpbc_admin_ui__sidebar_left__do_min( is_save_user_state ) { | |
| 23 | 124 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min max compact none' ); |
| 24 | 125 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'min' ); |
| 25 | 126 | jQuery( '.wpbc_ui__top_nav__btn_open_left_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 26 | 127 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| @@ -26,14 +127,20 @@ | ||
| 26 | 127 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 27 | 128 | |
| 28 | 129 | jQuery( '.wp-admin' ).removeClass( 'wpbc_page_wrapper_left_min wpbc_page_wrapper_left_max wpbc_page_wrapper_left_compact wpbc_page_wrapper_left_none' ); |
| 29 | 130 | jQuery( '.wp-admin' ).addClass( 'wpbc_page_wrapper_left_min' ); |
| 131 | + | |
| 132 | + if ( is_save_user_state ) { | |
| 133 | + wpbc_admin_ui__sidebar_left__save_mode( 'min' ); | |
| 134 | + } | |
| 30 | 135 | } |
| 31 | 136 | |
| 32 | 137 | /** |
| 33 | 138 | * Colapse Vertical Left Bar. |
| 139 | + * | |
| 140 | + * @param bool is_save_user_state Save this mode as user's preference. | |
| 34 | 141 | */ |
| 35 | -function wpbc_admin_ui__sidebar_left__do_compact() { | |
| 142 | +function wpbc_admin_ui__sidebar_left__do_compact( is_save_user_state ) { | |
| 36 | 143 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min max compact none' ); |
| 37 | 144 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'compact' ); |
| 38 | 145 | jQuery( '.wpbc_ui__top_nav__btn_open_left_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 39 | 146 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| @@ -39,8 +146,13 @@ | ||
| 39 | 146 | jQuery( '.wpbc_ui__top_nav__btn_hide_left_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 40 | 147 | |
| 41 | 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' ); |
| 42 | 149 | jQuery( '.wp-admin' ).addClass( 'wpbc_page_wrapper_left_compact' ); |
| 150 | + wpbc_admin_ui__sidebar_left__scroll_to_active_item(); | |
| 151 | + | |
| 152 | + if ( is_save_user_state ) { | |
| 153 | + wpbc_admin_ui__sidebar_left__save_mode( 'compact' ); | |
| 154 | + } | |
| 43 | 155 | } |
| 44 | 156 | |
| 45 | 157 | /** |
| 46 | 158 | * Completely Hide Vertical Left Bar. |
| @@ -72,8 +184,21 @@ | ||
| 72 | 184 | // == Right Side Bar - expand / colapse functions == |
| 73 | 185 | // ===================================================================================================================== |
| 74 | 186 | |
| 75 | 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 | +/** | |
| 76 | 201 | * Expand Vertical Right Bar. |
| 77 | 202 | */ |
| 78 | 203 | function wpbc_admin_ui__sidebar_right__do_max() { |
| 79 | 204 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| @@ -79,8 +204,9 @@ | ||
| 79 | 204 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 80 | 205 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'max_right' ); |
| 81 | 206 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 82 | 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 ); | |
| 83 | 209 | } |
| 84 | 210 | |
| 85 | 211 | /** |
| 86 | 212 | * Hide Vertical Right Bar. |
| @@ -89,8 +215,9 @@ | ||
| 89 | 215 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 90 | 216 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'min_right' ); |
| 91 | 217 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 92 | 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 ); | |
| 93 | 220 | } |
| 94 | 221 | |
| 95 | 222 | /** |
| 96 | 223 | * Colapse Vertical Right Bar. |
| @@ -99,8 +226,9 @@ | ||
| 99 | 226 | jQuery( '.wpbc_settings_page_wrapper' ).removeClass( 'min_right max_right compact_right none_right' ); |
| 100 | 227 | jQuery( '.wpbc_settings_page_wrapper' ).addClass( 'compact_right' ); |
| 101 | 228 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 102 | 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 ); | |
| 103 | 231 | } |
| 104 | 232 | |
| 105 | 233 | /** |
| 106 | 234 | * Completely Hide Vertical Right Bar. |
| @@ -111,9 +239,81 @@ | ||
| 111 | 239 | jQuery( '.wpbc_ui__top_nav__btn_open_right_vertical_nav' ).removeClass( 'wpbc_ui__hide' ); |
| 112 | 240 | jQuery( '.wpbc_ui__top_nav__btn_hide_right_vertical_nav' ).addClass( 'wpbc_ui__hide' ); |
| 113 | 241 | // Hide top "Menu" button with divider. |
| 114 | 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 ); | |
| 115 | 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 | + | |
| 116 | 316 | |
| 117 | 317 | /** |
| 118 | 318 | * Action on click "Go Back" - show root menu |
| 119 | 319 | * or some other section in right sidebar. |