From 844c06245fcf447d7d9a6ea7269812027375baa6 Mon Sep 17 00:00:00 2001
From: Pierre Ranwez <pierre.ranwez.etu@univ-lille.fr>
Date: Fri, 25 Feb 2022 10:36:31 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20doc:=20add=20code=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main.js | 59 ++++++++++++++++++++++++++++++++++++++++---------------
style.css | 19 +++++++++---------
2 files changed, 53 insertions(+), 25 deletions(-)
diff --git a/main.js b/main.js
index fc4452e..db61915 100644
--- a/main.js
+++ b/main.js
@@ -167,6 +167,9 @@ document.getElementById("parameters").addEventListener("input", function () {
saveParameters();
}, false);
+/**
+ * @description Save the parameters, transform it into JSON and add auto-completion.
+ */
function saveParameters() {
var tbl = $('#parameters tr').get().map(function (row) {
return $(row).find('td').get().map(function (cell) {
@@ -179,6 +182,12 @@ function saveParameters() {
setAutocompleteParameters();
}
+/**
+ * @description This function is called on auto save, it updates the events with the current values of css and parameters.
+ * For each css line, we check if line is connected to a parameter. If it is, we update the event with the current value of the parameter and verify heritage.
+ * If line has no parameter but have CSS LSD template we update the event with the current value of the template.
+ * If line has no parameter and no CSS LSD template we update the event with the current value of the css as type 'pure'.
+ */
function analyseAll() {
var isParameter = false;
chrome.storage.local.get(['parameters', 'css'], function (result) {
@@ -318,7 +327,7 @@ function analyseAll() {
/**
- * Save CSS in editor via save button
+ * @description get CSS and analyse it to create events.
*/
function updateCss() {
let cssStr = editor.getValue();
@@ -327,6 +336,9 @@ function updateCss() {
sendMessage({ type: 'update', data: false });
}
+/**
+ * @description Activate CSS LSD.
+ */
$('#onOff').on('click', function () {
activateButton = !activateButton;
chrome.storage.sync.set({ activate: activateButton }, function () {
@@ -342,9 +354,8 @@ $('#onOff').on('click', function () {
});
/**
- * Activate / Desactivate audio button
+ * @description Activate / desactivate audio button.
*/
-
$('.audioI').on('click', function () {
audioButton = !audioButton;
chrome.storage.sync.set({ audioI: audioButton });
@@ -353,15 +364,18 @@ $('.audioI').on('click', function () {
});
/**
- * Activate / Desactivate midi button
+ * @description Activate / desactivate midi button.
*/
-
$('.midiI').on('click', function () {
midiButton = !midiButton;
chrome.storage.sync.set({ midiI: midiButton });
sendMessage({ type: 'midi', data: midiButton });
initUi();
});
+
+/**
+ * @description Duplicate the current row and save the parameters.
+ */
$(document).on('click', '.icon-tabler-plus', function () {
// Find parent row of the button and duplicate it
var row = $(this).parent().parent();
@@ -370,20 +384,22 @@ $(document).on('click', '.icon-tabler-plus', function () {
row.after(newRow);
saveParameters();
});
+
+/**
+ * @description Remove a row, and save the parameters. If the row is the last one, add a new empty row.
+ */
$(document).on('click', '.icon-tabler-minus', function () {
- // Find parent row of the button and delete it
var row = $(this).parent().parent();
var table = row.parent();
row.remove();
saveParameters();
- // If table has no row left, add a new one
if (table.children().length == 0) {
table.append("<tr><td>" + icon + plus + minus + "</td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td></tr>");
}
});
/**
- * Record loop button
+ * @description Send message to start/stop loop record with ID.
*/
var record = false;
$(document).on('click', '#record', function () {
@@ -397,6 +413,10 @@ $(document).on('click', '#record', function () {
}
sendMessage({ bool: record, number: id });
});
+
+/**
+ * @description Send message to play loop with ID.
+ */
$(document).on('click', '#loopPlay', function () {
if ($(this).html().includes('player-play')) {
$(this).html(pauseIcon);
@@ -409,12 +429,18 @@ $(document).on('click', '#loopPlay', function () {
id = $(this).val();
sendMessage({ type: 'playLoop', data: id });
});
+
+/**
+ * @description Send message to reset loop with ID.
+ */
$(document).on('click', '#loopReset', function () {
id = $(this).val();
sendMessage({ type: 'resetLoop', data: id });
});
-
+/**
+ * @description Get editor and parameters, transform them in JSON and download it.
+ */
$('#download').on('click', function () {
const filename = 'data.json';
chrome.storage.local.get(['parameters'], function (result) {
@@ -429,6 +455,9 @@ $('#download').on('click', function () {
});
});
+/**
+ * @description Load JSON file and update the editor and other parameters
+ */
$('#upload').on('change', function () {
const file = this.files[0];
const reader = new FileReader();
@@ -446,7 +475,7 @@ $('#upload').on('change', function () {
});
/**
- * Send message to the content script.
+ * @description Send message to the content script.
* @param {dict} msg
*/
function sendMessage(msg) {
@@ -457,7 +486,6 @@ function sendMessage(msg) {
);
}
-
/**
* Function trigger when new message received.
* @param {type, data} message parameters
@@ -506,14 +534,13 @@ $(document).tooltip({
trigger: 'hover'
});
$(function () {
- var icons = {
- header: "ui-icon-closed",
- activeHeader: "ui-icon-open"
- };
$("#accordion").accordion({
heightStyle: "content",
collapsible: true,
- icons: icons
+ icons: {
+ header: "ui-icon-closed",
+ activeHeader: "ui-icon-open"
+ }
});
$("#toggle").button().on("click", function () {
if ($("#accordion").accordion("option", "icons")) {
diff --git a/style.css b/style.css
index 65dad82..87cb188 100644
--- a/style.css
+++ b/style.css
@@ -94,7 +94,6 @@ body {
}
}
-
#upload {
width: 0.1px;
height: 0.1px;
@@ -109,13 +108,11 @@ body {
cursor: pointer; /* "hand" cursor */
}
-
.currentColor {
fill: #fff;
color: #fff;
}
-
@keyframes details-show {
from {
opacity: 0;
@@ -124,7 +121,8 @@ body {
}
h3 {
border-top: rgba(255, 255, 255, 0.3) solid 1px;
- padding: 6px;
+ padding: 10px 10px;
+ margin: 0;
font-size: 17px;
cursor: pointer;
}
@@ -158,17 +156,20 @@ tbody > tr {
cursor: pointer;
}
.ace_scrollbar {
- right:4px;
+ right: 4px;
}
-body::-webkit-scrollbar, .ace_scrollbar::-webkit-scrollbar {
+body::-webkit-scrollbar,
+.ace_scrollbar::-webkit-scrollbar {
width: 10px;
}
-body::-webkit-scrollbar-track, .ace_scrollbar::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track,
+.ace_scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
-body::-webkit-scrollbar-thumb, .ace_scrollbar::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb,
+.ace_scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
@@ -225,7 +226,7 @@ a#doc {
float: right;
}
-.ui-icon-open{
+.ui-icon-open {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-x' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' /%3E%3Cline x1='6' y1='6' x2='18' y2='18' /%3E%3C/svg%3E");
filter: invert(1);
float: right;
--
GitLab