JSFiddle - React, Tailwind, and code Playground

by holf

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="http://cachedcommons.org/cache/jquery-cookie/0.0.0/javascripts/jquery-cookie.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<div class="container">
<div id="slider" data-bind="jqSlider: sliderValue, jqOptions: { min: 0, max: numberOfFontSizes, step: 1 }"></div>
<div class="textBox" data-bind="style: { fontSize: fontSize }">Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur. Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur. Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur. Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur. Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant...

CSS

.container { position:absolute; top: 0px; bottom: 0px; }
.textBox{background-color:#eee;border:1px solid #ccc;width:200;margin:10px;padding:20px}
#slider { position : absolute; bottom : 5px ; width: 25%; right: 5px; }

JavaScript

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

        ko.utils.registerEventHandler(element, "slide", function(event, ui) {
            var observable = valueAccessor();
            var value = ui.value;
            observable(value);
        });

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

var AppViewModel = function(sliderValue) {
    var self = this;

    var fontSizes = new Array('5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '26', '28', '30', '33', '36', '39', '42', '45', '48', '55', '65', '75', '85', '95', '110', '130', '150');
    
    self.numberOfFontSizes = fontSizes.length -1;

    self.sliderValue = ko.observable(sliderValue);

    self.fontSize = ko.computed(function() {
        return fontSizes[self.sliderValue()] + 'px';
    });

    self.sliderValue.subscribe(function(newValue) {
        $.cookie('sliderValue', newValue, {
            expires: 7,
            path: '/'
        });
    });

    $('.container').bind('mousewheel', function(event, delta) {
        console.log(event.altKey);

        if (event.altKey) {
            if (delta > 0 && (self.sliderValue() < self.numberOfFontSizes)) {
                self.sliderValue(self.sliderValue() + 1);
            }
            else if (self.sliderValue() > 0) {
                self.sliderValue(self.sliderValue() - 1);
            }
            return false;
        }
        else
            return true;
    });
};


var sliderValue = $.cookie('sliderValue') || 7

ko.applyBindings(new AppViewModel(sliderValue));