All Projects → sarath2 → ngEkathuwa

sarath2 / ngEkathuwa

Licence: MIT license
Angularjs Bootstrap 3 Modal service - Ekathuwa

Programming Languages

javascript
184084 projects - #8 most used programming language
ApacheConf
554 projects
HTML
75241 projects
CSS
56736 projects

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="https://github.com//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> in the head of your document.
  2. Include <script src="https://github.com//code.jquery.com/jquery-2.0.3.min.js"></script>
  3. Include <script src="https://github.com//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
  4. Include <script src="https://github.com//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).

Bitdeli Badge

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].