formstone/src/docs/touch.html

Library of modular front end components.

<h4>Manipulate</h4>

<!-- START: FIRSTDEMO -->

<style>
  .box { background: #00bcd4; color: #fff; text-align: center; }

  .container { background: #fff; border: 1px solid #455a64; height: 400px; margin: 20px 0; overflow: hidden; position: relative; width: 100%; }

  .register { height: 1px; left: 50%; position: absolute; top: 50%; width: 1px; }
  .box { height: 150px; line-height: 150px; left: -75px; position: absolute; top: -75px; width: 150px; }

  .swipe { background: gray; height: 100px; width: 100%; }
</style>

<script>
  Formstone.Ready(function() {
    var $targets = $(".touch"),
      _minX = 0,
      _minY = 0;

/*
    $(".swipe").touch({
      swipe: true,
      axis: x
    }).on("swipe", function(e) {
      $(this).html(e.directionX);
    });
*/

    $targets.each(function() {
      var $target = $(this),
        data = {
          $container: $target.parents(".container"),
          $register:  $target.parents(".register")
        };

      $target.data("demo", data);
    });

    // Pan
    $(".pan").touch({
      pan: true
    }).on("panstart", function(e) {
      var $target = $(this),
        data = $target.data("demo"),
        offset = data.$register.position();

      data.origX = offset.left;
      data.origY = offset.top;

      data.diffWidth  = $target.outerWidth() / 2;
      data.diffHeight = $target.outerHeight() / 2;
    })
    .on("panend", function(e) {
      // ...
    });

    // Bubbling

    $(document).on("pan", ".pan", function(e) {
      var $target = $(this),
        data = $target.data("demo"),
        x = data.origX + e.deltaX,
        y = data.origY + e.deltaY,
        minX = _minX + data.diffWidth,
        minY = _minY + data.diffHeight,
        maxX = data.$container.outerWidth()  - minX - 2,
        maxY = data.$container.outerHeight() - minY - 2;

      if (x < minX) {
        x = minX;
      }
      if (x > maxX) {
        x = maxX;
      }
      if (y < minY) {
        y = minY;
      }
      if (y > maxY) {
        y = maxY;
      }

      data.$register.css({
        left: x,
        top:  y
      });
    });

    // Scale
    $(".scale").touch({
      scale: true
    }).on("scalestart", function(e) {
      var $target = $(this),
        data = $target.data("demo"),
        offset = $target.position();

      data.origWidth  = $target.outerWidth();
      data.origHeight = $target.outerHeight();
    })
    .on("scaleend", function(e) {
      // ...
    })
    .on("scale", function(e) {
      var $target = $(this),
        data = $target.data("demo")
        width  = data.origWidth  * e.scale,
        height = data.origHeight * e.scale,
        minWidth  = 150,
        minHeight = 150,
        maxH = data.$container.outerHeight(),
        maxW = data.$container.outerWidth(),
        maxWidth  = (maxH > maxW) ? maxW : maxH,
        maxHeight = (maxH > maxW) ? maxW : maxH;

      if (width < minWidth) {
        width = minWidth;
      }
      if (width > maxWidth) {
        width = maxWidth;
      }

      if (height < minHeight) {
        height = minHeight;
      }
      if (height > maxHeight) {
        height = maxHeight;
      }

      $target.css({
        width:  width,
        height: height,
        lineHeight: height + "px",
        left: -(width / 2),
        top:  -(height / 2)
      });
    });

    // Manipulate
    $(".manipulate").touch({
      pan: true,
      scale: true
    }).on("scalestart", function(e) {
      var $target = $(this),
        data = $target.data("demo"),
        offset = data.$register.position();

      data.origX = offset.left;
      data.origY = offset.top;

      data.origWidth  = $target.outerWidth();
      data.origHeight = $target.outerHeight();
    })
    .on("scaleend", function(e) {
      // ...
    })
    .on("scale", function(e) {
      var $target = $(this),
        data = $target.data("demo")
        width  = data.origWidth  * e.scale,
        height = data.origHeight * e.scale,
        // pan
        x = data.origX + e.deltaX,
        y = data.origY + e.deltaY,
        minX = _minX,
        minY = _minY,
        maxX = data.$container.outerWidth()  - minX,
        maxY = data.$container.outerHeight() - minY,
        // scale
        minWidth  = 150,
        minHeight = 150,
        maxWidth = 600,
        maxHeight = 600;

      if (x < minX) {
        x = minX;
      }
      if (x > maxX) {
        x = maxX;
      }
      if (y < minY) {
        y = minY;
      }
      if (y > maxY) {
        y = maxY;
      }

      data.$register.css({
        left: x,
        top:  y
      });

      if (width < minWidth) {
        width = minWidth;
      }
      if (width > maxWidth) {
        width = maxWidth;
      }

      if (height < minHeight) {
        height = minHeight;
      }
      if (height > maxHeight) {
        height = maxHeight;
      }

      $target.css({
        width:  width,
        height: height,
        lineHeight: height + "px",
        left: -(width / 2),
        top:  -(height / 2)
      });
    });
  });
</script>

<div class="demo_container">
  <div class="demo_example">
    <div class="container">
      <div class="register">
        <div class="box touch manipulate">Scale &amp; Pan</div>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;touch_container&quot;&gt;
&Tab;&lt;div class=&quot;touch_target&quot;&gt;Touch&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".touch_target").touch({
  pan: true,
  scale: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to pan...
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale   = e.scale,
    deltaX  = e.deltaX,
    deltaY  = e.deltaY;

  // React to scale and pan...
});</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Pan</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="container">
      <div class="register">
        <div class="box touch pan">Pan</div>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;touch_container&quot;&gt;
&Tab;&lt;div class=&quot;touch_target&quot;&gt;Touch&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".touch_target").touch({
  pan: true
}).on("panstart", function(e) {
  // Handle pan start
  // Cache positions, etc...
}).on("panend", function(e) {
  // Handle pan end
  // Clean up data...
}).on("pan", function(e) {
  var deltaX = e.deltaX,
    deltaY = e.deltaY;

  // React to pan...
});</code></pre>
  </div>
</div>

<h4>Scale</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="container">
      <div class="register">
        <div class="box touch scale">Scale</div>
      </div>
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;touch_container&quot;&gt;
&Tab;&lt;div class=&quot;touch_target&quot;&gt;Touch&lt;/div&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".touch_target").touch({
  scale: true
}).on("scalestart", function(e) {
  // Handle scale start
  // Cache positions, etc...
}).on("scaleend", function(e) {
  // Handle touch end
  // Clean up data...
}).on("scale", function(e) {
  var scale = e.scale;

  // React to scale...
});</code></pre>
  </div>
</div>