Skip to content

Latest commit

 

History

History
524 lines (501 loc) · 15.6 KB

README.md

File metadata and controls

524 lines (501 loc) · 15.6 KB
Raw

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).

Bitdeli Badge