vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented DeferredContent component

pull/41/head
cagataycivici 2019-07-22 16:09:20 +03:00
parent c24185c26c
commit 1f97d2f1f8
9 changed files with 286 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/deferredcontent.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export * from './components/deferredcontent/DeferredContent';

3
exports/deferredcontent.js Normal file
View File

@ -0,0 +1,3 @@
'use strict';
module.exports = require('./components/deferredcontent/DeferredContent.vue');

3
src/AppMenu.vue
View File

@ -75,9 +75,10 @@
<div>
<router-link to="/accordion">&#9679; Accordion</router-link>
<router-link to="/card">&#9679; Card</router-link>
<router-link to="/panel">&#9679; Panel</router-link>
<router-link to="/deferredcontent">&#9679; Deferred</router-link>
<router-link to="/fieldset">&#9679; Fieldset</router-link>
<router-link to="/flexgrid">&#9679; FlexGrid</router-link>
<router-link to="/panel">&#9679; Panel</router-link>
<router-link to="/tabview">&#9679; TabView</router-link>
<router-link to="/toolbar">&#9679; Toolbar</router-link>
</div>

8
src/components/deferredcontent/DeferredContent.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
import Vue, {VNode} from 'vue';
export declare class DeferredContent extends Vue {
$emit(eventName: 'load'): this;
$slots: {
'': VNode[];
}
}

66
src/components/deferredcontent/DeferredContent.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div ref="container">
<slot v-if="loaded"></slot>
</div>
</template>
<script>
export default {
data() {
return {
loaded: false
}
},
mounted() {
if (!this.loaded) {
if (this.shouldLoad())
this.load();
else
this.bindScrollListener();
}
},
beforeDestroy() {
this.unbindScrollListener();
},
methods: {
bindScrollListener() {
this.documentScrollListener = () => {
if (this.shouldLoad()) {
this.load();
this.unbindScrollListener();
}
};
window.addEventListener('scroll', this.documentScrollListener);
},
unbindScrollListener() {
if (this.documentScrollListener) {
window.removeEventListener('scroll', this.documentScrollListener);
this.documentScrollListener = null;
}
},
shouldLoad() {
if (this.loaded) {
return false;
}
else {
const rect = this.$refs.container.getBoundingClientRect();
const docElement = document.documentElement;
const winHeight = docElement.clientHeight;
return (winHeight >= rect.top);
}
},
load() {
this.loaded = true;
this.$emit('load', event);
}
}
}
</script>
componentWillUnmount() {
this.unbindScrollListener();
}

2
src/main.js
View File

@ -14,6 +14,7 @@ import Column from './components/column/Column';
import DataTable from './components/datatable/DataTable';
import DataView from './components/dataview/DataView';
import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLayoutOptions';
import DeferredContent from './components/deferredcontent/DeferredContent';
import Dialog from './components/dialog/Dialog';
import Dropdown from './components/dropdown/Dropdown';
import Editor from './components/editor/Editor';
@ -78,6 +79,7 @@ Vue.component('Column', Column);
Vue.component('DataTable', DataTable);
Vue.component('DataView', DataView);
Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
Vue.component('DeferredContent', DeferredContent);
Vue.component('Dialog', Dialog);
Vue.component('Dropdown', Dropdown);
Vue.component('Editor', Editor);

7
src/router.js
View File

@ -165,7 +165,12 @@ export default new Router({
path: '/dataview',
name: 'dataview',
component: () => import('./views/dataview/DataViewDemo.vue')
},
},
{
path: '/deferredcontent',
name: 'deferredcontent',
component: () => import('./views/deferredcontent/DeferredContentDemo.vue')
},
{
path: '/dialog',
name: 'dialog',

62
src/views/deferredcontent/DeferredContentDemo.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DeferredContent</h1>
<p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..</p>
</div>
</div>
<div class="content-section implementation">
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div>
<DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent>
<div style="height: 500px">
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</DeferredContent>
</div>
<DeferredContentDoc />
</div>
</template>
<script>
import CarService from '../../service/CarService';
import DeferredContentDoc from './DeferredContentDoc';
export default {
data() {
return {
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
methods: {
onImageLoad() {
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
},
onDataLoad() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
}
},
components: {
'DeferredContentDoc': DeferredContentDoc
}
}
</script>

136
src/views/deferredcontent/DeferredContentDoc.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import DeferredContent from 'primevue/deferredcontent';
</CodeHighlight>
<h3>Getting Started</h3>
<p>DeferredContent is used as a wrapper element of its content..</p>
<CodeHighlight>
<template v-pre>
&lt;DeferredContent&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
</template>
</CodeHighlight>
<h3>Load Event</h3>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<CodeHighlight>
<template v-pre>
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
</template>
</CodeHighlight>
<h3>Properties</h3>
<p>Component has no properties.</p>
<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>load</td>
<td>event: Event object</td>
<td>Callback to invoke when deferred content is loaded..</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3>
<p>Component does not apply any styling.</p>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;DeferredContent&lt;/h1&gt;
&lt;p&gt;DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;div style="height: 800px"&gt;
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
&lt;/div&gt;
&lt;DeferredContent @load="onImageLoad"&gt;
&lt;img src="demo/images/nature/nature4.jpg" alt="Nature"/&gt;
&lt;/DeferredContent&gt;
&lt;div style="height: 500px"&gt;
&lt;/div&gt;
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/DeferredContent&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
export default {
data() {
return {
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
methods: {
onImageLoad() {
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
},
onDataLoad() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>