Release 0.3.0

vitalets · Sep 6, 2016 · 1b32405 · 1b32405
1 parent 3aa6d06
commit 1b32405
Show file tree

Hide file tree

Showing 14 changed files with 336 additions and 96 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -1,6 +1,18 @@
 Angular-xeditable changelog
 =============================
 
+Version 0.3.0 Sep 06, 2016
+
+----------------------------
+[enh #530] Added support for ngTagsInput (ckosloski)
+[enh #525] Updated css for editable-popup to work better on phones (ckosloski)
+[bug #520] Remove support for html5 datetime object. (ckosloski)
+[enh #515] Add editable-theme attribute to allow overriding of theme per control. (ckosloski)
+[enh #509] Support styling of the bsdate textbox (ckosloski)
+[enh #504] Wrap checkbox text in a span to allow for styling (ckosloski)
+[bug #500] Vertical Scrollbar in Textarea in IE11 fix (ckosloski)
+
+
 Version 0.2.0 Jun 28, 2016
 
 ----------------------------

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-xeditable",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Edit in place for AngularJS",
   "author": "https://github.com/vitalets",
   "license": "MIT",

diff --git a/dist/css/xeditable.css b/dist/css/xeditable.css
@@ -4,7 +4,7 @@
 /* class for single editable element */
 .editable-wrap {
   display: inline-block;
-  white-space: nowrap;
+  white-space: pre;
   margin: 0;
 }
 
@@ -114,7 +114,7 @@ a.editable-empty:focus {
 }
 
 /* editable popover */
-.popover-wrapper a {
+.popover-wrapper > a {
   /* make the link always show up */
   display: inline !important;
 }
@@ -135,7 +135,6 @@ a.editable-empty:focus {
   width: auto;
   display: inline-block;
   left: 50%;
-  margin-left: -110px;
   z-index: 101;
 }
 
@@ -148,7 +147,6 @@ a.editable-empty:focus {
   border-top: 10px solid #AAA;
   position:absolute;
   bottom:-10px;
-  left:100px;
 }
 
 .popover-wrapper form:after {
@@ -160,6 +158,34 @@ a.editable-empty:focus {
   border-top: 9px solid #FFF;
   position:absolute;
   bottom:-9px;
-  left:101px;
+}
+
+
+@media screen and (max-width: 750px) {
+    .popover-wrapper form {
+        margin-left: -60px;
+    }
+
+    .popover-wrapper form:before {
+        left:50px;
+    }
+
+    .popover-wrapper form:after {
+        left:51px;
+    }
+}
+
+@media screen and (min-width: 750px) {
+    .popover-wrapper form {
+        margin-left: -110px;
+    }
+
+    .popover-wrapper form:before {
+        left:100px;
+    }
+
+    .popover-wrapper form:after {
+        left:101px;
+    }
 }
 
diff --git a/dist/css/xeditable.min.css b/dist/css/xeditable.min.css
diff --git a/dist/js/xeditable.js b/dist/js/xeditable.js
@@ -1,7 +1,7 @@
 /*!
-angular-xeditable - 0.2.0
+angular-xeditable - 0.3.0
 Edit-in-place for angular.js
-Build date: 2016-06-28 
+Build date: 2016-09-06 
 */
 /**
  * Angular-xeditable module 
@@ -120,6 +120,11 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto
                     this.inputEl.removeAttr('ng-change');
                 }
 
+                if (this.attrs.eStyle) {
+                    inputDatePicker.attr('style', this.attrs.eStyle);
+                    this.inputEl.removeAttr('style');
+                }
+
                 this.scope.dateOptions = {
                     formatDay:  this.attrs.eFormatDay || 'dd',
                     formatMonth: this.attrs.eFormatMonth || 'MMMM',
@@ -213,7 +218,7 @@ angular.module('xeditable').directive('editableCheckbox', ['editableDirectiveFac
         this.parent.render.call(this);
         if(this.attrs.eTitle) {
           this.inputEl.wrap('<label></label>');
-          this.inputEl.parent().append(this.attrs.eTitle);
+          this.inputEl.parent().append('<span>' + this.attrs.eTitle + '</span>');
         }
       },
       autosubmit: function() {
@@ -339,6 +344,48 @@ Input types: text|password|email|tel|number|url|search|color|date|datetime|datet
 }());
 
 
+/*
+ Tags input directive for AngularJS
+ https://github.com/mbenford/ngTagsInput
+ */
+angular.module('xeditable').directive('editableTagsInput', ['editableDirectiveFactory', 'editableUtils',
+  function(editableDirectiveFactory, editableUtils) {
+    var findElement = function(name) {
+        for(var i = 0, len = autoComplete.length; i < len; i++) {
+            if (autoComplete[i].name === name) {
+                return i;
+            }
+        }
+    };
+
+    var autoComplete = [];
+
+    var dir = editableDirectiveFactory({
+        directiveName: 'editableTagsInput',
+        inputTpl: '<tags-input></tags-input>',
+        render: function () {
+            var index = findElement(this.name);
+            this.parent.render.call(this);
+            this.inputEl.append(editableUtils.rename('auto-complete', autoComplete[index].element));
+            this.inputEl.removeAttr('ng-model');
+            this.inputEl.attr('ng-model', '$parent.$data');
+        }
+    });
+
+    var linkOrg = dir.link;
+
+    dir.link = function (scope, el, attrs, ctrl) {
+        var autoCompleteEl = el.find('editable-tags-input-auto-complete');
+
+        autoComplete.push({name : attrs.name || attrs.editableTagsInput, element : autoCompleteEl.clone()});
+
+        autoCompleteEl.remove();
+
+        return linkOrg(scope, el, attrs, ctrl);
+    };
+
+    return dir;
+}]);
 // radiolist
 angular.module('xeditable').directive('editableRadiolist', [
   'editableDirectiveFactory',
@@ -427,18 +474,8 @@ angular.module('xeditable').directive('editableTextarea', ['editableDirectiveFac
  AngularJS-native version of Select2 and Selectize
  https://github.com/angular-ui/ui-select
  */
-angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFactory',
-    function(editableDirectiveFactory) {
-        var rename = function (tag, el) {
-            var newEl = angular.element('<' + tag + '/>');
-            newEl.html(el.html());
-            var attrs = el[0].attributes;
-            for (var i = 0; i < attrs.length; ++i) {
-                newEl.attr(attrs.item(i).nodeName, attrs.item(i).value);
-            }
-            return newEl;
-        };
-
+angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFactory', 'editableUtils',
+    function(editableDirectiveFactory, editableUtils) {
         var findElement = function(name) {
             for(var i = 0, len = match.length; i < len; i++) {
                   if (match[i].name === name) {
@@ -456,8 +493,8 @@ angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFact
             render: function () {
                 var index = findElement(this.name);
                 this.parent.render.call(this);
-                this.inputEl.append(rename('ui-select-match', match[index].element));
-                this.inputEl.append(rename('ui-select-choices', choices[index].element));
+                this.inputEl.append(editableUtils.rename('ui-select-match', match[index].element));
+                this.inputEl.append(editableUtils.rename('ui-select-choices', choices[index].element));
                 this.inputEl.removeAttr('ng-model');
                 this.inputEl.attr('ng-model', '$parent.$parent.$data');
             }
@@ -510,7 +547,7 @@ angular.module('xeditable').factory('editableController',
     self.editorEl = null;
     self.single = true;
     self.error = '';
-    self.theme =  editableThemes[editableOptions.theme] || editableThemes['default'];
+    self.theme =  editableThemes[$attrs.editableTheme] || editableThemes[editableOptions.theme] || editableThemes['default'];
     self.parent = {};
 
     //will be undefined if icon_set is default and theme is default
@@ -529,7 +566,7 @@ angular.module('xeditable').factory('editableController',
     self.single = null;
 
     /**
-     * Attributes defined with `e-*` prefix automatically transfered from original element to
+     * Attributes defined with `e-*` prefix automatically transferred from original element to
      * control.  
      * For example, if you set `<span editable-text="user.name" e-style="width: 100px"`>
      * then input will appear as `<input style="width: 100px">`.  
@@ -556,7 +593,7 @@ angular.module('xeditable').factory('editableController',
      * @var {string|attribute} blur
      * @memberOf editable-element
      */     
-    // no real `blur` property as it is transfered to editable form
+    // no real `blur` property as it is transferred to editable form
 
     //init
     self.init = function(single) {
@@ -795,15 +832,6 @@ angular.module('xeditable').factory('editableController',
       self.editorEl.remove();
       $element.removeClass('editable-hide');
 
-      // Manually remove the watcher on 'has-error' to prevent a memory leak on it.
-      for (var i = 0, len = $scope.$$watchers.length; i < len; i++) {
-        if ($scope.$$watchers[i] !== undefined && $scope.$$watchers[i].last && $scope.$$watchers[i].last !== undefined &&
-            typeof $scope.$$watchers[i].last === 'object' && "has-error" in $scope.$$watchers[i].last) {
-          $scope.$$watchers.splice(i, 1);
-          break;
-        }
-      }
-
       // onhide
       return self.onhide();
     };
@@ -1003,7 +1031,7 @@ function($parse, $compile, editableThemes, $rootScope, $document, editableContro
         if (ctrl[1]) {
           eFormCtrl = ctrl[1];
           hasForm = attrs.eSingle === undefined;
-        } else if (attrs.eForm) { // element not wrapped by <form>, but we hane `e-form` attr
+        } else if (attrs.eForm) { // element not wrapped by <form>, but we have `e-form` attr
           var getter = $parse(attrs.eForm)(scope);
           if (getter) { // form exists in scope (above), e.g. editable column
             eFormCtrl = getter;
@@ -1747,6 +1775,16 @@ angular.module('xeditable').factory('editablePromiseCollection', ['$q', function
         return offset ? letter.toUpperCase() : letter;
       }).
       replace(MOZ_HACK_REGEXP, 'Moz$1');
+    },
+
+    rename: function (tag, el) {
+      var newEl = angular.element('<' + tag + '/>');
+      newEl.html(el.html());
+      var attrs = el[0].attributes;
+      for (var i = 0; i < attrs.length; ++i) {
+          newEl.attr(attrs.item(i).nodeName, attrs.item(i).value);
+      }
+      return newEl;
     }
   };
 }]);

diff --git a/dist/js/xeditable.min.js b/dist/js/xeditable.min.js