GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rajeshwarpatlolla → my-angularjs-directives

rajeshwarpatlolla / my-angularjs-directives

Licence: MIT license
My Angular JS directives.

Description

While i was working on few projects, i have come across few situations where i had to write some directives. Here i want to list few of the directives. These might be useful for you. I am mentioning few directives here, so that you don't need to search for these directives at some other place. Each and every directive has a demo link, so that you can check oout how each directive works.

List of my directives

standard-time-meridian

Description

Converts Epoch Time to HH:MM:AM/PM 12-hour format.

Know more about Epoch Converter

Demo

Controller
$scope.epochTime = 12600;
HTML
<standard-time-meridian etime='epochTime'></standard-time-meridian>
Directive
.directive('standardTimeMeridian', function() {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      etime: '=etime'
    },
    template: "<strong>{{stime}}</strong>",
    link: function(scope, elem, attrs) {

      scope.stime = epochParser(scope.etime, 'time');

      function prependZero(param) {
        if (String(param).length < 2) {
          return "0" + String(param);
        }
        return param;
      }

      function epochParser(val, opType) {
        if (val === null) {
          return "00:00";
        } else {
          var meridian = ['AM', 'PM'];

          if (opType === 'time') {
            var hours = parseInt(val / 3600);
            var minutes = (val / 60) % 60;
            var hoursRes = hours > 12 ? (hours - 12) : hours;

            var currentMeridian = meridian[parseInt(hours / 12)];

            return (prependZero(hoursRes) + ":" + prependZero(minutes) + " " + currentMeridian);
          }
        }
      }

      scope.$watch('etime', function(newValue, oldValue) {
        scope.stime = epochParser(scope.etime, 'time');
      });

    }
  };
})

Back to top

standard-time-no-meridian

Description

Converts Epoch Time to HH:MM 24-hour format

Demo

Controller
$scope.epochTime = 12600;
HTML
<standard-time-no-meridian etime='epochTime'></standard-time-no-meridian>
Directive
.directive('standardTimeNoMeridian', function() {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      etime: '=etime'
    },
    template: "<strong>{{stime}}</strong>",
    link: function(scope, elem, attrs) {

      scope.stime = epochParser(scope.etime, 'time');

      function prependZero(param) {
        if (String(param).length < 2) {
          return "0" + String(param);
        }
        return param;
      }

      function epochParser(val, opType) {
        if (val === null) {
          return "00:00";
        } else {
          if (opType === 'time') {
            var hours = parseInt(val / 3600);
            var minutes = (val / 60) % 60;

            return (prependZero(hours) + ":" + prependZero(minutes));
          }
        }
      }

      scope.$watch('etime', function(newValue, oldValue) {
        scope.stime = epochParser(scope.etime, 'time');
      });

    }
  };
})

Back to top

date-string-to-epoch

Description

Converts string format to Epoch Time

Demo

Controller

In you controller if you have a date string in the below format, then you can use this directive.

$scope.dateString = 'Jan 1, 2015';
HTML
<span date-string-to-epoch='{{dateString}}'></span>
Directive
.directive('dateStringToEpoch', function() {
  return {
    scope: {
      ipDate: '@dateStringToEpoch'
    },
    restrict : 'A',
    template: '<strong>{{stringDate}}</strong>',
    link: function(scope, elem, attrs) {
      var inputString = scope.ipDate;

      var arr = inputString.split(/[ ,]/g);
      arr = ["Jan", "1", "", "2015"];
      arr.splice(2, 1);

      var monthArr = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
      var index = monthArr.indexOf(arr[0]);
      var epochTime = new Date(arr[2], index, arr[1]);

      scope.stringDate = +epochTime;
    }
  }
});

Back to top

ionic-timepicker

Description

It was initially implemented as a directive and later converted to a bower component.

You can check out the bower component here

It works in Ionic frameworks applications.

Demo

