Commit 84a6b639 authored by Yohan Boniface's avatar Yohan Boniface

Explorer: very basic way of linking to a rule line

parent b74b9d49
......@@ -95,11 +95,13 @@ def load_financements(data, output=None, properties=None, namespace=None):
def load_rules(path):
with path.open() as rules_file:
data = rules_file.read()
RAW_RULES[path.stem] = {
id_ = str(path.relative_to(ROOT))
RAW_RULES[id_] = {
'data': data,
'path': str(path.relative_to(ROOT)),
'path': id_,
'name': path.name,
}
return Rule.load(data.splitlines(), path.stem)
return Rule.load(data.splitlines(), id_)
# TODO: move in utils?
......
......@@ -25,6 +25,29 @@
font-family: 'mono';
font-weight: 600;
}
pre code {
display: block;
padding-left: 1em;
font-family: mono;
}
a.line {
display: none;
}
:scope.with-lines a.line {
display: inline-block;
background-color: #ddd;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
:scope.with-lines a:target, :scope.with-lines a:target + code {
font-weight: bold;
background-color: #ccc;
}
:scope.with-lines pre {
display: grid;
grid-template-columns: 2em auto;
}
</style>
<script>
this.raw = opts.content.replace(/Si /g, '<strong>Si </strong>')
......@@ -51,6 +74,12 @@
this.raw = this.raw.replace(new RegExp(`(${schema.label})`, 'g'), replace)
}
}
this.on('mount', () => this.refs.pre.innerHTML = this.raw)
const lines = this.raw.split('\n')
let raw = '', id, hash = window.location.hash.split('#')[1]
for (var i = 0; i < lines.length; i++) {
id = hash.split('~')[0] + '~' + (i+1)
raw += `<a href="#${id}" id="${id}" class=line>${i+1}</a><code>${lines[i]}</code>`
}
this.on('mount', () => this.refs.pre.innerHTML = raw)
</script>
</rule>
<rules>
<div each={ props, name in items }>
<h3>{ name } <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/{ props.path } target=_blank> <i class="icon">edit</i></a></h3>
<rule content={ props.data }></rule>
<ul>
<li each={ props, id in this.rules }><a href="#rules/{ id }" class='{ on: this.opts.id.startsWith(id) }' title={ id }>{ props.name }</a></li>
</ul>
<div if={ this.rule }>
<h3>{ this.rule.path } <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/{ this.rule.path } target=_blank> <i class="icon">edit</i></a></h3>
<rule content={ this.rule.data } class=with-lines></rule>
</div>
<div if={ !this.rule }>
<p>Sélectionner une règle dans le menu.</p>
</div>
<script>
this.items = []
this.rules = []
this.rule = null
this.on('mount', () => this.load())
this.load_data = (data) => {
RULES = data
this.rules = data
if (this.opts.id) this.rule = data[this.opts.id.split('~')[0]]
this.update()
// Force element target after DOM has been rebuilt
// (eg. if we have a ~line in the URL, to highlight it).
window.location.hash = window.location.hash
}
this.load = () => {
if (RULES) return this.load_data(RULES)
fetch('/explore/rules')
.then((response) => response.json())
.then((data) => {
this.items = data
this.update()
})
.then(this.load_data)
}
this.mixin(View)
</script>
<style scoped>
:scope {
/* Prevent huge comments to overflow */
overflow-x: hidden;
:scope.tools {
min-width: 1200px;
grid-template-columns: 1fr 4fr;
}
h3 {
font-variant: small-caps;
}
.on {
font-weight: bold;
}
</style>
</rules>
......
......@@ -19,7 +19,7 @@
<main>
<schema class=full></schema>
<glossary class=full></glossary>
<rules class=full></rules>
<rules class=tools></rules>
<simulate class=tools></simulate>
<tools></tools>
</main>
......@@ -27,12 +27,14 @@
<script>
riot.mount('navbar')
route('/schema', () => riot.mount('schema'))
route('/rules/(.+)', (id) => riot.mount('rules', {id: id}))
route('/rules', () => riot.mount('rules'))
route('/simulate', () => riot.mount('simulate'))
route('/tools', () => riot.mount('tools'))
route('/glossary', () => riot.mount('glossary'))
let SCHEMA
let RULES
fetch('/explore/schema')
.then((response) => response.json())
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment