12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264 |
- /*!
- angular-xeditable - 0.1.9
- Edit-in-place for angular.js
- Build date: 2015-03-22
- */
- /**
- * Angular-xeditable module
- *
- */
- angular.module('xeditable', [])
- /**
- * Default options.
- *
- * @namespace editable-options
- */
- //todo: maybe better have editableDefaults, not options...
- .value('editableOptions', {
- /**
- * Theme. Possible values `bs3`, `bs2`, `default`.
- *
- * @var {string} theme
- * @memberOf editable-options
- */
- theme: 'default',
- /**
- * Icon Set. Possible values `font-awesome`, `default`.
- *
- * @var {string} icon set
- * @memberOf editable-options
- */
- icon_set: 'default',
- /**
- * Whether to show buttons for single editalbe element.
- * Possible values `right` (default), `no`.
- *
- * @var {string} buttons
- * @memberOf editable-options
- */
- buttons: 'right',
- /**
- * Default value for `blur` attribute of single editable element.
- * Can be `cancel|submit|ignore`.
- *
- * @var {string} blurElem
- * @memberOf editable-options
- */
- blurElem: 'cancel',
- /**
- * Default value for `blur` attribute of editable form.
- * Can be `cancel|submit|ignore`.
- *
- * @var {string} blurForm
- * @memberOf editable-options
- */
- blurForm: 'ignore',
- /**
- * How input elements get activated. Possible values: `focus|select|none`.
- *
- * @var {string} activate
- * @memberOf editable-options
- */
- activate: 'focus',
- /**
- * Whether to disable x-editable. Can be overloaded on each element.
- *
- * @var {boolean} isDisabled
- * @memberOf editable-options
- */
- isDisabled: false,
- /**
- * Event, on which the edit mode gets activated.
- * Can be any event.
- *
- * @var {string} activationEvent
- * @memberOf editable-options
- */
- activationEvent: 'click'
- });
- /*
- 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');
- }
- });
- }
- ]);
- /*
- Angular-ui bootstrap editable timepicker
- http://angular-ui.github.io/bootstrap/#/timepicker
- */
- angular.module('xeditable').directive('editableBstime', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableBstime',
- inputTpl: '<timepicker></timepicker>',
- render: function() {
- this.parent.render.call(this);
- // timepicker can't update model when ng-model set directly to it
- // see: https://github.com/angular-ui/bootstrap/issues/1141
- // so we wrap it into DIV
- var div = angular.element('<div class="well well-small" style="display:inline-block;"></div>');
- // move ng-model to wrapping div
- div.attr('ng-model', this.inputEl.attr('ng-model'));
- this.inputEl.removeAttr('ng-model');
- // move ng-change to wrapping div
- if (this.attrs.eNgChange) {
- div.attr('ng-change', this.inputEl.attr('ng-change'));
- this.inputEl.removeAttr('ng-change');
- }
- // wrap
- this.inputEl.wrap(div);
- }
- });
- }
- ]);
- //checkbox
- angular.module('xeditable').directive('editableCheckbox', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableCheckbox',
- inputTpl: '<input type="checkbox">',
- render: function() {
- this.parent.render.call(this);
- if (this.attrs.eTitle) {
- this.inputEl.wrap('<label></label>');
- this.inputEl.parent().append(this.attrs.eTitle);
- }
- },
- autosubmit: function() {
- var self = this;
- self.inputEl.bind('change', function() {
- setTimeout(function() {
- self.scope.$apply(function() {
- self.scope.$form.$submit();
- });
- }, 500);
- });
- }
- });
- }
- ]);
- // checklist
- angular.module('xeditable').directive('editableChecklist', [
- 'editableDirectiveFactory',
- 'editableNgOptionsParser',
- function(editableDirectiveFactory, editableNgOptionsParser) {
- return editableDirectiveFactory({
- directiveName: 'editableChecklist',
- inputTpl: '<span></span>',
- useCopy: true,
- render: function() {
- this.parent.render.call(this);
- var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
- var html = '<label ng-repeat="' + parsed.ngRepeat + '">' +
- '<input type="checkbox" checklist-model="$parent.$data" checklist-value="' + parsed.locals.valueFn + '">' +
- '<span ng-bind="' + parsed.locals.displayFn + '"></span></label>';
- this.inputEl.removeAttr('ng-model');
- this.inputEl.removeAttr('ng-options');
- this.inputEl.html(html);
- }
- });
- }
- ]);
- angular.module('xeditable').directive('editableCombodate', ['editableDirectiveFactory', 'editableCombodate',
- function(editableDirectiveFactory, editableCombodate) {
- return editableDirectiveFactory({
- directiveName: 'editableCombodate',
- inputTpl: '<input type="text">',
- render: function() {
- this.parent.render.call(this);
- var combodate = editableCombodate.getInstance(this.inputEl, { value: new Date(this.scope.$data) });
- var self = this;
- 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
- */
- (function() {
- var types = 'text|password|email|tel|number|url|search|color|date|datetime|time|month|week|file'.split('|');
- //todo: datalist
- // generate directives
- angular.forEach(types, function(type) {
- var directiveName = 'editable' + type.charAt(0).toUpperCase() + type.slice(1);
- angular.module('xeditable').directive(directiveName, ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: directiveName,
- inputTpl: '<input type="' + type + '">'
- });
- }
- ]);
- });
- //`range` is bit specific
- angular.module('xeditable').directive('editableRange', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableRange',
- inputTpl: '<input type="range" id="range" name="range">',
- render: function() {
- this.parent.render.call(this);
- this.inputEl.after('<output>{{$data}}</output>');
- }
- });
- }
- ]);
- }());
- // radiolist
- angular.module('xeditable').directive('editableRadiolist', [
- 'editableDirectiveFactory',
- 'editableNgOptionsParser',
- function(editableDirectiveFactory, editableNgOptionsParser) {
- return editableDirectiveFactory({
- directiveName: 'editableRadiolist',
- inputTpl: '<span></span>',
- render: function() {
- this.parent.render.call(this);
- var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
- var html = '<label ng-repeat="' + parsed.ngRepeat + '">' +
- '<input type="radio" ng-disabled="' + this.attrs.eNgDisabled + '" ng-model="$parent.$data" value="{{' + parsed.locals.valueFn + '}}">' +
- '<span ng-bind="' + parsed.locals.displayFn + '"></span></label>';
- this.inputEl.removeAttr('ng-model');
- this.inputEl.removeAttr('ng-options');
- this.inputEl.html(html);
- },
- autosubmit: function() {
- var self = this;
- self.inputEl.bind('change', function() {
- setTimeout(function() {
- self.scope.$apply(function() {
- self.scope.$form.$submit();
- });
- }, 500);
- });
- }
- });
- }
- ]);
- //select
- angular.module('xeditable').directive('editableSelect', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableSelect',
- inputTpl: '<select></select>',
- autosubmit: function() {
- var self = this;
- self.inputEl.bind('change', function() {
- self.scope.$apply(function() {
- self.scope.$form.$submit();
- });
- });
- }
- });
- }
- ]);
- //textarea
- angular.module('xeditable').directive('editableTextarea', ['editableDirectiveFactory',
- function(editableDirectiveFactory) {
- return editableDirectiveFactory({
- directiveName: 'editableTextarea',
- inputTpl: '<textarea></textarea>',
- addListeners: function() {
- var self = this;
- self.parent.addListeners.call(self);
- // submit textarea by ctrl+enter even with buttons
- if (self.single && self.buttons !== 'no') {
- self.autosubmit();
- }
- },
- autosubmit: function() {
- var self = this;
- self.inputEl.bind('keydown', function(e) {
- if ((e.ctrlKey || e.metaKey) && (e.keyCode === 13)) {
- self.scope.$apply(function() {
- self.scope.$form.$submit();
- });
- }
- });
- }
- });
- }
- ]);
- /**
- * EditableController class.
- * Attached to element with `editable-xxx` directive.
- *
- * @namespace editable-element
- */
- /*
- TODO: this file should be refactored to work more clear without closures!
- */
- angular.module('xeditable').factory('editableController', ['$q', 'editableUtils',
- function($q, editableUtils) {
- //EditableController function
- EditableController.$inject = ['$scope', '$attrs', '$element', '$parse', 'editableThemes', 'editableIcons', 'editableOptions', '$rootScope', '$compile', '$q'];
- function EditableController($scope, $attrs, $element, $parse, editableThemes, editableIcons, editableOptions, $rootScope, $compile, $q) {
- var valueGetter;
- //if control is disabled - it does not participate in waiting process
- var inWaiting;
- var self = this;
- self.scope = $scope;
- self.elem = $element;
- self.attrs = $attrs;
- self.inputEl = null;
- self.editorEl = null;
- self.single = true;
- self.error = '';
- self.theme = editableThemes[editableOptions.theme] || editableThemes['default'];
- 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];
- //to be overwritten by directive
- self.inputTpl = '';
- self.directiveName = '';
- // with majority of controls copy is not needed, but..
- // copy MUST NOT be used for `select-multiple` with objects as items
- // copy MUST be used for `checklist`
- self.useCopy = false;
- //runtime (defaults)
- self.single = null;
- /**
- * Attributes defined with `e-*` prefix automatically transfered from original element to
- * control.
- * For example, if you set `<span editable-text="user.name" e-style="width: 100px"`>
- * then input will appear as `<input style="width: 100px">`.
- * See [demo](#text-customize).
- *
- * @var {any|attribute} e-*
- * @memberOf editable-element
- */
- /**
- * Whether to show ok/cancel buttons. Values: `right|no`.
- * If set to `no` control automatically submitted when value changed.
- * If control is part of form buttons will never be shown.
- *
- * @var {string|attribute} buttons
- * @memberOf editable-element
- */
- self.buttons = 'right';
- /**
- * Action when control losses focus. Values: `cancel|submit|ignore`.
- * Has sense only for single editable element.
- * Otherwise, if control is part of form - you should set `blur` of form, not of individual element.
- *
- * @var {string|attribute} blur
- * @memberOf editable-element
- */
- // no real `blur` property as it is transfered to editable form
- //init
- self.init = function(single) {
- self.single = single;
- self.name = $attrs.eName || $attrs[self.directiveName];
- /*
- if(!$attrs[directiveName] && !$attrs.eNgModel && ($attrs.eValue === undefined)) {
- throw 'You should provide value for `'+directiveName+'` or `e-value` in editable element!';
- }
- */
- if ($attrs[self.directiveName]) {
- valueGetter = $parse($attrs[self.directiveName]);
- } else {
- throw 'You should provide value for `' + self.directiveName + '` in editable element!';
- }
- // settings for single and non-single
- if (!self.single) {
- // hide buttons for non-single
- self.buttons = 'no';
- } else {
- self.buttons = self.attrs.buttons || editableOptions.buttons;
- }
- //if name defined --> watch changes and update $data in form
- if ($attrs.eName) {
- self.scope.$watch('$data', function(newVal) {
- self.scope.$form.$data[$attrs.eName] = newVal;
- });
- }
- /**
- * Called when control is shown.
- * See [demo](#select-remote).
- *
- * @var {method|attribute} onshow
- * @memberOf editable-element
- */
- if ($attrs.onshow) {
- self.onshow = function() {
- return self.catchError($parse($attrs.onshow)($scope));
- };
- }
- /**
- * Called when control is hidden after both save or cancel.
- *
- * @var {method|attribute} onhide
- * @memberOf editable-element
- */
- if ($attrs.onhide) {
- self.onhide = function() {
- return $parse($attrs.onhide)($scope);
- };
- }
- /**
- * Called when control is cancelled.
- *
- * @var {method|attribute} oncancel
- * @memberOf editable-element
- */
- if ($attrs.oncancel) {
- self.oncancel = function() {
- return $parse($attrs.oncancel)($scope);
- };
- }
- /**
- * Called during submit before value is saved to model.
- * See [demo](#onbeforesave).
- *
- * @var {method|attribute} onbeforesave
- * @memberOf editable-element
- */
- if ($attrs.onbeforesave) {
- self.onbeforesave = function() {
- return self.catchError($parse($attrs.onbeforesave)($scope));
- };
- }
- /**
- * Called during submit after value is saved to model.
- * See [demo](#onaftersave).
- *
- * @var {method|attribute} onaftersave
- * @memberOf editable-element
- */
- if ($attrs.onaftersave) {
- self.onaftersave = function() {
- return self.catchError($parse($attrs.onaftersave)($scope));
- };
- }
- // watch change of model to update editable element
- // now only add/remove `editable-empty` class.
- // Initially this method called with newVal = undefined, oldVal = undefined
- // so no need initially call handleEmpty() explicitly
- $scope.$parent.$watch($attrs[self.directiveName], function(newVal, oldVal) {
- self.setLocalValue();
- self.handleEmpty();
- });
- };
- self.render = function() {
- var theme = self.theme;
- //build input
- self.inputEl = angular.element(self.inputTpl);
- //build controls
- self.controlsEl = angular.element(theme.controlsTpl);
- self.controlsEl.append(self.inputEl);
- //build buttons
- if (self.buttons !== 'no') {
- self.buttonsEl = angular.element(theme.buttonsTpl);
- self.submitEl = angular.element(theme.submitTpl);
- // self.cancelEl = angular.element(theme.cancelTpl);
- if (self.icon_set) {
- self.submitEl.find('span').addClass(self.icon_set.ok);
- // self.cancelEl.find('span').addClass(self.icon_set.cancel);
- }
- self.buttonsEl.append(self.submitEl).append(self.cancelEl);
- self.controlsEl.append(self.buttonsEl);
- self.inputEl.addClass('editable-has-buttons');
- }
- //build error
- self.errorEl = angular.element(theme.errorTpl);
- self.controlsEl.append(self.errorEl);
- //build editor
- self.editorEl = angular.element(self.single ? theme.formTpl : theme.noformTpl);
- self.editorEl.append(self.controlsEl);
- // transfer `e-*|data-e-*|x-e-*` attributes
- for (var k in $attrs.$attr) {
- if (k.length <= 1) {
- continue;
- }
- var transferAttr = false;
- var nextLetter = k.substring(1, 2);
- // if starts with `e` + uppercase letter
- if (k.substring(0, 1) === 'e' && nextLetter === nextLetter.toUpperCase()) {
- transferAttr = k.substring(1); // cut `e`
- } else {
- continue;
- }
- // exclude `form` and `ng-submit`,
- if (transferAttr === 'Form' || transferAttr === 'NgSubmit') {
- continue;
- }
- // convert back to lowercase style
- transferAttr = transferAttr.substring(0, 1).toLowerCase() + editableUtils.camelToDash(transferAttr.substring(1));
- // workaround for attributes without value (e.g. `multiple = "multiple"`)
- // except for 'e-value'
- var attrValue = (transferAttr !== 'value' && $attrs[k] === '') ? transferAttr : $attrs[k];
- // set attributes to input
- self.inputEl.attr(transferAttr, attrValue);
- }
- self.inputEl.addClass('editable-input');
- self.inputEl.attr('ng-model', '$parent.$data');
- // add directiveName class to editor, e.g. `editable-text`
- self.editorEl.addClass(editableUtils.camelToDash(self.directiveName));
- if (self.single) {
- self.editorEl.attr('editable-form', '$form');
- // transfer `blur` to form
- self.editorEl.attr('blur', self.attrs.blur || (self.buttons === 'no' ? 'cancel' : editableOptions.blurElem));
- }
- //apply `postrender` method of theme
- if (angular.isFunction(theme.postrender)) {
- theme.postrender.call(self);
- }
- };
- // with majority of controls copy is not needed, but..
- // copy MUST NOT be used for `select-multiple` with objects as items
- // copy MUST be used for `checklist`
- self.setLocalValue = function() {
- self.scope.$data = self.useCopy ?
- angular.copy(valueGetter($scope.$parent)) :
- valueGetter($scope.$parent);
- };
- var newScope = null;
- //show
- self.show = function() {
- // set value of scope.$data
- self.setLocalValue();
- /*
- Originally render() was inside init() method, but some directives polluting editorEl,
- so it is broken on second openning.
- Cloning is not a solution as jqLite can not clone with event handler's.
- */
- self.render();
- // insert into DOM
- $element.after(self.editorEl);
- //create new scope
- newScope = $scope.$new();
- // compile (needed to attach ng-* events from markup)
- $compile(self.editorEl)(newScope);
- // attach listeners (`escape`, autosubmit, etc)
- self.addListeners();
- // hide element
- $element.addClass('editable-hide');
- // onshow
- return self.onshow();
- };
- //hide
- self.hide = function() {
- newScope.$destroy();
- self.editorEl.remove();
- $element.removeClass('editable-hide');
- // onhide
- return self.onhide();
- };
- // cancel
- self.cancel = function() {
- // oncancel
- self.oncancel();
- // don't call hide() here as it called in form's code
- };
- /*
- Called after show to attach listeners
- */
- self.addListeners = function() {
- // bind keyup for `escape`
- self.inputEl.bind('keyup', function(e) {
- if (!self.single) {
- return;
- }
- // todo: move this to editable-form!
- switch (e.keyCode) {
- // hide on `escape` press
- case 27:
- self.scope.$apply(function() {
- self.scope.$form.$cancel();
- });
- break;
- }
- });
- // autosubmit when `no buttons`
- if (self.single && self.buttons === 'no') {
- self.autosubmit();
- }
- // click - mark element as clicked to exclude in document click handler
- self.editorEl.bind('click', function(e) {
- // ignore right/middle button click
- if (e.which && e.which !== 1) {
- return;
- }
- if (self.scope.$form.$visible) {
- self.scope.$form._clicked = true;
- }
- });
- };
- // setWaiting
- self.setWaiting = function(value) {
- if (value) {
- // participate in waiting only if not disabled
- inWaiting = !self.inputEl.attr('disabled') &&
- !self.inputEl.attr('ng-disabled') &&
- !self.inputEl.attr('ng-enabled');
- if (inWaiting) {
- self.inputEl.attr('disabled', 'disabled');
- if (self.buttonsEl) {
- self.buttonsEl.find('button').attr('disabled', 'disabled');
- }
- }
- } else {
- if (inWaiting) {
- self.inputEl.removeAttr('disabled');
- if (self.buttonsEl) {
- self.buttonsEl.find('button').removeAttr('disabled');
- }
- }
- }
- };
- self.activate = function(start, end) {
- setTimeout(function() {
- var el = self.inputEl[0];
- if (editableOptions.activate === 'focus' && el.focus) {
- if (start) {
- end = end || start;
- el.onfocus = function() {
- var that = this;
- setTimeout(function() {
- that.setSelectionRange(start, end);
- });
- };
- }
- el.focus();
- }
- if (editableOptions.activate === 'select' && el.select) {
- el.select();
- }
- }, 0);
- };
- self.setError = function(msg) {
- if (!angular.isObject(msg)) {
- $scope.$error = msg;
- self.error = msg;
- }
- };
- /*
- Checks that result is string or promise returned string and shows it as error message
- Applied to onshow, onbeforesave, onaftersave
- */
- self.catchError = function(result, noPromise) {
- if (angular.isObject(result) && noPromise !== true) {
- $q.when(result).then(
- //success and fail handlers are equal
- angular.bind(this, function(r) {
- this.catchError(r, true);
- }),
- angular.bind(this, function(r) {
- this.catchError(r, true);
- })
- );
- //check $http error
- } else if (noPromise && angular.isObject(result) && result.status &&
- (result.status !== 200) && result.data && angular.isString(result.data)) {
- this.setError(result.data);
- //set result to string: to let form know that there was error
- result = result.data;
- } else if (angular.isString(result)) {
- this.setError(result);
- }
- return result;
- };
- self.save = function() {
- valueGetter.assign($scope.$parent,
- self.useCopy ? angular.copy(self.scope.$data) : self.scope.$data);
- // no need to call handleEmpty here as we are watching change of model value
- // self.handleEmpty();
- };
- /*
- attach/detach `editable-empty` class to element
- */
- self.handleEmpty = function() {
- var val = valueGetter($scope.$parent);
- var isEmpty = val === null || val === undefined || val === "" || (angular.isArray(val) && val.length === 0);
- $element.toggleClass('editable-empty', isEmpty);
- };
- /*
- Called when `buttons = "no"` to submit automatically
- */
- self.autosubmit = angular.noop;
- self.onshow = angular.noop;
- self.onhide = angular.noop;
- self.oncancel = angular.noop;
- self.onbeforesave = angular.noop;
- self.onaftersave = angular.noop;
- }
- return EditableController;
- }
- ]);
- /*
- editableFactory is used to generate editable directives (see `/directives` folder)
- Inside it does several things:
- - detect form for editable element. Form may be one of three types:
- 1. autogenerated form (for single editable elements)
- 2. wrapper form (element wrapped by <form> tag)
- 3. linked form (element has `e-form` attribute pointing to existing form)
- - attach editableController to element
- Depends on: editableController, editableFormFactory
- */
- angular.module('xeditable').factory('editableDirectiveFactory', ['$parse', '$compile', 'editableThemes', '$rootScope', '$document', 'editableController', 'editableFormController', 'editableOptions',
- function($parse, $compile, editableThemes, $rootScope, $document, editableController, editableFormController, editableOptions) {
- //directive object
- return function(overwrites) {
- return {
- restrict: 'A',
- scope: true,
- require: [overwrites.directiveName, '?^form'],
- controller: editableController,
- link: function(scope, elem, attrs, ctrl) {
- // editable controller
- var eCtrl = ctrl[0];
- // form controller
- var eFormCtrl;
- // this variable indicates is element is bound to some existing form,
- // or it's single element who's form will be generated automatically
- // By default consider single element without any linked form.ß
- var hasForm = false;
- // element wrapped by form
- if (ctrl[1]) {
- eFormCtrl = ctrl[1];
- 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
- eFormCtrl = getter;
- hasForm = true;
- } else { // form exists below or not exist at all: check document.forms
- for (var i = 0; i < $document[0].forms.length; i++) {
- if ($document[0].forms[i].name === attrs.eForm) {
- // form is below and not processed yet
- eFormCtrl = null;
- hasForm = true;
- break;
- }
- }
- }
- }
- /*
- if(hasForm && !attrs.eName) {
- throw 'You should provide `e-name` for editable element inside form!';
- }
- */
- //check for `editable-form` attr in form
- /*
- if(eFormCtrl && ) {
- throw 'You should provide `e-name` for editable element inside form!';
- }
- */
- // store original props to `parent` before merge
- angular.forEach(overwrites, function(v, k) {
- if (eCtrl[k] !== undefined) {
- eCtrl.parent[k] = eCtrl[k];
- }
- });
- // merge overwrites to base editable controller
- angular.extend(eCtrl, overwrites);
- // x-editable can be disabled using editableOption or edit-disabled attribute
- var disabled = angular.isDefined(attrs.editDisabled) ?
- scope.$eval(attrs.editDisabled) :
- editableOptions.isDisabled;
- if (disabled) {
- return;
- }
- // init editable ctrl
- eCtrl.init(!hasForm);
- // publich editable controller as `$editable` to be referenced in html
- scope.$editable = eCtrl;
- // add `editable` class to element
- elem.addClass('editable');
- // hasForm
- if (hasForm) {
- if (eFormCtrl) {
- scope.$form = eFormCtrl;
- if (!scope.$form.$addEditable) {
- throw 'Form with editable elements should have `editable-form` attribute.';
- }
- scope.$form.$addEditable(eCtrl);
- } else {
- // future form (below): add editable controller to buffer and add to form later
- $rootScope.$$editableBuffer = $rootScope.$$editableBuffer || {};
- $rootScope.$$editableBuffer[attrs.eForm] = $rootScope.$$editableBuffer[attrs.eForm] || [];
- $rootScope.$$editableBuffer[attrs.eForm].push(eCtrl);
- scope.$form = null; //will be re-assigned later
- }
- // !hasForm
- } else {
- // create editableform controller
- scope.$form = editableFormController();
- // add self to editable controller
- scope.$form.$addEditable(eCtrl);
- // if `e-form` provided, publish local $form in scope
- if (attrs.eForm) {
- $parse(attrs.eForm).assign(scope, scope.$form);
- }
- // bind click - if no external form defined
- if (!attrs.eForm || attrs.eClickable) {
- elem.addClass('editable-click');
- elem.bind(editableOptions.activationEvent, function(e) {
- e.preventDefault();
- e.editable = eCtrl;
- scope.$apply(function() {
- scope.$form.$show();
- });
- });
- }
- if (attrs.eChoic == "true" && (!attrs.eForm || attrs.eClickable)) {
- // e.preventDefault();
- // e.editable = eCtrl;
- // scope.$apply(function() {
- scope.$form.$show();
- // });
- }
- }
- }
- };
- };
- }
- ]);
- /*
- Returns editableForm controller
- */
- angular.module('xeditable').factory('editableFormController', ['$parse', '$document', '$rootScope', 'editablePromiseCollection', 'editableUtils',
- function($parse, $document, $rootScope, editablePromiseCollection, editableUtils) {
- // array of opened editable forms
- var shown = [];
- //Check if the child element correspond or is a descendant of the parent element
- var isSelfOrDescendant = function(parent, child) {
- if (child == parent) {
- return true;
- }
- var node = child.parentNode;
- while (node !== null) {
- if (node == parent) {
- return true;
- }
- node = node.parentNode;
- }
- return false;
- };
- //Check if it is a real blur : if the click event appear on a shown editable elem, this is not a blur.
- var isBlur = function(shown, event) {
- var isBlur = true;
- var editables = shown.$editables;
- angular.forEach(editables, function(v) {
- var element = v.editorEl[0];
- if (isSelfOrDescendant(element, event.target))
- isBlur = false;
- });
- return isBlur;
- };
- // 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()) {
- return;
- }
- var toCancel = [];
- var toSubmit = [];
- for (var i = 0; i < shown.length; i++) {
- // exclude clicked
- if (shown[i]._clicked) {
- shown[i]._clicked = false;
- continue;
- }
- // exclude waiting
- if (shown[i].$waiting) {
- continue;
- }
- if (shown[i]._blur === 'cancel' && isBlur(shown[i], e)) {
- toCancel.push(shown[i]);
- }
- if (shown[i]._blur === 'submit' && isBlur(shown[i], e)) {
- toSubmit.push(shown[i]);
- }
- }
- if (toCancel.length || toSubmit.length) {
- $rootScope.$apply(function() {
- angular.forEach(toCancel, function(v) { v.$cancel(); });
- angular.forEach(toSubmit, function(v) { v.$submit(); });
- });
- }
- });
- var base = {
- $addEditable: function(editable) {
- //console.log('add editable', editable.elem, editable.elem.bind);
- this.$editables.push(editable);
- //'on' is not supported in angular 1.0.8
- editable.elem.bind('$destroy', angular.bind(this, this.$removeEditable, editable));
- //bind editable's local $form to self (if not bound yet, below form)
- if (!editable.scope.$form) {
- editable.scope.$form = this;
- }
- //if form already shown - call show() of new editable
- if (this.$visible) {
- editable.catchError(editable.show());
- }
- },
- $removeEditable: function(editable) {
- //arrayRemove
- for (var i = 0; i < this.$editables.length; i++) {
- if (this.$editables[i] === editable) {
- this.$editables.splice(i, 1);
- return;
- }
- }
- },
- /**
- * Shows form with editable controls.
- *
- * @method $show()
- * @memberOf editable-form
- */
- $show: function() {
- if (this.$visible) {
- return;
- }
- this.$visible = true;
- var pc = editablePromiseCollection();
- //own show
- pc.when(this.$onshow());
- //clear errors
- this.$setError(null, '');
- //children show
- angular.forEach(this.$editables, function(editable) {
- pc.when(editable.show());
- });
- //wait promises and activate
- pc.then({
- onWait: angular.bind(this, this.$setWaiting),
- onTrue: angular.bind(this, this.$activate),
- onFalse: angular.bind(this, this.$activate),
- onString: angular.bind(this, this.$activate)
- });
- // add to internal list of shown forms
- // setTimeout needed to prevent closing right after opening (e.g. when trigger by button)
- setTimeout(angular.bind(this, function() {
- // clear `clicked` to get ready for clicks on visible form
- this._clicked = false;
- if (editableUtils.indexOf(shown, this) === -1) {
- shown.push(this);
- }
- }), 0);
- },
- /**
- * Sets focus on form field specified by `name`.
- *
- * @method $activate(name)
- * @param {string} name name of field
- * @memberOf editable-form
- */
- $activate: function(name) {
- var i;
- if (this.$editables.length) {
- //activate by name
- if (angular.isString(name)) {
- for (i = 0; i < this.$editables.length; i++) {
- if (this.$editables[i].name === name) {
- this.$editables[i].activate();
- return;
- }
- }
- }
- //try activate error field
- for (i = 0; i < this.$editables.length; i++) {
- if (this.$editables[i].error) {
- this.$editables[i].activate();
- return;
- }
- }
- //by default activate first field
- this.$editables[0].activate(this.$editables[0].elem[0].selectionStart, this.$editables[0].elem[0].selectionEnd);
- }
- },
- /**
- * Hides form with editable controls without saving.
- *
- * @method $hide()
- * @memberOf editable-form
- */
- $hide: function() {
- if (!this.$visible) {
- return;
- }
- this.$visible = false;
- // self hide
- this.$onhide();
- // children's hide
- angular.forEach(this.$editables, function(editable) {
- if (editable.attrs.eCancle && editable.attrs.eCancle == "false") {
- } else {
- editable.hide();
- }
- });
- // remove from internal list of shown forms
- editableUtils.arrayRemove(shown, this);
- },
- /**
- * Triggers `oncancel` event and calls `$hide()`.
- *
- * @method $cancel()
- * @memberOf editable-form
- */
- $cancel: function() {
- if (!this.$visible) {
- return;
- }
- // self cancel
- this.$oncancel();
- // children's cancel
- angular.forEach(this.$editables, function(editable) {
- editable.cancel();
- });
- // self hide
- var that = this;
- setTimeout(function() {
- that.$hide();
- });
- },
- $setWaiting: function(value) {
- this.$waiting = !!value;
- // we can't just set $waiting variable and use it via ng-disabled in children
- // because in editable-row form is not accessible
- angular.forEach(this.$editables, function(editable) {
- editable.setWaiting(!!value);
- });
- },
- /**
- * Shows error message for particular field.
- *
- * @method $setError(name, msg)
- * @param {string} name name of field
- * @param {string} msg error message
- * @memberOf editable-form
- */
- $setError: function(name, msg) {
- angular.forEach(this.$editables, function(editable) {
- if (!name || editable.name === name) {
- editable.setError(msg);
- }
- });
- },
- $submit: function() {
- if (this.$waiting) {
- return;
- }
- //clear errors
- this.$setError(null, '');
- //children onbeforesave
- var pc = editablePromiseCollection();
- angular.forEach(this.$editables, function(editable) {
- pc.when(editable.onbeforesave());
- });
- /*
- onbeforesave result:
- - true/undefined: save data and close form
- - false: close form without saving
- - string: keep form open and show error
- */
- pc.then({
- onWait: angular.bind(this, this.$setWaiting),
- onTrue: angular.bind(this, checkSelf, true),
- onFalse: angular.bind(this, checkSelf, false),
- onString: angular.bind(this, this.$activate)
- });
- //save
- function checkSelf(childrenTrue) {
- var pc = editablePromiseCollection();
- pc.when(this.$onbeforesave());
- pc.then({
- onWait: angular.bind(this, this.$setWaiting),
- onTrue: childrenTrue ? angular.bind(this, this.$save) : angular.bind(this, this.$hide),
- onFalse: angular.bind(this, this.$hide),
- onString: angular.bind(this, this.$activate)
- });
- }
- },
- $save: function() {
- // write model for each editable
- angular.forEach(this.$editables, function(editable) {
- editable.save();
- });
- //call onaftersave of self and children
- var pc = editablePromiseCollection();
- pc.when(this.$onaftersave());
- angular.forEach(this.$editables, function(editable) {
- pc.when(editable.onaftersave());
- });
- /*
- onaftersave result:
- - true/undefined/false: just close form
- - string: keep form open and show error
- */
- pc.then({
- onWait: angular.bind(this, this.$setWaiting),
- onTrue: angular.bind(this, this.$hide),
- onFalse: angular.bind(this, this.$hide),
- onString: angular.bind(this, this.$activate)
- });
- },
- $onshow: angular.noop,
- $oncancel: angular.noop,
- $onhide: angular.noop,
- $onbeforesave: angular.noop,
- $onaftersave: angular.noop
- };
- return function() {
- return angular.extend({
- $editables: [],
- /**
- * Form visibility flag.
- *
- * @var {bool} $visible
- * @memberOf editable-form
- */
- $visible: false,
- /**
- * Form waiting flag. It becomes `true` when form is loading or saving data.
- *
- * @var {bool} $waiting
- * @memberOf editable-form
- */
- $waiting: false,
- $data: {},
- _clicked: false,
- _blur: null
- }, base);
- };
- }
- ]);
- /**
- * EditableForm directive. Should be defined in <form> containing editable controls.
- * It add some usefull methods to form variable exposed to scope by `name="myform"` attribute.
- *
- * @namespace editable-form
- */
- angular.module('xeditable').directive('editableForm', ['$rootScope', '$parse', 'editableFormController', 'editableOptions',
- function($rootScope, $parse, editableFormController, editableOptions) {
- return {
- restrict: 'A',
- require: ['form'],
- //require: ['form', 'editableForm'],
- //controller: EditableFormController,
- compile: function() {
- return {
- pre: function(scope, elem, attrs, ctrl) {
- var form = ctrl[0];
- var eForm;
- //if `editableForm` has value - publish smartly under this value
- //this is required only for single editor form that is created and removed
- if (attrs.editableForm) {
- if (scope[attrs.editableForm] && scope[attrs.editableForm].$show) {
- eForm = scope[attrs.editableForm];
- angular.extend(form, eForm);
- } else {
- eForm = editableFormController();
- scope[attrs.editableForm] = eForm;
- angular.extend(eForm, form);
- }
- } else { //just merge to form and publish if form has name
- eForm = editableFormController();
- angular.extend(form, eForm);
- }
- //read editables from buffer (that appeared before FORM tag)
- var buf = $rootScope.$$editableBuffer;
- var name = form.$name;
- if (name && buf && buf[name]) {
- angular.forEach(buf[name], function(editable) {
- eForm.$addEditable(editable);
- });
- delete buf[name];
- }
- },
- post: function(scope, elem, attrs, ctrl) {
- var eForm;
- if (attrs.editableForm && scope[attrs.editableForm] && scope[attrs.editableForm].$show) {
- eForm = scope[attrs.editableForm];
- } else {
- eForm = ctrl[0];
- }
- /**
- * Called when form is shown.
- *
- * @var {method|attribute} onshow
- * @memberOf editable-form
- */
- if (attrs.onshow) {
- eForm.$onshow = angular.bind(eForm, $parse(attrs.onshow), scope);
- }
- /**
- * Called when form hides after both save or cancel.
- *
- * @var {method|attribute} onhide
- * @memberOf editable-form
- */
- if (attrs.onhide) {
- eForm.$onhide = angular.bind(eForm, $parse(attrs.onhide), scope);
- }
- /**
- * Called when form is cancelled.
- *
- * @var {method|attribute} oncancel
- * @memberOf editable-form
- */
- if (attrs.oncancel) {
- eForm.$oncancel = angular.bind(eForm, $parse(attrs.oncancel), scope);
- }
- /**
- * Whether form initially rendered in shown state.
- *
- * @var {bool|attribute} shown
- * @memberOf editable-form
- */
- if (attrs.shown && $parse(attrs.shown)(scope)) {
- eForm.$show();
- }
- /**
- * Action when form losses focus. Values: `cancel|submit|ignore`.
- * Default is `ignore`.
- *
- * @var {string|attribute} blur
- * @memberOf editable-form
- */
- eForm._blur = attrs.blur || editableOptions.blurForm;
- // onbeforesave, onaftersave
- if (!attrs.ngSubmit && !attrs.submit) {
- /**
- * Called after all children `onbeforesave` callbacks but before saving form values
- * to model.
- * If at least one children callback returns `non-string` - it will not not be called.
- * See [editable-form demo](#editable-form) for details.
- *
- * @var {method|attribute} onbeforesave
- * @memberOf editable-form
- *
- */
- if (attrs.onbeforesave) {
- eForm.$onbeforesave = function() {
- return $parse(attrs.onbeforesave)(scope, { $data: eForm.$data });
- };
- }
- /**
- * Called when form values are saved to model.
- * See [editable-form demo](#editable-form) for details.
- *
- * @var {method|attribute} onaftersave
- * @memberOf editable-form
- *
- */
- if (attrs.onaftersave) {
- eForm.$onaftersave = function() {
- return $parse(attrs.onaftersave)(scope, { $data: eForm.$data });
- };
- }
- elem.bind('submit', function(event) {
- event.preventDefault();
- scope.$apply(function() {
- eForm.$submit();
- });
- });
- }
- // click - mark form as clicked to exclude in document click handler
- elem.bind('click', function(e) {
- // ignore right/middle button click
- if (e.which && e.which !== 1) {
- return;
- }
- if (eForm.$visible) {
- eForm._clicked = true;
- }
- });
- }
- };
- }
- };
- }
- ]);
- /**
- * editablePromiseCollection
- *
- * Collect results of function calls. Shows waiting if there are promises.
- * Finally, applies callbacks if:
- * - onTrue(): all results are true and all promises resolved to true
- * - onFalse(): at least one result is false or promise resolved to false
- * - onString(): at least one result is string or promise rejected or promise resolved to string
- */
- angular.module('xeditable').factory('editablePromiseCollection', ['$q', function($q) {
- function promiseCollection() {
- return {
- promises: [],
- hasFalse: false,
- hasString: false,
- when: function(result, noPromise) {
- if (result === false) {
- this.hasFalse = true;
- } else if (!noPromise && angular.isObject(result)) {
- this.promises.push($q.when(result));
- } else if (angular.isString(result)) {
- this.hasString = true;
- } else { //result === true || result === undefined || result === null
- return;
- }
- },
- //callbacks: onTrue, onFalse, onString
- then: function(callbacks) {
- callbacks = callbacks || {};
- var onTrue = callbacks.onTrue || angular.noop;
- var onFalse = callbacks.onFalse || angular.noop;
- var onString = callbacks.onString || angular.noop;
- var onWait = callbacks.onWait || angular.noop;
- var self = this;
- if (this.promises.length) {
- onWait(true);
- $q.all(this.promises).then(
- //all resolved
- function(results) {
- onWait(false);
- //check all results via same `when` method (without checking promises)
- angular.forEach(results, function(result) {
- self.when(result, true);
- });
- applyCallback();
- },
- //some rejected
- function(error) {
- onWait(false);
- onString();
- }
- );
- } else {
- applyCallback();
- }
- function applyCallback() {
- if (!self.hasString && !self.hasFalse) {
- onTrue();
- } else if (!self.hasString && self.hasFalse) {
- onFalse();
- } else {
- onString();
- }
- }
- }
- };
- }
- return promiseCollection;
- }]);
- /**
- * editableUtils
- */
- angular.module('xeditable').factory('editableUtils', [function() {
- return {
- indexOf: function(array, obj) {
- if (array.indexOf) return array.indexOf(obj);
- for (var i = 0; i < array.length; i++) {
- if (obj === array[i]) return i;
- }
- return -1;
- },
- arrayRemove: function(array, value) {
- var index = this.indexOf(array, value);
- if (index >= 0) {
- array.splice(index, 1);
- }
- return value;
- },
- // copy from https://github.com/angular/angular.js/blob/master/src/Angular.js
- camelToDash: function(str) {
- var SNAKE_CASE_REGEXP = /[A-Z]/g;
- return str.replace(SNAKE_CASE_REGEXP, function(letter, pos) {
- return (pos ? '-' : '') + letter.toLowerCase();
- });
- },
- dashToCamel: function(str) {
- var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
- var MOZ_HACK_REGEXP = /^moz([A-Z])/;
- return str.
- replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
- return offset ? letter.toUpperCase() : letter;
- }).
- replace(MOZ_HACK_REGEXP, 'Moz$1');
- }
- };
- }]);
- /**
- * editableNgOptionsParser
- *
- * see: https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L131
- */
- angular.module('xeditable').factory('editableNgOptionsParser', [function() {
- //0000111110000000000022220000000000000000000000333300000000000000444444444444444000000000555555555555555000000066666666666666600000000000000007777000000000000000000088888
- var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/;
- function parser(optionsExp) {
- var match;
- if (!(match = optionsExp.match(NG_OPTIONS_REGEXP))) {
- throw 'ng-options parse error';
- }
- var
- displayFn = match[2] || match[1],
- valueName = match[4] || match[6],
- keyName = match[5],
- groupByFn = match[3] || '',
- valueFn = match[2] ? match[1] : valueName,
- valuesFn = match[7],
- track = match[8],
- trackFn = track ? match[8] : null;
- var ngRepeat;
- if (keyName === undefined) { // array
- ngRepeat = valueName + ' in ' + valuesFn;
- if (track !== undefined) {
- ngRepeat += ' track by ' + trackFn;
- }
- } else { // object
- ngRepeat = '(' + keyName + ', ' + valueName + ') in ' + valuesFn;
- }
- // group not supported yet
- return {
- ngRepeat: ngRepeat,
- locals: {
- valueName: valueName,
- keyName: keyName,
- valueFn: valueFn,
- displayFn: displayFn
- }
- };
- }
- return parser;
- }]);
- /**
- * editableCombodate
- *
- * angular version of https://github.com/vitalets/combodate
- */
- angular.module('xeditable').factory('editableCombodate', [function() {
- function Combodate(element, options) {
- this.$element = angular.element(element);
- if (this.$element[0].nodeName != 'INPUT') {
- throw 'Combodate should be applied to INPUT element';
- }
- this.defaults = {
- //in this format value stored in original input
- format: 'YYYY-MM-DD HH:mm',
- //in this format items in dropdowns are displayed
- template: 'D / MMM / YYYY H : mm',
- //initial value, can be `new Date()`
- value: null,
- minYear: 1970,
- maxYear: 2015,
- yearDescending: true,
- minuteStep: 5,
- secondStep: 1,
- firstItem: 'empty', //'name', 'empty', 'none'
- errorClass: null,
- customClass: '',
- roundTime: true, // whether to round minutes and seconds if step > 1
- smartDays: true // whether days in combo depend on selected month: 31, 30, 28
- };
- this.options = angular.extend({}, this.defaults, options);
- this.init();
- }
- Combodate.prototype = {
- constructor: Combodate,
- init: function() {
- this.map = {
- //key regexp moment.method
- day: ['D', 'date'],
- month: ['M', 'month'],
- year: ['Y', 'year'],
- hour: ['[Hh]', 'hours'],
- minute: ['m', 'minutes'],
- second: ['s', 'seconds'],
- ampm: ['[Aa]', '']
- };
- this.$widget = angular.element('<span class="combodate"></span>').html(this.getTemplate());
- this.initCombos();
- if (this.options.smartDays) {
- var combo = this;
- this.$widget.find('select').bind('change', function(e) {
- // update days count if month or year changes
- if (angular.element(e.target).hasClass('month') || angular.element(e.target).hasClass('year')) {
- combo.fillCombo('day');
- }
- });
- }
- this.$widget.find('select').css('width', 'auto');
- // hide original input and insert widget
- this.$element.css('display', 'none').after(this.$widget);
- // set initial value
- this.setValue(this.$element.val() || this.options.value);
- },
- /*
- Replace tokens in template with <select> elements
- */
- getTemplate: function() {
- var tpl = this.options.template;
- var customClass = this.options.customClass;
- //first pass
- angular.forEach(this.map, function(v, k) {
- v = v[0];
- var r = new RegExp(v + '+');
- var token = v.length > 1 ? v.substring(1, 2) : v;
- tpl = tpl.replace(r, '{' + token + '}');
- });
- //replace spaces with
- tpl = tpl.replace(/ /g, ' ');
- //second pass
- angular.forEach(this.map, function(v, k) {
- v = v[0];
- var token = v.length > 1 ? v.substring(1, 2) : v;
- tpl = tpl.replace('{' + token + '}', '<select class="' + k + ' ' + customClass + '"></select>');
- });
- return tpl;
- },
- /*
- Initialize combos that presents in template
- */
- initCombos: function() {
- for (var k in this.map) {
- var c = this.$widget[0].querySelectorAll('.' + k);
- // set properties like this.$day, this.$month etc.
- this['$' + k] = c.length ? angular.element(c) : null;
- // fill with items
- this.fillCombo(k);
- }
- },
- /*
- Fill combo with items
- */
- fillCombo: function(k) {
- var $combo = this['$' + k];
- if (!$combo) {
- return;
- }
- // define method name to fill items, e.g `fillDays`
- var f = 'fill' + k.charAt(0).toUpperCase() + k.slice(1);
- var items = this[f]();
- var value = $combo.val();
- $combo.html('');
- for (var i = 0; i < items.length; i++) {
- $combo.append('<option value="' + items[i][0] + '">' + items[i][1] + '</option>');
- }
- $combo.val(value);
- },
- /*
- Initialize items of combos. Handles `firstItem` option
- */
- fillCommon: function(key) {
- var values = [],
- relTime;
- if (this.options.firstItem === 'name') {
- //need both to support moment ver < 2 and >= 2
- relTime = moment.relativeTime || moment.langData()._relativeTime;
- var header = typeof relTime[key] === 'function' ? relTime[key](1, true, key, false) : relTime[key];
- //take last entry (see momentjs lang files structure)
- header = header.split(' ').reverse()[0];
- values.push(['', header]);
- } else if (this.options.firstItem === 'empty') {
- values.push(['', '']);
- }
- return values;
- },
- /*
- fill day
- */
- fillDay: function() {
- var items = this.fillCommon('d'),
- name, i,
- twoDigit = this.options.template.indexOf('DD') !== -1,
- daysCount = 31;
- // detect days count (depends on month and year)
- // originally https://github.com/vitalets/combodate/pull/7
- if (this.options.smartDays && this.$month && this.$year) {
- var month = parseInt(this.$month.val(), 10);
- var year = parseInt(this.$year.val(), 10);
- if (!isNaN(month) && !isNaN(year)) {
- daysCount = moment([year, month]).daysInMonth();
- }
- }
- for (i = 1; i <= daysCount; i++) {
- name = twoDigit ? this.leadZero(i) : i;
- items.push([i, name]);
- }
- return items;
- },
- /*
- fill month
- */
- fillMonth: function() {
- var items = this.fillCommon('M'),
- name, i,
- longNames = this.options.template.indexOf('MMMM') !== -1,
- shortNames = this.options.template.indexOf('MMM') !== -1,
- twoDigit = this.options.template.indexOf('MM') !== -1;
- for (i = 0; i <= 11; i++) {
- if (longNames) {
- //see https://github.com/timrwood/momentjs.com/pull/36
- name = moment().date(1).month(i).format('MMMM');
- } else if (shortNames) {
- name = moment().date(1).month(i).format('MMM');
- } else if (twoDigit) {
- name = this.leadZero(i + 1);
- } else {
- name = i + 1;
- }
- items.push([i, name]);
- }
- return items;
- },
- /*
- fill year
- */
- fillYear: function() {
- var items = [],
- name, i,
- longNames = this.options.template.indexOf('YYYY') !== -1;
- for (i = this.options.maxYear; i >= this.options.minYear; i--) {
- name = longNames ? i : (i + '').substring(2);
- items[this.options.yearDescending ? 'push' : 'unshift']([i, name]);
- }
- items = this.fillCommon('y').concat(items);
- return items;
- },
- /*
- fill hour
- */
- fillHour: function() {
- var items = this.fillCommon('h'),
- name, i,
- h12 = this.options.template.indexOf('h') !== -1,
- h24 = this.options.template.indexOf('H') !== -1,
- twoDigit = this.options.template.toLowerCase().indexOf('hh') !== -1,
- min = h12 ? 1 : 0,
- max = h12 ? 12 : 23;
- for (i = min; i <= max; i++) {
- name = twoDigit ? this.leadZero(i) : i;
- items.push([i, name]);
- }
- return items;
- },
- /*
- fill minute
- */
- fillMinute: function() {
- var items = this.fillCommon('m'),
- name, i,
- twoDigit = this.options.template.indexOf('mm') !== -1;
- for (i = 0; i <= 59; i += this.options.minuteStep) {
- name = twoDigit ? this.leadZero(i) : i;
- items.push([i, name]);
- }
- return items;
- },
- /*
- fill second
- */
- fillSecond: function() {
- var items = this.fillCommon('s'),
- name, i,
- twoDigit = this.options.template.indexOf('ss') !== -1;
- for (i = 0; i <= 59; i += this.options.secondStep) {
- name = twoDigit ? this.leadZero(i) : i;
- items.push([i, name]);
- }
- return items;
- },
- /*
- fill ampm
- */
- fillAmpm: function() {
- var ampmL = this.options.template.indexOf('a') !== -1,
- ampmU = this.options.template.indexOf('A') !== -1,
- items = [
- ['am', ampmL ? 'am' : 'AM'],
- ['pm', ampmL ? 'pm' : 'PM']
- ];
- return items;
- },
- /*
- Returns current date value from combos.
- If format not specified - `options.format` used.
- If format = `null` - Moment object returned.
- */
- getValue: function(format) {
- var dt, values = {},
- that = this,
- notSelected = false;
- //getting selected values
- angular.forEach(this.map, function(v, k) {
- if (k === 'ampm') {
- return;
- }
- var def = k === 'day' ? 1 : 0;
- values[k] = that['$' + k] ? parseInt(that['$' + k].val(), 10) : def;
- if (isNaN(values[k])) {
- notSelected = true;
- return false;
- }
- });
- //if at least one visible combo not selected - return empty string
- if (notSelected) {
- return '';
- }
- //convert hours 12h --> 24h
- if (this.$ampm) {
- //12:00 pm --> 12:00 (24-h format, midday), 12:00 am --> 00:00 (24-h format, midnight, start of day)
- if (values.hour === 12) {
- values.hour = this.$ampm.val() === 'am' ? 0 : 12;
- } else {
- values.hour = this.$ampm.val() === 'am' ? values.hour : values.hour + 12;
- }
- }
- dt = moment([values.year, values.month, values.day, values.hour, values.minute, values.second]);
- //highlight invalid date
- this.highlight(dt);
- format = format === undefined ? this.options.format : format;
- if (format === null) {
- return dt.isValid() ? dt : null;
- } else {
- return dt.isValid() ? dt.format(format) : '';
- }
- },
- setValue: function(value) {
- if (!value) {
- return;
- }
- // parse in strict mode (third param `true`)
- var dt = typeof value === 'string' ? moment(value, this.options.format, true) : moment(value),
- that = this,
- values = {};
- //function to find nearest value in select options
- function getNearest($select, value) {
- var delta = {};
- angular.forEach($select.children('option'), function(opt, i) {
- var optValue = angular.element(opt).attr('value');
- if (optValue === '') return;
- var distance = Math.abs(optValue - value);
- if (typeof delta.distance === 'undefined' || distance < delta.distance) {
- delta = { value: optValue, distance: distance };
- }
- });
- return delta.value;
- }
- if (dt.isValid()) {
- //read values from date object
- angular.forEach(this.map, function(v, k) {
- if (k === 'ampm') {
- return;
- }
- values[k] = dt[v[1]]();
- });
- if (this.$ampm) {
- //12:00 pm --> 12:00 (24-h format, midday), 12:00 am --> 00:00 (24-h format, midnight, start of day)
- if (values.hour >= 12) {
- values.ampm = 'pm';
- if (values.hour > 12) {
- values.hour -= 12;
- }
- } else {
- values.ampm = 'am';
- if (values.hour === 0) {
- values.hour = 12;
- }
- }
- }
- angular.forEach(values, function(v, k) {
- //call val() for each existing combo, e.g. this.$hour.val()
- if (that['$' + k]) {
- if (k === 'minute' && that.options.minuteStep > 1 && that.options.roundTime) {
- v = getNearest(that['$' + k], v);
- }
- if (k === 'second' && that.options.secondStep > 1 && that.options.roundTime) {
- v = getNearest(that['$' + k], v);
- }
- that['$' + k].val(v);
- }
- });
- // update days count
- if (this.options.smartDays) {
- this.fillCombo('day');
- }
- this.$element.val(dt.format(this.options.format)).triggerHandler('change');
- }
- },
- /*
- highlight combos if date is invalid
- */
- highlight: function(dt) {
- if (!dt.isValid()) {
- if (this.options.errorClass) {
- this.$widget.addClass(this.options.errorClass);
- } else {
- //store original border color
- if (!this.borderColor) {
- this.borderColor = this.$widget.find('select').css('border-color');
- }
- this.$widget.find('select').css('border-color', 'red');
- }
- } else {
- if (this.options.errorClass) {
- this.$widget.removeClass(this.options.errorClass);
- } else {
- this.$widget.find('select').css('border-color', this.borderColor);
- }
- }
- },
- leadZero: function(v) {
- return v <= 9 ? '0' + v : v;
- },
- destroy: function() {
- this.$widget.remove();
- this.$element.removeData('combodate').show();
- }
- };
- return {
- getInstance: function(element, options) {
- return new Combodate(element, options);
- }
- };
- }]);
- /*
- Editable icons:
- - default
- - font-awesome
- */
- angular.module('xeditable').factory('editableIcons', function() {
- var icons = {
- //Icon-set to use, defaults to bootstrap icons
- default: {
- 'bs2': {
- ok: 'icon-ok icon-white',
- cancel: 'icon-remove'
- },
- 'bs3': {
- ok: 'glyphicon glyphicon-ok',
- cancel: 'glyphicon glyphicon-remove'
- }
- },
- external: {
- 'font-awesome': {
- ok: 'fa fa-check',
- cancel: 'fa fa-times'
- }
- }
- };
- return icons;
- });
- /*
- Editable themes:
- - default
- - bootstrap 2
- - bootstrap 3
- Note: in postrender() `this` is instance of editableController
- */
- angular.module('xeditable').factory('editableThemes', function() {
- var themes = {
- //default
- 'default': {
- formTpl: '<form class="editable-wrap"></form>',
- noformTpl: '<span class="editable-wrap"></span>',
- controlsTpl: '<span class="editable-controls"></span>',
- inputTpl: '',
- errorTpl: '<div class="editable-error" ng-show="$error" ng-bind="$error"></div>',
- buttonsTpl: '<span class="editable-buttons"></span>',
- submitTpl: '<button type="submit">save</button>',
- cancelTpl: '<button type="button" ng-click="$form.$cancel()">cancel</button>'
- },
- //bs2
- 'bs2': {
- formTpl: '<form class="form-inline editable-wrap" role="form"></form>',
- noformTpl: '<span class="editable-wrap"></span>',
- controlsTpl: '<div class="editable-controls controls control-group" ng-class="{\'error\': $error}"></div>',
- inputTpl: '',
- errorTpl: '<div class="editable-error help-block" ng-show="$error" ng-bind="$error"></div>',
- buttonsTpl: '<span class="editable-buttons"></span>',
- submitTpl: '<button type="submit" class="btn btn-primary"><span></span></button>',
- cancelTpl: '<button type="button" class="btn" ng-click="$form.$cancel()">' +
- '<span></span>' +
- '</button>'
- },
- //bs3
- 'bs3': {
- formTpl: '<form class="form-inline editable-wrap" role="form"></form>',
- noformTpl: '<span class="editable-wrap"></span>',
- controlsTpl: '<div class="editable-controls form-group" ng-class="{\'has-error\': $error}"></div>',
- inputTpl: '',
- errorTpl: '<div class="editable-error help-block" ng-show="$error" ng-bind="$error"></div>',
- buttonsTpl: '<span class="editable-buttons"></span>',
- submitTpl: '<button type="submit" class="btn btn-primary" ng-click="savedatas($parent.$data)"><span></span></button>',
- cancelTpl: '<button type="button" class="btn btn-default" ng-click="$form.$cancel()">' +
- '<span></span>' +
- '</button>',
- //bs3 specific prop to change buttons class: btn-sm, btn-lg
- buttonsClass: '',
- //bs3 specific prop to change standard inputs class: input-sm, input-lg
- inputClass: '',
- postrender: function() {
- //apply `form-control` class to std inputs
- 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':
- this.inputEl.addClass('form-control');
- if (this.theme.inputClass) {
- // don`t apply `input-sm` and `input-lg` to select multiple
- // should be fixed in bs itself!
- if (this.inputEl.attr('multiple') &&
- (this.theme.inputClass === 'input-sm' || this.theme.inputClass === 'input-lg')) {
- break;
- }
- this.inputEl.addClass(this.theme.inputClass);
- }
- break;
- case 'editableCheckbox':
- this.editorEl.addClass('checkbox');
- }
- //apply buttonsClass (bs3 specific!)
- if (this.buttonsEl && this.theme.buttonsClass) {
- this.buttonsEl.find('button').addClass(this.theme.buttonsClass);
- }
- }
- }
- };
- return themes;
- });
|