Add a color option on revealer

[Atala]

Feedback appreciated #newbie

[dulacp]

Hey, this one is a little bit too specific. Because in a real use case scenario you'll use css to specify the color you want, even specify a different color for each letter !

Maybe that's what this PR need more, an example showing how to specify a differ color for each letter, don't you think ?

Cheers man

[Atala]

Looking at the diff, the color picker seems a bit overkill.

Actually you would use a custom tokenizer and insert around each letter no?

I add to solve a related problem recently, a 5 digits counter, starting from one, with leading 0 with less opacity.

function getDisplay() {
    var counterLength = 5,
        numItem = getCount(),
        prefix = '<span class="book-banner-header-leading">' + Array(counterLength + 1 - numItem.toString().length).join('0') + '</span>';
    return prefix + numItem.toString();
}

[dulacp]

Hey! interesting problem for your 5 digits, actually I would have used css to solve this issue. In addition you'll get nice animations out of the box by using css styles.

I've tried this approach in a little jsfiddle demo.

For the posterity I've attached the core concept code :

html

<div class="counter" data-count=0 data-digit-length=5>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
</div>
<div class="btn-group">
    <button id="down">-1</button>
    <button id="up">+1</button>
</div>

css

span {
    display: inline-block;
    opacity: 0.15;
    transition: opacity 800ms ease-out;
}
.counter[data-digits="1"] span:nth-child(n+5), .counter[data-digits="2"] span:nth-child(n+4), .counter[data-digits="3"] span:nth-child(n+3), .counter[data-digits="4"] span:nth-child(n+2), .counter[data-digits="5"] span:nth-child(n+1) {
    opacity: 1.0;
}

js

var counter = document.querySelector('.counter');

function updateDisplay(count) {
    var digits = count.toString().split('');
    counter.dataset.digits = digits.length;

    // reset to 0 every value
    Array.prototype.forEach.call(counter.querySelectorAll('span'), function(s) {
        s.innerHTML = '0'; 
    });

    // fill the digits
    var dl = counter.dataset.digitLength;
    digits.forEach(function(d, idx) { 
        counter.querySelector('span:nth-child('+(dl - digits.length + idx + 1)+')').innerHTML = d;
    });
};