Custom scrollbar in the sidebar

This commit is contained in:
Mattias Erming 2014-09-19 16:12:17 -07:00
parent bcdf51beb9
commit e9a8f86819
6 changed files with 451 additions and 28 deletions

View File

@ -124,7 +124,7 @@ button {
margin: 6px -12px 0 12px; margin: 6px -12px 0 12px;
} }
#sidebar { #sidebar {
bottom: 0; bottom: 64px;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -145,12 +145,12 @@ button {
#sidebar .active { #sidebar .active {
color: #fff; color: #fff;
} }
#sidebar button.active {
color: #fff;
}
#sidebar .networks { #sidebar .networks {
min-height: 100%; min-height: 100%;
padding: 20px 30px 80px; padding: 20px 30px 40px;
}
#sidebar .networks:empty {
padding: 0;
} }
#sidebar .network + .network { #sidebar .network + .network {
margin-top: 30px; margin-top: 30px;
@ -162,8 +162,6 @@ button {
margin-top: 20px; margin-top: 20px;
padding: 20px 40px; padding: 20px 40px;
text-align: center; text-align: center;
position: absolute;
top: 0;
} }
#sidebar .chan { #sidebar .chan {
display: block; display: block;
@ -249,17 +247,26 @@ button {
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
opacity: .7 !important; opacity: .7 !important;
} }
#sidebar .tse-scrollbar {
top: 2px;
right: 3px;
}
#footer { #footer {
height: 70px; background: rgba(0, 0, 0, .06);
line-height: 70px; border-radius: 2px;
margin-top: -70px; bottom: 4px;
height: 60px;
left: 5px;
line-height: 60px;
position: absolute;
text-align: center; text-align: center;
width: 210px;
} }
#footer button { #footer button {
border: 0; border: 0;
} }
#footer button.active { #footer button.active {
background: none; color: #fff;
} }
#footer .icon { #footer .icon {
color: #9ca5b4; color: #9ca5b4;
@ -704,6 +711,57 @@ button {
width: 0; width: 0;
} }
/**
* TrackpadScrollEmulator
* Version: 1.0.6
* Author: Jonathan Nicol @f6design
* https://github.com/jnicol/trackpad-scroll-emulator
*/
.tse-scrollable {
position: relative;
overflow: hidden;
}
.tse-scrollable .tse-scroll-content {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.tse-scrollable .tse-scroll-content::-webkit-scrollbar {
width: 0;
height: 0;
}
.tse-scrollbar {
z-index: 99;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 11px;
}
.tse-scrollbar .drag-handle {
position: absolute;
right: 2px;
border-radius: 2px;
min-height: 10px;
width: 6px;
opacity: 0.1;
transition: opacity 0.2s linear;
background: #000;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
}
.tse-scrollbar:hover .drag-handle {
opacity: 0.25;
transition: opacity 0 linear;
}
.tse-scrollbar .drag-handle.visible {
opacity: 0.2;
}
.scrollbar-width-tester::-webkit-scrollbar {
width: 0;
height: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
margin-top: 60px !important; margin-top: 60px !important;
@ -719,6 +777,10 @@ button {
#sidebar { #sidebar {
left: -220px; left: -220px;
} }
#footer {
left: -215px;
width: 215px;
}
#sidebar .empty:before { #sidebar .empty:before {
margin-top: 0; margin-top: 0;
} }

View File

@ -22,18 +22,20 @@
<div id="wrap"> <div id="wrap">
<div id="viewport"> <div id="viewport">
<aside id="sidebar"> <aside id="sidebar" class="tse-scrollable">
<div class="networks"></div> <div class="tse-content">
<div class="empty"> <div class="networks"></div>
You're not connected to any networks yet. <div class="empty">
You're not connected to any networks yet.
</div>
</div> </div>
<footer id="footer">
<button class="icon sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to Shout"></button>
<button class="icon connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
<button class="icon settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
<button id="sign-out" class="icon sign-out" data-placement="top" title="Sign out"></button>
</footer>
</aside> </aside>
<footer id="footer">
<button class="icon sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to Shout"></button>
<button class="icon connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
<button class="icon settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
<button id="sign-out" class="icon sign-out" data-placement="top" title="Sign out"></button>
</footer>
<div id="main"> <div id="main">
<div id="windows"> <div id="windows">
<div id="chat"></div> <div id="chat"></div>

10
client/js/libs.min.js vendored

File diff suppressed because one or more lines are too long

357
client/js/libs/jquery/tse.js vendored Normal file
View File

