betsol-ng-intl-tel-input - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

bower.json

 {
   "name": "betsol-ng-intl-tel-input",
   "description": "intl-tel-input integration for Angular.js",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/betsol-ng-intl-tel-input.js",
@@ -15,8 +15,4 @@ "ignore": [
   "dependencies": {
-    "intl-tel-input": "^7.1.1"
+    "intl-tel-input": "^8.4.6"
   },
-  "devDependencies": {
-    "angular": "~1",
-    "angular-mocks": "~1.4.6"
-  },
   "repository": {
@@ -23,0 +19,0 @@ "type": "git",

changelog.md

 # betsol-ng-intl-tel-input changelog
 
+## Version 1.1.0
+(08 Mar 2016)
+
+- Module is completely refactored
+- Improved multiple version support of `intl-tel-input`
+- Added demo
+
+
 ## Version 1.0.0
@@ -4,0 +12,0 @@ (13 Feb 2016)

dist/scripts/betsol-ng-intl-tel-input.js

 /**
  * betsol-ng-intl-tel-input - intl-tel-input integration for Angular.js
- * @version v0.0.2
+ * @version v1.0.0
  * @link https://github.com/betsol/ng-intl-tel-input
@@ -29,29 +29,38 @@ * @license MIT
 
+          /**
+           * Obtaining reference to the plugin API
+           * and making sure it's present.
+           */
+          var pluginApi = $element.intlTelInput;
+          if (!pluginApi) {
+            log('intl-tel-input jQuery plugin must be loaded, skipping directive initialization');
+            return;
+          }
+
           // Building options for this control.
           var options = angular.extend({}, $scope.intlTelInputOptions || {}, intlTelInputOptions);
 
+          // Using this flag in order to determine if we are in the control's rendering phase or not.
+          // This is required for country change event right now.
+          var renderingView = false;
+
+          // Using this flag in order to determine if we are in the process of changing the country.
+          // This is required for country change event right now.
+          var settingCountry = false;
+
           // Initializing the control with the plugin.
-          $element
-            .intlTelInput(options)
-            .done(function () {
-              // Updating state of the model controller
-              // when plugin finally initializes.
-              updateModelValue();
-              modelCtrl.$validate();
-            })
-          ;
+          callApi(options);
 
-          // Rendering view when model changes.
+          /**
+           * Updating the control's view when model changes.
+           */
           modelCtrl.$render = function () {
-            if (modelCtrl.$viewValue) {
-              $element.intlTelInput('setNumber', modelCtrl.$modelValue);
-            }
+            renderingView = true;
+            callApi('setNumber', modelCtrl.$viewValue || '');
+            renderingView = false;
           };
 
-          // Setting correct model value when view is modified.
-          modelCtrl.$parsers.unshift(function () {
-            return getModelValue();
-          });
-
-          // Validating the input.
+          /**
+           * Validating the input using plugin's API.
+           */
           modelCtrl.$validators.phoneNumber = function (modelValue, viewValue) {
@@ -61,25 +70,60 @@ if (!modelValue && !viewValue) {
             }
-            return $element.intlTelInput('isValidNumber');
+            return callApi('isValidNumber');
           };
 
-          // Destroying the plugin with the directive.
+          /**
+           * Destroying the plugin with the directive.
+           */
           $scope.$on('$destroy', function () {
-            $element.intlTelInput('destroy');
+            callApi('destroy');
           });
 
-          if ('object' === typeof $scope.intlTelInputController) {
-            $scope.intlTelInputController.setCountry = function (countryName) {
-              $element.intlTelInput('setCountry', countryName);
-              updateModelValue();
-            };
-          }
+          /**
+           * The "$setViewValue" is called when control's value has changed. It's triggered by the DOM events.
+           * Angular adds all basic event listeners to the underlying input element by default,
+           * and will trigger this function for us providing the .val() value as a first argument.
+           *
+           * Wrapping the original function in order to get the proper telephone number from the plugin's API
+           * instead of the default .val() of the underlying input field.
+           */
+          var $setViewValue = modelCtrl.$setViewValue;
+          modelCtrl.$setViewValue = function () {
+            arguments[0] = callApi('getNumber');
+            $setViewValue.apply(modelCtrl, arguments);
+          };
 
-          $element.bind('country-change', updateModelValue);
+          /**
+           * Listening for changes of the country in order to update the model value.
+           *
+           * We are using "renderingView" flag in order to check if country has
+           * changed by the plugin itself during control's rendering phase or it
+           * was changed manually by the user.
+           *
+           * Using two event names for both latest and legacy versions of the plugin.
+           */
+          $element.bind('country-change countrychange', function () {
+            if (!renderingView && !settingCountry) {
+              // It was changed by the user, so we need to update the model value.
+              updateViewValue('countrychange');
+            }
+          });
 
-          function getModelValue () {
-            return $element.intlTelInput('getNumber');
+          $scope.intlTelInputController = {};
+
+          $scope.intlTelInputController.setCountry = function (countryName) {
+            settingCountry = true;
+            callApi('setCountry', countryName);
+            updateViewValue();
+            settingCountry = false;
+          };
+
+
+          function callApi () {
+            return pluginApi.apply($element, arguments);
           }
 
-          function updateModelValue () {
-            modelCtrl.$setViewValue(getModelValue());
+          function updateViewValue (trigger) {
+            $scope.$evalAsync(function () {
+              modelCtrl.$setViewValue('', trigger);
+            });
           }
@@ -93,2 +137,7 @@
 
+
+  function log (message) {
+    console.log('ng-intl-tel-input: ' + message);
+  }
+
 })(angular);

dist/scripts/betsol-ng-intl-tel-input.min.js

 /**
  * betsol-ng-intl-tel-input - intl-tel-input integration for Angular.js
- * @version v0.0.2
+ * @version v1.0.0
  * @link https://github.com/betsol/ng-intl-tel-input
@@ -9,2 +9,2 @@ * @license MIT
  */
-!function(n){"use strict";n.module("betsol.intlTelInput",[]).constant("intlTelInputOptions",{}).directive("intlTelInput",["intlTelInputOptions",function(t){return{restrict:"AC",require:"ngModel",scope:{intlTelInputOptions:"=",intlTelInputController:"="},link:function(e,l,u,i){function o(){return l.intlTelInput("getNumber")}function r(){i.$setViewValue(o())}var p=n.extend({},e.intlTelInputOptions||{},t);l.intlTelInput(p).done(function(){r(),i.$validate()}),i.$render=function(){i.$viewValue&&l.intlTelInput("setNumber",i.$modelValue)},i.$parsers.unshift(function(){return o()}),i.$validators.phoneNumber=function(n,t){return n||t?l.intlTelInput("isValidNumber"):!0},e.$on("$destroy",function(){l.intlTelInput("destroy")}),"object"==typeof e.intlTelInputController&&(e.intlTelInputController.setCountry=function(n){l.intlTelInput("setCountry",n),r()}),l.bind("country-change",r)}}}])}(angular);
+!function(n){"use strict";function t(n){console.log("ng-intl-tel-input: "+n)}n.module("betsol.intlTelInput",[]).constant("intlTelInputOptions",{}).directive("intlTelInput",["intlTelInputOptions",function(e){return{restrict:"AC",require:"ngModel",scope:{intlTelInputOptions:"=",intlTelInputController:"="},link:function(i,l,u,o){function r(){return p.apply(l,arguments)}function c(n){i.$evalAsync(function(){o.$setViewValue("",n)})}var p=l.intlTelInput;if(!p)return void t("intl-tel-input jQuery plugin must be loaded, skipping directive initialization");var s=n.extend({},i.intlTelInputOptions||{},e),a=!1,d=!1;r(s),o.$render=function(){a=!0,r("setNumber",o.$viewValue||""),a=!1},o.$validators.phoneNumber=function(n,t){return n||t?r("isValidNumber"):!0},i.$on("$destroy",function(){r("destroy")});var f=o.$setViewValue;o.$setViewValue=function(){arguments[0]=r("getNumber"),f.apply(o,arguments)},l.bind("country-change countrychange",function(){a||d||c("countrychange")}),i.intlTelInputController={},i.intlTelInputController.setCountry=function(n){d=!0,r("setCountry",n),c(),d=!1}}}}])}(angular);

gulpfile.js

@@ -22,4 +22,11 @@ //==============//
 var KarmaServer = require('karma').Server;
+var serverFactory = require('spa-server');
+var deploy = require('gulp-gh-pages');
+var ncp = require('ncp').ncp;
 
+const SCRIPT_PATH = './src/scripts/module.js';
+const DEPLOY_TEMP_PATH = './.deploy';
+const DEMO_PATH = './demo';
 
+
 //=========//
@@ -34,3 +41,3 @@ // GLOBALS //
 
-gulp.task('clean', function (callback) {
+gulp.task('clean', function () {
   return del('dist');
@@ -51,6 +58,5 @@ });
   var headerContent = fs.readFileSync('src/scripts/header.js', 'utf8');
+
   return gulp
-    .src([
-      './src/scripts/module.js'
-    ])
+    .src(SCRIPT_PATH)
     .pipe(concat('betsol-ng-intl-tel-input.js'))
@@ -70,3 +76,11 @@ .pipe(ngAnnotate({
 
+gulp.task('build:scripts:watch', function () {
+  gulp.watch(SCRIPT_PATH, ['build:scripts']);
+});
 
+gulp.task('watch', ['build:scripts:watch']);
+
+gulp.task('start', ['demo:server', 'watch']);
+
+
 //======//
@@ -84,2 +98,64 @@ // TEST //
 
+//======//
+// DEMO //
+//======//
+
+gulp.task('demo:server', function () {
+  var server = serverFactory.create({
+    path: './demo',
+    port: 1337
+  });
+  server.start();
+});
+
+gulp.task('demo:deploy', function (done) {
+  runSequence(
+    'demo:deploy:before',
+    'demo:deploy:actual',
+    'demo:deploy:after',
+    done
+  );
+});
+
+gulp.task('demo:deploy:actual', function () {
+  console.log('Starting to deploy files...');
+  return gulp.src(DEPLOY_TEMP_PATH + '/**/*')
+    .pipe(deploy())
+  ;
+});
+
+gulp.task('demo:deploy:before', function (done) {
+
+  // Clearing temp directories and making a temp copy.
+  deployClearTemp()
+    .then(function () {
+        makeTempCopy(done);
+    })
+  ;
+
+
+  /**
+   * Makes a temporary copy of the demos directory with symlinks resolved.
+   *
+   * @param {function} callback
+   */
+  function makeTempCopy (callback) {
+    ncp(DEMO_PATH, DEPLOY_TEMP_PATH, {
+      dereference: true
+    }, function (error) {
+      if (error) {
+        return console.error(error);
+      }
+      console.log('Temporary copy created!');
+      callback();
+    });
+  }
+
+});
+
+gulp.task('demo:deploy:after', function () {
+  return deployClearTemp();
+});
+
+
 //==============//
@@ -92,1 +168,9 @@ // DEFAULT TASK //
 });
+
+
+/**
+ * Clears temp directory.
+ */
+function deployClearTemp () {
+  return del([DEPLOY_TEMP_PATH, './.publish']);
+}

karma.conf.js

@@ -7,4 +7,4 @@ module.exports = function (config) {
       // Third-party dependencies
-      'bower_components/angular/angular.js',
-      'bower_components/angular-mocks/angular-mocks.js',
+      'node_modules/angular/angular.js',
+      'node_modules/angular-mocks/angular-mocks.js',
 
@@ -11,0 +11,0 @@ // Module files

package.json

 {
   "name": "betsol-ng-intl-tel-input",
   "description": "intl-tel-input integration for Angular.js",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/betsol/ng-intl-tel-input",
@@ -9,13 +9,18 @@ "license": "MIT",
   "dependencies": {
-    "intl-tel-input": "^7.1.1"
+    "intl-tel-input": "^8.4.6"
   },
   "devDependencies": {
+    "angular": "^1.5.0",
+    "angular-mocks": "^1.5.0",
+    "bootstrap": "^3.3.6",
     "del": "^2.2.0",
     "gulp": "~3",
     "gulp-concat": "^2.5.2",
+    "gulp-gh-pages": "^0.5.4",
     "gulp-header": "^1.7.1",
-    "gulp-ng-annotate": "^1.1.0",
+    "gulp-ng-annotate": "^2.0.0",
     "gulp-rename": "~1",
     "gulp-uglify": "^1.5.2",
     "gulp-util": "^3.0.7",
+    "jquery": "^2.2.1",
     "karma": "^0.13.9",
@@ -26,5 +31,7 @@ "karma-chrome-launcher": "^0.2.0",
     "karma-mocha": "^0.2.0",
-    "karma-mocha-reporter": "^1.1.1",
+    "karma-mocha-reporter": "^2.0.0",
     "mocha": "^2.4.5",
-    "run-sequence": "^1.1.3"
+    "ncp": "^2.0.0",
+    "run-sequence": "^1.1.3",
+    "spa-server": "^1.0.0"
   },
@@ -31,0 +38,0 @@ "repository": {

readme.md

 # betsol-ng-intl-tel-input
 
+[![npm version](https://badge.fury.io/js/betsol-ng-intl-tel-input.svg)](http://badge.fury.io/js/betsol-ng-intl-tel-input)
 [![Bower version](https://badge.fury.io/bo/betsol-ng-intl-tel-input.svg)](http://badge.fury.io/bo/betsol-ng-intl-tel-input)
-[![npm version](https://badge.fury.io/js/betsol-ng-intl-tel-input.svg)](http://badge.fury.io/js/betsol-ng-intl-tel-input)
 
@@ -14,3 +14,5 @@
 
+Both `7.x` and `8.x` versions of `intl-tel-input` are supported at this moment.
 
+
 ## Installation
@@ -22,3 +24,3 @@
 
-### Install integration library with `NPM` or `Bower`
+### Install integration library with `npm` or `Bower`
 
@@ -67,3 +69,3 @@ - `npm i --save betsol-ng-intl-tel-input`
 angular
-  .module('app', [])
+  .module('app', ['betsol.intlTelInput'])
   .config(function (intlTelInputOptions) {
@@ -107,5 +109,5 @@ angular.extend(intlTelInputOptions, {
 angular
-  .module('app', [])
-  .controller(function ($scope) {
-    $scope.myIntlTelInputCtrl = {};
+  .module('app', ['betsol.intlTelInput'])
+  .controller('MyCtrl', function ($scope) {
+    $scope.myIntlTelInputCtrl;
     $scope.changeCountryToRussia = function () {
@@ -166,5 +168,7 @@ $scope.myIntlTelInputCtrl.setCountry('ru');
 
-- `npm i && bower install` to initialize the project
+- `npm i` to initialize the project
 - `gulp build` to re-build the dist files
 - `gulp test` or `karma start` to test the code
+- `gulp start` to run demo server and watches
+- `gulp demo:deploy` to deploy the demo on GitHub Pages
 
@@ -171,0 +175,0 @@ Do not add dist files to the PR itself.

src/scripts/module.js

@@ -21,29 +21,38 @@ (function (angular) {
 
+          /**
+           * Obtaining reference to the plugin API
+           * and making sure it's present.
+           */
+          var pluginApi = $element.intlTelInput;
+          if (!pluginApi) {
+            log('intl-tel-input jQuery plugin must be loaded, skipping directive initialization');
+            return;
+          }
+
           // Building options for this control.
           var options = angular.extend({}, $scope.intlTelInputOptions || {}, intlTelInputOptions);
 
+          // Using this flag in order to determine if we are in the control's rendering phase or not.
+          // This is required for country change event right now.
+          var renderingView = false;
+
+          // Using this flag in order to determine if we are in the process of changing the country.
+          // This is required for country change event right now.
+          var settingCountry = false;
+
           // Initializing the control with the plugin.
-          $element
-            .intlTelInput(options)
-            .done(function () {
-              // Updating state of the model controller
-              // when plugin finally initializes.
-              updateModelValue();
-              modelCtrl.$validate();
-            })
-          ;
+          callApi(options);
 
-          // Rendering view when model changes.
+          /**
+           * Updating the control's view when model changes.
+           */
           modelCtrl.$render = function () {
-            if (modelCtrl.$viewValue) {
-              $element.intlTelInput('setNumber', modelCtrl.$modelValue);
-            }
+            renderingView = true;
+            callApi('setNumber', modelCtrl.$viewValue || '');
+            renderingView = false;
           };
 
-          // Setting correct model value when view is modified.
-          modelCtrl.$parsers.unshift(function () {
-            return getModelValue();
-          });
-
-          // Validating the input.
+          /**
+           * Validating the input using plugin's API.
+           */
           modelCtrl.$validators.phoneNumber = function (modelValue, viewValue) {
@@ -53,25 +62,60 @@ if (!modelValue && !viewValue) {
             }
-            return $element.intlTelInput('isValidNumber');
+            return callApi('isValidNumber');
           };
 
-          // Destroying the plugin with the directive.
+          /**
+           * Destroying the plugin with the directive.
+           */
           $scope.$on('$destroy', function () {
-            $element.intlTelInput('destroy');
+            callApi('destroy');
           });
 
-          if ('object' === typeof $scope.intlTelInputController) {
-            $scope.intlTelInputController.setCountry = function (countryName) {
-              $element.intlTelInput('setCountry', countryName);
-              updateModelValue();
-            };
-          }
+          /**
+           * The "$setViewValue" is called when control's value has changed. It's triggered by the DOM events.
+           * Angular adds all basic event listeners to the underlying input element by default,
+           * and will trigger this function for us providing the .val() value as a first argument.
+           *
+           * Wrapping the original function in order to get the proper telephone number from the plugin's API
+           * instead of the default .val() of the underlying input field.
+           */
+          var $setViewValue = modelCtrl.$setViewValue;
+          modelCtrl.$setViewValue = function () {
+            arguments[0] = callApi('getNumber');
+            $setViewValue.apply(modelCtrl, arguments);
+          };
 
-          $element.bind('country-change', updateModelValue);
+          /**
+           * Listening for changes of the country in order to update the model value.
+           *
+           * We are using "renderingView" flag in order to check if country has
+           * changed by the plugin itself during control's rendering phase or it
+           * was changed manually by the user.
+           *
+           * Using two event names for both latest and legacy versions of the plugin.
+           */
+          $element.bind('country-change countrychange', function () {
+            if (!renderingView && !settingCountry) {
+              // It was changed by the user, so we need to update the model value.
+              updateViewValue('countrychange');
+            }
+          });
 
-          function getModelValue () {
-            return $element.intlTelInput('getNumber');
+          $scope.intlTelInputController = {};
+
+          $scope.intlTelInputController.setCountry = function (countryName) {
+            settingCountry = true;
+            callApi('setCountry', countryName);
+            updateViewValue();
+            settingCountry = false;
+          };
+
+
+          function callApi () {
+            return pluginApi.apply($element, arguments);
           }
 
-          function updateModelValue () {
-            modelCtrl.$setViewValue(getModelValue());
+          function updateViewValue (trigger) {
+            $scope.$evalAsync(function () {
+              modelCtrl.$setViewValue('', trigger);
+            });
           }
@@ -85,2 +129,7 @@
 
+
+  function log (message) {
+    console.log('ng-intl-tel-input: ' + message);
+  }
+
 })(angular);

test/test-module.js

@@ -14,4 +14,6 @@ describe('Module', function () {
 
+  // @todo: add tests!
+
   it('does nothing', function () {});
 
 });

No alert changes

Improved metrics

Total package byte prevSize

27964

increased by64.62%

Number of package files

14

increased by7.69%

Lines of code

445

increased by49.33%

Number of lines in readme file

216

increased by1.89%

Worsened metrics

Dev dependency count

23

increased by43.75%

Dependency changes

• + Addedintl-tel-input@8.5.2(transitive)

• + Addedjquery@3.7.1(transitive)

• - Removedintl-tel-input@7.1.1(transitive)

• Updatedintl-tel-input@^8.4.6