“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

There are a lot of plug-ins on the Internet, but most of them rely on jQuery. I don’t want to use jQuery. I want to find a component library that doesn’t depend on jQuery, but I didn’t find it. All the process of generation to JS to achieve, only need to introduce a section of code, you can generate a window.

Simple Usage Example

I use a class to automatically generate this popover, import this class in JS, and instantiate it, pass in the necessary and optional parameters I set, to generate a popover, now there are not many optional Settings, just a simple implementation of the idea:

import { Drag } from "./Drag.js";
const drag = new Drag({
  id: "drag".// The id of the filled element
  title: "I am a window.".// The window title
  content: '① The window can be dragged; 

 ② Windows can be resized in eight directions; 

 ④ Limit the minimum window width/height. `.// The contents of the window
});
Copy the code

This will instantiate a popover in the page:

Now how do you make a popover with one click

Define classes to dynamically generate elements

First, we can use a class to describe our popover, which can receive a user’s custom parameter. It is an object, which can contain a lot of parameters that can be customized by the user. For example, the title and content above are the parameters that can be customized by the user.

export class Drag {
  constructor(data) {
    this.data = data;
  }
Copy the code

Then, when the class is instantiated, we should call a method that generates the page elements we need to use, so that we can bind click and drag events later

export class Drag {
  constructor(data) {
    this.data = data;
    this._newDrag(this.data);
  }
  _newDrag(data) {
    this._creatElm(data); // create window according to configuration);}}Copy the code

In _creatElm () this function, we can get the user’s Settings, at that time when you create the element, you can see whether to allow the custom, for example, a box of normal can be up and down or so and drag in four angles, then you can set you like add restrictions, such as limited only by four corners to reduce the amplifier, Then we don’t have to add four borders and their corresponding events.

Then create a normal popover that needs to contain the title, content, four sides and four corners of the drag response element:

By styling the corresponding class name in CSS, we can generate a window dynamically, but without adding events.

Four side and four corner drag events

First, we’re going to use the JS onMouseDown event, and we’re going to tie it to an element, and we’re going to listen for the logic that’s going to be executed after the mouse is clicked on that element, and we’re going to have two other events in that event, Document. onmousemove and Document. onMouseup, which listen for movement after a mouse click and release, respectively.

In addition, the browser passes us an event for all three methods:

It contains the current element’s margin relative to the browser. Based on these methods and parameters, we can dynamically change the size of the window by constantly retrieving the current position relative to the browser when the move event is triggered:

var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxW =
  document.documentElement.clientWidth - oParent.offsetLeft - 2;
var maxH =
  document.documentElement.clientHeight - oParent.offsetTop - 2;
var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
isLeft && (oParent.style.left = iParentLeft + iL + "px");
isTop && (oParent.style.top = iParentTop + iT + "px");
iW < this.dragMinWidth && (iW = this.dragMinWidth);
iW > maxW && (iW = maxW);
lockX || (oParent.style.width = iW + "px");
iH < this.dragMinHeight && (iH = this.dragMinHeight);
iH > maxH && (iH = maxH);
lockY || (oParent.style.height = iH + "px");
Copy the code

Group click events into a class

There is also a drag title to implement the move of the drag function, similar to the above without too much discussion, after implementing all the functions to play, we should implement them in the class:

 _newDrag(data) {
    try {
      this._creatElm(data); // Create Windows according to the configuration
      this._changeSize(data); // Bind four corners and four edges
      this._dragElm(data); // Bind the drag method
    } catch (error) {
      console.log(error); }}Copy the code

Run all of our binding functions through the _newDrag method that will be called during instantiation.

conclusion

This time, we realized a class that can automatically instantiate a popover in it by binding an element. Although its methods are not particularly perfect, more configurations should be provided to users to configure, so as to achieve an ideal popover component.