@mikezimm/npmfunctions/dist/PropPaneHelp/FPSCommonOnNpm.js

Functions used in my SPFx webparts

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SitePresetsInfo = exports.ImportHelp = exports.SinglePageAppHelp = exports.FPSExpandHelp = exports.FPSBasicHelp = exports.BannerHelp = exports.VisitorHelp = exports.PinMeHelp = void 0;
var React = __importStar(require("react"));
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
// This should be loaded locally in the project only once
// require('./PropPanelHelp.css');
var Pivot_1 = require("office-ui-fabric-react/lib/Pivot");
var defaults_1 = require("../HelpPanelOnNPM/onNpm/defaults");
require('./PropPanelHelp.css');
var CSSOverRideWarning = React.createElement("div", { style: { fontSize: 'large' } },
    React.createElement("div", { className: 'fps-pph-topic', style: { fontSize: 'large' } },
        React.createElement("mark", null, "NOTICE")),
    React.createElement("div", null, "Any 3rd party app that modifies the page styling (like these) are using undocumented tricks "),
    React.createElement("div", null,
        "  - - ",
        React.createElement("b", null, "WHICH ARE SUBJECT TO BREAK without notice by Microsoft"),
        "."),
    React.createElement("div", null, "These settings are applied after this web part loads."),
    React.createElement("div", null,
        React.createElement("b", null, "Users may briefly see the original styling"),
        ".  Especially if their connection is slow or your page takes a long time to load."));
var DeveloperWarning = React.createElement("div", { style: { fontSize: 'large' } },
    React.createElement("div", { className: 'fps-pph-topic', style: { fontSize: 'large' } },
        React.createElement("mark", null, "NOTICE")),
    React.createElement("div", null, "ONLY turn these on IF you know what you are doing and need them."));
exports.PinMeHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'Pin Me' },
    React.createElement("div", { className: 'fps-pph-content' },
        React.createElement("div", { className: 'fps-pph-topic' }, "Default Location"),
        React.createElement("div", null,
            React.createElement("li", null,
                React.createElement("b", null, "normal - "),
                "Web part loads on page where you put it"),
            React.createElement("li", null,
                React.createElement("b", null, "Pin Expanded - "),
                "Web part loads Pinned in upper right corner fully expanded"),
            React.createElement("li", null,
                React.createElement("b", null, "Pin Collapsed - "),
                "Web part loads Pinned in upper right corner collapsed")),
        React.createElement("div", { className: 'fps-pph-topic' }, "Force Pin State"),
        React.createElement("div", null,
            React.createElement("li", null,
                React.createElement("b", null, "Let user change - "),
                "End user can move the web part from Pinned to Normal location at any time"),
            React.createElement("li", null,
                React.createElement("b", null, "Enforce no Toggle - "),
                "End user can not toggle the position of the web part.",
                React.createElement("p", null, "With Enforcing pin, the end user will always be able to expand or collapse the web part."),
                React.createElement("p", null, "Be sure to test experience by loading the page with the browser shrunk to size of a phone.  Consider end user experience trying to navigate your page.")))));
