Skip to content

Commit be8a6fe

Browse files
live627live627
committed
Update quick modify to support Ctrl+Enter
1 parent 4dcb70a commit be8a6fe

File tree

3 files changed

+141
-138
lines changed

3 files changed

+141
-138
lines changed

‎Themes/default/Display.template.php‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -352,25 +352,10 @@ function template_main()
352352
sClassName: \'quick_edit\',
353353
bShowModify: ', Config::$modSettings['show_modify'] ? 'true' : 'false', ',
354354
iTopicId: ', Utils::$context['current_topic'], ',
355-
sTemplateBodyEdit: ', Utils::escapeJavaScript('
356-
<div id="quick_edit_body_container">
357-
<div id="error_box" class="error"></div>
358-
<textarea class="editor" name="message" rows="12">%body%</textarea><br>
359-
<input type="hidden" name="' . Utils::$context['session_var'] . '" value="' . Utils::$context['session_id'] . '">
360-
<input type="hidden" name="topic" value="' . Utils::$context['current_topic'] . '">
361-
<input type="hidden" name="msg" value="%msg_id%">
362-
<div class="righttext quickModifyMargin">
363-
<input type="submit" name="post" value="' . Lang::$txt['save'] . '" onclick="return oQuickModify.modifySave(\'' . Utils::$context['session_id'] . '\', \'' . Utils::$context['session_var'] . '\');" class="button">' . (Utils::$context['show_spellchecking'] ? ' <input type="button" value="' . Lang::$txt['spell_check'] . '" onclick="spellCheck(\'quickModForm\', \'message\');" class="button">' : '') . ' <input type="submit" name="cancel" value="' . Lang::$txt['modify_cancel'] . '" onclick="return oQuickModify.modifyCancel();" class="button">
364-
</div>
365-
</div>'), ',
366-
sTemplateSubjectEdit: ', Utils::escapeJavaScript('<input type="text" name="subject" value="%subject%" size="80" maxlength="80">'), ',
367-
sTemplateBodyNormal: ', Utils::escapeJavaScript('%body%'), ',
368-
sTemplateSubjectNormal: ', Utils::escapeJavaScript('<a href="' . Config::$scripturl . '?topic=' . Utils::$context['current_topic'] . '.msg%msg_id%#msg%msg_id%" rel="nofollow">%subject%</a>'), ',
369-
sTemplateTopSubject: ', Utils::escapeJavaScript('%subject%'), ',
370-
sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::$txt['reason_for_edit'] . ': <input type="text" name="modify_reason" value="%modify_reason%" size="80" maxlength="80" class="quickModifyMargin">'), ',
371-
sTemplateReasonNormal: ', Utils::escapeJavaScript('%modify_text'), ',
372-
sErrorBorderStyle: ', Utils::escapeJavaScript('1px solid red'), (Utils::$context['can_reply']) ? ',
373-
sFormRemoveAccessKeys: \'postmodify\'' : '', '
355+
sSaveButtonText: ', Utils::escapeJavaScript(Lang::$txt['save']), ',
356+
sCancelButtonText: ', Utils::escapeJavaScript(Lang::$txt['modify_cancel']), ',
357+
sTemplateReasonEdit: ', Utils::escapeJavaScript(Lang::$txt['reason_for_edit']) . ',
358+
sErrorBorderStyle: ', Utils::escapeJavaScript('1px solid red'), '
374359
});
375360
376361
aJumpTo[aJumpTo.length] = new JumpTo({

‎Themes/default/scripts/script.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -540,6 +540,15 @@ function submitThisOnce(oControl)
540540

541541
return !smf_formSubmitted;
542542
}
543+
function reActivateThis(oControl)
544+
{
545+
// oControl might also be a form.
546+
var oForm = 'form' in oControl ? oControl.form : oControl;
547+
548+
var aTextareas = oForm.getElementsByTagName('textarea');
549+
for (var i = 0, n = aTextareas.length; i < n; i++)
550+
aTextareas[i].readOnly = false;
551+
}
543552

544553
// Deprecated, as innerHTML is supported everywhere.
545554
function setInnerHTML(oElement, sToValue)

‎Themes/default/scripts/topic.js‎

Lines changed: 128 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -287,35 +287,16 @@ function QuickModify(oOptions)
287287
this.sCurMessageId = '';
288288
this.oCurMessageDiv = null;
289289
this.oCurSubjectDiv = null;
290-
this.sMessageBuffer = '';
291-
this.sSubjectBuffer = '';
292-
this.aAccessKeys = new Array();
290+
291+
for (const el of document.getElementsByClassName(this.opt.sClassName)) {
292+
el.hidden = false;
293+
el.addEventListener('click', this.modifyMsg.bind(this, el.id.match(/\d+/)));
294+
}
293295
}
294296

