camaleon_cms_rails6 2.5.0

data/app/assets/javascripts/camaleon_cms/admin/uploader/_jquery.uploadfile.min.js

@@ -0,0 +1,8 @@
+/*!
+ * jQuery Upload File Plugin
+ * version: 4.0.8
+ * @requires jQuery v1.5 or later & form plugin
+ * Copyright (c) 2013 Ravishanker Kusuma
+ * http://hayageek.com/
+ */
+!function(e){void 0==jQuery.fn.ajaxForm&&e.getScript(("https:"==document.location.protocol?"https://":"http://")+"malsup.github.io/jquery.form.js");var a={};a.fileapi=void 0!==e("<input type='file'/>").get(0).files,a.formdata=void 0!==window.FormData,e.fn.uploadFile=function(t){function r(){S||(S=!0,function e(){if(w.sequential||(w.sequentialCount=99999),0==x.length&&0==D.length)w.afterUploadAll&&w.afterUploadAll(C),S=!1;else{if(D.length<w.sequentialCount){var a=x.shift();void 0!=a&&(D.push(a),a.submit())}window.setTimeout(e,100)}}())}function o(a,t,r){r.on("dragenter",function(a){a.stopPropagation(),a.preventDefault(),e(this).addClass(t.dragDropHoverClass)}),r.on("dragover",function(a){a.stopPropagation(),a.preventDefault();var r=e(this);r.hasClass(t.dragDropContainerClass)&&!r.hasClass(t.dragDropHoverClass)&&r.addClass(t.dragDropHoverClass)}),r.on("drop",function(r){r.preventDefault(),e(this).removeClass(t.dragDropHoverClass),a.errorLog.html("");var o=r.originalEvent.dataTransfer.files;return!t.multiple&&o.length>1?void(t.showError&&e("<div class='"+t.errorClass+"'>"+t.multiDragErrorStr+"</div>").appendTo(a.errorLog)):void(0!=t.onSelect(o)&&l(t,a,o))}),r.on("dragleave",function(){e(this).removeClass(t.dragDropHoverClass)}),e(document).on("dragenter",function(e){e.stopPropagation(),e.preventDefault()}),e(document).on("dragover",function(a){a.stopPropagation(),a.preventDefault();var r=e(this);r.hasClass(t.dragDropContainerClass)||r.removeClass(t.dragDropHoverClass)}),e(document).on("drop",function(a){a.stopPropagation(),a.preventDefault(),e(this).removeClass(t.dragDropHoverClass)})}function s(e){var a="",t=e/1024;if(parseInt(t)>1024){var r=t/1024;a=r.toFixed(2)+" MB"}else a=t.toFixed(2)+" KB";return a}function i(a){var t=[];t="string"==jQuery.type(a)?a.split("&"):e.param(a).split("&");var r,o,s=t.length,i=[];for(r=0;s>r;r++)t[r]=t[r].replace(/\+/g," "),o=t[r].split("="),i.push([decodeURIComponent(o[0]),decodeURIComponent(o[1])]);return i}function l(a,t,r){for(var o=0;o<r.length;o++)if(n(t,a,r[o].name))if(a.allowDuplicates||!d(t,r[o].name))if(-1!=a.maxFileSize&&r[o].size>a.maxFileSize)a.showError&&e("<div class='"+a.errorClass+"'><b>"+r[o].name+"</b> "+a.sizeErrorStr+s(a.maxFileSize)+"</div>").appendTo(t.errorLog);else if(-1!=a.maxFileCount&&t.selectedFiles>=a.maxFileCount)a.showError&&e("<div class='"+a.errorClass+"'><b>"+r[o].name+"</b> "+a.maxFileCountErrorStr+a.maxFileCount+"</div>").appendTo(t.errorLog);else{t.selectedFiles++,t.existingFileNames.push(r[o].name);var l=a,p=new FormData,u=a.fileName.replace("[]","");p.append(u,r[o]);var c=a.formData;if(c)for(var h=i(c),f=0;f<h.length;f++)h[f]&&p.append(h[f][0],h[f][1]);l.fileData=p;var w=new m(t,a),g="";g=a.showFileCounter?t.fileCounter+a.fileCounterStyle+r[o].name:r[o].name,a.showFileSize&&(g+=" ("+s(r[o].size)+")"),w.filename.html(g);var C=e("<form style='display:block; position:absolute;left: 150px;' class='"+t.formGroup+"' method='"+a.method+"' action='"+a.url+"' enctype='"+a.enctype+"'></form>");C.appendTo("body");var b=[];b.push(r[o].name),v(C,l,w,b,t,r[o]),t.fileCounter++}else a.showError&&e("<div class='"+a.errorClass+"'><b>"+r[o].name+"</b> "+a.duplicateErrorStr+"</div>").appendTo(t.errorLog);else a.showError&&e("<div class='"+a.errorClass+"'><b>"+r[o].name+"</b> "+a.extErrorStr+a.allowedTypes+"</div>").appendTo(t.errorLog)}function n(e,a,t){var r=a.allowedTypes.toLowerCase().split(/[\s,]+/g),o=t.split(".").pop().toLowerCase();return"*"!=a.allowedTypes&&jQuery.inArray(o,r)<0?!1:!0}function d(e,a){var t=!1;if(e.existingFileNames.length)for(var r=0;r<e.existingFileNames.length;r++)(e.existingFileNames[r]==a||w.duplicateStrict&&e.existingFileNames[r].toLowerCase()==a.toLowerCase())&&(t=!0);return t}function p(e,a){if(e.existingFileNames.length)for(var t=0;t<a.length;t++){var r=e.existingFileNames.indexOf(a[t]);-1!=r&&e.existingFileNames.splice(r,1)}}function u(e,a){if(e){a.show();var t=new FileReader;t.onload=function(e){a.attr("src",e.target.result)},t.readAsDataURL(e)}}function c(a,t){if(a.showFileCounter){var r=e(t.container).find(".ajax-file-upload-filename").length;t.fileCounter=r+1,e(t.container).find(".ajax-file-upload-filename").each(function(){var t=e(this).html().split(a.fileCounterStyle),o=(parseInt(t[0])-1,r+a.fileCounterStyle+t[1]);e(this).html(o),r--})}}function h(t,r,o,s){var i="ajax-upload-id-"+(new Date).getTime(),d=e("<form method='"+o.method+"' action='"+o.url+"' enctype='"+o.enctype+"'></form>"),p="<input type='file' id='"+i+"' name='"+o.fileName+"' accept='"+o.acceptFiles+"'/>";o.multiple&&(o.fileName.indexOf("[]")!=o.fileName.length-2&&(o.fileName+="[]"),p="<input type='file' id='"+i+"' name='"+o.fileName+"' accept='"+o.acceptFiles+"' multiple/>");var u=e(p).appendTo(d);u.change(function(){t.errorLog.html("");var i=(o.allowedTypes.toLowerCase().split(","),[]);if(this.files){for(g=0;g<this.files.length;g++)i.push(this.files[g].name);if(0==o.onSelect(this.files))return}else{var p=e(this).val(),u=[];if(i.push(p),!n(t,o,p))return void(o.showError&&e("<div class='"+o.errorClass+"'><b>"+p+"</b> "+o.extErrorStr+o.allowedTypes+"</div>").appendTo(t.errorLog));if(u.push({name:p,size:"NA"}),0==o.onSelect(u))return}if(c(o,t),s.unbind("click"),d.hide(),h(t,r,o,s),d.addClass(r),o.serialize&&a.fileapi&&a.formdata){d.removeClass(r);var f=this.files;d.remove(),l(o,t,f)}else{for(var w="",g=0;g<i.length;g++)w+=o.showFileCounter?t.fileCounter+o.fileCounterStyle+i[g]+"<br>":i[g]+"<br>",t.fileCounter++;if(-1!=o.maxFileCount&&t.selectedFiles+i.length>o.maxFileCount)return void(o.showError&&e("<div class='"+o.errorClass+"'><b>"+w+"</b> "+o.maxFileCountErrorStr+o.maxFileCount+"</div>").appendTo(t.errorLog));t.selectedFiles+=i.length;var C=new m(t,o);C.filename.html(w),v(d,o,C,i,t,null)}}),o.nestedForms?(d.css({margin:0,padding:0}),s.css({position:"relative",overflow:"hidden",cursor:"default"}),u.css({position:"absolute",cursor:"pointer",top:"0px",width:"100%",height:"100%",left:"0px","z-index":"100",opacity:"0.0",filter:"alpha(opacity=0)","-ms-filter":"alpha(opacity=0)","-khtml-opacity":"0.0","-moz-opacity":"0.0"}),d.appendTo(s)):(d.appendTo(e("body")),d.css({margin:0,padding:0,display:"block",position:"absolute",left:"-250px"}),-1!=navigator.appVersion.indexOf("MSIE ")?s.attr("for",i):s.click(function(){u.click()}))}function f(a,t){return this.statusbar=e("<div class='ajax-file-upload-statusbar'></div>").width(t.statusBarWidth),this.preview=e("<img class='ajax-file-upload-preview' />").width(t.previewWidth).height(t.previewHeight).appendTo(this.statusbar).hide(),this.filename=e("<div class='ajax-file-upload-filename'></div>").appendTo(this.statusbar),this.progressDiv=e("<div class='ajax-file-upload-progress'>").appendTo(this.statusbar).hide(),this.progressbar=e("<div class='ajax-file-upload-bar'></div>").appendTo(this.progressDiv),this.abort=e("<div>"+t.abortStr+"</div>").appendTo(this.statusbar).hide(),this.cancel=e("<div>"+t.cancelStr+"</div>").appendTo(this.statusbar).hide(),this.done=e("<div>"+t.doneStr+"</div>").appendTo(this.statusbar).hide(),this.download=e("<div>"+t.downloadStr+"</div>").appendTo(this.statusbar).hide(),this.del=e("<div>"+t.deletelStr+"</div>").appendTo(this.statusbar).hide(),this.abort.addClass("ajax-file-upload-red"),this.done.addClass("ajax-file-upload-green"),this.download.addClass("ajax-file-upload-green"),this.cancel.addClass("ajax-file-upload-red"),this.del.addClass("ajax-file-upload-red"),this}function m(a,t){var r=null;return r=t.customProgressBar?new t.customProgressBar(a,t):new f(a,t),r.abort.addClass(a.formGroup),r.abort.addClass(t.abortButtonClass),r.cancel.addClass(a.formGroup),r.cancel.addClass(t.cancelButtonClass),t.extraHTML&&(r.extraHTML=e("<div class='extrahtml'>"+t.extraHTML()+"</div>").insertAfter(r.filename)),"bottom"==t.uploadQueuOrder?e(a.container).append(r.statusbar):e(a.container).prepend(r.statusbar),r}function v(t,o,s,l,n,d){var h={cache:!1,contentType:!1,processData:!1,forceSync:!1,type:o.method,data:o.formData,formData:o.fileData,dataType:o.returnType,beforeSubmit:function(a,r,d){if(0!=o.onSubmit.call(this,l)){if(o.dynamicFormData){var u=i(o.dynamicFormData());if(u)for(var h=0;h<u.length;h++)u[h]&&(void 0!=o.fileData?d.formData.append(u[h][0],u[h][1]):d.data[u[h][0]]=u[h][1])}return o.extraHTML&&e(s.extraHTML).find("input,select,textarea").each(function(){void 0!=o.fileData?d.formData.append(e(this).attr("name"),e(this).val()):d.data[e(this).attr("name")]=e(this).val()}),!0}return s.statusbar.append("<div class='"+o.errorClass+"'>"+o.uploadErrorStr+"</div>"),s.cancel.show(),t.remove(),s.cancel.click(function(){x.splice(x.indexOf(t),1),p(n,l),s.statusbar.remove(),o.onCancel.call(n,l,s),n.selectedFiles-=l.length,c(o,n)}),!1},beforeSend:function(e){s.progressDiv.show(),s.cancel.hide(),s.done.hide(),o.showAbort&&(s.abort.show(),s.abort.click(function(){p(n,l),e.abort(),n.selectedFiles-=l.length,o.onAbort.call(n,l,s)})),s.progressbar.width(a.formdata?"1%":"5%")},uploadProgress:function(e,a,t,r){r>98&&(r=98);var i=r+"%";r>1&&s.progressbar.width(i),o.showProgress&&(s.progressbar.html(i),s.progressbar.css("text-align","center"))},success:function(a,r,i){if(s.cancel.remove(),D.pop(),"json"==o.returnType&&"object"==e.type(a)&&a.hasOwnProperty(o.customErrorKeyStr)){s.abort.hide();var d=a[o.customErrorKeyStr];return o.onError.call(this,l,200,d,s),o.showStatusAfterError?(s.progressDiv.hide(),s.statusbar.append("<span class='"+o.errorClass+"'>ERROR: "+d+"</span>")):(s.statusbar.hide(),s.statusbar.remove()),n.selectedFiles-=l.length,void t.remove()}n.responses.push(a),s.progressbar.width("100%"),o.showProgress&&(s.progressbar.html("100%"),s.progressbar.css("text-align","center")),s.abort.hide(),o.onSuccess.call(this,l,a,i,s),o.showStatusAfterSuccess?(o.showDone?(s.done.show(),s.done.click(function(){s.statusbar.hide("slow"),s.statusbar.remove()})):s.done.hide(),o.showDelete?(s.del.show(),s.del.click(function(){s.statusbar.hide().remove(),o.deleteCallback&&o.deleteCallback.call(this,a,s),n.selectedFiles-=l.length,c(o,n)})):s.del.hide()):(s.statusbar.hide("slow"),s.statusbar.remove()),o.showDownload&&(s.download.show(),s.download.click(function(){o.downloadCallback&&o.downloadCallback(a)})),t.remove()},error:function(e,a,r){s.cancel.remove(),D.pop(),s.abort.hide(),"abort"==e.statusText?(s.statusbar.hide("slow").remove(),c(o,n)):(o.onError.call(this,l,a,r,s),o.showStatusAfterError?(s.progressDiv.hide(),s.statusbar.append("<span class='"+o.errorClass+"'>ERROR: "+r+"</span>")):(s.statusbar.hide(),s.statusbar.remove()),n.selectedFiles-=l.length),t.remove()}};o.showPreview&&null!=d&&"image"==d.type.toLowerCase().split("/").shift()&&u(d,s.preview),o.autoSubmit?(t.ajaxForm(h),x.push(t),r()):(o.showCancel&&(s.cancel.show(),s.cancel.click(function(){x.splice(x.indexOf(t),1),p(n,l),t.remove(),s.statusbar.remove(),o.onCancel.call(n,l,s),n.selectedFiles-=l.length,c(o,n)})),t.ajaxForm(h))}var w=e.extend({url:"",method:"POST",enctype:"multipart/form-data",returnType:null,allowDuplicates:!0,duplicateStrict:!1,allowedTypes:"*",acceptFiles:"*",fileName:"file",formData:!1,dynamicFormData:!1,maxFileSize:-1,maxFileCount:-1,multiple:!0,dragDrop:!0,autoSubmit:!0,showCancel:!0,showAbort:!0,showDone:!1,showDelete:!1,showError:!0,showStatusAfterSuccess:!0,showStatusAfterError:!0,showFileCounter:!0,fileCounterStyle:"). ",showFileSize:!0,showProgress:!1,nestedForms:!0,showDownload:!1,onLoad:function(){},onSelect:function(){return!0},onSubmit:function(){},onSuccess:function(){},onError:function(){},onCancel:function(){},onAbort:function(){},downloadCallback:!1,deleteCallback:!1,afterUploadAll:!1,serialize:!0,sequential:!1,sequentialCount:2,customProgressBar:!1,abortButtonClass:"ajax-file-upload-abort",cancelButtonClass:"ajax-file-upload-cancel",dragDropContainerClass:"ajax-upload-dragdrop",dragDropHoverClass:"state-hover",errorClass:"ajax-file-upload-error",uploadButtonClass:"ajax-file-upload",dragDropStr:"<span><b>Drag & Drop Files</b></span>",uploadStr:"Upload",abortStr:"Abort",cancelStr:"Cancel",deletelStr:"Delete",doneStr:"Done",multiDragErrorStr:"Multiple File Drag & Drop is not allowed.",extErrorStr:"is not allowed. Allowed extensions: ",duplicateErrorStr:"is not allowed. File already exists.",sizeErrorStr:"is not allowed. Allowed Max size: ",uploadErrorStr:"Upload is not allowed",maxFileCountErrorStr:" is not allowed. Maximum allowed files are:",downloadStr:"Download",customErrorKeyStr:"jquery-upload-file-error",showQueueDiv:!1,statusBarWidth:400,dragdropWidth:400,showPreview:!1,previewHeight:"auto",previewWidth:"100%",extraHTML:!1,uploadQueuOrder:"top"},t);this.fileCounter=1,this.selectedFiles=0;var g="ajax-file-upload-"+(new Date).getTime();this.formGroup=g,this.errorLog=e("<div></div>"),this.responses=[],this.existingFileNames=[],a.formdata||(w.dragDrop=!1),a.formdata||(w.multiple=!1),e(this).html("");var C=this,b=e("<div>"+w.uploadStr+"</div>");e(b).addClass(w.uploadButtonClass),function F(){if(e.fn.ajaxForm){if(w.dragDrop){var a=e('<div class="'+w.dragDropContainerClass+'" style="vertical-align:top;"></div>').width(w.dragdropWidth);e(C).append(a),e(a).append(b),e(a).append(e(w.dragDropStr)),o(C,w,a)}else e(C).append(b);e(C).append(C.errorLog),C.container=w.showQueueDiv?e("#"+w.showQueueDiv):e("<div class='ajax-file-upload-container'></div>").insertAfter(e(C)),w.onLoad.call(this,C),h(C,g,w,b)}else window.setTimeout(F,10)}(),this.startUpload=function(){e("form").each(function(){e(this).hasClass(C.formGroup)&&x.push(e(this))}),x.length>=1&&r()},this.getFileCount=function(){return C.selectedFiles},this.stopUpload=function(){e("."+w.abortButtonClass).each(function(){e(this).hasClass(C.formGroup)&&e(this).click()}),e("."+w.cancelButtonClass).each(function(){e(this).hasClass(C.formGroup)&&e(this).click()})},this.cancelAll=function(){e("."+w.cancelButtonClass).each(function(){e(this).hasClass(C.formGroup)&&e(this).click()})},this.update=function(a){w=e.extend(w,a)},this.reset=function(e){C.fileCounter=1,C.selectedFiles=0,C.errorLog.html(""),0!=e&&C.container.html("")},this.remove=function(){C.container.html(""),e(C).remove()},this.createProgress=function(e,a,t){var r=new m(this,w);r.progressDiv.show(),r.progressbar.width("100%");var o="";o=w.showFileCounter?C.fileCounter+w.fileCounterStyle+e:e,w.showFileSize&&(o+=" ("+s(t)+")"),r.filename.html(o),C.fileCounter++,C.selectedFiles++,w.showPreview&&(r.preview.attr("src",a),r.preview.show()),w.showDownload&&(r.download.show(),r.download.click(function(){w.downloadCallback&&w.downloadCallback.call(C,[e])})),w.showDelete&&(r.del.show(),r.del.click(function(){r.statusbar.hide().remove();var a=[e];w.deleteCallback&&w.deleteCallback.call(this,a,r),C.selectedFiles-=1,c(w,C)}))},this.getResponses=function(){return this.responses};var x=[],D=[],S=!1;return this}}(jQuery);

