(function () {
'use strict';
// Two Image Tiles
angular
.module('mohistory')
.component('twoImageTiles', {
templateUrl: 'app/components/two-image-tiles/two-image-tiles.component.html',
controller: twoImageTilesCtrl,
controllerAs: 'twoImageTiles',
bindings: {
data: '<',
}
});
twoImageTilesCtrl.$inject = [];
/**
* This component can render any of these mhs:displayClasses learn-more-side-by-side,
* other-exhibits, learn-grid-nested-tiles, learn-grid, research-featured,
* or side-by-side-image-tiles. The vm.block object contains configuration information for
* each mhs:displayClass.
* @memberof mohistory
* @name twoImageTiles
* @ngdoc component
*/
function twoImageTilesCtrl() {
var vm = this;
/* ----- Variables ----- */
vm.blocks = {
'learn-more-side-by-side': {
itemsPerRow: 'inf', // 'inf' means the block does not require it's data split into rows
isInteractive: false,
usesParallax: true,
parallaxSpeed: 2,
limitTo: 100, // This value is used to split data into rows, so is arbitrary for this block
begin: 0,
},
'other-exhibits': {
itemsPerRow: 'inf',
isInteractive: true,
usesParallax: false,
parallaxSpeed: 0,
limitTo: 100,
begin: 0,
},
'learn-grid-nested-tiles': {
itemsPerRow: 2,
isInteractive: false,
usesParallax: false,
parallaxSpeed: 0,
limitTo: 2,
begin: 0,
},
'learn-grid': {
itemsPerRow: 2,
isInteractive: false,
usesParallax: false,
parallaxSpeed: 0,
limitTo: 2,
begin: 0,
},
'curated-grid': {
itemsPerRow: 2,
isInteractive: false,
usesParallax: false,
parallaxSpeed: 0,
limitTo: 2,
begin: 0,
},
'research-featured': {
itemsPerRow: 'inf',
isInteractive: false,
usesParallax: true,
parallaxSpeed: 2,
limitTo: 100,
begin: 0,
},
'side-by-side-image-tiles': {
itemsPerRow: 'inf',
isInteractive: false,
usesParallax: false,
parallaxSpeed: 0,
limitTo: 100,
begin: 0,
},
};
vm.curBlockConfig = {};
vm.rowSplit = [];
vm.currentImageIdx = 0;
/* ----- Function Bindings ----- */
vm.$onInit = onInit;
vm.adjustLimitTo = adjustLimitTo;
vm.forwardByOne = forwardByOne;
vm.backByOne = backByOne;
/* ----- Function Definitions ----- */
/**
* Initiated when component is created. Runs code necessary for block
* configuration.
* @function onInit
* @memberof twoImageTiles
*/
function onInit() {
vm.curBlockConfig = vm.blocks[vm.data['mhs:displayClass']];
// Due to HTML constraints, some blocks need to be split into rows.
// If a block's itemsPerRow is set to 'inf' it mean the block will wrap
// to accommodate data. Block's with itemsPerRow set to a number require
// HTML separation into rows. These blocks use the rowsSplit array to
// determine where to split data for rows.
if (vm.curBlockConfig.itemsPerRow !== 'inf') {
var rows = Math.ceil(vm.data['mhs:parts'].length / vm.curBlockConfig.itemsPerRow);
for (var i = 0; i < rows; i++) {
vm.rowSplit.push(i * 2);
}
} else {
vm.rowSplit.push(0);
}
}
/**
* Adjust the number elements shown on each row by adjusting their limitTo
* config property. This only effects interactive blocks.
* @function adjustLimitTo
* @memberof twoImageTiles
* @param {Number} viewSize The size of the viewport
*/
function adjustLimitTo(viewSize) {
// If viewport below 767, only show one tile, else show 2.
if (viewSize < 767 && vm.curBlockConfig.isInteractive) {
vm.curBlockConfig.limitTo = 1;
} else if (viewSize > 767 && vm.curBlockConfig.isInteractive) {
vm.curBlockConfig.limitTo = 2;
}
return vm.curBlockConfig.limitTo;
}
/**
* Advance the visible tiles by one. This only applies to interactive blocks and will allow for rotation.
* @function forwardByOne
* @memberof twoImageTiles
*/
function forwardByOne() {
vm.currentImageIdx = vm.currentImageIdx + 1 < vm.data['mhs:parts'].length ? vm.currentImageIdx + 1 : 0;
}
/**
* Retreat the visible tiles by one. This only applies to interactive blocks and will allow for rotation.
* @function backByOne
* @memberof twoImageTiles
*/
function backByOne() {
vm.currentImageIdx = vm.currentImageIdx - 1 >= 0 ? vm.currentImageIdx - 1 : vm.data['mhs:parts'].length - 1;
}
};
})();