dmuka.Popup (JavaScript Library for Web Sites)

Demo : https://muhammet-kandemir-95.github.io/dmuka.Popup/

By using this library, you can easily display popup on your websites. For instance;

• Yes/ No questions
• Quick save forms
• Important notifications

Create Instance

Variables

Name	Type	Default Value	Description
parent	HTML Element	document.body	Popup parent element.
theme	string:enum	""	Popup theme name by css.
classes	string:class	""	Popup main element classes.
autoDisposeOnClose	boolean	true	If this value is true then when popup closed, trigger dispose function as auto.
width	string:css	"50%"	Popup window element width.
height	string:css	"50%"	Popup window element height.
positionX	string:enum, string:css	"center"	Popup window element position X.
positionY	string:enum, string:css	"middle"	Popup window element position Y.
window.classes	string:class	""	Popup window element classes.
header.classes	string:class	""	Popup header element classes.
header.text	string	""	Popup header element innerText.
header.enable	boolean	true	Popup header element enable.
content.classes	string:class	""	Popup content element classes.
content.htmlOrChild	string:html, HTML Element	""	Popup content html or element.
footer.classes	string:class	""	Popup footer element classes
footer.buttons	object[ ]	[ ]	Footer button list.
footer.enable	boolean	true	Popup footer element enable
closeButton.classes	string:class	""	Popup closeButton element classes.

theme Values

• "" = Default white theme.
• "blue" = Blue color theme.
• "green" = Green color theme.
• "yellow" = Yellow color theme.
• "red" = Red color theme.
• "gray" = Gray color theme.
• "dark" = Dark color theme.

positionX Values

• "left" = Left is "20px".
• "center" = Position always is center.
• "right" = Right is "20px".
• string = Left position as css.

positionY Values

• "top" = Top is "20px".
• "middle" = Position always is middle.
• "bottom" = Bottom is "20px".
• string = Top position as css.

footer.buttons Schema

{
  // Default : ""
  text: <string>,
  // Default : ""
  classes: <string>,
  // Must fill!
  id: <string>,
  // Default : false
  focus: <boolean>
}

Events

Name	Parameters	Return Type	Run Time
onLoad	()	undefined	When create instance and elements added to body.
onOpen	()	undefined	When execute "open" function.
onClose	()	undefined	When execute "close" or "dispose"(But when "popupState" is "visible") function.
onSubmitFooter	(footerButtonId)	undefined	When click to any footer button.

Example Usage

var popup = new dmuka.Popup({
            /* Variables --BEGIN */
            // --------------------
            
            parent: document.body,
            theme: "",
            classes: "my-main-class",
            autoDisposeOnClose: false,
            width: "200px",
            height: "100px",
            positionX: "center",
            positionY: "middle",
            window: {
                classes: "my-window-class"
            },
            header: {
                classes: "my-header-class",
                text: "My New Popup",
                enable: true
            },
            content: {
                classes: "my-content-class",
                htmlOrChild: "Do you want continue?"
            },
            footer: {
                classes: "my-footer-class",
                buttons:
                    [
                        {
                            text: "Yes",
                            classes: "my-footer-button-yes-class",
                            id: "yes"
                        },
                        {
                            text: "No",
                            classes: "my-footer-button-no-class",
                            id: "no"
                        }
                    ],
                enable: true
            },
            closeButton: {
                classes: "my-close-button-class"
            },

            // --------------------
            /* Variables --END */

            /* Events --BEGIN */
            // --------------------
            
            onLoad: function () {
                // this = popup

                var popupContent = this.DOM.content.get();
                console.log(popupContent, "My Content - onLoad");
            },
            onOpen: function () {
                // this = popup

                var popupContent = this.DOM.content.get();
                console.log(popupContent, "My Content - onOpen");
                console.log("Trigger open event");
            },
            onClose: function () {
                // this = popup

                var popupContent = this.DOM.content.get();
                console.log(popupContent, "My Content - onClose");
                console.log("Trigger close event");
            },
            onSubmitFooter: function (id) {
                // this = popup

                var popupContent = this.DOM.content.get();
                console.log(popupContent, "My Content - onSubmitFooter");

                var footerButtonId = id;
                console.log("Clicked : " + footerButtonId + " ID Button");
            }

            // --------------------
            /* Events --END */
        });

