Skip to content

Commit 6cef52b

Browse files
mpavlinovmpavlinov
authored
Merge pull request #279 from IgniteUI/dkamburov/improve-setting-data
Improve data binding for data source widgets
2 parents 63872bd + 9f79eca commit 6cef52b

File tree

19 files changed

+1377
-1094
lines changed

19 files changed

+1377
-1094
lines changed

‎src/igcontrolbase/igcontrolbase.ts‎

Lines changed: 155 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -3,184 +3,184 @@ import { ElementRef, EventEmitter, Renderer, IterableDiffers, DoCheck, SimpleCha
33
declare var jQuery: any;
44

55
var NODES = {
6-
"ig-text-editor": "div",
7-
"ig-numeric-editor": "input",
8-
"ig-percent-editor": "input",
9-
"ig-mask-editor": "input",
10-
"ig-date-picker": "input",
11-
"ig-time-picker": "input",
12-
"ig-date-editor": "input",
13-
"ig-currency-editor": "input",
14-
"ig-checkbox-editor": "input",
15-
"ig-html-editor": "div",
16-
"ig-combo": "input",
17-
"ig-grid": "table",
18-
"ig-tree-grid": "table",
19-
"ig-hierarchical-grid": "table",
20-
"ig-pivot-data-selector": "div",
21-
"ig-pivot-grid": "table",
22-
"ig-data-chart": "div",
23-
"ig-pie-chart": "div",
24-
"ig-doughnut-chart": "div",
25-
"ig-funnel-chart": "div",
26-
"ig-radial-gauge": "div",
27-
"ig-sparkline": "div",
28-
"ig-zoombar": "div",
29-
"ig-map": "div",
30-
"ig-bullet-graph": "div",
31-
"ig-linear-gauge": "div",
32-
"ig-q-r-code-barcode": "div",
33-
"ig-validator": "div",
34-
"ig-upload": "div",
35-
"ig-popover": "div",
36-
"ig-rating": "div",
37-
"ig-video-player": "div",
38-
"ig-radial-menu": "div",
39-
"ig-split-button": "div",
40-
"ig-notifier": "div",
41-
"ig-tree": "div",
42-
"ig-dialog": "div",
43-
"ig-splitter": "div",
44-
"ig-layout-manager": "div",
45-
"ig-tile-manager": "div",
46-
"ig-spreadsheet": "div",
47-
"ig-scheduler": "div"
6+
"ig-text-editor": "div",
7+
"ig-numeric-editor": "input",
8+
"ig-percent-editor": "input",
9+
"ig-mask-editor": "input",
10+
"ig-date-picker": "input",
11+
"ig-time-picker": "input",
12+
"ig-date-editor": "input",
13+
"ig-currency-editor": "input",
14+
"ig-checkbox-editor": "input",
15+
"ig-html-editor": "div",
16+
"ig-combo": "input",
17+
"ig-grid": "table",
18+
"ig-tree-grid": "table",
19+
"ig-hierarchical-grid": "table",
20+
"ig-pivot-data-selector": "div",
21+
"ig-pivot-grid": "table",
22+
"ig-data-chart": "div",
23+
"ig-pie-chart": "div",
24+
"ig-doughnut-chart": "div",
25+
"ig-funnel-chart": "div",
26+
"ig-radial-gauge": "div",
27+
"ig-sparkline": "div",
28+
"ig-zoombar": "div",
29+
"ig-map": "div",
30+
"ig-bullet-graph": "div",
31+
"ig-linear-gauge": "div",
32+
"ig-q-r-code-barcode": "div",
33+
"ig-validator": "div",
34+
"ig-upload": "div",
35+
"ig-popover": "div",
36+
"ig-rating": "div",
37+
"ig-video-player": "div",
38+
"ig-radial-menu": "div",
39+
"ig-split-button": "div",
40+
"ig-notifier": "div",
41+
"ig-tree": "div",
42+
"ig-dialog": "div",
43+
"ig-splitter": "div",
44+
"ig-layout-manager": "div",
45+
"ig-tile-manager": "div",
46+
"ig-spreadsheet": "div",
47+
"ig-scheduler": "div"
4848
};
4949

5050
export class IgControlBase<Model> implements DoCheck {
51-
@Input()
52-
public options:any = {};
51+
@Input()
52+
public options: any = {};
5353

54-
protected _differs: any;
55-
protected _el: any;
56-
protected _widgetName: string;
57-
protected _differ: any;
58-
protected _optsDiffer: any;
59-
protected _kvalDiffers:any;
60-
protected _events: Map<string, string>;
61-
private _evtEmmiters : any = {};
62-
private _nativeElement:any;
63-
public widgetId: string;
54+
protected _differs: any;
55+
protected _el: any;
56+
protected _widgetName: string;
57+
protected _differ: any;
58+
protected _optsDiffer: any;
59+
protected _kvalDiffers: any;
60+
protected _events: Map<string, string>;
61+
private _evtEmmiters: any = {};
62+
private _nativeElement: any;
63+
public widgetId: string;
6464

65-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, public kvalDiffers: KeyValueDiffers, public cdr: ChangeDetectorRef) {
66-
this._differs = differs;
67-
this._nativeElement = el.nativeElement;
68-
this._widgetName = this.convertToCamelCase(el.nativeElement.nodeName.toLowerCase());//ig-grid -> igGrid
69-
this._el = el.nativeElement.appendChild(document.createElement(NODES[el.nativeElement.nodeName.toLowerCase()]));
65+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, public kvalDiffers: KeyValueDiffers, public cdr: ChangeDetectorRef) {
66+
this._differs = differs;
67+
this._nativeElement = el.nativeElement;
68+
this._widgetName = this.convertToCamelCase(el.nativeElement.nodeName.toLowerCase());//ig-grid -> igGrid
69+
this._el = el.nativeElement.appendChild(document.createElement(NODES[el.nativeElement.nodeName.toLowerCase()]));
7070

71-
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
72-
this[propt] = new EventEmitter();
73-
//cahcing the event emmitters for cases when the event name is the same as a method name.
74-
this._evtEmmiters[propt] = this[propt];
75-
}
76-
}
71+
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
72+
this[propt] = new EventEmitter();
73+
//cahcing the event emmitters for cases when the event name is the same as a method name.
74+
this._evtEmmiters[propt] = this[propt];
75+
}
76+
}
7777

