wdprop/classes.html at master · johnsamuelwrites/wdprop · 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
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WDProp: Property Classes: John Samuel</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="wdprop.js"></script>
    <script type="text/javascript" src="classes.js"></script>
</head>

<body onload="getClasses()">
    <div id="mobile-menu-toggle" onclick="toggleMobileMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="header">
        <div id="logo"><a href="./index.html">WDProp</a>
            <span id="subtitle">Everything about Wikidata properties</span>
        </div>
        <div id="theme-toggle" onclick="toggleTheme()" title="Toggle theme"></div>
    </div>
    <div id="sidebar">
        <div id="sidebarlinks">
            <ul>
                <li><a href="./index.html">📊 Dashboard</a></li>
                <li><a href="./languages.html">🌍 Languages</a></li>
                <li><a href="./datatypes.html">📊 Data types</a></li>
                <li><a href="./properties.html">🔧 Properties</a></li>
                <li><a href="./classes.html">📦 Property Classes</a></li>
                <li><a href="./provenance.html">📜 Provenance</a></li>
                <li><a href="./search.html">🔍 Search</a></li>
                <li><a href="./compare.html">⚖️ Compare</a></li>
                <li><a href="templates/translated.html">💬 Property Discussion</a></li>
                <li><a href="./wikiprojects.html">🚀 Wikiprojects</a></li>
                <li><a href="./wdprop.html">ℹ️ About</a> </li>
            </ul>
        </div>
    </div>
    <div id="content">

        <!-- Hero -->
        <div class="vst-hero">
            <h2 class="vst-hero-title">Property Classes</h2>
            <p class="vst-hero-subtitle">Browse and search all classes that group Wikidata properties</p>
            <div class="vst-search-wrap">
                <span class="vst-search-icon">🔍</span>
                <input id="classes-search" type="text" class="vst-search-field" placeholder="Filter by item ID or class label…" autocomplete="off" />
            </div>
        </div>

        <!-- Modern table (hidden until data arrives) -->
        <div id="classes-modern" style="display:none;">
            <div class="vst-table-wrapper">
                <div class="vst-table-header">
                    <span class="vst-table-count">Showing <span id="classes-count">…</span> classes</span>
                </div>
                <!-- sticky column headers -->
                <div class="vst-col-headers">
                    <div class="vst-col-header vst-col-id">Item</div>
                    <div class="vst-col-header vst-col-label">Class Label</div>
                </div>
                <!-- virtual scroll container -->
                <div id="classes-scroll" class="vst-scroll">
                    <div id="classes-scroll-viewport" class="vst-scroll-viewport">
                        <div id="classes-scroll-container" class="vst-scroll-container"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Original output (hidden; classes.js parses it then hides it) -->
        <div id="propertyClasses" style="display:block;"></div>

        <!-- Query section -->
        <div class="section search-query-section" id="classesQuerySection" style="display:none;">
            <button class="search-query-toggle" onclick="toggleClassesQuery()">
                <span class="search-query-toggle-icon">⚙️</span> Show SPARQL Query
                <span class="search-query-chevron">▼</span>
            </button>
            <div id="propertyClassesQuery" class="search-query-body" style="display:none;"></div>
        </div>

    </div>
    <div id="footer">
        <p id="footertext">Powered by <a href="https://www.wikidata.org/">Wikidata</a> and <a href="https://mediawiki.org/">MediaWiki</a> API</p>
    </div>

    <script>
        function toggleClassesQuery() {
            var body     = document.getElementById('propertyClassesQuery');
            var chevron  = document.querySelector('#classesQuerySection .search-query-chevron');
            var btn      = document.querySelector('#classesQuerySection .search-query-toggle');
            var section  = document.getElementById('classesQuerySection');
            section.style.display = 'block';
            if (body.style.display === 'none') {
                body.style.display  = 'block';
                chevron.textContent = '▲';
                btn.classList.add('open');
            } else {
                body.style.display  = 'none';
                chevron.textContent = '▼';
                btn.classList.remove('open');
            }
        }

        // Reveal query section once data has loaded (classes.js sets display:block on #classes-modern)
        var _origGetClasses = getClasses;
        getClasses = function () {
            _origGetClasses();
            // Show query section after a tick so showQuery() has already run
            setTimeout(function () {
                document.getElementById('classesQuerySection').style.display = 'block';
            }, 200);
        };
    </script>
</body>

</html>