gallery/frontend/app.js

/* global $:false Handlebars:false */

class Gallery {
  constructor() {
    Handlebars.registerHelper('ifGt', this.handlebarsBiggerThan);
    this.error_tpl = Handlebars.compile($('#error-template').html());
    this.album_tpl = Handlebars.compile($('#album-template').html());

    this.optionset = {
      // General options
      download: false,
      selector: '.img',
      // Thumbnails
      thumbnail: true,
      thumbWidth: 80,
      exThumbImage: 'src',
      showThumbByDefault: false,
    };
  }

  displayError(message = '') {
    $('.container-fluid').append(this.error_tpl({
      message,
    }));
  }

  handlebarsBiggerThan(v1, v2, options) {
    if (v1 > v2) {
      return options.fn(this);
    }
    return options.inverse(this);
  }

  initialize(uri) {
    $.ajax(uri, {
      error: () => this.displayError('Could not fetch albums.'),
      method: 'GET',
      success: (data) => this.processAlbums(data),
    });
  }

  processAlbums(albumData) {
    let albums = albumData.albums;
    albums.sort((a, b) => b.id - a.id);

    albums.forEach((album) => {
      let albumElement = $(this.album_tpl(album));
      $('#gallery-wrap').append(albumElement);
      albumElement.lightGallery(this.updatedOptionSet({
        galleryId: album.id,
      }));
    });
  }

  updatedOptionSet(opts = {}) {
    return Object.assign({}, this.optionset, opts);
  }
}

$(() => {
  let gallery = new Gallery();
  gallery.initialize('albums.json');
});