+function($){"use strict";if($.oc.mediaManager===undefined) $.oc.mediaManager={} var Base=$.oc.foundation.base,BaseProto=Base.prototype var MediaManager=function(element,options){this.$el=$(element) this.$form=this.$el.closest('form') this.options=options Base.call(this) this.selectTimer=null this.sidebarPreviewElement=null this.itemListElement=null this.scrollContentElement=null this.thumbnailQueue=[] this.activeThumbnailQueueLength=0 this.sidebarThumbnailAjax=null this.selectionMarker=null this.dropzone=null this.searchTrackInputTimer=null this.navigationAjax=null this.dblTouchTimer=null this.dblTouchFlag=null this.itemListPosition=null this.init()} MediaManager.prototype=Object.create(BaseProto) MediaManager.prototype.constructor=MediaManager MediaManager.prototype.dispose=function(){this.unregisterHandlers() this.clearSelectTimer() this.destroyUploader() this.clearSearchTrackInputTimer() this.releaseNavigationAjax() this.clearDblTouchTimer() this.removeAttachedControls() this.removeScroll() this.$el.removeData('oc.mediaManager') this.$el=null this.$form=null this.sidebarPreviewElement=null this.itemListElement=null this.scrollContentElement=null this.sidebarThumbnailAjax=null this.selectionMarker=null this.thumbnailQueue=[] this.navigationAjax=null BaseProto.dispose.call(this)} MediaManager.prototype.getSelectedItems=function(returnNotProcessed,allowRootItem){var items=this.$el.get(0).querySelectorAll('[data-type="media-item"].selected'),result=[] if(!allowRootItem){var filteredItems=[] for(var i=0,len=items.length;i=0;i--) this.thumbnailQueue.push({id:placeholders[i].getAttribute('id'),width:placeholders[i].getAttribute('data-width'),height:placeholders[i].getAttribute('data-height'),path:placeholders[i].getAttribute('data-path'),lastModified:placeholders[i].getAttribute('data-last-modified')}) this.handleThumbnailQueue()} MediaManager.prototype.handleThumbnailQueue=function(){var maxThumbnailQueueLength=2,maxThumbnailBatchLength=3 if(this.activeThumbnailQueueLength>=maxThumbnailQueueLength) return for(var i=this.activeThumbnailQueueLength;i0;i++){var batch=[] for(var j=0;j0;j++) batch.push(this.thumbnailQueue.pop()) this.activeThumbnailQueueLength++ this.handleThumbnailBatch(batch).always(this.proxy(this.placeholdersUpdated))}} MediaManager.prototype.handleThumbnailBatch=function(batch){var data={batch:batch} for(var i=0,len=batch.length;i(bTop+bHeight))||((aLeft+aWidth)(bLeft+bWidth)))} MediaManager.prototype.initUploader=function(){if(!this.itemListElement) return var uploaderOptions={clickable:this.$el.find('[data-control="upload"]').get(0),method:'POST',url:window.location,paramName:'file_data',createImageThumbnails:false} this.dropzone=new Dropzone(this.$el.get(0),uploaderOptions) this.dropzone.on('addedfile',this.proxy(this.uploadFileAdded)) this.dropzone.on('totaluploadprogress',this.proxy(this.uploadUpdateTotalProgress)) this.dropzone.on('queuecomplete',this.proxy(this.uploadQueueComplete)) this.dropzone.on('sending',this.proxy(this.uploadSending)) this.dropzone.on('error',this.proxy(this.uploadError))} MediaManager.prototype.destroyUploader=function(){if(!this.dropzone) return this.dropzone.destroy() this.dropzone=null} MediaManager.prototype.uploadFileAdded=function(){this.showUploadUi() this.setUploadProgress(0) this.$el.find('[data-command="cancel-uploading"]').removeClass('hide') this.$el.find('[data-command="close-uploader"]').addClass('hide')} MediaManager.prototype.showUploadUi=function(){this.$el.find('[data-control="upload-ui"]').removeClass('hide')} MediaManager.prototype.hideUploadUi=function(){this.$el.find('[data-control="upload-ui"]').addClass('hide')} MediaManager.prototype.uploadUpdateTotalProgress=function(uploadProgress,totalBytes,totalBytesSent){this.setUploadProgress(uploadProgress) var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),messageTemplate=fileNumberLabel.getAttribute('data-message-template'),fileNumber=this.dropzone.getUploadingFiles().length+this.dropzone.getQueuedFiles().length if(uploadProgress>=100) uploadProgress=99 fileNumberLabel.innerHTML=messageTemplate.replace(':number',fileNumber).replace(':percents',Math.round(uploadProgress)+'%')} MediaManager.prototype.setUploadProgress=function(value){var progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') progresBar.setAttribute('style','width: '+value+'%') progresBar.setAttribute('class','progress-bar')} MediaManager.prototype.uploadQueueComplete=function(){var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),completeTemplate=fileNumberLabel.getAttribute('data-complete-template'),progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') fileNumberLabel.innerHTML=completeTemplate;progresBar.setAttribute('class','progress-bar progress-bar-success') this.$el.find('[data-command="cancel-uploading"]').addClass('hide') this.$el.find('[data-command="close-uploader"]').removeClass('hide') this.refresh()} MediaManager.prototype.uploadSending=function(file,xhr,formData){formData.append('path',this.$el.find('[data-type="current-folder"]').val())} MediaManager.prototype.uploadCancelAll=function(){this.dropzone.removeAllFiles(true) this.hideUploadUi()} MediaManager.prototype.uploadError=function(file,message){swal({title:'Error uploading file',text:message,confirmButtonClass:'btn-default'})} MediaManager.prototype.cropSelectedImage=function(callback){var selectedItems=this.getSelectedItems(true) if(selectedItems.length!=1){alert(this.options.selectSingleImage) return} if(selectedItems[0].getAttribute('data-document-type')!=='image'){alert(this.options.selectionNotImage) return} var path=selectedItems[0].getAttribute('data-path') new $.oc.mediaManager.imageCropPopup(path,{alias:this.options.alias,onDone:callback})} MediaManager.prototype.onImageCropped=function(imageUrl){var item={documentType:'image',publicUrl:imageUrl} this.$el.trigger('popupcommand',['insert-cropped',item])} MediaManager.prototype.clearSearchTrackInputTimer=function(){if(this.searchTrackInputTimer===null) return clearTimeout(this.searchTrackInputTimer) this.searchTrackInputTimer=null} MediaManager.prototype.updateSearchResults=function(){var $searchField=this.$el.find('[data-control="search"]'),data={search:$searchField.val()} this.execNavigationRequest('onSearch',data,$searchField)} MediaManager.prototype.resetSearch=function(){this.$el.find('[data-control="search"]').val('')} MediaManager.prototype.onSearchChanged=function(ev){var value=ev.currentTarget.value if(this.lastSearchValue!==undefined&&this.lastSearchValue==value) return this.lastSearchValue=value this.clearSearchTrackInputTimer() this.searchTrackInputTimer=window.setTimeout(this.proxy(this.updateSearchResults),300)} MediaManager.prototype.deleteItems=function(){var items=this.$el.get(0).querySelectorAll('[data-type="media-item"].selected') if(!items.length){swal({title:this.options.deleteEmpty,confirmButtonClass:'btn-default'}) return} swal({title:this.options.deleteConfirm,confirmButtonClass:'btn-default',showCancelButton:true},this.proxy(this.deleteConfirmation))} MediaManager.prototype.deleteConfirmation=function(confirmed){if(!confirmed) return var items=this.$el.get(0).querySelectorAll('[data-type="media-item"].selected'),paths=[] for(var i=0,len=items.length;i2||Math.abs(deltaY)>2)){this.createSelectionMarker() this.selectionMarker.setAttribute('class','') this.selectionStarted=true $(document.body).addClass('no-select')} if(this.selectionStarted){if(deltaX>=0){this.selectionMarker.style.left=this.selectionStartPoint.x+'px' this.selectionMarker.style.width=deltaX+'px'} else{this.selectionMarker.style.left=relativePosition.x+'px' this.selectionMarker.style.width=Math.abs(deltaX)+'px'} if(deltaY>=0){this.selectionMarker.style.height=deltaY+'px' this.selectionMarker.style.top=this.selectionStartPoint.y+'px'} else{this.selectionMarker.style.top=relativePosition.y+'px' this.selectionMarker.style.height=Math.abs(deltaY)+'px'}}} MediaManager.prototype.onSortingChanged=function(ev){var data={sortBy:$(ev.target).val(),path:this.$el.find('[data-type="current-folder"]').val()} this.execNavigationRequest('onSetSorting',data)} MediaManager.prototype.onKeyDown=function(ev){var eventHandled=false switch(ev.which){case 13:var items=this.getSelectedItems(true,true) if(items.length>0) this.navigateToItem($(items[0])) eventHandled=true break;case 39:case 40:this.selectRelative(true,ev.shiftKey) eventHandled=true break;case 37:case 38:this.selectRelative(false,ev.shiftKey) eventHandled=true break;} if(eventHandled){ev.preventDefault() ev.stopPropagation()}} MediaManager.DEFAULTS={alias:'',deleteEmpty:'Please select files to delete.',deleteConfirm:'Do you really want to delete the selected file(s)?',moveEmpty:'Please select files to move.',selectSingleImage:'Please select a single image.',selectionNotImage:'The selected item is not an image.',bottomToolbar:false,cropAndInsertButton:false} var old=$.fn.mediaManager $.fn.mediaManager=function(option){var args=Array.prototype.slice.call(arguments,1),result=undefined this.each(function(){var $this=$(this) var data=$this.data('oc.mediaManager') var options=$.extend({},MediaManager.DEFAULTS,$this.data(),typeof option=='object'&&option) if(!data)$this.data('oc.mediaManager',(data=new MediaManager(this,options))) if(typeof option=='string')result=data[option].apply(data,args) if(typeof result!='undefined')return false}) return result?result:this} $.fn.mediaManager.Constructor=MediaManager $.fn.mediaManager.noConflict=function(){$.fn.mediaManager=old return this} $(document).on('render',function(){$('div[data-control=media-manager]').mediaManager()})}(window.jQuery);+function($){"use strict";if($.oc.mediaManager===undefined) $.oc.mediaManager={} var Base=$.oc.foundation.base,BaseProto=Base.prototype var MediaManagerImageCropPopup=function(path,options){this.$popupRootElement=null this.$popupElement=null this.selectionSizeLabel=null this.imageArea=null this.hRulerHolder=null this.vRulerHolder=null this.rulersVisible=false this.prevScrollTop=0 this.prevScrollLeft=0 this.jCrop=null this.options=$.extend({},MediaManagerImageCropPopup.DEFAULTS,options) this.path=path Base.call(this) this.init() this.show()} MediaManagerImageCropPopup.prototype=Object.create(BaseProto) MediaManagerImageCropPopup.prototype.constructor=MediaManagerImageCropPopup MediaManagerImageCropPopup.prototype.dispose=function(){this.unregisterHandlers() this.removeAttachedControls() this.$popupRootElement.remove() this.$popupRootElement=null this.$popupElement=null this.selectionSizeLabel=null this.imageArea=null this.hRulerHolder=null this.vRulerHolder=null BaseProto.dispose.call(this)} MediaManagerImageCropPopup.prototype.init=function(){if(this.options.alias===undefined) throw new Error('Media Manager image crop popup option "alias" is not set.') this.$popupRootElement=$('
') this.registerHandlers()} MediaManagerImageCropPopup.prototype.show=function(){var data={path:this.path} this.$popupRootElement.popup({extraData:data,size:'adaptive',adaptiveHeight:true,handler:this.options.alias+'::onLoadImageCropPopup',zIndex:1200})} MediaManagerImageCropPopup.prototype.registerHandlers=function(){this.$popupRootElement.one('hide.oc.popup',this.proxy(this.onPopupHidden)) this.$popupRootElement.one('shown.oc.popup',this.proxy(this.onPopupShown))} MediaManagerImageCropPopup.prototype.unregisterHandlers=function(){this.$popupElement.off('change','[data-control="selection-mode"]',this.proxy(this.onSelectionModeChanged)) this.$popupElement.off('click','[data-command]',this.proxy(this.onCommandClick)) this.$popupElement.off('shown.oc.popup','button[data-command=resize]',this.proxy(this.onResizePopupShown)) this.$popupElement.off('hidden.oc.popup','button[data-command=resize]',this.proxy(this.onResizePopupHidden)) if(this.rulersVisible){var $cropToolRoot=this.$popupElement.find('[data-control=media-manager-crop-tool]') this.imageArea.removeEventListener('scroll',this.proxy(this.onImageScroll))} this.getWidthInput().off('change',this.proxy(this.onSizeInputChange)) this.getHeightInput().off('change',this.proxy(this.onSizeInputChange))} MediaManagerImageCropPopup.prototype.removeAttachedControls=function(){if(this.$popupElement){this.$popupElement.find('[data-control="selection-mode"]').select2('destroy').remove() this.$popupElement.find('[data-control=toolbar]').toolbar('dispose').remove() this.jCrop.destroy()} this.jCrop=null} MediaManagerImageCropPopup.prototype.hide=function(){if(this.$popupElement) this.$popupElement.trigger('close.oc.popup')} MediaManagerImageCropPopup.prototype.getSelectionMode=function(){return this.$popupElement.find('[data-control="selection-mode"]').val()} MediaManagerImageCropPopup.prototype.initRulers=function(){if(!Modernizr.csstransforms) return var $cropToolRoot=this.$popupElement.find('[data-control=media-manager-crop-tool]'),width=$cropToolRoot.data('image-width'),height=$cropToolRoot.data('image-height') if(!width||!height) return if($cropToolRoot.width()>width) width=$(window).width() if($cropToolRoot.height()>height) height=$(window).height() $cropToolRoot.find('.ruler-container').removeClass('hide') $cropToolRoot.addClass('has-rulers') var $hRuler=$cropToolRoot.find('[data-control=h-ruler]'),$vRuler=$cropToolRoot.find('[data-control=v-ruler]'),hTicks=width/40+1,vTicks=height/40+1 this.createRulerTicks($hRuler,hTicks) this.createRulerTicks($vRuler,vTicks) this.rulersVisible=true this.imageArea.addEventListener('scroll',this.proxy(this.onImageScroll)) this.hRulerHolder=$cropToolRoot.find('.ruler-container.horizontal .layout-relative').get(0) this.vRulerHolder=$cropToolRoot.find('.ruler-container.vertical .layout-relative').get(0)} MediaManagerImageCropPopup.prototype.createRulerTicks=function($rulerElement,count){var list=document.createElement('ul') for(var i=0;i<=count;i++){var li=document.createElement('li') li.textContent=i*40 list.appendChild(li)} $rulerElement.append(list)} MediaManagerImageCropPopup.prototype.initJCrop=function(){this.jCrop=$.Jcrop($(this.imageArea).find('img').get(0),{shade:true,onChange:this.proxy(this.onSelectionChanged)})} MediaManagerImageCropPopup.prototype.fixDimensionValue=function(value){var result=value.replace(/[^0-9]+/,'') if(!result.length) result=200 if(result=='0') result=1 return result} MediaManagerImageCropPopup.prototype.getWidthInput=function(){return this.$popupElement.find('[data-control="crop-width-input"]')} MediaManagerImageCropPopup.prototype.getHeightInput=function(){return this.$popupElement.find('[data-control="crop-height-input"]')} MediaManagerImageCropPopup.prototype.applySelectionMode=function(){if(!this.jCrop) return var $widthInput=this.getWidthInput(),$heightInput=this.getHeightInput(),width=this.fixDimensionValue($widthInput.val()),height=this.fixDimensionValue($heightInput.val()),mode=this.getSelectionMode() switch(mode){case'fixed-ratio':this.jCrop.setOptions({aspectRatio:width/height,minSize:[0,0],maxSize:[0,0],allowResize:true}) break case'fixed-size':this.jCrop.setOptions({aspectRatio:0,minSize:[width,height],maxSize:[width,height],allowResize:false}) break case'normal':this.jCrop.setOptions({aspectRatio:0,minSize:[0,0],maxSize:[0,0],allowResize:true}) break}} MediaManagerImageCropPopup.prototype.cropAndInsert=function(){var data={img:$(this.imageArea).find('img').attr('src'),selection:this.jCrop.tellSelect()} $.oc.stripeLoadIndicator.show() this.$popupElement.find('form').request(this.options.alias+'::onCropImage',{data:data}).always(function(){$.oc.stripeLoadIndicator.hide()}).done(this.proxy(this.onImageCropped))} MediaManagerImageCropPopup.prototype.onImageCropped=function(response){this.hide() if(this.options.onDone!==undefined) this.options.onDone(response.result)} MediaManagerImageCropPopup.prototype.showResizePopup=function(){this.$popupElement.find('button[data-command=resize]').popup({content:this.$popupElement.find('[data-control="resize-template"]').html(),zIndex:1220})} MediaManagerImageCropPopup.prototype.onResizePopupShown=function(ev,button,popup){var $popup=$(popup),$widthControl=$popup.find('input[name=width]'),$heightControl=$popup.find('input[name=height]'),imageWidth=this.fixDimensionValue(this.$popupElement.find('input[data-control=dimension-width]').val()),imageHeight=this.fixDimensionValue(this.$popupElement.find('input[data-control=dimension-height]').val()) $widthControl.val(imageWidth) $heightControl.val(imageHeight) $widthControl.focus() $popup.on('submit.media','form',this.proxy(this.onResizeSubmit)) $widthControl.on('keyup.media',this.proxy(this.onResizeDimensionKeyUp)) $heightControl.on('keyup.media',this.proxy(this.onResizeDimensionKeyUp)) $widthControl.on('change.media',this.proxy(this.onResizeDimensionChanged)) $heightControl.on('change.media',this.proxy(this.onResizeDimensionChanged))} MediaManagerImageCropPopup.prototype.onResizePopupHidden=function(ev,button,popup){var $popup=$(popup),$widthControl=$popup.find('input[name=width]'),$heightControl=$popup.find('input[name=height]') $popup.off('.media','form') $widthControl.off('.media') $heightControl.off('.media')} MediaManagerImageCropPopup.prototype.onResizeDimensionKeyUp=function(ev){var $target=$(ev.target),targetValue=this.fixDimensionValue($target.val()),otherDimensionName=$target.attr('name')=='width'?'height':'width',$otherInput=$target.closest('form').find('input[name='+otherDimensionName+']'),ratio=this.$popupElement.find('[data-control=original-ratio]').val(),value=otherDimensionName=='height'?targetValue/ratio:targetValue*ratio $otherInput.val(Math.round(value))} MediaManagerImageCropPopup.prototype.onResizeDimensionChanged=function(ev){var $target=$(ev.target) $target.val(this.fixDimensionValue($target.val()))} MediaManagerImageCropPopup.prototype.onResizeSubmit=function(ev){var data={cropSessionKey:this.$popupElement.find('input[name=cropSessionKey]').val(),path:this.$popupElement.find('input[name=path]').val()} $.oc.stripeLoadIndicator.show() $(ev.target).request(this.options.alias+'::onResizeImage',{data:data}).always(function(){$.oc.stripeLoadIndicator.hide()}).done(this.proxy(this.imageResized)) ev.preventDefault() return false} MediaManagerImageCropPopup.prototype.imageResized=function(response){this.$popupElement.find('button[data-command=resize]').popup('hide') this.updateImage(response.url,response.dimensions[0],response.dimensions[1])} MediaManagerImageCropPopup.prototype.updateImage=function(url,width,hegiht){this.jCrop.destroy() this.$popupElement.find('span[data-label=width]').text(width) this.$popupElement.find('span[data-label=height]').text(hegiht) this.$popupElement.find('input[data-control=dimension-width]').val(width) this.$popupElement.find('input[data-control=dimension-height]').val(hegiht) var $imageArea=$(this.imageArea) $imageArea.find('img').remove() var $img=$('').attr('src',url) $img.one('load',this.proxy(this.initJCrop)) $imageArea.append($img) this.imageArea.scrollTop=0 this.imageArea.scrollLeft=0 this.onImageScroll()} MediaManagerImageCropPopup.prototype.undoResizing=function(){this.updateImage(this.$popupElement.find('input[data-control=original-url]').val(),this.$popupElement.find('input[data-control=original-width]').val(),this.$popupElement.find('input[data-control=original-height]').val())} MediaManagerImageCropPopup.prototype.updateSelectionSizeLabel=function(width,height){if(width==0&&height==0){this.selectionSizeLabel.setAttribute('class','hide') return} this.selectionSizeLabel.setAttribute('class','') this.selectionSizeLabel.querySelector('[data-label=selection-width]').textContent=width this.selectionSizeLabel.querySelector('[data-label=selection-height]').textContent=height} MediaManagerImageCropPopup.prototype.onPopupHidden=function(event,element,popup){this.$popupElement.find('form').request(this.options.alias+'::onEndCroppingSession') $(document).trigger('mousedown') this.dispose()} MediaManagerImageCropPopup.prototype.onPopupShown=function(event,element,popup){this.$popupElement=popup this.$popupElement.on('change','[data-control="selection-mode"]',this.proxy(this.onSelectionModeChanged)) this.$popupElement.on('click','[data-command]',this.proxy(this.onCommandClick)) this.$popupElement.on('shown.oc.popup','button[data-command=resize]',this.proxy(this.onResizePopupShown)) this.$popupElement.on('hidden.oc.popup','button[data-command=resize]',this.proxy(this.onResizePopupHidden)) this.imageArea=popup.find('[data-control=media-manager-crop-tool]').get(0).querySelector('.image_area') this.selectionSizeLabel=popup.find('[data-label="selection-size"]').get(0) this.getWidthInput().on('change',this.proxy(this.onSizeInputChange)) this.getHeightInput().on('change',this.proxy(this.onSizeInputChange)) this.initRulers() this.initJCrop()} MediaManagerImageCropPopup.prototype.onSelectionModeChanged=function(){var mode=this.getSelectionMode(),$widthInput=this.getWidthInput(),$heightInput=this.getHeightInput() if(mode==='normal'){$widthInput.attr('disabled','disabled') $heightInput.attr('disabled','disabled')}else{$widthInput.removeAttr('disabled') $heightInput.removeAttr('disabled') $widthInput.val(this.fixDimensionValue($widthInput.val())) $heightInput.val(this.fixDimensionValue($heightInput.val()))} this.applySelectionMode()} MediaManagerImageCropPopup.prototype.onImageScroll=function(){var scrollTop=this.imageArea.scrollTop,scrollLeft=this.imageArea.scrollLeft if(this.prevScrollTop!=scrollTop){this.prevScrollTop=scrollTop this.vRulerHolder.scrollTop=scrollTop} if(this.prevScrollLeft!=scrollLeft){this.prevScrollLeft=scrollLeft this.hRulerHolder.scrollLeft=scrollLeft}} MediaManagerImageCropPopup.prototype.onSizeInputChange=function(ev){var $target=$(ev.target) $target.val(this.fixDimensionValue($target.val())) this.applySelectionMode()} MediaManagerImageCropPopup.prototype.onCommandClick=function(ev){var command=$(ev.currentTarget).data('command') switch(command){case'insert':this.cropAndInsert() break case'resize':this.showResizePopup() break case'undo-resizing':this.undoResizing() break}} MediaManagerImageCropPopup.prototype.onSelectionChanged=function(c){this.updateSelectionSizeLabel(c.w,c.h)} MediaManagerImageCropPopup.DEFAULTS={alias:undefined,onDone:undefined} $.oc.mediaManager.imageCropPopup=MediaManagerImageCropPopup}(window.jQuery);