BannerAd.jsx
1 year ago
CodeAd.jsx
1 year ago
Congrats.jsx
1 year ago
GoogleAdsense.jsx
1 year ago
Step1.jsx
1 year ago
BannerAd.jsx
111 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { wizard } from '@advancedAds/i18n'; |
| 5 | import { useEffect } from '@wordpress/element'; |
| 6 | |
| 7 | /** |
| 8 | * Internal Dependencies |
| 9 | */ |
| 10 | import StepFooter from '../StepFooter'; |
| 11 | |
| 12 | export default function BannerAd({ options, setOptions }) { |
| 13 | let fileFrame = null; |
| 14 | |
| 15 | const handleUpload = (event) => { |
| 16 | event.preventDefault(); |
| 17 | |
| 18 | if (fileFrame) { |
| 19 | fileFrame.uploader.uploader.param('post_id', 0); |
| 20 | fileFrame.open(); |
| 21 | return; |
| 22 | } |
| 23 | |
| 24 | fileFrame = wp.media.frames.file_frame = wp.media({ |
| 25 | title: wizard.bannerAd.mediaFrameTitle, |
| 26 | button: { |
| 27 | text: wizard.bannerAd.mediaFrameButton, |
| 28 | }, |
| 29 | multiple: false, |
| 30 | }); |
| 31 | |
| 32 | fileFrame.on('select', () => { |
| 33 | const attachment = fileFrame |
| 34 | .state() |
| 35 | .get('selection') |
| 36 | .first() |
| 37 | .toJSON(); |
| 38 | |
| 39 | setOptions('adImage', attachment); |
| 40 | }); |
| 41 | |
| 42 | fileFrame.open(); |
| 43 | }; |
| 44 | |
| 45 | useEffect(() => { |
| 46 | if (options.adImage) { |
| 47 | const fileName = options.adImage.url.split('/').pop(); |
| 48 | const maxWidth = 250; |
| 49 | const textP = document.createElement('p'); |
| 50 | textP.style.visibility = 'hidden'; |
| 51 | textP.style.whiteSpace = 'nowrap'; |
| 52 | textP.style.position = 'absolute'; |
| 53 | textP.innerText = fileName; |
| 54 | document.body.appendChild(textP); |
| 55 | const isTextLong = textP.offsetWidth > maxWidth; |
| 56 | document.body.removeChild(textP); |
| 57 | |
| 58 | setOptions('isTextLong', isTextLong); |
| 59 | } |
| 60 | }, [options.adImage]); |
| 61 | |
| 62 | return ( |
| 63 | <> |
| 64 | <h1 className={`!mt-0 ${options.adImage ? 'text-gray-300' : ''}`}> |
| 65 | {wizard.stepTitles.adImage} |
| 66 | </h1> |
| 67 | {options.adImage ? ( |
| 68 | <div className="space-y-4"> |
| 69 | <div className="flex items-center gap-5"> |
| 70 | <button |
| 71 | className="button-onboarding button-onboarding--gray" |
| 72 | onClick={handleUpload} |
| 73 | > |
| 74 | {wizard.bannerAd.mediaBtnReplace} |
| 75 | </button> |
| 76 | <div |
| 77 | className={`file-name-rtl m-0 ${options.isTextLong ? 'truncate' : ''}`} |
| 78 | > |
| 79 | <p>{options.adImage.url.split('/').pop()}</p> |
| 80 | </div> |
| 81 | <span className="dashicons dashicons-yes-alt flex items-center justify-center text-4xl w-9 h-9 text-primary"></span> |
| 82 | </div> |
| 83 | <div> |
| 84 | <h2>{wizard.bannerAd.stepHeading}</h2> |
| 85 | <input |
| 86 | type="url" |
| 87 | name="ad_image_url" |
| 88 | id="ad_image_url" |
| 89 | className="advads-input-text" |
| 90 | placeholder={wizard.bannerAd.inputPlaceholder} |
| 91 | onChange={(event) => |
| 92 | setOptions('adImageUrl', event.target.value) |
| 93 | } |
| 94 | /> |
| 95 | </div> |
| 96 | </div> |
| 97 | ) : ( |
| 98 | <button className="button-onboarding" onClick={handleUpload}> |
| 99 | {wizard.bannerAd.mediaBtnUpload} |
| 100 | </button> |
| 101 | )} |
| 102 | <StepFooter |
| 103 | isEnabled={options.adImage} |
| 104 | enableText={wizard.bannerAd.footerEnableText} |
| 105 | disableText={wizard.bannerAd.footerDisableText} |
| 106 | onNext={() => {}} |
| 107 | /> |
| 108 | </> |
| 109 | ); |
| 110 | } |
| 111 |