Skip to content

Instantly share code, notes, and snippets.

@eduardolundgren

eduardolundgren/gist:2564664

Created May 1, 2012 03:13
Show Gist options
  • Save eduardolundgren/2564664 to your computer and use it in GitHub Desktop.
Save eduardolundgren/2564664 to your computer and use it in GitHub Desktop.
Download ZIP
Resize respect ratio when shift is pressed
Raw
gistfile1.js
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
padding: 100px;
}
#resize1 {
width: 200px;
height: 100px;
margin: 10px;
background: lightblue;
position: relative;
}
#resize2 {
width: 100px;
height: 100px;
margin: 10px;
background: lightgreen;
position: relative;
}
</style>
</head>
<body>
<div id="resize1">Rectangle</div>
<div id="resize2">Square</div>
<script type="text/javascript" charset="utf-8">
AUI().use('resize', function(A) {
var shift = false;
// Rectangula shape = Need correction.
var resize1 = new A.Resize({
node: '#resize1',
on: {
align: function(event) {
this.con.set('preserveRatio', shift);
}
},
plugins: [A.Plugin.ResizeConstrained]
});
// Squared shape = Ratio is already 1, no need for correction.
var resize2 = new A.Resize({
node: '#resize2',
on: {
align: function(event) {
this.con.set('preserveRatio', shift);
}
},
plugins: [A.Plugin.ResizeConstrained]
});
A.one('doc').on(['keydown', 'keyup'], function(event) {
shift = event.shiftKey;
// For rectangular shapes like #resize1 need to force ratio=1
var o = resize1.originalInfo, i = resize1.info;
if (shift && o && i) {
o.offsetWidth = Math.max(i.offsetHeight, i.offsetWidth);
o.offsetHeight = o.offsetWidth;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment