(function () {
'use strict';
// Paged Three Image Tiles
angular
.module('mohistory')
.component('pagedImageTiles', {
templateUrl: 'app/components/paged-three-image-tiles/paged-three-image-tiles.component.html',
controller: pagedImageTilesCtrl,
controllerAs: 'pagedImageTiles',
bindings: {
data: '<'
}
});
pagedImageTilesCtrl.$inject = [];
/**
* This component can render the mhs:dataClass and mhs:displayClass
* paged-publications-row.
* @memberof mohistory
* @name pagedImageTiles
* @ngdoc component
*/
function pagedImageTilesCtrl() {
var vm = this;
/* ----- Variables ----- */
vm.blocks = {
'paged-publications-row': {
pageSize: 12,
},
};
vm.curBlockConfig = {};
vm.dataToDisplay = [];
vm.curPage = 1;
vm.totalPages = 0;
/* ----- Function Bindings ----- */
vm.$onInit = onInit;
vm.nextPage = nextPage;
vm.prevPage = prevPage;
vm.setPage = setPage;
/* ----- Function Definitions ----- */
/**
* Initiated when component is created. Runs code necessary for block
* configuration.
* @function onInit
* @memberof pagedImageTiles
*/
function onInit() {
vm.curBlockConfig = vm.blocks[vm.data['mhs:displayClass']];
vm.totalPages = Math.ceil(vm.data['mhs:parts'].length / vm.curBlockConfig.pageSize);
}
/**
* Navigate to the next page.
* @function nextPage
* @memberof pagedImageTiles
*/
function nextPage() {
vm.curPage++;
scrollToTop();
}
/**
* Navigate to the previous page.
* @function prevPage
* @memberof pagedImageTiles
*/
function prevPage() {
vm.curPage--;
scrollToTop();
}
/**
* Set the page number
* @function setPage
* @memberof pagedImageTiles
* @param {number} page a number representing the page to navigate to
*/
function setPage(page) {
vm.curPage = page;
scrollToTop();
}
/**
* Use JQuery to animate the scroll back to the top of the page. This is
* used when pages are updated. NOTE: This should be in a directive link
* function, but since it's the only use of DOM manipulation in this
* component I didn't think it was worth converting the component to
* a directive.
* @function scrollToTop
* @memberof pagedImageTiles
*/
function scrollToTop() {
var page = $('html, body');
// Scroll to search bar, if there are facets selected. Allow the user to interrupt scroll event.
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function () {
page.stop();
});
page.animate({
scrollTop: $('h1').first().offset().top - $('#site-navigation').outerHeight() - 10,
}, 3000, function () {
page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
});
}
}
})();