scratch – Rev

Subversion Repositories:
Rev:
<!DOCTYPE html>
<html lang="en">
  <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>Quickload</title>
    
    <!-- Polyfill -->
    <script src="js/polyfill/polyfill.min.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/bootstrap/html5shiv.min.js"></script>
      <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    
    <!-- Trumbowyg -->
    <link href="css/trumbowyg/trumbowyg.min.css" rel="stylesheet">
    <!-- Local style -->
    <link href="css/text/style.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Quickload</h1>
        <p>Asset sharing platform.</p>
      </div>
      
      <ul class="nav nav-tabs">
        <li><a href="index.html">Home</a></li>
        <li><a href="files.html">Files</a></li>
        <li class="active"><a href="#">Text</a></li>
      </ul>
      
      <div class="panel panel-default">
          <div class="panel-heading">
              <div class="input-group">
                  <input id="URL" type="text" class="form-control" readonly>
                  <span class="input-group-btn">
                      <button id="save" class="btn btn-default" type="button">
                          <i class="glyphicon glyphicon-globe"></i>
                      </button>
                  </span>
                  <span class="input-group-btn">
                      <button id="clippy" class="btn btn-default" type="button" data-clipboard-target="#URL"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to Clipboard"></button>
                  </span>
              </div>
          </div>
          <div class="panel-body" id="editorpanel">         
              <div id="trumbowyg" style="display: none; font-family: monospace;">
              </div>
          </div>
      </div>

    </div> <!-- /container -->
    
    <div id="footer">
        <div class="container">
            <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
        </div>
    </div>

    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
    
    <!-- Trumbowyg -->
    <script src="js/trumbowyg/trumbowyg.min.js"></script>
    <!-- Clipboard -->
    <script src="js/clipboard/clipboard.min.js"></script>
    <script>
    $(document).ready(() => {
        // Load the editor.
        $('#trumbowyg').trumbowyg({
            autogrow: true,
            disabled: true
        }).on('tbwchange', () => {
            $('#editor').trumbowyg('disable');
            $.post('share-text.php', {
                data: $('#trumbowyg').trumbowyg('html'),
            }).done((data) => {
                $('#trumbowyg').trumbowyg('enable');
            }).fail(() => {
                $('#trumbowyg').trumbowyg('enable');
            });
        });
        
        // Retrieve the contents of the shared file.
        $.get('share-text.php',
        {
            headers: {
                 'Cache-Control': 'no-cache, no-store, must-revalidate', 
                 'Pragma': 'no-cache', 
                 'Expires': '0'
            },
            cache: false
        }).done((data) => {
            $('#trumbowyg')
                .trumbowyg('html', data);
            $('#trumbowyg').trumbowyg('enable');
            $('#trumbowyg').show();
        }).fail(() => {
            $('#trumbowyg').trumbowyg('enable');
            $('#trumbowyg').show();
        });
        
        // Enable the Clipboard button.
        new Clipboard('#clippy');
        
        $('#save').click(() => {
            $('#editor').trumbowyg('disable');
            
            var formData = new FormData();
            formData.append('file', new Blob(
                    [
                       $('#trumbowyg').trumbowyg('html')
                    ]
                ),
                '.html'
            );
                
            $.ajax({
                url: 'upload-files.php',
                type: 'POST',
                data: formData,
                headers: {
                     'Cache-Control': 'no-cache, no-store, must-revalidate', 
                     'Pragma': 'no-cache', 
                     'Expires': '0'
                },
                cache: false,
                processData: false,
                contentType: false
            }).done((data) => {
                $('#URL').val(data);
                $('#trumbowyg').trumbowyg('enable');
            }).fail(() => {
                alert('failed');
                $('#trumbowyg').trumbowyg('enable');
            });
        });
        
    });
    </script>
  </body>
</html>