powerpagestoolkit 1.0.12 → 1.0.14

package/index.d.ts

@@ -1,5 +1,5 @@
-declare module powerpagestoolkit {
-  interface DOMNodeReference {
+declare module "powerpagestoolkit" {
+  class DOMNodeReference {
     constructor(querySelector: string);
     element: HTMLElement | null;
     isLoaded: boolean;
@@ -30,7 +30,7 @@ declare module powerpagestoolkit {
     onceLoaded(callback: (instance: this) => void): void;
   }
 
-  export function createDOMNodeReference(
+  export async function createDOMNodeReference(
     querySelector: string
   ): Promise<DOMNodeReference>;
 

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "powerpagestoolkit",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Reference, manipulate, and engage with Power Pages sites through the nodes in the DOM; use a variety of custom methods that allow customizing your power pages site quicker and easier.  ",
   "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.8",
     "@babel/preset-env": "^7.25.8",
+    "@types/node": "^22.8.0",
     "babel-loader": "^9.2.1",
     "eslint": "^8.57.1",
+    "typescript": "^5.6.3",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   },
@@ -20,5 +23,9 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Keaton-Brewster/PowerPagesToolKit"
-  }
+  },
+  "files": [
+    "index.js",
+    "index.d.ts"
+  ]
 }

package/.babelrc

@@ -1,3 +0,0 @@
-{
-    "presets": ["@babel/preset-env"]
-}

package/.eslintrc.cjs

@@ -1,29 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: "eslint:recommended",
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [".eslintrc.{js,cjs}"],
-      parserOptions: {
-        sourceType: "script",
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  rules: {
-    "no-undef": "error",
-    "no-unused-vars": "warn",
-  },
-  globals: {
-    $: "readonly",
-  },
-};

package/lib/API.js

@@ -1,70 +0,0 @@
-import safeAjax from "./safeAjax.js";
-const API = {
-  /**
-   *
-   * @param {Class} schema an instance of a schema class, containing the desired information for the POST request
-   * @returns a Promise resolving the successful results *[record id]* of the POST request, or rejecting the failed results *[error]* of the POST request.
-   */
-  createRecord(schema) {
-    return new Promise((resolve, reject) => {
-      safeAjax({
-        type: "POST",
-        url: `/_api/${schema.logicalName()}`,
-        data: schema.value(),
-        contentType: "application/json",
-        success: function (response, status, xhr) {
-          resolve(xhr.getResponseHeader("entityid"));
-        },
-        error: (error) => {
-          reject(error);
-        },
-      });
-    });
-  },
-  /**
-   *
-   * @param {string} tableSetName The DataVerse SET name of the table being queried
-   * @param {string} recordID the GUID of the records to be retrieved
-   * @param {string} selectColumns *OPTIONAL* if desired, enter your own custom OData query for advanced GET results. Format = select=column1,column2,column3...
-   * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
-   */
-  getRecord(tableSetName, recordID, selectColumns) {
-    return new Promise((resolve, reject) => {
-      const url = `/_api/${tableSetName}(${recordID})${
-        selectColumns ? `?$${selectColumns}` : ""
-      }`;
-
-      safeAjax({
-        type: "GET",
-        url: url,
-        success: resolve,
-        error: reject,
-      });
-    });
-  },
-  /**
-   *
-   * @param {String} tableSetName The DataVerse SET name of the table being queried
-   * @param {String} queryParameters *OPTIONAL* the OData query parameters for refining search results: *format = $filter=filters&$select=columns*
-   * @returns a Promise resolving the successful results of the GET request, or rejecting the failed results of the GET request
-   */
-  getMultiple(tableSetName, queryParameters) {
-    return new Promise((resolve, reject) => {
-      // Construct the URL based on the presence of query parameters
-      const url = `/_api/${tableSetName}${
-        queryParameters ? `?${queryParameters}` : ""
-      }`;
-
-      safeAjax({
-        type: "GET",
-        url: url,
-        success: function (response) {
-          resolve(response.value);
-        },
-        error: reject,
-      });
-    });
-  },
-};
-
-export default API;

package/lib/DOMNodeReferences.js

@@ -1,270 +0,0 @@
-import { waitFor } from "./common_functions.js";
-import FieldValidation from "./FieldValidation.class.js";
-import createInfoEl from "./createInfoElement.js";
-
-/**
- * Class representing a reference to a DOM node.
- */
-class DOMNodeReference {
-  /**
-   * Creates an instance of DOMNodeReference.
-   * @param {string} querySelector - The CSS selector to find the desired DOM element.
-   */
-  constructor(querySelector) {
-    this.querySelector = querySelector;
-    this.element = null;
-    this.isLoaded = false;
-    // Deferred initialization
-  }
-
-  /**
-   * Initializes the DOMNodeReference instance by waiting for the element to be available in the DOM.
-   * @returns {Promise<Proxy>} A promise that resolves to a Proxy of the DOMNodeReference instance.
-   * @throws {Error} Throws an error if the element cannot be found using the provided query selector.
-   */
-  async init() {
-    const element = await waitFor(this.querySelector);
-    if (!element) {
-      throw new Error(
-        `[SYNACT] No Element could be found with the provided query selector: ${this.querySelector}`
-      );
-    }
-
-    this.element = element;
-    this.parentElement = element.parentElement;
-    this.container = element.parentElement.parentElement.parentElement;
-    this.isLoaded = true;
-
-    if (this.element.classList.contains("boolean-radio")) {
-      this.yesRadio = new DOMNodeReference(`#${this.element.id}_1`);
-      this.noRadio = new DOMNodeReference(`#${this.element.id}_0`);
-    }
-
-    this.defaultDisplay = this.element.style.display || "block";
-    this.defaultParentDisplay = this.parentElement.style.display || "block";
-    this.defaultContainerDisplay = this.container.style.display || "block";
-
-    return new Proxy(this, {
-      get: (target, prop) => {
-        const value = target[prop];
-        if (typeof value === "function" && prop !== "onceLoaded") {
-          return (...args) =>
-            target.onceLoaded(() => value.apply(target, args));
-        }
-        return value;
-      },
-    });
-  }
-
-  /**
-   * Hides the element by setting its display style to "none".
-   * @method hide
-   */
-  hide() {
-    this.element.style.display = "none";
-  }
-
-  /**
-   * Shows the element by restoring its default display style.
-   * @method show
-   */
-  show() {
-    this.element.style.display = this.defaultDisplay;
-  }
-
-  /**
-   * Hides the parent element by setting its display style to "none".
-   * @method hideParent
-   */
-  hideParent() {
-    this.parentElement.style.display = "none";
-  }
-
-  /**
-   * Shows the parent element by restoring its default display style.
-   * @method showParent
-   */
-  showParent() {
-    this.parentElement.style.display = this.defaultParentDisplay;
-  }
-
-  /**
-   * Hides the container (grandparent of the element) by setting its display style to "none".
-   * @method hideContainer
-   */
-  hideContainer() {
-    this.element.parentElement.parentElement.parentElement.style.display =
-      "none";
-  }
-
-  /**
-   * Shows the container (grandparent of the element) by restoring its default display style.
-   * @method showContainer
-   */
-  showContainer() {
-    this.element.parentElement.parentElement.parentElement.style.display =
-      this.defaultContainerDisplay;
-  }
-
-  /**
-   * Sets the value of the HTML element.
-   * @method setValue
-   * @param {string} value - The value to set for the HTML element.
-   */
-  setValue(value) {
-    this.element.value = value;
-  }
-
-  /**
-   * Gets the value of the HTML element.
-   * @method getValue
-   * @returns {string} The current value of the HTML element.
-   */
-  getValue() {
-    return this.element.value;
-  }
-
-  /**
-   * Appends child elements to the HTML element.
-   * @method append
-   * @param {...HTMLElement} elements - The elements to append to the HTML element.
-   */
-  append(...elements) {
-    this.element.append(...elements);
-  }
-
-  /**
-   * Inserts elements after the HTML element.
-   * @method after
-   * @param {...HTMLElement} elements - The elements to insert after the HTML element.
-   */
-  after(...elements) {
-    this.element.after(...elements);
-  }
-
-  /**
-   * Retrieves the label associated with the HTML element.
-   * @method getLabel
-   * @returns {HTMLElement} The label element associated with this element.
-   * @throws {Error} Throws an error if the label cannot be found.
-   */
-  getLabel() {
-    return document.querySelector(`#${this.element.id}_label`);
-  }
-
-  /**
-   * Appends child elements to the label associated with the HTML element.
-   * @method appendToLabel
-   * @param {...HTMLElement} elements - The elements to append to the label.
-   */
-  appendToLabel(...elements) {
-    let label = this.getLabel();
-    label.append(" ", ...elements);
-  }
-
-  /**
-   * Adds a click event listener to the HTML element.
-   * @method addClickListener
-   * @param {Function} eventHandler - The function to execute when the element is clicked.
-   */
-  addClickListener(eventHandler) {
-    this.element.addEventListener("click", (e) => {
-      e.preventDefault();
-      eventHandler();
-    });
-  }
-
-  /**
-   * Adds a change event listener to the HTML element.
-   * @method addChangeListener
-   * @param {Function} eventHandler - The function to execute when the element's value changes.
-   */
-  addChangeListener(eventHandler) {
-    this.element.addEventListener("change", (e) => {
-      e.preventDefault();
-      eventHandler();
-    });
-  }
-
-  /**
-   * Unchecks both the yes and no radio buttons if they exist.
-   * @method uncheckRadios
-   */
-  uncheckRadios() {
-    if (this.yesRadio && this.noRadio) {
-      this.yesRadio.element.checked = false;
-      this.noRadio.element.checked = false;
-    } else {
-      console.error(
-        "[SYNACT] Attempted to uncheck radios for an element that has no radios"
-      );
-    }
-  }
-
-  /**
-   * Creates a validation instance for the field.
-   * @method createValidation
-   * @param {Function} evaluationFunction - The function used to evaluate the field.
-   * @param {string} fieldDisplayName - The field name to display in error if validation fails.
-   */
-  createValidation(evaluationFunction, fieldDisplayName) {
-    new FieldValidation(this.id, `'${fieldDisplayName}'`, evaluationFunction);
-  }
-
-  /**
-   * Adds a tooltip with specified text to the label associated with the HTML element.
-   * @method addLabelTooltip
-   * @param {string} text - The text to display in the tooltip.
-   */
-  addLabelTooltip(text) {
-    this.appendToLabel(createInfoEl(text));
-  }
-
-  /**
-   * Sets the inner HTML content of the HTML element.
-   * @method setTextContent
-   * @param {string} text - The text to set as the inner HTML of the element.
-   */
-  setTextContent(text) {
-    this.element.innerHTML = text;
-  }
-
-  /**
-   * Executes a callback function once the element is fully loaded.
-   * If the element is already loaded, the callback is called immediately.
-   * Otherwise, a MutationObserver is used to detect when the element is added to the DOM.
-   * @method onceLoaded
-   * @param {Function} callback - A callback function to execute once the element is loaded.
-   */
-  onceLoaded(callback) {
-    console.log("loading element");
-    if (this.isLoaded) {
-      callback(this);
-    } else {
-      const observer = new MutationObserver(() => {
-        if (document.querySelector(this.querySelector)) {
-          observer.disconnect(); // Stop observing once loaded
-          this.isLoaded = true;
-          callback(this); // Call the provided callback
-        }
-      });
-
-      observer.observe(document.body, {
-        subtree: true,
-        childList: true,
-      });
-    }
-  }
-}
-
-/**
- * Creates and initializes a DOMNodeReference instance.
- * @async
- * @function createDOMNodeReference
- * @param {string} querySelector - The CSS selector for the desired DOM element.
- * @returns {Promise<Proxy>} A promise that resolves to a Proxy of the initialized DOMNodeReference instance.
- */
-export default async function createDOMNodeReference(querySelector) {
-  const instance = new DOMNodeReference(querySelector);
-  return await instance.init();
-}

package/lib/FieldValidation.class.js

@@ -1,25 +0,0 @@
-export default class FieldValidation {
-  constructor(fieldLogicalName, fieldDisplayname, evaluationFunction) {
-    this.fieldLogicalName = fieldLogicalName;
-    this.fieldDisplayname = fieldDisplayname;
-    this.evaluationFunction = evaluationFunction.bind(this);
-
-    this.createValidator();
-  }
-
-  createValidator = function () {
-    if (typeof Page_Validators == "undefined") return;
-    // Create new validator
-    var newValidator = document.createElement("span");
-    newValidator.style.display = "none";
-    newValidator.id = `${this.fieldLogicalName}Validator`;
-    newValidator.controltovalidate = `${this.fieldLogicalName}`;
-    newValidator.errormessage = `<a href='#${this.fieldDisplayname}_label'>${this.fieldDisplayname} is a required field</a>`;
-    newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
-    newValidator.initialvalue = "";
-    newValidator.evaluationfunction = this.evaluationFunction;
-    // Add the new validator to the page validators array:
-    // eslint-disable-next-line no-undef
-    Page_Validators.push(newValidator);
-  };
-}

package/lib/common_functions.js

@@ -1,24 +0,0 @@
-/**
- * @description a function that will wait for a targeted element to appear in the DOM, and then resolve a promise to allow further action to be performed after the targeted elements appears
- * @param {String} selector a query selector expression to target a specific element that you want to appear in the DOM before taking further action
- * @returns {Promise} the element targeted by ID *selector*
- */
-
-export function waitFor(selector) {
-  return new Promise((resolve) => {
-    if (document.querySelector(selector)) {
-      return resolve(document.querySelector(selector));
-    }
-
-    const observer = new MutationObserver(() => {
-      if (document.querySelector(selector)) {
-        observer.disconnect();
-        resolve(document.querySelector(selector));
-      }
-    });
-
-    observer.observe(document.body, {
-      subtree: true,
-    });
-  });
-}

package/lib/createInfoElement.js

@@ -1,62 +0,0 @@
-export default function CreateInfoEl(titleString) {
-  // Create a container span
-  const span = document.createElement("span");
-  span.style.position = "relative";
-  span.style.display = "inline-block"; // Ensure proper placement
-
-  // Create the "i" icon
-  const icon = document.createElement("i");
-  icon.classList.add("fa", "fa-solid", "fa-info-circle");
-  icon.setAttribute("aria-label", "Info"); // For accessibility
-  icon.style.cursor = "pointer"; // Ensure it's clear it's interactive
-
-  // Create the flyout content
-  const flyoutContent = document.createElement("div");
-  flyoutContent.innerHTML = titleString;
-  flyoutContent.style.display = "none";
-  flyoutContent.style.position = "absolute";
-  flyoutContent.style.top = "100%";
-  flyoutContent.style.left = "0";
-  flyoutContent.style.backgroundColor = "#f9f9f9";
-  flyoutContent.style.padding = "10px";
-  flyoutContent.style.border = "1px solid #ddd";
-  flyoutContent.style.zIndex = "1";
-  flyoutContent.style.width = "max-content"; // Default for larger screens
-
-  // Responsive Design Adjustments
-  flyoutContent.style.maxWidth = "90vw"; // Ensure it doesn't overflow on mobile
-  flyoutContent.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.1)"; // Add shadow for clarity
-  flyoutContent.style.borderRadius = "4px"; // Make it more modern with rounded corners
-
-  // Append the icon and flyout content to the container
-  span.appendChild(icon);
-  span.appendChild(flyoutContent);
-
-  // Event listeners for desktop (hover)
-  icon.addEventListener("mouseenter", () => {
-    flyoutContent.style.display = "block";
-  });
-  icon.addEventListener("mouseleave", () => {
-    flyoutContent.style.display = "none";
-  });
-
-  // Event listeners for mobile (touch)
-  icon.addEventListener("touchstart", (event) => {
-    event.preventDefault(); // Prevent triggering other touch events like click
-    if (flyoutContent.style.display === "none") {
-      flyoutContent.style.display = "block";
-    } else {
-      flyoutContent.style.display = "none";
-    }
-  });
-
-  // Optional: Add an "x" button or click-away to close the flyout on mobile
-  document.body.addEventListener("click", (event) => {
-    if (!span.contains(event.target)) {
-      flyoutContent.style.display = "none"; // Hide if clicked outside
-    }
-  });
-
-  // Return the span element which holds the icon and flyout content
-  return span;
-}

