/*!
-angular-xeditable - 0.1.9
+angular-xeditable - 0.1.12
Edit-in-place for angular.js
-Build date: 2015-03-26
+Build date: 2016-04-14
*/
/**
* 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('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');
-
- }
- });
+ 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');
+ }
+ });
}]);
/*
Angular-ui bootstrap editable timepicker
function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableBstime',
- inputTpl: '<timepicker></timepicker>',
+ inputTpl: '<uib-timepicker></uib-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 = true;
+ hasForm = attrs.eSingle === undefined;
} 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) || e.isDefaultPrevented()) {
+ if (e.which && e.which !== 1) {
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: 2015,
+ maxYear: currentYear,
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>'
}
};
git://repos.xcallymotion.com / motion.git / blobdiff