Page MenuHomePhabricator

No OneTemporary

diff --git a/js/sidebar.js b/js/sidebar.js
index 7deb603..1332fda 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -1,194 +1,200 @@
/*
* The MIT License
*
* Copyright 2018 César de la Cal Bretschneider <cesar@magic3w.com>.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
depend(['m3/ui/sticky', 'm3/animation/animation', 'm3/hid/gestures/gestures'], function(sticky, transition, Gesture) {
/*
* This function makes it rather fast to create listeners for different things
* on the same element without having to write the same addEventListener over
* and over.
*
* @param {HTMLElement} element
* @param {Object} listeners
* @returns {undefined}
*/
var listener = function (element, listeners) {
for (var i in listeners) {
if (!listeners.hasOwnProperty(i)) { continue; }
element.addEventListener(i, listeners[i], false);
}
};
var sidebar = function(element) {
/*
* Set the sidebar to be the entire height of the document.
*/
var container = element.parentNode;
var position = 0;
var width = 300;
var opacity = .3;
/*
* This variable indicates whether the sidebar is being blocked from being
* displayed. This is useful for any behavior where the
*
* @type Boolean
*/
var blocked = false;
/*
* This flag indicates whether the sidebar should be collapsed. Notice that
* it allows the programmer to use the 'collapsed' class to indicate that
* the sidebar should also be collapsed for wider devices.
*
* @type Boolean
*/
var expanded = false;
var redraw = function (to) {
var from = position;
transition(function (progress) {
position = from + (to - from) * progress;
+ var op = position / width * opacity;
element.style.transform = 'translate(' + (position - width) + 'px, 0px)';
- container.style.background = 'rgba(0, 0, 0, ' + position / width * opacity + ')';
+ container.style.background = 'rgba(0, 0, 0, ' + op + ')';
if (position / width === 0) {
container.style.display = 'none';
}
else {
container.style.display = 'block';
}
}, 300, 'easeInEaseOut');
};
var hide = function () {
expanded = false;
redraw(0);
};
var show = function () {
expanded = true;
redraw(width);
};
var toggle = function () {
expanded? hide() : show();
};
var g = new Gesture(document, 'swipe');
var offset = undefined;
g.init(function (meta) {
if (blocked) { return false; }
offset = position;
});
g.follow(function (meta, stop) {
if (meta.direction === 'h' && meta.startX > 100) {
- var t = 1 + Math.max(0, Math.min(offset + meta.endX - meta.startX, width));
- element.style.transform = 'translate(' + (t - width) + 'px, 0px)';
- container.style.background = 'rgba(0, 0, 0, ' + t / width * opacity + ')';
- container.style.display = 'block';
+
+ window.requestAnimationFrame(function () {
+ var t = 1 + Math.max(0, Math.min(offset + meta.endX - meta.startX, width));
+ var op = t / width * opacity;
+
+ element.style.transform = 'translate(' + (t - width) + 'px, 0px)';
+ container.style.background = 'rgba(0, 0, 0, ' + op + ')';
+ container.style.display = 'block';
+ });
+
stop();
};
});
g.end(function (meta, stop) {
//Horizontal swipe
if (meta.direction !== 'h' || meta.startX < 100) {
return;
}
position = 1 + Math.max(0, Math.min(offset + meta.endX - meta.startX, width));
if (meta.endX - meta.startX > 0) {
//Left to right swipe
show();
}
else {
hide();
}
- console.log('touchend');
/*
* If the swipe was registered, we prevent the browser from
* reacting to it.
*/
stop();
});
/*
* Create listeners that allow the application to react to events happening
* in the browser.
*/
listener(document, {
click: function(e) {
/*
* In case the click event has bubbled to the document and is NOT coming
* from the toggle button, we will simply ignore it.
*/
if (!e.target.classList.contains('toggle-button')) { return; }
toggle();
e.preventDefault();
}
});
/*
* When the container is clicked, the sidebar is hidden from the viewport,
* assuming that the user did wish to see whatever was behind it.
*/
listener(container, {
click: hide
});
/*
* If the sidebar is clicked, it will prevent the event from bubbling, since
* it would cause the parent element (container) to hide the sidebar as a
* result.
*/
listener(element, {
click: function(e) { e.stopPropagation(); }
});
return {
disabled : function () { hide(); blocked = true; },
enable : function () { blocked = false; }
};
};
return sidebar;
});
\ No newline at end of file
diff --git a/ui/sidebar/_sidebar.scss b/ui/sidebar/_sidebar.scss
index ddd4f61..7a1bc07 100644
--- a/ui/sidebar/_sidebar.scss
+++ b/ui/sidebar/_sidebar.scss
@@ -1,108 +1,107 @@
@import '_toggle.scss';
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.sidebar {
overflow: hidden;
position: fixed;
display: block;
height: 100%;
left: 0px;
top : 0;
width: 300px;
max-width: 90%;
transform: translate(-300px, 0);
background: #FFF;
- box-shadow: 0 0 15px rgba(0, 0, 0, .1);
border-right: 1px solid #DDD;
.menu-title {
display: block;
color: #999;
font-size: 1rem;
padding: .8rem 1rem .5rem;
}
.menu-entry {
font-size: .8rem;
color: #666;
display: block;
&:hover {
color: #242424;
background: #F7F7F7;
}
&.active,
&:active {
background-color: #2f97e0;
color: #FFF;
font-weight: bold;
}
a {
padding: .7rem 1rem;
display: block;
width: 100%;
}
img {
vertical-align: middle;
height: 1.2em;
margin-right: .5rem;
}
}
.indented {
padding-left: 10px;
border-left: solid 1px #DDD;
}
.navbar {
box-shadow: none;
}
a {
color: inherit;
text-decoration: none;
&:hover {
color: #333;
}
&:active {
color: #FFF;
}
}
}
.sidebar:hover {
overflow: auto;
}
.contains-sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
z-index: 30;
}
@media all and (max-width: 1160px) {
}
@media all and (min-width: 1160px) {
}

File Metadata

Mime Type
text/x-diff
Expires
Apr 13 2021, 12:15 PM (9 w, 9 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5611
Default Alt Text
(7 KB)

Event Timeline