From 731314768ba7c9f56f4f6631ae69cea4e520f4b4 Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Mon, 18 Sep 2017 16:08:44 -0400 Subject: [PATCH 1/6] Update Materialize@0.100.2 and JQuery@3.2.12 --- demo-app/yarn.lock | 48 +++++++++++++++++----------------------------- package.json | 6 +++--- yarn.lock | 38 ++++++++++++++++-------------------- 3 files changed, 38 insertions(+), 54 deletions(-) diff --git a/demo-app/yarn.lock b/demo-app/yarn.lock index 6c7f846c..204f6ba8 100644 --- a/demo-app/yarn.lock +++ b/demo-app/yarn.lock @@ -167,17 +167,17 @@ version "2.0.46" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.46.tgz#c245426299b43c4bb75f44b813090bd5918d00f2" -"@types/jquery@^2.0.47": - version "2.0.48" - resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.48.tgz#3e90d8cde2d29015e5583017f7830cb3975b2eef" +"@types/jquery@^3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46" "@types/marked@0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.3.0.tgz#583c223dd33385a1dda01aaf77b0cd0411c4b524" -"@types/materialize-css@0.98.0": - version "0.98.0" - resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.98.0.tgz#8d514647c1d92e2bc5ec7aea0c1f13c408be61e5" +"@types/materialize-css@^0.100.0": + version "0.100.0" + resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.100.0.tgz#2b311b2ca273d6fd689609ab8e8d932966f8f45c" dependencies: "@types/jquery" "*" "@types/pickadate" "*" @@ -2288,7 +2288,7 @@ gulplog@^1.0.0: dependencies: glogg "^1.0.0" -hammerjs@^2.0.4: +hammerjs@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1" @@ -2986,11 +2986,7 @@ jquery-mousewheel@>=3.0.6: version "3.1.13" resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5" -jquery@^2.1.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02" - -jquery@^3.0.0: +jquery@^3.0.0, "jquery@^3.0.0 || ^2.1.4": version "3.2.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" @@ -3509,13 +3505,12 @@ matcher-collection@^1.0.0: dependencies: minimatch "^3.0.2" -materialize-css@0.98.2: - version "0.98.2" - resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.98.2.tgz#f9e4239fd27e2a917a0de379d74d508e2d92ec8e" +materialize-css@^0.100.2: + version "0.100.2" + resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07" dependencies: - hammerjs "^2.0.4" - jquery "^2.1.4" - node-archiver "^0.3.0" + hammerjs "^2.0.8" + jquery "^3.0.0 || ^2.1.4" math-expression-evaluator@^1.2.14: version "1.2.17" @@ -3700,12 +3695,12 @@ ng2-markdown-to-html@^1.3.1: marked "^0.3.6" prismjs "^1.6.0" -"ng2-materialize@file:../": - version "1.5.2-beta.0" +"ng2-materialize@file:..": + version "1.5.3-beta.0" dependencies: - "@types/jquery" "^2.0.47" - "@types/materialize-css" "0.98.0" - materialize-css "0.98.2" + "@types/jquery" "^3.2.12" + "@types/materialize-css" "^0.100.0" + materialize-css "^0.100.2" ngx-malihu-scrollbar@^1.2.1: version "1.2.1" @@ -3721,13 +3716,6 @@ no-case@^2.2.0: dependencies: lower-case "^1.1.1" -node-archiver@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/node-archiver/-/node-archiver-0.3.0.tgz#b9f1afe5006d0bdf29260181833a070978bc6947" - dependencies: - fstream "^1.0.10" - tar "^2.2.1" - node-gyp@^3.3.1: version "3.6.2" resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60" diff --git a/package.json b/package.json index 51a31649..c03d8ea9 100644 --- a/package.json +++ b/package.json @@ -36,9 +36,9 @@ "heroku-postbuild": "cd demo-app && yarn install && yarn run build:prod" }, "dependencies": { - "@types/jquery": "^2.0.47", - "@types/materialize-css": "0.98.0", - "materialize-css": "0.98.2" + "@types/jquery": "^3.2.12", + "@types/materialize-css": "^0.100.0", + "materialize-css": "^0.100.2" }, "devDependencies": { "@angular/animations": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index b4feefcd..d97232ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -163,13 +163,17 @@ version "2.5.45" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.45.tgz#58928a621d014ce6ab59c5a9c41071f7328b0ca9" -"@types/jquery@*", "@types/jquery@^2.0.47": +"@types/jquery@*": version "2.0.47" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.47.tgz#9665a157519dd48d259f94ac670d332a56561c00" -"@types/materialize-css@0.98.0": - version "0.98.0" - resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.98.0.tgz#8d514647c1d92e2bc5ec7aea0c1f13c408be61e5" +"@types/jquery@^3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46" + +"@types/materialize-css@^0.100.0": + version "0.100.0" + resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.100.0.tgz#2b311b2ca273d6fd689609ab8e8d932966f8f45c" dependencies: "@types/jquery" "*" "@types/pickadate" "*" @@ -2191,7 +2195,7 @@ gulplog@^1.0.0: dependencies: glogg "^1.0.0" -hammerjs@^2.0.4: +hammerjs@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1" @@ -2817,9 +2821,9 @@ jasminewd2@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.1.0.tgz#da595275d1ae631de736ac0a7c7d85c9f73ef652" -jquery@^2.1.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02" +"jquery@^3.0.0 || ^2.1.4": + version "3.2.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9: version "2.1.9" @@ -3295,13 +3299,12 @@ matcher-collection@^1.0.0: dependencies: minimatch "^3.0.2" -materialize-css@0.98.2: - version "0.98.2" - resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.98.2.tgz#f9e4239fd27e2a917a0de379d74d508e2d92ec8e" +materialize-css@^0.100.2: + version "0.100.2" + resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07" dependencies: - hammerjs "^2.0.4" - jquery "^2.1.4" - node-archiver "^0.3.0" + hammerjs "^2.0.8" + jquery "^3.0.0 || ^2.1.4" math-expression-evaluator@^1.2.14: version "1.2.17" @@ -3486,13 +3489,6 @@ no-case@^2.2.0: dependencies: lower-case "^1.1.1" -node-archiver@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/node-archiver/-/node-archiver-0.3.0.tgz#b9f1afe5006d0bdf29260181833a070978bc6947" - dependencies: - fstream "^1.0.10" - tar "^2.2.1" - node-gyp@^3.3.1: version "3.6.2" resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60" From ec633428c3fe7b27dc2f64c9dc81964fe36163bc Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Mon, 18 Sep 2017 17:08:50 -0400 Subject: [PATCH 2/6] Fix @types/jquery version and unit tests --- demo-app/yarn.lock | 6 +----- karma.conf.js | 2 +- src/app/select/select.directive.ts | 2 +- yarn.lock | 6 +----- 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/demo-app/yarn.lock b/demo-app/yarn.lock index 204f6ba8..aaefebd0 100644 --- a/demo-app/yarn.lock +++ b/demo-app/yarn.lock @@ -163,11 +163,7 @@ version "2.5.45" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.45.tgz#58928a621d014ce6ab59c5a9c41071f7328b0ca9" -"@types/jquery@*": - version "2.0.46" - resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.46.tgz#c245426299b43c4bb75f44b813090bd5918d00f2" - -"@types/jquery@^3.2.12": +"@types/jquery@*", "@types/jquery@^3.2.12": version "3.2.12" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46" diff --git a/karma.conf.js b/karma.conf.js index f1831932..eb8e4652 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -20,7 +20,7 @@ module.exports = function (config) { }, files: [ './node_modules/jquery/dist/jquery.js', - './node_modules/materialize-css/bin/materialize.js', + './node_modules/materialize-css/dist/js/materialize.js', { pattern: './src/test.ts', watched: false } ], preprocessors: { diff --git a/src/app/select/select.directive.ts b/src/app/select/select.directive.ts index 533c6caf..af0cdaaa 100644 --- a/src/app/select/select.directive.ts +++ b/src/app/select/select.directive.ts @@ -128,7 +128,7 @@ export class MzSelectDirective extends HandlePropChanges implements OnInit, OnDe } handleDOMEvents() { - this.inputElement.on('blur focus', (event: BaseJQueryEventObject) => { + this.inputElement.on('blur focus', (event: JQuery.Event) => { this.selectElement[0].dispatchEvent(new Event(event.type)); }); } diff --git a/yarn.lock b/yarn.lock index d97232ac..c8054316 100644 --- a/yarn.lock +++ b/yarn.lock @@ -163,11 +163,7 @@ version "2.5.45" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.45.tgz#58928a621d014ce6ab59c5a9c41071f7328b0ca9" -"@types/jquery@*": - version "2.0.47" - resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.47.tgz#9665a157519dd48d259f94ac670d332a56561c00" - -"@types/jquery@^3.2.12": +"@types/jquery@*", "@types/jquery@^3.2.12": version "3.2.12" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46" From c568c3e1cdf092a815d17e26386e561f071c24f6 Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Mon, 25 Sep 2017 22:03:44 -0400 Subject: [PATCH 3/6] FIx yarn.lock --- demo-app/yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo-app/yarn.lock b/demo-app/yarn.lock index aaefebd0..0fed6feb 100644 --- a/demo-app/yarn.lock +++ b/demo-app/yarn.lock @@ -3691,7 +3691,7 @@ ng2-markdown-to-html@^1.3.1: marked "^0.3.6" prismjs "^1.6.0" -"ng2-materialize@file:..": +"ng2-materialize@file:../": version "1.5.3-beta.0" dependencies: "@types/jquery" "^3.2.12" From a5695ceaef07e53aa0644e8c89b36bba8a406a07 Mon Sep 17 00:00:00 2001 From: jfcere Date: Wed, 27 Sep 2017 00:39:29 -0400 Subject: [PATCH 4/6] Remove fixCloseOnClick workaround in SideNav component --- demo-app/src/app/app.component.html | 1 + src/app/sidenav/sidenav.component.html | 4 +- src/app/sidenav/sidenav.component.ts | 39 +---- .../sidenav/sidenav.component.unit.spec.ts | 142 ------------------ 4 files changed, 8 insertions(+), 178 deletions(-) diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html index 1fec45a6..711f52ba 100644 --- a/demo-app/src/app/app.component.html +++ b/demo-app/src/app/app.component.html @@ -2,6 +2,7 @@ diff --git a/src/app/sidenav/sidenav.component.html b/src/app/sidenav/sidenav.component.html index 55dfab01..e9f02cf5 100644 --- a/src/app/sidenav/sidenav.component.html +++ b/src/app/sidenav/sidenav.component.html @@ -1,7 +1,5 @@ -
    -
