https://ohiomemory.org/customizations/global/pages/js/set-up-crop-button.js

1/**
2 *  Crop function for item view page. Fetches cropimage.html page with associated cropper.js resources.
3 *  Returns cropped 
4 */	
5(function () {	
6		
7	function openCropWindow(coll, ptr) {
8		var page_url = 'https://ohiomemory.org/digital/custom/cropimage?alias=' + coll + '&ptr=' + ptr;
9		window.open(page_url, "clipWindow", "location=1,status=1,toolbar=1,menubar=1,scrollbars=1,width=1100,height=1000");
10	}
11	
12	function setupCropTool(currentImageElement, collAlias) {
13
14		if (currentImageElement === null) {
15			return false;
16		}
17		// remove all previous instances of the container block for crop button
18		var buttonBlock = document.querySelectorAll('.crop-button');
19		for (var i = 0; i < buttonBlock.length; ++i) {
20			buttonBlock[i].remove();
21		}
22		// get the image collection alias and pointer from the image itself
23		var img_src_str = currentImageElement.getAttribute('src');
24		var img_id = img_src_str.split("/")[6];
25		// set the crop window URL
26		var page_url = 'https://ohiomemory.org/digital/custom/cropimage?alias=' + collAlias + '&ptr=' + img_id;
27		var page_win = "clipWindow";
28		var page_size = "location=1,status=1,toolbar=1,menubar=1,scrollbars=1,width=1100,height=1000";
29		// create crop button
30		var newButton = document.createElement("div");
31		newButton.setAttribute('class', 'btn-group crop-button');
32		var span_str = '<span class="fa fa-crop fa-2x"></span>';
33		var button_str = '<button onclick="window.open(\''+page_url+'\',\''+page_win+'\',\''+page_size+'\');return false;" id="crop" class="cdm-btn btn btn-primary" type="button" role="button" title="Crop" aria-label="Crop" aria-haspopup="true" aria-expanded="false">' + span_str + '</button>';
34		newButton.innerHTML =  button_str;
35
36		var offsetheight = document.getElementsByClassName('btn-toolbar pull-right')[1].offsetHeight;
37		if (offsetheight > 0) {
38			var targetElem = document.getElementsByClassName('btn-toolbar pull-right')[1];
39		} else {
40			var targetElem = document.getElementsByClassName('btn-toolbar pull-right')[0];
41		}
42		// insert the new crop button
43		targetElem.insertBefore(newButton, targetElem.firstElementChild);
44
45	}
46	// when leaving the item view remove previously inserted crop button blocks
47	document.addEventListener('cdm-item-page:leave', function () {
48	    // remove all previous instances of the container block for crop button
49	    var buttonBlock = document.querySelectorAll('.crop-button');
50		for (var i = 0; i < buttonBlock.length; ++i) {
51			buttonBlock[i].remove();
52		}
53	});
54
55	function startEventListener(cdmEvent) {
56		document.addEventListener(cdmEvent, function (e) {
57			//if (e.detail.filename == 'cropimage') {
58				loadScriptsInOrder(['/customizations/global/pages/homepage_resources/jquery.min.js', '/customizations/global/pages/cropimage_resources/cropper.min.js', '/customizations/global/pages/cropimage_resources/cropimage.js'])
59				.then(() => {
60					setupCropTool(document.querySelector('.ItemImage-itemImage img'), e.detail.collectionId);
61				})
62				.catch((error) => { console.error(error); });
63			//}
64		});
65	}
66	
67	var cdmEvents = ['cdm-item-page:ready', 'cdm-item-page:update'];
68	cdmEvents.forEach(startEventListener);
69
70})();