triangular dialog

by Tri Angular

HTML

<script src="https://code.angularjs.org/1.2.18/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.18/angular-animate.min.js"></script>
<section tri-dialog-root>
<header>
    <h1>AngularJS - triAngular - dialog</h1>
</header>
<ul ng-controller="DialogTriggersList">
    <li><button ng-click="dialog440()">Trigger 440px wide dialog</button></li>
    <li><button ng-click="dialog800()">Trigger 600px wide dialog</button></li>
    <li><button ng-click="dialogFail()">Trigger dialog with bad template url</button></li>
    <li><button ng-click="dialogConfigFail()">Trigger dialog with bad config key</button></li>
</ul>
<footer>
    <small>(d)WTF License</small>
</footer>
</section>

<script id="partials/dialog.html" type="text/ng-template">
    <header>
        <h2>Some dialog :)</h2>
    </header>
    <p>asj dnfoasdnf aosdjnf aosdnf aosdnf aosdn faosdnf oasdn foasdn foasdngfoasnd fgoasjfngasjfg</p>
    <p>asjo fansdfoj nasdof jnasdgjdfkhs ynsroae 5gnoi4w9 nsdkzdfkdvd djlsfaksdjgagasdf gkvjasgf d</p>
    <footer>
        <button ng-click="$dialog.data.anotherDialog()">another dialog</button>
        <button ng-click="$dialog.close()">close dialog</button>
        <button ng-click="$dialog.accept('ok')">ok</button>
        <button ng-click="$dialog.cancel('cancel')">cancel</button>
    </footer>
</script>

CSS

body {
    position: relative;
}

/*
 * base
 */

.dialog-mask {
    background-color: #515a5d;
    bottom: 0;
    left: 0;
    opacity: 0.9;
    position: fixed;
    right: 0;
    top: 0;
}

.dialog-itself {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, .3);
    left: 50%;
    padding: 25px;
    position: absolute;
}

.dialog-mask,
.dialog-itself {
    transition: opacity 0.5s ease;
}

/*
 * ng animations
 */
.dialog-itself.ng-enter,
.dialog-itself.ng-leave.ng-leave-active,
.dialog-mask.ng-enter,
.dialog-mask.ng-leave.ng-leave-active {
    opacity: 0;
}

.dialog-itself.ng-leave,
.dialog-itself.ng-enter.ng-enter-active {
    opacity: 1;
}

.dialog-mask.ng-leave,
.dialog-mask.ng-enter.ng-enter-active  {
    opacity: 0.9;
}


/*
 * single dialog styles
 */
.dialog-itself header {
    padding-bottom: 30px;
}

.dialog-itself footer {
    padding-top: 30px;
}

.dialog-600 {
    margin-left: -300px;
    width: 600px;
}

.dialog-440 {
    margin-left: -220px;
    width: 390px;
}

JavaScript

(function (app) {
    'use strict';

    app.config([
        'triDialogManagerProvider',
        function (dialogManagerProvider) {
            dialogManagerProvider.config({
                rootClass: 'dialog-root',
                maskClass: 'dialog-mask',
                dialogClass: 'dialog-itself'
            }).when('dialog440', {
                controller: 'DialogSimpleCtrl',
                templateUrl: 'partials/dialog.html',
                dialogClass: 'dialog-440'
            });
        }
    ]);

    app.controller('DialogSimpleCtrl', [
        '$scope',
        '$log',
        '$dialog', // from 'locals' passed to $controller
        function ($scope, $log, $dialog) {
            $scope.$dialog = $dialog;
            $scope.$on('triDialogTemplateRequested', $log.log.bind($log));
            $scope.$on('triDialogTemplateLoaded', $log.log.bind($log));
            $scope.$on('triDialogTemplateError', $log.log.bind($log));
        }
    ]);

    app.controller('DialogTriggersList', [
        '$scope',
        'triDialog',
        function ($scope, triDialog) {

            $scope.dialog440 = function () {
                console.log('dialog440');
                triDialog('dialog440', {
                    anotherDialog: function () {
                        $scope.dialog800();
                    }
                }).promise.then(function (a) {
                    console.log('resolve', a);
                }, function (a) {
                    console.log('reject', a);
                }, function (a) {
                    console.log('notify', a);
                });
            };

            $scope.dialog800 = function () {
                console.log('dialog800');
                triDialog({
                    controller: 'DialogSimpleCtrl',
                    templateUrl: 'partials/dialog.html',
                    dialogClass: 'dialog-600',
                    topOffset: '33px',
                    modal: true
                }, {
          ...