scratch – Rev 139

Subversion Repositories:
Rev:
<!DOCTYPE html>
<html lang="en" ng-app="scratch">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="quick asset upload">
    <meta name="author" content="Wizardry and Steamworks">
    <link rel="icon" href="favicon.ico">

    <title>scratch</title>
    
    <!-- Bootstrap core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- DropZone -->
    <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
    <!-- Bootstrap TokenField -->
    <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">
    
    <!-- Site-wide style CCS -->
    <link href="css/style.css" rel="stylesheet">
    
    <!-- Local style -->
    <link href="css/files/style.css" rel="stylesheet">
    
    <!-- Scratch Angular Includes -->
    <ng-include src="'html/scratch-head-last.html'"></ng-include>
  </head>

  <body>
      
  <!-- Scratch Angular Includes -->
  <ng-include src="'html/scratch-body-first.html'"></ng-include>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="paralax-background"></div>
  <div class="jumbotron">
    <h1>scratch copy</h1>
    <p class="quote">the asset sharer</p>
  </div>

    <div class="container">
        
      <ul class="nav nav-tabs">
        <li><a href="index.html">Home</a></li>
        <li class="active"><a href="#">File</a></li>
        <li><a href="text.html">Text</a></li>
        <li><a href="draw.html">Draw</a></li>
        <li><a href="link.html">Link</a></li>
        <li><a href="view.html">View</a></li>
      </ul>
      
      <div id="main-panel" class="panel panel-default">
      <div class="panel-heading">
          <div id="actions" class="row">
            <div class="col-lg-5">
                <div class="btn-group btn-group-justified" role="group">
                  <!-- The fileinput-button span is used to style the file input field as button -->
                  <div class="btn-group" role="group">
                      <button id="uploadbutton" type="button" class="btn btn-default">
                          <i class="glyphicon glyphicon-plus"></i>
                          <span>Add...</span>
                      </button>
                  </div>
                  <div class="btn-group" role="group">
                      <button type="submit" class="btn btn-default start">
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>Upload All</span>
                      </button>
                  </div>
                  <div class="btn-group" role="group">
                      <button type="reset" class="btn btn-danger cancel">
                          <i class="glyphicon glyphicon-ban-circle"></i>
                          <span>Cancel All</span>
                      </button>
                  </div>
                </div>
            </div>
          </div>
      </div>
      <div class="panel-body" id="uploadpanel">
          <div class="table table-striped files" id="previews">
            <div id="template" class="file-row">
              <!-- This is used as the file preview template -->
              <div>
                  <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
              </div>
              <div class="upload-details-column">
                  <p class="upload-filename" data-dz-name></p>
                  <label for="file-upload-url">Download URL:</label>
                  <div class="input-group">
                      <input id="file-upload-url" type="text" class="form-control upload-url" readonly>
                      <span class="input-group-btn">
                          <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
                      </span>
                      <span class="input-group-btn">
                          <button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button>
                      </span>
                      <span class="input-group-btn">
                          <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                      </span>
                  </div>
                  <label for="file-upload-url">Delete URL:</label>
                  <div class="input-group">
                      <input id="file-delete-url" type="text" class="form-control delete-url" readonly>
                      <span class="input-group-btn">
                          <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                      </span>
                  </div>
                  <label for="file-tags">Tags:</label>
                  <div class="input-group">
                      <!-- <select id="file-tags" multiple class="form-control file-tags"></select> -->
                      <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
                  </div>
                  <strong class="error text-danger" data-dz-errormessage></strong>
              </div>
              <div>
                  <p class="size" data-dz-size></p>
                  <div id="progress" class="progress active" role="progressbar">
                    <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
                  </div>
              </div>
              <div>
                <button id="start" class="btn btn-default start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Upload</span>
                </button>
                <button id="cancel" data-dz-remove class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
                <button id="remove" data-dz-remove class="btn btn-danger remove">
                  <i class="glyphicon glyphicon-remove"></i>
                  <span>Remove</span>
                </button>
              </div>
            </div>
          </div>
      </div>
        <!-- The global file processing state -->
        <div class="fileupload-process">
            <div id="total-progress" class="progress active" role="progressbar">
              <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
            </div>
        </div>
      </div>
    </div> <!-- /container -->
    
    <div id="footer">
        <div class="container">
            <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
        </div>
    </div>

    <!-- jQuery -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Angular JS -->
    <script src="bower_components/angular/angular.min.js"></script>
    <!-- BootStrap -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- DropZone -->
    <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
    <!-- Clipboard -->
    <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
    <!-- BootStrap TokenField -->
    <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script>
    <!-- Angular Initialization. -->
    <script>
    var app = angular.module('scratch', []);
    </script>
    <script>
    $(document).ready(() => {
        $.get('session.php').then((token) => {
            // Get the template HTML and remove it from the doument
            var previewNode = document
                .querySelector('#template');
            previewNode.id = '';
            var previewTemplate = previewNode
                .parentNode
                .innerHTML;
            previewNode
                .parentNode
                .removeChild(previewNode);
            
            var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
                url: 'file.php', // Set the url
                paramName: 'file',
                thumbnailWidth: 80,
                thumbnailHeight: 80,
                //parallelUploads: 20,
                previewTemplate: previewTemplate,
                autoQueue: false, // Make sure the files aren't queued until manually added
                previewsContainer: '#previews', // Container to display the previews
                clickable: [
                    '#uploadbutton',
                    '#uploadpanel'
                ],
                //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
            }).on('sending', (file, xhr, formData) => {
                // Append session token.
                formData.append('token', token);
                
                // Append tags to the form data.
                const tagsBoxID = file
                    .previewElement
                    .querySelector('.file-tags')
                    .getAttribute('id');
                
                const tags = $('#' + tagsBoxID)
                    .tokenfield('getTokens')
                    .map((token) => {
                        return token.value;
                    });
                
                formData.append('tags', JSON.stringify(tags));
                
                // And disable the tags bar.
                $('#' + tagsBoxID).tokenfield('readonly');
                $('#' + tagsBoxID).tokenfield('disable');
                
            }).on('addedfile', (file) => {
                // Hookup the start button.
                file.previewElement.querySelector('.start').onclick = () => { 
                    myDropzone.enqueueFile(file);
                };
                
                // Set the ID of the URL box.
                const boxURLID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
                file
                    .previewElement
                    .querySelector('#file-upload-url')
                    .setAttribute('id', boxURLID);
                    
                // Set the ID of the delete URL box.
                const deleteBoxURLID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
                file
                    .previewElement
                    .querySelector('#file-delete-url')
                    .setAttribute('id', deleteBoxURLID);
                    
                // Set the ID of the URL clipboard button.
                const clipButtonID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
                file
                    .previewElement
                    .querySelector('#btn-clipboard')
                    .setAttribute('data-clipboard-target', '#' + boxURLID)
            
                file
                    .previewElement
                    .querySelector('#btn-clipboard')
                    .setAttribute('id', clipButtonID);
            
                new Clipboard('#' + clipButtonID);
                
                // Set the ID of the delete URL clipboard button.
                const clipButtonDeleteID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
                file
                    .previewElement
                    .querySelector('#btn-clipboard-delete')
                    .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
            
                file
                    .previewElement
                    .querySelector('#btn-clipboard-delete')
                    .setAttribute('id', clipButtonDeleteID);
            
                new Clipboard('#' + clipButtonDeleteID);
                
                // Set the ID of the mailto button.
                const mailToButtonID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
            
                file
                    .previewElement
                    .querySelector('#btn-mailto')
                    .setAttribute('id', mailToButtonID);
                
                // Set the ID of the facebook button.
                const faceBookButtonID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);

                file
                    .previewElement
                    .querySelector('#btn-facebook')
                    .setAttribute('id', faceBookButtonID);
                
                // Set the ID of the tags input.
                const tagsBoxID = '_' + Math
                    .random()
                    .toString(36)
                    .substr(2, 9);
                
                file
                    .previewElement
                    .querySelector('#file-tags')
                    .setAttribute('id', tagsBoxID);

                $('#' + tagsBoxID).tokenfield();
                    
            }).on('totaluploadprogress', (progress) => {
                document
                    .querySelector('#total-progress .progress-bar')
                        .style
                        .width = progress + '%';
            }).on('sending', (file) => {
                // Show the total progress bar when upload starts
                document.querySelector("#total-progress")
                    .style
                    .opacity = 1;
                
                // And disable the start button.
                file
                    .previewElement
                    .querySelector('.start')
                    .setAttribute('disabled', 'disabled');
            }).on('queuecomplete', (progress) => {
                document.querySelector('#total-progress')
                    .style
                    .opacity = '0';
            }).on('success', (file, data) => {
                // Serialize JSON to object.
                data = JSON.parse(data);
            
                file
                    .previewElement
                    .querySelector(".upload-url")
                    .value = location.protocol
                        .concat("//")
                        .concat(window.location.hostname)
                        .concat("/")
                        .concat(data.hash);
                    
                file
                    .previewElement
                    .querySelector('.delete-url')
                    .value = location.protocol.concat('//')
                        .concat(window.location.hostname)
                        .concat('/')
                        .concat(data.timestamp)
                        .concat('/')
                        .concat(data.hash);

                file
                    .previewElement
                    .querySelector('.start')
                    .setAttribute('disabled', 'disabled');
                file
                    .previewElement
                    .querySelector('.cancel')
                    .setAttribute('disabled', 'disabled');
                
                // Enable the mailto button.
                $('.url-mailto-button').on('click', () => {
                    window.location.href = "mailto:?subject="+ 
                        encodeURIComponent("Can't scratch this!") + "&body=" +
                    encodeURIComponent($('.upload-url').val());
                });
                
                // Enable or disable the facebook opengraph URL.
                switch(data.opengraph) {
                    case true:
                        // Enable the facebook button.
                        file
                            .previewElement
                            .querySelector('.url-facebook-button')
                            .removeAttribute('disabled');
                    
                        // Change the URL when the user clicks the button.
                        $('.url-facebook-button').on('click', () => {
                            $('.upload-url')
                                .val( 
                                    location.protocol.concat('//')
                                    .concat(window.location.hostname)
                                    .concat('/')
                                    .concat('og')
                                    .concat('/')
                                    .concat(data.hash)
                            );
                        });
                        break;
                    default:
                        // Disable the facebook button.
                        file
                            .previewElement
                            .querySelector('.url-facebook-button')
                            .setAttribute('disabled', 'disabled');
                        break;
                }
            });
            
            document.querySelector('#actions .start').onclick = () => {
                myDropzone.enqueueFiles(
                    myDropzone
                        .getFilesWithStatus(Dropzone.ADDED));
            };
        
            document.querySelector('#actions .cancel').onclick = () => {
                myDropzone.removeAllFiles(true);
            };
        });
        
        // Scroll to the panel.
        $('html, body').animate({
            scrollTop: $('#main-panel').offset().top
        }, 'slow');
    });
    </script>
    <!-- Jumbotron parallax effect -->
    <script>
    const jumboHeight = $('.jumbotron').outerHeight();
    function parallax(){
        var scrolled = $(window).scrollTop();
        $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
    }

    $(window).scroll(function(e){
        parallax();
    });
    </script>
  </body>
</html>