Controller
$scope.epochTime = 12600;
HTML
<ionic-timepicker etime="epochTime" format="12" step="15">    
    <button class="button button-block button-positive"> {{epochTime}} </button>

</ionic-timepicker>
Directive
.directive('ionicTimePicker', function($ionicPopup) {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      etime: '=etime',
      format: '=format',
      step: '=step'
    },
    link: function(scope, element, attrs) {

      element.on("click", function() {

        var obj = {
          epochTime: scope.etime,
          step: scope.step,
          format: scope.format
        };

        scope.time = {
          hours: 0,
          minutes: 0,
          meridian: ""
        };

        var objDate = new Date(obj.epochTime * 1000); // Epoch time in milliseconds.

        scope.increaseHours = function() {
          if (obj.format == 12) {
            if (scope.time.hours != 12) {
              scope.time.hours += 1;
            } else {
              scope.time.hours = 1;
            }
          }
          if (obj.format == 24) {
            if (scope.time.hours != 23) {
              scope.time.hours += 1;
            } else {
              scope.time.hours = 0;
            }
          }
        };

        scope.decreaseHours = function() {
          if (obj.format == 12) {
            if (scope.time.hours > 1) {
              scope.time.hours -= 1;
            } else {
              scope.time.hours = 12;
            }
          }
          if (obj.format == 24) {
            if (scope.time.hours > 0) {
              scope.time.hours -= 1;
            } else {
              scope.time.hours = 23;
            }
          }
        };

        scope.increaseMinutes = function() {
          if (scope.time.minutes != (60 - obj.step)) {
            scope.time.minutes += obj.step;
          } else {
            scope.time.minutes = 0;
          }
        };

        scope.decreaseMinutes = function() {
          if (scope.time.minutes != 0) {
            scope.time.minutes -= obj.step;
          } else {
            scope.time.minutes = 60 - obj.step;
          }
        };

        if (obj.format == 12) {

          scope.time.meridian = (objDate.getUTCHours() >= 12) ? "PM" : "AM";
          scope.time.hours = (objDate.getUTCHours() > 12) ? ((objDate.getUTCHours() - 12)) : (objDate.getUTCHours());
          scope.time.minutes = (objDate.getUTCMinutes());

          if (scope.time.hours == 0 && scope.time.meridian == "AM") {
            scope.time.hours = 12;
          }

          scope.changeMeridian = function() {
            scope.time.meridian = (scope.time.meridian === "AM") ? "PM" : "AM";
          };

          $ionicPopup.show({
            templateUrl: '../templates/timepicker-12-hour.html',
            title: '<strong>12-Hour Format</strong>',
            subTitle: '',
            scope: scope,
            buttons: [{
              text: 'Cancel'
            }, {
              text: 'Set',
              type: 'button-positive',
              onTap: function(e) {

                scope.loadingContent = true;

                var totalSec = 0;

                if (scope.time.hours != 12) {
                  totalSec = (scope.time.hours * 60 * 60) + (scope.time.minutes * 60);
                } else {
                  totalSec = scope.time.minutes * 60;
                }

                if (scope.time.meridian === "AM") {
                  totalSec += 0;
                } else if (scope.time.meridian === "PM") {
                  totalSec += 43200;
                }
                scope.etime = totalSec;
              }
            }]
          })

        }

        if (obj.format == 24) {

          scope.time.hours = (objDate.getUTCHours());
          scope.time.minutes = (objDate.getUTCMinutes());

          $ionicPopup.show({
            templateUrl: '../templates/timepicker-24-hour.html',
            title: '<strong>24-Hour Format</strong>',
            subTitle: '',
            scope: scope,
            buttons: [{
              text: 'Cancel'
            }, {
              text: 'Set',
              type: 'button-positive',
              onTap: function(e) {

                scope.loadingContent = true;

                var totalSec = 0;

                if (scope.time.hours != 24) {
                  totalSec = (scope.time.hours * 60 * 60) + (scope.time.minutes * 60);
                } else {
                  totalSec = scope.time.minutes * 60;
                }
                scope.etime = totalSec;
              }
            }]
          })
        }
      });
    }
  };
});

