Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (108 sloc) 4.79 KB
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" type="text/css" media="all" href="css/oocss/all.css"/>
<style type="text/css">
#pagesarea {
float: left;
width: 644px;
margin-left: 16px;
margin-bottom: 60px;
border: 1px solid #DCDDDE;
border-radius: 5px;
}
</style>
<script src="js/q/0.8.10/q.min.js" type="text/javascript"></script>
<script src="js/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="js/arraylike/arraylike.js" type="text/javascript"></script>
</head>
<body class="polkadots">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="page" style="height:800px;">
<div id="pagesarea">
<div id="pagesarea-inner-wrap" style="height: 500px;">
</div>
</div>
</div>
<script type="text/javascript">
var pageSizes = new ArrayLike();
var pages = new ArrayLike();
var SIZES = new Object();
SIZES['Original'] = {'ratio' : 0.70};
SIZES['Common'] = {'ratio' : 0.65};
function traverseFiles() {
// collect all the promises
// of the traversed files undergoing calculateRatio
var promises = [];
for (var i=0, l=pages.length; i<l; i++) {
promises.push(
getSizeSettingsFromPage(pages[i], calculateRatio)
);
}
// this returns 0
// *** Call checkWhenReady after all promises have been resolved
Q.all(promises).then(checkWhenReady);
}
function getSizeSettingsFromPage(file, whenReady) {
// *** Create a Deferred
var deferred = Q.defer();
reader = new FileReader();
reader.onload = function(evt) {
var image = new Image();
image.onload = function(evt) {
var width = this.width;
var height = this.height;
var filename = file.name;
if (whenReady) {
whenReady(width, height, filename);
}
// *** Resolve the Deferred
deferred.resolve();
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
// *** Return a Promise
return deferred.promise;
}
function calculateRatio(width, height, filename) {
var ratio = width/height;
var object = new Object();
object['height'] = width;
object['width'] = height;
object['ratio'] = ratio;
object['size'] = 'Original';
for (var size in SIZES) {
var min = SIZES[size].ratio - 0.01;
var max = SIZES[size].ratio + 0.01;
if (ratio <= max && ratio >= min) {
object['size'] = size;
}
}
pageSizes.add(filename, object);
}
function checkWhenReady() {
alert(pageSizes.length);
}
$(document).ready(function (){
pageareaInnerWrap = document.getElementById("pagesarea-inner-wrap");
pageareaInnerWrap.addEventListener("drop", function (evt) {
pages.convertFrom(evt.dataTransfer.files);
// after the above code, pages will now contain all the
// files dropped into the div#pagesarea-inner-wrap
traverseFiles();
evt.preventDefault();
evt.stopPropagation();
pageareaInnerWrap.classList.remove("over");
}, false);
});
</script>
</body>
</html>