gd-sprest-bs

import { Helper } from "gd-sprest"; import { IWebPart, IWebPartCfg, IWebPartInfo, IWebPartProps } from "./types"; import { WPCfg } from "./wpCfg"; /** * Web Part */ export const WebPart = (props: IWebPartProps): IWebPart => { let _cfg: IWebPartCfg = {}; let _wp: IWebPartInfo = null; /** * Method to add the help link to a script part editor. * @wpId - The webpart id. */ let addHelpLink = () => { // Ensure the help properties exist if (props.helpProps) { // Get the webpart's "Snippet" let link = document.querySelector("div[webpartid='" + _wp.wpId + "'] a[title='Edit Snippet']"); if (link) { // Create the help link let helpLink = document.createElement("a"); helpLink.href = props.helpProps.url || "#"; helpLink.style.paddingLeft = "10px"; helpLink.setAttribute("role", "button"); helpLink.title = props.helpProps.title || "Help"; helpLink.innerHTML = "<span class='ms-metadata'>" + helpLink.title + "</span>"; helpLink.target = "_blank"; // Append the link link.parentElement.appendChild(helpLink); } } } /** * Method to get the webpart id for a specified element * @param el - The target element. */ let getWebPartId = (el: HTMLElement) => { // Loop until we find the webpart id while (el) { // See if this element contains the webpart id let wpId = el.getAttribute("webpartid"); if (wpId) { // Return the webpart id return wpId; } // Check the parent el = el.parentElement; } // Unable to detect return ""; } /** * Method to get the webpart information */ let getWebPartInfo = (): IWebPartInfo => { let targetInfo: IWebPartInfo = { cfg: null, el: null, wpId: null }; // Ensure the element id exists if (props.elementId) { // Get the webpart elements let elements = document.querySelectorAll("#" + props.elementId); for (let i = 0; i < elements.length; i++) { let elWebPart = elements[i] as HTMLElement; // See if we have already configured this element if (elWebPart.getAttribute("data-isConfigured")) { continue; } // Get the webpart id let wpId = getWebPartId(elWebPart); if (wpId) { // See if the configuration element exists let elCfg = elWebPart.parentElement.querySelector("#" + props.cfgElementId) as HTMLElement; if (elCfg) { try { // Parse the configuration let data = elCfg.innerText.trim(); let cfg: IWebPartCfg = data.length > 0 ? JSON.parse(data) : null; // See if the webaprt id exists if (cfg && cfg.WebPartId) { // See if it's for this webpart if (cfg.WebPartId == wpId) { // Set the target information targetInfo = { cfg, el: elWebPart, wpId: wpId }; break; } } else { // Set the target information targetInfo = { cfg: { ...(cfg || {}), WebPartId: wpId }, el: elWebPart, wpId: wpId }; break; } } catch (ex) { // Set the target information targetInfo = { cfg: { WebPartId: wpId }, el: elWebPart, wpId: wpId }; // Log console.log("[bs-webpart] Error parsing the configuration for the webpart element '" + props.cfgElementId + "'."); } // Break from the loop break; } else { // Set the target information targetInfo = { cfg: { WebPartId: wpId }, el: elWebPart, wpId: wpId }; break; } } } // Ensure elements were found if (elements.length == 0) { // Log console.log("[bs-webpart] Error - Unable to find the webpart element with id '" + props.elementId + "'.") } } else { // Log console.log("[bs-webpart] The target element id is not defined."); } // Ensure the target element exists if (targetInfo.el) { // Set the configuration flag targetInfo.el.setAttribute("data-isConfigured", "true"); } // Return the target information return targetInfo; } /** * Method to render the webpart */ let render = () => { // Get the webpart information _wp = _wp || getWebPartInfo(); if (_wp == null || _wp.el == null) { // Log console.log("[bs-webpart] The target webpart element '" + props.elementId + "' was not found."); return; } // Set the configuration _cfg = _wp.cfg; // Get the webpart element let elWebPart = _wp.wpId ? document.querySelector("div[webpartid='" + _wp.wpId + "']") : null; if (elWebPart) { // Add the default bootstrap class name elWebPart.className += " bs " + (props.wpClassName || ""); } // See if a class name exists if (props.className && _wp.el.className.indexOf(props.className) < 0) { // Set the class name _wp.el.className += " " + props.className; } // See if the page is being edited let returnVal = null; if (Helper.WebPart.isEditMode()) { // Add the help link addHelpLink(); // Add the edit class name _wp.el.classList.add("is-edit"); // Call the render event if (props.onRenderEdit) { // Execute the render edit event returnVal = props.onRenderEdit(_wp); } // See if we are displaying the default edit form else if (props.editForm) { // Display the edit form WPCfg(_cfg, _wp, props); } } else { // See if the configuration is defined, but has no value if (_wp.cfg || (props.cfgElementId || "").length == 0) { // Execute the render edit event returnVal = props.onRenderDisplay(_wp); } else { // Render a message _wp.el.innerHTML = '<h3>Please edit the page and configure the webpart.</h3>'; } } // See if a promise was returned if (returnVal && returnVal.then) { // Wait for the request to complete returnVal.then((...args) => { // Execute the post render event props.onPostRender ? props.onPostRender(_wp) : null; }); } else { // Execute the post render event props.onPostRender ? props.onPostRender(_wp) : null; } } // Get the webpart information _wp = getWebPartInfo(); if (_wp) { // Render the component render(); } else { // Add a load event window.addEventListener("load", () => { // Render the component render(); }); } // Return the webpart return { cfg: _cfg, info: _wp } }