JSFiddle - React, Tailwind, and code Playground

by sunnycyk

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<div ng-controller="DoStuff">
    <a class="btn btn-success" ng-click="doGood()">Do good</a>
    <a class="btn btn-danger" ng-click="doEvil()">Do Evil</a>
    <a class="btn pull-right" ng-click="reset()">Reset</a>
</div>
<hr>
<div ng-controller="AlertsCtrl">
  <div ng-repeat="(key,val) in alertsManagerSvc.alerts" class="alert {{key}}">
    <a class="close" ng-click="clearAlertType(key)">×</a>
    <p ng-repeat="msg in val">{{msg}}</p>
  </div>
</div>

CSS

body {padding-top:20px}

JavaScript

// Namespace
var MyApp = {
    // Bootstrap angular app
    App: angular.module('MyApp', [])
};

// Alerts controller
MyApp.App.controller('AlertsCtrl', ['$scope', 'alertsManagerSvc', function($scope, alertsManagerSvc) {
    $scope.alertsManagerSvc = alertsManagerSvc;
    $scope.clearAlertType = function(type) {
        alertsManagerSvc.clearAlertType(type);
    };}]);

// Alerts manager
MyApp.App.factory('alertsManagerSvc', function() {
    return {
        // Alerts object
        alerts: {},
        // Add new alert
        addAlert: function(message, type) {
            type = type || 'alert-attention';
            this.alerts[type] = this.alerts[type] || [];
            this.alerts[type].push(message);
        },
        // Clear all alerts
        clearAlerts: function() {
            angular.copy({}, this.alerts);
        },
        // Clear alert by type
        clearAlertType: function(type) {
            delete this.alerts[type];
        },
        // Proxy for custom alert methods
        customAlertProxy: function(messages, type) {
            var that = this;
            msgs = angular.isArray(messages) ? messages : [messages];
            angular.forEach(msgs, function(m) {
                that.addAlert(m, type);
            });
        },
        // Convenince methods for custom alert types
        // based on twitter bootstrap alerts
        attentionAlert: function(messages) { // Yellow
            this.customAlertProxy(messages, 'alert-attention');
        },
        successAlert: function(messages) { // Green
            this.customAlertProxy(messages, 'alert-success');
        },
        errorAlert: function(messages) { // Red
            this.customAlertProxy(messages, 'alert-error');
        },
        infoAlert: function(messages) { // Blue
            this.customAlertProxy(messages, 'alert-info');
        }
    };
});

// Do stuff controller
MyApp.App.controller('DoStuff', ['$scope', 'alertsManagerSvc', function($scope, alertsManagerSvc)...