2015-04-14 22:44:45 -07:00
+ 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 ) }
2015-04-15 21:48:16 -07:00
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 < len ; i ++ ) { var item = items [ i ]
if ( ! item . hasAttribute ( 'data-root' ) )
filteredItems . push ( item ) }
items = filteredItems }
2015-04-14 22:44:45 -07:00
if ( returnNotProcessed === true )
return items
for ( var i = 0 , len = items . length ; i < len ; i ++ ) { var item = items [ i ] , itemDetails = { itemType : item . getAttribute ( 'data-item-type' ) , path : item . getAttribute ( 'data-path' ) , title : item . getAttribute ( 'data-title' ) , documentType : item . getAttribute ( 'data-document-type' ) , folder : item . getAttribute ( 'data-folder' ) , publicUrl : item . getAttribute ( 'data-public-url' ) }
result . push ( itemDetails ) }
return result }
MediaManager . prototype . init = function ( ) { this . itemListElement = this . $el . find ( '[data-control="item-list"]' ) . get ( 0 )
this . scrollContentElement = this . itemListElement . querySelector ( '.scroll-wrapper' )
if ( this . options . bottomToolbar ) { this . $el . find ( '[data-control="bottom-toolbar"]' ) . removeClass ( 'hide' )
if ( this . options . cropAndInsertButton )
this . $el . find ( '[data-popup-command="crop-and-insert"]' ) . removeClass ( 'hide' ) }
this . registerHandlers ( )
this . updateSidebarPreview ( )
this . generateThumbnails ( )
this . initUploader ( )
this . initScroll ( ) }
MediaManager . prototype . registerHandlers = function ( ) { this . $el . on ( 'dblclick' , this . proxy ( this . onNavigate ) )
this . $el . on ( 'click.tree-path' , 'ul.tree-path, [data-control="sidebar-labels"]' , this . proxy ( this . onNavigate ) )
this . $el . on ( 'click.command' , '[data-command]' , this . proxy ( this . onCommandClick ) )
this . $el . on ( 'click.item' , '[data-type="media-item"]' , this . proxy ( this . onItemClick ) )
this . $el . on ( 'touchend' , '[data-type="media-item"]' , this . proxy ( this . onItemTouch ) )
this . $el . on ( 'change' , '[data-control="sorting"]' , this . proxy ( this . onSortingChanged ) )
2018-05-31 04:26:38 +02:00
this . $el . on ( 'input' , '[data-control="search"]' , this . proxy ( this . onSearchChanged ) )
2015-04-14 22:44:45 -07:00
this . $el . on ( 'mediarefresh' , this . proxy ( this . refresh ) )
this . $el . on ( 'shown.oc.popup' , '[data-command="create-folder"]' , this . proxy ( this . onFolderPopupShown ) )
this . $el . on ( 'hidden.oc.popup' , '[data-command="create-folder"]' , this . proxy ( this . onFolderPopupHidden ) )
this . $el . on ( 'shown.oc.popup' , '[data-command="move"]' , this . proxy ( this . onMovePopupShown ) )
this . $el . on ( 'hidden.oc.popup' , '[data-command="move"]' , this . proxy ( this . onMovePopupHidden ) )
this . $el . on ( 'keydown' , this . proxy ( this . onKeyDown ) )
if ( this . itemListElement )
this . itemListElement . addEventListener ( 'mousedown' , this . proxy ( this . onListMouseDown ) ) }
MediaManager . prototype . unregisterHandlers = function ( ) { this . $el . off ( 'dblclick' , this . proxy ( this . onNavigate ) )
this . $el . off ( 'click.tree-path' , this . proxy ( this . onNavigate ) )
this . $el . off ( 'click.command' , this . proxy ( this . onCommandClick ) )
this . $el . off ( 'click.item' , this . proxy ( this . onItemClick ) )
this . $el . off ( 'touchend' , '[data-type="media-item"]' , this . proxy ( this . onItemTouch ) )
this . $el . off ( 'change' , '[data-control="sorting"]' , this . proxy ( this . onSortingChanged ) )
this . $el . off ( 'keyup' , '[data-control="search"]' , this . proxy ( this . onSearchChanged ) )
this . $el . off ( 'shown.oc.popup' , '[data-command="create-folder"]' , this . proxy ( this . onFolderPopupShown ) )
this . $el . off ( 'hidden.oc.popup' , '[data-command="create-folder"]' , this . proxy ( this . onFolderPopupHidden ) )
this . $el . off ( 'shown.oc.popup' , '[data-command="move"]' , this . proxy ( this . onMovePopupShown ) )
this . $el . off ( 'hidden.oc.popup' , '[data-command="move"]' , this . proxy ( this . onMovePopupHidden ) )
this . $el . off ( 'keydown' , this . proxy ( this . onKeyDown ) )
if ( this . itemListElement ) { this . itemListElement . removeEventListener ( 'mousedown' , this . proxy ( this . onListMouseDown ) )
this . itemListElement . removeEventListener ( 'mousemove' , this . proxy ( this . onListMouseMove ) ) }
document . removeEventListener ( 'mouseup' , this . proxy ( this . onListMouseUp ) ) }
MediaManager . prototype . changeView = function ( view ) { var data = { view : view , path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) }
this . execNavigationRequest ( 'onChangeView' , data ) }
MediaManager . prototype . setFilter = function ( filter ) { var data = { filter : filter , path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) }
this . execNavigationRequest ( 'onSetFilter' , data ) }
MediaManager . prototype . isSearchMode = function ( ) { return this . $el . find ( '[data-type="search-mode"]' ) . val ( ) == 'true' }
MediaManager . prototype . initScroll = function ( ) { this . $el . find ( '.control-scrollpad' ) . scrollpad ( ) }
2015-04-15 21:48:16 -07:00
MediaManager . prototype . updateScroll = function ( ) { this . $el . find ( '.control-scrollpad' ) . scrollpad ( 'update' ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . removeScroll = function ( ) { this . $el . find ( '.control-scrollpad' ) . scrollpad ( 'dispose' ) }
MediaManager . prototype . scrollToTop = function ( ) { this . $el . find ( '.control-scrollpad' ) . scrollpad ( 'scrollToStart' ) }
MediaManager . prototype . removeAttachedControls = function ( ) { this . $el . find ( '[data-control=toolbar]' ) . toolbar ( 'dispose' )
this . $el . find ( '[data-control=sorting]' ) . select2 ( 'destroy' ) }
MediaManager . prototype . clearSelectTimer = function ( ) { if ( this . selectTimer === null )
return
clearTimeout ( this . selectTimer )
this . selectTimer = null }
MediaManager . prototype . selectItem = function ( node , expandSelection ) { if ( ! expandSelection ) { var items = this . $el . get ( 0 ) . querySelectorAll ( '[data-type="media-item"].selected' )
2015-08-15 09:17:30 +10:00
for ( var i = 0 , len = items . length ; i < len ; i ++ ) { items [ i ] . setAttribute ( 'class' , '' ) }
node . setAttribute ( 'class' , 'selected' ) }
2015-04-14 22:44:45 -07:00
else { if ( node . getAttribute ( 'class' ) == 'selected' )
node . setAttribute ( 'class' , '' )
else
node . setAttribute ( 'class' , 'selected' ) }
2015-04-15 21:48:16 -07:00
node . focus ( )
2015-04-14 22:44:45 -07:00
this . clearSelectTimer ( )
2015-08-15 09:17:30 +10:00
if ( this . isPreviewSidebarVisible ( ) ) { this . selectTimer = setTimeout ( this . proxy ( this . updateSidebarPreview ) , 100 ) }
if ( node . hasAttribute ( 'data-root' ) && ! expandSelection ) { this . toggleMoveAndDelete ( true ) }
else { this . toggleMoveAndDelete ( false ) }
if ( expandSelection ) { this . unselectRoot ( ) } }
MediaManager . prototype . toggleMoveAndDelete = function ( value ) { $ ( '[data-command=delete]' , this . $el ) . prop ( 'disabled' , value )
$ ( '[data-command=move]' , this . $el ) . prop ( 'disabled' , value ) }
2015-04-19 11:19:36 -07:00
MediaManager . prototype . unselectRoot = function ( ) { var rootItem = this . $el . get ( 0 ) . querySelector ( '[data-type="media-item"][data-root].selected' )
if ( rootItem )
rootItem . setAttribute ( 'class' , '' ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . clearDblTouchTimer = function ( ) { if ( this . dblTouchTimer === null )
return
clearTimeout ( this . dblTouchTimer )
this . dblTouchTimer = null }
MediaManager . prototype . clearDblTouchFlag = function ( ) { this . dblTouchFlag = false }
2015-04-15 21:48:16 -07:00
MediaManager . prototype . selectFirstItem = function ( ) { var firstItem = this . itemListElement . querySelector ( '[data-type="media-item"]:first-child' )
2015-08-15 09:17:30 +10:00
if ( firstItem ) { this . selectItem ( firstItem ) } }
2015-04-15 21:48:16 -07:00
MediaManager . prototype . selectRelative = function ( next , expandSelection ) { var currentSelection = this . getSelectedItems ( true , true )
if ( currentSelection . length == 0 ) { this . selectFirstItem ( )
return }
var itemToSelect = null
if ( next ) { var lastItem = currentSelection [ currentSelection . length - 1 ]
if ( lastItem )
itemToSelect = lastItem . nextElementSibling }
else { var firstItem = currentSelection [ 0 ]
if ( firstItem )
itemToSelect = firstItem . previousElementSibling }
if ( itemToSelect )
this . selectItem ( itemToSelect , expandSelection ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . gotoFolder = function ( path , resetSearch ) { var data = { path : path , resetSearch : resetSearch !== undefined ? 1 : 0 }
this . execNavigationRequest ( 'onGoToFolder' , data ) }
MediaManager . prototype . afterNavigate = function ( ) { this . scrollToTop ( )
this . generateThumbnails ( )
2015-04-15 21:48:16 -07:00
this . updateSidebarPreview ( true )
this . selectFirstItem ( )
this . updateScroll ( ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . refresh = function ( ) { var data = { path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) , clearCache : true }
this . execNavigationRequest ( 'onGoToFolder' , data ) }
MediaManager . prototype . execNavigationRequest = function ( handler , data , element )
{ if ( element === undefined )
element = this . $form
if ( this . navigationAjax !== null ) { try { this . navigationAjax . abort ( ) }
catch ( e ) { }
this . releaseNavigationAjax ( ) }
$ . oc . stripeLoadIndicator . show ( )
this . navigationAjax = element . request ( this . options . alias + '::' + handler , { data : data } ) . always ( function ( ) { $ . oc . stripeLoadIndicator . hide ( ) } ) . done ( this . proxy ( this . afterNavigate ) ) . always ( this . proxy ( this . releaseNavigationAjax ) ) }
MediaManager . prototype . releaseNavigationAjax = function ( ) { this . navigationAjax = null }
2015-04-15 21:48:16 -07:00
MediaManager . prototype . navigateToItem = function ( $item ) { if ( ! $item . length || ! $item . data ( 'path' ) . length )
return
if ( $item . data ( 'item-type' ) == 'folder' ) { if ( ! $item . data ( 'clear-search' ) )
this . gotoFolder ( $item . data ( 'path' ) )
else { this . resetSearch ( )
this . gotoFolder ( $item . data ( 'path' ) , true ) } }
2016-05-25 05:26:50 +10:00
else if ( $item . data ( 'item-type' ) == 'file' ) { this . $el . trigger ( 'popupcommand' , [ 'insert' ] ) } }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . isPreviewSidebarVisible = function ( ) { return ! this . $el . find ( '[data-control="preview-sidebar"]' ) . hasClass ( 'hide' ) }
MediaManager . prototype . toggleSidebar = function ( ev ) { var isVisible = this . isPreviewSidebarVisible ( ) , $sidebar = this . $el . find ( '[data-control="preview-sidebar"]' ) , $button = $ ( ev . target )
if ( ! isVisible ) { $sidebar . removeClass ( 'hide' )
this . updateSidebarPreview ( )
$button . removeClass ( 'sidebar-hidden' ) }
else { $sidebar . addClass ( 'hide' )
$button . addClass ( 'sidebar-hidden' ) }
this . $form . request ( this . options . alias + '::onSetSidebarVisible' , { data : { visible : ( isVisible ? 0 : 1 ) } } ) }
MediaManager . prototype . updateSidebarMediaPreview = function ( items ) { var previewPanel = this . sidebarPreviewElement , previewContainer = previewPanel . querySelector ( '[data-control="media-preview-container"]' ) , template = ''
2015-08-15 09:17:30 +10:00
for ( var i = 0 , len = previewContainer . children . length ; i < len ; i ++ ) { previewContainer . removeChild ( previewContainer . children [ i ] ) }
2015-08-08 22:52:21 +10:00
if ( items . length == 1 && ! items [ 0 ] . hasAttribute ( 'data-root' ) ) { var item = items [ 0 ] , documentType = item . getAttribute ( 'data-document-type' )
2015-04-14 22:44:45 -07:00
switch ( documentType ) { case 'audio' : template = previewPanel . querySelector ( '[data-control="audio-template"]' ) . innerHTML
break ; case 'video' : template = previewPanel . querySelector ( '[data-control="video-template"]' ) . innerHTML
break ; case 'image' : template = previewPanel . querySelector ( '[data-control="image-template"]' ) . innerHTML
break ; }
previewContainer . innerHTML = template . replace ( '{src}' , item . getAttribute ( 'data-public-url' ) ) . replace ( '{path}' , item . getAttribute ( 'data-path' ) ) . replace ( '{last-modified}' , item . getAttribute ( 'data-last-modified-ts' ) )
if ( documentType == 'image' )
this . loadSidebarThumbnail ( ) }
2015-08-08 22:52:21 +10:00
else if ( items . length == 1 && items [ 0 ] . hasAttribute ( 'data-root' ) ) { template = previewPanel . querySelector ( '[data-control="go-up"]' ) . innerHTML
previewContainer . innerHTML = template }
2015-04-14 22:44:45 -07:00
else if ( items . length == 0 ) { template = previewPanel . querySelector ( '[data-control="no-selection-template"]' ) . innerHTML
previewContainer . innerHTML = template }
else { template = previewPanel . querySelector ( '[data-control="multi-selection-template"]' ) . innerHTML
previewContainer . innerHTML = template } }
MediaManager . prototype . updateSidebarPreview = function ( resetSidebar ) { if ( ! this . sidebarPreviewElement )
this . sidebarPreviewElement = this . $el . get ( 0 ) . querySelector ( '[data-control="preview-sidebar"]' )
var items = resetSidebar === undefined ? this . $el . get ( 0 ) . querySelectorAll ( '[data-type="media-item"].selected' ) : [ ] , previewPanel = this . sidebarPreviewElement
if ( items . length == 0 ) { this . sidebarPreviewElement . querySelector ( '[data-control="sidebar-labels"]' ) . setAttribute ( 'class' , 'hide' ) }
2015-08-08 22:52:21 +10:00
else if ( items . length == 1 && ! items [ 0 ] . hasAttribute ( 'data-root' ) ) { this . sidebarPreviewElement . querySelector ( '[data-control="sidebar-labels"]' ) . setAttribute ( 'class' , 'panel' )
2015-04-14 22:44:45 -07:00
var item = items [ 0 ] , lastModified = item . getAttribute ( 'data-last-modified' )
previewPanel . querySelector ( '[data-label="size"]' ) . textContent = item . getAttribute ( 'data-size' )
previewPanel . querySelector ( '[data-label="title"]' ) . textContent = item . getAttribute ( 'data-title' )
previewPanel . querySelector ( '[data-label="last-modified"]' ) . textContent = lastModified
previewPanel . querySelector ( '[data-label="public-url"]' ) . setAttribute ( 'href' , item . getAttribute ( 'data-public-url' ) )
if ( lastModified )
previewPanel . querySelector ( '[data-control="last-modified"]' ) . setAttribute ( 'class' , '' )
else
previewPanel . querySelector ( '[data-control="last-modified"]' ) . setAttribute ( 'class' , 'hide' )
if ( this . isSearchMode ( ) ) { previewPanel . querySelector ( '[data-control="item-folder"]' ) . setAttribute ( 'class' , '' )
var folderNode = previewPanel . querySelector ( '[data-label="folder"]' )
folderNode . textContent = item . getAttribute ( 'data-folder' )
2015-08-15 09:17:30 +10:00
folderNode . setAttribute ( 'data-path' , item . getAttribute ( 'data-folder' ) ) }
else { previewPanel . querySelector ( '[data-control="item-folder"]' ) . setAttribute ( 'class' , 'hide' ) } }
2015-04-14 22:44:45 -07:00
else { this . sidebarPreviewElement . querySelector ( '[data-control="sidebar-labels"]' ) . setAttribute ( 'class' , 'hide' ) }
this . updateSidebarMediaPreview ( items ) }
MediaManager . prototype . loadSidebarThumbnail = function ( ) { if ( this . sidebarThumbnailAjax ) { try { this . sidebarThumbnailAjax . abort ( ) }
catch ( e ) { }
this . sidebarThumbnailAjax = null }
var sidebarThumbnail = this . sidebarPreviewElement . querySelector ( '[data-control="sidebar-thumbnail"]' )
if ( ! sidebarThumbnail )
return
var data = { path : sidebarThumbnail . getAttribute ( 'data-path' ) , lastModified : sidebarThumbnail . getAttribute ( 'data-last-modified' ) }
this . sidebarThumbnailAjax = this . $form . request ( this . options . alias + '::onGetSidebarThumbnail' , { data : data } ) . done ( this . proxy ( this . replaceSidebarPlaceholder ) ) . always ( this . proxy ( this . releaseSidebarThumbnailAjax ) ) }
MediaManager . prototype . replaceSidebarPlaceholder = function ( response ) { if ( ! this . sidebarPreviewElement )
return
var sidebarThumbnail = this . sidebarPreviewElement . querySelector ( '[data-control="sidebar-thumbnail"]' )
if ( ! sidebarThumbnail )
return
if ( ! response . markup )
return
sidebarThumbnail . innerHTML = response . markup
sidebarThumbnail . removeAttribute ( 'data-loading' ) }
MediaManager . prototype . releaseSidebarThumbnailAjax = function ( ) { this . sidebarThumbnailAjax = null }
MediaManager . prototype . generateThumbnails = function ( ) { this . thumbnailQueue = [ ]
var placeholders = this . itemListElement . querySelectorAll ( '[data-type="media-item"] div.image-placeholder' )
for ( var i = ( placeholders . length - 1 ) ; 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 ; i < maxThumbnailQueueLength && this . thumbnailQueue . length > 0 ; i ++ ) { var batch = [ ]
for ( var j = 0 ; j < maxThumbnailBatchLength && this . thumbnailQueue . length > 0 ; 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 < len ; i ++ ) { var placeholder = document . getElementById ( batch [ i ] . id )
if ( placeholder )
placeholder . setAttribute ( 'data-loading' , 'true' ) }
var promise = this . $form . request ( this . options . alias + '::onGenerateThumbnails' , { data : data } )
promise . done ( this . proxy ( this . replacePlaceholder ) )
return promise }
MediaManager . prototype . replacePlaceholder = function ( response ) { if ( ! response . generatedThumbnails )
return
for ( var i = 0 , len = response . generatedThumbnails . length ; i < len ; i ++ ) { var thumbnailInfo = response . generatedThumbnails [ i ]
if ( ! thumbnailInfo . id || ! thumbnailInfo . markup )
continue
var node = document . getElementById ( thumbnailInfo . id )
if ( ! node )
continue
var placeholderContainer = node . parentNode
if ( placeholderContainer )
placeholderContainer . innerHTML = thumbnailInfo . markup } }
MediaManager . prototype . placeholdersUpdated = function ( ) { this . activeThumbnailQueueLength --
this . handleThumbnailQueue ( ) }
MediaManager . prototype . getRelativePosition = function ( element , pageX , pageY , startPosition ) { var absolutePosition = startPosition !== undefined ? startPosition : $ . oc . foundation . element . absolutePosition ( element , true )
return { x : ( pageX - absolutePosition . left ) , y : ( pageY - absolutePosition . top + this . scrollContentElement . scrollTop ) } }
MediaManager . prototype . createSelectionMarker = function ( ) { if ( this . selectionMarker )
return
this . selectionMarker = document . createElement ( 'div' )
this . selectionMarker . setAttribute ( 'data-control' , 'selection-marker' )
this . scrollContentElement . insertBefore ( this . selectionMarker , this . scrollContentElement . firstChild ) }
MediaManager . prototype . doObjectsCollide = function ( aTop , aLeft , aWidth , aHeight , bTop , bLeft , bWidth , bHeight ) { return ! ( ( ( aTop + aHeight ) < ( bTop ) ) || ( aTop > ( bTop + bHeight ) ) || ( ( aLeft + aWidth ) < bLeft ) || ( aLeft > ( bLeft + bWidth ) ) ) }
2018-04-19 10:23:15 -06:00
MediaManager . prototype . initUploader = function ( ) { if ( ! this . itemListElement || this . options . readOnly )
2015-04-14 22:44:45 -07:00
return
2020-01-15 06:47:25 +08:00
var uploaderOptions = { clickable : this . $el . find ( '[data-control="upload"]' ) . get ( 0 ) , url : this . options . url , paramName : 'file_data' , timeout : 0 , headers : { } , createImageThumbnails : false }
2016-03-25 16:11:01 +11:00
if ( this . options . uniqueId ) { uploaderOptions . headers [ 'X-OCTOBER-FILEUPLOAD' ] = this . options . uniqueId }
var token = $ ( 'meta[name="csrf-token"]' ) . attr ( 'content' )
if ( token ) { uploaderOptions . headers [ 'X-CSRF-TOKEN' ] = token }
2015-04-14 22:44:45 -07:00
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 ) )
2015-10-14 20:36:48 +03:00
this . dropzone . on ( 'error' , this . proxy ( this . uploadError ) )
this . dropzone . on ( 'success' , this . proxy ( this . uploadSuccess ) ) }
2015-04-14 22:44:45 -07:00
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
2015-10-17 12:44:16 +11:00
if ( uploadProgress >= 100 ) { uploadProgress = 99 }
2015-04-14 22:44:45 -07:00
fileNumberLabel . innerHTML = messageTemplate . replace ( ':number' , fileNumber ) . replace ( ':percents' , Math . round ( uploadProgress ) + '%' ) }
2015-10-17 12:17:10 +11:00
MediaManager . prototype . setUploadProgress = function ( value ) { var progressBar = this . $el . get ( 0 ) . querySelector ( '[data-control="upload-progress-bar"]' )
progressBar . setAttribute ( 'style' , 'width: ' + value + '%' )
progressBar . setAttribute ( 'class' , 'progress-bar' ) }
2015-10-14 20:36:48 +03:00
MediaManager . prototype . uploadQueueComplete = function ( ) { this . $el . find ( '[data-command="cancel-uploading"]' ) . addClass ( 'hide' )
2015-04-14 22:44:45 -07:00
this . $el . find ( '[data-command="close-uploader"]' ) . removeClass ( 'hide' )
this . refresh ( ) }
2016-03-25 16:11:01 +11:00
MediaManager . prototype . uploadSending = function ( file , xhr , formData ) { formData . append ( 'path' , this . $el . find ( '[data-type="current-folder"]' ) . val ( ) ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . uploadCancelAll = function ( ) { this . dropzone . removeAllFiles ( true )
this . hideUploadUi ( ) }
2015-10-17 12:17:10 +11:00
MediaManager . prototype . updateUploadBar = function ( templateName , classNames ) { var fileNumberLabel = this . $el . get ( 0 ) . querySelector ( '[data-label="file-number-and-progress"]' ) , successTemplate = fileNumberLabel . getAttribute ( 'data-' + templateName + '-template' ) , progressBar = this . $el . get ( 0 ) . querySelector ( '[data-control="upload-progress-bar"]' )
fileNumberLabel . innerHTML = successTemplate ; progressBar . setAttribute ( 'class' , classNames ) }
2015-10-14 20:36:48 +03:00
MediaManager . prototype . uploadSuccess = function ( ) { this . updateUploadBar ( 'success' , 'progress-bar progress-bar-success' ) ; }
2017-04-09 08:00:38 +10:00
MediaManager . prototype . uploadError = function ( file , message ) { this . updateUploadBar ( 'error' , 'progress-bar progress-bar-danger' ) ; if ( ! message ) { message = 'Error uploading file' }
$ . oc . alert ( message ) }
2015-04-14 22:44:45 -07:00
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 } ) }
2015-08-08 11:17:56 +10:00
MediaManager . prototype . onImageCropped = function ( result ) { this . $el . trigger ( 'popupcommand' , [ 'insert-cropped' , result ] ) }
2015-04-14 22:44:45 -07:00
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' )
2015-08-22 13:48:53 +10:00
if ( ! items . length ) { $ . oc . alert ( this . options . deleteEmpty )
2015-04-14 22:44:45 -07:00
return }
2015-08-22 13:48:53 +10:00
$ . oc . confirm ( this . options . deleteConfirm , this . proxy ( this . deleteConfirmation ) ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . deleteConfirmation = function ( confirmed ) { if ( ! confirmed )
return
var items = this . $el . get ( 0 ) . querySelectorAll ( '[data-type="media-item"].selected' ) , paths = [ ]
2017-05-14 19:34:50 -06:00
for ( var i = 0 , len = items . length ; i < len ; i ++ ) { if ( items [ i ] . hasAttribute ( 'data-root' ) ) { continue ; }
paths . push ( { 'path' : items [ i ] . getAttribute ( 'data-path' ) , 'type' : items [ i ] . getAttribute ( 'data-item-type' ) } ) }
2015-04-14 22:44:45 -07:00
var data = { paths : paths }
$ . oc . stripeLoadIndicator . show ( )
2016-05-12 04:31:29 +10:00
this . $form . request ( this . options . alias + '::onDeleteItem' , { data : data } ) . always ( function ( ) { $ . oc . stripeLoadIndicator . hide ( ) } ) . done ( this . proxy ( this . afterNavigate ) ) }
2015-04-14 22:44:45 -07:00
MediaManager . prototype . createFolder = function ( ev ) { $ ( ev . target ) . popup ( { content : this . $el . find ( '[data-control="new-folder-template"]' ) . html ( ) , zIndex : 1200 } ) }
MediaManager . prototype . onFolderPopupShown = function ( ev , button , popup ) { $ ( popup ) . find ( 'input[name=name]' ) . focus ( )
$ ( popup ) . on ( 'submit.media' , 'form' , this . proxy ( this . onNewFolderSubmit ) ) }
MediaManager . prototype . onFolderPopupHidden = function ( ev , button , popup ) { $ ( popup ) . off ( '.media' , 'form' ) }
MediaManager . prototype . onNewFolderSubmit = function ( ev ) { var data = { name : $ ( ev . target ) . find ( 'input[name=name]' ) . val ( ) , path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) }
$ . oc . stripeLoadIndicator . show ( )
this . $form . request ( this . options . alias + '::onCreateFolder' , { data : data } ) . always ( function ( ) { $ . oc . stripeLoadIndicator . hide ( ) } ) . done ( this . proxy ( this . folderCreated ) )
ev . preventDefault ( )
return false }
MediaManager . prototype . folderCreated = function ( ) { this . $el . find ( 'button[data-command="create-folder"]' ) . popup ( 'hide' )
this . afterNavigate ( ) }
MediaManager . prototype . moveItems = function ( ev ) { var items = this . $el . get ( 0 ) . querySelectorAll ( '[data-type="media-item"].selected' )
2015-08-22 13:48:53 +10:00
if ( ! items . length ) { $ . oc . alert ( this . options . moveEmpty )
2015-04-14 22:44:45 -07:00
return }
var data = { exclude : [ ] , path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) }
for ( var i = 0 , len = items . length ; i < len ; i ++ ) { var item = items [ i ] , path = item . getAttribute ( 'data-path' )
if ( item . getAttribute ( 'data-item-type' ) == 'folder' )
data . exclude . push ( path ) }
$ ( ev . target ) . popup ( { handler : this . options . alias + '::onLoadMovePopup' , extraData : data , zIndex : 1200 } ) }
MediaManager . prototype . onMovePopupShown = function ( ev , button , popup ) { $ ( popup ) . on ( 'submit.media' , 'form' , this . proxy ( this . onMoveItemsSubmit ) ) }
MediaManager . prototype . onMoveItemsSubmit = function ( ev ) { var items = this . $el . get ( 0 ) . querySelectorAll ( '[data-type="media-item"].selected' ) , data = { dest : $ ( ev . target ) . find ( 'select[name=dest]' ) . val ( ) , originalPath : $ ( ev . target ) . find ( 'input[name=originalPath]' ) . val ( ) , files : [ ] , folders : [ ] }
for ( var i = 0 , len = items . length ; i < len ; i ++ ) { var item = items [ i ] , path = item . getAttribute ( 'data-path' )
if ( item . getAttribute ( 'data-item-type' ) == 'folder' )
data . folders . push ( path )
else
data . files . push ( path ) }
$ . oc . stripeLoadIndicator . show ( )
this . $form . request ( this . options . alias + '::onMoveItems' , { data : data } ) . always ( function ( ) { $ . oc . stripeLoadIndicator . hide ( ) } ) . done ( this . proxy ( this . itemsMoved ) )
ev . preventDefault ( )
return false }
MediaManager . prototype . onMovePopupHidden = function ( ev , button , popup ) { $ ( popup ) . off ( '.media' , 'form' ) }
MediaManager . prototype . itemsMoved = function ( ) { this . $el . find ( 'button[data-command="move"]' ) . popup ( 'hide' )
this . afterNavigate ( ) }
MediaManager . prototype . onNavigate = function ( ev ) { var $item = $ ( ev . target ) . closest ( '[data-type="media-item"]' )
2015-04-15 21:48:16 -07:00
this . navigateToItem ( $item )
if ( $ ( ev . target ) . data ( 'label' ) != 'public-url' )
2015-04-14 22:44:45 -07:00
return false }
MediaManager . prototype . onCommandClick = function ( ev ) { var command = $ ( ev . currentTarget ) . data ( 'command' )
switch ( command ) { case 'refresh' : this . refresh ( )
break ; case 'change-view' : this . changeView ( $ ( ev . currentTarget ) . data ( 'view' ) )
break ; case 'cancel-uploading' : this . uploadCancelAll ( )
break ; case 'close-uploader' : this . hideUploadUi ( )
break ; case 'set-filter' : this . setFilter ( $ ( ev . currentTarget ) . data ( 'filter' ) )
break ; case 'delete' : this . deleteItems ( )
break ; case 'create-folder' : this . createFolder ( ev )
break ; case 'move' : this . moveItems ( ev )
break ; case 'toggle-sidebar' : this . toggleSidebar ( ev )
break ; case 'popup-command' : var popupCommand = $ ( ev . currentTarget ) . data ( 'popup-command' )
if ( popupCommand !== 'crop-and-insert' )
this . $el . trigger ( 'popupcommand' , [ popupCommand ] )
else
this . cropSelectedImage ( this . proxy ( this . onImageCropped ) )
break ; }
return false }
2015-08-15 09:17:30 +10:00
MediaManager . prototype . onItemClick = function ( ev ) { if ( ev . target . tagName == 'I' && ev . target . hasAttribute ( 'data-rename-control' ) )
2015-04-14 22:44:45 -07:00
return
this . selectItem ( ev . currentTarget , ev . shiftKey ) }
2017-01-11 20:00:23 -08:00
MediaManager . prototype . onItemTouch = function ( ev ) { ev . preventDefault ( )
ev . stopPropagation ( )
2015-04-14 22:44:45 -07:00
if ( this . dblTouchFlag ) { this . onNavigate ( ev )
this . dblTouchFlag = null }
2017-01-11 20:00:23 -08:00
else { this . onItemClick ( ev )
this . dblTouchFlag = true }
2015-04-14 22:44:45 -07:00
this . clearDblTouchTimer ( )
this . dblTouchTimer = setTimeout ( this . proxy ( this . clearDblTouchFlag ) , 300 ) }
MediaManager . prototype . onListMouseDown = function ( ev ) { this . itemListElement . addEventListener ( 'mousemove' , this . proxy ( this . onListMouseMove ) )
document . addEventListener ( 'mouseup' , this . proxy ( this . onListMouseUp ) )
this . itemListPosition = $ . oc . foundation . element . absolutePosition ( this . itemListElement , true )
var pagePosition = $ . oc . foundation . event . pageCoordinates ( ev ) , relativePosition = this . getRelativePosition ( this . itemListElement , pagePosition . x , pagePosition . y , this . itemListPosition )
this . selectionStartPoint = relativePosition
this . selectionStarted = false }
MediaManager . prototype . onListMouseUp = function ( ev ) { this . itemListElement . removeEventListener ( 'mousemove' , this . proxy ( this . onListMouseMove ) )
document . removeEventListener ( 'mouseup' , this . proxy ( this . onListMouseUp ) )
$ ( document . body ) . removeClass ( 'no-select' )
2015-04-19 11:19:36 -07:00
if ( this . selectionStarted ) { this . unselectRoot ( )
var items = this . itemListElement . querySelectorAll ( '[data-type="media-item"]:not([data-root])' ) , selectionPosition = $ . oc . foundation . element . absolutePosition ( this . selectionMarker , true )
2015-04-14 22:44:45 -07:00
for ( var index = 0 , len = items . length ; index < len ; index ++ ) { var item = items [ index ] , itemPosition = $ . oc . foundation . element . absolutePosition ( item , true )
if ( this . doObjectsCollide ( selectionPosition . top , selectionPosition . left , this . selectionMarker . offsetWidth , this . selectionMarker . offsetHeight , itemPosition . top , itemPosition . left , item . offsetWidth , item . offsetHeight ) ) { if ( ! ev . shiftKey )
item . setAttribute ( 'class' , 'selected' )
else { if ( item . getAttribute ( 'class' ) == 'selected' )
item . setAttribute ( 'class' , '' )
else
item . setAttribute ( 'class' , 'selected' ) } }
else if ( ! ev . shiftKey )
item . setAttribute ( 'class' , '' ) }
this . updateSidebarPreview ( )
this . selectionMarker . setAttribute ( 'class' , 'hide' ) }
this . selectionStarted = false }
MediaManager . prototype . onListMouseMove = function ( ev ) { var pagePosition = $ . oc . foundation . event . pageCoordinates ( ev ) , relativePosition = this . getRelativePosition ( this . itemListElement , pagePosition . x , pagePosition . y , this . itemListPosition )
var deltaX = relativePosition . x - this . selectionStartPoint . x , deltaY = relativePosition . y - this . selectionStartPoint . y
if ( ! this . selectionStarted && ( Math . abs ( deltaX ) > 2 || 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' } } }
2017-08-05 18:11:40 -06:00
MediaManager . prototype . onSortingChanged = function ( ev ) { var $target = $ ( ev . target ) , data = { path : this . $el . find ( '[data-type="current-folder"]' ) . val ( ) }
if ( $target . data ( 'sort' ) == 'by' ) { data . sortBy = $target . val ( ) ; } else if ( $target . data ( 'sort' ) == 'direction' ) { data . sortDirection = $target . val ( ) }
2015-04-14 22:44:45 -07:00
this . execNavigationRequest ( 'onSetSorting' , data ) }
MediaManager . prototype . onKeyDown = function ( ev ) { var eventHandled = false
2019-09-11 21:42:02 +10:00
switch ( ev . key ) { case 'Enter' : var items = this . getSelectedItems ( true , true )
2015-04-15 21:48:16 -07:00
if ( items . length > 0 )
this . navigateToItem ( $ ( items [ 0 ] ) )
eventHandled = true
2019-09-11 21:42:02 +10:00
break ; case 'ArrowRight' : case 'ArrowDown' : this . selectRelative ( true , ev . shiftKey )
2015-04-15 21:48:16 -07:00
eventHandled = true
2019-09-11 21:42:02 +10:00
break ; case 'ArrowLeft' : case 'ArrowUp' : this . selectRelative ( false , ev . shiftKey )
2015-04-15 21:48:16 -07:00
eventHandled = true
break ; }
2015-04-14 22:44:45 -07:00
if ( eventHandled ) { ev . preventDefault ( )
ev . stopPropagation ( ) } }
2016-05-08 17:43:21 +10:00
MediaManager . DEFAULTS = { url : window . location , alias : '' , uniqueId : null , deleteEmpty : 'Please select files to delete.' , deleteConfirm : '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 }
2015-04-14 22:44:45 -07:00
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 = $ ( '<div/>' )
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 ( )
2015-08-08 11:17:56 +10:00
if ( this . options . onDone !== undefined ) { this . options . onDone ( response ) } }
2015-04-14 22:44:45 -07:00
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 = $ ( '<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' , '' )
2016-06-02 06:52:27 +10:00
this . selectionSizeLabel . querySelector ( '[data-label=selection-width]' ) . textContent = parseInt ( width )
this . selectionSizeLabel . querySelector ( '[data-label=selection-height]' ) . textContent = parseInt ( height ) }
2015-04-14 22:44:45 -07:00
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 ( )
2016-06-02 06:52:27 +10:00
this . initJCrop ( )
this . applySelectionMode ( ) }
2015-04-14 22:44:45 -07:00
MediaManagerImageCropPopup . prototype . onSelectionModeChanged = function ( ) { var mode = this . getSelectionMode ( ) , $widthInput = this . getWidthInput ( ) , $heightInput = this . getHeightInput ( )
if ( mode === 'normal' ) { $widthInput . attr ( 'disabled' , 'disabled' )
2015-08-08 11:17:56 +10:00
$heightInput . attr ( 'disabled' , 'disabled' ) }
else { $widthInput . removeAttr ( 'disabled' )
2015-04-14 22:44:45 -07:00
$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 }
2017-05-20 20:00:24 +10:00
$ . oc . mediaManager . imageCropPopup = MediaManagerImageCropPopup } ( window . jQuery ) ;