78-
createSetter(name) {
79-
return function (value) {
80-
this.options[name] = value;
81-
if (this._config) {
82-
this._config[name] = value;
83-
}
84-
if (jQuery.ui[this._widgetName] &&
85-
jQuery.ui[this._widgetName].prototype.options &&
86-
jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(name) &&
87-
jQuery(this._el).data(this._widgetName)) {
88-
jQuery(this._el)[this._widgetName]("option", name, value);
89-
}
90-
}
91-
}
78+
createSetter(name) {
79+
return function (value) {
80+
this.options[name] = value;
81+
if (this._config) {
82+
this._config[name] = value;
83+
}
84+
if (jQuery.ui[this._widgetName] &&
85+
jQuery.ui[this._widgetName].prototype.options &&
86+
jQuery.ui[this._widgetName].prototype.options.hasOwnProperty(name) &&
87+
jQuery(this._el).data(this._widgetName)) {
88+
jQuery(this._el)[this._widgetName]("option", name, value);
89+
}
90+
}
91+
}
9292

93-
ngOnInit() {
94-
var evtName;
95-
let that = this;
96-
this._events = new Map<string, string>();
97-
98-
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
99-
//copy root level options into this.options
100-
if(this[opt] && typeof this[opt] !== "function"){
101-
this.options[opt] = this[opt];
102-
}
103-
}
93+
ngOnInit() {
94+
var evtName;
95+
let that = this;
96+
this._events = new Map<string, string>();
10497

105-
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
106-
if(opt !== "dataSource") {
107-
Object.defineProperty(this, opt, {
108-
set: this.createSetter(opt),
109-
enumerable: true,
110-
configurable: true
111-
});
112-
}
113-
}
98+
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
99+
//copy root level options into this.options
100+
if (this[opt] && typeof this[opt] !== "function") {
101+
this.options[opt] = this[opt];
102+
}
103+
}
114104

