Monday 22 September 2014

Create custom element tag Color Code Picker , which will shows the code of a color by selecting the color in the picker in HTML5

In this article we are going to create a custom element which will pickup the code of a color in the HTML5

Output:




Output After selecting value


Now create a directive for this







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

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

        return{

            restrict:'E',
            tranclude:true,
            template:'<input ng-model="colorvalue" type="color" />'+<div>
                '<notify-indicator bgcolor="{{colorvalue}}" data="colorvalue" 
                  element-type="square">' +
                '</notify-indicator>'+
                '</div>',
            scope:{
                color:'='
            },

            link: function (scope) {

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

                scope.colorvalue = '';
                function AssignColor() {
                    Apply(scope, function () { scope.colorvalue = '#8080ff'; });
                }

                AssignColor();

                scope.$watch('color', function () {
                    if(scope.color!=undefined){ scope.colorvalue = scope.color; }
                    else{ scope.colorvalue = "#8080ff"; }
                });

            }

        }

    });


For full detail about the notify-indicator tag,please read the following link. notification-indicator

Controller:


valueApp.controller('sample',function($scope){
    $scope.colorvalue = '#800040';
}

HTML:


From the above you can see how to use the colorcodepicker tag in HTML5

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.