From 71aceb4ef0f07a8272cfbbe79b6f28610f31bed0 Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Tue, 30 Apr 2013 23:17:37 +0200 Subject: [PATCH] better file example --- examples/file.html | 169 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 135 insertions(+), 34 deletions(-) diff --git a/examples/file.html b/examples/file.html index 6d23b72..ce83296 100644 --- a/examples/file.html +++ b/examples/file.html @@ -1,3 +1,9 @@ + @@ -9,11 +15,14 @@ - + -
+
+ +
+ @@ -47,59 +67,140 @@ 'use strict'; - var pages = [], $progressbar = $('.bar'); + var $droptarget = $('#droptarget'); + var $progressbar = $('.bar'); - bitjs.archive.Unrarrer.prototype.getScriptFileName = function() { return '/cbr/lib/bitjs/unrar.js' } - bitjs.archive.Unzipper.prototype.getScriptFileName = function() { return '/cbr/lib/bitjs/unzip.js' } + if (!$.isFunction(window.FileReader)) { + $('#filepicker').html("Your browser doesn't support the HTML5 FileReader API. http://browsehappy.com."); + return false; + } - $('#open').on('change', function () { + function extractImages(files, opts) { + var images = []; var fr = new FileReader(); - var file = this.files[0]; - var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.match(/\.(cbz|cbr)$/)[1]]; + var file = files[0]; + var re_file_ext = new RegExp(/\.([a-z]+)$/); + var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.toLowerCase().match(re_file_ext)[1]]; + var options = $.extend({ + start: function () {}, + extract: function (page_url) {}, + progress: function (percent_complete) {}, + finish: function (images) {}, + }, opts); - $('#open').hide(); - $('#progressbar').show(); + if (!archive_class) { + alert('invalid file type, only cbz and cbr are supported.'); + return false; + } + + options.start(file); fr.onload = function () { var done = false; - var ua = new bitjs.archive[archive_class](this.result); - - ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) { - var progress = Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100); - $progressbar.css('width', progress + '%'); - if (progress == 100 && !done) { - drawBook(pages); - done = true; - } - }); + var ua = new bitjs.archive[archive_class](this.result, '/cbr/lib/bitjs/'); ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.EXTRACT, function (e) { - if (e.unarchivedFile.filename.match(/jpg$/)) { - var url = window.URL.createObjectURL(new Blob([e.unarchivedFile.fileData], { type: 'image/jpeg' } )); - pages.push(url); - // $('body').append($('').attr('src', url).css('width', '200px')); + + var mimetype, blob, url; + var file_extension = e.unarchivedFile.filename.toLowerCase().match(re_file_ext)[1]; + + switch (file_extension) { + case 'jpg': + case 'jpeg': + mimetype = 'image/jpeg'; + break; + case 'png': + mimetype = 'image/png'; + break; + case 'gif': + mimetype = 'image/gif'; + break; + default: + return false; } + + blob = new Blob([e.unarchivedFile.fileData], { type: mimetype }); + url = window.URL.createObjectURL(blob); + + images.push(url); + + options.extract(url, blob); + }); + + ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) { + options.progress(Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100)); + }); + + ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.FINISH, function (e) { + options.finish(images); }); ua.start(); }; fr.readAsArrayBuffer(file); + } - }); + function openComicArchive(e) { - function drawBook(pages) { - var book = new ComicBook('comic', pages); - $('#filepicker').hide(); - $('#comic').show(); - book.draw(); - $(window).resize(function(event) { - book.draw(); + var title; + var files = e.target.files || e.originalEvent.dataTransfer.files; + + e.stopPropagation(); + e.preventDefault(); + + extractImages(files, { + start: function (file) { + this.file = file; + $droptarget.hide(); + $('#open').hide(); + $('#filename').text(file.name); + $('#progressbar').show(); + }, + extract: function (url, blob) { + // $('body').append($('').attr('src', url).css('width', '10px')); + // console.log(url, Math.floor(blob.size / 1024)); + }, + progress: function (percent_complete) { + $progressbar.css('width', percent_complete + '%'); + }, + finish: function (pages) { + + var name = this.file.name.replace(/\.[a-z]+$/, ''); + var id = encodeURIComponent(name.toLowerCase()); + var book = new ComicBook('comic', pages); + + document.title = name; + + $('#filepicker').hide(); + $('#comic').show(); + + book.draw(); + + $(window).resize(function () { + book.draw(); + }); + } }); } + $droptarget.on('dragover', function (e) { + e.stopPropagation(); + e.preventDefault(); + $(this).addClass('active'); + }); + + $droptarget.on('dragleave', function (e) { + e.stopPropagation(); + e.preventDefault(); + $(this).removeClass('active'); + }); + + $droptarget.on('drop', openComicArchive); + $('#open').on('change', openComicArchive); + }());