/*!
-angular-xeditable - 0.1.12
+angular-xeditable - 0.1.9
Edit-in-place for angular.js
-Build date: 2016-04-14
+Build date: 2015-03-26
*/
/**
* Angular-xeditable module
});
/*
- Angular-ui bootstrap datepicker
- http://angular-ui.github.io/bootstrap/#/datepicker
- */
+Angular-ui bootstrap datepicker
+http://angular-ui.github.io/bootstrap/#/datepicker
+*/
angular.module('xeditable').directive('editableBsdate', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableBsdate',
- inputTpl: '<div></div>',
- render: function() {
- /** This basically renders a datepicker as in the example shown in
- ** http://angular-ui.github.io/bootstrap/#/datepicker
- ** The attributes are all the same as in the bootstrap-ui datepicker with e- as prefix
- **/
- this.parent.render.call(this);
-
- var inputDatePicker = angular.element('<input type="text" class="form-control" ng-model="$data"/>');
- 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>');
-
- 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('min-date', this.attrs.eMinDate);
- inputDatePicker.attr('max-date', this.attrs.eMaxDate);
- 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);
-
- 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.attrs.eInitDate || new Date(),
- datepickerMode: this.attrs.eDatepickerMode || 'day'
- };
-
- inputDatePicker.attr('datepicker-options', "dateOptions");
-
- buttonDatePicker.attr('ng-click',this.attrs.eNgClick);
-
- buttonWrapper.append(buttonDatePicker);
- this.inputEl.prepend(inputDatePicker);
- this.inputEl.append(buttonWrapper);
-
- 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');
- }
- });
+ function(editableDirectiveFactory) {
+ return editableDirectiveFactory({
+ directiveName: 'editableBsdate',
+ inputTpl: '<div></div>',
+ render: function() {
+ /** This basically renders a datepicker as in the example shown in
+ ** http://angular-ui.github.io/bootstrap/#/datepicker
+ ** The attributes are all the same as in the bootstrap-ui datepicker with e- as prefix
+ **/
+ this.parent.render.call(this);
+
+ var inputDatePicker = angular.element('<input type="text" class="form-control" ng-model="$data"/>');
+ 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>');
+
+ inputDatePicker.attr('datepicker-popup', this.attrs.eDatepickerPopupXEditable || 'yyyy/MM/dd' );
+ inputDatePicker.attr('is-open', this.attrs.eIsOpen);
+ inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled);
+ inputDatePicker.attr('datepicker-popup', this.attrs.eDatepickerPopup);
+ inputDatePicker.attr('datepicker-mode', this.attrs.eDatepickerMode || 'day');
+ inputDatePicker.attr('min-date', this.attrs.eMinDate);
+ inputDatePicker.attr('max-date', this.attrs.eMaxDate);
+ inputDatePicker.attr('show-weeks', this.attrs.eShowWeeks || true);
+ inputDatePicker.attr('starting-day', this.attrs.eStartingDay || 0);
+ inputDatePicker.attr('init-date', this.attrs.eInitDate || new Date());
+ inputDatePicker.attr('min-mode', this.attrs.eMinMode || 'day');
+ inputDatePicker.attr('max-mode', this.attrs.eMaxMode || 'year');
+ inputDatePicker.attr('format-day', this.attrs.eFormatDay || 'dd');
+ inputDatePicker.attr('format-month', this.attrs.eFormatMonth || 'MMMM');
+ inputDatePicker.attr('format-year', this.attrs.eFormatYear || 'yyyy');
+ inputDatePicker.attr('format-day-header', this.attrs.eFormatDayHeader || 'EEE');
+ inputDatePicker.attr('format-day-title', this.attrs.eFormatDayTitle || 'MMMM yyyy');
+ inputDatePicker.attr('format-month-title', this.attrs.eFormatMonthTitle || 'yyyy');
+ 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('date-picker-append-to-body', this.attrs.eDatePickerAppendToBody || false);
+ inputDatePicker.attr('date-disabled', this.attrs.eDateDisabled);
+
+ buttonDatePicker.attr('ng-click',this.attrs.eNgClick);
+
+ buttonWrapper.append(buttonDatePicker);
+ this.inputEl.prepend(inputDatePicker);
+ this.inputEl.append(buttonWrapper);
+
+ this.inputEl.removeAttr('class');
+ this.inputEl.attr('class','input-group');
+
+ }
+ });
}]);
/*
Angular-ui bootstrap editable timepicker
function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableBstime',
- inputTpl: '<uib-timepicker></uib-timepicker>',
+ inputTpl: '<timepicker></timepicker>',
render: function() {
this.parent.render.call(this);
inputTpl: '<input type="text">',
render: function() {
this.parent.render.call(this);
+ var combodate = editableCombodate.getInstance(this.inputEl, {value: new Date(this.scope.$data)});
- var options = {
- value: new Date(this.scope.$data)
- };
var self = this;
- 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];
- }
- });
-
- var combodate = editableCombodate.getInstance(this.inputEl, options);
combodate.$widget.find('select').bind('change', function(e) {
self.scope.$data = (new Date(combodate.getValue())).toISOString();
});
});
}
]);
-
/*
Input types: text|email|tel|number|url|search|color|date|datetime|time|month|week
*/
});
}]);
-/*
- AngularJS-native version of Select2 and Selectize
- https://github.com/angular-ui/ui-select
- */
-angular.module('xeditable').directive('editableUiSelect',['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- var rename = function (tag, el) {
- var newEl = angular.element('<' + tag + '/>');
- newEl.html(el.html());
- var attrs = el[0].attributes;
- for (var i = 0; i < attrs.length; ++i) {
- newEl.attr(attrs.item(i).nodeName, attrs.item(i).value);
- }
- return newEl;
- };
-
- var match = null;
- var choices = null;
- var dir = editableDirectiveFactory({
- directiveName: 'editableUiSelect',
- inputTpl: '<ui-select></ui-select>',
- render: function () {
- this.parent.render.call(this);
- this.inputEl.append(rename('ui-select-match', match));
- this.inputEl.append(rename('ui-select-choices', choices));
- this.inputEl.removeAttr('ng-model');
- this.inputEl.attr('ng-model', '$parent.$data');
- }
- });
-
- var linkOrg = dir.link;
-
- dir.link = function (scope, el, attrs, ctrl) {
- var matchEl = el.find('editable-ui-select-match');
- var choicesEl = el.find('editable-ui-select-choices');
-
- match = matchEl.clone();
- choices = choicesEl.clone();
-
- matchEl.remove();
- choicesEl.remove();
-
- return linkOrg(scope, el, attrs, ctrl);
- };
-
- return dir;
- }]);
/**
* EditableController class.
* Attached to element with `editable-xxx` directive.
// element wrapped by form
if(ctrl[1]) {
eFormCtrl = ctrl[1];
- hasForm = attrs.eSingle === undefined;
+ hasForm = true;
} else if(attrs.eForm) { // element not wrapped by <form>, but we hane `e-form` attr
var getter = $parse(attrs.eForm)(scope);
if(getter) { // form exists in scope (above), e.g. editable column
// bind click to body: cancel|submit|ignore forms
$document.bind('click', function(e) {
// ignore right/middle button click
- if (e.which && e.which !== 1) {
+ if ((e.which && e.which !== 1) || e.isDefaultPrevented()) {
return;
}
}
});
- $rootScope.$on('closeEdit', function() {
- for(var i=0; i < shown.length; i++) {
- shown[i].$hide();
- }
- });
var base = {
$addEditable: function(editable) {
if (this.$visible) {
editable.catchError(editable.show());
}
- editable.catchError(editable.setWaiting(this.$waiting));
},
$removeEditable: function(editable) {
throw 'Combodate should be applied to INPUT element';
}
- var currentYear = new Date().getFullYear();
this.defaults = {
//in this format value stored in original input
format: 'YYYY-MM-DD HH:mm',
//initial value, can be `new Date()`
value: null,
minYear: 1970,
- maxYear: currentYear,
+ maxYear: 2015,
yearDescending: true,
minuteStep: 5,
secondStep: 1,
- default
- bootstrap 2
- bootstrap 3
-- semantic-ui
Note: in postrender() `this` is instance of editableController
*/
case 'editableTime':
case 'editableMonth':
case 'editableWeek':
- case 'editablePassword':
this.inputEl.addClass('form-control');
if(this.theme.inputClass) {
// don`t apply `input-sm` and `input-lg` to select multiple
this.buttonsEl.find('button').addClass(this.theme.buttonsClass);
}
}
- },
-
- //semantic-ui
- 'semantic': {
- formTpl: '<form class="editable-wrap ui form" ng-class="{\'error\': $error}" role="form"></form>',
- noformTpl: '<span class="editable-wrap"></span>',
- controlsTpl: '<div class="editable-controls ui fluid input" ng-class="{\'error\': $error}"></div>',
- inputTpl: '',
- errorTpl: '<div class="editable-error ui error message" ng-show="$error" ng-bind="$error"></div>',
- buttonsTpl: '<span class="mini ui buttons"></span>',
- submitTpl: '<button type="submit" class="ui primary button"><i class="ui check icon"></i></button>',
- cancelTpl: '<button type="button" class="ui button" ng-click="$form.$cancel()">'+
- '<i class="ui cancel icon"></i>'+
- '</button>'
}
};