Skip to content
Snippets Groups Projects
Commit 635eeeb9 authored by RANWEZ Pierre's avatar RANWEZ Pierre :anchor:
Browse files

:sparkles: feat: popup accordion

parent 2cd21bfd
Branches
Tags
1 merge request!1✨ feat: CSSLSD V2
Hide whitespace changes
Inline Side-by-side
main.js
+ 15
− 5
View file @ 635eeeb9
......@@ -54,7 +54,11 @@ function setAutocompleteParameters() {
* Load the editor and add css
*/
function loadEditor() {
editor = ace.edit("editor");
editor = ace.edit("editor", {
autoScrollEditorIntoView: true,
maxLines: 40,
minLines: 2
});
editor.setTheme("ace/theme/tomorrow_night_blue");
editor.session.setMode("ace/mode/css");
editor.getSession().setUseWorker(false); // Disable syntax checking, not working in chrome extension V3
......@@ -70,7 +74,7 @@ function loadEditor() {
});
setAutocompleteParameters();
editor.getSession().on('change', function () {
updateCss();
updateCss();
});
}
......@@ -154,8 +158,8 @@ $(document).on('input', '#loopList span', function () {
});
});
$(document).on('click', '#doc', function(){
chrome.tabs.create({'url': "/README.html" } );
$(document).on('click', '#doc', function () {
chrome.tabs.create({ 'url': "/README.html" });
});
var allParameters;
......@@ -458,7 +462,7 @@ $('#upload').on('change', function () {
* Function trigger when new message received.
* @param {type, data} message parameters
*/
function onMessage({ type, data }) {
function onMessage({ type, data }) {
console.log('onMessage', type, data);
switch (type) {
case 'updateUi': {
......@@ -500,4 +504,10 @@ $(document).tooltip({
container: 'body',
placement: 'top left',
trigger: 'hover'
});
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
\ No newline at end of file
popup.html
+ 116
− 108
View file @ 635eeeb9
......@@ -24,8 +24,9 @@
<div class="audioI"></div>
</div>
</div>
<details open>
<summary>
<div id="accordion">
<h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-code"
......@@ -44,11 +45,13 @@
<line x1="14" y1="4" x2="10" y2="20"></line>
</svg>
CSSLSD
</summary>
<div id="editor"></div>
</details>
<details open>
<summary>
</h3>
<div>
<div id="editor"></div>
</div>
<h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-variable"
......@@ -68,51 +71,52 @@
<path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
</svg>
PARAMETRES
</summary>
<table>
<thead>
<tr>
<th>
<a title="Glisser-deposer, dupliquer et supprimer la ligne."
>Actions</a
>
</th>
<th>
<a
title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
>Nom</a
>
</th>
<th>
<a
title="0:1 (plage decimale)&#13;#000:#fff (plage hexadecimale)&#13;A;B;C (liste)"
>Type</a
>
</th>
<th>
<a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
>Options</a
>
</th>
<th>
<a
title="cc:1 (control change 1)&#13;note:1 (note 1)&#13;pb (pitch bend)"
>MIDI</a
>
</th>
<th>
<a
title="loud (volume)&#13;low|lomi|mid|mihi|hi (puissance plage de frequence)&#13;onset:E (note de type E)&#13;attack (attaque d'un son)"
>Audio</a
>
</th>
</tr>
</thead>
<tbody id="parameters"></tbody>
</table>
</details>
<details>
<summary>
</h3>
<div>
<table>
<thead>
<tr>
<th>
<a title="Glisser-deposer, dupliquer et supprimer la ligne."
>Actions</a
>
</th>
<th>
<a
title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
>Nom</a
>
</th>
<th>
<a
title="0:1 (plage decimale)&#13;#000:#fff (plage hexadecimale)&#13;A;B;C (liste)"
>Type</a
>
</th>
<th>
<a
title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
>Options</a
>
</th>
<th>
<a
title="cc:1 (control change 1)&#13;note:1 (note 1)&#13;pb (pitch bend)"
>MIDI</a
>
</th>
<th>
<a
title="loud (volume)&#13;low|lomi|mid|mihi|hi (puissance plage de frequence)&#13;onset:E (note de type E)&#13;attack (attaque d'un son)"
>Audio</a
>
</th>
</tr>
</thead>
<tbody id="parameters"></tbody>
</table>
</div>
<h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-repeat"
......@@ -130,22 +134,23 @@
<path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
</svg>
BOUCLES
</summary>
<table width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Temps</th>
<th>Changes</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
<tbody id="loopList"></tbody>
</table>
</details>
<details>
<summary>
</h3>
<div>
<table width="100%">
<thead>
<tr>
<th>Nom</th>
<th>Temps</th>
<th>Changes</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
<tbody id="loopList"></tbody>
</table>
</div>
<h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-text"
......@@ -168,16 +173,43 @@
<line x1="9" y1="17" x2="15" y2="17"></line>
</svg>
CHARGER / TELECHARGER
</summary>
<table>
<tr>
<td>
<input id="upload" type="file" />
<label for="upload">
</h3>
<div>
<table>
<tr>
<td>
<input id="upload" type="file" />
<label for="upload">
<svg
title="Chargez votre fichier .json"
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-upload"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 11 15 14"></polyline>
</svg>
</label>
<span>Charger</span>
</td>
<td>
<svg
title="Chargez votre fichier .json"
title="Telechargez votre fichier .json"
id="download"
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-upload"
class="icon icon-tabler icon-tabler-file-download"
width="24"
height="24"
viewBox="0 0 24 24"
......@@ -193,39 +225,15 @@
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 11 15 14"></polyline>
<polyline points="9 14 12 17 15 14"></polyline>
</svg>
</label>
<span>Charger</span>
</td>
<td>
<svg
title="Telechargez votre fichier .json"
id="download"
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-file-download"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<line x1="12" y1="11" x2="12" y2="17"></line>
<polyline points="9 14 12 17 15 14"></polyline>
</svg>
<span>Telecharger</span>
</td>
</tr>
</table>
</details>
<span>Telecharger</span>
</td>
</tr>
</table>
</div>
</div>
<p style="text-align: center">
&COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
</p>
......
style.css
+ 10
− 6
View file @ 635eeeb9
......@@ -165,7 +165,9 @@ details[open] > *:not(summary) {
transform: var(--details-translate, translateY(-0.5em));
}
}
summary {
h3 {
border-top: rgba(255, 255, 255, 0.3) solid 1px;
padding: 6px;
font-size: 17px;
cursor: pointer;
}
......@@ -199,16 +201,18 @@ tbody > tr {
.icon-tabler-minus {
cursor: pointer;
}
body::-webkit-scrollbar {
width: 6px;
.ace_scrollbar {
right:4px;
}
body::-webkit-scrollbar, .ace_scrollbar::-webkit-scrollbar {
width: 10px;
}
body::-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 {
body::-webkit-scrollbar-thumb, .ace_scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment