ngEkathuwa - v0.3.0

Angularjs Bootstrap 3 Modal service - Ekathuwa

============================================== Examples: ngEkathuwa

This given you to easily handle Bootstrap 3 Modal window with Angularjs.

It is more flexible...

It is responsive...

Can be use custom sizes...

Working with templates...

It used promisses when you need...

You can dynamically show/hide...

Getting Start

1. Include <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> in the head of your document.
2. Include <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
3. Include <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
4. Include <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
5. Then include ekathuwa.min.js (bower install ngEkathuwa)
6. Declare a module dependency, in your module '[ngEkathuwa]'
7. Declare a controller dependency, in your controller $ekathuwa
8. Then use it $ekathuwa.modal(options)

Depend on: angularjs, bootstrap, jquery

Ekathuwa API and examples

=============================

ngEkathuwa Options

Default options
-------------------------
id:                (string)    "ekathuwaModalID"
scope:                         $rootScope
controller:        (string)    null
show:              (boolean)   true
backdrop:          (boolean)   true
keyboard:          (boolean)   true
remote:            (boolean)   false
contentStyle:      (string)    null
contentCustomSize: (number)    0
contentPreSize:    (string)    "df", //df,sm,md,lg,fl
templateURL:       (string)    null
templateHTML:      (string)    null
bodyTemplateURL:   (string)    null
bodyTemplate:      (string)    null
header:            (boolean)   true
headerClass:       (string)    " "  //css style class
headerText:        (string)    null
headerTemplate:    (string)    null
headerCloseBtn:    (boolean)   true
headerDraggable:   (boolean)   true
footer:            (boolean)   true
footerClass:       (string)    " "  //css style class
footerTemplate:    (string)    null
footerCloseBtn:    (boolean)   true
footerCloseBtnText:(string)    "Close"
footerSaveBtn:     (boolean)   false
footerSaveBtnText: (string)    "Save changes"

//Basic Modal
$scope.ekathuwaModalBasic = function () {
    $ekathuwa.modal({
        id: "ekathuwaModalBasicId",
        headerText:"Ekathuwa modal header",
    });
}

//Fullscreen Modal
$scope.ekathuwaModalTemp = function () {
    $ekathuwa.modal({
        id: "ekathuwaModalTempId",
        scope: $scope,
        templateURL: "modal-template.html",
        contentPreSize: "fl"
    });
}

//Modal by template with stylish(350px width overwrite from 80%)
$scope.ekathuwaModalStyle = function () {
    $ekathuwa.modal({
        id: "ekathuwaModalTempId",
        scope: $scope,
        templateURL: "modal-template.html",
        contentStyle: "width:350px;heigth:400px;background-color:#1b78f7;",
        contentCustomSize: 80
    });
}

//Large screen modal with inline html
$scope.ekathuwaModalTempHTML = function () {
    $ekathuwa.modal({
        id: "ekathuwaTemlHTMLId",
        scope: $scope,
        contentPreSize: "lg",
        templateHTML: '<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="ekathuwaTemlHTMLId" style="display: none;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button><h4 id="myModalLabel" class="modal-title">Ekathuwa Modal Heading</h4></div><div class="modal-body"><h4>Ekathuwa modal body.</h4><button class="btn btn-warning" ng-click="btnMsgFromCntl()">Get Message</button><div class="modal-footer"><button data-dismiss="modal" class="btn btn-default" type="button">Close</button><button class="btn btn-primary" type="button">Save changes</button></div></div></div></div>'
    });
}

//Modal body from template and set header text
$scope.ekathuwaModalBodyTempURL = function () {
    $ekathuwa.modal({
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        headerText:"Ekathuwa modal header",
        bodyTemplateURL: 'modal-template-body.html'
    });
}

//Footerless modal
$scope.ekathuwaModalFooterless = function () {
    $ekathuwa.modal({
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        headerText:"Ekathuwa modal header",
        bodyTemplateURL: 'modal-template-body.html',
        footer:false
    });
}

//Headerless modal
$scope.ekathuwaModalHeaderless = function () {
    $ekathuwa.modal({
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',
        header:false
    });
}

//Header/Footer stylish from css class modal
//Usefull for set your all modals header to same style
$scope.ekathuwaModalHeaderless = function () {
    $ekathuwa.modal({
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',
        headerClass : "ribbon blue",  //set your css class
        footerClass : "color-footer blue"  //set your css class
    });
}

//Modal via template body Url and show hide with promisess
$scope.ekathuwaModalPromisses = function () {
   var promise = $ekathuwa.modal({
        id: "ekathuwaPromisId",
        show: false,
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',
        headerText:"Modal with promisses"
    });
    promise.then(function (elem) {
        elem.modal('show');
    });
}

Option	Value	Description
id	default: ekathuwaModalID	Set your modal ID. Id avoid namespace collisions.Most important, when modal inside modal(nested modal)
$ekathuwa.modal({id:"yourModalId"});
scope	default: $rootScope	Pass your scope.
$ekathuwa.modal({scope:$scope});
controller	default: null	Pass your controller.
$ekathuwa.modal({controller:"ekathuwaModalCtl"});
show	default: true	Shows the modal when initialized. You can show/hide modal using promisses.
var p = $ekathuwa.modal({id:"modalPromisses",show:false}); $q.when(p).then(function (m) { m.modal('show'); });
backdrop	default: true	Includes a modal-backdrop element. Alternatively, specify staticfor a backdrop which doesn't close the modal on click.
$ekathuwa.modal({backdrop:"static"});
keyboard	default: true	Closes the modal when escape key is pressed
$ekathuwa.modal({keyboard:false});
contentStyle	default: null	Set modal style.If you set width, modal not be responsive. Use " ;" for style seperation.
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:red;"});
contentCustomSize	default: null	Set modal percentage(%) width. Not need to mention "%", Only need value. It overwrite contentStyle's width.
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:#1b78f7;",contentCustomSize:80});
contentPreSize	default: null	Set modal width by inbuild value. df= Bootstrap's default modal width sm= small width md= medium width lg= large width fl= full width
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:#1b78f7;",contentPreSize:'lg'});
templateURL	default: null	Pass your HTML modal page template as URL.
$ekathuwa.modal({ id: "ekathuwaModalTempId", scope: $scope, templateURL: "./views/modal-template1.html" });
templateHTML	default: null	Pass your modal page as HTML tags. This required nessery HTML elements for show modal. Refer Bootstrap3 document.
$ekathuwa.modal({ id: 'ekathuwaTemlHTMLId', scope: $scope, contentPreSize: 'fl', templateHTML:''});
bodyTemplateURL	default: null	Pass your modal page's body as template URL. It used default header and footer.
$ekathuwa.modal({ id: "ekathuwaBodyTempLId", scope: $scope, bodyTemplateURL: './views/modal-template-body.html' });
bodyTemplate	default: null	Pass your modal page's body as inline HTML. It used default header and footer. Discard when you set bodyTemplateURL
$ekathuwa.modal({ id: "ekathuwaBodyTempLHTMLId", scope: $scope, bodyTemplate: 'This is a modal body' });
header	default: true	Set modal header visible or not.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, header: false });
headerTemplate	default: null	Pass your modal header as inline HTML.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerTemplate: 'This is a modal header' });
headerText	default: null	Set header text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerText: "This is header" });
headerCloseBtn	default: true	Show/Hide header close button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerCloseBtn: false });
footer	default: true	Set modal footer visible or not.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footer: false });
footerTemplate	default: null	Pass your modal footer as inline HTML.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerTemplate: 'This is footer' });
footerCloseBtn	default: true	Show/Hide footer close button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerCloseBtn: false });
footerCloseBtnText	default: 'Close'	Close button text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerCloseBtn: true, footerCloseBtnText: 'OK' });
footerSaveBtn	default: false	Show/Hide footer save button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerSaveBtn: true });
footerSaveBtnText	default: 'Save changes'	Save button text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerSaveBtn: true, footerSaveBtnText: 'Save' });

For contributors

1. npm install
2. grunt build
3. then pull request

License

Copyright 2013 Sarath Ambegoda. Released under the MIT License (MIT).