-
Notifications
You must be signed in to change notification settings - Fork 160
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Get rid of jQuery dependency #589
Changes from 12 commits
ccc6bef
27cebfc
8ff13f0
348fa9b
e91d584
768fafa
f73271f
c4807d0
7f421fe
e3a1d36
5d8b068
ad8d4f7
0ef73ad
6644309
c1d8170
ff8825c
db19013
cff7985
2a43ce2
4a16fb0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,9 +16,6 @@ | |
}, | ||
"author": "Developer Express Inc.", | ||
"license": "MIT", | ||
"dependencies": { | ||
"jquery": "^2.0.0 || ^3.0.0" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What about types for jquery? |
||
}, | ||
"peerDependencies": { | ||
"devextreme": "~17.2.1-0", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't we update a |
||
"@angular/core": "^2.4.2 || ^4.0.0 || ^5.0.0-rc.1", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,9 @@ | ||
import { QueryList, ElementRef } from '@angular/core'; | ||
|
||
declare function require(params: any): any; | ||
let $ = require('jquery'); | ||
|
||
import { DX_TEMPLATE_WRAPPER_CLASS } from './template'; | ||
|
||
import * as events from 'devextreme/events'; | ||
|
||
const VISIBILITY_CHANGE_SELECTOR = 'dx-visibility-change-handler'; | ||
|
||
export interface INestedOptionContainer { | ||
|
@@ -126,6 +125,20 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements | |
export interface IOptionWithTemplate extends BaseNestedOption { | ||
template: any; | ||
} | ||
|
||
let triggerShownEvent = function(element) { | ||
let changeHandlers = []; | ||
if (element.classList.contains(VISIBILITY_CHANGE_SELECTOR)) { | ||
changeHandlers.push(element); | ||
} | ||
|
||
changeHandlers.push.apply(changeHandlers, element.querySelectorAll('.' + VISIBILITY_CHANGE_SELECTOR)); | ||
|
||
for (let i = 0; i < changeHandlers.length; i++) { | ||
events.triggerHandler(changeHandlers[i], 'dxshown'); | ||
} | ||
}; | ||
|
||
export function extractTemplate(option: IOptionWithTemplate, element: ElementRef) { | ||
if (!option.template === undefined || !element.nativeElement.hasChildNodes()) { | ||
return; | ||
|
@@ -144,40 +157,27 @@ export function extractTemplate(option: IOptionWithTemplate, element: ElementRef | |
return; | ||
} | ||
|
||
function triggerShownEvent($element) { | ||
let changeHandlers = $(); | ||
|
||
if ($element.hasClass(VISIBILITY_CHANGE_SELECTOR)) { | ||
changeHandlers = $element; | ||
} | ||
|
||
changeHandlers = changeHandlers.add($element.find('.' + VISIBILITY_CHANGE_SELECTOR)); | ||
|
||
for (let i = 0; i < changeHandlers.length; i++) { | ||
$(changeHandlers[i]).triggerHandler('dxshown'); | ||
} | ||
} | ||
|
||
option.template = { | ||
render: (renderData) => { | ||
let $result = $(element.nativeElement).addClass(DX_TEMPLATE_WRAPPER_CLASS); | ||
let result = element.nativeElement; | ||
result.classList.add(DX_TEMPLATE_WRAPPER_CLASS); | ||
|
||
if (renderData.container) { | ||
let container = renderData.container.get(0); | ||
let container = renderData.container.get ? renderData.container.get(0) : renderData.container; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we should extract a helper method with an understandable name? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isn't it a temporary solution, that already should be changed to DOM elements? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, it is not. You can add the jQuery integration into your application and API of DevExtreme widgets will change |
||
let resultInContainer = container.contains(element.nativeElement); | ||
|
||
renderData.container.append(element.nativeElement); | ||
container.appendChild(element.nativeElement); | ||
|
||
if (!resultInContainer) { | ||
let resultInBody = document.body.contains(container); | ||
|
||
if (resultInBody) { | ||
triggerShownEvent($result); | ||
triggerShownEvent(result); | ||
} | ||
} | ||
} | ||
|
||
return $result; | ||
return result; | ||
} | ||
}; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,9 +10,7 @@ import { | |
} from '@angular/core'; | ||
|
||
import { DxTemplateHost } from './template-host'; | ||
|
||
declare function require(params: any): any; | ||
let $ = require('jquery'); | ||
import * as events from 'devextreme/events'; | ||
|
||
export const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper'; | ||
|
||
|
@@ -44,22 +42,31 @@ export class DxTemplateDirective { | |
'$implicit': renderData.model, | ||
index: renderData.index | ||
}); | ||
let container = renderData.container.get ? renderData.container.get(0) : renderData.container; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The same here |
||
if (renderData.container) { | ||
renderData.container.append(childView.rootNodes); | ||
childView.rootNodes.forEach((element) => { | ||
container.appendChild(element); | ||
}); | ||
} | ||
// =========== WORKAROUND ============= | ||
// https://github.com/angular/angular/issues/12243 | ||
this.ngZone.run(() => { | ||
childView['detectChanges'](); | ||
}); | ||
// =========== /WORKAROUND ============= | ||
return $(childView.rootNodes) | ||
.addClass(DX_TEMPLATE_WRAPPER_CLASS) | ||
.one('dxremove', (e) => { | ||
childView.rootNodes.forEach((element) => { | ||
if (element.classList) { | ||
element.classList.add(DX_TEMPLATE_WRAPPER_CLASS); | ||
} | ||
|
||
events.one(element, 'dxremove', (e) => { | ||
if (!e._angularIntegration) { | ||
childView.destroy(); | ||
} | ||
}); | ||
}); | ||
|
||
return childView.rootNodes; | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -71,12 +71,12 @@ describe('DxTextBox value accessor', () => { | |
fixture.componentInstance.formControl.disable(); | ||
fixture.detectChanges(); | ||
|
||
expect(instance.option('disabled')).toBe(true); | ||
expect(instance['option']('disabled')).toBe(true); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Strange change |
||
|
||
fixture.componentInstance.formControl.enable(); | ||
fixture.detectChanges(); | ||
|
||
expect(instance.option('disabled')).toBe(false); | ||
expect(instance['option']('disabled')).toBe(false); | ||
})); | ||
it('should change the value', async(() => { | ||
let fixture = TestBed.createComponent(TestContainerComponent); | ||
|
@@ -87,6 +87,6 @@ describe('DxTextBox value accessor', () => { | |
fixture.componentInstance.value = 'text'; | ||
fixture.detectChanges(); | ||
|
||
expect(instance.option('value')).toBe('text'); | ||
expect(instance['option']('value')).toBe('text'); | ||
})); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missed space after dot.