diff --git a/css/quicklook.css b/css/quicklook.css index 32c44ce3b..9eb6832f9 100644 --- a/css/quicklook.css +++ b/css/quicklook.css @@ -313,7 +313,8 @@ } /* image in preview */ -.elfinder-quicklook-preview img { +.elfinder-quicklook-preview > img, +.elfinder-quicklook-preview > div > canvas { display: block; margin: 0 auto; } diff --git a/js/commands/quicklook.plugins.js b/js/commands/quicklook.plugins.js index 96a0862a0..3a1e1fec6 100644 --- a/js/commands/quicklook.plugins.js +++ b/js/commands/quicklook.plugins.js @@ -135,6 +135,70 @@ elFinder.prototype.commands.quicklook.plugins = [ }); }, + /** + * TIFF image preview + * + * @param object ql elFinder.commands.quicklook + */ + function(ql) { + "use strict"; + var fm = ql.fm, + mime = 'image/tiff', + preview = ql.preview; + if (window.Worker && window.Uint8Array) { + preview.on(ql.evUpdate, function(e) { + var file = e.file, + err = function(e) { + wk && wk.terminate(); + loading.remove(); + fm.debug('error', e); + }, + loading, url, base, wk; + if (file.mime === mime) { + e.stopImmediatePropagation(); + + loading = $('
'+fm.i18n('nowLoading')+'
').appendTo(ql.info.find('.elfinder-quicklook-info')); + // stop loading on change file if not loaded yet + preview.one('change', function() { + wk && wk.terminate(); + loading.remove(); + }); + + url = fm.openUrl(file.hash); + if (!fm.isSameOrigin(url)) { + url = fm.openUrl(file.hash, true); + } + base = $('
').css({width:'100%',height:'100%'}).hide().appendTo(preview); + try { + wk = fm.getWorker(); + wk.onmessage = function(res) { + var data = res.data, + cv, co, id; + wk && wk.terminate(); + cv = document.createElement('canvas'); + co = cv.getContext('2d'); + cv.width = data.width; + cv.height = data.height; + id = co.createImageData(data.width, data.height); + (id).data.set(new Uint8Array(data.image)); + co.putImageData(id, 0, 0); + base.append($(cv).css({maxWidth:'100%',maxHeight:'100%'})).show(); + loading.remove(); + ql.hideinfo(); + }; + wk.onerror = err; + wk.postMessage({ + scripts: [fm.options.cdns.tiff, 'quicklook.tiff.js'], + data: { url: url } + }); + } catch(e) { + err(e); + } + } + }); + } + }, + /** * PSD(Adobe Photoshop data) preview plugin * @@ -1007,7 +1071,17 @@ elFinder.prototype.commands.quicklook.plugins = [ loading.remove(); }) .done(function(data) { - var unzip, filenames; + var unzip, filenames, + err = function(e) { + wk && wk.terminate(); + loading.remove(); + if (isZlib) { + Zlib = false; + } else if (isBzip2) { + bzip2 = false; + } + fm.debug('error', e); + }; try { wk = fm.getWorker(); wk.onmessage = function(res) { @@ -1019,9 +1093,7 @@ elFinder.prototype.commands.quicklook.plugins = [ makeList(res.data.files); } }; - wk.onerror = function(e) { - throw e; - }; + wk.onerror = err; if (file.mime === 'application/x-tar') { wk.postMessage({ scripts: ['quicklook.unzip.js'], @@ -1045,14 +1117,7 @@ elFinder.prototype.commands.quicklook.plugins = [ }); } } catch (e) { - wk && wk.terminate(); - loading.remove(); - if (isZlib) { - Zlib = false; - } else if (isBzip2) { - bzip2 = false; - } - fm.debug('error', e); + err(e); } }); }, diff --git a/js/elFinder.options.js b/js/elFinder.options.js index dc054e4d0..d1c1af068 100644 --- a/js/elFinder.options.js +++ b/js/elFinder.options.js @@ -35,7 +35,8 @@ elFinder.prototype._options = { marked : 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js', sparkmd5 : 'https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js', jssha : 'https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.3.1/sha.js', - amr : 'https://cdn.jsdelivr.net/gh/yxl/opencore-amr-js@dcf3d2b5f384a1d9ded2a54e4c137a81747b222b/js/amrnb.js' + amr : 'https://cdn.jsdelivr.net/gh/yxl/opencore-amr-js@dcf3d2b5f384a1d9ded2a54e4c137a81747b222b/js/amrnb.js', + tiff : 'https://cdn.jsdelivr.net/gh/seikichi/tiff.js@545ede3ee46b5a5bc5f06d65954e775aa2a64017/tiff.min.js' }, /** diff --git a/js/worker/quicklook.tiff.js b/js/worker/quicklook.tiff.js new file mode 100644 index 000000000..df5d0b27c --- /dev/null +++ b/js/worker/quicklook.tiff.js @@ -0,0 +1,11 @@ +var data = self.data; +if (data.memory) { + Tiff.initialize({ TOTAL_MEMORY: data.memory }); +} +var xhr = new XMLHttpRequest(); +xhr.open('GET', data.url, false); +xhr.responseType = 'arraybuffer'; +xhr.send(null); +var tiff = new Tiff({buffer: xhr.response}); +var image = tiff.readRGBAImage(); +self.res = { image: image, width: tiff.width(), height: tiff.height() };