\ No newline at end of file diff --git a/src/app/sidenav/sidenav.component.ts b/src/app/sidenav/sidenav.component.ts index a26aeb96..2453596e 100644 --- a/src/app/sidenav/sidenav.component.ts +++ b/src/app/sidenav/sidenav.component.ts @@ -6,13 +6,13 @@ import { OnDestroy, OnInit, Renderer, - ViewChild } from '@angular/core'; +} from '@angular/core'; @Component({ selector: 'mz-sidenav', templateUrl: './sidenav.component.html', }) -export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit { +export class MzSidenavComponent implements AfterViewInit, OnDestroy { @Input() backgroundClass: string; @Input() closeOnClick: boolean; @Input() collapseButtonId: string; @@ -21,29 +21,18 @@ export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit { @Input() id: string; @Input() width: number; - @ViewChild('sidenav') sideNav: ElementRef; - - closeOnClickListeners: Function[]; - constructor(private renderer: Renderer) { } - ngOnInit(): void { - this.closeOnClickListeners = []; - } - - ngAfterViewInit(): void { + ngAfterViewInit() { this.initCollapseButton(); this.initCollapsibleLinks(); - this.fixCloseOnClick(); } - ngOnDestroy(): void { + ngOnDestroy() { $(`#${this.collapseButtonId}`).sideNav('destroy'); - this.closeOnClickListeners.forEach(listener => listener()); } - initCollapseButton(): void { - + initCollapseButton() { if (!this.collapseButtonId) { return; } @@ -66,24 +55,8 @@ export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit { }); } - initCollapsibleLinks(): void { + initCollapsibleLinks() { // Initialize collapsible elements $('.collapsible').collapsible(); } - - fixCloseOnClick() { - // Fix side navigation closeOnClick for non-collapsible links - // issue: https://github.com/Dogfalo/materialize/issues/2520 - // workaround: https://github.com/Dogfalo/materialize/issues/1426 - $(this.sideNav.nativeElement) - .find('li a:not(.collapsible-header)') - .each((index: number, link: Element) => { - const listener = this.renderer.listen(link, 'click', (element: JQueryEventObject) => { - if ($(window).width() < 992) { - $(`#${this.collapseButtonId}`).sideNav('hide'); - } - }); - this.closeOnClickListeners.push(listener); - }); - } } diff --git a/src/app/sidenav/sidenav.component.unit.spec.ts b/src/app/sidenav/sidenav.component.unit.spec.ts index fbd8ee1e..4ad53d08 100644 --- a/src/app/sidenav/sidenav.component.unit.spec.ts +++ b/src/app/sidenav/sidenav.component.unit.spec.ts @@ -39,32 +39,17 @@ describe('MzSidenavComponent:unit', () => { expect(component).toBeTruthy(); }); - describe('ngOnInit', () => { - - it('should initilize closeOnClickLister property', () => { - - component.closeOnClickListeners = undefined; - - component.ngOnInit(); - - expect(component.closeOnClickListeners).toBeDefined(); - expect(component.closeOnClickListeners.length).toBe(0); - }); - }); - describe('ngAfterViewInit', () => { it('should call init functions', () => { spyOn(component, 'initCollapseButton'); spyOn(component, 'initCollapsibleLinks'); - spyOn(component, 'fixCloseOnClick'); component.ngAfterViewInit(); expect(component.initCollapseButton).toHaveBeenCalled(); expect(component.initCollapsibleLinks).toHaveBeenCalled(); - expect(component.fixCloseOnClick).toHaveBeenCalled(); }); }); @@ -91,21 +76,6 @@ describe('MzSidenavComponent:unit', () => { expect(mockCollapseButton.sideNav).toHaveBeenCalledWith('destroy'); }); - - it('should remove closeOnClick listeners', () => { - - const spyListeners = jasmine.createSpyObj('spyListeners', ['method1', 'method2', 'method3']); - - Object.keys(spyListeners).forEach(listener => { - component.closeOnClickListeners.push(spyListeners[listener]); - }); - - component.ngOnDestroy(); - - Object.keys(spyListeners).forEach(listener => { - expect(spyListeners[listener]).toHaveBeenCalled(); - }); - }); }); describe('initCollapseButton', () => { @@ -234,116 +204,4 @@ describe('MzSidenavComponent:unit', () => { expect(mockCollapsible.collapsible).toHaveBeenCalled(); }); }); - - describe('fixCloseOnClick', () => { - - function createSidenavLink(collapsible?: boolean): void { - const link = document.createElement('a'); - if (collapsible) { - link.classList.add('collapsible-header'); - } - const header = document.createElement('li'); - header.appendChild(link); - $(fixture.nativeElement).find('.side-nav').append(header); - } - - describe('non-collapsible link', () => { - let renderedLink: HTMLElement; - const mockCollapseButton = { sideNav: (method: string) => {} }; - const mockWindow = { width: () => 0 }; - - beforeEach(() => { - - createCollapseButton(collapseButtonId); - component.collapseButtonId = collapseButtonId; - - createSidenavLink(); - - component.fixCloseOnClick(); - - renderedLink = $(fixture.nativeElement).find('li a')[0]; - - spyOn(mockCollapseButton, 'sideNav'); - - spyOn(window, '$').and.callFake((selector: string): any => { - return selector === `#${collapseButtonId}` - ? mockCollapseButton - : mockWindow; - }); - }); - - it('should hide sidenav on click when screen width < 992px', () => { - - spyOn(mockWindow, 'width').and.returnValue(991); - - renderedLink.click(); - - expect(mockCollapseButton.sideNav).toHaveBeenCalledWith('hide'); - }); - - it('should not hide sidenav on click when screen width >= 992px', () => { - - spyOn(mockWindow, 'width').and.returnValue(992); - - renderedLink.click(); - - expect(mockCollapseButton.sideNav).not.toHaveBeenCalled(); - }); - - it('should keep track of listeners', () => { - - expect(component.closeOnClickListeners.length).toBe(1); - }); - }); - - describe('collapsible link', () => { - - let renderedLink: HTMLElement; - const mockCollapseButton = { sideNav: (method: string) => {} }; - const mockWindow = { width: () => 0 }; - - beforeEach(() => { - - createCollapseButton(collapseButtonId); - component.collapseButtonId = collapseButtonId; - - createSidenavLink(true); - - component.fixCloseOnClick(); - - renderedLink = $(fixture.nativeElement).find('li a')[0]; - - spyOn(mockCollapseButton, 'sideNav'); - - spyOn(window, '$').and.callFake((selector: string): any => { - return selector === `#${collapseButtonId}` - ? mockCollapseButton - : mockWindow; - }); - }); - - it('should not hide sidenav when screen width < 992px', () => { - - spyOn(mockWindow, 'width').and.returnValue(991); - - renderedLink.click(); - - expect(mockCollapseButton.sideNav).not.toHaveBeenCalled(); - }); - - it('should not hide sidenav when screen width >= 992px', () => { - - spyOn(mockWindow, 'width').and.returnValue(992); - - renderedLink.click(); - - expect(mockCollapseButton.sideNav).not.toHaveBeenCalled(); - }); - - it('should not keep track of listeners', () => { - - expect(component.closeOnClickListeners.length).toBe(0); - }); - }); - }); }); From 7d7695b3d7f6a512e0b93468d26e721d8acc5812 Mon Sep 17 00:00:00 2001 From: jfcere Date: Wed, 27 Sep 2017 00:55:57 -0400 Subject: [PATCH 5/6] Workaround for multiple select options not aligned --- .../select/select-container/select-container.component.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/select/select-container/select-container.component.scss b/src/app/select/select-container/select-container.component.scss index c9ea98f9..25036c7f 100644 --- a/src/app/select/select-container/select-container.component.scss +++ b/src/app/select/select-container/select-container.component.scss @@ -1,4 +1,10 @@ .input-field:not(.inline) { // fix unwanted space under the input-field when error-message is not shown display: block; +} + +// woraround for materialize bug: multiple select options are not aligned +// https://github.com/Dogfalo/materialize/issues/5083#issue-248489869 +#{'/deep/'} .input-field .dropdown-content [type="checkbox"]+label { + top: -11px; } \ No newline at end of file From f1380176e4271b4c1fd890fff08629907c906763 Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Wed, 27 Sep 2017 10:28:58 -0400 Subject: [PATCH 6/6] Minor change --- .../select/select-container/select-container.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/select/select-container/select-container.component.scss b/src/app/select/select-container/select-container.component.scss index 25036c7f..7f8ba0da 100644 --- a/src/app/select/select-container/select-container.component.scss +++ b/src/app/select/select-container/select-container.component.scss @@ -3,8 +3,8 @@ display: block; } -// woraround for materialize bug: multiple select options are not aligned +// workaround for materialize bug: multiple select options are not aligned // https://github.com/Dogfalo/materialize/issues/5083#issue-248489869 #{'/deep/'} .input-field .dropdown-content [type="checkbox"]+label { top: -11px; -} \ No newline at end of file +}