Public Variables

The basic rule you need to know about Variables is that, they are received with “get” function and updated with “set” function!

popup.DOM

This variable includes DOM (Document Object Model; ex; body, head, div…) data within component. Template is represented below;

popup.DOM = {
  //Main Content
  main: {
    get: <function():DOM>
  },
  //Main Content - Window
  window: {
    get: <function():DOM>
  },
  //Main Content - Window - Header
  header: {
    get: <function():DOM>
  },
  //Main Content - Window - Content
  content: {
    get: <function():DOM>
  },
  footer: {
      //Main Content - Window - Footer
      content: {
        get: <function():DOM> 
      },
      //[ Main Content - Window - Footer Button1, Main Content - Window - Footer Button2, ... ]
      buttons: {
        get: <function():DOM[]>
      },
  },
  //Main Content - Window - Close Button
  closeButton: {
    get: <function():DOM>
  }
}

Example Usage

var mainElement = popup.DOM.main.get();
var windowElement = popup.DOM.window.get();
var headerElement = popup.DOM.header.get();
var contentElement = popup.DOM.content.get();
var footerContentElement = popup.DOM.footer.content.get();
var footerButtonsElement = popup.DOM.footer.buttons.get();
var closeButtonElement = popup.DOM.closeButton.get();

popup.popupState

This variable obtains the status information of “popup” item. Template is represented below;

popup.popupState = {
  get: <function():string>
}

Return Values

• hidden = Popup item is hidden.
• visible = Popup item is visible.

Example Usage

var popupState = popup.popupState.get();

popup.width

The important fact here is that, popup width cannot outgrow the width of page!

This variable includes the width data of “popup” item. Template is represented below;

popup.width = {
  get: <function():string>,
  set: <function(string):string>
}

Example Usage

var popupWidth = popup.width.get();
popup.width.set('300px');

popup.height

The important fact here is that, the height of popup cannot outgrow the height of page!

This variable obtains the height data of “popup” item. Template is represented below;

popup.height = {
  get: <function():string>,
  set: <function(string):string>
}

Example Usage

var popupHeight = popup.height.get();
popup.height.set('300px');

popup.positionX

The important fact here is that, popup data can never be less that 0!

This variable includes the left data of “popup” item. Template is represented below;

popup.left = {
  get: <function():string>,
  set: <function(string):string>
}

Default values

• "left" = The left value of popup item is assigned as “0px”
• "center" = Popup item is rated to be positioned in the centre of the page.
• "right" = The right value of popup item is assigned as “0px”
• string = Normal css data and left value can be entered as “px” or “%” Example: "100px", "50%", ...

Example Usage

var popupPositionX = popup.positionX.get();
popup.positionX.set('100px');
popup.positionX.set('30%');
popup.positionX.set('center');

popup.positionY

The important fact here is that, the top popup data can never be less than 0!

This variable obtains the top data of “popup” item. Template is represented below;

popup.top = {
  get: <function():string>,
  set: <function(string):string>
}

Default Values

• "top" = The top value of popup item is assigned as “0px”
• "middle" = Popup item is rated to be positioned in the middle of the page.
• "bottom" = The bottom value of popup item is assigned as “0px”
• string = Normal css data and top value can be entered as "px" or "%" Example: "100px", "50%"...

Example Usage

var popupPositionY = popup.positionY.get();
popup.positionY.set('100px');
popup.positionY.set('30%');
popup.positionY.set('middle');

Public Functions

popup.open

This function makes popup item visible. Template is represented below;

function popup.open() {
  // codes
  
  return undefined;
}

Example Usage

popup.open();

popup.close

This function hides popup item. Template is represented below;

function popup.close() {
  // codes
  
  return undefined;
}

Example Usage

popup.close();

popup.dispose

This function cleans all the data on browser and makes it unavailable. It is better to use this process on finished popups. Template is represented below;

function popup.dispose() {
  // codes
  
  return undefined;
}

Example Usage

popup.dispose();