updated
This commit is contained in:
148
index.html
148
index.html
@@ -1,6 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="manifest" href="manifest.json">
|
<link rel="manifest" href="manifest.json">
|
||||||
@@ -60,6 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
.link,
|
.link,
|
||||||
a {
|
a {
|
||||||
color: lightblue;
|
color: lightblue;
|
||||||
@@ -67,6 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
|
|
||||||
.supermesh-indicator,
|
.supermesh-indicator,
|
||||||
.no_print {
|
.no_print {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -187,11 +190,12 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: scroll;
|
||||||
line-break: loose;
|
line-break: loose;
|
||||||
/* max-width: 100%; */
|
max-width: 100%;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
/* min-width: 500px; */
|
/* min-width: 500px; */
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
@@ -241,11 +245,13 @@
|
|||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeSCButton {
|
.activeSCButton {
|
||||||
border: 7px dashed beige;
|
border: 7px dashed beige;
|
||||||
color: beige;
|
color: beige;
|
||||||
background: black !important;
|
background: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn1.activeSCButton {
|
.btn1.activeSCButton {
|
||||||
border-color: #ff0000;
|
border-color: #ff0000;
|
||||||
color: #ff0000;
|
color: #ff0000;
|
||||||
@@ -285,6 +291,7 @@
|
|||||||
border-color: #147df5;
|
border-color: #147df5;
|
||||||
color: #147df5;
|
color: #147df5;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
@@ -304,6 +311,7 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#snackbar a {
|
#snackbar a {
|
||||||
color: lightblue;
|
color: lightblue;
|
||||||
}
|
}
|
||||||
@@ -312,20 +320,15 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link
|
<link href="static/toastr.min.css" rel="stylesheet" />
|
||||||
href="static/toastr.min.css"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<!--<link rel="stylesheet" href="static/simplemde.min.css">-->
|
<!--<link rel="stylesheet" href="static/simplemde.min.css">-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<details class="supermesh-indicator">
|
<details class="supermesh-indicator">
|
||||||
<summary>
|
<summary>
|
||||||
<b>SuperMesh</b><br />
|
<b>SuperMesh</b><br />
|
||||||
<br /><small id="peerPID" style="font-family: monospace"
|
<br /><small id="peerPID" style="font-family: monospace">PID ??????????</small>
|
||||||
>PID ??????????</small
|
|
||||||
>
|
|
||||||
</summary>
|
</summary>
|
||||||
<ul id="peerList"></ul>
|
<ul id="peerList"></ul>
|
||||||
<i>Todos los datos están encriptados.</i>
|
<i>Todos los datos están encriptados.</i>
|
||||||
@@ -334,31 +337,21 @@
|
|||||||
<header class="no_print" id="header_hide_query">
|
<header class="no_print" id="header_hide_query">
|
||||||
<details id="LinkAccount_details" open>
|
<details id="LinkAccount_details" open>
|
||||||
<summary>
|
<summary>
|
||||||
<b
|
<b>TeleSec - <span id="groupId">???</span> - (<span id="peerCount">?</span>
|
||||||
>TeleSec - <span id="groupId">???</span> - (<span id="peerCount"
|
nodos)</b>
|
||||||
>?</span
|
|
||||||
>
|
|
||||||
nodos)</b
|
|
||||||
>
|
|
||||||
</summary>
|
</summary>
|
||||||
<fieldset id="auth_fieldSet">
|
<fieldset id="auth_fieldSet">
|
||||||
<legend>Credenciales</legend>
|
<legend>Credenciales</legend>
|
||||||
<br />
|
<br />
|
||||||
<label
|
<label>Codigo de grupo:<br />
|
||||||
>Codigo de grupo:<br />
|
<input type="text" id="LinkAccount_group" /></label>
|
||||||
<input type="text" id="LinkAccount_group"
|
|
||||||
/></label>
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<label
|
<label>Clave secreta:<br />
|
||||||
>Clave secreta:<br />
|
<input type="text" id="LinkAccount_secret" /></label>
|
||||||
<input type="text" id="LinkAccount_secret"
|
|
||||||
/></label>
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
onclick='LinkAccount(document.getElementById("LinkAccount_group").value, document.getElementById("LinkAccount_secret").value, true)'>
|
||||||
onclick='LinkAccount(document.getElementById("LinkAccount_group").value, document.getElementById("LinkAccount_secret").value, true)'
|
|
||||||
>
|
|
||||||
Iniciar sesión
|
Iniciar sesión
|
||||||
</button>
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -400,9 +393,10 @@
|
|||||||
<!--<script src="static/synchronous.js"></script>-->
|
<!--<script src="static/synchronous.js"></script>-->
|
||||||
<!--<script src="static/axe.js"></script>-->
|
<!--<script src="static/axe.js"></script>-->
|
||||||
<script src="static/toastr.min.js"></script>
|
<script src="static/toastr.min.js"></script>
|
||||||
|
<script src="static/doublescroll.js"></script>
|
||||||
<!--<script src="static/simplemde.min.js"></script>-->
|
<!--<script src="static/simplemde.min.js"></script>-->
|
||||||
<script async>
|
<script async>
|
||||||
async function getQuota(cb = () => {}) {
|
async function getQuota(cb = () => { }) {
|
||||||
if (navigator.storage && navigator.storage.estimate) {
|
if (navigator.storage && navigator.storage.estimate) {
|
||||||
const quota = await navigator.storage.estimate();
|
const quota = await navigator.storage.estimate();
|
||||||
// quota.usage -> Number of bytes used.
|
// quota.usage -> Number of bytes used.
|
||||||
@@ -426,8 +420,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// The click event on the pop up notification
|
// The click event on the pop up notification
|
||||||
document.getElementById('reload').addEventListener('click', function(){
|
document.getElementById('reload').addEventListener('click', function () {
|
||||||
setTimeout(() => {removeCache()}, 1000)
|
setTimeout(() => { removeCache() }, 1000)
|
||||||
newWorker.postMessage({ action: 'skipWaiting' });
|
newWorker.postMessage({ action: 'skipWaiting' });
|
||||||
|
|
||||||
});
|
});
|
||||||
@@ -545,6 +539,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script id="app_logic">
|
<script id="app_logic">
|
||||||
|
function tableScroll(query) {
|
||||||
|
$(query).doubleScroll();
|
||||||
|
}
|
||||||
//var secretTokenEl = document.getElementById("secretToken");
|
//var secretTokenEl = document.getElementById("secretToken");
|
||||||
var groupIdEl = document.getElementById("groupId");
|
var groupIdEl = document.getElementById("groupId");
|
||||||
var container = document.getElementById("container");
|
var container = document.getElementById("container");
|
||||||
@@ -705,7 +702,7 @@
|
|||||||
icon,
|
icon,
|
||||||
options,
|
options,
|
||||||
values,
|
values,
|
||||||
change_cb = () => {}
|
change_cb = () => { }
|
||||||
) {
|
) {
|
||||||
var details_0 = document.createElement("details"); // children: img_0, summary_0
|
var details_0 = document.createElement("details"); // children: img_0, summary_0
|
||||||
//details_0.open = true;
|
//details_0.open = true;
|
||||||
@@ -787,7 +784,7 @@
|
|||||||
parent,
|
parent,
|
||||||
options,
|
options,
|
||||||
defaultval,
|
defaultval,
|
||||||
change_cb = () => {}
|
change_cb = () => { }
|
||||||
) {
|
) {
|
||||||
var details_0 = document.createElement("details"); // children: img_0, summary_0
|
var details_0 = document.createElement("details"); // children: img_0, summary_0
|
||||||
//details_0.open = true;
|
//details_0.open = true;
|
||||||
@@ -1467,7 +1464,7 @@
|
|||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<h1>Materiales</h1>
|
<h1>Materiales</h1>
|
||||||
<button id="${btn_new}">Nuevo Material</button>
|
<button id="${btn_new}">Nuevo Material</button>
|
||||||
<table>
|
<table id="scrolltable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Referencia</th>
|
<th>Referencia</th>
|
||||||
@@ -1481,6 +1478,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
`;
|
`;
|
||||||
|
tableScroll("#scrolltable")
|
||||||
var tablebody_EL = document.getElementById(tablebody);
|
var tablebody_EL = document.getElementById(tablebody);
|
||||||
var rows = {};
|
var rows = {};
|
||||||
function render() {
|
function render() {
|
||||||
@@ -1582,12 +1580,9 @@
|
|||||||
var falta = min - act;
|
var falta = min - act;
|
||||||
if (act < min) {
|
if (act < min) {
|
||||||
var new_tr = document.createElement("span");
|
var new_tr = document.createElement("span");
|
||||||
new_tr.innerHTML = `<b>${
|
new_tr.innerHTML = `<b>${data.Nombre || "?"
|
||||||
data.Nombre || "?"
|
}</b><br>Faltan ${falta || "?"} ${data.Unidad || "?"
|
||||||
}</b><br>Faltan ${falta || "?"} ${
|
} <br><i style="font-size: 75%">${data.Ubicacion || "?"
|
||||||
data.Unidad || "?"
|
|
||||||
} <br><i style="font-size: 75%">${
|
|
||||||
data.Ubicacion || "?"
|
|
||||||
}</i>`;
|
}</i>`;
|
||||||
new_tr.className = PAGES["materiales"].navcss;
|
new_tr.className = PAGES["materiales"].navcss;
|
||||||
new_tr.style.display = "inline-block";
|
new_tr.style.display = "inline-block";
|
||||||
@@ -1645,14 +1640,10 @@
|
|||||||
.forEach((data) => {
|
.forEach((data) => {
|
||||||
if (data.Puntos >= 10) {
|
if (data.Puntos >= 10) {
|
||||||
var new_tr = document.createElement("span");
|
var new_tr = document.createElement("span");
|
||||||
new_tr.innerHTML = `<img src="${
|
new_tr.innerHTML = `<img src="${data.Foto || ""
|
||||||
data.Foto || ""
|
}" alt="" height="55" style="float: left; margin-right: 5px;"><b>${data.Nombre || "?"
|
||||||
}" alt="" height="55" style="float: left; margin-right: 5px;"><b>${
|
}</b><br>Tiene ${data.Puntos || "?"
|
||||||
data.Nombre || "?"
|
} puntos <br><i style="font-size: 75%">${data.Region || "?"
|
||||||
}</b><br>Tiene ${
|
|
||||||
data.Puntos || "?"
|
|
||||||
} puntos <br><i style="font-size: 75%">${
|
|
||||||
data.Region || "?"
|
|
||||||
}</i>`;
|
}</i>`;
|
||||||
new_tr.className = PAGES["personas"].navcss;
|
new_tr.className = PAGES["personas"].navcss;
|
||||||
new_tr.style.display = "inline-block";
|
new_tr.style.display = "inline-block";
|
||||||
@@ -1840,7 +1831,7 @@
|
|||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<h1>Personas</h1>
|
<h1>Personas</h1>
|
||||||
<button id="${btn_new}">Nueva Persona</button>
|
<button id="${btn_new}">Nueva Persona</button>
|
||||||
<table>
|
<table id="scrolltable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Nombre</th>
|
<th>Nombre</th>
|
||||||
@@ -1853,6 +1844,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
`;
|
`;
|
||||||
|
tableScroll("#scrolltable") // id="scrolltable"
|
||||||
var tablebody_EL = document.getElementById(tablebody);
|
var tablebody_EL = document.getElementById(tablebody);
|
||||||
var rows = {};
|
var rows = {};
|
||||||
function render() {
|
function render() {
|
||||||
@@ -1874,10 +1866,8 @@
|
|||||||
var btn_comanda = safeuuid();
|
var btn_comanda = safeuuid();
|
||||||
var new_tr = document.createElement("tr");
|
var new_tr = document.createElement("tr");
|
||||||
new_tr.innerHTML = `
|
new_tr.innerHTML = `
|
||||||
<td class="TextBorder" style="background-color: ${
|
<td class="TextBorder" style="background-color: ${data.SC_Anilla
|
||||||
data.SC_Anilla
|
}; text-align: center"><img src="${data.Foto ||
|
||||||
}; text-align: center"><img src="${
|
|
||||||
data.Foto ||
|
|
||||||
"static/ico/user_generic.png"
|
"static/ico/user_generic.png"
|
||||||
}" height="50"> <br> ${data.Nombre || ""}</td>
|
}" height="50"> <br> ${data.Nombre || ""}</td>
|
||||||
<td>${data.Region || "?"}</td>
|
<td>${data.Region || "?"}</td>
|
||||||
@@ -2084,7 +2074,7 @@
|
|||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<h1>SuperCafé</h1>
|
<h1>SuperCafé</h1>
|
||||||
<button id="${btn_new}">Nueva comanda</button>
|
<button id="${btn_new}">Nueva comanda</button>
|
||||||
<table>
|
<table id="scrolltable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Zona</th>
|
<th>Zona</th>
|
||||||
@@ -2099,6 +2089,7 @@
|
|||||||
</table>
|
</table>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
tableScroll("#scrolltable") // id="scrolltable"
|
||||||
var tablebody_EL = document.getElementById(tablebody);
|
var tablebody_EL = document.getElementById(tablebody);
|
||||||
var rows2 = {};
|
var rows2 = {};
|
||||||
function render() {
|
function render() {
|
||||||
@@ -2147,15 +2138,11 @@
|
|||||||
}
|
}
|
||||||
new_tr.innerHTML = `
|
new_tr.innerHTML = `
|
||||||
<td>${persona.Region.toUpperCase() || "?"}</td>
|
<td>${persona.Region.toUpperCase() || "?"}</td>
|
||||||
<td class="TextBorder" style="background-color: ${
|
<td class="TextBorder" style="background-color: ${persona.SC_Anilla
|
||||||
persona.SC_Anilla
|
}; text-align: center; font-size: 17px;"><img src="${persona.Foto ||
|
||||||
}; text-align: center; font-size: 17px;"><img src="${
|
|
||||||
persona.Foto ||
|
|
||||||
"static/ico/user_generic.png"
|
"static/ico/user_generic.png"
|
||||||
}" height="50"><br> ${
|
}" height="50"><br> ${persona.Nombre || ""
|
||||||
persona.Nombre || ""
|
}<br> <span style="font-size: 25px;">${persona.Puntos || "0"
|
||||||
}<br> <span style="font-size: 25px;">${
|
|
||||||
persona.Puntos || "0"
|
|
||||||
} pts.</span></td>
|
} pts.</span></td>
|
||||||
<td style="font-size: 17px;">
|
<td style="font-size: 17px;">
|
||||||
<button id="${btn_Pedido}" class="">Pedido</button>
|
<button id="${btn_Pedido}" class="">Pedido</button>
|
||||||
@@ -2163,8 +2150,7 @@
|
|||||||
<br><button id="${btn_Hecho}" class="">Hecho</button>
|
<br><button id="${btn_Hecho}" class="">Hecho</button>
|
||||||
<br><button id="${btn_Entregado}" class="">Entregado</button>
|
<br><button id="${btn_Entregado}" class="">Entregado</button>
|
||||||
<br><button id="${btn_Pagado}" class="">Pagado</button></td>
|
<br><button id="${btn_Pagado}" class="">Pagado</button></td>
|
||||||
<td><pre style="font-size: 17px;">${
|
<td><pre style="font-size: 17px;">${SC_parse(JSON.parse(data.Comanda)) +
|
||||||
SC_parse(JSON.parse(data.Comanda)) +
|
|
||||||
"<hr>" +
|
"<hr>" +
|
||||||
data.Notas
|
data.Notas
|
||||||
}</pre></td>
|
}</pre></td>
|
||||||
@@ -2347,8 +2333,7 @@
|
|||||||
${Object.entries(SC_Personas)
|
${Object.entries(SC_Personas)
|
||||||
.sort(PERSONAS_Sorter)
|
.sort(PERSONAS_Sorter)
|
||||||
.map((entry) => {
|
.map((entry) => {
|
||||||
return `<option value="${entry[0]}">${
|
return `<option value="${entry[0]}">${entry[1].Nombre || "?"
|
||||||
entry[1].Nombre || "?"
|
|
||||||
}</option>`;
|
}</option>`;
|
||||||
})
|
})
|
||||||
.join("")}
|
.join("")}
|
||||||
@@ -2362,8 +2347,7 @@
|
|||||||
${Object.entries(SC_Personas)
|
${Object.entries(SC_Personas)
|
||||||
.sort(PERSONAS_Sorter)
|
.sort(PERSONAS_Sorter)
|
||||||
.map((entry) => {
|
.map((entry) => {
|
||||||
return `<option value="${entry[0]}">${
|
return `<option value="${entry[0]}">${entry[1].Nombre || "?"
|
||||||
entry[1].Nombre || "?"
|
|
||||||
}</option>`;
|
}</option>`;
|
||||||
})
|
})
|
||||||
.join("")}
|
.join("")}
|
||||||
@@ -2467,7 +2451,7 @@
|
|||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<h1>Notificaciones</h1>
|
<h1>Notificaciones</h1>
|
||||||
<button id="${btn_new}">Nueva notificación</button>
|
<button id="${btn_new}">Nueva notificación</button>
|
||||||
<table>
|
<table id="scrolltable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Fecha</th>
|
<th>Fecha</th>
|
||||||
@@ -2480,6 +2464,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
`;
|
`;
|
||||||
|
tableScroll("#scrolltable") // id="scrolltable"
|
||||||
var tablebody_EL = document.getElementById(tablebody);
|
var tablebody_EL = document.getElementById(tablebody);
|
||||||
var rows = {};
|
var rows = {};
|
||||||
function render() {
|
function render() {
|
||||||
@@ -2502,21 +2487,15 @@
|
|||||||
var persona_destino = SC_Personas[data.Destino];
|
var persona_destino = SC_Personas[data.Destino];
|
||||||
new_tr.innerHTML = `
|
new_tr.innerHTML = `
|
||||||
<td>${data.Fecha || "????-??-??"}</td>
|
<td>${data.Fecha || "????-??-??"}</td>
|
||||||
<td class="TextBorder" style="background-color: ${
|
<td class="TextBorder" style="background-color: ${persona_origen.SC_Anilla
|
||||||
persona_origen.SC_Anilla
|
}; text-align: center"><img src="${persona_origen.Foto ||
|
||||||
}; text-align: center"><img src="${
|
|
||||||
persona_origen.Foto ||
|
|
||||||
"static/ico/user_generic.png"
|
"static/ico/user_generic.png"
|
||||||
}" height="50"><br> ${persona_origen.Nombre || ""}<br> ${
|
}" height="50"><br> ${persona_origen.Nombre || ""}<br> ${persona_origen.Puntos || "?"
|
||||||
persona_origen.Puntos || "?"
|
|
||||||
} punto(s)
|
} punto(s)
|
||||||
</td><td class="TextBorder" style="background-color: ${
|
</td><td class="TextBorder" style="background-color: ${persona_destino.SC_Anilla
|
||||||
persona_destino.SC_Anilla
|
}; text-align: center"><img src="${persona_destino.Foto ||
|
||||||
}; text-align: center"><img src="${
|
|
||||||
persona_destino.Foto ||
|
|
||||||
"static/ico/user_generic.png"
|
"static/ico/user_generic.png"
|
||||||
}" height="50"><br> ${persona_destino.Nombre || ""}<br> ${
|
}" height="50"><br> ${persona_destino.Nombre || ""}<br> ${persona_destino.Puntos || "?"
|
||||||
persona_destino.Puntos || "?"
|
|
||||||
} punto(s)</td>
|
} punto(s)</td>
|
||||||
<td>${data.Asunto || "?"}</td>
|
<td>${data.Asunto || "?"}</td>
|
||||||
`;
|
`;
|
||||||
@@ -2570,5 +2549,6 @@
|
|||||||
});
|
});
|
||||||
open_page(location.hash.replace("#", ""));
|
open_page(location.hash.replace("#", ""));
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
83
static/doublescroll.js
Normal file
83
static/doublescroll.js
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
/*
|
||||||
|
* @name DoubleScroll
|
||||||
|
* @desc displays scroll bar on top and on the bottom of the div
|
||||||
|
* @requires jQuery, jQueryUI
|
||||||
|
*
|
||||||
|
* @author Pawel Suwala - http://suwala.eu/
|
||||||
|
* @version 0.3 (12-03-2014)
|
||||||
|
*
|
||||||
|
* Dual licensed under the MIT and GPL licenses:
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
* http://www.gnu.org/licenses/gpl.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($){
|
||||||
|
$.widget("suwala.doubleScroll", {
|
||||||
|
options: {
|
||||||
|
contentElement: undefined, // Widest element, if not specified first child element will be used
|
||||||
|
topScrollBarMarkup: '<div class="suwala-doubleScroll-scroll-wrapper" style="height: 20px;"><div class="suwala-doubleScroll-scroll" style="height: 20px;"></div></div>',
|
||||||
|
topScrollBarInnerSelector: '.suwala-doubleScroll-scroll',
|
||||||
|
scrollCss: {
|
||||||
|
'overflow-x': 'scroll',
|
||||||
|
'overflow-y':'hidden'
|
||||||
|
},
|
||||||
|
contentCss: {
|
||||||
|
'overflow-x': 'scroll',
|
||||||
|
'overflow-y':'hidden'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_create : function() {
|
||||||
|
var self = this;
|
||||||
|
var contentElement;
|
||||||
|
|
||||||
|
// add div that will act as an upper scroll
|
||||||
|
var topScrollBar = $($(self.options.topScrollBarMarkup));
|
||||||
|
self.element.before(topScrollBar);
|
||||||
|
|
||||||
|
// find the content element (should be the widest one)
|
||||||
|
if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) {
|
||||||
|
contentElement = self.element.find(self.options.contentElement);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
contentElement = self.element.find('>:first-child');
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind upper scroll to bottom scroll
|
||||||
|
topScrollBar.scroll(function(){
|
||||||
|
self.element.scrollLeft(topScrollBar.scrollLeft());
|
||||||
|
});
|
||||||
|
|
||||||
|
// bind bottom scroll to upper scroll
|
||||||
|
self.element.scroll(function(){
|
||||||
|
topScrollBar.scrollLeft(self.element.scrollLeft());
|
||||||
|
});
|
||||||
|
|
||||||
|
// apply css
|
||||||
|
topScrollBar.css(self.options.scrollCss);
|
||||||
|
self.element.css(self.options.contentCss);
|
||||||
|
|
||||||
|
// set the width of the wrappers
|
||||||
|
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth);
|
||||||
|
topScrollBar.width(self.element[0].clientWidth);
|
||||||
|
},
|
||||||
|
refresh: function(){
|
||||||
|
// this should be called if the content of the inner element changed.
|
||||||
|
// i.e. After AJAX data load
|
||||||
|
var self = this;
|
||||||
|
var contentElement;
|
||||||
|
var topScrollBar = self.element.parent().find('.suwala-doubleScroll-scroll-wrapper');
|
||||||
|
|
||||||
|
// find the content element (should be the widest one)
|
||||||
|
if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) {
|
||||||
|
contentElement = self.element.find(self.options.contentElement);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
contentElement = self.element.find('>:first-child');
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the width of the wrappers
|
||||||
|
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth);
|
||||||
|
topScrollBar.width(self.element[0].clientWidth);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
3
sw.js
3
sw.js
@@ -1,4 +1,4 @@
|
|||||||
var cacheName = 'telesec_2025-05-28_2';
|
var cacheName = 'telesec_2025-05-29_1';
|
||||||
|
|
||||||
self.addEventListener('install', event => {
|
self.addEventListener('install', event => {
|
||||||
event.waitUntil(
|
event.waitUntil(
|
||||||
@@ -9,6 +9,7 @@ self.addEventListener('install', event => {
|
|||||||
"index.html",
|
"index.html",
|
||||||
"manifest.json",
|
"manifest.json",
|
||||||
"static/axe.js",
|
"static/axe.js",
|
||||||
|
"static/doublescroll.js",
|
||||||
"static/gun.js",
|
"static/gun.js",
|
||||||
"static/jquery.js",
|
"static/jquery.js",
|
||||||
"static/load.js",
|
"static/load.js",
|
||||||
|
|||||||
Reference in New Issue
Block a user