@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
110 lines (108 loc) • 8.04 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-22 14:49:52
* Update:: import { ICallbackAddParamToUrl } to '@mikezimm/fps-core-v7/lib/banner/FPSWebPartClass/IThisFPSWebPartClass1152;'
*/
/**
* CodeAnalizerComment: Updated 2 imports on 2024-09-21 23:07:24
* Update:: import { ICallbackAddParamToUrl } to '@mikezimm/fps-core-v7/lib/banner/FPSWebPartClass/IThisFPSWebPartClass1152;'
* Update:: import { BeakerModeTricks } to '@mikezimm/fps-core-v7/lib/components/molecules/FullPageBackGround/interfaces/FullPageBGParams;'
*/
import * as React from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
// import ReactJson from '@microlink/react-json-view';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
import { createTricksTableElement } from '../../../../banner/components/SingleHelpPage/makeTricksTable';
import { BeakerModeTricks } from '@mikezimm/fps-core-v7/lib/banner/components/SingleHelpPage/interfaces/ITrickRow';
// const ParamStyles: React.CSSProperties = { display: 'flex', gap: '20px', fontWeight: 600 };
/**
* FPS Slick Sections Notes:
*
* ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
* @returns
*/
// White text refresh label
export const LinkStyles = { padding: '8px 15px', marginBottom: '12px', color: 'darkblue', cursor: 'pointer' };
export function getFullBackgroundHelp(onClick) {
const WebPartHelpElement = React.createElement(PivotItem, { headerText: undefined, itemIcon: 'PictureFill' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", { className: 'fps-pph-topic' }, "Full Page Image url"),
React.createElement("div", null, "If you want a single image as the page background, paste full link to image here"),
React.createElement("div", null, "When you scroll, the page scrolls but image is fixed."),
React.createElement("div", null,
React.createElement("mark", null, "NOTE for Multiple FPS Web parts on the same page")),
React.createElement("div", null,
"If you have multiple FPS Web Parts on the page and experience issues as you scroll down the page and lazy load new web parts, ",
React.createElement("b", null, "Just put the word 'Ignore'"),
" in that property for all other web parts. This will prevent the extra web parts from clearing the background image."),
React.createElement("div", null, "Alternatively, if you just add an html color-name or hash-color, it will apply a color to the full page."),
React.createElement("div", { className: 'fps-pph-topic' }, "Image Overlay"),
React.createElement("div", null, "Adjust Opacity greater than 0 in order to make background image darker or lighter."),
React.createElement("div", null, "Then select overlay color."),
React.createElement("div", { className: 'fps-pph-topic' }, "CSS Image Filter"),
React.createElement("div", null, "Allows you to apply a filter to your background image like blue or grayscale."),
React.createElement("div", null,
React.createElement("a", { href: `https://www.w3schools.com/cssref/playdemo.php?filename=playcss_filter&preval=blur(5px)` }, "See image filter examples here"),
"."),
React.createElement("div", null,
"Note you can combine filters to such as doing this: ",
React.createElement("b", null, "blur(5px) sepia(100%)"),
"."),
React.createElement("div", { className: 'fps-pph-topic' }, "Force default text color white"),
React.createElement("div", null,
React.createElement("b", null, "Toggle on"),
" if you are using a ",
React.createElement("b", null, "dark color full page image"),
"."),
React.createElement("div", null,
"Makes certain ",
React.createElement("b", null, "web backgrounds transparent with white text")),
React.createElement("div", null,
React.createElement("mark", null, "Text color may also be white while Editing the page when background image is not visible")),
React.createElement("div", { className: 'fps-pph-topic' }, "White text refresh label"),
React.createElement("div", null,
"If you force white text, the web part bar will have this icon: ",
React.createElement(Icon, { style: { fontSize: 'larger' }, iconName: "SyncStatusSolid" })),
React.createElement("div", null, "You can add text to left of that icon you want to tell people what it is."),
React.createElement("div", null,
"Note that the message should be very short and may crash into a longer web part title to ",
`it's`,
" left."),
React.createElement("div", { className: 'fps-pph-topic' }, "Default Webparts Background-Color css"),
React.createElement("div", null, "css color setting to apply to all web parts on the page, except when a section has a more specific setting"),
React.createElement("div", null,
React.createElement("mark", null, "You toggle each section's \"Customize Section X\" to true for this to be applied that section")),
React.createElement("ul", null,
React.createElement("div", null,
React.createElement("b", null, "example"),
": description"),
React.createElement("li", null,
React.createElement("b", null, "white"),
": white"),
React.createElement("li", null,
React.createElement("b", null, "black"),
": black"),
React.createElement("li", null,
React.createElement("b", null, "rgba(0, 0, 0, 0.8)"),
": mostly-visible charcoal"),
React.createElement("li", null,
React.createElement("b", null, "rgba(0, 0, 0, 0.2)"),
": mostly-transparent charcoal"),
React.createElement("li", null,
React.createElement("b", null, "rgba(255, 255, 255, .8)"),
": mostly-visible white you can not see through well"),
React.createElement("li", null,
React.createElement("b", null, "rgba(255, 255, 255, .2)"),
": mostly-transparent white you can see through")),
React.createElement("div", { className: 'fps-pph-topic' }, "Image Fit"),
React.createElement("div", null, "Unfortunately the Background image will not fill entire page in all screen sizes."),
React.createElement("div", null, "We recommend you test the page by stretching to different sizes from wide-screen monitors to phone sizes in portrait mode."),
React.createElement("div", null, "Sometimes you may see white bars on the top-bottom or side."),
React.createElement("div", null, "If this causes an issue, you can try changing this setting, then save the page and completely refresh."),
React.createElement("div", { className: 'fps-pph-topic' },
React.createElement("mark", null, "NOTE:"),
" If you are forcing white text, white bars may prevent you from finding the edit button."),
React.createElement("div", null, "To simulate various style changes such as font-color, try some of these:"),
React.createElement("div", null, createTricksTableElement(BeakerModeTricks, `Specific Url Params to test`))));
return WebPartHelpElement;
}
//# sourceMappingURL=FullImage.js.map