mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-23 00:46:16 -04:00
Select formatting button on selection (#3301)
[feat] Select button when selection is on formatted text
This commit is contained in:
parent
f1fcd16894
commit
454f539561
3 changed files with 206 additions and 12 deletions
|
@ -400,7 +400,19 @@ AttributeManager.prototype = _(AttributeManager.prototype).extend({
|
|||
this.removeAttributeOnLine(lineNum, attributeName) :
|
||||
this.setAttributeOnLine(lineNum, attributeName, attributeValue);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
hasAttributeOnSelectionOrCaretPosition: function(attributeName) {
|
||||
var hasSelection = ((this.rep.selStart[0] !== this.rep.selEnd[0]) || (this.rep.selEnd[1] !== this.rep.selStart[1]));
|
||||
var hasAttrib;
|
||||
if (hasSelection) {
|
||||
hasAttrib = this.getAttributeOnSelection(attributeName);
|
||||
}else {
|
||||
var attributesOnCaretPosition = this.getAttributesOnCaret();
|
||||
hasAttrib = _.contains(_.flatten(attributesOnCaretPosition), attributeName);
|
||||
}
|
||||
return hasAttrib;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = AttributeManager;
|
||||
|
|
|
@ -75,6 +75,9 @@ function Ace2Inner(){
|
|||
var EDIT_BODY_PADDING_TOP = 8;
|
||||
var EDIT_BODY_PADDING_LEFT = 8;
|
||||
|
||||
var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough'];
|
||||
var SELECT_BUTTON_CLASS = 'selected';
|
||||
|
||||
var caughtErrors = [];
|
||||
|
||||
var thisAuthor = '';
|
||||
|
@ -2472,17 +2475,11 @@ function Ace2Inner(){
|
|||
}
|
||||
}
|
||||
|
||||
if (selectionAllHasIt)
|
||||
{
|
||||
documentAttributeManager.setAttributesOnRange(rep.selStart, rep.selEnd, [
|
||||
[attributeName, '']
|
||||
]);
|
||||
}
|
||||
else
|
||||
{
|
||||
documentAttributeManager.setAttributesOnRange(rep.selStart, rep.selEnd, [
|
||||
[attributeName, 'true']
|
||||
]);
|
||||
|
||||
var attributeValue = selectionAllHasIt ? '' : 'true';
|
||||
documentAttributeManager.setAttributesOnRange(rep.selStart, rep.selEnd, [[attributeName, attributeValue]]);
|
||||
if (attribIsFormattingStyle(attributeName)) {
|
||||
updateStyleButtonState(attributeName, !selectionAllHasIt); // italic, bold, ...
|
||||
}
|
||||
}
|
||||
editorInfo.ace_toggleAttributeOnSelection = toggleAttributeOnSelection;
|
||||
|
@ -2911,6 +2908,9 @@ function Ace2Inner(){
|
|||
rep.selFocusAtStart = newSelFocusAtStart;
|
||||
currentCallStack.repChanged = true;
|
||||
|
||||
// select the formatting buttons when there is the style applied on selection
|
||||
selectFormattingButtonIfLineHasStyleApplied(rep);
|
||||
|
||||
hooks.callAll('aceSelectionChanged', {
|
||||
rep: rep,
|
||||
callstack: currentCallStack,
|
||||
|
@ -2939,6 +2939,22 @@ function Ace2Inner(){
|
|||
return (eventType === 'setup') || (eventType === 'setBaseText') || (eventType === 'importText');
|
||||
}
|
||||
|
||||
function updateStyleButtonState(attribName, hasStyleOnRepSelection) {
|
||||
var $formattingButton = parent.parent.$('[data-key="' + attribName + '"]').find('a');
|
||||
$formattingButton.toggleClass(SELECT_BUTTON_CLASS, hasStyleOnRepSelection);
|
||||
}
|
||||
|
||||
function attribIsFormattingStyle(attributeName) {
|
||||
return _.contains(FORMATTING_STYLES, attributeName);
|
||||
}
|
||||
|
||||
function selectFormattingButtonIfLineHasStyleApplied (rep) {
|
||||
_.each(FORMATTING_STYLES, function (style) {
|
||||
var hasStyleOnRepSelection = documentAttributeManager.hasAttributeOnSelectionOrCaretPosition(style);
|
||||
updateStyleButtonState(style, hasStyleOnRepSelection);
|
||||
})
|
||||
}
|
||||
|
||||
function doCreateDomLine(nonEmpty)
|
||||
{
|
||||
if (browser.msie && (!nonEmpty))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue