gd-sprest-bs
Version:
SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.
281 lines (280 loc) • 11.9 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPFxWebPart = void 0;
var gd_bs_1 = require("gd-bs");
var gd_sprest_1 = require("gd-sprest");
/**
* SPFx WebPart Base Class
*/
var _SPFxWebPart = /** @class */ (function () {
/** The configuration modal. */
// Constructor
function _SPFxWebPart(props) {
var _this = this;
this._props = null;
/** The webpart configuration */
this._cfg = null;
/** The configuration form. */
this._form = null;
/** The configuration modal. */
this._modal = null;
/** Is in display mode */
this._isDisplay = null;
/** Is in edit mode */
this._isEdit = null;
// Save the properties
this._props = props;
// Ensure the spfx object was set
if (this._props.spfx == null) {
// Error
console.error("[gd-sprest-bs] The spfx property wasn't set.");
return;
}
// Set the page context
gd_sprest_1.ContextInfo.setPageContext(this._props.spfx.context.pageContext);
// Set the configuration
this.Configuration = this._props.spfx.properties.configuration;
// See if this is the workbench
if (window.location.pathname.indexOf("workbench.aspx") > 0) {
// Set both flags to render edit/display
this._isDisplay = true;
this._isEdit = true;
}
else {
// See if this is a classic page
if (gd_sprest_1.Helper.SP.Ribbon.exists) {
// Set the flag
this._isEdit = gd_sprest_1.Helper.WebPart.isEditMode();
}
else {
// Set the flag
this._isEdit = this._props.spfx.displayMode == gd_sprest_1.SPTypes.DisplayMode.Edit;
}
// Set the flag
this._isDisplay = !this._isEdit;
}
// Run the render method in another thread
setTimeout(function () {
// See if we are in edit mode
if (_this._isEdit) {
// Render the configuration button
_this.renderEdit();
}
// See if we are in display mode
if (_this.IsDisplay) {
// Render the webpart
_this.render();
}
}, 10);
}
Object.defineProperty(_SPFxWebPart.prototype, "Configuration", {
get: function () { return this._cfg; },
set: function (value) {
// Clear the value
this._cfg = {};
// Ensure a value exists
if (value) {
// Try to parse the value
try {
this._cfg = JSON.parse(value);
}
catch (_a) { }
}
},
enumerable: false,
configurable: true
});
;
Object.defineProperty(_SPFxWebPart.prototype, "Form", {
get: function () { return this._form; },
enumerable: false,
configurable: true
});
Object.defineProperty(_SPFxWebPart.prototype, "Modal", {
get: function () { return this._modal; },
enumerable: false,
configurable: true
});
Object.defineProperty(_SPFxWebPart.prototype, "IsDisplay", {
get: function () { return this._isDisplay; },
enumerable: false,
configurable: true
});
Object.defineProperty(_SPFxWebPart.prototype, "IsEdit", {
get: function () { return this._isEdit; },
enumerable: false,
configurable: true
});
// Method to render the webpart
_SPFxWebPart.prototype.render = function () {
// Get the webpart element
var elWP = this._props.spfx.domElement.querySelector(".webpart");
if (elWP == null) {
// Create the element
elWP = document.createElement("div");
elWP.classList.add("webpart");
this._props.spfx.domElement.appendChild(elWP);
}
else {
// Clear the element
while (elWP.firstChild) {
elWP.removeChild(elWP.firstChild);
}
}
// Call the render event
this._props.render ? this._props.render(elWP, this.Configuration) : null;
};
// Method to render the edit interface
_SPFxWebPart.prototype.renderEdit = function () {
var _this = this;
// Get the webpart element
var elWPConfig = this._props.spfx.domElement.querySelector(".webpart-cfg");
if (elWPConfig == null) {
// Create the element
elWPConfig = document.createElement("div");
elWPConfig.classList.add("webpart-cfg");
this._props.spfx.domElement.appendChild(elWPConfig);
}
else {
// Do nothing
return;
}
// Set the webpart properties pane to trigger the modal from displaying
var propertyPageConfig = this._props.spfx.getPropertyPaneConfiguration;
this._props.spfx.getPropertyPaneConfiguration = function () {
// Get the original configuration
var config = propertyPageConfig ? propertyPageConfig() : null;
// Update the configuration w/ a button
config = config || {};
config.pages = config.pages || [];
config.pages.push({
header: {
description: "Configuration"
},
groups: [
{
groupFields: [{
targetProperty: "configuration",
type: gd_sprest_1.SPTypes.PropertyPaneType.Button,
properties: {
text: "Configuration",
onClick: function () {
// Show the modal
_this.showEditModal();
}
}
}]
}
]
});
// Call the configuration
return config;
};
// Render the edit button
gd_bs_1.Components.Button({
el: elWPConfig,
text: "Edit",
onClick: function () {
// Show the edit modal
_this.showEditModal();
}
});
// Create the modal props
var modalProps = {
el: elWPConfig,
onClose: function () {
// Hide the property pane to cause the webpart to re-render
_this._props.spfx.context.propertyPane.close();
},
onRenderBody: function (el) {
// Create the form properties
var formProps = { el: el, value: _this._cfg };
// Call the rendering event
formProps = _this._props.onConfigFormRendering ? _this._props.onConfigFormRendering(formProps, _this._cfg) : formProps;
// Render the form
_this._form = gd_bs_1.Components.Form(formProps);
// Call the rendered event
_this._props.onConfigFormRendered ? _this._props.onConfigFormRendered(_this._form, _this._cfg) : null;
},
onRenderFooter: function (el) {
// Render the footer buttons
var footerProps = {
el: el,
tooltips: [
{
content: "Click to save the webpart configuration.",
btnProps: {
text: "Save",
type: gd_bs_1.Components.ButtonTypes.OutlineSuccess,
onClick: function () {
// Ensure the form is valid
if (_this._form.isValid()) {
var cfg = _this._form.getValues();
// Call the saving event
cfg = _this._props.onConfigSaving ? _this._props.onConfigSaving(cfg) : cfg;
// Try to convert the form values
var wpCfg = null;
try {
wpCfg = JSON.stringify(cfg);
}
catch (_a) { }
// Save the configuration
_this._props.spfx.properties.configuration = wpCfg;
// Update the configuration property
_this.Configuration = wpCfg;
// Call the saved event
_this._props.onConfigSaved ? _this._props.onConfigSaved(cfg) : null;
// See if we are in display mode and the property pane is closed
if (_this.IsDisplay && !_this._props.spfx.context.propertyPane.isPropertyPaneOpen()) {
// Render the display webpart
_this.render();
}
// Close the modal
_this._modal.hide();
}
}
}
}
]
};
// Call the event
footerProps = _this._props.onConfigFormFooterRendering ? _this._props.onConfigFormFooterRendering(footerProps, _this._cfg) : footerProps;
// Render the footer
gd_bs_1.Components.TooltipGroup(footerProps);
}
};
// Call the rendering event
var onRender = null;
var newProps = this._props.onModalRendering ? this._props.onModalRendering(modalProps) : null;
if (newProps) {
onRender = newProps.onRenderBody;
}
// Render the modal
this._modal = gd_bs_1.Components.Modal(__assign(__assign({}, newProps), modalProps));
// Call the rendered event
this._props.onModalRendered ? this._props.onModalRendered(this._modal) : null;
// Call the renderEdit event
this._props.renderEdit ? this._props.renderEdit(elWPConfig, this.Configuration) : null;
};
// Shows the modal
_SPFxWebPart.prototype.showEditModal = function () {
// Show the modal
this._modal ? this._modal.show() : null;
// Call the event
this._props.onConfigFormDisplaying ? this._props.onConfigFormDisplaying(this.Configuration) : null;
};
return _SPFxWebPart;
}());
var SPFxWebPart = function (props) { return new _SPFxWebPart(props); };
exports.SPFxWebPart = SPFxWebPart;