JSFiddle - React, Tailwind, and code Playground

by OlsonDev

HTML

<script src="http://lea.verou.me/polyfills/progress/progress-polyfill.js"></script>
<link rel="stylesheet" href="http://lea.verou.me/polyfills/progress/progress-polyfill.css">
<!-- ko if: polyfilled -->
    <input id="toggle" type="checkbox" data-bind="checked: show"/>
    <label for="toggle">Toggle</label>
    <button data-bind="click: toggleFix, text: fix() ? 'Break' : 'Fix'"></button>
<!-- /ko -->
<!-- ko ifnot: polyfilled -->
    <span>Nothing to fix ... no polyfill applied. View in IE8/9</span>
<!-- /ko -->
<div data-bind="if: show">
    <ul data-bind="foreach: stats">
        <li>
            <span data-bind="text: name"></span>
            <progress data-bind="value: value"></progress>
        </li>
    </ul>
</div>

CSS

* { font-family: sans-serif; }
li { list-style-type: none; }

JavaScript

(function() {
    var polyfilled = 'ProgressPolyfill' in window;
    var broken = polyfilled ? window.ProgressPolyfill.isInited : null;
    var fixed = function(progress) { return 'position' in progress; };

    function Stat(name, value) {
        var self = this;
        self.name = ko.observable(name);
        self.value = ko.observable(value);
    }
    
    function ViewModel() {
        var self = this;
        self.show = ko.observable(!polyfilled);
        self.polyfilled = ko.observable(polyfilled);
        self.fix = ko.observable(false);
        self.stats = ko.observableArray();
        self.stats.push(new Stat('a', 0.4));
        self.stats.push(new Stat('b', 0.5));
        self.stats.push(new Stat('c', 0.6));
        self.toggleFix = function() {
            self.fix(!self.fix());
            window.ProgressPolyfill.isInited = self.fix() ? fixed : broken;
            self.show(false);
        };
    }
    var vm = new ViewModel();
    ko.applyBindings(vm);
}());