formstone
Version:
Library of modular front end components.
396 lines (355 loc) • 15.5 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Touch · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="touch-demo">Touch Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/touch">View Documentation</a></p>
<!-- START: DEMO -->
<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 & Pan</div>
</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="touch_container">
	<div class="touch_target">Touch</div>
</div></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"><div class="touch_container">
	<div class="touch_target">Touch</div>
</div></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"><div class="touch_container">
	<div class="touch_target">Touch</div>
</div></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>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>