From b90251cb3fb47f4e460dc13aa309cb476b31627b Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Thu, 14 Jan 2021 04:56:33 +1000 Subject: [PATCH 1/5] Add Multiple Media Form Field --- base/inc/fields/css/multiple-media-field.less | 84 ++++++++++++ base/inc/fields/js/multiple-media-field.js | 129 ++++++++++++++++++ base/inc/fields/multiple-media.class.php | 122 +++++++++++++++++ 3 files changed, 335 insertions(+) create mode 100644 base/inc/fields/css/multiple-media-field.less create mode 100644 base/inc/fields/js/multiple-media-field.js create mode 100644 base/inc/fields/multiple-media.class.php 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..16cc0c6f8 --- /dev/null +++ b/base/inc/fields/css/multiple-media-field.less @@ -0,0 +1,84 @@ +@import "../../../less/mixins"; + +.siteorigin-widget-form .siteorigin-widget-field-type-multiple-media { + + .multiple-media-field-wrapper { + + * { + box-sizing: content-box; + } + + .media-upload-button { + background: #f9f9f9; + background: linear-gradient(to bottom, #f2f2f2, #f9f9f9); + border: 1px solid #bbb; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + cursor: pointer; + color: #666; + display: inline-block; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f2f2f2', GradientType=0); + font-size: 11px; + font-weight: 600; + .rounded(2px); + line-height: 32px; + padding: 0 8px; + text-decoration: none; + text-shadow: 0 1px 0 #fff; + + &:hover { + background: rgba(255, 255, 255, 0.75); + } + } + + .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..c462ad5e8 --- /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( '.media-upload-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..cacdf9b7e --- /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 ); + } + ?> +
+
+ +
+ + + + +
+ + Date: Mon, 8 Feb 2021 18:36:51 +1000 Subject: [PATCH 2/5] Correct typo --- base/inc/fields/css/multiple-media-field.less | 2 +- base/inc/fields/js/multiple-media-field.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/base/inc/fields/css/multiple-media-field.less b/base/inc/fields/css/multiple-media-field.less index 16cc0c6f8..d3e93666a 100644 --- a/base/inc/fields/css/multiple-media-field.less +++ b/base/inc/fields/css/multiple-media-field.less @@ -1,6 +1,6 @@ @import "../../../less/mixins"; -.siteorigin-widget-form .siteorigin-widget-field-type-multiple-media { +.siteorigin-widget-form .siteorigin-widget-field-type-multiple_media { .multiple-media-field-wrapper { diff --git a/base/inc/fields/js/multiple-media-field.js b/base/inc/fields/js/multiple-media-field.js index c462ad5e8..74af0bf00 100644 --- a/base/inc/fields/js/multiple-media-field.js +++ b/base/inc/fields/js/multiple-media-field.js @@ -2,7 +2,7 @@ ( function( $ ) { - $( document ).on( 'sowsetupformfield', '.siteorigin-widget-field-type-multiple-media', function( e ) { + $( document ).on( 'sowsetupformfield', '.siteorigin-widget-field-type-multiple_media', function( e ) { var $field = $( this ), $data = $field.find( '.siteorigin-widget-input' ), selectedMedia = $data.val().split( ',' ); From 127035bcdbd7edc4c938db2851ed04ef2888c036 Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Wed, 10 Feb 2021 04:13:02 +1000 Subject: [PATCH 3/5] Multiple Media: Use standard WP Button styling Media Button --- base/inc/fields/css/multiple-media-field.less | 22 ------------------- base/inc/fields/js/multiple-media-field.js | 2 +- base/inc/fields/multiple-media.class.php | 2 +- 3 files changed, 2 insertions(+), 24 deletions(-) diff --git a/base/inc/fields/css/multiple-media-field.less b/base/inc/fields/css/multiple-media-field.less index d3e93666a..8aa3e880f 100644 --- a/base/inc/fields/css/multiple-media-field.less +++ b/base/inc/fields/css/multiple-media-field.less @@ -8,28 +8,6 @@ box-sizing: content-box; } - .media-upload-button { - background: #f9f9f9; - background: linear-gradient(to bottom, #f2f2f2, #f9f9f9); - border: 1px solid #bbb; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - cursor: pointer; - color: #666; - display: inline-block; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f2f2f2', GradientType=0); - font-size: 11px; - font-weight: 600; - .rounded(2px); - line-height: 32px; - padding: 0 8px; - text-decoration: none; - text-shadow: 0 1px 0 #fff; - - &:hover { - background: rgba(255, 255, 255, 0.75); - } - } - .multiple-media-field-items { line-height: 18.2px; overflow: auto; diff --git a/base/inc/fields/js/multiple-media-field.js b/base/inc/fields/js/multiple-media-field.js index 74af0bf00..f28c2d568 100644 --- a/base/inc/fields/js/multiple-media-field.js +++ b/base/inc/fields/js/multiple-media-field.js @@ -12,7 +12,7 @@ } // Handle the media uploader - $field.find( '.media-upload-button' ).on( 'click', function( e ) { + $field.find( '.button' ).on( 'click', function( e ) { e.preventDefault(); if( typeof wp.media === 'undefined' ) { return; diff --git a/base/inc/fields/multiple-media.class.php b/base/inc/fields/multiple-media.class.php index cacdf9b7e..940f86463 100644 --- a/base/inc/fields/multiple-media.class.php +++ b/base/inc/fields/multiple-media.class.php @@ -51,7 +51,7 @@ protected function render_field( $attachments, $instance ) { } ?>
- choose ); ?> From 0dd27398b17693ffe293cbcdf4db04eb8ed06639 Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Fri, 5 Mar 2021 18:12:08 +1000 Subject: [PATCH 4/5] Spacing --- base/inc/fields/js/multiple-media-field.js | 8 ++++---- base/inc/fields/multiple-media.class.php | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/base/inc/fields/js/multiple-media-field.js b/base/inc/fields/js/multiple-media-field.js index f28c2d568..4e6e38197 100644 --- a/base/inc/fields/js/multiple-media-field.js +++ b/base/inc/fields/js/multiple-media-field.js @@ -14,7 +14,7 @@ // Handle the media uploader $field.find( '.button' ).on( 'click', function( e ) { e.preventDefault(); - if( typeof wp.media === 'undefined' ) { + if ( typeof wp.media === 'undefined' ) { return; } @@ -31,11 +31,11 @@ frame = wp.media( { title: $$.data( 'choose' ), library: { - type: $$.data( 'library' ).split( ',' ).map( function( v ){ return v.trim(); }) + type: $$.data( 'library' ).split( ',' ).map( function( v ) { return v.trim(); } ) }, multiple: true, button: { - text: $$.data('update'), + text: $$.data( 'update' ), close: false } } ); @@ -124,6 +124,6 @@ } ); $field.data( 'initialized', true ); - }); + } ); } )( jQuery ); diff --git a/base/inc/fields/multiple-media.class.php b/base/inc/fields/multiple-media.class.php index 940f86463..862a5c41d 100644 --- a/base/inc/fields/multiple-media.class.php +++ b/base/inc/fields/multiple-media.class.php @@ -46,7 +46,7 @@ protected function render_field( $attachments, $instance ) { } // If library is set to all, convert it to a wildcard as all isn't valid - if( $this->library == 'all' ){ + if ( $this->library == 'all' ) { $this->library = '*'; } ?> @@ -89,7 +89,7 @@ protected function render_field( $attachments, $instance ) {