@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
186 lines (184 loc) • 9.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.setExpandoRamicMode = void 0;
var FPSDocument_1 = require("../FPSDocument");
var domSearch_1 = require("../domSearch");
function setExpandoRamicMode(domElement, maximize, controlStyle, alertError, consoleResult, expandoPadding, host) {
if (alertError === void 0) { alertError = true; }
if (consoleResult === void 0) { consoleResult = false; }
var fpsWindowProps = (0, FPSDocument_1.createFPSWindowProps)();
/**
* DO NOT UNCOMMENT THIS OUT... Currently causes it to open but not be able to collapse.
*/
//If this was already attempted, then exit
// if ( fpsWindowProps.expando.attempted === true ) { return; }
// else if ( maximize !== true ) { return; }
// else { fpsWindowProps.expando.attempted = true; }
//Get the webparts parent control zone
var searchParams = window.location.search ? window.location.search : '';
searchParams = searchParams.split('%3a').join(':');
//Had to add this just as a precaution....
//the classnames change depending on if the page is in EditMode.
//When in EditMode, they have single -, in View mode, the have --
var findClass = searchParams.indexOf('Mode=Edit') > -1 ? ['ControlZone-control', 'ControlZone--control'] : ['ControlZone--control', 'ControlZone-control'];
var thisControlZome = null;
var foundElement = false;
findClass.map(function (checkClass) {
if (foundElement === false) {
thisControlZome = (0, domSearch_1.findParentElementLikeThis)(domElement, 'classList', checkClass, 10, 'contains', false, true);
if (thisControlZome) {
foundElement = true;
}
}
});
//Sets property of target element
if (host !== "SharePointFullPage" && thisControlZome) {
if (maximize === true) {
domElement.style.padding = "".concat(expandoPadding, "px");
thisControlZome.style['display'] = 'inline-block';
thisControlZome.style['position'] = 'fixed';
thisControlZome.style['top'] = '0%';
thisControlZome.style['left'] = '0';
thisControlZome.style['bottom'] = '0';
thisControlZome.style['right'] = '0';
thisControlZome.style['margin'] = 'auto';
thisControlZome.style['width'] = '100%';
thisControlZome.style['background-color'] = 'white';
thisControlZome.style['overflow-y'] = 'scroll';
thisControlZome.style['z-index'] = '12';
if (!controlStyle || controlStyle.length === 0) {
thisControlZome.style['background'] = 'lightgray';
if (consoleResult === true || alertError === true) {
console.log('FPS Expandoramic: mode = default && true:');
}
}
else {
try {
//Original code where it parses it in the banner
// let styles = JSON.parse ( controlStyle );
// Object.keys( styles ).map( key => {
// thisControlZome.style[key] = styles[key];
// });
// if ( consoleResult === true || alertError === true ) {
// console.log('FPS Expandoramic: mode = true, custom styles:');
// console.log(styles);
// }
//Updated code where it parses it in the main webpart class
Object.keys(controlStyle).map(function (key) {
thisControlZome.style[key] = controlStyle[key];
});
if (consoleResult === true || alertError === true) {
console.log('FPS Expandoramic: mode = true, custom styles:');
console.log(controlStyle);
}
}
catch (e) {
console.log('FPS ERROR: Unable to parse expandoRamicMode controlStyle:');
console.log(controlStyle);
if (alertError === true) {
alert("FPS ERROR: controlStyle is not valid ".concat(controlStyle));
}
}
}
}
else if (maximize === false) {
domElement.style.padding = '';
thisControlZome.style['display'] = null;
thisControlZome.style['position'] = null;
thisControlZome.style['top'] = null;
thisControlZome.style['left'] = null;
thisControlZome.style['bottom'] = null;
thisControlZome.style['right'] = null;
thisControlZome.style['margin'] = null;
thisControlZome.style['width'] = null;
thisControlZome.style['background-color'] = null;
thisControlZome.style['overflow-y'] = null;
thisControlZome.style['z-index'] = null;
if (consoleResult === true || alertError === true) {
console.log('FPS Expandoramic: mode = default && FALSE:');
}
}
}
else if (host === "SharePointFullPage" || host === "SingleWebPartAppPageLayout") { //Assume this is a single page app
var parentElement = domElement.parentElement;
if (!parentElement) {
console.log('FPSExpandoramic unable to detect a parent element.');
}
else if (maximize === true) {
//https://www.javascripttutorial.net/javascript-dom/javascript-width-height/
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log('FPSExpandoramic Width calculated as ', width);
//SharePoint seems to add the left app bar as a bar when the width is > 1,000 px.
if (width > 1000) {
parentElement.style['left'] = '48px'; //Best size for app bar on left
//https://www.w3schools.com/cssref/func_calc.asp
// parentElement.style['width'] = `calc(100% - 96px)`;
parentElement.style['z-index'] = 10; //Push back when maximized and wide so it is behind the app bar menu.
//Set SuiteNavWrapper behind the parentElement so it's hidden.
var SuiteNavWrapper = document.getElementById("SuiteNavWrapper");
if (SuiteNavWrapper) {
SuiteNavWrapper.style.zIndex = 9; //SuiteNavWrapper is normally at 12 for 1080p testing
}
}
else {
parentElement.style['z-index'] = 12;
parentElement.style['left'] = '0px'; //Best size for app bar on left
}
// This works great for showing the app bar with no padding
parentElement.style.padding = "".concat(expandoPadding, "px"); //`${0}px`;
parentElement.style['position'] = 'fixed';
parentElement.style['top'] = '0px';
parentElement.style['right'] = '0px'; //`${expandoPadding * 2}px`; //Setting right and left to zero works but blocks the sp-App Bar
parentElement.style['background-color'] = 'white';
parentElement.style['overflow-y'] = 'scroll';
// domElement.style['background'] = 'lightgray';
parentElement.style['height'] = '100%';
//Updated code where it parses it in the main webpart class
Object.keys(controlStyle).map(function (key) {
domElement.style[key] = controlStyle[key];
});
if (consoleResult === true || alertError === true) {
console.log('FPS Expandoramic: mode = default && true:');
}
}
else { //Set to normal mode
//https://www.javascripttutorial.net/javascript-dom/javascript-width-height/
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log('FPSExpandoramic Width calculated as ', width);
//SharePoint seems to add the left app bar as a bar when the width is > 1,000 px.
if (width > 1000) {
//https://www.w3schools.com/cssref/func_calc.asp
// parentElement.style['width'] = `calc(100% - 96px)`;
var SuiteNavWrapper = document.getElementById("SuiteNavWrapper");
if (SuiteNavWrapper) {
SuiteNavWrapper.style.zIndex = "12"; //SuiteNavWrapper is normally at 12 for 1080p testing
}
}
else {
}
parentElement.style['top'] = '';
parentElement.style['width'] = '';
parentElement.style['position'] = '';
parentElement.style['background-color'] = null;
parentElement.style['overflow-y'] = null;
parentElement.style['z-index'] = null;
parentElement.style['background'] = '';
parentElement.style['height'] = '';
}
}
}
exports.setExpandoRamicMode = setExpandoRamicMode;
/**
style {
display: inline-block;
position: fixed;
top: 0%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow-y: scroll;
z-index: 12;
}
*/
//# sourceMappingURL=FPSExpandoramic.js.map