/
index.html
234 lines (220 loc) · 14.9 KB
/
index.html
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" type="text/css" href="../../../../src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../../../../src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="../../../../src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="../../../../src/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="../../../../src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="../../../../demos/uiOptions/css/uiOptions.css" />
<link rel="stylesheet" type="text/css" href="css/usingGrades.css" />
<title>Preferences Editor: Using Grades</title>
<script type="text/javascript" src="../../../../src/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../../../src/lib/jquery/ui/js/version.js"></script>
<script type="text/javascript" src="../../../../src/lib/jquery/ui/js/keycode.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/DataSource.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidPromises.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/RemoteModel.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/ModelTransformation.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/ModelTransformationTransforms.js"></script>
<script type="text/javascript" src="../../../../src/framework/enhancement/js/ContextAwareness.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/ResourceLoader.js"></script>
<script type="text/javascript" src="../../../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="../../../../src/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="../../../../src/framework/core/js/MessageResolver.js"></script>
<script type="text/javascript" src="../../../../src/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="../../../../src/framework/renderer/js/RendererUtilities.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/URLUtilities.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/Store.js"></script>
<script type="text/javascript" src="../../../../src/components/textfieldControl/js/Textfield.js"></script>
<script type="text/javascript" src="../../../../src/components/textfieldControl/js/TextfieldStepper.js"></script>
<script type="text/javascript" src="../../../../src/components/switch/js/Switch.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/UIEnhancer.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/ArrowScrolling.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/PrefsEditor.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/Panels.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/Enactors.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/StarterGrades.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/SeparatedPanelPrefsEditor.js"></script>
<script type="text/javascript" src="../../../../src/components/slidingPanel/js/SlidingPanel.js"></script>
<script type="text/javascript" src="../../../../src/components/tableOfContents/js/TableOfContents.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/PrimaryBuilder.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/AuxBuilder.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/StarterSchemas.js"></script>
<script type="text/javascript" src="../../../../src/framework/preferences/js/Builder.js"></script>
<script type="text/javascript" src="js/prefsEditorSeparatedPanel.js"></script>
</head>
<body class="prefsEditor-example-theme fl-focus">
<!-- The page-wide UI Enhancer needs to be initialized right away -->
<script type="text/javascript">
$(document).ready(function () {
example.initSettingsStore();
example.initPageEnhancer();
example.initPrefsEditor(".flc-prefsEditor-separatedPanel");
})
</script>
<!-- BEGIN markup for Preferences Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<!--
This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
A separate panel bar for mobile displays is needed to preserver the correct tab order.
-->
<div class="fl-panelBar fl-panelBar-smallScreen">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
<!-- This is the div that will contain the Preference Editor component -->
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<!--
This div is for the sliding panel bar that shows and hides the Preference Editor controls in the desktop view.
A separate panel bar for desktop displays is needed to preserver the correct tab order.
-->
<div class="fl-panelBar fl-panelBar-wideScreen">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
</div>
<!-- END markup for Preferences Editor -->
<main class="fl-centered">
<div class="flc-toc-tocContainer toc"> </div>
<div>
<h1>Preferences Editor</h1>
<div class="tagline">This page might be a bit difficult to read or use.<br />
Why don't you consider using the <span class="disp-pref">display preferences</span> option?</div>
</div>
<div class="instructions">
<h2>Some helpful tips</h2>
<ol>
<li>Preferences Editor and its different configurations.<br/>
<span class="instruction-comment">On this page, Preferences Editor can be found along the top edge.
There are other layout options in development - see <a href="http://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+Wireframes%2C+C.1" target="_blank" title="Opens in new window">Preferences Editor Design Wireframes</a>.</span></li>
<li>Try tinkering with the options.</li>
</ol>
</div>
<div class="example-columns content">
<div class="example-column">
<h2>Introduction</h2>
<img src="../../../../demos/uiOptions/images/photo_orange.png" alt="an orange"/>
<p>
Aliquam varius lacus non arcu venenatis scelerisque quis in sapien.
Curabitur nec felis tortor.
Cras euismod ipsum erat.
Sed ac lacus dolor, sed vestibulum sem.
<a href="#">Donec tristique</a> lacinia augue.
In mollis venenatis mollis.
Duis facilisis fermentum accumsan.
Quisque aliquet eros at nunc volutpat euismod.
</p>
<p>
Pellentesque dictum mattis sapien a consectetur.
In <a href="#">hac habitasse</a> platea dictumst.
Integer pharetra accumsan euismod.
Morbi congue leo eu diam bibendum luctus.
Ut quam orci, rhoncus sed fermentum eget, tempus rhoncus justo.
Donec gravida lorem vel orci aliquam vitae tristique ipsum pulvinar.
Sed lorem orci, gravida ac tristique at, aliquam eget massa.
</p>
<p>
In diam lorem, consequat vel lobortis non, pretium in leo.
Cras ut dolor ac nunc pharetra venenatis id at orci.
Nam a nibh id lectus dignissim molestie.
Donec est arcu, luctus eu tempor quis, posuere non risus.
</p>
<h2>Why do oranges taste better than apples?</h2>
<p>
Aliquam mattis placerat odio.
Aliquam sodales euismod sodales.
Integer mollis nulla eget quam imperdiet vitae elementum sapien adipiscing.
</p>
</div>
<div class="example-column">
<p>
Sed tempus laoreet facilisis.
Curabitur at augue in justo tincidunt cursus.
Aliquam iaculis libero vel dolor fringilla a rutrum nisl tempus.
</p>
<p>
Cras lorem nulla, tincidunt nec dapibus id, interdum pellentesque elit.
Sed faucibus posuere augue, ac vehicula dolor feugiat id.
Ut scelerisque mollis aliquam.
Nulla facilisi.
Vestibulum porttitor pulvinar mauris et placerat.
Donec ultrices, eros eget pharetra eleifend, risus orci iaculis leo, nec facilisis nisi odio et nunc.
</p>
<p>
<a href="#">Sed varius sem sed sapien cursus</a> vel iaculis nisl rhoncus.
Fusce placerat sapien ut erat mollis vestibulum.
Aenean eget tellus sem.
</p>
<h2>Some people actually prefer apples</h2>
<img src="../../../../demos/uiOptions/images/photo_apple.png" alt="an apple"/>
<p>
Praesent vulputate, sem vel feugiat iaculis, eros diam condimentum nisl, eget suscipit nunc est vitae justo.
Vivamus imperdiet convallis laoreet.
Quisque eget magna vitae tortor egestas imperdiet.
</p>
<p>
Donec at ipsum magna.
Suspendisse potenti.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris <a href="#">vel eros eu purus</a> sodales rutrum.
Suspendisse potenti.
</p>
</div>
<div class="example-column">
<p>
Fusce vel massa vitae dui sollicitudin adipiscing eget sed velit.
Fusce auctor vehicula turpis non faucibus.
Sed faucibus mollis enim venenatis mollis.
Morbi cursus scelerisque ornare.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras at cursus nisl.
</p>
<h2>Conclusion: Oranges are still yummier</h2>
<p>
Praesent consequat laoreet tellus, quis molestie dui pretium sit amet.
Donec et turpis vitae tortor blandit tristique eu sed justo.
Fusce in quam sem, ac hendrerit nisl.
<a href="#">Mauris consequat tellus in est vehicula placerat.</a>
Sed sed ornare quam.
Quisque vel faucibus augue.
Donec euismod tellus a risus fringilla congue.
Proin feugiat, mauris ut ullamcorper pharetra, sem nulla lacinia nunc, ut hendrerit justo urna malesuada libero.
Pellentesque viverra fringilla arcu, consectetur interdum sapien tempus sed.
Donec tincidunt consequat libero, quis vulputate magna ullamcorper.
</p>
</div>
<div class="example-column">
<h2>Leave some feedback</h2>
<form class="feedback-form">
<div>
<label for="email">Email address <span class="optional">(optional)</span></label>
<input type="text" id="email" value="This form is non-functional" />
</div>
<div>
<label for="comments">Your comments</label>
<textarea id="comments">This form is non-functional, and exists only for demonstrating Preferences Editorfunctionality</textarea>
</div>
<div>
<button class="fl-force-right" disabled>Send</button>
</div>
</form>
</div>
</div>
</main>
</body>
</html>