From 71d3a8e5dbca696ef8d4a283ddb72457e5e65ce1 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 31 Mar 2020 16:29:58 +0300
Subject: [PATCH] Add galleria demo files

---
 src/views/galleria/GalleriaBasicDemo.vue    | 178 +++++++++++++++
 src/views/galleria/GalleriaCaptionDemo.vue  | 124 +++++++++++
 src/views/galleria/GalleriaCircularDemo.vue | 144 ++++++++++++
 src/views/galleria/GalleriaDemo.vue         | 231 ++++++++++++++++++++
 4 files changed, 677 insertions(+)
 create mode 100644 src/views/galleria/GalleriaBasicDemo.vue
 create mode 100644 src/views/galleria/GalleriaCaptionDemo.vue
 create mode 100644 src/views/galleria/GalleriaCircularDemo.vue
 create mode 100644 src/views/galleria/GalleriaDemo.vue

diff --git a/src/views/galleria/GalleriaBasicDemo.vue b/src/views/galleria/GalleriaBasicDemo.vue
new file mode 100644
index 000000000..0b34c4d39
--- /dev/null
+++ b/src/views/galleria/GalleriaBasicDemo.vue
@@ -0,0 +1,178 @@
+<template>
+    <div>
+        <GalleriaSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1 style="margin-bottom: 0px;">Galleria - Basic</h1>
+                <p></p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Default</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
+                <template #previewItem="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+				</template>
+				<template #thumbnailItem="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                    </div>
+				</template>
+            </Galleria>
+
+            <h3>Programmatic</h3>
+            <div style="padding: .5em 0">
+                <Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" />
+                <Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" />
+            </div>
+
+            <Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
+                <template #previewItem="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+				</template>
+				<template #thumbnailItem="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                    </div>
+				</template>
+            </Galleria>
+        </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3 class="first"&gt;Default&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
+    &lt;template #previewItem="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnailItem="slotProps"&gt;
+        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+
+&lt;h3&gt;Programmatic&lt;/h3&gt;
+&lt;div style="padding: .5em 0"&gt;
+    &lt;Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" /&gt;
+    &lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" /&gt;
+&lt;/div&gt;
+
+&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
+    &lt;template #previewItem="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnailItem="slotProps"&gt;
+        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import GalleriaService from '../../service/GalleriaService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeItemIndex: 2,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data =&gt; this.images = data);
+    },
+    computed: {
+        activeIndex: {
+            get: function() {
+                return this.activeItemIndex;
+            },
+            set: function(newValue) {
+                if (this.images && 0 &lt;= newValue && newValue &lt;= (this.images.length - 1)) {
+                    this.activeItemIndex = newValue;
+                }
+            }
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+    </div>
+</template>
+
+<script>
+import GalleriaService from '../../service/GalleriaService';
+import GalleriaSubMenu from './GalleriaSubMenu';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeItemIndex: 2,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    },
+    computed: {
+        activeIndex: {
+            get: function() {
+                return this.activeItemIndex;
+            },
+            set: function(newValue) {
+                if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
+                    this.activeItemIndex = newValue;
+                }
+            }
+        }
+    },
+    components: {
+        'GalleriaSubMenu': GalleriaSubMenu
+    }
+}
+</script>
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
new file mode 100644
index 000000000..523a91940
--- /dev/null
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <GalleriaSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1 style="margin-bottom: 0px;">Galleria - Caption</h1>
+                <p></p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
+                <template #previewItem="{item}">
+					<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnailItem="{item}">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
+                    </div>
+				</template>
+                <template #previewCaption="{item}">
+                    <h4 style="margin-bottom: .5em;">{{item.title}}</h4>
+                    <p>{{item.alt}}</p>
+                </template>
+            </Galleria>
+        </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
+    &lt;template #previewItem="{item}"&gt;
+        &lt;img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnailItem="{item}"&gt;
+        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+            &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;template #previewCaption="{item}"&gt;
+        &lt;h4 style="margin-bottom: .5em;"&gt;{{item.title}}&lt;/h4&gt;
+        &lt;p&gt;{{item.alt}}&lt;/p&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import GalleriaService from '../../service/GalleriaService';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data =&gt; this.images = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+    </div>
+</template>
+
+<script>
+import GalleriaService from '../../service/GalleriaService';
+import GalleriaSubMenu from './GalleriaSubMenu';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    },
+    components: {
+        'GalleriaSubMenu': GalleriaSubMenu
+    }
+}
+</script>
diff --git a/src/views/galleria/GalleriaCircularDemo.vue b/src/views/galleria/GalleriaCircularDemo.vue
new file mode 100644
index 000000000..7f32b4699
--- /dev/null
+++ b/src/views/galleria/GalleriaCircularDemo.vue
@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <GalleriaSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1 style="margin-bottom: 0px;">Galleria - Circular</h1>
+                <p></p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
+                <template #previewItem="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnailItem="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+                    </div>
+				</template>
+            </Galleria>
+
+            <h3>AutoPlay</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
+                :circular="true" :autoPlay="true" :transitionInterval="2000">
+                <template #previewItem="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnailItem="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+                    </div>
+				</template>
+            </Galleria>
+        </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
+    &lt;template #previewItem="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnailItem="slotProps"&gt;
+        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+
+&lt;h3&gt;AutoPlay&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
+    :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
+    &lt;template #previewItem="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnailItem="slotProps"&gt;
+        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import GalleriaService from '../../service/GalleriaService';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+    </div>
+</template>
+
+<script>
+import GalleriaService from '../../service/GalleriaService';
+import GalleriaSubMenu from './GalleriaSubMenu';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    },
+    components: {
+        'GalleriaSubMenu': GalleriaSubMenu
+    }
+}
+</script>
diff --git a/src/views/galleria/GalleriaDemo.vue b/src/views/galleria/GalleriaDemo.vue
new file mode 100644
index 000000000..a12cd6275
--- /dev/null
+++ b/src/views/galleria/GalleriaDemo.vue
@@ -0,0 +1,231 @@
+<template>
+    <div class="galleria-demo">
+        <GalleriaSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Galleria</h1>
+                <p>Galleria is a content gallery component.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
+                :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
+                :circular="true" :autoPlay="true" :transitionInterval="3000">
+                <template #previewItem="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
+				</template>
+				<template #thumbnailItem="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+                    </div>
+				</template>
+                <template #footer>
+                    <div class="custom-galleria-footer">
+                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+                        <span v-if="images">
+                            <span>{{activeItemIndex + 1}}/{{images.length}}</span>
+                            <span class="title">{{images[activeItemIndex].title}}</span>
+                            <span>{{images[activeItemIndex].alt}}</span>
+                        </span>
+                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+
+        <GalleriaDoc />
+    </div>
+</template>
+
+<script>
+import GalleriaService from '../../service/GalleriaService';
+import GalleriaSubMenu from './GalleriaSubMenu';
+import GalleriaDoc from './GalleriaDoc';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeItemIndex: 0,
+            showThumbnails: false,
+            isPreviewFullScreen: false
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new GalleriaService();
+	},
+	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'}`;
+        }
+    },
+    components: {
+        'GalleriaSubMenu': GalleriaSubMenu,
+        'GalleriaDoc': GalleriaDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::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-prev,
+                        .p-galleria-thumbnail-next {
+                            background-color: transparent !important;
+                            color: #ffffff;
+                            border: 0 none;
+                            font-size: 1.2em;
+
+                            &:hover {
+                                color: var(--primaryColor);
+                            }
+                        }
+
+                        .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: .1em .4em;
+                        border: 0 none;
+                        border-radius: 0;
+                        color: #ffffff;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+
+                    > span {
+                        flex-grow: 1;
+
+                        > span {
+                            font-size: .9em;
+                            padding-left: .829em;
+
+                            &.title {
+                                font-weight: bold;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.preview-fullscreen {
+                .p-galleria-preview-container {
+                    .p-galleria-preview-nav-button {
+                        top: 50%;
+                        height: 20em;
+                        width: 4em;
+                        margin-top: -10em;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>