Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-11 08:25:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixing up formatting bar to not be highlightable (and not have an outline

Browse Source 
when the span is focused on), also tweaked the formatting options to
behave a little more smartly when text is currently highlighted when it is
invoked.
This commit is contained in:
Julian Lam
2013-05-15 21:32:56 -04:00
parent e1a83099e8
commit dcbc93cacf
3 changed files with 49 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/style.less
View File

@@ -1,4 +1,3 @@
.caret-left { .caret-left {
border-left: 0; border-left: 0;
border-right: 4px solid black; border-right: 4px solid black;
@@ -6,7 +5,14 @@
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
} }
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
@@ -586,3 +592,11 @@ footer.footer {
a:hover { a:hover {
text-decoration:none; text-decoration:none;
} }
.formatting-bar {
.no-select;
span:focus {
outline: none;
}
}

44
public/src/app.js
View File

@@ -280,26 +280,46 @@ var socket,
}, false); }, false);
// Posting // Posting
var formattingBar = document.getElementById('formatting-bar'), var formattingBar = document.querySelector('.formatting-bar'),
postContentEl = document.getElementById('post_content'); postContentEl = document.getElementById('post_content');
jQuery('#post_window').slideToggle(0); jQuery('#post_window').slideToggle(0);
formattingBar.addEventListener('click', function(e) { formattingBar.addEventListener('click', function(e) {
if (e.target.nodeName === 'I') { if (e.target.nodeName === 'I' || e.target.nodeName === 'SPAN') {
switch(e.target.className) { var cursorEnd = postContentEl.value.length,
selectionStart = postContentEl.selectionStart,
selectionEnd = postContentEl.selectionEnd,
target;
if (e.target.nodeName === 'I') target = e.target;
else if (e.target.nodeName === 'SPAN') target = e.target.querySelector('i');
switch(target.className) {
case 'icon-bold': case 'icon-bold':
var cursorEnd = postContentEl.value.length; if (selectionStart === selectionEnd) {
postContentEl.value = postContentEl.value + '**bolded text**'; // Nothing selected
postContentEl.selectionStart = cursorEnd+2; postContentEl.value = postContentEl.value + '**bolded text**';
postContentEl.selectionEnd = postContentEl.value.length - 2; postContentEl.selectionStart = cursorEnd+2;
postContentEl.selectionEnd = postContentEl.value.length - 2;
} else {
// Text selected
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
postContentEl.selectionStart = selectionStart + 2;
postContentEl.selectionEnd = selectionEnd + 2;
}
break; break;
case 'icon-italic': case 'icon-italic':
var cursorEnd = postContentEl.value.length; if (selectionStart === selectionEnd) {
postContentEl.value = postContentEl.value + '*italicised text*'; // Nothing selected
postContentEl.selectionStart = cursorEnd+1; postContentEl.value = postContentEl.value + '*italicised text*';
postContentEl.selectionEnd = postContentEl.value.length - 1; postContentEl.selectionStart = cursorEnd+1;
postContentEl.selectionEnd = postContentEl.value.length - 1;
} else {
// Text selected
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
postContentEl.selectionStart = selectionStart + 1;
postContentEl.selectionEnd = selectionEnd + 1;
}
break; break;
case 'icon-list': case 'icon-list':
var cursorEnd = postContentEl.value.length; // Nothing selected
postContentEl.value = postContentEl.value + "\n\n* list item"; postContentEl.value = postContentEl.value + "\n\n* list item";
postContentEl.selectionStart = cursorEnd+4; postContentEl.selectionStart = cursorEnd+4;
postContentEl.selectionEnd = postContentEl.value.length; postContentEl.selectionEnd = postContentEl.value.length;

2
public/templates/header.tpl
View File

@@ -61,7 +61,7 @@
<div class="container"> <div class="container">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group" id="formatting-bar"> <div class="btn-group formatting-bar">
<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span> <span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span> <span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>
<!-- <span class="btn btn-link" tabindex="-1"><i class="icon-font"></i></span> --> <!-- <span class="btn btn-link" tabindex="-1"><i class="icon-font"></i></span> -->