scratch – Blame information for rev 84
?pathlinks?
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> |