scratch – Diff between revs 92 and 97

Subversion Repositories:

?pathlinks?

Rev 92 – Rev 115 – Go to most recent revision – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
 <html lang="en">
   <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">
     <!-- DrawingBoard -->
     <link href="bower_components/drawingboard.js/dist/drawingboard.min.css" rel="stylesheet">
     <!-- Site-wide style CCS -->
     <link href="css/style.css" rel="stylesheet">
     <!-- Local style -->
     <link href="css/draw/style.css" rel="stylesheet">
   </head>
   <body>
   <!-- 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><a href="text.html">Text</a></li>
         <li class="active"><a href="#">Draw</a></li>
         <li><a href="link.html">Link</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 class="input-group">
                   <input id="deleteURL" type="text" class="form-control" readonly>
                   <span class="input-group-btn">
                       <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
                   </span>
               </div>
               </div>
           </div>
           <div class="panel-body" id="drawing-panel">
               <div id="drawingboard">
               </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>
     <!-- BootStrap -->
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <!-- DrawingBoard -->
     <script src="bower_components/drawingboard.js/dist/drawingboard.min.js"></script>
     <!-- Clipboard -->
     <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
     <!-- Local javascript -->
     <script src="js/Base64ToBlob.js"></script>
     <script>
     $(document).ready(() => {
         // Setup the drawing board.
         var drawingBoard =  new DrawingBoard.Board('drawingboard', {
         	controls: [
         		'Color',
         		{ Size: { type: 'dropdown' } },
         		{ DrawingMode: { filler: false } },
         		'Navigation'
         	],
         	size: 8,
             color: "#ff99ff",
         	webStorage: 'session',
         	enlargeYourContainer: true,
             droppable: true
         });
         // Save image and create URL.
         $('#save').click(() => {
             var formData = new FormData();
             formData.append('file', new Blob(
+                    [
                        base64toBlob(
                            drawingBoard
                            .getImg()
                            .replace(/^data:image\/(png|jpg);base64,/, ''),
                                'image/png')
+                    ]
                 ),
                 '.png'
             );
+            $.get('session.php').then((token) => {
+                formData.append('token', token);
-            $.ajax({
+                $.ajax({
-                url: 'file.php',
+                    url: 'file.php',
-                type: 'POST',
+                    type: 'POST',
-                data: formData,
+                    data: formData,
-                // cache: false // FF
+                    // cache: false // FF
-                processData: false,
+                    processData: false,
-                contentType: false
+                    contentType: false
-            }).done((data) => {
+                }).done((data) => {
-                // Serialize JSON to object.
+                    // Serialize JSON to object.
-                data = JSON.parse(data);
+                    data = JSON.parse(data);
-                $('#URL')
+                    $('#URL')
-                    .val(
+                        .val(
-                        location.protocol
+                            location.protocol
+                                .concat("//")
+                                .concat(window.location.hostname)
+                                .concat("/")
+                                .concat(data.hash)
+                    );
+                    $('#deleteURL')
+                        .val(
+                            location
-                            .concat("//")
+                            .protocol.concat("//")
                             .concat(window.location.hostname)
+                            .concat("/")
+                            .concat(data.timestamp)
                             .concat("/")
                             .concat(data.hash)
-                );
-                $('#deleteURL')
-                    .val(
-                        location
-                        .protocol.concat("//")
-                        .concat(window.location.hostname)
-                        .concat("/")
-                        .concat(data.timestamp)
-                        .concat("/")
-                        .concat(data.hash)
+                    );
-                );
+                });
             });
         });
         // Enable the Clipboard button.
         new Clipboard('#copy-url');
         new Clipboard('#delete-url');
         // 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>