honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1302 from hugoabernier/js-theme-manager-110

This commit is contained in:
Hugo Bernier 2020-06-01 00:32:41 -04:00 committed by GitHub
parent 3546b6c4af 4f41b8a2c4
commit 80fc989d0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 27700 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/js-theme-manager/.yo-rc.json
View File

@ -2,10 +2,10 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.7.1",
"version": "1.10.0",
"libraryName": "js-theme-manager",
"libraryId": "555147fb-b773-446f-aef2-1b25001f92d9",
"packageManager": "npm",
"componentType": "webpart"
}
}
}

6
samples/js-theme-manager/README.md
View File

@ -26,7 +26,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.7.1-orange.svg)
![1.10.0](https://img.shields.io/badge/drop-1.10.0-orange.svg)
## Applies to
@ -38,7 +38,8 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
Solution|Author(s)
--------|---------
js-theme-manager | David Warner II ([@DavidWarnerII](https://twitter.com/davidwarnerii) / [Warner Digital](http://warner.digital))
js-theme-manager (Upgrade) | Hugo Bernier ([@bernierh](https://twitter.com/bernierh) / [Tahoe Ninjas](https://tahoeninjas.blog))
js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cameron) / [Blog](https://beaucameron.net/))
js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cameron) / [Blog](https://beaucameron.net/))
## Version history
@ -46,6 +47,7 @@ js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cam
Version|Date|Comments
-------|----|--------
1.0|February 27, 2019|Initial release
2.0|June 1, 2020|Upgraded to SPFx 1.10.0
## 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.**

2
samples/js-theme-manager/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "js-theme-manager-client-side-solution",
"id": "555147fb-b773-446f-aef2-1b25001f92d9",
"version": "1.0.0.0",
"version": "2.0.0.0",
"includeClientSideAssets": true
},
"paths": {

27647
samples/js-theme-manager/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
samples/js-theme-manager/package.json
View File

@ -1,6 +1,7 @@
{
"name": "js-theme-manager",
"version": "0.0.1",
"main": "lib/index.js",
"version": "2.0.0",
"private": true,
"engines": {
"node": ">=0.10.0"
@ -11,21 +12,23 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@microsoft/sp-lodash-subset": "1.7.1",
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@types/es6-promise": "0.0.33",
"@types/webpack-env": "1.13.1"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.1",
"@microsoft/sp-tslint-rules": "1.7.1",
"@microsoft/sp-module-interfaces": "1.7.1",
"@microsoft/sp-webpart-workbench": "1.7.1",
"gulp": "~3.9.1",
"@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",
"ajv": "~5.2.2"
"ajv": "~5.2.2",
"gulp": "~3.9.1"
}
}

8
samples/js-theme-manager/src/webparts/modernThemeManager/ModernThemeManagerWebPart.manifest.json
View File

@ -4,21 +4,17 @@
"alias": "ModernThemeManagerWebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "Modern Theme Manager" },
"description": { "default": "Modern Theme Manager description" },
"officeFabricIconFontName": "Page",
"officeFabricIconFontName": "Color",
"properties": {
"description": "Modern Theme Manager"
}

58
samples/js-theme-manager/src/webparts/modernThemeManager/ModernThemeManagerWebPart.ts
View File

@ -1,9 +1,6 @@
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './ModernThemeManagerWebPart.module.scss';
@ -30,7 +27,7 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
</a>
<div>
<p class="${ styles.subTitle}">Theme Actions</p>
<p class="${ styles.subTitle}">Theme Actions</p>
<label class="${ styles.radio}"><input type="radio" name="themeAction" value="create"> Create a theme</label>
<label class="${ styles.radio}"><input type="radio" name="themeAction" value="update"> Update a theme</label>
<label class="${ styles.radio}"><input type="radio" name="themeAction" value="delete"> Delete a theme</label>
@ -38,12 +35,12 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
</div>
<div class="${ styles.hide} ${styles.genericWrapper}" id="${styles.themeSelectWrapper}">
<p class="${ styles.subTitle}">Available Themes</p>
<p class="${ styles.subTitle}">Available Themes</p>
<select id="${ styles.availableThemesSelect}" name="availableThemes">
</select>
</div>
<div class="${ styles.hide} ${styles.genericWrapper}" id="${styles.themeNameWrapper}">
<p class="${ styles.subTitle}">Theme Name</p>
<div>
@ -84,7 +81,7 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
this.setupClickEvent();
}
/***** *****
/***** *****
Create event listeners for Radio & Buttons
***** *****/
public setupClickEvent(): void {
@ -118,15 +115,11 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
else if (selectedValue == 'apply') {
parent.displayApplyOptions();
}
};
};
}
}
/***** *****
/***** *****
Hide All Wrappers:
Generic method for hiding all of the form elements
***** *****/
@ -148,7 +141,7 @@ public hideAllWrappers(): void {
}
/***** *****
/***** *****
Display Update Options:
This method is used to display the form elements for the Theme Update Options.
***** *****/
@ -163,12 +156,11 @@ public displayUpdateOptions(): void {
document.getElementById(styles.themePaletteWrapper).classList.remove(styles.hide);
document.getElementById('updateTheme').classList.remove(styles.hide);
}
})
};
});
}
/***** *****
/***** *****
Display Create Options:
This method is used to display the form elements for the Theme Creation Options.
***** *****/
@ -181,11 +173,9 @@ public displayCreateOptions(): void {
document.getElementById(styles.themeNameWrapper).classList.remove(styles.hide);
document.getElementById(styles.themePaletteWrapper).classList.remove(styles.hide);
document.getElementById('createTheme').classList.remove(styles.hide);
}
/***** *****
/***** *****
Display Delete Options:
This method is used to display the form elements for the Theme Deletion Options.
***** *****/
@ -202,7 +192,7 @@ public displayDeleteOptions(): void {
});
}
/***** *****
/***** *****
Display Apply Options:
This method is used to display the form elements for the Theme Apply Options.
***** *****/
@ -217,7 +207,7 @@ public displayApplyOptions(): void {
document.getElementById('applyTheme').classList.remove(styles.hide);
}
/***** *****
/***** *****
Populate Existing Themes:
This method retrieves the currently available themes in the tenant and inserts the values into the dropdown.
***** *****/
@ -243,7 +233,7 @@ public populateExistingThemes(url, params): Promise<boolean> {
}
/***** *****
/***** *****
Create new theme at tenant level:
Collects the data needed to create a new theme at the tenant level and passes it to the creation execution method.
***** *****/
@ -273,7 +263,7 @@ public createTheme(): void {
/***** *****
/***** *****
Deletes a theme at tenant level:
Collects the data needed to delete a theme at the tenant level and passes it to the deletion execution method.
***** *****/
@ -300,7 +290,7 @@ public deleteTheme(): void {
});
}
/***** *****
/***** *****
Updates a theme at tenant level:
Collects the data needed to update a theme at the tenant level and passes it to the update execution method.
***** *****/
@ -311,7 +301,7 @@ public updateTheme(): void {
let themePalette: JSON = JSON.parse((<HTMLInputElement>document.getElementById(styles.textarea)).value);
let themePaletteJSON = {
"palette": themePalette
}
};
// Pass the theme properties to themeManagerExecution method
this.themeManagerExecution(this.context.pageContext.site.serverRelativeUrl + "/_api/thememanager/UpdateTenantTheme", { name: themeTitle, themeJson: JSON.stringify(themePaletteJSON) })
@ -328,7 +318,7 @@ public updateTheme(): void {
}
/***** *****
/***** *****
Apply a theme to a site collection:
Collects the data needed to apply a theme directly to a site colleciton.
NOTE: This does NOT create a theme choice at the tenant level. It will directly apply the theme to a site collection.
@ -341,7 +331,7 @@ public applyThemeNew(): void {
let themePalette: JSON = JSON.parse((<HTMLInputElement>document.getElementById(styles.textarea)).value);
let themePaletteJSON = {
"palette": themePalette
}
};
const digestCache: IDigestCache = this.context.serviceScope.consume(DigestCache.serviceKey);
digestCache.fetchDigest(themeURL).then((digest: string): void => {
@ -363,18 +353,18 @@ public applyThemeNew(): void {
}
/***** *****
/***** *****
Generic method for creating, updating, deleting and applying a theme.
***** *****/
public themeManagerExecution(url: string, params: any): Promise<boolean> {
let options: ISPHttpClientOptions = {
body: JSON.stringify(params)
}
};
return this.context.spHttpClient.post(url, SPHttpClient.configurations.v1, options)
.then((response: SPHttpClientResponse) => {
return response.ok
return response.ok;
});
}

4
samples/js-theme-manager/tsconfig.json
View File

@ -1,5 +1,9 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"noUnusedLocals": false,
"strictNullChecks": false,
"inlineSources": false,
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",