115-
var propNames = jQuery.ui[this._widgetName].prototype;
116-
for(var name in propNames ) {
117-
if(name.indexOf("_") !== 0 && typeof jQuery.ui[this._widgetName].prototype[name] === "function"
118-
&& name !== "dataSource"){
105+
for (var opt in jQuery.ui[this._widgetName].prototype.options) {
106+
if (opt !== "dataSource") {
107+
Object.defineProperty(this, opt, {
108+
set: this.createSetter(opt),
109+
enumerable: true,
110+
configurable: true
111+
});
112+
}
113+
}
114+
115+
var propNames = jQuery.ui[this._widgetName].prototype;
116+
for (var name in propNames) {
117+
if (name.indexOf("_") !== 0 && typeof jQuery.ui[this._widgetName].prototype[name] === "function"
118+
&& name !== "dataSource") {
119119
Object.defineProperty(that, name, {
120120
get: that.createMethodGetter(name)
121121
});
122122
}
123-
}
124-
//events binding
125-
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
126-
evtName = this._widgetName.toLowerCase() + propt.toLowerCase();
127-
this._events[evtName] = propt;
128-
jQuery(this._el).on(evtName, function (evt, ui) {
129-
var emmiter = that._evtEmmiters[that._events[evt.type]];
130-
emmiter.emit({ event: evt, ui: ui });
131-
});
132-
}
123+
}
124+
//events binding
125+
for (var propt in jQuery.ui[this._widgetName].prototype.events) {
126+
evtName = this._widgetName.toLowerCase() + propt.toLowerCase();
127+
this._events[evtName] = propt;
128+
jQuery(this._el).on(evtName, function (evt, ui) {
129+
var emmiter = that._evtEmmiters[that._events[evt.type]];
130+
emmiter.emit({ event: evt, ui: ui });
131+
});
132+
}
133133

134-
jQuery(this._el).attr("id", this.widgetId);
135-
jQuery(this._el)[this._widgetName](this.options);
136-
}
137-
createMethodGetter(name) {
138-
return function () {
139-
var widget = jQuery(this._el).data(this._widgetName);
140-
return jQuery.proxy(widget[name], widget);
141-
}
142-
}
134+
jQuery(this._el).attr("id", this.widgetId);
135+
jQuery(this._el)[this._widgetName](this.options);
136+
}
137+
createMethodGetter(name) {
138+
return function () {
139+
var widget = jQuery(this._el).data(this._widgetName);
140+
return jQuery.proxy(widget[name], widget);
141+
}
142+
}
143143

144-
ngDoCheck() {
145-
if (this._optsDiffer) {
144+
ngDoCheck() {
145+
if (this._optsDiffer) {
146146
const changes = this._optsDiffer.diff(this.options);
147147
if (changes) {
148-
changes.forEachChangedItem((change: any) => {
149-
this[change.key] = change.currentValue;
150-
});
148+
changes.forEachChangedItem((change: any) => {
149+
this[change.key] = change.currentValue;
150+
});
151151
}
152152
}
153-
}
154-
public ngOnChanges(changes: SimpleChanges): void {
155-
const opts = "options";
153+
}
154+
public ngOnChanges(changes: SimpleChanges): void {
155+
const opts = "options";
156156
if (opts in changes) {
157-
const value = changes[opts].currentValue;
158-
//options have been changed. Destroy and re-create widget.
159-
if(jQuery(this._el).data(this._widgetName)){
160-
jQuery(this._el)[this._widgetName]("destroy");
161-
jQuery(this._el)[this._widgetName](this.options);
162-
}
163-
try {
157+
const value = changes[opts].currentValue;
158+
//options have been changed. Destroy and re-create widget.
159+
if (jQuery(this._el).data(this._widgetName)) {
160+
jQuery(this._el)[this._widgetName]("destroy");
161+
jQuery(this._el)[this._widgetName](this.options);
162+
}
163+
try {
164164
this._optsDiffer = this.kvalDiffers.find({}).create();
165165
} catch (e) {
166-
throw new Error("Only binding to object is supported for options property.");
167-
}
168-
}
169-
}
170-
public markForCheck(){
171-
this.cdr.markForCheck();
172-
}
166+
throw new Error("Only binding to object is supported for options property.");
167+
}
168+
}
169+
}
170+
public markForCheck() {
171+
this.cdr.markForCheck();
172+
}
173173

174-
convertToCamelCase(str) {
175-
//convert hyphen to camelCase
176-
return str.replace(/-([a-z])/g, function (group) {
177-
return group[1].toUpperCase();
178-
});
179-
}
174+
convertToCamelCase(str) {
175+
//convert hyphen to camelCase
176+
return str.replace(/-([a-z])/g, function (group) {
177+
return group[1].toUpperCase();
178+
});
179+
}
180180

181-
ngOnDestroy() {
182-
jQuery(this._el)[this._widgetName]("destroy");
183-
jQuery(this._el).remove();
184-
jQuery(this._nativeElement).remove();
185-
}
181+
ngOnDestroy() {
182+
jQuery(this._el)[this._widgetName]("destroy");
183+
jQuery(this._el).remove();
184+
jQuery(this._nativeElement).remove();
185+
}
186186
}

0 commit comments

Comments
 (0)