schema-elements/example-fetch.html at main · jamesaduncan/schema-elements · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microdata Fetch Example</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; max-width: 800px; }
        .example { border: 1px solid #ddd; padding: 15px; margin: 20px 0; background: #f9f9f9; }
        .result { background: #e9f5e9; padding: 10px; margin: 10px 0; border-radius: 4px; }
        .error { background: #f5e9e9; padding: 10px; margin: 10px 0; border-radius: 4px; }
        code { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; }
        pre { background: #f0f0f0; padding: 10px; border-radius: 4px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>Microdata Fetch Example</h1>

    <p>This example demonstrates the <code>fetch()</code> method on microdata items.</p>

    <div class="example">
        <h2>Authoritative Items</h2>
        <p>Items with an <code>id</code> attribute are authoritative. Calling <code>fetch()</code> returns the element itself.</p>

        <div id="local-person" itemscope itemtype="https://schema.org/Person">
            <h3 itemprop="name">John Doe</h3>
            <p>Email: <span itemprop="email">john@example.com</span></p>
            <p>Job Title: <span itemprop="jobTitle">Software Developer</span></p>
        </div>

        <button onclick="fetchAuthoritative()">Fetch Authoritative Item</button>
        <div id="auth-result"></div>
    </div>

    <div class="example">
        <h2>Non-Authoritative Items</h2>
        <p>Items without an <code>id</code> but with an <code>itemid</code> can fetch remote data.</p>

        <!-- Reference to remote data -->
        <meta itemscope itemtype="https://schema.org/Person" itemid="./test-fetch-data.html#remote-person">

        <button onclick="fetchRemote()">Fetch Remote Item</button>
        <div id="remote-result"></div>
    </div>

    <div class="example">
        <h2>Error Cases</h2>

        <!-- Missing itemid -->
        <meta itemscope itemtype="https://schema.org/Organization">

        <!-- Invalid URL -->
        <meta itemscope itemtype="https://schema.org/Product" itemid="not-a-url">

        <button onclick="testErrors()">Test Error Cases</button>
        <div id="error-result"></div>
    </div>

    <script type="module" src="./index.mjs"></script>
    <script type="module">
        import { Microdata } from './index.mjs';

        // Make functions available globally
        window.fetchAuthoritative = async function() {
            const resultDiv = document.getElementById('auth-result');
            try {
                const person = document.microdata['local-person'];
                const element = await person.fetch();

                resultDiv.innerHTML = `
                    <div class="result">
                        <strong>Success!</strong><br>
                        Fetched element ID: ${element.id}<br>
                        Same as original: ${element === document.getElementById('local-person')}<br>
                        Name from fetched element: ${element.microdata.name}
                    </div>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
            }
        };

        window.fetchRemote = async function() {
            const resultDiv = document.getElementById('remote-result');
            try {
                // Get the meta element with itemid
                const metaElement = document.querySelector('meta[itemid]');
                const item = metaElement.microdata;

                resultDiv.innerHTML = '<div class="result">Fetching remote data...</div>';

                const element = await item.fetch();

                resultDiv.innerHTML = `
                    <div class="result">
                        <strong>Success!</strong><br>
                        Fetched from: ${metaElement.getAttribute('itemid')}<br>
                        Remote person name: ${element.microdata.name}<br>
                        Remote person email: ${element.microdata.email}<br>
                        Remote person job: ${element.microdata.jobTitle}
                    </div>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
            }
        };

        window.testErrors = async function() {
            const resultDiv = document.getElementById('error-result');
            let errors = [];

            // Test missing itemid
            try {
                const org = document.microdata[1]; // The Organization meta
                await org.fetch();
            } catch (error) {
                errors.push(`Missing itemid: ${error.message}`);
            }

            // Test invalid URL
            try {
                const product = document.microdata[2]; // The Product meta
                await product.fetch();
            } catch (error) {
                errors.push(`Invalid URL: ${error.message}`);
            }

            resultDiv.innerHTML = `
                <div class="error">
                    <strong>Expected errors caught:</strong><br>
                    ${errors.map(e => `• ${e}`).join('<br>')}
                </div>
            `;
        };

        // Wait for microdata to be ready
        document.addEventListener('DOMSchemasLoaded', () => {
            console.log('Microdata ready. You can now test the fetch() functionality.');
        });
    </script>

    <div class="example">
        <h2>Code Example</h2>
        <pre><code>// Authoritative item (has id)
const person = document.microdata.person;
const element = await person.fetch();
// Returns the same element

// Non-authoritative item (has itemid)
const meta = document.querySelector('meta[itemid]');
const remote = await meta.microdata.fetch();
// Fetches remote document and returns referenced element
console.log(remote.microdata.name);</code></pre>
    </div>
</body>
</html>