Move slider with mouse
diff --git a/dev/demo/menu.html b/dev/demo/menu.html
index f6d18ea..c76496d 100644
--- a/dev/demo/menu.html
+++ b/dev/demo/menu.html
@@ -21,7 +21,7 @@
<body>
<div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
- <div id="menu" class="vc"></div>
+ <div id="menu" class="vc" style="padding-top: 80px; padding-left: 80px;"></div>
<main>
<div>
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
index 3313d70..272cbd1 100644
--- a/dev/js/src/menu/slider.js
+++ b/dev/js/src/menu/slider.js
@@ -8,29 +8,18 @@
},
_mousemove : function (e) {
-
- var offset = parseInt(
- (
- (e.clientY - this._event.init)
- / this._rulerHeight
- ) * this._screens
- );
-
- this.offset(offset);
-
+ var relativePos = e.clientY - this._event.init;
+ var currentPos = 0;
+ var diffHeight = (this._rulerHeight - this._sliderHeight);
+ var relativeOffset = ((relativePos + currentPos) / diffHeight);
+ this.offset(parseInt(relativeOffset * this._screens));
e.halt();
- /*
- isTouch?e.touches[0]:e
- ,offset = horizontal?client.clientX - lastClient.clientX:client.clientY - lastClient.clientY
- ,barPos = Math.min(Math.max(orgBarPos + offset,0),dir.viewportSize-dir.barSize)
- ;
- //
- inst.viewport[getScroll(horizontal)] = (barPos/dir.viewportSize)*dir.viewportScrollSize;
- */
+
+ // Support touch!
},
_mouseup : function (e) {
-
+ this._slider.classList.remove('active');
window.removeEventListener('mousemove', this._event.mov);
window.removeEventListener('mouseup', this._event.up);
},
@@ -38,11 +27,14 @@
_mousedown : function (e) {
// Bind drag handler
var ev = this._event;
- ev.init = e.clientY;
+ ev.init = e.clientY - (this._step * this._offset);
ev.mov = this._mousemove.bind(this);
ev.up = this._mouseup.bind(this);
- this._rulerHeight = this._element.clientHeight; // offsetHeight?
+ this._rulerHeight = this._element.clientHeight; // offsetHeight?
+ this._sliderHeight = this._slider.clientHeight; // offsetHeight?
+
+ this._slider.classList.add('active');
window.addEventListener('mousemove', ev.mov);
window.addEventListener('mouseup', ev.up);
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 60f4415..d844d14 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -70,7 +70,7 @@
background-color: transparent;
width: 12px;
height: 100%;
-// opacity: 0;
+ opacity: 0;
> span {
position: absolute;
@@ -81,7 +81,7 @@
cursor: pointer;
z-index: 600;
border-radius: 4px;
- &:hover {
+ &:hover, &.active {
@include choose-hover;
}
}