From a4804984d3cc1910003d9e18c37cf64c1a3322c2 Mon Sep 17 00:00:00 2001 From: Mikael Svenson Date: Thu, 8 Mar 2018 13:29:18 -0800 Subject: [PATCH] Support for AMD/UMD modules Support for _spPageContextInfo Updated documentation. --- samples/react-script-editor/README.md | 42 ++++++++++++- .../config/package-solution.json | 2 +- .../scriptEditor/IScriptEditorWebPartProps.ts | 1 + .../ScriptEditorWebPart.manifest.json | 3 +- .../scriptEditor/ScriptEditorWebPart.ts | 59 ++++++++++++------- 5 files changed, 83 insertions(+), 24 deletions(-) diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index 07a8e212e..627914c02 100644 --- a/samples/react-script-editor/README.md +++ b/samples/react-script-editor/README.md @@ -47,8 +47,47 @@ If all you want is to add markup on the page, you can do that as well. Adding th ``` +You may add CSS via style tags or `link` tags. +```html + + + +
+

Headline

+
+
+
.col-md-8
+
.col-md-4
+
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+``` + +## Notes for AMD/UMD modules +If the library you load is an AMD/UMD module you have to add the custom attribute `module` on the script tag, specifying the global name which should hold the module. + +```html +
+ + +``` +## Support for classic _spPageContextInfo + +If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane. + + ## Used SharePoint Framework Version -![drop](https://img.shields.io/badge/drop-1.4.0-green.svg) +![drop](https://img.shields.io/badge/drop-1.4.1-green.svg) ## Applies to @@ -70,6 +109,7 @@ Version|Date|Comments 1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in webpart 1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring 1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide +1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring. ## 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.** diff --git a/samples/react-script-editor/config/package-solution.json b/samples/react-script-editor/config/package-solution.json index b4e229a4c..48e0df0d8 100644 --- a/samples/react-script-editor/config/package-solution.json +++ b/samples/react-script-editor/config/package-solution.json @@ -2,7 +2,7 @@ "solution": { "name": "Modern Script Editor web part by Puzzlepart", "id": "1425175f-3ed8-44d2-8fc4-dd1497191294", - "version": "1.0.0.4", + "version": "1.0.0.5", "includeClientSideAssets": true, "skipFeatureDeployment": false }, diff --git a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts index 21de80ffd..ce62bd7a7 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts +++ b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts @@ -2,4 +2,5 @@ export interface IScriptEditorWebPartProps { script: string; title: string; removePadding: boolean; + spPageContextInfo: boolean; } diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json index 49e1e607d..37cd59fbe 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json +++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json @@ -22,7 +22,8 @@ "properties": { "script": "", "title" : "The Modern Script Editor web part!", - "removePadding": false + "removePadding": false, + "spPageContextInfo" : false } } ] diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts index 26f5f71dc..d8dbe3eed 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts +++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts @@ -63,7 +63,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPartwindow).ScriptGlobal = {}; // main section of function @@ -138,10 +149,14 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart 0) { urls.push(scriptTag.src); + if (scriptTag.attributes["module"] && scriptTag.attributes["module"].value.length > 0) { + moduleMap[scriptTag.src] = scriptTag.attributes["module"].value; + } } if (scriptTag.onload && scriptTag.onload.length > 0) { onLoads.push(scriptTag.onload); @@ -150,26 +165,28 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart () => SPComponentLoader.loadScript(url, { globalExportsName: "ScriptGlobal" })); - const promiseSerial = funcs => - funcs.reduce((promise, func) => - promise.then(result => func().then(Array.prototype.concat.bind(result))), - Promise.resolve([])); + for (let i = 0; i < urls.length; i++) { + try { + let m: any = await SPComponentLoader.loadScript(urls[i], { globalExportsName: "ScriptGlobal" }); + let moduleName = moduleMap[urls[i]]; + if (moduleName) { + //If it's a AMD/UMD module, then assign to that global variable + window[moduleName] = m; + } + } catch (error) { + console.error(error); + } + } - // execute Promises in serial - promiseSerial(allFuncs) - .then(() => { - // execute any onload people have added - for (j = 0; onLoads[j]; j++) { - onLoads[j](); - } - // execute script blocks - for (j = 0; scripts[j]; j++) { - const scriptTag = scripts[j]; - if (scriptTag.parentNode) { scriptTag.parentNode.removeChild(scriptTag); } - this.evalScript(scripts[j]); - } - }).catch(console.error); + for (j = 0; scripts[j]; j++) { + const scriptTag = scripts[j]; + if (scriptTag.parentNode) { scriptTag.parentNode.removeChild(scriptTag); } + this.evalScript(scripts[j]); + } + // execute any onload people have added + for (j = 0; onLoads[j]; j++) { + onLoads[j](); + } } } \ No newline at end of file