/www/index.html |
@@ -11,28 +11,20 @@ |
<link href='/node_modules/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'> |
<link href='/node_modules/bootstrap/dist/css/bootstrap-theme.min.css' rel='stylesheet' type='text/css'> |
|
<!-- FileInput --> |
<link href="/node_modules/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> |
<!-- Bootstrap Select --> |
<link href="/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css" media="all" rel="stylesheet" type="text/css" /> |
<!-- DropZone --> |
<link href='/node_modules/dropzone/dist/dropzone.css' rel='stylesheet' type='text/css'> |
|
<!-- Wizardry and Steamworks Window Manager Style --> |
<link href='/node_modules/was.wm.js/css/wm.css' rel='stylesheet' type='text/css'> |
|
<!-- Fluffy style --> |
<!-- <link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> --> |
<link href='/css/style.css' rel='stylesheet' type='text/css'> |
|
</head> |
<body> |
<div class="container"> |
<div id="window-manager-desktop"> |
</div> |
</div> |
<!-- Add and remove buttons --> |
<div class="add" data-toggle="modal" data-target="#addModal">+</div> |
<div class="remove" data-toggle="modal" data-target="#removeModal">-</div> |
<!-- Add Modal --> |
<div id="addModal" class="modal fade" role="dialog"> |
<div id='cloud'></div> |
<!-- Add button --> |
<div class="add" data-toggle="modal" data-target="#myModal"></div> |
<!-- Modal --> |
<div id="myModal" class="modal fade" role="dialog"> |
<div class="modal-dialog"> |
<!-- Modal content--> |
<div class="modal-content"> |
@@ -43,7 +35,7 @@ |
<div class="modal-body"> |
<div class="row"> |
<div class="col-md-6 col-sm-6 col-xs-12"> |
<form id="addService" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST" action="/add"> |
<form id="serve" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST"> |
<div class="form-group "> |
<label class="control-label requiredField" for="service-url"> |
Service URL |
@@ -66,10 +58,14 @@ |
<label class="control-label requiredField" for="dropzone"> |
Service Icon |
</label> |
<div class="file-loading"> |
<input id="service-icon" name="service-icon" type="file" required> |
<div id="service-icon" class="service-icon"></div> |
<div id="dropzone-template"> |
<div class="dz-preview dz-file-preview"> |
<div class="dz-details"> |
<img data-dz-thumbnail /> |
</div> |
</div> |
</div> |
<div id="service-icon-errors" class="center-block" style="display:none"></div> |
<div class="help-block with-errors"> |
An icon that should be used to represent the service. |
</div> |
@@ -84,79 +80,82 @@ |
</div> |
</div> |
</div> |
|
<!-- Remove Modal --> |
<div id="removeModal" class="modal fade" role="dialog"> |
<div class="modal-dialog"> |
<!-- Modal content--> |
<div class="modal-content"> |
<div class="modal-header"> |
<button type="button" class="close" data-dismiss="modal">×</button> |
<h4 class="modal-title">Remove Services</h4> |
</div> |
<div class="modal-body"> |
<div class="row"> |
<div class="col-md-6 col-sm-6 col-xs-12"> |
<form id="removeService" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST" action="/remove"> |
<div class="form-group"> |
<select name="remove-services" id="remove-services" class="selectpicker" multiple="multiple"> |
</select> |
</div> |
<div class="form-group"> |
<button id="remove" type="submit" class="btn btn-primary">Remove</button> |
</div> |
</form> |
</div> |
</div> |
</div> |
</div> |
</div> |
</div> |
|
<!-- Bootstrap JavaScript --> |
<script src='/node_modules/bootstrap/dist/js/bootstrap.min.js'></script> |
<!-- Bootstrap Validator --> |
<script src='/node_modules/bootstrap-validator/dist/validator.min.js'></script> |
<!-- FileInput --> |
<script src='/node_modules/bootstrap-fileinput/js/fileinput.min.js'></script> |
<!-- Bootstrap Select --> |
<script src='/node_modules/bootstrap-select/js/bootstrap-select.js'></script> |
<!-- Wizardry and Steamworks Window Manager --> |
<script src="/node_modules/was.wm.js/dist/was.wm.min.js"></script> |
|
<!-- DropZone --> |
<script src='/node_modules/dropzone/dist/min/dropzone.min.js'></script> |
<script> |
$(document).ready(function() { |
|
var wm = new wasWM('/services'); |
|
// Populate the dropbox for removing services when the modal is shown. |
$('#removeModal').on('show.bs.modal', () => { |
wm.icons.forEach((service) => { |
if ($("#remove-services option[value='" + service + "']").length === 0) { |
$("#remove-services").append('<option value="' + service + '">' + service + '</option>'); |
$.getJSON('/data/data.json', (services) => { |
// Create and display the tag cloud. |
$('#cloud').svg3DTagCloud({ |
entries: services, |
width: '100%', |
height: '100%', |
radius: '65%', |
radiusMin: 75, |
bgDraw: true, |
bgColor: '#fff', |
opacityOver: 1.00, |
opacityOut: 0.05, |
opacitySpeed: 6, |
fov: 800, |
speed: 2, |
//fontFamily: 'Oswald, Arial, sans-serif', |
fontSize: '14px', |
fontColor: '#000', |
fontWeight: 'bold', //bold |
fontStyle: 'normal', //italic |
fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
fontToUpperCase: true, |
//tooltipFontFamily: 'Oswald, Arial, sans-serif', |
tooltipFontSize: '14px', |
tooltipFontColor: '#000', |
tooltipFontWeight: 'bold', //bold |
tooltipFontStyle: 'normal', //italic |
tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
tooltipFontToUpperCase: false, |
tooltipTextAnchor: 'middle', |
tooltipDiffX: 0, |
tooltipDiffY: 16 |
}); |
|
// Set up dropzone for icon upload. |
$('#service-icon').dropzone({ |
url: '/', |
autoProcessQueue: true, |
uploadMultiple: false, |
maxFiles: 1, |
acceptedFiles: 'image/*', |
resizeMethod: 'contain', |
thumbnailWidth: 64, |
thumbnailHeight: 64, |
resizeWidth: 64, |
resizeHeight: 64, |
paramName: "image", |
previewTemplate: document.querySelector('#dropzone-template').innerHTML, |
renameFile: function(file) { |
// set the filename to the name of the service |
file.name = $('#service-name').val(); |
}, |
init: function() { |
// only allow a single icon file to be uploaded |
this.on("maxfilesexceeded", function(file) { |
this.removeAllFiles(); |
this.addFile(file); |
}); |
} |
}); |
$('#remove-services').selectpicker('refresh'); |
}); |
|
// Initialize file input for adding service icons. |
$('#service-icon').fileinput({ |
previewFileType: [ "image" ], |
allowedFileTypes: [ "image" ], |
allowedFileExtensions: [ "png" ], |
maxFilesNum: 1 |
}); |
|
// Validation process to ensure that all parameters are passed. |
$('#addService').validator().on('submit', function (e) { |
if (e.isDefaultPrevented()) |
return; |
}); |
|
$('#removeService').validator().on('submit', function (e) { |
if (e.isDefaultPrevented()) |
return; |
}); |
|
// Validation process to ensure that all parameters are passed. |
$('#form').validator().on('submit', function (e) { |
if (e.isDefaultPrevented()) |
return; |
}) |
}); |
}); |
</script> |
</body> |