diff --git a/demo/app/demos.ts b/demo/app/demos.ts index 18802e56..d9c8f4c7 100644 --- a/demo/app/demos.ts +++ b/demo/app/demos.ts @@ -45,6 +45,7 @@ import { DemoAdapterFixPositionComponent } from './samples/experimental/adapter- import { DemoAdapterFixUpdaterComponent } from './samples/experimental/adapter-fix-updater.component'; import { DemoAdapterFixScrollToItemComponent } from './samples/experimental/adapter-fix-scrollToItem.component'; import { DemoOnBeforeClipSettingComponent } from './samples/experimental/onBeforeClip-setting.component'; +import { DemoAdapterPauseResumeComponent } from './samples/experimental/adapter-pause-resume.component'; import { DemoRoutinesComponent } from './samples/experimental/routines.component'; const common = [ @@ -100,6 +101,7 @@ const experimental = [ DemoAdapterFixUpdaterComponent, DemoAdapterFixScrollToItemComponent, DemoOnBeforeClipSettingComponent, + DemoAdapterPauseResumeComponent, DemoRoutinesComponent ]; diff --git a/demo/app/routes.ts b/demo/app/routes.ts index 980977da..df0b4180 100644 --- a/demo/app/routes.ts +++ b/demo/app/routes.ts @@ -262,6 +262,11 @@ const experimentalScope = { name: 'onBeforeClip setting', scope: globalScope.experimental.id }, + adapterPauseResume: { + id: 'adapter-pause-resume', + name: 'Adapter pause/resume methods', + scope: globalScope.experimental.id + }, routines: { id: 'routines', name: 'Routines', diff --git a/demo/app/samples/experimental.component.html b/demo/app/samples/experimental.component.html index a9aaa590..3a657fd2 100644 --- a/demo/app/samples/experimental.component.html +++ b/demo/app/samples/experimental.component.html @@ -45,4 +45,5 @@

Angular UI Scroll Experimental Demos

+ \ No newline at end of file diff --git a/demo/app/samples/experimental/adapter-pause-resume.component.html b/demo/app/samples/experimental/adapter-pause-resume.component.html new file mode 100644 index 00000000..1d61212a --- /dev/null +++ b/demo/app/samples/experimental/adapter-pause-resume.component.html @@ -0,0 +1,19 @@ + +
+
Available since v3.2.0, undocumented
+ + +
+
+

+ The Adapter.pause method is to stop the Scroller. + It doesn't receive the scroll events from the viewport, + so the scroll events are ignored. Also, all the Adapter methods + (except Adapter.resume and Adapter.reset) + don't do anything. +

+

+ The Adapter.resume method is to make the Scroller live again. +

+
+
\ No newline at end of file diff --git a/demo/app/samples/experimental/adapter-pause-resume.component.ts b/demo/app/samples/experimental/adapter-pause-resume.component.ts new file mode 100644 index 00000000..0be1d8cb --- /dev/null +++ b/demo/app/samples/experimental/adapter-pause-resume.component.ts @@ -0,0 +1,64 @@ +import { Component } from '@angular/core'; + +import { demos } from '../../routes'; +import { DemoSources, DemoSourceType, MyItem } from '../../shared/interfaces'; + +import { Datasource } from 'ngx-ui-scroll'; + +@Component({ + selector: 'app-adapter-pause-resume', + templateUrl: './adapter-pause-resume.component.html' +}) +export class DemoAdapterPauseResumeComponent { + demoContext = { + config: demos.experimental.map.adapterPauseResume, + noInfo: true + }; + + datasource = new Datasource({ + get: (index, count, success) => { + const data: MyItem[] = []; + for (let i = index; i <= index + count - 1; i++) { + data.push({ id: i, text: 'item #' + i }); + } + success(data); + }, + devSettings: { + debug: true + } + }); + + sources: DemoSources = [ + { + active: true, + name: DemoSourceType.Template, + text: ` + + +
+
+
{{item.text}}
+
+
` + }, + { + name: DemoSourceType.Datasource, + text: `datasource = new Datasource({ + get: (index, count, success) => { + const data = []; + for (let i = index; i <= index + count - 1; i++) { + data.push({ id: i, text: 'item #' + i }); + } + success(data); + } + } +})` + } + ]; + + argumentDescription = ` onBeforeClip: (items: { + $index: number, + data: any, + element?: HTMLElement + }[]) => void`; +}