| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172 |
16x
16x
16x
16x
8x
16x
68x
16x
32x
32x
16x
68x
68x
| /*
Copyright 2011-2015 OCAD University
Copyright 2011 Lucendo Development Ltd.
Copyright 2016 Raising the Floor - International
Licensed under the Educational Community License (ECL), Version 2.0 or the New
BSD license. You may not use this file except in compliance with one these
Licenses.
You may obtain a copy of the ECL 2.0 License and BSD License at
https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
*/
var fluid_3_0_0 = fluid_3_0_0 || {};
(function ($, fluid) {
"use strict";
/**********************
* Sliding Panel *
*********************/
fluid.defaults("fluid.slidingPanel", {
gradeNames: ["fluid.viewComponent"],
selectors: {
panel: ".flc-slidingPanel-panel",
toggleButton: ".flc-slidingPanel-toggleButton",
toggleButtonLabel: ".flc-slidingPanel-toggleButton"
},
strings: {
showText: "show",
hideText: "hide",
panelLabel: "panel"
},
events: {
onPanelHide: null,
onPanelShow: null,
afterPanelHide: null,
afterPanelShow: null
},
listeners: {
"onCreate.bindClick": {
"this": "{that}.dom.toggleButton",
"method": "click",
"args": ["{that}.togglePanel"]
},
"onCreate.bindModelChange": {
listener: "{that}.applier.modelChanged.addListener",
args: ["isShowing", "{that}.refreshView"]
},
"onCreate.setAriaProps": "{that}.setAriaProps",
"onCreate.setInitialState": {
listener: "{that}.refreshView"
},
"onPanelHide.setText": {
"this": "{that}.dom.toggleButtonLabel",
"method": "text",
"args": ["{that}.options.strings.showText"],
"priority": "first"
},
"onPanelHide.setAriaLabel": {
"this": "{that}.dom.toggleButtonLabel",
"method": "attr",
"args": ["aria-label", "{that}.options.strings.showTextAriaLabel"]
},
"onPanelShow.setText": {
"this": "{that}.dom.toggleButtonLabel",
"method": "text",
"args": ["{that}.options.strings.hideText"],
"priority": "first"
},
"onPanelShow.setAriaLabel": {
"this": "{that}.dom.toggleButtonLabel",
"method": "attr",
"args": ["aria-label", "{that}.options.strings.hideTextAriaLabel"]
},
"onPanelHide.operate": {
listener: "{that}.operateHide"
},
"onPanelShow.operate": {
listener: "{that}.operateShow"
},
"onCreate.setAriaStates": "{that}.setAriaStates"
},
members: {
panelId: {
expander: {
// create an id for panel
// and set that.panelId to the id value
funcName: "fluid.allocateSimpleId",
args: "{that}.dom.panel"
}
}
},
model: {
isShowing: false
},
modelListeners: {
"isShowing": {
funcName: "{that}.setAriaStates",
excludeSource: "init"
}
},
invokers: {
operateHide: {
"this": "{that}.dom.panel",
"method": "slideUp",
"args": ["{that}.options.animationDurations.hide", "{that}.events.afterPanelHide.fire"]
},
operateShow: {
"this": "{that}.dom.panel",
"method": "slideDown",
"args": ["{that}.options.animationDurations.show", "{that}.events.afterPanelShow.fire"]
},
hidePanel: {
func: "{that}.applier.change",
args: ["isShowing", false]
},
showPanel: {
func: "{that}.applier.change",
args: ["isShowing", true]
},
setAriaStates: {
funcName: "fluid.slidingPanel.setAriaStates",
args: ["{that}", "{that}.model.isShowing"]
},
setAriaProps: {
funcName: "fluid.slidingPanel.setAriaProperties",
args: ["{that}", "{that}.panelId"]
},
togglePanel: {
funcName: "fluid.slidingPanel.togglePanel",
args: ["{that}"]
},
refreshView: {
funcName: "fluid.slidingPanel.refreshView",
args: ["{that}"]
}
},
animationDurations: {
hide: 400,
show: 400
}
});
fluid.slidingPanel.togglePanel = function (that) {
that.applier.change("isShowing", !that.model.isShowing);
};
fluid.slidingPanel.refreshView = function (that) {
that.events[that.model.isShowing ? "onPanelShow" : "onPanelHide"].fire();
};
// panelId is passed in to ensure that it is evaluated before this
// function is called.
fluid.slidingPanel.setAriaProperties = function (that, panelId) {
that.locate("toggleButton").attr({
"role": "button",
"aria-controls": panelId
});
that.locate("panel").attr({
"aria-label": that.options.strings.panelLabel,
"role": "group"
});
};
fluid.slidingPanel.setAriaStates = function (that, isShowing) {
that.locate("toggleButton").attr("aria-pressed", isShowing);
that.locate("panel").attr("aria-expanded", isShowing);
};
})(jQuery, fluid_3_0_0);
|