@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
194 lines • 14.4 kB
JavaScript
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';
// export function putObjectIntoJSON ( obj: any, name: string = null ): JSX.Element {
// // return <ReactJson src={ obj } name={ 'panelItem' } collapsed={ true } displayDataTypes={ true } displayObjectSize={ true } enableClipboard={ true } style={{ padding: '20px 0px' }}/>;
// return <ReactJson src={ obj } name={ name } collapsed={ false } displayDataTypes={ false } displayObjectSize={ false } enableClipboard={ true } style={{ padding: '20px 0px' }} theme= { 'rjv-default' } indentWidth={ 2}/>;
// }
/**
* 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
*/
export function getWebPartHelpElementCSSWarning() {
const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'CSS', itemIcon: 'WarningSolid' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", { className: 'fps-pph-topic' }, "CSS Warning - applies to ANY 3rd party web part that modifies SharePoint page styles"),
React.createElement("h4", null, "Style changes may stop working without notice"),
React.createElement("div", null, "3rd party web parts rely on specific settings on SharePoint pages to work."),
React.createElement("div", null, "Microsoft can change those settings at any time without notice which could cause this web part to not work as desired."),
React.createElement("div", null, "If you notice any changes, please report to your SharePoint team as soon as possible."),
React.createElement("div", null,
React.createElement("b", null, "DO NOT rely on any style changes as means for restricting access!"),
" Use proper permission strategies instead."),
React.createElement("h4", null, "Perceived Lag with styles changing"),
React.createElement("div", null, "See next tab regarding performance of style changes."),
React.createElement("div", { className: 'fps-pph-topic' }, "Incompatibilities - avoid these conditions"),
React.createElement("h4", null, "Collapsable sections"),
React.createElement("div", null, "Styling updates to web parts only happen when the page is first loaded. Due to how SharePoint builds the page, collapsible section styles get reset when expanding."),
React.createElement("div", { className: 'fps-pph-topic' }, "Forced White Font color returns to black font color"),
React.createElement("div", null, "If you scroll far down a page, SharePoint unloads some content like Site and Page Titles."),
React.createElement("div", null, "When you scroll back up, SharePoint recreates them from scratch which this web part can not detect."),
React.createElement("div", null,
"If this happens, just press the Refresh Icon in the web part bar: ",
React.createElement(Icon, { style: { fontSize: 'larger' }, iconName: "SyncStatusSolid" })),
React.createElement("div", { className: 'fps-pph-topic' }, "Styles do not get updated on all web parts"),
React.createElement("div", null, "Do to the vast and every changing variety of web parts, only the most common have been tested."),
React.createElement("div", null, "These include"),
React.createElement("ul", null,
React.createElement("li", null, "Quick Links - most style variations"),
React.createElement("li", null, "News, Image, Timer, Hero, People web parts"),
React.createElement("li", null, "Embeded link web part"),
React.createElement("li", null, "Youtube web part"),
React.createElement("li", null, "Pivot Tiles web part")),
React.createElement("div", { className: 'fps-pph-topic' }, "CSS Class Selectors"),
React.createElement("a", { href: 'https://github.com/mikezimm/Slick-Sections/blob/main/src/webparts/fpsSlickSections/CoreFPS/SectionStyles.ts' }, "SectionStyles.ts"),
React.createElement("div", null,
"Used to get all ",
React.createElement("b", null, "Section divs"),
": ",
`document.querySelectorAll('`,
React.createElement("b", null, ".CanvasZone"),
`')`),
React.createElement("div", null,
"Used to get all ",
React.createElement("b", null, "WebPart divs"),
": ",
`document.querySelectorAll('`,
React.createElement("b", null, ".ControlZone"),
`')`),
React.createElement("div", { className: 'fps-pph-topic' },
"CSS ",
`[data-viewport-id]`,
" Selectors"),
React.createElement("div", null,
"Used to get ",
React.createElement("b", null, "PageTitle Section"),
" Jul-2024 : ",
`element.getAttribute('data-viewport-id').startsWith( '`,
React.createElement("b", null, "WebPart.PageTitle.internal"),
`')`),
React.createElement("div", null, "This is used by Slick Sections to ignore PageTitle section when applying it's styles"),
React.createElement("div", { className: 'fps-pph-topic' }, "Misc FPS Property: Hide Social Bar"),
React.createElement("div", null,
`document.querySelector('`,
React.createElement("b", null,
"`",
`[data-automation-id="sp-socialbar"]`,
"`"),
`')`),
React.createElement("div", null, `reference: src/banner/features/PageStyle/hideSPODataAutoId.ts`),
React.createElement("div", null,
React.createElement("b", null, "Known limitation:"),
" If Social Bar is lazy loaded, aka not when the first web part loads, it will not be hidden."),
React.createElement("div", { className: 'fps-pph-topic' }, "Specific dependancy for Full Page Background Image"),
React.createElement("div", null,
"Used to Main Canvas Div - to add Full Page BG Image - FOR SPA only: ",
`document.getElementsByClassName('`,
React.createElement("b", null, "mainContent"),
`')`),
React.createElement("div", null,
"Used to Main Canvas Div - to add Full Page BG Image - For Normal page: ",
`document.getElementsByClassName('`,
React.createElement("b", null, "CanvasComponent"),
`')`),
React.createElement("div", { className: 'fps-pph-topic' }, "Specific dependancies for styling White Text"),
React.createElement("div", null,
"scss class: forceWhiteText - Code: ",
React.createElement("a", { href: 'https://github.com/mikezimm/Slick-Sections/blob/ab202b0aec3b42f24d34ce35be07e50ae2595842/src/webparts/fpsSlickSections/components/FpsSlickSections.module.scss#L207' }, "Link to scss file for White Text")),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Site Header: Title, Following, Share buttons"),
React.createElement("div", null,
`document.querySelector('`,
React.createElement("b", null, `[data-automationid="SiteHeader"]`),
`')`),
React.createElement("div", null,
"Apply ",
React.createElement("b", null, ".forceWhiteTextSiteHeader"),
" to ",
React.createElement("b", null, "SiteHeader")),
React.createElement("div", null,
React.createElement("b", null,
React.createElement("mark", null, "NOTE:"),
" datautomationid"),
" is ONE WORD without a hyphen for this data element"),
React.createElement("div", null, `a,span ( attribute - link text and spans inside attributes )`),
React.createElement("div", null, `a span:hover ( attribute - link text and spans inside attributes )`),
React.createElement("div", null, `.ms-HorizontalNavItem-linkText.is-selected ( Add selected link underline bottom-border )`),
React.createElement("div", null, `data-automationid="SiteHeaderTitle" a ( attribute - link which Title is )`),
React.createElement("div", null, "Also targets all buttons and button icons"),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Page Title"),
React.createElement("div", null,
`document.querySelector('`,
React.createElement("b", null,
"`",
`[data-automation-id="pageHeader"]`,
"`"),
`')`),
React.createElement("div", null,
"Apply ",
React.createElement("b", null, ".forceWhiteTextPageHeader"),
" to ",
React.createElement("b", null, "pageHeader")),
React.createElement("div", null, `[data-automation-id="TitleTextId"]`),
React.createElement("div", null, `[data-automation-id="personaDetails"]`),
React.createElement("div", null,
`[data-automation-id="titleRegionBackgroundImage"] img`,
" : PabeInfo #138 - Opacity 0"),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Used for Command Bar Div"),
React.createElement("div", null,
`document.getElementsByClassName('`,
React.createElement("b", null, "mainContent"),
`')`),
React.createElement("div", null,
"Apply ",
React.createElement("b", null, ".forceWhiteTextCmdButton"),
" to ",
React.createElement("b", null, "mainContent")),
React.createElement("div", null, `[data-automation-id="visibleContent"]`),
React.createElement("div", null, `[data-automation-id="CollapsibleLayer-Button"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: webPartHeader - All Webparts"),
React.createElement("div", null, `[data-automation-id="webPartHeader"] [role="heading"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: News webpart"),
React.createElement("div", null, `[data-automation-id="newsItem"]`),
React.createElement("div", null, `[data-automation-id="newsItemTitle"]`),
React.createElement("div", null, `[data-automation-id="newsItemDescription"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Image webpart"),
React.createElement("div", null, `[data-automation-id="captionElement"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Text web part"),
React.createElement("div", null, `[data-automation-id="textBox"] >> h2, h3, h4, p, a`),
React.createElement("div", null,
`.rte-webpart ul`,
" : PageInfo #137"),
React.createElement("div", null,
`.rte-webpart .fontColorNeutralDark`,
" : SlickSections 71"),
React.createElement("div", null,
`.rte-webpart .fontColorThemePrimary`,
" : SlickSections 72"),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Quick Links web part"),
React.createElement("div", null, `[data-automation-id="quick-links-item-title"]`),
React.createElement("div", null, `[data-automation-id="tile-card"]`),
React.createElement("div", null, `[data-automation-id="button-card"]`),
React.createElement("div", null, `[data-automation-id="grid-layout"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Embed link web part"),
React.createElement("div", null, `[data-automation-id="embedContainer"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Hero Web Part - ONLY Layers style"),
React.createElement("div", null, `[data-automation-id="Layers"] [data-automation-id="HeroCallToAction"] i`),
React.createElement("div", null, `[data-automation-id="Layers"] [data-automation-id="HeroCallToAction"]`),
React.createElement("div", null, `[data-automation-id="Layers"] [data-automation-id="HeroPatternElement"] span`),
React.createElement("div", { className: 'fps-pph-topic' }, "White Text: Collapsible Section - NOT supported"),
React.createElement("div", null, `[data-automation-id="CollapsibleLayer-Button"]`),
React.createElement("div", { className: 'fps-pph-topic' }, "Set QuickLaunch transparancy when having BGImage, PageInfo TOC"),
React.createElement("div", null, `.forceQuickTransp`),
React.createElement("div", null, `.forceQuickTransp .ms-Nav-group`),
React.createElement("div", null, `.forceQuickTransp .ms-Nav-navItem:hover`),
React.createElement("div", null, `.forceQuickTransp .ms-Nav-compositeLink`),
React.createElement("div", null, `.forceQuickTransp .ms-Nav-compositeLink:hover a`),
React.createElement("div", null, `.forceQuickTransp .ms-Nav-linkText`),
React.createElement("div", null, `.forceQuickTransp .forceBlackText .ms-Nav-linkText`),
React.createElement("div", null, `.forceWhiteText [data-automationid="navEditLink"]`)));
return WebPartHelpElement;
}
//# sourceMappingURL=CSSWarning.js.map