Back to top

ionic-datepicker

Description

This is a ionic-datepicker bower component which can be used with any Ionic framework's application.

You can check out the bower component here

It works in Ionic frameworks applications.

Demo

Controller
$scope.currentDate = new Date();
HTML
<ionic-datepicker idate="currentDate" >
    <button class="button button-block button-positive"> {{ currentDate | date:'dd - MMMM - yyyy' }} </button>
</ionic-datepicker>
Directive
.directive('ionicDatepicker', ['$ionicPopup', function ($ionicPopup) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        ipDate: '=idate'
      },
      link: function (scope, element, attrs) {
        var monthsList = ["January", "February", "March", "April", "May", "June", "July",
          "August", "September", "October", "November", "December"];

        var currentDate = angular.copy(scope.ipDate);
        scope.weekNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

        scope.today = {};
        scope.today.dateObj = new Date();
        scope.today.date = (new Date()).getDate();
        scope.today.month = (new Date()).getMonth();
        scope.today.year = (new Date()).getFullYear();

        var refreshDateList = function (current_date) {
          currentDate = angular.copy(current_date);

          var firstDay = new Date(current_date.getFullYear(), current_date.getMonth(), 1).getDate();
          var lastDay = new Date(current_date.getFullYear(), current_date.getMonth() + 1, 0).getDate();

          scope.dayList = [];

          for (var i = firstDay; i <= lastDay; i++) {
            var tempDate = new Date(current_date.getFullYear(), current_date.getMonth(), i);
            scope.dayList.push({date: tempDate.getDate(), month: tempDate.getMonth(), year: tempDate.getFullYear(), day: tempDate.getDay(), dateString: tempDate.toString(), epochLocal: tempDate.getTime(), epochUTC: (tempDate.getTime() + (tempDate.getTimezoneOffset() * 60 * 1000)) });
          }

          var firstDay = scope.dayList[0].day;

          for (var j = 0; j < firstDay; j++) {
            scope.dayList.unshift({});
          }

          scope.rows = [];
          scope.cols = [];

          scope.currentMonth = monthsList[ current_date.getMonth() ];
          scope.currentYear = current_date.getFullYear();

          scope.numColumns = 7;
          scope.rows.length = 6;
          scope.cols.length = scope.numColumns;

        };

        scope.prevMonth = function () {
          if (currentDate.getMonth() === 1) {
            currentDate.setFullYear(currentDate.getFullYear());
          }
          currentDate.setMonth(currentDate.getMonth() - 1);

          scope.currentMonth = monthsList[ currentDate.getMonth() ];
          scope.currentYear = currentDate.getFullYear();

          refreshDateList(currentDate)
        };

        scope.nextMonth = function () {
          if (currentDate.getMonth() === 11) {
            currentDate.setFullYear(currentDate.getFullYear());
          }
          currentDate.setMonth(currentDate.getMonth() + 1);

          scope.currentMonth = monthsList[ currentDate.getMonth() ];
          scope.currentYear = currentDate.getFullYear();

          refreshDateList(currentDate)
        };

        scope.date_selection = { selected : false, selectedDate : '', submitted : false };

        scope.dateSelected = function (date) {
          scope.selctedDateString = date.dateString;
          scope.date_selection.selected = true;
          scope.date_selection.selectedDate = new Date(date.dateString);
        };

        element.on("click", function () {
          if(!scope.ipDate){
            var defaultDate = new Date();
            refreshDateList(defaultDate);
          } else {
            refreshDateList(angular.copy(scope.ipDate));
          }

          $ionicPopup.show({
            templateUrl: 'date-picker-modal.html',
            title: '<strong>Select Date</strong>',
            subTitle: '',
            scope: scope,
            buttons: [
              { text: 'Close' },
              { text: 'Today',
                onTap: function (e) {
                  refreshDateList(new Date());
                  e.preventDefault();
                }
              },
              {
                text: 'Set',
                type: 'button-positive',
                onTap: function (e) {
                  scope.date_selection.submitted = true;

                  if (scope.date_selection.selected === true) {
                    scope.ipDate = angular.copy(scope.date_selection.selectedDate);
                  }else{
                    e.preventDefault();
                  }
                }
              }
            ]
          })
        })
      }
    }
  }]);

