client-bs-ss-plugin-1

client-bs-ss-plugin-1.js

// The majority of variables in this script are kept in the global scope for reuse. Except for styling, these elements are relatively universally applicable throughout most SquareSpace themes.

// Hide and count the image blocks. Give each image an easily identifiable unique id.
var els = document.getElementsByClassName('image-block');
var pageCount = 0;
[].forEach.call(els, function (el) {
	pageCount++;
	el.id = 'page-' + pageCount;
	el.style.overflow = 'hidden';
	el.style.display = 'none';
});

// Create and place extra document elements.
var firstPage = document.getElementById('page-' + 1);
var lastPage = document.getElementById('page-' + pageCount);
var currentPage = 'page-1';
var secondPage = 'page-2';
var pagination = document.createElement('div');
pagination.style.height = '100px';
firstPage.style.display = 'block';
lastPage.parentNode.insertBefore(pagination, lastPage.nextSibling);

// Create and place links for each page for single pagination.
singlePageLinks = '<div id="single-pagination" style="float:left;">';
for(var i = 1; i<=pageCount; i++){
	var pageLink='<button class="buttons" style="margin:20px 2px 50px 2px; border:none; outline:none; background:transparent; font-family:futura-pt; font-style:italic; color:#a4a4a4;" type="button" id="page-button-' + i + '">' + i + '</button>';
	singlePageLinks = singlePageLinks + pageLink;
}
singlePageLinks = singlePageLinks + '</div>'

// Create and place links for each page for double pagination.
var doublePageLinks = '<div id="double-pagination" style="float:left;">';
for(var i = 1; i<=pageCount; i++){
	if(i+1 <= pageCount && i%2 == 1){
		var pageLink='<button class="buttons" style="margin:20px 2px 50px 2px; border:none; outline:none; background:transparent; font-family:futura-pt; font-style:italic; color:#a4a4a4;" type="button" id="two-page-button-' + i + '-' + (i+1) +'">' + i + '-' + (i+1) +'</button>';
		doublePageLinks = doublePageLinks + pageLink;
	} else if(i == pageCount){
		var pageLink='<button class="buttons" style="margin:20px 2px 50px 2px; border:none; outline:none; background:transparent; font-family:futura-pt; font-style:italic; color:#a4a4a4;" type="button" id="two-page-button-' + i + '">' + i + '</button>';
		doublePageLinks = doublePageLinks + pageLink;
	}
}
doublePageLinks = doublePageLinks + '</div>';

// Create and place display mode toggle buttons.
var displayModeToggle ='<div style="float:right;"><button type="button" style="text-align:center; padding:8px; width:66px; min-height:46px; max-height:46px; background-color:#989898; border:none; outline:none; margin:10px 5px 50px 5px; color:#fff;" id="single-page"><p style="margin:0 auto 0 auto; width:21px; height:28px; border:1.5px solid #fff;"></p></button><button type="button" id="two-page" style="text-align:center; padding:8px; width:66px; min-height:46px; max-height:46px; background-color:#d8d8d8; border:none; outline:none; margin:10px 5px 50px 5px; color:#fff;"><p style="margin-bottom: 0px; display:inline-block; width:21px; height:28px; border:1.5px solid #fff;"></p><p style="margin-bottom:0px; margin-left:2px; display:inline-block; width:21px; height:28px; border:1.5px solid #fff;"></p></button>';

// Add everything on the page.
pagination.innerHTML = singlePageLinks + doublePageLinks + displayModeToggle;

// Create new styles for both forms of pagination links, then hide two-page pagination on start.
var singlePages = document.getElementById('single-pagination');
var doublePages = document.getElementById('double-pagination');
doublePages.style.display = 'none';

// Add eventListeners and functions to each button for single page pagination.
for(var i=1; i<=pageCount; i++) {
	(function (i) {
		var button = document.getElementById('page-button-' + i);
		
		// Display the correct pages and highlight open page numbers when clicked.
		button.addEventListener('click', function() {
			[].forEach.call(els, function (el) {
				el.style.display = 'none';
			});
			
			var buttons = document.getElementsByClassName('buttons');
			[].forEach.call(buttons, function (button) {
				button.style.color = '#a4a4a4';
			});

			this.style.color = '#404040';
			var page = document.getElementById('page-' + i);
			page.style.display = 'block';
		}, false);
		
		// Add hover states.
		// button.addEventListener('mouseover', function() {
		// 	this.style.color = '#404040';
		// }, false);
	})(i)
}

// Add eventListeners and functions to each button for double page pagination.
for(var i=1; i<=pageCount; i++) {
	if(i+1 <= pageCount && i%2 == 1){
		(function (i) {
			var button = document.getElementById('two-page-button-' + i + '-' + (i+1));
			
			// Display the correct pages and highlight open page numbers when clicked.
			button.addEventListener('click', function() {
				[].forEach.call(els, function (el) {
					el.style.display = 'none';
				});
				
				var buttons = document.getElementsByClassName('buttons');
				[].forEach.call(buttons, function (button) {
					button.style.color = '#a4a4a4';
				});

				this.style.color = '#404040';
				var page = document.getElementById('page-' + i);
				page.style.display = 'inline-block';
				page.style.width = '45%';
				var pageTwo = document.getElementById('page-' + (i+1));
				pageTwo.style.display = 'inline-block';
				pageTwo.style.width = '45%';
			}, false);
			
			// Add hover states.
			// button.addEventListener('mouseover', function() {
			// 	this.style.color = '#404040';
			// }, false);
		})(i)
	}
	// Function requires additional conditionals for last page.
	else if(i==pageCount){
		(function (i) {
			var button = document.getElementById('two-page-button-' + i);
			
			// Add click events and hover states.
			button.addEventListener('click', function() {
				[].forEach.call(els, function (el) {
					el.style.display = 'none';
				});
				
				var buttons = document.getElementsByClassName('buttons');
				[].forEach.call(buttons, function (button) {
					button.style.color = '#a4a4a4';
				});

				this.style.color = '#404040';
				var page = document.getElementById('page-' + i);
				page.style.display = 'block';
			}, false);
			
			// Add hover state.
			// button.addEventListener('mouseover', function() {
			// 	this.style.color = '#404040';
			// }, false);
		})(i)
	}
}

