PopUpAnywhere - A JavaScript Module For Creating Pop Up Menus That Can Appear Anywhere, Fast.

What are JavaScript Modules?

JavaScript Modules are the simplest way for JavaScript programmers to collaborate, share and write complex programs. Say you have a problem, and you write a bunch of functions to solve them. But then you wanted to share these functions with your developer friends. This way, they can use the solution in their projects. You write your functions in a certain way - usually organized as class objects with various methods and properties. This creation is the module. You export it, and other people can import it. Examples of useful JavaScript Modules include PDF JS - for making pdfs, JSRSASIGN - for decoding and encoding keys and data - passwords and other sensitive stuff, and Quill JS - open-source text editor. We are going to make a Javascript module for creating pop-ups.

What are Pop-Ups?

We're not talking about pop up ads here. We are talking about the simple but useful context menus like those that appear in Windows or Mac when you right-click in File Explorer or Finder. Recently I had to implement something similar for a client - hover over Programs or Destination to see. The amount of thought I had to put into it made me wish a little bit that there was a module to help. I live to fulfil my wishes. Let's define what our pop up module will actually be able to do, after all the devil is in the details.

The Pop Up Anywhere Module Features

• can automatically check the position of the parent element and determine where to position the pop-up
• accepts custom styles
• accepts custom functions for pop up items

You can try out the pop-up here or view the full set of features and instructions here.

How To Design The Module

Modules are organized in class structures, making them a bit confusing to design. To simplify things, approach this like any simple JavaScript program. Create a simple environment where you can write and test functions in a straightforward manner. Once you have all your functions working, then you can refractor the format.

For example the function below helps get the distance between the borders of the parent element and the edge of the body.

function getOffsetObj (){
    //var bodyRect = document.querySelectorAll(".canvas")[0].getBoundingClientRect();
    var bodyRect = document.body.getBoundingClientRect();
    var elemRect = document.getElementById("canvasinside").getBoundingClientRect();
    const offSetObj = {};
    offSetObj["top"]  = elemRect.top - bodyRect.top;
    offSetObj["left"]  = elemRect.left - bodyRect.left;
    offSetObj["right"]  = Math.abs(elemRect.right - bodyRect.right);
    offSetObj["bottom"]  = Math.abs(elemRect.bottom - bodyRect.bottom);
    offSetObj["parHeight"] = bodyRect.height;
    offSetObj["parWidth"] = bodyRect.width;
    offSetObj["chiWidth"] = elemRect.width;
    offSetObj["chiHeight"] = elemRect.height;


   return offSetObj;
  }

When I move this function to my class object, I'll do the following.

• inside my class object, there's a method called constructor, I'll list my function and bind it to this class here.
• then, as I paste my function in the object I remove the function keyword
• from there, I can call this function anywhere in the class object

constructor(){
 this.getOffsetObj = this.getOffsetObj; 
}


 getOffsetObj (mom){
        //var bodyRect = document.querySelectorAll(".canvas")[0].getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        var elemRect = mom.getBoundingClientRect();
        const offSetObj = {};
        offSetObj["top"]  = elemRect.top - bodyRect.top;
        offSetObj["left"]  = elemRect.left - bodyRect.left;
        offSetObj["right"]  = Math.abs(elemRect.right - bodyRect.right);
        offSetObj["bottom"]  = Math.abs(elemRect.bottom - bodyRect.bottom);
        offSetObj["parHeight"] = bodyRect.height;
        offSetObj["parWidth"] = bodyRect.width;
        offSetObj["chiWidth"] = elemRect.width;
        offSetObj["chiHeight"] = elemRect.height;


       return offSetObj;
      }

  settings_28092021utc3ismizo.obj.side = this.findAvailPosition(this.getOffsetObj(obj.parent),obj.parent);

See if you can find where these lines are taken from!

How Does This One Work?

user runs Object.makeAPop with the appropriate object argument
fillObj method starts running, it creates a sample object and checks some values in the submitted object star
It then attempts to create a pop up by running other methods

Let me know what you think in the comments.