ionic-ratings

Description

This is a ionic-ratings bower component which can be used with any Ionic framework's application.

You can check out the bower component here

It works in Ionic frameworks applications.

Demo

Controller
$scope.ratingsObject = {
	iconOn: 'ion-ios-star',
   	iconOff: 'ion-ios-star-outline',
   	iconOnColor: 'rgb(200, 200, 100)',
   	iconOffColor: 'rgb(200, 100, 100)',
  	rating: 3,
   	minRating: 1,
   	callback: function(rating) {
   		$scope.ratingsCallback(rating);
    }
};

$scope.ratingsCallback = function(rating) {
    console.log('Selected rating is : ', rating);
};
HTML
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>
Directive
.directive('ionicRatings', [function() {
    return {
      restrict: 'AE',
      replace: true,
      template: '<div class="text-center ionic_ratings">' +
      '<span class="icon {{iconOff}} ionic_rating_icon_off" ng-style="iconOffColor" ng-click="ratingsClicked(1)" ng-show="rating < 1"></span>' +
      '<span class="icon {{iconOn}} ionic_rating_icon_on" ng-style="iconOnColor" ng-click="ratingsUnClicked(1)" ng-show="rating > 0"></span>' +
      '<span class="icon {{iconOff}} ionic_rating_icon_off" ng-style="iconOffColor" ng-click="ratingsClicked(2)" ng-show="rating < 2"></span>' +
      '<span class="icon {{iconOn}} ionic_rating_icon_on" ng-style="iconOnColor" ng-click="ratingsUnClicked(2)" ng-show="rating > 1"></span>' +
      '<span class="icon {{iconOff}} ionic_rating_icon_off" ng-style="iconOffColor" ng-click="ratingsClicked(3)" ng-show="rating < 3"></span>' +
      '<span class="icon {{iconOn}} ionic_rating_icon_on" ng-style="iconOnColor" ng-click="ratingsUnClicked(3)" ng-show="rating > 2"></span>' +
      '<span class="icon {{iconOff}} ionic_rating_icon_off" ng-style="iconOffColor" ng-click="ratingsClicked(4)" ng-show="rating < 4"></span>' +
      '<span class="icon {{iconOn}} ionic_rating_icon_on" ng-style="iconOnColor" ng-click="ratingsUnClicked(4)" ng-show="rating > 3"></span>' +
      '<span class="icon {{iconOff}} ionic_rating_icon_off" ng-style="iconOffColor" ng-click="ratingsClicked(5)" ng-show="rating < 5"></span>' +
      '<span class="icon {{iconOn}} ionic_rating_icon_on" ng-style="iconOnColor" ng-click="ratingsUnClicked(5)" ng-show="rating > 4"></span></div>',
      scope: {
        ratingsObj: '=ratingsobj'
      },
      link: function(scope, element, attrs) {

        //Setting the default values, if they are not passed
        scope.iconOn = scope.ratingsObj.iconOn || 'ion-ios-star';
        scope.iconOff = scope.ratingsObj.iconOff || 'ion-ios-star-outline';
        scope.iconOnColor= scope.ratingsObj.iconOnColor || 'rgb(200, 200, 100)';
        scope.iconOffColor=  scope.ratingsObj.iconOffColor || 'rgb(200, 100, 100)';
        scope.rating=  scope.ratingsObj.rating || 1;
        scope.minRating =scope.ratingsObj.minRating || 1;

        //Setting the color for the icon, when it is active
        scope.iconOnColor = {
          color: scope.iconOnColor
        };

        //Setting the color for the icon, when it is not active
        scope.iconOffColor = {
          color: scope.iconOffColor
        };

        //Setting the rating
        scope.rating = (scope.rating > scope.minRating) ? scope.rating : scope.minRating;

        //Setting the previously selected rating
        scope.prevRating = 0;

        //Called when he user clicks on the rating
        scope.ratingsClicked = function(val) {
          if (scope.minRating !== 0 && val < scope.minRating) {
            scope.rating = scope.minRating;
          } else {
            scope.rating = val;
          }
          scope.prevRating = val;
          scope.ratingsObj.callback(scope.rating);
        };

        //Called when he user un clicks on the rating
        scope.ratingsUnClicked = function(val) {
          if (scope.minRating !== 0 && val < scope.minRating) {
            scope.rating = scope.minRating;
          } else {
            scope.rating = val;
          }
          if (scope.prevRating == val) {
            if (scope.minRating !== 0) {
              scope.rating = scope.minRating;
            } else {
              scope.rating = 0;
            }
          }
          scope.prevRating = val;
          scope.ratingsObj.callback(scope.rating);
        };
      }
    }
  }])

