CINXE.COM
Sparnatural data.bnf.fr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Sparnatural data.bnf.fr</title> <meta content="" name="description"> <meta content="" name="keywords"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700|Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet"> <!-- Vendor CSS Files --> <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <!-- Template Main CSS File --> <link href="assets/css/style.css" rel="stylesheet"> <!-- Sparnatural-specific --> <!-- Font Awesome --> <link rel="stylesheet" href="assets/fa/css/all.min.css" /> <!-- YASGUI CSS --> <link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" /> <!-- datepicker --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@chenfengyuan/datepicker@1.0.9/dist/datepicker.min.css"> <!-- Sparnatural CSS --> <link href="sparnatural.css" rel="stylesheet" /> <style> .yasqe .CodeMirror { font-size: 0.8em; } #sparnatural-section { padding-top: 115px; height: auto; overflow: visible; } #sparnatural-container { } #yasqe { display: none; } #yasr-section { } #contact { margin-top:40px; padding: 0px; padding-top: 20px; } </style> <!-- /Sparnatural-specific --> </head> <body> <!-- ======= Header ======= --> <header id="header" class="fixed-top d-flex align-items-center"> <div class="container d-flex justify-content-between align-items-center"> <div id="logo"> <h1><a href="index.html">Sparnatural data.bnf.fr</a></h1> </div> <nav id="navbar" class="navbar"> <ul> <li class="dropdown"><a href="#"><i style="font-size:25px;" class="fad fa-globe-africa"></i> <span>Lang.</span> <i class="bi bi-chevron-down"></i></a> <ul style="width:80%;"> <li><a href="?lang=fr">fr</a></li> <li><a href="?lang=en">en</a></li> </ul> </li> </ul> <i class="bi bi-list mobile-nav-toggle"></i> </nav><!-- .navbar --> </div> </header><!-- End Header --> <!-- ======= Sparnatural Section ======= --> <section id="sparnatural-section"> <div class="container"> <div class="row" style="padding-bottom:10px;"> <div class="col-md-6"> <form> <select class="form-control" style="width:100%; appearance: auto !important;" id="select-examples"> <option value="none" data-i18n="example.placeholder" selected></option> <option value="example.1" data-i18n="example.1.title"></option> <option value="example.2" data-i18n="example.2.title"></option> </select> </form> </div> <div class="col-md-6"> <div style="text-align:right;"> <span style="font-size:90%; font-style: italic;"> <span data-i18n="endpoint.querying"></span> <a id="endpoint" href="../sparql">../sparql</a> </span> </div> </div> </div> <!-- This is where Sparnatural is inserted --> <div class="row"> <div id="sparnatural-container"></div> <input type="hidden" id="query-json"></input> </div> <!-- --> <div class="row"> <div style="font-style: italic; font-size:0.9em; padding-top:0.4em;"> <a href="#" id="sparql-toggle"><i id="sparql-toggle-icon" class="fad fa-eye fa-fw"></i> <span data-i18n="actions.toggle"></span></a> | <a href="#" id="share"><i id="share-icon" class="fad fa-share-square"></i> <span data-i18n="actions.share"></span></a> | <a href="#" id="export"><i id="export-icon" class="fad fa-file-export"></i> <span data-i18n="actions.export"></span></a> </div> </div> </div> </section><!-- End Sparnatural Section --> <!-- ======= YASQE Section ======= --> <section id="yasqe-section"> <div class="container"> <div id="yasqe" style="display:none; " /> </div> </section> <!-- End YASQE Section --> <!-- ======= YASR Section ======= --> <section id="yasr-section"> <div class="container"> <div id="yasr"> </div> </div> </section><!-- End YASR Section --> <!-- ======= Contact Section ======= --> <section id="contact"> <div class="container" data-aos="fade-up"> <div class="row"> <div class="col-lg-2 col-md-2"> <div class="contact-about"> <a href="http://sparna.fr"><img src="assets/img/sparna.png" style="width:100%;" /></a> </div> </div> <div class="col-lg-3 col-md-4"> <div class="social-links"> <a href="mailto:thomas.francart@sparna.fr" ><i class="bi bi-envelope-fill"></i></a> <a href="http://sparna.fr" ><i class="bi bi-building"></i></a> <a href="http://blog.sparna.fr"><i class="bi bi-journal-text"></i></a> <a href="https://github.com/sparna-git/Sparnatural"><i class="bi bi-github"></i></a> </div> </div> </div> </div> </section><!-- End Contact Section --> </main><!-- End #main --> <!-- Modal --> <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="shareModalLabel" data-i18n="share.modal.title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="overflow:hidden;"> <a id="share-link" href="#"></a> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-i18n="share.modal.close"></button> </div> </div> </div> </div> <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="jsonModelLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="jsonModelLabel" data-i18n="export.modal.title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="overflow:hidden;"> <textarea class="form-control" rows="20" id="export-json" style="width:100%" readonly="readonly"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-i18n="export.modal.close"></button> </div> </div> </div> </div> <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-chevron-up"></i></a> <!-- Vendor JS Files --> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Template Main JS File --> <script src="assets/js/demo.js"></script> <script src="assets/js/sampleQueries.js"></script> <!-- Sparnatural-specific --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <!-- datepicker --> <script src="https://cdn.jsdelivr.net/npm/@chenfengyuan/datepicker@1.0.9/dist/datepicker.min.js"></script> <!-- YASGUI stuff --> <script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script> <!-- Sparnatural Javascript --> <script type="text/javascript" src="./sparnatural.js"></script> <script type="text/javascript" src="./sparnatural-yasgui-plugins.js"></script> <!-- Json url (Compression) --> <script src="https://cdn.jsdelivr.net/gh/masotime/json-url@master/dist/browser/json-url.js"></script> <!-- /Sparnatural-specific --> <!-- i18n --> <script src="assets/vendor/jquery.i18n/jquery.i18n.js"></script> <script src="assets/vendor/jquery.i18n/jquery.i18n.messagestore.js"></script> <script src="assets/vendor/jquery.i18n/jquery.i18n.fallbacks.js"></script> <script src="assets/vendor/jquery.i18n/jquery.i18n.language.js"></script> <script src="assets/vendor/jquery.i18n/jquery.i18n.parser.js"></script> <script src="assets/vendor/jquery.i18n/jquery.i18n.emitter.js"></script> <script> $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if(results == null) { return null; } return results[1] || 0; } var lang = ($.urlParam('lang') != null)?$.urlParam('lang'):'fr'; // set the locale $.i18n( { locale: lang } ); $.i18n().load( { 'en': { 'page.title': 'Records In Context + Sparnatural', 'menu.home': 'Sparnatural', 'menu.lang': 'Lang.', 'menu.github': 'Github', 'endpoint.querying': 'Querying', 'actions.toggle': 'Toggle SPARQL editor', 'actions.share': 'Share', 'actions.export': 'Export', 'actions.execute': 'Search', 'share.modal.title': 'Direct query link', 'share.modal.close': 'Close', 'export.modal.title': 'Query as JSON', 'export.modal.close': 'Close', 'example.placeholder': 'Load example query...', 'example.1.title': 'Toutes les 艙uvres cr茅茅es en 1792 ayant 茅t茅 adapt茅es pour la sc猫ne', 'example.2.title': 'Les auteurs d\'艙uvres de 2021, avec leur nom et biographie' }, 'fr': { 'page.title': 'Records In Context + Sparnatural', 'menu.home': 'Sparnatural', 'menu.lang': 'Lang.', 'menu.github': 'Github', 'endpoint.querying': 'Service SPARQL:', 'actions.toggle': 'Afficher/Masquer 茅diteur SPARQL', 'actions.share': 'Partager', 'actions.export': 'Exporter', 'actions.execute': 'Rechercher', 'share.modal.title': 'Lien direct vers la requ锚te', 'share.modal.close': 'Fermer', 'export.modal.title': 'Requ锚te JSON', 'export.modal.close': 'Fermer', 'example.placeholder': 'Charger une requ锚te d\'exemple...', 'example.1.title': 'Toutes les 艙uvres cr茅茅es en 1792 ayant 茅t茅 adapt茅es pour la sc猫ne', 'example.2.title': 'Les auteurs d\'艙uvres de 2021, avec leur nom et biographie' } } ); $('body').i18n(); var sparnatural; $( document ).ready(function($) { $('#endpoint').load( "endpoint.conf" , function() { $('#endpoint').attr("href", $('#endpoint').text()); sparnatural = document.getElementById('sparnatural-container').Sparnatural({ config: "sparnatural-config.ttl", language: lang, maxDepth: 4, addDistinct: true, sendQueryOnFirstClassSelected: false, backgroundBaseColor: '29,224,153', autocomplete : null, list : null, defaultEndpoint : $('#endpoint').text(), onQueryUpdated: function(queryString, queryJson) { queryString = semanticPostProcess(queryString, queryJson); queryString = displayLabelPostProcess(queryString, queryJson); queryString = orderByPostProcess(queryString, queryJson); $('#sparql code').html(queryString.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")); yasqe.setValue(queryString); // yasqe.query(); // save query document.getElementById('query-json').value = JSON.stringify(queryJson); }, // triggered when "play" button is clicked onSubmit: function(form) { // enable loader on button form.sparnatural.enableLoading() ; // trigger the query from YasQE yasqe.query(); } }); const yasqe = new Yasqe(document.getElementById("yasqe"), { requestConfig: { endpoint: $('#endpoint').text(), method: "POST", header: {} }, copyEndpointOnNewTab: false }); Yasr.registerPlugin("LabelledUriTable",SparnaturalYasguiPlugins.TableX); // Yasr.registerPlugin("Timeline",Timeline); delete Yasr.plugins['table']; delete Yasr.plugins['response']; const yasr = new Yasr(document.getElementById("yasr"), { pluginOrder: ["LabelledUriTable", "Timeline"], // disable persistency persistencyExpire: 0, maxPersistentResponseSize: 0 }); // link yasqe and yasr yasqe.on("queryResponse", function(_yasqe, response, duration) { yasr.setResponse(response, duration); sparnatural.disableLoading() ; }); document.getElementById('sparql-toggle').onclick = function() { if(document.getElementById('yasqe').style.display == 'none') { document.getElementById('yasqe').style.display = 'block'; yasqe.setValue(yasqe.getValue()); yasqe.refresh(); document.getElementById('sparql-toggle-icon').className = 'fad fa-eye-slash fa-fw'; } else { document.getElementById('yasqe').style.display = 'none'; document.getElementById('sparql-toggle-icon').className = 'fad fa-eye fa-fw'; } return false; } ; }); // load ?query= param if present var UrlString = window.location.search; var urlParams = new URLSearchParams(UrlString); if (urlParams.has("query") === true) { var compressedJson = urlParams.get("query") ; var compressCodec = JsonUrl('lzma'); compressCodec.decompress(compressedJson).then(json => { sparnatural.loadQuery(JSON.parse(json)) ; }); } }) ; prefixesPostProcess = function(queryString, queryJson) { if(queryString.indexOf("rdf-schema#") == -1) { queryString = queryString.replace("SELECT ", "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \nSELECT "); queryString = queryString.replace("SELECT ", "PREFIX dcterms: <http://purl.org/dc/terms/> \nSELECT "); queryString = queryString.replace("SELECT ", "PREFIX rdarelationships: <http://rdvocab.info/RDARelationshipsWEMI/> \nSELECT "); } return queryString; } displayLabelPostProcess = function(queryString, queryJson) { // queryString = queryString.replace(new RegExp('}$'), " OPTIONAL { ?this dcterms:title ?theLabel } \n}"); return queryString; } orderByPostProcess = function(queryString, queryJson) { // queryString = queryString.replace(new RegExp('}$'), "}\nORDER BY ?label LIMIT 100"); // queryString = queryString.replace("SELECT DISTINCT ?this", "SELECT DISTINCT (STR(?theLabel) AS ?label) ?this"); // queryString = queryString.replace(new RegExp('}$'), "}\nORDER BY ?label LIMIT 1000"); queryString = queryString.replace(new RegExp('}$'), "}\nLIMIT 1000"); return queryString; } semanticPostProcess = function(queryString, queryJson) { queryString = prefixesPostProcess(queryString, queryJson); queryString = sparnatural.expandSparql(queryString); return queryString; } document.getElementById('share').onclick = function() { var compressCodec = JsonUrl('lzma'); compressCodec.compress(document.getElementById('query-json').value).then(result => { var url = window.location.pathname; url += '?query='+result ; $('#share-link').text(url); $('#share-link').attr('href', url); $('#shareModal').modal('show'); }); } document.getElementById('export').onclick = function() { var jsonString = JSON.stringify( JSON.parse(document.getElementById('query-json').value), null, 2 ); $('#export-json').val(jsonString); $('#exportModal').modal('show'); } document.getElementById('select-examples').onclick = function() { var key = $('#select-examples option:selected').val(); if(sampleQueries.hasOwnProperty(key)) { sparnatural.loadQuery(sampleQueries[key]) ; } } </script> </script> </body> </html>