| 1 |
/** |
| 2 |
* Internal & External dependencies. |
| 3 |
*/ |
| 4 |
import { ButtonGroup, Button, Tooltip } from '@wordpress/components'; |
| 5 |
import { useDeviceType } from '@Controls/getPreviewType'; |
| 6 |
import { __, sprintf } from '@wordpress/i18n'; |
| 7 |
import { useState, useCallback } from '@wordpress/element' |
| 8 |
import { dispatch, select } from '@wordpress/data' |
| 9 |
import getUAGEditorStateLocalStorage from '@Controls/getUAGEditorStateLocalStorage'; |
| 10 |
|
| 11 |
const ResponsiveToggle = props => { |
| 12 |
const { label, responsive } = props; |
| 13 |
const deviceType = useDeviceType() |
| 14 |
const [ displayResponsive, toggleResponsive ] = useState( false ); |
| 15 |
|
| 16 |
const customSetPreviewDeviceType = useCallback( device => { |
| 17 |
if( null !== dispatch( 'core/edit-post' ) ){ |
| 18 |
const { |
| 19 |
__experimentalSetPreviewDeviceType: setPreviewDeviceType, |
| 20 |
} = dispatch( 'core/edit-post' ) |
| 21 |
setPreviewDeviceType( device ); |
| 22 |
} |
| 23 |
toggleResponsive( displayResponsive ); |
| 24 |
}, [] ) |
| 25 |
|
| 26 |
const devicesSvgs = { |
| 27 |
desktop: ( |
| 28 |
<svg |
| 29 |
width="8" |
| 30 |
height="7" |
| 31 |
viewBox="0 0 8 7" |
| 32 |
xmlns="http://www.w3.org/2000/svg" |
| 33 |
> |
| 34 |
<path d="M7.33333 0H0.666667C0.298611 0 0 0.293945 0 0.65625V5.03125C0 5.39355 0.298611 5.6875 0.666667 5.6875H3.33333L3.11111 6.34375H2.11111C1.92639 6.34375 1.77778 6.49004 1.77778 6.67188C1.77778 6.85371 1.92639 7 2.11111 7H5.88889C6.07361 7 6.22222 6.85371 6.22222 6.67188C6.22222 6.49004 6.07361 6.34375 5.88889 6.34375H4.88889L4.66667 5.6875H7.33333C7.70139 5.6875 8 5.39355 8 5.03125V0.65625C8 0.293945 7.70139 0 7.33333 0ZM7.11111 4.8125H0.888889V0.875H7.11111V4.8125Z" /> |
| 35 |
</svg> |
| 36 |
), |
| 37 |
tablet: ( |
| 38 |
<svg |
| 39 |
width="6" |
| 40 |
height="7" |
| 41 |
viewBox="0 0 6 7" |
| 42 |
xmlns="http://www.w3.org/2000/svg" |
| 43 |
> |
| 44 |
<path d="M5 0H1C0.446667 0 0 0.390833 0 0.875V6.125C0 6.60917 0.446667 7 1 7H5C5.55333 7 6 6.60917 6 6.125V0.875C6 0.390833 5.55333 0 5 0ZM3.66667 6.41667H2.33333V6.125H3.66667V6.41667ZM5.41667 5.54167H0.583333V0.875H5.41667V5.54167Z" /> |
| 45 |
</svg> |
| 46 |
), |
| 47 |
mobile: ( |
| 48 |
<svg |
| 49 |
width="4" |
| 50 |
height="7" |
| 51 |
viewBox="0 0 4 7" |
| 52 |
xmlns="http://www.w3.org/2000/svg" |
| 53 |
> |
| 54 |
<path d="M3.33333 0H0.666667C0.297778 0 0 0.390833 0 0.875V6.125C0 6.60917 0.297778 7 0.666667 7H3.33333C3.70222 7 4 6.60917 4 6.125V0.875C4 0.390833 3.70222 0 3.33333 0ZM2.44444 6.41667H1.55556V6.125H2.44444V6.41667ZM3.61111 5.54167H0.388889V0.875H3.61111V5.54167Z" /> |
| 55 |
</svg> |
| 56 |
), |
| 57 |
}; |
| 58 |
const devices = [ |
| 59 |
{ |
| 60 |
name: __( 'Desktop', 'ultimate-addons-for-gutenberg' ), |
| 61 |
staticName: 'Desktop', |
| 62 |
title: devicesSvgs.desktop, |
| 63 |
itemClass: 'uagb-desktop-tab uagb-responsive-tabs', |
| 64 |
}, |
| 65 |
{ |
| 66 |
name: __( 'Tablet', 'ultimate-addons-for-gutenberg' ), |
| 67 |
staticName: 'Tablet', |
| 68 |
title: devicesSvgs.tablet, |
| 69 |
itemClass: 'uagb-tablet-tab uagb-responsive-tabs', |
| 70 |
}, |
| 71 |
{ |
| 72 |
name: __( 'Mobile', 'ultimate-addons-for-gutenberg' ), |
| 73 |
staticName: 'Mobile', |
| 74 |
key: 'mobile', |
| 75 |
title: devicesSvgs.mobile, |
| 76 |
itemClass: 'uagb-mobile-tab uagb-responsive-tabs', |
| 77 |
}, |
| 78 |
]; |
| 79 |
|
| 80 |
// In the Widget editor, the device type is always set to desktop. |
| 81 |
if ( ! deviceType ) { |
| 82 |
return null |
| 83 |
} |
| 84 |
|
| 85 |
const commonResponsiveHandler = ( e ) => { |
| 86 |
|
| 87 |
// This code is to fix the side-effect of the editor responsive click settings panel refresh issue. |
| 88 |
let eventTriggerElement = e.target; |
| 89 |
let settingsPopup = null; |
| 90 |
|
| 91 |
if ( 'svg' === eventTriggerElement.tagName ) { |
| 92 |
eventTriggerElement = eventTriggerElement.closest( '.uag-responsive-common-button' ); |
| 93 |
} |
| 94 |
if ( eventTriggerElement.closest( '.uag-typography-options.active' ) ) { |
| 95 |
|
| 96 |
settingsPopup = '.uag-typography-options'; |
| 97 |
} |
| 98 |
if ( eventTriggerElement.closest( '.uag-box-shadow-options.active' ) ) { |
| 99 |
|
| 100 |
settingsPopup = '.uag-box-shadow-options'; |
| 101 |
} |
| 102 |
const { getSelectedBlock } = select( 'core/block-editor' ); |
| 103 |
const blockName = getSelectedBlock()?.name; |
| 104 |
const uagSettingState = getUAGEditorStateLocalStorage( 'uagSettingState' ); |
| 105 |
|
| 106 |
const inspectorTab = eventTriggerElement.closest( '.uagb-inspector-tab' ); |
| 107 |
const panelBody = eventTriggerElement.closest( '.components-panel__body.is-opened' ); |
| 108 |
let panelBodyClass = ''; |
| 109 |
|
| 110 |
if ( panelBody.classList && 0 !== panelBody.classList ) { |
| 111 |
panelBody.classList.forEach( ( className ) => { |
| 112 |
if ( className.includes( 'uag-advance-panel-body' ) ) { |
| 113 |
panelBodyClass = className; |
| 114 |
} |
| 115 |
} ); |
| 116 |
} |
| 117 |
|
| 118 |
let inspectorTabName = 'style'; |
| 119 |
if ( inspectorTab.classList.contains( 'uagb-tab-content-general' ) ) { |
| 120 |
inspectorTabName = 'general'; |
| 121 |
} |
| 122 |
if ( inspectorTab.classList.contains( 'uagb-tab-content-advance' ) ) { |
| 123 |
inspectorTabName = 'advance'; |
| 124 |
} |
| 125 |
|
| 126 |
const data = { |
| 127 |
...uagSettingState, |
| 128 |
[blockName] : { |
| 129 |
selectedTab : inspectorTabName, |
| 130 |
selectedPanel : panelBodyClass, |
| 131 |
selectedSetting : settingsPopup |
| 132 |
} |
| 133 |
} |
| 134 |
|
| 135 |
const uagLocalStorage = getUAGEditorStateLocalStorage(); |
| 136 |
if ( uagLocalStorage ) { |
| 137 |
uagLocalStorage.setItem( 'uagSettingState', JSON.stringify( data ) ); |
| 138 |
} |
| 139 |
|
| 140 |
// Above Section Ends. |
| 141 |
toggleResponsive( ! displayResponsive ); |
| 142 |
}; |
| 143 |
|
| 144 |
return ( |
| 145 |
<div className="uag-responsive-label-wrap"> |
| 146 |
{ label && ( |
| 147 |
<span className="uag-control-label">{ label }</span> |
| 148 |
) } |
| 149 |
{ ! displayResponsive && responsive && ( |
| 150 |
<Button |
| 151 |
key="uag-responsive-common-button" |
| 152 |
className="uag-responsive-common-button" |
| 153 |
onClick={ commonResponsiveHandler } |
| 154 |
> |
| 155 |
{ devicesSvgs[ deviceType.toLowerCase() ] } |
| 156 |
</Button> |
| 157 |
) } |
| 158 |
{ displayResponsive && responsive && ( |
| 159 |
<ButtonGroup |
| 160 |
className="uagb-range-control-responsive components-tab-panel__tabs" |
| 161 |
aria-label={ __( |
| 162 |
'Device', |
| 163 |
'ultimate-addons-for-gutenberg' |
| 164 |
) } |
| 165 |
> |
| 166 |
{ devices.map( |
| 167 |
( { name, staticName, key, title, itemClass } ) => ( |
| 168 |
<Tooltip |
| 169 |
text={ sprintf( |
| 170 |
/* translators: abbreviation for units */ |
| 171 |
'%s', |
| 172 |
name |
| 173 |
) } |
| 174 |
key={key} |
| 175 |
> |
| 176 |
<Button |
| 177 |
key={ key } |
| 178 |
className={ `components-button components-tab-panel__tabs-item ${ itemClass }${ |
| 179 |
staticName === deviceType |
| 180 |
? ' active-tab' |
| 181 |
: '' |
| 182 |
}` } |
| 183 |
aria-pressed={ deviceType === staticName } |
| 184 |
onClick={ () => |
| 185 |
customSetPreviewDeviceType( |
| 186 |
staticName |
| 187 |
) |
| 188 |
} |
| 189 |
> |
| 190 |
{ title } |
| 191 |
</Button> |
| 192 |
</Tooltip> |
| 193 |
) |
| 194 |
) } |
| 195 |
</ButtonGroup> |
| 196 |
) } |
| 197 |
</div> |
| 198 |
) |
| 199 |
} |
| 200 |
|
| 201 |
export default ResponsiveToggle |
| 202 |
|