Back to top

tooltip-follow-cursor

Description

A direcive which makes a tooltip follows the cursor.

Demo

HTML
<div class="tooltipCustom" tooltip-follow-cursor>
  Hover Mouse
  <span class="tooltipCustomContent" >This is a tooltip</span>
</div>
Directive
.directive('tooltipFollowCursor', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var x, y;
      element.on('mousemove', function(e) {
        x = e.pageX, y = e.pageY;
        this.children[0].style.top = (y + 15) + 'px';
        this.children[0].style.left = (x + 15) + 'px';
      });
    }
  };
})

Back to top

check-with-current-time

Description

A direcive which compares a time string(11:12 PM), with the current time.

Demo

HTML
<div check-with-current-time="11:12 PM"></div>
Directive
.directive('checkWithCurrentTime', function() {
  return {
    scope: '=',
    template: '{{result}}',
    link: function(scope, element, attrs) {
      var presentHours = (new Date()).getHours();
      var presentMinutes = (new Date()).getMinutes();
      var prevTime = attrs.checkWithCurrentTime;
      var timeArray = prevTime.split(/[ :]+/);

      timeArray[0] = parseInt(timeArray[0]);
      timeArray[1] = parseInt(timeArray[1]);

      if (timeArray[2] === 'PM' && timeArray[0]!==12) {
		timeArray[0] += 12;
      }

      if (presentHours < timeArray[0]) {
        result = 'Greater than current time';
      } else {
        result = 'Less than current time';
      }

      if ((presentHours === timeArray[0]) && (presentMinutes < timeArray[1])) {
        result = 'Greater than current time';
      }

      if ((presentHours === timeArray[0]) && (presentMinutes === timeArray[1])) {
        result = 'Both are same.';
      }
      scope.result = result;
    }
  }
});

Back to top

ionic-string-to-html

Description

Converts String to HTML markup and applies the styling.

Demo

Controller

Inject $sce in to the controller.

$scope.myText = '<ion-list><ion-item>One</ion-item><ion-item>Two</ion-item><ion-item>Three</ion-item></ion-list>';
$scope.myText = $sce.trustAsHtml($scope.myText);
HTML
<div ionicstringtohtml inputstring="myText"></div>
Directive
.directive('ionicstringtohtml', ['$compile', function($compile) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
          return scope.$eval(attrs.inputstring);
        },
        function(value) {
          element.html(value);
          $compile(element.contents())(scope);
        }
      );
    };
  }])

Back to top

NOTE

Copyright (c) 2015 Rajeshwar Patlolla

Permission is hereby granted, free of charge, to any person obtaining a copy of this software, to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense.

Contact

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