angular-ui-select2-rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 57910819d2a3e3dbb60b6ae53522e917d430f35d
-  data.tar.gz: 3bcddc7f46b2b678457266afe5611a5c845469df
+  metadata.gz: a757547c35d66b0732c19bedc6a13087c124842f
+  data.tar.gz: c4d0e3ce67b105608615d24b5ef86078157b2768
 SHA512:
-  metadata.gz: 8e4108bd2aab052bd980b709e73b0132dbb3f1258f04dcd0e5ede80b87ccaa87ba8dbcdd1ba814a1f7eea691506a327339858a67b08f1a1bde9a1537112e025f
-  data.tar.gz: 3415c814a61365b9d6a20c92940fdbdbe65ac3ddfc908709b48f761aec8fff0bf351c77bf38990b490d3c84afc3bd6a07b66efced8ad93f4aa4af551ef93223e
+  metadata.gz: f3f47c308cde2c4387e19d2496068d9adf289652d313a176c2e5eb54004f332e15c6b1ed1dd66929813da983345928a1e53046cf8c8784d5e76246bc69ce15b9
+  data.tar.gz: 18b262da78b4281a0fb03443d3e865f94ca8cd73bc9178a00bba3d27f13181cc3ac330b9fc444372b9ad3217a28bac87fab1c0b0e4b06270c56206d9d56864ee

data/README.md

@@ -1,4 +1,4 @@
-# Angular::Ui::Select2::Rails
+# angular-ui-select2-rails
 
 [angular-ui-select2](https://github.com/angular-ui/ui-select2) packaged for Rails assets pipeline
 
@@ -13,13 +13,13 @@ gem 'angular-ui-select2-rails'
 Add the following directive to your Javascript manifest file (application.js):
 
 ```js
-//= require angular-ui-select2-rails
+//= require angular-ui-select2
 ```
 
 Add the following directive to your CSS manifest file (application.css):
 
 ```css
-*= require angular-ui-select2-rails
+*= require angular-ui-select2
 ```
 
 

data/lib/angular/ui/select2/rails/version.rb

@@ -2,7 +2,7 @@ module Angular
   module Ui
     module Select2
       module Rails
-        VERSION = "0.1.0"
+        VERSION = "0.1.1"
       end
     end
   end

data/vendor/assets/javascripts/angular-ui-select2-original.js

@@ -11,7 +11,7 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
     angular.extend(options, uiSelect2Config);
   }
   return {
-    require: '?ngModel',
+    require: 'ngModel',
     compile: function (tElm, tAttrs) {
       var watch,
         repeatOption,
@@ -33,6 +33,44 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
         // instance-specific options
         var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2));
 
+        /*
+        Convert from Select2 view-model to Angular view-model.
+        */
+        var convertToAngularModel = function(select2_data) {
+          var model;
+          if (opts.simple_tags) {
+            model = []
+            angular.forEach(select2_data, function(value, index) {
+              model.push(value.id)
+            })
+          } else {
+            model = select2_data
+          }
+          return model
+        }
+
+        /*
+        Convert from Angular view-model to Select2 view-model.
+        */
+        var convertToSelect2Model = function(angular_data) {
+          var model = []
+          if (!angular_data) {
+            return model;
+          }
+
+          if (opts.simple_tags) {
+            model = [];
+            angular.forEach(
+              angular_data,
+              function(value, index) {
+                model.push({'id': value, 'text': value});
+              })
+          } else {
+            model = angular_data;
+          }
+          return model
+        }
+
         if (isSelect) {
           // Use <select multiple> instead
           delete opts.multiple;
@@ -43,18 +81,22 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
 
         if (controller) {
           // Watch the model for programmatic changes
+           scope.$watch(tAttrs.ngModel, function(current, old) {
+            if (!current) {
+              return
+            }
+            if (current == old) {
+              return
+            }
+            controller.$render()
+          }, true)
           controller.$render = function () {
             if (isSelect) {
               elm.select2('val', controller.$viewValue);
             } else {
-              if (isMultiple) {
-                if (!controller.$viewValue) {
-                  elm.select2('data', []);
-                } else if (angular.isArray(controller.$viewValue)) {
-                  elm.select2('data', controller.$viewValue);
-                } else {
-                  elm.select2('val', controller.$viewValue);
-                }
+              if (opts.multiple) {
+                elm.select2(
+                  'data', convertToSelect2Model(controller.$viewValue));
               } else {
                 if (angular.isObject(controller.$viewValue)) {
                   elm.select2('data', controller.$viewValue);
@@ -80,12 +122,26 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
             });
           }
 
+          // Update valid and dirty statuses
+          controller.$parsers.push(function (value) {
+            var div = elm.prev()
+            div
+              .toggleClass('ng-invalid', !controller.$valid)
+              .toggleClass('ng-valid', controller.$valid)
+              .toggleClass('ng-invalid-required', !controller.$valid)
+              .toggleClass('ng-valid-required', controller.$valid)
+              .toggleClass('ng-dirty', controller.$dirty)
+              .toggleClass('ng-pristine', controller.$pristine);
+            return value;
+          });
+
           if (!isSelect) {
             // Set the view and model value and update the angular template manually for the ajax/multiple select2.
             elm.bind("change", function () {
               if (scope.$$phase) return;
               scope.$apply(function () {
-                angular.extend(controller.$viewValue, elm.select2('data'));
+                controller.$setViewValue(
+                  convertToAngularModel(elm.select2('data')));
               });
             });
 
@@ -93,7 +149,7 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
               var initSelection = opts.initSelection;
               opts.initSelection = function (element, callback) {
                 initSelection(element, function (value) {
-                  controller.$setViewValue(value);
+                  controller.$setViewValue(convertToAngularModel(value));
                   callback(value);
                 });
               };
@@ -101,8 +157,16 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           }
         }
 
+        elm.bind("$destroy", function() {
+          elm.select2("destroy");
+        });
+
         attrs.$observe('disabled', function (value) {
-          elm.select2(value && 'disable' || 'enable');
+          elm.select2('enable', !value);
+        });
+
+        attrs.$observe('readonly', function (value) {
+          elm.select2('readonly', !!value);
         });
 
         if (attrs.ngMultiple) {
@@ -111,9 +175,6 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
           });
         }
 
-        // Set initial value since Angular doesn't
-        //elm.val(scope.$eval(attrs.ngModel));
-
         // Initialize the plugin late so that the injected DOM does not disrupt the template compiler
         $timeout(function () {
           elm.select2(opts);
@@ -125,7 +186,8 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
 
           // Not sure if I should just check for !isSelect OR if I should check for 'tags' key
           if (!opts.initSelection && !isSelect)
-            controller.$setViewValue(elm.select2('data'));
+            controller.$setViewValue(
+              convertToAngularModel(elm.select2('data')));
         });
       };
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: angular-ui-select2-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Tymon Tobolski
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-16 00:00:00.000000000 Z
+date: 2013-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails