scratch – Diff between revs 121 and 125

Subversion Repositories:

?pathlinks?

Rev 121 – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
-<html lang="en">
+<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></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'
                                 },
 )
                             .delay(500)
                             .velocity(
+                                {
                                     borderColor: '#ecf0f1'
                                 },
 );
                     }).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>