feat(ui): adding copy buttons

This commit is contained in:
Samuel Berthe 2019-10-26 16:41:11 +02:00
parent 3040fe56d5
commit 0139c3728f
6 changed files with 67 additions and 6 deletions

View file

@ -10,7 +10,19 @@ Rules are here: `_data/rules.yml`.
```
gem install bundler
bundle install
bundle exec jekyll serve
jekyll serve
```
Or with Docker:
```
docker run --rm -it -p 4000:4000 -v $(pwd):/srv/jekyll jekyll/jekyll jekyll serve
```
Or with Docker-Compose:
```
docker-compose up -d
```
## Guidelines

View file

@ -18,7 +18,12 @@
<meta name="theme-color" content="#157878">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/app.css?v=' | append: site.github.build_revision | relative_url }}">
<link rel="icon" type="image/png" href="/assets/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="{{ '/assets/js/app.js?v=' | append: site.github.build_revision | relative_url }}"></script>
</head>
<body>
<style>

11
assets/css/app.css Normal file
View file

@ -0,0 +1,11 @@
.clipboard-single,
.clipboard-multiple {
float: right;
cursor: pointer;
font-size: 14px;
color: #606c71;
}
details summary {
cursor: pointer;
}

16
assets/js/app.js Normal file
View file

@ -0,0 +1,16 @@
$(function () {
var clipboardRules = new ClipboardJS('.clipboard-single', {
text: function (trigger) {
const id = trigger.getAttribute('data-clipboard-target-id');
const html = $("#" + id + " .highlight");
return html.text();
},
});
var clipboardCategories = new ClipboardJS('.clipboard-multiple', {
text: function (trigger) {
const id = trigger.getAttribute('data-clipboard-target-id');
const html = $("[id^=" + id + "] .highlight");
return html.append("\n\n").text();
},
});
});

11
docker-compose.yml Normal file
View file

@ -0,0 +1,11 @@
version: '3'
services:
jekyll:
image: jekyll/jekyll:latest
command: jekyll serve
volumes:
- ./:/srv/jekyll
ports:
- 4000:4000

View file

@ -41,6 +41,7 @@ groups:
{% for service in site.data.rules.services %}
{% assign serviceIndex = forloop.index %}
{% for exporter in service.exporters %}
{% assign nbrRules = exporter.rules | size %}
<li>
<h2 id="{{ service.name | replace: " ", "-" | downcase }}">
{{ serviceIndex }}.
@ -55,9 +56,12 @@ groups:
{{ exporter.name }}
{% endif %}
{% endif %}
{% if nbrRules > 0 %}
<span class="clipboard-multiple" data-clipboard-target-id="service-{{ serviceIndex }}">[copy all]</span>
{% endif %}
</h2>
{% assign nbrRules = exporter.rules | size %}
{% if nbrRules == 0 %}
{% highlight javascript %}
// @TODO
@ -71,11 +75,13 @@ groups:
<h4>
{{ serviceIndex }}.{{ ruleIndex }}.
{{ rule.name }}
</h4>
<details {% if true || (serviceIndex == 1 && ruleIndex == 1) %} open {% endif %}>
<summary>{{ rule.description }}</summary>
</h4>
<details id="service-{{ serviceIndex }}-rule-{{ ruleIndex }}" {% if true || (serviceIndex == 1 && ruleIndex == 1) %} open {% endif %}>
<summary>
{{ rule.description }}
<span class="clipboard-single" data-clipboard-target-id="service-{{ serviceIndex }}-rule-{{ ruleIndex }}" onclick="event.preventDefault();">[copy]</span>
</summary>
<p>
{% assign ruleName = rule.name | split: ' ' %}
{% capture ruleNameCamelcase %}{% for word in ruleName %}{{ word | capitalize }} {% endfor %}{% endcapture %}