diff --git a/base/inc/fields/css/multiple-media-field.less b/base/inc/fields/css/multiple-media-field.less new file mode 100644 index 000000000..8aa3e880f --- /dev/null +++ b/base/inc/fields/css/multiple-media-field.less @@ -0,0 +1,62 @@ +@import "../../../less/mixins"; + +.siteorigin-widget-form .siteorigin-widget-field-type-multiple_media { + + .multiple-media-field-wrapper { + + * { + box-sizing: content-box; + } + + .multiple-media-field-items { + line-height: 18.2px; + overflow: auto; + } + + .multiple-media-field-item { + .box-sizing(border-box); + float: left; + padding: 4px; + position: relative; + margin: 5px 0; + + .thumbnail { + border: 1px solid #999; + box-shadow: 0px 1px 1px #fff; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); + height: 75px; + .gradient(#cfcfcf, #cccccc, #cfcfcf); + line-height: 0; + width: 75px; + } + + .title { + display: none; + } + + .media-remove-button { + color: #aaa; + display: block; + font-size: 11px; + line-height: 1em; + opacity: 1; + text-align: center; + text-decoration: none; + .transition(0.25s); + + &.remove-hide { + opacity: 0; + pointer-events: none; + } + + &:hover { + color: #bc0b0b; + } + } + } + } + + .media-field-template { + display: none; + } +} diff --git a/base/inc/fields/js/multiple-media-field.js b/base/inc/fields/js/multiple-media-field.js new file mode 100644 index 000000000..4e6e38197 --- /dev/null +++ b/base/inc/fields/js/multiple-media-field.js @@ -0,0 +1,129 @@ +/* global jQuery, soWidgets */ + +( function( $ ) { + + $( document ).on( 'sowsetupformfield', '.siteorigin-widget-field-type-multiple_media', function( e ) { + var $field = $( this ), + $data = $field.find( '.siteorigin-widget-input' ), + selectedMedia = $data.val().split( ',' ); + + if ( $field.data( 'initialized' ) ) { + return; + } + + // Handle the media uploader + $field.find( '.button' ).on( 'click', function( e ) { + e.preventDefault(); + if ( typeof wp.media === 'undefined' ) { + return; + } + + var $$ = $( this ); + var frame = $( this ).data( 'frame' ); + + // If the media frame already exists, reopen it. + if ( frame ) { + frame.open(); + return false; + } + + // Create the media frame. + frame = wp.media( { + title: $$.data( 'choose' ), + library: { + type: $$.data( 'library' ).split( ',' ).map( function( v ) { return v.trim(); } ) + }, + multiple: true, + button: { + text: $$.data( 'update' ), + close: false + } + } ); + + // If there's a selected image, highlight it. + frame.on( 'open', function() { + if ( selectedMedia.length ) { + var selection = frame.state().get( 'selection' ); + + $.each( selectedMedia, function() { + selection.add( wp.media.attachment( this ) ); + } ); + } + } ); + + // Store the frame + $$.data( 'frame', frame ); + + // When an image is selected, run a callback. + frame.on( 'select', function() { + var attachmentIds = [], + attachment, + attachmentUrl, + $currentItem, + $thumbnail; + + $.each( frame.state().get('selection').models, function() { + attachment = this.attributes; + + // Don't process images that already exist. + if ( selectedMedia.indexOf( attachment.id.toString() ) == -1 ) { + $field.find( '.multiple-media-field-template .multiple-media-field-item' ).clone().appendTo( $field.find( '.multiple-media-field-items' ) ); + $currentItem = $field.find( '.multiple-media-field-items .multiple-media-field-item' ).last(); + + $thumbnail = $currentItem.find( '.thumbnail' ); + $thumbnail.attr( 'title', attachment.title ); + + $currentItem.attr( 'data-id', attachment.id ); + + if ( typeof attachment.sizes !== 'undefined' ) { + if ( typeof attachment.sizes.thumbnail !== 'undefined' ) { + attachmentUrl = attachment.sizes.thumbnail.url; + } else { + attachmentUrl = attachment.sizes.full.url; + } + } else{ + attachmentUrl = attachment.icon; + } + $thumbnail.attr( 'src', attachmentUrl ); + } + + attachmentIds.push( attachment.id ); + } ); + + // Remove any no longer selected images + $field.find( '.multiple-media-field-items .multiple-media-field-item' ).each( function() { + if ( attachmentIds.indexOf( $( this ).data( 'id' ) ) == -1 ) { + $( this ).remove(); + } + } ) + + // Store image data. + if ( attachmentIds.length ) { + selectedMedia = attachmentIds; + $data.val( attachmentIds.join( ',' ) ); + } else { + selectedMedia = []; + $data.val( '' ); + } + + frame.close(); + } ); + + // Finally, open the modal. + frame.open(); + }); + + $field.find( 'a.media-remove-button' ).on( 'click', function( e ) { + e.preventDefault(); + var $currentItem = $( this ).parent(); + + selectedMedia.splice( selectedMedia.indexOf( $currentItem.data( 'id' ) ) ); + $data.val( selectedMedia.join( ',' ) ); + + $currentItem.remove(); + } ); + + $field.data( 'initialized', true ); + } ); + +} )( jQuery ); diff --git a/base/inc/fields/multiple-media.class.php b/base/inc/fields/multiple-media.class.php new file mode 100644 index 000000000..a64680183 --- /dev/null +++ b/base/inc/fields/multiple-media.class.php @@ -0,0 +1,122 @@ + __( 'Add Media', 'so-widgets-bundle' ), + 'update' => __( 'Set Media', 'so-widgets-bundle' ), + 'library' => 'image' + ); + } + + protected function render_field( $attachments, $instance ) { + if ( version_compare( get_bloginfo('version'), '3.5', '<' ) ){ + printf( __( 'You need to upgrade to WordPress 3.5 to use media fields', 'so-widgets-bundle'), admin_url('update-core.php' ) ); + return; + } + + // If library is set to all, convert it to a wildcard as all isn't valid + if ( $this->library == 'all' ) { + $this->library = '*'; + } + ?> +
+ + choose ); ?> + + + +
+ +
+ + +
+ post_title ); + } + ?> +
+
+ +
+ + + + +
+ +