initial commit
This commit is contained in:
Markerov
czaks
parent
59ee8a990f
commit
9265ebea43
260
js/comment-toolbar.js
Normal file
260
js/comment-toolbar.js
Normal file
@ -0,0 +1,260 @@
|
||||
/*
|
||||
* comment-toolbar.js
|
||||
* - Adds a toolbar above the commenting area containing most of 8Chan's formatting options
|
||||
* - Press Esc to close quick-reply window when it's in focus
|
||||
*
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
* $config['additional_javascript'][] = 'js/comment-toolbar.js';
|
||||
*/
|
||||
if (active_page == 'thread' || active_page == 'index') {
|
||||
$(document).ready(function () {
|
||||
'use strict';
|
||||
var formats = {
|
||||
bold: {
|
||||
displayText: 'B',
|
||||
altText: 'bold',
|
||||
styleCSS: 'font-weight: bold;',
|
||||
options: {
|
||||
prefix: "'''",
|
||||
suffix: "'''"
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
},
|
||||
shortcutKey: 'b'
|
||||
},
|
||||
italics: {
|
||||
displayText: 'i',
|
||||
altText: 'italics',
|
||||
styleCSS: 'font-style: italic;',
|
||||
options: {
|
||||
prefix: "''",
|
||||
suffix: "''"
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
},
|
||||
shortcutKey: 'i'
|
||||
},
|
||||
under: {
|
||||
displayText: 'U',
|
||||
altText: 'underline',
|
||||
styleCSS: 'text-decoration: underline;',
|
||||
options: {
|
||||
prefix: '__',
|
||||
suffix: '__'
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
},
|
||||
shortcutKey: 'u'
|
||||
},
|
||||
spoiler: {
|
||||
displayText: 'spoiler',
|
||||
altText: 'mark as spoiler',
|
||||
styleCSS: '',
|
||||
options: {
|
||||
prefix: '[spoiler]',
|
||||
suffix: '[/spoiler]'
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
},
|
||||
shortcutKey: 's'
|
||||
},
|
||||
code: {
|
||||
displayText: 'code',
|
||||
altText: "code formatting",
|
||||
styleCSS: 'font-family: "Courier New", Courier, monospace;',
|
||||
options: {
|
||||
prefix: '[code]',
|
||||
suffix: '[/code]',
|
||||
multiline: true
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
},
|
||||
shortcutKey: 'd'
|
||||
},
|
||||
strike: {
|
||||
displayText: 'strike',
|
||||
altText: 'strikethrough',
|
||||
styleCSS: 'text-decoration: line-through;',
|
||||
options: {
|
||||
prefix: '~~',
|
||||
suffix: '~~'
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
displayText: 'heading',
|
||||
altText: 'redtext',
|
||||
styleCSS: 'color: #AF0A0F; font-weight: bold;',
|
||||
options: {
|
||||
prefix: '==',
|
||||
suffix: '==',
|
||||
exclusiveLine: true
|
||||
},
|
||||
edit: function (box, options) {
|
||||
wrapSelection(box, options);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var key, name, altText, ele;
|
||||
var strBuilder = [];
|
||||
var subStr = '';
|
||||
var styleRules = '';
|
||||
|
||||
//not exactly mine
|
||||
var wrapSelection = function (box, options) {
|
||||
if (box == null) {
|
||||
return;
|
||||
}
|
||||
var prefix = options.prefix;
|
||||
var suffix = options.suffix;
|
||||
var multiline = options.multiline || false;
|
||||
var exclusiveLine = options.exclusiveLine || false;
|
||||
|
||||
//record scroll top to restore it later.
|
||||
var scrollTop = box.scrollTop;
|
||||
var selectionStart = box.selectionStart;
|
||||
var selectionEnd = box.selectionEnd;
|
||||
var text = box.value;
|
||||
var beforeSelection = text.substring(0, selectionStart);
|
||||
var selectedText = text.substring(selectionStart, selectionEnd);
|
||||
var afterSelection = text.substring(selectionEnd);
|
||||
|
||||
var breakSpace = ["\r","\n"];
|
||||
var trailingSpace = "";
|
||||
var cursor = selectedText.length - 1;
|
||||
|
||||
//remove trailing space
|
||||
while (cursor > 0 && selectedText[cursor] === " ") {
|
||||
trailingSpace += " ";
|
||||
cursor--;
|
||||
}
|
||||
selectedText = selectedText.substring(0, cursor + 1);
|
||||
|
||||
if (!multiline)
|
||||
selectedText = selectedText.replace(/(\r|\n|\r\n)/g, suffix +"$1"+ prefix);
|
||||
|
||||
if (exclusiveLine) {
|
||||
// buffer the begining of the selection until a linebreak
|
||||
cursor = beforeSelection.length -1;
|
||||
while (cursor >= 0 && breakSpace.indexOf(beforeSelection.charAt(cursor)) == -1) {
|
||||
cursor--;
|
||||
}
|
||||
selectedText = beforeSelection.substring(cursor +1) + selectedText;
|
||||
beforeSelection = beforeSelection.substring(0, cursor +1);
|
||||
|
||||
// buffer the end of the selection until a linebreak
|
||||
cursor = 0;
|
||||
while (cursor < afterSelection.length && breakSpace.indexOf(afterSelection.charAt(cursor)) == -1) {
|
||||
cursor++;
|
||||
}
|
||||
selectedText += afterSelection.substring(0, cursor);
|
||||
afterSelection = afterSelection.substring(cursor);
|
||||
}
|
||||
|
||||
box.value = beforeSelection + prefix + selectedText + suffix + trailingSpace + afterSelection;
|
||||
|
||||
box.selectionEnd = beforeSelection.length + prefix.length + selectedText.length;
|
||||
if (selectionStart === selectionEnd) {
|
||||
box.selectionStart = box.selectionEnd;
|
||||
} else {
|
||||
box.selectionStart = beforeSelection.length + prefix.length;
|
||||
}
|
||||
box.scrollTop = scrollTop;
|
||||
};
|
||||
|
||||
/* Generate the HTML for the toolbar
|
||||
*/
|
||||
for (ele in formats) {
|
||||
if (formats.hasOwnProperty(ele) && formats[ele].displayText != null) {
|
||||
name = formats[ele].displayText;
|
||||
altText = formats[ele].altText || '';
|
||||
key = formats[ele].shortcutKey;
|
||||
|
||||
//add tooltip text
|
||||
if (altText) {
|
||||
if (key) {
|
||||
altText += ' (ctrl+'+ key +')';
|
||||
}
|
||||
altText = 'title="'+ altText +'"';
|
||||
}
|
||||
|
||||
subStr = '<a href="javascript:void(0)" '+ altText +' id="tf-'+ ele +'">'+ name +'</a>';
|
||||
strBuilder.push(subStr);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
$( 'textarea[name="body"]' ).before( '<div class="tf-toolbar"></div>' );
|
||||
$( '.tf-toolbar' ).html( strBuilder.join(' | ') );
|
||||
|
||||
/* Sets the CSS style
|
||||
*/
|
||||
styleRules = '\n/* generated by 8chan Formatting Tools */'+
|
||||
'\n.tf-toolbar {padding: 0px 5px 1px 5px;}'+
|
||||
'\n.tf-toolbar :link {text-decoration: none;}';
|
||||
for (ele in formats) {
|
||||
if (formats.hasOwnProperty(ele) && formats[ele].styleCSS) {
|
||||
styleRules += ' \n#tf-' + ele + ' {' + formats[ele].styleCSS + '}';
|
||||
}
|
||||
}
|
||||
//add CSS rule to user's custom CSS if it exist
|
||||
if ($( '.user-css' ).length !== 0) {
|
||||
$( '.user-css' ).append( styleRules );
|
||||
} else {
|
||||
$( 'body' ).append( '<style>'+ styleRules +'\n</style>' );
|
||||
}
|
||||
|
||||
/* Attach event listeners
|
||||
*/
|
||||
$( 'body' ).on( 'keydown', 'textarea[name="body"]', {formats: formats}, function (e) {
|
||||
//shortcuts
|
||||
if (e.ctrlKey) {
|
||||
var ch = String.fromCharCode(e.which).toLowerCase();
|
||||
var box = e.target;
|
||||
var formats = e.data.formats;
|
||||
for (var ele in formats) {
|
||||
if (formats.hasOwnProperty(ele) && (ch === formats[ele].shortcutKey)) {
|
||||
formats[ele].edit(box, formats[ele].options);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$( 'body' ).on( 'keydown', '#quick-reply textarea[name="body"]', {formats: formats}, function (e) {
|
||||
//close quick reply when esc is prssed
|
||||
if (e.which === 27) {
|
||||
$( '.close-btn' ).trigger( 'click' );
|
||||
}
|
||||
});
|
||||
$( 'body' ).on( 'click', '.tf-toolbar a[id]', {formats: formats}, function (e) {
|
||||
//toolbar buttons
|
||||
var formats = e.data.formats;
|
||||
var box = $(e.target).parent().next()[0];
|
||||
|
||||
for (var ele in formats) {
|
||||
if (formats.hasOwnProperty(ele) && (e.target.id === 'tf-' + ele)) {
|
||||
formats[ele].edit(box, formats[ele].options);
|
||||
}
|
||||
}
|
||||
});
|
||||
// $( 'body' ).on( 'keydown', function (e) {
|
||||
// if (e.which === 67 &&
|
||||
// e.target.nodeName !== 'INPUT' && //The C, the whole C, and nothing but the C
|
||||
// e.target.nodeName !== 'TEXTAREA' &&
|
||||
// !(e.ctrlKey || e.altKey || e.shiftKey)) {
|
||||
// document.location.href = '//'+ document.location.host +'/'+ board_name +'/catalog.html';
|
||||
// }
|
||||
// });
|
||||
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user