stylize part 2

by craigcav

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div id="main">

<div class="square" data-bind="stylize: jobName">

</div>
  
</div>

CSS

.square { 
    height: 100px; 
    width: 100px; 
    margin-left:auto;
    margin-right:auto; 
    line-height: 100px; 
    font-size:500%;
    letter-spacing: 100em;
    overflow: hidden;
    padding-left: .3em;
    box-sizing: border-box; 
    font-family: 'Lucida Console', monospace;  
}


.color1 { background: #2F4F4F; }
.color2 { background: #1E90FF; }
.color3 { background: #ADD8E6; }
.color4 { background: #BC8F8F; }
.color5 { background: #87CEEB; }
.color6 { background: #00FF7F; }

JavaScript

var classes = ['color1', 'color2', 'color3', 'color4', 'color5', 'color6'];

var viewModel = {
  jobName: 'AlphaTest'
};

ko.bindingHandlers.stylize = {
	update: function(element, valueAccessor) {
    
		var word = valueAccessor();
		
    var hash = 0;
    for (i = 0; i < word.length; i++) {
      char = word.charCodeAt(i);
      hash = hash + char * 3;
    }
    hash = hash % 5;
    
    var className = classes[hash];
    
    ko.bindingHandlers["text"].update(element, valueAccessor);
		ko.bindingHandlers["css"].update(element, function() { return className; });
	}	
};


ko.applyBindings(viewModel);