exports.VisitorHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'Visitor Help' },
    React.createElement("div", { className: 'fps-pph-content' },
        React.createElement("div", { className: 'fps-pph-topic' }, "Full Help Panel Audience"),
        React.createElement("div", null,
            "This gives you control who can see the entire ",
            React.createElement("b", null, "More Information"),
            " panel in the Help Banner bar."),
        React.createElement("div", null, "People who have less rights than this will only see the content you add via the property pane."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Panel Description"),
        React.createElement("div", null, "Personalized heading message you give you your users."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Support Message"),
        React.createElement("div", null, "Optional message to give users for support."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Documentation message"),
        React.createElement("div", null, "Message you can give users directly above the documentation link"),
        React.createElement("div", { className: 'fps-pph-topic' }, "Paste a Documentation link"),
        React.createElement("div", null, "We require a valid SharePoint link where you store further information on using this web part."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Documentation Description"),
        React.createElement("div", null, "Optional text that the user sees as the Documentation Link text"),
        React.createElement("div", { className: 'fps-pph-topic' }, "Support Contacts"),
        React.createElement("div", null, "Use of this web part requires a current user to be identified for support issues.")));
exports.BannerHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'Banner' },
    React.createElement("div", { className: 'fps-pph-content' },
        React.createElement("div", { className: 'fps-pph-topic', style: { textDecoration: 'underline' } }, "FPS Banner - Basics"),
        React.createElement("div", { className: 'fps-pph-topic' }, "Show Banner"),
        React.createElement("div", null, "May allow you to hide the banner.  If toggle disabled, it is required."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Optional Web Part Title"),
        React.createElement("div", null, "Add Title text to the web part banner."),
        React.createElement("div", null, "Depending on the web part, this may not be editable."),
        React.createElement("div", { className: 'fps-pph-topic' }, "More Info text-button"),
        React.createElement("div", null, "Customize the More Information text/Icon in the right of the banner."),
        React.createElement("div", { className: 'fps-pph-topic', style: { textDecoration: 'underline' } }, "FPS Banner - Navigation"),
        React.createElement("div", { className: 'fps-pph-topic' },
            "Show 'Go to Home Page' ",
            React.createElement(Icon_1.Icon, { iconName: 'Home' }),
            " Icon"),
        React.createElement("div", null,
            "Displays the ",
            React.createElement(Icon_1.Icon, { iconName: 'Home', style: defaults_1.defaultBannerCommandStyles }),
            " when you are not on the site's home page."),
        React.createElement("div", { className: 'fps-pph-topic' },
            "Show 'Go to Parent Site' ",
            React.createElement(Icon_1.Icon, { iconName: 'Up' }),
            " Icon"),
        React.createElement("div", null,
            "Displays the ",
            React.createElement(Icon_1.Icon, { iconName: 'Up', style: defaults_1.defaultBannerCommandStyles }),
            " when you are not on the site's home page."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Gear, Go to Home, Parent audience"),
        React.createElement("div", null, "Minimum permissions requied to see the Home and Parent site icons."),
        React.createElement("div", null, "Use this to hide buttons from visitors if your ALV Financial Manual Web part is more of a single page app and you want to hide the site from a typical visitor."),
        React.createElement("div", null, "NOTE:  Site Admins will always see the icons."),
        React.createElement("ul", null,
            React.createElement("li", null, "Site Owners: have manageWeb permissions"),
            React.createElement("li", null, "Page Editors: have addAndCustomizePages permissions"),
            React.createElement("li", null, "Item Editors: have addListItems permissions")),
        React.createElement("div", { className: 'fps-pph-topic', style: { textDecoration: 'underline' } }, "Theme options"),
        React.createElement("div", null,
            React.createElement("mark", null,
                React.createElement("b", null, "NOTE:")),
            " May be required depending on our policy for this web part"),
        React.createElement("div", null, "Use dropdown to change your theme for the banner (color, buttons, text)"),
        React.createElement("div", { className: 'fps-pph-topic' }, "Banner Hover Effect"),
        React.createElement("div", null, "Turns on or off the Mouse Hover effect.  If Toggle is off, the banner does not 'Fade In'.  Turn off if you want a solid color banner all the time.")));
exports.FPSBasicHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'FPS Basic' },
    React.createElement("div", { className: 'fps-pph-content' },
        CSSOverRideWarning,
        React.createElement("div", { className: 'fps-pph-topic' }, "Hide Quick Launch"),
        React.createElement("div", null, "As of April 2022, MSFT allows you to modify quick launch in Site Gear 'Change the look'"),
        React.createElement("div", null, "Only use this option if you want the Quick launch on the site as a whole but not on the page this web part is installed on."),
        React.createElement("div", { className: 'fps-pph-topic' },
            "All Sections ",
            React.createElement("b", null, "Max Width"),
            " Toggle and slider"),
        React.createElement("div", null, "Over-rides out of the box max width on page sections."),
        React.createElement("div", { className: 'fps-pph-topic' },
            "All Sections ",
            React.createElement("b", null, "Margin"),
            " Toggle and slider"),
        React.createElement("div", null, "Over-rides out of the box top and bottom section margin."),
        React.createElement("div", { className: 'fps-pph-topic' }, "Hide Toolbar - while viewing"),
        React.createElement("div", null, "Hidden:  Will hide the page toolbar (Edit button) when loading the page."),
        React.createElement("div", null,
            React.createElement("b", null, "Only use if you know what you are doing :)")),
        React.createElement("div", null,
            React.createElement("mark", null, "WARNING"),
            ".  ",
            React.createElement("b", null, "Add ?tool=true to the Url"),
            " and reload the page in order to edit the page.  You ",
            React.createElement("b", null, "CAN NOT SEE THESE INSTRUCTIONS"),
            " unless you add ?tool=true to the page")));
exports.FPSExpandHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'FPS Expand' },
    React.createElement("div", { className: 'fps-pph-content' },
        CSSOverRideWarning,
        React.createElement("div", { className: 'fps-pph-topic' },
            React.createElement("b", null),
            "Enable Expandoramic Mode"),
        React.createElement("div", null,
            React.createElement("b", null),
            "Enables the Expandoramic toggle (diagonal arrow icon in upper left of Header."),
        React.createElement("div", { className: 'fps-pph-topic' },
            React.createElement("b", null),
            "Page load default"),
        React.createElement("div", null,
            React.createElement("b", null),
            "Determines the format when loading the page."),
        React.createElement("ul", null,
            React.createElement("li", null, "Normal:  Webpart DOES NOT AUTO expand when loading the page"),
            React.createElement("li", null, "Expanded:  Page loads with webpart expanded"),
            React.createElement("li", null, "Whenever you 'Edit' the page, you may need to manually shrink webpart to see the page and webpart properties.")),
        React.createElement("div", { className: 'fps-pph-topic' },
            React.createElement("b", null),
            "Expandoramic Audience"),
        React.createElement("div", null,
            React.createElement("b", null, "NOTE:"),
            " Site Admins will always see all icons regardless of the Toggles or the audience."),
        React.createElement("ul", null,
            React.createElement("li", null, "Site Owners: have manageWeb permissions"),
            React.createElement("li", null, "Page Editors: have addAndCustomizePages permissions"),
            React.createElement("li", null, "Item Editors: have addListItems permissions")),
        React.createElement("div", { className: 'fps-pph-topic' },
            React.createElement("b", null, "Style options and Hover Effect"),
            " are for SharePoint IT use only."),
        React.createElement("div", null,
            React.createElement("b", null)),
        React.createElement("div", { className: 'fps-pph-topic' }, "Padding"),
        React.createElement("div", null, "Adjusts the padding around the webpart.  20px minimum.")));
