diff --git a/src/kiri/init.js b/src/kiri/init.js
index b0a91bb6..09e83a2c 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -1534,11 +1534,11 @@
}
function sliderUpdate() {
- let start = drag.top / drag.maxval;
- let end = (drag.top + drag.mid - slbar) / drag.maxval;
+ let start = drag.low / drag.maxval;
+ let end = (drag.low + drag.mid - slbar) / drag.maxval;
API.event.emit('slider.pos', { start, end });
- API.var.layer_hi = Math.round((1 - start) * API.var.layer_max);
- API.var.layer_lo = Math.round((1 - end) * API.var.layer_max);
+ API.var.layer_lo = Math.round(start * API.var.layer_max);
+ API.var.layer_hi = Math.round(end * API.var.layer_max);
API.show.layer();
SPACE.scene.active();
}
@@ -1547,13 +1547,14 @@
el.onmousedown = (ev) => {
tracker.style.display = 'block';
ev.stopPropagation();
- drag.height = slider.clientHeight;
- drag.maxval = drag.height - slbar2;
- drag.start = ev.screenY;
- drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop);
- drag.mdat = drag.mid = UI.sliderMid.clientHeight;
- drag.mdmax = drag.height - slbar - drag.hiat;
- drag.himax = drag.height - slbar - drag.mdat;
+ drag.width = slider.clientWidth;
+ drag.maxval = drag.width - slbar2;
+ drag.start = ev.screenX;
+ drag.loat = drag.low = pxToInt(UI.sliderHold.style.marginLeft);
+ drag.mdat = drag.mid = UI.sliderMid.clientWidth;
+ drag.hiat = pxToInt(UI.sliderHold.style.marginRight);
+ drag.mdmax = drag.width - slbar - drag.loat;
+ drag.himax = drag.width - slbar - drag.mdat;
let cancel_drag = tracker.onmouseup = (ev) => {
if (ev) {
ev.stopPropagation();
@@ -1568,33 +1569,39 @@
if (ev.buttons === 0) {
return cancel_drag();
}
- if (delta) delta(ev.screenY - drag.start);
+ if (delta) delta(ev.screenX - drag.start);
};
};
}
- dragit(UI.sliderHi, (delta) => {
+ dragit(UI.sliderLo, (delta) => {
let midval = drag.mdat - delta;
- let topval = drag.hiat + delta;
- if (midval < slbar || topval < 0) {
+ let lowval = drag.loat + delta;
+ if (midval < slbar || lowval < 0) {
return;
}
- UI.sliderHold.style.marginTop = `${topval}px`;
- UI.sliderMid.style.height = `${midval}px`;
- drag.top = topval;
+ UI.sliderHold.style.marginLeft = `${lowval}px`;
+ UI.sliderMid.style.width = `${midval}px`;
+ drag.low = lowval;
drag.mid = midval;
sliderUpdate();
});
dragit(UI.sliderMid, (delta) => {
- let topoff = Math.max(0, Math.min(drag.himax, drag.hiat + delta));
- UI.sliderHold.style.marginTop = `${topoff}px`;
- drag.top = topoff;
+ let loval = drag.loat + delta;
+ let hival = drag.hiat - delta;
+ if (loval < 0 || hival < 0) return;
+ UI.sliderHold.style.marginLeft = `${loval}px`;
+ UI.sliderHold.style.marginRight = `${hival}px`;
+ drag.low = loval;
sliderUpdate();
});
- dragit(UI.sliderLo, (delta) => {
- let midlen = Math.max(slbar, Math.min(drag.mdmax, drag.mdat + delta));
- UI.sliderMid.style.height = `${midlen}px`;
- drag.mid = midlen;
+ dragit(UI.sliderHi, (delta) => {
+ let midval = drag.mdat + delta;
+ let hival = drag.hiat - delta;
+ if (midval < slbar || midval > drag.mdmax || hival < 0) return;
+ UI.sliderMid.style.width = `${midval}px`;
+ UI.sliderHold.style.marginRight = `${hival}px`;
+ drag.mid = midval;
sliderUpdate();
});
@@ -1615,26 +1622,27 @@
};
API.event.on('slider.unlabel', (values) => {
- $('slider-hi-val').style.display = 'none';
- $('slider-lo-val').style.display = 'none';
});
API.event.on('slider.label', (values) => {
- $('slider-hi-val').style.display = 'flex';
- $('slider-lo-val').style.display = 'flex';
- $('slider-hi-val').innerText = API.var.layer_hi;
- $('slider-lo-val').innerText = API.var.layer_lo;
+ let digits = API.var.layer_max.toString().length;
+ $('slider-zero').style.width = `${digits}em`;
+ $('slider-max').style.width = `${digits}em`;
+ $('slider-zero').innerText = API.var.layer_lo;
+ $('slider-max').innerText = API.var.layer_hi;
});
API.event.on('slider.set', (values) => {
- let height = slider.clientHeight;
- let maxval = height - slbar2;
+ let width = slider.clientWidth;
+ let maxval = width - slbar2;
let start = Math.max(0, Math.min(1, values.start));
let end = Math.max(start, Math.min(1, values.end));
- let topval = start * maxval;
+ let lowval = start * maxval;
let midval = ((end - start) * maxval) + slbar;
- UI.sliderHold.style.marginTop = `${topval}px`;
- UI.sliderMid.style.height = `${midval}px`;
+ let hival = maxval - end * maxval;
+ UI.sliderHold.style.marginLeft = `${lowval}px`;
+ UI.sliderMid.style.width = `${midval}px`;
+ UI.sliderHold.style.marginRight = `${hival}px`;
});
// bind language choices
diff --git a/src/kiri/main.js b/src/kiri/main.js
index bc6b418f..9c4a1f6f 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -473,8 +473,8 @@
function updateSlider() {
API.event.emit("slider.set", {
- start: 1 - (API.var.layer_hi / API.var.layer_max),
- end: 1 - (API.var.layer_lo / API.var.layer_max)
+ start: (API.var.layer_lo / API.var.layer_max),
+ end: (API.var.layer_hi / API.var.layer_max)
});
}
@@ -752,13 +752,13 @@
function showSlider() {
UI.layers.style.display = 'flex';
UI.slider.style.display = 'flex';
- UI.setMenu.style.display = 'none';
+ // UI.setMenu.style.display = 'none';
}
function hideSlider(andmenu) {
UI.layers.style.display = 'none';
UI.slider.style.display = 'none';
- UI.setMenu.style.display = andmenu ? 'none' : 'flex';
+ // UI.setMenu.style.display = andmenu ? 'none' : 'flex';
}
/**
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 54774b8a..60b7c349 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -2,7 +2,8 @@
--fg-gray: #495057;
--bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
- --holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
+ --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
+ --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
}
a, a:hover, a:visited {
border: none;
@@ -783,14 +784,19 @@ and (orientation : landscape) {
color: #335;
}
-#slider {
- display: none;
+#layer-slider {
position: absolute;
font-size: smaller;
- top: 15px;
- right: 3px;
- bottom: 15px;
- width: 50px;
+ left: 15px;
+ right: 15px;
+ bottom: 3px;
+ pointer-events: all;
+}
+
+#slider {
+ display: none;
+ height: 30px;
+ z-index: 100;
}
#slider-hi-val, #slider-lo-val {
display: none;
@@ -800,44 +806,45 @@ and (orientation : landscape) {
background-color: rgba(255,255,255,0.5);
border: 1px solid #ddd;
border-radius: 3px;
- right: 110%;
- top: 50%;
+ bottom: 110%;
+ left: 50%;
}
#slider > div {
- flex-direction: column;
+ justify-content: center;
+ flex-direction: row;
align-items: center;
}
#slider-max {
background-color: #ccc;
- border-top-left-radius: 10px;
border-top-right-radius: 10px;
- margin-bottom: 3px;
+ border-bottom-right-radius: 10px;
+ margin-left: 3px;
}
#slider-center {
background-image: var(--holdbar);
}
#slider-zero {
z-index: 10;
- margin-top: 3px;
+ margin-right: 3px;
background-color: #ccc;
+ border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
}
#slider-hold {
background-color: rgba(0,0,0,0.15);
position: absolute;
+ bottom: 0;
right: 0;
- left: 0;
top: 0;
}
#slider-hold .handle {
- width: 100%;
- height: 15px;
+ width: 15px;
+ height: 100%;
border-radius: 3px;
background-color: var(--bg-gray);
}
#slider-mid {
- height: 20px;
+ width: 20px;
}
#alert-area {
@@ -972,7 +979,7 @@ and (orientation : landscape) {
border-radius: 10px;
background-color: #ddd;
padding: 2px 5px 2px 5px;
- margin: 0 2px 0 2px;
+ margin: 0 2px 3px 2px;
}
.var-row {
white-space: nowrap;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 1a5c1a5e..25c9ab2d 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -308,6 +308,20 @@
+