From 8147674ca6a157e4bfe9f70b4eb8ee21512859af Mon Sep 17 00:00:00 2001 From: Eugene Fidelin Date: Tue, 27 Dec 2016 11:31:07 +0100 Subject: [PATCH] Release 0.6.0 --- CHANGELOG.txt | 13 ++ bower.json | 2 +- dist/css/xeditable.min.css | 4 +- dist/js/xeditable.js | 203 +++++++++++++----- dist/js/xeditable.min.js | 8 +- index.html | 134 +++++++++--- package.json | 2 +- .../angular-xeditable/css/xeditable.min.css | 4 +- starter/angular-xeditable/js/xeditable.js | 203 +++++++++++++----- starter/angular-xeditable/js/xeditable.min.js | 8 +- zip/angular-xeditable-0.6.0.zip | Bin 0 -> 37885 bytes zip/angular-xeditable-starter.zip | Bin 37566 -> 38921 bytes 12 files changed, 421 insertions(+), 160 deletions(-) create mode 100644 zip/angular-xeditable-0.6.0.zip diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 35cdd89f..f4e9f379 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1,6 +1,19 @@ Angular-xeditable changelog ============================= +Version 0.6.0 Dec 27, 2016 + +---------------------------- +[enh #592] Added support to jQuery UI Datepicker for AngularJS (arielcr) +[enh #590] Support tab for submit=blur (ckosloski) +[enh #589] Use datepicker's default settings (valexiev) +[enh #586] Correctly set caret position to end of input (ckosloski) +[enh #583] Added tests for e-form (ckosloski) +[bug #573] Fix parsing of combodate options (ckosloski) +[enh #569] Add option to submit editable textarea on enter (ckosloski) +[enh #564] Added possibility to set icon_set via attribute (fredrikw) +[bug #524] Remove optional dependencies from package.json (ckosloski, eugef) + Version 0.5.0 Oct 27, 2016 ---------------------------- diff --git a/bower.json b/bower.json index 0415f3c1..55a11440 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-xeditable", - "version": "0.5.0", + "version": "0.6.0", "description": "Edit in place for AngularJS", "author": "https://github.com/vitalets", "license": "MIT", diff --git a/dist/css/xeditable.min.css b/dist/css/xeditable.min.css index 676cc5fd..b06b395c 100644 --- a/dist/css/xeditable.min.css +++ b/dist/css/xeditable.min.css @@ -1,7 +1,7 @@ /*! -angular-xeditable - 0.5.0 +angular-xeditable - 0.6.0 Edit-in-place for angular.js -Build date: 2016-10-27 +Build date: 2016-12-27 */ .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 diff --git a/dist/js/xeditable.js b/dist/js/xeditable.js index d8bf3057..5232cdb6 100644 --- a/dist/js/xeditable.js +++ b/dist/js/xeditable.js @@ -1,7 +1,7 @@ /*! -angular-xeditable - 0.5.0 +angular-xeditable - 0.6.0 Edit-in-place for angular.js -Build date: 2016-10-27 +Build date: 2016-12-27 */ /** * Angular-xeditable module @@ -26,7 +26,7 @@ angular.module('xeditable', []) */ theme: 'default', /** - * Icon Set. Possible values `font-awesome`, `default`. + * icon_set. Possible values `font-awesome`, `default`. * Default is `default` * * @var {string} icon set @@ -155,8 +155,40 @@ angular.module('xeditable', []) Angular-ui bootstrap datepicker http://angular-ui.github.io/bootstrap/#/datepicker */ -angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFactory', - function(editableDirectiveFactory) { +angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFactory', '$injector', '$parse', + function(editableDirectiveFactory, $injector, $parse) { + + // Constants from Angular-ui bootstrap datepicker + uibDatepickerConfig = $injector.get('uibDatepickerConfig'); + uibDatepickerPopupConfig = $injector.get('uibDatepickerPopupConfig'); + + var popupAttrNames = [ + ['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'] + ]; + + var dateOptionsNames = [ + ['eFormatDay', 'formatDay'], + ['eFormatMonth', 'formatMonth'], + ['eFormatYear', 'formatYear'], + ['eFormatDayHeader', 'formatDayHeader'], + ['eFormatDayTitle', 'formatDayTitle'], + ['eFormatMonthTitle', 'formatMonthTitle'], + ['eMaxMode', 'maxMode'], + ['eMinMode', 'minMode'], + ['eDatepickerMode', 'datepickerMode'] + ]; + return editableDirectiveFactory({ directiveName: 'editableBsdate', inputTpl: '
', @@ -167,66 +199,69 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto **/ this.parent.render.call(this); - var inputDatePicker = angular.element(''); - - inputDatePicker.attr('uib-datepicker-popup', this.attrs.eDatepickerPopupXEditable || 'yyyy/MM/dd' ); - inputDatePicker.attr('is-open', this.attrs.eIsOpen); - inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled); - inputDatePicker.attr('uib-datepicker-popup', this.attrs.eDatepickerPopup); - inputDatePicker.attr('year-range', this.attrs.eYearRange || 20); - inputDatePicker.attr('show-button-bar', this.attrs.eShowButtonBar || true); - inputDatePicker.attr('current-text', this.attrs.eCurrentText || 'Today'); - inputDatePicker.attr('clear-text', this.attrs.eClearText || 'Clear'); - inputDatePicker.attr('close-text', this.attrs.eCloseText || 'Done'); - inputDatePicker.attr('close-on-date-selection', this.attrs.eCloseOnDateSelection || true); - inputDatePicker.attr('datepicker-append-to-body', this.attrs.eDatePickerAppendToBody || false); - inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled); - inputDatePicker.attr('name', this.attrs.eName); - inputDatePicker.attr('on-open-focus', this.attrs.eOnOpenFocus || true); - inputDatePicker.attr('ng-readonly', this.attrs.eReadonly || false); - - if (this.attrs.eNgChange) { - inputDatePicker.attr('ng-change', this.attrs.eNgChange); + var attrs = this.attrs; + var scope = this.scope; + + var inputDatePicker = angular.element(''); + + inputDatePicker.attr('uib-datepicker-popup', attrs.eDatepickerPopupXEditable || uibDatepickerPopupConfig.datepickerPopup ); + inputDatePicker.attr('year-range', attrs.eYearRange || 20); + inputDatePicker.attr('ng-readonly', attrs.eReadonly || false); + + for (var i = popupAttrNames.length - 1; i >= 0; i--) { + var popupAttr = attrs[popupAttrNames[i][0]]; + if (typeof popupAttr !== 'undefined') { + inputDatePicker.attr(popupAttrNames[i][1], popupAttr); + } + } + + if (attrs.eNgChange) { + inputDatePicker.attr('ng-change', attrs.eNgChange); this.inputEl.removeAttr('ng-change'); } - if (this.attrs.eStyle) { - inputDatePicker.attr('style', this.attrs.eStyle); + if (attrs.eStyle) { + inputDatePicker.attr('style', attrs.eStyle); this.inputEl.removeAttr('style'); } - this.scope.dateOptions = { - formatDay: this.attrs.eFormatDay || 'dd', - formatMonth: this.attrs.eFormatMonth || 'MMMM', - formatYear: this.attrs.eFormatYear || 'yyyy', - formatDayHeader: this.attrs.eFormatDayHeader || 'EEE', - formatDayTitle: this.attrs.eFormatDayTitle || 'MMMM yyyy', - formatMonthTitle: this.attrs.eFormatMonthTitle || 'yyyy', - showWeeks: this.attrs.eShowWeeks ? this.attrs.eShowWeeks.toLowerCase() === 'true' : true, - startingDay: this.attrs.eStartingDay || 0, - minMode: this.attrs.eMinMode || 'day', - maxMode: this.attrs.eMaxMode || 'year', - initDate: this.scope.$eval(this.attrs.eInitDate) || new Date(), - datepickerMode: this.attrs.eDatepickerMode || 'day', - maxDate: this.scope.$eval(this.attrs.eMaxDate) || null, - minDate: this.scope.$eval(this.attrs.eMinDate) || null + var dateOptions = { + maxDate: scope.$eval(attrs.eMaxDate) || uibDatepickerConfig.maxDate, + minDate: scope.$eval(attrs.eMinDate) || uibDatepickerConfig.minDate, + showWeeks: attrs.eShowWeeks ? attrs.eShowWeeks.toLowerCase() === 'true' : uibDatepickerConfig.showWeeks, + startingDay: attrs.eStartingDay || 0, + initDate: scope.$eval(attrs.eInitDate) || new Date() }; - var showCalendarButton = angular.isDefined(this.attrs.eShowCalendarButton) ? this.attrs.eShowCalendarButton : "true"; + if (attrs.eDatepickerOptions) { + var eDatepickerOptions = $parse(attrs.eDatepickerOptions)(scope); + angular.extend(dateOptions, eDatepickerOptions); + } + + for (var z = dateOptionsNames.length - 1; z >= 0; z--) { + var doAttr = attrs[dateOptionsNames[z][0]]; + if (typeof doAttr !== 'undefined') { + dateOptions[dateOptionsNames[z][1]] = doAttr; + } + } + + scope.dateOptions = dateOptions; + + var showCalendarButton = angular.isDefined(attrs.eShowCalendarButton) ? attrs.eShowCalendarButton : "true"; //See if calendar button should be displayed if (showCalendarButton === "true") { var buttonDatePicker = angular.element(''); var buttonWrapper = angular.element(''); - buttonDatePicker.attr('ng-click', this.attrs.eNgClick); + buttonDatePicker.attr('ng-click', attrs.eNgClick); buttonWrapper.append(buttonDatePicker); this.inputEl.append(buttonWrapper); } else { //If no calendar button, display calendar popup on click of input field - inputDatePicker.attr('ng-click', this.attrs.eNgClick); + inputDatePicker.attr('ng-click', attrs.eNgClick); } inputDatePicker.attr('datepicker-options', "dateOptions"); @@ -244,7 +279,7 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto this.inputEl.removeAttr('name'); this.inputEl.attr('class','input-group'); } - }); + }); }]); /* Angular-ui bootstrap editable timepicker @@ -356,8 +391,13 @@ angular.module('xeditable').directive('editableCombodate', ['editableDirectiveFa angular.forEach(["format", "template", "minYear", "maxYear", "yearDescending", "minuteStep", "secondStep", "firstItem", "errorClass", "customClass", "roundTime", "smartDays"], function(name) { var attrName = "e" + name.charAt(0).toUpperCase() + name.slice(1); + if (attrName in self.attrs) { - options[name] = self.attrs[attrName]; + if (name == "minYear" || name == "maxYear" || name == "minuteStep" || name == "secondStep") { + options[name] = parseInt(self.attrs[attrName], 10); + } else { + options[name] = self.attrs[attrName]; + } } }); @@ -426,6 +466,17 @@ Input types: text|password|email|tel|number|url|search|color|date|datetime|datet if (this.attrs.eFormclass) { this.editorEl.addClass(this.attrs.eFormclass); } + }, + autosubmit: function() { + var self = this; + self.inputEl.bind('keydown', function(e) { + //submit on tab + if (e.keyCode === 9) { + self.scope.$apply(function() { + self.scope.$form.$submit(); + }); + } + }); } }); }]); @@ -563,7 +614,13 @@ angular.module('xeditable').directive('editableTextarea', ['editableDirectiveFac autosubmit: function() { var self = this; self.inputEl.bind('keydown', function(e) { - if ((e.ctrlKey || e.metaKey) && (e.keyCode === 13)) { + if (self.attrs.submitOnEnter) { + if (e.keyCode === 13 && !e.shiftKey) { + self.scope.$apply(function() { + self.scope.$form.$submit(); + }); + } + } else if ((e.ctrlKey || e.metaKey) && (e.keyCode === 13)) { self.scope.$apply(function() { self.scope.$form.$submit(); }); @@ -573,6 +630,23 @@ angular.module('xeditable').directive('editableTextarea', ['editableDirectiveFac }); }]); +/* + jQuery UI Datepicker for AngularJS + https://github.com/angular-ui/ui-date + */ +angular.module('xeditable').directive('editableUidate', ['editableDirectiveFactory', + function(editableDirectiveFactory) { + return editableDirectiveFactory({ + directiveName: 'editableUidate', + inputTpl: '', + render: function() { + this.parent.render.call(this); + this.inputEl.attr('ui-date', this.attrs.eUiDate); + this.inputEl.attr('placeholder', this.attrs.ePlaceholder); + } + }); +}]); + /* AngularJS-native version of Select2 and Selectize https://github.com/angular-ui/ui-select @@ -642,7 +716,11 @@ angular.module('xeditable').factory('editableController', self.parent = {}; //will be undefined if icon_set is default and theme is default - self.icon_set = editableOptions.icon_set === 'default' ? editableIcons.default[editableOptions.theme] : editableIcons.external[editableOptions.icon_set]; + var theme_name = $attrs.editableTheme || editableOptions.theme || 'default'; + // The theme_name will not be correct if the theme set in options is unavailable + // However, in that case an undefined icon_set is not that bad... + var icon_set_option = $attrs.editableIconSet || editableOptions.icon_set; + self.icon_set = icon_set_option === 'default' ? editableIcons.default[theme_name] : editableIcons.external[icon_set_option]; //to be overwritten by directive self.inputTpl = ''; @@ -1024,13 +1102,16 @@ angular.module('xeditable').factory('editableController', var el = self.inputEl[0]; if (editableOptions.activate === 'focus' && el.focus) { - if(start){ + if (start !== undefined && start !== "" && el.setSelectionRange) { end = end || start; - el.onfocus = function(){ - var that = this; - setTimeout(function(){ - that.setSelectionRange(start,end); - }); + el.onfocus = function() { + setTimeout(function() { + try { + this.setSelectionRange(start,end); + } catch(e) { + //do nothing, this input doesn't support setSelectionRange + } + }.bind(this)); }; } @@ -1433,7 +1514,9 @@ angular.module('xeditable').factory('editableFormController', * @memberOf editable-form */ $activate: function(name) { - var i; + var i, + selectionStart, + selectionEnd; if (this.$editables.length) { //activate by name if (angular.isString(name)) { @@ -1454,7 +1537,13 @@ angular.module('xeditable').factory('editableFormController', } //by default activate first field - this.$editables[0].activate(this.$editables[0].elem[0].selectionStart, this.$editables[0].elem[0].selectionEnd); + selectionStart = this.$editables[0].elem[0].selectionStart ? + this.$editables[0].elem[0].selectionStart : + this.$editables[0].elem[0].text ? this.$editables[0].elem[0].text.length : 0; + selectionEnd = this.$editables[0].elem[0].selectionEnd ? + this.$editables[0].elem[0].selectionEnd : + this.$editables[0].elem[0].text ? this.$editables[0].elem[0].text.length : 0; + this.$editables[0].activate(selectionStart, selectionEnd); } }, diff --git a/dist/js/xeditable.min.js b/dist/js/xeditable.min.js index 1288c076..7d527bda 100644 --- a/dist/js/xeditable.min.js +++ b/dist/js/xeditable.min.js @@ -1,7 +1,7 @@ /*! -angular-xeditable - 0.5.0 +angular-xeditable - 0.6.0 Edit-in-place for angular.js -Build date: 2016-10-27 +Build date: 2016-12-27 */ -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",function(a){return a({directiveName:"editableBsdate",inputTpl:"
",render:function(){this.parent.render.call(this);var a=angular.element('');a.attr("uib-datepicker-popup",this.attrs.eDatepickerPopupXEditable||"yyyy/MM/dd"),a.attr("is-open",this.attrs.eIsOpen),a.attr("date-disabled",this.attrs.eDateDisabled),a.attr("uib-datepicker-popup",this.attrs.eDatepickerPopup),a.attr("year-range",this.attrs.eYearRange||20),a.attr("show-button-bar",this.attrs.eShowButtonBar||!0),a.attr("current-text",this.attrs.eCurrentText||"Today"),a.attr("clear-text",this.attrs.eClearText||"Clear"),a.attr("close-text",this.attrs.eCloseText||"Done"),a.attr("close-on-date-selection",this.attrs.eCloseOnDateSelection||!0),a.attr("datepicker-append-to-body",this.attrs.eDatePickerAppendToBody||!1),a.attr("date-disabled",this.attrs.eDateDisabled),a.attr("name",this.attrs.eName),a.attr("on-open-focus",this.attrs.eOnOpenFocus||!0),a.attr("ng-readonly",this.attrs.eReadonly||!1),this.attrs.eNgChange&&(a.attr("ng-change",this.attrs.eNgChange),this.inputEl.removeAttr("ng-change")),this.attrs.eStyle&&(a.attr("style",this.attrs.eStyle),this.inputEl.removeAttr("style")),this.scope.dateOptions={formatDay:this.attrs.eFormatDay||"dd",formatMonth:this.attrs.eFormatMonth||"MMMM",formatYear:this.attrs.eFormatYear||"yyyy",formatDayHeader:this.attrs.eFormatDayHeader||"EEE",formatDayTitle:this.attrs.eFormatDayTitle||"MMMM yyyy",formatMonthTitle:this.attrs.eFormatMonthTitle||"yyyy",showWeeks:this.attrs.eShowWeeks?"true"===this.attrs.eShowWeeks.toLowerCase():!0,startingDay:this.attrs.eStartingDay||0,minMode:this.attrs.eMinMode||"day",maxMode:this.attrs.eMaxMode||"year",initDate:this.scope.$eval(this.attrs.eInitDate)||new Date,datepickerMode:this.attrs.eDatepickerMode||"day",maxDate:this.scope.$eval(this.attrs.eMaxDate)||null,minDate:this.scope.$eval(this.attrs.eMinDate)||null};var b=angular.isDefined(this.attrs.eShowCalendarButton)?this.attrs.eShowCalendarButton:"true";if("true"===b){var c=angular.element(''),d=angular.element('');c.attr("ng-click",this.attrs.eNgClick),d.append(c),this.inputEl.append(d)}else a.attr("ng-click",this.attrs.eNgClick);a.attr("datepicker-options","dateOptions"),this.inputEl.prepend(a),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")}})}]),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.attrs.eTitle&&(this.inputEl.wrap(""),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&&(a[b]=c.attrs[d])});var d=b.getInstance(this.inputEl,a);d.$widget.find("select").bind("change",function(a){c.scope.$data=new Date(d.getValue()).toISOString()})}})}]),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)}})}])}),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(""+b.startSymbol()+"$data"+b.endSymbol()+"")}})}])}(),angular.module("xeditable").directive("editableTagsInput",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableTagsInput",inputTpl:"",render:function(){this.parent.render.call(this),this.inputEl.append(b.rename("auto-complete",this.attrs.$autoCompleteElement)),this.inputEl.removeAttr("ng-model"),this.inputEl.attr("ng-model","$parent.$data")}}),d=c.link;return c.link=function(a,b,c,e){var f=b.find("editable-tags-input-auto-complete");return c.$autoCompleteElement=f.clone(),f.remove(),d(a,b,c,e)},c}]),angular.module("xeditable").directive("editableRadiolist",["editableDirectiveFactory","editableNgOptionsParser","$interpolate",function(a,b,c){return a({directiveName:"editableRadiolist",inputTpl:"",render:function(){this.parent.render.call(this);var a=b(this.attrs.eNgOptions),d="";this.attrs.eNgChange&&(d='ng-change="'+this.attrs.eNgChange+'"');var e='';this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("ng-options"),this.inputEl.removeAttr("ng-change"),this.inputEl.html(e)},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("editableSelect",["editableDirectiveFactory",function(a){return a({directiveName:"editableSelect",inputTpl:"",render:function(){if(this.parent.render.call(this),this.attrs.ePlaceholder){var a=angular.element('");this.inputEl.append(a)}},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableTextarea",["editableDirectiveFactory",function(a){return a({directiveName:"editableTextarea",inputTpl:"",addListeners:function(){var a=this;a.parent.addListeners.call(a),a.single&&"no"!==a.buttons&&a.autosubmit()},autosubmit:function(){var a=this;a.inputEl.bind("keydown",function(b){(b.ctrlKey||b.metaKey)&&13===b.keyCode&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableUiSelect",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableUiSelect",inputTpl:"",render:function(){this.parent.render.call(this),this.inputEl.append(b.rename("ui-select-match",this.attrs.$matchElement)),this.inputEl.append(b.rename("ui-select-choices",this.attrs.$choicesElement)),this.inputEl.removeAttr("ng-model"),this.inputEl.attr("ng-model","$parent.$parent.$data")}}),d=c.link;return c.link=function(a,b,c,e){var f=b.find("editable-ui-select-match"),g=b.find("editable-ui-select-choices");return c.$matchElement=f.clone(),c.$choicesElement=g.clone(),f.remove(),g.remove(),d(a,b,c,e)},c}]),angular.module("xeditable").factory("editableController",["$q","editableUtils",function(a,b){function c(a,c,d,e,f,g,h,i,j,k){var l,m,n=this;n.scope=a,n.elem=d,n.attrs=c,n.inputEl=null,n.editorEl=null,n.single=!0,n.error="",n.theme=f[c.editableTheme]||f[h.theme]||f["default"],n.parent={},n.icon_set="default"===h.icon_set?g["default"][h.theme]:g.external[h.icon_set],n.inputTpl="",n.directiveName="",n.useCopy=!1,n.single=null,n.buttons="right",n.init=function(b){if(n.single=b,n.name=c.eName||c[n.directiveName],!c[n.directiveName])throw"You should provide value for `"+n.directiveName+"` in editable element!";l=e(c[n.directiveName]),n.single?n.buttons=n.attrs.buttons||h.buttons:n.buttons="no",c.eName&&n.scope.$watch("$data",function(a){n.scope.$form.$data[c.eName]=a}),c.onshow&&(n.onshow=function(){return n.catchError(e(c.onshow)(a))}),c.onhide&&(n.onhide=function(){return e(c.onhide)(a)}),c.oncancel&&(n.oncancel=function(){return e(c.oncancel)(a)}),c.onbeforesave&&(n.onbeforesave=function(){return n.catchError(e(c.onbeforesave)(a))}),c.onaftersave&&(n.onaftersave=function(){return n.catchError(e(c.onaftersave)(a))}),a.$parent.$watch(c[n.directiveName],function(a,b){n.setLocalValue(),n.handleEmpty()})},n.render=function(){var a=n.theme;n.inputEl=angular.element(n.inputTpl),n.controlsEl=angular.element(a.controlsTpl),n.controlsEl.append(n.inputEl),"no"!==n.buttons&&(n.buttonsEl=angular.element(a.buttonsTpl),n.submitEl=angular.element(a.submitTpl),n.resetEl=angular.element(a.resetTpl),n.cancelEl=angular.element(a.cancelTpl),n.submitEl.attr("title",h.submitButtonTitle),n.submitEl.attr("aria-label",h.submitButtonAriaLabel),n.cancelEl.attr("title",h.cancelButtonTitle),n.cancelEl.attr("aria-label",h.cancelButtonAriaLabel),n.resetEl.attr("title",h.clearButtonTitle),n.resetEl.attr("aria-label",h.clearButtonAriaLabel),n.icon_set&&(n.submitEl.find("span").addClass(n.icon_set.ok),n.cancelEl.find("span").addClass(n.icon_set.cancel),n.resetEl.find("span").addClass(n.icon_set.clear)),n.buttonsEl.append(n.submitEl).append(n.cancelEl),h.displayClearButton&&n.buttonsEl.append(n.resetEl),n.controlsEl.append(n.buttonsEl),n.inputEl.addClass("editable-has-buttons")),n.errorEl=angular.element(a.errorTpl),n.controlsEl.append(n.errorEl),n.editorEl=angular.element(n.single?a.formTpl:a.noformTpl),n.editorEl.append(n.controlsEl);for(var d in c.$attr)if(!(d.length<=1)){var e=!1,f=d.substring(1,2);if("e"===d.substring(0,1)&&f===f.toUpperCase()&&(e=d.substring(1),"Form"!==e&&"NgSubmit"!==e)){var g=e.substring(0,1),i=e.substring(1,2);e=i===i.toUpperCase()&&g===g.toUpperCase()?g.toLowerCase()+"-"+b.camelToDash(e.substring(1)):g.toLowerCase()+b.camelToDash(e.substring(1));var j="value"!==e&&""===c[d]?e:c[d];n.inputEl.attr(e,j)}}n.inputEl.addClass("editable-input"),n.inputEl.attr("ng-model","$parent.$data"),n.editorEl.addClass(b.camelToDash(n.directiveName)),n.single&&(n.editorEl.attr("editable-form","$form"),n.editorEl.attr("blur",n.attrs.blur||("no"===n.buttons?"cancel":h.blurElem))),angular.isFunction(a.postrender)&&a.postrender.call(n)},n.setLocalValue=function(){n.scope.$data=n.useCopy?angular.copy(l(a.$parent)):l(a.$parent)};var o=null;n.show=function(){return n.setLocalValue(),n.render(),d.after(n.editorEl),o=a.$new(),j(n.editorEl)(o),n.addListeners(),d.addClass("editable-hide"),n.onshow()},n.hide=function(){return o.$destroy(),n.controlsEl.remove(),n.editorEl.remove(),d.removeClass("editable-hide"),n.onhide()},n.cancel=function(){n.oncancel()},n.addListeners=function(){n.inputEl.bind("keyup",function(a){if(n.single)switch(a.keyCode){case 27:n.scope.$apply(function(){n.scope.$form.$cancel()})}}),n.single&&"no"===n.buttons&&n.autosubmit(),n.editorEl.bind("click",function(a){a.which&&1!==a.which||n.scope.$form.$visible&&(n.scope.$form._clicked=!0)})},n.setWaiting=function(a){a?(m=!n.inputEl.attr("disabled")&&!n.inputEl.attr("ng-disabled")&&!n.inputEl.attr("ng-enabled"),m&&(n.inputEl.attr("disabled","disabled"),n.buttonsEl&&n.buttonsEl.find("button").attr("disabled","disabled"))):m&&(n.inputEl.removeAttr("disabled"),n.buttonsEl&&n.buttonsEl.find("button").removeAttr("disabled"))},n.activate=function(a,b){setTimeout(function(){var c=n.inputEl[0];"focus"===h.activate&&c.focus?(a&&(b=b||a,c.onfocus=function(){var c=this;setTimeout(function(){c.setSelectionRange(a,b)})}),"editableRadiolist"==n.directiveName||"editableChecklist"==n.directiveName||"editableBsdate"==n.directiveName||"editableTagsInput"==n.directiveName?c.querySelector(".ng-pristine").focus():c.focus()):"select"===h.activate&&(c.select?c.select():c.focus&&c.focus())},0)},n.setError=function(b){angular.isObject(b)||(a.$error=b,n.error=b)},n.catchError=function(a,b){return angular.isObject(a)&&b!==!0?k.when(a).then(angular.bind(this,function(a){this.catchError(a,!0)}),angular.bind(this,function(a){this.catchError(a,!0)})):b&&angular.isObject(a)&&a.status&&200!==a.status&&a.data&&angular.isString(a.data)?(this.setError(a.data),a=a.data):angular.isString(a)&&this.setError(a),a},n.save=function(){l.assign(a.$parent,n.useCopy?angular.copy(n.scope.$data):n.scope.$data)},n.handleEmpty=function(){var b=l(a.$parent),c=null===b||void 0===b||""===b||angular.isArray(b)&&0===b.length;d.toggleClass("editable-empty",c)},n.autosubmit=angular.noop,n.onshow=angular.noop,n.onhide=angular.noop,n.oncancel=angular.noop,n.onbeforesave=angular.noop,n.onaftersave=angular.noop}return c.$inject=["$scope","$attrs","$element","$parse","editableThemes","editableIcons","editableOptions","$rootScope","$compile","$q"],c}]),angular.module("xeditable").factory("editableDirectiveFactory",["$parse","$compile","editableThemes","$rootScope","$document","editableController","editableFormController","editableOptions",function(a,b,c,d,e,f,g,h){return function(b){return{restrict:"A",scope:!0,require:[b.directiveName,"?^form"],controller:f,link:function(c,f,i,j){var k,l=j[0],m=!1;if(j[1])k=j[1],m=void 0===i.eSingle;else if(i.eForm){var n=a(i.eForm)(c);if(n)k=n,m=!0;else if(f&&"function"==typeof f.parents&&f.parents().last().find("form[name="+i.eForm+"]").length)k=null,m=!0;else for(var o=0;o=0&&a.splice(c,1),b},camelToDash:function(a){var b=/[A-Z]/g;return a.replace(b,function(a,b){return(b?"-":"")+a.toLowerCase()})},dashToCamel:function(a){var b=/([\:\-\_]+(.))/g,c=/^moz([A-Z])/;return a.replace(b,function(a,b,c,d){return d?c.toUpperCase():c}).replace(c,"Moz$1")},rename:function(a,b){if(b[0]&&b[0].attributes){var c=angular.element("<"+a+"/>");c.html(b.html());for(var d=b[0].attributes,e=0;e').html(this.getTemplate()),this.initCombos(),this.options.smartDays){var a=this;this.$widget.find("select").bind("change",function(b){(angular.element(b.target).hasClass("month")||angular.element(b.target).hasClass("year"))&&a.fillCombo("day")})}this.$widget.find("select").css("width","auto"),this.$element.css("display","none").after(this.$widget),this.setValue(this.$element.val()||this.options.value)},getTemplate:function(){var a=this.options.template,b=this.options.customClass;return angular.forEach(this.map,function(b,c){b=b[0];var d=new RegExp(b+"+"),e=b.length>1?b.substring(1,2):b;a=a.replace(d,"{"+e+"}")}),a=a.replace(/ /g," "),angular.forEach(this.map,function(c,d){c=c[0];var e=c.length>1?c.substring(1,2):c;a=a.replace("{"+e+"}",'')}),a},initCombos:function(){for(var a in this.map){var b=this.$widget[0].querySelectorAll("."+a);this["$"+a]=b.length?angular.element(b):null,this.fillCombo(a)}},fillCombo:function(a){var b=this["$"+a];if(b){var c="fill"+a.charAt(0).toUpperCase()+a.slice(1),d=this[c](),e=b.val();b.html("");for(var f=0;f'+d[f][1]+"");b.val(e)}},fillCommon:function(a){var b,c=[];if("name"===this.options.firstItem){b=moment.relativeTime||moment.langData()._relativeTime;var d="function"==typeof b[a]?b[a](1,!0,a,!1):b[a];d=d.split(" ").reverse()[0],c.push(["",d])}else"empty"===this.options.firstItem&&c.push(["",""]);return c},fillDay:function(){var a,b,c=this.fillCommon("d"),d=-1!==this.options.template.indexOf("DD"),e=31;if(this.options.smartDays&&this.$month&&this.$year){var f=parseInt(this.$month.val(),10),g=parseInt(this.$year.val(),10);isNaN(f)||isNaN(g)||(e=moment([g,f]).daysInMonth())}for(b=1;e>=b;b++)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillMonth:function(){var a,b,c=this.fillCommon("M"),d=-1!==this.options.template.indexOf("MMMM"),e=-1!==this.options.template.indexOf("MMM"),f=-1!==this.options.template.indexOf("MM");for(b=0;11>=b;b++)a=d?moment().date(1).month(b).format("MMMM"):e?moment().date(1).month(b).format("MMM"):f?this.leadZero(b+1):b+1,c.push([b,a]);return c},fillYear:function(){var a,b,c=[],d=-1!==this.options.template.indexOf("YYYY");for(b=this.options.maxYear;b>=this.options.minYear;b--)a=d?b:(b+"").substring(2),c[this.options.yearDescending?"push":"unshift"]([b,a]);return c=this.fillCommon("y").concat(c)},fillHour:function(){var a,b,c=this.fillCommon("h"),d=-1!==this.options.template.indexOf("h"),e=(-1!==this.options.template.indexOf("H"),-1!==this.options.template.toLowerCase().indexOf("hh")),f=d?1:0,g=d?12:23;for(b=f;g>=b;b++)a=e?this.leadZero(b):b,c.push([b,a]);return c},fillMinute:function(){var a,b,c=this.fillCommon("m"),d=-1!==this.options.template.indexOf("mm");for(b=0;59>=b;b+=this.options.minuteStep)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillSecond:function(){var a,b,c=this.fillCommon("s"),d=-1!==this.options.template.indexOf("ss");for(b=0;59>=b;b+=this.options.secondStep)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillAmpm:function(){var a=-1!==this.options.template.indexOf("a"),b=(-1!==this.options.template.indexOf("A"),[["am",a?"am":"AM"],["pm",a?"pm":"PM"]]);return b},getValue:function(a){var b,c={},d=this,e=!1;return angular.forEach(this.map,function(a,b){if("ampm"!==b){var f="day"===b?1:0;return c[b]=d["$"+b]?parseInt(d["$"+b].val(),10):f,isNaN(c[b])?(e=!0,!1):void 0}}),e?"":(this.$ampm&&(12===c.hour?c.hour="am"===this.$ampm.val()?0:12:c.hour="am"===this.$ampm.val()?c.hour:c.hour+12),b=moment([c.year,c.month,c.day,c.hour,c.minute,c.second]),this.highlight(b),a=void 0===a?this.options.format:a,null===a?b.isValid()?b:null:b.isValid()?b.format(a):"")},setValue:function(a){function b(a,b){var c={};return angular.forEach(a.children("option"),function(a,d){var e=angular.element(a).attr("value");if(""!==e){var f=Math.abs(e-b);("undefined"==typeof c.distance||f=12?(e.ampm="pm",e.hour>12&&(e.hour-=12)):(e.ampm="am",0===e.hour&&(e.hour=12))),angular.forEach(e,function(a,c){d["$"+c]&&("minute"===c&&d.options.minuteStep>1&&d.options.roundTime&&(a=b(d["$"+c],a)),"second"===c&&d.options.secondStep>1&&d.options.roundTime&&(a=b(d["$"+c],a)),d["$"+c].val(a))}),this.options.smartDays&&this.fillCombo("day"),this.$element.val(c.format(this.options.format)).triggerHandler("change"))}},highlight:function(a){a.isValid()?this.options.errorClass?this.$widget.removeClass(this.options.errorClass):this.$widget.find("select").css("border-color",this.borderColor):this.options.errorClass?this.$widget.addClass(this.options.errorClass):(this.borderColor||(this.borderColor=this.$widget.find("select").css("border-color")),this.$widget.find("select").css("border-color","red"))},leadZero:function(a){return 9>=a?"0"+a:a},destroy:function(){this.$widget.remove(),this.$element.removeData("combodate").show()}},{getInstance:function(b,c){return new a(b,c)}}}]),angular.module("xeditable").factory("editableIcons",function(){var a={"default":{bs2:{ok:"icon-ok icon-white",cancel:"icon-remove",clear:"icon-trash"},bs3:{ok:"glyphicon glyphicon-ok",cancel:"glyphicon glyphicon-remove",clear:"glyphicon glyphicon-trash"}},external:{"font-awesome":{ok:"fa fa-check",cancel:"fa fa-times",clear:"fa fa-trash"}}};return a}),angular.module("xeditable").factory("editableThemes",function(){var a={"default":{formTpl:'
',noformTpl:'',controlsTpl:'',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''},bs2:{formTpl:'
',noformTpl:'',controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''},bs3:{formTpl:'
',noformTpl:'', -controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:'',buttonsClass:"",inputClass:"",postrender:function(){switch(this.directiveName){case"editableText":case"editableSelect":case"editableTextarea":case"editableEmail":case"editableTel":case"editableNumber":case"editableUrl":case"editableSearch":case"editableDate":case"editableDatetime":case"editableBsdate":case"editableTime":case"editableMonth":case"editableWeek":case"editablePassword":case"editableDatetimeLocal":if(this.inputEl.addClass("form-control"),this.theme.inputClass){if(this.inputEl.attr("multiple")&&("input-sm"===this.theme.inputClass||"input-lg"===this.theme.inputClass))break;this.inputEl.addClass(this.theme.inputClass)}break;case"editableCheckbox":this.editorEl.addClass("checkbox")}this.buttonsEl&&this.theme.buttonsClass&&this.buttonsEl.find("button").addClass(this.theme.buttonsClass)}},semantic:{formTpl:'
',noformTpl:'',controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''}};return a}); \ No newline at end of file +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"]],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")}})}]),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.attrs.eTitle&&(this.inputEl.wrap(""),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=new Date(d.getValue()).toISOString()})}})}]),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&&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(""+b.startSymbol()+"$data"+b.endSymbol()+"")}})}])}(),angular.module("xeditable").directive("editableTagsInput",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableTagsInput",inputTpl:"",render:function(){this.parent.render.call(this),this.inputEl.append(b.rename("auto-complete",this.attrs.$autoCompleteElement)),this.inputEl.removeAttr("ng-model"),this.inputEl.attr("ng-model","$parent.$data")}}),d=c.link;return c.link=function(a,b,c,e){var f=b.find("editable-tags-input-auto-complete");return c.$autoCompleteElement=f.clone(),f.remove(),d(a,b,c,e)},c}]),angular.module("xeditable").directive("editableRadiolist",["editableDirectiveFactory","editableNgOptionsParser","$interpolate",function(a,b,c){return a({directiveName:"editableRadiolist",inputTpl:"",render:function(){this.parent.render.call(this);var a=b(this.attrs.eNgOptions),d="";this.attrs.eNgChange&&(d='ng-change="'+this.attrs.eNgChange+'"');var e='';this.inputEl.removeAttr("ng-model"),this.inputEl.removeAttr("ng-options"),this.inputEl.removeAttr("ng-change"),this.inputEl.html(e)},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("editableSelect",["editableDirectiveFactory",function(a){return a({directiveName:"editableSelect",inputTpl:"",render:function(){if(this.parent.render.call(this),this.attrs.ePlaceholder){var a=angular.element('");this.inputEl.append(a)}},autosubmit:function(){var a=this;a.inputEl.bind("change",function(){a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableTextarea",["editableDirectiveFactory",function(a){return a({directiveName:"editableTextarea",inputTpl:"",addListeners:function(){var a=this;a.parent.addListeners.call(a),a.single&&"no"!==a.buttons&&a.autosubmit()},autosubmit:function(){var a=this;a.inputEl.bind("keydown",function(b){a.attrs.submitOnEnter?13!==b.keyCode||b.shiftKey||a.scope.$apply(function(){a.scope.$form.$submit()}):(b.ctrlKey||b.metaKey)&&13===b.keyCode&&a.scope.$apply(function(){a.scope.$form.$submit()})})}})}]),angular.module("xeditable").directive("editableUidate",["editableDirectiveFactory",function(a){return a({directiveName:"editableUidate",inputTpl:'',render:function(){this.parent.render.call(this),this.inputEl.attr("ui-date",this.attrs.eUiDate),this.inputEl.attr("placeholder",this.attrs.ePlaceholder)}})}]),angular.module("xeditable").directive("editableUiSelect",["editableDirectiveFactory","editableUtils",function(a,b){var c=a({directiveName:"editableUiSelect",inputTpl:"",render:function(){this.parent.render.call(this),this.inputEl.append(b.rename("ui-select-match",this.attrs.$matchElement)),this.inputEl.append(b.rename("ui-select-choices",this.attrs.$choicesElement)),this.inputEl.removeAttr("ng-model"),this.inputEl.attr("ng-model","$parent.$parent.$data")}}),d=c.link;return c.link=function(a,b,c,e){var f=b.find("editable-ui-select-match"),g=b.find("editable-ui-select-choices");return c.$matchElement=f.clone(),c.$choicesElement=g.clone(),f.remove(),g.remove(),d(a,b,c,e)},c}]),angular.module("xeditable").factory("editableController",["$q","editableUtils",function(a,b){function c(a,c,d,e,f,g,h,i,j,k){var l,m,n=this;n.scope=a,n.elem=d,n.attrs=c,n.inputEl=null,n.editorEl=null,n.single=!0,n.error="",n.theme=f[c.editableTheme]||f[h.theme]||f["default"],n.parent={};var o=c.editableTheme||h.theme||"default",p=c.editableIconSet||h.icon_set;n.icon_set="default"===p?g["default"][o]:g.external[p],n.inputTpl="",n.directiveName="",n.useCopy=!1,n.single=null,n.buttons="right",n.init=function(b){if(n.single=b,n.name=c.eName||c[n.directiveName],!c[n.directiveName])throw"You should provide value for `"+n.directiveName+"` in editable element!";l=e(c[n.directiveName]),n.single?n.buttons=n.attrs.buttons||h.buttons:n.buttons="no",c.eName&&n.scope.$watch("$data",function(a){n.scope.$form.$data[c.eName]=a}),c.onshow&&(n.onshow=function(){return n.catchError(e(c.onshow)(a))}),c.onhide&&(n.onhide=function(){return e(c.onhide)(a)}),c.oncancel&&(n.oncancel=function(){return e(c.oncancel)(a)}),c.onbeforesave&&(n.onbeforesave=function(){return n.catchError(e(c.onbeforesave)(a))}),c.onaftersave&&(n.onaftersave=function(){return n.catchError(e(c.onaftersave)(a))}),a.$parent.$watch(c[n.directiveName],function(a,b){n.setLocalValue(),n.handleEmpty()})},n.render=function(){var a=n.theme;n.inputEl=angular.element(n.inputTpl),n.controlsEl=angular.element(a.controlsTpl),n.controlsEl.append(n.inputEl),"no"!==n.buttons&&(n.buttonsEl=angular.element(a.buttonsTpl),n.submitEl=angular.element(a.submitTpl),n.resetEl=angular.element(a.resetTpl),n.cancelEl=angular.element(a.cancelTpl),n.submitEl.attr("title",h.submitButtonTitle),n.submitEl.attr("aria-label",h.submitButtonAriaLabel),n.cancelEl.attr("title",h.cancelButtonTitle),n.cancelEl.attr("aria-label",h.cancelButtonAriaLabel),n.resetEl.attr("title",h.clearButtonTitle),n.resetEl.attr("aria-label",h.clearButtonAriaLabel),n.icon_set&&(n.submitEl.find("span").addClass(n.icon_set.ok),n.cancelEl.find("span").addClass(n.icon_set.cancel),n.resetEl.find("span").addClass(n.icon_set.clear)),n.buttonsEl.append(n.submitEl).append(n.cancelEl),h.displayClearButton&&n.buttonsEl.append(n.resetEl),n.controlsEl.append(n.buttonsEl),n.inputEl.addClass("editable-has-buttons")),n.errorEl=angular.element(a.errorTpl),n.controlsEl.append(n.errorEl),n.editorEl=angular.element(n.single?a.formTpl:a.noformTpl),n.editorEl.append(n.controlsEl);for(var d in c.$attr)if(!(d.length<=1)){var e=!1,f=d.substring(1,2);if("e"===d.substring(0,1)&&f===f.toUpperCase()&&(e=d.substring(1),"Form"!==e&&"NgSubmit"!==e)){var g=e.substring(0,1),i=e.substring(1,2);e=i===i.toUpperCase()&&g===g.toUpperCase()?g.toLowerCase()+"-"+b.camelToDash(e.substring(1)):g.toLowerCase()+b.camelToDash(e.substring(1));var j="value"!==e&&""===c[d]?e:c[d];n.inputEl.attr(e,j)}}n.inputEl.addClass("editable-input"),n.inputEl.attr("ng-model","$parent.$data"),n.editorEl.addClass(b.camelToDash(n.directiveName)),n.single&&(n.editorEl.attr("editable-form","$form"),n.editorEl.attr("blur",n.attrs.blur||("no"===n.buttons?"cancel":h.blurElem))),angular.isFunction(a.postrender)&&a.postrender.call(n)},n.setLocalValue=function(){n.scope.$data=n.useCopy?angular.copy(l(a.$parent)):l(a.$parent)};var q=null;n.show=function(){return n.setLocalValue(),n.render(),d.after(n.editorEl),q=a.$new(),j(n.editorEl)(q),n.addListeners(),d.addClass("editable-hide"),n.onshow()},n.hide=function(){return q.$destroy(),n.controlsEl.remove(),n.editorEl.remove(),d.removeClass("editable-hide"),n.onhide()},n.cancel=function(){n.oncancel()},n.addListeners=function(){n.inputEl.bind("keyup",function(a){if(n.single)switch(a.keyCode){case 27:n.scope.$apply(function(){n.scope.$form.$cancel()})}}),n.single&&"no"===n.buttons&&n.autosubmit(),n.editorEl.bind("click",function(a){a.which&&1!==a.which||n.scope.$form.$visible&&(n.scope.$form._clicked=!0)})},n.setWaiting=function(a){a?(m=!n.inputEl.attr("disabled")&&!n.inputEl.attr("ng-disabled")&&!n.inputEl.attr("ng-enabled"),m&&(n.inputEl.attr("disabled","disabled"),n.buttonsEl&&n.buttonsEl.find("button").attr("disabled","disabled"))):m&&(n.inputEl.removeAttr("disabled"),n.buttonsEl&&n.buttonsEl.find("button").removeAttr("disabled"))},n.activate=function(a,b){setTimeout(function(){var c=n.inputEl[0];"focus"===h.activate&&c.focus?(void 0!==a&&""!==a&&c.setSelectionRange&&(b=b||a,c.onfocus=function(){setTimeout(function(){try{this.setSelectionRange(a,b)}catch(c){}}.bind(this))}),"editableRadiolist"==n.directiveName||"editableChecklist"==n.directiveName||"editableBsdate"==n.directiveName||"editableTagsInput"==n.directiveName?c.querySelector(".ng-pristine").focus():c.focus()):"select"===h.activate&&(c.select?c.select():c.focus&&c.focus())},0)},n.setError=function(b){angular.isObject(b)||(a.$error=b,n.error=b)},n.catchError=function(a,b){return angular.isObject(a)&&b!==!0?k.when(a).then(angular.bind(this,function(a){this.catchError(a,!0)}),angular.bind(this,function(a){this.catchError(a,!0)})):b&&angular.isObject(a)&&a.status&&200!==a.status&&a.data&&angular.isString(a.data)?(this.setError(a.data),a=a.data):angular.isString(a)&&this.setError(a),a},n.save=function(){l.assign(a.$parent,n.useCopy?angular.copy(n.scope.$data):n.scope.$data)},n.handleEmpty=function(){var b=l(a.$parent),c=null===b||void 0===b||""===b||angular.isArray(b)&&0===b.length;d.toggleClass("editable-empty",c)},n.autosubmit=angular.noop,n.onshow=angular.noop,n.onhide=angular.noop,n.oncancel=angular.noop,n.onbeforesave=angular.noop,n.onaftersave=angular.noop}return c.$inject=["$scope","$attrs","$element","$parse","editableThemes","editableIcons","editableOptions","$rootScope","$compile","$q"],c}]),angular.module("xeditable").factory("editableDirectiveFactory",["$parse","$compile","editableThemes","$rootScope","$document","editableController","editableFormController","editableOptions",function(a,b,c,d,e,f,g,h){return function(b){return{restrict:"A",scope:!0,require:[b.directiveName,"?^form"],controller:f,link:function(c,f,i,j){var k,l=j[0],m=!1;if(j[1])k=j[1],m=void 0===i.eSingle;else if(i.eForm){var n=a(i.eForm)(c);if(n)k=n,m=!0;else if(f&&"function"==typeof f.parents&&f.parents().last().find("form[name="+i.eForm+"]").length)k=null,m=!0;else for(var o=0;o=0&&a.splice(c,1),b},camelToDash:function(a){var b=/[A-Z]/g;return a.replace(b,function(a,b){return(b?"-":"")+a.toLowerCase()})},dashToCamel:function(a){var b=/([\:\-\_]+(.))/g,c=/^moz([A-Z])/;return a.replace(b,function(a,b,c,d){return d?c.toUpperCase():c}).replace(c,"Moz$1")},rename:function(a,b){if(b[0]&&b[0].attributes){var c=angular.element("<"+a+"/>");c.html(b.html());for(var d=b[0].attributes,e=0;e').html(this.getTemplate()),this.initCombos(),this.options.smartDays){var a=this;this.$widget.find("select").bind("change",function(b){(angular.element(b.target).hasClass("month")||angular.element(b.target).hasClass("year"))&&a.fillCombo("day")})}this.$widget.find("select").css("width","auto"),this.$element.css("display","none").after(this.$widget),this.setValue(this.$element.val()||this.options.value)},getTemplate:function(){var a=this.options.template,b=this.options.customClass;return angular.forEach(this.map,function(b,c){b=b[0];var d=new RegExp(b+"+"),e=b.length>1?b.substring(1,2):b;a=a.replace(d,"{"+e+"}")}),a=a.replace(/ /g," "),angular.forEach(this.map,function(c,d){c=c[0];var e=c.length>1?c.substring(1,2):c;a=a.replace("{"+e+"}",'')}),a},initCombos:function(){for(var a in this.map){var b=this.$widget[0].querySelectorAll("."+a);this["$"+a]=b.length?angular.element(b):null,this.fillCombo(a)}},fillCombo:function(a){var b=this["$"+a];if(b){var c="fill"+a.charAt(0).toUpperCase()+a.slice(1),d=this[c](),e=b.val();b.html("");for(var f=0;f'+d[f][1]+"");b.val(e)}},fillCommon:function(a){var b,c=[];if("name"===this.options.firstItem){b=moment.relativeTime||moment.langData()._relativeTime;var d="function"==typeof b[a]?b[a](1,!0,a,!1):b[a];d=d.split(" ").reverse()[0],c.push(["",d])}else"empty"===this.options.firstItem&&c.push(["",""]);return c},fillDay:function(){var a,b,c=this.fillCommon("d"),d=-1!==this.options.template.indexOf("DD"),e=31;if(this.options.smartDays&&this.$month&&this.$year){var f=parseInt(this.$month.val(),10),g=parseInt(this.$year.val(),10);isNaN(f)||isNaN(g)||(e=moment([g,f]).daysInMonth())}for(b=1;e>=b;b++)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillMonth:function(){var a,b,c=this.fillCommon("M"),d=-1!==this.options.template.indexOf("MMMM"),e=-1!==this.options.template.indexOf("MMM"),f=-1!==this.options.template.indexOf("MM");for(b=0;11>=b;b++)a=d?moment().date(1).month(b).format("MMMM"):e?moment().date(1).month(b).format("MMM"):f?this.leadZero(b+1):b+1,c.push([b,a]);return c},fillYear:function(){var a,b,c=[],d=-1!==this.options.template.indexOf("YYYY");for(b=this.options.maxYear;b>=this.options.minYear;b--)a=d?b:(b+"").substring(2),c[this.options.yearDescending?"push":"unshift"]([b,a]);return c=this.fillCommon("y").concat(c)},fillHour:function(){var a,b,c=this.fillCommon("h"),d=-1!==this.options.template.indexOf("h"),e=(-1!==this.options.template.indexOf("H"),-1!==this.options.template.toLowerCase().indexOf("hh")),f=d?1:0,g=d?12:23;for(b=f;g>=b;b++)a=e?this.leadZero(b):b,c.push([b,a]);return c},fillMinute:function(){var a,b,c=this.fillCommon("m"),d=-1!==this.options.template.indexOf("mm");for(b=0;59>=b;b+=this.options.minuteStep)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillSecond:function(){var a,b,c=this.fillCommon("s"),d=-1!==this.options.template.indexOf("ss");for(b=0;59>=b;b+=this.options.secondStep)a=d?this.leadZero(b):b,c.push([b,a]);return c},fillAmpm:function(){var a=-1!==this.options.template.indexOf("a"),b=(-1!==this.options.template.indexOf("A"),[["am",a?"am":"AM"],["pm",a?"pm":"PM"]]);return b},getValue:function(a){var b,c={},d=this,e=!1;return angular.forEach(this.map,function(a,b){if("ampm"!==b){var f="day"===b?1:0;return c[b]=d["$"+b]?parseInt(d["$"+b].val(),10):f,isNaN(c[b])?(e=!0,!1):void 0}}),e?"":(this.$ampm&&(12===c.hour?c.hour="am"===this.$ampm.val()?0:12:c.hour="am"===this.$ampm.val()?c.hour:c.hour+12),b=moment([c.year,c.month,c.day,c.hour,c.minute,c.second]),this.highlight(b),a=void 0===a?this.options.format:a,null===a?b.isValid()?b:null:b.isValid()?b.format(a):"")},setValue:function(a){function b(a,b){var c={};return angular.forEach(a.children("option"),function(a,d){var e=angular.element(a).attr("value");if(""!==e){var f=Math.abs(e-b);("undefined"==typeof c.distance||f=12?(e.ampm="pm",e.hour>12&&(e.hour-=12)):(e.ampm="am",0===e.hour&&(e.hour=12))),angular.forEach(e,function(a,c){d["$"+c]&&("minute"===c&&d.options.minuteStep>1&&d.options.roundTime&&(a=b(d["$"+c],a)),"second"===c&&d.options.secondStep>1&&d.options.roundTime&&(a=b(d["$"+c],a)),d["$"+c].val(a))}),this.options.smartDays&&this.fillCombo("day"),this.$element.val(c.format(this.options.format)).triggerHandler("change"))}},highlight:function(a){a.isValid()?this.options.errorClass?this.$widget.removeClass(this.options.errorClass):this.$widget.find("select").css("border-color",this.borderColor):this.options.errorClass?this.$widget.addClass(this.options.errorClass):(this.borderColor||(this.borderColor=this.$widget.find("select").css("border-color")),this.$widget.find("select").css("border-color","red"))},leadZero:function(a){return 9>=a?"0"+a:a},destroy:function(){this.$widget.remove(),this.$element.removeData("combodate").show()}},{getInstance:function(b,c){return new a(b,c)}}}]),angular.module("xeditable").factory("editableIcons",function(){var a={"default":{bs2:{ok:"icon-ok icon-white",cancel:"icon-remove",clear:"icon-trash"},bs3:{ok:"glyphicon glyphicon-ok",cancel:"glyphicon glyphicon-remove",clear:"glyphicon glyphicon-trash"}},external:{"font-awesome":{ok:"fa fa-check",cancel:"fa fa-times",clear:"fa fa-trash"}}};return a}),angular.module("xeditable").factory("editableThemes",function(){var a={"default":{formTpl:'
',noformTpl:'',controlsTpl:'',inputTpl:"",errorTpl:'
', +buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''},bs2:{formTpl:'
',noformTpl:'',controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''},bs3:{formTpl:'
',noformTpl:'',controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:'',buttonsClass:"",inputClass:"",postrender:function(){switch(this.directiveName){case"editableText":case"editableSelect":case"editableTextarea":case"editableEmail":case"editableTel":case"editableNumber":case"editableUrl":case"editableSearch":case"editableDate":case"editableDatetime":case"editableBsdate":case"editableTime":case"editableMonth":case"editableWeek":case"editablePassword":case"editableDatetimeLocal":if(this.inputEl.addClass("form-control"),this.theme.inputClass){if(this.inputEl.attr("multiple")&&("input-sm"===this.theme.inputClass||"input-lg"===this.theme.inputClass))break;this.inputEl.addClass(this.theme.inputClass)}break;case"editableCheckbox":this.editorEl.addClass("checkbox")}this.buttonsEl&&this.theme.buttonsClass&&this.buttonsEl.find("button").addClass(this.theme.buttonsClass)}},semantic:{formTpl:'
',noformTpl:'',controlsTpl:'
',inputTpl:"",errorTpl:'
',buttonsTpl:'',submitTpl:'',cancelTpl:'',resetTpl:''}};return a}); \ No newline at end of file diff --git a/index.html b/index.html index afbc48b1..b3607c53 100644 --- a/index.html +++ b/index.html @@ -4,36 +4,36 @@ Angular-xeditable :: Edit in place for AngularJS - - + + - + - - + + - - + + - + - + - + - + - + - + - + - + @@ -50,7 +50,7 @@
  • Home
  • GitHub
  • - +
    @@ -115,6 +115,7 @@
  • Checklist
  • Radiolist
  • Date
  • +
  • UI Date
  • Time
  • DateTime
  • Typeahead
  • @@ -177,9 +178,7 @@

    Overview

    editable elements.
    Such technique is also known as click-to-edit or edit-in-place.
    It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.

    -

    Dependencies

    Basically it does not depend on any libraries except AngularJS itself.
    For themes you may need to include Twitter Bootstrap CSS.
    For some extra controls (e.g. datepicker) you may need to include angular-ui bootstrap. -For ui-select you may need to include angular-ui ui-select. -For ngTagsInput you may need to include mbenford ngTagsInput.

    +

    Dependencies

    Basically it does not depend on any libraries except AngularJS itself.
    For themes you may need to include Twitter Bootstrap CSS.
    For some extra controls (e.g. datepicker) you may need to include angular-ui bootstrap.
    For ui-select you may need to include angular-ui ui-select.
    For ngTagsInput you may need to include mbenford ngTagsInput.
    If installing via NPM, jQuery and moment js will also be installed.

    Controls & Features

    @@ -221,7 +220,7 @@

    Get started

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    -
  • Install angular-xeditable via bower or download latest zip +
  • Install angular-xeditable via bower or download latest zip
    bower install angular-xeditable 
  • Include angular-xeditable into your project @@ -409,7 +408,7 @@

    HTML5 inputs

    demo

    jsFiddle
    - + @@ -462,7 +461,7 @@

    demo

    <div ng-controller="Html5InputsCtrl" id="Html5InputsCtrl"> <div>Email: <a href="#" editable-email="user.email">{{ user.email || 'empty' }}</a></div> - <div>Tel: <a href="#" editable-tel="user.tel" e-pattern="\d{3}\-\d{2}\-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a></div> + <div>Tel: <a href="#" editable-tel="user.tel" e-pattern="\d{3}-\d{2}-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a></div> <div>Number: <a href="#" editable-number="user.number" e-min="18">{{ user.number || 'empty' }}</a></div> <div>Range: <a href="#" editable-range="user.range" e-step="5">{{ user.range || 'empty' }}</a></div> <div>Url: <a href="#" editable-url="user.url">{{ user.url || 'empty' }}</a></div> @@ -504,9 +503,8 @@

    demo

    -

    To make element editable via textarea just add editable-textarea attribute -pointing to model in scope. You can also wrap content into <pre> tags to keep linebreaks. -Data can be submitted by Ctrl + Enter.

    +

    To make element editable via textarea just add editable-textarea attribute +pointing to model in scope. You can also wrap content into <pre> tags to keep linebreaks.
    Data can be submitted by Ctrl + Enter.
    Data can be submitted by Enter if the attribute submit-on-enter="true" is used.

    html

    <div ng-controller="BsdateCtrl">
    -  <a href="#" editable-bsdate="user.dob" e-is-open="opened.$data" e-ng-click="open($event,'$data')" e-datepicker-popup="dd-MMMM-yyyy">
    +  <a href="#" editable-bsdate="user.dob"
    +              e-is-open="opened.$data"
    +              e-ng-click="open($event,'$data')"
    +              e-datepicker-popup="dd-MMMM-yyyy">
         {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
       </a>
     </div>
    @@ -738,6 +742,73 @@

    controller.js

    $scope.opened[elementOpened] = !$scope.opened[elementOpened]; }; +}); + +
    +

    UI Date

    + +

    demo

    +
    + + {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }} + +
    +
    {{ debug["uidate"] | json }}
    +

    Date control is implemented via jQuery UI Datepicker for AngularJS.

    +

    You should install ui-date with bower:

    +
        bower install angular-ui-date --save    
    +

    Add the CSS:

    +
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>
    +

    Load the script files (minimun jQuery version is v2.2.0):

    +
    <script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
    +<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
    +<script type="text/javascript" src="bower_components/angular/angular.js"></script>
    +<script type="text/javascript" src="bower_components/angular-ui-date/dist/date.js"></script>
    +

    Add the date module as a dependency to your application module:

    +
    angular.module('MyApp', ['ui.date'])
    +

    And set editable-uidate attribute in editable element.

    +

    You can pass an e-ui-date attribute pointing to an object with a picker configuration that you may want.

    +
    var datePickerOptions = {
    +    changeYear: true,
    +    changeMonth: true,
    +    showOn: "button",
    +    buttonImage: "build/assets/img/calendar.png",
    +    buttonImageOnly: true
    +};
    +

    + + +

    html

    +
    <div ng-controller="UidateCtrl">
    +    <span editable-uidate="user.dob"
    +        e-ui-date="datePickerConfig">
    +        {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
    +    </span>
    +</div>
    +

    controller.js

    +
    app.controller('UidateCtrl', function($scope) {
    +
    +    $scope.datePickerConfig = {
    +        changeYear: true,
    +        changeMonth: true
    +    };
    +
    +    $scope.user = {
    +        dob: new Date(1985, 3, 11)
    +    };
    +
     });
    @@ -1112,8 +1183,7 @@

    demo

    -

    To trigger edit-in-place by external button you should define e-form attribute. -Value of it is the name of variable to be created in scope that allows you to show / hide editor manually.

    +

    To trigger edit-in-place by external button you should define e-form attribute.
    Value of it is the name of variable to be created in scope that allows you to show / hide editor manually.
    To trigger edit-in-place with e-form and no button for a single element, add e-clickable="true".
    This will allow you to have custom form names in an ng-repeat for single elements.