|
|
@@ -4,41 +4,147 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<link type="text/css" rel="stylesheet" href="css/material-icons.css" />
|
|
|
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
|
|
|
+ <link type="text/css" rel="stylesheet" href="css/style.min.css" media="screen,projection"/>
|
|
|
<link rel="stylesheet" type="text/css" href="css/google-code-prettify/desert.css">
|
|
|
<title>Titre</title>
|
|
|
</head>
|
|
|
- <body>
|
|
|
-
|
|
|
- <div data-loop="card">
|
|
|
- <h3 data-val="title"></h3>
|
|
|
- <p data-val="content"></p>
|
|
|
+ <body class="grey lighten-4">
|
|
|
+ <!-- Navbar -->
|
|
|
+ <div id="navbar" class="navbar-fixed hide">
|
|
|
+ <nav>
|
|
|
+ <div class="nav-wrapper">
|
|
|
+ <span class="brand-logo mleft-1">Note de <span data-bind="username"></span></span>
|
|
|
+ <ul class="right hide-on-med-and-down">
|
|
|
+ <li><a href="https://www.electronjs.org" target="_blank">Electron JS</a></li>
|
|
|
+ <li><a href="https://gitlab.univ-artois.fr/arthur_brandao/conf-electron" target="_blank">Git Repository</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- Main content -->
|
|
|
+ <main>
|
|
|
+ <div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col s12 center-align">
|
|
|
+ Bonjour
|
|
|
+ <div class="input-field inline">
|
|
|
+ <input type="text" data-model="username" onblur="saveUserName(this)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row" data-loop="card">
|
|
|
+ <div class="col s12 m6 l4">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-content zoom-in selectable" onclick="selectCard(this)">
|
|
|
+ <span class="hide" data-val="id"></span>
|
|
|
+ <span class="card-title" data-val="title"></span>
|
|
|
+ </div>
|
|
|
+ <div class="card-action">
|
|
|
+ <a href="#">Modifier</a>
|
|
|
+ <a href="#" onclick="deleteCard(this, true)">Supprimer</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- Modal Structure -->
|
|
|
+ <div class="modal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <h4 id="modal-title"></h4>
|
|
|
+ <div id="modal-content"></div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <a href="#!" class="waves-effect waves-green btn-flat">Modifier</a>
|
|
|
+ <span id="modal-delete" class="modal-close waves-effect waves-green btn-flat" onclick="deleteCard(this, false)">Supprimer</span>
|
|
|
+ <span class="modal-close waves-effect waves-green btn-flat">Fermer</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Add button -->
|
|
|
+ <div class="fixed-action-btn">
|
|
|
+ <a id="float-add-btn" class="btn-floating btn-large waves-effect waves-light red hide">
|
|
|
+ <i class="large material-icons">add</i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Discovery -->
|
|
|
+ <div class="tap-target" data-target="float-add-btn">
|
|
|
+ <div class="tap-target-content">
|
|
|
+ <h5>Ajouter une note</h5>
|
|
|
+ <p>Pour ajouter une note il suffit de cliquer sur ce bouton<br>(pour faire disparaitre cette information cliquez sur le bouton)</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Loader -->
|
|
|
+ <div id="page-loader" class="bg-loader grey darken-4">
|
|
|
+ <div class="loader progress">
|
|
|
+ <div class="indeterminate"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../node_modules/marked/marked.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../node_modules/dompurify/dist/purify.min.js"></script>
|
|
|
<script type="text/javascript" src="js/materialize.min.js"></script>
|
|
|
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
|
|
|
<script type="text/javascript" src="js/script.js"></script>
|
|
|
<script type="text/javascript" src="js/binder.js"></script>
|
|
|
- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
- <script type="text/javascript" src="../node_modules/marked/marked.min.js"></script>
|
|
|
- <script type="text/javascript" src="../node_modules/dompurify/dist/purify.min.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
var scope;
|
|
|
+ var modal;
|
|
|
|
|
|
+ //When wep page is ready
|
|
|
$(document).ready(() => {
|
|
|
+ // Load data from server
|
|
|
loadData(true).then((data) => {
|
|
|
- scope = binder({card: data});
|
|
|
- printContent(scope);
|
|
|
+ // Get username
|
|
|
+ const username = getCookie('username');
|
|
|
+ // Set up data and print
|
|
|
+ scope = binder({
|
|
|
+ card: data
|
|
|
+ });
|
|
|
+ scope.username = username ? username : 'Utilisateur';
|
|
|
+ printContent(scope);
|
|
|
+ // Show page
|
|
|
+ setTimeout(() => {
|
|
|
+ pageLoader(false);
|
|
|
+ }, 1000);
|
|
|
});
|
|
|
+
|
|
|
+ // Load floating button
|
|
|
+ const floatingButton = M.FloatingActionButton.init(document.querySelectorAll('.fixed-action-btn'))[0];
|
|
|
+ // Load discovery
|
|
|
+ const discovery = M.TapTarget.init(document.querySelectorAll('.tap-target'), {onClose: () => {
|
|
|
+ document.cookie = "discovery=closed";
|
|
|
+ }})[0];
|
|
|
+ if (!getCookie('discovery')) {
|
|
|
+ discovery.open();
|
|
|
+ }
|
|
|
+ // Load modal
|
|
|
+ modal = M.Modal.init(document.querySelectorAll('.modal'))[0];
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
- * Load all card present by default
|
|
|
+ * Load all card
|
|
|
* @param boolean toArray (optionnal) send result in array and not in object (default: false)
|
|
|
*/
|
|
|
function loadData(toArray) {
|
|
|
toArray = toArray ? toArray : false;
|
|
|
const data = toArray ? [] : {};
|
|
|
return new Promise(resolve => {
|
|
|
+ // Load from local storage
|
|
|
+ if (localStorage.list) {
|
|
|
+ for (element of localStorage.list) {
|
|
|
+ toArray ? data.push(localStorage[element]) : data[element] = localStorage[element];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ localStorage.setItem('list', JSON.stringify([]));
|
|
|
+ }
|
|
|
+ // Load from disk
|
|
|
$.getJSON('data/list.json', (list) => {
|
|
|
const total = list.length;
|
|
|
let count = 0;
|
|
|
@@ -56,14 +162,71 @@
|
|
|
|
|
|
function printContent(scope) {
|
|
|
for(element of scope.card) {
|
|
|
- element.content = element.content.toMarkdown().replace(/code>/g, 'pre>');
|
|
|
+ element.content = element.content.toMarkdown();
|
|
|
}
|
|
|
looper(scope);
|
|
|
- for(preTag of $('pre')) {
|
|
|
- $(preTag).addClass('prettyprint');
|
|
|
- }
|
|
|
PR.prettyPrint();
|
|
|
}
|
|
|
+
|
|
|
+ function saveUserName(input) {
|
|
|
+ if (input.value.trim() === '') {
|
|
|
+ document.cookie = 'username=Utilisateur';
|
|
|
+ } else {
|
|
|
+ document.cookie = `username=${input.value}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function selectCard(card) {
|
|
|
+ const promise = loadData();
|
|
|
+ const idElement = card.querySelector('[data-val=id]');
|
|
|
+ const id = idElement.innerHTML;
|
|
|
+ promise.then(data => {
|
|
|
+ $('#modal-title').html(data[id].title);
|
|
|
+ $('#modal-content').html(data[id].content.toMarkdown())
|
|
|
+ $('#modal-delete').attr('data-id', id);
|
|
|
+ PR.prettyPrint();
|
|
|
+ modal.open();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function deleteCard(span, fromCard) {
|
|
|
+ let card;
|
|
|
+ let id;
|
|
|
+ // Get id and card element to remove
|
|
|
+ if (fromCard) {
|
|
|
+ card = $(span).parents();
|
|
|
+ id = $($(card[1]).children()[0]).children()[0].innerHTML;
|
|
|
+ } else {
|
|
|
+ id = $(span).attr('data-id');
|
|
|
+ idElements = document.querySelectorAll('[data-val=id]');
|
|
|
+ for (idElement of idElements) {
|
|
|
+ if (idElement.innerHTML === id) {
|
|
|
+ card = $(idElement).parents();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // If card in local storage remove
|
|
|
+ if (localStorage[id]) {
|
|
|
+ localStorage.removeItem(id);
|
|
|
+ let list = JSON.parse(localStorage.list);
|
|
|
+ list.removeItem(id);
|
|
|
+ localStorage.setItem('list', JSON.stringify(list));
|
|
|
+ }
|
|
|
+ // Remove card on the DOM
|
|
|
+ card[2].remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ function pageLoader(active) {
|
|
|
+ if (active) {
|
|
|
+ $('#page-loader').removeClass('hide');
|
|
|
+ $('#navbar').addClass('hide');
|
|
|
+ $('#float-add-btn').addClass('hide');
|
|
|
+ } else {
|
|
|
+ $('#float-add-btn').removeClass('hide');
|
|
|
+ $('#navbar').removeClass('hide');
|
|
|
+ $('#page-loader').addClass('hide');
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
Loquicom