widgetopts-tab.js
128 lines
| 1 | const { __ } = wp.i18n; |
| 2 | |
| 3 | import { Panel, PanelBody, PanelRow } from "@wordpress/components"; |
| 4 | import WidgetOptionsPanel from "./widgetopts-panel"; |
| 5 | |
| 6 | const onSelect = (tabName, props) => {}; |
| 7 | |
| 8 | const WidgetOptionsTab = (props) => { |
| 9 | let widget_options = { ...props.widgetopts_get_settings }; |
| 10 | let is_customizer = document.body.classList.contains("wp-customizer"); |
| 11 | |
| 12 | var _tabs = [ |
| 13 | { |
| 14 | name: "visibility", |
| 15 | title: "Page Visibility", |
| 16 | className: "tab-visibility", |
| 17 | icon: "visibility", |
| 18 | active: |
| 19 | widget_options["visibility"] == "activate" && props.editor == "widget", |
| 20 | }, |
| 21 | { |
| 22 | name: "columns", |
| 23 | title: "Columns", |
| 24 | className: "tab-columns", |
| 25 | icon: "grid-view", |
| 26 | active: props.editor == "widget", |
| 27 | }, |
| 28 | { |
| 29 | name: "alignment", |
| 30 | title: "Alignment", |
| 31 | className: "tab-alignment", |
| 32 | icon: "editor-aligncenter", |
| 33 | active: |
| 34 | widget_options["alignment"] == "activate" && |
| 35 | (props.editor == "post" || is_customizer), //will be remove in gutenberg |
| 36 | }, |
| 37 | { |
| 38 | name: "role", |
| 39 | title: "Roles", |
| 40 | className: "tab-role", |
| 41 | icon: "admin-users", |
| 42 | active: widget_options["roles"] == "activate", |
| 43 | }, |
| 44 | { |
| 45 | name: "devices", |
| 46 | title: "Devices", |
| 47 | className: "tab-devices", |
| 48 | icon: "smartphone", |
| 49 | active: widget_options["devices"] == "activate", |
| 50 | }, |
| 51 | { |
| 52 | name: "dates", |
| 53 | title: "Days & Dates", |
| 54 | className: "tab-dates", |
| 55 | icon: "calendar-alt", |
| 56 | active: true, //widget_options["dates"] == "activate", |
| 57 | }, |
| 58 | { |
| 59 | name: "styling", |
| 60 | title: "Styling", |
| 61 | className: "tab-styling", |
| 62 | icon: "art", |
| 63 | active: true && props.editor == "widget", //widget_options["styling"] == "activate" && props.editor == "widget", |
| 64 | }, |
| 65 | { |
| 66 | name: "behavior", |
| 67 | title: "Behavior", |
| 68 | className: "tab-behavior", |
| 69 | icon: "admin-generic", |
| 70 | active: widget_options["classes"] == "activate", |
| 71 | }, |
| 72 | { |
| 73 | name: "logic", |
| 74 | title: props.editor == "widget" ? "Logic & ACF" : "Logic", |
| 75 | className: "tab-logic", |
| 76 | icon: "code-standards", |
| 77 | active: |
| 78 | widget_options["logic"] == "activate" || |
| 79 | (props.editor == "widget" && widget_options["acf"] == "activate"), |
| 80 | }, |
| 81 | { |
| 82 | name: "animation", |
| 83 | title: "Animation", |
| 84 | className: "tab-animation", |
| 85 | icon: "admin-customizer", |
| 86 | active: widget_options["animation"] == "activate", |
| 87 | }, |
| 88 | ]; |
| 89 | |
| 90 | var tabs = _tabs.filter(function (value, index) { |
| 91 | if (value.active) { |
| 92 | return true; |
| 93 | } |
| 94 | return false; |
| 95 | }); |
| 96 | |
| 97 | return tabs.map(function (tab, index) { |
| 98 | return ( |
| 99 | <Panel |
| 100 | className={ |
| 101 | "widgetopts-tab-panel extended-widget-opts-tabs ui-tabs ui-corner-all ui-widget ui-widget-content " + |
| 102 | tab.className + |
| 103 | "" |
| 104 | } |
| 105 | activeClass="active-tab" |
| 106 | onSelect={(tabName) => onSelect(tabName, props)} |
| 107 | > |
| 108 | <PanelBody |
| 109 | title={__(tab.title)} |
| 110 | initialOpen={false} |
| 111 | icon={tab.icon} |
| 112 | scrollAfterOpen="true" |
| 113 | > |
| 114 | <PanelRow> |
| 115 | <WidgetOptionsPanel |
| 116 | tabName={tab.name} |
| 117 | {...props} |
| 118 | is_customizer={is_customizer} |
| 119 | /> |
| 120 | </PanelRow> |
| 121 | </PanelBody> |
| 122 | </Panel> |
| 123 | ); |
| 124 | }); |
| 125 | }; |
| 126 | |
| 127 | export default WidgetOptionsTab; |
| 128 |