Merge pull request 'dev' (#35) from dev into master

Reviewed-on: #35

app/View/Components/ShareRhpzUrl.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Entry;
+use App\Models\News;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ShareRhpzUrl extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public Entry|News $entry,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        if( ( $this->entry->type ?? "news" ) === 'news' ){
+            $letter = 'n';
+        } else {
+            $letter = $this->entry->type[0];
+        }
+
+        $id = $this->entry->id;
+        $shareUrl = config('app.share_url');
+
+        $url = rtrim($shareUrl, '/') . '/' . $letter . '/' . $id;
+
+        return view('components.share-rhpz-url', compact('url') );
+    }
+}

config/app.php

@@ -126,4 +126,5 @@ return [
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+    'share_url' => env('RHPZ_SHARE_URL', ''),
 ];

resources/css/layout/entry.css

@@ -178,7 +178,6 @@
         max-width: 90%;
         max-height: 90%;
         position: relative;
-
         img {
             max-width: 100%;
             max-height: 90vh;
@@ -198,12 +197,40 @@
         font-weight: bold;
         cursor: pointer;
         user-select: none;
-
         &:hover {
             color: var(--rhpz-orange);
         }
     }
 
+    .gallery-modal-arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #fff;
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        &:hover {
+            color: var(--rhpz-orange);
+        }
+        i {
+            width: 28px;
+            height: 28px;
+        }
+    }
+
+    .gallery-modal-arrow-prev {
+        left: 20px;
+    }
+
+    .gallery-modal-arrow-next {
+        right: 20px;
+    }
+
     .gallery-modal-video {
         width: 90%;
         max-width: 960px;
@@ -211,7 +238,6 @@
         box-shadow: 0 10px 30px rgba(0,0,0,0.6);
         border: 1px solid var(--border);
         background-color: #000;
-
         iframe {
             width: 100%;
             height: 100%;

resources/views/components/share-rhpz-url.blade.php

@@ -0,0 +1,50 @@
+<div x-data="{
+    shareModal: false,
+    copied: false,
+    copyClipboard: function(){
+        let share = document.getElementById('share-link');
+        share.select();
+        share.setSelectionRange(0, 99999);
+        navigator.clipboard.writeText(share.value);
+        this.copied = true;
+    }
+}">
+    <button type="button" class="btn" @click="shareModal = true">
+        <i data-lucide="link"></i> Share
+    </button>
+     <div
+        class="modal-overlay"
+        x-show="shareModal"
+        x-effect="shareModal && $nextTick(() => window.refreshIcons($el))"
+        x-cloak
+        x-transition.opacity.duration.300ms
+        @keydown.escape.window="shareModal = false; copied = false;"
+        @focus="window.refreshIcons($el)"
+    >
+        <div @click.outside="shareModal = false; copied = false;" class="modal-window">
+
+                <div class="modal-header">
+                    <span class="modal-title">Share this page</span>
+                    <button type="button" @click="shareModal = false; copied = false;" class="modal-close">
+                        <i data-lucide="x" size="18"></i>
+                    </button>
+                </div>
+
+            <div class="modal-content">
+
+                <div class="form-group">
+                    <label class="form-label">URL</label>
+                    <input type="text" id="share-link" disabled class="form-input" value="{{ $url }}">
+                </div>
+
+                <button type="button" class="btn" @click="copyClipboard()">
+                    <i data-lucide="link" size="14"></i> Copy
+                </button>
+
+                <span class="whisper" x-show="copied">Copied !</span>
+
+            </div>
+
+        </div>
+    </div>
+</div>

resources/views/entries/show.blade.php

@@ -7,9 +7,16 @@
     {{ \Diglactic\Breadcrumbs\Breadcrumbs::render() }}
     <article id="entry-container">
         <div class="entry-header">
-            <div class="entry-cover">
+            <div class="entry-cover" x-data="{open: false}">
                 @if( $entry->main_image )
-                    <img src="{{ Storage::url($entry->main_image) }}">
+                    <img src="{{ Storage::url($entry->main_image) }}" @click="open = true;">
+                    <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
+                         @keydown.escape.window="open = false" x-cloak>
+                        <span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
+                        <div class="gallery-modal-content" @click.stop>
+                            <img src="{{ Storage::url($entry->main_image) }}">
+                        </div>
+                    </div>
                 @else
                     <div class="entry-cover-placeholder">
                         <i data-lucide="image" size="48"></i>
@@ -208,6 +215,7 @@
                             <i data-lucide="flag"></i> Report / Claim Ownership
                         </a>
                     @endauth
+                    <x-share-rhpz-url :entry="$entry" />
                 </div>
             </div>
         </div>
@@ -240,25 +248,57 @@
                     </ul>
                 </div>
             @endif
+
+            {{-- Gallery --}}
+
             @if( $entry->gallery->isNotEmpty() )
-                <div x-data="{ open: false, currentImage: ''}" x-cloak>
+                <div x-data="{
+                        images: [
+                            @foreach( $entry->gallery as $galleryItem )
+                                '{{ Storage::url($galleryItem->image) }}',
+                            @endforeach
+                        ],
+                        currentIndex: 0,
+                        open: false,
+                        get currentImage() { return this.images[this.currentIndex]; },
+                        get hasPrev() { return this.currentIndex > 0; },
+                        get hasNext() { return this.currentIndex < this.images.length - 1; },
+                        openAt(index) { this.currentIndex = index; this.open = true; },
+                        prev() { if (this.hasPrev) this.currentIndex--; },
+                        next() { if (this.hasNext) this.currentIndex++; }
+                    }" x-cloak>
                     <x-entry-section-title label="Gallery" icon="images"/>
                     <div class="entry-gallery">
                         @foreach( $entry->gallery as $galleryItem )
-                            <div class="entry-gallery-item"
+                            <div class="entry-gallery-item" @click="openAt({{ $loop->index }})">
-                                 @click="currentImage = '{{ Storage::url($galleryItem->image) }}'; open = true; "><img
+                                <img src="{{ Storage::url($galleryItem->image) }}">
-                                    src="{{ Storage::url($galleryItem->image) }}"></div>
+                            </div>
                         @endforeach
                     </div>
                     <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
-                         @keydown.escape.window="open = false">
+                         @keydown.escape.window="open = false"
+                         @keydown.arrow-left.window="prev()"
+                         @keydown.arrow-right.window="next()"
+                         x-cloak>
                         <span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
+
+                        <span class="gallery-modal-arrow gallery-modal-arrow-prev" x-show="hasPrev" @click.stop="prev()">
+                            <i data-lucide="chevron-left"></i>
+                        </span>
+
                         <div class="gallery-modal-content" @click.stop>
                             <img :src="currentImage">
                         </div>
+
+                        <span class="gallery-modal-arrow gallery-modal-arrow-next" x-show="hasNext" @click.stop="next()">
+                            <i data-lucide="chevron-right"></i>
+                        </span>
                     </div>
                 </div>
             @endif
+
+            {{-- End gallery --}}
+
             @if( $entry->relevant_link )
                 <x-entry-section-title label="Relevant Link" icon="link"/>
                 <div class="entry-description">

resources/views/news/show.blade.php

@@ -123,6 +123,8 @@
                             </a>
                         @endauth
 
+                        <x-share-rhpz-url :entry="$news" />
+
                     </div>
                 </div>
         </div>
@@ -134,25 +136,57 @@
                         {!! $news->description_html !!}
                     </div>
                 @endif
-                @if( $news->gallery->isNotEmpty() )
+
-                    <div x-data="{ open: false, currentImage: ''}" x-cloak>
+                    {{-- Gallery --}}
-                        <x-entry-section-title label="Gallery" icon="images"/>
+
-                        <div class="entry-gallery">
+                    @if( $news->gallery->isNotEmpty() )
-                            @foreach( $news->gallery as $galleryItem )
+                        <div x-data="{
-                                <div class="entry-gallery-item"
+                                images: [
-                                     @click="currentImage = '{{ Storage::url($galleryItem->image) }}'; open = true; "><img
+                                    @foreach( $news->gallery as $galleryItem )
-                                        src="{{ Storage::url($galleryItem->image) }}"></div>
+                                        '{{ Storage::url($galleryItem->image) }}',
-                            @endforeach
+                                    @endforeach
-                        </div>
+                                ],
-                        <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
+                                currentIndex: 0,
-                             @keydown.escape.window="open = false">
+                                open: false,
-                            <span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
+                                get currentImage() { return this.images[this.currentIndex]; },
-                            <div class="gallery-modal-content" @click.stop>
+                                get hasPrev() { return this.currentIndex > 0; },
-                                <img :src="currentImage">
+                                get hasNext() { return this.currentIndex < this.images.length - 1; },
+                                openAt(index) { this.currentIndex = index; this.open = true; },
+                                prev() { if (this.hasPrev) this.currentIndex--; },
+                                next() { if (this.hasNext) this.currentIndex++; }
+                            }" x-cloak>
+                            <x-entry-section-title label="Gallery" icon="images"/>
+                            <div class="entry-gallery">
+                                @foreach( $news->gallery as $galleryItem )
+                                    <div class="entry-gallery-item" @click="openAt({{ $loop->index }})">
+                                        <img src="{{ Storage::url($galleryItem->image) }}">
+                                    </div>
+                                @endforeach
+                            </div>
+                            <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
+                                 @keydown.escape.window="open = false"
+                                 @keydown.arrow-left.window="prev()"
+                                 @keydown.arrow-right.window="next()"
+                                 x-cloak>
+                                <span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
+
+                                <span class="gallery-modal-arrow gallery-modal-arrow-prev" x-show="hasPrev" @click.stop="prev()">
+                                    <i data-lucide="chevron-left"></i>
+                                </span>
+
+                                <div class="gallery-modal-content" @click.stop>
+                                    <img :src="currentImage">
+                                </div>
+
+                                <span class="gallery-modal-arrow gallery-modal-arrow-next" x-show="hasNext" @click.stop="next()">
+                                    <i data-lucide="chevron-right"></i>
+                                </span>
                             </div>
                         </div>
-                    </div>
+                    @endif
-                @endif
+
+            {{-- End gallery --}}
+
             </div>
             @if( $news->entry()->exists() || $news->relevant_link || $news->youtube_link )
                 <aside class="news-sidebar">