295297
// Function called when a user presses the edit button.
296298
QuickModify.prototype.modifyMsg = function (iMessageId, blnShowSubject)
297299
{
298-
// Add backwards compatibility with old themes.
299-
if (typeof(sSessionVar) == 'undefined')
300-
sSessionVar = 'sesc';
301-
302-
// Removes the accesskeys from the quickreply inputs and saves them in an array to use them later
303-
if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined')
304-
{
305-
if (typeof(document.forms[this.opt.sFormRemoveAccessKeys]))
306-
{
307-
var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input');
308-
for (var i = 0; i < aInputs.length; i++)
309-
{
310-
if (aInputs[i].accessKey != '')
311-
{
312-
this.aAccessKeys[aInputs[i].name] = aInputs[i].accessKey;
313-
aInputs[i].accessKey = '';
314-
}
315-
}
316-
}
317-
}
318-
319300
// First cancel if there's another message still being edited.
320301
if (this.bInEditMode)
321302
this.modifyCancel();
@@ -325,7 +306,7 @@ QuickModify.prototype.modifyMsg = function (iMessageId, blnShowSubject)
325306

326307
// Send out the XMLhttp request to get more info
327308
ajax_indicator(true);
328-
sendXMLDocument.call(this, smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + iMessageId + ';modify;xml;' + smf_session_var + '=' + smf_session_id, '', this.onMessageReceived);
309+
getXMLDocument.call(this, smf_prepareScriptUrl(smf_scripturl) + 'action=quotefast;quote=' + iMessageId + ';modify;xml;' + smf_session_var + '=' + smf_session_id, this.onMessageReceived);
329310

330311
// Jump to the message
331312
document.getElementById('msg' + iMessageId).scrollIntoView();
@@ -347,106 +328,116 @@ QuickModify.prototype.onMessageReceived = function (XMLDoc)
347328
return this.modifyCancel();
348329

349330
// Replace the body part.
350-
for (var i = 0; i < XMLDoc.getElementsByTagName("message")[0].childNodes.length; i++)
331+
for (let i = 0; i < XMLDoc.getElementsByTagName("message")[0].childNodes.length; i++)
351332
sBodyText += XMLDoc.getElementsByTagName("message")[0].childNodes[i].nodeValue;
352-
this.oCurMessageDiv = document.getElementById(this.sCurMessageId);
353-
this.sMessageBuffer = getInnerHTML(this.oCurMessageDiv);
354333

355-
// We have to force the body to lose its dollar signs thanks to IE.
356-
sBodyText = sBodyText.replace(/\$/g, '{&dollarfix;$}');
357-
358-
// Actually create the content, with a bodge for disappearing dollar signs.
359-
setInnerHTML(this.oCurMessageDiv, this.opt.sTemplateBodyEdit.replace(/%msg_id%/g, this.sCurMessageId.substr(4)).replace(/%body%/, sBodyText).replace(/\{&dollarfix;\$\}/g, '$'));
360-
361-
// Replace the subject part.
362-
this.oCurSubjectDiv = document.getElementById('subject_' + this.sCurMessageId.substr(4));
363-
this.sSubjectBuffer = getInnerHTML(this.oCurSubjectDiv);
364-
365-
sSubjectText = XMLDoc.getElementsByTagName('subject')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}');
366-
setInnerHTML(this.oCurSubjectDiv, this.opt.sTemplateSubjectEdit.replace(/%subject%/, sSubjectText).replace(/\{&dollarfix;\$\}/g, '$'));
367-
368-
// Field for editing reason.
369-
sReasonText = XMLDoc.getElementsByTagName('reason')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}');
370-
371-
$(this.oCurMessageDiv).prepend(this.opt.sTemplateReasonEdit.replace(/%modify_reason%/, sReasonText).replace(/\{&dollarfix;\$\}/g, '$'));
334+
this.oCurMessageDiv = document.getElementById(this.sCurMessageId);
335+
this.oCurSubjectDiv = document.getElementById('subject_' + this.sCurMessageId.substring(4));
336+
if (this.oCurSubjectDiv !== null)
337+
this.oCurSubjectDiv.hidden = true;
338+
this.oCurMessageDiv.hidden = true;
339+
340+
// Actually create the content.
341+
const form = document.createElement("form");
342+
form.id = "quickModifyForm";
343+
344+
var messageInput = document.createElement("textarea");
345+
messageInput.name = "message";
346+
messageInput.cols = "80";
347+
messageInput.rows = "10";
348+
messageInput.innerHTML = sBodyText;
349+
messageInput.addEventListener('keydown', function(e) {
350+
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
351+
this.modifySave();
352+
}
353+
if (e.key === "Escape") {
354+
this.modifyCancel();
355+
}
356+
}.bind(this));
357+
358+
var subjectInput = document.createElement("input");
359+
subjectInput.name = "subject";
360+
subjectInput.maxLength = "80";
361+
subjectInput.size = "80";
362+
subjectInput.value = XMLDoc.getElementsByTagName('subject')[0].childNodes[0].nodeValue;
363+
364+
const reasonLabel = document.createElement("label");
365+
const reasonInput = document.createElement("input");
366+
reasonInput.name = "modify_reason";
367+
reasonInput.maxLength = "80";
368+
reasonInput.size = "80";
369+
reasonInput.value = XMLDoc.getElementsByTagName('reason')[0].childNodes[0].nodeValue;
370+
371+
const buttonGroup = document.createElement("div");
372+
buttonGroup.className = 'buttonlistend';
373+
374+
const cancelButton = document.createElement("button");
375+
cancelButton.className = 'button';
376+
cancelButton.textContent = this.opt.sCancelButtonText;
377+
cancelButton.addEventListener('click', this.modifyCancel.bind(this));
378+
379+
const saveButton = document.createElement("button");
380+
saveButton.className = 'button active';
381+
saveButton.textContent = this.opt.sSaveButtonText;
382+
saveButton.addEventListener('click', this.modifySave.bind(this));
383+
384+
reasonLabel.append(this.opt.sTemplateReasonEdit, reasonInput);
385+
buttonGroup.append(saveButton, cancelButton);
386+
form.append(subjectInput, messageInput, reasonLabel, buttonGroup);
387+
this.oCurMessageDiv.after(form);
388+
messageInput.focus();
389+
390+
if (this.opt.funcOnAfterCreate) {
391+
this.opt.funcOnAfterCreate.call(this, form);
392+
}
372393

373394
return true;
374395
}
375396

376397
// Function in case the user presses cancel (or other circumstances cause it).
377398
QuickModify.prototype.modifyCancel = function ()
378399
{
379-
// Roll back the HTML to its original state.
380400
if (this.oCurMessageDiv)
381401
{
382-
setInnerHTML(this.oCurMessageDiv, this.sMessageBuffer);
383-
setInnerHTML(this.oCurSubjectDiv, this.sSubjectBuffer);
402+
this.oCurMessageDiv.hidden = false;
403+
if (this.oCurSubjectDiv !== null)
404+
this.oCurSubjectDiv.hidden = false;
405+
document.forms.quickModifyForm.remove();
384406
}
385407

386408
// No longer in edit mode, that's right.
387409
this.bInEditMode = false;
388410

389-
// Let's put back the accesskeys to their original place
390-
if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined')
391-
{
392-
if (typeof(document.forms[this.opt.sFormRemoveAccessKeys]))
393-
{
394-
var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input');
395-
for (var i = 0; i < aInputs.length; i++)
396-
{
397-
if (typeof(this.aAccessKeys[aInputs[i].name]) != 'undefined')
398-
{
399-
aInputs[i].accessKey = this.aAccessKeys[aInputs[i].name];
400-
}
401-
}
402-
}
403-
}
404-
405411
return false;
406412
}
407413

408-
// The function called after a user wants to save her/his precious message.
409-
QuickModify.prototype.modifySave = function (sSessionId, sSessionVar)
414+
// The function called after a user wants to save his precious message.
415+
QuickModify.prototype.modifySave = function (e)
410416
{
417+
e && e.preventDefault && e.preventDefault();
418+
411419
// We cannot save if we weren't in edit mode.
412-
if (!this.bInEditMode)
420+
if (!this.bInEditMode) {
413421
return true;
422+
}
414423

415-
// Add backwards compatibility with old themes.
416-
if (typeof(sSessionVar) == 'undefined')
417-
sSessionVar = 'sesc';
424+
const x = [];
425+
submitThisOnce(document.forms.quickModifyForm);
426+
const form = document.forms.quickModifyForm;
418427

419-
// Let's put back the accesskeys to their original place
420-
if (typeof(this.opt.sFormRemoveAccessKeys) != 'undefined')
421-
{
422-
if (typeof(document.forms[this.opt.sFormRemoveAccessKeys]))
423-
{
424-
var aInputs = document.forms[this.opt.sFormRemoveAccessKeys].getElementsByTagName('input');
425-
for (var i = 0; i < aInputs.length; i++)
426-
{
427-
if (typeof(this.aAccessKeys[aInputs[i].name]) != 'undefined')
428-
{
429-
aInputs[i].accessKey = this.aAccessKeys[aInputs[i].name];
430-
}
431-
}
432-
}
428+
if (form.firstChild.className === 'errorbox') {
429+
form.firstChild.remove();
430+
form.message.style.border = '';
431+
form.subject.style.border = '';
433432
}
434433

435-
436-
var i, x = new Array(),
437-
oCaller = this,
438-
formData = {
439-
subject : document.forms.quickModForm['subject'].value,
440-
message : document.forms.quickModForm['message'].value,
441-
topic : parseInt(document.forms.quickModForm.elements['topic'].value),
442-
msg : parseInt(document.forms.quickModForm.elements['msg'].value),
443-
modify_reason : document.forms.quickModForm.elements['modify_reason'].value
444-
};
434+
for (const el of form.elements) {
435+
x.push(el.name + '=' + el.value.php_to8bit().php_urlencode());
436+
}
445437

446438
// Send in the XMLhttp request and let's hope for the best.
447439
ajax_indicator(true);
448-
449-
sendXMLDocument.call(this, smf_prepareScriptUrl(this.opt.sScriptUrl) + "action=jsmodify;topic=" + this.opt.iTopicId + ";" + smf_session_var + "=" + smf_session_id + ";xml", formData, this.onModifyDone);
440+
sendXMLDocument.call(this, smf_prepareScriptUrl(this.opt.sScriptUrl) + "action=jsmodify;topic=" + this.opt.iTopicId + ";msg=" + this.oCurMessageDiv.id.match(/\d+/) + ";" + smf_session_var + "=" + smf_session_id + ";xml", x.join("&"), this.onModifyDone);
450441

451442
return false;
452443
}
@@ -460,9 +451,16 @@ QuickModify.prototype.onModifyDone = function (XMLDoc)
460451
// If we didn't get a valid document, just cancel.
461452
if (!XMLDoc || !XMLDoc.getElementsByTagName('smf')[0])
462453
{
454+
reActivateThis(document.forms.quickModifyForm);
455+
document.forms.quickModifyForm.message.focus();
456+
463457
// Mozilla will nicely tell us what's wrong.
464-
if (XMLDoc.childNodes.length > 0 && XMLDoc.firstChild.nodeName == 'parsererror')
465-
setInnerHTML(document.getElementById('error_box'), XMLDoc.firstChild.textContent);
458+
if (XMLDoc.childNodes.length > 0 && XMLDoc.firstChild.nodeName == 'parsererror') {
459+
const oDiv = document.createElement('div');
460+
oDiv.innerHTML = XMLDoc.firstChild.textContent;
461+
oDiv.className = 'errorbox';
462+
document.forms.quickModifyForm.prepend(oDiv);
463+
}
466464
else
467465
this.modifyCancel();
468466

@@ -475,40 +473,51 @@ QuickModify.prototype.onModifyDone = function (XMLDoc)
475473

476474
if (body)
477475
{
476+
this.bInEditMode = false;
478477
// Show new body.
479-
var bodyText = '';
480-
for (var i = 0; i < body.childNodes.length; i++)
478+
let bodyText = '';
479+
for (let i = 0; i < body.childNodes.length; i++)
481480
bodyText += body.childNodes[i].nodeValue;
482481

483-
this.sMessageBuffer = this.opt.sTemplateBodyNormal.replace(/%body%/, bodyText.replace(/\$/g, '{&dollarfix;$}')).replace(/\{&dollarfix;\$\}/g,'$');
484-
setInnerHTML(this.oCurMessageDiv, this.sMessageBuffer);
482+
this.oCurMessageDiv.innerHTML = bodyText;
483+
this.oCurMessageDiv.hidden = false;
484+
485+
// Show new subject div, update in case it changed.
486+
if (this.oCurSubjectDiv !== null) {
487+
let oSubject = message.getElementsByTagName('subject')[0],
488+
sSubjectText = oSubject.childNodes[0].nodeValue;
485489

486-
// Show new subject, but only if we want to...
487-
var oSubject = message.getElementsByTagName('subject')[0];
488-
var sSubjectText = oSubject.childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}');
489-
var sTopSubjectText = oSubject.childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}');
490-
this.sSubjectBuffer = this.opt.sTemplateSubjectNormal.replace(/%msg_id%/g, this.sCurMessageId.substr(4)).replace(/%subject%/, sSubjectText).replace(/\{&dollarfix;\$\}/g,'$');
491-
setInnerHTML(this.oCurSubjectDiv, this.sSubjectBuffer);
490+
this.oCurSubjectDiv.innerHTML = sSubjectText;
491+
this.oCurSubjectDiv.hidden = false;
492+
}
492493

493-
// If this is the first message, also update the topic subject.
494-
if (oSubject.getAttribute('is_first') == '1')
495-
setInnerHTML(document.getElementById('top_subject'), this.opt.sTemplateTopSubject.replace(/%subject%/, sTopSubjectText).replace(/\{&dollarfix;\$\}/g, '$'));
494+
document.forms.quickModifyForm.remove();
496495

497496
// Show this message as 'modified on x by y'.
498497
if (this.opt.bShowModify)
499-
$('#modified_' + this.sCurMessageId.substr(4)).html(message.getElementsByTagName('modified')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'));
498+
{
499+
let modified = document.getElementById('modified_' + this.sCurMessageId.substring(4));
500+
modified.innerHTML = message.getElementsByTagName('modified')[0].childNodes[0].nodeValue;
501+
}
500502

501503
// Show a message indicating the edit was successfully done.
502-
$('<div/>',{
503-
text: message.getElementsByTagName('success')[0].childNodes[0].nodeValue.replace(/\$/g, '{&dollarfix;$}'),
504-
class: 'infobox'
505-
}).prependTo('#' + this.sCurMessageId).delay(5000).fadeOutAndRemove(400);
504+
const oDiv = document.createElement('div');
505+
oDiv.textContent = message.getElementsByTagName('success')[0].childNodes[0].nodeValue;
506+
oDiv.className = 'infobox';
507+
this.oCurMessageDiv.before(oDiv);
508+
setTimeout(() => oDiv.remove(), 4000);
506509
}
507510
else if (error)
508511
{
509-
setInnerHTML(document.getElementById('error_box'), error.childNodes[0].nodeValue);
510-
document.forms.quickModForm.message.style.border = error.getAttribute('in_body') == '1' ? this.opt.sErrorBorderStyle : '';
511-
document.forms.quickModForm.subject.style.border = error.getAttribute('in_subject') == '1' ? this.opt.sErrorBorderStyle : '';
512+
reActivateThis(document.forms.quickModifyForm);
513+
const oDiv = document.createElement('div');
514+
oDiv.innerHTML = error.childNodes[0].nodeValue;
515+
oDiv.className = 'errorbox';
516+
document.forms.quickModifyForm.prepend(oDiv);
517+
518+
document.forms.quickModifyForm.message.focus();
519+
document.forms.quickModifyForm.message.style.border = error.getAttribute('in_body') == '1' ? this.opt.sErrorBorderStyle : '';
520+
document.forms.quickModifyForm.subject.style.border = error.getAttribute('in_subject') == '1' ? this.opt.sErrorBorderStyle : '';
512521
}
513522
}
514523

0 commit comments

Comments
 (0)