bottom.js
3 months ago
contextual.js
3 months ago
element.js
3 months ago
side.js
3 months ago
top.js
3 months ago
contextual.js
126 lines
| 1 | jQuery( document ).ready( function( $ ) { |
| 2 | const data = typeof helpdocs_contextual !== 'undefined' ? helpdocs_contextual : {}; |
| 3 | const docs = data.docs || []; |
| 4 | |
| 5 | if ( docs.length === 0 ) return; |
| 6 | |
| 7 | // Use an interval to find the toolbar since Gutenberg header renders dynamically |
| 8 | const findGutenbergHeader = setInterval( function() { |
| 9 | const $toolbarSettings = $( '.edit-post-header__settings, .editor-header__settings' ); |
| 10 | |
| 11 | if ( $toolbarSettings.length ) { |
| 12 | clearInterval( findGutenbergHeader ); |
| 13 | initHelpPopover( $toolbarSettings ); |
| 14 | } |
| 15 | }, 500 ); |
| 16 | |
| 17 | function initHelpPopover( $toolbarSettings ) { |
| 18 | // 1. Create the Single "Help" Button |
| 19 | const $button = $( '<button>', { |
| 20 | type: 'button', |
| 21 | 'aria-pressed': 'false', |
| 22 | id: 'helpdocs_main_help_btn', |
| 23 | class: 'components-button is-primary helpdocs-contextual-btn', |
| 24 | html: 'Help', |
| 25 | css: { marginRight: '8px' } |
| 26 | } ); |
| 27 | |
| 28 | $toolbarSettings.prepend( $button ); |
| 29 | |
| 30 | // 2. Create the Popover Slot |
| 31 | const $slot = $( '<div>', { class: 'popover-slot' } ); |
| 32 | $( '.edit-post-header, .editor-header' ).append( $slot ); |
| 33 | |
| 34 | // 3. Create the Popover Container with Animation Styles |
| 35 | const $container = $( '<div>', { |
| 36 | id: 'helpdocs_main_popover', |
| 37 | class: 'components-popover components-dropdown__content helpdocs_popover', |
| 38 | css: { |
| 39 | position: 'absolute', |
| 40 | right: '300px', |
| 41 | top: '60px', |
| 42 | zIndex: '100000', |
| 43 | opacity: '1', |
| 44 | transform: 'translateY(0em) scale(0) translateZ(0px)', |
| 45 | transformOrigin: 'top center 0px', |
| 46 | transitionTimingFunction: 'ease-in', |
| 47 | transition: '0.1s', |
| 48 | display: 'none' |
| 49 | } |
| 50 | } ); |
| 51 | |
| 52 | // 4. Create Inner Wrapper (for the multiple docs) |
| 53 | const $innerContent = $( '<div>', { |
| 54 | class: 'components-popover__content', |
| 55 | css: { |
| 56 | width: '600px', |
| 57 | maxHeight: '80vh', |
| 58 | overflow: 'auto', |
| 59 | backgroundColor: '#fff', |
| 60 | color: '#000', |
| 61 | padding: '16px', |
| 62 | border: '1px solid #ccc', |
| 63 | boxShadow: '0 2px 10px rgba(0,0,0,0.1)' |
| 64 | } |
| 65 | } ); |
| 66 | |
| 67 | // Loop through docs and append to inner wrapper |
| 68 | $.each( docs, function( index, doc ) { |
| 69 | const $docWrapper = $( '<div id="helpdocs_doc_' + doc.id + '">' ); |
| 70 | if ( index > 0 ) { |
| 71 | $docWrapper.css( { |
| 72 | marginTop: '20px', |
| 73 | paddingTop: '20px', |
| 74 | borderTop: '1px solid #eee' |
| 75 | } ); |
| 76 | } |
| 77 | |
| 78 | const $titleEl = $( '<div>', { |
| 79 | css: { fontSize: '1.2rem', fontWeight: 'bold', marginBottom: '10px' }, |
| 80 | html: doc.title |
| 81 | } ); |
| 82 | |
| 83 | const $contentEl = $( '<div>', { html: doc.content } ); |
| 84 | |
| 85 | $docWrapper.append( $titleEl ).append( $contentEl ); |
| 86 | $innerContent.append( $docWrapper ); |
| 87 | } ); |
| 88 | |
| 89 | $container.append( $innerContent ); |
| 90 | |
| 91 | // 5. Toggle Logic with Animation |
| 92 | $button.on( 'click', function( e ) { |
| 93 | e.stopPropagation(); |
| 94 | |
| 95 | if ( $button.attr( 'aria-pressed' ) === 'false' ) { |
| 96 | // Show |
| 97 | $container.css( 'display', 'block' ); |
| 98 | $slot.append( $container ); |
| 99 | |
| 100 | // Trigger animation frame |
| 101 | setTimeout( function() { |
| 102 | $container.css( 'transform', 'translateY(0em) scale(1) translateZ(0px)' ); |
| 103 | }, 10 ); |
| 104 | |
| 105 | $button.attr( 'aria-pressed', 'true' ); |
| 106 | } else { |
| 107 | // Hide |
| 108 | $container.css( 'transform', 'translateY(0em) scale(0) translateZ(0px)' ); |
| 109 | setTimeout( function() { |
| 110 | $container.hide().detach(); |
| 111 | }, 100 ); |
| 112 | |
| 113 | $button.attr( 'aria-pressed', 'false' ); |
| 114 | } |
| 115 | } ); |
| 116 | |
| 117 | // 6. Close on outside click |
| 118 | $( document ).on( 'click', function( e ) { |
| 119 | if ( $button.attr( 'aria-pressed' ) === 'true' ) { |
| 120 | if ( ! $( e.target ).closest( '#helpdocs_main_popover' ).length && ! $( e.target ).is( $button ) ) { |
| 121 | $button.trigger( 'click' ); |
| 122 | } |
| 123 | } |
| 124 | } ); |
| 125 | } |
| 126 | } ); |