generates a jQuery Mobile pre-enhanced popup (empty)

gistfile1.txt

// this is from a larger file, fit as you need:
var priv = {};


priv.generator = {

  /**
   * Generates elements based on supplied configuration
   * @method: makeElement
   * @param: {type} string Type of element to generate
   * @param: {object} options Parameters settable directly (id, name, value..)
   * @param: {object} attributes Parameters settable with setAttribute
   * @param: {object} setters Parameters requiring logic (if-else-etc) 
   * @returns: {object} HTML object 
   */
    makeElement: function (type, options, attributes, setters) {
      var property,
        attribute,
        data,
        i,
        mock,
        values,
        recurse,
        element = document.createElement(type);

      // directly settable
      for (property in options) {
        if (options.hasOwnProperty(property)) {
          element[property] = options[property];
        }
      }

      // must use setAttribute
      for (data in attributes) {
        if (attributes.hasOwnProperty(data)) {
          element.setAttribute(data, attributes[data]);
        }
      }

      // requiring logic to be set
      for (attribute in setters) {
        mock = attribute.slice(0, 5) === "data-" ? "data-" : attribute;

        if (setters.hasOwnProperty(attribute)) {
          switch (mock) {
            case "disabled":
            case "selected":
              if (setters[attribute]) {
                element.setAttribute(attribute, attribute);
              }
            break;
            case "name":
            case "value":
            case "data-":
            case "type":
            case "readonly":
            case "size":
              if (setters[attribute]) {
                element.setAttribute(attribute, setters[attribute]);
              }
            break;
            case "text":
              element.appendChild(document.createTextNode(setters["text"]));
            break;
            case "options":
              // recursive!
              if (setters["options"]) {
                 for (i = 0; i < setters["options"].length; i += 1) {
                  recurse = setters["options"][i];
                  element.appendChild(priv.generator.makeElement(
                    "option",
                    {"value": recurse.value},
                    {},
                    {
                      "text": recurse.text,
                      "selected":recurse.selected,
                      "disabled":recurse.disabled
                    })
                  );
                }
              }
            break;
            case "grid":
              // recursive!
              for (i = 0; i < setters["grid"]; i += 1) {
                element.appendChild(priv.generator.makeElement(
                  "div", {}, {}, {})
                );
              }
            break;
          };
        }
      }

      return element;
    }
  };

/**
  * Generate a pre-enhanced popup without optional content!
  * @method generateEnhancedPopup
  * @param  {string} id ID of the popup > must be set on buttons to open!
  * @param  {string} transition Transition to open
  * @param  {string} shadow Create popup and overlay with shadow
  * @param  {string} classes Custom classes to set on the popup
  * @param  {string} theme Theme of the popup
  * @param  {string} position Position of popup (origin/window)
  * @param  {string} tolerance Tolerance (min distance from top|left|right|bot
  * @param  {string} method Method to load a content template into the popup
  * @return {object} documentFragment
  */
  priv.generateEnhancedPopup = function (
    id,
    transition,
    shadow,
    classes,
    theme,
    position,
    tolerance,
    overlay_theme,
    method
  ) {
    var popup,
      popup_wrap,
      container = document.createDocumentFragment();

    container.appendChild(priv.generator.makeElement(
      "div",
      {"id": id + "-placeholder"},
      {"style": "display:none;"}
    ));
    container.appendChild(priv.generator.makeElement(
      "div",
      {
        "className": "ui-popup-screen ui-screen-hidden " +
          (overlay_theme ? "ui-overlay-" + overlay_theme : ""),
        "id": id + "-screen"
      }
    ));
    popup_wrap = priv.generator.makeElement(
      "div",
      {
        "className":
          "ui-popup-container ui-popup-hidden ui-popup-truncate " + transition,
        "id": id + "-popup"
      }
    );
    popup = priv.generator.makeElement(
      "div",
      {
        "className": "ui-popup ui-body-inherit " +
          shadow ? "ui-overlay-shadow" : "" + "ui-corner-all" + " " +
          classes,
        "id": id
      },
      {
        "data-transition": transition,
        "data-role": "popup",
        "data-enhanced": "true",
        "data-position-to": position || "origin"
      },
      {
        "data-theme": theme || null,
        "data-overlay-theme": overlay_theme || null,
        "data-tolerance": tolerance || null
      }
    );
    if (method) {
      popup.appendChild($(priv.get_hardcoded_values[method])[0]);
    }
    popup_wrap.appendChild(popup);
    container.appendChild(popup_wrap);

    return container
  };
  
 $(document).on("pagebeforeshow.logger", "div.ui-page", function (e) {
    var pop = document.getElementById("login");

    if (typeof pop === undefined || pop === null) {
      document.body.appendChild(priv.generateEnhancedPopup(
        "login",
        "fade",
        true,
        "popup login ui-content ui-popup-wide",
        "slapos-white",
        "window",
        "30,30,30,30",
        "slapos-black",
        undefined
      ));
      // enhance - bad...
      $(document).enhanceWithin().off(".logger");
    }
  });