-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathinterface.html
278 lines (268 loc) · 13.3 KB
/
interface.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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<form class="form-horizontal">
<div class="spinner-holder animated">
<div class="spinner-overlay">Loading...</div>
</div>
<div class="link-wrapper">
{{#if options.label}}
<div class="form-group clearfix">
<div class="col-sm-4 control-label">
<label for="linkLabel">Link label</label>
</div>
<div class="col-sm-8">
<input type="text" name="linkLabel" class="form-control" id="linkLabel" placeholder="Label" value="{{linkLabel}}" required />
</div>
</div>
{{/if}}
<div id="link-action" {{#if options.hideAction}} class="hidden" {{/if}}>
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="action">{{#if options.actionLabel}}{{options.actionLabel}}{{else}}Link action{{/if}}</label>
</div>
<div class="col-sm-8">
<label for="action" class="select-proxy-display">
<select name="link_type" id="action" data-label="select" class="hidden-select form-control action-configurator">
<option value="none">None</option>
<option value="screen">Display another screen</option>
<option value="back">Go back to previous screen</option>
<option value="url">Open a web page</option>
<option value="document">Open a document</option>
<option value="video">Play a video</option>
<option value="about-overlay">Open the about this app overlay</option>
<option value="app">Link to an external application</option>
<option value="exit-app">Return to app list</option>
<option value="logout">Log out</option>
<option value="runFunction">Call a JavaScript Function</option>
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
<div class="text-right">
<a href="#" id="showVariables" class="hidden">Show available variables</a>
<a href="#" id="hideVariables" class="hidden">Hide available variables</a>
</div>
</div>
</div>
</div>
<section id="runFunctionSection" data-key="runFunction">
<div id="variablesContainer" class="variables hidden">
<div id="availableVariables" class="availableVariables"></div>
<div class="text-right">
<a href="#">Learn more about variables <i class="fa fa-question-circle" ref="tooltip" data-viewport=".modal-body" data-toggle="tooltip" data-placement="left" title="Coming soon ..."></i></a>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="functionStr">Javascript Function</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="function_name" id="functionStr" placeholder="e.g.myFunction" />
<p class="error-success-message"></p>
<div class="text-right">
<a href="https://developers.fliplet.com/API/core/navigate.html#define-a-javascript-function-as-action">How to define a function</a>
</div>
</div>
</div>
</section>
<section id="logoutSection" data-key="logout">
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="logoutAction">After the user is logged out...</label>
</div>
<div class="col-sm-8">
<label for="logoutAction" class="select-proxy-display">
<select id="logoutAction" data-label="select" class="hidden-select form-control action-configurator">
<option value="screen">Display another screen</option>
<option value="exit-app">Return to app list</option>
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
</div>
</div>
</section>
<section id="screenSection" data-key="screen">
<div id="screen-form">
<div id="screen-list" class="form-group">
<div class="col-sm-4 control-label">
<label for="page">Select a screen {{#if options.pageRequired}}(Required){{/if}}</label>
</div>
<div class="col-sm-8">
<label for="page" class="select-proxy-display">
<select id="page" name="link_screen" data-label="select" class="hidden-select form-control">
<option value="none">Select a screen</option>
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
<a id="add-query" href="#">Add query parameters</a>
</div>
</div>
<div class="form-group" id="query-form">
<div class="col-sm-4 control-label">
<label for="query">Add query parameters</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="query" id="query" placeholder="Enter query (e.g. ?variable1=value1&variable2=value2)" />
<p class="help-block">This needs to be URL encoded - <a target="_blank" href="http://meyerweb.com/eric/tools/dencoder/">URL encoding tool</a></p>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="transition">Select an animation</label>
</div>
<div class="col-sm-8">
<label for="transition" class="select-proxy-display">
<select name="transition" id="transition" data-label="select" class="hidden-select form-control">
<optgroup label="Default">
<option value="none">None</option>
<option value="fade">Fade</option>
<option value="slide.left">Slide Left</option>
<option value="slide.right">Slide Right</option>
<option value="slide.up">Slide Up</option>
<option value="slide.down">Slide Down</option>
<option value="flip.left">Flip Left / Slide Left (Windows)</option>
<option value="flip.right">Flip Right / Slide Right (Windows)</option>
<option value="flip.up">Flip Up / Slide Up (Windows)</option>
<option value="flip.down">Flip Down / Slide Down (Windows)</option>
</optgroup>
<optgroup label="iOS Enhanced">
<option value="curl.up">Curl Up (iOS) / Slide Up (Android/Windows)</option>
<option value="curl.down">Curl Down (iOS) / Slide Down (Android/Windows)</option>
</optgroup>
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
</div>
</div>
</div>
</section>
<section id="urlSection" data-key="url">
<div id="webpage-form">
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="url">Web page</label>
</div>
<div class="col-sm-8">
<input type="url" class="form-control" name="link_url" id="url" placeholder="Enter a URL, e.g. http://example.com" />
</div>
</div>
</div>
</section>
<section id="documentSection" data-key="document">
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="add-document">Select a document</label>
</div>
<div class="col-sm-8">
<div class="file-holder document">
<div class="btn btn-default add-document">{{#unless files.id}}Browse your media library{{else}}Replace document{{/unless}}</div>
<div class="info-holder {{#unless files.id}}hidden{{/unless}}">
<div class="file-title"><i class="fa fa-file" aria-hidden="true"></i> <span>{{files.name}}</span></div>
<div class="btn btn-link text-danger document-remove"><i class="fa fa-trash" aria-hidden="true"></i> Remove</div>
</div>
</div>
<p class="help-block">Embedded documents will be opened within your app on iOS devices, but will ask to select a file reader on Android devices.</p>
</div>
</div>
</section>
<section id="videoSection" data-key="video">
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="add-document">Select a video</label>
</div>
<div class="col-sm-8">
<div class="file-holder video">
<div class="btn btn-default add-video">{{#unless files.id}}Browse your media library{{else}}Replace video{{/unless}}</div>
<div class="info-holder {{#unless files.id}}hidden{{/unless}}">
<div class="file-title"><i class="fa fa-file-video-o" aria-hidden="true"></i> <span>{{files.name}}</span></div>
<div class="btn btn-link text-danger video-remove"><i class="fa fa-trash" aria-hidden="true"></i> Remove</div>
</div>
</div>
<p class="help-block">When the user taps to play the video, it will be displayed within your app using a video player.</p>
</div>
</div>
</section>
<section id="appSection" data-key="app">
<div class="form-group">
<div class="col-sm-4 control-label">
<label for="appAction">Select the app and action</label>
</div>
<div class="col-sm-8">
<label for="appAction" class="select-proxy-display">
<select id="appAction" name="appAction" data-label="select" class="hidden-select form-control">
<option value="">Select one</option>
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
</div>
</div>
<div class="form-group appLinkFields appGDriveFolder">
<div class="col-sm-4 control-label">
<label for="appGDriveFolder">Enter the full URL of the Google Drive folder</label>
</div>
<div class="col-sm-8">
<input type="text" id="appGDriveFolder" name="appGDriveFolder" class="form-control" />
<p class="help-block"><small>E.g. <code>https://drive.google.com/drive/u/0/folders/xxxxxxxx</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
<div class="form-group appLinkFields appGDriveDocument">
<div class="col-sm-4 control-label">
<label for="appGDriveDocument">Enter the shareable link of the Google Drive document</label>
<p class="help-block"><small>You can get this link by right clicking the document you want and select <strong>Get shareable link</strong>.</small></p>
<p class="text-warning"><small>Note that editing the document is only possible if you choose to open with the Google Docs application</small></p>
</div>
<div class="col-sm-8">
<input type="text" id="appGDriveDocument" name="appGDriveDocument" class="form-control" />
<p class="help-block"><small>E.g. <code>https://drive.google.com/open?id=xxxxxxxx</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
<div class="form-group appLinkFields appGoogleDocument">
<div class="col-sm-4 control-label">
<label for="appGoogleDocument">Enter the full URL of the Google Document</label>
</div>
<div class="col-sm-8">
<input type="text" id="appGoogleDocument" name="appGoogleDocument" class="form-control" />
<p class="help-block"><small>E.g. <code>https://docs.google.com/document/d/xxxxxxxx</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
<div class="form-group appLinkFields appGoogleSheets">
<div class="col-sm-4 control-label">
<label for="appGoogleSheets">Enter the full URL of the Google Spreadsheet</label>
</div>
<div class="col-sm-8">
<input type="text" id="appGoogleSheets" name="appGoogleSheets" class="form-control" />
<p class="help-block"><small>E.g. <code>https://docs.google.com/spreadsheets/d/xxxxxxxx</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
<div class="form-group appLinkFields appGooglePresentation">
<div class="col-sm-4 control-label">
<label for="appGooglePresentation">Enter the full URL of the Google Slides</label>
</div>
<div class="col-sm-8">
<input type="text" id="appGooglePresentation" name="appGooglePresentation" class="form-control" />
<p class="help-block"><small>E.g. <code>https://docs.google.com/presentation/d/xxxxxxxx</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
<div class="form-group appLinkFields appGmail">
<div class="col-sm-4 control-label">
<label>Configure the email template</label>
</div>
<div class="col-sm-8">
<div class="btn btn-default configureEmailTemplate">Configure</div>
</div>
</div>
</section>
<div class="form-group appLinkFields appGoogleChromeWebsite">
<div class="col-sm-4 control-label">
<label for="appGoogleChromeWebsite">Enter the URL of the website to open</label>
</div>
<div class="col-sm-8">
<input type="text" id="appGoogleChromeWebsite" name="appGoogleChromeWebsite" class="form-control" />
<p class="help-block"><small>E.g. <code>https://example.org</code></small></p>
<p class="error-success-message"></p>
</div>
</div>
</div>
</form>