fluffy – Blame information for rev 1
?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 | |||
14 | <!-- DropZone --> |
||
15 | <link href='/node_modules/dropzone/dist/dropzone.css' rel='stylesheet' type='text/css'> |
||
16 | |||
17 | <!-- Fluffy style --> |
||
18 | <!-- <link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> --> |
||
19 | <link href='/css/style.css' rel='stylesheet' type='text/css'> |
||
20 | |||
21 | </head> |
||
22 | <body> |
||
23 | <div id='cloud'></div> |
||
24 | <!-- Add button --> |
||
25 | <div class="add" data-toggle="modal" data-target="#myModal"></div> |
||
26 | <!-- Modal --> |
||
27 | <div id="myModal" class="modal fade" role="dialog"> |
||
28 | <div class="modal-dialog"> |
||
29 | <!-- Modal content--> |
||
30 | <div class="modal-content"> |
||
31 | <div class="modal-header"> |
||
32 | <button type="button" class="close" data-dismiss="modal">×</button> |
||
33 | <h4 class="modal-title">Add New Service</h4> |
||
34 | </div> |
||
35 | <div class="modal-body"> |
||
36 | <div class="row"> |
||
37 | <div class="col-md-6 col-sm-6 col-xs-12"> |
||
38 | <form id="serve" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST"> |
||
39 | <div class="form-group "> |
||
40 | <label class="control-label requiredField" for="service-url"> |
||
41 | Service URL |
||
42 | </label> |
||
43 | <input class="form-control" id="service-url" name="service-url" placeholder="http://myservice.tld/" type="text" required/> |
||
44 | <div class="help-block with-errors"> |
||
45 | The URL to link to. |
||
46 | </div> |
||
47 | </div> |
||
48 | <div class="form-group "> |
||
49 | <label class="control-label requiredField" for="service-name"> |
||
50 | Service Name |
||
51 | </label> |
||
52 | <input class="form-control" id="service-name" name="service-name" placeholder="My Service" type="text" required/> |
||
53 | <div class="help-block with-errors"> |
||
54 | The name that should be used for the service. |
||
55 | </div> |
||
56 | </div> |
||
57 | <div class="form-group"> |
||
58 | <label class="control-label requiredField" for="dropzone"> |
||
59 | Service Icon |
||
60 | </label> |
||
61 | <div id="service-icon" class="service-icon"></div> |
||
62 | <div id="dropzone-template"> |
||
63 | <div class="dz-preview dz-file-preview"> |
||
64 | <div class="dz-details"> |
||
65 | <img data-dz-thumbnail /> |
||
66 | </div> |
||
67 | </div> |
||
68 | </div> |
||
69 | <div class="help-block with-errors"> |
||
70 | An icon that should be used to represent the service. |
||
71 | </div> |
||
72 | </div> |
||
73 | <div class="form-group"> |
||
74 | <button id="add" type="submit" class="btn btn-primary">Add</button> |
||
75 | </div> |
||
76 | </form> |
||
77 | </div> |
||
78 | </div> |
||
79 | </div> |
||
80 | </div> |
||
81 | </div> |
||
82 | </div> |
||
83 | |||
84 | <!-- Bootstrap JavaScript --> |
||
85 | <script src='/node_modules/bootstrap/dist/js/bootstrap.min.js'></script> |
||
86 | <!-- Bootstrap Validator --> |
||
87 | <script src='/node_modules/bootstrap-validator/dist/validator.min.js'></script> |
||
88 | <!-- DropZone --> |
||
89 | <script src='/node_modules/dropzone/dist/min/dropzone.min.js'></script> |
||
90 | <script> |
||
91 | $(document).ready(function() { |
||
92 | $.getJSON('/data/data.json', (services) => { |
||
93 | // Create and display the tag cloud. |
||
94 | $('#cloud').svg3DTagCloud({ |
||
95 | entries: services, |
||
96 | width: '100%', |
||
97 | height: '100%', |
||
98 | radius: '65%', |
||
99 | radiusMin: 75, |
||
100 | bgDraw: true, |
||
101 | bgColor: '#fff', |
||
102 | opacityOver: 1.00, |
||
103 | opacityOut: 0.05, |
||
104 | opacitySpeed: 6, |
||
105 | fov: 800, |
||
106 | speed: 2, |
||
107 | //fontFamily: 'Oswald, Arial, sans-serif', |
||
108 | fontSize: '14px', |
||
109 | fontColor: '#000', |
||
110 | fontWeight: 'bold', //bold |
||
111 | fontStyle: 'normal', //italic |
||
112 | fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||
113 | fontToUpperCase: true, |
||
114 | //tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||
115 | tooltipFontSize: '14px', |
||
116 | tooltipFontColor: '#000', |
||
117 | tooltipFontWeight: 'bold', //bold |
||
118 | tooltipFontStyle: 'normal', //italic |
||
119 | tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||
120 | tooltipFontToUpperCase: false, |
||
121 | tooltipTextAnchor: 'middle', |
||
122 | tooltipDiffX: 0, |
||
123 | tooltipDiffY: 16 |
||
124 | }); |
||
125 | |||
126 | // Set up dropzone for icon upload. |
||
127 | $('#service-icon').dropzone({ |
||
128 | url: '/', |
||
129 | autoProcessQueue: true, |
||
130 | uploadMultiple: false, |
||
131 | maxFiles: 1, |
||
132 | acceptedFiles: 'image/*', |
||
133 | resizeMethod: 'contain', |
||
134 | thumbnailWidth: 64, |
||
135 | thumbnailHeight: 64, |
||
136 | resizeWidth: 64, |
||
137 | resizeHeight: 64, |
||
138 | paramName: "image", |
||
139 | previewTemplate: document.querySelector('#dropzone-template').innerHTML, |
||
140 | renameFile: function(file) { |
||
141 | // set the filename to the name of the service |
||
142 | file.name = $('#service-name').val(); |
||
143 | }, |
||
144 | init: function() { |
||
145 | // only allow a single icon file to be uploaded |
||
146 | this.on("maxfilesexceeded", function(file) { |
||
147 | this.removeAllFiles(); |
||
148 | this.addFile(file); |
||
149 | }); |
||
150 | } |
||
151 | }); |
||
152 | |||
153 | // Validation process to ensure that all parameters are passed. |
||
154 | $('#form').validator().on('submit', function (e) { |
||
155 | if (e.isDefaultPrevented()) |
||
156 | return; |
||
157 | }) |
||
158 | }); |
||
159 | }); |
||
160 | </script> |
||
161 | </body> |