fluffy – Diff between revs 1 and 6

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