@ -0,0 +1,357 @@
/**
* TrackpadScrollEmulator
* Version: 1.0.6
* Author: Jonathan Nicol @f6design
* https://github.com/jnicol/trackpad-scroll-emulator
*
* The MIT License
*
* Copyright (c) 2012-2014 Jonathan Nicol
*
* 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.
*/
;(function($) {
var pluginName = 'TrackpadScrollEmulator';
function Plugin(element, options) {
var el = element;
var $el = $(element);
var $scrollContentEl;
var $contentEl = $el.find('.tse-content');
var $scrollbarEl;
var $dragHandleEl;
var dragOffset;
var flashTimeout;
var pageJumpMultp = 7/8;
var scrollDirection = 'vert';
var scrollOffsetAttr = 'scrollTop';
var sizeAttr = 'height';
var offsetAttr = 'top';
options = $.extend({}, $.fn[pluginName].defaults, options);
/**
* Initialize plugin
*/
function init() {
if ($el.hasClass('horizontal')){
scrollDirection = 'horiz';
scrollOffsetAttr = 'scrollLeft';
sizeAttr = 'width';
offsetAttr = 'left';
}
$el.prepend('<div class="tse-scrollbar"><div class="drag-handle"></div></div>');
$scrollbarEl = $el.find('.tse-scrollbar');
$dragHandleEl = $el.find('.drag-handle');
if (options.wrapContent) {
$contentEl.wrap('<div class="tse-scroll-content" />');
}
$scrollContentEl = $el.find('.tse-scroll-content');
resizeScrollContent();
if (options.autoHide) {
$el.on('mouseenter', flashScrollbar);
}
$dragHandleEl.on('mousedown', startDrag);
$scrollbarEl.on('mousedown', jumpScroll);
$scrollContentEl.on('scroll', onScrolled);
resizeScrollbar();
$(window).on('resize', function() {
recalculate();
});
if (!options.autoHide) {
showScrollbar();
}
}
/**
* Start scrollbar handle drag
*/
function startDrag(e) {
// Preventing the event's default action stops text being
// selectable during the drag.
e.preventDefault();
var self = $(this);
self.trigger('startDrag');
// Measure how far the user's mouse is from the top of the scrollbar drag handle.
var eventOffset = e.pageY;
if (scrollDirection === 'horiz') {
eventOffset = e.pageX;
}
dragOffset = eventOffset - $dragHandleEl.offset()[offsetAttr];
$(document).on('mousemove', drag);
$(document).on('mouseup', function() {
endDrag.call(self);
});
}
/**
* Drag scrollbar handle
*/
function drag(e) {
e.preventDefault();
// Calculate how far the user's mouse is from the top/left of the scrollbar (minus the dragOffset).
var eventOffset = e.pageY;
if (scrollDirection === 'horiz') {
eventOffset = e.pageX;
}
var dragPos = eventOffset - $scrollbarEl.offset()[offsetAttr] - dragOffset;
// Convert the mouse position into a percentage of the scrollbar height/width.
var dragPerc = dragPos / $scrollbarEl[sizeAttr]();
// Scroll the content by the same percentage.
var scrollPos = dragPerc * $contentEl[sizeAttr]();
$scrollContentEl[scrollOffsetAttr](scrollPos);
}
/**
* End scroll handle drag
*/
function endDrag() {
$(this).trigger('endDrag');
$(document).off('mousemove', drag);
$(document).off('mouseup', endDrag);
}
/**
* Scroll in the same manner as the PAGE UP/DOWN keys
*/
function jumpScroll(e) {
// If the drag handle element was pressed, don't do anything here.
if (e.target === $dragHandleEl[0]) {
return;
}
// The content will scroll by 7/8 of a page.
var jumpAmt = pageJumpMultp * $scrollContentEl[sizeAttr]();
// Calculate where along the scrollbar the user clicked.
var eventOffset = (scrollDirection === 'vert') ? e.originalEvent.layerY : e.originalEvent.layerX;
// Get the position of the top (or left) of the drag handle.
var dragHandleOffset = $dragHandleEl.position()[offsetAttr];
// Determine which direction to scroll.
var scrollPos = (eventOffset < dragHandleOffset) ? $scrollContentEl[scrollOffsetAttr]() - jumpAmt : $scrollContentEl[scrollOffsetAttr]() + jumpAmt;
$scrollContentEl[scrollOffsetAttr](scrollPos);
}
/**
* Scroll callback
*/
function onScrolled(e) {
flashScrollbar();
}
/**
* Resize scrollbar
*/
function resizeScrollbar() {
var contentSize = $contentEl[sizeAttr]();
var scrollOffset = $scrollContentEl[scrollOffsetAttr](); // Either scrollTop() or scrollLeft().
var scrollbarSize = $scrollbarEl[sizeAttr]();
var scrollbarRatio = scrollbarSize / contentSize;
// Calculate new height/position of drag handle.
// Offset of 2px allows for a small top/bottom or left/right margin around handle.
var handleOffset = Math.round(scrollbarRatio * scrollOffset) + 2;
var handleSize = Math.floor(scrollbarRatio * (scrollbarSize - 2)) - 2;
if (scrollbarSize < contentSize) {
if (scrollDirection === 'vert'){
$dragHandleEl.css({'top': handleOffset, 'height': handleSize});
} else {
$dragHandleEl.css({'left': handleOffset, 'width': handleSize});
}
$scrollbarEl.show();
} else {
$scrollbarEl.hide();
}
}
/**
* Flash scrollbar visibility
*/
function flashScrollbar() {
resizeScrollbar();
showScrollbar();
}
/**
* Show scrollbar
*/
function showScrollbar() {
$dragHandleEl.addClass('visible');
if (!options.autoHide) {
return;
}
if(typeof flashTimeout === 'number') {
window.clearTimeout(flashTimeout);
}
flashTimeout = window.setTimeout(function() {
hideScrollbar();
}, 1000);
}
/**
* Hide Scrollbar
*/
function hideScrollbar() {
$dragHandleEl.removeClass('visible');
if(typeof flashTimeout === 'number') {
window.clearTimeout(flashTimeout);
}
}
/**
* Resize content element
*/
function resizeScrollContent() {
if (scrollDirection === 'vert'){
$scrollContentEl.width($el.width()+scrollbarWidth());
$scrollContentEl.height($el.height());
} else {
$scrollContentEl.width($el.width());
$scrollContentEl.height($el.height()+scrollbarWidth());
$contentEl.height($el.height());
}
}
/**
* Calculate scrollbar width
*
* Original function by Jonathan Sharp:
* http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
* Updated to work in Chrome v25.
*/
function scrollbarWidth() {
// Append a temporary scrolling element to the DOM, then measure
// the difference between between its outer and inner elements.
var tempEl = $('<div class="scrollbar-width-tester" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
$('body').append(tempEl);
var width = $(tempEl).innerWidth();
var widthMinusScrollbars = $('div', tempEl).innerWidth();
tempEl.remove();
// On OS X if the scrollbar is set to auto hide it will have zero width. On webkit we can still
// hide it using ::-webkit-scrollbar { width:0; height:0; } but there is no moz equivalent. So we're
// forced to sniff Firefox and return a hard-coded scrollbar width. I know, I know...
if (width === widthMinusScrollbars && navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
return 17;
}
return (width - widthMinusScrollbars);
}
/**
* Recalculate scrollbar
*/
function recalculate() {
resizeScrollContent();
resizeScrollbar();
}
/**
* Get/Set plugin option.
*/
function option (key, val) {
if (val) {
options[key] = val;
} else {
return options[key];
}
}
/**
* Destroy plugin.
*/
function destroy() {
// Restore the element to its original state.
$contentEl.insertBefore($scrollbarEl);
$scrollbarEl.remove();
$scrollContentEl.remove();
$contentEl.css({'height': $el.height()+'px', 'overflow-y': 'scroll'});
hook('onDestroy');
$el.removeData('plugin_' + pluginName);
}
/**
* Plugin callback hook.
*/
function hook(hookName) {
if (options[hookName] !== undefined) {
options[hookName].call(el);
}
}
init();
return {
option: option,
destroy: destroy,
recalculate: recalculate
};
}
$.fn[pluginName] = function(options) {
if (typeof arguments[0] === 'string') {
var methodName = arguments[0];
var args = Array.prototype.slice.call(arguments, 1);
var returnVal;
this.each(function() {
if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
} else {
throw new Error('Method ' + methodName + ' does not exist on jQuery.' + pluginName);
}
});
if (returnVal !== undefined){
return returnVal;
} else {
return this;
}
} else if (typeof options === "object" || !options) {
return this.each(function() {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
}
};
$.fn[pluginName].defaults = {
onInit: function() {},
onDestroy: function() {},
wrapContent: true,
autoHide: true
};
})(jQuery);

View File

@ -28,7 +28,7 @@ $(function() {
"/whois" "/whois"
]; ];
var sidebar = $("#sidebar"); var sidebar = $("#sidebar, #footer");
var chat = $("#chat"); var chat = $("#chat");
try { try {
@ -43,6 +43,8 @@ $(function() {
$("#play").on("click", function() { pop.play(); }); $("#play").on("click", function() { pop.play(); });
$("#footer .icon").tooltip(); $("#footer .icon").tooltip();
$(".tse-scrollable").TrackpadScrollEmulator();
var favico = new Favico({ var favico = new Favico({
animation: "none" animation: "none"
}); });

View File

@ -1,7 +1,7 @@
{ {
"name": "shout", "name": "shout",
"description": "A web IRC client", "description": "A web IRC client",
"version": "0.31.4", "version": "0.31.5",
"author": "Mattias Erming", "author": "Mattias Erming",
"preferGlobal": true, "preferGlobal": true,
"bin": { "bin": {