knockout page manager

by Richard Hunter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src=" //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<div data-page-manager="" data-bind="pageManager: {}">
    <div data-page="" class="colorPicker" data-bind="colorSelectorWithHuePicker: {
        colors : colors, 
        tempColor : tempColor
    }">

        <ul data-bind="foreach: colors">
            <li data-page-next="1" class="_swatch" data-bind="css : color, click: $parent.selectColor" ></li>
        </ul>
    
    </div>
    <div data-page="" class="colorInformation _inactive" data-bind="colorInformation: { tempColor : tempColor }">
        <div data-bind="style: { 'background' : localColor }" class="_swatch"></div>
        <button class="button" data-page-next="0">select color</button>
        <div data-bind="text: id"></div>
    </div>
</div>

SCSS

.button {
    background : cornflowerblue;
    padding : 10px 20px;
    font-size : 20px;
    font-family : arial;
    outline : none;
    color : white;
    border : none;
    &:hover {
        background : white;
        color : cornflowerblue;
    }
}

[data-page-manager] {
    background : lightblue;
    height : 100vh;
    width : 50vw;
    position : relative;
    
    ._inactive {
        
        display : none;
        
    }
    
}
.colorPicker {
    
    position : absolute;
    top : 0;
    background : yellow;
    padding   : 20px;
    width : 300px;
    height : 100px;
    
    .green {
        background : green;
    }
    .red {
        background : red;
    }
    
    .blue {
        background : blue;
    }
    
    ._swatch {
        
        height : 50px;
        width : 50px;
        display : inline-block;
    }
    
}
.colorInformation {
    position : absolute;
    top : 0;
    background : pink;
    padding : 20px;
    ._swatch {
        
        height : 100px;
        margin-bottom : 20px;
    }
    
}

JavaScript

var model = {
    colors : [
        { 
            color : 'green',
            name  : "Cauliflower Green",
            id    : 1235
        },{ 
            color : 'red',
            name  : "Ruby Red",
            id    : 1234
        },{ 
            color : 'blue',
            name  : "Sky Blue",
            id    : 1233
        },
    ],
    
    tempColor : ko.observable({       
        color : 'green',
        name  : "hjhjhkl",
        id    : 1234
    })
};

ko.bindingHandlers.colorSelectorWithHuePicker = {

    init: function (element, valueAccessor) {
        
        var config = valueAccessor();
        
        config.selectColor = function (model) {
            config.tempColor(model);
        }
        
        ko.applyBindingsToDescendants(config, element);
        return { controlsDescendantBindings: true };

    }
};

ko.bindingHandlers.pageManager = {

    init : function (element) {
        
        $(element).on('click', '[data-page-next]', function () {
            
            var index = parseInt($(this).data('page-next'), 10);

            $('[data-page]', element).each(function (item, page) {
                $(page).addClass('_inactive'); 
            });
            
            $('[data-page]').eq(index).removeClass('_inactive');
        
        
        
        });
    }
}

ko.bindingHandlers.colorInformation = {

    init: function (element, valueAccessor) {
        
        var config = valueAccessor();
        
        var tempColor = config.tempColor;
        
        ko.applyBindingsToDescendants({
        
            localColor : ko.computed(function () {           
                return tempColor().color;
            }),
            
            id : ko.computed(function () {      
                return tempColor().id;
            })
            
        }, element);
        
        return { controlsDescendantBindings: true };
    }
};

ko.applyBindings(model);