scratch – Blame information for rev 97

Subversion Repositories:
Rev:
Rev Author Line No. Line
84 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico">
14  
15 <title>scratch</title>
16  
17 <!-- Bootstrap core CSS -->
18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
21 <!-- DrawingBoard -->
22 <link href="bower_components/drawingboard.js/dist/drawingboard.min.css" rel="stylesheet">
23  
24 <!-- Site-wide style CCS -->
25 <link href="css/style.css" rel="stylesheet">
26  
27 <!-- Local style -->
28 <link href="css/draw/style.css" rel="stylesheet">
29 </head>
30  
31 <body>
32  
33 <!-- Main component for a primary marketing message or call to action -->
34 <div class="paralax-background"></div>
35 <div class="jumbotron">
36 <h1>scratch copy</h1>
37 <p class="quote">the asset sharer</p>
38 </div>
39  
40 <div class="container">
41  
42 <ul class="nav nav-tabs">
43 <li><a href="index.html">Home</a></li>
44 <li><a href="file.html">File</a></li>
45 <li><a href="text.html">Text</a></li>
46 <li class="active"><a href="#">Draw</a></li>
91 office 47 <li><a href="link.html">Link</a></li>
84 office 48 </ul>
49  
50 <div id="main-panel" class="panel panel-default">
51 <div class="panel-heading">
52 <div class="form-group">
53 <div class="input-group">
54 <span class="input-group-btn">
55 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
56 <i class="glyphicon glyphicon-share"></i>
57 </button>
58 </span>
59 <input id="URL" type="text" class="form-control" readonly>
60 <span class="input-group-btn">
61 <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>
62 </span>
63 </div>
92 office 64 <div class="input-group">
65 <input id="deleteURL" type="text" class="form-control" readonly>
66 <span class="input-group-btn">
67 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
68 </span>
84 office 69 </div>
92 office 70 </div>
84 office 71 </div>
72 <div class="panel-body" id="drawing-panel">
73 <div id="drawingboard">
74 </div>
75 </div>
76 </div>
77  
78 </div> <!-- /container -->
79  
80 <div id="footer">
81 <div class="container">
82 <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>
83 </div>
84 </div>
85  
86 <!-- jQuery -->
87 <script src="bower_components/jquery/dist/jquery.min.js"></script>
88 <!-- BootStrap -->
89 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
90  
91 <!-- DrawingBoard -->
92 <script src="bower_components/drawingboard.js/dist/drawingboard.min.js"></script>
93 <!-- Clipboard -->
94 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
95  
96 <!-- Local javascript -->
97 <script src="js/Base64ToBlob.js"></script>
98 <script>
99 $(document).ready(() => {
100 // Setup the drawing board.
101 var drawingBoard = new DrawingBoard.Board('drawingboard', {
102 controls: [
103 'Color',
104 { Size: { type: 'dropdown' } },
105 { DrawingMode: { filler: false } },
106 'Navigation'
107 ],
108 size: 8,
109 color: "#ff99ff",
110 webStorage: 'session',
111 enlargeYourContainer: true,
112 droppable: true
113 });
114  
115 // Save image and create URL.
116 $('#save').click(() => {
117 var formData = new FormData();
118 formData.append('file', new Blob(
119 [
120 base64toBlob(
121 drawingBoard
122 .getImg()
123 .replace(/^data:image\/(png|jpg);base64,/, ''),
124 'image/png')
125 ]
126 ),
127 '.png'
128 );
97 office 129 $.get('session.php').then((token) => {
130 formData.append('token', token);
131 $.ajax({
132 url: 'file.php',
133 type: 'POST',
134 data: formData,
135 // cache: false // FF
136 processData: false,
137 contentType: false
138 }).done((data) => {
139 // Serialize JSON to object.
140 data = JSON.parse(data);
84 office 141  
97 office 142 $('#URL')
143 .val(
144 location.protocol
145 .concat("//")
146 .concat(window.location.hostname)
147 .concat("/")
148 .concat(data.hash)
149 );
150  
151 $('#deleteURL')
152 .val(
153 location
154 .protocol.concat("//")
84 office 155 .concat(window.location.hostname)
156 .concat("/")
97 office 157 .concat(data.timestamp)
158 .concat("/")
84 office 159 .concat(data.hash)
97 office 160 );
161 });
84 office 162 });
163 });
164  
165 // Enable the Clipboard button.
166 new Clipboard('#copy-url');
92 office 167 new Clipboard('#delete-url');
84 office 168  
169 // Scroll to the panel.
170 $('html, body').animate({
171 scrollTop: $('#main-panel').offset().top
172 }, 'slow');
173 });
174 </script>
175 <!-- Jumbotron parallax effect -->
176 <script>
177 var jumboHeight = $('.jumbotron').outerHeight();
178 function parallax(){
179 var scrolled = $(window).scrollTop();
180 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
181 }
182  
183 $(window).scroll(function(e){
184 parallax();
185 });
186 </script>
187 </body>
188 </html>