JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="app">
    <div ng-controller="homeCtrl">
        <button class="btn btn-default glyphicon" ng-class="{'glyphicon-play': !isPlaying, 'glyphicon-pause': isPlaying}" ng-click="togglePlay()" play-carousel></button>
        <tabset>
            <tab ng-repeat="workspace in workspaces" heading="{{workspace.name}}" active="workspace.active" disabled="isPlaying">
                <div ng-controller="stageCtrl">
                    <div>{{$parent.workspace.id}} : {{ $parent.workspace.name}} : {{ $parent.workspace.message}}</div>
                    <div class="form-group">
                        <input name="name" ng-model="workspace.name" type="text" class="form-control" placeholder="Stage name" />
                    </div>
                    <div class="form-group">
                        <textarea name="message" ng-model="workspace.message" class="form-control" placeholder="Message"></textarea>
                    </div>
                    <button class="btn btn-default btn-xs" ng-click="rmWorkspace($index)" ng-disabled="workspaces.length === 1">Remove this workspace</button>
                </div>
            </tab>
            <tab select="addWorkspace()" disabled="isPlaying">
                <tab-heading> <i class="glyphicon glyphicon-plus-sign"></i>

                </tab-heading>
            </tab>
        </tabset>
    </div>
</div>

CSS

.glyphicon-spin {
    -webkit-animation: spin 1400ms infinite linear;
    animation: spin 1400ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

JavaScript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function ($scope) {
    var setAllInactive = function () {
        angular.forEach($scope.workspaces, function (workspace) {
            workspace.active = false;
        });
    };

    var addNewWorkspace = function () {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
            id: id,
            name: "Workspace " + id,
            message: "",
            active: true
        });
    };

    $scope.workspaces = [{
        id: 1,
        name: "Workspace 1",
        message: "",
        active: true
    }, {
        id: 2,
        name: "Workspace 2",
        message: "",
        active: false
    }];

    $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
    };

    $scope.rmWorkspace = function (idx) {
        $scope.workspaces.splice(idx, 1);
        //set next active unless last
        if ($scope.workspaces[$scope.workspaces.length - 1] !== $scope.workspaces[idx - 1]) $scope.workspaces[idx].active = true;
    };
});

app.controller('stageCtrl', function ($scope) {

});

app.directive('playCarousel', ['ClockSrv', function (ClockSrv) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            $scope.isPlaying = false;
            var i = 0,
                interval;
            var active = function () {
                angular.forEach($scope.workspaces, function (workspace, idx) {
                    if (workspace.active) return idx;
                });
            };
            var clock_id;
            var play = function () {
                $scope.isPlaying = true;
                ClockSrv.cancelClock(clock_id);
                var lngcache = $scope.workspaces.length;
                ClockSrv.clock(function () {
                    debugger
                    i = active();
                    console.log(i)
                    clock_id = this.id;
              ...