office-ui-fabric-rails 2.6.1.0 → 3.0.0.0.beta1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/bower.json +3 -3
- data/lib/office-ui-fabric-rails/version.rb +2 -2
- data/vendor/assets/css/fabric.components.css +1545 -2504
- data/vendor/assets/css/fabric.components.min.css +2 -2
- data/vendor/assets/css/fabric.components.rtl.css +1499 -2425
- data/vendor/assets/css/fabric.components.rtl.min.css +2 -2
- data/vendor/assets/css/fabric.css +57 -802
- data/vendor/assets/css/fabric.min.css +2 -2
- data/vendor/assets/css/fabric.rtl.css +496 -800
- data/vendor/assets/css/fabric.rtl.min.css +2 -2
- data/vendor/assets/js/fabric.js +5177 -0
- data/vendor/assets/js/fabric.min.js +4 -0
- data/vendor/assets/js/fabric.templates.js +1942 -0
- data/vendor/assets/js/fabric.templates.ts +1832 -0
- data/vendor/assets/scss/Fabric.Components.scss +6 -3
- data/vendor/assets/scss/Fabric.Icons.Output.scss +6 -0
- data/vendor/assets/scss/Fabric.RTL.scss +0 -3
- data/vendor/assets/scss/Fabric.Typography.Fonts.Extended.Output.scss +67 -0
- data/vendor/assets/scss/Fabric.Typography.Fonts.Output.scss +0 -63
- data/vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss +32 -35
- data/vendor/assets/scss/Fabric.Typography.Output.scss +1 -1
- data/vendor/assets/scss/Fabric.scss +0 -4
- data/vendor/assets/scss/_Fabric.Common.scss +0 -1
- data/vendor/assets/scss/_Fabric.Icons.scss +6 -0
- data/vendor/assets/scss/_Fabric.Mixins.RTL.scss +13 -3
- data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +19 -22
- data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +10 -78
- data/vendor/assets/scss/_Fabric.Typography.Variables.scss +6 -4
- data/vendor/assets/scss/_Fabric.Typography.scss +26 -37
- data/vendor/assets/scss/_Fabric.Utilities.scss +0 -1
- metadata +9 -7
- data/vendor/assets/js/jquery.fabric.js +0 -2451
- data/vendor/assets/js/jquery.fabric.min.js +0 -2
- data/vendor/assets/scss/_Office.Color.Variables.scss +0 -34
@@ -5,11 +5,13 @@
|
|
5
5
|
// --------------------------------------------------
|
6
6
|
// Fabric Core Typography variables
|
7
7
|
|
8
|
+
$ms-font-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
|
9
|
+
$ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base;
|
8
10
|
|
9
|
-
$ms-font-
|
10
|
-
$ms-font-
|
11
|
-
$ms-font-
|
12
|
-
$ms-font-
|
11
|
+
$ms-font-weight-light: 100;
|
12
|
+
$ms-font-weight-regular: 400;
|
13
|
+
$ms-font-weight-semilight: 300;
|
14
|
+
$ms-font-weight-semibold: 600;
|
13
15
|
|
14
16
|
|
15
17
|
//== Type sizes
|
@@ -7,94 +7,83 @@
|
|
7
7
|
@import 'Fabric.Typography.Variables';
|
8
8
|
|
9
9
|
// Super Styles (LIMITED USE)
|
10
|
-
// Weights: Light
|
11
10
|
@mixin ms-font-su {
|
12
11
|
color: $ms-color-neutralPrimary;
|
13
|
-
font-family: $ms-font-family-
|
12
|
+
font-family: $ms-font-family-base;
|
14
13
|
font-size: $ms-font-size-su;
|
15
|
-
font-weight:
|
14
|
+
font-weight: $ms-font-weight-light;
|
16
15
|
}
|
17
|
-
// No touch class for Super
|
18
16
|
|
19
17
|
// Extra-Extra-Large
|
20
|
-
// Allowed weights: Light, SemiLight
|
21
18
|
@mixin ms-font-xxl {
|
22
19
|
color: $ms-color-neutralPrimary;
|
23
|
-
font-family: $ms-font-family-
|
20
|
+
font-family: $ms-font-family-base;
|
24
21
|
font-size: $ms-font-size-xxl;
|
25
|
-
font-weight:
|
22
|
+
font-weight: $ms-font-weight-light;
|
26
23
|
}
|
27
24
|
|
28
25
|
// Extra-Large Styles
|
29
|
-
// Allowed weights: Light, SemiLight
|
30
26
|
@mixin ms-font-xl {
|
31
27
|
color: $ms-color-neutralPrimary;
|
32
|
-
font-family: $ms-font-family-
|
28
|
+
font-family: $ms-font-family-base;
|
33
29
|
font-size: $ms-font-size-xl;
|
34
|
-
font-weight:
|
30
|
+
font-weight: $ms-font-weight-light;
|
35
31
|
}
|
36
32
|
|
37
33
|
// Large Styles
|
38
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
39
34
|
@mixin ms-font-l {
|
40
35
|
color: $ms-color-neutralPrimary;
|
41
|
-
font-family: $ms-font-family-
|
36
|
+
font-family: $ms-font-family-base;
|
42
37
|
font-size: $ms-font-size-l;
|
43
|
-
font-weight:
|
38
|
+
font-weight: $ms-font-weight-semilight;
|
44
39
|
}
|
45
40
|
|
46
41
|
// Medium Plus Styles
|
47
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
48
42
|
@mixin ms-font-m-plus {
|
49
43
|
color: $ms-color-neutralPrimary;
|
50
|
-
font-family: $ms-font-family-
|
44
|
+
font-family: $ms-font-family-base;
|
51
45
|
font-size: $ms-font-size-m-plus;
|
52
|
-
font-weight:
|
46
|
+
font-weight: $ms-font-weight-regular;
|
53
47
|
}
|
54
48
|
|
55
49
|
// Medium Styles
|
56
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
57
50
|
@mixin ms-font-m {
|
58
51
|
color: $ms-color-neutralPrimary;
|
59
|
-
font-family: $ms-font-family-
|
52
|
+
font-family: $ms-font-family-base;
|
60
53
|
font-size: $ms-font-size-m;
|
61
|
-
font-weight:
|
54
|
+
font-weight: $ms-font-weight-regular;
|
62
55
|
}
|
63
56
|
|
64
57
|
// Small Plus Styles
|
65
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
66
58
|
@mixin ms-font-s-plus {
|
67
59
|
color: $ms-color-neutralPrimary;
|
68
|
-
font-family: $ms-font-family-
|
60
|
+
font-family: $ms-font-family-base;
|
69
61
|
font-size: $ms-font-size-s-plus;
|
70
|
-
font-weight:
|
62
|
+
font-weight: $ms-font-weight-regular;
|
71
63
|
}
|
72
64
|
|
73
65
|
// Small Styles
|
74
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
75
66
|
@mixin ms-font-s {
|
76
67
|
color: $ms-color-neutralPrimary;
|
77
|
-
font-family: $ms-font-family-
|
68
|
+
font-family: $ms-font-family-base;
|
78
69
|
font-size: $ms-font-size-s;
|
79
|
-
font-weight:
|
70
|
+
font-weight: $ms-font-weight-regular;
|
80
71
|
}
|
81
72
|
|
82
73
|
// XS Styles
|
83
|
-
// Allowed weights: SemiLight, Regular, Semibold
|
84
74
|
@mixin ms-font-xs {
|
85
75
|
color: $ms-color-neutralPrimary;
|
86
|
-
|
76
|
+
font-family: $ms-font-family-base;
|
87
77
|
font-size: $ms-font-size-xs;
|
88
|
-
font-weight:
|
78
|
+
font-weight: $ms-font-weight-regular;
|
89
79
|
}
|
90
80
|
|
91
81
|
// Micro Styles (LIMITED USE)
|
92
|
-
// Weights: Semibold
|
93
82
|
@mixin ms-font-mi {
|
94
83
|
color: $ms-color-neutralPrimary;
|
95
|
-
font-family: $ms-font-family-
|
84
|
+
font-family: $ms-font-family-base;
|
96
85
|
font-size: $ms-font-size-mi;
|
97
|
-
font-weight:
|
86
|
+
font-weight: $ms-font-weight-semibold;
|
98
87
|
}
|
99
88
|
|
100
89
|
//== Helper classes & mixins
|
@@ -102,20 +91,20 @@
|
|
102
91
|
// Helper mixins to override default type values
|
103
92
|
|
104
93
|
// Font weights
|
105
|
-
@mixin ms-fontWeight-light{
|
106
|
-
font-
|
94
|
+
@mixin ms-fontWeight-light {
|
95
|
+
font-weight: $ms-font-weight-light;
|
107
96
|
}
|
108
97
|
|
109
|
-
@mixin ms-fontWeight-semilight{
|
110
|
-
font-
|
98
|
+
@mixin ms-fontWeight-semilight {
|
99
|
+
font-weight: $ms-font-weight-semilight;
|
111
100
|
}
|
112
101
|
|
113
102
|
@mixin ms-fontWeight-regular {
|
114
|
-
font-
|
103
|
+
font-weight: $ms-font-weight-regular;
|
115
104
|
}
|
116
105
|
|
117
106
|
@mixin ms-fontWeight-semibold {
|
118
|
-
font-
|
107
|
+
font-weight: $ms-font-weight-semibold;
|
119
108
|
}
|
120
109
|
|
121
110
|
// Font sizes
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: office-ui-fabric-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 3.0.0.0.beta1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Craig Plummer
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-
|
11
|
+
date: 2016-06-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|
@@ -109,8 +109,10 @@ files:
|
|
109
109
|
- vendor/assets/css/fabric.min.css
|
110
110
|
- vendor/assets/css/fabric.rtl.css
|
111
111
|
- vendor/assets/css/fabric.rtl.min.css
|
112
|
-
- vendor/assets/js/
|
113
|
-
- vendor/assets/js/
|
112
|
+
- vendor/assets/js/fabric.js
|
113
|
+
- vendor/assets/js/fabric.min.js
|
114
|
+
- vendor/assets/js/fabric.templates.js
|
115
|
+
- vendor/assets/js/fabric.templates.ts
|
114
116
|
- vendor/assets/scss/Fabric.Animations.Output.scss
|
115
117
|
- vendor/assets/scss/Fabric.Animations.RTL.Output.scss
|
116
118
|
- vendor/assets/scss/Fabric.Color.Mixins.Output.scss
|
@@ -121,6 +123,7 @@ files:
|
|
121
123
|
- vendor/assets/scss/Fabric.Icons.RTL.Output.scss
|
122
124
|
- vendor/assets/scss/Fabric.RTL.scss
|
123
125
|
- vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss
|
126
|
+
- vendor/assets/scss/Fabric.Typography.Fonts.Extended.Output.scss
|
124
127
|
- vendor/assets/scss/Fabric.Typography.Fonts.Output.scss
|
125
128
|
- vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss
|
126
129
|
- vendor/assets/scss/Fabric.Typography.Output.scss
|
@@ -143,7 +146,6 @@ files:
|
|
143
146
|
- vendor/assets/scss/_Fabric.Typography.scss
|
144
147
|
- vendor/assets/scss/_Fabric.Utilities.scss
|
145
148
|
- vendor/assets/scss/_Fabric.ZIndex.Variables.scss
|
146
|
-
- vendor/assets/scss/_Office.Color.Variables.scss
|
147
149
|
homepage: https://github.com/craigplummer/office-ui-fabric-rails
|
148
150
|
licenses:
|
149
151
|
- MIT
|
@@ -160,9 +162,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
160
162
|
version: '0'
|
161
163
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
162
164
|
requirements:
|
163
|
-
- - "
|
165
|
+
- - ">"
|
164
166
|
- !ruby/object:Gem::Version
|
165
|
-
version:
|
167
|
+
version: 1.3.1
|
166
168
|
requirements: []
|
167
169
|
rubyforge_project:
|
168
170
|
rubygems_version: 2.5.1
|
@@ -1,2451 +0,0 @@
|
|
1
|
-
//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
3
|
-
|
4
|
-
/**
|
5
|
-
* Breadcrumb component
|
6
|
-
*
|
7
|
-
* Shows the user's current location in a hierarchy and provides a means of navigating upward.
|
8
|
-
*
|
9
|
-
*/
|
10
|
-
|
11
|
-
/**
|
12
|
-
* @namespace fabric
|
13
|
-
*/
|
14
|
-
var fabric = fabric || {};
|
15
|
-
/**
|
16
|
-
*
|
17
|
-
* @param {HTMLElement} container - the target container for an instance of Breadcrumb
|
18
|
-
* @constructor
|
19
|
-
*
|
20
|
-
* If dynamically populating a list run the constructor after the list has been populated
|
21
|
-
* in the DOM.
|
22
|
-
*/
|
23
|
-
fabric.Breadcrumb = function(container) {
|
24
|
-
this.breadcrumb = container;
|
25
|
-
this.breadcrumbList = container.querySelector('.ms-Breadcrumb-list');
|
26
|
-
this.listItems = container.querySelectorAll('.ms-Breadcrumb-listItem');
|
27
|
-
this.contextMenu = container.querySelector('.ms-ContextualMenu');
|
28
|
-
this.overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton');
|
29
|
-
this.overflowMenu = container.querySelector('.ms-Breadcrumb-overflowMenu');
|
30
|
-
this.itemCollection = [];
|
31
|
-
this.currentMaxItems = 0;
|
32
|
-
this.init();
|
33
|
-
|
34
|
-
};
|
35
|
-
|
36
|
-
fabric.Breadcrumb.prototype = (function() {
|
37
|
-
|
38
|
-
//medium breakpoint
|
39
|
-
var MEDIUM = 639;
|
40
|
-
|
41
|
-
/**
|
42
|
-
* initializes component
|
43
|
-
*/
|
44
|
-
var init = function() {
|
45
|
-
_setListeners.call(this);
|
46
|
-
_createItemCollection.call(this);
|
47
|
-
_onResize.call(this, null);
|
48
|
-
};
|
49
|
-
|
50
|
-
/**
|
51
|
-
* Adds a breadcrumb item to a breadcrumb
|
52
|
-
* @param itemLabel {String} the item's text label
|
53
|
-
* @param itemLink {String} the item's href link
|
54
|
-
* @param tabIndex {number} the item's tabIndex
|
55
|
-
*/
|
56
|
-
var addItem = function(itemLabel, itemLink, tabIndex) {
|
57
|
-
this.itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex});
|
58
|
-
_updateBreadcrumbs.call(this);
|
59
|
-
};
|
60
|
-
|
61
|
-
/**
|
62
|
-
* Removes a breadcrumb item by item label in the breadcrumbs list
|
63
|
-
* @param itemLabel {String} the item's text label
|
64
|
-
*/
|
65
|
-
var removeItemByLabel = function(itemLabel) {
|
66
|
-
var i = this.itemCollection.length;
|
67
|
-
while (i--) {
|
68
|
-
if (this.itemCollection[i].text === itemLabel) {
|
69
|
-
this.itemCollection.splice(i, 1);
|
70
|
-
}
|
71
|
-
}
|
72
|
-
_updateBreadcrumbs.call(this);
|
73
|
-
};
|
74
|
-
|
75
|
-
/**
|
76
|
-
* removes a breadcrumb item by position in the breadcrumbs list
|
77
|
-
* index starts at 0
|
78
|
-
* @param itemLabel {String} the item's text label
|
79
|
-
* @param itemLink {String} the item's href link
|
80
|
-
* @param tabIndex {number} the item's tabIndex
|
81
|
-
*/
|
82
|
-
var removeItemByPosition = function(value) {
|
83
|
-
this.itemCollection.splice(value, 1);
|
84
|
-
_updateBreadcrumbs.call(this);
|
85
|
-
};
|
86
|
-
|
87
|
-
/**
|
88
|
-
* create internal model of list items from DOM
|
89
|
-
*/
|
90
|
-
var _createItemCollection = function() {
|
91
|
-
var length = this.listItems.length;
|
92
|
-
var i = 0;
|
93
|
-
var item;
|
94
|
-
var text;
|
95
|
-
var link;
|
96
|
-
var tabIndex;
|
97
|
-
|
98
|
-
for (i; i < length; i++) {
|
99
|
-
item = this.listItems[i].querySelector('.ms-Breadcrumb-itemLink');
|
100
|
-
text = item.textContent;
|
101
|
-
link = item.getAttribute('href');
|
102
|
-
tabIndex = parseInt(item.getAttribute('tabindex'), 10);
|
103
|
-
this.itemCollection.push({text: text, link: link, tabIndex: tabIndex});
|
104
|
-
}
|
105
|
-
};
|
106
|
-
|
107
|
-
/**
|
108
|
-
* Re-render lists on resize
|
109
|
-
*
|
110
|
-
*/
|
111
|
-
var _onResize = function() {
|
112
|
-
_closeOverflow.call(this, null);
|
113
|
-
_renderListOnResize.call(this);
|
114
|
-
};
|
115
|
-
|
116
|
-
/**
|
117
|
-
* render breadcrumbs and overflow menus on resize
|
118
|
-
*/
|
119
|
-
var _renderListOnResize = function() {
|
120
|
-
var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
|
121
|
-
if (maxItems !== this.currentMaxItems) {
|
122
|
-
_updateBreadcrumbs.call(this);
|
123
|
-
}
|
124
|
-
|
125
|
-
this.currentMaxItems = maxItems;
|
126
|
-
};
|
127
|
-
|
128
|
-
/**
|
129
|
-
* creates the overflow menu
|
130
|
-
*/
|
131
|
-
var _addItemsToOverflow = function(maxItems) {
|
132
|
-
_resetList.call(this, this.contextMenu);
|
133
|
-
var end = this.itemCollection.length - maxItems;
|
134
|
-
var overflowItems = this.itemCollection.slice(0, end);
|
135
|
-
var contextMenu = this.contextMenu;
|
136
|
-
overflowItems.forEach(function(item) {
|
137
|
-
var li = document.createElement('li');
|
138
|
-
li.className = 'ms-ContextualMenu-item';
|
139
|
-
if(!isNaN(item.tabIndex)) {
|
140
|
-
li.setAttribute('tabindex', item.tabIndex);
|
141
|
-
}
|
142
|
-
var a = document.createElement('a');
|
143
|
-
a.className = 'ms-ContextualMenu-link';
|
144
|
-
if (item.link !== null) {
|
145
|
-
a.setAttribute('href', item.link);
|
146
|
-
}
|
147
|
-
a.textContent = item.text;
|
148
|
-
li.appendChild(a);
|
149
|
-
contextMenu.appendChild(li);
|
150
|
-
});
|
151
|
-
};
|
152
|
-
|
153
|
-
/**
|
154
|
-
* creates the breadcrumbs
|
155
|
-
*/
|
156
|
-
var _addBreadcrumbItems = function(maxItems) {
|
157
|
-
_resetList.call(this, this.breadcrumbList);
|
158
|
-
var i = this.itemCollection.length - maxItems;
|
159
|
-
i = i < 0 ? 0 : i;
|
160
|
-
if (i >= 0) {
|
161
|
-
for (i; i < this.itemCollection.length; i++) {
|
162
|
-
var listItem = document.createElement('li');
|
163
|
-
var item = this.itemCollection[i];
|
164
|
-
var a = document.createElement('a');
|
165
|
-
var chevron = document.createElement('i');
|
166
|
-
listItem.className = 'ms-Breadcrumb-listItem';
|
167
|
-
a.className = 'ms-Breadcrumb-itemLink';
|
168
|
-
if (item.link !== null) {
|
169
|
-
a.setAttribute('href', item.link);
|
170
|
-
}
|
171
|
-
if (!isNaN(item.tabIndex)) {
|
172
|
-
a.setAttribute('tabindex', item.tabIndex);
|
173
|
-
}
|
174
|
-
a.textContent = item.text;
|
175
|
-
chevron.className = 'ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight';
|
176
|
-
listItem.appendChild(a);
|
177
|
-
listItem.appendChild(chevron);
|
178
|
-
this.breadcrumbList.appendChild(listItem);
|
179
|
-
}
|
180
|
-
}
|
181
|
-
};
|
182
|
-
|
183
|
-
/**
|
184
|
-
* resets a list by removing its children
|
185
|
-
*/
|
186
|
-
var _resetList = function(list) {
|
187
|
-
while (list.firstChild) {
|
188
|
-
list.removeChild(list.firstChild);
|
189
|
-
}
|
190
|
-
};
|
191
|
-
|
192
|
-
/**
|
193
|
-
* opens the overflow menu
|
194
|
-
*/
|
195
|
-
var _openOverflow = function(event) {
|
196
|
-
if (this.overflowMenu.className.indexOf(' is-open') === -1) {
|
197
|
-
this.overflowMenu.className += ' is-open';
|
198
|
-
removeOutlinesOnClick.call(this, event);
|
199
|
-
// force focus rect onto overflow button
|
200
|
-
this.overflowButton.focus();
|
201
|
-
}
|
202
|
-
};
|
203
|
-
|
204
|
-
var _overflowKeyPress = function(event) {
|
205
|
-
if (event.keyCode === 13) {
|
206
|
-
_openOverflow.call(this, event);
|
207
|
-
}
|
208
|
-
};
|
209
|
-
|
210
|
-
/**
|
211
|
-
* closes the overflow menu
|
212
|
-
*/
|
213
|
-
var _closeOverflow = function(event) {
|
214
|
-
if (!event || event.target !== this.overflowButton) {
|
215
|
-
_removeClass.call(this, this.overflowMenu, ' is-open');
|
216
|
-
}
|
217
|
-
};
|
218
|
-
|
219
|
-
/**
|
220
|
-
* utility that removes a class from an element
|
221
|
-
*/
|
222
|
-
var _removeClass = function (element, value) {
|
223
|
-
var index = element.className.indexOf(value);
|
224
|
-
if (index > -1) {
|
225
|
-
element.className = element.className.substring(0, index);
|
226
|
-
}
|
227
|
-
};
|
228
|
-
|
229
|
-
/**
|
230
|
-
* sets handlers for resize and button click events
|
231
|
-
*/
|
232
|
-
var _setListeners = function() {
|
233
|
-
window.addEventListener('resize', _onResize.bind(this), false);
|
234
|
-
document.addEventListener('click', _closeOverflow.bind(this), false);
|
235
|
-
this.overflowButton.addEventListener('click', _openOverflow.bind(this), false);
|
236
|
-
this.overflowButton.addEventListener('keypress', _overflowKeyPress.bind(this), false);
|
237
|
-
this.breadcrumbList.addEventListener('click', removeOutlinesOnClick.bind(this), false);
|
238
|
-
};
|
239
|
-
|
240
|
-
/**
|
241
|
-
* removes focus outlines so they don't linger after click
|
242
|
-
*/
|
243
|
-
var removeOutlinesOnClick = function(event) {
|
244
|
-
event.target.blur();
|
245
|
-
};
|
246
|
-
|
247
|
-
/**
|
248
|
-
* updates the breadcrumbs and overflow menu
|
249
|
-
*/
|
250
|
-
var _updateBreadcrumbs = function() {
|
251
|
-
var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
|
252
|
-
if (this.itemCollection.length > maxItems) {
|
253
|
-
this.breadcrumb.className += ' is-overflow';
|
254
|
-
} else {
|
255
|
-
_removeClass.call(this, this.breadcrumb, ' is-overflow');
|
256
|
-
}
|
257
|
-
|
258
|
-
_addBreadcrumbItems.call(this, maxItems);
|
259
|
-
_addItemsToOverflow.call(this, maxItems);
|
260
|
-
};
|
261
|
-
|
262
|
-
return {
|
263
|
-
init: init,
|
264
|
-
addItem: addItem,
|
265
|
-
removeItemByLabel: removeItemByLabel,
|
266
|
-
removeItemByPosition: removeItemByPosition
|
267
|
-
};
|
268
|
-
|
269
|
-
}());
|
270
|
-
|
271
|
-
|
272
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
273
|
-
|
274
|
-
/**
|
275
|
-
* Command Bar Plugin
|
276
|
-
*/
|
277
|
-
|
278
|
-
(function ($) {
|
279
|
-
$.fn.CommandBar = function () {
|
280
|
-
|
281
|
-
var createMenuItem = function(text) {
|
282
|
-
var item = '<li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link"" href="#">';
|
283
|
-
item += text;
|
284
|
-
item += '</a></li>';
|
285
|
-
|
286
|
-
return item;
|
287
|
-
};
|
288
|
-
|
289
|
-
var saveCommands = function($commands, $commandWidth, $commandarea) {
|
290
|
-
var commands = [];
|
291
|
-
$commands.each(function() {
|
292
|
-
var $Item = $(this);
|
293
|
-
var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
|
294
|
-
commands.push({ jquery: $Item, rightOffset: $rightOffset});
|
295
|
-
});
|
296
|
-
|
297
|
-
return commands;
|
298
|
-
};
|
299
|
-
|
300
|
-
var processCommands = function(commands, width, overflowwidth) {
|
301
|
-
var overFlowCommands = [];
|
302
|
-
|
303
|
-
for(var i=0; i < commands.length; i++) {
|
304
|
-
var $Item = commands[i].jquery;
|
305
|
-
var rightOffset = commands[i].rightOffset;
|
306
|
-
|
307
|
-
// If the command is outside the right boundaries add to overflow items
|
308
|
-
if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
|
309
|
-
if((rightOffset + overflowwidth) > width) {
|
310
|
-
overFlowCommands.push($Item);
|
311
|
-
} else {
|
312
|
-
// Make sure item is displayed
|
313
|
-
$Item.removeClass('is-hidden');
|
314
|
-
}
|
315
|
-
}
|
316
|
-
}
|
317
|
-
return overFlowCommands;
|
318
|
-
};
|
319
|
-
|
320
|
-
var processOverflow = function(overFlowCommands, $oCommand, $menu) {
|
321
|
-
var overflowStrings = '';
|
322
|
-
|
323
|
-
if(overFlowCommands.length > 0) {
|
324
|
-
$oCommand.addClass("is-visible");
|
325
|
-
// Empty menu
|
326
|
-
$menu.html('');
|
327
|
-
|
328
|
-
// Add overflowed commands to ContextualMenu
|
329
|
-
for(var i = 0; i < overFlowCommands.length; i++) {
|
330
|
-
var $Item = $(overFlowCommands[i]);
|
331
|
-
// Hide Element in CommandBar
|
332
|
-
$Item.addClass('is-hidden');
|
333
|
-
var commandBarItemText = $Item.find('.ms-CommandBarItem-commandText').text();
|
334
|
-
overflowStrings += createMenuItem(commandBarItemText);
|
335
|
-
}
|
336
|
-
$menu.html(overflowStrings);
|
337
|
-
} else {
|
338
|
-
$oCommand.removeClass("is-visible");
|
339
|
-
}
|
340
|
-
};
|
341
|
-
|
342
|
-
/** Go through each CommandBar we've been given. */
|
343
|
-
return this.each(function () {
|
344
|
-
var $CommandBar = $(this);
|
345
|
-
var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
|
346
|
-
var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
|
347
|
-
var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
|
348
|
-
var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
|
349
|
-
var $OverflowMenu = $CommandBar.find('.ms-CommandBar-overflowMenu');
|
350
|
-
var $SearchBox = $CommandBar.find('.ms-CommandBarSearch');
|
351
|
-
var mobileSwitch = false;
|
352
|
-
var overFlowCommands;
|
353
|
-
var allCommands;
|
354
|
-
|
355
|
-
// Go through process and save commands
|
356
|
-
allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
|
357
|
-
|
358
|
-
// Initiate process commands and add commands to overflow on load
|
359
|
-
overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
|
360
|
-
processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
|
361
|
-
|
362
|
-
// Set Search Behavior
|
363
|
-
if($(window).width() < 640) {
|
364
|
-
|
365
|
-
$('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
|
366
|
-
$(this).closest('.ms-CommandBarSearch').addClass('is-active');
|
367
|
-
});
|
368
|
-
|
369
|
-
}
|
370
|
-
|
371
|
-
// Add resize event handler on commandBar
|
372
|
-
$(window).resize(function() {
|
373
|
-
var overFlowCommands;
|
374
|
-
|
375
|
-
if($(window).width() < 640 && mobileSwitch === false) {
|
376
|
-
// Go through process and save commands
|
377
|
-
allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
|
378
|
-
|
379
|
-
mobileSwitch = true;
|
380
|
-
|
381
|
-
// Search Behavior
|
382
|
-
$('.ms-CommandBarSearch-iconSearchWrapper').unbind();
|
383
|
-
$('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
|
384
|
-
$(this).closest('.ms-CommandBarSearch').addClass('is-active');
|
385
|
-
});
|
386
|
-
|
387
|
-
} else if($(window).width() > 639 && mobileSwitch === true) {
|
388
|
-
// Go through process and save commands
|
389
|
-
allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
|
390
|
-
|
391
|
-
mobileSwitch = false;
|
392
|
-
$('.ms-CommandBarSearch').unbind();
|
393
|
-
|
394
|
-
}
|
395
|
-
|
396
|
-
// Initiate process commands and add commands to overflow on load
|
397
|
-
overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
|
398
|
-
processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
|
399
|
-
|
400
|
-
});
|
401
|
-
|
402
|
-
// Hook up contextual menu
|
403
|
-
$OverflowCommand.click(function() {
|
404
|
-
$OverflowMenu.toggleClass('is-open');
|
405
|
-
});
|
406
|
-
|
407
|
-
$OverflowCommand.focusout(function() {
|
408
|
-
$OverflowMenu.removeClass('is-open');
|
409
|
-
});
|
410
|
-
|
411
|
-
$SearchBox.find('.ms-CommandBarSearch-input').click(function() {
|
412
|
-
$(this).closest('.ms-CommandBarSearch').addClass('is-active');
|
413
|
-
});
|
414
|
-
|
415
|
-
$SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
|
416
|
-
$(this).closest('.ms-CommandBarSearch').addClass('is-active');
|
417
|
-
});
|
418
|
-
|
419
|
-
// When clicking the x clear the SearchBox and put state back to normal
|
420
|
-
$SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {
|
421
|
-
var $input = $(this).parent().find('.ms-CommandBarSearch-input');
|
422
|
-
$input.val('');
|
423
|
-
$input.parent().removeClass('is-active');
|
424
|
-
});
|
425
|
-
|
426
|
-
$SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() {
|
427
|
-
var $input = $(this);
|
428
|
-
$input.val('');
|
429
|
-
$input.parent().removeClass('is-active');
|
430
|
-
});
|
431
|
-
|
432
|
-
});
|
433
|
-
};
|
434
|
-
})(jQuery);
|
435
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
436
|
-
|
437
|
-
/**
|
438
|
-
* Contextual Menu Plugin
|
439
|
-
*/
|
440
|
-
(function ($) {
|
441
|
-
$.fn.ContextualMenu = function () {
|
442
|
-
|
443
|
-
/** Go through each nav bar we've been given. */
|
444
|
-
return this.each(function () {
|
445
|
-
|
446
|
-
var $contextualMenu = $(this);
|
447
|
-
|
448
|
-
|
449
|
-
// Set selected states.
|
450
|
-
$contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) {
|
451
|
-
event.preventDefault();
|
452
|
-
|
453
|
-
// Check if multiselect - set selected states
|
454
|
-
if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) {
|
455
|
-
|
456
|
-
// If already selected, remove selection; if not, add selection
|
457
|
-
if ( $(this).hasClass('is-selected') ) {
|
458
|
-
$(this).removeClass('is-selected');
|
459
|
-
}
|
460
|
-
else {
|
461
|
-
$(this).addClass('is-selected');
|
462
|
-
}
|
463
|
-
|
464
|
-
}
|
465
|
-
// All other contextual menu variants
|
466
|
-
else {
|
467
|
-
|
468
|
-
// Deselect all of the items and close any menus.
|
469
|
-
$('.ms-ContextualMenu-link')
|
470
|
-
.removeClass('is-selected')
|
471
|
-
.siblings('.ms-ContextualMenu')
|
472
|
-
.removeClass('is-open');
|
473
|
-
|
474
|
-
// Select this item.
|
475
|
-
$(this).addClass('is-selected');
|
476
|
-
|
477
|
-
// If this item has a menu, open it.
|
478
|
-
if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) {
|
479
|
-
$(this).siblings('.ms-ContextualMenu:first').addClass('is-open');
|
480
|
-
|
481
|
-
// Open the menu without bubbling up the click event,
|
482
|
-
// which can cause the menu to close.
|
483
|
-
event.stopPropagation();
|
484
|
-
}
|
485
|
-
|
486
|
-
}
|
487
|
-
|
488
|
-
|
489
|
-
});
|
490
|
-
|
491
|
-
});
|
492
|
-
};
|
493
|
-
})(jQuery);
|
494
|
-
|
495
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
496
|
-
|
497
|
-
(function ($) {
|
498
|
-
|
499
|
-
/**
|
500
|
-
* DatePicker Plugin
|
501
|
-
*/
|
502
|
-
|
503
|
-
$.fn.DatePicker = function (options) {
|
504
|
-
|
505
|
-
return this.each(function () {
|
506
|
-
|
507
|
-
/** Set up variables and run the Pickadate plugin. */
|
508
|
-
var $datePicker = $(this);
|
509
|
-
var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({
|
510
|
-
// Strings and translations.
|
511
|
-
weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
512
|
-
|
513
|
-
// Don't render the buttons
|
514
|
-
today: '',
|
515
|
-
clear: '',
|
516
|
-
close: '',
|
517
|
-
|
518
|
-
// Events
|
519
|
-
onStart: function() {
|
520
|
-
initCustomView($datePicker);
|
521
|
-
},
|
522
|
-
|
523
|
-
// Classes
|
524
|
-
klass: {
|
525
|
-
|
526
|
-
// The element states
|
527
|
-
input: 'ms-DatePicker-input',
|
528
|
-
active: 'ms-DatePicker-input--active',
|
529
|
-
|
530
|
-
// The root picker and states
|
531
|
-
picker: 'ms-DatePicker-picker',
|
532
|
-
opened: 'ms-DatePicker-picker--opened',
|
533
|
-
focused: 'ms-DatePicker-picker--focused',
|
534
|
-
|
535
|
-
// The picker holder
|
536
|
-
holder: 'ms-DatePicker-holder',
|
537
|
-
|
538
|
-
// The picker frame, wrapper, and box
|
539
|
-
frame: 'ms-DatePicker-frame',
|
540
|
-
wrap: 'ms-DatePicker-wrap',
|
541
|
-
box: 'ms-DatePicker-dayPicker',
|
542
|
-
|
543
|
-
// The picker header
|
544
|
-
header: 'ms-DatePicker-header',
|
545
|
-
|
546
|
-
// Month & year labels
|
547
|
-
month: 'ms-DatePicker-month',
|
548
|
-
year: 'ms-DatePicker-year',
|
549
|
-
|
550
|
-
// Table of dates
|
551
|
-
table: 'ms-DatePicker-table',
|
552
|
-
|
553
|
-
// Weekday labels
|
554
|
-
weekdays: 'ms-DatePicker-weekday',
|
555
|
-
|
556
|
-
// Day states
|
557
|
-
day: 'ms-DatePicker-day',
|
558
|
-
disabled: 'ms-DatePicker-day--disabled',
|
559
|
-
selected: 'ms-DatePicker-day--selected',
|
560
|
-
highlighted: 'ms-DatePicker-day--highlighted',
|
561
|
-
now: 'ms-DatePicker-day--today',
|
562
|
-
infocus: 'ms-DatePicker-day--infocus',
|
563
|
-
outfocus: 'ms-DatePicker-day--outfocus',
|
564
|
-
|
565
|
-
}
|
566
|
-
},options||{}));
|
567
|
-
var $picker = $dateField.pickadate('picker');
|
568
|
-
|
569
|
-
/** Respond to built-in picker events. */
|
570
|
-
$picker.on({
|
571
|
-
render: function() {
|
572
|
-
updateCustomView($datePicker);
|
573
|
-
},
|
574
|
-
open: function() {
|
575
|
-
scrollUp($datePicker);
|
576
|
-
}
|
577
|
-
});
|
578
|
-
|
579
|
-
});
|
580
|
-
};
|
581
|
-
|
582
|
-
/**
|
583
|
-
* After the Pickadate plugin starts, this function
|
584
|
-
* adds additional controls to the picker view.
|
585
|
-
*/
|
586
|
-
function initCustomView($datePicker) {
|
587
|
-
|
588
|
-
/** Get some variables ready. */
|
589
|
-
var $monthControls = $datePicker.find('.ms-DatePicker-monthComponents');
|
590
|
-
var $goToday = $datePicker.find('.ms-DatePicker-goToday');
|
591
|
-
var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
|
592
|
-
var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker');
|
593
|
-
var $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap');
|
594
|
-
var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker');
|
595
|
-
|
596
|
-
/** Move the month picker into position. */
|
597
|
-
$monthControls.appendTo($pickerWrapper);
|
598
|
-
$goToday.appendTo($pickerWrapper);
|
599
|
-
$monthPicker.appendTo($pickerWrapper);
|
600
|
-
$yearPicker.appendTo($pickerWrapper);
|
601
|
-
|
602
|
-
/** Update the custom view. */
|
603
|
-
updateCustomView($datePicker);
|
604
|
-
|
605
|
-
/** Move back one month. */
|
606
|
-
$monthControls.on('click', '.js-prevMonth', function(event) {
|
607
|
-
event.preventDefault();
|
608
|
-
var newMonth = $picker.get('highlight').month - 1;
|
609
|
-
changeHighlightedDate($picker, null, newMonth, null);
|
610
|
-
});
|
611
|
-
|
612
|
-
/** Move ahead one month. */
|
613
|
-
$monthControls.on('click', '.js-nextMonth', function(event) {
|
614
|
-
event.preventDefault();
|
615
|
-
var newMonth = $picker.get('highlight').month + 1;
|
616
|
-
changeHighlightedDate($picker, null, newMonth, null);
|
617
|
-
});
|
618
|
-
|
619
|
-
/** Move back one year. */
|
620
|
-
$monthPicker.on('click', '.js-prevYear', function(event) {
|
621
|
-
event.preventDefault();
|
622
|
-
var newYear = $picker.get('highlight').year - 1;
|
623
|
-
changeHighlightedDate($picker, newYear, null, null);
|
624
|
-
});
|
625
|
-
|
626
|
-
/** Move ahead one year. */
|
627
|
-
$monthPicker.on('click', '.js-nextYear', function(event) {
|
628
|
-
event.preventDefault();
|
629
|
-
var newYear = $picker.get('highlight').year + 1;
|
630
|
-
changeHighlightedDate($picker, newYear, null, null);
|
631
|
-
});
|
632
|
-
|
633
|
-
/** Move back one decade. */
|
634
|
-
$yearPicker.on('click', '.js-prevDecade', function(event) {
|
635
|
-
event.preventDefault();
|
636
|
-
var newYear = $picker.get('highlight').year - 10;
|
637
|
-
changeHighlightedDate($picker, newYear, null, null);
|
638
|
-
});
|
639
|
-
|
640
|
-
/** Move ahead one decade. */
|
641
|
-
$yearPicker.on('click', '.js-nextDecade', function(event) {
|
642
|
-
event.preventDefault();
|
643
|
-
var newYear = $picker.get('highlight').year + 10;
|
644
|
-
changeHighlightedDate($picker, newYear, null, null);
|
645
|
-
});
|
646
|
-
|
647
|
-
/** Go to the current date, shown in the day picking view. */
|
648
|
-
$goToday.click(function(event) {
|
649
|
-
event.preventDefault();
|
650
|
-
|
651
|
-
/** Select the current date, while keeping the picker open. */
|
652
|
-
var now = new Date();
|
653
|
-
$picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]);
|
654
|
-
|
655
|
-
/** Switch to the default (calendar) view. */
|
656
|
-
$datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears');
|
657
|
-
|
658
|
-
});
|
659
|
-
|
660
|
-
/** Change the highlighted month. */
|
661
|
-
$monthPicker.on('click', '.js-changeDate', function(event) {
|
662
|
-
event.preventDefault();
|
663
|
-
|
664
|
-
/** Get the requested date from the data attributes. */
|
665
|
-
var newYear = $(this).attr('data-year');
|
666
|
-
var newMonth = $(this).attr('data-month');
|
667
|
-
var newDay = $(this).attr('data-day');
|
668
|
-
|
669
|
-
/** Update the date. */
|
670
|
-
changeHighlightedDate($picker, newYear, newMonth, newDay);
|
671
|
-
|
672
|
-
/** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */
|
673
|
-
if ($datePicker.hasClass('is-pickingMonths')) {
|
674
|
-
$datePicker.removeClass('is-pickingMonths');
|
675
|
-
}
|
676
|
-
});
|
677
|
-
|
678
|
-
/** Change the highlighted year. */
|
679
|
-
$yearPicker.on('click', '.js-changeDate', function(event) {
|
680
|
-
event.preventDefault();
|
681
|
-
|
682
|
-
/** Get the requested date from the data attributes. */
|
683
|
-
var newYear = $(this).attr('data-year');
|
684
|
-
var newMonth = $(this).attr('data-month');
|
685
|
-
var newDay = $(this).attr('data-day');
|
686
|
-
|
687
|
-
/** Update the date. */
|
688
|
-
changeHighlightedDate($picker, newYear, newMonth, newDay);
|
689
|
-
|
690
|
-
/** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */
|
691
|
-
if ($datePicker.hasClass('is-pickingYears')) {
|
692
|
-
$datePicker.removeClass('is-pickingYears');
|
693
|
-
}
|
694
|
-
});
|
695
|
-
|
696
|
-
/** Switch to the default state. */
|
697
|
-
$monthPicker.on('click', '.js-showDayPicker', function() {
|
698
|
-
$datePicker.removeClass('is-pickingMonths');
|
699
|
-
$datePicker.removeClass('is-pickingYears');
|
700
|
-
});
|
701
|
-
|
702
|
-
/** Switch to the is-pickingMonths state. */
|
703
|
-
$monthControls.on('click', '.js-showMonthPicker', function() {
|
704
|
-
$datePicker.toggleClass('is-pickingMonths');
|
705
|
-
});
|
706
|
-
|
707
|
-
/** Switch to the is-pickingYears state. */
|
708
|
-
$monthPicker.on('click', '.js-showYearPicker', function() {
|
709
|
-
$datePicker.toggleClass('is-pickingYears');
|
710
|
-
});
|
711
|
-
|
712
|
-
}
|
713
|
-
|
714
|
-
/** Change the highlighted date. */
|
715
|
-
function changeHighlightedDate($picker, newYear, newMonth, newDay) {
|
716
|
-
|
717
|
-
/** All letiables are optional. If not provided, default to the current value. */
|
718
|
-
if (typeof newYear === "undefined" || newYear === null) {
|
719
|
-
newYear = $picker.get("highlight").year;
|
720
|
-
}
|
721
|
-
if (typeof newMonth === "undefined" || newMonth === null) {
|
722
|
-
newMonth = $picker.get("highlight").month;
|
723
|
-
}
|
724
|
-
if (typeof newDay === "undefined" || newDay === null) {
|
725
|
-
newDay = $picker.get("highlight").date;
|
726
|
-
}
|
727
|
-
|
728
|
-
/** Update it. */
|
729
|
-
$picker.set('highlight', [newYear, newMonth, newDay]);
|
730
|
-
|
731
|
-
}
|
732
|
-
|
733
|
-
|
734
|
-
/** Whenever the picker renders, do our own rendering on the custom controls. */
|
735
|
-
function updateCustomView($datePicker) {
|
736
|
-
|
737
|
-
/** Get some variables ready. */
|
738
|
-
var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
|
739
|
-
var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker');
|
740
|
-
var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker');
|
741
|
-
|
742
|
-
/** Set the correct year. */
|
743
|
-
$monthPicker.find('.ms-DatePicker-currentYear').text($picker.get('view').year);
|
744
|
-
|
745
|
-
/** Highlight the current month. */
|
746
|
-
$monthPicker.find('.ms-DatePicker-monthOption').removeClass('is-highlighted');
|
747
|
-
$monthPicker.find('.ms-DatePicker-monthOption[data-month="' + $picker.get('highlight').month + '"]').addClass('is-highlighted');
|
748
|
-
|
749
|
-
/** Generate the grid of years for the year picker view. */
|
750
|
-
|
751
|
-
// Start by removing any existing generated output. */
|
752
|
-
$yearPicker.find('.ms-DatePicker-currentDecade').remove();
|
753
|
-
$yearPicker.find('.ms-DatePicker-optionGrid').remove();
|
754
|
-
|
755
|
-
// Generate the output by going through the years.
|
756
|
-
var startingYear = $picker.get('highlight').year - 11;
|
757
|
-
var decadeText = startingYear + " - " + (startingYear + 11);
|
758
|
-
var output = '<div class="ms-DatePicker-currentDecade">' + decadeText + '</div>';
|
759
|
-
output += '<div class="ms-DatePicker-optionGrid">';
|
760
|
-
for (var year = startingYear; year < (startingYear + 12); year++) {
|
761
|
-
output += '<span class="ms-DatePicker-yearOption js-changeDate" data-year="' + year + '">' + year +'</span>';
|
762
|
-
}
|
763
|
-
output += '</div>';
|
764
|
-
|
765
|
-
// Output the title and grid of years generated above.
|
766
|
-
$yearPicker.append(output);
|
767
|
-
|
768
|
-
/** Highlight the current year. */
|
769
|
-
$yearPicker.find('.ms-DatePicker-yearOption').removeClass('is-highlighted');
|
770
|
-
$yearPicker.find('.ms-DatePicker-yearOption[data-year="' + $picker.get('highlight').year + '"]').addClass('is-highlighted');
|
771
|
-
}
|
772
|
-
|
773
|
-
/** Scroll the page up so that the field the date picker is attached to is at the top. */
|
774
|
-
function scrollUp($datePicker) {
|
775
|
-
$('html, body').animate({
|
776
|
-
scrollTop: $datePicker.offset().top
|
777
|
-
}, 367);
|
778
|
-
}
|
779
|
-
|
780
|
-
})(jQuery);
|
781
|
-
|
782
|
-
!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a('<input type=hidden name="'+b+'"'+(u.data("value")||f.value?' value="'+w.get("select",s.formatSubmit)+'"':"")+">")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('<div style="visibility:hidden;width:100px" />').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('<div style="width:100%" />').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+"</"+b+">"):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;d<c.pick?e=!0:d>c.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.month<k.month||c.month>k.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pick<c.item.min.pick||a.pick>c.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;g<e.length;g+=1)if(d.isDateExact(a,e[g])){c=!0;break}c||(f.isInteger(a)||f.isDate(a)||b.isArray(a)||b.isPlainObject(a)&&a.from&&a.to)&&e.push(a)}),e},c.prototype.activate=function(a,c){var d=this,e=d.item.disable,g=e.length;return"flip"==c?d.flipEnable():c===!0?(d.flipEnable(1),e=[]):c===!1?(d.flipEnable(-1),e=[]):c.map(function(a){var c,h,i,j;for(i=0;g>i;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&a<m.month||k.year==n.year&&a>n.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pick<m.pick||a.pick>n.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)});
|
783
|
-
|
784
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
785
|
-
|
786
|
-
/**
|
787
|
-
* Dialog Plugin
|
788
|
-
*
|
789
|
-
* Adds basic demonstration functionality to .ms-Dialog components.
|
790
|
-
*
|
791
|
-
* @param {jQuery Object} One or more .ms-Dialog components
|
792
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
793
|
-
*/
|
794
|
-
(function ($) {
|
795
|
-
$.fn.Dialog = function () {
|
796
|
-
|
797
|
-
/** Iterate through the sample buttons, which can be used to open the Dialogs. */
|
798
|
-
$(".js-DialogAction--open").each(function () {
|
799
|
-
/** Open the associated dialog on click. */
|
800
|
-
$(this).on('click', function () {
|
801
|
-
var target = $(this).data("target");
|
802
|
-
$(target).show();
|
803
|
-
});
|
804
|
-
});
|
805
|
-
|
806
|
-
|
807
|
-
return this.each(function () {
|
808
|
-
var dialog = this;
|
809
|
-
|
810
|
-
/** Have the dialogs hidden for their initial state */
|
811
|
-
$(dialog).hide();
|
812
|
-
|
813
|
-
/** Have the close buttons close the Dialog. */
|
814
|
-
$(dialog).find(".js-DialogAction--close").each(function() {
|
815
|
-
$(this).on('click', function () {
|
816
|
-
$(dialog).hide();
|
817
|
-
});
|
818
|
-
});
|
819
|
-
|
820
|
-
/** Have the action buttons close the Dialog, though you would usually do some specific action per button. */
|
821
|
-
$(dialog).find(".ms-Dialog-action").on('click', function () {
|
822
|
-
$(dialog).hide();
|
823
|
-
});
|
824
|
-
|
825
|
-
});
|
826
|
-
};
|
827
|
-
})(jQuery);
|
828
|
-
|
829
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
830
|
-
|
831
|
-
/**
|
832
|
-
* Dropdown Plugin
|
833
|
-
*
|
834
|
-
* Given .ms-Dropdown containers with generic <select> elements inside, this plugin hides the original
|
835
|
-
* dropdown and creates a new "fake" dropdown that can more easily be styled across browsers.
|
836
|
-
*
|
837
|
-
* @param {jQuery Object} One or more .ms-Dropdown containers, each with a dropdown (.ms-Dropdown-select)
|
838
|
-
* @return {jQuery Object} The same containers (allows for chaining)
|
839
|
-
*/
|
840
|
-
(function ($) {
|
841
|
-
$.fn.Dropdown = function () {
|
842
|
-
|
843
|
-
/** Go through each dropdown we've been given. */
|
844
|
-
return this.each(function () {
|
845
|
-
|
846
|
-
var $dropdownWrapper = $(this),
|
847
|
-
$originalDropdown = $dropdownWrapper.children('.ms-Dropdown-select'),
|
848
|
-
$originalDropdownOptions = $originalDropdown.children('option'),
|
849
|
-
newDropdownTitle = '',
|
850
|
-
newDropdownItems = '',
|
851
|
-
newDropdownSource = '';
|
852
|
-
|
853
|
-
/** Go through the options to fill up newDropdownTitle and newDropdownItems. */
|
854
|
-
$originalDropdownOptions.each(function (index, option) {
|
855
|
-
|
856
|
-
/** If the option is selected, it should be the new dropdown's title. */
|
857
|
-
if (option.selected) {
|
858
|
-
newDropdownTitle = option.text;
|
859
|
-
}
|
860
|
-
|
861
|
-
/** Add this option to the list of items. */
|
862
|
-
newDropdownItems += '<li class="ms-Dropdown-item' + ( (option.disabled) ? ' is-disabled"' : '"' ) + '>' + option.text + '</li>';
|
863
|
-
|
864
|
-
});
|
865
|
-
|
866
|
-
/** Insert the replacement dropdown. */
|
867
|
-
newDropdownSource = '<span class="ms-Dropdown-title">' + newDropdownTitle + '</span><ul class="ms-Dropdown-items">' + newDropdownItems + '</ul>';
|
868
|
-
$dropdownWrapper.append(newDropdownSource);
|
869
|
-
|
870
|
-
function _openDropdown(evt) {
|
871
|
-
if (!$dropdownWrapper.hasClass('is-disabled')) {
|
872
|
-
|
873
|
-
/** First, let's close any open dropdowns on this page. */
|
874
|
-
$dropdownWrapper.find('.is-open').removeClass('is-open');
|
875
|
-
|
876
|
-
/** Stop the click event from propagating, which would just close the dropdown immediately. */
|
877
|
-
evt.stopPropagation();
|
878
|
-
|
879
|
-
/** Before opening, size the items list to match the dropdown. */
|
880
|
-
var dropdownWidth = $(this).parents(".ms-Dropdown").width();
|
881
|
-
$(this).next(".ms-Dropdown-items").css('width', dropdownWidth + 'px');
|
882
|
-
|
883
|
-
/** Go ahead and open that dropdown. */
|
884
|
-
$dropdownWrapper.toggleClass('is-open');
|
885
|
-
$('.ms-Dropdown').each(function(){
|
886
|
-
if ($(this)[0] !== $dropdownWrapper[0]) {
|
887
|
-
$(this).removeClass('is-open');
|
888
|
-
}
|
889
|
-
});
|
890
|
-
|
891
|
-
/** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */
|
892
|
-
$(document).bind("click.dropdown", function() {
|
893
|
-
$dropdownWrapper.removeClass('is-open');
|
894
|
-
$(document).unbind('click.dropdown');
|
895
|
-
});
|
896
|
-
}
|
897
|
-
}
|
898
|
-
|
899
|
-
/** Toggle open/closed state of the dropdown when clicking its title. */
|
900
|
-
$dropdownWrapper.on('click', '.ms-Dropdown-title', function(event) {
|
901
|
-
_openDropdown(event);
|
902
|
-
});
|
903
|
-
|
904
|
-
/** Keyboard accessibility */
|
905
|
-
$dropdownWrapper.on('keyup', function(event) {
|
906
|
-
var keyCode = event.keyCode || event.which;
|
907
|
-
// Open dropdown on enter or arrow up or arrow down and focus on first option
|
908
|
-
if (!$(this).hasClass('is-open')) {
|
909
|
-
if (keyCode === 13 || keyCode === 38 || keyCode === 40) {
|
910
|
-
_openDropdown(event);
|
911
|
-
if (!$(this).find('.ms-Dropdown-item').hasClass('is-selected')) {
|
912
|
-
$(this).find('.ms-Dropdown-item:first').addClass('is-selected');
|
913
|
-
}
|
914
|
-
}
|
915
|
-
}
|
916
|
-
else if ($(this).hasClass('is-open')) {
|
917
|
-
// Up arrow focuses previous option
|
918
|
-
if (keyCode === 38) {
|
919
|
-
if ($(this).find('.ms-Dropdown-item.is-selected').prev().siblings().size() > 0) {
|
920
|
-
$(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').prev().addClass('is-selected');
|
921
|
-
}
|
922
|
-
}
|
923
|
-
// Down arrow focuses next option
|
924
|
-
if (keyCode === 40) {
|
925
|
-
if ($(this).find('.ms-Dropdown-item.is-selected').next().siblings().size() > 0) {
|
926
|
-
$(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').next().addClass('is-selected');
|
927
|
-
}
|
928
|
-
}
|
929
|
-
// Enter to select item
|
930
|
-
if (keyCode === 13) {
|
931
|
-
if (!$dropdownWrapper.hasClass('is-disabled')) {
|
932
|
-
|
933
|
-
// Item text
|
934
|
-
var selectedItemText = $(this).find('.ms-Dropdown-item.is-selected').text();
|
935
|
-
|
936
|
-
$(this).find('.ms-Dropdown-title').html(selectedItemText);
|
937
|
-
|
938
|
-
/** Update the original dropdown. */
|
939
|
-
$originalDropdown.find("option").each(function(key, value) {
|
940
|
-
if (value.text === selectedItemText) {
|
941
|
-
$(this).prop('selected', true);
|
942
|
-
} else {
|
943
|
-
$(this).prop('selected', false);
|
944
|
-
}
|
945
|
-
});
|
946
|
-
$originalDropdown.change();
|
947
|
-
|
948
|
-
$(this).removeClass('is-open');
|
949
|
-
}
|
950
|
-
}
|
951
|
-
}
|
952
|
-
|
953
|
-
// Close dropdown on esc
|
954
|
-
if (keyCode === 27) {
|
955
|
-
$(this).removeClass('is-open');
|
956
|
-
}
|
957
|
-
});
|
958
|
-
|
959
|
-
/** Select an option from the dropdown. */
|
960
|
-
$dropdownWrapper.on('click', '.ms-Dropdown-item', function () {
|
961
|
-
if (!$dropdownWrapper.hasClass('is-disabled') && !$(this).hasClass('is-disabled')) {
|
962
|
-
|
963
|
-
/** Deselect all items and select this one. */
|
964
|
-
$(this).siblings('.ms-Dropdown-item').removeClass('is-selected');
|
965
|
-
$(this).addClass('is-selected');
|
966
|
-
|
967
|
-
/** Update the replacement dropdown's title. */
|
968
|
-
$(this).parents().siblings('.ms-Dropdown-title').html($(this).text());
|
969
|
-
|
970
|
-
/** Update the original dropdown. */
|
971
|
-
var selectedItemText = $(this).text();
|
972
|
-
$originalDropdown.find("option").each(function(key, value) {
|
973
|
-
if (value.text === selectedItemText) {
|
974
|
-
$(this).prop('selected', true);
|
975
|
-
} else {
|
976
|
-
$(this).prop('selected', false);
|
977
|
-
}
|
978
|
-
});
|
979
|
-
$originalDropdown.change();
|
980
|
-
}
|
981
|
-
});
|
982
|
-
|
983
|
-
});
|
984
|
-
};
|
985
|
-
})(jQuery);
|
986
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
987
|
-
|
988
|
-
/**
|
989
|
-
* Facepile Plugin
|
990
|
-
*
|
991
|
-
* Adds basic demonstration functionality to .ms-Facepile components.
|
992
|
-
*
|
993
|
-
* @param {jQuery Object} One or more .ms-Facepile components
|
994
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
995
|
-
*/
|
996
|
-
(function ($) {
|
997
|
-
$.fn.Facepile = function () {
|
998
|
-
|
999
|
-
/** Iterate through each Facepile provided. */
|
1000
|
-
return this.each(function () {
|
1001
|
-
$('.ms-PeoplePicker').PeoplePicker();
|
1002
|
-
$('.ms-Panel').Panel();
|
1003
|
-
|
1004
|
-
var $Facepile = $(this);
|
1005
|
-
var $membersList = $(".ms-Facepile-members");
|
1006
|
-
var $membersCount = $(".ms-Facepile-members > .ms-Facepile-itemBtn").length;
|
1007
|
-
var $panel = $('.ms-Facepile-panel.ms-Panel');
|
1008
|
-
var $panelMain = $panel.find(".ms-Panel-main");
|
1009
|
-
var $picker = $('.ms-PeoplePicker.ms-PeoplePicker--Facepile');
|
1010
|
-
var $pickerMembers = $picker.find('.ms-PeoplePicker-selectedPeople');
|
1011
|
-
var $personaCard = $('.ms-Facepile').find('.ms-PersonaCard');
|
1012
|
-
|
1013
|
-
|
1014
|
-
/** Increment member count and show/hide overflow text */
|
1015
|
-
var incrementMembers = function() {
|
1016
|
-
/** Increment person count by one */
|
1017
|
-
$membersCount += 1;
|
1018
|
-
|
1019
|
-
/** Display a maxiumum of 5 people */
|
1020
|
-
$(".ms-Facepile-members").children(":gt(4)").hide();
|
1021
|
-
|
1022
|
-
/** Display counter after 5 people are present */
|
1023
|
-
if ($membersCount > 5) {
|
1024
|
-
$(".ms-Facepile-itemBtn--overflow").addClass("is-active");
|
1025
|
-
|
1026
|
-
var remainingMembers = $membersCount - 5;
|
1027
|
-
$(".ms-Facepile-overflowText").text("+" + remainingMembers);
|
1028
|
-
}
|
1029
|
-
};
|
1030
|
-
|
1031
|
-
/** Open panel with people picker */
|
1032
|
-
$Facepile.on("click", ".js-addPerson", function() {
|
1033
|
-
$panelMain.css({display: "block"});
|
1034
|
-
$panel.toggleClass("is-open")
|
1035
|
-
.addClass("ms-Panel-animateIn")
|
1036
|
-
.removeClass('ms-Facepile-panel--overflow ms-Panel--right')
|
1037
|
-
.addClass('ms-Facepile-panel--addPerson');
|
1038
|
-
|
1039
|
-
/** Close any open persona cards */
|
1040
|
-
$personaCard.removeClass('is-active').hide();
|
1041
|
-
});
|
1042
|
-
|
1043
|
-
$panel.on("click", ".js-togglePanel", function() {
|
1044
|
-
$panel.toggleClass("is-open")
|
1045
|
-
.addClass("ms-Panel-animateIn");
|
1046
|
-
});
|
1047
|
-
|
1048
|
-
/** Open oveflow panel with list of members */
|
1049
|
-
$Facepile.on("click", ".js-overflowPanel", function() {
|
1050
|
-
$panelMain.css({display: "block"});
|
1051
|
-
$panel.toggleClass("is-open")
|
1052
|
-
.addClass("ms-Panel-animateIn")
|
1053
|
-
.removeClass('ms-Facepile-panel--addPerson')
|
1054
|
-
.addClass('ms-Facepile-panel--overflow ms-Panel--right');
|
1055
|
-
});
|
1056
|
-
|
1057
|
-
/** Display person count on page load */
|
1058
|
-
$(document).ready(function() {
|
1059
|
-
$(".ms-Facepile-overflowText").text("+" + $membersCount);
|
1060
|
-
});
|
1061
|
-
|
1062
|
-
/** Show selected members from PeoplePicker in the Facepile */
|
1063
|
-
$('.ms-PeoplePicker-result').on('click', function() {
|
1064
|
-
var $this = $(this);
|
1065
|
-
var name = $this.find(".ms-Persona-primaryText").html();
|
1066
|
-
var title = $this.find(".ms-Persona-secondaryText").html();
|
1067
|
-
var selectedInitials = (function() {
|
1068
|
-
var nameArray = name.split(' ');
|
1069
|
-
var nameInitials = '';
|
1070
|
-
for (var i = 0; i < nameArray.length; i++) {
|
1071
|
-
nameInitials += nameArray[i].charAt(0);
|
1072
|
-
}
|
1073
|
-
|
1074
|
-
return nameInitials.substring(0,2);
|
1075
|
-
})();
|
1076
|
-
var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
|
1077
|
-
var selectedImage = (function() {
|
1078
|
-
if ($this.find('.ms-Persona-image').length) {
|
1079
|
-
var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
|
1080
|
-
return '<img class="ms-Persona-image" src="' + selectedImageSrc + '" alt="Persona image">';
|
1081
|
-
} else {
|
1082
|
-
return '';
|
1083
|
-
}
|
1084
|
-
})();
|
1085
|
-
|
1086
|
-
var FacepileItem =
|
1087
|
-
'<button class="ms-Facepile-itemBtn ms-Facepile-itemBtn--member" title="' + name + '">' +
|
1088
|
-
'<div class="ms-Persona ms-Persona--xs">' +
|
1089
|
-
'<div class="ms-Persona-imageArea">' +
|
1090
|
-
'<div class="' + selectedClasses + '">' + selectedInitials + '</div>' +
|
1091
|
-
selectedImage +
|
1092
|
-
'</div>' +
|
1093
|
-
'<div class="ms-Persona-presence"></div>' +
|
1094
|
-
'<div class="ms-Persona-details">' +
|
1095
|
-
'<div class="ms-Persona-primaryText">' + name + '</div>' +
|
1096
|
-
'<div class="ms-Persona-secondaryText">' + title + '</div>' +
|
1097
|
-
'</div>' +
|
1098
|
-
'</div>' +
|
1099
|
-
'</button>';
|
1100
|
-
|
1101
|
-
/** Add new item to members list in Facepile */
|
1102
|
-
$membersList.prepend(FacepileItem);
|
1103
|
-
|
1104
|
-
/** Increment member count */
|
1105
|
-
incrementMembers();
|
1106
|
-
});
|
1107
|
-
|
1108
|
-
/** Remove members in panel people picker */
|
1109
|
-
$pickerMembers.on('click', '.js-selectedRemove', function() {
|
1110
|
-
var memberText = $(this).parent().find('.ms-Persona-primaryText').text();
|
1111
|
-
|
1112
|
-
var $FacepileMember = $membersList.find(".ms-Persona-primaryText:contains(" + memberText + ")").first();
|
1113
|
-
|
1114
|
-
if ($FacepileMember) {
|
1115
|
-
$FacepileMember.parent().closest('.ms-Facepile-itemBtn').remove();
|
1116
|
-
|
1117
|
-
$membersCount -= 1;
|
1118
|
-
|
1119
|
-
/** Display a maxiumum of 5 people */
|
1120
|
-
$(".ms-Facepile-members").children(":lt(5)").show();
|
1121
|
-
|
1122
|
-
/** Display counter after 5 people are present */
|
1123
|
-
if ($membersCount <= 5) {
|
1124
|
-
$(".ms-Facepile-itemBtn--overflow").removeClass("is-active");
|
1125
|
-
} else {
|
1126
|
-
var remainingMembers = $membersCount - 5;
|
1127
|
-
$(".ms-Facepile-overflowText").text("+" + remainingMembers);
|
1128
|
-
}
|
1129
|
-
}
|
1130
|
-
});
|
1131
|
-
|
1132
|
-
/** Show persona card when selecting a Facepile item */
|
1133
|
-
$membersList.on('click', '.ms-Facepile-itemBtn', function() {
|
1134
|
-
var selectedName = $(this).find(".ms-Persona-primaryText").html();
|
1135
|
-
var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
|
1136
|
-
var selectedInitials = (function() {
|
1137
|
-
var name = selectedName.split(' ');
|
1138
|
-
var nameInitials = '';
|
1139
|
-
for (var i = 0; i < name.length; i++) {
|
1140
|
-
nameInitials += name[i].charAt(0);
|
1141
|
-
}
|
1142
|
-
|
1143
|
-
return nameInitials.substring(0,2);
|
1144
|
-
})();
|
1145
|
-
var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
|
1146
|
-
var selectedImage = $(this).find('.ms-Persona-image').attr('src');
|
1147
|
-
var $card = $('.ms-PersonaCard');
|
1148
|
-
var $cardName = $card.find('.ms-Persona-primaryText');
|
1149
|
-
var $cardTitle = $card.find('.ms-Persona-secondaryText');
|
1150
|
-
var $cardInitials = $card.find('.ms-Persona-initials');
|
1151
|
-
var $cardImage = $card.find('.ms-Persona-image');
|
1152
|
-
|
1153
|
-
/** Close any open persona cards */
|
1154
|
-
$personaCard.removeClass('is-active');
|
1155
|
-
|
1156
|
-
/** Add data to persona card */
|
1157
|
-
$cardName.text(selectedName);
|
1158
|
-
$cardTitle.text(selectedTitle);
|
1159
|
-
$cardInitials.text(selectedInitials);
|
1160
|
-
$cardInitials.removeClass();
|
1161
|
-
$cardInitials.addClass(selectedClasses);
|
1162
|
-
$cardImage.attr('src', selectedImage);
|
1163
|
-
|
1164
|
-
/** Show persona card */
|
1165
|
-
setTimeout(function() { $personaCard.addClass('is-active'); }, 100);
|
1166
|
-
|
1167
|
-
/** Align persona card on md and above screens */
|
1168
|
-
if ($(window).width() > 480) {
|
1169
|
-
var itemPosition = $(this).offset().left;
|
1170
|
-
var correctedPosition = itemPosition - 26;
|
1171
|
-
|
1172
|
-
$personaCard.css({'left': correctedPosition});
|
1173
|
-
} else {
|
1174
|
-
$personaCard.css({'left': 0, 'top': 'auto', 'position': 'fixed'});
|
1175
|
-
}
|
1176
|
-
});
|
1177
|
-
|
1178
|
-
/** Dismiss persona card when clicking on the document */
|
1179
|
-
$(document).on('click', function(e) {
|
1180
|
-
var $memberBtn = $('.ms-Facepile-itemBtn--member');
|
1181
|
-
|
1182
|
-
if (!$memberBtn.is(e.target) && $memberBtn.has(e.target).length === 0 && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
|
1183
|
-
$personaCard.removeClass('is-active');
|
1184
|
-
$personaCard.removeAttr('style');
|
1185
|
-
} else {
|
1186
|
-
$personaCard.addClass('is-active');
|
1187
|
-
}
|
1188
|
-
});
|
1189
|
-
|
1190
|
-
});
|
1191
|
-
};
|
1192
|
-
})(jQuery);
|
1193
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1194
|
-
|
1195
|
-
/**
|
1196
|
-
* List Item Plugin
|
1197
|
-
*
|
1198
|
-
* Adds basic demonstration functionality to .ms-ListItem components.
|
1199
|
-
*
|
1200
|
-
* @param {jQuery Object} One or more .ms-ListItem components
|
1201
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
1202
|
-
*/
|
1203
|
-
(function ($) {
|
1204
|
-
$.fn.ListItem = function () {
|
1205
|
-
|
1206
|
-
/** Go through each panel we've been given. */
|
1207
|
-
return this.each(function () {
|
1208
|
-
|
1209
|
-
var $listItem = $(this);
|
1210
|
-
|
1211
|
-
/** Detect clicks on selectable list items. */
|
1212
|
-
$listItem.on('click', '.js-toggleSelection', function() {
|
1213
|
-
$(this).parents('.ms-ListItem').toggleClass('is-selected');
|
1214
|
-
});
|
1215
|
-
|
1216
|
-
});
|
1217
|
-
|
1218
|
-
};
|
1219
|
-
})(jQuery);
|
1220
|
-
|
1221
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1222
|
-
|
1223
|
-
/**
|
1224
|
-
* MessageBanner component
|
1225
|
-
*
|
1226
|
-
* A component to display error messages
|
1227
|
-
*
|
1228
|
-
*/
|
1229
|
-
|
1230
|
-
/**
|
1231
|
-
* @namespace fabric
|
1232
|
-
*/
|
1233
|
-
var fabric = fabric || {};
|
1234
|
-
/**
|
1235
|
-
*
|
1236
|
-
* @param {HTMLElement} container - the target container for an instance of MessageBanner
|
1237
|
-
* @constructor
|
1238
|
-
*/
|
1239
|
-
fabric.MessageBanner = function(container) {
|
1240
|
-
this.container = container;
|
1241
|
-
this.init();
|
1242
|
-
};
|
1243
|
-
|
1244
|
-
fabric.MessageBanner.prototype = (function() {
|
1245
|
-
|
1246
|
-
var _clipper;
|
1247
|
-
var _bufferSize;
|
1248
|
-
var _textContainerMaxWidth = 700;
|
1249
|
-
var _clientWidth;
|
1250
|
-
var _textWidth;
|
1251
|
-
var _initTextWidth;
|
1252
|
-
var _chevronButton;
|
1253
|
-
var _errorBanner;
|
1254
|
-
var _actionButton;
|
1255
|
-
var _closeButton;
|
1256
|
-
var _bufferElementsWidth = 88;
|
1257
|
-
var _bufferElementsWidthSmall = 35;
|
1258
|
-
var SMALL_BREAK_POINT = 480;
|
1259
|
-
|
1260
|
-
/**
|
1261
|
-
* sets styles on resize
|
1262
|
-
*/
|
1263
|
-
var _onResize = function() {
|
1264
|
-
_clientWidth = _errorBanner.offsetWidth;
|
1265
|
-
if(window.innerWidth >= SMALL_BREAK_POINT ) {
|
1266
|
-
_resizeRegular();
|
1267
|
-
} else {
|
1268
|
-
_resizeSmall();
|
1269
|
-
}
|
1270
|
-
};
|
1271
|
-
|
1272
|
-
/**
|
1273
|
-
* resize above 480 pixel breakpoint
|
1274
|
-
*/
|
1275
|
-
var _resizeRegular = function() {
|
1276
|
-
if ((_clientWidth - _bufferSize) > _initTextWidth && _initTextWidth < _textContainerMaxWidth) {
|
1277
|
-
_textWidth = "auto";
|
1278
|
-
_chevronButton.className = "ms-MessageBanner-expand";
|
1279
|
-
_collapse();
|
1280
|
-
} else {
|
1281
|
-
_textWidth = Math.min((_clientWidth - _bufferSize), _textContainerMaxWidth) + "px";
|
1282
|
-
if(_chevronButton.className.indexOf("is-visible") === -1) {
|
1283
|
-
_chevronButton.className += " is-visible";
|
1284
|
-
}
|
1285
|
-
}
|
1286
|
-
_clipper.style.width = _textWidth;
|
1287
|
-
};
|
1288
|
-
|
1289
|
-
/**
|
1290
|
-
* resize below 480 pixel breakpoint
|
1291
|
-
*/
|
1292
|
-
var _resizeSmall = function() {
|
1293
|
-
if (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth) > _initTextWidth) {
|
1294
|
-
_textWidth = "auto";
|
1295
|
-
_collapse();
|
1296
|
-
} else {
|
1297
|
-
_textWidth = (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth)) + "px";
|
1298
|
-
}
|
1299
|
-
_clipper.style.width = _textWidth;
|
1300
|
-
};
|
1301
|
-
/**
|
1302
|
-
* caches elements and values of the component
|
1303
|
-
*/
|
1304
|
-
var _cacheDOM = function(context) {
|
1305
|
-
_errorBanner = context.container;
|
1306
|
-
_clipper = context.container.querySelector('.ms-MessageBanner-clipper');
|
1307
|
-
_chevronButton = context.container.querySelector('.ms-MessageBanner-expand');
|
1308
|
-
_actionButton = context.container.querySelector('.ms-MessageBanner-action');
|
1309
|
-
_bufferSize = _actionButton.offsetWidth + _bufferElementsWidth;
|
1310
|
-
_closeButton = context.container.querySelector('.ms-MessageBanner-close');
|
1311
|
-
};
|
1312
|
-
|
1313
|
-
/**
|
1314
|
-
* expands component to show full error message
|
1315
|
-
*/
|
1316
|
-
var _expand = function() {
|
1317
|
-
var icon = _chevronButton.querySelector('.ms-Icon');
|
1318
|
-
_errorBanner.className += " is-expanded";
|
1319
|
-
icon.className = "ms-Icon ms-Icon--chevronsUp";
|
1320
|
-
};
|
1321
|
-
|
1322
|
-
/**
|
1323
|
-
* collapses component to only show truncated message
|
1324
|
-
*/
|
1325
|
-
var _collapse = function() {
|
1326
|
-
var icon = _chevronButton.querySelector('.ms-Icon');
|
1327
|
-
_errorBanner.className = "ms-MessageBanner";
|
1328
|
-
icon.className = "ms-Icon ms-Icon--chevronsDown";
|
1329
|
-
};
|
1330
|
-
|
1331
|
-
var _toggleExpansion = function() {
|
1332
|
-
if (_errorBanner.className.indexOf("is-expanded") > -1) {
|
1333
|
-
_collapse();
|
1334
|
-
} else {
|
1335
|
-
_expand();
|
1336
|
-
}
|
1337
|
-
};
|
1338
|
-
|
1339
|
-
/**
|
1340
|
-
* hides banner when close button is clicked
|
1341
|
-
*/
|
1342
|
-
var _hideBanner = function() {
|
1343
|
-
if(_errorBanner.className.indexOf("hide") === -1) {
|
1344
|
-
_errorBanner.className += " hide";
|
1345
|
-
setTimeout(function() {
|
1346
|
-
_errorBanner.className = "ms-MessageBanner is-hidden";
|
1347
|
-
}, 500);
|
1348
|
-
}
|
1349
|
-
};
|
1350
|
-
|
1351
|
-
/**
|
1352
|
-
* shows banner if the banner is hidden
|
1353
|
-
*/
|
1354
|
-
var _showBanner = function() {
|
1355
|
-
_errorBanner.className = "ms-MessageBanner";
|
1356
|
-
};
|
1357
|
-
|
1358
|
-
/**
|
1359
|
-
* sets handlers for resize and button click events
|
1360
|
-
*/
|
1361
|
-
var _setListeners = function() {
|
1362
|
-
window.addEventListener('resize', _onResize, false);
|
1363
|
-
_chevronButton.addEventListener("click", _toggleExpansion, false);
|
1364
|
-
_closeButton.addEventListener("click", _hideBanner, false);
|
1365
|
-
};
|
1366
|
-
|
1367
|
-
/**
|
1368
|
-
* initializes component
|
1369
|
-
*/
|
1370
|
-
var init = function() {
|
1371
|
-
_cacheDOM(this);
|
1372
|
-
_setListeners();
|
1373
|
-
_clientWidth = _errorBanner.offsetWidth;
|
1374
|
-
_initTextWidth = _clipper.offsetWidth;
|
1375
|
-
_onResize(null);
|
1376
|
-
};
|
1377
|
-
|
1378
|
-
return {
|
1379
|
-
init: init,
|
1380
|
-
showBanner: _showBanner
|
1381
|
-
};
|
1382
|
-
}());
|
1383
|
-
|
1384
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1385
|
-
|
1386
|
-
/**
|
1387
|
-
* Nav Bar Plugin
|
1388
|
-
*/
|
1389
|
-
(function ($) {
|
1390
|
-
$.fn.NavBar = function () {
|
1391
|
-
|
1392
|
-
/** Go through each nav bar we've been given. */
|
1393
|
-
return this.each(function () {
|
1394
|
-
|
1395
|
-
var $navBar = $(this);
|
1396
|
-
|
1397
|
-
// Open the nav bar on mobile.
|
1398
|
-
$navBar.on('click', '.js-openMenu', function(event) {
|
1399
|
-
event.stopPropagation();
|
1400
|
-
$navBar.toggleClass('is-open');
|
1401
|
-
});
|
1402
|
-
|
1403
|
-
// Close the nav bar on mobile.
|
1404
|
-
$navBar.click(function() {
|
1405
|
-
if ($navBar.hasClass('is-open')) {
|
1406
|
-
$navBar.removeClass('is-open');
|
1407
|
-
}
|
1408
|
-
});
|
1409
|
-
|
1410
|
-
// Set selected states and open/close menus.
|
1411
|
-
$navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
|
1412
|
-
var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
|
1413
|
-
event.stopPropagation();
|
1414
|
-
|
1415
|
-
// Prevent default actions from firing if links are not found.
|
1416
|
-
if ($(this).children('.ms-NavBar-link').length === 0) {
|
1417
|
-
event.preventDefault();
|
1418
|
-
}
|
1419
|
-
|
1420
|
-
// Deselect all of the items.
|
1421
|
-
$(this).siblings('.ms-NavBar-item').removeClass('is-selected');
|
1422
|
-
|
1423
|
-
// Close and blur the search box if it doesn't have text.
|
1424
|
-
if ($searchBox.length > 0 && $searchBox.val().length === 0) {
|
1425
|
-
$('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
|
1426
|
-
}
|
1427
|
-
|
1428
|
-
// Does the selected item have a menu?
|
1429
|
-
if ($(this).hasClass('ms-NavBar-item--hasMenu')) {
|
1430
|
-
|
1431
|
-
// First, close any neighboring menus.
|
1432
|
-
$(this).siblings('.ms-NavBar-item--hasMenu').children('.ms-ContextualMenu:first').removeClass('is-open');
|
1433
|
-
|
1434
|
-
// Toggle 'is-open' to open or close it.
|
1435
|
-
$(this).children('.ms-ContextualMenu:first').toggleClass('is-open');
|
1436
|
-
|
1437
|
-
// Toggle 'is-selected' to indicate whether it is active.
|
1438
|
-
$(this).toggleClass('is-selected');
|
1439
|
-
} else {
|
1440
|
-
// Doesn't have a menu, so just select the item.
|
1441
|
-
$(this).addClass('is-selected');
|
1442
|
-
|
1443
|
-
// Close the submenu and any open contextual menus.
|
1444
|
-
$navBar.removeClass('is-open').find('.ms-ContextualMenu').removeClass('is-open');
|
1445
|
-
}
|
1446
|
-
|
1447
|
-
// Is this the search box? Open it up and focus on the search field.
|
1448
|
-
if ($(this).hasClass('ms-NavBar-item--search')) {
|
1449
|
-
$(this).addClass('is-open');
|
1450
|
-
$(this).find('.ms-TextField-field').focus();
|
1451
|
-
|
1452
|
-
// Close any open menus.
|
1453
|
-
$navBar.find('.ms-ContextualMenu:first').removeClass('is-open');
|
1454
|
-
}
|
1455
|
-
});
|
1456
|
-
|
1457
|
-
// Prevent contextual menus from being hidden when clicking on them.
|
1458
|
-
$navBar.on('click', '.ms-NavBar-item .ms-ContextualMenu', function(event) {
|
1459
|
-
event.stopPropagation();
|
1460
|
-
|
1461
|
-
// Collapse the mobile "panel" for nav items.
|
1462
|
-
$(this).removeClass('is-open');
|
1463
|
-
$navBar.removeClass('is-open').find('.ms-NavBar-item--hasMenu').removeClass('is-selected');
|
1464
|
-
});
|
1465
|
-
|
1466
|
-
// Hide any menus and close the search box when clicking anywhere in the document.
|
1467
|
-
$(document).on('click', 'html', function() {
|
1468
|
-
var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
|
1469
|
-
$navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
|
1470
|
-
|
1471
|
-
// Close and blur the search box if it doesn't have text.
|
1472
|
-
if ($searchBox.length > 0 && $searchBox.val().length === 0) {
|
1473
|
-
$navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
|
1474
|
-
}
|
1475
|
-
});
|
1476
|
-
});
|
1477
|
-
};
|
1478
|
-
})(jQuery);
|
1479
|
-
|
1480
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1481
|
-
|
1482
|
-
/**
|
1483
|
-
* Panel Plugin
|
1484
|
-
*
|
1485
|
-
* Adds basic demonstration functionality to .ms-Panel components.
|
1486
|
-
*
|
1487
|
-
* @param {jQuery Object} One or more .ms-Panel components
|
1488
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
1489
|
-
*/
|
1490
|
-
(function ($) {
|
1491
|
-
$.fn.Panel = function () {
|
1492
|
-
|
1493
|
-
var pfx = ["webkit", "moz", "MS", "o", ""];
|
1494
|
-
|
1495
|
-
// Prefix function
|
1496
|
-
function prefixedEvent(element, type, callback) {
|
1497
|
-
for (var p = 0; p < pfx.length; p++) {
|
1498
|
-
if (!pfx[p]) { type = type.toLowerCase(); }
|
1499
|
-
element.addEventListener(pfx[p]+type, callback, false);
|
1500
|
-
}
|
1501
|
-
}
|
1502
|
-
|
1503
|
-
/** Go through each panel we've been given. */
|
1504
|
-
return this.each(function () {
|
1505
|
-
|
1506
|
-
var $panel = $(this);
|
1507
|
-
var $panelMain = $panel.find(".ms-Panel-main");
|
1508
|
-
|
1509
|
-
/** Hook to open the panel. */
|
1510
|
-
$(".ms-PanelAction-close").on("click", function() {
|
1511
|
-
|
1512
|
-
// Display Panel first, to allow animations
|
1513
|
-
$panel.addClass("ms-Panel-animateOut");
|
1514
|
-
|
1515
|
-
});
|
1516
|
-
|
1517
|
-
$(".ms-PanelAction-open").on("click", function() {
|
1518
|
-
|
1519
|
-
// Display Panel first, to allow animations
|
1520
|
-
$panel.addClass("is-open");
|
1521
|
-
|
1522
|
-
// Add animation class
|
1523
|
-
$panel.addClass("ms-Panel-animateIn");
|
1524
|
-
|
1525
|
-
});
|
1526
|
-
|
1527
|
-
prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
|
1528
|
-
if (event.animationName.indexOf('Out') > -1) {
|
1529
|
-
|
1530
|
-
// Hide and Prevent ms-Panel-main from being interactive
|
1531
|
-
$panel.removeClass('is-open');
|
1532
|
-
|
1533
|
-
// Remove animating classes for the next time we open panel
|
1534
|
-
$panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
|
1535
|
-
|
1536
|
-
}
|
1537
|
-
});
|
1538
|
-
|
1539
|
-
// Pivots for sample page to show variant panel sizes
|
1540
|
-
$(".panelVariant-item").on("click", function() {
|
1541
|
-
var className = $(this).find('span').attr('class');
|
1542
|
-
|
1543
|
-
$(".panelVariant-item").removeClass('is-selected');
|
1544
|
-
$(this).addClass('is-selected');
|
1545
|
-
|
1546
|
-
switch (className) {
|
1547
|
-
case 'is-default':
|
1548
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel');
|
1549
|
-
break;
|
1550
|
-
case 'is-left':
|
1551
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--left');
|
1552
|
-
break;
|
1553
|
-
case 'is-lightDismiss':
|
1554
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lightDismiss');
|
1555
|
-
break;
|
1556
|
-
case 'is-md':
|
1557
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--md');
|
1558
|
-
break;
|
1559
|
-
case 'is-lgFixed':
|
1560
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg ms-Panel--fixed');
|
1561
|
-
break;
|
1562
|
-
case 'is-lg':
|
1563
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg');
|
1564
|
-
break;
|
1565
|
-
case 'is-xl':
|
1566
|
-
$('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--xl');
|
1567
|
-
break;
|
1568
|
-
}
|
1569
|
-
});
|
1570
|
-
});
|
1571
|
-
|
1572
|
-
};
|
1573
|
-
})(jQuery);
|
1574
|
-
|
1575
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1576
|
-
|
1577
|
-
var fabric = fabric || {};
|
1578
|
-
|
1579
|
-
/**
|
1580
|
-
* People Picker Plugin
|
1581
|
-
*
|
1582
|
-
* Adds basic demonstration functionality to .ms-PeoplePicker components.
|
1583
|
-
*
|
1584
|
-
* @param {jQuery Object} One or more .ms-PeoplePicker components
|
1585
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
1586
|
-
*/
|
1587
|
-
|
1588
|
-
(function ($) {
|
1589
|
-
$.fn.PeoplePicker = function () {
|
1590
|
-
|
1591
|
-
/** Iterate through each people picker provided. */
|
1592
|
-
return this.each(function () {
|
1593
|
-
|
1594
|
-
var $peoplePicker = $(this);
|
1595
|
-
var $searchField = $peoplePicker.find(".ms-PeoplePicker-searchField");
|
1596
|
-
var $results = $peoplePicker.find(".ms-PeoplePicker-results");
|
1597
|
-
var $selected = $peoplePicker.find('.ms-PeoplePicker-selected');
|
1598
|
-
var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople");
|
1599
|
-
var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount");
|
1600
|
-
var $peopleList = $peoplePicker.find(".ms-PeoplePicker-peopleList");
|
1601
|
-
var isActive = false;
|
1602
|
-
var spinner;
|
1603
|
-
var $personaCard = $('.ms-PeoplePicker').find('.ms-PersonaCard');
|
1604
|
-
|
1605
|
-
// Run when focused or clicked
|
1606
|
-
function peoplePickerActive(event) {
|
1607
|
-
/** Scroll the view so that the people picker is at the top. */
|
1608
|
-
$('html, body').animate({
|
1609
|
-
scrollTop: $peoplePicker.offset().top
|
1610
|
-
}, 367);
|
1611
|
-
|
1612
|
-
/** Start by closing any open people pickers. */
|
1613
|
-
if ( $peoplePicker.hasClass('is-active') ) {
|
1614
|
-
$peoplePicker.removeClass("is-active");
|
1615
|
-
}
|
1616
|
-
|
1617
|
-
/** Display a maxiumum of 5 people in Facepile variant */
|
1618
|
-
if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile') && $searchField.val() === "") {
|
1619
|
-
$peopleList.children(":gt(4)").hide();
|
1620
|
-
}
|
1621
|
-
|
1622
|
-
/** Animate results and members in Facepile variant. */
|
1623
|
-
if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
|
1624
|
-
// $results.addClass('ms-u-slideDownIn20');
|
1625
|
-
$selectedPeople.addClass('ms-u-slideDownIn20');
|
1626
|
-
setTimeout(function() { $results.removeClass('ms-u-slideDownIn20'); $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
|
1627
|
-
}
|
1628
|
-
|
1629
|
-
isActive = true;
|
1630
|
-
|
1631
|
-
/** Stop the click event from propagating, which would just close the dropdown immediately. */
|
1632
|
-
event.stopPropagation();
|
1633
|
-
|
1634
|
-
/** Before opening, size the results panel to match the people picker. */
|
1635
|
-
if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
|
1636
|
-
$results.width($peoplePicker.width() - 2);
|
1637
|
-
}
|
1638
|
-
|
1639
|
-
/** Show the $results by setting the people picker to active. */
|
1640
|
-
$peoplePicker.addClass("is-active");
|
1641
|
-
|
1642
|
-
/** Temporarily bind an event to the document that will close the people picker when clicking anywhere. */
|
1643
|
-
$(document).bind("click.peoplepicker", function() {
|
1644
|
-
$peoplePicker.removeClass('is-active');
|
1645
|
-
if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
|
1646
|
-
$peoplePicker.removeClass('is-searching');
|
1647
|
-
$('.ms-PeoplePicker-selected').show();
|
1648
|
-
$('.ms-PeoplePicker-searchMore').removeClass('is-active');
|
1649
|
-
$searchField.val("");
|
1650
|
-
}
|
1651
|
-
$(document).unbind('click.peoplepicker');
|
1652
|
-
isActive = false;
|
1653
|
-
});
|
1654
|
-
}
|
1655
|
-
|
1656
|
-
/** Set to active when focusing on the input. */
|
1657
|
-
$peoplePicker.on('focus', '.ms-PeoplePicker-searchField', function(event) {
|
1658
|
-
peoplePickerActive(event);
|
1659
|
-
});
|
1660
|
-
|
1661
|
-
/** Set to active when clicking on the input. */
|
1662
|
-
$peoplePicker.on('click', '.ms-PeoplePicker-searchField', function(event) {
|
1663
|
-
peoplePickerActive(event);
|
1664
|
-
});
|
1665
|
-
|
1666
|
-
/** Keep the people picker active when clicking within it. */
|
1667
|
-
$(this).click(function (event) {
|
1668
|
-
event.stopPropagation();
|
1669
|
-
});
|
1670
|
-
|
1671
|
-
/** Add the selected person to the text field or selected list and close the people picker. */
|
1672
|
-
$results.on('click', '.ms-PeoplePicker-result', function () {
|
1673
|
-
var $this = $(this);
|
1674
|
-
var selectedName = $this.find(".ms-Persona-primaryText").html();
|
1675
|
-
var selectedTitle = $this.find(".ms-Persona-secondaryText").html();
|
1676
|
-
var selectedInitials = (function() {
|
1677
|
-
var name = selectedName.split(' ');
|
1678
|
-
var nameInitials = '';
|
1679
|
-
|
1680
|
-
for (var i = 0; i < name.length; i++) {
|
1681
|
-
nameInitials += name[i].charAt(0);
|
1682
|
-
}
|
1683
|
-
|
1684
|
-
return nameInitials.substring(0,2);
|
1685
|
-
})();
|
1686
|
-
var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
|
1687
|
-
var selectedImage = (function() {
|
1688
|
-
if ($this.find('.ms-Persona-image').length) {
|
1689
|
-
var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
|
1690
|
-
return '<img class="ms-Persona-image" src="' + selectedImageSrc + '" alt="Persona image">';
|
1691
|
-
} else {
|
1692
|
-
return '';
|
1693
|
-
}
|
1694
|
-
})();
|
1695
|
-
|
1696
|
-
/** Token html */
|
1697
|
-
var personaHTML = '<div class="ms-PeoplePicker-persona">' +
|
1698
|
-
'<div class="ms-Persona ms-Persona--xs ms-Persona--square">' +
|
1699
|
-
'<div class="ms-Persona-imageArea">' +
|
1700
|
-
'<div class="' + selectedClasses + '">' + selectedInitials + '</div>' +
|
1701
|
-
selectedImage +
|
1702
|
-
'</div>' +
|
1703
|
-
'<div class="ms-Persona-presence"></div>' +
|
1704
|
-
'<div class="ms-Persona-details">' +
|
1705
|
-
'<div class="ms-Persona-primaryText">' + selectedName + '</div>' +
|
1706
|
-
' </div>' +
|
1707
|
-
'</div>' +
|
1708
|
-
'<button class="ms-PeoplePicker-personaRemove">' +
|
1709
|
-
'<i class="ms-Icon ms-Icon--x"></i>' +
|
1710
|
-
' </button>' +
|
1711
|
-
'</div>';
|
1712
|
-
/** List item html */
|
1713
|
-
var personaListItem = '<li class="ms-PeoplePicker-selectedPerson">' +
|
1714
|
-
'<div class="ms-Persona ms-Persona--sm">' +
|
1715
|
-
'<div class="ms-Persona-imageArea">' +
|
1716
|
-
'<div class="' + selectedClasses + '">' + selectedInitials + '</div>' +
|
1717
|
-
selectedImage +
|
1718
|
-
'</div>' +
|
1719
|
-
'<div class="ms-Persona-presence"></div>' +
|
1720
|
-
'<div class="ms-Persona-details">' +
|
1721
|
-
'<div class="ms-Persona-primaryText">' + selectedName + '</div>' +
|
1722
|
-
'<div class="ms-Persona-secondaryText">' + selectedTitle + '</div>' +
|
1723
|
-
'</div>' +
|
1724
|
-
'</div>' +
|
1725
|
-
'<button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>' +
|
1726
|
-
'</li>';
|
1727
|
-
/** Tokenize selected persona if not Facepile or memberslist variants */
|
1728
|
-
if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile') && !$peoplePicker.hasClass('ms-PeoplePicker--membersList') ) {
|
1729
|
-
$searchField.before(personaHTML);
|
1730
|
-
$peoplePicker.removeClass("is-active");
|
1731
|
-
resizeSearchField($peoplePicker);
|
1732
|
-
}
|
1733
|
-
/** Add selected persona to a list if Facepile or memberslist variants */
|
1734
|
-
else {
|
1735
|
-
if (!$selected.hasClass('is-active')) {
|
1736
|
-
$selected.addClass('is-active');
|
1737
|
-
}
|
1738
|
-
/** Prepend persona list item html to selected people list */
|
1739
|
-
$selectedPeople.prepend(personaListItem);
|
1740
|
-
/** Close the picker */
|
1741
|
-
$peoplePicker.removeClass("is-active");
|
1742
|
-
/** Get the total amount of selected personas and display that number */
|
1743
|
-
var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
|
1744
|
-
$selectedCount.html(count);
|
1745
|
-
/** Return picker back to default state:
|
1746
|
-
- Show only the first five results in the people list for when the picker is reopened
|
1747
|
-
- Make searchMore inactive
|
1748
|
-
- Clear any search field text
|
1749
|
-
*/
|
1750
|
-
$peopleList.children().show();
|
1751
|
-
$peopleList.children(":gt(4)").hide();
|
1752
|
-
|
1753
|
-
$('.ms-PeoplePicker-searchMore').removeClass('is-active');
|
1754
|
-
$searchField.val("");
|
1755
|
-
}
|
1756
|
-
});
|
1757
|
-
|
1758
|
-
/** Remove the persona when clicking the personaRemove button. */
|
1759
|
-
$peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function() {
|
1760
|
-
$(this).parents('.ms-PeoplePicker-persona').remove();
|
1761
|
-
|
1762
|
-
/** Make the search field 100% width if all personas have been removed */
|
1763
|
-
if ( $('.ms-PeoplePicker-persona').length === 0 ) {
|
1764
|
-
$peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth('100%');
|
1765
|
-
} else {
|
1766
|
-
resizeSearchField($peoplePicker);
|
1767
|
-
}
|
1768
|
-
});
|
1769
|
-
|
1770
|
-
/** Trigger additional searching when clicking the search more area. */
|
1771
|
-
$results.on('click', '.js-searchMore', function() {
|
1772
|
-
var $searchMore = $(this);
|
1773
|
-
var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary");
|
1774
|
-
var originalPrimaryLabelText = primaryLabel.html();
|
1775
|
-
var searchFieldText = $searchField.val();
|
1776
|
-
|
1777
|
-
/** Change to searching state. */
|
1778
|
-
$searchMore.addClass("is-searching");
|
1779
|
-
primaryLabel.html("Searching for " + searchFieldText);
|
1780
|
-
|
1781
|
-
/** Attach Spinner */
|
1782
|
-
if (!spinner) {
|
1783
|
-
spinner = new fabric.Spinner($searchMore.get(0));
|
1784
|
-
} else {
|
1785
|
-
spinner.start();
|
1786
|
-
}
|
1787
|
-
|
1788
|
-
/** Show all results in Facepile variant */
|
1789
|
-
if($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
|
1790
|
-
setTimeout(function() {$peopleList.children().show();}, 1500);
|
1791
|
-
}
|
1792
|
-
|
1793
|
-
/** Return the original state. */
|
1794
|
-
setTimeout(function() {
|
1795
|
-
$searchMore.removeClass("is-searching");
|
1796
|
-
primaryLabel.html(originalPrimaryLabelText);
|
1797
|
-
spinner.stop();
|
1798
|
-
}, 1500);
|
1799
|
-
});
|
1800
|
-
|
1801
|
-
/** Remove a result using the action icon. */
|
1802
|
-
$results.on('click', '.js-resultRemove', function(event) {
|
1803
|
-
event.stopPropagation();
|
1804
|
-
$(this).parent(".ms-PeoplePicker-result").remove();
|
1805
|
-
});
|
1806
|
-
|
1807
|
-
/** Expand a result if more details are available. */
|
1808
|
-
$results.on('click', '.js-resultExpand', function(event) {
|
1809
|
-
event.stopPropagation();
|
1810
|
-
$(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded");
|
1811
|
-
});
|
1812
|
-
|
1813
|
-
/** Remove a selected person using the action icon. */
|
1814
|
-
$selectedPeople.on('click', '.js-selectedRemove', function(event) {
|
1815
|
-
event.stopPropagation();
|
1816
|
-
$(this).parent(".ms-PeoplePicker-selectedPerson").remove();
|
1817
|
-
var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
|
1818
|
-
$selectedCount.html(count);
|
1819
|
-
if ($peoplePicker.find('.ms-PeoplePicker-selectedPerson').length === 0) {
|
1820
|
-
$selected.removeClass('is-active');
|
1821
|
-
}
|
1822
|
-
});
|
1823
|
-
|
1824
|
-
var filterResults = function(results, currentSuggestion, currentValueExists) {
|
1825
|
-
return results.find('.ms-Persona-primaryText').filter(function() {
|
1826
|
-
if (currentValueExists) {
|
1827
|
-
return $(this).text().toLowerCase() === currentSuggestion;
|
1828
|
-
} else {
|
1829
|
-
return $(this).text().toLowerCase() !== currentSuggestion;
|
1830
|
-
}
|
1831
|
-
}).parents('.ms-PeoplePicker-peopleListItem');
|
1832
|
-
};
|
1833
|
-
|
1834
|
-
/** Search people picker items */
|
1835
|
-
$peoplePicker.on('keyup', '.ms-PeoplePicker-searchField', function(evt) {
|
1836
|
-
var suggested = [];
|
1837
|
-
var newSuggestions = [];
|
1838
|
-
var $pickerResult = $results.find('.ms-Persona-primaryText');
|
1839
|
-
|
1840
|
-
$peoplePicker.addClass('is-searching');
|
1841
|
-
|
1842
|
-
/** Hide members */
|
1843
|
-
$selected.hide();
|
1844
|
-
|
1845
|
-
/** Show 5 results */
|
1846
|
-
$peopleList.children(":lt(5)").show();
|
1847
|
-
|
1848
|
-
/** Show searchMore button */
|
1849
|
-
$('.ms-PeoplePicker-searchMore').addClass('is-active');
|
1850
|
-
|
1851
|
-
/** Get array of suggested people */
|
1852
|
-
$pickerResult.each(function() { suggested.push($(this).text()); });
|
1853
|
-
|
1854
|
-
/** Iterate over array to find matches and show matching items */
|
1855
|
-
for (var i = 0; i < suggested.length; i++) {
|
1856
|
-
var currentPersona = suggested[i].toLowerCase();
|
1857
|
-
var currentValue = evt.target.value.toLowerCase();
|
1858
|
-
var currentSuggestion;
|
1859
|
-
|
1860
|
-
if (currentPersona.indexOf(currentValue) > -1) {
|
1861
|
-
currentSuggestion = suggested[i].toLowerCase();
|
1862
|
-
|
1863
|
-
newSuggestions.push(suggested[i]);
|
1864
|
-
|
1865
|
-
filterResults($results, currentSuggestion, true).show();
|
1866
|
-
} else {
|
1867
|
-
filterResults($results, currentSuggestion, false).hide();
|
1868
|
-
}
|
1869
|
-
}
|
1870
|
-
|
1871
|
-
/** Show members and hide searchmore when field is empty */
|
1872
|
-
if ($(this).val() === "") {
|
1873
|
-
$peoplePicker.removeClass('is-searching');
|
1874
|
-
$selected.show();
|
1875
|
-
$('.ms-PeoplePicker-searchMore').removeClass('is-active');
|
1876
|
-
$selectedPeople.addClass('ms-u-slideDownIn20');
|
1877
|
-
setTimeout(function() { $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
|
1878
|
-
$peopleList.children(":gt(4)").hide();
|
1879
|
-
}
|
1880
|
-
});
|
1881
|
-
|
1882
|
-
/** Show persona card when clicking a persona in the members list */
|
1883
|
-
$selectedPeople.on('click', '.ms-Persona', function() {
|
1884
|
-
var selectedName = $(this).find(".ms-Persona-primaryText").html();
|
1885
|
-
var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
|
1886
|
-
var selectedInitials = (function() {
|
1887
|
-
var name = selectedName.split(' ');
|
1888
|
-
var nameInitials = '';
|
1889
|
-
|
1890
|
-
for (var i = 0; i < name.length; i++) {
|
1891
|
-
nameInitials += name[i].charAt(0);
|
1892
|
-
}
|
1893
|
-
|
1894
|
-
return nameInitials.substring(0,2);
|
1895
|
-
})();
|
1896
|
-
var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
|
1897
|
-
var selectedImage = $(this).find('.ms-Persona-image').attr('src');
|
1898
|
-
var $card = $('.ms-PersonaCard');
|
1899
|
-
var $cardName = $card.find('.ms-Persona-primaryText');
|
1900
|
-
var $cardTitle = $card.find('.ms-Persona-secondaryText');
|
1901
|
-
var $cardInitials = $card.find('.ms-Persona-initials');
|
1902
|
-
var $cardImage = $card.find('.ms-Persona-image');
|
1903
|
-
|
1904
|
-
/** Close any open persona cards */
|
1905
|
-
$personaCard.removeClass('is-active');
|
1906
|
-
|
1907
|
-
/** Add data to persona card */
|
1908
|
-
$cardName.text(selectedName);
|
1909
|
-
$cardTitle.text(selectedTitle);
|
1910
|
-
$cardInitials.text(selectedInitials);
|
1911
|
-
$cardInitials.removeClass();
|
1912
|
-
$cardInitials.addClass(selectedClasses);
|
1913
|
-
$cardImage.attr('src', selectedImage);
|
1914
|
-
|
1915
|
-
/** Show persona card */
|
1916
|
-
setTimeout(function() {
|
1917
|
-
$personaCard.addClass('is-active');
|
1918
|
-
setTimeout(function(){$personaCard.css({'animation-name': 'none'});}, 300);
|
1919
|
-
}, 100);
|
1920
|
-
|
1921
|
-
/** Align persona card on md and above screens */
|
1922
|
-
if ($(window).width() > 480) {
|
1923
|
-
var itemPositionTop = $(this).offset().top;
|
1924
|
-
var correctedPositionTop = itemPositionTop + 10;
|
1925
|
-
|
1926
|
-
$personaCard.css({'top': correctedPositionTop, 'left': 0});
|
1927
|
-
} else {
|
1928
|
-
$personaCard.css({'top': 'auto'});
|
1929
|
-
}
|
1930
|
-
});
|
1931
|
-
|
1932
|
-
/** Dismiss persona card when clicking on the document */
|
1933
|
-
$(document).on('click', function(e) {
|
1934
|
-
var $memberBtn = $('.ms-PeoplePicker-selectedPerson').find('.ms-Persona');
|
1935
|
-
|
1936
|
-
if (!$memberBtn.is(e.target) && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
|
1937
|
-
$personaCard.removeClass('is-active');
|
1938
|
-
setTimeout(function(){$personaCard.removeAttr('style');}, 300);
|
1939
|
-
} else {
|
1940
|
-
$personaCard.addClass('is-active');
|
1941
|
-
}
|
1942
|
-
});
|
1943
|
-
});
|
1944
|
-
};
|
1945
|
-
|
1946
|
-
/** Resize the search field to match the search box */
|
1947
|
-
function resizeSearchField($peoplePicker) {
|
1948
|
-
var $searchBox = $peoplePicker.find('.ms-PeoplePicker-searchBox');
|
1949
|
-
|
1950
|
-
// Where is the right edge of the search box?
|
1951
|
-
var searchBoxLeftEdge = $searchBox.position().left;
|
1952
|
-
var searchBoxWidth = $searchBox.outerWidth();
|
1953
|
-
var searchBoxRightEdge = searchBoxLeftEdge + searchBoxWidth;
|
1954
|
-
|
1955
|
-
// Where is the right edge of the last persona component?
|
1956
|
-
var $lastPersona = $searchBox.find('.ms-PeoplePicker-persona:last');
|
1957
|
-
var lastPersonaLeftEdge = $lastPersona.offset().left;
|
1958
|
-
var lastPersonaWidth = $lastPersona.outerWidth();
|
1959
|
-
var lastPersonaRightEdge = lastPersonaLeftEdge + lastPersonaWidth;
|
1960
|
-
|
1961
|
-
// Adjust the width of the field to fit the remaining space.
|
1962
|
-
var newFieldWidth = searchBoxRightEdge - lastPersonaRightEdge - 7;
|
1963
|
-
|
1964
|
-
// Don't let the field get too tiny.
|
1965
|
-
if (newFieldWidth < 100) {
|
1966
|
-
newFieldWidth = "100%";
|
1967
|
-
}
|
1968
|
-
|
1969
|
-
// Set the width of the search field
|
1970
|
-
$peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth);
|
1971
|
-
}
|
1972
|
-
})(jQuery);
|
1973
|
-
|
1974
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
1975
|
-
|
1976
|
-
/**
|
1977
|
-
* Persona Card Plugin
|
1978
|
-
*
|
1979
|
-
* Adds basic demonstration functionality to .ms-PersonaCard components.
|
1980
|
-
*
|
1981
|
-
* @param {jQuery Object} One or more .ms-PersonaCard components
|
1982
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
1983
|
-
*/
|
1984
|
-
(function ($) {
|
1985
|
-
$.fn.PersonaCard = function () {
|
1986
|
-
|
1987
|
-
/** Go through each file picker we've been given. */
|
1988
|
-
return this.each(function () {
|
1989
|
-
|
1990
|
-
var $personaCard = $(this);
|
1991
|
-
|
1992
|
-
/** When selecting an action, show its details. */
|
1993
|
-
$personaCard.on('click', '.ms-PersonaCard-action', function() {
|
1994
|
-
|
1995
|
-
/** Select the correct tab. */
|
1996
|
-
$personaCard.find('.ms-PersonaCard-action').removeClass('is-active');
|
1997
|
-
$(this).addClass('is-active');
|
1998
|
-
|
1999
|
-
/** Function for switching selected item into view by adding a class to ul. */
|
2000
|
-
var updateForItem = function(wrapper, item) {
|
2001
|
-
var previousItem = wrapper.className + "";
|
2002
|
-
var detail = item.charAt(0).toUpperCase() + item.slice(1);
|
2003
|
-
var nextItem = "ms-PersonaCard-detail" + detail;
|
2004
|
-
if (previousItem !== nextItem){
|
2005
|
-
wrapper.classList.remove(previousItem);
|
2006
|
-
wrapper.classList.add(nextItem);
|
2007
|
-
}
|
2008
|
-
};
|
2009
|
-
|
2010
|
-
/** Get id of selected item */
|
2011
|
-
var el = $(this).attr('id');
|
2012
|
-
/** Add detail class to ul to switch it into view. */
|
2013
|
-
updateForItem($(this).parent().next().find('#detailList')[0], el);
|
2014
|
-
|
2015
|
-
/** Display the corresponding details. */
|
2016
|
-
var requestedAction = $(this).attr('id');
|
2017
|
-
$personaCard.find('.ms-PersonaCard-actionDetails').removeClass('is-active');
|
2018
|
-
$personaCard.find('#' + requestedAction + '.ms-PersonaCard-actionDetails').addClass('is-active');
|
2019
|
-
|
2020
|
-
});
|
2021
|
-
|
2022
|
-
/** Toggle more details. */
|
2023
|
-
$personaCard.on('click', '.ms-PersonaCard-detailExpander', function() {
|
2024
|
-
$(this).parent('.ms-PersonaCard-actionDetails').toggleClass('is-collapsed');
|
2025
|
-
});
|
2026
|
-
|
2027
|
-
});
|
2028
|
-
|
2029
|
-
};
|
2030
|
-
})(jQuery);
|
2031
|
-
|
2032
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2033
|
-
|
2034
|
-
/**
|
2035
|
-
* Pivot Plugin
|
2036
|
-
*
|
2037
|
-
* Adds basic demonstration functionality to .ms-Pivot components.
|
2038
|
-
*
|
2039
|
-
* @param {jQuery Object} One or more .ms-Pivot components
|
2040
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
2041
|
-
*/
|
2042
|
-
(function ($) {
|
2043
|
-
$.fn.Pivot = function () {
|
2044
|
-
|
2045
|
-
/** Go through each pivot we've been given. */
|
2046
|
-
return this.each(function () {
|
2047
|
-
|
2048
|
-
var $pivotContainer = $(this);
|
2049
|
-
|
2050
|
-
/** When clicking/tapping a link, select it. */
|
2051
|
-
$pivotContainer.on('click', '.ms-Pivot-link', function(event) {
|
2052
|
-
event.preventDefault();
|
2053
|
-
/** Check if current selection has elipses child element **/
|
2054
|
-
var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis');
|
2055
|
-
|
2056
|
-
/** Only execute when no elipses element can be found **/
|
2057
|
-
if($elipsisCheck.length === 0){
|
2058
|
-
|
2059
|
-
$(this).siblings('.ms-Pivot-link').removeClass('is-selected');
|
2060
|
-
$(this).addClass('is-selected');
|
2061
|
-
}
|
2062
|
-
|
2063
|
-
});
|
2064
|
-
|
2065
|
-
});
|
2066
|
-
|
2067
|
-
};
|
2068
|
-
})(jQuery);
|
2069
|
-
|
2070
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2071
|
-
|
2072
|
-
/**
|
2073
|
-
* ProgressIndicator component
|
2074
|
-
*
|
2075
|
-
* A component for outputting determinate progress
|
2076
|
-
*
|
2077
|
-
*/
|
2078
|
-
|
2079
|
-
/**
|
2080
|
-
* @namespace fabric
|
2081
|
-
*/
|
2082
|
-
var fabric = fabric || {};
|
2083
|
-
/**
|
2084
|
-
*
|
2085
|
-
* @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator
|
2086
|
-
* @constructor
|
2087
|
-
*/
|
2088
|
-
fabric.ProgressIndicator = function(container) {
|
2089
|
-
this.container = container;
|
2090
|
-
this.cacheDOM();
|
2091
|
-
};
|
2092
|
-
|
2093
|
-
fabric.ProgressIndicator.prototype = (function() {
|
2094
|
-
|
2095
|
-
var _progress;
|
2096
|
-
var _width;
|
2097
|
-
var _itemName;
|
2098
|
-
var _total;
|
2099
|
-
var _itemDescription;
|
2100
|
-
var _progressBar;
|
2101
|
-
|
2102
|
-
/**
|
2103
|
-
* Sets the progress percentage for a determinate
|
2104
|
-
* operation. Either use this or setProgress
|
2105
|
-
* and setTotal as setProgressPercent assumes
|
2106
|
-
* you've done a percentage calculation before
|
2107
|
-
* injecting it into the function
|
2108
|
-
* @param {number} percent - a floating point number from 0 to 1
|
2109
|
-
*/
|
2110
|
-
var setProgressPercent = function(percent) {
|
2111
|
-
_progressBar.style.width = Math.round(_width * percent) + "px";
|
2112
|
-
};
|
2113
|
-
|
2114
|
-
/**
|
2115
|
-
* Sets the progress for a determinate operation.
|
2116
|
-
* Use this in combination with setTotal.
|
2117
|
-
* @param {number} progress
|
2118
|
-
*/
|
2119
|
-
var setProgress = function(progress) {
|
2120
|
-
_progress = progress;
|
2121
|
-
var percentage = _progress / _total;
|
2122
|
-
this.setProgressPercent(percentage);
|
2123
|
-
};
|
2124
|
-
|
2125
|
-
/**
|
2126
|
-
* Sets the total file size, etc. for a
|
2127
|
-
* determinate operation. Use this in
|
2128
|
-
* combination with setProgress
|
2129
|
-
* @param {number} total
|
2130
|
-
*/
|
2131
|
-
var setTotal = function(total) {
|
2132
|
-
_total = total;
|
2133
|
-
};
|
2134
|
-
|
2135
|
-
/**
|
2136
|
-
* Sets the text for the title or label
|
2137
|
-
* of an instance
|
2138
|
-
* @param {string} name
|
2139
|
-
*/
|
2140
|
-
var setName = function(name) {
|
2141
|
-
_itemName.innerHTML = name;
|
2142
|
-
};
|
2143
|
-
|
2144
|
-
/**
|
2145
|
-
* Sets the text for a description
|
2146
|
-
* of an instance
|
2147
|
-
* @param {string} name
|
2148
|
-
*/
|
2149
|
-
var setDescription = function(description) {
|
2150
|
-
_itemDescription.innerHTML = description;
|
2151
|
-
};
|
2152
|
-
|
2153
|
-
/**
|
2154
|
-
* caches elements and values of the component
|
2155
|
-
*
|
2156
|
-
*/
|
2157
|
-
var cacheDOM = function() {
|
2158
|
-
_itemName = this.container.querySelector('.ms-ProgressIndicator-itemName') || null; //an itemName element is optional
|
2159
|
-
_itemDescription = this.container.querySelector('.ms-ProgressIndicator-itemDescription') || null; //an itemDescription element is optional
|
2160
|
-
_progressBar = this.container.querySelector('.ms-ProgressIndicator-progressBar');
|
2161
|
-
_width = this.container.querySelector('.ms-ProgressIndicator-itemProgress').offsetWidth;
|
2162
|
-
};
|
2163
|
-
|
2164
|
-
return {
|
2165
|
-
setProgressPercent: setProgressPercent,
|
2166
|
-
setName: setName,
|
2167
|
-
setDescription: setDescription,
|
2168
|
-
setProgress: setProgress,
|
2169
|
-
setTotal: setTotal,
|
2170
|
-
cacheDOM: cacheDOM
|
2171
|
-
};
|
2172
|
-
}());
|
2173
|
-
|
2174
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2175
|
-
|
2176
|
-
/**
|
2177
|
-
* SearchBox Plugin
|
2178
|
-
*
|
2179
|
-
* Adds basic demonstration functionality to .ms-SearchBox components.
|
2180
|
-
*
|
2181
|
-
* @param {jQuery Object} One or more .ms-SearchBox components
|
2182
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
2183
|
-
*/
|
2184
|
-
(function ($) {
|
2185
|
-
$.fn.SearchBox = function () {
|
2186
|
-
|
2187
|
-
/** Iterate through each text field provided. */
|
2188
|
-
return this.each(function () {
|
2189
|
-
// Set cancel to false
|
2190
|
-
var cancel = false;
|
2191
|
-
var $searchField = $(this).find('.ms-SearchBox-field');
|
2192
|
-
|
2193
|
-
/** SearchBox focus - hide label and show cancel button */
|
2194
|
-
$searchField.on('focus', function() {
|
2195
|
-
/** Hide the label on focus. */
|
2196
|
-
$(this).siblings('.ms-SearchBox-label').hide();
|
2197
|
-
// Show cancel button by adding is-active class
|
2198
|
-
$(this).parent('.ms-SearchBox').addClass('is-active');
|
2199
|
-
});
|
2200
|
-
|
2201
|
-
/** 'hovering' class allows for more fine grained control of hover state */
|
2202
|
-
$searchField.on('mouseover', function() {
|
2203
|
-
$searchField.addClass('hovering');
|
2204
|
-
});
|
2205
|
-
|
2206
|
-
$searchField.on('mouseout', function() {
|
2207
|
-
$searchField.removeClass('hovering');
|
2208
|
-
});
|
2209
|
-
|
2210
|
-
// If cancel button is selected, change cancel value to true
|
2211
|
-
$(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
|
2212
|
-
cancel = true;
|
2213
|
-
});
|
2214
|
-
|
2215
|
-
/** Show the label again when leaving the field. */
|
2216
|
-
$(this).find('.ms-SearchBox-field').on('blur', function() {
|
2217
|
-
|
2218
|
-
// If cancel button is selected remove the text and show the label
|
2219
|
-
if (cancel) {
|
2220
|
-
$(this).val('');
|
2221
|
-
$searchField.addClass('hovering');
|
2222
|
-
}
|
2223
|
-
|
2224
|
-
var $searchBox = $(this).parent('.ms-SearchBox');
|
2225
|
-
// Prevents inputfield from gaining focus too soon
|
2226
|
-
setTimeout(function() {
|
2227
|
-
// Remove is-active class - hides cancel button
|
2228
|
-
$searchBox.removeClass('is-active');
|
2229
|
-
}, 10);
|
2230
|
-
|
2231
|
-
/** Only do this if no text was entered. */
|
2232
|
-
if ($(this).val().length === 0 ) {
|
2233
|
-
$(this).siblings('.ms-SearchBox-label').show();
|
2234
|
-
}
|
2235
|
-
|
2236
|
-
// Reset cancel to false
|
2237
|
-
cancel = false;
|
2238
|
-
});
|
2239
|
-
});
|
2240
|
-
|
2241
|
-
};
|
2242
|
-
})(jQuery);
|
2243
|
-
|
2244
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2245
|
-
|
2246
|
-
/**
|
2247
|
-
* Spinner Component
|
2248
|
-
*
|
2249
|
-
* An animating activity indicator.
|
2250
|
-
*
|
2251
|
-
*/
|
2252
|
-
|
2253
|
-
/**
|
2254
|
-
* @namespace fabric
|
2255
|
-
*/
|
2256
|
-
var fabric = fabric || {};
|
2257
|
-
|
2258
|
-
/**
|
2259
|
-
* @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
|
2260
|
-
*/
|
2261
|
-
|
2262
|
-
fabric.Spinner = function(target) {
|
2263
|
-
|
2264
|
-
var _target = target;
|
2265
|
-
var eightSize = 0.2;
|
2266
|
-
var circleObjects = [];
|
2267
|
-
var animationSpeed = 90;
|
2268
|
-
var interval;
|
2269
|
-
var spinner;
|
2270
|
-
var numCircles;
|
2271
|
-
var offsetSize;
|
2272
|
-
var fadeIncrement = 0;
|
2273
|
-
var parentSize = 20;
|
2274
|
-
|
2275
|
-
/**
|
2276
|
-
* @function start - starts or restarts the animation sequence
|
2277
|
-
* @memberOf fabric.Spinner
|
2278
|
-
*/
|
2279
|
-
function start() {
|
2280
|
-
stop();
|
2281
|
-
interval = setInterval(function() {
|
2282
|
-
var i = circleObjects.length;
|
2283
|
-
while(i--) {
|
2284
|
-
_fade(circleObjects[i]);
|
2285
|
-
}
|
2286
|
-
}, animationSpeed);
|
2287
|
-
}
|
2288
|
-
|
2289
|
-
/**
|
2290
|
-
* @function stop - stops the animation sequence
|
2291
|
-
* @memberOf fabric.Spinner
|
2292
|
-
*/
|
2293
|
-
function stop() {
|
2294
|
-
clearInterval(interval);
|
2295
|
-
}
|
2296
|
-
|
2297
|
-
//private methods
|
2298
|
-
|
2299
|
-
function _init() {
|
2300
|
-
_setTargetElement();
|
2301
|
-
_setPropertiesForSize();
|
2302
|
-
_createCirclesAndArrange();
|
2303
|
-
_initializeOpacities();
|
2304
|
-
start();
|
2305
|
-
}
|
2306
|
-
|
2307
|
-
function _initializeOpacities() {
|
2308
|
-
var i = 0;
|
2309
|
-
var j = 1;
|
2310
|
-
var opacity;
|
2311
|
-
fadeIncrement = 1 / numCircles;
|
2312
|
-
|
2313
|
-
for (i; i < numCircles; i++) {
|
2314
|
-
var circleObject = circleObjects[i];
|
2315
|
-
opacity = (fadeIncrement * j++);
|
2316
|
-
_setOpacity(circleObject.element, opacity);
|
2317
|
-
}
|
2318
|
-
}
|
2319
|
-
|
2320
|
-
function _fade(circleObject) {
|
2321
|
-
var opacity = _getOpacity(circleObject.element) - fadeIncrement;
|
2322
|
-
|
2323
|
-
if (opacity <= 0) {
|
2324
|
-
opacity = 1;
|
2325
|
-
}
|
2326
|
-
|
2327
|
-
_setOpacity(circleObject.element, opacity);
|
2328
|
-
}
|
2329
|
-
|
2330
|
-
function _getOpacity(element) {
|
2331
|
-
return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity"));
|
2332
|
-
}
|
2333
|
-
|
2334
|
-
function _setOpacity(element, opacity) {
|
2335
|
-
element.style.opacity = opacity;
|
2336
|
-
}
|
2337
|
-
|
2338
|
-
function _createCircle() {
|
2339
|
-
var circle = document.createElement('div');
|
2340
|
-
circle.className = "ms-Spinner-circle";
|
2341
|
-
circle.style.width = circle.style.height = parentSize * offsetSize + "px";
|
2342
|
-
return circle;
|
2343
|
-
}
|
2344
|
-
|
2345
|
-
function _createCirclesAndArrange() {
|
2346
|
-
|
2347
|
-
var angle = 0;
|
2348
|
-
var offset = parentSize * offsetSize;
|
2349
|
-
var step = (2 * Math.PI) / numCircles;
|
2350
|
-
var i = numCircles;
|
2351
|
-
var circleObject;
|
2352
|
-
var radius = (parentSize - offset) * 0.5;
|
2353
|
-
|
2354
|
-
while (i--) {
|
2355
|
-
var circle = _createCircle();
|
2356
|
-
var x = Math.round(parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;
|
2357
|
-
var y = Math.round(parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5;
|
2358
|
-
spinner.appendChild(circle);
|
2359
|
-
circle.style.left = x + 'px';
|
2360
|
-
circle.style.top = y + 'px';
|
2361
|
-
angle += step;
|
2362
|
-
circleObject = { element:circle, j:i };
|
2363
|
-
circleObjects.push(circleObject);
|
2364
|
-
}
|
2365
|
-
}
|
2366
|
-
|
2367
|
-
function _setPropertiesForSize() {
|
2368
|
-
if (spinner.className.indexOf("large") > -1) {
|
2369
|
-
parentSize = 28;
|
2370
|
-
eightSize = 0.179;
|
2371
|
-
}
|
2372
|
-
|
2373
|
-
offsetSize = eightSize;
|
2374
|
-
numCircles = 8;
|
2375
|
-
}
|
2376
|
-
|
2377
|
-
function _setTargetElement() {
|
2378
|
-
//for backwards compatibility
|
2379
|
-
if (_target.className.indexOf("ms-Spinner") === -1) {
|
2380
|
-
spinner = document.createElement("div");
|
2381
|
-
spinner.className = "ms-Spinner";
|
2382
|
-
_target.appendChild(spinner);
|
2383
|
-
} else {
|
2384
|
-
spinner = _target;
|
2385
|
-
}
|
2386
|
-
}
|
2387
|
-
|
2388
|
-
_init();
|
2389
|
-
|
2390
|
-
return {
|
2391
|
-
start:start,
|
2392
|
-
stop:stop
|
2393
|
-
};
|
2394
|
-
};
|
2395
|
-
|
2396
|
-
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
2397
|
-
|
2398
|
-
/**
|
2399
|
-
* Text Field Plugin
|
2400
|
-
*
|
2401
|
-
* Adds basic demonstration functionality to .ms-TextField components.
|
2402
|
-
*
|
2403
|
-
* @param {jQuery Object} One or more .ms-TextField components
|
2404
|
-
* @return {jQuery Object} The same components (allows for chaining)
|
2405
|
-
*/
|
2406
|
-
(function ($) {
|
2407
|
-
$.fn.TextField = function () {
|
2408
|
-
|
2409
|
-
/** Iterate through each text field provided. */
|
2410
|
-
return this.each(function () {
|
2411
|
-
|
2412
|
-
/** Does it have a placeholder? */
|
2413
|
-
if ($(this).hasClass("ms-TextField--placeholder")) {
|
2414
|
-
|
2415
|
-
/** Hide the label on click. */
|
2416
|
-
$(this).on('click', function () {
|
2417
|
-
$(this).find('.ms-Label').hide();
|
2418
|
-
});
|
2419
|
-
|
2420
|
-
/** Hide the label on focus. */
|
2421
|
-
$(this).find('.ms-TextField-field').on('focus', function () {
|
2422
|
-
$(this).siblings('.ms-Label').hide();
|
2423
|
-
});
|
2424
|
-
|
2425
|
-
/** Show the label again when leaving the field. */
|
2426
|
-
$(this).find('.ms-TextField-field').on('blur', function () {
|
2427
|
-
|
2428
|
-
/** Only do this if no text was entered. */
|
2429
|
-
if ($(this).val().length === 0) {
|
2430
|
-
$(this).siblings('.ms-Label').show();
|
2431
|
-
}
|
2432
|
-
});
|
2433
|
-
}
|
2434
|
-
|
2435
|
-
/** Underlined - adding/removing a focus class */
|
2436
|
-
if ($(this).hasClass('ms-TextField--underlined')) {
|
2437
|
-
|
2438
|
-
/** Add is-active class - changes border color to theme primary */
|
2439
|
-
$(this).find('.ms-TextField-field').on('focus', function() {
|
2440
|
-
$(this).parent('.ms-TextField--underlined').addClass('is-active');
|
2441
|
-
});
|
2442
|
-
|
2443
|
-
/** Remove is-active on blur of textfield */
|
2444
|
-
$(this).find('.ms-TextField-field').on('blur', function() {
|
2445
|
-
$(this).parent('.ms-TextField--underlined').removeClass('is-active');
|
2446
|
-
});
|
2447
|
-
}
|
2448
|
-
|
2449
|
-
});
|
2450
|
-
};
|
2451
|
-
})(jQuery);
|