JSFiddle - React, Tailwind, and code Playground

by greenlaw110

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc2.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
<div id="gallery" data-bind="foreach: frames, style: {paddingRight: framePaddingH, paddingBottom: framePaddingV}">
    <div class="frame" data-bind="style: $parent.frameCss">
        <img src="http://www.buybooksindia.com/images/placeholder.gif" data-bind="style: $parent.imageCss">
    </div>
</div>

<div id="debug">
<div>
    <label>rows</label>
    <div data-bind="jqSlider: rows, jqOptions: {min: 1, max: 12}"></div>
</div>
<div>
    <label>cols</label>
    <div data-bind="jqSlider: cols, jqOptions: {min: 1, max: 12}"></div>
</div>
<div>
    <label>padding horizontal</label>
    <div data-bind="jqSlider: framePaddingH, jqOptions: {min: 1, max: 100}"></div>
</div>
<div>
    <label>padding vertical</label>
    <div data-bind="jqSlider: framePaddingV, jqOptions: {min: 1, max: 100}"></div>
</div>
</div>

CSS

#gallery {
    width: 380px;
    height: 280px;
    top: 10px;
    left: 10px;
    background-color: #486;
    position:absolute;
}

.frame {
    position: relative;
    float: left;
}

#debug {
    position: fixed;
    left: 550px;
    width: 400px;
    height: 300px;
}

.frame {
    outline: 1px dashed #efefef;
}

JavaScript

ko.bindingHandlers.jqSlider = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize the control
        var options = allBindingsAccessor().jqOptions || {};
        $(element).slider(options);

        //handle the value changing in the UI
        ko.utils.registerEventHandler(element, "slidechange", function() {
            //would need to do some more work here, if you want to bind against non-observables
            var observable = valueAccessor();
            observable($(element).slider("value"));
        });

    },
    //handle the model value changing
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).slider("value", value);   

    }
};
$(function(){
    var calcFrameLayout = function() {
        var w = $gallery.width(), h = $gallery.height();
        
        //cacl width
        model.frameWidth(w / model.cols() - model.framePaddingH());
        model.frameHeight(h / model.rows() - model.framePaddingV());
    };
    var frameCntChanged = function() {
        var oldNo = model.frames().length;
        var newNo = model.cols() * model.rows();
        var delta = oldNo - newNo;
        if (delta < 0) {
            for (var i = 0; i < delta * -1; ++i) {
                model.frames.push("A");
            }
        } else {
            for (var i = 0; i < delta; ++i) {
                model.frames.pop();
            }
        }
        calcFrameLayout();
    }
    var getFrameCss = function(){
        return {
            width: model.frameWidth() + "px",
            height: model.frameHeight() + "px",
            paddingTop: model.framePaddingV() + "px",
            paddingLeft: model.framePaddingH() + "px",
        };
    };
    var getImageCss = function() {
    return {
    width: (model.frameWidth() - model.framePaddingH()) + 'px',
    height: (model.frameHeight() - model.framePaddingV()) + 'px'
    };    
    };
    var $gallery =...