Skip to content

Commit

Permalink
Better resize-handling
Browse files Browse the repository at this point in the history
  • Loading branch information
DarkIntaqt committed Sep 22, 2024
1 parent a60cc63 commit a38066b
Showing 1 changed file with 109 additions and 115 deletions.
224 changes: 109 additions & 115 deletions src/module/Wrapper.js
Original file line number Diff line number Diff line change
@@ -1,140 +1,134 @@
import { Component, Fragment } from "react";
import Ad from "./Ad";
import css from "../css/ad.module.css"
import css from "../css/ad.module.css";

export default class Wrapper extends Component {
constructor(params) {
super(params)
this.props = params
constructor(params) {
super(params);
this.props = params;

let adUnits = 4
let adUnits = 4;

if (window.innerHeight < 600) {
adUnits = 2
}

if (window.innerHeight > 950) {
adUnits = 6
}
if (window.innerWidth < 1600) {
adUnits = 0
}

let unitsLeft = []
let unitsRight = []

for (let i = 0; i < (adUnits / 2); i++) {
unitsRight.push(<Ad id={i + 1} key={i} />)
if (window.innerHeight < 600) {
adUnits = 2;
}

}
if (window.innerHeight > 950) {
adUnits = 6;
}
if (window.innerWidth < 1600) {
adUnits = 0;
}

this.checkAdRemount = this.checkAdRemount.bind(this)
let unitsLeft = [];
let unitsRight = [];

this.tries = 0
for (let i = 0; i < adUnits / 2; i++) {
unitsRight.push(<Ad id={i + 1} key={i} />);
}

this.state = {
this.checkAdRemount = this.checkAdRemount.bind(this);

this.tries = 0;

this.state = {
adUnits: {
enabled: params.showAds ?? true,
int: adUnits,
left: unitsLeft,
right: unitsRight,
},
};
}

updateProps() {
this.setState({
adUnits: {
enabled: true,
int: this.state.adUnits.int,
left: this.state.adUnits.left,
right: this.state.adUnits.right,
},
});
}

componentDidUpdate(prevProps) {
if (this.state.adUnits.enabled !== prevProps.showAds ?? true) {
setTimeout(() => {
if (this.state.adUnits.enabled !== prevProps.showAds ?? true) {
this.setState({
adUnits: {
"enabled": params.showAds ?? true,
"int": adUnits,
"left": unitsLeft,
"right": unitsRight
}
enabled: true,
int: this.state.adUnits.int,
left: this.state.adUnits.left,
right: this.state.adUnits.right,
},
});
}


}, 500);
}
}

updateProps() {
this.setState({
adUnits: {
enabled: true,
int: this.state.adUnits.int,
left: this.state.adUnits.left,
right: this.state.adUnits.right
}
})
checkAdRemount() {
let checkAdUnits = this.state.adUnits.int;
let adUnits = 4;
if (window.innerHeight < 600) {
adUnits = 2;
}

componentDidUpdate(prevProps) {

if (this.state.adUnits.enabled !== prevProps.showAds ?? true) {
setTimeout(() => {
if (this.state.adUnits.enabled !== prevProps.showAds ?? true) {
this.setState({
adUnits: {
enabled: true,
int: this.state.adUnits.int,
left: this.state.adUnits.left,
right: this.state.adUnits.right
}
})
}
}, 500)

}
if (window.innerHeight > 950) {
adUnits = 6;
}

checkAdRemount() {
let checkAdUnits = this.state.adUnits.int
let adUnits = 4
if (window.innerHeight < 600) {
adUnits = 2
}

if (window.innerHeight > 950) {
adUnits = 6
}
if (window.innerWidth < 1600) {
adUnits = 0
}

if (adUnits !== checkAdUnits) {
this.tries++;
if (this.tries > 4 && adUnits > checkAdUnits) {
return
}

let unitsLeft = []
let unitsRight = []

for (let i = 0; i < (adUnits / 2); i++) {
unitsRight.push(<Ad id={i + 1} key={i} />)

}

this.setState({
adUnits: {
"int": adUnits,
"left": unitsLeft,
"right": unitsRight
}
})
}


if (window.innerWidth < 1600) {
adUnits = 0;
}

componentDidMount() {
window.addEventListener("resize", this.checkAdRemount)
if (adUnits !== checkAdUnits) {
this.tries++;
if (this.tries > 4 && adUnits > checkAdUnits) {
return;
}

let unitsLeft = [];
let unitsRight = [];

for (let i = 0; i < adUnits / 2; i++) {
unitsRight.push(<Ad id={i + 1} key={i} />);
}

this.setState({
adUnits: {
enabled: false,
int: adUnits,
left: unitsLeft,
right: unitsRight,
},
});
}
}

componentWillUnmount() {
window.removeEventListener("resize", this.checkAdRemount)
}
componentDidMount() {
window.addEventListener("resize", this.checkAdRemount);
}

render() {
return <Fragment>
{/* {this.state.adUnits.enabled === true ?
componentWillUnmount() {
window.removeEventListener("resize", this.checkAdRemount);
}

render() {
return (
<Fragment>
{/* {this.state.adUnits.enabled === true ?
<div className={`${css.fixed}`}>
{this.state.adUnits.left}
</div> : null} */}
<div className={"object1000"}>
{this.props.children}
</div>
{this.state.adUnits.enabled === true ?
<div className={`${css.fixed} ${css.right}`}>
{this.state.adUnits.right}
</div> : null}
</Fragment>
}
}
<div className={"object1000"}>{this.props.children}</div>
{this.state.adUnits.enabled === true ? (
<div className={`${css.fixed} ${css.right}`}>
{this.state.adUnits.right}
</div>
) : null}
</Fragment>
);
}
}

0 comments on commit a38066b

Please sign in to comment.