gosocial/web/templates/photo/gallery.html

<!--
    Photo Gallery Template, shared by Site Photos + User Photos.

    When Site Gallery: .IsSiteGallery is defined and true.
    When User Gallery: .User is defined, .IsOwnPhotos may be.
-->
{{define "title"}}
{{if .IsSiteGallery}}Member Gallery{{else}}Photos of {{.User.Username}}{{end}}
{{end}}

<!-- Reusable card body -->
{{define "card-body"}}
<div>
    <small class="has-text-grey">Uploaded {{.CreatedAt.Format "Jan _2 2006 15:04:05"}}</small>
</div>
<div class="mt-2">
    {{if .Explicit}}
    <span class="tag is-danger is-light">
        <span class="icon"><i class="fa fa-fire"></i></span>
        <span>Explicit</span>
    </span>
    {{end}}

    {{if eq .Visibility "public"}}
    <span class="tag is-info is-light">
        <span class="icon"><i class="fa fa-eye"></i></span>
        <span>
            Public
        </span>
    </span>
    {{else if eq .Visibility "friends"}}
    <span class="tag is-warning is-light">
        <span class="icon"><i class="fa fa-eye"></i></span>
        <span>
            Friends
        </span>
    </span>
    {{else}}
    <span class="tag is-private is-light">
        <span class="icon"><i class="fa fa-eye"></i></span>
        <span>
            Private
        </span>
    </span>
    {{end}}

    {{if .Gallery}}
    <span class="tag is-success is-light">
        <span class="icon"><i class="fa fa-image"></i></span>
        <span>Gallery</span>
    </span>
    {{end}}
</div>
{{end}}

<!-- Reusable card footer -->
{{define "card-footer"}}
    <a class="card-footer-item" href="/photo/edit?id={{.ID}}">
        <span class="icon"><i class="fa fa-edit"></i></span>
        <span>Edit</span>
    </a>
    <a class="card-footer-item has-text-danger" href="/photo/delete?id={{.ID}}">
        <span class="icon"><i class="fa fa-trash"></i></span>
        <span>Delete</span>
    </a>
{{end}}

<!-- Reusable pager -->
{{define "pager"}}
<nav class="pagination" role="navigation" aria-label="pagination">
    <a class="pagination-previous{{if not .Pager.HasPrevious}} is-disabled{{end}}" title="Previous"
        href="{{.Request.URL.Path}}?view={{.ViewStyle}}&page={{.Pager.Previous}}">Previous</a>
    <a class="pagination-next{{if not .Pager.HasNext}} is-disabled{{end}}" title="Next"
        href="{{.Request.URL.Path}}?view={{.ViewStyle}}&page={{.Pager.Next}}">Next page</a>
    <ul class="pagination-list">
        {{$Root := .}}
        {{range .Pager.Iter}}
        <li>
            <a class="pagination-link{{if .IsCurrent}} is-current{{end}}"
                aria-label="Page {{.Page}}"
                href="{{$Root.Request.URL.Path}}?view={{$Root.ViewStyle}}&page={{.Page}}">
                {{.Page}}
            </a>
        </li>
        {{end}}
    </ul>
</nav>
{{end}}

