Fixed Modern experience issue and some typos

DariuS231 · Oct 9, 2017 · 7b8047f · 7b8047f
1 parent 1fc8d3d
commit 7b8047f
Show file tree

Hide file tree

Showing 31 changed files with 299 additions and 320 deletions.
diff --git a/dist/actions/SpPropertyBag/SpPropertyBag.js b/dist/actions/SpPropertyBag/SpPropertyBag.js
diff --git a/dist/actions/SpSiteContent/SpSiteContent.js b/dist/actions/SpSiteContent/SpSiteContent.js
diff --git a/dist/actions/spFeatures/spFeatures.js b/dist/actions/spFeatures/spFeatures.js
diff --git a/dist/actions/spSiteCustomActions/spSiteCustomActions.js b/dist/actions/spSiteCustomActions/spSiteCustomActions.js
diff --git a/dist/actions/spWebCustomActions/spWebCustomActions.js b/dist/actions/spWebCustomActions/spWebCustomActions.js
diff --git a/dist/actions/styles/bundle.css b/dist/actions/styles/bundle.css
diff --git a/package.json b/package.json
@@ -1,75 +1,76 @@
 {
-    "name": "chromesppropertiesadmin",
-    "version": "0.0.1",
-    "description": "Google Chrome extension that opens a Property bag Modal dialog administration",
-    "scripts": {
-        "start": "set NODE_ENV=development && node server.js",
-        "bundleActions": "set NODE_ENV=production && webpack --progress --config ./webpack/webpack.config.actions.prod.js",
-        "bundleChromeExtension": "set NODE_ENV=production && gulp build-chromeExt",
-        "generate": "set NODE_ENV=production && gulp generate-chrome-dev",
-        "generateZip": "set NODE_ENV=production && gulp generate-chrome-package"
-    },
-    "dependencies": {
-        "axios": "^0.15.3",
-        "office-ui-fabric-react": "^1.5.0",
-        "react": "^15.3.2",
-        "react-dom": "^15.3.2",
-        "react-router": "^3.0.2",
-        "redux-thunk": "^2.1.0"
-    },
-    "devDependencies": {
-        "@types/axios": "^0.9.35",
-        "@types/chrome": "0.0.35",
-        "@types/core-js": "^0.9.34",
-        "@types/microsoft-ajax": "0.0.31",
-        "@types/react": "^0.14.46",
-        "@types/react-dom": "^0.14.18",
-        "@types/react-redux": "^4.4.35",
-        "@types/react-router": "2.0.29",
-        "@types/redux-immutable-state-invariant": "^1.2.29",
-        "@types/redux-thunk": "^2.1.32",
-        "@types/sharepoint": "^2013.1.2",
-        "awesome-typescript-loader": "^3.0.0-beta.18",
-        "css-loader": "^0.26.1",
-        "es6-promise": "4.0.5",
-        "extract-text-webpack-plugin": "^2.0.0-rc.2",
-        "gulp": "^3.9.1",
-        "gulp-util": "^3.0.8",
-        "gulp-zip": "^3.2.0",
-        "http-server": "^0.9.0",
-        "immutable": "^3.8.1",
-        "node-sass": "^4.4.0",
-        "opener": "^1.4.2",
-        "path": "^0.12.7",
-        "react-redux": "^5.0.1",
-        "redux": "^3.6.0",
-        "redux-immutable-state-invariant": "^1.2.4",
-        "sass-loader": "^4.1.1",
-        "source-map-loader": "^0.1.6",
-        "style-loader": "^0.13.1",
-        "tslint": "^4.4.2",
-        "tslint-react": "^2.3.0",
-        "typescript": "2.3.4",
-        "webpack": "^2.2.1",
-        "webpack-dev-server": "^2.2.1",
-        "whatwg-fetch": "1.0.0"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/DariuS231/ChromeSPPropertiesAdmin.git"
-    },
-    "keywords": [
-        "SharePoint",
-        "PropertyBag",
-        "CSOM",
-        "JavaScript",
-        "Google Chrome",
-        "Chrome Extension"
-    ],
-    "author": "Darius231",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/DariuS231/ChromeSPPropertiesAdmin/issues"
-    },
-    "homepage": "https://github.com/DariuS231/ChromeSPPropertiesAdmin#readme"
-}
+  "name": "chromesppropertiesadmin",
+  "version": "0.0.1",
+  "description": "Google Chrome extension that opens a Property bag Modal dialog administration",
+  "scripts": {
+    "start": "set NODE_ENV=development && node server.js",
+    "bundleActions": "set NODE_ENV=production && webpack --progress --config ./webpack/webpack.config.actions.prod.js",
+    "bundleChromeExtension": "set NODE_ENV=production && gulp build-chromeExt",
+    "generate": "set NODE_ENV=production && gulp generate-chrome-dev",
+    "generateZip": "set NODE_ENV=production && gulp generate-chrome-package"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "office-ui-fabric-react": "^1.5.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-router": "^3.0.2",
+    "redux-thunk": "^2.1.0",
+    "sp-pnp-js": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/axios": "^0.9.35",
+    "@types/chrome": "0.0.35",
+    "@types/core-js": "^0.9.34",
+    "@types/microsoft-ajax": "0.0.31",
+    "@types/react": "^0.14.46",
+    "@types/react-dom": "^0.14.18",
+    "@types/react-redux": "^4.4.35",
+    "@types/react-router": "2.0.29",
+    "@types/redux-immutable-state-invariant": "^1.2.29",
+    "@types/redux-thunk": "^2.1.32",
+    "@types/sharepoint": "^2013.1.2",
+    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "css-loader": "^0.26.1",
+    "es6-promise": "4.0.5",
+    "extract-text-webpack-plugin": "^2.0.0-rc.2",
+    "gulp": "^3.9.1",
+    "gulp-util": "^3.0.8",
+    "gulp-zip": "^3.2.0",
+    "http-server": "^0.9.0",
+    "immutable": "^3.8.1",
+    "node-sass": "^4.4.0",
+    "opener": "^1.4.2",
+    "path": "^0.12.7",
+    "react-redux": "^5.0.1",
+    "redux": "^3.6.0",
+    "redux-immutable-state-invariant": "^1.2.4",
+    "sass-loader": "^4.1.1",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "tslint": "^4.4.2",
+    "tslint-react": "^2.3.0",
+    "typescript": "2.3.4",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.2.1",
+    "whatwg-fetch": "1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DariuS231/ChromeSPPropertiesAdmin.git"
+  },
+  "keywords": [
+    "SharePoint",
+    "PropertyBag",
+    "CSOM",
+    "JavaScript",
+    "Google Chrome",
+    "Chrome Extension"
+  ],
+  "author": "Darius231",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DariuS231/ChromeSPPropertiesAdmin/issues"
+  },
+  "homepage": "https://github.com/DariuS231/ChromeSPPropertiesAdmin#readme"
+}
diff --git a/src/scripts/actions/common/AppBase.ts b/src/scripts/actions/common/AppBase.ts
@@ -12,10 +12,7 @@ export class AppBase {
         if (!baseDiv) {
             baseDiv = document.createElement(constants.HTML_TAG_DIV);
             baseDiv.setAttribute(constants.HTML_ATTR_ID, this.baseDivId);
-            let parentEl = document.querySelector(constants.HTML_TAG_FORM) as HTMLElement;
-            if (!parentEl) { // There is no Form element on modern pages, so the content gets add to the body instead
-                parentEl = document.querySelector(constants.HTML_TAG_BODY) as HTMLElement;
-            }
+            let parentEl = document.querySelector(constants.HTML_TAG_BODY) as HTMLElement;
             parentEl.appendChild(baseDiv);
         }
     }

diff --git a/src/scripts/actions/common/apiBase.ts b/src/scripts/actions/common/apiBase.ts
@@ -1,12 +1,34 @@
 import * as axios from "axios";
 import { constants } from "./constants";
+import { AppCache } from "./cache";
 
 export default class ApiBase {
-    protected getErroResolver(reject: (reason?: any) => void, actionText: string): (sender: any, err: SP.ClientRequestFailedEventArgs) => void {
+
+    public getWebUrl(): Promise<string> {
+        return new Promise((resolve: (value?: string | PromiseLike<string>) => void, reject: (reason?: any) => void) => {
+            const cacheKey: string = `${window.location.href}_ChromeSPDevTools_url`;
+            let url: string = AppCache.get<string>(cacheKey);
+            if (!!url) {
+                resolve(url);
+            } else {
+                const ctx: SP.ClientContext = SP.ClientContext.get_current();
+                const web: SP.Web = ctx.get_web();
+                ctx.load(web);
+
+                ctx.executeQueryAsync(function () {
+                    url = web.get_url();
+                    AppCache.set(cacheKey, url);
+                    resolve(url);
+                }, this.getErrorResolver(reject, constants.MESSAGE_GETTING_WEB_URL));
+            }
+        });
+    }
+
+    protected getErrorResolver(reject: (reason?: any) => void, actionText: string): (sender: any, err: SP.ClientRequestFailedEventArgs) => void {
         return (sender: any, err: SP.ClientRequestFailedEventArgs): void => {
             const errorMsg: string = err.get_message();
             const errorTrace: string = err.get_stackTrace();
-            console.log("An error occured while " + actionText + "\nMessage: " + errorMsg + "\nError Trace: " + errorTrace);
+            console.log("An error occurred while " + actionText + "\nMessage: " + errorMsg + "\nError Trace: " + errorTrace);
             reject(errorMsg);
         }
     }
@@ -32,7 +54,7 @@ export default class ApiBase {
                 const onSuccess = (sender: any, args: SP.ClientRequestSucceededEventArgs) => {
                     resolve(per.get_value());
                 };
-                ctx.executeQueryAsync(onSuccess, this.getErroResolver(reject, constants.MESSAGE_CHECKING_CURRENT_USER_PERMISSIONS));
+                ctx.executeQueryAsync(onSuccess, this.getErrorResolver(reject, constants.MESSAGE_CHECKING_CURRENT_USER_PERMISSIONS));
             }
         });
 

