The below code is in TypeScript

Alerts & Notifications

On The Notify Modal Functionality considered a creation of a service for the alerts @ http://cube.adbee.technology/notifications.html

   1: export class Notifications
   2:     {
   3:        static layout = { growl : 'growl', attached : 'attached', bar: 'bar', other : 'other' };
   4:        static effects = {
   5:         scale : 'scale', jelly : 'jelly', slide : 'slide', genie : 'genie', flip : 'flip', bouncyflip : 'bouncyflip',
   6:                 slidetop : 'slidetop', exploader : 'exploader', 
   7:                 cornerexpand : 'cornerexpand', loadingcircle : 'loadingcircle', boxspinner : 'boxspinner' 
   8:                 };
   9:         static types = {
  10:              notice : 'notice',
  11:              warning : 'warning',
  12:              error : 'error',
  13:              success : 'success'
  14:         };
  15:  
  16:       }

Then the Service Simply

   1: module myapp   {
   2:     export class NotificationService
   3:     {
   4:         constructor()
   5:         {
   6:         }
   7:         show(params : IOptions)
   8:         {
   9:             var notification = new NotificationFx(params);
  10:             notification.show();
  11:         }
  12:     }
  13: ...
  14: angularapp.service("NotificationService", NotificationService);

Then the Usage Simply

   1: var params : 
   2: IOptions = { message : '<span class="icon fa fa-bullhorn fa-2x"></span><p>You have some interesting news in your inbox. 
   3:                         Go <a href="#">check it out</a> now.</p>',
   4:                      layout : myapp.Models.Notifications.layout.bar,
   5:                      effect : myapp.Models.Notifications.effects.slidetop, 
   6:                      type : myapp.Models.Notifications.types.error, onClose : function(){ console.log("end")} };
   7:          
   8:      NotificationService.show(params);

Or Something like that….

Modals

Then for the modals some directive and service that would implement, the modal with Nifty Modal Effects

A service will be cool in the future also

But a directive something like…

   1: export function modalDialog($parse: ng.IParseService): ng.IDirective {
   2:        var Modal_Effects = [ 
   3:            { effect : "fade", eclass: "md-effect-1" },
   4:            { effect : "slideright", eclass: "md-effect-2" },
   5:            { effect : "slidebottom", eclass: "md-effect-3" },
   6:            { effect : "newspaper", eclass: "md-effect-4" },
   7:            { effect : "fall", eclass: "md-effect-5" },
   8:            { effect : "slidefall", eclass: "md-effect-6" },
   9:            { effect : "stickyup", eclass: "md-effect-7" },
  10:            { effect : "3dfilp", eclass: "md-effect-8" },
  11:            { effect : "3dsign", eclass: "md-effect-9" },
  12:            { effect : "superscaled", eclass: "md-effect-10" },
  13:            { effect : "3dslit", eclass: "md-effect-11" },
  14:        ];
  15:        return {
  16:            restrict:'E',
  17:            replace : true, 
  18:            transclude : true,
  19:            scope : { show : "=", closefn : "&", title: "=",
  20:                okBtn: "=", closeBtn: "=", displayClose: "="
  21:            },
  22:            template : "<div class='md-modal' ng-class='effectcls' id='modal-1'>"
  23:            + "<div class='md-content'>"
  24:                    + "<div class='modal-header'>"
  25:                            + "<button class='md-close close' data-ng-click='dismiss()' type='button'>&times;</button>"
  26:                            + "<h4 class='modal-title'>{{title}}</h4>"
  27:                    + "</div>"
  28:                    + "<div class='modal-body' ng-transclude></div>"
  29:                    + "<div class='modal-footer'>"
  30:                             + "<button type='button' class='btn btn-default' data-ng-show='displayClose' data-ng-click='dismiss()'>{{ closeBtn }}</button>"
  31:                             + "<button type='button' class='btn btn-primary' data-ng-click='ok()'>{{ okBtn }}</button>"
  32:                    +  "</div>"
  33:                    +"</div>"
  34:                +"</div>"
  35:                ,
  36:            link: (scope: any, element:JQuery, attributes : any, controllers: any) => {
  37:                console.log("int directive happen");
  38:                var overlay = document.querySelector( '.md-overlay' );
  39:                var modal = angular.element(element);
  40:                
  41:               var effect = attributes.modaleffect || "fade";
  42:               var effectclass = Enumerable.From(Modal_Effects).Where(x => x.effect == effect)
  43:                                 .Select(x => x.eclass).First();
  44:               scope.effectcls = effectclass; 
  45:                    
  46:                           
  47:                scope.$watch("show", function(newvalue){
  48:                    if(newvalue)
  49:                        modal.addClass('md-show');
  50:                    else{
  51:                        if(modal.hasClass('md-show'))
  52:                        {
  53:                            modal.removeClass('md-show');
  54:                        }
  55:                    }
  56:                });
  57:                var fn = $parse(scope.closefn);
  58:                scope.dismiss = function(){ 
  59:                    if(fn && typeof fn == 'function'){
  60:                       fn( { param : { status : Modal.Modal_Response.Dismiss} });
  61:                        console.log("entered");
  62:                    }
  63:                }
  64:                scope.ok = function(){
  65:                    if(fn && typeof fn == 'function'){
  66:                       fn( { param : { status : Modal.Modal_Response.Ok} });
  67:                        console.log("entered");
  68:                    }
  69:                }
  70:  
  71:               
  72:            }
  73:        }
  74:    }

with properties that might be implemented like or better

   1: export class Modal implements IModal
   2:     {
   3:         title: string;
   4:         modalshow = false;
   5:         callback: any;
   6:         onClose = (params: any) => {
   7:             this.callback(params);
   8:             this.modalshow = false;
   9:         }
  10:         Open = () => {
  11:             this.modalshow = true;
  12:         }
  13:         ModalEffect = 'newspaper';
  14:         CloseLabel = 'Cancel';
  15:         OkLabel = 'Ok';
  16:         CloseVisible = true;
  17:         static Modal_Response = { 
  18:             Dismiss: 'dismiss',
  19:             Ok: 'OK'
  20:         };
  21:         constructor(params: IModal)
  22:         {
  23:             this.title = params.title;
  24:             this.callback = params.callback;
  25:             this.ModalEffect = (params.ModalEffect) ? params.ModalEffect : this.ModalEffect;
  26:             this.CloseLabel = (params.CloseLabel) ? params.CloseLabel : this.CloseLabel;
  27:             this.CloseVisible = (params.CloseVisible) ? params.CloseVisible : this.CloseVisible;
  28:             
  29:  
  30:         }
  31:     }

with a usage in controller like..

   1: var callback = function(pr)
   2: {
   3:     console.log("executed with callback");
   4:     console.log(pr);
   5: }
   6: var modaldefaults : IModal = { title : "Example Title", callback : callback, ModalEffect : 'fall' }; 
   7: var modal = new Modal(modaldefaults);
   8: $scope.Modal = modal;

and in view like

   1: <modal-dialog show='Modal.modalshow' closefn="Modal.onClose(param)" modaleffect="{{Modal.ModalEffect}}" 
   2:             title="Modal.title" ok-btn="Modal.OkLabel" close-btn="Modal.CloseLabel" display-close="Modal.CloseVisible">
   3:               <p>Here is my modal Content!<p>
   4:         </modal-dialog>

 

Sorry for the Bad code but the principle is there.