Skip to content

Commit

Permalink
Updated Hooks
Browse files Browse the repository at this point in the history 
These functions provide hooks for customizing the plugin's behavior:
 - 'bb_draft_utility_enable_scheduling' filter allows enabling/disabling the scheduling feature.
 - 'bb_draft_utility_branding' filter allows overriding the default Beaver Builder branding.
 - 'bb_draft_utility_show_saved_info' filter determines whether to show the "Draft saved by" and "on" information.
  • Loading branch information
@zackpyle
zackpyle committed Aug 25, 2024
1 parent b8c6283 commit 8ee35e8
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 107 deletions.
59 changes: 57 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ You will be notified that there is a saved Beaver Builder draft in the following


## Schedule Drafts to Publish
There is a filter to disable the draft scheduling feature if you don't want this feature<br>
`add_filter( 'bb_draft_utility_enable_scheduling', '__return_false' );`
(See hooks below if you want to disable this feature)<br>

You can click on the Saved Draft link from the post list to bring up a modal to schedule a date/time for your draft to go live. You can also unschedule and delete drafts from that modal as well.<br>
<sup><sub>(Respects white label naming)</sub></sup><br>
Expand All @@ -28,5 +27,61 @@ After you schedule a draft, a calendar icon will appear next to the Saved Draft
![Screenshot 2024-08-25 at 08 22 33](https://github.com/user-attachments/assets/c9887f2e-2e33-493d-8cbe-278d06ba266e)


## Hooks for Customizing Beaver Builder Draft Utility

The Beaver Builder Draft Utility plugin provides several hooks that allow you to customize its behavior. Below are the available hooks and instructions on how to use them.

### 1. `bb_draft_utility_enable_scheduling`

This filter allows you to enable or disable the scheduling feature for drafts. By default, scheduling is enabled, but you can override this behavior.

#### Example Usage:
```php
/**
* Disable the scheduling feature for Beaver Builder drafts.
*
* @param bool $enable_scheduling The current state of the scheduling feature.
* @return bool False to disable scheduling.
*/
add_filter( 'bb_draft_utility_enable_scheduling', function( $enable_scheduling ) {
return false; // Disable draft scheduling feature
});
```

### 2. `bb_draft_utility_branding`

This filter allows you to override the default branding name for Beaver Builder.
- If have the agency version of Beaver Builder, this plugin will respect your white label naming.
- If you are white labeling it in a different way, you can change the builder name using this hook since we dynamically add the name with javascript in some places.

#### Example Usage:
```php
/**
* Override the branding for Beaver Builder drafts.
*
* @param string $branding The default branding name.
* @return string The customized branding name.
*/
add_filter( 'bb_draft_utility_branding', function( $branding ) {
return 'Awesome Page Builder'; // Replace with your branding
});
```

### 3. `bb_draft_utility_show_saved_info`

This filter determines whether to show the "Draft saved by" and "on" information in the modals. By default, this information is shown, but you can hide it if needed.

#### Example Usage:
```php
/**
* Hide the "Draft saved by" and "on" information.
*
* @param bool $show_saved_info Whether to display the saved information.
* @return bool False to hide the saved information.
*/
add_filter( 'bb_draft_utility_show_saved_info', function( $show_saved_info ) {
return false; // Hide the saved info
});
```

Inspired by <a href="https://gist.github.com/Pross/0b517612bb1d1dfb17083b9b32628b82">@pross's gist</a>
34 changes: 17 additions & 17 deletions assets/css/bb-draft-backend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
}
#fl-saved-draft-modal {
padding: 20px;
padding: 20px;
}
.fl-saved-draft-modal .ui-dialog-title{
font-size: 22px;
Expand All @@ -22,23 +22,23 @@
}

#fl-saved-draft-modal-content .server-time {
margin-bottom: 20px;
margin-bottom: 20px;
}

#fl-saved-draft-modal-content .date input[type="datetime-local"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
width: 100%;
padding: 10px;
margin-bottom: 10px;
}

#fl-saved-draft-modal-content .bb-saved-draft-btn,
#fl-saved-draft-modal-content .bb-saved-draft-btn:focus{
--_accent: #0073aa;
background-color: rgb(239, 239, 239);
color: var(--_accent);
padding: 5px 15px;
border: none;
cursor: pointer;
background-color: rgb(239, 239, 239);
color: var(--_accent);
padding: 5px 15px;
border: none;
cursor: pointer;
border: 1px solid var(--_accent);
transition: all .2s ease-in-out;
text-decoration:none;
Expand Down Expand Up @@ -69,17 +69,17 @@
}

.ui-tooltip {
background: #333;
color: #fff;
border-radius: 4px;
padding: 10px;
font-size: 12px;
z-index: 9999; /* High z-index to ensure it appears on top */
background: #333;
color: #fff;
border-radius: 4px;
padding: 10px;
font-size: 12px;
z-index: 9999; /* High z-index to ensure it appears on top */
width: fit-content;
}

.has-saved-draft .fl-builder span {
color: #f1c40f !important; /* Change the color to yellow */
color: #f1c40f !important; /* Change the color to yellow */
}

.draft-alt-btns{
Expand Down
46 changes: 23 additions & 23 deletions assets/css/bb-draft-frontend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
padding-block: 1em;
}
.bb-draft-modal .ui-widget-header {
border: none;
border-bottom: 1px solid var(--fl-builder-outline-color);
background: none;
color: inherit;
font-weight: 500;
border: none;
border-bottom: 1px solid var(--fl-builder-outline-color);
background: none;
color: inherit;
font-weight: 500;
font-size: 16px;
border-radius:0;
}
Expand All @@ -17,13 +17,13 @@
}

.bb-draft-modal{
border: 1px solid #ccc;
border: 1px solid #ccc;
border-radius: 10px !important;
}

.bb-draft-modal .ui-dialog-content {
padding: 20px;
font-size: 16px;
padding: 20px;
font-size: 16px;
}
.bb-draft-modal p{
font-size: 16px;
Expand All @@ -33,22 +33,22 @@
}

.bb-draft-modal button {
background-color: var(--fl-builder-accent-color);
color: #fff !important;
text-decoration: none;
border: 2px solid var(--fl-builder-accent-color);
font-family: var(--fl-builder-font-family) !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 400 !important;
background-color: var(--fl-builder-accent-color);
color: #fff !important;
text-decoration: none;
border: 2px solid var(--fl-builder-accent-color);
font-family: var(--fl-builder-font-family) !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 400 !important;
padding: 10px 20px;
text-align: center;
transition-property: all;
transition-duration: .2s;
text-align: center;
transition-property: all;
transition-duration: .2s;
}

.bb-draft-modal .ui-dialog-buttonpane button:is(:hover, :focus-visible) {
background-color: var(--fl-builder-selected-color) !important;
background-color: var(--fl-builder-selected-color) !important;
border: 2px solid var(--fl-builder-selected-color) !important;
}
.ui-dialog .ui-dialog-buttonpane button{
Expand Down Expand Up @@ -79,15 +79,15 @@ button.delete-draft-btn{
opacity: .35 !important;
}
.bb-draft-modal.ui-dialog .ui-widget-content{
border-color: var(--fl-builder-outline-color) !important;
border-color: var(--fl-builder-outline-color) !important;
}


/* Dark mode modal styles */
body.fl-builder-ui-skin--dark .bb-draft-modal.ui-widget-content,
body.fl-builder-ui-skin--dark .bb-draft-modal .ui-widget-content{
background: #23282d !important;
color: #a7b1bb !important;
background: #23282d !important;
color: #a7b1bb !important;
border-color: var(--fl-builder-outline-color)!important;
}
body.fl-builder-ui-skin--dark button.delete-draft-btn{
Expand Down
76 changes: 38 additions & 38 deletions assets/js/bb-draft-backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ jQuery(document).ready(function ($) {
'min-width': '300px',
'max-width': '600px'
});
// Replace the dialog title with an <h1> tag
// Replace the dialog title with an <h1> tag
const titleBar = $(this).closest('.ui-dialog').find('.ui-dialog-title');
titleBar.replaceWith(`<h1 class="ui-dialog-title">${titleBar.text()}</h1>`);
}
Expand Down Expand Up @@ -113,13 +113,13 @@ jQuery(document).ready(function ($) {
});
}

// Loop through each element with the class '.fl-saved-draft' and add the 'has-saved-draft' class
$('.fl-saved-draft').each(function () {
const postId = $(this).data('post-id');
if (postId) {
$(`#post-${postId}`).addClass('has-saved-draft');
}
});
// Loop through each element with the class '.fl-saved-draft' and add the 'has-saved-draft' class
$('.fl-saved-draft').each(function () {
const postId = $(this).data('post-id');
if (postId) {
$(`#post-${postId}`).addClass('has-saved-draft');
}
});

// Declare modal variable globally within the script
let modal;
Expand All @@ -131,10 +131,10 @@ jQuery(document).ready(function ($) {
const savedBy = $(this).data('draft-saved-by');
const savedAt = $(this).data('draft-saved-at');
const scheduledTime = $(this).data('scheduled-time');
const builderName = bbDraftUtility.builderName;
const builderName = bbDraftUtility.builderName;

let builderEditUrl = $(`tr#post-${postId} .fl-builder a`).attr('href');
builderEditUrl += '&fl_saved_draft'; // Append the fl_saved_draft param to the URL
let builderEditUrl = $(`tr#post-${postId} .fl-builder a`).attr('href');
builderEditUrl += '&fl_saved_draft'; // Append the fl_saved_draft param to the URL


// Initialize the modal globally
Expand All @@ -144,61 +144,61 @@ jQuery(document).ready(function ($) {
width: '40%',
modal: true,
title: 'Saved Draft',
draggable: false,
resizable: false,
autoFocus: false,
closeOnEscape: true,
dialogClass: "fl-saved-draft-modal",
draggable: false,
resizable: false,
autoFocus: false,
closeOnEscape: true,
dialogClass: "fl-saved-draft-modal",
create: function() {
// Apply min-width and max-width to the dialog wrapper
$(this).closest('.ui-dialog').css({
'min-width': '300px',
'max-width': '600px'
});
// Replace the dialog title with an <h1> tag
// Replace the dialog title with an <h1> tag
const titleBar = $(this).closest('.ui-dialog').find('.ui-dialog-title');
titleBar.replaceWith(`<h1 class="ui-dialog-title">${titleBar.text()}</h1>`);
},
open: function() {
$(this).dialog("widget").find('#edit-saved-draft').blur();
$('.fl-saved-draft-modal').focus();
// Bind the overlay click to close the dialog
$('.ui-widget-overlay').on('click', function() {
modal.dialog('close');
});
$(this).dialog("widget").find('#edit-saved-draft').blur();
$('.fl-saved-draft-modal').focus();
// Bind the overlay click to close the dialog
$('.ui-widget-overlay').on('click', function() {
modal.dialog('close');
});
// Set the scheduled time in the input field if it exists after the modal opens
if (scheduledTime) {
const scheduleInput = $('#fl-schedule-time');
scheduleInput.val(scheduledTime);
}
},
close: function() {
// Unbind the overlay click event when closing the dialog
$('.ui-widget-overlay').off('click');
}
close: function() {
// Unbind the overlay click event when closing the dialog
$('.ui-widget-overlay').off('click');
}
});

// Build the modal content
let modalContent = `<p>This page has a ${builderName} Saved Draft.</p>`;
if (savedBy && savedAt) {
if (bbDraftUtility.showSavedInfo && savedBy && savedAt) {
modalContent += `<p>Draft saved by <strong>${savedBy}</strong> on <strong>${savedAt}</strong>.</p>`;
}
modalContent += '<div class="draft-buttons">';
// Add the "Edit Saved Draft" button if the URL is available

modalContent += '<div class="draft-buttons">';
// Add the "Edit Saved Draft" button if the URL is available
if (builderEditUrl) {
modalContent += `<a href="${builderEditUrl}" class="bb-saved-draft-btn" id="edit-saved-draft">Edit Saved Draft</a>`;
}

// Delete Draft button
modalContent += '<button id="delete-saved-draft" class="bb-saved-draft-btn">Delete Draft</button>';
modalContent += '</div>';
modalContent += '</div>';


// Conditionally show scheduling options if scheduling is enabled
if (bbDraftUtility.enableScheduling) {
// Add a horizontal rule

// Add a horizontal rule
modalContent += '<div class="schedule-draft-section"><hr>';
modalContent += '<h2>Schedule Draft</h2>';

Expand All @@ -210,8 +210,8 @@ jQuery(document).ready(function ($) {
<input type="submit" class="bb-saved-draft-btn" value="${scheduledTime ? 'Update Schedule' : 'Schedule'}">
</div>
`;
// If there is a scheduled time, show it with unschedule button and format it

// If there is a scheduled time, show it with unschedule button and format it
if (scheduledTime) {
const formattedScheduledTime = new Date(scheduledTime).toLocaleString('en-US', {
month: 'short',
Expand All @@ -225,7 +225,7 @@ jQuery(document).ready(function ($) {
modalContent += `<br><p>Currently scheduled to be published on <strong>${formattedScheduledTime}</strong>.</p>`;
modalContent += '<button id="unschedule-saved-draft" class="bb-saved-draft-btn">Unschedule</button>';
}
modalContent += '</div>';
modalContent += '</div>';
}

modal.html(modalContent);
Expand Down
Loading

0 comments on commit 8ee35e8

Please sign in to comment.