fluffy – Blame information for rev 7
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 1 | <!DOCTYPE html> |
2 | <html> |
||
3 | |||
4 | <head> |
||
5 | <meta charset='utf-8'> |
||
6 | <title>Fluffy</title> |
||
7 | <script src='/node_modules/jquery/dist/jquery.min.js'></script> |
||
8 | <script src='/js/jquery.svg3dtagcloud.min.js'></script> |
||
9 | |||
10 | <!-- Bootstrap CSS --> |
||
11 | <link href='/node_modules/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'> |
||
12 | <link href='/node_modules/bootstrap/dist/css/bootstrap-theme.min.css' rel='stylesheet' type='text/css'> |
||
13 | |||
6 | office | 14 | <!-- FileInput --> |
15 | <link href="/node_modules/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> |
||
16 | <!-- Bootstrap Select --> |
||
17 | <link href="/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css" media="all" rel="stylesheet" type="text/css" /> |
||
1 | office | 18 | |
19 | <!-- Fluffy style --> |
||
20 | <link href='/css/style.css' rel='stylesheet' type='text/css'> |
||
21 | |||
22 | </head> |
||
23 | <body> |
||
24 | <div id='cloud'></div> |
||
6 | office | 25 | <!-- Add and remove buttons --> |
26 | <div class="add" data-toggle="modal" data-target="#addModal">+</div> |
||
27 | <div class="remove" data-toggle="modal" data-target="#removeModal">-</div> |
||
28 | <!-- Add Modal --> |
||
29 | <div id="addModal" class="modal fade" role="dialog"> |
||
1 | office | 30 | <div class="modal-dialog"> |
31 | <!-- Modal content--> |
||
32 | <div class="modal-content"> |
||
33 | <div class="modal-header"> |
||
34 | <button type="button" class="close" data-dismiss="modal">×</button> |
||
35 | <h4 class="modal-title">Add New Service</h4> |
||
36 | </div> |
||
37 | <div class="modal-body"> |
||
38 | <div class="row"> |
||
39 | <div class="col-md-6 col-sm-6 col-xs-12"> |
||
6 | office | 40 | <form id="addService" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST" action="/add"> |
1 | office | 41 | <div class="form-group "> |
42 | <label class="control-label requiredField" for="service-url"> |
||
43 | Service URL |
||
44 | </label> |
||
45 | <input class="form-control" id="service-url" name="service-url" placeholder="http://myservice.tld/" type="text" required/> |
||
46 | <div class="help-block with-errors"> |
||
47 | The URL to link to. |
||
48 | </div> |
||
49 | </div> |
||
50 | <div class="form-group "> |
||
51 | <label class="control-label requiredField" for="service-name"> |
||
52 | Service Name |
||
53 | </label> |
||
54 | <input class="form-control" id="service-name" name="service-name" placeholder="My Service" type="text" required/> |
||
55 | <div class="help-block with-errors"> |
||
56 | The name that should be used for the service. |
||
57 | </div> |
||
58 | </div> |
||
59 | <div class="form-group"> |
||
60 | <label class="control-label requiredField" for="dropzone"> |
||
61 | Service Icon |
||
62 | </label> |
||
6 | office | 63 | <div class="file-loading"> |
64 | <input id="service-icon" name="service-icon" type="file" required> |
||
1 | office | 65 | </div> |
6 | office | 66 | <div id="service-icon-errors" class="center-block" style="display:none"></div> |
1 | office | 67 | <div class="help-block with-errors"> |
68 | An icon that should be used to represent the service. |
||
69 | </div> |
||
70 | </div> |
||
71 | <div class="form-group"> |
||
72 | <button id="add" type="submit" class="btn btn-primary">Add</button> |
||
73 | </div> |
||
74 | </form> |
||
75 | </div> |
||
76 | </div> |
||
77 | </div> |
||
78 | </div> |
||
79 | </div> |
||
80 | </div> |
||
6 | office | 81 | |
82 | <!-- Remove Modal --> |
||
83 | <div id="removeModal" class="modal fade" role="dialog"> |
||
84 | <div class="modal-dialog"> |
||
85 | <!-- Modal content--> |
||
86 | <div class="modal-content"> |
||
87 | <div class="modal-header"> |
||
88 | <button type="button" class="close" data-dismiss="modal">×</button> |
||
89 | <h4 class="modal-title">Remove Services</h4> |
||
90 | </div> |
||
91 | <div class="modal-body"> |
||
92 | <div class="row"> |
||
93 | <div class="col-md-6 col-sm-6 col-xs-12"> |
||
94 | <form id="removeService" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST" action="/remove"> |
||
95 | <div class="form-group"> |
||
96 | <select name="remove-services" id="remove-services" class="selectpicker" multiple="multiple"> |
||
97 | </select> |
||
98 | </div> |
||
99 | <div class="form-group"> |
||
100 | <button id="remove" type="submit" class="btn btn-primary">Remove</button> |
||
101 | </div> |
||
102 | </form> |
||
103 | </div> |
||
104 | </div> |
||
105 | </div> |
||
106 | </div> |
||
107 | </div> |
||
108 | </div> |
||
1 | office | 109 | |
110 | <!-- Bootstrap JavaScript --> |
||
111 | <script src='/node_modules/bootstrap/dist/js/bootstrap.min.js'></script> |
||
112 | <!-- Bootstrap Validator --> |
||
113 | <script src='/node_modules/bootstrap-validator/dist/validator.min.js'></script> |
||
6 | office | 114 | <!-- FileInput --> |
115 | <script src='/node_modules/bootstrap-fileinput/js/fileinput.min.js'></script> |
||
116 | <!-- Bootstrap Select --> |
||
117 | <script src='/node_modules/bootstrap-select/js/bootstrap-select.js'></script> |
||
1 | office | 118 | <script> |
119 | $(document).ready(function() { |
||
120 | $.getJSON('/data/data.json', (services) => { |
||
121 | // Create and display the tag cloud. |
||
122 | $('#cloud').svg3DTagCloud({ |
||
123 | entries: services, |
||
124 | width: '100%', |
||
125 | height: '100%', |
||
126 | radius: '65%', |
||
127 | radiusMin: 75, |
||
128 | bgDraw: true, |
||
7 | office | 129 | bgColor: '#000', |
1 | office | 130 | opacityOver: 1.00, |
131 | opacityOut: 0.05, |
||
132 | opacitySpeed: 6, |
||
133 | fov: 800, |
||
134 | speed: 2, |
||
135 | //fontFamily: 'Oswald, Arial, sans-serif', |
||
136 | fontSize: '14px', |
||
137 | fontColor: '#000', |
||
138 | fontWeight: 'bold', //bold |
||
139 | fontStyle: 'normal', //italic |
||
140 | fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||
141 | fontToUpperCase: true, |
||
142 | //tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||
143 | tooltipFontSize: '14px', |
||
144 | tooltipFontColor: '#000', |
||
145 | tooltipFontWeight: 'bold', //bold |
||
146 | tooltipFontStyle: 'normal', //italic |
||
147 | tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||
148 | tooltipFontToUpperCase: false, |
||
149 | tooltipTextAnchor: 'middle', |
||
150 | tooltipDiffX: 0, |
||
151 | tooltipDiffY: 16 |
||
152 | }); |
||
153 | |||
6 | office | 154 | // Populate the dropbox for removing services. |
155 | services.forEach((service) => { |
||
156 | if ($("#remove-services option[value='" + service.tooltip + "']").length === 0) { |
||
157 | $("#remove-services").append('<option value="' + service.tooltip + '">' + service.tooltip + '</option>'); |
||
1 | office | 158 | } |
159 | }); |
||
6 | office | 160 | $('#remove-services').selectpicker('refresh'); |
1 | office | 161 | |
6 | office | 162 | // Initialize file input for adding service icons. |
163 | $('#service-icon').fileinput({ |
||
164 | previewFileType: [ "image" ], |
||
165 | allowedFileTypes: [ "image" ], |
||
166 | allowedFileExtensions: [ "png" ], |
||
167 | maxFilesNum: 1 |
||
168 | }); |
||
169 | |||
1 | office | 170 | // Validation process to ensure that all parameters are passed. |
6 | office | 171 | $('#addService').validator().on('submit', function (e) { |
1 | office | 172 | if (e.isDefaultPrevented()) |
173 | return; |
||
6 | office | 174 | }); |
175 | |||
176 | $('#removeService').validator().on('submit', function (e) { |
||
177 | if (e.isDefaultPrevented()) |
||
178 | return; |
||
179 | }); |
||
1 | office | 180 | }); |
181 | }); |
||
182 | </script> |
||
183 | </body> |