#1165 Split to onprem+online project.
Upgrade to SPFx v1.10.0, Teams tab support
This commit is contained in:
Mikael Svenson
parent
316155fce4
commit
b9c7977eff
|
|
@ -54,7 +54,7 @@ As an example add the following scripts to the web part in order to show stock t
|
|||
|
||||
The web part works by loading each script in a `<script src>` tag sequentially in the order they are specified, then any other `<script>` block is executed.
|
||||
|
||||
|
||||
|
||||
|
||||
If all you want is to add markup on the page, you can do that as well. Adding the following html would show a headline and a list.
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ If your scripts rely on the classic _spPageContextInfo, you can enable that in t
|
|||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-script-editor | Mikael Svenson ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
|
||||
react-script-editor-onprem | Mikael Svenson ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -126,6 +126,7 @@ Version|Date|Comments
|
|||
1.0.0.12|April 15th, 2019|Re-fix for pad removal of web part
|
||||
1.0.0.13|July 1th, 2019|Downgrade to SPFx v1.4.1 to support SP2019
|
||||
1.0.0.14|Oct 13th, 2019|Added resolve to fix pnpm issue. Updated author info.
|
||||
1.0.0.15|Mar 16th, 2020|Renamed package file. Linked to SPO only version.
|
||||
|
||||
## Disclaimer
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "Modern Script Editor web part by mikaelsvenson",
|
||||
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"version": "1.0.0.14",
|
||||
"version": "1.0.0.15",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "pzl-script-editor",
|
||||
"framework": "react",
|
||||
"version": "1.4.1",
|
||||
"libraryName": "pnp-script-editor",
|
||||
"version": "1.10.0",
|
||||
"environment": "spo",
|
||||
"isDomainIsolated": false,
|
||||
"libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"isCreatingSolution": true,
|
||||
"packageManager": "npm",
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,22 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 3/1/2017 12:00:00 AM
|
||||
---
|
||||
# Script editor web part for modern pages built in React
|
||||
|
||||
This version works only for SharePoint Online. If you want a version for Sharepoint on-premises go to [react-script-editor-onprem](../react-script-editor-onprem).
|
||||
|
||||
## Summary
|
||||
Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page
|
||||
without having to repackage it as a new SharePoint Framework web part. This web part is similar to the classic
|
||||
|
|
@ -52,7 +54,7 @@ As an example add the following scripts to the web part in order to show stock t
|
|||
|
||||
The web part works by loading each script in a `<script src>` tag sequentially in the order they are specified, then any other `<script>` block is executed.
|
||||
|
||||
|
||||
|
||||
|
||||
If all you want is to add markup on the page, you can do that as well. Adding the following html would show a headline and a list.
|
||||
|
||||
|
|
@ -88,11 +90,45 @@ You may add CSS via style tags or `link` tags.
|
|||
</div>
|
||||
```
|
||||
|
||||
## Support for Office UI Fabric styles
|
||||
By adding the class name `ms-Fabric` to your top element, you can use use fabric CSS classes directly in the web part. See [Fabric Core](https://developer.microsoft.com/en-us/fabric#/get-started/web#fabric-core) for more information on Fabric classes.
|
||||
|
||||
**Sample**
|
||||
```html
|
||||
<div class="ms-Fabric">
|
||||
<span class="ms-font-su ms-fontColor-themePrimary">
|
||||
Big text in primary theme color
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Support for classic _spPageContextInfo
|
||||
If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane.
|
||||
|
||||
## Support for Teams tabs
|
||||
If you want to use the solution as a Teams tab, perform the changes to deploy to [non-script](#deploy-to-non-script-sites--modern-team-sites) sites and [tenant wide deployment](#deploy-tenant-wide).
|
||||
|
||||
Next see the [Teams tab tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) for steps needed to deploy the solution as a Teams tab.
|
||||
|
||||
You can get access to the Teams context information via the global variable `_teamsContexInfo`. The available properties are documented at [Teams context interface](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest).
|
||||
|
||||
**Sample**
|
||||
```html
|
||||
<div class="ms-Fabric">
|
||||
<span id="ScriptIt" class="ms-font-xxl ms-fontColor-neutralPrimary">
|
||||
</span>
|
||||
</div>
|
||||
<script>
|
||||
var element = document.getElementById("ScriptIt");
|
||||
element.innerHTML = "Team: " + _teamsContexInfo.teamName + "<br\>Channel: " + _teamsContexInfo.channelName;
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -124,6 +160,7 @@ Version|Date|Comments
|
|||
1.0.0.12|April 15th, 2019|Re-fix for pad removal of web part
|
||||
1.0.0.13|July 1th, 2019|Downgrade to SPFx v1.4.1 to support SP2019
|
||||
1.0.0.14|Oct 13th, 2019|Added resolve to fix pnpm issue. Updated author info.
|
||||
1.0.0.15|Mar 16th, 2020|Upgrade to SPFx v1.10.0. Add support for Teams tab. Renamed package file.
|
||||
|
||||
## Disclaimer
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 9.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 11 MiB |
|
|
@ -3,12 +3,13 @@
|
|||
"version": "2.0",
|
||||
"bundles": {
|
||||
"script-editor-bundle": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/scriptEditor/ScriptEditorWebPart.js",
|
||||
"manifest": "./src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
"components": [{
|
||||
"entrypoint": "./lib/webparts/scriptEditor/ScriptEditorWebPart.js",
|
||||
"manifest": "./src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json"
|
||||
}]
|
||||
}
|
||||
},
|
||||
"localizedResources": {
|
||||
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,6 @@
|
|||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "pzl-script-editor",
|
||||
"container": "pnp-script-editor",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
"solution": {
|
||||
"name": "Modern Script Editor web part by mikaelsvenson",
|
||||
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"version": "1.0.0.14",
|
||||
"version": "1.0.0.15",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false
|
||||
"skipFeatureDeployment": false,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/pzl-script-editor.sppkg"
|
||||
"zippedPackage": "solution/pnp-script-editor.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json",
|
||||
// Display errors as warnings
|
||||
"displayAsWarning": true,
|
||||
// The TSLint task may have been configured with several custom lint rules
|
||||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||
// project). If true, this flag will deactivate any of these rules.
|
||||
"removeExistingRules": true,
|
||||
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||
"useDefaultConfigAsBase": false,
|
||||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||
// which are active, other than the list of rules below.
|
||||
"lintConfig": {
|
||||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-case": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"valid-typeof": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false,
|
||||
"prefer-const": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,20 +6,21 @@ const build = require('@microsoft/sp-build-web');
|
|||
const bundleAnalyzer = require('webpack-bundle-analyzer');
|
||||
|
||||
build.configureWebpack.mergeConfig({
|
||||
additionalConfiguration: (generatedConfiguration) => {
|
||||
const lastDirName = path.basename(__dirname);
|
||||
const dropPath = path.join(__dirname, 'temp', 'stats');
|
||||
generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
|
||||
openAnalyzer: false,
|
||||
analyzerMode: 'static',
|
||||
reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
|
||||
generateStatsFile: true,
|
||||
statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
|
||||
logLevel: 'error'
|
||||
}));
|
||||
additionalConfiguration: (generatedConfiguration) => {
|
||||
const lastDirName = path.basename(__dirname);
|
||||
const dropPath = path.join(__dirname, 'temp', 'stats');
|
||||
generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
|
||||
openAnalyzer: false,
|
||||
analyzerMode: 'static',
|
||||
reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
|
||||
generateStatsFile: true,
|
||||
statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
|
||||
logLevel: 'error'
|
||||
}));
|
||||
|
||||
return generatedConfiguration;
|
||||
}
|
||||
return generatedConfiguration;
|
||||
}
|
||||
});
|
||||
|
||||
build.initialize(gulp);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,37 +1,43 @@
|
|||
{
|
||||
"name": "pzl-script-editor",
|
||||
"name": "pnp-script-editor",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"natives": "1.1.3",
|
||||
"@types/react": "15.6.6"
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/load-themed-styles": "^1.4.1",
|
||||
"@microsoft/sp-core-library": "1.4.1",
|
||||
"@microsoft/sp-loader": "^1.4.1",
|
||||
"@microsoft/sp-webpart-base": "1.4.1",
|
||||
"@microsoft/sp-core-library": "1.10.0",
|
||||
"@microsoft/sp-loader": "1.10.0",
|
||||
"@microsoft/sp-lodash-subset": "1.10.0",
|
||||
"@microsoft/sp-property-pane": "1.10.0",
|
||||
"@microsoft/sp-webpart-base": "1.10.0",
|
||||
"@pnp/spfx-controls-react": "1.16.0",
|
||||
"@pnp/spfx-property-controls": "1.17.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"office-ui-fabric-react": "^5.118.3",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2"
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.4.1",
|
||||
"@microsoft/sp-module-interfaces": "1.4.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.4.1",
|
||||
"@microsoft/rush-stack-compiler-3.2": "^0.6.3",
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.10.0",
|
||||
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/prop-types": "ts2.4",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"webpack-bundle-analyzer": "^2.13.1"
|
||||
"tslint-microsoft-contrib": "5.0.0",
|
||||
"webpack-bundle-analyzer": "^3.6.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 156 B |
|
|
@ -3,4 +3,5 @@ export interface IScriptEditorWebPartProps {
|
|||
title: string;
|
||||
removePadding: boolean;
|
||||
spPageContextInfo: boolean;
|
||||
teamsContext: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
import {
|
||||
IPropertyPaneField,
|
||||
PropertyPaneFieldType,
|
||||
IPropertyPaneCustomFieldProps
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { IPropertyPaneField, PropertyPaneFieldType, IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
|
||||
|
||||
export class PropertyPaneLogo implements IPropertyPaneField<IPropertyPaneCustomFieldProps> {
|
||||
public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"version": "*",
|
||||
"supportsFullBleed": true,
|
||||
"manifestVersion": 2,
|
||||
"supportedHosts": ["SharePointWebPart", "SharePointFullPage", "TeamsTab"],
|
||||
"requiresCustomScript": true,
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "3a328f0a-99c4-4b28-95ab-fe0847f657a3",
|
||||
|
|
|
|||
|
|
@ -2,17 +2,26 @@ import * as React from 'react';
|
|||
import * as ReactDom from 'react-dom';
|
||||
import { Version, DisplayMode } from '@microsoft/sp-core-library';
|
||||
import { SPComponentLoader } from '@microsoft/sp-loader';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneToggle,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration, IPropertyPaneField, PropertyPaneTextField, PropertyPaneToggle } from "@microsoft/sp-property-pane";
|
||||
import { IScriptEditorProps } from './components/IScriptEditorProps';
|
||||
import { IScriptEditorWebPartProps } from './IScriptEditorWebPartProps';
|
||||
import PropertyPaneLogo from './PropertyPaneLogo';
|
||||
|
||||
export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
|
||||
public _propertyPaneHelper;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.scriptUpdate = this.scriptUpdate.bind(this);
|
||||
}
|
||||
|
||||
public scriptUpdate(_property: string, oldVal: string, newVal: string) {
|
||||
this.properties.script = newVal;
|
||||
this._propertyPaneHelper.initialValue = newVal;
|
||||
// this.render();
|
||||
}
|
||||
|
||||
public save: (script: string) => void = (script: string) => {
|
||||
this.properties.script = script;
|
||||
this.render();
|
||||
|
|
@ -35,6 +44,8 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
element = element.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
this.domElement.innerHTML = this.properties.script;
|
||||
this.executeScript(this.domElement);
|
||||
} else {
|
||||
|
|
@ -42,7 +53,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
}
|
||||
}
|
||||
|
||||
private async renderEditor(){
|
||||
private async renderEditor() {
|
||||
// Dynamically load the editor pane to reduce overall bundle size
|
||||
const editorPopUp = await import(
|
||||
/* webpackChunkName: 'scripteditor' */
|
||||
|
|
@ -53,7 +64,9 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
{
|
||||
script: this.properties.script,
|
||||
title: this.properties.title,
|
||||
save: this.save
|
||||
propPaneHandle: this.context.propertyPane,
|
||||
save: this.save,
|
||||
key: "pnp" + new Date().getTime()
|
||||
}
|
||||
);
|
||||
ReactDom.render(element, this.domElement);
|
||||
|
|
@ -63,31 +76,63 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected async loadPropertyPaneResources(): Promise<void> {
|
||||
//import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
|
||||
const editorProp = await import(
|
||||
/* webpackChunkName: 'scripteditor' */
|
||||
'@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor'
|
||||
);
|
||||
|
||||
this._propertyPaneHelper = editorProp.PropertyFieldCodeEditor('scriptCode', {
|
||||
label: 'Edit HTML Code',
|
||||
panelTitle: 'Edit HTML Code',
|
||||
initialValue: this.properties.script,
|
||||
onPropertyChange: this.scriptUpdate,
|
||||
properties: this.properties,
|
||||
disabled: false,
|
||||
key: 'codeEditorFieldId',
|
||||
language: editorProp.PropertyFieldCodeEditorLanguages.HTML
|
||||
});
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
let webPartOptions: IPropertyPaneField<any>[] = [
|
||||
PropertyPaneTextField("title", {
|
||||
label: "Title to show in edit mode",
|
||||
value: this.properties.title
|
||||
}),
|
||||
PropertyPaneToggle("removePadding", {
|
||||
label: "Remove top/bottom padding of web part container",
|
||||
checked: this.properties.removePadding,
|
||||
onText: "Remove padding",
|
||||
offText: "Keep padding"
|
||||
}),
|
||||
PropertyPaneToggle("spPageContextInfo", {
|
||||
label: "Enable classic _spPageContextInfo",
|
||||
checked: this.properties.spPageContextInfo,
|
||||
onText: "Enabled",
|
||||
offText: "Disabled"
|
||||
}),
|
||||
this._propertyPaneHelper
|
||||
];
|
||||
|
||||
if (this.context.sdks.microsoftTeams) {
|
||||
let config = PropertyPaneToggle("teamsContext", {
|
||||
label: "Enable teams context as _teamsContexInfo",
|
||||
checked: this.properties.teamsContext,
|
||||
onText: "Enabled",
|
||||
offText: "Disabled"
|
||||
});
|
||||
webPartOptions.push(config);
|
||||
}
|
||||
webPartOptions.push(new PropertyPaneLogo());
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
groups: [
|
||||
{
|
||||
groupFields: [
|
||||
PropertyPaneTextField("title", {
|
||||
label: "Title to show in edit mode",
|
||||
value: this.properties.title
|
||||
}),
|
||||
PropertyPaneToggle("removePadding", {
|
||||
label: "Remove top/bottom padding of web part container",
|
||||
checked: this.properties.removePadding,
|
||||
onText: "Remove padding",
|
||||
offText: "Keep padding"
|
||||
}),
|
||||
PropertyPaneToggle("spPageContextInfo", {
|
||||
label: "Enable classic _spPageContextInfo",
|
||||
checked: this.properties.spPageContextInfo,
|
||||
onText: "Enabled",
|
||||
offText: "Disabled"
|
||||
}),
|
||||
new PropertyPaneLogo()
|
||||
]
|
||||
groupFields: webPartOptions
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -136,6 +181,10 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
window["_spPageContextInfo"] = this.context.pageContext.legacyPageContext;
|
||||
}
|
||||
|
||||
if (this.properties.teamsContext && !window["_teamsContexInfo"]) {
|
||||
window["_teamsContexInfo"] = this.context.sdks.microsoftTeams.context;
|
||||
}
|
||||
|
||||
(<any>window).ScriptGlobal = {};
|
||||
|
||||
// main section of function
|
||||
|
|
@ -173,7 +222,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
try {
|
||||
let scriptUrl = urls[i];
|
||||
const prefix = scriptUrl.indexOf('?') === -1 ? '?' : '&';
|
||||
scriptUrl += prefix + 'cow=' + new Date().getTime();
|
||||
scriptUrl += prefix + 'pnp=' + new Date().getTime();
|
||||
await SPComponentLoader.loadScript(scriptUrl, { globalExportsName: "ScriptGlobal" });
|
||||
} catch (error) {
|
||||
if (console.error) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { IPropertyPaneAccessor } from "@microsoft/sp-webpart-base";
|
||||
export interface IScriptEditorProps {
|
||||
script: string;
|
||||
title: string;
|
||||
save(script: string): void;
|
||||
script: string;
|
||||
title: string;
|
||||
propPaneHandle: IPropertyPaneAccessor;
|
||||
save(script: string): void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.scriptEditor {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
|
@ -1,85 +1,35 @@
|
|||
import * as React from 'react';
|
||||
import styles from './ScriptEditor.module.scss';
|
||||
import { IScriptEditorProps } from './IScriptEditorProps';
|
||||
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
|
||||
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
|
||||
import { TextField } from 'office-ui-fabric-react/lib/TextField';
|
||||
import { loadStyles } from '@microsoft/load-themed-styles';
|
||||
require('./overrides.css');
|
||||
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||
// const telemetry = PnPTelemetry.getInstance();
|
||||
// telemetry.optOut();
|
||||
|
||||
export default class ScriptEditor extends React.Component<IScriptEditorProps, any> {
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: IScriptEditorProps, state: any) {
|
||||
super(props);
|
||||
|
||||
this._showDialog = this._showDialog.bind(this);
|
||||
this._closeDialog = this._closeDialog.bind(this);
|
||||
this._cancelDialog = this._cancelDialog.bind(this);
|
||||
this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(this);
|
||||
|
||||
const uiFabricCSS: string = `
|
||||
.pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover {
|
||||
background-color: "[theme:themeDark, default:#005a9e]";
|
||||
}
|
||||
`;
|
||||
loadStyles(uiFabricCSS);
|
||||
this.state = {
|
||||
showDialog: false
|
||||
};
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
this.setState({ script: this.props.script, loaded: this.props.script });
|
||||
}
|
||||
|
||||
private _showDialog() {
|
||||
this.setState({ showDialog: true });
|
||||
}
|
||||
|
||||
private _closeDialog() {
|
||||
this.setState({ showDialog: false });
|
||||
this.props.save(this.state.script);
|
||||
}
|
||||
|
||||
private _cancelDialog() {
|
||||
this.props.save(this.state.loaded);
|
||||
this.setState({ showDialog: false, script: this.state.loaded });
|
||||
}
|
||||
|
||||
private _onScriptEditorTextChanged(text: string) {
|
||||
this.setState({ script: text });
|
||||
this.props.propPaneHandle.open();
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IScriptEditorProps> {
|
||||
const viewMode = <span dangerouslySetInnerHTML={{ __html: this.state.script }}></span>;
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div className={styles.scriptEditor}>
|
||||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
|
||||
<p className="ms-font-l ms-fontColor-white"></p>
|
||||
<DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
isOpen={this.state.showDialog}
|
||||
type={DialogType.normal}
|
||||
onDismiss={this._closeDialog}
|
||||
title='Embed'
|
||||
subText='Paste your script, markup or embed code below. Note that scripts will only run in view mode.'
|
||||
isBlocking={true}
|
||||
className={'ScriptPart'}
|
||||
>
|
||||
<TextField multiline rows={15} onChanged={this._onScriptEditorTextChanged} value={this.state.script} />
|
||||
<DialogFooter>
|
||||
<PrimaryButton onClick={this._closeDialog}>Save</PrimaryButton>
|
||||
<DefaultButton onClick={this._cancelDialog}>Cancel</DefaultButton>
|
||||
</DialogFooter>
|
||||
{viewMode}
|
||||
</Dialog>
|
||||
</div >);
|
||||
<div className='ms-Fabric'>
|
||||
<Placeholder iconName='JS'
|
||||
iconText={this.props.title}
|
||||
description='Please configure the web part'
|
||||
buttonLabel='Edit markup'
|
||||
onConfigure={this._showDialog} />
|
||||
{viewMode}
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.ScriptPart .ms-Dialog-main {
|
||||
width: 65%;
|
||||
max-width: 65%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 585 B |
Binary file not shown.
|
|
@ -1,3 +1,30 @@
|
|||
{
|
||||
"rulesDirectory": "./config"
|
||||
}
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue