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