data/app/assets/javascripts/camaleon_cms/admin/uploader/_media_manager.js.coffee

@@ -0,0 +1,455 @@
+window["cama_init_media"] = (media_panel) ->
+  media_info = media_panel.find(".media_file_info")
+  media_files_panel = media_panel.find(".media_browser_list")
+  media_info_tab_info = media_panel.find(".media_file_info_col .nav-tabs .link_media_info")
+  media_link_tab_upload = media_panel.find(".media_file_info_col .nav-tabs .link_media_upload")
+
+  ################ visualize item
+  # loading last opened folder on current page
+  media_panel.ready ->
+    f = $('body').data('last-folder')
+    media_panel.trigger('navigate_to', {folder: f})
+
+  # return the data of this file
+  file_data = (item)->
+    data = item.data('eval-data') || eval("("+item.find(".data_value").val()+")")
+    item.data('eval-data', data)
+    return data
+
+  show_file = (item) ->
+    item.addClass('selected').siblings().removeClass('selected')
+    data = file_data(item)
+    media_info_tab_info.click()
+    tpl =
+      "<div class='p_thumb'></div>" +
+        "<div class='p_label'><b>"+I18n("button.name")+": </b><br> <span>"+data["name"]+"</span></div>" +
+        "<div class='p_body'>" +
+        "<div style='overflow: auto;'><b>"+I18n("button.url")+":</b><br> <a target='_blank' href='"+data["url"]+"'>"+data["url"]+"</a></div>" +
+        "<div><b>"+I18n("button.size")+":</b> <span>"+cama_humanFileSize(parseFloat(data["file_size"]))+"</span></div>" +
+        "</div>"
+
+    if window["callback_media_uploader"]
+      if !media_panel.attr("data-formats") || (media_panel.attr("data-formats")  && ($.inArray(data["file_type"], media_panel.attr("data-formats").split(",")) >= 0 || $.inArray(data["url"].split(".").pop().toLowerCase(), media_panel.attr("data-formats").split(",")) >= 0))
+        tpl += "<div class='p_footer'>" +
+          "<button class='btn btn-primary insert_btn'>"+I18n("button.insert")+"</button>" +
+          "</div>"
+
+    media_info.html(tpl)
+    media_info.find(".p_thumb").html(item.find(".thumb").html())
+    if data["file_type"] == "image"
+      if item.find('.edit_item') # add button to edit image
+        edit_img = $('<button type="button" class="pull-right btn btn-default" title="Edit"><i class="fa fa-pencil"></i></button>').click ->
+          item.find('.edit_item').trigger('click')
+      media_info.find('.p_footer').append(edit_img)
+      draw_image = ->
+        ww = parseInt(data['dimension'].split("x")[0])
+        hh = parseInt(data['dimension'].split("x")[1])
+        media_info.find(".p_body").append("<div class='cdimension'><b>"+I18n("button.dimension")+": </b><span>"+ww+"x"+hh+"</span></div>")
+        if media_panel.attr("data-dimension") # verify dimensions
+          btn = media_info.find(".p_footer .insert_btn")
+          btn.prop('disabled', true)
+          _ww = parseInt(media_panel.attr("data-dimension").split("x")[0]) || ww
+          _hh = parseInt(media_panel.attr("data-dimension").split("x")[1]) || hh
+          media_info.find('.cdimension').append("<span style='color: black;'> ==> "+media_panel.attr("data-dimension")+"</span>")
+          if _ww == ww && _hh == hh
+            btn.prop('disabled', false)
+          else
+            media_info.find(".cdimension").css("color", 'red')
+            cut = $("<button class='btn btn-info pull-right'><i class='fa fa-crop'></i> "+I18n("button.auto_crop")+"</button>").click(->
+              crop_name = data["name"].split('.')
+              crop_name[crop_name.length-2] += '_' + media_panel.attr("data-dimension")
+              $.fn.upload_url({url: data["url"], name: crop_name.join('.')})
+            )
+            btn.after(cut)
+
+      if !data['dimension'] && media_panel.attr("data-dimension") # if not dimension in the image and required dimension
+        img = new Image()
+        img.onload = ->
+          data['dimension'] = this.width+'x'+this.height
+          item.data('eval-data', data)
+          draw_image()
+        img.src = data["url"]
+      else
+        draw_image()
+
+    if window["callback_media_uploader"] # trigger callback
+      media_info.find(".insert_btn").click ->
+        data["mime"] = data["type"]
+        window["callback_media_uploader"](data)
+        window["callback_media_uploader"] = null
+        media_panel.closest(".modal").modal("hide")
+        return false
+
+  media_panel.on("click", ".file_item", ->
+    show_file($(this))
+    return false
+  ).on('dblclick', '.file_item', -> ## auto select on double click
+    btn = media_info.find('.insert_btn')
+    if btn && !btn.attr('disabled') && !btn.attr('readonly')
+      btn.trigger('click')
+  )
+
+  media_files_panel.scroll(->
+    if media_files_panel.attr('data-next-page') && $(this).scrollTop() + $(this).outerHeight() == $(this)[0].scrollHeight
+      media_panel.trigger('navigate_to', {paginate: true, custom_params: {page: media_files_panel.attr('data-next-page')}})
+  )
+  # end visualize item
+
+  ########## file uploader
+  p_upload = media_panel.find(".cama_media_fileuploader")
+  customFileData = ->
+    r = cama_media_get_custom_params()
+    r['skip_auto_crop'] = true
+    return r
+
+  p_upload.uploadFile({
+    url: p_upload.attr("data-url"),
+    fileName: "file_upload",
+    sequential: true,
+    sequentialCount: 1,
+    uploadButtonClass: "btn btn-primary btn-block",
+    dragDropStr: '<span style="display: block;"><b>'+p_upload.attr('data-dragDropStr')+'</b></span>',
+    uploadStr: p_upload.attr('data-uploadStr'),
+    dynamicFormData: customFileData,
+    onSuccess: ((files,res_upload,xhr,pd)->
+      if res_upload.search("media_item") >= 0 # success upload
+        media_panel.trigger("add_file", {item: res_upload, selected: $(pd.statusbar).siblings().not('.error_file_upload').length == 0})
+        $(pd.statusbar).remove();
+      else
+        $(pd.statusbar).find(".ajax-file-upload-progress").html("<span style='color: red;'>"+res_upload+"</span>");
+    ),
+    onError: ((files,status,errMsg,pd) ->
+      $(pd.statusbar).addClass('error_file_upload').find(".ajax-file-upload-filename").append(" <i class='fa fa-times btn btn-danger btn-xs' onclick='$(this).closest(\".ajax-file-upload-statusbar\").remove();'></i>")
+    )
+  })
+  ## end file uploader
+
+  ######### folders breadcrumb
+  media_panel.find(".media_folder_breadcrumb").on("click", "a", ->
+    media_panel.trigger("navigate_to", {folder: $(this).attr("data-path")})
+    return false
+  )
+  media_panel.on("click", ".folder_item", ->
+    f = media_panel.attr("data-folder")+"/"+$(this).attr("data-key")
+    if $(this).attr("data-key").search('/') >= 0
+      f = $(this).attr("data-key")
+    f = f.replace(/\/{2,}/g, '/')
+    media_panel.trigger("navigate_to", {folder: f})
+    $('body').attr('data-last-folder', f) # remembers last opened folder on current page
+  )
+  media_panel.bind("update_breadcrumb", ->
+    folder = media_panel.attr("data-folder").replace("//", "/")
+    folder_prefix = []
+    if folder == "/" || folder == ""
+      folder_items = ["/"]
+    else
+      folder_items = folder.split("/")
+    breadrumb = []
+    for value, index in folder_items
+      name = value
+      if value == "/" || value == ""
+        name = I18n("button.root")
+      if index == folder_items.length - 1
+        breadrumb.push("<li><span>"+name+"</span></li>")
+      else
+        folder_prefix.push(value)
+        breadrumb.push("<li><a data-path='"+(folder_prefix.join("/") || "/").replace(/\/{2,}/g, '/')+"' href='#'>"+name+"</a></li>")
+    media_panel.find(".media_folder_breadcrumb").html(breadrumb.join(""))
+  ).trigger("update_breadcrumb")
+  ## end folders
+
+  ######### folder navigation
+  media_panel.bind("navigate_to", (e, data)->
+    if data["folder"]
+      media_panel.attr("data-folder", data["folder"])
+    folder = media_panel.attr("data-folder")
+    media_panel.trigger("update_breadcrumb")
+    req_params = cama_media_get_custom_params({partial: true, folder: folder})
+    if data["paginate"]
+      req_params = media_panel.data('last_req_params') || req_params
+    else
+      media_info.html("")
+      media_link_tab_upload.click()
+
+    media_panel.data('last_req_params', $.extend({}, req_params, data['custom_params'] || {}))
+    showLoading()
+    $.getJSON(media_panel.attr("data-url"), media_panel.data('last_req_params'), (res)->
+      if data["paginate"]
+        if media_files_panel.children('.file_item').length > 0
+          media_files_panel.append(res.html)
+        else
+          last_folder = media_files_panel.children('.folder_item:last')
+          if last_folder.length ==1 then last_folder.after(res.html) else  media_files_panel.append(res.html)
+      else
+        media_files_panel.html(res.html)
+      media_files_panel.attr('data-next-page', res.next_page)
+      hideLoading()
+    )
+  ).bind("add_file", (e,  data)-> # add html item in the list
+    item = $(data["item"]).hide()
+    last_folder = media_files_panel.children('.folder_item:last')
+    if last_folder.length ==1 then last_folder.after(item) else media_files_panel.prepend(item)
+    if data["selected"] == true || data["selected"] == undefined
+      item.click()
+    media_files_panel.scrollTop(0)
+    item.fadeIn(1500)
+  )
+
+  # search file
+  media_panel.find('#cama_search_form').submit ->
+    media_panel.trigger('navigate_to', {custom_params: {search: $(this).find('input:text').val()}})
+    return false
+
+  # reload current directory
+  media_panel.find('.cam_media_reload').click (e, data)->
+    media_panel.trigger('navigate_to', {custom_params:{cama_media_reload: $(this).attr('data-action')}})
+    e.preventDefault()
+
+  # element actions
+  media_panel.on("click", "a.add_folder", ->
+    content = $("<form id='add_folder_form'><div><label for=''>"+I18n('button.folder')+": </label> <div class='input-group'><input name='folder' class='form-control required' placeholder='Folder name..'><span class='input-group-btn'><button class='btn btn-primary' type='submit'>"+I18n('button.create')+"</button></span></div></div> </form>")
+    callback = (modal)->
+      btn = modal.find(".btn-primary")
+      input = modal.find("input").keyup(->
+        if $(this).val()
+          btn.removeAttr("disabled")
+        else
+          btn.attr("disabled", "true")
+      ).trigger("keyup")
+      modal.find("form").submit ->
+        showLoading()
+        $.post(media_panel.attr("data-url_actions"), cama_media_get_custom_params({folder: media_panel.attr("data-folder")+"/"+input.val(), media_action: "new_folder"}), (res)->
+          hideLoading()
+          modal.modal("hide")
+          if res.search("folder_item") >= 0 # success upload
+            res = $(res)
+            media_files_panel.append(res)
+            res.click()
+          else
+            $.fn.alert({type: 'error', content: res, title: "Error"})
+        )
+        return false
+    open_modal({title: "New Folder", content: content, callback: callback, zindex: 9999999})
+    return false
+  )
+
+  # destroy file and folder
+  media_panel.on("click", "a.del_item, a.del_folder", ->
+    unless confirm(I18n("msg.delete_item"))
+      return false
+    link = $(this)
+    item = link.closest(".media_item")
+    showLoading()
+    $.post(media_panel.attr("data-url_actions"), cama_media_get_custom_params({folder: media_panel.attr("data-folder")+"/"+item.attr("data-key"), media_action: if link.hasClass("del_folder") then "del_folder" else "del_file"}), (res)->
+      hideLoading()
+      if res
+        $.fn.alert({type: 'error', content: res, title: I18n("button.error")})
+      else
+        item.remove()
+        media_info.html("")
+    ).error(->
+      $.fn.alert({type: 'error', content: I18n("msg.internal_error"), title: I18n("button.error")})
+    )
+    return false
+  )
+
+  # edit image
+  media_panel.on('click', '.edit_item', ->
+    link = $(this)
+    item = link.closest(".media_item")
+    data = file_data(item)
+    cropper = null
+    cropper_data = null
+
+    edit_callback = (modal)->
+      field_width = modal.find('.export_image .with_image')
+      field_height = modal.find('.export_image .height_image')
+      save_image = (name, same_name)->
+        $.fn.upload_url({url: cropper.cropper('getCroppedCanvas', { width: field_width.val(), height: field_height.val() }).toDataURL('image/jpeg'), name: name, same_name: same_name, callback: (res)->
+          modal.modal('hide')
+        })
+
+      # add buttons
+      for icon, cmd of {arrows: "('setDragMode', 'move')", crop: "('setDragMode', 'crop')", 'search-plus': "('zoom', 0.1)", 'search-minus': "('zoom', -0.1)", 'arrow-left': "('move', -10, 0)", 'arrow-right': "('move', 10, 0)", 'arrow-up': "('move', 0, -10)", 'arrow-down': "('move', 0, 10)", 'rotate-left': "('rotate', -45)", 'rotate-right': "('rotate', 45)", 'arrows-h': "('scaleX', -1)", 'arrows-v': "('scaleY', -1)", refresh: "('reset')"}
+        btn = $('<button type="button" class="btn btn-default" data-cmd="'+cmd+'"><i class="fa fa-'+icon+'"></i></button>')
+        modal.find('.editor_controls').append(btn)
+        btn.click(->
+          btn = $(this)
+          cmd = btn.data('cmd')
+          if cmd == "('scaleY', -1)" || cmd == "('scaleX', -1)"
+            btn.data('cmd', cmd.replace('-1', '1'))
+          else if cmd == "('scaleY', 1)" || cmd == "('scaleX', 1)"
+            btn.data('cmd', cmd.replace('1', '-1'))
+          eval('cropper.cropper'+cmd)
+          if cmd == "('reset')"
+            cropper.cropper('setData', cropper_data['data'])
+        )
+
+      # save editted image
+      save_btn = modal.find('.export_image').submit(->
+        unless $(this).valid()
+          return false
+        save_buttons = (modal2)->
+          modal2.find('img.preview').attr('src', cropper.cropper('getCroppedCanvas', { width: field_width.val(), height: field_height.val() }).toDataURL('image/jpeg'))
+          modal2.find('.save_btn').click(->
+            save_image(data['name'], true)
+            modal2.modal('hide')
+            item.remove()
+          )
+          modal2.find('form').validate({submitHandler: ->
+            save_image(modal2.find('.file_name').val()+'.'+data['name'].split('.').pop())
+            modal2.modal('hide')
+            return false
+          })
+        open_modal({zindex: 999992, modal_size: 'modal-lg', id: 'media_preview_editted_image', content: '<div class="text-center" style="overflow: auto;"><img class="preview"></div><br><div class="row"><div class="col-md-4"><button class="btn save_btn btn-default">'+I18n('button.replace_image')+'</button></div><div class="col-md-8"><form class="input-group"><input type="text" class="form-control file_name required" name="file_name"><div class="input-group-btn"><button class="btn btn-primary" type="submit">'+I18n('button.save_new_image')+'</button></div></form></div></div>', callback: save_buttons})
+        return false
+      ).validate()
+
+      # custom sizes auto calculate aspect ratio
+      field_width.change(->
+        unless field_width.attr("readonly")
+          croper_area = modal.find('.cropper-crop-box')
+          field_height.val(parseInt((parseInt($(this).val()) / croper_area.width())*croper_area.height()))
+      )
+
+      # show cropper image
+      showLoading()
+      modal.find('img.editable').load(->
+        setTimeout(->
+          label = modal.find('.label_dimension')
+          cropper_data = {data: {}, minContainerHeight: 450, modal: true, crop: (e)->
+            label.html(Math.round(e.width) + " x "+Math.round(e.height))
+            unless field_width.attr("readonly")
+              field_width.val(Math.round(e.width))
+            unless field_height.attr("readonly")
+              field_height.val(Math.round(e.height))
+          , built: ()->
+            $.get(data['url']).error(->
+              modal.find('.modal-body').html('<div class="alert alert-danger">'+I18n('msg.cors_error', 'Please verify the following: <ul><li>If the image exist: %{url_img}</li> <li>Check if cors configuration are defined well, only for external images: S3, cloudfront(if you are using cloudfront).</li></ul><br> More information about CORS: <a href="%{url_blog}" target="_blank">here.</a>', {url_img: data['url'], url_blog: 'http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/'})+'</div>')
+            )
+          }
+
+          if media_panel.attr("data-dimension") # TODO: control dimensions
+            dim = media_panel.attr("data-dimension").split('x')
+            if dim[0]
+              cropper_data['data']['width'] = parseFloat(dim[0].match(/\d+/)[0])
+              field_width.val(cropper_data['data']['width'])
+              if dim[0].search(/\?/) > -1
+                field_width.attr('max', cropper_data['data']['width'])
+              else
+                field_width.prop('readonly', true)
+            if dim[1]
+              cropper_data['data']['height'] = parseFloat(dim[1].match(/\d+/)[0])
+              field_height.val(cropper_data['data']['height'])
+              if dim[1].search(/\?/) > -1
+                field_height.attr('max', cropper_data['data']['height'])
+              else
+                field_height.prop('readonly', true)
+            if dim[0] && dim[0].search(/\?/) == -1 && dim[1] && dim[1].search(/\?/) == -1
+              cropper_data['aspectRatio'] = cropper_data['data']['width']/cropper_data['data']['height']
+
+          cropper = modal.find('img.editable').cropper(cropper_data)
+          hideLoading()
+        , 300)
+      )
+    open_modal({
+      zindex: 999991,
+      id: 'media_panel_editor_image',
+      title: I18n('button.edit_image', 'Edit Image')+' - ' + data['name'] + (if media_panel.attr("data-dimension") then " <small><i>("+media_panel.attr("data-dimension")+")</i></small>" else ''),
+      content: '<div>' +
+                '<div class="editable_wrapper">' +
+                  '<img style="max-width: 100%;" class="editable" id="media_editable_image" crossorigin src="'+data['url']+'">' +
+                '</div>' +
+                '<div class="row" style="margin-top: 5px;">' +
+                  '<div class="col-md-8">' +
+                    '<div class="editor_controls btn-group"></div>' +
+                  '</div>' +
+                  '<div class="col-md-4">' +
+                    '<form class="export_image"> ' +
+                      '<div class="input-group"><input class="form-control with_image data-error-place-parent required number" placeholder="Width"><span class="input-group-addon">x</span>' +
+                      '<input class="form-control height_image data-error-place-parent required number" placeholder="Height"> ' +
+                      '<span class="input-group-btn"><button class="btn btn-primary save_image" type="submit"><i class="fa fa-save"></i> '+I18n('button.save', 'Save Image')+'</button> </span> </div>' +
+                    '</form>' +
+                  '</div>' +
+                '</div>' +
+                '<!--span class="label label-default pull-right label_dimension"></span-->' +
+              '</div>',
+      callback: edit_callback, modal_size: 'modal-lg'})
+    return false
+  )
+
+  # upload from url form
+  media_panel.find("#cama_media_external").submit( ->
+    unless $(this).valid()
+      return false
+    $.fn.upload_url({url: $(this).find("input").val(), skip_auto_crop: true, callback: ->
+      media_panel.find("#cama_media_external")[0].reset();
+    })
+    return false
+  ).validate()
+
+# return extra attributes for media panel
+window['cama_media_get_custom_params'] = (custom_settings)->
+  media_panel = $("#cama_media_gallery")
+  r = eval("("+media_panel.attr('data-extra-params')+")")
+  r['folder'] = media_panel.attr("data-folder")
+  if custom_settings
+    $.extend(r, custom_settings)
+  r['folder'] = r['folder'].replace(/\/{2,}/g, '/')
+  return r
+
+$ ->
+  # sample: $.fn.upload_url({url: 'http://camaleon.tuzitio.com/media/132/logo2.png', dimension: '120x120', versions: '200x200', folder: 'my_folder', thumb_size: '100x100'})
+  # dimension: default current dimension
+  # folder: default current folder
+  # private: (Boolean) if true => list private files
+  $.fn.upload_url = (args)->
+    media_panel = $("#cama_media_gallery")
+    data = cama_media_get_custom_params({media_action: "crop_url", onerror: (message) ->
+      $.fn.alert({type: 'error', content: message, title: I18n("msg.error_uploading")})
+    })
+    $.extend(data, args); on_error = data["onerror"]; delete data["onerror"];
+    showLoading()
+    $.post(media_panel.attr("data-url_actions"), data, (res_upload)->
+      hideLoading()
+      if res_upload.search("media_item") >= 0 # success upload
+        media_panel.trigger("add_file", {item: res_upload})
+        if data["callback"]
+          data["callback"](res_upload)
+      else
+        $.fn.alert({type: 'error', content: res_upload, title: I18n("button.error")})
+    ).error(->
+      $.fn.alert({type: 'error', content: I18n("msg.internal_error"), title: I18n("button.error")})
+    )
+
+
+# jquery library for modal uploader
+$ ->
+  # sample: $.fn.upload_filemanager({title: "My title", formats: "image,video", dimension: "30x30", versions: '100x100,200x200', thumb_size: '100x100', selected: function(file){ alert(file["name"]) }})
+  # file structure: {"name":"422.html","size":1547, "url":"http://localhost:3000/media/1/422.html", "format":"doc","type":"text/html"}
+  # dimension: dimension: "30x30" | "x30" | dimension: "30x"
+  # private: (boolean) if true => browser private files that are not possible access by public url
+  $.fn.upload_filemanager = (args)->
+    args = args || {}
+    if args["formats"] == 'null'
+      args["formats"] = ''
+    if args["dimension"] == 'null'
+      args["dimension"] = ''
+    if args["versions"] == 'null'
+      args["versions"] = ''
+    if args["thumb_size"] == 'null'
+      args["thumb_size"] = ''
+
+    open_modal({title: args["title"] || I18n("msg.media_title"), id: 'cama_modal_file_uploader', modal_size: "modal-lg", mode: "ajax", url: root_admin_url+"/media/ajax", ajax_params: {media_formats: args["formats"], dimension: args["dimension"], versions: args["versions"], thumb_size: args["thumb_size"], private: args['private'] }, callback: (modal)->
+      if args["selected"]
+        window["callback_media_uploader"] = args["selected"]
+      modal.css("z-index", args["zindex"] || 99999).children(".modal-dialog").css("width", "90%")
+    })
+
+window['cama_humanFileSize'] = (size)->
+  units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  i = 0;
+  while(size >= 1024)
+    size /= 1024;
+    ++i;
+  return size.toFixed(1) + ' ' + units[i];