fluffy – Diff between revs 1 and 6
?pathlinks?
Rev 1 | Rev 6 | |||
---|---|---|---|---|
Line 9... | Line 9... | |||
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'> |
|
Line 12... | Line 12... | |||
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 | <!-- FileInput --> |
||
- | 15 | <link href="/node_modules/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> |
||
Line 14... | Line 16... | |||
14 | <!-- DropZone --> |
16 | <!-- Bootstrap Select --> |
|
15 | <link href='/node_modules/dropzone/dist/dropzone.css' rel='stylesheet' type='text/css'> |
- | ||
16 | |
17 | <link href="/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css" media="all" rel="stylesheet" type="text/css" /> |
|
Line 17... | Line 18... | |||
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> |
|
- | 23 | <body> |
||
22 | <body> |
24 | <div id='cloud'></div> |
|
23 | <div id='cloud'></div> |
25 | <!-- Add and remove buttons --> |
|
24 | <!-- Add button --> |
26 | <div class="add" data-toggle="modal" data-target="#addModal">+</div> |
|
25 | <div class="add" data-toggle="modal" data-target="#myModal"></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">×</button> |
34 | <button type="button" class="close" data-dismiss="modal">×</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 "> |
|
Line 56... | Line 58... | |||
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"> |
|
Line 78... | Line 76... | |||
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">×</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> |
||
Line 83... | Line 109... | |||
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 --> |
|
- | 115 | <script src='/node_modules/bootstrap-fileinput/js/fileinput.min.js'></script> |
||
- | 116 | <!-- Bootstrap Select --> |
||
89 | <script src='/node_modules/dropzone/dist/min/dropzone.min.js'></script> |
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. |
|
Line 121... | Line 149... | |||
121 | tooltipTextAnchor: 'middle', |
149 | tooltipTextAnchor: 'middle', |
|
122 | tooltipDiffX: 0, |
150 | tooltipDiffX: 0, |
|
123 | tooltipDiffY: 16 |
151 | tooltipDiffY: 16 |
|
124 | }); |
152 | }); |
|
Line 125... | Line 153... | |||
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 |
||
Line 151... | Line 168... | |||
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> |