aLight - The Basics

by lega911

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://alight.py-my.ru/alight_0.19b.min.js"></script>
<div>
    <input type="button" value="info" onclick="xalert('hello')" />
    <input type="button" value="error" onclick="xalert('hello', 'error')" />
</div>

CoffeeScript

$ ->
    window.xalert = do ->
        tpl = '<div style="display: block; position: fixed; top: 55px; right: 15px; width: 300px;">
                    <div al-repeat="d in list" class="alert alert-{{d.type}}">
                        <button al-click="close(d)" type="button" class="close">×</button>
                        <span>{{d.text}}</span>
                    </div>
                </div>'
        element = $(tpl)
        $('body').append element

        scope = alight.Scope()
        scope.list = []
        scope.close = (d) ->
            i = scope.list.indexOf d
            if i >= 0
                scope.list.splice i, 1

        alight.applyBindings scope, element

        (text, type) ->
            msg =
                text: text
                type: type or 'info'
            scope.list.push msg
            scope.$scan()

            setTimeout ->
                scope.close msg
                scope.$scan()
            , 5000