// Create variables for each display mode toggle input.
var singlePagination = document.getElementById('single-page');
var doublePagination = document.getElementById('two-page');

singlePagination.addEventListener('click', function() {
	singlePagination.style.background = '#989898';
	doublePagination.style.background = '#d8d8d8';
	doublePages.style.display = 'none';
	singlePages.style.display = 'inline-block';
	[].forEach.call(els, function (el) {
		if(el.style.display == 'inline-block'){
		 	currentPage = el.id;
		}
		el.style.display = 'none';
		el.style.width = '100%';
	});
	document.getElementById(currentPage).style.width = '100%';
	document.getElementById(currentPage).style.display = 'block';
}, false);

doublePagination.addEventListener('click', function() {
	doublePagination.style.background = '#989898';
	singlePagination.style.background = '#d8d8d8';
	singlePages.style.display = 'none';
	doublePages.style.display = 'inline-block';
	[].forEach.call(els, function (el) {
		if(el.style.display == 'block' || el.style.display == 'inline-block'){
		 	currentPage = el.id;
		 	el.style.display = 'none';
		 	[].forEach.call(els, function(ele) {
		 		if(ele.style.display == 'inline-block'){
		 			secondPage = ele.id;
		 			ele.style.display = 'none';
		 		} else {
		 			secondPage = el.id;
		 		}
		 	});
		}
		el.style.width = '100%';
	});
	
	if(currentPage == secondPage && currentPage != lastPage.id){
		secondPage = 'page-' + (parseInt(currentPage.split('page-')[1])+1);
	}
	
	document.getElementById(currentPage).style.width = '45%';
	document.getElementById(currentPage).style.display = 'inline-block';
	document.getElementById(secondPage).style.width = '45%';
	document.getElementById(secondPage).style.display = 'inline-block';
}, false);

// Add keyboard interactions.
window.onkeyup = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;
   // User presses right key on keyboard.
   if (key == 39) {
   		// Increment both pages if either is not the last page. Don't display page 2 if page 1 is also the last page.
	    if(currentPage != lastPage.id){
	    	currentPage = 'page-' + (parseInt(currentPage.split('page-')[1])+1);
	    	if(secondPage == lastPage.id){
	    		secondPage = 'page-unique';
	    	} else if(secondPage != 'page-unique'){
				secondPage = 'page-' + (parseInt(secondPage.split('page-')[1])+1);
			}

		}
   // User presses left key on keyboard.    
   } else if (key == 37) {
   		// Decrement both pages.
   		if(currentPage != firstPage.id){
	        currentPage = 'page-' + (parseInt(currentPage.split('page-')[1])-1);
	        if(secondPage != 'page-unique'){
				secondPage = 'page-' + (parseInt(secondPage.split('page-')[1])-1);
			} else if(secondPage == 'page-unique'){
				secondPage = lastPage.id;
			}
		}
   }

	// Hide all pages.
	[].forEach.call(els, function (el) {
		el.style.display = 'none';
	});

    // Check current display mode, then display pages accordingly.
    if(singlePages.style.display != 'none'){
    	document.getElementById(currentPage).style.width = '100%';
		document.getElementById(currentPage).style.display = 'block';

		// Clear styles and highlight the active page.
		var buttons = document.getElementsByClassName('buttons');
		[].forEach.call(buttons, function (button) {
			button.style.color = '#a4a4a4';
		});
		var buttonIdNum = (parseInt(currentPage.split('page-')[1]));
		var button = document.getElementById('page-button-' + buttonIdNum);
		button.style.color = '#404040';
	}

	if(doublePages.style.display != 'none'){
		if (secondPage != 'page-unique'){
			document.getElementById(currentPage).style.width = '45%';
			document.getElementById(currentPage).style.display = 'inline-block';
			document.getElementById(secondPage).style.width = '45%';
			document.getElementById(secondPage).style.display = 'inline-block';

			// Clear styles and highlight the active pages.
			var buttonIdNum = parseInt(currentPage.split('page-')[1]);
			if (buttonIdNum%2 == 1){
				var buttons = document.getElementsByClassName('buttons');
				[].forEach.call(buttons, function (button) {
					button.style.color = '#a4a4a4';
				});
				var button = document.getElementById('two-page-button-' + buttonIdNum + '-' + (buttonIdNum+1));
				button.style.color = '#404040';
			}
		// Additional conditional for page 2.
		} else {
			document.getElementById(currentPage).style.width = '45%';
			document.getElementById(currentPage).style.display = 'inline-block';

			var buttons = document.getElementsByClassName('buttons');
			[].forEach.call(buttons, function (button) {
				button.style.color = '#a4a4a4';
			});
			buttonIdNum = parseInt(lastPage.id.split('page-')[1]);
			var button = document.getElementById('two-page-button-' + buttonIdNum);
				button.style.color = '#404040';
		}
	}
}