Add ReplyNew Thread

 Personal Message Popup, Jcink
Black
 Posted: November 6th, 2013, 09:47 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Description: Creates a modal window for sending personal messages via AJAX and automatically handles event binding to user-created links. Send PMs from anywhere with a fancy popup form!
Requires: jQuery
Target Platform: Jcink
Demonstration: This script is being used here on Code.
Installation Instructions:
Step 1: Add these rules to your CSS. Adjust as necessary.

CODE
#fade-background {
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
z-index: 2;
}
#message-window {
position: fixed;
top: 64px;
left: 50%;
width: 860px;
background-color: #F9F9F9;
margin: 0 0 0 -430px;
z-index: 3;
}



Step 2: Add the following to your board wrappers.

Code (Click to highlight)
<script>
// Personal Message Popup by Black
// http://code.jfbs.net/?showtopic=56
$(document).ready(function() {
var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
messageWindow = $(document.createElement("div")).hide().attr("id", "message-window").html("<div class=\"tableborder\">" +
"<div class=\"maintitle\">Send Message</div>" +
"<div>" +
"<a href=\"#\">Send from User Control Panel instead</a><br />" +
"<form action=\"index.php?\" method=\"post\">" +
"<input type=\"hidden\" name=\"act\" value=\"Msg\" />" +
"<input type=\"hidden\" name=\"CODE\" value=\"04\" />" +
"<input type=\"hidden\" name=\"MODE\" value=\"01\" />" +
"<input type=\"hidden\" name=\"OID\" value=\"\" />" +
"<input type=\"hidden\" name=\"add_tracking\" value=\"1\" />" +
"<input type=\"hidden\" name=\"auth_key\" value=\"<!-- |auth_key| -->\" />" +
"<input type=\"text\" name=\"entered_name\" placeholder=\"Recipient...\" value=\"\" class=\"forminput\" /><br />" +
"<input type=\"text\" name=\"msg_title\" placeholder=\"Message Title...\" maxlength=\"40\" value=\"\" class=\"forminput\" /><br />" +
"<textarea id=\"message-textarea\" name=\"Post\" placeholder=\"Enter your message here\" class=\"textinput\"></textarea><br />" +
"<input type=\"submit\" value=\"Send\" class=\"formbutton\" name=\"submit\" /> " +
"<button id=\"save-message\" type=\"button\">Save</button>" +
"<div></div>" +
"</form>" +
"</div>" +
"</div>");
$(document.body).append(fadeBackground, messageWindow);
function saveMessage() {
localStorage[currentRecipient] = $("#message-textarea").val();
return true;
}
function loadMessage() {
$("#message-textarea").val(localStorage[currentRecipient]);
}
$(window).unload(function() {
saveMessage();
});
var currentRecipient;
$(document).on("click", ".message-user", function(e) {
currentRecipient = $(this).data("name");
loadMessage();
$("#message-window").find("a").attr("href", $(this).attr("href"));
$("#message-window input[name=entered_name]").val(currentRecipient);
$("#message-window input[name=submit]").removeAttr("disabled");
$("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
$("#message-window").fadeIn("fast");
$("#message-window form div").html("");
e.preventDefault();
});
$(document).on("click", "#fade-background", function() {
saveMessage();
$("#fade-background").fadeOut("fast");
$("#message-window").fadeOut("fast");
});
$(document).keypress(function(e) {
if(e.keyCode == 27) {
saveMessage();
$("#fade-background").fadeOut("fast");
$("#message-window").fadeOut("fast");
}
});
$(document).on("click", "#save-message", function() {
$(this).attr("disabled", "disabled");
$(this).html("Saving...");
var saveButton = $(this);
setTimeout(function() {
saveMessage();
saveButton.removeAttr("disabled");
saveButton.html("Save");
$("#message-window form div").css({ opacity: 1 });
$("#message-window form div").html("Message saved.").fadeTo(1000, 0);
}, 300);
});
$("#message-window form").submit(function(e) {
var submit = $("#message-window input[name=submit]");
submit.attr("disabled", "disabled");
submit.val("Sending...");
var check1 = "Please ",
check2 = "stand by...",
check3 = check1 + check2;
$.ajax({
type: "post",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(data) {
if(data.indexOf(check3) != -1) {
localStorage.removeItem(currentRecipient);
$("#message-window form div").html("Message sent!");
setTimeout(function() {
$("#fade-background").fadeOut("fast");
$("#message-window").fadeOut("fast");
}, 1000);
submit.val("Send");
submit.removeAttr("disabled");
}
else {
$("#message-window form div").html("An error has occurred; your message has not been sent. Make sure you have completed the form fully before submitting. If this error persists, please contact <a href=\"http://code.jfbs.net/?showuser=1\" target=\"_blank\">Black</a> or file an error report at the <a href=\"http://code.jfbs.net/?showforum=3\" target=\"_blank\">Support Desk</a>.");
submit.val("Send");
submit.removeAttr("disabled");
}
},
failure: function() {
alert("Error: form did not submit.");
}
});
e.preventDefault();
});
});
</script>



Step 3: Adapt the following snippets for inclusion in Jcink's profile templates or the Custom Profile module of Black's Custom Forum Structure script.

Profile template:

CODE
<a href="/?act=Msg&CODE=04&MID=<!-- |id| -->" class="message-user" data-name="<!-- |author_name| -->">Send Message</a>



Custom Forum Structure:

CODE
<a href="/?act=Msg&CODE=04&MID={%id}" class="message-user" data-name="{%name}">Send Message</a>


This is also available in Custom BBCode format.

This post has been edited by Black: December 21st, 2013, 09:25 AM
Black
 Posted: December 21st, 2013, 09:08 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


This code has been updated to provide a rudimentary autosave feature. Every message typed into the text box in #message-window is automatically saved to the browser's local storage, allowing for partial message authoring/continuous message authoring between page loads. A button to force-save a message has also been included. However, saved messages are local to the browser that originally authored them and are not globally available across multiple browsers or machines. Sent messages are removed from local storage.

No changes to existing HTML or the BBCode plugin are necessary to ensure compatibility- just update the base script and you're good to go.
makeoutpretty
 Posted: December 20th, 2015, 08:14 PM
Quote
Member
Posts:25Group:MemberJoined:August 2nd, 2014
Send Message


can this be updated for the new custom structure?
Black
 Posted: December 20th, 2015, 09:12 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


This is based on stuff written directly into miniprofile templates, so it should be compatible out of the box as long as the instructions are followed and the key names are adjusted to match the new ones:

CODE
<a href="/?act=Msg&CODE=04&MID={{userId}}" class="message-user" data-name="{{userName}}">Send Message</a>

Topic Options Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation