LEXEME Query with OOJS !

Wikimedia OOJS/OOUI starter, to prototype create user interface.

by Hugo Lopez

HTML

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- OOjs  -->
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/node_modules/oojs/dist/oojs.js"></script>
<!-- OOUI -->
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui.js"></script>
    <!-- Add the individual oojs-ui files for proper sourcemap support - ->
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-core.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-toolbars.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-widgets.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-windows.js"></script> -->
<!-- OOUI theme: wikimedia-ui -->
<link rel="stylesheet" href="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.css">
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.js"></script>
<!-- OOUI theme: apex -->
<!-- <link rel="stylesheet" href="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-apex.css"> -->
<!-- <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-apex.js"></script> -->

<div id="s2d">_</div>

CSS

/* Demo documentation : https://doc.wikimedia.org/oojs-ui/master/demos/ */
/* Technical documentation : https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui */
#s2d-wikipage,
#s2d-format { display: block; }
#s2d-endpoints { margin-left: 1em; }
#s2d-endpoints label { display: inline-block; margin:auto 1em; }

JavaScript

/* ************************************************************************** */
/* Sparql2data script ******************************************* */
// Description: given a sparql query,a wikipage, a sparql enpoints, a format, will formatt the data on that wikipage.
// Usage: [[Template:Sparql2data]]
// Usage: open [[Template:Sparql2data]] > fill the form > click "Fectch data", review if it looks normal, then click "Update data !"
// Hack pad: https://jsfiddle.net/hugolpz/x4qmcudj/
// Documentations:  https://www.mediawiki.org/wiki/API:Edit#MediaWiki_JS
// Author: Yug
 
/* ********************************************************************** */
/* OOJS / OOUI ********************************************************** */
// Data & options
var formatArray = [
      { data: 'json', label: 'json' },
      { data: 'xml', label: 'xml' },
      { data: 'csv', label: 'csv' },
      { data: 'tsv', label: 'tsv' },
    ].map(o => new OO.ui.MenuOptionWidget({ data: o.data, label: o.label })),
    endpointsArray = [
      { data: 'https://lingualibre.org/sparql', label: 'LinguaLibre'},
      { data: 'https://query.wikidata.org/sparql', label: 'Wikidata'},
    ];

// Elements
var wikipage = new OO.ui.TextInputWidget({
    id: 's2d-wikipage',
    icon: 'specialPages',
    placeholder: 'MediaWiki:*.js',
    value: 'MediaWiki:SandboxData.js',
		label: 'Data hosting page',
  }),
  format = new OO.ui.DropdownWidget( {
    id: 's2d-format',
    icon: 'code',
		label: 'Data format',
		menu: { items: formatArray }
	}),
  endpoints = new OO.ui.RadioSelectInputWidget( { 
    id: 's2d-endpoints',
  	label: 'Radios buttons',
    options: endpointsArray,
} ),
  limit = new OO.ui.CheckboxInputWidget({ id: 's2d-limit', selected: true, }),
  limitLabel = new OO.ui.LabelWidget( { label: 'Limit to 100 (faster)' }),
  queryDisplay = new OO.ui.MultilineTextInputWidget( { 
    id: 's2d-queryDisplay',
		//value: `# Query will appear here.\n\n\n\n\n\n`,
    placeholder: `# SPARQL query...