simkimsia · September 23, 2012 04:00
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<style type="text/css">
 		body{
 		    overflow:hidden;
 		}

 		#flipbook{
 		    width:400px;
 		    height:300px;
 		}

 		#droparea {
 			width:200px;
 		    height:200px;	
 		}

 		#flipbook .page{
 		    width:400px;
 		    height:300px;
 		    background-color:white;
 		    line-height:300px;
 		    font-size:20px;
 		    text-align:center;
 		    background-size:100% 100%;
 		    background-color:white;
 		}

 		button{
 		    font-size:15px;
 		    margin:10px;
 		}
 		</style>

 		<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
 		<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
 		<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
 		<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>

 	</head>
 	<body>
 		<button>Add page </button>

 		<div id="droparea" style="border:1px solid black;"></div>

 		<div id="flipbook">
 		    <div class="tmp"></div>
 		</div>
 		<script type="text/javascript">
 		
 		yepnope({
 			test : Modernizr.csstransforms,
 			yep: ['../../lib/turn.min.js'],
 			nope: ['../../lib/turn.html4.min.js'],
 			complete: loadApp
 		});

 		function loadApp() {
 			$("#flipbook").turn({
 			    width: 400,
 			    height: 300,
 			    autoCenter: true
 			});

 		}


 		function addToBook(file) {

 			var fileValid = isFileValid(file);
 			if (fileValid) {

 				

 		    	// step#1 prepare the div to insert as new page
 				var div = $("<div />");

 		    	// step#2 prepare the filereader onload function on what to do with data url

 				reader = new FileReader();
 				reader.onload = (function (theDiv) {
 					return function (evt) {
 						var backgroundimage = "url(" + evt.target.result + ")";
 						theDiv.css("background-image", backgroundimage);
 					};
 					
 				}(div));
 					
 				// step#3 execute file reader
 				reader.readAsDataURL(file);

 				// step#4 add the div to the book as a new page
 		    	$("#flipbook").turn("addPage", div);

 		    	// step#5 remove temp page
 				if ($("#flipbook .p1").hasClass("tmp")) { 
 		        	$("#flipbook").turn("removePage", 1);   
 		    	}

 			}

 		}




 		

 		/** fileAPI code  **/
 			function isFileValid(file) {
 				// this tests to ensure the file type is image/xxxx
 				return (typeof FileReader !== "undefined" && (/image/i).test(file.type));
 			}

 			function traverseFiles (files) {
 				if (typeof files !== "undefined") {
 					for (var i=0, l=files.length; i<l; i++) {
 						addToBook(files[i]);
 					}
 				}
 				else {
 					// show no support error message here
 					alert("No support for the File API in this web browser");
 				}	
 			}

 		$(document).ready(function (){

 			var	dropArea = document.getElementById("droparea");

 			dropArea.addEventListener("dragleave", function (evt) {
 				var target = evt.target;

 				if (target && target === dropArea) {
 					this.className = "";
 				}
 				evt.preventDefault();
 				evt.stopPropagation();

 				

 			}, false);

 			dropArea.addEventListener("dragenter", function (evt) {
 				this.className = "over";
 				evt.preventDefault();
 				evt.stopPropagation();
 				
 			}, false);

 			dropArea.addEventListener("dragover", function (evt) {
 				evt.preventDefault();
 				evt.stopPropagation();

 				
 			}, false);

 			dropArea.addEventListener("drop", function (evt) {
 				traverseFiles(evt.dataTransfer.files);
 				
 				this.className = "";
 				evt.preventDefault();
 				evt.stopPropagation();
 				
 			}, false);	
 												
 		});

 		</script>
 	</body>
 </html>
	<html>
	<head>
	<style type="text/css">
	body{
	overflow:hidden;
	}

	#flipbook{
	width:400px;
	height:300px;
	}

	#droparea {
	width:200px;
	height:200px;
	}

	#flipbook .page{
	width:400px;
	height:300px;
	background-color:white;
	line-height:300px;
	font-size:20px;
	text-align:center;
	background-size:100% 100%;
	background-color:white;
	}

	button{
	font-size:15px;
	margin:10px;
	}
	</style>

	<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
	<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
	<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>

	</head>
	<body>
	<button>Add page </button>

	<div id="droparea" style="border:1px solid black;"></div>

	<div id="flipbook">
	<div class="tmp"></div>
	</div>
	<script type="text/javascript">

	yepnope({
	test : Modernizr.csstransforms,
	yep: ['../../lib/turn.min.js'],
	nope: ['../../lib/turn.html4.min.js'],
	complete: loadApp
	});

	function loadApp() {
	$("#flipbook").turn({
	width: 400,
	height: 300,
	autoCenter: true
	});

	}


	function addToBook(file) {

	var fileValid = isFileValid(file);
	if (fileValid) {



	// step#1 prepare the div to insert as new page
	var div = $("<div />");

	// step#2 prepare the filereader onload function on what to do with data url

	reader = new FileReader();
	reader.onload = (function (theDiv) {
	return function (evt) {
	var backgroundimage = "url(" + evt.target.result + ")";
	theDiv.css("background-image", backgroundimage);
	};

	}(div));

	// step#3 execute file reader
	reader.readAsDataURL(file);

	// step#4 add the div to the book as a new page
	$("#flipbook").turn("addPage", div);

	// step#5 remove temp page
	if ($("#flipbook .p1").hasClass("tmp")) {
	$("#flipbook").turn("removePage", 1);
	}

	}

	}






	/ fileAPI code /
	function isFileValid(file) {
	// this tests to ensure the file type is image/xxxx
	return (typeof FileReader !== "undefined" && (/image/i).test(file.type));
	}

	function traverseFiles (files) {
	if (typeof files !== "undefined") {
	for (var i=0, l=files.length; i<l; i++) {
	addToBook(files[i]);
	}
	}
	else {
	// show no support error message here
	alert("No support for the File API in this web browser");
	}
	}

	$(document).ready(function (){

	var dropArea = document.getElementById("droparea");

	dropArea.addEventListener("dragleave", function (evt) {
	var target = evt.target;

	if (target && target === dropArea) {
	this.className = "";
	}
	evt.preventDefault();
	evt.stopPropagation();



	}, false);

	dropArea.addEventListener("dragenter", function (evt) {
	this.className = "over";
	evt.preventDefault();
	evt.stopPropagation();

	}, false);

	dropArea.addEventListener("dragover", function (evt) {
	evt.preventDefault();
	evt.stopPropagation();


	}, false);

	dropArea.addEventListener("drop", function (evt) {
	traverseFiles(evt.dataTransfer.files);

	this.className = "";
	evt.preventDefault();
	evt.stopPropagation();

	}, false);

	});

	</script>
	</body>
	</html>
No results found