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 #1312 from nanddeepn/master 

Fixed external CDN reference issue with js-modern-calendar
This commit is contained in:
Hugo Bernier 2020-06-07 13:06:42 -04:00 committed by GitHub
parent eadf5c3a6e c4ab0ba089
commit bcdaaee967
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 183 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
samples/js-modern-calendar/config/config.json
View File

@ -1,14 +1,18 @@
{
"entries": [
{
"entry": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js",
"manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json",
"outputPath": "./dist/modern-calendar.bundle.js"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"modern-calendar.bundle": {
"components": [
{
"entrypoint": "./lib/webparts/modernCalendar/ModernCalendarWebPart.js",
"manifest": "./src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json"
}
]
}
],
"externals": {
},
"localizedResources": {
"modernCalendarStrings": "webparts/modernCalendar/loc/{locale}.js"
}
"modernCalendarStrings": "lib/webparts/modernCalendar/loc/{locale}.js"
},
"externals": {}
}

5
samples/js-modern-calendar/config/package-solution.json
View File

@ -1,8 +1,9 @@
{
"solution": {
"name": "spFX Modern Calendar",
"name": "SPFx Modern Calendar",
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
"version": "1.0.0.1"
"version": "1.0.0.1",
"includeClientSideAssets": true
},
"paths": {
"zippedPackage": "solution/modern-calendar.sppkg"

3
samples/js-modern-calendar/config/write-manifests.json
View File

@ -1,3 +1,4 @@
{
"cdnBasePath": "https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/"
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

6
samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts
View File

@ -34,7 +34,7 @@ export default class CalendarTemplate {
`;
}
public static themeBase: string = `https://publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/themes/`;
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeNames: Array<string> = [
'default',
@ -63,12 +63,12 @@ export default class CalendarTemplate {
'ui-darkness',
'ui-lightness',
'vader'
]
];
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function(name,index) {
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()})
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()});
});
return themes;
}

323
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
View File

@ -26,7 +26,7 @@ import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { Default as View } from 'fullcalendar/View';
export interface ISPLists {
@ -39,27 +39,27 @@ export interface ISPList {
}
export interface EventObjects {
value: EventObjectInput [];
value: EventObjectInput[];
}
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
public constructor() {
super();
//Modify with your a CDN or local path
SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/sweetalert2.min.css');
SPComponentLoader.loadCss('//publiccdn.sharepointonline.com/pcpro365.sharepoint.com/163800463de5f9285ad4f6f9cc0a97985b96b057e062d4733849cc0fc90eeffbd6d72bb8/calendar/fullcalendar.min.css');
// Modify with your a CDN or local path
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css');
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css');
}
public render(): void {
if (this.properties.theme != null){
if (this.properties.theme != null) {
SPComponentLoader.loadCss(this.properties.theme);
}
if (!this.properties.other){
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
}
//Check required properties before rendering list
if (this.properties.listTitle == null || this.properties.start == null || this.properties.end == null || this.properties.title == null || this.properties.detail == null) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(this.properties.description);
@ -74,120 +74,121 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
protected onPropertyPaneConfigurationStart(): void {
//Set a default theme
if (this.properties.theme == null){
//Set a default theme
if (this.properties.theme == null) {
this.properties.theme = CalendarTemplate.theme()[0].key.toString();
}
if (this.properties.site){
if (this.properties.site) {
this.listDisabled = false;
}
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)){
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)) {
//this._getColumnsAsync();
}
if (!this.properties.other){
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
}
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail){
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail) {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
this._getSiteRootWeb()
.then((response0) => {
this._getSiteRootWeb()
.then((response0) => {
this._getSites(response0['Url'])
.then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
sites.push({key:'other', text:'Other Site (Specify Url)'});
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']){
sites.push({key: response.value[_key]['Url'], text: response.value[_key]['Title']});
}
}
this._siteOptions = sites;
if (this.properties.site ){
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle,this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title']});
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
});
}
});
}
});
});
} else {
this._getSitesAsync();
this._getSitesAsync();
}
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
if (newValue == 'other' ){
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other){
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
if (newValue == 'other') {
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other) {
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue,siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({key: response.value[_key]['InternalName'], text: response.value[_key]['Title']});
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue, siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
}
}
private colsDisabled: boolean = true;
@ -265,16 +266,16 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
private _getSiteRootWeb(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListTitles(site: string): Promise<ISPLists> {
@ -284,7 +285,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
});
}
private _getListColumns(listNameColumns: string,listsite: string): Promise<any> {
private _getListColumns(listNameColumns: string, listsite: string): Promise<any> {
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
@ -292,89 +293,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
private _getListData(listName: string, site: string): Promise<any> {
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`,SPHttpClient.configurations.v1)
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _renderList(items: any[]): void {
var calItems: EventObjectInput [] = items.map((list: any) => {
return {
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
};
var calItems: EventObjectInput[] = items.map((list: any) => {
return {
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
};
});
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
const calendarOptions:EventObjectInput = {
const calendarOptions: EventObjectInput = {
title: "test",
theme: true,
events: calItems,
eventClick: (_event) => {
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title,eventDetail,'info');
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title, eventDetail, 'info');
}
};
jQuery('.spfxcalendar', this.domElement).fullCalendar(calendarOptions);
}
private _getSitesAsync(): void {
this._getSiteRootWeb()
this._getSiteRootWeb()
.then((response) => {
this._getSites(response['Url'])
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({key:this.context.pageContext.web.absoluteUrl, text:'This Site'});
sites.push({key:'other', text:'Other Site (Specify Url)'});
for (var _key in response1.value) {
sites.push({key: response1.value[_key]['Url'], text: response1.value[_key]['Title']});
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle,this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title']});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response1.value) {
sites.push({ key: response1.value[_key]['Url'], text: response1.value[_key]['Title'] });
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
});
});
});
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement,"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
}