wikitree-api/examples/getPhotos/javascript.html at main · wikitree/wikitree-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
<head><title>WikiTree API | getPhotos</title></head>
<body>

<!-- Use a GitHub Markdown style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" integrity="sha512-Oy18vBnbSJkXTndr2n6lDMO5NN31UljR8e/ICzVPrGpSud4Gkckb8yUpqhKuUNoE+o9gAb4O/rAxxw1ojyUVzg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../examples.css" />

<!-- We'll use jQuery to make the Ajax calls easier. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Use a JSON formatter to show the raw result -->
<script src="../json-formatter.js"></script>


<article class="markdown-body">
	<h1> getPhotos </h1>

	<p>
		We're going to get the photos attached to a WikiTree profile.
		The "key" for getPhotos is a WikiTree ID (e.g., Clemens-1) or a Page Id (e.g. 7146).
		(See <a href="https://github.com/wikitree/wikitree-api/blob/main/getPhotos.md">getPhotos.md doc page</a>)
		<table>
		<tr><td>Key:</td><td><input type="text" id="key" name="key" value="Clemens-1" size="20"></td></tr>
		<tr><td>resolveRedirect:</td>
			<td>
				<input type="checkbox" name="resolveRedirect" id="resolveRedirect" value="1"> Resolve/Follow redirections
				(e.g. try with Adams-24)
			</td>
		</tr>
		<tr><td>Limit:</td><td><input type="text" id="limit" name="limit" value="10"></td></tr>
		<tr><td>Start:</td><td><input type="text" id="start" name="start" value="0"></td></tr>
		<tr><td>Order:</td>
			<td>
				<select id="order" name="order">
					<option value="PageId">PageId</option>
					<option value="Uploaded">Uploaded</option>
					<option value="Date">Date</option>
					<option value="ImageName">ImageName</option>
				</select>
			</td>
		</tr>

		<tr><td colspan=3>
			<button onClick="getPhotos()">Get Photos</button>
			<button onClick="clearResults()">Clear Results</button>
		</td></tr>
		</table>
	</p>

	<h2>Results</h2>
	<blockquote id="result"></blockquote>

	<h2>JSON Results</h2>
	<blockquote id="json"></blockquote>
</article>


<script>

// When the "Get Photos" button is clicked, we execute this function.
function getPhotos() {
	// The parameters we want are in our input elements.
	var key = $('#key').val();
	var resolveRedirect = $('#resolveRedirect').prop('checked') ? 1 : 0;
	var start = $('#start').val();
	var limit = $('#limit').val();
	var order = $('#order').val();

	// The POST is asynchronous, so we have to wait for it to return before we have any profile data to work with.
	// We pass in the action and parameters we're sending to the API.
	// getPhotos just needs a "key" which can be a WikiTree ID or "Page" Id.
	postToAPI( { 'action': 'getPhotos', 'appId': 'APIExamples', 'key': key, 'limit':limit, 'start':start, 'order':order, 'resolveRedirect': resolveRedirect } )
	.done(function(result) { renderResults(result); })
	.fail(function(error) {
		console.log(error);
		$('#result').html("WikiTree API Error: "+error);
		$('#json').html('');
	});
}

// Generate some formatted HTML to display the Profile information.
function renderResults(result) {
	console.log(result)
	var data = result[0];
	if (data.status) {
		// We had some sort of error.
		$('#result').html('WikiTree API Error:'+data.status);
	}
	else {
		// Put our profile information into some HTML to display.
		// The profile data we've retrieved is in the "profile" element.
		var html = 'WikiTree API Result<br>';
		html += "Retrieved "+data.photos.length+" Photo(s) for: ";
		if (data.page_name) { html += data.page_name; }
		else if (data.page_id) { html += data.page_id; }
		else { html += '?'; }
		html += '...<br>';

		for(var i=0; i < data.photos.length; i++) {
			var p = data.photos[i];
			html += "<a target=\"_new\" href=\"https://www.wikitree.com"+p.URL+"\"><img src=\"https://www.wikitree.com/"+p.URL_75+"\"></a>";
		}

		$('#result').html(html);
		$('#json').html("<pre>"+FormatJSON(result)+"</pre>");
	}
}

// Use jQuery's .ajax method to query the WikiTree API for some content.
function postToAPI(postData) {
	var ajax = $.ajax({
		// The WikiTree API endpoint
		'url': 'https://api.wikitree.com/api.php',

		// We tell the browser to send any cookie credentials we might have (in case we authenticated).
		'xhrFields': { withCredentials: true },

		// Doesn't help. Not required from (dev|apps).wikitree.com and api.wikitree.com disallows cross-origin:*
		//'crossDomain': true,

		// We're POSTing the data so we don't worry about URL size limits and want JSON back.
		type: 'POST',
		dataType: 'json',
		data: postData
	});

	return ajax;
}

function clearResults() {
	$('#result').html('');
	$('#json').html('');
}

</script>
</body>
</html>