gd-sprest-js
Version:
SharePoint 2013/Online js components.
411 lines (410 loc) • 16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var gd_sprest_1 = require("gd-sprest");
var fabric_1 = require("../../fabric");
var wpCfg_1 = require("./wpCfg");
/**
* Web Part
*/
exports.WebPart = function (props) {
var _panel = null;
var _panelCfg = props.editPanel || {};
var _cfg = {};
var _wp = null;
/**
* Method to add the help link to a script part editor.
* @wpId - The webpart id.
*/
var addHelpLink = function () {
// Ensure the help properties exist
if (props.helpProps) {
// Get the webpart's "Snippet"
var link = document.querySelector("div[webpartid='" + _wp.wpId + "'] a[title='Edit Snippet']");
if (link) {
// Create the help link
var 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
*/
var getWebPart = function (wpId) {
// Return a promise
return new Promise(function (resolve, reject) {
// Get the current context
var context = SP.ClientContext.get_current();
// Get the webpart from the current page
var page = context.get_web().getFileByServerRelativeUrl(gd_sprest_1.ContextInfo.serverRequestPath);
var wpMgr = page.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var wpDef = wpMgr.get_webParts().getById(wpId);
var wp = wpDef.get_webPart();
context.load(wp, "Properties");
// Execute the request
context.executeQueryAsync(
// Success
function () {
// Resolve the promise
resolve({
Context: context,
Properties: wp.get_properties(),
WebPart: wp,
WebPartDefinition: wpDef,
WebPartId: wp.get_id()
});
},
// Error
function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// Reject the promise
reject(args[1] ? args[1].get_message() : "");
});
});
};
/**
* Method to get the webpart id for a specified element
* @param el - The target element.
*/
var getWebPartId = function (el) {
// Loop until we find the webpart id
while (el) {
// See if this element contains the webpart id
var 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
*/
var getWebPartInfo = function () {
var targetInfo = {
cfg: null,
el: null,
wpId: null
};
// Ensure the element id exists
if (props.elementId) {
// Get the webpart elements
var elements = document.querySelectorAll("#" + props.elementId);
for (var i = 0; i < elements.length; i++) {
var elWebPart = elements[i];
// See if we have already configured this element
if (elWebPart.getAttribute("data-isConfigured")) {
continue;
}
// Get the webpart id
var wpId = getWebPartId(elWebPart);
if (wpId) {
// See if the configuration element exists
var elCfg = props.cfgElementId ? elWebPart.parentElement.querySelector("#" + props.cfgElementId) : null;
if (elCfg) {
try {
// Parse the configuration
var data = elCfg.innerText.trim();
var cfg = 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: cfg,
el: elWebPart,
wpId: wpId
};
break;
}
}
else {
// Set the target information
targetInfo = {
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("[sp-webpart] Error parsing the configuration for 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("[sp-webpart] Error - Unable to find elements with id '" + props.elementId + "'.");
}
}
else {
// Log
console.log("[sp-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 detect if a page is being edited
*/
var isEditMode = function () {
var formName = MSOWebPartPageFormName ? MSOWebPartPageFormName : "";
// Get the form
var form = document.forms[MSOWebPartPageFormName];
if (form) {
// Get the wiki page mode
var wikiPageMode = form._wikiPageMode ? form._wikiPageMode.value : null;
// Get the webpart page mode
var wpPageMode = form.MSOLayout_InDesignMode ? form.MSOLayout_InDesignMode.value : null;
// Determine if the page is being edited
return wikiPageMode == "Edit" || wpPageMode == "1";
}
// Unable to determine
return false;
};
/**
* Method to detect if the wiki page is being edited
*/
var isWikiPageInEdit = function () {
var wikiPageMode = null;
// Get the form
var form = document.forms[MSOWebPartPageFormName];
if (form) {
// Get the wiki page mode
wikiPageMode = form._wikiPageMode ? form._wikiPageMode.value : null;
}
// Determine if this wiki page is being edited
return wikiPageMode == "Edit";
};
/**
* Method to render the webpart
*/
var render = function () {
var element = null;
// Get the webpart information
_wp = getWebPartInfo();
if (_wp == null || _wp.el == null) {
// Log
console.log("[sp-webpart] The target webpart element '" + props.elementId + "' was not found.");
return;
}
// Set the configuration
_cfg = _wp.cfg;
// Get the webpart element
var elWebPart = _wp.wpId ? document.querySelector("div[webpartid='" + _wp.wpId + "']") : null;
if (elWebPart) {
// Add the default fabric class name
elWebPart.className += " fabric " + (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
var returnVal = null;
if (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 panel
else if (props.editPanel) {
// Display the edit panel
renderEditPanel();
}
}
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(function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// Execute the post render event
props.onPostRender ? props.onPostRender(_wp) : null;
});
}
else {
// Execute the post render event
props.onPostRender ? props.onPostRender(_wp) : null;
}
};
// Renders the configuration panel
var renderConfiguration = function () {
// Render the panel contents
var panelContents = _panel.updateContent([
'<div></div>',
'<div></div>'
].join('\n'));
// See if the render header event exists
if (_panelCfg.onRenderHeader) {
// Call the event
_panelCfg.onRenderHeader(panelContents.children[0], _wp);
}
// See if the render footer event exists
if (_panelCfg.onRenderFooter) {
// Call the event
_panelCfg.onRenderFooter(panelContents.children[1], _wp);
}
};
// The default render method when the page is edited
var renderEditPanel = function () {
// Ensure we are rendering the panel
if (_panelCfg == null) {
return;
}
// Render the configuration panel
_wp.el.innerHTML = [
'<div></div>',
'<div></div>'
].join('\n');
// Render the panel
_panel = fabric_1.Panel({
el: _wp.el.children[0],
headerText: "Configuration Panel",
panelType: _panelCfg.panelType || fabric_1.PanelTypes.Medium
});
// Render the button
var btn = fabric_1.Button({
el: _wp.el.children[1],
text: "Show Configuration",
onClick: function () {
var mainCommands = [];
// Show the panel
_panel.show();
// Render the header template
var header = _panel.getHeader();
header.innerHTML = "<div></div><div></div>";
// See if this is a wiki page
var disableSaveButton = isWikiPageInEdit();
if (disableSaveButton) {
// Get the webpart manager key name
var elWPMgrKeyName = document.getElementById("MSOSPWebPartManager_OldSelectedStorageKeyName");
// Set the flag
disableSaveButton = elWPMgrKeyName == null || elWPMgrKeyName.value.indexOf(_cfg.WebPartId) < 0;
if (disableSaveButton) {
// Show a message
header.children[1].innerHTML = fabric_1.Templates.Label({
text: "You must edit the webpart in order to save changes."
});
}
}
// See if we are adding the save button
if (_panelCfg.showSaveButton != false) {
// Add the save button
mainCommands.push({
isDisabled: disableSaveButton,
icon: "Save",
text: "Save",
onClick: function () {
// Call the save event and set the configuration
var cfg = _panelCfg.onSave ? _panelCfg.onSave(_wp.cfg) : null;
cfg = cfg ? cfg : _wp.cfg;
// Save the configuration
wpCfg_1.WPCfg.saveConfiguration(_wp.wpId, props.cfgElementId, cfg).then(function () {
// Close the panel
_panel.hide();
});
}
});
}
// See if custom buttons exist
if (_panelCfg.menuLeftCommands) {
// Add the buttons
mainCommands = mainCommands.concat(_panelCfg.menuLeftCommands);
}
// Set the side commands
var sideCommands = (_panelCfg.menuRightCommands || []).concat([{
className: "ms-CommandButton-close",
icon: "Cancel",
onClick: function () {
// Close the panel
_panel.hide();
}
}]);
// Render the menu
fabric_1.CommandBar({
el: header.children[0],
mainCommands: mainCommands,
sideCommands: sideCommands
});
// Render the configuration
renderConfiguration();
}
});
};
// Add a load event
window.addEventListener("load", function () {
// Render the component
render();
});
return {
cfg: _cfg,
info: _wp
};
};