smart text in single binding

by ozzymcduff

HTML

<div data-bind="foreach:vals">
    <div style="width:100px;height:20px;" data-bind="applycssbasedonlength:{
        text: $data,
        list: ['scroll_height','scroll_height_2','scroll_height_3']
      }" ></div>
</div>

CSS

.scroll_height{
    color:red;
    font-size:15px;
}
.scroll_height_2{
    color:red;
    font-size:10px;
}
.scroll_height_3{
    color:red;
    font-size:5px;
}

JavaScript

function tryOutClass(element, classname){
    element.style.overflow='scroll';
    var names = [];
    if (element.scrollHeight>element.offsetHeight){
        names.push(classname);
    }
    var result = false;
    if (names.length>0){
        element.className = names.join(',');
        if (!(element.scrollHeight>element.offsetHeight)){
            result = true;
        }
    }
    
    element.style.overflow='hidden';
    return result;
}


function updateElement(element, v, list){
    console.log(v)
    ko.bindingHandlers['text'].update(element,  function(){ return v; });
    console.log('1')
    var i;
    
    for(i=0; i<list.length; ++i){
        console.log(i)
        console.log(list[i])
        if (tryOutClass(element,list[i])){
            break;
        }
    }
}

ko.bindingHandlers.applycssbasedonlength = {
    'init': function(element, valueAccessor){
        var list = valueAccessor().list;
        var text = valueAccessor().text;
        if (ko.isObservable(text)) {
            var subscription = text.subscribe(function(v) {
                updateElement(element, v, list);
            });
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                subscription.dispose();
            });
        }else{
            updateElement(element, text, list);
        }
        return ko.bindingHandlers['text'].init(element, valueAccessor);
    }
};

var viewModel = {
    vals:[1,2, 'dfgja asdlkjf adsljföl asdflkj asaslkdfjasd', 'asfdasdfasdf', 'gfdsg']
}
ko.applyBindings(viewModel);