Updated jquery-photopile to GA (#227)
* Updated jquery-photopile to GA * updated typings
This commit is contained in:
Gautam Sheth
Vesa Juvonen
parent
2172eff640
commit
be13d78abe
|
|
@ -1,69 +1,70 @@
|
|||
# JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part
|
||||
|
||||
## Summary
|
||||
|
||||
Sample Web Part illustrating using JQuery and [Photopile.Js](https://github.com/bigbhowell/Photopile-JS)
|
||||
with the SharePoint Framework.
|
||||
|
||||
With it, you can display the photos contained in a SharePoint Pictures Library and it
|
||||
simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile,
|
||||
(enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
jquery-photopile|Olivier Carpentier (@olivierc)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|September 9, 2016|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `tsd install`
|
||||
- `gulp serve`
|
||||
|
||||
## Features
|
||||
|
||||
This web part uses React, Office UI Fabric, JQuery, JQuery UI and Photopile.js. This web part is available in English (en-us)
|
||||
and French (fr-fr).
|
||||
|
||||
It is able to:
|
||||
* List Picture Libs contained in the current SharePoint web site
|
||||
* List all the pictures in the selected List
|
||||
* Render the pics as a cool photopile
|
||||
* Personalize the layout thanks to editable settings
|
||||
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
* Include JQuery and external framework in your solution
|
||||
* Implement rich web part properties panel with controls like DropDown, Sliders, Toggle, etc.
|
||||
* Load dynamic data from SharePoint as web part properties
|
||||
* Load dynamic data from SharePoint REST Services, as lists or items
|
||||
* Implement mock system to test your solution in the local workbench or on a SharePoint site
|
||||
* Include Office UI Fabric controls in your project
|
||||
* Render content with React
|
||||
* Etc.
|
||||
|
||||
|
||||
# JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part
|
||||
|
||||
## Summary
|
||||
|
||||
Sample Web Part illustrating using JQuery and [Photopile.Js](https://github.com/bigbhowell/Photopile-JS)
|
||||
with the SharePoint Framework.
|
||||
|
||||
With it, you can display the photos contained in a SharePoint Pictures Library and it
|
||||
simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile,
|
||||
(enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
jquery-photopile|Olivier Carpentier (@olivierc) , Gautam Sheth(SharePoint Consultant,Rapid Circle,@gautamdsheth)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|September 9, 2016|Initial release
|
||||
2.0|May 26, 2017|GA release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `tsd install`
|
||||
- `gulp serve`
|
||||
|
||||
## Features
|
||||
|
||||
This web part uses React, Office UI Fabric, JQuery, JQuery UI and Photopile.js. This web part is available in English (en-us)
|
||||
and French (fr-fr).
|
||||
|
||||
It is able to:
|
||||
* List Picture Libs contained in the current SharePoint web site
|
||||
* List all the pictures in the selected List
|
||||
* Render the pics as a cool photopile
|
||||
* Personalize the layout thanks to editable settings
|
||||
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
* Include JQuery and external framework in your solution
|
||||
* Implement rich web part properties panel with controls like DropDown, Sliders, Toggle, etc.
|
||||
* Load dynamic data from SharePoint as web part properties
|
||||
* Load dynamic data from SharePoint REST Services, as lists or items
|
||||
* Implement mock system to test your solution in the local workbench or on a SharePoint site
|
||||
* Include Office UI Fabric controls in your project
|
||||
* Render content with React
|
||||
* Etc.
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/jquery-photopile" />
|
||||
|
|
@ -7,13 +7,7 @@
|
|||
}
|
||||
],
|
||||
"externals": {
|
||||
"@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
|
||||
"@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
|
||||
"@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
|
||||
"office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
|
||||
"react": "node_modules/react/dist/react.min.js",
|
||||
"react-dom": "node_modules/react-dom/dist/react-dom.min.js",
|
||||
"react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
|
||||
"office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
|
||||
"jquery": {
|
||||
"path": "node_modules/jquery/dist/jquery.js",
|
||||
"globalName": "$"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "photopilewebpart",
|
||||
"container": "photopile-web-part",
|
||||
"accessKey": ""
|
||||
{
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "photopile-web-part",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"solution": {
|
||||
"name": "Photopile WebPart",
|
||||
"id": "22c50f5a-8015-406e-be1f-8cfcffc2ec2b",
|
||||
"version": "1.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "photopile-web-part.spapp"
|
||||
}
|
||||
}
|
||||
{
|
||||
"solution": {
|
||||
"name": "photopile-web-part-client-side-solution",
|
||||
"id": "cf226a09-ce77-458a-8b89-dc402525c0d3",
|
||||
"version": "1.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/photopile-web-part.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{
|
||||
"port": 4321,
|
||||
"initialPage": "http://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
{
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,46 @@
|
|||
{
|
||||
"lintConfig": {
|
||||
"rules": {
|
||||
"comment-format": false,
|
||||
"curly": false,
|
||||
"indent": false,
|
||||
"interface-name": false,
|
||||
"max-line-length": false,
|
||||
"member-ordering": false,
|
||||
"no-any": false,
|
||||
"no-bitwise": false,
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-constant-condition": false,
|
||||
"no-debugger": false,
|
||||
"no-empty": false,
|
||||
"no-null-keyword": false,
|
||||
"no-string-literal": false,
|
||||
"no-trailing-whitespace": false,
|
||||
"no-var-keyword": false,
|
||||
"one-line": false,
|
||||
"quotemark": false,
|
||||
"radix": false,
|
||||
"triple-equals": false
|
||||
}
|
||||
}
|
||||
{
|
||||
// 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-unused-imports": 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"cdnBasePath": "//photopilewebpart.blob.core.windows.net/photopile-web-part/"
|
||||
{
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
108
samples/jquery-photopile/dist/fd5fa211-ef67-4b5b-9f0d-6117a93e44af.manifest.json
vendored
Normal file
108
samples/jquery-photopile/dist/fd5fa211-ef67-4b5b-9f0d-6117a93e44af.manifest.json
vendored
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
{
|
||||
"id": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"alias": "PhotopileWebPartWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"group": {
|
||||
"default": "Default"
|
||||
},
|
||||
"title": {
|
||||
"default": "Photopile"
|
||||
},
|
||||
"description": {
|
||||
"default": "PhotopileWebPart description"
|
||||
},
|
||||
"officeFabricIconFontName": "PhotoCollection",
|
||||
"properties": {
|
||||
"listName": "",
|
||||
"orderBy": "ID",
|
||||
"orderByAsc": "asc",
|
||||
"count": 100,
|
||||
"numLayers": 5,
|
||||
"thumbOverlap": 50,
|
||||
"thumbRotation": 45,
|
||||
"thumbBorderWidth": 2,
|
||||
"thumbBorderColor": "white",
|
||||
"thumbBorderHover": "#EAEAEA",
|
||||
"draggable": true,
|
||||
"fadeDuration": 200,
|
||||
"pickupDuration": 500,
|
||||
"photoZIndex": 100,
|
||||
"photoBorder": 10,
|
||||
"photoBorderColor": "white",
|
||||
"showInfo": true,
|
||||
"autoplayGallery": false,
|
||||
"autoplaySpeed": 5000
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "photopile-web-part.bundle",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"photopile-web-part.bundle": {
|
||||
"type": "path",
|
||||
"path": "dist/photopile-web-part.bundle.js"
|
||||
},
|
||||
"photopileModule": {
|
||||
"type": "path",
|
||||
"path": "src/webparts/photopileWebPart/js/photopile.js",
|
||||
"globalDependencies": [
|
||||
"jquery",
|
||||
"jqueryui"
|
||||
],
|
||||
"globalName": "photopileModule"
|
||||
},
|
||||
"jquery": {
|
||||
"type": "path",
|
||||
"path": "node_modules/jquery/dist/jquery.js",
|
||||
"globalName": "$"
|
||||
},
|
||||
"jqueryui": {
|
||||
"type": "path",
|
||||
"path": "node_modules/jqueryui/jquery-ui.js",
|
||||
"globalDependencies": [
|
||||
"jquery"
|
||||
],
|
||||
"globalName": "jqueryui"
|
||||
},
|
||||
"mystrings": {
|
||||
"defaultPath": "lib/webparts/photopileWebPart/loc/en-us.js",
|
||||
"type": "localizedPath"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "0.14.8",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "0.14.8",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
|
|
|
|||
9
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartProps.d.ts
vendored
Normal file
9
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartProps.d.ts
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part properties interface definition
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { IPhotopileWebPartWebPartProps } from './IPhotopileWebPartWebPartProps';
|
||||
export interface IPhotopileWebPartProps extends IPhotopileWebPartWebPartProps {
|
||||
}
|
||||
3
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartProps.js
vendored
Normal file
3
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartProps.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
"use strict";
|
||||
|
||||
//# sourceMappingURL=IPhotopileWebPartProps.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/photopileWebPart/IPhotopileWebPartProps.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\src"}
|
||||
29
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartWebPartProps.d.ts
vendored
Normal file
29
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartWebPartProps.d.ts
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part properties definition
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
export interface IPhotopileWebPartWebPartProps {
|
||||
listName: string;
|
||||
orderBy: string;
|
||||
orderByAsc: string;
|
||||
count: number;
|
||||
numLayers: number;
|
||||
thumbOverlap: number;
|
||||
thumbRotation: number;
|
||||
thumbBorderWidth: number;
|
||||
thumbBorderColor: string;
|
||||
thumbBorderHover: string;
|
||||
draggable: boolean;
|
||||
fadeDuration: number;
|
||||
pickupDuration: number;
|
||||
photoZIndex: number;
|
||||
photoBorder: number;
|
||||
photoBorderColor: string;
|
||||
showInfo: boolean;
|
||||
autoplayGallery: boolean;
|
||||
autoplaySpeed: number;
|
||||
context: IWebPartContext;
|
||||
}
|
||||
3
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartWebPartProps.js
vendored
Normal file
3
samples/jquery-photopile/lib/webparts/photopileWebPart/IPhotopileWebPartWebPartProps.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
"use strict";
|
||||
|
||||
//# sourceMappingURL=IPhotopileWebPartWebPartProps.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":[],"names":[],"mappings":"","file":"webparts/photopileWebPart/IPhotopileWebPartWebPartProps.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\src"}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* @file
|
||||
* SharePoint List & ListItems interface definitions
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
/**
|
||||
* @interface
|
||||
* Defines a collection of SharePoint lists
|
||||
*/
|
||||
export interface ISPLists {
|
||||
value: ISPList[];
|
||||
}
|
||||
/**
|
||||
* @interface
|
||||
* Defines a SharePoint list
|
||||
*/
|
||||
export interface ISPList {
|
||||
Title: string;
|
||||
Id: string;
|
||||
BaseTemplate: string;
|
||||
}
|
||||
/**
|
||||
* @interface
|
||||
* Defines a SharePoint list's file
|
||||
*/
|
||||
export interface ISPFile {
|
||||
Name: string;
|
||||
ServerRelativeUrl: string;
|
||||
ThumbnailServerUrl?: string;
|
||||
}
|
||||
/**
|
||||
* @interface
|
||||
* Defines a collection of SharePoint list items
|
||||
*/
|
||||
export interface ISPListItems {
|
||||
value: ISPListItem[];
|
||||
}
|
||||
/**
|
||||
* @interface
|
||||
* Defines a SharePoint list item
|
||||
*/
|
||||
export interface ISPListItem {
|
||||
ID: string;
|
||||
Title?: string;
|
||||
Description?: string;
|
||||
File: ISPFile;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* @file
|
||||
* SharePoint List & ListItems interface definitions
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
//# sourceMappingURL=ISPList.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webparts/photopileWebPart/ISPList.ts"],"names":[],"mappings":"AAAA;;;;;GAKG","file":"webparts/photopileWebPart/ISPList.js","sourcesContent":["/**\n * @file\n * SharePoint List & ListItems interface definitions\n *\n * Author: Olivier Carpentier\n */\n\n/**\n * @interface\n * Defines a collection of SharePoint lists\n */\nexport interface ISPLists {\n value: ISPList[];\n}\n\n/**\n * @interface\n * Defines a SharePoint list\n */\nexport interface ISPList {\n Title: string;\n Id: string;\n BaseTemplate: string;\n}\n\n/**\n * @interface\n * Defines a SharePoint list's file\n */\nexport interface ISPFile {\n Name: string;\n ServerRelativeUrl: string;\n ThumbnailServerUrl?: string;\n}\n\n/**\n * @interface\n * Defines a collection of SharePoint list items\n */\nexport interface ISPListItems {\n value: ISPListItem[];\n}\n\n/**\n * @interface\n * Defines a SharePoint list item\n */\nexport interface ISPListItem {\n ID: string;\n Title?: string;\n Description?: string;\n File: ISPFile;\n}"],"sourceRoot":"..\\..\\..\\src"}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/// <reference types="es6-promise" />
|
||||
/**
|
||||
* @file
|
||||
* Implement a http client to request mock data to use the
|
||||
* web part with the local workbench
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { ISPList, ISPListItem } from './ISPList';
|
||||
/**
|
||||
* @class
|
||||
* Defines a http client to request mock data to use the web part with the local workbench
|
||||
*/
|
||||
export default class MockHttpClient {
|
||||
/**
|
||||
* @var
|
||||
* Mock SharePoint list sample
|
||||
*/
|
||||
private static _lists;
|
||||
/**
|
||||
* @var
|
||||
* Mock SharePoint list item sample
|
||||
*/
|
||||
private static _items;
|
||||
/**
|
||||
* @function
|
||||
* Mock get SharePoint list request
|
||||
*/
|
||||
static getLists(restUrl: string, options?: any): Promise<ISPList[]>;
|
||||
/**
|
||||
* @function
|
||||
* Mock get SharePoint list items request
|
||||
*/
|
||||
static getListsItems(restUrl: string, options?: any): Promise<ISPListItem[]>;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
"use strict";
|
||||
/**
|
||||
* @class
|
||||
* Defines a http client to request mock data to use the web part with the local workbench
|
||||
*/
|
||||
var MockHttpClient = (function () {
|
||||
function MockHttpClient() {
|
||||
}
|
||||
/**
|
||||
* @function
|
||||
* Mock get SharePoint list request
|
||||
*/
|
||||
MockHttpClient.getLists = function (restUrl, options) {
|
||||
return new Promise(function (resolve) {
|
||||
resolve(MockHttpClient._lists);
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Mock get SharePoint list items request
|
||||
*/
|
||||
MockHttpClient.getListsItems = function (restUrl, options) {
|
||||
return new Promise(function (resolve) {
|
||||
resolve(MockHttpClient._items);
|
||||
});
|
||||
};
|
||||
return MockHttpClient;
|
||||
}());
|
||||
/**
|
||||
* @var
|
||||
* Mock SharePoint list sample
|
||||
*/
|
||||
MockHttpClient._lists = [{ Title: 'Mock List', Id: '1', BaseTemplate: '109' }];
|
||||
/**
|
||||
* @var
|
||||
* Mock SharePoint list item sample
|
||||
*/
|
||||
MockHttpClient._items = [
|
||||
{ "ID": "1", "Title": "Pic 1", "Description": "", "File": { "Name": "1.jpg", "ServerRelativeUrl": "/Images/1.jpg" } }
|
||||
];
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.default = MockHttpClient;
|
||||
|
||||
//# sourceMappingURL=MockHttpClient.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webparts/photopileWebPart/MockHttpClient.ts"],"names":[],"mappings":";AASA;;;GAGG;AACH;IAAA;IAmCA,CAAC;IAnBG;;;OAGG;IACW,uBAAQ,GAAtB,UAAuB,OAAe,EAAE,OAAa;QACnD,MAAM,CAAC,IAAI,OAAO,CAAY,UAAC,OAAO;YAChC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IACW,4BAAa,GAA3B,UAA4B,OAAe,EAAE,OAAa;QACxD,MAAM,CAAC,IAAI,OAAO,CAAgB,UAAC,OAAO;YACpC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IACL,qBAAC;AAAD,CAnCA,AAmCC;AAjCG;;;GAGG;AACY,qBAAM,GAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;AAE1F;;;GAGG;AACY,qBAAM,GAAkB;IACrC,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,EAAE;CACtH,CAAC","file":"webparts/photopileWebPart/MockHttpClient.js","sourcesContent":["/**\n * @file\n * Implement a http client to request mock data to use the\n * web part with the local workbench\n *\n * Author: Olivier Carpentier\n */\nimport { ISPList, ISPListItem } from './ISPList';\n\n/**\n * @class\n * Defines a http client to request mock data to use the web part with the local workbench\n */\nexport default class MockHttpClient {\n\n /**\n * @var\n * Mock SharePoint list sample\n */\n private static _lists: ISPList[] = [{ Title: 'Mock List', Id: '1', BaseTemplate: '109' }];\n\n /**\n * @var\n * Mock SharePoint list item sample\n */\n private static _items: ISPListItem[] = [\n { \"ID\": \"1\", \"Title\": \"Pic 1\", \"Description\": \"\", \"File\": { \"Name\": \"1.jpg\", \"ServerRelativeUrl\": \"/Images/1.jpg\" } }\n ];\n\n /**\n * @function\n * Mock get SharePoint list request\n */\n public static getLists(restUrl: string, options?: any): Promise<ISPList[]> {\n return new Promise<ISPList[]>((resolve) => {\n resolve(MockHttpClient._lists);\n });\n }\n\n /**\n * @function\n * Mock get SharePoint list items request\n */\n public static getListsItems(restUrl: string, options?: any): Promise<ISPListItem[]> {\n return new Promise<ISPListItem[]>((resolve) => {\n resolve(MockHttpClient._items);\n });\n }\n}"],"sourceRoot":"..\\..\\..\\src"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.photopileWebPart_44ab54de .workingOnItSpinner_44ab54de{display:block;top:0;bottom:0;margin:auto;height:33.33333%;line-height:1.5em;padding:20px 20px}.photopileWebPart_44ab54de .loadingLabel_44ab54de{position:relative;top:-25px;left:35px}
|
||||
6
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPart.module.scss.d.ts
vendored
Normal file
6
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPart.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
declare const styles: {
|
||||
photopileWebPart: string;
|
||||
workingOnItSpinner: string;
|
||||
loadingLabel: string;
|
||||
};
|
||||
export default styles;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
"use strict";
|
||||
/* tslint:disable */
|
||||
require('./PhotopileWebPart.module.css');
|
||||
var styles = {
|
||||
photopileWebPart: 'photopileWebPart_44ab54de',
|
||||
workingOnItSpinner: 'workingOnItSpinner_44ab54de',
|
||||
loadingLabel: 'loadingLabel_44ab54de',
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.default = styles;
|
||||
/* tslint:enable */
|
||||
|
||||
//# sourceMappingURL=PhotopileWebPart.module.scss.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webparts/photopileWebPart/PhotopileWebPart.module.scss.ts"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,CAAC,+BAA+B,CAAC,CAAC;AACzC,IAAM,MAAM,GAAG;IACb,gBAAgB,EAAE,2BAA2B;IAC7C,kBAAkB,EAAE,6BAA6B;IACjD,YAAY,EAAE,uBAAuB;CACtC,CAAC;;AAEF,kBAAe,MAAM,CAAC;AACtB,mBAAmB","file":"webparts/photopileWebPart/PhotopileWebPart.module.scss.js","sourcesContent":["/* tslint:disable */\r\nrequire('./PhotopileWebPart.module.css');\r\nconst styles = {\r\n photopileWebPart: 'photopileWebPart_44ab54de',\r\n workingOnItSpinner: 'workingOnItSpinner_44ab54de',\r\n loadingLabel: 'loadingLabel_44ab54de',\r\n};\r\n\r\nexport default styles;\r\n/* tslint:enable */"],"sourceRoot":"..\\..\\..\\src"}
|
||||
41
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPartWebPart.d.ts
vendored
Normal file
41
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPartWebPart.d.ts
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/// <reference types="es6-promise" />
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import { BaseClientSideWebPart, IPropertyPaneConfiguration, IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { IPhotopileWebPartWebPartProps } from './IPhotopileWebPartWebPartProps';
|
||||
/**
|
||||
* @class
|
||||
* Defines the Photopile client side web part
|
||||
*/
|
||||
export default class PhotopileWebPartWebPart extends BaseClientSideWebPart<IPhotopileWebPartWebPartProps> {
|
||||
/**
|
||||
* @var
|
||||
* Stores the list of SharePoint Pictures library found in the current SP web
|
||||
*/
|
||||
private listsDropdownOptions;
|
||||
/**
|
||||
* @function
|
||||
* Web Part constructor
|
||||
*/
|
||||
constructor(context: IWebPartContext);
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part is inialized
|
||||
*/
|
||||
onInit<T>(): Promise<T>;
|
||||
/**
|
||||
* @function
|
||||
* Renders the web part
|
||||
*/
|
||||
render(): void;
|
||||
/**
|
||||
* @function
|
||||
* Prevent from changing the pane properties on typing
|
||||
*/
|
||||
protected readonly disableReactivePropertyChanges: boolean;
|
||||
/**
|
||||
* @function
|
||||
* Gets the web part properties panel settings
|
||||
*/
|
||||
protected readonly dataVersion: Version;
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration;
|
||||
}
|
||||
257
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPartWebPart.js
vendored
Normal file
257
samples/jquery-photopile/lib/webparts/photopileWebPart/PhotopileWebPartWebPart.js
vendored
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
"use strict";
|
||||
var __extends = (this && this.__extends) || function (d, b) {
|
||||
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
var sp_core_library_1 = require("@microsoft/sp-core-library");
|
||||
var React = require("react");
|
||||
var ReactDom = require("react-dom");
|
||||
var sp_webpart_base_1 = require("@microsoft/sp-webpart-base");
|
||||
var strings = require("mystrings");
|
||||
var PhotopileWebPart_1 = require("./components/PhotopileWebPart");
|
||||
var SPPicturesListService_1 = require("./SPPicturesListService");
|
||||
/**
|
||||
* @class
|
||||
* Defines the Photopile client side web part
|
||||
*/
|
||||
var PhotopileWebPartWebPart = (function (_super) {
|
||||
__extends(PhotopileWebPartWebPart, _super);
|
||||
/**
|
||||
* @function
|
||||
* Web Part constructor
|
||||
*/
|
||||
function PhotopileWebPartWebPart(context) {
|
||||
var _this = _super.call(this) || this;
|
||||
/**
|
||||
* @var
|
||||
* Stores the list of SharePoint Pictures library found in the current SP web
|
||||
*/
|
||||
_this.listsDropdownOptions = [];
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part is inialized
|
||||
*/
|
||||
PhotopileWebPartWebPart.prototype.onInit = function () {
|
||||
var _this = this;
|
||||
//Init the PicturesListService to get the picture libs
|
||||
var picturesListService = new SPPicturesListService_1.SPPicturesListService(this.properties, this.context);
|
||||
//Request the libs
|
||||
picturesListService.getPictureLibs()
|
||||
.then(function (response) {
|
||||
//Store the result as list of dropdown options
|
||||
_this.listsDropdownOptions = response.value.map(function (list) {
|
||||
return {
|
||||
key: list.Id,
|
||||
text: list.Title
|
||||
};
|
||||
});
|
||||
});
|
||||
return Promise.resolve();
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Renders the web part
|
||||
*/
|
||||
PhotopileWebPartWebPart.prototype.render = function () {
|
||||
//Constructs the react element code to JSX
|
||||
var element = React.createElement(PhotopileWebPart_1.default, {
|
||||
listName: this.properties.listName,
|
||||
orderBy: this.properties.orderBy,
|
||||
orderByAsc: this.properties.orderByAsc,
|
||||
count: this.properties.count,
|
||||
numLayers: this.properties.numLayers,
|
||||
thumbOverlap: this.properties.thumbOverlap,
|
||||
thumbRotation: this.properties.thumbRotation,
|
||||
thumbBorderWidth: this.properties.thumbBorderWidth,
|
||||
thumbBorderColor: this.properties.thumbBorderColor,
|
||||
thumbBorderHover: this.properties.thumbBorderHover,
|
||||
draggable: this.properties.draggable,
|
||||
fadeDuration: this.properties.fadeDuration,
|
||||
pickupDuration: this.properties.pickupDuration,
|
||||
photoZIndex: this.properties.photoZIndex,
|
||||
photoBorder: this.properties.photoBorder,
|
||||
photoBorderColor: this.properties.photoBorderColor,
|
||||
showInfo: this.properties.showInfo,
|
||||
autoplayGallery: this.properties.autoplayGallery,
|
||||
autoplaySpeed: this.properties.autoplaySpeed,
|
||||
context: this.context
|
||||
});
|
||||
//Render the dom
|
||||
ReactDom.render(element, this.domElement);
|
||||
};
|
||||
Object.defineProperty(PhotopileWebPartWebPart.prototype, "disableReactivePropertyChanges", {
|
||||
/**
|
||||
* @function
|
||||
* Prevent from changing the pane properties on typing
|
||||
*/
|
||||
get: function () {
|
||||
return false;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(PhotopileWebPartWebPart.prototype, "dataVersion", {
|
||||
/**
|
||||
* @function
|
||||
* Gets the web part properties panel settings
|
||||
*/
|
||||
get: function () {
|
||||
return sp_core_library_1.Version.parse('1.0');
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
PhotopileWebPartWebPart.prototype.getPropertyPaneConfiguration = function () {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
//Display the web part properties as accordion
|
||||
displayGroupsAsAccordion: true,
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.PictureLibraryGroupName,
|
||||
groupFields: [
|
||||
sp_webpart_base_1.PropertyPaneDropdown('listName', {
|
||||
label: strings.PictureLibraryFieldLabel,
|
||||
options: this.listsDropdownOptions
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneDropdown('orderBy', {
|
||||
label: strings.OrderByFieldLabel,
|
||||
options: [
|
||||
{ key: 'ID', text: strings.OrderByChoiceLabelId },
|
||||
{ key: 'Title', text: strings.OrderByChoiceLabelTitle },
|
||||
{ key: 'Created', text: strings.OrderByChoiceLabelCreated },
|
||||
{ key: 'Modified', text: strings.OrderByChoiceLabelModified },
|
||||
{ key: 'ImageWidth', text: strings.OrderByChoiceLabelImageWidth },
|
||||
{ key: 'ImageHeight', text: strings.OrderByChoiceLabelImageHeight }
|
||||
]
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneDropdown('orderByAsc', {
|
||||
label: strings.OrderByAscFieldLabel,
|
||||
options: [
|
||||
{ key: 'asc', text: strings.OrderByAscChoiceLabel },
|
||||
{ key: 'desc', text: strings.OrderByDescChoiceLabel }
|
||||
]
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('count', {
|
||||
label: strings.PictureLibraryCountLabel,
|
||||
min: 1,
|
||||
max: 100,
|
||||
step: 1,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.ThumbnailsGroupName,
|
||||
groupFields: [
|
||||
sp_webpart_base_1.PropertyPaneSlider('numLayers', {
|
||||
label: strings.NumLayersFieldLabel,
|
||||
min: 1,
|
||||
max: 20,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('thumbOverlap', {
|
||||
label: strings.ThumbOverlabFieldLabel,
|
||||
min: 1,
|
||||
max: 130,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('thumbRotation', {
|
||||
label: strings.ThumbRotationFieldLabel,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('thumbBorderWidth', {
|
||||
label: strings.ThumbBorderWidthFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneTextField('thumbBorderColor', {
|
||||
label: strings.ThumbBorderColorFieldLabel
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneTextField('thumbBorderHover', {
|
||||
label: strings.ThumbBorderHoverFieldLabel
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneToggle('draggable', {
|
||||
label: strings.DraggableFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.PhotoContainerGroupName,
|
||||
groupFields: [
|
||||
sp_webpart_base_1.PropertyPaneSlider('fadeDuration', {
|
||||
label: strings.FadeDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('pickupDuration', {
|
||||
label: strings.PickupDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('photoZIndex', {
|
||||
label: strings.PhotoZIndexFieldLabel,
|
||||
min: 1,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('photoBorder', {
|
||||
label: strings.PhotoBorderFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneTextField('photoBorderColor', {
|
||||
label: strings.PhotoBorderColorFieldLabel
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneToggle('showInfo', {
|
||||
label: strings.ShowInfoFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.AutoplayGroupName,
|
||||
groupFields: [
|
||||
sp_webpart_base_1.PropertyPaneToggle('autoplayGallery', {
|
||||
label: strings.AutoplayGalleryFieldLabel
|
||||
}),
|
||||
sp_webpart_base_1.PropertyPaneSlider('autoplaySpeed', {
|
||||
label: strings.AutoplaySpeedFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
return PhotopileWebPartWebPart;
|
||||
}(sp_webpart_base_1.BaseClientSideWebPart));
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.default = PhotopileWebPartWebPart;
|
||||
|
||||
//# sourceMappingURL=PhotopileWebPartWebPart.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"alias": "PhotopileWebPartWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"group": { "default": "Default" },
|
||||
"title": { "default": "Photopile" },
|
||||
"description": { "default": "PhotopileWebPart description" },
|
||||
"officeFabricIconFontName": "PhotoCollection",
|
||||
"properties": {
|
||||
"listName": "",
|
||||
"orderBy": "ID",
|
||||
"orderByAsc": "asc",
|
||||
"count": 100,
|
||||
"numLayers": 5,
|
||||
"thumbOverlap": 50,
|
||||
"thumbRotation": 45,
|
||||
"thumbBorderWidth": 2,
|
||||
"thumbBorderColor": "white",
|
||||
"thumbBorderHover": "#EAEAEA",
|
||||
"draggable": true,
|
||||
"fadeDuration": 200,
|
||||
"pickupDuration": 500,
|
||||
"photoZIndex": 100,
|
||||
"photoBorder": 10,
|
||||
"photoBorderColor": "white",
|
||||
"showInfo": true,
|
||||
"autoplayGallery": false,
|
||||
"autoplaySpeed": 5000
|
||||
}
|
||||
}]
|
||||
}
|
||||
66
samples/jquery-photopile/lib/webparts/photopileWebPart/SPPicturesListService.d.ts
vendored
Normal file
66
samples/jquery-photopile/lib/webparts/photopileWebPart/SPPicturesListService.d.ts
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/// <reference types="es6-promise" />
|
||||
/**
|
||||
* @file
|
||||
* Service to get list & list items from current SharePoint site
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { ISPLists, ISPListItems } from './ISPList';
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { IPhotopileWebPartProps } from './IPhotopileWebPartProps';
|
||||
/**
|
||||
* @interface
|
||||
* Service interface definition
|
||||
*/
|
||||
export interface ISPPicturesListService {
|
||||
/**
|
||||
* @function
|
||||
* Gets the list of picture libs in the current SharePoint site
|
||||
*/
|
||||
getPictureLibs(): Promise<ISPLists>;
|
||||
/**
|
||||
* @function
|
||||
* Gets the pictures from a SharePoint list
|
||||
*/
|
||||
getPictures(libId: string): Promise<ISPListItems>;
|
||||
}
|
||||
/**
|
||||
* @class
|
||||
* Service implementation to get list & list items from current SharePoint site
|
||||
*/
|
||||
export declare class SPPicturesListService implements ISPPicturesListService {
|
||||
private context;
|
||||
private props;
|
||||
/**
|
||||
* @function
|
||||
* Service constructor
|
||||
*/
|
||||
constructor(_props: IPhotopileWebPartProps, pageContext: IWebPartContext);
|
||||
/**
|
||||
* @function
|
||||
* Gets the list of picture libs in the current SharePoint site
|
||||
*/
|
||||
getPictureLibs(): Promise<ISPLists>;
|
||||
/**
|
||||
* @function
|
||||
* Returns 3 fake SharePoint lists for the Mock mode
|
||||
*/
|
||||
private getPictureLibsFromMock();
|
||||
/**
|
||||
* @function
|
||||
* Gets the pictures from a SharePoint list
|
||||
*/
|
||||
getPictures(libId: string): Promise<ISPListItems>;
|
||||
/**
|
||||
* @function
|
||||
* Gets the thumbnail picture url from the Picture name.
|
||||
* In SharePoint pictures libs, the thumbnail url is formated as for example '/_t/10_jpg.jpg'
|
||||
*/
|
||||
private getThumbnailUrl(pictureUrl, pictureName);
|
||||
/**
|
||||
* @function
|
||||
* Gets the pictures list from the mock. This function will return a
|
||||
* different list of pics for the lib 1 & 2, and an empty list for the third.
|
||||
*/
|
||||
private getPicturesFromMock(libId);
|
||||
}
|
||||
304
samples/jquery-photopile/lib/webparts/photopileWebPart/SPPicturesListService.js
vendored
Normal file
304
samples/jquery-photopile/lib/webparts/photopileWebPart/SPPicturesListService.js
vendored
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
"use strict";
|
||||
var sp_http_1 = require("@microsoft/sp-http");
|
||||
var sp_core_library_1 = require("@microsoft/sp-core-library");
|
||||
var MockHttpClient_1 = require("./MockHttpClient");
|
||||
/**
|
||||
* @class
|
||||
* Service implementation to get list & list items from current SharePoint site
|
||||
*/
|
||||
var SPPicturesListService = (function () {
|
||||
/**
|
||||
* @function
|
||||
* Service constructor
|
||||
*/
|
||||
function SPPicturesListService(_props, pageContext) {
|
||||
this.props = _props;
|
||||
this.context = pageContext;
|
||||
}
|
||||
/**
|
||||
* @function
|
||||
* Gets the list of picture libs in the current SharePoint site
|
||||
*/
|
||||
SPPicturesListService.prototype.getPictureLibs = function () {
|
||||
if (sp_core_library_1.Environment.type === sp_core_library_1.EnvironmentType.Local) {
|
||||
//If the running environment is local, load the data from the mock
|
||||
return this.getPictureLibsFromMock();
|
||||
}
|
||||
else {
|
||||
//If the running environment is SharePoint, request the lists REST service
|
||||
//Gets only the list with BaseTemplate = 109 (picture libs)
|
||||
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/lists?$select=Title,id,BaseTemplate&$filter=BaseTemplate%20eq%20109", sp_http_1.SPHttpClient.configurations.v1)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Returns 3 fake SharePoint lists for the Mock mode
|
||||
*/
|
||||
SPPicturesListService.prototype.getPictureLibsFromMock = function () {
|
||||
return MockHttpClient_1.default.getLists(this.context.pageContext.web.absoluteUrl).then(function () {
|
||||
var listData = {
|
||||
value: [
|
||||
{ Title: 'Mock List One', Id: '1', BaseTemplate: '109' },
|
||||
{ Title: 'Mock List Two', Id: '2', BaseTemplate: '109' },
|
||||
{ Title: 'Mock List Three', Id: '3', BaseTemplate: '109' }
|
||||
]
|
||||
};
|
||||
return listData;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Gets the pictures from a SharePoint list
|
||||
*/
|
||||
SPPicturesListService.prototype.getPictures = function (libId) {
|
||||
var _this = this;
|
||||
if (sp_core_library_1.Environment.type === sp_core_library_1.EnvironmentType.Local) {
|
||||
//If the running environment is local, load the data from the mock
|
||||
return this.getPicturesFromMock(libId);
|
||||
}
|
||||
else {
|
||||
//If the running environment is SharePoint, request the items REST service
|
||||
//Builds the request to get only some fields, order the items & limit the number of items
|
||||
//TODO: optimize the request to not include folders and get only items
|
||||
var restUrl = this.context.pageContext.web.absoluteUrl;
|
||||
restUrl += "/_api/Web/Lists(guid'";
|
||||
restUrl += this.props.listName;
|
||||
restUrl += "')/items?$expand=File&$select=Title,Description,id,File,FileSystemObjectType&$orderby=";
|
||||
restUrl += this.props.orderBy;
|
||||
restUrl += "%20";
|
||||
restUrl += this.props.orderByAsc;
|
||||
restUrl += "&$top=";
|
||||
restUrl += this.props.count;
|
||||
//Request the SharePoint web service
|
||||
return this.context.spHttpClient.get(restUrl, sp_http_1.SPHttpClient.configurations.v1).then(function (response) {
|
||||
return response.json().then(function (responseFormated) {
|
||||
var formatedResponse = { value: [] };
|
||||
//Fetchs the Json response to construct the final items list
|
||||
responseFormated.value.map(function (object, i) {
|
||||
//Tests if the result is a file and not a folder
|
||||
if (object['FileSystemObjectType'] == '0') {
|
||||
var spListItem = {
|
||||
'ID': object["ID"],
|
||||
'Title': object['Title'],
|
||||
'Description': object['Description'],
|
||||
'File': {
|
||||
'Name': object['File']['Name'],
|
||||
'ServerRelativeUrl': object['File']['ServerRelativeUrl']
|
||||
}
|
||||
};
|
||||
//Creates the thumbnail item url from the Picture path
|
||||
spListItem.File.ThumbnailServerUrl = _this.getThumbnailUrl(spListItem.File.ServerRelativeUrl, spListItem.File.Name);
|
||||
formatedResponse.value.push(spListItem);
|
||||
}
|
||||
});
|
||||
return formatedResponse;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Gets the thumbnail picture url from the Picture name.
|
||||
* In SharePoint pictures libs, the thumbnail url is formated as for example '/_t/10_jpg.jpg'
|
||||
*/
|
||||
SPPicturesListService.prototype.getThumbnailUrl = function (pictureUrl, pictureName) {
|
||||
if (pictureUrl == null || pictureUrl == '')
|
||||
return '';
|
||||
var thumbUrl = '';
|
||||
thumbUrl = pictureUrl.replace(pictureName, '');
|
||||
thumbUrl += "_t/";
|
||||
thumbUrl += pictureName.replace(".", "_");
|
||||
thumbUrl += ".jpg";
|
||||
return thumbUrl;
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Gets the pictures list from the mock. This function will return a
|
||||
* different list of pics for the lib 1 & 2, and an empty list for the third.
|
||||
*/
|
||||
SPPicturesListService.prototype.getPicturesFromMock = function (libId) {
|
||||
return MockHttpClient_1.default.getListsItems(this.context.pageContext.web.absoluteUrl).then(function () {
|
||||
var listData = { value: [] };
|
||||
if (libId == '1') {
|
||||
listData = {
|
||||
value: [
|
||||
{
|
||||
"ID": "1", "Title": "Barton Dam, Ann Arbor, Michigan", "Description": "",
|
||||
"File": {
|
||||
"Name": "01.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/01.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/01.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "2", "Title": "Building Atlanta, Georgia", "Description": "",
|
||||
"File": {
|
||||
"Name": "02.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/02.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/02.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "3", "Title": "Nice day for a swim", "Description": "",
|
||||
"File": {
|
||||
"Name": "03.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/03.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/03.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "4", "Title": "The plants that never die", "Description": "",
|
||||
"File": {
|
||||
"Name": "04.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/04.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/04.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "5", "Title": "Downtown Atlanta, Georgia", "Description": "",
|
||||
"File": {
|
||||
"Name": "05.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/05.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/05.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "6", "Title": "Atlanta traffic", "Description": "",
|
||||
"File": {
|
||||
"Name": "06.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/06.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/06.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "7", "Title": "A pathetic dog", "Description": "",
|
||||
"File": {
|
||||
"Name": "07.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/07.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/07.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "8", "Title": "Two happy dogs", "Description": "",
|
||||
"File": {
|
||||
"Name": "08.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/08.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/08.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "9", "Title": "Antigua, Guatemala", "Description": "",
|
||||
"File": {
|
||||
"Name": "09.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/09.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/09.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "10", "Title": "Iximche, Guatemala", "Description": "",
|
||||
"File": {
|
||||
"Name": "10.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/10.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/10.jpg"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
else if (libId == '2') {
|
||||
listData = {
|
||||
value: [
|
||||
{
|
||||
"ID": "11", "Title": "Barton Dam, Ann Arbor, Michigan", "Description": "",
|
||||
"File": {
|
||||
"Name": "11.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/11.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/11.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "12", "Title": "Building Atlanta, Georgia", "Description": "",
|
||||
"File": {
|
||||
"Name": "12.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/12.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/12.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "13", "Title": "Nice day for a swim", "Description": "",
|
||||
"File": {
|
||||
"Name": "13.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/13.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/13.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "14", "Title": "The plants that never die", "Description": "",
|
||||
"File": {
|
||||
"Name": "14.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/14.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/14.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "15", "Title": "Downtown Atlanta, Georgia", "Description": "",
|
||||
"File": {
|
||||
"Name": "15.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/15.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/15.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "16", "Title": "Atlanta traffic", "Description": "",
|
||||
"File": {
|
||||
"Name": "16.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/16.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/16.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "17", "Title": "A pathetic dog", "Description": "",
|
||||
"File": {
|
||||
"Name": "17.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/17.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/17.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "18", "Title": "Two happy dogs", "Description": "",
|
||||
"File": {
|
||||
"Name": "18.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/18.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/18.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "19", "Title": "Antigua, Guatemala", "Description": "",
|
||||
"File": {
|
||||
"Name": "19.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/19.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/19.jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"ID": "20", "Title": "Iximche, Guatemala", "Description": "",
|
||||
"File": {
|
||||
"Name": "20.jpg",
|
||||
"ServerRelativeUrl": "../src/webparts/photopileWebPart/images/fullsize/20.jpg",
|
||||
"ThumbnailServerUrl": "../src/webparts/photopileWebPart/images/thumbs/20.jpg"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
return listData;
|
||||
});
|
||||
};
|
||||
return SPPicturesListService;
|
||||
}());
|
||||
exports.SPPicturesListService = SPPicturesListService;
|
||||
|
||||
//# sourceMappingURL=SPPicturesListService.js.map
|
||||
File diff suppressed because one or more lines are too long
52
samples/jquery-photopile/lib/webparts/photopileWebPart/components/PhotopileWebPart.d.ts
vendored
Normal file
52
samples/jquery-photopile/lib/webparts/photopileWebPart/components/PhotopileWebPart.d.ts
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part React JSX component.
|
||||
*
|
||||
* Contains JSX code to render the web part with HTML templates.
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import { IPhotopileWebPartProps } from '../IPhotopileWebPartProps';
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { ISPListItem } from '../ISPList';
|
||||
/**
|
||||
* @interface
|
||||
* Defines Photopile web part state.
|
||||
*/
|
||||
export interface IPhotopileState {
|
||||
results?: ISPListItem[];
|
||||
loaded: boolean;
|
||||
}
|
||||
/**
|
||||
* @class
|
||||
* Defines Photopile web part class.
|
||||
*/
|
||||
export default class PhotopileWebPart extends React.Component<IPhotopileWebPartProps, IPhotopileState> {
|
||||
private myPageContext;
|
||||
/**
|
||||
* @function
|
||||
* Photopile web part contructor.
|
||||
*/
|
||||
constructor(props: IPhotopileWebPartProps, context: IWebPartContext);
|
||||
/**
|
||||
* @function
|
||||
* JSX Element render method
|
||||
*/
|
||||
render(): JSX.Element;
|
||||
/**
|
||||
* @function
|
||||
* Function called when the component did mount
|
||||
*/
|
||||
componentDidMount(): void;
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part properties has changed
|
||||
*/
|
||||
componentWillReceiveProps(nextProps: IPhotopileWebPartProps): void;
|
||||
/**
|
||||
* @function
|
||||
* Function called when the component has been rendered (ie HTML code is ready)
|
||||
*/
|
||||
componentDidUpdate(prevProps: IPhotopileWebPartProps, prevState: IPhotopileState): void;
|
||||
}
|
||||
164
samples/jquery-photopile/lib/webparts/photopileWebPart/components/PhotopileWebPart.js
vendored
Normal file
164
samples/jquery-photopile/lib/webparts/photopileWebPart/components/PhotopileWebPart.js
vendored
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
"use strict";
|
||||
var __extends = (this && this.__extends) || function (d, b) {
|
||||
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
/**
|
||||
* @file
|
||||
* Photopile Web Part React JSX component.
|
||||
*
|
||||
* Contains JSX code to render the web part with HTML templates.
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
var React = require("react");
|
||||
var Spinner_1 = require("office-ui-fabric-react/lib/Spinner");
|
||||
var strings = require("mystrings");
|
||||
var PhotopileWebPart_module_scss_1 = require("../PhotopileWebPart.module.scss");
|
||||
var SPPicturesListService_1 = require("../SPPicturesListService");
|
||||
var photopile = require("photopileModule");
|
||||
require('jquery');
|
||||
require('jqueryui');
|
||||
require('../css/photopile.scss');
|
||||
require('photopileModule');
|
||||
/**
|
||||
* @class
|
||||
* Defines Photopile web part class.
|
||||
*/
|
||||
var PhotopileWebPart = (function (_super) {
|
||||
__extends(PhotopileWebPart, _super);
|
||||
/**
|
||||
* @function
|
||||
* Photopile web part contructor.
|
||||
*/
|
||||
function PhotopileWebPart(props, context) {
|
||||
var _this = _super.call(this, props, context) || this;
|
||||
//Save the context
|
||||
_this.myPageContext = props.context;
|
||||
//Init the component state
|
||||
_this.state = {
|
||||
results: [],
|
||||
loaded: false
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
;
|
||||
/**
|
||||
* @function
|
||||
* JSX Element render method
|
||||
*/
|
||||
PhotopileWebPart.prototype.render = function () {
|
||||
if (this.props.listName == null || this.props.listName == '') {
|
||||
//Display select a list message
|
||||
return (React.createElement("div", { className: "ms-MessageBar" },
|
||||
React.createElement("div", { className: "ms-MessageBar-content" },
|
||||
React.createElement("div", { className: "ms-MessageBar-icon" },
|
||||
React.createElement("i", { className: "ms-Icon ms-Icon--infoCircle" })),
|
||||
React.createElement("div", { className: "ms-MessageBar-text" }, strings.ErrorSelectList))));
|
||||
}
|
||||
else {
|
||||
if (this.state.loaded == false) {
|
||||
//Display the loading spinner with the Office UI Fabric Spinner control
|
||||
return (React.createElement("div", { className: PhotopileWebPart_module_scss_1.default.photopileWebPart },
|
||||
React.createElement("div", { className: PhotopileWebPart_module_scss_1.default.workingOnItSpinner },
|
||||
React.createElement(Spinner_1.Spinner, { type: Spinner_1.SpinnerType.normal }),
|
||||
React.createElement("div", { className: PhotopileWebPart_module_scss_1.default.loadingLabel },
|
||||
React.createElement("label", { className: "ms-Label" },
|
||||
" ",
|
||||
strings.Loading)))));
|
||||
}
|
||||
else if (this.state.results.length == 0) {
|
||||
//Display message no items
|
||||
return (React.createElement("div", { className: "ms-MessageBar ms-MessageBar--error" },
|
||||
React.createElement("div", { className: "ms-MessageBar-content" },
|
||||
React.createElement("div", { className: "ms-MessageBar-icon" },
|
||||
React.createElement("i", { className: "ms-Icon ms-Icon--xCircle" })),
|
||||
React.createElement("div", { className: "ms-MessageBar-text" }, strings.ErrorNoItems))));
|
||||
}
|
||||
else {
|
||||
//Display the items list
|
||||
return (React.createElement("div", { className: 'photopile-wrapper' },
|
||||
React.createElement("ul", { className: 'photopile' }, this.state.results.map(function (object, i) {
|
||||
//Select the best Alt text with title, description or file's name
|
||||
var altText = object.Title;
|
||||
if (altText == null || altText == '')
|
||||
altText = object.Description;
|
||||
if (altText == null || altText == '')
|
||||
altText = object.File.Name;
|
||||
//Render the item
|
||||
return (React.createElement("li", null,
|
||||
React.createElement("a", { href: object.File.ServerRelativeUrl },
|
||||
React.createElement("img", { src: object.File.ThumbnailServerUrl, alt: altText, width: "133", height: "100" }))));
|
||||
}))));
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Function called when the component did mount
|
||||
*/
|
||||
PhotopileWebPart.prototype.componentDidMount = function () {
|
||||
var _this = this;
|
||||
if (this.props.listName != null && this.props.listName != '') {
|
||||
//Init the Picture list service
|
||||
var picturesListService = new SPPicturesListService_1.SPPicturesListService(this.props, this.myPageContext);
|
||||
//Load the list of pictures from the current lib
|
||||
picturesListService.getPictures(this.props.listName)
|
||||
.then(function (response) {
|
||||
//Modify the component state with the json result
|
||||
_this.setState({ results: response.value, loaded: true });
|
||||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part properties has changed
|
||||
*/
|
||||
PhotopileWebPart.prototype.componentWillReceiveProps = function (nextProps) {
|
||||
var _this = this;
|
||||
//Define the state with empty results
|
||||
this.setState({ results: [], loaded: false });
|
||||
if (nextProps.listName != null && nextProps.listName != '') {
|
||||
//Init the Picture list service
|
||||
var picturesListService = new SPPicturesListService_1.SPPicturesListService(nextProps, this.myPageContext);
|
||||
//Load the list of pictures from the current lib
|
||||
picturesListService.getPictures(nextProps.listName)
|
||||
.then(function (response) {
|
||||
//Modify the component state with the json result
|
||||
_this.setState({ results: response.value, loaded: true });
|
||||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @function
|
||||
* Function called when the component has been rendered (ie HTML code is ready)
|
||||
*/
|
||||
PhotopileWebPart.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||||
if (this.state.loaded) {
|
||||
//Init photopile options
|
||||
photopile.setNumLayers(this.props.numLayers);
|
||||
photopile.setThumbOverlap(this.props.thumbOverlap);
|
||||
photopile.setThumbRotation(this.props.thumbRotation);
|
||||
photopile.setThumbBorderWidth(this.props.thumbBorderWidth);
|
||||
photopile.setThumbBorderColor(this.props.thumbBorderColor);
|
||||
photopile.setThumbBorderHover(this.props.thumbBorderHover);
|
||||
photopile.setDraggable(this.props.draggable);
|
||||
photopile.setFadeDuration(this.props.fadeDuration);
|
||||
photopile.setPickupDuration(this.props.pickupDuration);
|
||||
photopile.setPhotoZIndex(this.props.photoZIndex);
|
||||
photopile.setPhotoBorder(this.props.photoBorder);
|
||||
photopile.setPhotoBorderColor(this.props.photoBorderColor);
|
||||
photopile.setShowInfo(this.props.showInfo);
|
||||
photopile.setAutoplayGallery(this.props.autoplayGallery);
|
||||
photopile.setAutoplaySpeed(this.props.autoplaySpeed);
|
||||
//Init photopile
|
||||
photopile.scatter();
|
||||
}
|
||||
};
|
||||
return PhotopileWebPart;
|
||||
}(React.Component));
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.default = PhotopileWebPart;
|
||||
|
||||
//# sourceMappingURL=PhotopileWebPart.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
@media (max-width:320px){ul.photopile li a{max-width:85px}}@media (min-width:321px) and (max-width:568px){ul.photopile li a{max-width:100px}}@media (min-width:569px) and (max-width:768px){ul.photopile li a{max-width:115px}}@media (min-width:769px) and (max-width:1024px){ul.photopile li a{max-width:125px}}@media (min-width:1025px){ul.photopile li a{max-width:150px}}div#photopile-nav-next,div#photopile-nav-next:hover,div#photopile-nav-prev,div#photopile-nav-prev:hover{background-image:url(//photopilewebpart.blob.core.windows.net/photopile-web-part/nav-sprites.png)}ul.photopile{display:none}ul.photopile{position:relative;display:inline-block;width:100%;margin:0;padding:0;list-style:none}ul.photopile li{display:inline-block;position:relative;margin:2px;padding:0;-webkit-backface-visibility:hidden}ul.photopile li a{display:block;padding:2px;outline:0;text-decoration:none;border:1px solid #6F6F6F;box-shadow:0 0 20px #3D3D3D}ul.photopile li.photopile-active-thumbnail a:hover,ul.photopile li.photopile-active-thumbnail:hover{cursor:default}ul.photopile li a img{display:block;margin:0;padding:0;border:1px solid #6F6F6F;width:100%;height:auto;box-sizing:border-box}div#photopile-active-image-container{border:1px solid #6F6F6F;box-shadow:0 20px 80px #000;box-sizing:border-box}div#photopile-active-image-container img{margin:0 auto;height:auto}div#photopile-active-image-info{position:relative;width:100%;background:rgba(0,0,0,.3)}div#photopile-active-image-info p{color:#fff;font-size:12px;margin:0;padding:3px 8px}div#photopile-nav-next,div#photopile-nav-prev{opacity:0;position:absolute;top:50%;width:30px;height:40px;margin-top:-20px;cursor:pointer}div#photopile-nav-next{right:0;margin-right:-35px;background-position:-50px 0}div#photopile-nav-next:hover{background-position:-50px -50px}div#photopile-nav-prev{left:0;right:0;margin-left:-35px;background-position:0 0}div#photopile-nav-prev:hover{background-position:0 -50px}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* tslint:disable */
|
||||
require('./photopile.css');
|
||||
/* tslint:enable */
|
||||
|
||||
//# sourceMappingURL=photopile.scss.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webparts/photopileWebPart/css/photopile.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAE3B,mBAAmB","file":"webparts/photopileWebPart/css/photopile.scss.js","sourcesContent":["/* tslint:disable */\r\nrequire('./photopile.css');\r\n\r\n/* tslint:enable */"],"sourceRoot":"..\\..\\..\\..\\src"}
|
||||
|
|
@ -0,0 +1,616 @@
|
|||
define([], function() {
|
||||
'use strict';
|
||||
|
||||
//
|
||||
// File: photopile.js
|
||||
// Auth: Brian W. Howell
|
||||
// Date: 8 May 2014
|
||||
//
|
||||
// Photopile image gallery
|
||||
//
|
||||
// Modified by Olivier Carpentier to work with SPFx
|
||||
//
|
||||
var photopile = (function() {
|
||||
|
||||
//---------------------------------------------------------------------------------------------
|
||||
// PHOTOPILE SETTINGS
|
||||
//---------------------------------------------------------------------------------------------
|
||||
|
||||
// Thumbnails
|
||||
var numLayers = 5; // number of layers in the pile (max zindex)
|
||||
var thumbOverlap = 50; // overlap amount (px)
|
||||
var thumbRotation = 45; // maximum rotation (deg)
|
||||
var thumbBorderWidth = 2; // border width (px)
|
||||
var thumbBorderColor = 'white'; // border color
|
||||
var thumbBorderHover = '#EAEAEA'; // border hover color
|
||||
var draggable = true; // enable draggable thumbnails
|
||||
|
||||
// Photo container
|
||||
var fadeDuration = 200; // speed at which photo fades (ms)
|
||||
var pickupDuration = 500; // speed at which photo is picked up & put down (ms)
|
||||
var photoZIndex = 100; // z-index (show above all)
|
||||
var photoBorder = 10; // border width around fullsize image
|
||||
var photoBorderColor = 'white'; // border color
|
||||
var showInfo = true; // include photo description (alt tag) in photo container
|
||||
|
||||
// Autoplay
|
||||
var autoplayGallery = false; // autoplay the photopile
|
||||
var autoplaySpeed = 5000; // ms
|
||||
|
||||
// Images
|
||||
var loading = '//photopilewebpart.blob.core.windows.net/photopile-web-part/loading.gif'; // path to img displayed while gallery/thumbnails loads
|
||||
|
||||
//---- END SETTINGS ----
|
||||
|
||||
//Function to modify SETTINGS
|
||||
|
||||
//thumbnails settings
|
||||
function setNumLayers(numLayersValue) {
|
||||
if (numLayersValue != null)
|
||||
numLayers = numLayersValue;
|
||||
}
|
||||
function setThumbOverlap(thumbOverlapValue) {
|
||||
if (thumbOverlapValue != null)
|
||||
thumbOverlap = thumbOverlapValue;
|
||||
}
|
||||
function setThumbRotation(thumbRotationValue) {
|
||||
if (thumbRotationValue != null)
|
||||
thumbRotation = thumbRotationValue;
|
||||
}
|
||||
function setThumbBorderWidth(thumbBorderWidthValue) {
|
||||
if (thumbBorderWidthValue != null)
|
||||
thumbBorderWidth = thumbBorderWidthValue;
|
||||
}
|
||||
function setThumbBorderColor(thumbBorderColorValue) {
|
||||
if (thumbBorderColorValue != null)
|
||||
thumbBorderColor = thumbBorderColorValue;
|
||||
}
|
||||
function setThumbBorderHover(thumbBorderHoverValue) {
|
||||
if (thumbBorderHoverValue != null)
|
||||
thumbBorderHover = thumbBorderHoverValue;
|
||||
}
|
||||
function setDraggable(draggableValue) {
|
||||
if (draggableValue != null)
|
||||
draggable = draggableValue;
|
||||
}
|
||||
|
||||
//Photo containers settings
|
||||
function setFadeDuration(fadeDurationValue) {
|
||||
if (fadeDurationValue != null)
|
||||
fadeDuration = fadeDurationValue;
|
||||
}
|
||||
function setPickupDuration(pickupDurationValue) {
|
||||
if (pickupDurationValue != null)
|
||||
pickupDuration = pickupDurationValue;
|
||||
}
|
||||
function setPhotoZIndex(photoZIndexValue) {
|
||||
if (photoZIndexValue != null)
|
||||
photoZIndex = photoZIndexValue;
|
||||
}
|
||||
function setPhotoBorder(photoBorderValue) {
|
||||
if (photoBorderValue != null)
|
||||
photoBorder = photoBorderValue;
|
||||
}
|
||||
function setPhotoBorderColor(photoBorderColorValue) {
|
||||
if (photoBorderColorValue != null)
|
||||
photoBorderColor = photoBorderColorValue;
|
||||
}
|
||||
function setShowInfo(showInfoValue) {
|
||||
if (showInfoValue != null)
|
||||
showInfo = showInfoValue;
|
||||
}
|
||||
|
||||
//Autoplay settings
|
||||
function setAutoplayGallery(autoplayGalleryValue) {
|
||||
if (autoplayGalleryValue != null)
|
||||
autoplayGallery = autoplayGalleryValue;
|
||||
}
|
||||
function setAutoplaySpeed(autoplaySpeedValue) {
|
||||
if (autoplaySpeedValue != null)
|
||||
autoplaySpeed = autoplaySpeedValue;
|
||||
}
|
||||
|
||||
|
||||
// Initializes Photopile
|
||||
function init() {
|
||||
|
||||
// once gallery has loaded completely
|
||||
//$(window).on('load', function() {
|
||||
|
||||
// display gallery loading image in container div while loading
|
||||
$('div.photopile-wrapper').css({
|
||||
'background-repeat' : 'no-repeat',
|
||||
'background-position' : '50%, 50%',
|
||||
'background-image' : 'url(' + loading + ')'
|
||||
});
|
||||
|
||||
// initialize thumbnails and photo container
|
||||
$('ul.photopile').children().each( function() {
|
||||
thumb.init($(this));
|
||||
});
|
||||
photo.init();
|
||||
|
||||
$('div.photopile-wrapper').css({ // style container
|
||||
'padding' : thumbOverlap + 'px',
|
||||
'background-image' : 'none'
|
||||
}).children().css({ // display thumbnails
|
||||
'opacity' : '0',
|
||||
'display' : 'inline-block'
|
||||
}).fadeTo(fadeDuration, 1);
|
||||
navigator.init(); // init navigator
|
||||
if (autoplayGallery) {
|
||||
autoplay();
|
||||
}
|
||||
//});
|
||||
|
||||
} // init
|
||||
|
||||
function autoplay() {
|
||||
var nextThumb = $('ul.photopile').children().first();
|
||||
window.setInterval(function () {
|
||||
nextThumb.children().first().click();
|
||||
if (nextThumb.hasClass('last')) {
|
||||
nextThumb = $('ul.photopile').children().first();
|
||||
} else {
|
||||
nextThumb = nextThumb.next();
|
||||
}
|
||||
}, autoplaySpeed);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------
|
||||
// THUMBNAIL
|
||||
// List-item containing a link to a fullsize image
|
||||
//-----------------------------------------------------
|
||||
|
||||
var thumb = {
|
||||
|
||||
active : 'photopile-active-thumbnail', // active (or clicked) thumbnail class name
|
||||
|
||||
// Initializes thumbnail.
|
||||
init : function( thumb ) {
|
||||
self = this;
|
||||
thumb.children().css( 'padding', thumbBorderWidth + 'px' );
|
||||
self.bindUIActions(thumb);
|
||||
self.setRotation(thumb);
|
||||
self.setOverlap(thumb);
|
||||
self.setRandomZ(thumb);
|
||||
|
||||
// make draggable
|
||||
if (draggable) {
|
||||
|
||||
var x = 0;
|
||||
var velocity = 0;
|
||||
|
||||
thumb.draggable({
|
||||
|
||||
start : function(event, ui) {
|
||||
thumb.addClass('preventClick');
|
||||
thumb.css('z-index', numLayers + 2);
|
||||
|
||||
// unbind mouseover/out so thumb remains above pile
|
||||
$('ul.photopile').children().each( function() {
|
||||
thumb.unbind("mouseover", self.bringToTop);
|
||||
thumb.unbind("mouseout", self.moveDownOne);
|
||||
});
|
||||
},
|
||||
drag : function( event, ui ) {
|
||||
velocity = (ui.offset.left - x) * 1.2;
|
||||
ratio = parseInt( velocity * 100 / 360 );
|
||||
thumb.css('transform','rotateZ('+(ratio)+'deg)');
|
||||
x = ui.offset.left;
|
||||
},
|
||||
stop: function( event, ui ) {
|
||||
thumb.css('z-index', numLayers + 1);
|
||||
|
||||
// re-bind mouseover/out so thumb is moved to top of pile on hover
|
||||
$('ul.photopile').children().each( function() {
|
||||
thumb.bind("mouseover", self.bringToTop);
|
||||
thumb.bind("mouseout", self.moveDownOne);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
thumb.css('background', thumbBorderColor );
|
||||
},
|
||||
|
||||
// Binds UI actions to thumbnail.
|
||||
bindUIActions : function( thumb ) {
|
||||
var self = this;
|
||||
|
||||
thumb.bind("mouseover", self.bringToTop);
|
||||
thumb.bind("mouseout", self.moveDownOne);
|
||||
|
||||
// Pickup the thumbnail on click (if not being dragged).
|
||||
thumb.click( function(e) {
|
||||
e.preventDefault();
|
||||
if ($(this).hasClass('preventClick')) {
|
||||
$(this).removeClass('preventClick');
|
||||
} else {
|
||||
if ($(this).hasClass(self.active)) return;
|
||||
photo.pickup( $(this) );
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent user from having to double click thumbnail after dragging.
|
||||
thumb.mousedown( function(e) {
|
||||
$(this).removeClass('preventClick');
|
||||
});
|
||||
|
||||
}, // bindUIActions
|
||||
|
||||
bringToTop : function() {
|
||||
$(this).css({
|
||||
'z-index' : numLayers + 1,
|
||||
'background' : thumbBorderHover
|
||||
});
|
||||
},
|
||||
|
||||
moveDownOne : function() {
|
||||
$(this).css({
|
||||
'z-index' : numLayers,
|
||||
'background' : thumbBorderColor
|
||||
});
|
||||
},
|
||||
|
||||
// Setters for various thumbnail properties.
|
||||
setOverlap : function( thumb ) { thumb.css( 'margin', ((thumbOverlap * -1) / 2) + 'px' ); },
|
||||
setZ : function( thumb, layer ) { thumb.css( 'z-index', layer ); },
|
||||
setRandomZ : function( thumb ) { thumb.css({ 'z-index' : Math.floor((Math.random() * numLayers) + 1) }); },
|
||||
setRotation : function( thumb ) {
|
||||
var min = -1 * thumbRotation;
|
||||
var max = thumbRotation;
|
||||
var randomRotation = Math.floor( Math.random() * (max - min + 1)) + min;
|
||||
thumb.css({ 'transform' : 'rotate(' + randomRotation + 'deg)' });
|
||||
},
|
||||
|
||||
// ----- Active thumbnail -----
|
||||
|
||||
// Sets the active thumbnail.
|
||||
setActive : function( thumb ) { thumb.addClass(this.active); },
|
||||
|
||||
// Getters for active thumbnail properties
|
||||
getActiveOffset : function() { return $('li.' + this.active).offset(); },
|
||||
getActiveHeight : function() { return $('li.' + this.active).height(); },
|
||||
getActiveWidth : function() { return $('li.' + this.active).width(); },
|
||||
getActiveImgSrc : function() { return $('li.' + this.active).children().first().attr('href'); },
|
||||
getActiveRotation : function() {
|
||||
var transform = $('li.' + this.active).css("transform");
|
||||
var values = transform.split('(')[1].split(')')[0].split(',');
|
||||
var angle = Math.round( Math.asin( values[1]) * (180/Math.PI) );
|
||||
return angle;
|
||||
},
|
||||
|
||||
// Gets the active thumbnail if set, or returns false.
|
||||
getActive : function() {
|
||||
return ($('li.' + this.active)[0]) ? $('li.' + this.active).first() : false;
|
||||
},
|
||||
|
||||
// Returns a shift amount used to better position the photo container
|
||||
// on top of the active thumb. Needed because offset is skewed by thumbnail's rotation.
|
||||
getActiveShift : function() {
|
||||
return ( this.getActiveRotation() < 0 )
|
||||
? -( this.getActiveRotation(thumb) * 0.40 )
|
||||
: ( this.getActiveRotation(thumb) * 0.40 );
|
||||
},
|
||||
|
||||
// Removes the active class from all thumbnails.
|
||||
clearActiveClass : function() { $('li.' + this.active).fadeTo(fadeDuration, 1).removeClass(this.active); }
|
||||
|
||||
} // thumbnail
|
||||
|
||||
//--------------------------------------------------------------------
|
||||
// PHOTO CONTAINER
|
||||
// Dynamic container div wrapping an img element that displays the
|
||||
// fullsize image associated with the active thumbnail
|
||||
//--------------------------------------------------------------------
|
||||
|
||||
var photo = {
|
||||
|
||||
// Photo container elements
|
||||
container : '',
|
||||
image : '',
|
||||
info : '',
|
||||
|
||||
isPickedUp : false, // track if photo container is currently viewable
|
||||
fullSizeWidth : null, // will hold width of active thumbnail's fullsize image
|
||||
fullSizeHeight : null, // will hold height of active thumbnail's fullsize image
|
||||
windowPadding : 40, // minimum space between container and edge of window (px)
|
||||
|
||||
// Adds photo container elements to DOM.
|
||||
init : function() {
|
||||
|
||||
this.container = $( '<div id="photopile-active-image-container"/>' );
|
||||
this.image = $( '<img id="photopile-active-image" />');
|
||||
this.info = $( '<div id="photopile-active-image-info"/>');
|
||||
|
||||
// append and style photo container
|
||||
$('body').append( this.container );
|
||||
this.container.css({
|
||||
'display' : 'none',
|
||||
'position' : 'absolute',
|
||||
'padding' : thumbBorderWidth,
|
||||
'z-index' : photoZIndex,
|
||||
'background' : photoBorderColor,
|
||||
'background-image' : 'url(' + loading + ')',
|
||||
'background-repeat' : 'no-repeat',
|
||||
'background-position' : '50%, 50%'
|
||||
});
|
||||
|
||||
// append and style image
|
||||
this.container.append( this.image );
|
||||
this.image.css('display', 'block');
|
||||
|
||||
// append and style info div
|
||||
if ( showInfo ) {
|
||||
this.container.append( this.info );
|
||||
this.info.append('<p></p>');
|
||||
this.info.css('opacity', '0');
|
||||
};
|
||||
|
||||
}, // init
|
||||
|
||||
// Simulates picking up a photo from the photopile.
|
||||
pickup : function( thumbnail ) {
|
||||
var self = this;
|
||||
if ( self.isPickedUp ) {
|
||||
// photo already picked up. put it down and then pickup the clicked thumbnail
|
||||
self.putDown( function() { self.pickup( thumbnail ); });
|
||||
} else {
|
||||
self.isPickedUp = true;
|
||||
thumb.clearActiveClass();
|
||||
thumb.setActive( thumbnail );
|
||||
self.loadImage( thumb.getActiveImgSrc(), function() {
|
||||
self.image.fadeTo(fadeDuration, '1');
|
||||
self.enlarge();
|
||||
$('body').bind('click', function() { self.putDown(); }); // bind putdown event to body
|
||||
});
|
||||
}
|
||||
}, // pickup
|
||||
|
||||
// Simulates putting a photo down, or returning to the photo pile.
|
||||
putDown : function( callback ) {
|
||||
self = this;
|
||||
$('body').unbind();
|
||||
self.hideInfo();
|
||||
navigator.hideControls();
|
||||
thumb.setZ( thumb.getActive(), numLayers );
|
||||
self.container.stop().animate({
|
||||
'top' : thumb.getActiveOffset().top + thumb.getActiveShift(),
|
||||
'left' : thumb.getActiveOffset().left + thumb.getActiveShift(),
|
||||
'width' : thumb.getActiveWidth() + 'px',
|
||||
'height' : thumb.getActiveHeight() + 'px',
|
||||
'padding' : thumbBorderWidth + 'px'
|
||||
}, pickupDuration, function() {
|
||||
self.isPickedUp = false;
|
||||
thumb.clearActiveClass();
|
||||
self.container.fadeOut( fadeDuration, function() {
|
||||
if (callback) callback();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// Handles the loading of an image when a thumbnail is clicked.
|
||||
loadImage : function ( src, callback ) {
|
||||
var self = this;
|
||||
self.image.css('opacity', '0'); // Image is not visible until
|
||||
self.startPosition(); // the container is positioned,
|
||||
var img = new Image; // the source is updated,
|
||||
img.src = src; // and the image is loaded.
|
||||
img.onload = function() { // Restore visibility in callback
|
||||
self.fullSizeWidth = this.width;
|
||||
self.fullSizeHeight = this.height;
|
||||
self.setImageSource( src );
|
||||
if (callback) callback();
|
||||
};
|
||||
},
|
||||
|
||||
// Positions the div container over the active thumb and brings it into view.
|
||||
startPosition : function() {
|
||||
this.container.css({
|
||||
'top' : thumb.getActiveOffset().top + thumb.getActiveShift(),
|
||||
'left' : thumb.getActiveOffset().left + thumb.getActiveShift(),
|
||||
'transform' : 'rotate(' + thumb.getActiveRotation() + 'deg)',
|
||||
'width' : thumb.getActiveWidth() + 'px',
|
||||
'height' : thumb.getActiveHeight() + 'px',
|
||||
'padding' : thumbBorderWidth
|
||||
}).fadeTo(fadeDuration, '1');
|
||||
thumb.getActive().fadeTo(fadeDuration, '0');
|
||||
},
|
||||
|
||||
// Enlarges the photo container based on window and image size (loadImage callback).
|
||||
enlarge : function() {
|
||||
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height(); // mobile safari hack
|
||||
var availableWidth = $(window).width() - (2 * this.windowPadding);
|
||||
var availableHeight = windowHeight - (2 * this.windowPadding);
|
||||
if ((availableWidth < this.fullSizeWidth) && ( availableHeight < this.fullSizeHeight )) {
|
||||
// determine which dimension will allow image to fit completely within the window
|
||||
if ((availableWidth * (this.fullSizeHeight / this.fullSizeWidth)) > availableHeight) {
|
||||
this.enlargeToWindowHeight( availableHeight );
|
||||
} else {
|
||||
this.enlargeToWindowWidth( availableWidth );
|
||||
}
|
||||
} else if ( availableWidth < this.fullSizeWidth ) {
|
||||
this.enlargeToWindowWidth( availableWidth );
|
||||
} else if ( availableHeight < this.fullSizeHeight ) {
|
||||
this.enlargeToWindowHeight( availableHeight );
|
||||
} else {
|
||||
this.enlargeToFullSize();
|
||||
}
|
||||
}, // enlarge
|
||||
|
||||
// Updates the info div text and makes visible within the photo container.
|
||||
showInfo : function() {
|
||||
if ( showInfo ) {
|
||||
this.info.children().text( thumb.getActive().children('a').children('img').attr('alt') );
|
||||
this.info.css({
|
||||
'margin-top' : -(this.info.height()) + 'px'
|
||||
}).fadeTo(fadeDuration, 1);
|
||||
}
|
||||
},
|
||||
|
||||
// Hides the info div.
|
||||
hideInfo : function() {
|
||||
if ( showInfo ) {
|
||||
this.info.fadeTo(fadeDuration, 0);
|
||||
};
|
||||
},
|
||||
|
||||
// Fullsize image will fit in window. Display it and show nav controls.
|
||||
enlargeToFullSize : function() {
|
||||
self = this;
|
||||
self.container.css('transform', 'rotate(0deg)').animate({
|
||||
'top' : ($(window).scrollTop()) + ($(window).height() / 2) - (self.fullSizeHeight / 2),
|
||||
'left' : ($(window).scrollLeft()) + ($(window).width() / 2) - (self.fullSizeWidth / 2),
|
||||
'width' : (self.fullSizeWidth - (2 * photoBorder)) + 'px',
|
||||
'height' : (self.fullSizeHeight - (2 * photoBorder)) + 'px',
|
||||
'padding' : photoBorder + 'px',
|
||||
}, function() {
|
||||
self.showInfo();
|
||||
navigator.showControls();
|
||||
});
|
||||
},
|
||||
|
||||
// Fullsize image width exceeds window width. Display it and show nav controls.
|
||||
enlargeToWindowWidth : function( availableWidth ) {
|
||||
self = this;
|
||||
var adjustedHeight = availableWidth * (self.fullSizeHeight / self.fullSizeWidth);
|
||||
self.container.css('transform', 'rotate(0deg)').animate({
|
||||
'top' : $(window).scrollTop() + ($(window).height() / 2) - (adjustedHeight / 2),
|
||||
'left' : $(window).scrollLeft() + ($(window).width() / 2) - (availableWidth / 2),
|
||||
'width' : availableWidth + 'px',
|
||||
'height' : adjustedHeight + 'px',
|
||||
'padding' : photoBorder + 'px'
|
||||
}, function() {
|
||||
self.showInfo();
|
||||
navigator.showControls();
|
||||
});
|
||||
},
|
||||
|
||||
// Fullsize image height exceeds window height. Display it and show nav controls.
|
||||
enlargeToWindowHeight : function( availableHeight ) {
|
||||
self = this;
|
||||
var adjustedWidth = availableHeight * (self.fullSizeWidth / self.fullSizeHeight);
|
||||
self.container.css('transform', 'rotate(0deg)').animate({
|
||||
'top' : $(window).scrollTop() + ($(window).height() / 2) - (availableHeight / 2),
|
||||
'left' : $(window).scrollLeft() + ($(window).width() / 2) - (adjustedWidth / 2),
|
||||
'width' : adjustedWidth + 'px',
|
||||
'height' : availableHeight + 'px',
|
||||
'padding' : photoBorder + 'px'
|
||||
}, function() {
|
||||
self.showInfo();
|
||||
navigator.showControls();
|
||||
});
|
||||
},
|
||||
|
||||
// Sets the photo container's image source.
|
||||
setImageSource : function( src ) {
|
||||
this.image.attr('src', src).css({
|
||||
'width' : '100%',
|
||||
'height' : '100%',
|
||||
'margin-top' : '0'
|
||||
});
|
||||
}
|
||||
|
||||
} // photo
|
||||
|
||||
//----------------------------------------------------------------------
|
||||
// NAVIGATOR
|
||||
// Collection of div elements used to navigate the photos in gallery
|
||||
//----------------------------------------------------------------------
|
||||
|
||||
var navigator = {
|
||||
|
||||
// Navigator controls.
|
||||
next : '',
|
||||
prev : '',
|
||||
|
||||
init : function() {
|
||||
this.next = $( '<div id="photopile-nav-next" />' );
|
||||
this.prev = $( '<div id="photopile-nav-prev" />' );
|
||||
photo.container.append( this.next ); // add next control button
|
||||
photo.container.append( this.prev ); // add prev control button
|
||||
$('ul.photopile li:first').addClass('first'); // add 'first' class to first thumb
|
||||
$('ul.photopile li:last').addClass('last'); // add 'last' class to last thumb
|
||||
this.bindUIActions();
|
||||
},
|
||||
|
||||
bindUIActions : function() {
|
||||
|
||||
// Bind next/prev event to the left and right arrow controls
|
||||
this.next.click( function(e) {
|
||||
e.preventDefault();
|
||||
navigator.pickupNext();
|
||||
});
|
||||
this.prev.click( function(e) {
|
||||
e.preventDefault();
|
||||
navigator.pickupPrev();
|
||||
});
|
||||
|
||||
// bind prev & next to LR arrow respectively
|
||||
$(document.documentElement).keyup(function (e) {
|
||||
if (e.keyCode == 39) { navigator.pickupNext(); } // right arrow clicks
|
||||
if (e.keyCode == 37) { navigator.pickupPrev(); } // left arrow clicks
|
||||
});
|
||||
|
||||
}, // bindUIActions
|
||||
|
||||
pickupNext : function() {
|
||||
var activeThumb = thumb.getActive();
|
||||
if ( !activeThumb ) return;
|
||||
if ( activeThumb.hasClass('last')) {
|
||||
photo.pickup( $('ul.photopile').children().first() ); // pickup first
|
||||
} else {
|
||||
photo.pickup( activeThumb.next('li') ); // pickup next
|
||||
}
|
||||
},
|
||||
|
||||
pickupPrev : function() {
|
||||
var activeThumb = thumb.getActive();
|
||||
if ( !activeThumb ) return;
|
||||
if ( activeThumb.hasClass('first')) {
|
||||
photo.pickup( $('ul.photopile').children().last() ); // pickup last
|
||||
} else {
|
||||
photo.pickup( activeThumb.prev('li') ); // pickup prev
|
||||
}
|
||||
},
|
||||
|
||||
hideControls : function() {
|
||||
this.next.css('opacity', '0');
|
||||
this.prev.css('opacity', '0');
|
||||
},
|
||||
|
||||
showControls : function() {
|
||||
this.next.css('opacity', '100');
|
||||
this.prev.css('opacity', '100');
|
||||
}
|
||||
|
||||
}; // navigator
|
||||
|
||||
return {
|
||||
scatter : init,
|
||||
autoplay : autoplay,
|
||||
setNumLayers: setNumLayers,
|
||||
setThumbOverlap: setThumbOverlap,
|
||||
setThumbRotation: setThumbRotation,
|
||||
setThumbBorderWidth: setThumbBorderWidth,
|
||||
setThumbBorderColor: setThumbBorderColor,
|
||||
setThumbBorderHover: setThumbBorderHover,
|
||||
setDraggable: setDraggable,
|
||||
setFadeDuration: setFadeDuration,
|
||||
setPickupDuration: setPickupDuration,
|
||||
setPhotoZIndex: setPhotoZIndex,
|
||||
setPhotoBorder: setPhotoBorder,
|
||||
setPhotoBorderColor: setPhotoBorderColor,
|
||||
setShowInfo: setShowInfo,
|
||||
setAutoplayGallery: setAutoplayGallery,
|
||||
setAutoplaySpeed: setAutoplaySpeed
|
||||
}
|
||||
|
||||
})(); // photopile
|
||||
|
||||
return photopile;
|
||||
|
||||
});
|
||||
|
||||
//photopile.scatter(); // ### initialize the photopile ###
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part en-us string ressources
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Customize the photopile web part settings",
|
||||
"ErrorSelectList": "Please edit the webpart and select a picture library. If the picture library dropdown list is empty, please create a new Picture Library in the current web site.",
|
||||
"ErrorNoItems": "No items found in the current library. Please insert inside or select another library.",
|
||||
"Loading": "Loading pictures...",
|
||||
"PictureLibraryGroupName": "Library",
|
||||
"ThumbnailsGroupName": "Thumbnails",
|
||||
"PhotoContainerGroupName": "Photo container",
|
||||
"AutoplayGroupName": "Autoplay",
|
||||
"PictureLibraryFieldLabel": "Pictures library",
|
||||
"OrderByFieldLabel": "Order by",
|
||||
"OrderByChoiceLabelId": "ID",
|
||||
"OrderByChoiceLabelTitle": "Title",
|
||||
"OrderByChoiceLabelCreated": "Created",
|
||||
"OrderByChoiceLabelModified": "Modified",
|
||||
"OrderByChoiceLabelImageWidth": "Image width",
|
||||
"OrderByChoiceLabelImageHeight": "Image height",
|
||||
"OrderByAscFieldLabel": "Arranged",
|
||||
"OrderByAscChoiceLabel": "Ascending",
|
||||
"OrderByDescChoiceLabel": "Descending",
|
||||
"PictureLibraryCountLabel": "Max count",
|
||||
"NumLayersFieldLabel": "Number of layers in the pile (max zindex)",
|
||||
"ThumbOverlabFieldLabel": "Overlap amount (px)",
|
||||
"ThumbRotationFieldLabel": "Maximum rotation (deg)",
|
||||
"ThumbBorderWidthFieldLabel": "Border width (px)",
|
||||
"ThumbBorderColorFieldLabel": "Border color",
|
||||
"ThumbBorderHoverFieldLabel": "Border hover color",
|
||||
"DraggableFieldLabel": "Enable draggable thumbnails",
|
||||
"FadeDurationFieldLabel": "Speed at which photo fades (ms)",
|
||||
"PickupDurationFieldLabel": "Speed at which photo is picked up & put down (ms)",
|
||||
"PhotoZIndexFieldLabel": "Z-Index (show above all)",
|
||||
"PhotoBorderFieldLabel": "Border width around fullsize image",
|
||||
"PhotoBorderColorFieldLabel": "Border color",
|
||||
"ShowInfoFieldLabel": "Include photo description in photo container",
|
||||
"AutoplayGalleryFieldLabel": "Autoplay the photopile",
|
||||
"AutoplaySpeedFieldLabel": "Autoplay speed (ms)"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part fr-fr string ressources
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Personnalisez les propriétés de la web part photopile",
|
||||
"ErrorSelectList": "Veuillez édtier la web part et sélectionner une bibliothèque d'images. Si la liste des bibliothèques disponibles est vide, veuillez créer une nouvelle App au sein de votre site de type Bibliothèque d'images, et ajouter des images à l'intérieur.",
|
||||
"ErrorNoItems": "Aucune image n'a été trouvé. Veuillez choisir une autre liste ou insérer des images.",
|
||||
"Loading": "Chargement des images...",
|
||||
"PictureLibraryGroupName": "Librairie",
|
||||
"ThumbnailsGroupName": "Miniatures",
|
||||
"PhotoContainerGroupName": "Photos",
|
||||
"AutoplayGroupName": "Lecture automatique",
|
||||
"PictureLibraryFieldLabel": "Bibliothèque d'images",
|
||||
"OrderByFieldLabel": "Trier par",
|
||||
"OrderByChoiceLabelId": "ID",
|
||||
"OrderByChoiceLabelTitle": "Titre",
|
||||
"OrderByChoiceLabelCreated": "Date de création",
|
||||
"OrderByChoiceLabelModified": "Date de modification",
|
||||
"OrderByChoiceLabelImageWidth": "Largeur de l'image",
|
||||
"OrderByChoiceLabelImageHeight": "Hauteur de l'image",
|
||||
"OrderByAscFieldLabel": "Classer par ordre",
|
||||
"OrderByAscChoiceLabel": "Ascendant",
|
||||
"OrderByDescChoiceLabel": "Descendant",
|
||||
"PictureLibraryCountLabel": "Nombre maximum d'images",
|
||||
"NumLayersFieldLabel": "Nombre de niveaux (max zindex)",
|
||||
"ThumbOverlabFieldLabel": "Taille des chevauchements (px)",
|
||||
"ThumbRotationFieldLabel": "Rotation maximale (deg)",
|
||||
"ThumbBorderWidthFieldLabel": "Largeur des bordures (px)",
|
||||
"ThumbBorderColorFieldLabel": "Couleur des bordures",
|
||||
"ThumbBorderHoverFieldLabel": "Couleur de survol des bordures",
|
||||
"DraggableFieldLabel": "Autoriser le déplacement des miniatures",
|
||||
"FadeDurationFieldLabel": "Vitesse d'animation des images (ms)",
|
||||
"PickupDurationFieldLabel": "Vitesse d'apparition (ms)",
|
||||
"PhotoZIndexFieldLabel": "Z-Index",
|
||||
"PhotoBorderFieldLabel": "Taille des bordures des photo plein écran",
|
||||
"PhotoBorderColorFieldLabel": "Couleur des bordures",
|
||||
"ShowInfoFieldLabel": "Afficher la description de la photo",
|
||||
"AutoplayGalleryFieldLabel": "Lire automatiquement la pile",
|
||||
"AutoplaySpeedFieldLabel": "Vitesse de lecture (ms)"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference types="mocha" />
|
||||
"use strict";
|
||||
var chai_1 = require("chai");
|
||||
describe('PhotopileWebPartWebPart', function () {
|
||||
it('should do something', function () {
|
||||
chai_1.assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
||||
//# sourceMappingURL=PhotopileWebPart.test.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webparts/photopileWebPart/tests/PhotopileWebPart.test.ts"],"names":[],"mappings":"AAAA,+BAA+B;;AAE/B,6BAA8B;AAE9B,QAAQ,CAAC,yBAAyB,EAAE;IAClC,EAAE,CAAC,qBAAqB,EAAE;QACxB,aAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","file":"webparts/photopileWebPart/tests/PhotopileWebPart.test.js","sourcesContent":["/// <reference types=\"mocha\" />\r\n\r\nimport { assert } from 'chai';\r\n\r\ndescribe('PhotopileWebPartWebPart', () => {\r\n it('should do something', () => {\r\n assert.ok(true);\r\n });\r\n});\r\n"],"sourceRoot":"..\\..\\..\\..\\src"}
|
||||
|
|
@ -1,28 +1,32 @@
|
|||
{
|
||||
"name": "photopile-web-part",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-client-base": "~0.1.12",
|
||||
"@microsoft/sp-client-preview": "~0.1.12",
|
||||
"jquery": "^3.1.0",
|
||||
"jqueryui": "^1.11.1",
|
||||
"office-ui-fabric-react": "0.36.0",
|
||||
"react": "0.14.8",
|
||||
"react-dom": "0.14.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~0.4.32",
|
||||
"@microsoft/sp-module-interfaces": "~0.1.8",
|
||||
"@microsoft/sp-webpart-workbench": "~0.1.12",
|
||||
"gulp": "~3.9.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp nuke",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "photopile-web-part",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-client-base": "~1.0.0",
|
||||
"@microsoft/sp-core-library": "~1.0.0",
|
||||
"@microsoft/sp-webpart-base": "~1.0.0",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||
"jquery": "^3.1.0",
|
||||
"jqueryui": "^1.11.1",
|
||||
"office-ui-fabric-react": "0.36.0",
|
||||
"react": "0.14.8",
|
||||
"react-dom": "0.14.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.0.0",
|
||||
"@microsoft/sp-module-interfaces": "~1.0.0",
|
||||
"@microsoft/sp-webpart-workbench": "~1.0.0",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +1,30 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part properties definition
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { IWebPartContext } from '@microsoft/sp-client-preview';
|
||||
|
||||
export interface IPhotopileWebPartWebPartProps {
|
||||
listName: string;
|
||||
orderBy: string;
|
||||
orderByAsc: string;
|
||||
count: number;
|
||||
numLayers: number;
|
||||
thumbOverlap: number;
|
||||
thumbRotation: number;
|
||||
thumbBorderWidth: number;
|
||||
thumbBorderColor: string;
|
||||
thumbBorderHover: string;
|
||||
draggable: boolean;
|
||||
fadeDuration: number;
|
||||
pickupDuration: number;
|
||||
photoZIndex: number;
|
||||
photoBorder: number;
|
||||
photoBorderColor: string;
|
||||
showInfo: boolean;
|
||||
autoplayGallery: boolean;
|
||||
autoplaySpeed: number;
|
||||
|
||||
context: IWebPartContext;
|
||||
}
|
||||
/**
|
||||
* @file
|
||||
* Photopile Web Part properties definition
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
|
||||
export interface IPhotopileWebPartWebPartProps {
|
||||
listName: string;
|
||||
orderBy: string;
|
||||
orderByAsc: string;
|
||||
count: number;
|
||||
numLayers: number;
|
||||
thumbOverlap: number;
|
||||
thumbRotation: number;
|
||||
thumbBorderWidth: number;
|
||||
thumbBorderColor: string;
|
||||
thumbBorderHover: string;
|
||||
draggable: boolean;
|
||||
fadeDuration: number;
|
||||
pickupDuration: number;
|
||||
photoZIndex: number;
|
||||
photoBorder: number;
|
||||
photoBorderColor: string;
|
||||
showInfo: boolean;
|
||||
autoplayGallery: boolean;
|
||||
autoplaySpeed: number;
|
||||
context: IWebPartContext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
.photopileWebPart {
|
||||
|
||||
.workingOnItSpinner {
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 33.33333%;
|
||||
line-height: 1.5em;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.loadingLabel {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.photopileWebPart {
|
||||
|
||||
.workingOnItSpinner {
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 33.33333%;
|
||||
line-height: 1.5em;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.loadingLabel {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
/* tslint:disable */
|
||||
require('./PhotopileWebPart.module.css');
|
||||
const styles = {
|
||||
photopileWebPart: 'photopileWebPart_44ab54de',
|
||||
workingOnItSpinner: 'workingOnItSpinner_44ab54de',
|
||||
loadingLabel: 'loadingLabel_44ab54de',
|
||||
};
|
||||
|
||||
export default styles;
|
||||
/* tslint:enable */
|
||||
|
|
@ -1,37 +1,38 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "4b1150be-30a9-42a7-9bd4-55d50bbd9473",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "4b1150be-30a9-42a7-9bd4-55d50bbd9473",
|
||||
"group": { "default": "Default" },
|
||||
"title": { "default": "Photopile" },
|
||||
"description": { "default": "PhotopileWebPart description" },
|
||||
"officeFabricIconFontName": "PhotoCollection",
|
||||
"properties": {
|
||||
"listName": "",
|
||||
"orderBy": "ID",
|
||||
"orderByAsc": "asc",
|
||||
"count": 100,
|
||||
"numLayers": 5,
|
||||
"thumbOverlap": 50,
|
||||
"thumbRotation": 45,
|
||||
"thumbBorderWidth": 2,
|
||||
"thumbBorderColor": "white",
|
||||
"thumbBorderHover": "#EAEAEA",
|
||||
"draggable": true,
|
||||
"fadeDuration": 200,
|
||||
"pickupDuration": 500,
|
||||
"photoZIndex": 100,
|
||||
"photoBorder": 10,
|
||||
"photoBorderColor": "white",
|
||||
"showInfo": true,
|
||||
"autoplayGallery": false,
|
||||
"autoplaySpeed": 5000
|
||||
}
|
||||
}]
|
||||
}
|
||||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"alias": "PhotopileWebPartWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"group": { "default": "Default" },
|
||||
"title": { "default": "Photopile" },
|
||||
"description": { "default": "PhotopileWebPart description" },
|
||||
"officeFabricIconFontName": "PhotoCollection",
|
||||
"properties": {
|
||||
"listName": "",
|
||||
"orderBy": "ID",
|
||||
"orderByAsc": "asc",
|
||||
"count": 100,
|
||||
"numLayers": 5,
|
||||
"thumbOverlap": 50,
|
||||
"thumbRotation": 45,
|
||||
"thumbBorderWidth": 2,
|
||||
"thumbBorderColor": "white",
|
||||
"thumbBorderHover": "#EAEAEA",
|
||||
"draggable": true,
|
||||
"fadeDuration": 200,
|
||||
"pickupDuration": 500,
|
||||
"photoZIndex": 100,
|
||||
"photoBorder": 10,
|
||||
"photoBorderColor": "white",
|
||||
"showInfo": true,
|
||||
"autoplayGallery": false,
|
||||
"autoplaySpeed": 5000
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,259 +1,261 @@
|
|||
/**
|
||||
* @file
|
||||
* Defines the Photopile client side web part
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneSettings,
|
||||
IWebPartContext,
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneToggle,
|
||||
PropertyPaneDropdown,
|
||||
IPropertyPaneDropdownOption,
|
||||
PropertyPaneSlider
|
||||
} from '@microsoft/sp-client-preview';
|
||||
|
||||
import * as strings from 'mystrings';
|
||||
import { IPhotopileWebPartProps } from './IPhotopileWebPartProps';
|
||||
import PhotopileWebPart from './components/PhotopileWebPart';
|
||||
import { IPhotopileWebPartWebPartProps } from './IPhotopileWebPartWebPartProps';
|
||||
import { SPPicturesListService } from './SPPicturesListService';
|
||||
import { ISPList } from './ISPList';
|
||||
|
||||
/**
|
||||
* @class
|
||||
* Defines the Photopile client side web part
|
||||
*/
|
||||
export default class PhotopileWebPartWebPart extends BaseClientSideWebPart<IPhotopileWebPartWebPartProps> {
|
||||
|
||||
/**
|
||||
* @var
|
||||
* Stores the list of SharePoint Pictures library found in the current SP web
|
||||
*/
|
||||
private listsDropdownOptions: IPropertyPaneDropdownOption[] = [];
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Web Part constructor
|
||||
*/
|
||||
public constructor(context: IWebPartContext) {
|
||||
super(context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part is inialized
|
||||
*/
|
||||
public onInit<T>(): Promise<T> {
|
||||
//Init the PicturesListService to get the picture libs
|
||||
const picturesListService: SPPicturesListService = new SPPicturesListService(this.properties, this.context);
|
||||
//Request the libs
|
||||
picturesListService.getPictureLibs()
|
||||
.then((response) => {
|
||||
//Store the result as list of dropdown options
|
||||
this.listsDropdownOptions = response.value.map((list: ISPList) => {
|
||||
return {
|
||||
key: list.Id,
|
||||
text: list.Title
|
||||
};
|
||||
});
|
||||
});
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Renders the web part
|
||||
*/
|
||||
public render(): void {
|
||||
|
||||
//Constructs the react element code to JSX
|
||||
const element: React.ReactElement<IPhotopileWebPartProps> = React.createElement(PhotopileWebPart, {
|
||||
listName: this.properties.listName,
|
||||
orderBy: this.properties.orderBy,
|
||||
orderByAsc: this.properties.orderByAsc,
|
||||
count: this.properties.count,
|
||||
numLayers: this.properties.numLayers,
|
||||
thumbOverlap: this.properties.thumbOverlap,
|
||||
thumbRotation: this.properties.thumbRotation,
|
||||
thumbBorderWidth: this.properties.thumbBorderWidth,
|
||||
thumbBorderColor: this.properties.thumbBorderColor,
|
||||
thumbBorderHover: this.properties.thumbBorderHover,
|
||||
draggable: this.properties.draggable,
|
||||
fadeDuration: this.properties.fadeDuration,
|
||||
pickupDuration: this.properties.pickupDuration,
|
||||
photoZIndex: this.properties.photoZIndex,
|
||||
photoBorder: this.properties.photoBorder,
|
||||
photoBorderColor: this.properties.photoBorderColor,
|
||||
showInfo: this.properties.showInfo,
|
||||
autoplayGallery: this.properties.autoplayGallery,
|
||||
autoplaySpeed: this.properties.autoplaySpeed,
|
||||
context: this.context
|
||||
});
|
||||
|
||||
//Render the dom
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Prevent from changing the pane properties on typing
|
||||
*/
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Gets the web part properties panel settings
|
||||
*/
|
||||
protected get propertyPaneSettings(): IPropertyPaneSettings {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
//Display the web part properties as accordion
|
||||
displayGroupsAsAccordion: true,
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.PictureLibraryGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown('listName', {
|
||||
label: strings.PictureLibraryFieldLabel,
|
||||
options: this.listsDropdownOptions
|
||||
}),
|
||||
PropertyPaneDropdown('orderBy', {
|
||||
label: strings.OrderByFieldLabel,
|
||||
options: [
|
||||
{ key: 'ID', text: strings.OrderByChoiceLabelId },
|
||||
{ key: 'Title', text: strings.OrderByChoiceLabelTitle },
|
||||
{ key: 'Created', text: strings.OrderByChoiceLabelCreated },
|
||||
{ key: 'Modified', text: strings.OrderByChoiceLabelModified },
|
||||
{ key: 'ImageWidth', text: strings.OrderByChoiceLabelImageWidth },
|
||||
{ key: 'ImageHeight', text: strings.OrderByChoiceLabelImageHeight }
|
||||
]
|
||||
}),
|
||||
PropertyPaneDropdown('orderByAsc', {
|
||||
label: strings.OrderByAscFieldLabel,
|
||||
options: [
|
||||
{ key: 'asc', text: strings.OrderByAscChoiceLabel },
|
||||
{ key: 'desc', text: strings.OrderByDescChoiceLabel }
|
||||
]
|
||||
}),
|
||||
PropertyPaneSlider('count', {
|
||||
label: strings.PictureLibraryCountLabel,
|
||||
min: 1,
|
||||
max: 100,
|
||||
step: 1,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.ThumbnailsGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneSlider('numLayers', {
|
||||
label: strings.NumLayersFieldLabel,
|
||||
min: 1,
|
||||
max: 20,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbOverlap', {
|
||||
label: strings.ThumbOverlabFieldLabel,
|
||||
min: 1,
|
||||
max: 130,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbRotation', {
|
||||
label: strings.ThumbRotationFieldLabel,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbBorderWidth', {
|
||||
label: strings.ThumbBorderWidthFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneTextField('thumbBorderColor', {
|
||||
label: strings.ThumbBorderColorFieldLabel
|
||||
}),
|
||||
PropertyPaneTextField('thumbBorderHover', {
|
||||
label: strings.ThumbBorderHoverFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('draggable', {
|
||||
label: strings.DraggableFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.PhotoContainerGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneSlider('fadeDuration', {
|
||||
label: strings.FadeDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('pickupDuration', {
|
||||
label: strings.PickupDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('photoZIndex', {
|
||||
label: strings.PhotoZIndexFieldLabel,
|
||||
min: 1,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('photoBorder', {
|
||||
label: strings.PhotoBorderFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneTextField('photoBorderColor', {
|
||||
label: strings.PhotoBorderColorFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('showInfo', {
|
||||
label: strings.ShowInfoFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.AutoplayGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneToggle('autoplayGallery', {
|
||||
label: strings.AutoplayGalleryFieldLabel
|
||||
}),
|
||||
PropertyPaneSlider('autoplaySpeed', {
|
||||
label: strings.AutoplaySpeedFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
IWebPartContext,
|
||||
PropertyPaneToggle,
|
||||
PropertyPaneDropdown,
|
||||
IPropertyPaneDropdownOption,
|
||||
PropertyPaneSlider
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import * as strings from 'mystrings';
|
||||
import { IPhotopileWebPartProps } from './IPhotopileWebPartProps';
|
||||
import PhotopileWebPart from './components/PhotopileWebPart';
|
||||
import { IPhotopileWebPartWebPartProps } from './IPhotopileWebPartWebPartProps';
|
||||
import { SPPicturesListService } from './SPPicturesListService';
|
||||
import { ISPList } from './ISPList';
|
||||
|
||||
/**
|
||||
* @class
|
||||
* Defines the Photopile client side web part
|
||||
*/
|
||||
export default class PhotopileWebPartWebPart extends BaseClientSideWebPart<IPhotopileWebPartWebPartProps> {
|
||||
|
||||
/**
|
||||
* @var
|
||||
* Stores the list of SharePoint Pictures library found in the current SP web
|
||||
*/
|
||||
private listsDropdownOptions: IPropertyPaneDropdownOption[] = [];
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Web Part constructor
|
||||
*/
|
||||
public constructor(context: IWebPartContext) {
|
||||
super();
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Function called when the web part is inialized
|
||||
*/
|
||||
public onInit<T>(): Promise<T> {
|
||||
//Init the PicturesListService to get the picture libs
|
||||
const picturesListService: SPPicturesListService = new SPPicturesListService(this.properties, this.context);
|
||||
//Request the libs
|
||||
picturesListService.getPictureLibs()
|
||||
.then((response) => {
|
||||
//Store the result as list of dropdown options
|
||||
this.listsDropdownOptions = response.value.map((list: ISPList) => {
|
||||
return {
|
||||
key: list.Id,
|
||||
text: list.Title
|
||||
};
|
||||
});
|
||||
});
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Renders the web part
|
||||
*/
|
||||
|
||||
public render(): void {
|
||||
|
||||
//Constructs the react element code to JSX
|
||||
const element: React.ReactElement<IPhotopileWebPartProps> = React.createElement(PhotopileWebPart, {
|
||||
listName: this.properties.listName,
|
||||
orderBy: this.properties.orderBy,
|
||||
orderByAsc: this.properties.orderByAsc,
|
||||
count: this.properties.count,
|
||||
numLayers: this.properties.numLayers,
|
||||
thumbOverlap: this.properties.thumbOverlap,
|
||||
thumbRotation: this.properties.thumbRotation,
|
||||
thumbBorderWidth: this.properties.thumbBorderWidth,
|
||||
thumbBorderColor: this.properties.thumbBorderColor,
|
||||
thumbBorderHover: this.properties.thumbBorderHover,
|
||||
draggable: this.properties.draggable,
|
||||
fadeDuration: this.properties.fadeDuration,
|
||||
pickupDuration: this.properties.pickupDuration,
|
||||
photoZIndex: this.properties.photoZIndex,
|
||||
photoBorder: this.properties.photoBorder,
|
||||
photoBorderColor: this.properties.photoBorderColor,
|
||||
showInfo: this.properties.showInfo,
|
||||
autoplayGallery: this.properties.autoplayGallery,
|
||||
autoplaySpeed: this.properties.autoplaySpeed,
|
||||
context: this.context
|
||||
});
|
||||
|
||||
//Render the dom
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Prevent from changing the pane properties on typing
|
||||
*/
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function
|
||||
* Gets the web part properties panel settings
|
||||
*/
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
//Display the web part properties as accordion
|
||||
displayGroupsAsAccordion: true,
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.PictureLibraryGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown('listName', {
|
||||
label: strings.PictureLibraryFieldLabel,
|
||||
options: this.listsDropdownOptions
|
||||
}),
|
||||
PropertyPaneDropdown('orderBy', {
|
||||
label: strings.OrderByFieldLabel,
|
||||
options: [
|
||||
{ key: 'ID', text: strings.OrderByChoiceLabelId },
|
||||
{ key: 'Title', text: strings.OrderByChoiceLabelTitle },
|
||||
{ key: 'Created', text: strings.OrderByChoiceLabelCreated },
|
||||
{ key: 'Modified', text: strings.OrderByChoiceLabelModified },
|
||||
{ key: 'ImageWidth', text: strings.OrderByChoiceLabelImageWidth },
|
||||
{ key: 'ImageHeight', text: strings.OrderByChoiceLabelImageHeight }
|
||||
]
|
||||
}),
|
||||
PropertyPaneDropdown('orderByAsc', {
|
||||
label: strings.OrderByAscFieldLabel,
|
||||
options: [
|
||||
{ key: 'asc', text: strings.OrderByAscChoiceLabel },
|
||||
{ key: 'desc', text: strings.OrderByDescChoiceLabel }
|
||||
]
|
||||
}),
|
||||
PropertyPaneSlider('count', {
|
||||
label: strings.PictureLibraryCountLabel,
|
||||
min: 1,
|
||||
max: 100,
|
||||
step: 1,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.ThumbnailsGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneSlider('numLayers', {
|
||||
label: strings.NumLayersFieldLabel,
|
||||
min: 1,
|
||||
max: 20,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbOverlap', {
|
||||
label: strings.ThumbOverlabFieldLabel,
|
||||
min: 1,
|
||||
max: 130,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbRotation', {
|
||||
label: strings.ThumbRotationFieldLabel,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('thumbBorderWidth', {
|
||||
label: strings.ThumbBorderWidthFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneTextField('thumbBorderColor', {
|
||||
label: strings.ThumbBorderColorFieldLabel
|
||||
}),
|
||||
PropertyPaneTextField('thumbBorderHover', {
|
||||
label: strings.ThumbBorderHoverFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('draggable', {
|
||||
label: strings.DraggableFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.PhotoContainerGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneSlider('fadeDuration', {
|
||||
label: strings.FadeDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('pickupDuration', {
|
||||
label: strings.PickupDurationFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('photoZIndex', {
|
||||
label: strings.PhotoZIndexFieldLabel,
|
||||
min: 1,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneSlider('photoBorder', {
|
||||
label: strings.PhotoBorderFieldLabel,
|
||||
min: 0,
|
||||
max: 50,
|
||||
step: 1,
|
||||
showValue: true
|
||||
}),
|
||||
PropertyPaneTextField('photoBorderColor', {
|
||||
label: strings.PhotoBorderColorFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('showInfo', {
|
||||
label: strings.ShowInfoFieldLabel
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: strings.AutoplayGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneToggle('autoplayGallery', {
|
||||
label: strings.AutoplayGalleryFieldLabel
|
||||
}),
|
||||
PropertyPaneSlider('autoplaySpeed', {
|
||||
label: strings.AutoplaySpeedFieldLabel,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
step: 100,
|
||||
showValue: true
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
* Author: Olivier Carpentier
|
||||
*/
|
||||
import { ISPLists, ISPListItems, ISPListItem } from './ISPList';
|
||||
import { IWebPartContext } from '@microsoft/sp-client-preview';
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import {SPHttpClient,ISPHttpClientOptions,SPHttpClientResponse } from '@microsoft/sp-http';
|
||||
import { IPhotopileWebPartProps } from './IPhotopileWebPartProps';
|
||||
import { EnvironmentType } from '@microsoft/sp-client-base';
|
||||
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import MockHttpClient from './MockHttpClient';
|
||||
|
||||
/**
|
||||
|
|
@ -49,16 +50,16 @@ export class SPPicturesListService implements ISPPicturesListService {
|
|||
* Gets the list of picture libs in the current SharePoint site
|
||||
*/
|
||||
public getPictureLibs(): Promise<ISPLists> {
|
||||
if (this.context.environment.type === EnvironmentType.Local) {
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
//If the running environment is local, load the data from the mock
|
||||
return this.getPictureLibsFromMock();
|
||||
}
|
||||
else {
|
||||
//If the running environment is SharePoint, request the lists REST service
|
||||
//Gets only the list with BaseTemplate = 109 (picture libs)
|
||||
return this.context.httpClient.get(
|
||||
`${this.context.pageContext.web.absoluteUrl}/_api/lists?$select=Title,id,BaseTemplate&$filter=BaseTemplate%20eq%20109`)
|
||||
.then((response: Response) => {
|
||||
return this.context.spHttpClient.get(
|
||||
`${this.context.pageContext.web.absoluteUrl}/_api/lists?$select=Title,id,BaseTemplate&$filter=BaseTemplate%20eq%20109`,SPHttpClient.configurations.v1)
|
||||
.then((response: SPHttpClientResponse) => {
|
||||
return response.json();
|
||||
});
|
||||
}
|
||||
|
|
@ -88,7 +89,7 @@ export class SPPicturesListService implements ISPPicturesListService {
|
|||
* Gets the pictures from a SharePoint list
|
||||
*/
|
||||
public getPictures(libId: string): Promise<ISPListItems> {
|
||||
if (this.context.environment.type === EnvironmentType.Local) {
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
//If the running environment is local, load the data from the mock
|
||||
return this.getPicturesFromMock(libId);
|
||||
}
|
||||
|
|
@ -107,7 +108,7 @@ export class SPPicturesListService implements ISPPicturesListService {
|
|||
restUrl += this.props.count;
|
||||
|
||||
//Request the SharePoint web service
|
||||
return this.context.httpClient.get(restUrl).then((response: Response) => {
|
||||
return this.context.spHttpClient.get(restUrl,SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
|
||||
return response.json().then((responseFormated: any) => {
|
||||
var formatedResponse: ISPListItems = { value: []};
|
||||
//Fetchs the Json response to construct the final items list
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import * as React from 'react';
|
||||
import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
|
||||
import { IPhotopileWebPartProps } from '../IPhotopileWebPartProps';
|
||||
import { IWebPartContext } from '@microsoft/sp-client-preview';
|
||||
import { IWebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import * as strings from 'mystrings';
|
||||
import styles from '../PhotopileWebPart.module.scss';
|
||||
import { SPPicturesListService } from '../SPPicturesListService';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
/* tslint:disable */
|
||||
require('./photopile.css');
|
||||
|
||||
/* tslint:enable */
|
||||
|
|
@ -1,45 +1,45 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part en-us string ressources
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Customize the photopile web part settings",
|
||||
"ErrorSelectList": "Please edit the webpart and select a picture library. If the picture library dropdown list is empty, please create a new Picture Library in the current web site.",
|
||||
"ErrorNoItems": "No items found in the current library. Please insert inside or select another library.",
|
||||
"Loading": "Loading pictures...",
|
||||
"PictureLibraryGroupName": "Library",
|
||||
"ThumbnailsGroupName": "Thumbnails",
|
||||
"PhotoContainerGroupName": "Photo container",
|
||||
"AutoplayGroupName": "Autoplay",
|
||||
"PictureLibraryFieldLabel": "Pictures library",
|
||||
"OrderByFieldLabel": "Order by",
|
||||
"OrderByChoiceLabelId": "ID",
|
||||
"OrderByChoiceLabelTitle": "Title",
|
||||
"OrderByChoiceLabelCreated": "Created",
|
||||
"OrderByChoiceLabelModified": "Modified",
|
||||
"OrderByChoiceLabelImageWidth": "Image width",
|
||||
"OrderByChoiceLabelImageHeight": "Image height",
|
||||
"OrderByAscFieldLabel": "Arranged",
|
||||
"OrderByAscChoiceLabel": "Ascending",
|
||||
"OrderByDescChoiceLabel": "Descending",
|
||||
"PictureLibraryCountLabel": "Max count",
|
||||
"NumLayersFieldLabel": "Number of layers in the pile (max zindex)",
|
||||
"ThumbOverlabFieldLabel": "Overlap amount (px)",
|
||||
"ThumbRotationFieldLabel": "Maximum rotation (deg)",
|
||||
"ThumbBorderWidthFieldLabel": "Border width (px)",
|
||||
"ThumbBorderColorFieldLabel": "Border color",
|
||||
"ThumbBorderHoverFieldLabel": "Border hover color",
|
||||
"DraggableFieldLabel": "Enable draggable thumbnails",
|
||||
"FadeDurationFieldLabel": "Speed at which photo fades (ms)",
|
||||
"PickupDurationFieldLabel": "Speed at which photo is picked up & put down (ms)",
|
||||
"PhotoZIndexFieldLabel": "Z-Index (show above all)",
|
||||
"PhotoBorderFieldLabel": "Border width around fullsize image",
|
||||
"PhotoBorderColorFieldLabel": "Border color",
|
||||
"ShowInfoFieldLabel": "Include photo description in photo container",
|
||||
"AutoplayGalleryFieldLabel": "Autoplay the photopile",
|
||||
"AutoplaySpeedFieldLabel": "Autoplay speed (ms)"
|
||||
}
|
||||
/**
|
||||
* @file
|
||||
* Photopile Web Part en-us string ressources
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Customize the photopile web part settings",
|
||||
"ErrorSelectList": "Please edit the webpart and select a picture library. If the picture library dropdown list is empty, please create a new Picture Library in the current web site.",
|
||||
"ErrorNoItems": "No items found in the current library. Please insert inside or select another library.",
|
||||
"Loading": "Loading pictures...",
|
||||
"PictureLibraryGroupName": "Library",
|
||||
"ThumbnailsGroupName": "Thumbnails",
|
||||
"PhotoContainerGroupName": "Photo container",
|
||||
"AutoplayGroupName": "Autoplay",
|
||||
"PictureLibraryFieldLabel": "Pictures library",
|
||||
"OrderByFieldLabel": "Order by",
|
||||
"OrderByChoiceLabelId": "ID",
|
||||
"OrderByChoiceLabelTitle": "Title",
|
||||
"OrderByChoiceLabelCreated": "Created",
|
||||
"OrderByChoiceLabelModified": "Modified",
|
||||
"OrderByChoiceLabelImageWidth": "Image width",
|
||||
"OrderByChoiceLabelImageHeight": "Image height",
|
||||
"OrderByAscFieldLabel": "Arranged",
|
||||
"OrderByAscChoiceLabel": "Ascending",
|
||||
"OrderByDescChoiceLabel": "Descending",
|
||||
"PictureLibraryCountLabel": "Max count",
|
||||
"NumLayersFieldLabel": "Number of layers in the pile (max zindex)",
|
||||
"ThumbOverlabFieldLabel": "Overlap amount (px)",
|
||||
"ThumbRotationFieldLabel": "Maximum rotation (deg)",
|
||||
"ThumbBorderWidthFieldLabel": "Border width (px)",
|
||||
"ThumbBorderColorFieldLabel": "Border color",
|
||||
"ThumbBorderHoverFieldLabel": "Border hover color",
|
||||
"DraggableFieldLabel": "Enable draggable thumbnails",
|
||||
"FadeDurationFieldLabel": "Speed at which photo fades (ms)",
|
||||
"PickupDurationFieldLabel": "Speed at which photo is picked up & put down (ms)",
|
||||
"PhotoZIndexFieldLabel": "Z-Index (show above all)",
|
||||
"PhotoBorderFieldLabel": "Border width around fullsize image",
|
||||
"PhotoBorderColorFieldLabel": "Border color",
|
||||
"ShowInfoFieldLabel": "Include photo description in photo container",
|
||||
"AutoplayGalleryFieldLabel": "Autoplay the photopile",
|
||||
"AutoplaySpeedFieldLabel": "Autoplay speed (ms)"
|
||||
}
|
||||
});
|
||||
|
|
@ -1,59 +1,59 @@
|
|||
/**
|
||||
* @file
|
||||
* Photopile Web Part String ressources definitions
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
declare interface IStrings {
|
||||
//Generic labels
|
||||
PropertyPaneDescription: string;
|
||||
ErrorSelectList: string;
|
||||
ErrorNoItems: string;
|
||||
Loading: string;
|
||||
|
||||
//Web part properties group names
|
||||
PictureLibraryGroupName: string;
|
||||
ThumbnailsGroupName: string;
|
||||
PhotoContainerGroupName: string;
|
||||
AutoplayGroupName: string;
|
||||
|
||||
//Library labels
|
||||
PictureLibraryFieldLabel: string;
|
||||
OrderByFieldLabel: string;
|
||||
OrderByChoiceLabelId: string;
|
||||
OrderByChoiceLabelTitle: string;
|
||||
OrderByChoiceLabelCreated: string;
|
||||
OrderByChoiceLabelModified: string;
|
||||
OrderByChoiceLabelImageWidth: string;
|
||||
OrderByChoiceLabelImageHeight: string;
|
||||
OrderByAscFieldLabel: string;
|
||||
OrderByAscChoiceLabel: string;
|
||||
OrderByDescChoiceLabel: string;
|
||||
PictureLibraryCountLabel: string;
|
||||
|
||||
//Thumbnails accordion labels
|
||||
NumLayersFieldLabel: string;
|
||||
ThumbOverlabFieldLabel: string;
|
||||
ThumbRotationFieldLabel: string;
|
||||
ThumbBorderWidthFieldLabel: string;
|
||||
ThumbBorderColorFieldLabel: string;
|
||||
ThumbBorderHoverFieldLabel: string;
|
||||
DraggableFieldLabel: string;
|
||||
|
||||
//Photo container accordion labels
|
||||
FadeDurationFieldLabel: string;
|
||||
PickupDurationFieldLabel: string;
|
||||
PhotoZIndexFieldLabel: string;
|
||||
PhotoBorderFieldLabel: string;
|
||||
PhotoBorderColorFieldLabel: string;
|
||||
ShowInfoFieldLabel: string;
|
||||
|
||||
//Auoplay accordion labels
|
||||
AutoplayGalleryFieldLabel: string;
|
||||
AutoplaySpeedFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'mystrings' {
|
||||
const strings: IStrings;
|
||||
export = strings;
|
||||
}
|
||||
/**
|
||||
* @file
|
||||
* Photopile Web Part String ressources definitions
|
||||
*
|
||||
* Author: Olivier Carpentier
|
||||
*/
|
||||
declare interface IStrings {
|
||||
//Generic labels
|
||||
PropertyPaneDescription: string;
|
||||
ErrorSelectList: string;
|
||||
ErrorNoItems: string;
|
||||
Loading: string;
|
||||
|
||||
//Web part properties group names
|
||||
PictureLibraryGroupName: string;
|
||||
ThumbnailsGroupName: string;
|
||||
PhotoContainerGroupName: string;
|
||||
AutoplayGroupName: string;
|
||||
|
||||
//Library labels
|
||||
PictureLibraryFieldLabel: string;
|
||||
OrderByFieldLabel: string;
|
||||
OrderByChoiceLabelId: string;
|
||||
OrderByChoiceLabelTitle: string;
|
||||
OrderByChoiceLabelCreated: string;
|
||||
OrderByChoiceLabelModified: string;
|
||||
OrderByChoiceLabelImageWidth: string;
|
||||
OrderByChoiceLabelImageHeight: string;
|
||||
OrderByAscFieldLabel: string;
|
||||
OrderByAscChoiceLabel: string;
|
||||
OrderByDescChoiceLabel: string;
|
||||
PictureLibraryCountLabel: string;
|
||||
|
||||
//Thumbnails accordion labels
|
||||
NumLayersFieldLabel: string;
|
||||
ThumbOverlabFieldLabel: string;
|
||||
ThumbRotationFieldLabel: string;
|
||||
ThumbBorderWidthFieldLabel: string;
|
||||
ThumbBorderColorFieldLabel: string;
|
||||
ThumbBorderHoverFieldLabel: string;
|
||||
DraggableFieldLabel: string;
|
||||
|
||||
//Photo container accordion labels
|
||||
FadeDurationFieldLabel: string;
|
||||
PickupDurationFieldLabel: string;
|
||||
PhotoZIndexFieldLabel: string;
|
||||
PhotoBorderFieldLabel: string;
|
||||
PhotoBorderColorFieldLabel: string;
|
||||
ShowInfoFieldLabel: string;
|
||||
|
||||
//Auoplay accordion labels
|
||||
AutoplayGalleryFieldLabel: string;
|
||||
AutoplaySpeedFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'mystrings' {
|
||||
const strings: IStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import * as assert from 'assert';
|
||||
|
||||
describe('PhotopileWebPartWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('PhotopileWebPartWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,631 @@
|
|||
[
|
||||
{
|
||||
"id": "af59c2b3-2da7-41fd-8b72-3939817960af",
|
||||
"alias": "SPClientBase",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-client-base",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-client-base/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-client-base": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-client-base.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||
"alias": "SPLodashSubset",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-lodash-subset",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-lodash-subset/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-lodash-subset": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-lodash-subset.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"alias": "SPCoreLibrary",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-core-library",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-core-library/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-core-library": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-core-library.js"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
|
||||
"alias": "SPLoader",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-loader",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-loader/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-loader": {
|
||||
"type": "localizedPath",
|
||||
"paths": {},
|
||||
"defaultPath": "dist/sp-loader_en-us.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f97266fb-ccb7-430e-9384-4124d05295d3",
|
||||
"alias": "Decorators",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "decorators",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/decorators/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"decorators": {
|
||||
"type": "path",
|
||||
"path": "dist/decorators.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "02a01e42-69ab-403d-8a16-acd128661f8e",
|
||||
"alias": "OfficeUIFabricReact",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.1",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "office-ui-fabric-react.bundle",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/office-ui-fabric-react-bundle/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"office-ui-fabric-react.bundle": {
|
||||
"type": "path",
|
||||
"path": "dist/office-ui-fabric-react.bundle.js"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||
"alias": "SPComponentBase",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-component-base",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-component-base/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-component-base": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-component-base.js"
|
||||
},
|
||||
"@microsoft/decorators": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "f97266fb-ccb7-430e-9384-4124d05295d3"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
|
||||
"alias": "SPHttp",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-http",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-http/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-http": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-http.js"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/decorators": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "f97266fb-ccb7-430e-9384-4124d05295d3"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a"
|
||||
},
|
||||
"@ms/sp-telemetry": {
|
||||
"type": "component",
|
||||
"version": "0.2.1",
|
||||
"id": "8217e442-8ed3-41fd-957d-b112e841286a"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
|
||||
"alias": "SPPageContext",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-page-context",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-page-context/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-page-context": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-page-context.js"
|
||||
},
|
||||
"@ms/sp-telemetry": {
|
||||
"type": "component",
|
||||
"version": "0.2.1",
|
||||
"id": "8217e442-8ed3-41fd-957d-b112e841286a"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"alias": "SPWebPartBase",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-webpart-base",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-webpart-base/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-webpart-base": {
|
||||
"type": "localizedPath",
|
||||
"paths": {},
|
||||
"defaultPath": "dist/sp-webpart-base_en-us.js"
|
||||
},
|
||||
"@microsoft/decorators": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "f97266fb-ccb7-430e-9384-4124d05295d3"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a"
|
||||
},
|
||||
"@ms/sp-telemetry": {
|
||||
"type": "component",
|
||||
"version": "0.2.1",
|
||||
"id": "8217e442-8ed3-41fd-957d-b112e841286a"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/sp-loader": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
},
|
||||
"@microsoft/sp-page-context": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "02a01e42-69ab-403d-8a16-acd128661f8e"
|
||||
},
|
||||
"@microsoft/sp-client-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "af59c2b3-2da7-41fd-8b72-3939817960af"
|
||||
},
|
||||
"@microsoft/sp-component-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4d5eb168-6729-49a8-aec7-0e397f486b6e",
|
||||
"alias": "SPClientPreview",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-client-preview",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-client-preview/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-client-preview": {
|
||||
"type": "localizedPath",
|
||||
"paths": {},
|
||||
"defaultPath": "dist/sp-client-preview_en-us.js"
|
||||
},
|
||||
"@ms/sp-telemetry": {
|
||||
"type": "component",
|
||||
"version": "0.2.1",
|
||||
"id": "8217e442-8ed3-41fd-957d-b112e841286a"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/sp-page-context": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "02a01e42-69ab-403d-8a16-acd128661f8e"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a"
|
||||
},
|
||||
"@microsoft/sp-client-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "af59c2b3-2da7-41fd-8b72-3939817960af"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
},
|
||||
"@microsoft/sp-loader": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4df9bb86-ab0a-4aab-ab5f-48bf167048fb",
|
||||
"alias": "SPApplicationBase",
|
||||
"componentType": "Library",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-application-base",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-application-base/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-application-base": {
|
||||
"type": "path",
|
||||
"path": "dist/sp-application-base.js"
|
||||
},
|
||||
"@ms/sp-telemetry": {
|
||||
"type": "component",
|
||||
"version": "0.2.1",
|
||||
"id": "8217e442-8ed3-41fd-957d-b112e841286a"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/sp-page-context": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
},
|
||||
"@microsoft/sp-loader": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f"
|
||||
},
|
||||
"@ms/odsp-utilities-bundle": {
|
||||
"type": "component",
|
||||
"version": "1.0.2",
|
||||
"id": "cc2cc925-b5be-41bb-880a-f0f8030c6aff"
|
||||
},
|
||||
"@microsoft/sp-client-preview": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "4d5eb168-6729-49a8-aec7-0e397f486b6e"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "8be81a5c-af38-4bb2-af97-afa3b64dfbed",
|
||||
"alias": "WebPartWorkbench",
|
||||
"componentType": "Application",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"title": {
|
||||
"default": "WebpartWorkbench"
|
||||
},
|
||||
"description": {
|
||||
"default": "WebpartWorkbench"
|
||||
},
|
||||
"preloadComponents": [
|
||||
"8217e442-8ed3-41fd-957d-b112e841286a",
|
||||
"4df9bb86-ab0a-4aab-ab5f-48bf167048fb"
|
||||
],
|
||||
"preloadOptions": {
|
||||
"shouldPreloadWeb": true,
|
||||
"shouldPreloadUser": true,
|
||||
"shouldPreloadList": false,
|
||||
"shouldPreloadItem": true,
|
||||
"shouldPreloadQuickLaunch": true
|
||||
},
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "sp-webpart-workbench",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/node_modules/@microsoft/sp-webpart-workbench/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"sp-webpart-workbench": {
|
||||
"type": "localizedPath",
|
||||
"paths": {},
|
||||
"defaultPath": "dist/sp-webpart-workbench_en-us.js"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "15.4.2",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
},
|
||||
"@microsoft/sp-application-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "4df9bb86-ab0a-4aab-ab5f-48bf167048fb"
|
||||
},
|
||||
"@microsoft/sp-loader": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "1c6c9123-7aac-41f3-a376-3caea41ed83f"
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "02a01e42-69ab-403d-8a16-acd128661f8e"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"@microsoft/sp-client-preview": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "4d5eb168-6729-49a8-aec7-0e397f486b6e"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"alias": "PhotopileWebPartWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "fd5fa211-ef67-4b5b-9f0d-6117a93e44af",
|
||||
"group": {
|
||||
"default": "Default"
|
||||
},
|
||||
"title": {
|
||||
"default": "Photopile"
|
||||
},
|
||||
"description": {
|
||||
"default": "PhotopileWebPart description"
|
||||
},
|
||||
"officeFabricIconFontName": "PhotoCollection",
|
||||
"properties": {
|
||||
"listName": "",
|
||||
"orderBy": "ID",
|
||||
"orderByAsc": "asc",
|
||||
"count": 100,
|
||||
"numLayers": 5,
|
||||
"thumbOverlap": 50,
|
||||
"thumbRotation": 45,
|
||||
"thumbBorderWidth": 2,
|
||||
"thumbBorderColor": "white",
|
||||
"thumbBorderHover": "#EAEAEA",
|
||||
"draggable": true,
|
||||
"fadeDuration": 200,
|
||||
"pickupDuration": 500,
|
||||
"photoZIndex": 100,
|
||||
"photoBorder": 10,
|
||||
"photoBorderColor": "white",
|
||||
"showInfo": true,
|
||||
"autoplayGallery": false,
|
||||
"autoplaySpeed": 5000
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"entryModuleId": "photopile-web-part.bundle",
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/"
|
||||
],
|
||||
"scriptResources": {
|
||||
"photopile-web-part.bundle": {
|
||||
"type": "path",
|
||||
"path": "dist/photopile-web-part.bundle.js"
|
||||
},
|
||||
"photopileModule": {
|
||||
"type": "path",
|
||||
"path": "src/webparts/photopileWebPart/js/photopile.js",
|
||||
"globalDependencies": [
|
||||
"jquery",
|
||||
"jqueryui"
|
||||
],
|
||||
"globalName": "photopileModule"
|
||||
},
|
||||
"jquery": {
|
||||
"type": "path",
|
||||
"path": "node_modules/jquery/dist/jquery.js",
|
||||
"globalName": "$"
|
||||
},
|
||||
"jqueryui": {
|
||||
"type": "path",
|
||||
"path": "node_modules/jqueryui/jquery-ui.js",
|
||||
"globalDependencies": [
|
||||
"jquery"
|
||||
],
|
||||
"globalName": "jqueryui"
|
||||
},
|
||||
"mystrings": {
|
||||
"defaultPath": "lib/webparts/photopileWebPart/loc/en-us.js",
|
||||
"type": "localizedPath"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"version": "0.14.8",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"failoverPath": "node_modules/react/dist/react.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"version": "0.14.8",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"failoverPath": "node_modules/react-dom/dist/react-dom.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"version": "1.0.0",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"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-unused-imports": 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
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>SharePoint Web Part Workbench</title>
|
||||
|
||||
<link rel="shortcut icon" href="https://localhost:4321/node_modules/@microsoft/sp-webpart-workbench/dist/assets/server-icon.png" />
|
||||
|
||||
<script type="text/javascript" src="https://localhost:4321/temp/manifests.js"></script>
|
||||
<script type="text/javascript" src="https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js"></script>
|
||||
<script type="text/javascript" src="https://localhost:4321/node_modules/@microsoft/sp-webpart-workbench/lib/api/workbenchInit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.spModuleLoader.start(window.preloadedData);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true
|
||||
}
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
// Type definitions for Microsoft ODSP projects
|
||||
// Project: ODSP
|
||||
|
||||
/// <reference path="odsp-webpack.d.ts" />
|
||||
|
||||
/* Global definition for DEBUG builds */
|
||||
declare const DEBUG: boolean;
|
||||
|
||||
/* Global definition for UNIT_TEST builds */
|
||||
// Type definitions for Microsoft ODSP projects
|
||||
// Project: ODSP
|
||||
|
||||
/* Global definition for UNIT_TEST builds
|
||||
Code that is wrapped inside an if(UNIT_TEST) {...}
|
||||
block will not be included in the final bundle when the
|
||||
--ship flag is specified */
|
||||
declare const UNIT_TEST: boolean;
|
||||
|
|
@ -1,19 +1 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
/// <reference path="@ms/odsp-webpack.d.ts" />
|
||||
/// <reference path="assertion-error/assertion-error.d.ts" />
|
||||
/// <reference path="chai/chai.d.ts" />
|
||||
/// <reference path="es6-collections/es6-collections.d.ts" />
|
||||
/// <reference path="es6-promise/es6-promise.d.ts" />
|
||||
/// <reference path="lodash/lodash.d.ts" />
|
||||
/// <reference path="mocha/mocha.d.ts" />
|
||||
/// <reference path="node/node.d.ts" />
|
||||
/// <reference path="react/react.d.ts" />
|
||||
/// <reference path="react/react-addons-shallow-compare.d.ts" />
|
||||
/// <reference path="react/react-addons-test-utils.d.ts" />
|
||||
/// <reference path="react/react-addons-update.d.ts" />
|
||||
/// <reference path="react/react-dom.d.ts" />
|
||||
/// <reference path="systemjs/systemjs.d.ts" />
|
||||
/// <reference path="whatwg-fetch/whatwg-fetch.d.ts" />
|
||||
/// <reference path="knockout/knockout.d.ts" />
|
||||
/// <reference path="jquery/jquery.d.ts" />
|
||||
/// <reference path="jqueryui/jqueryui.d.ts" />
|
||||
/// <reference path="@ms/odsp.d.ts" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue