This repository has been archived by the owner on Aug 2, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcontent_viewer_widget_builder.html
169 lines (154 loc) · 6.12 KB
/
content_viewer_widget_builder.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
<!--
Jive - Content Viewer Widget
Copyright (c) 2015-2016 Fidelity Investments
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
FILE DESCRIPTION
This is the builder application that presents a front end to users and allows
them to configure a Content Viewer widget with a setup document. The user needs
to complete the configuration and generate the widget code. This code is then
pasted into HTML Widgets on an Overview page to create the content viewer.
WIDGET DESCRIPTION
This Jive HTML widget loads in a Jive setup document with a bullet list representing
the Table of Contents.
-->
<meta name="fidosreg" content="b764a0a9536448345dc227af95e192521d337b5e4c3560c859b89ecd0407004a">
<script src='JQUERY'></script>
<script>
var jquery_content_id = "0";
var library_loader_content_id = "0";
var $j = jQuery.noConflict();
$j("head").append('<scr'+'ipt src="/api/core/v3/attachments/file/' + library_loader_content_id + '/data"></scr'+'ipt>');
</script>
<script>
$j.load_library('bootstrap.css');
$j.load_library('bootstrap-theme.css');
$j.load_library('spectrum.css');
$j.load_library('content_viewer_widget_builder.css');
$j.load_library('bootstrap.js');
$j.load_library('spectrum.js');
$j.load_library('content_viewer_widget_builder.js');
</script>
<div id='ContentViewerBuilderContainer'>
<div id='builderTitle' class='page-header'>
<h2>Content Viewer Widget Builder</h2>
</div>
<div id='tocDiv'>
<p style='color:#2AABD2;'>Please paste the URL of your Table of Content Document</p>
<form id="tocForm" name="tocForm" onsubmit="return false;">
<input id="docURLInput" type="text" placeholder="ToC Document URL"/>
</form>
<div id='URLStatus' style='color:red;'></div>
<br/>
<div id='toc_layout'>
ToC Layout:
<label class="radio-inline">
<input type="radio" name="toc_layout" id="radios-0" value="vertical" checked="checked">
Vertical
</label>
<label class="radio-inline" for="-">
<input type="radio" name="toc_layout" id="radios-1" value="horizontal">
Horizontal
</label>
</div>
<br/>
<input type="checkbox" name="tocIcons" id="tocIcons" value=true> Show ToC Icons</input>
<br/>
<br/>
<input type="checkbox" name="tocHover" id="tocHover" value=true> Show ToC People and Place Hover Popups</input>
<br/>
<br/>
<button id='nextButton' class='btn btn-info btn-small' onclick='customize()' disabled>Next</button>
</div>
<div id='customizationPage' style="display: none;" class="col-xs-12">
<div class="col-xs-4 color-select">
<br/>
<span id='unselected-item'>Unselected Item</span>
<br/>
<br/>
<b>Text: </b><input id='unselectedTextColor' class="color form-control form-control-inline" value="069">
<br/>
<br/>
<b>Background: </b><input id='unselectedBackgroundColor' class="color form-control form-control-inline" value="f0f0f0">
<br/>
<br/>
<b>Border: </b><input id='unselectedBorderColor' class="color form-control form-control-inline" value="BDBDBD">
<br/>
<br/>
</div>
<div class="col-xs-4 color-select">
<br/>
<span id='hover-item'>Hover Over Item</span>
<br/>
<br/>
<b>Text: </b><input id='hoverTextColor' class="color form-control form-control-inline" value="069">
<br/>
<br/>
<b>Background: </b><input id='hoverBackgroundColor' class="color form-control form-control-inline" value="f0f0f0">
<br/>
<br/>
<b>Border: </b><input id='hoverBorderColor' class="color form-control form-control-inline" value="BDBDBD">
<br/>
<br/>
</div>
<div class="col-xs-4 color-select">
<br/>
<span id='selected-item'>Selected Item</span>
<br/>
<br/>
<b>Text: </b><input id='selectedTextColor' class="color form-control form-control-inline" value="069">
<br/>
<br/>
<b>Background: </b><input id='selectedBackgroundColor' class="color form-control form-control-inline" value="ffffff">
<br/>
<br/>
<b>Border: </b><input id='selectedBorderColor' class="color form-control form-control-inline" value="BDBDBD">
<br/>
<br/>
</div>
<div class="col-xs-12 color-select">
<br/>
<b>Font Size: </b>
<input type="text" id="fontSize" value="12" readonly/>
8<input type="range" min="8" max="32" id="fontSize_slider" value="12"/> 32
<br/>
<br/>
<b>Border Width: </b>
<input type="text" id="borderWidth" value="1" readonly/>
0<input type="range" min="0" max="10" id="borderWidth_slider" value="1"/> 10
<br/>
<br/>
</div>
<div class="col-xs-12">
<br/>
<button class='btn btn-info btn-small' id='pageTwoBackButton' onclick='startOver()'>Back</button>
<button class='btn btn-info btn-small' id='pageTwoNextButton' onclick='finish()'>Next</button>
<br/>
<br/>
</div>
</div>
<div id = 'generatedCodeDiv'>
<p>The Content Viewer uses two widgets to operate. The first widget becomes the <b>Table of Content</b> where users can click the ToC items, and the linked-to content is then loaded into the viewer panel. The second widget code drives the <b>Viewer Panel</b>.</p>
<div id='tocCode'>
<h3>1 - Table of Content</h3>
Paste the below code into an HTML widget that is in a narrow column for vertical ToCs, or a wide column for horizontal ToCs:
<textarea id='tocCodeBox' readonly></textarea>
</div>
<br/>
<div id='viewerCode'>
<h3>2 - Viewer Panel</h3>
Put the below code into another HTML widget that is in a wide enough column that it can display the content without chopping it off:
<textarea id='viewerCodeBox' readonly></textarea>
</div>
<br/>
<button class='btn btn-info btn-small' id='pageTwoBackButton' onclick='customize()'>Back</button>
<button class='btn btn-info btn-small' onclick='startOver()'>Start Over</button>
</div>
</div>