JSFiddle - React, Tailwind, and code Playground

by tigbro

HTML

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" xmlns:stng="http://sencha-touch-angular.org">
<head>
    <title>Sencha Toys</title>
    <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css"/>
    <script src="http://code.angularjs.org/0.9.19/angular-0.9.19.min.js"></script>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
    <script src="https://raw.github.com/tigbro/sencha-touch-angular-adapter/master/compiled/sencha-touch-angular-adapter-0.9.0.min.js"></script>

</head>
<body>

<div st:xtype="carousel" fullscreen="true">
    <div st:xtype="panel" id="todos" ng:controller="TodoController" st:event="activate:onActivate()">
        <div st:xtype="toolbar" dock="top" title="Todos">
            <div st:xtype="button" text="Save" st:event="tap:saveTodos()"></div>
            <div st:xtype="button" text="Settings" st:event="tap:showSettings()"></div>
        </div>
        <div st:xtype="textfield" name="inputText" place-holder="enter your todo here" st:event="action:addTodo()"></div>

        <div ng:repeat="todo in todos" st:xtype="checkboxfield" name="todo.done" label="{{todo.name}}"></div>

    </div>
    <div st:xtype="panel" id="settings" ng:controller="SettingsController" st:event="activate:onActivate(),beforedeactivate:onPassivate()">
        <div st:xtype="toolbar" dock="top" title="Settings">
            <div st:xtype="button" text="Back" st:event="tap:back()"></div>
        </div>
        <div st:xtype="textfield" name="storageKey" label="Store key"></div>
    </div>

</div>


</body>
</html>

JavaScript

angular.service('todoStore', function(jsonp, waitDialog) {
    var readUrl = 'https://secure.openkeyval.org/';
    var writeUrl = 'https://secure.openkeyval.org/store/?';
    var _storageKey = 'SenchaTouchAngularTodoapp';

    function read(success) {
        waitDialog.show('Please wait');
        jsonp('JSON', readUrl + _storageKey + '?callback=JSON_CALLBACK', function(status, data) {
            success(data);
            waitDialog.hide();
        });
    }

    function write(value) {
        waitDialog.show('Please wait');
        value = encodeURIComponent(JSON.stringify(value));
        jsonp('JSON', writeUrl + _storageKey + '=' + value + '&callback=JSON_CALLBACK', function() {
            waitDialog.hide();
        });
    }

    function storageKey(key) {
        if (key) {
            _storageKey = key;
        }
        return _storageKey;
    }

    return {
        read: read,
        write: write,
        storageKey: storageKey
    }

}, {
    $inject: ['$xhr', '$waitDialog']
});

function TodoController(todoStore, activate) {
    this.store = todoStore;
    this.activate = activate;
    this.todos = [];
    this.inputText = '';
}

TodoController.$inject = ['todoStore', '$activate'];

TodoController.prototype = {
    showSettings: function() {
        this.activate("settings", "slide");
    },
    addTodo: function() {
        this.todos.push({
            name: this.inputText,
            done: false
        });
        this.inputText = '';
    },
    refreshTodos: function() {
        var self = this;
        this.store.read(function(data) {
            if (!data) {
                data = [];
            }
            self.todos = data;
        });
    },
    saveTodos: function() {
        // delete all checked todos
        var newTodos = angular.Array.filter(this.todos, function(todo) {
            return !todo.done;
        });
        this.todos = newTodos;
        this.store.write(this.todos);
    },
    onActivate: function() {
       ...