csl-editor-demo-site/test-integration.html at master · citation-style-language/csl-editor-demo-site · 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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Integration Test - Modernized CSL Editor</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			max-width: 1200px;
			margin: 20px auto;
			padding: 20px;
		}
		.test-section {
			background: #f5f5f5;
			padding: 15px;
			margin: 10px 0;
			border-left: 4px solid #007bff;
		}
		.success { color: #28a745; }
		.error { color: #dc3545; }
		.info { color: #17a2b8; }
		h1 {
			color: #333;
		}
		#output {
			background: white;
			padding: 15px;
			border: 1px solid #ddd;
			min-height: 300px;
		}
	</style>
</head>
<body>
	<h1>Demo Site Integration Test</h1>
	<p>Testing the modernized CSL Editor library with RequireJS compatibility shim.</p>

	<div class="test-section">
		<h2>Test Output</h2>
		<div id="output">
			<p>Loading RequireJS and initializing...</p>
		</div>
	</div>

	<!-- Load RequireJS + jQuery -->
	<script type="text/javascript" src="cslEditorLib/external/require-jquery.js"></script>
	<script>
		var output = document.getElementById('output');

		function log(message, type) {
			var p = document.createElement('p');
			p.className = type || 'info';
			p.textContent = message;
			output.appendChild(p);
		}

		// Configure RequireJS
		require.config({
			baseUrl: "cslEditorLib",
			urlArgs: "bust=" + Date.now()
		});

		// Load config, then test the cslStyles shim
		requirejs(['src/config'], function(config) {
			log('✓ RequireJS config loaded', 'success');

			// Now load the cslStyles module (which should use the shim)
			require(['src/cslStyles'], function(cslStyles) {
				log('✓ cslStyles module loaded', 'success');

				// Wait for initialization
				if (cslStyles.ready) {
					log('Waiting for library initialization...', 'info');

					cslStyles.ready.then(function() {
						log('✓ Modern library initialized!', 'success');

						// Test basic functionality
						try {
							// Test 1: Get all style IDs
							var allIds = cslStyles.getAllStyleIds();
							log('Total styles: ' + allIds.length, 'info');

							// Test 2: Search
							var apaResults = cslStyles.searchByTitle('APA');
							log('Found ' + apaResults.length + ' styles matching "APA"', 'info');

							// Test 3: Get master ID
							var masterId = cslStyles.getMasterIdFromId('http://www.zotero.org/styles/2d-materials');
							log('2D Materials master: ' + masterId, 'info');

							// Test 4: Get style title
							var title = cslStyles.getStyleTitle('http://www.zotero.org/styles/apa');
							log('APA title: ' + title, 'info');

							// Test 5: Load style XML (async)
							log('Loading APA style XML...', 'info');
							cslStyles.loadStyleXml('http://www.zotero.org/styles/apa', function(xml) {
								log('✓ Loaded APA XML (' + xml.length + ' chars)', 'success');
								log('', '');
								log('=== ALL TESTS PASSED ===', 'success');
								log('The modernized library works with RequireJS!', 'success');
							});

						} catch (err) {
							log('✗ Error: ' + err.message, 'error');
							console.error(err);
						}
					}).catch(function(err) {
						log('✗ Initialization failed: ' + err.message, 'error');
						console.error(err);
					});
				} else {
					log('✗ No ready promise found', 'error');
				}
			});
		});
	</script>
</body>
</html>