diff --git a/init.php b/init.php index a678c75..429a94f 100644 --- a/init.php +++ b/init.php @@ -179,7 +179,7 @@ public function render( $field, $escaped_value, $object_id, $object_type, $field // Open our attached posts list echo '
'; - echo '

' . sprintf( __( 'Attached %s', 'cmb' ), $post_type_labels ) . '

'; + echo '

' . sprintf( __( 'Attached %s', 'cmb' ), $post_type_labels ) . '

'; if ( $filter_boxes ) { printf( $filter_boxes, 'attached-search' ); diff --git a/js/attached-posts.js b/js/attached-posts.js index 02e4b16..8fd0c21 100755 --- a/js/attached-posts.js +++ b/js/attached-posts.js @@ -14,6 +14,46 @@ window.CMBAP = window.CMBAP || {}; app.doType = $wrap.find( '.object-label' ).length; }; + // Helper function to determine whteher we have exceeded our limit or not. + app._hasExceeded = function ($wrap) { + var $input = app.getPostIdsInput($wrap); + var maxItems = $input.data('max-items'); + var currentNumberItems = app.getPostIdsVal($input).length; + + return (typeof maxItems !== "undefined") && currentNumberItems >= maxItems; + }; + + // Make sure we cannot attach more posts than we would like. + app.updateReadOnly = function ($wrap) { + + // If we have exceeded our limit, then ensure the user cannot attach more items. + // If we haven't, make sure the user can attach items. + if (app._hasExceeded($wrap)) { + // Also ensure items aren't draggable + // @see https://stackoverflow.com/questions/1324044/how-do-i-disable-a-jquery-ui-draggable + // app.$retrievedPosts().draggable('disable'); + $wrap.find('.attached').droppable("option", "accept", ".doesnotexist"); + } else { + // app.$retrievedPosts().draggable('enable'); + $wrap.find('.attached').droppable("option", "accept", ".retrieved li"); + } + }; + + app.updateRemaining = function ($wrap) { + var $input = app.getPostIdsInput($wrap); + var currentNumberItems = app.getPostIdsVal($input).length; + var maxItems = $input.data('max-items'); + var $remainingLabel = $wrap.find('.attached-posts-remaining'); + var $remainingNumberLabel = $remainingLabel.find('.attached-posts-remaining-number'); + var remainingNumber = 0; + if (typeof maxItems !== "undefined") { + // How many can we add? + remainingNumber = maxItems - currentNumberItems; + // Show the label and update the number inside + $remainingLabel.removeClass("hidden"); + $remainingNumberLabel.html(remainingNumber); + } + }; app.init = function() { app.cache(); @@ -23,6 +63,14 @@ window.CMBAP = window.CMBAP || {}; // Allow the right list to be droppable and sortable app.makeDroppable(); + + $(".attached-posts-wrap").each(function () { + // Update whether or not the lists should be editable by the user. This is usually when a user has attached too many items. + app.updateReadOnly($(this)); + + app.updateRemaining($(this)) + }); + $( '.cmb2-wrap > .cmb2-metabox' ) // Add posts when the plus icon is clicked .on( 'click', '.attached-posts-wrap .retrieved .add-remove', app._moveRowToAttached ) @@ -75,6 +123,8 @@ window.CMBAP = window.CMBAP || {}; item.clone().appendTo( $wrap.find( '.attached' ) ); app.resetAttachedListItems( $wrap ); + app.updateRemaining($wrap); + }; // Add the items when the plus icon is clicked @@ -87,6 +137,10 @@ window.CMBAP = window.CMBAP || {}; var itemID = $li.data( 'id' ); var $wrap = $li.parents( '.attached-posts-wrap' ); + if (app._hasExceeded($wrap)) { + return; + } + if ( $li.hasClass( 'added' ) ) { return; } @@ -103,6 +157,8 @@ window.CMBAP = window.CMBAP || {}; $wrap.find( '.attached' ).append( $li.clone() ); app.resetAttachedListItems( $wrap ); + app.updateReadOnly($wrap); + app.updateRemaining($wrap); }; // Remove items from our attached list when the minus icon is clicked @@ -123,6 +179,8 @@ window.CMBAP = window.CMBAP || {}; $wrap.find('.retrieved li[data-id="' + itemID +'"]').removeClass('added'); app.resetAttachedListItems( $wrap ); + app.updateReadOnly($wrap); + app.updateRemaining($wrap); }; app.inputHasId = function( $wrap, itemID ) {