exports.SinglePageAppHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'Single Page Apps' },
    React.createElement("div", { className: 'fps-pph-content' },
        React.createElement("div", { className: 'fps-pph-topic' }, "Before you start!"),
        React.createElement("div", { className: 'fps-pph-topic' }, "If you plan to build a full page app (Full expand web part at load time)"),
        React.createElement("div", null,
            "Be sure to follow these steps to improve performance and minimize any styling issues and delays:",
            React.createElement("ol", null,
                React.createElement("li", null, "Create a page from 'Apps' Template when you first create a page"),
                React.createElement("ul", null,
                    React.createElement("li", null, "This will remove all navigation from the page, make the web part full page and load faster.")),
                React.createElement("li", null,
                    "IF NOT, then Start with a ",
                    React.createElement("b", null, "Communication Site")),
                React.createElement("ul", null,
                    React.createElement("li", null, "This is the only site that allows true 'Full Width webparts'")),
                React.createElement("li", null,
                    React.createElement("b", null, "Clear the home page completely"),
                    " (do not have any other webparts)"),
                React.createElement("li", null,
                    "Minimize what SharePoint loads",
                    React.createElement("ol", { style: { listStyleType: 'lower-alpha' } },
                        React.createElement("li", null, "Go to Gear"),
                        React.createElement("li", null, "Click 'Change the look'"),
                        React.createElement("li", null,
                            "Click Header",
                            React.createElement("ul", null,
                                React.createElement("li", null, "Set Layout to minimal"),
                                React.createElement("li", null, "Set 'Site title visiblity' to off"),
                                React.createElement("li", null, "Remove your site logo"),
                                React.createElement("li", null, "Save Header settings"))),
                        React.createElement("li", null,
                            "Click Navigation",
                            React.createElement("ul", null,
                                React.createElement("li", null, "Turn off Site Navigation"))))),
                React.createElement("li", null, "Add SecureScript in the first Full Width section")))));
exports.ImportHelp = React.createElement(Pivot_1.PivotItem, { headerText: 'Import' },
    React.createElement("div", { className: 'fps-pph-content' },
        React.createElement("div", { className: 'fps-pph-topic' }, "If Available in this web part..."),
        React.createElement("div", null, "It allows you to paste in values from the same webpart from a different page."),
        React.createElement("div", null, "To Export web part settings"),
        React.createElement("ol", null,
            React.createElement("li", null, "Click on 'More Information' in the Web Part Banner"),
            React.createElement("li", null,
                "Click the Export tab ",
                React.createElement(Icon_1.Icon, { iconName: 'Export', style: defaults_1.defaultBannerCommandStyles }),
                " (last tab in the Help Panel)"),
            React.createElement("li", null, "Hover over Export Properties row"),
            React.createElement("li", null, "Click the blue paper/arrow icon on the right side of the row to 'Export' the properties"),
            React.createElement("li", null, "Edit this page and web part"),
            React.createElement("li", null, "Paste properties into the Import properties box"))));
/**
 * 2022-08-29:  Refactored return statement to fix compile warning.
* @param sitePresets : ISitePreConfigProps
 * @returns
 */
function SitePresetsInfo(sitePresets) {
    var usePreSets = sitePresets && (sitePresets.forces.length > 0 || sitePresets.presets.length > 0) ? true : false;
    if (usePreSets === true) {
        var allForces_1 = [];
        var forcesRows_1 = [];
        var forcePreviously_1 = null;
        sitePresets.forces.map(function (preset, index) {
            if (index === 0 || sitePresets.forces[index].source !== sitePresets.forces[index - 1].source) {
                forcesRows_1.push(React.createElement("tr", { className: 'fps-policy', style: { color: 'darkred' } },
                    React.createElement("td", { colSpan: 2 }, preset.source),
                    React.createElement("td", { colSpan: 2 }, preset.location)));
            }
            var wasForced = '';
            var wasForcedClass = wasForced ? 'was-forced' : '';
            if (allForces_1.indexOf(preset.prop) > -1) {
                wasForced = '*';
                forcePreviously_1 = React.createElement("div", null, "* These items were previously enforced");
            }
            else {
                allForces_1.push(preset.prop);
            }
            forcesRows_1.push(React.createElement("tr", { className: preset.className },
                React.createElement("td", null, preset.prop),
                React.createElement("td", { title: "for sites: ".concat(preset.location) }, preset.type),
                React.createElement("td", { className: wasForcedClass },
                    preset.status,
                    wasForced),
                React.createElement("td", null,
                    JSON.stringify(preset.value),
                    " ")));
        });
        var forces = sitePresets.forces.length === 0 ? null : React.createElement("div", null,
            React.createElement("div", { className: 'fps-pph-topic' }, "Forced Properties - may seem editable but are auto-set."),
            React.createElement("div", { className: '' }, "In the case a property is forced multiple times, the last one is the one that gets applied."),
            forcePreviously_1,
            React.createElement("table", { className: 'configured-props' }, forcesRows_1));
        var presetsRows_1 = [];
        var alreadyEnforced_1 = [];
        sitePresets.presets.map(function (preset, index) {
            if (index === 0 || sitePresets.presets[index].source !== sitePresets.presets[index - 1].source) {
                presetsRows_1.push(React.createElement("tr", { className: 'fps-policy', style: { color: 'darkgreen' } },
                    React.createElement("td", { colSpan: 2 }, preset.source),
                    React.createElement("td", { colSpan: 2 }, preset.location)));
            }
            var wasForced = '';
            if (allForces_1.indexOf(preset.prop) > -1 && alreadyEnforced_1.indexOf(preset.prop) < 0) {
                alreadyEnforced_1.push(preset.prop);
                wasForced = '^';
            }
            var wasForcedClass = wasForced ? 'was-forced' : '';
            presetsRows_1.push(React.createElement("tr", { className: preset.className },
                React.createElement("td", null, preset.prop),
                React.createElement("td", { title: "for sites: ".concat(preset.location) }, preset.type),
                React.createElement("td", { className: wasForcedClass },
                    preset.status,
                    wasForced),
                React.createElement("td", null,
                    JSON.stringify(preset.value),
                    " ")));
        });
        var alreadyEnforcedStr = alreadyEnforced_1.join('; ');
        var presets = sitePresets.presets.length === 0 ? null : React.createElement("div", null,
            React.createElement("div", { className: 'fps-pph-topic' }, "Preset Properties"),
            React.createElement("div", { className: '' }, "These presets were over-written by the forced policies listed above:"),
            React.createElement("div", { className: '' }, "In the case a property is preset multiple times, the last one is the one that gets applied."),
            React.createElement("div", { className: 'width90' }, alreadyEnforcedStr),
            React.createElement("table", { className: 'configured-props' }, presetsRows_1));
        var preSetsContent = React.createElement("div", { className: 'fps-pph-content', style: { display: 'flex' } },
            React.createElement("div", null,
                forces,
                presets));
        return preSetsContent;
    }
    else {
        return null;
    }
}
exports.SitePresetsInfo = SitePresetsInfo;
//# sourceMappingURL=FPSCommonOnNpm.js.map