From 1646792fa9cf7390af09f4dfcd62aca6dd9d84e0 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Fri, 15 May 2020 11:08:53 +0300 Subject: [PATCH] Galleria documentation --- .../demo/data/{galleria.json => photos.json} | 0 src/AppMenu.vue | 7 +- src/assets/styles/app/_home.scss | 1 - src/components/galleria/Galleria.d.ts | 10 +- src/router.js | 23 +- .../{GalleriaService.js => PhotoService.js} | 4 +- src/views/galleria/GalleriaAdvancedDemo.vue | 211 +++++++++++ ...cularDemo.vue => GalleriaAutoPlayDemo.vue} | 46 +-- src/views/galleria/GalleriaCaptionDemo.vue | 18 +- src/views/galleria/GalleriaDemo.vue | 198 ++-------- src/views/galleria/GalleriaDoc.vue | 354 ++++++++---------- src/views/galleria/GalleriaFullScreenDemo.vue | 50 +-- src/views/galleria/GalleriaIndicatorDemo.vue | 277 ++------------ src/views/galleria/GalleriaNavigatorDemo.vue | 176 +++++++++ src/views/galleria/GalleriaPreviewDemo.vue | 264 ------------- ...cDemo.vue => GalleriaProgrammaticDemo.vue} | 58 +-- src/views/galleria/GalleriaResponsiveDemo.vue | 20 +- src/views/galleria/GalleriaThumbnailDemo.vue | 94 ++--- 18 files changed, 702 insertions(+), 1109 deletions(-) rename public/demo/data/{galleria.json => photos.json} (100%) rename src/service/{GalleriaService.js => PhotoService.js} (51%) create mode 100644 src/views/galleria/GalleriaAdvancedDemo.vue rename src/views/galleria/{GalleriaCircularDemo.vue => GalleriaAutoPlayDemo.vue} (55%) create mode 100755 src/views/galleria/GalleriaNavigatorDemo.vue delete mode 100755 src/views/galleria/GalleriaPreviewDemo.vue rename src/views/galleria/{GalleriaBasicDemo.vue => GalleriaProgrammaticDemo.vue} (61%) mode change 100755 => 100644 diff --git a/public/demo/data/galleria.json b/public/demo/data/photos.json similarity index 100% rename from public/demo/data/galleria.json rename to public/demo/data/photos.json diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 26bf82378..f1ba841e5 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -215,14 +215,15 @@
diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss index 233aa1dcd..42aa6781a 100644 --- a/src/assets/styles/app/_home.scss +++ b/src/assets/styles/app/_home.scss @@ -9,7 +9,6 @@ a { color: var(--primary-color); font-weight: 500; - transition: color .2s; } .introduction { diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts index 59066d5e2..9c8ffe01a 100755 --- a/src/components/galleria/Galleria.d.ts +++ b/src/components/galleria/Galleria.d.ts @@ -8,10 +8,10 @@ export declare class Galleria extends Vue { visible?: boolean; numVisible?: number; responsiveOptions?: any[]; - showPreviewNavButtons?: boolean; - showThumbnailNavButtons?: boolean; - showNavButtonsOnPreviewHover?: boolean; - changePreviewOnIndicatorHover?: boolean; + showItemNavigators?: boolean; + showThumbnailNavigators?: boolean; + showItemNavigatorsOnHover?: boolean; + changeItemOnIndicatorHover?: boolean; circular?: boolean; autoPlay?: boolean; transitionInterval?: number; @@ -19,7 +19,7 @@ export declare class Galleria extends Vue { thumbnailsPosition?: string; verticalThumbnailViewPortHeight?: string; showIndicators?: boolean; - showIndicatorsOnPreview?: boolean; + showIndicatorsOnItem?: boolean; indicatorsPosition?: string; baseZIndex?: number; maskClass?: string; diff --git a/src/router.js b/src/router.js index 7386d41e7..807a63c22 100755 --- a/src/router.js +++ b/src/router.js @@ -636,9 +636,9 @@ export default new Router({ component: () => import('./views/galleria/GalleriaDemo.vue') }, { - path: '/galleria/basic', - name: 'galleriabasic', - component: () => import('./views/galleria/GalleriaBasicDemo.vue') + path: '/galleria/programmatic', + name: 'galleriaprogrammatic', + component: () => import('./views/galleria/GalleriaProgrammaticDemo.vue') }, { path: '/galleria/indicator', @@ -651,9 +651,9 @@ export default new Router({ component: () => import('./views/galleria/GalleriaThumbnailDemo.vue') }, { - path: '/galleria/preview', - name: 'galleriapreview', - component: () => import('./views/galleria/GalleriaPreviewDemo.vue') + path: '/galleria/navigator', + name: 'gallerianavigator', + component: () => import('./views/galleria/GalleriaNavigatorDemo.vue') }, { path: '/galleria/responsive', @@ -666,14 +666,19 @@ export default new Router({ component: () => import('./views/galleria/GalleriaFullScreenDemo.vue') }, { - path: '/galleria/circular', - name: 'galleriacircular', - component: () => import('./views/galleria/GalleriaCircularDemo.vue') + path: '/galleria/autoplay', + name: 'galleriaautoplay', + component: () => import('./views/galleria/GalleriaAutoPlayDemo.vue') }, { path: '/galleria/caption', name: 'galleriacaption', component: () => import('./views/galleria/GalleriaCaptionDemo.vue') + }, + { + path: '/galleria/advanced', + name: 'galleriaadvvanced', + component: () => import('./views/galleria/GalleriaAdvancedDemo.vue') } ] }); diff --git a/src/service/GalleriaService.js b/src/service/PhotoService.js similarity index 51% rename from src/service/GalleriaService.js rename to src/service/PhotoService.js index 998cb1dd8..1efbcc9a9 100755 --- a/src/service/GalleriaService.js +++ b/src/service/PhotoService.js @@ -1,9 +1,9 @@ import axios from 'axios' -export default class GalleriaService { +export default class PhotoService { getImages() { - return axios.get('demo/data/galleria.json') + return axios.get('demo/data/photos.json') .then(res => res.data.data); } } diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue new file mode 100644 index 000000000..19f4e11bc --- /dev/null +++ b/src/views/galleria/GalleriaAdvancedDemo.vue @@ -0,0 +1,211 @@ + + + + + + \ No newline at end of file diff --git a/src/views/galleria/GalleriaCircularDemo.vue b/src/views/galleria/GalleriaAutoPlayDemo.vue similarity index 55% rename from src/views/galleria/GalleriaCircularDemo.vue rename to src/views/galleria/GalleriaAutoPlayDemo.vue index 8ebd3b720..04256e8e8 100755 --- a/src/views/galleria/GalleriaCircularDemo.vue +++ b/src/views/galleria/GalleriaAutoPlayDemo.vue @@ -2,34 +2,19 @@
-

Galleria - Circular

-

+

Galleria - AutoPlay

+

AutoPlay mode is used to implement slideshows.

-

Basic

- - - - - -

AutoPlay

@@ -39,35 +24,20 @@ -import GalleriaService from '../../service/GalleriaService'; +import PhotoService from '../../service/PhotoService'; export default { data() { @@ -91,7 +61,7 @@ export default { }, galleriaService: null, created() { - this.galleriaService = new GalleriaService(); + this.galleriaService = new PhotoService(); }, mounted() { this.galleriaService.getImages().then(data => this.images = data); @@ -105,7 +75,7 @@ export default { - - diff --git a/src/views/galleria/GalleriaDoc.vue b/src/views/galleria/GalleriaDoc.vue index 86da2fc90..abf745333 100755 --- a/src/views/galleria/GalleriaDoc.vue +++ b/src/views/galleria/GalleriaDoc.vue @@ -15,6 +15,117 @@ import Galleria from 'primevue/galleria'; <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /> </template> </Galleria> + + +

For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.

+
+ +{ + "data":[ + { + "previewImageSrc": "demo/images/galleria/galleria1.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg", + "alt": "Description for Image 1", + "title": "Title 1" + }, + { + "previewImageSrc": "demo/images/galleria/galleria2.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg", + "alt": "Description for Image 2", + "title": "Title 2" + }, + { + "previewImageSrc": "demo/images/galleria/galleria3.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg", + "alt": "Description for Image 3", + "title": "Title 3" + }, + { + "previewImageSrc": "demo/images/galleria/galleria4.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg", + "alt": "Description for Image 4", + "title": "Title 4" + }, + { + "previewImageSrc": "demo/images/galleria/galleria5.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg", + "alt": "Description for Image 5", + "title": "Title 5" + }, + { + "previewImageSrc": "demo/images/galleria/galleria6.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg", + "alt": "Description for Image 6", + "title": "Title 6" + }, + { + "previewImageSrc": "demo/images/galleria/galleria7.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg", + "alt": "Description for Image 7", + "title": "Title 7" + }, + { + "previewImageSrc": "demo/images/galleria/galleria8.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg", + "alt": "Description for Image 8", + "title": "Title 8" + }, + { + "previewImageSrc": "demo/images/galleria/galleria9.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg", + "alt": "Description for Image 9", + "title": "Title 9" + }, + { + "previewImageSrc": "demo/images/galleria/galleria10.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg", + "alt": "Description for Image 10", + "title": "Title 10" + }, + { + "previewImageSrc": "demo/images/galleria/galleria11.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg", + "alt": "Description for Image 11", + "title": "Title 11" + }, + { + "previewImageSrc": "demo/images/galleria/galleria12.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg", + "alt": "Description for Image 12", + "title": "Title 12" + }, + { + "previewImageSrc": "demo/images/galleria/galleria13.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg", + "alt": "Description for Image 13", + "title": "Title 13" + }, + { + "previewImageSrc": "demo/images/galleria/galleria14.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg", + "alt": "Description for Image 14", + "title": "Title 14" + }, + { + "previewImageSrc": "demo/images/galleria/galleria15.jpg", + "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg", + "alt": "Description for Image 15", + "title": "Title 15" + } + ] +} + +
+ + +import axios from 'axios' + +export default class PhotoService { + + getImages() { + return axios.get('demo/data/photos.json').then(res => res.data.data); + } +} @@ -26,7 +137,7 @@ export default { }, galleriaService: null, created() { - this.galleriaService = new GalleriaService(); + this.galleriaService = new PhotoService(); }, mounted() { this.galleriaService.getImages().then(data => this.images = data); @@ -43,15 +154,13 @@ export default { <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> </template> <template #thumbnail="slotProps"> - <div class="p-grid p-nogutter p-justify-center"> - <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> - </div> + <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> </template> </Galleria>

Responsive

-

For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of +

For responsive design, numVisible can be defined using the responsiveOptions property which references an array of objects whose breakpoint defines the max-width to apply the settings.

@@ -60,9 +169,7 @@ export default { <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> </template> <template #thumbnail="slotProps"> - <div class="p-grid p-nogutter p-justify-center"> - <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> - </div> + <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> </template> </Galleria> @@ -84,7 +191,6 @@ responsiveOptions: [ ] -

Header and Footer

Custom content projection is available using the header and footer properties.

@@ -95,15 +201,21 @@ responsiveOptions: [ <template #item="slotProps"> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> </template> - <template #thumbnail="slotProps"> - <div class="p-grid p-nogutter p-justify-center"> - <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> - </div> - </template> <template #footer> <h1>Footer</h1> </template> </Galleria> + + +

Indicators

+

Indicators allow quick navigation between the items. Set showIndicators to display indicators which can be customized further + with the changeItemOnIndicatorHover, showIndicatorsOnItem and indicatorsPosition properties.

+ +<Galleria :value="images" :showIndicators="true"> + <template #item="slotProps"> + <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /> + </template> +</Galleria>

Properties

@@ -162,28 +274,28 @@ responsiveOptions: [ An array of options for responsive design. - showPreviewNavButtons + showItemNavigators boolean false - Whether to display navigation buttons in preview container. + Whether to display navigation buttons in item section. - showThumbnailNavButtons + showThumbnailNavigators boolean true Whether to display navigation buttons in thumbnail container. - showNavButtonsOnPreviewHover + showItemNavigatorsOnHover boolean false - Whether to display navigation buttons on preview container's hover. + Whether to display navigation buttons on item hover. - changePreviewOnIndicatorHover + changeItemOnIndicatorHover boolean false - When enabled, preview item is changed on indicator item's hover. + When enabled, item is changed on indicator hover. circular @@ -228,10 +340,10 @@ responsiveOptions: [ Whether to display indicator container. - showIndicatorsOnPreview + showIndicatorsOnItem boolean false - When enabled, indicator container is displayed on preview container. + When enabled, indicator container is displayed on item container. indicatorsPosition @@ -328,206 +440,50 @@ responsiveOptions: [ -import GalleriaService from '../../service/GalleriaService'; +import PhotoService from '../../service/PhotoService'; export default { data() { return { images: null, - activeItemIndex: 0, - showThumbnails: false, - isPreviewFullScreen: false + responsiveOptions: [ + { + breakpoint: '1024px', + numVisible: 5 + }, + { + breakpoint: '768px', + numVisible: 3 + }, + { + breakpoint: '560px', + numVisible: 1 + } + ] } }, galleriaService: null, created() { - this.galleriaService = new GalleriaService(); + this.galleriaService = new PhotoService(); }, mounted() { - this.galleriaService.getImages().then(data => this.images = data); - this.bindDocumentListeners(); - }, - methods: { - onThumbnailButtonClick() { - this.showThumbnails = !this.showThumbnails; - }, - toggleFullScreen() { - if (this.isPreviewFullScreen) { - this.closePreviewFullScreen(); - } - else { - this.openPreviewFullScreen(); - } - }, - onFullScreenChange() { - this.isPreviewFullScreen = !this.isPreviewFullScreen; - }, - openPreviewFullScreen() { - let elem = this.$refs.galleria.$el; - if (elem.requestFullscreen) { - elem.requestFullscreen(); - } - else if (elem.mozRequestFullScreen) { /* Firefox */ - elem.mozRequestFullScreen(); - } - else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ - elem.webkitRequestFullscreen(); - } - else if (elem.msRequestFullscreen) { /* IE/Edge */ - elem.msRequestFullscreen(); - } - }, - closePreviewFullScreen() { - if (document.exitFullscreen) { - document.exitFullscreen(); - } - else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } - else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - }, - bindDocumentListeners() { - document.addEventListener("fullscreenchange", this.onFullScreenChange); - document.addEventListener("mozfullscreenchange", this.onFullScreenChange); - document.addEventListener("webkitfullscreenchange", this.onFullScreenChange); - document.addEventListener("msfullscreenchange", this.onFullScreenChange); - }, - unbindDocumentListeners() { - document.removeEventListener("fullscreenchange", this.onFullScreenChange); - document.removeEventListener("mozfullscreenchange", this.onFullScreenChange); - document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange); - document.removeEventListener("msfullscreenchange", this.onFullScreenChange); - } - }, - computed: { - galleriaClass() { - return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}]; - }, - fullScreenIcon() { - return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`; - } + this.galleriaService.getImages().then(data => this.images = data); } } - -//SCSS -::v-deep { - .custom-galleria { - &.p-galleria { - .p-galleria-content { - height: 95%; - overflow: hidden; - position: relative; - - .p-galleria-thumbnail-content { - position: absolute; - width: 100%; - bottom: 0; - background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%); - - .p-galleria-thumbnail-container { - .p-galleria-thumbnail-items-content { - .p-galleria-thumbnail-items-container { - .p-galleria-thumbnail-item { - opacity: .6; - - &.p-galleria-thumbnail-item-current { - opacity: 1; - } - } - } - } - } - } - } - - .p-galleria-footer { - padding: 0; - background-color: rgba(0, 0, 0, .9); - border: rgba(0, 0, 0, .9); - - .custom-galleria-footer { - width: 100%; - display: flex; - align-items: center; - justify-content: stretch; - color: #ffffff; - - > button { - background-color: transparent; - padding: .3rem; - margin: .2rem; - border: 0 none; - border-radius: 0; - color: #ffffff; - - &:hover { - background-color: transparent; - } - } - - > span { - flex-grow: 1; - - > span { - font-size: .9rem; - padding-left: .829rem; - - &.title { - font-weight: bold; - } - } - } - } - } - - &.preview-fullscreen { - .p-galleria-preview-container { - .p-galleria-preview-nav-button { - top: 50%; - height: 20rem; - width: 4rem; - margin-top: -10rem; - } - } - } - } - } -} -
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue index 54033cd19..e9954715a 100755 --- a/src/views/galleria/GalleriaFullScreenDemo.vue +++ b/src/views/galleria/GalleriaFullScreenDemo.vue @@ -2,22 +2,20 @@
-

Galleria - FullScreen

-

+

Galleria - FullScreen

+

In fullscreen mode content covers the whole page over a mask..

-

Basic

+

With Thumbnails

@@ -30,24 +28,20 @@
@@ -43,22 +28,9 @@ -import GalleriaService from '../../service/GalleriaService'; +import PhotoService from '../../service/PhotoService'; export default { data() { @@ -100,10 +70,10 @@ export default { }, galleriaService: null, created() { - this.galleriaService = new GalleriaService(); + this.galleriaService = new PhotoService(); }, mounted() { - this.galleriaService.getImages().then(data => this.images = data); + this.galleriaService.getImages().then(data => this.images = data); }, computed: { activeIndex: { @@ -126,7 +96,7 @@ export default {