Cool_Tools/vichan
1
0
Fork 0
mirror of https://github.com/vichan-devel/vichan.git synced 2024-11-24 07:30:10 +01:00
Code Releases Wiki Activity

Revert "Comment toolbar update and Thread stats addition"

Browse Source
This commit is contained in:
Fredrick Brennan 2014-11-02 07:08:01 +08:00 committed by czaks
parent 69a6631742
commit 1b0f5fd24c
2 changed files with 218 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

520
js/comment-toolbar.js
View File

@ -8,379 +8,253 @@
* $config['additional_javascript'][] = 'js/comment-toolbar.js'; * $config['additional_javascript'][] = 'js/comment-toolbar.js';
*/ */
if (active_page == 'thread' || active_page == 'index') { if (active_page == 'thread' || active_page == 'index') {
var formatText = (function($){ $(document).ready(function () {
"use strict"; 'use strict';
var self = {}; var formats = {
self.rules = {
spoiler: {
text: 'Spoiler',
key: 's',
multiline: false,
exclusiveline: false,
prefix:'**',
suffix:'**'
},
italics: {
text: 'Italics',
key: 'i',
multiline: false,
exclusiveline: false,
prefix: "''",
suffix: "''"
},
bold: { bold: {
text: 'Bold', displayText: 'B',
key: 'b', altText: 'bold',
multiline: false, styleCSS: 'font-weight: bold;',
exclusiveline: false, options: {
prefix: "'''", prefix: "'''",
suffix: "'''" suffix: "'''"
}, },
underline: { edit: function (box, options) {
text: 'Underline', wrapSelection(box, options);
key: 'u', },
multiline: false, shortcutKey: 'b'
exclusiveline: false, },
prefix:'__', italics: {
suffix:'__' 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: { code: {
text: 'Code', displayText: 'code',
key: 'f', altText: "code formatting",
multiline: true, styleCSS: 'font-family: "Courier New", Courier, monospace;',
exclusiveline: false, options: {
prefix: '[code]', prefix: '[code]',
suffix: '[/code]' suffix: '[/code]',
multiline: true
},
edit: function (box, options) {
wrapSelection(box, options);
},
shortcutKey: 'd'
}, },
strike: { strike: {
text: 'Strike', displayText: 'strike',
key: 'd', altText: 'strikethrough',
multiline:false, styleCSS: 'text-decoration: line-through;',
exclusiveline:false, options: {
prefix:'~~', prefix: '~~',
suffix:'~~' suffix: '~~'
},
edit: function (box, options) {
wrapSelection(box, options);
}
}, },
heading: { heading: {
text: 'Heading', displayText: 'heading',
key: 'r', altText: 'redtext',
multiline:false, styleCSS: 'color: #AF0A0F; font-weight: bold;',
exclusiveline:true, options: {
prefix:'==', prefix: '==',
suffix:'==' suffix: '==',
exclusiveLine: true
},
edit: function (box, options) {
wrapSelection(box, options);
}
} }
}; };
self.toolbar_wrap = function(node) { var key, name, altText, ele;
if (!localStorage.formatText_enable || localStorage.formatText_enable == 'false') return; var strBuilder = [];
var parent = $(node).parents('form[name="post"]'); var subStr = '';
self.wrap(parent.find('#body')[0],'textarea[name="body"]', parent.find('.format-text > select')[0].value, false); var styleRules = '';
};
self.wrap = function(ref, target, option, expandedwrap) { //not exactly mine
if (!localStorage.formatText_enable || localStorage.formatText_enable == 'false') return; var wrapSelection = function (box, options) {
// clean and validate arguments if (box == null) {
if (ref == null) return; return;
var settings = {multiline: false, exclusiveline: false, prefix:'', suffix: null}; }
$.extend(settings,JSON.parse(localStorage.formatText_rules)[option]); var prefix = options.prefix;
var suffix = options.suffix;
var multiline = options.multiline || false;
var exclusiveLine = options.exclusiveLine || false;
// resolve targets into array of proper node elements
// yea, this is overly verbose, oh well.
var res = [];
if (target instanceof Array) {
for (var indexa in target) {
if (target.hasOwnProperty(indexa)) {
if (typeof target[indexa] == 'string') {
var nodes = $(target[indexa]);
for (var indexb in nodes) {
if (indexa.hasOwnProperty(indexb)) res.push(nodes[indexb]);
}
} else {
res.push(target[indexa]);
}
}
}
} else {
if (typeof target == 'string') {
var nodes = $(target);
for (var index in nodes) {
if (nodes.hasOwnProperty(index)) res.push(nodes[index]);
}
} else {
res.push(target);
}
}
target = res;
//record scroll top to restore it later. //record scroll top to restore it later.
var scrollTop = ref.scrollTop; 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);
//We will restore the selection later, so record the current selection
var selectionStart = ref.selectionStart;
var selectionEnd = ref.selectionEnd;
var text = ref.value;
var before = text.substring(0, selectionStart);
var selected = text.substring(selectionStart, selectionEnd);
var after = text.substring(selectionEnd);
var whiteSpace = [" ","\t"];
var breakSpace = ["\r","\n"]; var breakSpace = ["\r","\n"];
var cursor; var trailingSpace = "";
var cursor = selectedText.length - 1;
// handles multiline selections on formatting that doesn't support spanning over multiple lines //remove trailing space
if (!settings.multiline) selected = selected.replace(/(\r|\n|\r\n)/g,settings.suffix +"$1"+ settings.prefix); while (cursor > 0 && selectedText[cursor] === " ") {
trailingSpace += " ";
// handles formatting that requires it to be on it's own line OR if the user wishes to expand the wrap to the nearest linebreak
if (settings.exclusiveline || expandedwrap) {
// buffer the begining of the selection until a linebreak
cursor = before.length -1;
while (cursor >= 0 && breakSpace.indexOf(before.charAt(cursor)) == -1) {
cursor--; cursor--;
} }
selected = before.substring(cursor +1) + selected; selectedText = selectedText.substring(0, cursor + 1);
before = before.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 // buffer the end of the selection until a linebreak
cursor = 0; cursor = 0;
while (cursor < after.length && breakSpace.indexOf(after.charAt(cursor)) == -1) { while (cursor < afterSelection.length && breakSpace.indexOf(afterSelection.charAt(cursor)) == -1) {
cursor++; cursor++;
} }
selected += after.substring(0, cursor); selectedText += afterSelection.substring(0, cursor);
after = after.substring(cursor); afterSelection = afterSelection.substring(cursor);
} }
// set values box.value = beforeSelection + prefix + selectedText + suffix + trailingSpace + afterSelection;
var res = before + settings.prefix + selected + settings.suffix + after;
$(target).val(res);
// restore the selection area and scroll of the reference box.selectionEnd = beforeSelection.length + prefix.length + selectedText.length;
ref.selectionEnd = before.length + settings.prefix.length + selected.length;
if (selectionStart === selectionEnd) { if (selectionStart === selectionEnd) {
ref.selectionStart = ref.selectionEnd; box.selectionStart = box.selectionEnd;
} else { } else {
ref.selectionStart = before.length + settings.prefix.length; box.selectionStart = beforeSelection.length + prefix.length;
} }
ref.scrollTop = scrollTop; box.scrollTop = scrollTop;
}; };
self.build_toolbars = function(){ /* Generate the HTML for the toolbar
if (!localStorage.formatText_enable || localStorage.formatText_enable == 'false') return; */
if (localStorage.formatText_toolbar == 'true'){ for (ele in formats) {
// remove existing toolbars if (formats.hasOwnProperty(ele) && formats[ele].displayText != null) {
if ($('.format-text').length > 0) $('.format-text').remove(); name = formats[ele].displayText;
altText = formats[ele].altText || '';
key = formats[ele].shortcutKey;
// Place toolbar above each textarea input //add tooltip text
var name, options = '', rules = JSON.parse(localStorage.formatText_rules); if (altText) {
for (var index in rules) { if (key) {
if (!rules.hasOwnProperty(index)) continue; altText += ' (ctrl+'+ key +')';
name = rules[index].text;
//add hint if key exists
if (rules[index].key) {
name += ' (CTRL + '+ rules[index].key.toUpperCase() +')';
} }
options += '<option value="'+ index +'">'+ name +'</option>'; altText = 'title="'+ altText +'"';
}
$('[name="body"]').before('<div class="format-text"><a href="javascript:;" onclick="formatText.toolbar_wrap(this);">Wrap</a><select>'+ options +'</select></div>');
$('body').append('<style>#quick-reply .format-text>a{width:15%;display:inline-block;text-align:center;}#quick-reply .format-text>select{width:85%;};</style>');
}
};
self.add_rule = function(rule, index){
if (rule === undefined) rule = {
text: 'New Rule',
key: '',
multiline:false,
exclusiveline:false,
prefix:'',
suffix:''
} }
// generate an id for the rule subStr = '<a href="javascript:void(0)" '+ altText +' id="tf-'+ ele +'">'+ name +'</a>';
if (index === undefined) { strBuilder.push(subStr);
var rules = JSON.parse(localStorage.formatText_rules);
while (rules[index] || index === undefined) {
index = ''
index +='abcdefghijklmnopqrstuvwxyz'.substr(Math.floor(Math.random()*26),1);
index +='abcdefghijklmnopqrstuvwxyz'.substr(Math.floor(Math.random()*26),1);
index +='abcdefghijklmnopqrstuvwxyz'.substr(Math.floor(Math.random()*26),1);
}
}
if (window.Options && Options.get_tab('formatting')){
var html = $('<div class="format_rule" name="'+ index +'"></div>').html('\
<input type="text" name="text" class="format_option" size="10" value=\"'+ rule.text.replace(/"/g, '&quot;') +'\">\
<input type="checkbox" name="multiline" class="format_option" '+ (rule.multiline ? 'checked' : '') +'>\
<input type="checkbox" name="exclusiveline" class="format_option" '+ (rule.exclusiveline ? 'checked' : '') +'>\
<input type="text" name="prefix" class="format_option" size="8" value=\"'+ (rule.prefix ? rule.prefix.replace(/"/g, '&quot;') : '') +'\">\
<input type="text" name="suffix" class="format_option" size="8" value=\"'+ (rule.suffix ? rule.suffix.replace(/"/g, '&quot;') : '') +'\">\
<input type="text" name="key" class="format_option" size="2" maxlength="1" value=\"'+ rule.key +'\">\
<input type="button" value="X" onclick="if(confirm(\'Do you wish to remove the '+ rule.text +' formatting rule?\'))$(this).parent().remove();">\
');
if ($('.format_rule').length > 0) {
$('.format_rule').last().after(html);
} else { } else {
Options.extend_tab('formatting', html); continue;
} }
} }
};
self.save_rules = function(){ $( 'textarea[name="body"]' ).before( '<div class="tf-toolbar"></div>' );
var newrules = {}, rules = $('.format_rule'); $( '.tf-toolbar' ).html( strBuilder.join(' | ') );
for (var index=0;rules[index];index++) {
newrules[$(rules[index]).attr('name')] = { /* Sets the CSS style
text: $(rules[index]).find('[name="text"]').val(), */
key: $(rules[index]).find('[name="key"]').val(), styleRules = '\n/* generated by 8chan Formatting Tools */'+
prefix: $(rules[index]).find('[name="prefix"]').val(), '\n.tf-toolbar {padding: 0px 5px 1px 5px;}'+
suffix: $(rules[index]).find('[name="suffix"]').val(), '\n.tf-toolbar :link {text-decoration: none;}';
multiline: $(rules[index]).find('[name="multiline"]').is(':checked'), for (ele in formats) {
exclusiveline: $(rules[index]).find('[name="exclusiveline"]').is(':checked') if (formats.hasOwnProperty(ele) && formats[ele].styleCSS) {
}; styleRules += ' \n#tf-' + ele + ' {' + formats[ele].styleCSS + '}';
} }
localStorage.formatText_rules = JSON.stringify(newrules); }
self.build_toolbars(); //add CSS rule to user's custom CSS if it exist
}; if ($( '.user-css' ).length !== 0) {
$( '.user-css' ).append( styleRules );
self.reset_rules = function() {
localStorage.formatText_rules = JSON.stringify(self.rules);
};
// store default rules for customizing
if (!localStorage.formatText_rules) self.reset_rules();
// Add settings to Options panel general tab
if (window.Options && Options.get_tab('general')) {
var s1 = '#formatText_enable>input', s2 = '#formatText_keybinds>input', s3 = '#formatText_toolbar>input', e = 'change';
Options.extend_tab('general', '\
<fieldset>\
<legend>Formatting Options</legend>\
<label id="formatText_enable"><input type="checkbox" checked="checked" id="formatText_enable">' + _('Enable post formatting') + '</label>\
<label id="formatText_keybinds"><input type="checkbox" checked="checked" id="formatText_keybinds">' + _('Enable formatting keybinds') + '</label>\
<label id="formatText_toolbar"><input type="checkbox" checked="checked" id="formatText_toolbar">' + _('Show formatting toolbar') + '</label>\
</fieldset>\
');
} else { } else {
var s1 = '#formatText_enable', s2 = '#formatText_keybinds', s3 = '#formatText_toolbar', e = 'click'; $( 'body' ).append( '<style>'+ styleRules +'\n</style>' );
$('hr:first').before('<div id="formatText_enable" style="text-align:right"><a class="unimportant" href="javascript:void(0)">'+ _('Enable post formatting') +'</a></div>');
$('hr:first').before('<div id="formatText_keybinds" style="text-align:right"><a class="unimportant" href="javascript:void(0)">'+ _('Enable formatting keybinds') +'</a></div>');
$('hr:first').before('<div id="formatText_toolbar" style="text-align:right"><a class="unimportant" href="javascript:void(0)">'+ _('Show formatting toolbar') +'</a></div>');
} }
// setting for enableing text formatting /* Attach event listeners
$(s1).on(e, function(e) { */
if (!localStorage.formatText_enable || localStorage.formatText_enable == 'false') { $( 'body' ).on( 'keydown', 'textarea[name="body"]', {formats: formats}, function (e) {
localStorage.formatText_enable = 'true'; //shortcuts
if (window.Options && Options.get_tab('general')) e.target.checked = true; if (e.ctrlKey) {
} else { var ch = String.fromCharCode(e.which).toLowerCase();
localStorage.formatText_enable = 'false'; var box = e.target;
if (window.Options && Options.get_tab('general')) e.target.checked = false; 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);
// setting for enableing formatting keybinds
$(s2).on(e, function(e) {
if (!localStorage.formatText_keybinds || localStorage.formatText_keybinds == 'false') {
localStorage.formatText_keybinds = 'true';
if (window.Options && Options.get_tab('general')) e.target.checked = true;
} else {
localStorage.formatText_keybinds = 'false';
if (window.Options && Options.get_tab('general')) e.target.checked = false;
}
});
// setting for toolbar injection
$(s3).on(e, function(e) {
if (!localStorage.formatText_toolbar || localStorage.formatText_toolbar == 'false') {
localStorage.formatText_toolbar = 'true';
if (window.Options && Options.get_tab('general')) e.target.checked = true;
formatText.build_toolbars();
} else {
localStorage.formatText_toolbar = 'false';
if (window.Options && Options.get_tab('general')) e.target.checked = false;
$('.format-text').remove();
}
});
// make sure the tab settings are switch properly at loadup
if (window.Options && Options.get_tab('general')) {
if (localStorage.formatText_enable == 'true') $(s1)[0].checked = true;
else $(s1)[0].checked = false;
if (localStorage.formatText_keybinds == 'true') $(s2)[0].checked = true;
else $(s2)[0].checked = false;
if (localStorage.formatText_toolbar == 'true') $(s2)[0].checked = true;
else $(s3)[0].checked = false;
}
// add the tab for customizing the format settings
if (window.Options && !Options.get_tab('formatting')) {
Options.add_tab('formatting', 'angle-right', 'Customize Formatting');
Options.extend_tab('formatting', '\
<style>\
.format_option{\
margin-right:5px;\
overflow:initial;\
font-size:15px;\
}\
.format_option[type="text"]{\
text-align:center;\
padding-bottom: 2px;\
padding-top: 2px;\
}\
.format_option:last-child{\
margin-right:0;\
}\
fieldset{\
margin-top:5px;\
}\
</style>\
');
// Data control row
Options.extend_tab('formatting', '\
<button onclick="formatText.add_rule();">Add Rule</button>\
<button onclick="formatText.save_rules();">Save Rules</button>\
<button onclick="formatText.reset_rules();">Reset Rules to Default</button>\
');
// Descriptor row
Options.extend_tab('formatting', '\
<span class="format_option" style="margin-left:25px;">Name</span>\
<span class="format_option" style="margin-left:45px;" title="Multi-line: Allow formatted area to contain linebreaks.">ML</span>\
<span class="format_option" style="margin-left:0px;" title="Exclusive-line: Require formatted area to start after and end before a linebreak.">EL</span>\
<span class="format_option" style="margin-left:25px;" title="Text injected at the start of a format area.">Prefix</span>\
<span class="format_option" style="margin-left:60px;" title="Text injected at the end of a format area.">Suffix</span>\
<span class="format_option" style="margin-left:40px;" title="Optional keybind value to allow keyboard shortcut access.">Key</span>\
');
// Rule rows
var rules = JSON.parse(localStorage.formatText_rules);
for (var index in rules){
if (!rules.hasOwnProperty(index)) continue;
self.add_rule(rules[index], index);
}
}
return self;
})(jQuery);
// run initial toolbar injection
formatText.build_toolbars();
//attach listeners to <body> so it also works on quick-reply box
$('body').on('keydown', '#body, #quick-reply #body', function(e) {
if (!localStorage.formatText_enable || localStorage.formatText_enable == 'false') return;
if (!localStorage.formatText_keybinds || localStorage.formatText_keybinds == 'false') return;
var key = String.fromCharCode(e.which).toLowerCase();
var rules = JSON.parse(localStorage.formatText_rules);
for (var index in rules) {
if (!rules.hasOwnProperty(index)) continue;
if (key === rules[index].key && e.ctrlKey) {
e.preventDefault(); e.preventDefault();
if (e.shiftKey) {
formatText.wrap(e.target, 'textarea[name="body"]', index, true);
} else {
formatText.wrap(e.target, 'textarea[name="body"]', index, false);
} }
} }
} }
}); });
$(document).trigger('formatText'); $( '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';
// }
// });
});
} }

1
stylesheets/style.css
View File

@ -896,7 +896,6 @@ div.thread:hover {
right: 0px; right: 0px;
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
overflow-y: auto;
} }
.options_tab h2 { .options_tab h2 {