martinsonesson.se JsDOC

/*
    IMPORTS
*/

import {ART} from './../../configFiles/art';

/**
 * @constructor ArtController
 * @memberof controllers
 * @description Controller for handling presentation logic in art gallery section
 * @param {$scope} $scope - See {@link https://code.angularjs.org/1.2.26/docs/api/ng/type/$rootScope.Scope}
 * @param {$log} $log - See {@link https://code.angularjs.org/1.2.26/docs/api/ng/service/$log}
 */
export default class ArtController {
    constructor($scope, $log) {
        this.vm = this;

        // Public variables
        this.vm.art = [];
        this.vm.loading = true;

        // Public methods
        this.vm.openPhotoSwipe = this.openPhotoSwipe;

        // Private variables
        this.items = [];

        this.formatArt(ART);
    }

    /**
     * @function controllers.ArtController#formatArt
     * @description Function reads the data and generates list used for view and photoswipe
     * @param {Obj} art The data containing all art information
     */
    formatArt(art) {
        art.forEach(artItem => {
            this.vm.art.push({
                thumbnail: artItem.thumbnail,
                bigImage: artItem.bigImage,
                video: (artItem.video ? artItem.video : null),
                index: this.vm.art.length,
                width: artItem.width,
                height: artItem.height
            });
        });

        this.vm.art.forEach(artItem => {
            if(artItem.video) {
                this.items.push({
                    html: `<div class="videoSlide"><div class="videoSlideInner"><video id="videoPlayer${artItem.index}" controls><source src="${artItem.video}" type="video/mp4" /></video></div></div>`,
                    index: artItem.index,
                    title: 'Slide right or left to change item. Slide down or up to close current item.'
                });
            } else {
                this.items.push({
                    src: artItem.bigImage,
                    w: artItem.width,
                    h: artItem.height,
                    index: artItem.index,
                    title: 'Slide right or left to change item. Slide down or up to close current item.'
                });
            }
        });

        this.vm.loading = false;
    }

    /**
     * @function controllers.ArtController#openPhotoSwipe
     * @description Function that opens a specific item in Photoswipe
     * @param {Obj} artItem The art item, video or image
     */
    openPhotoSwipe(artItem) {
        const pswpElement = document.querySelectorAll('.pswp')[0];

        // define options (if needed)
        const options = {
            // history & focus options are disabled on CodePen
            history: false,
            focus: false,
            index: artItem.index,

            showAnimationDuration: 0,
            hideAnimationDuration: 0
        };

        const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, this.items, options);
        gallery.init();
    }
}