scratch – Blame information for rev 125

Subversion Repositories:
Rev:
Rev Author Line No. Line
84 office 1 <!DOCTYPE html>
125 office 2 <html lang="en" ng-app="scratch">
84 office 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">
125 office 29  
30 <!-- Scratch Angular Includes -->
31 <ng-include src="'html/scratch-head-last.html'"></ng-include>
84 office 32 </head>
33  
34 <body>
125 office 35  
36 <!-- Scratch Angular Includes -->
37 <ng-include src="'html/scratch-body-first.html'"></ng-include>
84 office 38  
39 <!-- Main component for a primary marketing message or call to action -->
40 <div class="paralax-background"></div>
41 <div class="jumbotron">
42 <h1>scratch copy</h1>
43 <p class="quote">the asset sharer</p>
44 </div>
45  
46 <div class="container">
47  
48 <ul class="nav nav-tabs">
49 <li><a href="index.html">Home</a></li>
50 <li><a href="file.html">File</a></li>
51 <li><a href="text.html">Text</a></li>
52 <li class="active"><a href="#">Draw</a></li>
91 office 53 <li><a href="link.html">Link</a></li>
121 office 54 <li><a href="view.html">View</a></li>
84 office 55 </ul>
56  
57 <div id="main-panel" class="panel panel-default">
58 <div class="panel-heading">
59 <div class="form-group">
60 <div class="input-group">
61 <span class="input-group-btn">
62 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
63 <i class="glyphicon glyphicon-share"></i>
64 </button>
65 </span>
66 <input id="URL" type="text" class="form-control" readonly>
67 <span class="input-group-btn">
68 <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>
69 </span>
70 </div>
92 office 71 <div class="input-group">
72 <input id="deleteURL" type="text" class="form-control" readonly>
73 <span class="input-group-btn">
74 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
75 </span>
84 office 76 </div>
92 office 77 </div>
84 office 78 </div>
79 <div class="panel-body" id="drawing-panel">
80 <div id="drawingboard">
81 </div>
82 </div>
83 </div>
84  
85 </div> <!-- /container -->
86  
87 <div id="footer">
88 <div class="container">
89 <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>
90 </div>
91 </div>
92  
93 <!-- jQuery -->
94 <script src="bower_components/jquery/dist/jquery.min.js"></script>
125 office 95 <!-- Angular JS -->
96 <script src="bower_components/angular/angular.min.js"></script>
84 office 97 <!-- BootStrap -->
98 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
99  
100 <!-- DrawingBoard -->
101 <script src="bower_components/drawingboard.js/dist/drawingboard.min.js"></script>
102 <!-- Clipboard -->
103 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
104  
105 <!-- Local javascript -->
106 <script src="js/Base64ToBlob.js"></script>
125 office 107 <!-- Angular Initialization. -->
84 office 108 <script>
125 office 109 var app = angular.module('scratch', []);
110 </script>
111 <script>
84 office 112 $(document).ready(() => {
113 // Setup the drawing board.
114 var drawingBoard = new DrawingBoard.Board('drawingboard', {
115 controls: [
116 'Color',
117 { Size: { type: 'dropdown' } },
118 { DrawingMode: { filler: false } },
119 'Navigation'
120 ],
121 size: 8,
122 color: "#ff99ff",
123 webStorage: 'session',
124 enlargeYourContainer: true,
125 droppable: true
126 });
127  
128 // Save image and create URL.
129 $('#save').click(() => {
130 var formData = new FormData();
131 formData.append('file', new Blob(
132 [
133 base64toBlob(
134 drawingBoard
135 .getImg()
136 .replace(/^data:image\/(png|jpg);base64,/, ''),
137 'image/png')
138 ]
139 ),
140 '.png'
141 );
97 office 142 $.get('session.php').then((token) => {
143 formData.append('token', token);
144 $.ajax({
145 url: 'file.php',
146 type: 'POST',
147 data: formData,
148 // cache: false // FF
149 processData: false,
150 contentType: false
151 }).done((data) => {
152 // Serialize JSON to object.
153 data = JSON.parse(data);
84 office 154  
97 office 155 $('#URL')
156 .val(
157 location.protocol
158 .concat("//")
159 .concat(window.location.hostname)
160 .concat("/")
161 .concat(data.hash)
162 );
163  
164 $('#deleteURL')
165 .val(
166 location
167 .protocol.concat("//")
84 office 168 .concat(window.location.hostname)
169 .concat("/")
97 office 170 .concat(data.timestamp)
171 .concat("/")
84 office 172 .concat(data.hash)
97 office 173 );
174 });
84 office 175 });
176 });
177  
178 // Enable the Clipboard button.
179 new Clipboard('#copy-url');
92 office 180 new Clipboard('#delete-url');
84 office 181  
182 // Scroll to the panel.
183 $('html, body').animate({
184 scrollTop: $('#main-panel').offset().top
185 }, 'slow');
186 });
187 </script>
188 <!-- Jumbotron parallax effect -->
189 <script>
190 var jumboHeight = $('.jumbotron').outerHeight();
191 function parallax(){
192 var scrolled = $(window).scrollTop();
193 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
194 }
195  
196 $(window).scroll(function(e){
197 parallax();
198 });
199 </script>
200 </body>
201 </html>