Make toolbar respond to active rich text options. about firepad

[kofifus]

Nowi included in #241

[iclems]

I've added this on LiveMinutes and will try to have a pull request for this

[benbro]

What's missing to make it work?
937cb15

I think that two things are needed:

1. Each cursor move, check for the active span and line attributes.
2. Each time operation is applied, check if the cursor is where a span or line attribute changed.

[axelson]

+1

[iclems]

I don't have a full sample here, nor a PR, but here's how we do it (with our Backbone toolbar):

    var updateToolbarAttributes = function() {
      var i;
      // Provide defaults
      var keys = {
        'u': false,
        'i': false,
        'b': false,
        'h': 'p',
        'fs': DEFAULTS.FONT_SIZE,
        'c': DEFAULTS.COLOR,
        'bc': false,
        's': false,
        'la': DEFAULTS.ALIGN,
        'lt': false };
      var charAttributes = firepad.richTextCodeMirror_.getCurrentAttributes_();
      // Reset
      for (i in keys) { toolbar.ctrl(i, keys[i]); };
      // Override with attributes
      for (i in charAttributes) { toolbar.ctrl(i, charAttributes[i]); };
    }

    firepad.on('cursor', function(id, coords, color) {
      if (id == MY_USER_ID) {
        _.defer(updateToolbarAttributes);
      }
    });

[mikelehen]

Thanks Clément!

[kofifus]

Clement - as far as I can tell MY_USER_ID in your example can be replaced with firepad.firebaseAdapter_.userId_

Michael I am wondering about the firepad.on('cursor', in Clement solution .. it is not documented.
Where would be the correct place to capture the cursor event to pass it to the toolber ?
Should I plug it in EditorClient.prototype.onCursorActivity ?

[kofifus]

Building on Clement's solution (thank you!), here is some work towards a solution using the FP rich text toolbar, this works for the bold, underline, italics and strikethrough buttons which is enough for me. More work needs to be done to expand this to the other buttons (fonts/colors dropdowns etc) and to integrate this into FP code itself:

a.firepad-btn-highlight {
  color: #fff;
  background-color: #ffbf86;
  border-color: #e6a165;
}

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) === null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

function updateTollbatButnsState(firepad) {
    if (!firepad.toolbar.boldBtnElem) {
      firepad.toolbar.boldBtnElem = firepad.toolbar.element_.getElementsByClassName('firepad-tb-bold')[0].parentElement;
      firepad.toolbar.italicBtnElem = firepad.toolbar.element_.getElementsByClassName('firepad-tb-italic')[0].parentElement;
      firepad.toolbar.underlineBtnElem = firepad.toolbar.element_.getElementsByClassName('firepad-tb-underline')[0].parentElement;
      firepad.toolbar.strikeBtnElem = firepad.toolbar.element_.getElementsByClassName('firepad-tb-strikethrough')[0].parentElement;
    }

    var charAttributes = firepad.richTextCodeMirror_.getCurrentAttributes_();
    toggleClass(firepad.toolbar.boldBtnElem, 'firepad-btn-highlight', charAttributes.b===true);
    toggleClass(firepad.toolbar.italicBtnElem, 'firepad-btn-highlight', charAttributes.i===true);
    toggleClass(firepad.toolbar.underlineBtnElem, 'firepad-btn-highlight', charAttributes.u===true);
    toggleClass(firepad.toolbar.strikeBtnElem, 'firepad-btn-highlight', charAttributes.s===true);
}

firepad.on('cursor', function(id, coords, color) {
  if (id == firepad.firebaseAdapter_.userId_) {
    clearTimeout(firepad.toolbarButtonsUpdateTimeout);
    firepad.toolbarButtonsUpdateTimeout = setTimeout(function() { updateTollbatButnsState(firepad); }, 200);
  }
});    

[mikelehen]

Awesome. This is looking promising. :-)

On Wed, Oct 28, 2015 at 12:16 AM, mikagenic [email protected]
wrote:

Here is some work towards a solution using the FP rich text toolbar, this
works for the bold, underline, italics and strikethrough buttons which is
enough for me. More work needs to be done to expand this to the other
buttons (fonts/colors dropdowns etc) and to integrate this into FP code
itself:

a.firepad-btn-highlight {
color: #fff;
background-color: #ffbf86;
border-color: #e6a165;
}

function addRemoveClass(elem, theClass, add) {
var matchRegExp=new RegExp('(?:^|\s)'+theClass+'(?!\S)', 'g'), hasClass=(elem.className.match(matchRegExp)!=null);
if (add && !hasClass) elem.className+=' '+theClass;
if (!add && hasClass) elem.className=elem.className.replace(matchRegExp, '' );
}

firepad.on('cursor', function(id, coords, color) {
if (id == firepad.firebaseAdapter_.userId_) {
var charAttributes = firepad.richTextCodeMirror_.getCurrentAttributes_();

var boldBtn = firepad.toolbar.element_.getElementsByClassName('firepad-tb-bold')[0].parentElement;
addRemoveClass(boldBtn, 'firepad-btn-highlight', charAttributes.b===true);

var italicBtn = firepad.toolbar.element_.getElementsByClassName('firepad-tb-italic')[0].parentElement;
addRemoveClass(italicBtn, 'firepad-btn-highlight', charAttributes.i===true);

var underlineBtn = firepad.toolbar.element_.getElementsByClassName('firepad-tb-underline')[0].parentElement;
addRemoveClass(underlineBtn, 'firepad-btn-highlight', charAttributes.u===true);

var strikeBtn = firepad.toolbar.element_.getElementsByClassName('firepad-tb-strikethrough')[0].parentElement;
addRemoveClass(strikeBtn, 'firepad-btn-highlight', charAttributes.s===true);

}
});

—
Reply to this email directly or view it on GitHub
#12 (comment).

[kofifus]

Michael I am happy to submit a PR if you tell me the right place in FP to replace what here is 'firepad.on('cursor', function(id, coords, color) {'

[mikelehen]

I'd put it in the addToolbar_() method of lib/firepad.js.

On Wed, Oct 28, 2015 at 4:39 PM, mikagenic [email protected] wrote:

Michael I am happy to submit a PR if you tell me the right place in FP to
replace what here is 'firepad.on('cursor', function(id, coords, color) {'

—
Reply to this email directly or view it on GitHub
#12 (comment).