fluffy – Rev 7

Subversion Repositories:
Rev:
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>Fluffy</title>
    <script src='/node_modules/jquery/dist/jquery.min.js'></script>
    <script src='/js/jquery.svg3dtagcloud.min.js'></script>

    <!-- Bootstrap CSS -->
    <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" />
    
    <!-- Fluffy style -->
    <link href='/css/style.css' rel='stylesheet' type='text/css'>

</head>
<body>
    <div id='cloud'></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 class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add New Service</h4>
             </div>
             <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">
                         <div class="form-group ">
                            <label class="control-label requiredField" for="service-url">
                            Service URL
                            </label>
                            <input class="form-control" id="service-url" name="service-url" placeholder="http://myservice.tld/" type="text" required/>
                            <div class="help-block with-errors">
                               The URL to link to.
                            </div>
                         </div>
                         <div class="form-group ">
                            <label class="control-label requiredField" for="service-name">
                            Service Name
                            </label>
                            <input class="form-control" id="service-name" name="service-name" placeholder="My Service" type="text" required/>
                            <div class="help-block with-errors">
                               The name that should be used for the service.
                            </div>
                         </div>
                         <div class="form-group">
                            <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>
                            <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>
                         </div>
                         <div class="form-group">
                            <button id="add" type="submit" class="btn btn-primary">Add</button>
                         </div>
                      </form>
                   </div>
                </div>
             </div>
          </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">&times;</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>
    <script>
        $(document).ready(function() {
            $.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: '#000',
                        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
                    });
                
                // Populate the dropbox for removing services.
                services.forEach((service) => {
                    if ($("#remove-services option[value='" + service.tooltip + "']").length === 0) {
                      $("#remove-services").append('<option value="' + service.tooltip + '">' + service.tooltip + '</option>');
                    }
                });
                $('#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;
                });
            });
        });
    </script>
</body>

Generated by GNU Enscript 1.6.5.90.