widget-options
/
includes
/
widgets
/
gutenberg
/
src
/
attributes
/
components
/
option-tabs
/
roles.js
widget-options
/
includes
/
widgets
/
gutenberg
/
src
/
attributes
/
components
/
option-tabs
Last commit date
alignment.js
1 year ago
animation.js
1 year ago
behavior.js
1 year ago
columns.js
1 year ago
days-dates.js
1 year ago
devices.js
1 year ago
roles.js
1 year ago
settings.js
1 year ago
styling.js
1 year ago
visibility.js
1 year ago
roles.js
256 lines
| 1 | import { __ } from "@wordpress/i18n"; |
| 2 | import { TabPanel } from "@wordpress/components"; |
| 3 | |
| 4 | const onSelect = (tabName) => {}; |
| 5 | |
| 6 | const RolesTabPanel = (props) => { |
| 7 | const validLicense = true; |
| 8 | let validLicenseClass = props.validLicense ? "" : "disabled-section"; |
| 9 | let widget_options = { ...props.widgetopts_get_settings }; |
| 10 | let tablet = ""; |
| 11 | let mobile = ""; |
| 12 | let desktop_clear = ""; |
| 13 | let tablet_clear = ""; |
| 14 | let mobile_clear = ""; |
| 15 | let options_role = ""; |
| 16 | let roles = |
| 17 | props.widgetopts_ajax_roles_search != undefined && |
| 18 | props.widgetopts_ajax_roles_search.results != undefined |
| 19 | ? props.widgetopts_ajax_roles_search.results |
| 20 | : []; |
| 21 | |
| 22 | /* alignment onchange event handler */ |
| 23 | const handleInputChangeState = (event) => { |
| 24 | let _attribute = { ...props.extended_widget_opts }; |
| 25 | if ( |
| 26 | _attribute["roles"] == undefined || |
| 27 | (_attribute["roles"] != undefined && _attribute["roles"].length == 0) |
| 28 | ) { |
| 29 | _attribute["roles"] = {}; |
| 30 | } |
| 31 | |
| 32 | _attribute["roles"]["state"] = event.target.value; |
| 33 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 34 | }; |
| 35 | |
| 36 | const handleInputChangeRolesSelected = (event) => { |
| 37 | let _attribute = { ...props.extended_widget_opts }; |
| 38 | if ( |
| 39 | _attribute["roles"] == undefined || |
| 40 | (_attribute["roles"] != undefined && _attribute["roles"].length == 0) |
| 41 | ) { |
| 42 | _attribute["roles"] = {}; |
| 43 | } |
| 44 | |
| 45 | _attribute["roles"]["selected"] = event.target.value; |
| 46 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 47 | }; |
| 48 | |
| 49 | const handleInputChangeSelector2 = (event, key1, key2) => { |
| 50 | let _attribute = { ...props.extended_widget_opts }; |
| 51 | if ( |
| 52 | _attribute[key1] == undefined || |
| 53 | (_attribute[key1] != undefined && _attribute[key1].length == 0) |
| 54 | ) { |
| 55 | _attribute[key1] = {}; |
| 56 | } |
| 57 | |
| 58 | if ( |
| 59 | _attribute[key1][key2] == undefined || |
| 60 | (_attribute[key1][key2] != undefined && |
| 61 | _attribute[key1][key2].length == 0) |
| 62 | ) { |
| 63 | _attribute[key1][key2] = []; |
| 64 | } |
| 65 | |
| 66 | let _options = []; |
| 67 | for (let i = 0; i < event.target.options.length; i++) { |
| 68 | if (event.target.options[i].selected) { |
| 69 | _options.push(event.target.options[i].value); |
| 70 | } |
| 71 | } |
| 72 | _attribute[key1][key2] = [..._options]; |
| 73 | |
| 74 | let _newList = _attribute[key1][key2].filter((c, index) => { |
| 75 | return _attribute[key1][key2].indexOf(c) === index; |
| 76 | }); |
| 77 | _attribute[key1][key2] = _newList; |
| 78 | |
| 79 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 80 | }; |
| 81 | |
| 82 | const checkLicense = (isLicenseValid) => { |
| 83 | if (isLicenseValid) { |
| 84 | return ""; |
| 85 | } else { |
| 86 | return ( |
| 87 | <div className="extended-widget-opts-demo-warning"> |
| 88 | <p className="widgetopts-unlock-features"> |
| 89 | <span className="dashicons dashicons-lock"></span> |
| 90 | <br /> |
| 91 | Unlock all Features |
| 92 | <br /> |
| 93 | <a |
| 94 | href="https://widget-options.com/?utm_source=wordpressadmin&utm_medium=widgettabs&utm_campaign=widgetoptsprotab" |
| 95 | className="button-primary" |
| 96 | target="_blank" |
| 97 | > |
| 98 | Learn More |
| 99 | </a> |
| 100 | </p> |
| 101 | </div> |
| 102 | ); |
| 103 | } |
| 104 | }; |
| 105 | |
| 106 | const checkState = (widgetoptsState) => { |
| 107 | if (widgetoptsState != undefined && widgetoptsState == "activate") { |
| 108 | return ( |
| 109 | <div> |
| 110 | <p |
| 111 | className="widgetopts-subtitle" |
| 112 | style={{ "padding-top": "0", "margin-top": "10px" }} |
| 113 | > |
| 114 | {__("User Login State")} |
| 115 | </p> |
| 116 | <p style={{ "margin-bottom": "0px" }}> |
| 117 | <small> |
| 118 | {__( |
| 119 | "Restrict widget visibility for logged-in and logged-out users. " |
| 120 | )} |
| 121 | </small> |
| 122 | </p> |
| 123 | <p> |
| 124 | <select |
| 125 | className="widefat" |
| 126 | name={"extended_widget_opts[roles][state]"} |
| 127 | onChange={handleInputChangeState} |
| 128 | value={ |
| 129 | props.extended_widget_opts["roles"] != undefined |
| 130 | ? props.extended_widget_opts["roles"]["state"] |
| 131 | : "" |
| 132 | } |
| 133 | > |
| 134 | <option value="">{__("Select Visibility Option")}</option> |
| 135 | <option value="in">{__("Show only for Logged-in Users")}</option> |
| 136 | <option value="out"> |
| 137 | {__("Show only for Logged-out Users")} |
| 138 | </option> |
| 139 | </select> |
| 140 | </p> |
| 141 | </div> |
| 142 | ); |
| 143 | } else { |
| 144 | return ""; |
| 145 | } |
| 146 | }; |
| 147 | |
| 148 | const checkRoles = (widgetoptsRoles) => { |
| 149 | return ( |
| 150 | <div> |
| 151 | {checkLicense(props.validLicense)} |
| 152 | |
| 153 | <p style={{ "margin-top": "30px" }} className="widgetopts-subtitle"> |
| 154 | {__("User Roles")} |
| 155 | </p> |
| 156 | <p> |
| 157 | <small>{__("Restrict widget visibility per user roles.")}</small> |
| 158 | </p> |
| 159 | |
| 160 | <p> |
| 161 | <strong>{__("Hide/Show")}</strong> |
| 162 | <select |
| 163 | className="widefat" |
| 164 | name={"extended_widget_opts[roles][options]"} |
| 165 | value={""} |
| 166 | > |
| 167 | <option value="hide">{__("Hide on searched roles")}</option> |
| 168 | <option value="show">{__("Show on searched roles")}</option> |
| 169 | </select> |
| 170 | </p> |
| 171 | |
| 172 | <div |
| 173 | className="extended-widget-opts-inner-roles" |
| 174 | style={{ |
| 175 | maxHeight: "230px", |
| 176 | padding: "5px 0px", |
| 177 | overflow: "auto", |
| 178 | }} |
| 179 | > |
| 180 | <p className="extended-widget-opts-parent-option"> |
| 181 | <strong>{__("Roles")}</strong> |
| 182 | <br /> |
| 183 | <small>{__("Search for Roles")}</small> |
| 184 | <br /> |
| 185 | <div style={{ "margin-bottom": "10px" }}> |
| 186 | <button |
| 187 | type="button" |
| 188 | class="widgetopts-search-option-btn" |
| 189 | style={{ |
| 190 | width: "75px", |
| 191 | "background-color": "#3D434A", |
| 192 | color: "#fff", |
| 193 | "border-radius": "10px 0px 0 10px", |
| 194 | border: "1.5px solid #3D434A", |
| 195 | }} |
| 196 | > |
| 197 | Search |
| 198 | </button> |
| 199 | <button |
| 200 | type="button" |
| 201 | class="widgetopts-dropdown-option-btn" |
| 202 | style={{ |
| 203 | "margin-left": "-5px", |
| 204 | width: "75px", |
| 205 | "border-radius": "0 10px 10px 0", |
| 206 | color: "#777A80", |
| 207 | "background-color": "#fff", |
| 208 | border: "1.5px solid #777A80", |
| 209 | }} |
| 210 | > |
| 211 | Checkbox |
| 212 | </button> |
| 213 | </div> |
| 214 | <select |
| 215 | className="widefat widgetopts-select2 extended-widget-opts-roles-dropdown extended-widget-opts-select2-dropdown" |
| 216 | name={"extended_widget_opts[roles][selected][]"} |
| 217 | data-namespace={"extended_widget_opts-" + props.widgetId + ""} |
| 218 | multiple="multiple" |
| 219 | ></select> |
| 220 | </p> |
| 221 | </div> |
| 222 | </div> |
| 223 | ); |
| 224 | }; |
| 225 | |
| 226 | const checkSelectedRoles = (role, id, roleInfo) => { |
| 227 | if (role != undefined && role.includes(id)) { |
| 228 | return ( |
| 229 | <option value={id} selected> |
| 230 | {roleInfo.text} |
| 231 | </option> |
| 232 | ); |
| 233 | } else { |
| 234 | return <option value={id}>{roleInfo.text}</option>; |
| 235 | } |
| 236 | }; |
| 237 | |
| 238 | return ( |
| 239 | <div |
| 240 | id={"extended-widget-opts-tab-" + props.widgetId + "-roles"} |
| 241 | className={ |
| 242 | "extended-widget-opts-tabcontent extended-widget-opts-tabcontent-roles " |
| 243 | } |
| 244 | style={{ "margin-left": "16px" }} |
| 245 | > |
| 246 | {checkState(widget_options["state"])} |
| 247 | |
| 248 | <div className={validLicenseClass}> |
| 249 | {checkRoles(widget_options["roles"])} |
| 250 | </div> |
| 251 | </div> |
| 252 | ); |
| 253 | }; |
| 254 | |
| 255 | export default RolesTabPanel; |
| 256 |