scratch – Blame information for rev 108

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,chrome=1">
6 <title>Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.</title>
7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">
9  
10 <link rel="stylesheet" href="prism.css">
11 <link rel="stylesheet" href="website.css">
12  
13  
14 <!-- in a production environment, you can include the minified css. It contains the css of the board and the default controls (size, nav, colors):
15 <link rel="stylesheet" href="../dist/drawingboard.min.css"> -->
16 <link rel="stylesheet" href="../css/drawingboard.css">
17  
18 <style>
19 /*
20 * drawingboards styles: set the board dimensions you want with CSS
21 */
22 .board {
23 margin: 0 auto;
24 width: 400px;
25 height: 400px;
26 }
27 </style>
28  
29 <style data-example="2">
30 #custom-board {
31 width: 400px;
32 height: 400px;
33 }
34 </style>
35  
36 <style data-example="4">
37 #simple-board {
38 width: 400px;
39 height: 400px;
40 }
41 </style>
42  
43 <style data-example="1">
44 #default-board {
45 width: 700px;
46 height: 400px;
47 }
48 </style>
49  
50 <style data-example="3">
51 #custom-board-2 {
52 width: 550px;
53 height: 300px;
54 }
55  
56 #custom-board-2 canvas {
57 transform: scale(0.95);
58 }
59 </style>
60  
61 <style data-example="5">
62 #title-board {
63 width: 600px;
64 height: 270px;
65 }
66 #title-board .drawing-board-canvas-wrapper {
67 border: none;
68 margin: 0;
69 }
70 </style>
71  
72 <style data-example="6">
73 #transparent-board {
74 width: 600px;
75 height: 270px;
76 }
77  
78 #transparent-board .drawing-board-canvas-wrapper {
79 border: 1px solid gray;
80 }
81 </style>
82 </head>
83 <body>
84 <span id="forkongithub"><a href="https://github.com/Leimi/drawingboard.js">Fork me on GitHub!</a></span>
85  
86 <noscript>JavaScript is required :(</noscript>
87  
88 <div class="header">
89 <div class="board" id="title-board"></div>
90 </div>
91  
92 <div id="container">
93 <div data-example="5">
94 </div>
95  
96 <p><a href="https://github.com/Leimi/drawingboard.js#drawingboardjs">Detailed information is available in the <strong>readme</strong> on Github.</a></p>
97  
98 <div class="example" data-example="1">
99 <h1>The default DrawingBoard</h1>
100 <div class="board" id="default-board"></div>
101 </div>
102  
103 <div class="example" data-example="2">
104 <h1>A custom one</h1>
105 <div class="board" id="custom-board"></div>
106 </div>
107  
108 <div class="example" data-example="3">
109 <h1>Another custom one</h1>
110 <div class="board" id="custom-board-2"></div>
111 </div>
112  
113 <div class="example" data-example="4">
114 <h1>The simplest one</h1>
115 <div class="board" id="simple-board"></div>
116 </div>
117  
118 <div class="example" data-example="6">
119 <h1>Transparent background</h1>
120 <div class="board" id="transparent-board"></div>
121 </div>
122  
123 </div>
124  
125 <!-- jquery is required - zepto might do the trick too -->
126 <script src="../bower_components/jquery/dist/jquery.min.js"></script>
127 <script src="../bower_components/simple-undo/lib/simple-undo.js"></script>
128  
129 <!-- in a production environment, just include the minified script. It contains the board and the default controls (size, nav, colors, download): -->
130 <!--<script src="../dist/drawingboard.min.js"></script>-->
131  
132 <script src="../js/utils.js"></script>
133 <script src="../js/board.js"></script>
134 <script src="../js/controls/control.js"></script>
135 <script src="../js/controls/color.js"></script>
136 <script src="../js/controls/drawingmode.js"></script>
137 <script src="../js/controls/navigation.js"></script>
138 <script src="../js/controls/size.js"></script>
139 <script src="../js/controls/download.js"></script>
140  
141  
142  
143 <script data-example="1">
144 //create the drawingboard by passing it the #id of the wanted container
145 var defaultBoard = new DrawingBoard.Board('default-board');
146 </script>
147  
148  
149  
150 <!-- an input[type=range] poyfill is more than recommanded if you want to use the default "size" control with the "range" type *on every browser*
151 the polyfill is loaded only if necessary via yepnope http://yepnopejs.com/
152  
153 note this is totally not required if the size control is set to "auto" or "dropdown" - the control will work with every browser with an alternate view -->
154 <script src="yepnope.js"></script>
155 <script>
156 var iHasRangeInput = function() {
157 var inputElem = document.createElement('input'),
158 smile = ':)',
159 docElement = document.documentElement,
160 inputElemType = 'range',
161 available;
162 inputElem.setAttribute('type', inputElemType);
163 available = inputElem.type !== 'text';
164 inputElem.value = smile;
165 inputElem.style.cssText = 'position:absolute;visibility:hidden;';
166 if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {
167 docElement.appendChild(inputElem);
168 defaultView = document.defaultView;
169 available = defaultView.getComputedStyle &&
170 defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' &&
171 (inputElem.offsetHeight !== 0);
172 docElement.removeChild(inputElem);
173 }
174 return !!available;
175 };
176  
177 yepnope({
178 test : iHasRangeInput(),
179 nope : ['fd-slider.min.css', 'fd-slider.min.js'],
180 callback: function(id, testResult) {
181 if("fdSlider" in window && typeof (fdSlider.onDomReady) != "undefined") {
182 try { fdSlider.onDomReady(); } catch(err) {}
183 }
184 }
185 });
186 </script>
187  
188 <script data-example="2">
189 //pass options and add custom controls to a board
190 var customBoard = new DrawingBoard.Board('custom-board', {
191 background: "#ff7ffe",
192 color: "#ff0",
193 size: 30,
194 fillTolerance: 150,
195 controls: [
196 { Size: { type: "range", min: 12, max: 42 } },
197 { Navigation: { back: false, forward: false } },
198 'DrawingMode'
199 ],
200 webStorage: 'local',
201 droppable: true //try dropping an image on the canvas!
202 });
203  
204 //There are multiple ways to add a control to a board after its initialization:
205 customBoard.addControl('Download'); //if the DrawingBoard.Control.Download class exists
206  
207 //or...
208 //var downloadControl = new DrawingBoard.Control.Download(customBoard).addToBoard();
209  
210 //or...
211 //var downloadControl = new DrawingBoard.Control.Download(customBoard);
212 //customBoard.addControl(downloadControl);
213 </script>
214  
215 <script data-example="3">
216 var customBoard2 = new DrawingBoard.Board('custom-board-2', {
217 controls: [
218 'Color',
219 { Size: { type: 'dropdown' } },
220 { DrawingMode: { filler: false } },
221 'Navigation',
222 'Download'
223 ],
224 size: 1,
225 webStorage: 'session',
226 enlargeYourContainer: true,
227 droppable: true, //try dropping an image on the canvas!
228 stretchImg: true //the dropped image can be automatically ugly resized to to take the canvas size
229 });
230 </script>
231  
232 <script data-example="4">
233 var simpleBoard = new DrawingBoard.Board('simple-board', {
234 controls: false,
235 webStorage: false
236 });
237 </script>
238  
239 <script data-example="5">
240 var imageBoard = new DrawingBoard.Board('title-board', {
241 controls: false,
242 background: 'drawingboardjs.png',
243 color: '#ff0',
244 webStorage: false
245 });
246 </script>
247  
248 <script data-example="6">
249 //the "filler" mode currently doesn't work with transparent boards...
250 //keeping default controls, replacing the DrawingMode one with a filler-less version
251 var transparentBoardControls = DrawingBoard.Board.defaultOpts.controls.slice();
252 transparentBoardControls.splice(DrawingBoard.Board.defaultOpts.controls.indexOf('DrawingMode'), 1, { DrawingMode: { filler: false } });
253 var transparentBoard = new DrawingBoard.Board('transparent-board', {
254 background: false,
255 controls: transparentBoardControls
256 });
257 </script>
258  
259 <!-- totally not drawingboard-related code -->
260 <script src="prism.js"></script>
261 <script src="script.js"></script>
262 </body>
263 </html>