diff --git a/src/scripts/actions/common/cache.ts b/src/scripts/actions/common/cache.ts
@@ -1,11 +1,13 @@
 
+import { constants } from "./constants";
+
 class Cache {
     private _keyPrefix: string = "spChromeDevTool_";
     private _isSupportedStorage: boolean = null;
 
     public get isSupportedStorage(): boolean {
         if (this._isSupportedStorage === null) {
-            this._isSupportedStorage = this.checkIfStorageisSupported();
+            this._isSupportedStorage = this.checkIfStorageIsSupported();
         }
         return this._isSupportedStorage;
     }
@@ -19,7 +21,7 @@ class Cache {
         if (this.isSupportedStorage) {
             const cachedDataStr = this.CacheObject.getItem(completeKey);
 
-            if (typeof cachedDataStr === "string") {
+            if (typeof cachedDataStr ===  constants.TYPE_OF_STRING) {
                 const cacheDataObj = JSON.parse(cachedDataStr);
                 if (cacheDataObj.expiryTime > (new Date())) {
                     return cacheDataObj.data;
@@ -34,7 +36,7 @@ class Cache {
         let didSetInCache = false;
         if (this.isSupportedStorage && valueObj !== undefined) {
             const nowDt = new Date();
-            const expiryTime: number = (typeof expireMinutes !== "undefined")
+            const expiryTime: number = (typeof expireMinutes !== constants.TYPE_OF_UNDEFINED)
                 ? nowDt.setMinutes(nowDt.getMinutes() + expireMinutes)
                 : 8640000000000000;
             const cacheDataObj: any = { data: valueObj, expiryTime };
@@ -47,18 +49,17 @@ class Cache {
     }
 
     private addKeyPrefix(key: string): string {
-        const undrscr = "_";
-        return this._keyPrefix + _spPageContextInfo.webAbsoluteUrl.replace(/:\/\/|\/|\./g, undrscr) + undrscr + key;
+        return this._keyPrefix + window.location.href.replace(/:\/\/|\/|\./g, "_") + "_" + key;
     }
 
     private get CacheObject(): Storage {
         return window.localStorage;
     }
-    private checkIfStorageisSupported() {
+    private checkIfStorageIsSupported() {
         const cacheObj = this.CacheObject;
         const supportsStorage = cacheObj && JSON
-            && typeof JSON.parse === "function"
-            && typeof JSON.stringify === "function";
+            && typeof JSON.parse === constants.TYPE_OF_FUNCTION
+            && typeof JSON.stringify === constants.TYPE_OF_FUNCTION;
         if (supportsStorage) {
             try {
                 const testKey = this._keyPrefix + "testingCache";

diff --git a/src/scripts/actions/common/constants.ts b/src/scripts/actions/common/constants.ts
@@ -13,6 +13,7 @@ export const constants  = {
     HTML_TAG_SCRIPT: "script",
     MESSAGE_CANT_CHECK_PERMISSIONS: "Cannot check permissions against a non-securable object.",
     MESSAGE_CHECKING_CURRENT_USER_PERMISSIONS: "Checking current's user permission",
+    MESSAGE_GETTING_WEB_URL: "Getting Web URL",
     MODAL_WRAPPER_CLOSE_BUTTON_HREF: "javascript:void(0)",
     MODAL_WRAPPER_CLOSE_BUTTON_TEXT: "Close",
     SCRIPT_TAG_TYPE: "text/javascript",
@@ -22,6 +23,7 @@ export const constants  = {
     STYLE_TAG_ID: "spChromeDevToolStyles",
     TYPE_OF_FUNCTION: "function",
     TYPE_OF_UNDEFINED: "undefined",
+    TYPE_OF_STRING: "string",
     URL_LAYOUTS: "/_layouts/15/",
     URL_SLASH: "/",
     URL_SP: "sp.js",

diff --git a/src/scripts/actions/common/utils.ts b/src/scripts/actions/common/utils.ts
@@ -8,8 +8,8 @@ export default class Utils {
         const args: string = Array.prototype.slice.call(arguments, 1);
         const srt: string = Array.prototype.slice.call(arguments, 0, 1);
 
-        return (srt.length <= 0 ) ? "" : srt[0].replace(/{(\d+)}/g, (match: any, number: number) => {
-            return typeof args[number] !== "undefined"
+        return (srt.length <= 0) ? "" : srt[0].replace(/{(\d+)}/g, (match: any, number: number) => {
+            return typeof args[number] !== constants.TYPE_OF_UNDEFINED
                 ? args[number]
                 : match
                 ;
@@ -32,14 +32,15 @@ export default class Utils {
         return new Promise((resolve, reject) => {
             if (typeof SP === constants.TYPE_OF_UNDEFINED || typeof SP.SOD === constants.TYPE_OF_UNDEFINED
                 || typeof SP.SOD.executeFunc === constants.TYPE_OF_UNDEFINED) {
-                let baseUrl: string = _spPageContextInfo.webServerRelativeUrl;
-                if (baseUrl === constants.URL_SLASH) {
-                    baseUrl = location.origin;
-                }
-                const scriptbase = baseUrl + constants.URL_LAYOUTS;
+                let baseUrl: string = "";
+                //let baseUrl: string = _spPageContextInfo.webServerRelativeUrl;
+                //if (baseUrl === constants.URL_SLASH) {
+                baseUrl = location.origin;
+                //}
+                const scriptBase = baseUrl + constants.URL_LAYOUTS;
 
-                this.loadScript(scriptbase + constants.URL_SP_RUNTIME).then(() => {
-                    this.loadScript(scriptbase + constants.URL_SP).then(() => {
+                this.loadScript(scriptBase + constants.URL_SP_RUNTIME).then(() => {
+                    this.loadScript(scriptBase + constants.URL_SP).then(() => {
                         resolve();
                     });
                 });