From dab1c22195c71a1ccf935b78331fd9135e23dd5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9=20=D0=A9=D0=B8=D0=BF?= =?UTF-8?q?=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Wed, 10 Jun 2015 15:08:02 -0700 Subject: [PATCH] Create Croppic.ts for typescript users Create Croppic.ts for typescript users --- croppic.ts | 889 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 889 insertions(+) create mode 100644 croppic.ts diff --git a/croppic.ts b/croppic.ts new file mode 100644 index 0000000..3fc8132 --- /dev/null +++ b/croppic.ts @@ -0,0 +1,889 @@ +module CroppicModule { + + export class CroppicOptions { + uploadUrl = ''; + uploadData = {}; + cropUrl = ''; + cropData = {}; + outputUrlId = ''; + //styles + imgEyecandy = true; + imgEyecandyOpacity = 0.2; + zoomFactor = 10; + rotateFactor = 5; + doubleZoomControls = true; + rotateControls = true; + modal = false; + customUploadButtonId = ''; + loaderHtml = ''; + scaleToFill = true; + processInline = false; + loadPicture = ''; + onReset: any; + enableMousescroll = false; + + //callbacks + onBeforeImgUpload: any; + onAfterImgUpload: any; + onImgDrag: any; + onImgZoom: any; + onImgRotate: any; + onBeforeImgCrop: any; + onAfterImgCrop: any; + onBeforeRemoveCroppedImg: any; + onAfterRemoveCroppedImg: any; + onError: any; + + } + + export class Croppic { + id = ''; + options: CroppicOptions; + imgInitW = 0; + imgInitH = 0; + imgW = 0; + imgH = 0; + objW = 0; + objH = 0; + actualRotation = 0; + windowW = 0; + windowH = $(window).height(); + obj: any; + outputDiv: JQuery; + imgUploadControl: JQuery; + outputUrlObj = {}; + img: JQuery; + defaultImg: {}; + croppedImg: JQuery; + imgEyecandy: JQuery; + form: JQuery; + iframeform: JQuery; + iframeobj: JQuery; + cropControlsUpload: JQuery; + cropControlsCrop: JQuery; + cropControlZoomMuchIn: JQuery; + cropControlZoomMuchOut: JQuery; + cropControlZoomIn: JQuery; + cropControlZoomOut: JQuery; + cropControlCrop: JQuery; + cropControlReset: JQuery; + cropControlRemoveCroppedImage: JQuery; + modal: JQuery; + loader: JQuery; + imgUrl: string; + + constructor(id, options: any) { + var that = this; + that.id = id; + that.obj = $('#' + id); + that.outputDiv = that.obj; + + // DEFAULT OPTIONS + that.options = { + uploadUrl: '', + uploadData: {}, + cropUrl: '', + cropData: {}, + outputUrlId: '', + //styles + imgEyecandy: true, + imgEyecandyOpacity: 0.2, + zoomFactor: 10, + rotateFactor: 5, + doubleZoomControls: true, + rotateControls: true, + modal: false, + customUploadButtonId: '', + loaderHtml: '', + scaleToFill: true, + processInline: false, + loadPicture: '', + onReset: null, + enableMousescroll: false, + + //callbacks + onBeforeImgUpload: null, + onAfterImgUpload: null, + onImgDrag: null, + onImgZoom: null, + onImgRotate: null, + onBeforeImgCrop: null, + onAfterImgCrop: null, + onBeforeRemoveCroppedImg: null, + onAfterRemoveCroppedImg: null, + onError: null + + }; + + // OVERWRITE DEFAULT OPTIONS + for (var i in options) that.options[i] = options[i]; + + // INIT THE WHOLE DAMN THING!!! + that.init(); + } + + init() { + var that = this; + + that.objW = that.obj.width(); + that.objH = that.obj.height(); + + // reset rotation + that.actualRotation = 0; + + if ($.isEmptyObject(that.defaultImg)) { that.defaultImg = that.obj.find('img'); } + + that.createImgUploadControls(); + + if ($.isEmptyObject(that.options.loadPicture)) { + that.bindImgUploadControl(); + } else { + that.loadExistingImage(); + } + + } + createImgUploadControls() { + var that = this; + + var cropControlUpload = ''; + if (that.options.customUploadButtonId === '') { cropControlUpload = ''; } + var cropControlRemoveCroppedImage = ''; + + if ($.isEmptyObject(that.croppedImg)) { cropControlRemoveCroppedImage = ''; } + if (!$.isEmptyObject(that.options.loadPicture)) { cropControlUpload = ''; } + + var html = '
' + cropControlUpload + cropControlRemoveCroppedImage + '
'; + that.outputDiv.append(html); + + that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload'); + + if (that.options.customUploadButtonId === '') { that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); } + else { that.imgUploadControl = $('#' + that.options.customUploadButtonId); that.imgUploadControl.show(); } + + if (!$.isEmptyObject(that.croppedImg)) { + that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage'); + } + + } + bindImgUploadControl() { + + var that = this; + + // CREATE UPLOAD IMG FORM + var formHtml = ''; + that.outputDiv.append(formHtml); + that.form = that.outputDiv.find('.' + that.id + '_imgUploadForm'); + + + // CREATE FALLBACK IE9 IFRAME + var fileUploadId = that.createFallbackIframe(); + + that.imgUploadControl.off('click'); + that.imgUploadControl.on('click', function () { + if (fileUploadId === "") { + that.form.find('input[type="file"]').trigger('click'); + } else { + //Trigger iframe file input click, otherwise access restriction error + that.iframeform.find('input[type="file"]').trigger('click'); + } + }); + + if (!$.isEmptyObject(that.croppedImg)) { + + that.cropControlRemoveCroppedImage.on('click', function () { + if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof (Function)) { + that.options.onBeforeRemoveCroppedImg.call(that); + } + + that.croppedImg.remove(); + $(this).hide(); + + if (typeof (that.options.onAfterRemoveCroppedImg) === typeof (Function)) { + that.options.onAfterRemoveCroppedImg.call(that); + } + + if (!$.isEmptyObject(that.defaultImg)) { + that.obj.append(that.defaultImg); + } + + if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(''); } + + }); + + } + + that.form.find('input[type="file"]').change(function () { + + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + + that.showLoader(); + that.imgUploadControl.hide(); + + if (that.options.processInline) { + + var reader = new FileReader(); + reader.onload = (e: any) => { + var image = new Image(); + image.src = e.target.result; + image.onload = () => { + that.imgInitW = that.imgW = image.width; + that.imgInitH = that.imgH = image.height; + + if (that.options.modal) { that.createModal(); } + if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); } + + that.imgUrl = image.src; + + that.obj.append('"); + + that.initCropper(); + that.hideLoader(); + + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + + } + }; + var files = that.form.find('input[type="file"]')[0]; + reader.readAsDataURL(files.files[0]); + + } else { + + var formData = new window['FormData'](that.form[0]); + + for (var key in that.options.uploadData) { + if (that.options.uploadData.hasOwnProperty(key)) { + formData.append(key, that.options.uploadData[key]); + } + } + + var ajaxsettings = { + url: that.options.uploadUrl, + data: formData, + context: document.body, + cache: false, + contentType: false, + processData: false, + type: 'POST' + } + + + + $.ajax( ajaxsettings).always(data => { + + that.afterUpload(data); + }); + } + }); + + } + loadExistingImage() { + var that = this; + + if ($.isEmptyObject(that.croppedImg)) { + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + + that.showLoader(); + if (that.options.modal) { that.createModal(); } + if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); } + + that.imgUrl = that.options.loadPicture; + + var img = $(''); + that.obj.append(img); + img.load(function () { + that.imgInitW = that.imgW = this.width; + that.imgInitH = that.imgH = this.height; + that.initCropper(); + that.hideLoader(); + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + }); + + } else { + that.cropControlRemoveCroppedImage.on('click', function () { + that.croppedImg.remove(); + $(this).hide(); + + if (!$.isEmptyObject(that.defaultImg)) { + that.obj.append(that.defaultImg); + } + if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(''); } + that.croppedImg = null; + that.reset(); + }); + } + + } + afterUpload(data) { + var that = this; + + var response = typeof data == 'object' ? data : jQuery.parseJSON(data); + + + if (response.status == 'success') { + + that.imgInitW = that.imgW = response.width; + that.imgInitH = that.imgH = response.height; + + if (that.options.modal) { that.createModal(); } + if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); } + + that.imgUrl = response.url; + + var img = $(''); + + that.obj.append(img); + + img.load(() => { + this.initCropper(); + this.hideLoader(); + if (this.options.onAfterImgUpload) this.options.onAfterImgUpload.call(this); + }); + + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + + } + + if (response.status == 'error') { + if (that.options.onError) that.options.onError.call(that, response.message); + that.hideLoader(); + setTimeout(() => { this.reset(); }, 2000); + } + } + + createModal() { + var that = this; + + var marginTop = that.windowH / 2 - that.objH / 2; + var modalHTML = '
' + '
' + '
'; + + $('body').append(modalHTML); + + that.modal = $('#croppicModal'); + + that.obj = $('#croppicModalObj'); + + } + destroyModal() { + var that = this; + + that.obj = that.outputDiv; + that.modal.remove(); + that.modal = null; + } + initCropper() { + var that = this; + + /*SET UP SOME VARS*/ + that.img = that.obj.find('img'); + that.img.wrap('
'); + + /*INIT DRAGGING*/ + that.createCropControls(); + + if (that.options.imgEyecandy) { that.createEyecandy(); } + that.initDrag(); + that.initialScaleImg(); + } + createEyecandy() { + var that = this; + + that.imgEyecandy = that.img.clone(); + that.imgEyecandy.css({ 'z-index': '0', 'opacity': that.options.imgEyecandyOpacity }).appendTo(that.obj); + } + destroyEyecandy() { + var that = this; + that.imgEyecandy.remove(); + } + initialScaleImg() { + var that = this; + that.zoom(-that.imgInitW); + that.zoom(40); + + // Adding mousewheel zoom capabilities + if (that.options.enableMousescroll) { + that.img.on('mousewheel', (event: any) => { + event.preventDefault(); + this.zoom(this.options.zoomFactor * event.deltaY); + }); + } + // initial center image + + that.img.css({ 'left': -(that.imgW - that.objW) / 2, 'top': -(that.imgH - that.objH) / 2, 'position': 'relative' }); + if (that.options.imgEyecandy) { that.imgEyecandy.css({ 'left': -(that.imgW - that.objW) / 2, 'top': -(that.imgH - that.objH) / 2, 'position': 'relative' }); } + + } + + createCropControls() { + var that = this; + + // CREATE CONTROLS + var cropControlZoomMuchIn = ''; + var cropControlZoomIn = ''; + var cropControlZoomOut = ''; + var cropControlZoomMuchOut = ''; + var cropControlRotateLeft = ''; + var cropControlRotateRight = ''; + var cropControlCrop = ''; + var cropControlReset = ''; + + var html; + + if (that.options.doubleZoomControls) { + cropControlZoomMuchIn = ''; + cropControlZoomMuchOut = ''; + } + if (that.options.rotateControls) { + cropControlRotateLeft = ''; + cropControlRotateRight = ''; + } + + html = '
' + cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
'; + + that.obj.append(html); + + that.cropControlsCrop = that.obj.find('.cropControlsCrop'); + + // CACHE AND BIND CONTROLS + if (that.options.doubleZoomControls) { + that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn'); + that.cropControlZoomMuchIn.on('click', () => { this.zoom(this.options.zoomFactor * 10); }); + + that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut'); + that.cropControlZoomMuchOut.on('click', () => { this.zoom(-this.options.zoomFactor * 10); }); + } + + that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn'); + that.cropControlZoomIn.on('click', () => { this.zoom(this.options.zoomFactor); }); + + that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut'); + that.cropControlZoomOut.on('click', function () { that.zoom(-that.options.zoomFactor); }); + + that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlRotateLeft'); + that.cropControlZoomIn.on('click', function () { that.rotate(-that.options.rotateFactor); }); + + that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlRotateRight'); + that.cropControlZoomOut.on('click', function () { that.rotate(that.options.rotateFactor); }); + + that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop'); + that.cropControlCrop.on('click', function () { that.crop(); }); + + that.cropControlReset = that.cropControlsCrop.find('.cropControlReset'); + that.cropControlReset.on('click', function () { that.reset(); }); + + } + initDrag() { + var that = this; + + that.img.on("mousedown touchstart", function (e: any) { + + e.preventDefault(); // disable selection + + var pageX; + var pageY; + var userAgent = window.navigator.userAgent; + if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) { + pageX = e.originalEvent.touches[0].pageX; + pageY = e.originalEvent.touches[0].pageY; + } else { + pageX = e.pageX; + pageY = e.pageY; + } + + var z_idx = that.img.css('z-index'), + drg_h = that.img.outerHeight(), + drg_w = that.img.outerWidth(), + pos_y = that.img.offset().top + drg_h - pageY, + pos_x = that.img.offset().left + drg_w - pageX; + + that.img.css('z-index', 1000).on("mousemove touchmove", (e: any) => { + + var imgTop; + var imgLeft; + + if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) { + imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h; + imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w; + } else { + imgTop = e.pageY + pos_y - drg_h; + imgLeft = e.pageX + pos_x - drg_w; + } + + that.img.offset({ + top: imgTop, + left: imgLeft + }).on("mouseup", function () { + $(this).removeClass('draggable').css('z-index', z_idx); + }); + + if (that.options.imgEyecandy) { that.imgEyecandy.offset({ top: imgTop, left: imgLeft }); } + + if (that.objH < that.imgH) { + if (parseInt(that.img.css('top')) > 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); } } + var maxTop = -(that.imgH - that.objH); if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); } } + } else { + if (parseInt(that.img.css('top')) < 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); } } + var maxTop = that.objH - that.imgH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); } } + } + + if (that.objW < that.imgW) { + if (parseInt(that.img.css('left')) > 0) { that.img.css('left', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', 0); } } + var maxLeft = -(that.imgW - that.objW); if (parseInt(that.img.css('left')) < maxLeft) { that.img.css('left', maxLeft); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', maxLeft); } } + } else { + if (parseInt(that.img.css('left')) < 0) { that.img.css('left', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', 0); } } + var maxLeft = (that.objW - that.imgW); if (parseInt(that.img.css('left')) > maxLeft) { that.img.css('left', maxLeft); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', maxLeft); } } + } + if (that.options.onImgDrag) that.options.onImgDrag.call(that); + + }); + + }).on("mouseup", () => { + this.img.off("mousemove"); + }).on("mouseout", function () { + that.img.off("mousemove"); + }); + + } + rotate(x) { + var that = this; + that.actualRotation += x; + that.img.css({ + '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', + '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', + 'transform': 'rotate(' + that.actualRotation + 'deg)', + }); + if (that.options.imgEyecandy) { + that.imgEyecandy.css({ + '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', + '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', + 'transform': 'rotate(' + that.actualRotation + 'deg)', + }); + } + if (typeof that.options.onImgRotate == 'function') + that.options.onImgRotate.call(that); + } + zoom(x) { + var that = this; + var ratio = that.imgW / that.imgH; + var newWidth = that.imgW + x; + var newHeight = newWidth / ratio; + var doPositioning = true; + + if (newWidth < that.objW || newHeight < that.objH) { + + if (newWidth - that.objW < newHeight - that.objH) { + newWidth = that.objW; + newHeight = newWidth / ratio; + } else { + newHeight = that.objH; + newWidth = ratio * newHeight; + } + + doPositioning = false; + + } + + if (!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)) { + + if (newWidth - that.imgInitW < newHeight - that.imgInitH) { + newWidth = that.imgInitW; + newHeight = newWidth / ratio; + } else { + newHeight = that.imgInitH; + newWidth = ratio * newHeight; + } + + doPositioning = false; + + } + + that.imgW = newWidth; + that.img.width(newWidth); + + that.imgH = newHeight; + that.img.height(newHeight); + + var newTop = parseInt(that.img.css('top')) - x / 2; + var newLeft = parseInt(that.img.css('left')) - x / 2; + + if (newTop > 0) { newTop = 0; } + if (newLeft > 0) { newLeft = 0; } + + var maxTop = -(newHeight - that.objH); if (newTop < maxTop) { newTop = maxTop; } + var maxLeft = -(newWidth - that.objW); if (newLeft < maxLeft) { newLeft = maxLeft; } + + if (doPositioning) { + that.img.css({ 'top': newTop, 'left': newLeft }); + } + + if (that.options.imgEyecandy) { + that.imgEyecandy.width(newWidth); + that.imgEyecandy.height(newHeight); + if (doPositioning) { + that.imgEyecandy.css({ 'top': newTop, 'left': newLeft }); + } + } + + if (that.options.onImgZoom) that.options.onImgZoom.call(that); + + } + crop() { + var that = this; + + if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that); + + that.cropControlsCrop.hide(); + that.showLoader(); + + var cropData = { + imgUrl: that.imgUrl, + imgInitW: that.imgInitW, + imgInitH: that.imgInitH, + imgW: that.imgW, + imgH: that.imgH, + imgY1: Math.abs(parseInt(that.img.css('top'))), + imgX1: Math.abs(parseInt(that.img.css('left'))), + cropH: that.objH, + cropW: that.objW, + rotation: that.actualRotation + }; + + var formData = null; + + if (typeof FormData == 'undefined') { + var XHR = new XMLHttpRequest(); + + var urlEncodedDataPairs = []; + + for (var key in cropData) { + urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key])); + } + for (var key in that.options.cropData) { + urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key])); + } + var urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); + + XHR.addEventListener('error', function (event) { + if (that.options.onError) that.options.onError.call(that, "XHR Request failed"); + }); + XHR.onreadystatechange = function () { + if (XHR.readyState == 4 && XHR.status == 200) { + that.afterCrop(XHR.responseText); + } + } + XHR.open('POST', that.options.cropUrl); + + XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + XHR.setRequestHeader('Content-Length', String(urlEncodedData.length)); + + XHR.send(urlEncodedData); + + } else { + formData = new FormData(); + for (var key in cropData) { + if (cropData.hasOwnProperty(key)) { + formData.append(key, cropData[key]); + } + } + + for (var key in that.options.cropData) { + if (that.options.cropData.hasOwnProperty(key)) { + formData.append(key, that.options.cropData[key]); + } + } + + $.ajax({ + url: that.options.cropUrl, + data: formData, + context: document.body, + cache: false, + contentType: false, + processData: false, + type: 'POST' + }).always(function (data) { + + that.afterCrop(data); + + }); + } + + // + } + afterCrop(data) { + var that = this; + var response; + try { + response = jQuery.parseJSON(data); + } + catch (err) { + response = typeof data == 'object' ? data : jQuery.parseJSON(data); + } + + if (response.status == 'success') { + + if (that.options.imgEyecandy) + that.imgEyecandy.hide(); + + that.destroy(); + + that.obj.append(''); + if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } + + that.croppedImg = that.obj.find('.croppedImg'); + + that.init(); + + that.hideLoader(); + } + if (response.status == 'error') { + if (that.options.onError) that.options.onError.call(that, response.message); + that.hideLoader(); + setTimeout(function () { that.reset(); }, 2000) + } + + if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); + } + showLoader() { + var that = this; + + that.obj.append(that.options.loaderHtml); + that.loader = that.obj.find('.loader'); + + } + hideLoader() { + var that = this; + that.loader.remove(); + } + reset() { + var that = this; + that.destroy(); + + that.init(); + + if (!$.isEmptyObject(that.croppedImg)) { + that.obj.append(that.croppedImg); + if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(that.croppedImg.attr('url')); } + } + if (typeof that.options.onReset == 'function') + that.options.onReset.call(that); + } + destroy() { + var that = this; + if (that.options.modal && !$.isEmptyObject(that.modal)) { that.destroyModal(); } + if (that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy)) { that.destroyEyecandy(); } + if (!$.isEmptyObject(that.cropControlsUpload)) { that.cropControlsUpload.remove(); } + if (!$.isEmptyObject(that.cropControlsCrop)) { that.cropControlsCrop.remove(); } + if (!$.isEmptyObject(that.loader)) { that.loader.remove(); } + if (!$.isEmptyObject(that.form)) { that.form.remove(); } + that.obj.html(''); + } + isAjaxUploadSupported() { + var input = document.createElement("input"); + input.type = "file"; + + return ( + "multiple" in input && + typeof File != "undefined" && + typeof FormData != "undefined" && + typeof (new XMLHttpRequest()).upload != "undefined"); + } + createFallbackIframe() { + var that = this; + + if (!that.isAjaxUploadSupported()) { + + if (jQuery.isEmptyObject(that.iframeobj)) { + var iframe = document.createElement("iframe"); + iframe.setAttribute("id", that.id + "_upload_iframe"); + iframe.setAttribute("name", that.id + "_upload_iframe"); + iframe.setAttribute("width", "0"); + iframe.setAttribute("height", "0"); + iframe.setAttribute("border", "0"); + iframe.setAttribute("src", "javascript:false;"); + iframe.style.display = "none"; + document.body.appendChild(iframe); + } else { + iframe = that.iframeobj[0]; + } + + var myContent = '' + + 'Uploading File' + + '' + + '
' + + $("#" + that.id + '_imgUploadField')[0].outerHTML + + '
'; + + iframe.contentWindow.document.open('text/htmlreplace'); + iframe.contentWindow.document.write(myContent); + iframe.contentWindow.document.close(); + + that.iframeobj = $("#" + that.id + "_upload_iframe"); + that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); + + that.iframeform.on("change", "input", function () { + that.submitFallbackIframe(that); + }); + var elem = that.iframeform.find("input")[0]; + elem.attachEvent("onchange", () => { + this.submitFallbackIframe(this); + }); + + var eventHandlermyFile = () => { + if (iframe.detachEvent) + iframe.detachEvent("onload", eventHandlermyFile); + else + iframe.removeEventListener("load", eventHandlermyFile, false); + + var response = this.getIframeContentJSON(iframe); + + if (jQuery.isEmptyObject(this.modal)) { + this.afterUpload(response); + } + } + + if (iframe.addEventListener) + iframe.addEventListener("load", eventHandlermyFile, true); + if (iframe.attachEvent) + iframe.attachEvent("onload", eventHandlermyFile); + + return "#" + that.id + '_imgUploadField'; + + } else { + return ""; + } + + } + submitFallbackIframe(that) { + that.showLoader(); + if (that.options.processInline && !that.options.uploadUrl) { + if (that.options.onError) { + that.options.onError.call(that, "processInline is not supported by your browser "); + that.hideLoader(); + } + } else { + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + that.iframeform[0].submit(); + } + } + getIframeContentJSON(iframe) { + try { + var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, + response; + + var innerHTML = doc.body.innerHTML; + if (innerHTML.slice(0, 5).toLowerCase() === "
" && innerHTML.slice(-6).toLowerCase() == "
") { + innerHTML = doc.body.firstChild.firstChild.nodeValue; + } + response = jQuery.parseJSON(innerHTML); + } catch (err) { + response = { success: false }; + } + + return response; + } + + } +}