Adds size changing tool links.

Michael Bleigh · Michael Bleigh · commit c0ea192856c3 · 2011-08-20T16:38:32.000-03:00
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src='src/sketch.js'></script>
     <style type='text/css'>
-      body { font-family: "Open Sans", sans-serif; }
+      body { font-family: "Open Sans", sans-serif; color: #444; }
       h1, h2, h3, h4 { font-family: Yellowtail; font-weight: normal; color: #06a; }
 
       #wrapper { width: 800px; margin: 0 auto; }
@@ -21,6 +21,18 @@
         height: 300px;
         border: 1px solid #ccc;
       }
+
+      pre.source {
+        background: #e5eeee;
+        padding: 10px 20px;
+        width: 760px;
+        overflow-x: auto;
+        border: 1px solid #acc;
+      }
+
+      #colors_tools a {
+        border: 1px solid black; width: 30px; height: 30px; line-height: 30px; vertical-align: middle; text-align: center; text-decoration: none; display: inline-block; color: black; font-weight: bold;
+      }
     </style>
   </head>
   <body>
@@ -37,17 +49,17 @@ <h1>Simple Example</h1>
         <p>Click and drag in the box below to draw a simple black line.</p>
 
         <div class='demo'>
-        <canvas id='simple_sketch' width='800' height='300'></canvas>
-        <script type='text/javascript'>
-          $(function() {
-            $('#simple_sketch').sketch();
-          });
-        </script>
+          <canvas id='simple_sketch' width='800' height='300'></canvas>
+          <script type='text/javascript'>
+            $(function() {
+              $('#simple_sketch').sketch();
+            });
+          </script>
         </div>
       </article>
 
       <article class='example'>
-        <h1>Color Change</h1>
+        <h1>Changing Color/Size</h1>
         
         <p></p>
         
@@ -56,8 +68,11 @@ <h1>Color Change</h1>
           <canvas id='colors_sketch' width='800' height='300'></canvas>
           <script type='text/javascript'>
             $(function() {
-             $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() {
-                $('#colors_tools').append("<a href='#colors_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> ");
+              $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() {
+                $('#colors_tools').append("<a href='#colors_sketch' data-color='" + this + "' style='background: " + this + ";'></a> ");
+              });
+              $.each([3, 5, 10, 15], function() {
+                $('#colors_tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
               });
               $('#colors_sketch').sketch();
             });
@@ -75,7 +90,8 @@ <h1>Color Change</h1>
 
       $('article.example').each(function() {
         $(this).append("<pre class='source'></pre>");
-        $(this).find("pre.source").html(escapeHTML($(this).find("div.demo").html()));
+        var html = $(this).find("div.demo").html().replace(/          /g,"");
+        $(this).find("pre.source").html(escapeHTML(html));
       });
     </script>
   </body>
diff --git a/src/sketch.coffee b/src/sketch.coffee
@@ -20,6 +20,23 @@
       @actions = []
       @action = []
 
+      @canvas.bind 'sketch.changecolor', (e, color)->
+        $(this).data('sketch').color = color
+      @canvas.bind 'sketch.changesize', (e, size)->
+        $(this).data('sketch').size = size
+      @canvas.bind 'mousedown mouseup mousemove mouseleave touchstart touchmove touchend touchcancel', @onEvent
+
+      if @options.toolLinks
+        $('body').delegate "a[href=\"##{@canvas.attr('id')}\"]", 'click', (e)->
+          $this = $(this)
+          $canvas = $($this.attr('href'))
+          if $this.attr('data-color')
+            $canvas.trigger 'sketch.changecolor', $(this).attr('data-color')
+          if $this.attr('data-size')
+            $canvas.trigger 'sketch.changesize', parseFloat($(this).attr('data-size'))
+          false
+
+
     startPainting: ->
       @painting = true
       @action = {
@@ -40,9 +57,9 @@
 
     addEvent: (e)->
       switch e.type
-        when 'mousedown'
+        when 'mousedown', 'touchstart'
           @startPainting()
-        when 'mouseup', 'mouseout'
+        when 'mouseup', 'mouseout', 'touchend', 'touchcancel'
           @stopPainting()
       
       if @painting
@@ -82,23 +99,7 @@
 
   $.fn.sketch = (opts)->
     $.error('Sketch can only be called on one element at a time.') if this.length > 1
-    
     this.data('sketch', new Sketch(this.get(0), opts))
-    sketch = this.data('sketch')
-
-    this.bind 'sketch.changecolor', (e, color)->
-      sketch.color = color
-    this.bind 'mousedown mouseup mousemove mouseleave', sketch.onEvent
-
-    that = this
-    if sketch.options.toolLinks
-      console.log that
-      $('body').delegate "a[href=\"##{that.attr('id')}\"]", 'click', (e)->
-        $this = $(this)
-        if $this.attr('data-color')
-          that.trigger 'sketch.changecolor', $(this).attr('data-color')
-        false
-
     this
 
 )(jQuery)
diff --git a/src/sketch.js b/src/sketch.js
