Imitate 1920x1080 window in a smaller div with sizing of elements - javascript

I am working on a project that uses two windows, similar to a video board, where the main screen is a control panel of sorts with a "preview" screen, and the secondary screen is a projection of the viewing content in 1920x1080 resolution. I would like the smaller control panel preview div to match the stylings of the larger viewing window. Currently, I am passing in a "windowInstance" prop to my styled component and adjusting the styles that way, for example:
const SomeComponent = styled.div`
height: ${props => props.windowInstance === 'controlPanel' ? '300px' : '400px'};
`
// ...
return (
<SomeComponent windowInstance={windowInstance} />
)
(windowInstance is passed from the parent component. this is not relevant for the problem at hand, and it gets a bit complicated)
Obviously, this has gotten quite tedious as my app has grown, and nothing is quite right unless I meticulously calculate the difference in window sizes as a percentage and translate that to the new property values. What I want to know is if there is any way with CSS or JS that I can unify these styles and have the results render correctly and identically on both screens.
Important to note is that neither window needs to be responsive or will ever be resized. Here is a sketch I did in excalidraw to better describe the goal:

I was able to solve my problem using the css property zoom - which I was previously unaware of. It works like a charm. My preview screen happens to be exactly 47.5% of the size of my viewing window. So I solved the problem like this:
// Wrapper.js
return (
<StyledWrapper className={windowInstance === 'controlPanel' && 'preview-screen'}>
{children}
</StyledWrapper>
)
// index.css
.preview-screen {
zoom: 47.5%;
}

Related

How can re-render react-grid-layout column's width on parent's resizing?

I have a dashboard panel using react js that I used react-grid-layout in it; I used react-grid-layout in my content and that works correctly but when I close my right side or left side panels (drawers) , the width of my content that is the parent of my react-grid-layout modifies but after this changes my column's width did not modify according to their parent's width size; How can I reload my ResponsiveGridLayout component to changing the childs(columns) width?
this is simple code for showing my problem in this question :
example
this is my dashboard image :
If you look at the documentation here you'll see that ResponsiveGridLayout is a combination of a component called Responsive and a HOC called WidthProvider
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
If you look at the code of WidthProvider you may notice it subscribes to widnow resize event
window.addEventListener("resize", this.onWindowResize);
which isn't particularly useful for you, because in your case window does not resize. One way to deal with this problem is to create your own WidthProvider and attach the listener to the element that actually resizes and wrap it around Responsive
const MyVeryOwnResponsiveGridLayout = MyWidthProvider(Responsive);
P.S. You can try requesting the feature from the component creator or volunteer to contribute to the project
I found a better answer than extending the WidthProvider:
Trigger a Window Resize event (without actually resizing the window). I found a delay of 1ms is necessary to make it work.
See this solution:
https://stackoverflow.com/a/62874552/17570516

Setting the width of a <div> when resizing the window

So I got this application in Vuejs that is divided with css grid into 3 divs basically: a sidebar, a configpanel and a preview. I would like to set the width of the preview div in the px unit according to the current screen size and when the screen gets resized
For clarification, I made a gif of a website that does pretty much EXACTLY what I want: https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a
As you can see in the gif, every time the screen gets resized, the particular <div> gets assigned a new class for some reason (no idea why or how) and the div's width automatically gets updated with a new px value.
At first I thought I could do something like this in the created() hook:
window.addEventListener("resize", () => {
let preview = window.document.querySelector(".preview");
preview.style.width = `${preview.offsetWidth}px`;
});
But that doesn't work.
I got a really simple sample project set up in a codesandbox here.
Ideally, I would like to know how to dynamically set the width in pixels like the website does in the gif.
Additionally, just out of curiosity, I would like to know why and how that particular website generates a new class every time the screen gets resized (I've seen it a couple of times now and I wonder what it is).
If I have known what you mean correctly, your solution can be the code below (Add code below to your CSS file and add every class you want to it):
#media screen and (max-width: 750px) {
.selector {
some code here...
}
}
The code above will apply the styles defined to elements selected when the width of the device screen is 750 pixels or less.

