Reading selection with its span tags with Rangy

Question

I'm setting a font size for a selection using the CssClassApplier in Rangy:

.font16 {font-size: 16px;}
.font17 {font-size: 17px;}
.font18 {font-size: 18px;}


var font16Applier = rangy.createCssClassApplier("font16");

function applyfont16() {
            font16Applier.applyToSelection();
        }

Now if someone presses a "+" to bump the font size I'd like to be able to read the class name in the span tag for the selection and if it's, say, font16, change it to font17.

But I'm not seeing any way in Rangy to read a selection with it's span tags.

Thanks for any help.

Answer 1

Assuming you have a class applier for each font size, you could just iterate through each in turn and check if it is already applied to the current selection. It's not very efficient but may perform well enough.

var font16Applier = range.createCssClassApplier("font16");
var font17Applier = range.createCssClassApplier("font17");
var font18Applier = range.createCssClassApplier("font18");

var appliers = [font16Applier, font17Applier, font18Applier];

for (var i = 0, len = appliers.length; i < len; ++i) {
    if (appliers[i].isAppliedToSelection()) {
        if (i < len - 1) {
            appliers[i].undoToSelection();
            appliers[i + 1].applyToSelection();
            break;
        }
    }
}