Monday, 22 September 2014

Create a Notification indicator custom element tag, which attaches to any element in the HTML5

In this article we are going to see a custom element, which will indicates the notification and there messages by attaches to any element in the HTML.

Normally we will see that an notification in many sites which is present in the top right corner of that page by indicating the number, so to do that kind of notification element we have to do the following things, this element will attaches to any element other than the elements which not have an separate closing tags.

Notification with different styles






Different in the notificaiton type and value                







See how the notification element is attaches to all element tags






From the above design now you can see the notification design which is present in the right corner of the each element. we can change the some properties of the notification element like changing the forecolor ,backcolor, type of the element like circle, square, and can change the value by click the buttons or moving the Range indicator. Now we see how to create a element like that and attaches to the any element.

/**

 * Created by Rajesh on 22-09-2014.

 */



(function () {



    var ngControls = angular.module('ngControls',[]);

    ngControls.directive('notifyIndicator', function () {

        return{

            restrict:'E',

            scope:{

                data:'=',

                bgcolor:'@',

                fgcolor:'@',

                elementType:'@'

            },

            template:'<div style="text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
            box-shadow:0 1px 1px rgba(0, 0, 0, .7);
            background-color:{{backgroundColor}};
            width:{{elementSize}}px;height:{{elementSize}}px;
            border-radius: {{type}};color: {{foreColor}};font-size: 9px;
            position: relative;font-weight: bold;right: -{{Right}}px;
            top: -{{Top}}px;
           display: table;vertical-align: middle;">' +

           '<div style="display: table-cell;vertical-align: middle;
            text-align: center;
            padding-left: 3px;padding-right: 3px">{{value}}</div></div>',

            link: function (scope, element, attrs, cntrl) {

                scope.elementSize = 14;
                scope.value = '';
                scope.backgroundColor = '';
                scope.foreColor = '';
                scope.type = 'Circle';
                scope.Right = 0;
                scope.Top = 0;

                function Apply(scope, fn) {
                 (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
                }


                function SetBgColor() {
                    if(scope.bgcolor==undefined){
                        scope.backgroundColor = 'Red';
                    }
                    else{
                        scope.backgroundColor = scope.bgcolor;
                    }
                }

                function SetFgColor() {
                    if(scope.fgcolor==undefined){
                        scope.foreColor = 'white';
                    }
                    else{
                        scope.foreColor = scope.fgcolor;
                    }
                }

                function SetElementType() {
                    if(scope.elementType == undefined){
                        scope.type = '50%';
                    }
                    else{
                        if(scope.elementType=='circle'){
                            scope.type='50%';
                        }
                        else{
                            scope.type = '30%';
                        }
                    }
                }


                function SetData() {
                    if(scope.data != undefined){
                        scope.value= scope.data;
                    }
                    else{
                        //element.html('');
                    }
                }

                SetBgColor();

                SetFgColor();

                SetElementType();

                SetData();


                scope.$watch('elementType', function () {
                    Apply(scope, function () {
                        SetElementType();
                    })
                });

                scope.$watch('fgcolor', function () {
                    Apply(scope, function () {
                        SetFgColor();
                    });
                });

                scope.$watch('bgcolor', function () {
                    Apply(scope, function () {
                        SetBgColor();
                    });
                });


                element.parent().css('display','inline-block');
                scope.Right = element.parent()[0].offsetWidth-8;
                scope.Top = element.parent()[0].offsetHeight-8;

                scope.$watch('data', function () {
                    Apply(scope,function(){
                        if(scope.data!=undefined ) {
                            if(scope.data>-1 && scope.data<10){
                                scope.Right = element.parent()[0].offsetWidth-8;
                                scope.Top = element.parent()[0].offsetHeight-8;
                            }

                            else if (scope.data > 9 && scope.data < 100) {
                                scope.elementSize = 16;
                                scope.Right = element.parent()[0].offsetWidth-10;
                                scope.Top = element.parent()[0].offsetHeight-8;
                            } 
                     
                           else if (scope.data>=100 && scope.data<1000){
                                scope.elementSize = 19;
                                scope.Right = element.parent()[0].offsetWidth-12;
                                scope.Top = element.parent()[0].offsetHeight-10;
                            }

                            else if(scope.data>=1000 && scope.data<10000){
                                scope.elementSize = 21;
                                scope.Right = element.parent()[0].offsetWidth-16;
                                scope.Top = element.parent()[0].offsetHeight-11;
                            }

                            else{

                                scope.Right = element.parent()[0].offsetWidth-16;
                                scope.Top = element.parent()[0].offsetHeight-12;

                            }

                        }

                        else{

                        }

                        scope.value = scope.data;
                    });
                });
            }
        };

    });





})();
So how to use the above module in our app.


var valueApp = angular.module('valueApp',['ngControls']);


now we have to design the HTML


  

sample bold
Notify above a number
{{dddd}}
Notify above a Range
{{dddd}}
From the above you can learn how to design a new custom control like notification element.

No comments:

Post a Comment