ReactJS - Do not render until component is above page fold (within visible window area)

Scenario
I'm working on a ReactJS project that has a lot of re-used components on the page, so many components that it causes some of the css animations to become sluggish. I've found that if I use display:none on components below the page fold that my performance bottlenecks vanish.
Question
Is there a currently library, or a very simple way to accomplish this? Worst case I will write a library for this and put it on github.
Caveats
Using display:none gives an element 0 width / height so I'll need to use a placeholder of an assumed size.
I will "unrender" visible components once they go out of the visible window area
lazy loading libs didn't pan out like I hoped, LazyLoadJS is the most promising and what I would leverage if I ultimately need to write my own solution
My situation is rather unique but I'll break it down to relevant pieces as much as I can:
My application is a ReactJS SPA or Single Page Application (so lots of xhr, async loading)
Using the same scroll area for the entire life cycle (.content-group)
Json from the CMS includes component names and respective data. My "SomeFactory" (not the real name) gets the mapped component name and renders the component to the factory container.
Some Caveats:
forceCheck is what made this work, it reassess where lazy items are within the scroll container
overflow was helpful since I'm using overflow: hidden as part of this element's ancestry.
Code
import LazyLoad, { forceCheck } from 'react-lazyload';
class LazyLoadOptimized extends React.Component {
render() {
return (
<LazyLoad throttle={50} height={200} offset={400} overflow scrollContainer={'.content-group'}>
{this.props.children}
</LazyLoad>
)
}
}
export default class SomeFactory extends Component {
componentDidUpdate() {
forceCheck();
}
}

Where to set the height of a component in the lifecycle?

I have a problem where I am using a React grid component in order to display multiple charts. If you imagine the webpage is a 4 x 4 grid and I have two charts. Each chart being a 4 x 2 grid item. The grid library uses row height in order to say how large (y-axis) the charts are - so imagine if the row height is statically set to 100px, then the gird is going to be a width x 400px grid.
The problem comes in because being made for different displays or accounting for if someone is going to have the application minimized (not full screen) the height of the component the charts will be rendered in is variable. I am able to get the height of the component's <div /> by using:
return (
<div
className="content absolute top right left bottom"
ref={divElement => this.divElement = divElement}
>
...
and then calling setState in the componentDidMount lifecycle method.
componentDidMount() {
const height = this.divElement.clientHeight
this.setState({ height })
}
I can get the height of the <div /> fine with this approach but the obvious caveat to this aside from eslint complaining is that it will cause a re-render of the component which is bad.
My question is how should I approach this if there is a better way to complete this same task? Is there another lifecycle method this would be better in (not really thinking there is). It's just that I have to wait until the <div /> the charts reside in to be rendered before I can say how big the charts should be

Nested Conditional Statement Works, but Combines Conditional Statement Doesn't - JavaScript

I have a piece of code where I have solved a problem, but I don't know why my solution works, which I'm finding almost as frustrating as when something doesn't work.
Basically I have an SVG viewbox that I've resized with JS for big screens.
This SVG viewbox is only on one page of my site, page1.
I have a conditional statement where if the users in on page1 and the window is 1920px or larger the viewbox resizes.
I have achieved this with a nested if statement.
if (page1) {
if (window.innerWidth > 1919) {
// set SVG viewbox for screens larger than 1920px
} else {
// keep normal viewbox dimensions.
}
}
When I orginally tried this, I did it as one if statement with two conditions, and although this worked on page1 it threw an error in the console when I wasn't on page1.
Why does it throw an error on pages that aren't page1 when there is one combined condition, and not when the conditions are nested? The error I was getting was basically saying the SVG element doesn't exist. I'm very confused.
if (page1 && window.innerWidth > 1919) {
// set SVG viewbox for screens larger than 1920px
} else {
// keep normal viewbox dimensions.
}
Think of what your code means: in the first version, if it is page1, then you either change the size or you maintain the default size. If it isn't page1, you do nothing.
In the second case, if it's page1 and the window is big, you use the big viewbox. If it's either not page1 or the page isn't large enough, you use the default size.
They're just not the same.

Categories

Resources