diff --git a/background.js b/background.js
index 449614ee467896066f4a75edc2a12c95d539246d..8dc3951709adc03c7e2a6567708868a0d8526b05 100644
--- a/background.js
+++ b/background.js
@@ -40,10 +40,10 @@ let records = {
[]
],
info: [
- {isLoop:false},
- {isLoop:false},
- {isLoop:false},
- {isLoop:false}
+ {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
+ {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
+ {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
+ {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''}
]
};
let all = "";
diff --git a/content.js b/content.js
index 73c718f8161692f388153730d2a87a3b064153fd..23b32f71e1ef2e326ada6399eb9b566faab7e4c5 100644
--- a/content.js
+++ b/content.js
@@ -163,6 +163,16 @@ function midiEvent(type, data) {
});
});
+ for (let index = 0; index < INFOLOOP.length; index++) {
+ const element = INFOLOOP[index];
+ if (element.controllerPlayPause == data.note.number) {
+ loop(index);
+ }
+ else if (element.controllerRecord == data.note.number) {
+ INFOLOOP[index].isRecording = !INFOLOOP[index].isRecording;
+ record(INFOLOOP[index].isRecording, index);
+ }
+ };
if (isRecording) {
const time = Math.floor(performance.now() - recordingTime);
@@ -380,6 +390,7 @@ const record = (status, number) => {
// Start loop
const loop = (number) => {
INFOLOOP[number].isLoop = !INFOLOOP[number].isLoop;
+ chrome.storage.sync.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
isRecording = false;
if (RECORDED[number].length) {
const loopLength = RECORDED[number][RECORDED[number].length - 1].time;
diff --git a/main.js b/main.js
index 2fbb647be6bed472c2885bfadf19e44798f6d24a..7ebf3216c550fe6596161f6408be177e145d10d2 100644
--- a/main.js
+++ b/main.js
@@ -113,10 +113,10 @@ function initUi() {
$('#loopList').text('');
for (let i = 0; i < result.records.loop.length; i++) {
if (result.records.loop[i].length > 0) {
- $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop?pauseIcon:playIcon) + '</button><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
+ $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop ? pauseIcon : playIcon) + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
}
else {
- $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><button id="loopPlay" value="' + i + '">' + playIcon + '</button><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
+ $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + playIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
}
}
});
@@ -141,6 +141,19 @@ function initUi() {
});
});
}
+$(document).on('input', '#loopList span', function () {
+ spans = $('#loopList span');
+ chrome.storage.sync.get(['records'], function (result) {
+ records = result.records;
+ row = 0;
+ for (let i = 0; i < 4; i++) {
+ row = i * 2;
+ records.info[i].controllerPlayPause = spans[row].textContent;
+ records.info[i].controllerRecord = spans[row + 1].textContent;
+ }
+ chrome.storage.sync.set({ 'records': records });
+ });
+});
var allParameters;
document.getElementById("parameters").addEventListener("input", function () {
@@ -272,7 +285,6 @@ function analyseAll() {
}
-
/**
* Save CSS in editor via save button
*/
@@ -287,74 +299,9 @@ function updateCss() {
);
}
-$('#download').on('click', function () {
- const filename = 'data.json';
- chrome.storage.sync.get(['parameters'], function (result) {
- const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
-
- let element = document.createElement('a');
- element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
- element.setAttribute('download', filename);
- element.style.display = 'none';
- document.body.appendChild(element);
- element.click();
- document.body.removeChild(element);
- });
-});
-
-$('#upload').on('change', function () {
- const file = this.files[0];
- const reader = new FileReader();
- reader.onload = function (e) {
- const jsonStr = e.target.result;
- const jsonObj = JSON.parse(jsonStr);
- console.log(jsonObj);
- chrome.storage.sync.set({ css: jsonObj[0] });
- chrome.storage.sync.set({ parameters: jsonObj[1] });
- editor.setValue(jsonObj[0]);
- initUi();
- };
- reader.readAsText(file);
- this.value = "";
-});
-
-
-
-
-/**
- * Function trigger when new message received.
- * @param {type, data} message parameters
- */
-function onMessage({ type, data }) {
- console.log('onMessage', type, data);
- switch (type) {
- case 'updateUi': {
- initUi();
- break;
- }
- case 'midiEvent': {
- if (dataMidi != data) {
- $('#midiEvent').text(data);
- $('#midiEvent').parent().animate({ 'background-color': 'red' }, 'slow');
- $('#midiEvent').parent().animate({ 'background-color': 'transparent' }, 'slow');
- var focusedTd = $('[contenteditable]:focus');
- var focusedCol = $(focusedTd).index('#parameters tr:eq(' + $(focusedTd).parent().index('#parameters tr') + ') td');
- if (focusedTd.length > 0 && focusedCol == 4) {
- focused.text(focused.text() + ' ' + data);
- }
- dataMidi = data;
- }
- break;
- }
- case 'midiDevices': {
- $('#midiDevices').text(data);
- break;
- }
- }
-}
$('#onOff').on('click', function () {
activateButton = !activateButton;
@@ -403,6 +350,25 @@ $('.midiI').on('click', function () {
});
initUi();
});
+$(document).on('click', '.icon-tabler-plus', function () {
+ // Find parent row of the button and duplicate it
+ var row = $(this).parent().parent();
+ var newRow = row.clone();
+ // Add the new row after the original one
+ row.after(newRow);
+ saveParameters();
+});
+$(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
@@ -423,7 +389,6 @@ $(document).on('click', '#record', function () {
});
});
-
$(document).on('click', '#loopPlay', function () {
if ($(this).html().includes('player-play')) {
$(this).html(pauseIcon);
@@ -449,28 +414,75 @@ $(document).on('click', '#loopReset', function () {
);
});
-$(document).on('click', '.icon-tabler-plus', function () {
- // Find parent row of the button and duplicate it
- var row = $(this).parent().parent();
- var newRow = row.clone();
- // Add the new row after the original one
- row.after(newRow);
- saveParameters();
+
+$('#download').on('click', function () {
+ const filename = 'data.json';
+ chrome.storage.sync.get(['parameters'], function (result) {
+ const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
+
+ let element = document.createElement('a');
+ element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
+ element.setAttribute('download', filename);
+
+ element.style.display = 'none';
+ document.body.appendChild(element);
+
+ element.click();
+
+ document.body.removeChild(element);
+ });
});
-$(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>");
- }
+
+$('#upload').on('change', function () {
+ const file = this.files[0];
+ const reader = new FileReader();
+ reader.onload = function (e) {
+ const jsonStr = e.target.result;
+ const jsonObj = JSON.parse(jsonStr);
+ console.log(jsonObj);
+ chrome.storage.sync.set({ css: jsonObj[0] });
+ chrome.storage.sync.set({ parameters: jsonObj[1] });
+ editor.setValue(jsonObj[0]);
+ initUi();
+ };
+ reader.readAsText(file);
+ this.value = "";
});
+/**
+ * Function trigger when new message received.
+ * @param {type, data} message parameters
+ */
+ function onMessage({ type, data }) {
+ console.log('onMessage', type, data);
+ switch (type) {
+ case 'updateUi': {
+ initUi();
+ break;
+ }
+ case 'midiEvent': {
+ if (dataMidi != data) {
+ $('#midiEvent').text(data);
+ $('#midiEvent').parent().animate({ 'background-color': 'red' }, 'slow');
+ $('#midiEvent').parent().animate({ 'background-color': 'transparent' }, 'slow');
+ var focusedTd = $('[contenteditable]:focus');
+ var focusedCol = $(focusedTd).index('#parameters tr:eq(' + $(focusedTd).parent().index('#parameters tr') + ') td');
+ if (focusedTd.length > 0 && focusedCol == 4) {
+ focused.text(focused.text() + ' ' + data);
+ }
+ dataMidi = data;
+ }
+ break;
+ }
+ case 'midiDevices': {
+ $('#midiDevices').text(data);
+ break;
+ }
+ }
+}
+
// Wait messages from content script
chrome.runtime.onMessage.addListener(onMessage);
// Indicate to Background that the popup is ready
diff --git a/popup.html b/popup.html
index c64cd9f012942acb6329f02633ce8cccd0dfc7d4..018d332d22aa533ac9aa8043246491e1a95a2c47 100644
--- a/popup.html
+++ b/popup.html
@@ -71,8 +71,9 @@
<tr>
<th>Nom</th>
<th>Temps</th>
- <th>Nombre d'evenements</th>
+ <th>Changes</th>
<th>Actions</th>
+ <th></th>
</tr>
</thead>
<tbody id="loopList"></tbody>