package/lib/safeAjax.js

@@ -1,31 +0,0 @@
-export default function safeAjax(ajaxOptions) {
-  var deferredAjax = $.Deferred();
-
-  // shell is only available via runtime in a PowerPages portal
-  //eslint-disable-next-line
-  shell
-    .getTokenDeferred()
-    .done(function (token) {
-      // add headers for AJAX
-      if (!ajaxOptions.headers) {
-        $.extend(ajaxOptions, {
-          headers: {
-            __RequestVerificationToken: token,
-          },
-        });
-      } else {
-        ajaxOptions.headers["__RequestVerificationToken"] = token;
-      }
-      $.ajax(ajaxOptions)
-        .done(function (data, textStatus, jqXHR) {
-          //eslint-disable-next-line
-          validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
-        })
-        .fail(deferredAjax.reject); //AJAX
-    })
-    .fail(function () {
-      deferredAjax.rejectWith(this, arguments); // on token failure pass the token AJAX and args
-    });
-
-  return deferredAjax.promise();
-}

package/webpack.config.cjs

@@ -1,29 +0,0 @@
-/* eslint-disable */
-const path = require("path");
-
-module.exports = {
-  // Define multiple entry points
-  entry: {
-    investorDetails: "./JavaScript/Investor/InvestorDetails.basicform.js",
-  },
-  output: {
-    // Set the output filename pattern and location
-    filename: "[name].bundle.js", // [name] will be replaced by entry key
-    path: path.resolve(__dirname, "./dist"), // Output directory
-  },
-  mode: "production", // Set the build mode
-  module: {
-    rules: [
-      {
-        test: /\.js$/, // Transpile JavaScript files
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            presets: ["@babel/preset-env"],
-          },
-        },
-      },
-    ],
-  },
-};