Skip to content

Commit

Permalink
Release 0.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Eugene Fidelin committed Dec 27, 2016
1 parent 6f65691 commit 8147674
Show file tree
Hide file tree
Showing 12 changed files with 421 additions and 160 deletions.
13 changes: 13 additions & 0 deletions CHANGELOG.txt
View file
Original file line number Diff line number Diff line change
@@ -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

----------------------------
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 2 additions & 2 deletions dist/css/xeditable.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

203 changes: 146 additions & 57 deletions dist/js/xeditable.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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: '<div></div>',
Expand All @@ -167,66 +199,69 @@ angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFacto
**/
this.parent.render.call(this);

var inputDatePicker = angular.element('<input type="text" class="form-control" data-ng-model="$parent.$data"/>');

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('<input type="text" class="form-control" ng-model="$parent.$data"/>');

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('<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>');
var buttonWrapper = angular.element('<span class="input-group-btn"></span>');

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");
Expand All @@ -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
Expand Down Expand Up @@ -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];
}
}
});

Expand Down Expand Up @@ -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();
});
}
});
}
});
}]);
Expand Down Expand Up @@ -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();
});
Expand All @@ -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: '<input class="form-control" />',
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
Expand Down Expand Up @@ -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 = '';
Expand Down Expand Up @@ -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));
};
}

Expand Down Expand Up @@ -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)) {
Expand All @@ -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);
}
},

Expand Down
8 changes: 4 additions & 4 deletions dist/js/xeditable.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 8147674

Please sign in to comment.