notification-tester.js
100 lines
| 1 | const createEditor = () => { |
| 2 | const wrap = document.createElement( 'div' ); |
| 3 | wrap.id = 'qwerty'; |
| 4 | wrap.style = `position:fixed;z-index:99999;bottom:20px;left:${ |
| 5 | document.getElementById( 'adminmenuwrap' ).clientWidth + 22 |
| 6 | }px`; |
| 7 | |
| 8 | const inner = document.createElement( 'div' ); |
| 9 | inner.style = 'height:0;overflow:hidden;'; |
| 10 | |
| 11 | const content = document.createElement( 'div' ); |
| 12 | content.style = |
| 13 | 'width:640px;height:322px;background-color:#f0f0f0;border:1px solid #a6a6a6;padding:20px'; |
| 14 | |
| 15 | const icon = document.createElement( 'i' ); |
| 16 | icon.style = 'position:absolute;top:-35px;left:5px;cursor:pointer'; |
| 17 | icon.className = 'dashicons dashicons-plus-alt2'; |
| 18 | icon.id = 'show-tester'; |
| 19 | |
| 20 | const desc = document.createElement( 'p' ); |
| 21 | desc.style = 'background-color:#fbfbfb;padding:1em'; |
| 22 | desc.innerHTML = |
| 23 | '<i class="dashicons dashicons-info"></i>Please don\'t use HTML tags other than links'; |
| 24 | |
| 25 | const text = document.createElement( 'textarea' ); |
| 26 | text.style = 'resize:none;width:100%;height:210px'; |
| 27 | |
| 28 | const type = document.createElement( 'select' ); |
| 29 | type.innerHTML = |
| 30 | '<option value="addError">Error</option><option value="addInfo">Info</option><option value="addSuccess">Success</option>'; |
| 31 | |
| 32 | const label = document.createElement( 'label' ); |
| 33 | label.innerText = 'Type: '; |
| 34 | label.className = 'alignleft'; |
| 35 | label.append( type ); |
| 36 | |
| 37 | const create = document.createElement( 'button' ); |
| 38 | create.className = 'button button-primary alignright'; |
| 39 | create.innerText = 'Create notification'; |
| 40 | create.addEventListener( 'click', () => createNotification( text.value ) ); |
| 41 | |
| 42 | const createNotification = ( str ) => { |
| 43 | if ( ! str.length ) { |
| 44 | return; |
| 45 | } |
| 46 | window.advancedAds.notifications[ type.value ]( str ); |
| 47 | }; |
| 48 | |
| 49 | wrap.append( icon ); |
| 50 | inner.append( content ); |
| 51 | content.append( desc ); |
| 52 | content.append( text ); |
| 53 | content.append( label ); |
| 54 | content.append( create ); |
| 55 | wrap.append( inner ); |
| 56 | |
| 57 | let busy = false; |
| 58 | |
| 59 | icon.addEventListener( 'click', ( ev ) => { |
| 60 | if ( busy ) { |
| 61 | return; |
| 62 | } |
| 63 | busy = true; |
| 64 | ev.target.classList.toggle( 'dashicons-plus-alt2' ); |
| 65 | ev.target.classList.toggle( 'dashicons-minus' ); |
| 66 | |
| 67 | const anim = new window.Animation( |
| 68 | new window.KeyframeEffect( |
| 69 | inner, |
| 70 | { |
| 71 | height: inner.clientHeight === 0 ? '365px' : 0, |
| 72 | }, |
| 73 | { |
| 74 | duration: 250, |
| 75 | easing: 'ease-in-out', |
| 76 | iterations: 1, |
| 77 | fill: 'forwards', |
| 78 | } |
| 79 | ) |
| 80 | ); |
| 81 | |
| 82 | anim.onfinish = () => { |
| 83 | busy = false; |
| 84 | }; |
| 85 | |
| 86 | anim.play(); |
| 87 | } ); |
| 88 | |
| 89 | document.getElementById( 'wpwrap' ).append( wrap ); |
| 90 | }; |
| 91 | |
| 92 | export default () => { |
| 93 | if ( |
| 94 | 'notifications' === |
| 95 | new URLSearchParams( window.location.search ).get( 'aa-debug' ) |
| 96 | ) { |
| 97 | createEditor(); |
| 98 | } |
| 99 | }; |
| 100 |