Background overlay on mobile for Oxygen builder

Posted in CSS, Design, Development, Oxygen, PHP, WordPress on July 24, 2020 by rowej83.

In Oxygen, you can apply a background image as well as an image overlay within the options. However, these settings can not be changed per break point. Why would you want it to change based on break point? If the foreground text is hard to read due to not enough contrast when in the mobile view(or any really) then you would want to increase the rgba transparency value. Here is what I do in oxygen to do this since the overlay can’t be changed per breakpoint.

First, I give the hero section a base class of .hero , in that class I only specify settings that will apply to all other hero sections layouts that are the same minus the variable background image be used. Then, I add an additional class that is only used and is specific to that page to dictate the background image and to handle the image overlay in media queries in css.

i.e.

/* overlay for everypage. hero is homepage with it's unique layout settings, hero2 is sub pages that share the same hero layout . 

The class for the page specifies the background image and handles overlay on mobile
 */

@media(max-width:991px){
  #hero{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/background.jpg);
  }
   #hero2.v1-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/v1.jpg);
  }
  #hero2.v6-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V6-DBL.jpg);
  }
  #hero2.v5-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V5-DBL.jpg);
  }
   #hero2.v4-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V4-DBL.jpg);
  }
   #hero2.v3-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V3-DBL.jpg);
  }
     #hero2.v2-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V2-DBL.jpg);
  }

}

/* overlay for everypage. hero is homepage with it's unique layout settings, hero2 is sub pages that share the same hero layout .

The class for the page specifies the background image and handles overlay on mobile

@media(max-width:991px){

#hero{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/background.jpg);

}

#hero2.v1-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/v1.jpg);

}

#hero2.v6-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V6-DBL.jpg);

}

#hero2.v5-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V5-DBL.jpg);

}

#hero2.v4-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V4-DBL.jpg);

}

#hero2.v3-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V3-DBL.jpg);

}

#hero2.v2-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V2-DBL.jpg);

}

So here we have 2 different types of hero layouts. #hero and #hero2 – neither of these contain the background or overlay settings. The classes like .v2-page is only used for that page and contains the background image specific for that page. The overlay for mobile is also handled.

Flip Animation Bug in Oxygen Builder pro menu

Posted in Oxygen, WordPress on July 22, 2020 by rowej83.

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

Flip Animation bug Screenshot

The fix is below

.menu-item-has-children .sub-menu:not(.aos-animate) {
opacity: 0;
}

.menu-item-has-children .sub-menu:not(.aos-animate) {

opacity: 0;

}

React js – creating a parent component with variable amount of child components.

Posted in Javascript on July 14, 2020 by rowej83.

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

// 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

// 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]}>

</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:

// 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;

// 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:

//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;

//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"}}

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;

Using another hosting account to host emails while another host serves the website

Posted in Server Admin on July 7, 2020 by rowej83.

On the hosting that is using the domain for the site(a).. add an MX record with the IP address of the email hosting services(b). Then add a DKIM and SPF file to (a) ( credentials can be found on (b) under Cpanel ->Email deliverability).

Material UI for React js misc notes

Posted in Reactjs on July 2, 2020 by rowej83.

To be able to ref a Textfield in Material UI you have use inputRef instead of ref e.g below

<TextField
  inputRef={input => input && input.focus()}
/>

<TextField

inputRef={input => input && input.focus()}

Online Journal

My online journal about design and development related topics and what I've learned.

Background overlay on mobile for Oxygen builder

Flip Animation Bug in Oxygen Builder pro menu

React js – creating a parent component with variable amount of child components.

Using another hosting account to host emails while another host serves the website

Material UI for React js misc notes