preface

When I was writing H5-dooring, I noticed that the popover we were using would flash and skip the first time, but each time there would be another flash in the other direction.

So I roughly baidu, basically said that the need to fix the width and height, let later tried to find no use, even trigger components and popover elements are given the width and height, also flash jump. Since the underlying implementation of ANTD’s popover is a third party library, which uses other front-end components, it is necessary to implement its own.

The body of the

The preliminary implementation

First of all, I implemented the popover roughly, which was mainly a popover positioning problem. Then I realized it as I expected, and found that the same pop-up would occur, but only for the first time. The rest was normal:As you can see, the first display will be on the left, and the rest will be ok. So the idea is to make it work on the first display, and animate it so it doesn’t look so abrupt. Because I want to do a divisionreactExternal zero dependence, so don’t considerreact-transition-grouporstyledcomponent, directly to the hand animations.

Implementation approach

It can be seen from the figure above that the first drift problem is directly solved by animation, and opacity should be set to 0.

@keyframes yhmodalopenanimate{
    0% {opacity: 0;
    }
    100% {opacity: 1;
    }
}
@keyframes yhmodalcloseanimate{
    0% {opacity:1;
    }

    100% {opacity: 0;
    }
}

.yhmodalopen{
    animation: yhmodalopenanimate 0.15s ease-in;
}

.yhmodalclose{
    animation: yhmodalcloseanimate 0.15s ease-in;
}
Copy the code

In the implementation process, I found that if the element (the wrapped element plus the popover element) deforms or has that kind of shape changing animation, it will cause the positioning is not correct, I need to get the DOM of both to calculate the position. In addition, you need to expose forced refresh methods, and in some cases refresh functions, such as listening for Windows resize events, so that the position changes, and then clicks, do not appear to be the original position.

The code is as follows:

useEffect(() = > {
    if (callback) {
        callback(() = > forceRender((v) = > v + 1));
    }
}, [callback]);

useEffect(() = > {
    const handler = () = > {
        forceRender((prev) = > prev + 1);
    };
    window.addEventListener("resize", handler);
    return () = > {
        window.removeEventListener("resize", handler);
    };
}, [forceRender]);
Copy the code

There’s also the issue of listening for events, where I’m exposing parameters so the user can decide if they need to close it by clicking outside Modal. The rest is manual work.

export type PopDirections =
	| "TL"
	| "TOP"
	| "TR"
	| "LT"
	| "LEFT"
	| "LB"
	| "BL"
	| "BOTTOM"
	| "BR"
	| "RT"
	| "RIGHT"
	| "RB";

export function switchPosition(sign: PopDirections, modalrect: DOMRect, popconfirmrect: DOMRect, scroll: number) :CSSProperties {
	let triangle = 8;
	switch (sign) {
		case "TL":
			return {
				top: popconfirmrect.top + scroll - modalrect.height - triangle,
				left: popconfirmrect.left,
			};
		case "TOP":...case "TR":... . }}Copy the code

Results show

You can take a look at minepopoverIn the end inH5 editor(H 5-Dooring) is completely replaceableantdthepopoverComponent and lightweight.

Popover address: Click me direct

There are specific instructions on how to use it.

At present, our first landing version of H5-Dooring is almost complete. The main functions are as follows:

  • Component library drag and display
  • Component library dynamic editing
  • H5 Real-time/scan page preview function
  • Download the H5 configuration file
  • Save as template library function
  • H5 mobile cross-end adaptation
  • Media component (Video component)
  • Online download site code function
  • Add typescript support
  • Form designer/custom form components
  • Visual chart component implementation, including editing chart, chart data import and export
  • Online Programming Module (Mini Web IDE)
  • Add a picture library to support users to select picture materials online
  • Add customer service robots
  • The dooring management background is preliminarily completed

20+ bugs have been fixed. Github issue processing rate is 92%. Welcome to submit interesting issues.

The last

The above tutorials have been integrated into H5-Dooring by the author. Some of the more complex interactive functions can also be implemented through reasonable design. You can explore them by yourself.

Github address: H5 online editor h5-dooring

If you want to learn more about H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat, welcome to learn and discuss together in “Interesting Talk Front-end”, explore the frontier of front-end together.

More recommended

  • React+Koa provides a visual editor for h5 pages
  • How to realize H5 editor real-time preview and real scan code preview function
  • H5 editor picture upload and picture library design scheme
  • Online IDE development primer – Implementing an online code editor from scratch
  • How to design template library in H5 editor and realize automatic generation of cover art