Release 0.8.0

vitalets · Jun 6, 2017 · 665be98 · 665be98
1 parent 2f90778
commit 665be98
Show file tree

Hide file tree

Showing 14 changed files with 224 additions and 37 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -1,6 +1,12 @@
 Angular-xeditable changelog
 =============================
 
+Version 0.8.0 Jun 6, 2017
+
+----------------------------
+[enh #659] Add no buttons support for ui-select (ckosloski)
+[enh #657] Add support for ui-boostrap popover (ckosloski)
+
 Version 0.7.1 Apr 24, 2017
 
 ----------------------------

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-xeditable",
-  "version": "0.7.1",
+  "version": "0.8.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
@@ -132,6 +132,16 @@ a.editable-empty:focus {
   text-decoration: none;
 }
 
+/* ui-bootstrap editable popover */
+.ui-popover-wrapper a {
+    /* make the link always show up */  
+    display: inline !important;
+}
+
+.ui-popover-wrapper form {
+    display: none !important;
+}
+
 /* editable popover */
 .popover-wrapper > a {
   /* make the link always show up */

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.7.1
+angular-xeditable - 0.8.0
 Edit-in-place for angular.js
-Build date: 2017-04-24 
+Build date: 2017-06-06 
 */
 /**
  * Angular-xeditable module 
@@ -696,6 +696,25 @@ angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFact
                 this.inputEl.append(editableUtils.rename('ui-select-choices', this.attrs.$choicesElement));
                 this.inputEl.removeAttr('ng-model');
                 this.inputEl.attr('ng-model', '$parent.$parent.$data');
+            },
+            autosubmit: function() {
+                var self = this;
+                self.inputEl.bind('change', function() {
+                    setTimeout(function() {
+                        self.scope.$apply(function() {
+                            self.scope.$form.$submit();
+                        });
+                    }, 500);
+                });
+
+                self.inputEl.bind('keydown', function(e) {
+                    //submit on tab
+                    if (e.keyCode === 9 && self.editorEl.attr('blur') === 'submit') {
+                        self.scope.$apply(function() {
+                            self.scope.$form.$submit();
+                        });
+                    }
+                });
             }
         });
 
@@ -730,8 +749,8 @@ angular.module('xeditable').factory('editableController',
   function($q, editableUtils) {
 
   //EditableController function
-  EditableController.$inject = ['$scope', '$attrs', '$element', '$parse', 'editableThemes', 'editableIcons', 'editableOptions', '$rootScope', '$compile', '$q', '$sce'];
-  function EditableController($scope, $attrs, $element, $parse, editableThemes, editableIcons, editableOptions, $rootScope, $compile, $q, $sce) {
+  EditableController.$inject = ['$scope', '$attrs', '$element', '$parse', 'editableThemes', 'editableIcons', 'editableOptions', '$rootScope', '$compile', '$q', '$sce', '$templateCache'];
+  function EditableController($scope, $attrs, $element, $parse, editableThemes, editableIcons, editableOptions, $rootScope, $compile, $q, $sce, $templateCache) {
     var valueGetter;
 
     //if control is disabled - it does not participate in waiting process
@@ -787,7 +806,16 @@ angular.module('xeditable').factory('editableController',
      * @var {string|attribute} buttons
      * @memberOf editable-element
      */    
-    self.buttons = 'right'; 
+    self.buttons = 'right';
+
+    /**
+     * Whether to show the editable element in a ui-bootstrap popover. Values: `true|false`.
+     *
+     * @var {boolean|attribute} popover
+     * @memberOf editable-element
+     */
+    self.popover = false;
+
     /**
      * Action when control losses focus. Values: `cancel|submit|ignore`.
      * Has sense only for single editable element.
@@ -848,7 +876,7 @@ angular.module('xeditable').factory('editableController',
        * @var {method|attribute} onhide
        * @memberOf editable-element
        */
-      if($attrs.onhide) {
+      if ($attrs.onhide) {
         self.onhide = function() {
           return $parse($attrs.onhide)($scope);
         };
@@ -860,7 +888,7 @@ angular.module('xeditable').factory('editableController',
        * @var {method|attribute} oncancel
        * @memberOf editable-element
        */
-      if($attrs.oncancel) {
+      if ($attrs.oncancel) {
         self.oncancel = function() {
           return $parse($attrs.oncancel)($scope);
         };
@@ -892,6 +920,10 @@ angular.module('xeditable').factory('editableController',
         };
       }
 
+      if ($attrs.popover) {
+        self.popover = self.attrs.popover;
+      }
+
       // watch change of model to update editable element
       // now only add/remove `editable-empty` class.
       // Initially this method called with newVal = undefined, oldVal = undefined
@@ -1001,6 +1033,13 @@ angular.module('xeditable').factory('editableController',
         self.editorEl.attr('blur', self.attrs.blur || editableOptions.blurElem);
       }
 
+      if (self.popover) {
+        var wrapper = angular.element('<div></div>');
+        wrapper.append(self.editorEl);
+        self.editorEl = wrapper;
+        $templateCache.put('popover.html', self.editorEl[0].outerHTML);
+      }
+
       //apply `postrender` method of theme
       if (angular.isFunction(theme.postrender)) {
         theme.postrender.call(self);
@@ -1026,7 +1065,7 @@ angular.module('xeditable').factory('editableController',
 
       /*
       Originally render() was inside init() method, but some directives polluting editorEl,
-      so it is broken on second openning.
+      so it is broken on second opening.
       Cloning is not a solution as jqLite can not clone with event handler's.
       */
       self.render();
@@ -1058,6 +1097,10 @@ angular.module('xeditable').factory('editableController',
       self.editorEl.remove();
       $element.removeClass('editable-hide');
 
+      if (self.popover) {
+        $templateCache.remove('popover.html');
+      }
+
       // onhide
       return self.onhide();
     };

diff --git a/dist/js/xeditable.min.js b/dist/js/xeditable.min.js
diff --git a/index.html b/index.html
@@ -11,18 +11,24 @@
     <!--ng-tags css-->
     <link href="bower_components/ng-tags-input/ng-tags-input.css" rel="stylesheet" media="screen">
     <link href="bower_components/ng-tags-input/ng-tags-input.bootstrap.css" rel="stylesheet" media="screen">
+    <!--jquery-ui css-->
+    <link href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css" rel="stylesheet" media="screen">
     <!--xeditable css-->
     <link href="dist/css/xeditable.css" rel="stylesheet" media="screen">
     <!--docs css-->
     <link href="docs/css/docs.css" rel="stylesheet" media="screen">
+    <!--jquery (needed for bootstrap)-->
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <!--jquery ui-->
+    <script src="bower_components/jquery-ui/jquery-ui.js"></script>
     <!--angular-->
     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-mocks/angular-mocks.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-    <!--jquery (needed for bootstrap)-->
-    <script src="bower_components/jquery/dist/jquery.js"></script>
     <!--bootstrap-->
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+    <!--angular-ui-date-->
+    <script src="bower_components/angular-ui-date/dist/date.js"></script>
     <!--angular-ui-bootstrap-->
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <!--ui-select-->
@@ -51,7 +57,7 @@
             <li class="active"><a href="#">Home</a></li>
             <li><a href="https://github.com/vitalets/angular-xeditable">GitHub</a></li>
           </ul>
-          <form class="navbar-form navbar-right"><a href="zip/angular-xeditable-0.7.1.zip" style="font-weight:bold" class="btn btn-primary"><span style="margin-right:10px" class="glyphicon glyphicon-save"></span>Download 0.7.1 ~ kb</a></form>
+          <form class="navbar-form navbar-right"><a href="zip/angular-xeditable-0.8.0.zip" style="font-weight:bold" class="btn btn-primary"><span style="margin-right:10px" class="glyphicon glyphicon-save"></span>Download 0.8.0 ~ kb</a></form>
           <div style="padding-top: 13px">
 <!-- google+ -->
 <div id="socials" style="text-align: center">
@@ -134,6 +140,7 @@
                   <li><a href="#validate-remote">Validate remote</a></li>
                   <li><a href="#edit-disabled">Disable editing</a></li>
                   <li><a href="#editable-popover">Editable Popover</a></li>
+                  <li><a href="#uipopover">Editable ui-bootstrap Popover</a></li>
                 </ul>
               </li>
               <li><a href="#onbeforesave">Submit</a>
@@ -221,7 +228,7 @@ <h1>Get started</h1>
 
               <pre class="prettyprint">&lt;link href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
             </li>
-            <li> <span>Install angular-xeditable via </span><a href="http://bower.io" target="_blank">bower</a><span> or  </span><a href="zip/angular-xeditable-0.7.1.zip">download latest zip    </a>
+            <li> <span>Install angular-xeditable via </span><a href="http://bower.io" target="_blank">bower</a><span> or  </span><a href="zip/angular-xeditable-0.8.0.zip">download latest zip    </a>
               <pre class="prettyprint">bower install angular-xeditable </pre>
             </li>
             <li>Include angular-xeditable into your project
@@ -1478,7 +1485,7 @@ <h3>demo</h3>
   </div>
 </div></div>
                       <pre>{{ debug["editable-popover"] | json }}</pre>
-                      <p><p>To made an editable field display in a popover, wrap the editable in <code>&lt;div class=&quot;popover-wrapper&quot;&gt;</code>.</p>
+                      <p><p>To make a single editable field display in a pure css popover, wrap the editable in <code>&lt;div class=&quot;popover-wrapper&quot;&gt;</code>.</p>
 </p>
                       <!--script(src=dir+'/controller.js')-->
                       <script>app.controller('EditPopoverCtrl', function($scope) {
@@ -1497,6 +1504,68 @@ <h3>controller.js</h3>
   $scope.user = {
     name: 'awesome user'
   };  
+});</pre>
+                    </section>
+                    <section id="uipopover">
+                      <h1>Editable ui-bootstrap Popover</h1>
+                      <!-- watch change of user to update rootScope for debugging-->
+                      <h3>demo</h3>
+                      <div class="well line-example"><div ng-controller="UiPopoverCtrl" id="UiPopoverCtrl">
+  <div class="ui-popover-wrapper">
+    <a href="#" 
+       id="simpleText"
+       editable-text="user.name" 
+       e-label="User Name"
+       uib-popover-template="'popover.html'"
+       popover-is-open="popoverIsOpen"
+       popover-append-to-body="true"
+       onshow="popoverIsOpen = !popoverIsOpen" 
+       onhide="popoverIsOpen = !popoverIsOpen"
+       popover="true">{{ user.name || 'empty' }}</a>
+  </div>
+</div></div>
+                      <pre>{{ debug["uipopover"] | json }}</pre>
+                      <p><p>To make a single element editable via <code>ui-boostrap popover</code> do the following:</p>
+<ul>
+<li>Wrap the editable in <code>&lt;div class=&quot;ui-popover-wrapper&quot;&gt;</code>.</li>
+<li>Put the following attributes on the editable element:<ul>
+<li><code>uib-popover-template=&quot;&#39;popover.html&#39;&quot;</code> - The template is generated when the <code>popover</code> attribute is set to `true&#39;</li>
+<li><code>popover-is-open=&quot;popoverIsOpen&quot;</code> - Controls when the popover is opened</li>
+<li><code>onshow=&quot;popoverIsOpen = !popoverIsOpen&quot;</code> - Opens the popover when the editable form is shown</li>
+<li><code>onhide=&quot;popoverIsOpen = !popoverIsOpen&quot;</code> - Closes the popover when the editable form is closed</li>
+<li><code>popover=&quot;true&quot;</code> - Tells the editable directive that this element is to be displayed in the ui-bootstrap popover</li>
+</ul>
+</li>
+</ul>
+</p>
+                      <!--script(src=dir+'/controller.js')-->
+                      <script>app.controller('UiPopoverCtrl', function($scope) {
+  $scope.user = {
+    name: 'awesome user',
+      location: 'location 1'
+  };
+$scope.$watch("user", function(v) { $scope.$parent.debug["uipopover"]=v; }); });</script>
+                      <h3>html</h3>
+                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;UiPopoverCtrl&quot; id=&quot;UiPopoverCtrl&quot;&gt;
+  &lt;div class=&quot;ui-popover-wrapper&quot;&gt;
+    &lt;a href=&quot;#&quot; 
+       id=&quot;simpleText&quot;
+       editable-text=&quot;user.name&quot; 
+       e-label=&quot;User Name&quot;
+       uib-popover-template=&quot;'popover.html'&quot;
+       popover-is-open=&quot;popoverIsOpen&quot;
+       popover-append-to-body=&quot;true&quot;
+       onshow=&quot;popoverIsOpen = !popoverIsOpen&quot; 
+       onhide=&quot;popoverIsOpen = !popoverIsOpen&quot;
+       popover=&quot;true&quot;&gt;{{ user.name || 'empty' }}&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+                      <h3>controller.js</h3>
+                      <pre class="prettyprint">app.controller('UiPopoverCtrl', function($scope) {
+  $scope.user = {
+    name: 'awesome user',
+      location: 'location 1'
+  };
 });</pre>
                     </section>
                     <section id="onbeforesave">
@@ -2796,6 +2865,12 @@ <h3>Attributes</h3><p>Attributes can be defined for any element having <code>edi
                           <td><code>onshow</code></td>
                           <td>method</td>
                           <td><p>Called when control is shown.<br>See <a href="#select-remote">demo</a>.</p>
+</td>
+                        </tr>
+                        <tr>
+                          <td><code>popover</code></td>
+                          <td>boolean</td>
+                          <td><p>Whether to show the editable element in a ui-bootstrap popover. Values: <code>true|false</code>.</p>
 </td>
                         </tr>
                       </tbody>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-xeditable",
   "description": "Edit-in-place for angular.js",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "homepage": "https://vitalets.github.io/angular-xeditable",
   "author": {
     "name": "Vitaliy Potapov",

diff --git a/starter/angular-xeditable/css/xeditable.css b/starter/angular-xeditable/css/xeditable.css
@@ -132,6 +132,16 @@ a.editable-empty:focus {
   text-decoration: none;
 }
 
+/* ui-bootstrap editable popover */
+.ui-popover-wrapper a {
+    /* make the link always show up */  
+    display: inline !important;
+}
+
+.ui-popover-wrapper form {
+    display: none !important;
+}
+
 /* editable popover */
 .popover-wrapper > a {
   /* make the link always show up */