scratch – Rev 125

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 http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <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">
    <!-- Trumbowyg -->
    <link href="bower_components/trumbowyg/dist/ui/trumbowyg.min.css" rel="stylesheet">

    <!-- Site-wide style CCS -->
    <link href="css/style.css" rel="stylesheet">
    
    <!-- Local style -->
    <link href="css/text/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><a href="file.html">File</a></li>
        <li class="active"><a href="#">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 class="form-group">
              <div class="input-group">
                  <span class="input-group-btn">
                      <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
                          <i class="glyphicon glyphicon-share"></i>
                      </button>
                  </span>
                  <input id="URL" type="text" class="form-control" readonly>
                  <span class="input-group-btn">
                      <button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i>="#A020F0"></button>
                  </span>
              </div>
          </div>
              <form id="nick-form" role="form">
                      <div class="form-group has-feedback">
                          <div class="input-group">
                              <span class="input-group-btn">
                                  <button id="go" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Load document.">
                                      <i class="glyphicon glyphicon-play"></i>
                                  </button>
                              </span>
                              <span class="input-group-btn">
                                  <button id="reset" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Reset document.">
                                      <i id="home-icon" class="glyphicon glyphicon-home"></i>
                                  </button>
                              </span>
                              <input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32">
                              <span class="input-group-btn">
                                  <button id="copy-nick" class="btn btn-default" type="button" data-clipboard-target="#nick" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
                              </span>
                          </div>
                    </div>
              </form>
          </div>
          <div class="panel-body" id="editorpanel">  
              <div id="trumbowyg">
              </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>
    <!-- Velocity -->
    <script src="bower_components/velocity/velocity.min.js"></script>
    
    <!-- Trumbowyg -->
    <script src="bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
    <!-- Clipboard -->
    <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
    <!-- Fingerprint 2 -->
    <script src="bower_components/fingerprintjs2/dist/fingerprint2.min.js"></script>
    <!-- js-cookie -->
    <script src="bower_components/js-cookie/src/js.cookie.js"></script>
    <!-- Bootstrap Validator -->
    <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
    <!-- Angular Initialization. -->
    <script>
    var app = angular.module('scratch', []);
    </script>
    <script>
    $(document).ready(() => {
        // Attach the form validator.
         $('#nick-form').validator({
            focus: false 
        }).on('invalid.bs.validator', () => {
            $('#go').attr('disabled', true);
        }).on('valid.bs.validator', () => {
            $('#go').attr('disabled', false);
        });
        
        // Enable the Clipboard button.
        new Clipboard('#copy-url');
        
        // Get the fingerprint.
        new Fingerprint2({
            //excludeUserAgent: true,
            //excludeLanguage: true,
            excludeColorDepth: true,
            excludeScreenResolution: true,
            excludeAvailableScreenResolution: true,
            //excludeTimezoneOffset: true,
            excludeSessionStorage: true,
            excludeIndexedDB: true,
            excludeAddBehavior: true,
            excludeOpenDatabase: true,
            //excludeCpuClass: true,
            //excludePlatform: true,
            excludeDoNotTrack: true,
            excludeCanvas: true,
            excludeWebGL: true,
            excludeAdBlock: true,
            //excludeHasLiedLanguages: true,
            //excludeHasLiedResolution: true,
            //excludeHasLiedOs: true,
            //excludeHasLiedBrowser: true,
            excludeJsFonts: true,
            excludeFlashFonts: true,
            excludePlugins: true,
            excludeIEPlugins: true,
            //excludeTouchSupport: true,
            excludePixelRatio: true
        }).get((result, components) => {
            // Set the nick as a cookie.
            const fingerprint = result;
            var nick = Cookies.get('nick');
            if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick)) {
                Cookies.set('nick', result, { path: '' });
                nick = result;
            }
            else
                result = nick;
            
            // Set the nick.
            $('#nick').val(result);
            new Clipboard('#copy-nick');
            
            if(fingerprint == nick)
                $('#home-icon').addClass("text-success");
            else
                $('#home-icon').addClass("text-danger");
            
            var autoSaveTimeoutID;
            
            function saveTextFile() {
                $.get('session.php').then((token) => {
                    $.post('text.php', {
                        data: $('#trumbowyg').trumbowyg('html'),
                        token: token,
                        fingerprint: result,
                        action: 'SAVE',
                        token: token
                    }).done((data) => {
                    
                        // Visual feedback for a successful save.
                        $('#editorpanel')
                            .delay(250)
                            .velocity(
                                { 
                                    borderColor: '#ff99ff'
                                }, 
                            200)
                            .delay(500)
                            .velocity(
                                { 
                                    borderColor: '#ecf0f1'
                                },
                            200);
                    
                    }).fail(() => {
                        // Reschedule saving of the file.
                        if(autoSaveTimeoutID)
                            window.clearTimeout(autoSaveTimeoutID);
                        autoSaveTimeoutID = window.setTimeout(saveTextFile, 250);
                    });
                });
            }
            
            // Load the editor.
            $('#trumbowyg').trumbowyg({
                semantic: true,
                autogrow: true,
                disabled: true
            }).on('tbwchange', () => {
                // Clear the value of the URL box because the URL will have changed.
                $('#URL').val('');
                // Reschedule saving of the file.
                if(autoSaveTimeoutID)
                    window.clearTimeout(autoSaveTimeoutID);
                autoSaveTimeoutID = window.setTimeout(saveTextFile, 1000);
            });
            
            // Retrieve the contents of the shared file.
            $('#trumbowyg').trumbowyg('disable');
            $.get('session.php').then((token) => {
                $.post('text.php',
                {
                    timestamp: window.performance.now(),
                    fingerprint: result,
                    action: 'LOAD',
                    token: token
                }).done((data) => {;
                    $('#trumbowyg')
                        .trumbowyg('html', data);
                    $('#trumbowyg').trumbowyg('enable');
                    $('#trumbowyg').show();
                }).fail(() => {
                    $('#trumbowyg').trumbowyg('enable');
                    $('#trumbowyg').show();
                });
            });
        
            $('#save').click(() => {
                $('#editor').trumbowyg('disable');
                var formData = new FormData();
                formData.append('file', new Blob(
                        [
                           $('#trumbowyg').trumbowyg('html')
                        ]
                    ),
                    '.html'
                );
                $.get('session.php').then((token) => {
                    formData.append('token', token);
                    $.ajax({
                        url: 'file.php',
                        type: 'POST',
                        data: formData,
                        // cache: false // FF
                        processData: false,
                        contentType: false
                    }).done((data) => {
                        // Serialize JSON to object.
                        data = JSON.parse(data);
                    
                        $('#URL')
                            .val(
                                location.protocol
                                    .concat("//")
                                    .concat(window.location.hostname)
                                    .concat("/")
                                    .concat(data.hash)
                        );
                        $('#trumbowyg').trumbowyg('enable');
                    }).fail(() => {
                        $('#trumbowyg').trumbowyg('enable');
                    });
                });
            });
            
            // When the button is clicked, navigate to the fingerprint.
            $('#go').click(() => {
                nick = $('#nick').val();
                if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
                    return;
                Cookies.set('nick', nick, { path: '' });
                result = nick;
                
                // Retrieve the contents of the shared file.
                $('#editor').trumbowyg('disable');
                $.get('session.php').then((token) => {
                    $.post('text.php',
                    {
                        timestamp: window.performance.now(),
                        fingerprint: nick,
                        action: 'LOAD',
                        token: token
                    }).done((data) => {;
                        $('#trumbowyg')
                            .trumbowyg('html', data);
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    
                        if(fingerprint == nick)
                            $('#home-icon').addClass("text-success").removeClass("text-danger");
                        else
                            $('#home-icon').addClass("text-danger").removeClass("text-success");
                    
                    }).fail(() => {
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    });
                });
            });
            
            // When the form is submitted, naigate to the fingerprint.
            $('#nick-form').submit((e) => {
                e.preventDefault();
                
                nick = $('#nick').val();
                if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
                    return;
                Cookies.set('nick', nick, { path: '' });
                result = nick;
                
                // Retrieve the contents of the shared file.
                $('#editor').trumbowyg('disable');
                $.get('session.php').then((token) => {
                    $.post('text.php',
                    {
                        timestamp: window.performance.now(),
                        fingerprint: nick,
                        action: 'LOAD',
                        token: token
                    }).done((data) => {;
                        $('#trumbowyg')
                            .trumbowyg('html', data);
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    
                        if(fingerprint == nick)
                            $('#home-icon').addClass("text-success").removeClass("text-danger");
                        else
                            $('#home-icon').addClass("text-danger").removeClass("text-success");
                    
                    }).fail(() => {
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    });
                });
            });
            
            // While the nick is changing, navigate to the changed fingerprint.
            $("#nick").on('input', () => {
                nick = $('#nick').val();
                if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
                    return;
                Cookies.set('nick', nick, { path: '' });
                result = nick;
                
                // Retrieve the contents of the shared file.
                $('#editor').trumbowyg('disable');
                $.get('session.php').then((token) => {
                    $.post('text.php',
                    {
                        timestamp: window.performance.now(),
                        fingerprint: nick,
                        action: 'LOAD',
                        token: token
                    }).done((data) => {;
                        $('#trumbowyg')
                            .trumbowyg('html', data);
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    
                        if(fingerprint == nick)
                            $('#home-icon').addClass("text-success").removeClass("text-danger");
                        else
                            $('#home-icon').addClass("text-danger").removeClass("text-success");
                    }).fail(() => {
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    });
                });
            });
            
            // When the reset button is pressed, navigate to the fingerprint.
            $('#reset').click(() => {
                Cookies.set('nick', fingerprint, { path: '' });
                $('#nick').val(fingerprint);
                result = fingerprint;
                nick = fingerprint;
                
                // Retrieve the contents of the shared file.
                $('#editor').trumbowyg('disable');
                $.get('session.php').then((token) => {
                    $.post('text.php',
                    {
                        timestamp: window.performance.now(),
                        fingerprint: fingerprint,
                        action: 'LOAD',
                        token: token
                    }).done((data) => {;
                        $('#trumbowyg')
                            .trumbowyg('html', data);
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                        if(fingerprint == nick)
                            $('#home-icon').addClass("text-success").removeClass("text-danger");
                        else
                            $('#home-icon').addClass("text-danger").removeClass("text-success");
                    }).fail(() => {
                        $('#trumbowyg').trumbowyg('enable');
                        $('#trumbowyg').show();
                    });
                });
            });
        });
        
        // Scroll to the panel.
        $('html, body').animate({
            scrollTop: $('#main-panel').offset().top
        }, 'slow');
    });
    </script>
    <!-- Jumbotron parallax effect -->
    <script>
    var jumboHeight = $('.jumbotron').outerHeight();
    function parallax(){
        var scrolled = $(window).scrollTop();
        $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
    }

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