diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 13e28c2d..a2b1d5a8 100644 --- 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 index 566f1d12..cb6a4035 100644 --- 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 index d1c0755e..b86cfae8 100644 --- 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 index 21d867f7..b19ca268 100644 --- a/dist/css/xeditable.min.css +++ b/dist/css/xeditable.min.css @@ -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 */ -.editable-wrap{display:inline-block;white-space:pre;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-text{white-space:nowrap}.editable-bsdate{white-space:nowrap}.editable-bstime{white-space:nowrap}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}.popover-wrapper>a{display:inline!important}.popover-wrapper{display:inline;position:relative}.popover-wrapper form{position:absolute;top:-53px;background:#FFF;border:1px solid #AAA;border-radius:5px;padding:7px;width:auto;display:inline-block;left:50%;z-index:101}.popover-wrapper form:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #AAA;position:absolute;bottom:-10px}.popover-wrapper form:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFF;position:absolute;bottom:-9px}@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}} \ No newline at end of file +.editable-wrap{display:inline-block;white-space:pre;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-text{white-space:nowrap}.editable-bsdate{white-space:nowrap}.editable-bstime{white-space:nowrap}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}.ui-popover-wrapper a{display:inline!important}.ui-popover-wrapper form{display:none!important}.popover-wrapper>a{display:inline!important}.popover-wrapper{display:inline;position:relative}.popover-wrapper form{position:absolute;top:-53px;background:#FFF;border:1px solid #AAA;border-radius:5px;padding:7px;width:auto;display:inline-block;left:50%;z-index:101}.popover-wrapper form:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #AAA;position:absolute;bottom:-10px}.popover-wrapper form:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFF;position:absolute;bottom:-9px}@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}} \ No newline at end of file diff --git a/dist/js/xeditable.js b/dist/js/xeditable.js index 6ff1f133..435b2c34 100644 --- 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('
'); + 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 index bb9616d1..1c06f958 100644 --- a/dist/js/xeditable.min.js +++ b/dist/js/xeditable.min.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.module("xeditable",[]).value("editableOptions",{theme:"default",icon_set:"default",buttons:"right",blurElem:"cancel",blurForm:"ignore",activate:"focus",isDisabled:!1,activationEvent:"click",submitButtonTitle:"Submit",submitButtonAriaLabel:"Submit",cancelButtonTitle:"Cancel",cancelButtonAriaLabel:"Cancel",clearButtonTitle:"Clear",clearButtonAriaLabel:"Clear",displayClearButton:!1}),angular.module("xeditable").directive("editableBsdate",["editableDirectiveFactory","$injector","$parse",function(a,b,c){uibDatepickerConfig=b.get("uibDatepickerConfig"),uibDatepickerPopupConfig=b.get("uibDatepickerPopupConfig");var d=[["eIsOpen","is-open"],["eDateDisabled","date-disabled"],["eDatepickerPopup","uib-datepicker-popup"],["eShowButtonBar","show-button-bar"],["eCurrentText","current-text"],["eClearText","clear-text"],["eCloseText","close-text"],["eCloseOnDateSelection","close-on-date-selection"],["eDatepickerAppendToBody","datepicker-append-to-body"],["eOnOpenFocus","on-open-focus"],["eName","name"],["eDateDisabled","date-disabled"],["eAltInputFormats","alt-input-formats"]],e=[["eFormatDay","formatDay"],["eFormatMonth","formatMonth"],["eFormatYear","formatYear"],["eFormatDayHeader","formatDayHeader"],["eFormatDayTitle","formatDayTitle"],["eFormatMonthTitle","formatMonthTitle"],["eMaxMode","maxMode"],["eMinMode","minMode"],["eDatepickerMode","datepickerMode"]];return a({directiveName:"editableBsdate",inputTpl:"",render:function(){this.parent.render.call(this);var a=this.attrs,b=this.scope,f=angular.element('');f.attr("uib-datepicker-popup",a.eDatepickerPopupXEditable||uibDatepickerPopupConfig.datepickerPopup),f.attr("year-range",a.eYearRange||20),f.attr("ng-readonly",a.eReadonly||!1);for(var g=d.length-1;g>=0;g--){var h=a[d[g][0]];"undefined"!=typeof h&&f.attr(d[g][1],h)}a.eNgChange&&(f.attr("ng-change",a.eNgChange),this.inputEl.removeAttr("ng-change")),a.eStyle&&(f.attr("style",a.eStyle),this.inputEl.removeAttr("style"));var i={maxDate:b.$eval(a.eMaxDate)||uibDatepickerConfig.maxDate,minDate:b.$eval(a.eMinDate)||uibDatepickerConfig.minDate,showWeeks:a.eShowWeeks?"true"===a.eShowWeeks.toLowerCase():uibDatepickerConfig.showWeeks,startingDay:a.eStartingDay||0,initDate:b.$eval(a.eInitDate)||new Date};if(a.eDatepickerOptions){var j=c(a.eDatepickerOptions)(b);angular.extend(i,j)}for(var k=e.length-1;k>=0;k--){var l=a[e[k][0]];"undefined"!=typeof l&&(i[e[k][1]]=l)}b.dateOptions=i;var m=angular.isDefined(a.eShowCalendarButton)?a.eShowCalendarButton:"true";if("true"===m){var n=angular.element(''),o=angular.element('');n.attr("ng-click",a.eNgClick),o.append(n),this.inputEl.append(o)}else f.attr("ng-click",a.eNgClick);f.attr("datepicker-options","dateOptions"),this.inputEl.prepend(f),this.inputEl.removeAttr("class"),this.inputEl.removeAttr("ng-click"),this.inputEl.removeAttr("is-open"),this.inputEl.removeAttr("init-date"),this.inputEl.removeAttr("datepicker-popup"),this.inputEl.removeAttr("required"),this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("date-picker-append-to-body"),this.inputEl.removeAttr("name"),this.inputEl.attr("class","input-group")},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){setTimeout(function(){a.scope.$apply(function(){a.scope.$form.$submit()})},500)}),a.inputEl.bind("keydown",function(b){9===b.keyCode&&"submit"===a.editorEl.attr("blur")&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableBstime",["editableDirectiveFactory",function(a){return a({directiveName:"editableBstime",inputTpl:"",render:function(){this.parent.render.call(this);var a=angular.element('');a.attr("ng-model",this.inputEl.attr("ng-model")),this.inputEl.removeAttr("ng-model"),this.attrs.eNgChange&&(a.attr("ng-change",this.inputEl.attr("ng-change")),this.inputEl.removeAttr("ng-change")),this.inputEl.wrap(a)}})}]),angular.module("xeditable").directive("editableCheckbox",["editableDirectiveFactory",function(a){return a({directiveName:"editableCheckbox",inputTpl:'',render:function(){this.parent.render.call(this),this.inputEl.wrap(""),this.attrs.eTitle&&this.inputEl.parent().append(""+this.attrs.eTitle+"")},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){setTimeout(function(){a.scope.$apply(function(){a.scope.$form.$submit()})},500)})}})}]),angular.module("xeditable").directive("editableChecklist",["editableDirectiveFactory","editableNgOptionsParser",function(a,b){return a({directiveName:"editableChecklist",inputTpl:"",useCopy:!0,render:function(){this.parent.render.call(this);var a=b(this.attrs.eNgOptions),c="",d="";this.attrs.eNgChange&&(c=' ng-change="'+this.attrs.eNgChange+'"'),this.attrs.eChecklistComparator&&(d=' checklist-comparator="'+this.attrs.eChecklistComparator+'"');var e='';this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("ng-options"),this.inputEl.removeAttr("ng-change"),this.inputEl.removeAttr("checklist-comparator"),this.inputEl.html(e)}})}]),angular.module("xeditable").directive("editableCombodate",["editableDirectiveFactory","editableCombodate",function(a,b){return a({directiveName:"editableCombodate",inputTpl:'',render:function(){this.parent.render.call(this);var a={value:new Date(this.scope.$data)},c=this;angular.forEach(["format","template","minYear","maxYear","yearDescending","minuteStep","secondStep","firstItem","errorClass","customClass","roundTime","smartDays"],function(b){var d="e"+b.charAt(0).toUpperCase()+b.slice(1);d in c.attrs&&("minYear"==b||"maxYear"==b||"minuteStep"==b||"secondStep"==b?a[b]=parseInt(c.attrs[d],10):a[b]=c.attrs[d])});var d=b.getInstance(this.inputEl,a);d.$widget.find("select").bind("change",function(a){c.scope.$data=d.getValue()?new Date(d.getValue().replace(/-/g,"/")).toISOString():null})}})}]),function(){var a=function(a){return a.toLowerCase().replace(/-(.)/g,function(a,b){return b.toUpperCase()})},b="text|password|email|tel|number|url|search|color|date|datetime|datetime-local|time|month|week|file".split("|");angular.forEach(b,function(b){var c=a("editable-"+b);angular.module("xeditable").directive(c,["editableDirectiveFactory",function(a){return a({directiveName:c,inputTpl:'',render:function(){if(this.parent.render.call(this),this.attrs.eInputgroupleft||this.attrs.eInputgroupright){if(this.inputEl.wrap(''),this.attrs.eInputgroupleft){var a=angular.element(''+this.attrs.eInputgroupleft+"");this.inputEl.parent().prepend(a)}if(this.attrs.eInputgroupright){var b=angular.element(''+this.attrs.eInputgroupright+"");this.inputEl.parent().append(b)}}if(this.attrs.eLabel){var c=angular.element("");this.attrs.eInputgroupleft||this.attrs.eInputgroupright?this.inputEl.parent().parent().prepend(c):this.inputEl.parent().prepend(c)}this.attrs.eFormclass&&this.editorEl.addClass(this.attrs.eFormclass)},autosubmit:function(){var a=this;a.inputEl.bind("keydown",function(b){9===b.keyCode&&"submit"===a.editorEl.attr("blur")&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}])}),angular.module("xeditable").directive("editableRange",["editableDirectiveFactory","$interpolate",function(a,b){return a({directiveName:"editableRange",inputTpl:'',render:function(){this.parent.render.call(this),this.inputEl.after("")}})}])}(),angular.module("xeditable").directive("editableTagsInput",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableTagsInput",inputTpl:"{{ debug["editable-popover"] | json }}-
To made an editable field display in a popover, wrap the editable in <div class="popover-wrapper">
.
To make a single editable field display in a pure css popover, wrap the editable in <div class="popover-wrapper">
.
<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>+
app.controller('UiPopoverCtrl', function($scope) { + $scope.user = { + name: 'awesome user', + location: 'location 1' + }; });
Attributes can be defined for any element having Called when control is shown. Whether to show the editable element in a ui-bootstrap popover. Values: edi
onshow
method
+
+
See demo.
+
diff --git a/package.json b/package.json
index a6d99510..1418b553 100644
--- 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
index d1c0755e..b86cfae8 100644
--- 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 */
diff --git a/starter/angular-xeditable/css/xeditable.min.css b/starter/angular-xeditable/css/xeditable.min.css
index 21d867f7..b19ca268 100644
--- a/starter/angular-xeditable/css/xeditable.min.css
+++ b/starter/angular-xeditable/css/xeditable.min.css
@@ -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
*/
-.editable-wrap{display:inline-block;white-space:pre;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-text{white-space:nowrap}.editable-bsdate{white-space:nowrap}.editable-bstime{white-space:nowrap}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}.popover-wrapper>a{display:inline!important}.popover-wrapper{display:inline;position:relative}.popover-wrapper form{position:absolute;top:-53px;background:#FFF;border:1px solid #AAA;border-radius:5px;padding:7px;width:auto;display:inline-block;left:50%;z-index:101}.popover-wrapper form:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #AAA;position:absolute;bottom:-10px}.popover-wrapper form:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFF;position:absolute;bottom:-9px}@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}}
\ No newline at end of file
+.editable-wrap{display:inline-block;white-space:pre;margin:0}.editable-wrap .editable-controls,.editable-wrap .editable-error{margin-bottom:0}.editable-wrap .editable-controls>input,.editable-wrap .editable-controls>select,.editable-wrap .editable-controls>textarea{margin-bottom:0}.editable-wrap .editable-input{display:inline-block}.editable-buttons{display:inline-block;vertical-align:top}.editable-buttons button{margin-left:5px}.editable-input.editable-has-buttons{width:auto}.editable-text{white-space:nowrap}.editable-bsdate{white-space:nowrap}.editable-bstime{white-space:nowrap}.editable-bstime .editable-input input[type=text]{width:46px}.editable-bstime .well-small{margin-bottom:0;padding:10px}.editable-range output{display:inline-block;min-width:30px;vertical-align:top;text-align:center}.editable-color input[type=color]{width:50px}.editable-checkbox label span,.editable-checklist label span,.editable-radiolist label span{margin-left:7px;margin-right:10px}.editable-hide{display:none!important}.editable-click,a.editable-click{text-decoration:none;color:#428bca;border-bottom:dashed 1px #428bca}.editable-click:hover,a.editable-click:hover{text-decoration:none;color:#2a6496;border-bottom-color:#2a6496}.editable-empty,.editable-empty:hover,.editable-empty:focus,a.editable-empty,a.editable-empty:hover,a.editable-empty:focus{font-style:italic;color:#D14;text-decoration:none}.ui-popover-wrapper a{display:inline!important}.ui-popover-wrapper form{display:none!important}.popover-wrapper>a{display:inline!important}.popover-wrapper{display:inline;position:relative}.popover-wrapper form{position:absolute;top:-53px;background:#FFF;border:1px solid #AAA;border-radius:5px;padding:7px;width:auto;display:inline-block;left:50%;z-index:101}.popover-wrapper form:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #AAA;position:absolute;bottom:-10px}.popover-wrapper form:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #FFF;position:absolute;bottom:-9px}@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}}
\ No newline at end of file
diff --git a/starter/angular-xeditable/js/xeditable.js b/starter/angular-xeditable/js/xeditable.js
index 6ff1f133..435b2c34 100644
--- a/starter/angular-xeditable/js/xeditable.js
+++ b/starter/angular-xeditable/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('');
+ 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/starter/angular-xeditable/js/xeditable.min.js b/starter/angular-xeditable/js/xeditable.min.js
index bb9616d1..1c06f958 100644
--- a/starter/angular-xeditable/js/xeditable.min.js
+++ b/starter/angular-xeditable/js/xeditable.min.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.module("xeditable",[]).value("editableOptions",{theme:"default",icon_set:"default",buttons:"right",blurElem:"cancel",blurForm:"ignore",activate:"focus",isDisabled:!1,activationEvent:"click",submitButtonTitle:"Submit",submitButtonAriaLabel:"Submit",cancelButtonTitle:"Cancel",cancelButtonAriaLabel:"Cancel",clearButtonTitle:"Clear",clearButtonAriaLabel:"Clear",displayClearButton:!1}),angular.module("xeditable").directive("editableBsdate",["editableDirectiveFactory","$injector","$parse",function(a,b,c){uibDatepickerConfig=b.get("uibDatepickerConfig"),uibDatepickerPopupConfig=b.get("uibDatepickerPopupConfig");var d=[["eIsOpen","is-open"],["eDateDisabled","date-disabled"],["eDatepickerPopup","uib-datepicker-popup"],["eShowButtonBar","show-button-bar"],["eCurrentText","current-text"],["eClearText","clear-text"],["eCloseText","close-text"],["eCloseOnDateSelection","close-on-date-selection"],["eDatepickerAppendToBody","datepicker-append-to-body"],["eOnOpenFocus","on-open-focus"],["eName","name"],["eDateDisabled","date-disabled"],["eAltInputFormats","alt-input-formats"]],e=[["eFormatDay","formatDay"],["eFormatMonth","formatMonth"],["eFormatYear","formatYear"],["eFormatDayHeader","formatDayHeader"],["eFormatDayTitle","formatDayTitle"],["eFormatMonthTitle","formatMonthTitle"],["eMaxMode","maxMode"],["eMinMode","minMode"],["eDatepickerMode","datepickerMode"]];return a({directiveName:"editableBsdate",inputTpl:"",render:function(){this.parent.render.call(this);var a=this.attrs,b=this.scope,f=angular.element('');f.attr("uib-datepicker-popup",a.eDatepickerPopupXEditable||uibDatepickerPopupConfig.datepickerPopup),f.attr("year-range",a.eYearRange||20),f.attr("ng-readonly",a.eReadonly||!1);for(var g=d.length-1;g>=0;g--){var h=a[d[g][0]];"undefined"!=typeof h&&f.attr(d[g][1],h)}a.eNgChange&&(f.attr("ng-change",a.eNgChange),this.inputEl.removeAttr("ng-change")),a.eStyle&&(f.attr("style",a.eStyle),this.inputEl.removeAttr("style"));var i={maxDate:b.$eval(a.eMaxDate)||uibDatepickerConfig.maxDate,minDate:b.$eval(a.eMinDate)||uibDatepickerConfig.minDate,showWeeks:a.eShowWeeks?"true"===a.eShowWeeks.toLowerCase():uibDatepickerConfig.showWeeks,startingDay:a.eStartingDay||0,initDate:b.$eval(a.eInitDate)||new Date};if(a.eDatepickerOptions){var j=c(a.eDatepickerOptions)(b);angular.extend(i,j)}for(var k=e.length-1;k>=0;k--){var l=a[e[k][0]];"undefined"!=typeof l&&(i[e[k][1]]=l)}b.dateOptions=i;var m=angular.isDefined(a.eShowCalendarButton)?a.eShowCalendarButton:"true";if("true"===m){var n=angular.element(''),o=angular.element('');n.attr("ng-click",a.eNgClick),o.append(n),this.inputEl.append(o)}else f.attr("ng-click",a.eNgClick);f.attr("datepicker-options","dateOptions"),this.inputEl.prepend(f),this.inputEl.removeAttr("class"),this.inputEl.removeAttr("ng-click"),this.inputEl.removeAttr("is-open"),this.inputEl.removeAttr("init-date"),this.inputEl.removeAttr("datepicker-popup"),this.inputEl.removeAttr("required"),this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("date-picker-append-to-body"),this.inputEl.removeAttr("name"),this.inputEl.attr("class","input-group")},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){setTimeout(function(){a.scope.$apply(function(){a.scope.$form.$submit()})},500)}),a.inputEl.bind("keydown",function(b){9===b.keyCode&&"submit"===a.editorEl.attr("blur")&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableBstime",["editableDirectiveFactory",function(a){return a({directiveName:"editableBstime",inputTpl:"",render:function(){this.parent.render.call(this);var a=angular.element('');a.attr("ng-model",this.inputEl.attr("ng-model")),this.inputEl.removeAttr("ng-model"),this.attrs.eNgChange&&(a.attr("ng-change",this.inputEl.attr("ng-change")),this.inputEl.removeAttr("ng-change")),this.inputEl.wrap(a)}})}]),angular.module("xeditable").directive("editableCheckbox",["editableDirectiveFactory",function(a){return a({directiveName:"editableCheckbox",inputTpl:'',render:function(){this.parent.render.call(this),this.inputEl.wrap(""),this.attrs.eTitle&&this.inputEl.parent().append(""+this.attrs.eTitle+"")},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){setTimeout(function(){a.scope.$apply(function(){a.scope.$form.$submit()})},500)})}})}]),angular.module("xeditable").directive("editableChecklist",["editableDirectiveFactory","editableNgOptionsParser",function(a,b){return a({directiveName:"editableChecklist",inputTpl:"",useCopy:!0,render:function(){this.parent.render.call(this);var a=b(this.attrs.eNgOptions),c="",d="";this.attrs.eNgChange&&(c=' ng-change="'+this.attrs.eNgChange+'"'),this.attrs.eChecklistComparator&&(d=' checklist-comparator="'+this.attrs.eChecklistComparator+'"');var e='';this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("ng-options"),this.inputEl.removeAttr("ng-change"),this.inputEl.removeAttr("checklist-comparator"),this.inputEl.html(e)}})}]),angular.module("xeditable").directive("editableCombodate",["editableDirectiveFactory","editableCombodate",function(a,b){return a({directiveName:"editableCombodate",inputTpl:'',render:function(){this.parent.render.call(this);var a={value:new Date(this.scope.$data)},c=this;angular.forEach(["format","template","minYear","maxYear","yearDescending","minuteStep","secondStep","firstItem","errorClass","customClass","roundTime","smartDays"],function(b){var d="e"+b.charAt(0).toUpperCase()+b.slice(1);d in c.attrs&&("minYear"==b||"maxYear"==b||"minuteStep"==b||"secondStep"==b?a[b]=parseInt(c.attrs[d],10):a[b]=c.attrs[d])});var d=b.getInstance(this.inputEl,a);d.$widget.find("select").bind("change",function(a){c.scope.$data=d.getValue()?new Date(d.getValue().replace(/-/g,"/")).toISOString():null})}})}]),function(){var a=function(a){return a.toLowerCase().replace(/-(.)/g,function(a,b){return b.toUpperCase()})},b="text|password|email|tel|number|url|search|color|date|datetime|datetime-local|time|month|week|file".split("|");angular.forEach(b,function(b){var c=a("editable-"+b);angular.module("xeditable").directive(c,["editableDirectiveFactory",function(a){return a({directiveName:c,inputTpl:'',render:function(){if(this.parent.render.call(this),this.attrs.eInputgroupleft||this.attrs.eInputgroupright){if(this.inputEl.wrap(''),this.attrs.eInputgroupleft){var a=angular.element(''+this.attrs.eInputgroupleft+"");this.inputEl.parent().prepend(a)}if(this.attrs.eInputgroupright){var b=angular.element(''+this.attrs.eInputgroupright+"");this.inputEl.parent().append(b)}}if(this.attrs.eLabel){var c=angular.element("");this.attrs.eInputgroupleft||this.attrs.eInputgroupright?this.inputEl.parent().parent().prepend(c):this.inputEl.parent().prepend(c)}this.attrs.eFormclass&&this.editorEl.addClass(this.attrs.eFormclass)},autosubmit:function(){var a=this;a.inputEl.bind("keydown",function(b){9===b.keyCode&&"submit"===a.editorEl.attr("blur")&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}])}),angular.module("xeditable").directive("editableRange",["editableDirectiveFactory","$interpolate",function(a,b){return a({directiveName:"editableRange",inputTpl:'',render:function(){this.parent.render.call(this),this.inputEl.after("")}})}])}(),angular.module("xeditable").directive("editableTagsInput",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableTagsInput",inputTpl:"
+ popover
boolean
+ true|false
.
Get started
demo