praiadeseselle/wire/modules/Inputfield/InputfieldFile/InputfieldFile.min.js
2022-03-08 15:55:41 +01:00

1 line
No EOL
14 KiB
JavaScript

$(document).ready(function(){$(document).on("change",".InputfieldFileDelete input",function(){setInputfieldFileStatus($(this))}).on("dblclick",".InputfieldFileDelete",function(){var $input=$(this).find("input");var $items=$(this).parents(".InputfieldFileList").find(".InputfieldFileDelete input");if($input.is(":checked")){$items.prop("checked",false).change()}else{$items.prop("checked",true).change()}return false});function setInputfieldFileStatus($t){var $info=$t.parents(".InputfieldFileInfo");var collapsed=$t.closest(".InputfieldFile").hasClass("InputfieldItemListCollapse");if($t.is(":checked")){$info.addClass("ui-state-error");if(!collapsed)$info.siblings(".InputfieldFileData").slideUp("fast")}else{$info.removeClass("ui-state-error");if(!collapsed)$info.siblings(".InputfieldFileData").slideDown("fast")}}function initSortable($fileLists){$fileLists.each(function(){var $this=$(this);var qty=$this.children("li").length;if($this.closest(".InputfieldRenderValueMode").length)return;var $inputfield=$this.closest(".Inputfield");if(qty<2){if(qty==0)$inputfield.addClass("InputfieldFileEmpty").removeClass("InputfieldFileMultiple InputfieldFileSingle");else $inputfield.addClass("InputfieldFileSingle").removeClass("InputfieldFileEmpty InputfieldFileMultiple");return}else{$this.closest(".Inputfield").removeClass("InputfieldFileSingle InputfieldFileEmpty").addClass("InputfieldFileMultiple")}$this.sortable({start:function(e,ui){ui.item.children(".InputfieldFileInfo").addClass("ui-state-highlight")},stop:function(e,ui){$(this).children("li").each(function(n){$(this).find(".InputfieldFileSort").val(n)});ui.item.children(".InputfieldFileInfo").removeClass("ui-state-highlight");$inputfield.addClass("InputfieldFileJustSorted InputfieldStateChanged");setTimeout(function(){$inputfield.removeClass("InputfieldFileJustSorted")},500)}})}).find(".ui-widget-header, .ui-state-default").hover(function(){$(this).addClass("ui-state-hover")},function(){$(this).removeClass("ui-state-hover")})}function InitOldSchool(){$("body").addClass("ie-no-drop");$(document).on("change",".InputfieldFileUpload input[type=file]",function(){var $t=$(this);var $mask=$t.closest(".InputMask");if($t.val().length>1){$mask.addClass("ui-state-disabled")}else{$mask.removeClass("ui-state-disabled")}if($mask.next(".InputMask").length>0)return;var $inputfield=$t.closest(".InputfieldFile");var $upload=$t.closest(".InputfieldFileUpload");var $list=$inputfield.find(".InputfieldFileList");var maxFiles=parseInt($upload.find(".InputfieldFileMaxFiles").val());var numFiles=$list.children("li").length+$upload.find("input[type=file]").length+1;var maxFilesize=parseInt($upload.attr("data-maxfilesize"));var abort=false;$upload.find("input[type=file]").each(function(){if(typeof this.files[0]!=="undefined"){var size=this.files[0].size;if(size>maxFilesize){ProcessWire.alert("File "+this.files[0].name+" is "+size+" bytes which exceeds max allowed size of "+maxFilesize+" bytes");$(this).val("").closest(".InputMask").removeClass("ui-state-disabled ui-state-active");abort=true}}});if(abort)return false;if(maxFiles>0&&numFiles>=maxFiles){}else{$upload.find(".InputMask").not(":last").each(function(){var $m=$(this);if($m.find("input[type=file]").val()<1)$m.remove()});var $mask2=$mask.clone().removeClass("ui-state-disabled");var $input=$mask2.find("input[type=file]");$input.attr("id",$input.attr("id")+"-");$input.val("");$mask2.insertAfter($mask);$mask2.css("margin-left","0.5em").removeClass("ui-state-active")}var name=$t.val();var pos=name.lastIndexOf("/");if(pos===-1)pos=name.lastIndexOf("\\");name=name.substring(pos+1);$mask.find(".ui-button-text").text(name).prepend("<i class='fa fa-fw fa-file-o'></i>");$mask.removeClass("ui-state-active")})}function InitHTML5($inputfield){if($inputfield.length>0){var $target=$inputfield.find(".InputfieldFileUpload")}else{var $target=$(".InputfieldFileUpload")}$target.closest(".InputfieldContent").each(function(i){if($(this).hasClass("InputfieldFileInit"))return;initHTML5Item($(this),i);$(this).addClass("InputfieldFileInit")});function initHTML5Item($this,i){var $form=$this.parents("form");var $repeaterItem=$this.closest(".InputfieldRepeaterItem");var postUrl=$repeaterItem.length?$repeaterItem.attr("data-editUrl"):$form.attr("action");postUrl+=(postUrl.indexOf("?")>-1?"&":"?")+"InputfieldFileAjax=1";var $postToken=$form.find("input._post_token");var postTokenName=$postToken.attr("name");var postTokenValue=$postToken.val();var $uploadData=$this.find(".InputfieldFileUpload");var fieldName=$uploadData.data("fieldname");fieldName=fieldName.slice(0,-2);var extensions=$uploadData.data("extensions").toLowerCase();var maxFilesize=$uploadData.data("maxfilesize");var filesUpload=$this.find("input[type=file]").get(0);var dropArea=$this.get(0);var $fileList=$this.find(".InputfieldFileList");if($fileList.length<1){$fileList=$("<ul class='InputfieldFileList InputfieldFileListBlank'></ul>");$this.prepend($fileList);$this.parent(".Inputfield").addClass("InputfieldFileEmpty")}var fileList=$fileList.get(0);var maxFiles=parseInt($this.find(".InputfieldFileMaxFiles").val());$fileList.children().addClass("InputfieldFileItemExisting");$this.find(".AjaxUploadDropHere").show();var doneTimer=null;function uploadFile(file){var $progressItem=$('<li class="InputfieldFile ui-widget AjaxUpload"><p class="InputfieldFileInfo ui-widget ui-widget-header InputfieldItemHeader"></p></li>'),$progressBar=$('<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>'),$progressBarValue=$('<div class="ui-progressbar-value ui-widget-header InputfieldItemHeader ui-corner-left" style="width: 0%; "></div>'),img,reader,xhr,fileData;$progressBar.append($progressBarValue);$progressItem.append($progressBar);xhr=new XMLHttpRequest;xhr.upload.addEventListener("progress",function(evt){if(evt.lengthComputable){var completion=evt.loaded/evt.total*100;$progressBarValue.width(completion+"%");if(completion>4){$progressBarValue.html("<span>"+parseInt(completion)+"%</span>")}$("body").addClass("pw-uploading")}else{}},false);xhr.addEventListener("load",function(){xhr.getAllResponseHeaders();var response=$.parseJSON(xhr.responseText);if(response.error!==undefined)response=[response];for(var n=0;n<response.length;n++){var r=response[n];if(r.error){var $pi=$progressItem.clone();$pi.find(".InputfieldFileInfo").addClass("ui-state-error");$pi.find(".InputfieldFileStats").text(" - "+r.message);$pi.find(".ui-progressbar").remove();$progressItem.after($pi)}else{if(r.replace){var $child=$this.find(".InputfieldFileList").children("li:eq(0)");if($child.length>0)$child.slideUp("fast",function(){$child.remove()})}var $input=$this.find("input[type=file]");if($input.val())$input.replaceWith($input.clone(true));var $markup=$(r.markup);$markup.hide();if(r.overwrite){var basename=$markup.find(".InputfieldFileName").text();var $item=null;$fileList.children(".InputfieldFileItemExisting").each(function(){if($item===null&&$(this).find(".InputfieldFileName").text()==basename){$item=$(this)}});if($item!==null){var $newInfo=$markup.find(".InputfieldFileInfo");var $newLink=$markup.find(".InputfieldFileLink");var $info=$item.find(".InputfieldFileInfo");var $link=$item.find(".InputfieldFileLink");$info.html($newInfo.html()+"<i class='fa fa-check'></i>");$link.html($newLink.html());$item.addClass("InputfieldFileItemExisting");$item.effect("highlight",500)}else{$fileList.append($markup);$markup.slideDown();$markup.addClass("InputfieldFileItemExisting")}}else{$fileList.append($markup);$markup.slideDown()}}setTimeout(function(){var $inputfields=$markup.find(".Inputfield");if($inputfields.length){InputfieldsInit($markup.find(".Inputfields"));$inputfields.trigger("reloaded",["InputfieldFileUpload"])}},500)}$progressItem.remove();if(doneTimer)clearTimeout(doneTimer);doneTimer=setTimeout(function(){$("body").removeClass("pw-uploading");if(maxFiles!=1&&!$fileList.is(".ui-sortable"))initSortable($fileList);$fileList.trigger("AjaxUploadDone")},500)},false);xhr.open("POST",postUrl,true);xhr.setRequestHeader("X-FILENAME",encodeURIComponent(file.name));xhr.setRequestHeader("X-FIELDNAME",fieldName);xhr.setRequestHeader("Content-Type","application/octet-stream");xhr.setRequestHeader("X-"+postTokenName,postTokenValue);xhr.setRequestHeader("X-REQUESTED-WITH","XMLHttpRequest");xhr.send(file);fileData=""+"<i class='fa fa-fw fa-spin fa-spinner'></i> "+'<span class="InputfieldFileName">'+file.name+"</span>"+'<span class="InputfieldFileStats"> &bull; '+parseInt(file.size/1024,10)+" kb</span>";$progressItem.find("p.ui-widget-header").html(fileData);$fileList.append($progressItem);var $inputfield=$fileList.closest(".Inputfield");$inputfield.addClass("InputfieldStateChanged");var numFiles=$inputfield.find(".InputfieldFileItem").length;if(numFiles==1){$inputfield.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileMultiple").addClass("InputfieldFileSingle")}else if(numFiles>1){$inputfield.removeClass("InputfieldFileEmpty").removeClass("InputfieldFileSingle").addClass("InputfieldFileMultiple")}}function traverseFiles(files){function errorItem(filename,message){return'<li class="InputfieldFile ui-widget AjaxUpload">'+'<p class="InputfieldFileInfo ui-widget ui-widget-header InputfieldItemHeader ui-state-error">&nbsp; '+filename+" "+'<span class="InputfieldFileStats"> &bull; '+message+"</span></p></li>"}var errorMsg="";if(typeof files!=="undefined"){for(var i=0,l=files.length;i<l;i++){var extension=files[i].name.split(".").pop().toLowerCase();if(extensions.indexOf(extension)==-1){if(typeof ProcessWire.config.InputfieldFile.labels["bad-ext"]!="undefined"){errorMsg=ProcessWire.config.InputfieldFile.labels["bad-ext"];errorMsg=errorMsg.replace("EXTENSIONS",extensions)}else{errorMsg=extension+" is a invalid file extension, please use one of: "+extensions}$fileList.append(errorItem(files[i].name,errorMsg))}else if(files[i].size>maxFilesize&&maxFilesize>2e6){var maxKB=parseInt(maxFilesize/1024,10);if(typeof ProcessWire.config.InputfieldFile.labels["too-big"]!="undefined"){errorMsg=ProcessWire.config.InputfieldFile.labels["too-big"];errorMsg=errorMsg.replace("MAX_KB",maxKB)}else{var fileSize=parseInt(files[i].size/1024,10);errorMsg="Filesize "+fileSize+" kb is too big. Maximum allowed is "+maxKB+" kb"}$fileList.append(errorItem(files[i].name,errorMsg))}else{uploadFile(files[i])}if(maxFiles==1)break}}else{fileList.innerHTML="No support for the File API in this web browser"}}filesUpload.addEventListener("change",function(evt){traverseFiles(this.files);evt.preventDefault();evt.stopPropagation();this.value=""},false);dropArea.addEventListener("dragleave",function(){$(this).removeClass("ui-state-hover");$(this).closest(".Inputfield").removeClass("pw-drag-in-file")},false);dropArea.addEventListener("dragenter",function(evt){evt.preventDefault();$(this).addClass("ui-state-hover");$(this).closest(".Inputfield").addClass("pw-drag-in-file")},false);dropArea.addEventListener("dragover",function(evt){if(!$(this).is("ui-state-hover")){$(this).addClass("ui-state-hover");$(this).closest(".Inputfield").addClass("pw-drag-in-file")}evt.preventDefault();evt.stopPropagation()},false);dropArea.addEventListener("drop",function(evt){traverseFiles(evt.dataTransfer.files);$(this).removeClass("ui-state-hover").closest(".Inputfield").removeClass("pw-drag-in-file");evt.preventDefault();evt.stopPropagation()},false)}}function initTags($inputfields){$inputfields.each(function(){var $inputfield=$(this);var $inputs=$inputfield.find("input.InputfieldFileTagsInput:not(.selectized)");var $selects=$inputfield.find("input.InputfieldFileTagsSelect:not(.selectized)");if($inputs.length){$inputs.selectize({plugins:["remove_button","drag_drop"],delimiter:" ",persist:false,createOnBlur:true,submitOnReturn:false,create:function(input){return{value:input,text:input}}})}if($selects.length){if(!$inputfield.hasClass("Inputfield"))$inputfield=$inputfield.closest(".Inputfield");var configName=$inputfield.attr("data-configName");var settings=ProcessWire.config[configName];var options=[];for(var n=0;n<settings["tags"].length;n++){var tag=settings["tags"][n];options[n]={value:tag}}$selects.selectize({plugins:["remove_button","drag_drop"],delimiter:" ",persist:true,submitOnReturn:false,closeAfterSelect:true,createOnBlur:true,maxItems:null,valueField:"value",labelField:"value",searchField:["value"],options:options,create:function(input){return{value:input,text:input}},createFilter:function(input){if(settings.allowUserTags)return true;allow=false;for(var n=0;n<options.length;n++){if(input==options[n]){allow=true;break}}return allow},onDropdownOpen:function($dropdown){$dropdown.closest("li, .InputfieldImageEdit").css("z-index",100)},onDropdownClose:function($dropdown){$dropdown.closest("li, .InputfieldImageEdit").css("z-index","auto")},render:{item:function(item,escape){return"<div>"+escape(item.value)+"</div>"},option:function(item,escape){return"<div>"+escape(item.value)+"</div>"}}})}})}initSortable($(".InputfieldFileList"));initTags($(".InputfieldFileHasTags"));var allowAjax=false;if(window.File&&window.FileList&&window.FileReader&&($("#PageIDIndicator").length>0||$(".InputfieldAllowAjaxUpload").length>0)){InitHTML5("");allowAjax=true}else{InitOldSchool()}var minContainerWidth=767;var resizeActive=false;var windowResize=function(){if(!allowAjax)return;$(".AjaxUploadDropHere").each(function(){var $t=$(this);if($t.parent().width()<=minContainerWidth){$t.hide()}else{$t.show()}});resizeActive=false};if(allowAjax){$(window).resize(function(){if(resizeActive)return;resizeActive=true;setTimeout(windowResize,1e3)}).resize();$(document).on("AjaxUploadDone",".InputfieldFileHasTags",function(event){initTags($(this))})}$(document).on("reloaded",".InputfieldHasFileList",function(event){initSortable($(this).find(".InputfieldFileList"));InitHTML5($(this));initTags($(this));if(allowAjax)windowResize()})});