<!-- Main content template -->
{{define "content"}}
<div class="container">
    <section class="hero is-info is-bold">
        <div class="hero-body">
            {{if .IsSiteGallery}}
            <h1 class="title">
                {{template "title" .}}
            </h1>
            {{else}}
            <div class="level">
                <div class="level-left">
                    <h1 class="title">
                        {{template "title" .}}
                    </h1>
                </div>
                {{if .IsOwnPhotos}}
                <div class="level-right">
                    <div>
                        <a href="/photo/upload" class="button">
                            <span class="icon"><i class="fa fa-upload"></i></span>
                            <span>Upload Photos</span>
                        </a>
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}
        </div>
    </section>

    <!-- ugly hack.. needed by the card-footers later below. -->
    {{$Root := .}}

    <div class="block p-4">
        <!-- Profile Tab for user view -->
        {{if not .IsSiteGallery}}
        <div class="tabs is-boxed">
            <ul>
                <li>
                    <a href="/u/{{.User.Username}}">
                        <span class="icon is-small">
                            <i class="fa fa-user"></i>
                        </span>
                        <span>Profile</span>
                    </a>
                </li>
                <li class="is-active">
                    <a>
                        <span class="icon is-small">
                            <i class="fa fa-image"></i>
                        </span>
                        <span>Photos</span>
                    </a>
                </li>
            </ul>
        </div>
        {{end}}

        <!-- Photo Detail Modal -->
        <div class="modal" id="detail-modal">
            <div class="modal-background"></div>
            <div class="modal-content photo-modal">
                <div class="image is-fullwidth">
                    <img id="detailImg">
                </div>
            </div>
            <button class="modal-close is-large" aria-label="close"></button>
        </div>

        <div class="block">
            <div class="level">
                <div class="level-left">
                    <div class="level-item">
                        <span>
                            Found <strong>{{.Pager.Total}}</strong> photo{{Pluralize64 .Pager.Total}} (page {{.Pager.Page}} of {{.Pager.Pages}}).
                            {{if .ExplicitCount}}
                                {{.ExplicitCount}} explicit photo{{Pluralize64 .ExplicitCount}} hidden per your settings.
                            {{end}}
                        </span>
                    </div>
                </div>

                <div class="level-right">
                    <div class="level-item">
                        <div class="tabs is-toggle is-small">
                            <ul>
                                <li{{if eq .ViewStyle "cards"}} class="is-active"{{end}}>
                                    <a href="{{.Request.URL.Path}}?view=cards">Cards</a>
                                </li>
                                <li{{if eq .ViewStyle "full"}} class="is-active"{{end}}>
                                    <a href="{{.Request.URL.Path}}?view=full">Full</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{template "pager" .}}

            <!-- "Full" view style? (blog style) -->
            {{if eq .ViewStyle "full"}}
                {{range .Photos}}
                <div class="card block">
                    <header class="card-header {{if .Explicit}}has-background-danger{{else}}has-background-link{{end}}">
                        <!-- Site Gallery header -->
                        {{if $Root.IsSiteGallery}}
                        <div class="card-header-title has-text-light">
                            {{if $Root.UserMap.Has .UserID}}
                                {{$Owner := $Root.UserMap.Get .UserID}}
                                <div class="columns is-mobile is-gapless">
                                    <div class="column is-narrow">
                                        <figure class="image is-24x24 mr-2">
                                            {{if gt $Owner.ProfilePhoto.ID 0}}
                                            <img src="{{PhotoURL $Owner.ProfilePhoto.CroppedFilename}}" class="is-rounded">
                                            {{else}}
                                            <img src="/static/img/shy.png" class="is-rounded has-background-warning">
                                            {{end}}
                                        </figure>
                                    </div>
                                    <div class="column">
                                        <a href="/u/{{$Owner.Username}}" class="has-text-light">
                                            {{$Owner.Username}}
                                            <i class="fa fa-external-link ml-2"></i>
                                        </a>
                                    </div>
                                </div>
                            {{else}}
                                <span class="fa fa-user mr-2"></span>
                                <span>[deleted]</span>
                            {{end}}
                        </div>
                        {{else}}
                        <!-- User Gallery Full Header -->
                        <p class="card-header-title has-text-light">
                            <span class="icon">
                                <i class="fa fa-image"></i>
                            </span>
                            {{or .Caption "Photo"}}
                        </p>
                        {{end}}
                    </header>

                    <div class="card-image">
                        <figure class="image">
                            <img src="{{PhotoURL .Filename}}">
                        </figure>
                    </div>

                    <div class="card-content">
                        {{if .Caption}}
                            {{.Caption}}
                        {{else}}<em>No caption</em>{{end}}

                        {{template "card-body" .}}
                    </div>

                    <footer class="card-footer">
                        {{if or $Root.IsOwnPhotos $Root.CurrentUser.IsAdmin}}
                        {{template "card-footer" .}}
                        {{end}}

                        {{if not $Root.IsOwnPhotos}}
                        <a class="card-footer-item has-text-danger" href="/contact?intent=report&subject=report.photo&id={{.ID}}">
                            <span class="icon"><i class="fa fa-flag"></i></span>
                            <span>Report</span>
                        </a>
                        {{end}}
                    </footer>

                </div>
                {{end}}

            <!-- "Cards" style (default) -->
            {{else}}
                <div class="columns is-multiline">
                    {{range .Photos}}
                    <div class="column is-one-quarter-desktop is-half-tablet">
                        <div class="card">
                            <!-- Header only on Site Gallery version -->
                            {{if $Root.IsSiteGallery}}
                            <header class="card-header {{if .Explicit}}has-background-danger{{else}}has-background-link{{end}}">
                                <div class="card-header-title has-text-light">
                                    {{if $Root.UserMap.Has .UserID}}
                                        {{$Owner := $Root.UserMap.Get .UserID}}
                                        <div class="columns is-mobile is-gapless">
                                            <div class="column is-narrow">
                                                <figure class="image is-24x24 mr-2">
                                                    {{if gt $Owner.ProfilePhoto.ID 0}}
                                                    <img src="{{PhotoURL $Owner.ProfilePhoto.CroppedFilename}}" class="is-rounded">
                                                    {{else}}
                                                    <img src="/static/img/shy.png" class="is-rounded has-background-warning">
                                                    {{end}}
                                                </figure>
                                            </div>
                                            <div class="column">
                                                <a href="/u/{{$Owner.Username}}" class="has-text-light">
                                                    {{$Owner.Username}}
                                                    <i class="fa fa-external-link ml-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                    {{else}}
                                        <span class="fa fa-user mr-2"></span>
                                        <span>[deleted]</span>
                                    {{end}}
                                </div>
                            </header>
                            {{end}}

                            <div class="card-image">
                                <figure class="image">
                                    <a href="{{PhotoURL .Filename}}" target="_blank"
                                        class="js-modal-trigger" data-target="detail-modal"
                                        onclick="setModalImage(this.href)">
                                        <img src="{{PhotoURL .Filename}}">
                                    </a>
                                </figure>
                            </div>
                            <div class="card-content">
                                {{if .Caption}}
                                    {{.Caption}}
                                {{else}}<em>No caption</em>{{end}}

                                {{template "card-body" .}}
                            </div>

                            <footer class="card-footer">
                                {{if or $Root.IsOwnPhotos $Root.CurrentUser.IsAdmin}}
                                {{template "card-footer" .}}
                                {{end}}

                                {{if not $Root.IsOwnPhotos}}
                                <a class="card-footer-item has-text-danger" href="/contact?intent=report&subject=report.photo&id={{.ID}}">
                                    <span class="icon"><i class="fa fa-flag"></i></span>
                                    <span>Report</span>
                                </a>
                                {{end}}
                            </footer>
                        </div>
                    </div>
                    {{end}}
                </div>
            {{end}}<!-- ViewStyle -->

            {{template "pager" .}}

        </div>
    </div>

</div>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        // Get our modal to trigger it on click of a detail img.
        let $modal = document.querySelector("#detail-modal");
        document.querySelectorAll(".js-modal-trigger").forEach(node => {
            node.addEventListener("click", (e) => {
                e.preventDefault();
                setModalImage(node.href);
                $modal.classList.add("is-active");
            })
        });
    });
    function setModalImage(url) {
        let $modalImg = document.querySelector("#detailImg");
        $modalImg.src = url;
        return false;
    }
</script>
{{end}}