Select formatting button on selection (#3301)

[feat] Select button when selection is on formatted text
This commit is contained in:
Joas Souza 2018-01-04 11:28:00 -03:00 committed by Luiza Pagliari
parent f1fcd16894
commit 454f539561
3 changed files with 206 additions and 12 deletions

View file

@ -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;

View file

@ -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))