FEAT_UNLAYER_MAIL_EDITOR_ADDED_SRINIVAS
This commit is contained in:
Srinivas-Saravanan
parent
c72ad51b81
commit
7e7b8eb411
@ -52,6 +52,7 @@ class NotificationController extends AdminController
|
||||
$form_data['subject'] = $this->request->getPost('subject');
|
||||
$form_data['mail_content'] = $this->request->getPost('mailContent');
|
||||
$form_data['client_id'] = $this->request->getPost('client_id');
|
||||
$form_data['mail_content_json'] = $this->request->getPost('mailJson');
|
||||
$notificationModel = new NotificationModel();
|
||||
|
||||
$find_notification = $notificationModel->where('client_id',$form_data['client_id'])->where('template_name',$form_data['template_name'])->first();
|
||||
|
||||
@ -4,9 +4,9 @@ namespace App\Models;
|
||||
|
||||
use CodeIgniter\Model;
|
||||
|
||||
class NotificationModel extends Model
|
||||
class NotificationModel extends Model
|
||||
{
|
||||
protected $table = 'notifications';
|
||||
protected $primaryKey = 'id';
|
||||
protected $allowedFields = ["id","client_id","template_name","subject","mail_content","enabled","created_by","updated_by","is_active",];
|
||||
protected $allowedFields = ["id","client_id","template_name","subject","mail_content","enabled","created_by","updated_by","is_active",'mail_content_json'];
|
||||
}
|
||||
@ -79,7 +79,10 @@
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
|
||||
|
||||
//srinivas
|
||||
<script src="https://editor.unlayer.com/embed.js"></script>
|
||||
<!-- <script src="<?= base_url('public/unlayer/js/embed.js').''?>"></script> -->
|
||||
//srinivas
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
@ -9,6 +9,29 @@
|
||||
.scrollb {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
#editor-container {
|
||||
width: 100%;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
#account_maneger_summary_mail_modal .modal-dialog,
|
||||
#member_review_and_summary_mail_modal .modal-dialog {
|
||||
max-width: 90% !important;
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
/* Also ensure the modal body has proper height */
|
||||
#account_maneger_summary_mail_modal .modal-body,
|
||||
#member_review_and_summary_mail_modal .modal-body {
|
||||
min-height: 600px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* If you're using Bootstrap's modal, you might also want to ensure proper positioning */
|
||||
.modal-dialog {
|
||||
margin: 1.75rem auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="tab-pane fade" id="notification-tab">
|
||||
<input type="hidden" id="client_id_for_client_branch" value="<?= isset($notification['id']) ? $notification['id'] : '' ?>"/>
|
||||
@ -526,7 +549,7 @@
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<!-- Modal content for the Large example -->
|
||||
<div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
<!-- <div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
aria-hidden="true" aria-modal="true" data-backdrop="static">
|
||||
<div class="modal-dialog modal-full-width">
|
||||
<div class="modal-content">
|
||||
@ -561,7 +584,7 @@
|
||||
<div class="form-group col-md-2 testmail" style="display: none;">
|
||||
<a class="btn btn-primary waves-effect waves-light mr-1 setid" onclick="testMailSend(this)">Test Mail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="form-row" id="rac_rate_dropdown">
|
||||
<div class="form-group col-md-12">
|
||||
@ -574,7 +597,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="form-row" id="rac_rate_dropdown">
|
||||
<!-- <div class="form-row" id="rac_rate_dropdown">
|
||||
<div class="form-group col-md-12">
|
||||
<select id="account_maneger_summary_mail_modal_customButton" class="form-control" style="border:none;right: 6px;width: auto;position: absolute;z-index: 1;top: 17px;height: 32px;float: right;">
|
||||
<option value="">PlaceHolders</option>
|
||||
@ -607,11 +630,61 @@
|
||||
id="btnGridSubmit_2">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> -->
|
||||
<!-- </div>/.modal-content -->
|
||||
<!-- </div>/.modal-dialog -->
|
||||
<!-- </div>/.modal -->
|
||||
<div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
aria-hidden="true" aria-modal="true" data-backdrop="static">
|
||||
<div class="modal-dialog modal-full-width">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="myLargeModalLabel">Member Review and summary mail <span id="nameOfThePolicy"></span></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center" id="no_data"></div>
|
||||
<form role="form" class="parsley-examples" method="post" id="account_maneger_summary_mail_form" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<div class="form-row" id="rac_rate_dropdown">
|
||||
<div class="form-group col-md-2">
|
||||
<label for="emp_code">Template Name</label>
|
||||
</div>
|
||||
<div class="form-group col-md-5">
|
||||
<input type="text" id="template_name" name="template_name" value="Account Maneger Summary Mail" readonly class="form-control" placeholder="Template Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" id="rac_rate_dropdown">
|
||||
<div class="form-group col-md-2">
|
||||
<label for="emp_code">Subject</label>
|
||||
</div>
|
||||
<div class="form-group col-md-5">
|
||||
<input type="text" id="subject" name="subject" class="form-control" placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group col-md-2 testmail" style="display: none;">
|
||||
<a class="btn btn-primary waves-effect waves-light mr-1 setid" onclick="testMailSend(this)">Test Mail</a>
|
||||
</div>
|
||||
</div><hr>
|
||||
<!-- Unlayer editor -->
|
||||
<div class="form-row" id="rac_rate_dropdown">
|
||||
<div class="form-group col-md-12">
|
||||
<div id="editor-container" style="height: 300px;width:max-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group text-right m-b-0">
|
||||
<button class="btn btn-primary waves-effect waves-light mr-1 preview_button"
|
||||
id="">Preview</button>
|
||||
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
|
||||
id="btnGridSubmit_2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<!-- Modal content for the Large example -->
|
||||
<div class="modal fade" id="client_hr_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
aria-hidden="true" aria-modal="true" data-backdrop="static">
|
||||
@ -1044,49 +1117,49 @@
|
||||
}
|
||||
})
|
||||
|
||||
$('#account_maneger_summary_mail_form').submit(function (event)
|
||||
{
|
||||
event.preventDefault();
|
||||
var joditEditor = editor4;
|
||||
if (joditEditor)
|
||||
{
|
||||
var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
|
||||
var formData = $(this).serializeArray();
|
||||
formData.push({ name: 'mailContent', value: mailContent });
|
||||
formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
|
||||
// $('#account_maneger_summary_mail_form').submit(function (event)
|
||||
// {
|
||||
// event.preventDefault();
|
||||
// var joditEditor = editor4;
|
||||
// if (joditEditor)
|
||||
// {
|
||||
// var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
|
||||
// var formData = $(this).serializeArray();
|
||||
// formData.push({ name: 'mailContent', value: mailContent });
|
||||
// formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
|
||||
|
||||
$('.loader').fadeIn();
|
||||
$('.loader-mask').fadeIn();
|
||||
var form_action = '<?= base_url("client/notification/create") ?>';
|
||||
$.ajax({
|
||||
url: form_action,
|
||||
type: "POST",
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
success: function(res)
|
||||
{
|
||||
$('#account_maneger_summary_mail_modal').find('.close').click();
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
},
|
||||
error: function (xhr, status, error)
|
||||
{
|
||||
console.error(xhr.responseText);
|
||||
console.error(status, error);
|
||||
setTimeout(function()
|
||||
{
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
toastr.warning('Something Wrong!', 'warning');
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
console.error("Jodit editor instance is not defined.");
|
||||
}
|
||||
})
|
||||
// $('.loader').fadeIn();
|
||||
// $('.loader-mask').fadeIn();
|
||||
// var form_action = '<?= base_url("client/notification/create") ?>';
|
||||
// $.ajax({
|
||||
// url: form_action,
|
||||
// type: "POST",
|
||||
// data: formData,
|
||||
// dataType: 'json',
|
||||
// success: function(res)
|
||||
// {
|
||||
// $('#account_maneger_summary_mail_modal').find('.close').click();
|
||||
// $('.loader').fadeOut();
|
||||
// $('.loader-mask').delay(350).fadeOut('slow');
|
||||
// },
|
||||
// error: function (xhr, status, error)
|
||||
// {
|
||||
// console.error(xhr.responseText);
|
||||
// console.error(status, error);
|
||||
// setTimeout(function()
|
||||
// {
|
||||
// $('.loader').fadeOut();
|
||||
// $('.loader-mask').delay(350).fadeOut('slow');
|
||||
// toastr.warning('Something Wrong!', 'warning');
|
||||
// }, 1000);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// console.error("Jodit editor instance is not defined.");
|
||||
// }
|
||||
// })
|
||||
|
||||
$('#client_hr_summary_mail_form').submit(function (event)
|
||||
{
|
||||
@ -1207,7 +1280,7 @@
|
||||
{
|
||||
var template_name = $(element).attr('id');
|
||||
|
||||
if (template_name == "member_welcome_mail" || template_name == "member_reminder_mail" || template_name == "member_ecard_mail" || template_name == "member_review_and_summary_mail" || template_name == "account_maneger_summary_mail" || template_name == "client_hr_summary_mail")
|
||||
if (template_name == "member_welcome_mail" || template_name == "member_reminder_mail" || template_name == "member_ecard_mail" || template_name == "member_review_and_summary_mail" || template_name == "client_hr_summary_mail")
|
||||
{
|
||||
$('.loader').fadeIn();
|
||||
$('.loader-mask').fadeIn();
|
||||
@ -1556,6 +1629,323 @@
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
<script>
|
||||
// Global editor variable
|
||||
let editor = null;
|
||||
|
||||
// Function to check if unlayer is loaded and available
|
||||
function isUnlayerLoaded() {
|
||||
return typeof unlayer !== 'undefined' && unlayer !== null;
|
||||
}
|
||||
|
||||
// Enhanced waiting function with better error handling
|
||||
function waitForUnlayer(callback, maxAttempts = 20) {
|
||||
let attempts = 0;
|
||||
|
||||
const checkUnlayer = setInterval(function() {
|
||||
attempts++;
|
||||
console.log("Checking for Unlayer, attempt:", attempts);
|
||||
|
||||
if (isUnlayerLoaded()) {
|
||||
clearInterval(checkUnlayer);
|
||||
console.log("Unlayer loaded successfully");
|
||||
callback(true);
|
||||
} else if (attempts >= maxAttempts) {
|
||||
clearInterval(checkUnlayer);
|
||||
console.error("Unlayer failed to load after", attempts, "attempts");
|
||||
callback(false);
|
||||
}
|
||||
}, 1000); // Increased interval to 1 second
|
||||
}
|
||||
|
||||
// Improved editor initialization function
|
||||
function initializeEditor(callback) {
|
||||
|
||||
console.log("Starting editor initialization...");
|
||||
|
||||
const editorContainer = document.getElementById('editor-container');
|
||||
if (!editorContainer) {
|
||||
console.error("Editor container not found");
|
||||
if (callback) callback(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure the script is loaded
|
||||
if (!document.querySelector('script[src*="unlayer"]')) {
|
||||
console.error("Unlayer script is not included in the page");
|
||||
if (callback) callback(null);
|
||||
return;
|
||||
}
|
||||
$('.loader').fadeIn();
|
||||
$('.loader-mask').fadeIn();
|
||||
|
||||
waitForUnlayer(function(unlayerLoaded) {
|
||||
if (!unlayerLoaded) {
|
||||
console.error("Unlayer not available");
|
||||
if (callback) callback(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Destroy existing instance if it exists
|
||||
if (editor) {
|
||||
console.log("Destroying existing editor...");
|
||||
editor.destroy();
|
||||
editor = null;
|
||||
}
|
||||
|
||||
// Clear the container
|
||||
editorContainer.innerHTML = '';
|
||||
|
||||
// Create new editor instance with error handling
|
||||
console.log("Creating new editor instance...");
|
||||
editor = unlayer.createEditor({
|
||||
id: 'editor-container',
|
||||
projectId: 263979,
|
||||
displayMode: "email",
|
||||
features: {
|
||||
textEditor: {tables: true },
|
||||
preview: {enabled: true,deviceOptions: ['desktop', 'mobile']},
|
||||
// preview: { enabled: true },
|
||||
imageEditor: { enabled: true },
|
||||
appearance: {
|
||||
theme: 'light',
|
||||
panels: {
|
||||
tools: { dock: "right" }
|
||||
}
|
||||
}
|
||||
},
|
||||
branding:false,
|
||||
tools: {
|
||||
// Configure any specific tools you need
|
||||
text: {
|
||||
enabled: true
|
||||
},
|
||||
image: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Verify editor initialization
|
||||
if (!editor || typeof editor.loadDesign !== 'function') {
|
||||
throw new Error("Editor initialization failed - editor instance is invalid");
|
||||
}
|
||||
|
||||
console.log("Editor initialization completed successfully");
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').fadeOut();
|
||||
if (callback) callback(editor);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error in editor initialization:", error);
|
||||
if (callback) callback(null);
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').fadeOut();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modified template data function with better error handling
|
||||
function getMailTemplateData(element) {
|
||||
const template_name = element.id;
|
||||
const validTemplates = [
|
||||
"account_maneger_summary_mail",
|
||||
];
|
||||
|
||||
if (!validTemplates.includes(template_name)) {
|
||||
console.error("Invalid template name:", template_name);
|
||||
return;
|
||||
}
|
||||
|
||||
$('.loader').fadeIn();
|
||||
$('.loader-mask').fadeIn();
|
||||
|
||||
const primaryKey = $('#general_PrimaryKey').val();
|
||||
const baseUrl = '<?= base_url("client/notification/getMailTemplateData/") ?>';
|
||||
const form_action = `${baseUrl}${template_name}/${primaryKey}`;
|
||||
|
||||
$.ajax({
|
||||
url: form_action,
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
success: function(res) {
|
||||
console.log('get Mail Template Data', res);
|
||||
|
||||
if (res) {
|
||||
// Set subject
|
||||
$(`#${template_name}_form #subject`).val(res.subject || '');
|
||||
|
||||
// Initialize editor with retry mechanism
|
||||
let retryCount = 0;
|
||||
const initWithRetry = function() {
|
||||
initializeEditor(function(editorInstance) {
|
||||
if (!editorInstance && retryCount < 3) {
|
||||
console.log(`Retrying editor initialization (${retryCount + 1}/3)...`);
|
||||
retryCount++;
|
||||
setTimeout(initWithRetry, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editorInstance) {
|
||||
console.error("Editor initialization failed after retries");
|
||||
toastr.error('Editor initialization failed. Please refresh the page.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.mail_content_json) {
|
||||
try {
|
||||
const design = JSON.parse(res.mail_content_json);
|
||||
editorInstance.loadDesign(design);
|
||||
console.log("Design loaded successfully");
|
||||
$('iframe').on('load', function() {
|
||||
console.log('Iframe loaded.');
|
||||
const iframe = $(this);
|
||||
|
||||
// Overlay the branding area
|
||||
const overlay = $('<div>', {
|
||||
css: {
|
||||
position: 'absolute',
|
||||
bottom: '0', // Adjust based on branding position
|
||||
left: '0',
|
||||
width: iframe.width(),
|
||||
height: '50px', // Adjust height to cover branding
|
||||
backgroundColor: 'white',
|
||||
zIndex: '9999',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
const iframeParent = iframe.parent();
|
||||
if (iframeParent.css('position') === 'static') {
|
||||
iframeParent.css('position', 'relative');
|
||||
}
|
||||
|
||||
iframeParent.append(overlay);
|
||||
console.log('Overlay added to hide branding.');
|
||||
});
|
||||
$(window).on('resize', function () {
|
||||
overlay.css({
|
||||
width: iframe.width(),
|
||||
height: '50px', // Adjust height dynamically if necessary
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error parsing mail content JSON:", error);
|
||||
toastr.error('Error loading email template');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
initWithRetry();
|
||||
|
||||
if (res.data) {
|
||||
addHTMLInput(res.data);
|
||||
} else {
|
||||
addHTMLInput();
|
||||
}
|
||||
|
||||
// Update UI elements
|
||||
$('.testmail').toggle(!!res.id);
|
||||
$('#attachment_table').toggle(!!res.id);
|
||||
$('.setid').attr('data-id', res.id || '');
|
||||
}
|
||||
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("Ajax error:", { status, error, response: xhr.responseText });
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
toastr.error('Failed to load template data');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#account_maneger_summary_mail_form').submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Check if editor instance exists
|
||||
if (!editor) {
|
||||
console.error("Editor not initialized");
|
||||
toastr.error("Editor not ready. Please try again.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Use the editor instance instead of unlayer directly
|
||||
editor.exportHtml(function (data) {
|
||||
var formData = $('#account_maneger_summary_mail_form').serializeArray();
|
||||
|
||||
// Append Unlayer editor data
|
||||
formData.push({
|
||||
name: 'mailContent',
|
||||
value: data.html
|
||||
});
|
||||
formData.push({
|
||||
name: 'client_id',
|
||||
value: $('#general_PrimaryKey').val()
|
||||
});
|
||||
formData.push({
|
||||
name: 'mailJson',
|
||||
value: JSON.stringify(data.design)
|
||||
});
|
||||
|
||||
console.log(formData);
|
||||
|
||||
// Show loading indicators
|
||||
$('.loader').fadeIn();
|
||||
$('.loader-mask').fadeIn();
|
||||
|
||||
var form_action = '<?= base_url("client/notification/create") ?>';
|
||||
|
||||
$.ajax({
|
||||
url: form_action,
|
||||
type: "POST",
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
success: function(res) {
|
||||
$('#account_maneger_summary_mail_modal').find('.close').click();
|
||||
toastr.success('Template saved successfully');
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error(xhr.responseText);
|
||||
console.error(status, error);
|
||||
setTimeout(function() {
|
||||
$('.loader').fadeOut();
|
||||
$('.loader-mask').delay(350).fadeOut('slow');
|
||||
toastr.warning('Something Went Wrong!', 'warning');
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const observer = new MutationObserver(() => {
|
||||
const brandingElement = document.querySelector('#editor-container .blockbuilder-branding');
|
||||
if (brandingElement) {
|
||||
brandingElement.remove(); // Remove the branding element
|
||||
}
|
||||
});
|
||||
|
||||
// Start observing the editor container for changes
|
||||
const editorContainer = document.getElementById('editor-container');
|
||||
if (editorContainer) {
|
||||
observer.observe(editorContainer, { childList: true, subtree: true });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user