| 1 |
/** |
| 2 |
* This file is enqueued from admin/class-plugin-notes-plus-admin.php. |
| 3 |
*/ |
| 4 |
|
| 5 |
// Store all notes in a global variable for easy access |
| 6 |
var pluginNotes = {}; |
| 7 |
function registerPluginNote( pluginIdSanitized, noteDbId, noteContent, noteIcon, noteTime ) { |
| 8 |
noteCssId = pluginIdSanitized + '_' + noteDbId; |
| 9 |
|
| 10 |
// Convert time to readable format and insert into span |
| 11 |
var d = new Date(noteTime * 1000); |
| 12 |
var month = ("0" + (d.getMonth() + 1)).slice(-2); |
| 13 |
var date = ("0" + d.getDate()).slice(-2); |
| 14 |
var year = d.getFullYear(); |
| 15 |
var formattedDate = year + '-' + month + '-' + date; |
| 16 |
|
| 17 |
jQuery('#' + noteCssId + ' .pnp-note-time').html(formattedDate); |
| 18 |
|
| 19 |
pluginNotes[noteCssId] = { |
| 20 |
note: noteContent, |
| 21 |
icon: noteIcon |
| 22 |
}; |
| 23 |
} |
| 24 |
|
| 25 |
(function($){ |
| 26 |
$(document).ready( function() { |
| 27 |
addListeners(); |
| 28 |
}); |
| 29 |
|
| 30 |
$( document ).ajaxComplete(function() { |
| 31 |
|
| 32 |
// Remove any existing listeners first |
| 33 |
$('.pnp-add-note').off( 'click' ); |
| 34 |
$('.pnp-save-note').off( 'click' ); |
| 35 |
$('.pnp-edit-note').off( 'click' ); |
| 36 |
$('.pnp-cancel-note').off( 'click' ); |
| 37 |
$('.pnp-delete-note').off( 'click' ); |
| 38 |
|
| 39 |
addListeners(); |
| 40 |
}); |
| 41 |
|
| 42 |
function addListeners() { |
| 43 |
|
| 44 |
"use strict"; |
| 45 |
|
| 46 |
// Preview dashicon corresponding to selected note type |
| 47 |
$.each( $('.select-dashicon-for-note'), function() { |
| 48 |
$(this).change(function(){ |
| 49 |
var icon = $(this).val(); |
| 50 |
$(this).prev().html('<span class="dashicons '+icon+'"></span>'); |
| 51 |
}); |
| 52 |
|
| 53 |
$(this).change(); |
| 54 |
}); |
| 55 |
|
| 56 |
// Add target="_blank" to all links |
| 57 |
$('.pnp-plugin-note a').each(function(){ |
| 58 |
$(this).attr( 'target', '_blank' ); |
| 59 |
}); |
| 60 |
|
| 61 |
|
| 62 |
$('.pnp-add-note').on( 'click', function( event ) { |
| 63 |
|
| 64 |
event.preventDefault(); |
| 65 |
|
| 66 |
$(this).hide(); |
| 67 |
|
| 68 |
var newNoteForm = $(this).siblings('.pnp-note-form-wrapper'); |
| 69 |
|
| 70 |
// Get class for first icon in list |
| 71 |
var firstIcon = newNoteForm.find('.select-dashicon-for-note option:first-child').val(); |
| 72 |
|
| 73 |
// Clear previous form content, reset icon, show form |
| 74 |
newNoteForm.find('.pnp-note-form').val(''); |
| 75 |
newNoteForm.find('.select-dashicon-for-note').val(firstIcon); |
| 76 |
newNoteForm.find('.view-icon').html('<span class="dashicons '+ firstIcon + '"></span>'); |
| 77 |
|
| 78 |
newNoteForm.show(); |
| 79 |
|
| 80 |
}); |
| 81 |
|
| 82 |
$('.pnp-save-note').on( 'click', function( event ) { |
| 83 |
|
| 84 |
event.preventDefault(); |
| 85 |
|
| 86 |
// Get plugin ID and basic info for new note |
| 87 |
var pluginId = $(this).closest('.pnp-wrapper').attr('data-pluginfile'); |
| 88 |
var pluginIdSanitized = $(this).closest('.pnp-wrapper').attr('id'); |
| 89 |
var noteContent = $(this).siblings('.pnp-note-form').val(); |
| 90 |
var noteIcon = $(this).siblings().find('.select-dashicon-for-note').val(); |
| 91 |
|
| 92 |
// Don't allow save with empty content |
| 93 |
if ($.trim(noteContent) === "") { |
| 94 |
alert(params.needs_content); |
| 95 |
return false; |
| 96 |
} |
| 97 |
|
| 98 |
// Get existing note id if available (for case of edit) |
| 99 |
var noteDbId = ''; |
| 100 |
var noteToEdit = $(this).closest('.pnp-note-form-wrapper').prev('.pnp-show-note-wrapper'); |
| 101 |
|
| 102 |
if (noteToEdit.length) { |
| 103 |
var noteCssId = noteToEdit.attr('id'); |
| 104 |
var start = noteCssId.lastIndexOf('_') + 1; |
| 105 |
noteDbId = noteCssId.substr(start); |
| 106 |
} |
| 107 |
|
| 108 |
// Get handle on form for after the request |
| 109 |
var noteForm = $(this).closest('.pnp-note-form-wrapper'); |
| 110 |
|
| 111 |
// Show spinner and disable textarea |
| 112 |
var saveSpinner = $(this).next('.dashicons.pnp-spin'); |
| 113 |
saveSpinner.css('display', 'inline-block'); |
| 114 |
noteForm.find('textarea').prop('disabled', true); |
| 115 |
noteForm.find('.pnp-cancel-note, .pnp-divider').hide(); |
| 116 |
|
| 117 |
// This does the ajax request |
| 118 |
$.ajax({ |
| 119 |
url: params.ajaxurl, |
| 120 |
data: { |
| 121 |
'action': 'pnp_add_response', |
| 122 |
'note' : noteContent, |
| 123 |
'icon' : noteIcon, |
| 124 |
'noteId' : noteDbId, // will be '' if not in db yet |
| 125 |
'pluginId' : pluginId, |
| 126 |
'security' : params.ajax_nonce |
| 127 |
}, |
| 128 |
success:function( response ) { |
| 129 |
|
| 130 |
noteForm.hide(); |
| 131 |
saveSpinner.hide(); |
| 132 |
noteForm.find('textarea').prop('disabled', false); |
| 133 |
noteForm.find('.pnp-cancel-note, .pnp-divider').show(); |
| 134 |
|
| 135 |
// Case where user creates new note |
| 136 |
var addNoteLink = noteForm.siblings('.pnp-add-note'); |
| 137 |
if (addNoteLink.length){ |
| 138 |
// Add new note to end of notes list |
| 139 |
$(singleNoteMarkup( response.processed_note, response.note_icon, response.note_user, pluginIdSanitized, response.new_note_id )).insertBefore('#' + pluginIdSanitized + ' .pnp-add-note-wrapper'); |
| 140 |
addNoteLink.show(); |
| 141 |
} |
| 142 |
// Case where user edits existing note |
| 143 |
var existingNote = noteForm.prev('.pnp-show-note-wrapper'); |
| 144 |
if (existingNote.length){ |
| 145 |
existingNote.replaceWith(singleNoteMarkup( response.processed_note, response.note_icon, response.note_user, pluginIdSanitized, response.new_note_id )); |
| 146 |
} |
| 147 |
|
| 148 |
// Attach delete and edit event handlers to new note |
| 149 |
// Note that this variable is defined above for the case of edit... |
| 150 |
var noteCssId = pluginIdSanitized + '_' + response.new_note_id; |
| 151 |
|
| 152 |
$('#' + noteCssId + ' .pnp-delete-note').click( function( event ) { |
| 153 |
|
| 154 |
event.preventDefault(); |
| 155 |
deleteNote( noteCssId, response.new_note_id ); |
| 156 |
}); |
| 157 |
|
| 158 |
$('#' + noteCssId + ' .pnp-edit-note').click( function( event ) { |
| 159 |
|
| 160 |
event.preventDefault(); |
| 161 |
var noteToEdit = $(this).closest('.pnp-show-note-wrapper'); |
| 162 |
editNote( noteToEdit, pluginIdSanitized, response.new_note_id ) |
| 163 |
}); |
| 164 |
|
| 165 |
// Add target blank to a tags |
| 166 |
$('#' + pluginIdSanitized + ' .pnp-plugin-note a').attr( 'target', '_blank' ); |
| 167 |
|
| 168 |
// Add new note to object |
| 169 |
registerPluginNote( pluginIdSanitized, response.new_note_id, response.processed_note, response.note_icon, response.note_time ); |
| 170 |
|
| 171 |
}, |
| 172 |
error: function( errorThrown ){ |
| 173 |
console.log( errorThrown ); |
| 174 |
} |
| 175 |
}); |
| 176 |
}); |
| 177 |
|
| 178 |
$('.pnp-edit-note').on( 'click', function( event ) { |
| 179 |
|
| 180 |
event.preventDefault(); |
| 181 |
|
| 182 |
var noteToEdit = $(this).closest('.pnp-show-note-wrapper'); |
| 183 |
|
| 184 |
var pluginIdSanitized = $(this).closest('.pnp-wrapper').attr('id'); |
| 185 |
|
| 186 |
var noteCssId = noteToEdit.attr('id'); |
| 187 |
var start = noteCssId.lastIndexOf('_') + 1; |
| 188 |
var noteDbId = noteCssId.substr(start); |
| 189 |
|
| 190 |
editNote( noteToEdit, pluginIdSanitized, noteDbId ); |
| 191 |
|
| 192 |
}); |
| 193 |
|
| 194 |
$('.pnp-cancel-note').on( 'click', function( event ) { |
| 195 |
|
| 196 |
event.preventDefault(); |
| 197 |
|
| 198 |
$(this).closest('.pnp-note-form-wrapper').hide(); |
| 199 |
|
| 200 |
// Case where user cancels new note |
| 201 |
var addNoteLink = $(this).closest('.pnp-note-form-wrapper').siblings('.pnp-add-note'); |
| 202 |
if (addNoteLink.length){ |
| 203 |
addNoteLink.show(); |
| 204 |
} |
| 205 |
|
| 206 |
// Case where user cancels existing note |
| 207 |
var existingNote = $(this).closest('.pnp-note-form-wrapper').prev('.pnp-show-note-wrapper'); |
| 208 |
if (existingNote.length){ |
| 209 |
existingNote.show(); |
| 210 |
} |
| 211 |
|
| 212 |
}); |
| 213 |
|
| 214 |
$('.pnp-delete-note').on( 'click', function( event ) { |
| 215 |
|
| 216 |
event.preventDefault(); |
| 217 |
|
| 218 |
var noteCssId = $(this).closest('.pnp-show-note-wrapper').attr('id'); |
| 219 |
var start = noteCssId.lastIndexOf('_') + 1; |
| 220 |
var noteDbId = noteCssId.substr(start); |
| 221 |
|
| 222 |
deleteNote( noteCssId, noteDbId ); |
| 223 |
|
| 224 |
}); |
| 225 |
} |
| 226 |
|
| 227 |
})(jQuery); |
| 228 |
|
| 229 |
function editNote( noteToEdit, pluginIdSanitized, noteDbId ) { |
| 230 |
|
| 231 |
noteToEdit.hide(); |
| 232 |
|
| 233 |
// Show form with existing content |
| 234 |
noteToEdit.closest('.pnp-wrapper').find('.pnp-note-form-wrapper').last().clone(true).insertAfter(noteToEdit).show(); |
| 235 |
|
| 236 |
var editNoteForm = noteToEdit.next('.pnp-note-form-wrapper'); |
| 237 |
|
| 238 |
var noteContent = pluginNotes[pluginIdSanitized + "_" + noteDbId].note; |
| 239 |
var noteIcon = pluginNotes[pluginIdSanitized + "_" + noteDbId].icon; |
| 240 |
|
| 241 |
editNoteForm.find('.pnp-note-form').val(noteContent); |
| 242 |
editNoteForm.find('.select-dashicon-for-note').val(noteIcon); |
| 243 |
editNoteForm.find('.view-icon').html('<span class="dashicons ' + noteIcon + '"></span>'); |
| 244 |
|
| 245 |
} |
| 246 |
|
| 247 |
function deleteNote( noteCssId, noteDbId ) { |
| 248 |
|
| 249 |
if (confirm(params.confirm_delete)) { |
| 250 |
|
| 251 |
// Show spinner |
| 252 |
var deleteLink = jQuery('#' + noteCssId + ' .pnp-delete-note'); |
| 253 |
var deleteSpinner = deleteLink.next('.dashicons.pnp-spin'); |
| 254 |
deleteSpinner.css('display', 'inline-block'); |
| 255 |
|
| 256 |
// This does the ajax request |
| 257 |
jQuery.ajax({ |
| 258 |
url: params.ajaxurl, |
| 259 |
data: { |
| 260 |
'action': 'pnp_delete_response', |
| 261 |
'noteId' : noteDbId, |
| 262 |
'security' : params.ajax_nonce |
| 263 |
}, |
| 264 |
success:function( data ) { |
| 265 |
// This outputs the result of the ajax request |
| 266 |
jQuery('#' + noteCssId + '.pnp-show-note-wrapper').remove(); |
| 267 |
|
| 268 |
}, |
| 269 |
error: function( errorThrown ){ |
| 270 |
console.log( errorThrown ); |
| 271 |
} |
| 272 |
}); |
| 273 |
} |
| 274 |
return false; |
| 275 |
} |
| 276 |
|
| 277 |
function singleNoteMarkup( note, icon, user, pluginIdSanitized, noteDbId ) { |
| 278 |
|
| 279 |
note = note.replace(/\n/g, "<br />"); // maintain line breaks |
| 280 |
|
| 281 |
var markup = ''; |
| 282 |
markup += '<div class="pnp-show-note-wrapper" id="' + pluginIdSanitized + '_' + noteDbId + '">'; |
| 283 |
markup += '<div class="pnp-plugin-note">'; |
| 284 |
markup += '<span class="dashicons ' + icon + '"></span>'; |
| 285 |
markup += note; |
| 286 |
markup += '<p class="pnp-note-meta">' + user + ' | <span class="pnp-note-time"></span></p>'; |
| 287 |
markup += '</div>'; |
| 288 |
markup += '<a href="#" class="pnp-edit-note">' + params.edit_text + '</a> | '; |
| 289 |
markup += '<a href="#" class="pnp-delete-note">' + params.delete_text + '</a>'; |
| 290 |
markup += '<span class="pnp-spin dashicons dashicons-update"></span>'; |
| 291 |
markup += '</div>'; |
| 292 |
|
| 293 |
return markup; |
| 294 |
} |
