Flip Animation Bug ( Animate on scroll issue actually)
If using a “flip” type animation there may be an issue where elements will appear when they shouldn’t. Such as below
The fix is below
|
1 2 3 |
.menu-item-has-children .sub-menu:not(.aos-animate) { opacity: 0; } |
Problem: Had a “option” box I was creating where there could be any number of “tags” that can be added for that option.
Solution: Created a context local to the parent/children components only, kept a separate variable to manually track how many “groups” of options has been requested by the user. Used an array of objects and updated according to index which is sent in as a prop to each set of options. Example code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// in RewriteAjaxInput.js which contains the parent and children. // variables to be used in context const [ruleArrayObject, setRuleArrayObject]=useImmer([ { optionalBase:"default1", tag:"tag1", regexPattern:"static" } ]); const [numberOfRules,setNumberOfRules]=React.useState(1); // created context <ReWriteAjaxRulesContext.Provider value={[ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]}> <ReWriteAjaxRules /> </ReWriteAjaxRulesContext.Provider> // also in same class is the button to add more sets of options // that method is below: const addRule=(e)=>{ // do something setRuleArrayObject(draft=>{draft.push( { optionalBase:"dsf", tag:"sdfsf", regexPattern:"static" } )}); setNumberOfRules(numberOfRules+1); } // it basically adds another dummy object //to the array and increases numberOfRules count to +1 |
Here are the Parent and child components
Parent:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// ReWriteAjaxRules ( parent ) import React from "react"; import ReWriteAjaxRule from "./ReWriteAjaxRule"; import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext"; "; const ReWriteAjaxRules= props=>{ const createLayout=()=>{ let result=[]; for(let i=0;i<numberOfRules;i++){ result.push(<ReWriteAjaxRule index={i} />) } return result; } return( <div> {createLayout()} </div>); } export default ReWriteAjaxRules; |
Child:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
//ReWriteAjaxRule ( child ) import React from "react"; import {InputLabel, MenuItem, Select, TextField} from "@material-ui/core"; import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext"; const ReWriteAjaxRule= props=>{ const [ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]=React.useContext(ReWriteAjaxRulesContext); const sendBaseUpdate=(e)=>{ // we do the below check on e.target.value to avoid edge cases // where rerendered elements return a null value for e.target.value let newValue=e.target.value?e.target.value:""; // uses immer instead of state so it's easier to mutate a // particular index in the array setRuleArrayObject(draft=> { draft[props.index].optionalBase = newValue; } ); } const sendTagUpdate=(e)=>{ let newValue=e.target.value?e.target.value:""; setRuleArrayObject(draft=> { draft[props.index].tag = newValue; } ); } const sendRegexPatternUpdate=(e)=>{ let newValue=e.target.value?e.target.value:""; setRuleArrayObject(draft=> { draft[props.index].regexPattern = newValue; } ); } return( <div className={"reWriteRuleRow"}> <TextField label="Base:" helperText="Optional Base of Rewrite" value={ruleArrayObject[props.index].optionalBase} onChange={sendBaseUpdate} type="text" style={{marginRight:"10px"}} /> <TextField label="GET Variable:" // helperText="Shortcode tag in the content. e.g. [tag]" value={ruleArrayObject[props.index].tag} onChange={sendTagUpdate} type="text" style={{marginLeft:"10px"}} /> <InputLabel > Get Variable Type(regex): <Select labelId="label" id="select" value={ruleArrayObject[props.index].regexPattern} onChange={sendRegexPatternUpdate} style={{marginLeft:"10px"}} > <MenuItem value="static">Static Value</MenuItem> <MenuItem value="any">Any Value</MenuItem> <MenuItem value="digit">Only digit Value</MenuItem> </Select> {/*<br/><small>Self-closing shortcode: [tag]</small>*/} {/*<br/><small>Enclosing shortcode: [tag]content[/tag]</small>*/} </InputLabel> </div>); } export default ReWriteAjaxRule; |
To be able to ref a Textfield in Material UI you have use inputRef instead of ref e.g below
|
1 2 3 |
<TextField inputRef={input => input && input.focus()} /> |
To allow users to use custom avatars and to disable gravatar, I use WP User Avatar
WP-Optimize can be used to see what database tables were made by other installed plugins.
Easy posts and the repeater modules automatically include pagination. If you want to prevent this you can add “no_found_rows=true” to the custom query.
i.e.
|
1 |
posts_per_page=5&no_rows_found=true // this will return only 5 posts with no pagination. |
If you want to edit the css for the pagination links here are the selectors.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.oxy-easy-posts-pages{ /** for the container of the pagination links **/ } .oxy-easy-posts-pages a{ /** For the clickable pagination links **/ } .page-numbers.current{ /** For the current # in the pagination **/ } a.next.page-numbers { /** for the next link (non number) **/ } a.previous.page-numbers { /** for the previous link (non number) **/ } |
Custom Conditions Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
if( function_exists('oxygen_vsb_register_condition') ) { global $oxy_condition_operators; // Condition to check if a URL parameter is present. oxygen_vsb_register_condition('Access Code', array('options'=>array(), 'custom'=>true), $oxy_condition_operators['string'], 'oxy_access_code_callback', 'Other'); function oxy_access_code_callback($value, $operator) { if( $operator == '==') { if( !empty( $_GET['access'] ) && $_GET['access'] == $value ) { return true; } else { return false; } } else if( $operator == '!=' ) { if( empty( $_GET['access'] ) || $_GET['access'] != $value ) { return true; } else { return false; } } } } |