Browse Source

[fix] rework modal + parse markdown with showdown

master
r0 2 years ago
parent
commit
3b7915d996
  1. 9
      assets/js/programme.js
  2. 3
      assets/js/showdown.min.js
  3. 1
      assets/js/showdown.min.js.map
  4. 0
      assets/programme.json
  5. 5
      index.html
  6. 12
      programme.css

9
programme.js → assets/js/programme.js

@ -73,10 +73,11 @@ function fillTimetables(data) {
if (event['author'] !== '') {
modal.querySelector('span').innerHTML += ' - ' + event['author'];
}
modal.querySelector('p').innerHTML = event['description'];
modal.querySelector('div.description').innerHTML = event['description'];
document.querySelector('div#overlay').classList.remove('hidden');
modal.classList.add('upfront');
modal.scrollTo(0, 0);
});
})();
@ -119,6 +120,9 @@ function preparePage(data) {
}
})
let converter = new showdown.Converter();
cleanedEvent["description"] = converter.makeHtml(cleanedEvent["description"]);
cleanedEvent.place = placeName;
cleanedEvent.description = cleanedEvent.description.replace('\n', '<br>');
@ -148,11 +152,12 @@ function hideModal(ev) {
window.addEventListener("DOMContentLoaded", function(event) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'programme.json', true);
xhr.open('GET', 'assets/programme.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status == 200) {
let converter = new showdown.Converter();
let data = preparePage(xhr.response);
fillTimetables(data);
document.querySelector('h1').innerHTML = "Demandez le programme!";

3
assets/js/showdown.min.js
File diff suppressed because it is too large
View File

1
assets/js/showdown.min.js.map
File diff suppressed because it is too large
View File

0
programme.json → assets/programme.json

5
index.html

@ -20,10 +20,11 @@
<div id="modalContent">
<h1></h1>
<span></span>
<p></p>
<div class="description"></div>
<button>Fermer</button>
</div>
</div>
<script src="programme.js"></script>
<script src="assets/js/showdown.min.js"></script>
<script src="assets/js/programme.js"></script>
</body>
</html>

12
programme.css

@ -161,14 +161,16 @@ div#modal {
z-index: 3;
background-color: #eeeeee;
color: #222222;
height: 100%;
height: 0;
width: 100%;
max-height: 0;
overflow-y: scroll;
transition: all 0.5s ease;
}
div#modal.upfront {
max-height: 50%;
height: 40%;
max-height: 40%;
transition: all 0.5s ease;
}
@ -183,8 +185,8 @@ div#modal span {
margin-bottom: 16px;
}
div#modal p {
margin-top: 0;
div#modal div.description {
margin: 0;
text-align: center;
}
@ -197,7 +199,7 @@ div#modal button {
font-size: 18px;
height: 40px;
width: 120px;
margin: 0 auto;
margin: 16px auto;
cursor: pointer;
}

Loading…
Cancel
Save