| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title></title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dijit/themes/nihilo/nihilo.css"; |
|---|
| 8 | </style> |
|---|
| 9 | <style type="text/css"> |
|---|
| 10 | body, html{ |
|---|
| 11 | padding:0; |
|---|
| 12 | margin:0; |
|---|
| 13 | background:#666; |
|---|
| 14 | text-align:center; |
|---|
| 15 | } |
|---|
| 16 | .box{ |
|---|
| 17 | background:#fff; |
|---|
| 18 | color:#666; |
|---|
| 19 | font:11px monospace; |
|---|
| 20 | width:250px; |
|---|
| 21 | height:200px; |
|---|
| 22 | margin:40px auto; |
|---|
| 23 | padding:0; |
|---|
| 24 | } |
|---|
| 25 | .toWrapper{ |
|---|
| 26 | position:relative; |
|---|
| 27 | width:100%; |
|---|
| 28 | height:100%; |
|---|
| 29 | } |
|---|
| 30 | .box .transformOrigin{ |
|---|
| 31 | position:absolute; |
|---|
| 32 | font-size:0; |
|---|
| 33 | background:red; |
|---|
| 34 | width:3px; |
|---|
| 35 | height:3px; |
|---|
| 36 | margin:0; |
|---|
| 37 | border:none; |
|---|
| 38 | padding:0; |
|---|
| 39 | top:100px; |
|---|
| 40 | left:125px; |
|---|
| 41 | } |
|---|
| 42 | .boxContainer{ |
|---|
| 43 | color:white; |
|---|
| 44 | background:black; |
|---|
| 45 | height:300px; |
|---|
| 46 | width:100%; |
|---|
| 47 | text-align:center; |
|---|
| 48 | overflow:hidden; |
|---|
| 49 | position:relative; |
|---|
| 50 | padding:0; |
|---|
| 51 | } |
|---|
| 52 | div.controls{ |
|---|
| 53 | background:#ddd; |
|---|
| 54 | color:#333; |
|---|
| 55 | font:bold 11px monospace; |
|---|
| 56 | margin:0 0 20px 0; |
|---|
| 57 | border-bottom:1px solid #ccc; |
|---|
| 58 | } |
|---|
| 59 | .transformName{ |
|---|
| 60 | font: 18px/200px bold arial, helvetica; |
|---|
| 61 | color: #bbb; |
|---|
| 62 | } |
|---|
| 63 | .mainContainer{ |
|---|
| 64 | width:800px; |
|---|
| 65 | border-right:1px solid #ccc; |
|---|
| 66 | text-align:left; |
|---|
| 67 | margin:auto; |
|---|
| 68 | } |
|---|
| 69 | </style> |
|---|
| 70 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true"></script> |
|---|
| 71 | <script type="text/javascript"> |
|---|
| 72 | dojo.require("dojo.fx"); |
|---|
| 73 | dojo.require("dojox.html.ext-dojo.style"); |
|---|
| 74 | dojo.require("dijit.form.HorizontalSlider"); |
|---|
| 75 | var toX = 125, |
|---|
| 76 | toY = 100, |
|---|
| 77 | rotation = 0, |
|---|
| 78 | translateX = 0, |
|---|
| 79 | translateY = 0, |
|---|
| 80 | skewX = 0, |
|---|
| 81 | skewY = 0, |
|---|
| 82 | scaleX = 1, |
|---|
| 83 | scaleY = 1 |
|---|
| 84 | ; |
|---|
| 85 | dojo.addOnLoad(function(){ |
|---|
| 86 | var rotateToX = dijit.byId("rotateToX"), |
|---|
| 87 | rotateTransformOrigin = dojo.byId("transformOriginNode"), |
|---|
| 88 | rotateToY = dijit.byId("rotateToY"), |
|---|
| 89 | rotateControl = dijit.byId("rotateControl"), |
|---|
| 90 | skewXControl = dijit.byId("skewXControl"), |
|---|
| 91 | skewYControl = dijit.byId("skewYControl"), |
|---|
| 92 | scaleXControl = dijit.byId("scaleXControl"), |
|---|
| 93 | scaleYControl = dijit.byId("scaleYControl"), |
|---|
| 94 | translateXControl = dijit.byId("translateXControl"), |
|---|
| 95 | translateYControl = dijit.byId("translateYControl"), |
|---|
| 96 | transforms = { |
|---|
| 97 | rotate: "", |
|---|
| 98 | translateX: "", |
|---|
| 99 | translateY: "", |
|---|
| 100 | skewX: "", |
|---|
| 101 | skewY: "", |
|---|
| 102 | scaleX: "", |
|---|
| 103 | scaleY: "" |
|---|
| 104 | }, |
|---|
| 105 | applyTransforms = function(transforms){ |
|---|
| 106 | var tString = ""; |
|---|
| 107 | for(var i in transforms){ |
|---|
| 108 | tString += transforms[i] + " "; |
|---|
| 109 | } |
|---|
| 110 | dojo.style("targetDiv", "transform", tString); |
|---|
| 111 | } |
|---|
| 112 | ; |
|---|
| 113 | |
|---|
| 114 | // rotate |
|---|
| 115 | rotateToX.connect(rotateToX, "onChange", function(){ |
|---|
| 116 | toX = parseInt(this.value); |
|---|
| 117 | dojo.style(rotateTransformOrigin, "left", toX + "px"); |
|---|
| 118 | dojo.style("targetDiv", "transformOrigin", toX + "px " + toY + "px"); |
|---|
| 119 | }); |
|---|
| 120 | rotateToY.connect(rotateToY, "onChange", function(){ |
|---|
| 121 | toY = parseInt(this.value); |
|---|
| 122 | dojo.style(rotateTransformOrigin, "top", toY + "px"); |
|---|
| 123 | dojo.style("targetDiv", "transformOrigin", toX + "px " + toY + "px"); |
|---|
| 124 | }); |
|---|
| 125 | rotateControl.connect(rotateControl, "onChange", function(){ |
|---|
| 126 | rotation = this.value; |
|---|
| 127 | transforms.rotate = "rotate(" + rotation + "deg)"; |
|---|
| 128 | applyTransforms(transforms); |
|---|
| 129 | }); |
|---|
| 130 | |
|---|
| 131 | // skewX |
|---|
| 132 | skewXControl.connect(skewXControl, "onChange", function(){ |
|---|
| 133 | skewX = this.value; |
|---|
| 134 | transforms.skewX = "skewX(" + skewX + "deg)"; |
|---|
| 135 | applyTransforms(transforms); |
|---|
| 136 | }); |
|---|
| 137 | |
|---|
| 138 | // skewY |
|---|
| 139 | skewYControl.connect(skewYControl, "onChange", function(){ |
|---|
| 140 | skewY = this.value; |
|---|
| 141 | transforms.skewY = "skewY(" + skewY + "deg)"; |
|---|
| 142 | applyTransforms(transforms); |
|---|
| 143 | }); |
|---|
| 144 | |
|---|
| 145 | // scaleX |
|---|
| 146 | scaleXControl.connect(scaleXControl, "onChange", function(){ |
|---|
| 147 | scaleX = this.value; |
|---|
| 148 | transforms.scaleX = "scaleX(" + scaleX + ")"; |
|---|
| 149 | applyTransforms(transforms); |
|---|
| 150 | }); |
|---|
| 151 | |
|---|
| 152 | // scaleY |
|---|
| 153 | scaleYControl.connect(scaleYControl, "onChange", function(){ |
|---|
| 154 | scaleY = this.value; |
|---|
| 155 | transforms.scaleY = "scaleY(" + scaleY + ")"; |
|---|
| 156 | applyTransforms(transforms); |
|---|
| 157 | }); |
|---|
| 158 | |
|---|
| 159 | // translateX |
|---|
| 160 | translateXControl.connect(translateXControl, "onChange", function(){ |
|---|
| 161 | translateX = this.value; |
|---|
| 162 | transforms.translateX = "translateX(" + translateX + "px)"; |
|---|
| 163 | applyTransforms(transforms); |
|---|
| 164 | }); |
|---|
| 165 | |
|---|
| 166 | // translateY |
|---|
| 167 | translateYControl.connect(translateYControl, "onChange", function(){ |
|---|
| 168 | translateY = this.value; |
|---|
| 169 | transforms.translateY = "translateY(" + translateY + "px)"; |
|---|
| 170 | applyTransforms(transforms); |
|---|
| 171 | }); |
|---|
| 172 | |
|---|
| 173 | }); |
|---|
| 174 | </script> |
|---|
| 175 | </head> |
|---|
| 176 | <body class="nihilo"> |
|---|
| 177 | <div class="mainContainer"> |
|---|
| 178 | <div class="boxContainer"> |
|---|
| 179 | <div id="targetDiv" class="box"> |
|---|
| 180 | <div class="toWrapper"> |
|---|
| 181 | <div class="transformName">Transform</div> |
|---|
| 182 | <div id="transformOriginNode" class="transformOrigin"> |
|---|
| 183 | </div> |
|---|
| 184 | </div> |
|---|
| 185 | </div> |
|---|
| 186 | </div> |
|---|
| 187 | <div class="controls"> |
|---|
| 188 | <table> |
|---|
| 189 | <tr> |
|---|
| 190 | <td>Transform Origin - x</td> |
|---|
| 191 | <td> |
|---|
| 192 | <div> |
|---|
| 193 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 194 | minimum="0" |
|---|
| 195 | maximum="250" |
|---|
| 196 | discreteValues="251" |
|---|
| 197 | value="125" |
|---|
| 198 | id="rotateToX"></div> |
|---|
| 199 | </div> |
|---|
| 200 | </td> |
|---|
| 201 | </tr> |
|---|
| 202 | <tr> |
|---|
| 203 | <td>Transform Origin - y</td> |
|---|
| 204 | <td> |
|---|
| 205 | <div> |
|---|
| 206 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 207 | minimum="0" |
|---|
| 208 | maximum="200" |
|---|
| 209 | discreteValues="361" |
|---|
| 210 | value="100" |
|---|
| 211 | id="rotateToY"></div> |
|---|
| 212 | </div> |
|---|
| 213 | </td> |
|---|
| 214 | </tr> |
|---|
| 215 | <tr> |
|---|
| 216 | <td>Rotation angle</td> |
|---|
| 217 | <td> |
|---|
| 218 | <div> |
|---|
| 219 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 220 | minimum="0" |
|---|
| 221 | maximum="360" |
|---|
| 222 | discreteValues="361" |
|---|
| 223 | value="0" |
|---|
| 224 | id="rotateControl"></div> |
|---|
| 225 | </div> |
|---|
| 226 | </td> |
|---|
| 227 | </tr> |
|---|
| 228 | <tr> |
|---|
| 229 | <td>Skew X</td> |
|---|
| 230 | <td> |
|---|
| 231 | <div> |
|---|
| 232 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 233 | minimum="0" |
|---|
| 234 | maximum="360" |
|---|
| 235 | discreteValues="361" |
|---|
| 236 | value="0" |
|---|
| 237 | id="skewXControl"></div> |
|---|
| 238 | </div> |
|---|
| 239 | </td> |
|---|
| 240 | </tr> |
|---|
| 241 | <tr> |
|---|
| 242 | <td>Skew Y</td> |
|---|
| 243 | <td> |
|---|
| 244 | <div> |
|---|
| 245 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 246 | minimum="0" |
|---|
| 247 | maximum="360" |
|---|
| 248 | discreteValues="361" |
|---|
| 249 | value="0" |
|---|
| 250 | id="skewYControl"></div> |
|---|
| 251 | </div> |
|---|
| 252 | </td> |
|---|
| 253 | </tr> |
|---|
| 254 | <tr> |
|---|
| 255 | <td>Scale X</td> |
|---|
| 256 | <td> |
|---|
| 257 | <div> |
|---|
| 258 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 259 | minimum=".1" |
|---|
| 260 | maximum="4" |
|---|
| 261 | discreteValues="41" |
|---|
| 262 | value="1" |
|---|
| 263 | id="scaleXControl"></div> |
|---|
| 264 | </div> |
|---|
| 265 | </td> |
|---|
| 266 | </tr> |
|---|
| 267 | <tr> |
|---|
| 268 | <td>Scale Y</td> |
|---|
| 269 | <td> |
|---|
| 270 | <div> |
|---|
| 271 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 272 | minimum=".1" |
|---|
| 273 | maximum="4" |
|---|
| 274 | discreteValues="41" |
|---|
| 275 | value="1" |
|---|
| 276 | id="scaleYControl"></div> |
|---|
| 277 | </div> |
|---|
| 278 | </td> |
|---|
| 279 | </tr> |
|---|
| 280 | <tr> |
|---|
| 281 | <td>Translate X</td> |
|---|
| 282 | <td> |
|---|
| 283 | <div> |
|---|
| 284 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 285 | minimum="0" |
|---|
| 286 | maximum="200" |
|---|
| 287 | discreteValues="201" |
|---|
| 288 | value="0" |
|---|
| 289 | id="translateXControl"></div> |
|---|
| 290 | </div> |
|---|
| 291 | </td> |
|---|
| 292 | </tr> |
|---|
| 293 | <tr> |
|---|
| 294 | <td>Translate Y</td> |
|---|
| 295 | <td> |
|---|
| 296 | <div> |
|---|
| 297 | <div style="width:200px" dojoType="dijit.form.HorizontalSlider" |
|---|
| 298 | minimum="0" |
|---|
| 299 | maximum="200" |
|---|
| 300 | discreteValues="201" |
|---|
| 301 | value="0" |
|---|
| 302 | id="translateYControl"></div> |
|---|
| 303 | </div> |
|---|
| 304 | </td> |
|---|
| 305 | </tr> |
|---|
| 306 | </table> |
|---|
| 307 | </div> |
|---|
| 308 | </div> |
|---|
| 309 | </body> |
|---|
| 310 | </html> |
|---|
