tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #849 from lorenzhs/swipe

Browse source 
better swipe handling and nicklist behaviour on mobile
This commit is contained in:
Lorenz Hübschle-Schneider 2017-06-26 10:34:47 +02:00 committed by GitHub
parent 363f4a9e36 89bfac964e
commit 938ce13fcc
2 changed files with 87 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -280,7 +280,7 @@ npm run build-electron-{windows, darwin, linux}</pre>
</a> </a>
</div> </div>
</div> </div>
<div id="sidebar" data-state="visible" ng-swipe-left="hideSidebar()" ng-swipe-disable-mouse class="vertical-line"> <div id="sidebar" data-state="visible" ng-swipe-left="swipeLeft()" ng-swipe-disable-mouse class="vertical-line">
<ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey'), 'showquickkeys': showQuickKeys, 'showjumpkeys': showJumpKeys}"> <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey'), 'showquickkeys': showQuickKeys, 'showjumpkeys': showJumpKeys}">
<li class="bufferfilter"> <li class="bufferfilter">
<form role="form"> <form role="form">
@ -310,8 +310,8 @@ npm run build-electron-{windows, darwin, linux}</pre>
</li> </li>
</ul> </ul>
</div> </div>
<div id="bufferlines" class="favorite-font" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-swipe-disable-mouse ng-class="{'withnicklist': showNicklist}" when-scrolled="infiniteScroll()" imgur-drop> <div id="bufferlines" class="favorite-font" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()" ng-swipe-disable-mouse ng-class="{'withnicklist': showNicklist}" when-scrolled="infiniteScroll()" imgur-drop>
<div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" ng-swipe-disable-mouse class="vertical-line-left"> <div id="nicklist" ng-if="showNicklist" ng-swipe-right="swipeRight()" ng-swipe-disable-mouse class="vertical-line-left">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist"> <ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
<li ng-repeat="nick in group.nicks|orderBy:'name'"> <li ng-repeat="nick in group.nicks|orderBy:'name'">
<a ng-click="openBuffer(nick.name)"><span ng-class="::nick.prefixClasses" ng-bind="::nick.prefix"></span><span ng-class="::nick.nameClasses" ng-bind="::nick.name"></span></a> <a ng-click="openBuffer(nick.name)"><span ng-class="::nick.prefixClasses" ng-bind="::nick.prefix"></span><span ng-class="::nick.nameClasses" ng-bind="::nick.name"></span></a>
@ -437,7 +437,17 @@ npm run build-electron-{windows, darwin, linux}</pre>
</div> </div>
</form> </form>
</li> </li>
<li> <li class="mobile">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="settings.alwaysnicklist">
Always show nicklist
</label>
</div>
</form>
</li>
<li class="desktop">
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="checkbox"> <div class="checkbox">
<label> <label>

108
js/glowingbear.js
View file

@ -20,7 +20,8 @@ weechat.config(['$compileProvider', function ($compileProvider) {
}]); }]);
weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', '$log', 'models', 'bufferResume', 'connection', 'notifications', 'utils', 'settings', weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', '$log', 'models', 'bufferResume', 'connection', 'notifications', 'utils', 'settings',
function ($rootScope, $scope, $store, $timeout, $log, models, bufferResume, connection, notifications, utils, settings) { function ($rootScope, $scope, $store, $timeout, $log, models, bufferResume, connection, notifications, utils, settings)
{
window.openBuffer = function(channel) { window.openBuffer = function(channel) {
$scope.openBuffer(channel); $scope.openBuffer(channel);
@ -30,6 +31,12 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$scope.command = ''; $scope.command = '';
$scope.themes = ['dark', 'light', 'black', 'dark-spacious', 'blue', 'base16-default', 'base16-light', 'base16-mocha', 'base16-ocean-dark', 'base16-solarized-dark', 'base16-solarized-light']; $scope.themes = ['dark', 'light', 'black', 'dark-spacious', 'blue', 'base16-default', 'base16-light', 'base16-mocha', 'base16-ocean-dark', 'base16-solarized-dark', 'base16-solarized-light'];
// Current swipe status. Values:
// +1: bufferlist open, nicklist closed
// 0: bufferlist closed, nicklist closed
// -1: bufferlist closed, nicklist open
$scope.swipeStatus = 1;
// Initialise all our settings, this needs to include all settings // Initialise all our settings, this needs to include all settings
// or else they won't be saved to the localStorage. // or else they won't be saved to the localStorage.
settings.setDefaults({ settings.setDefaults({
@ -40,6 +47,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
'savepassword': false, 'savepassword': false,
'autoconnect': false, 'autoconnect': false,
'nonicklist': utils.isMobileUi(), 'nonicklist': utils.isMobileUi(),
'alwaysnicklist': false, // only significant on mobile
'noembed': true, 'noembed': true,
'onlyUnread': false, 'onlyUnread': false,
'hotlistsync': true, 'hotlistsync': true,
@ -160,13 +168,13 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
// Send a request for the nicklist if it hasn't been loaded yet // Send a request for the nicklist if it hasn't been loaded yet
if (!ab.nicklistRequested()) { if (!ab.nicklistRequested()) {
connection.requestNicklist(ab.id, function() { connection.requestNicklist(ab.id, function() {
$scope.showNicklist = $scope.updateShowNicklist(); $scope.updateShowNicklist();
// Scroll after nicklist has been loaded, as it may break long lines // Scroll after nicklist has been loaded, as it may break long lines
$rootScope.scrollWithBuffer(true); $rootScope.scrollWithBuffer(true);
}); });
} else { } else {
// Check if we should show nicklist or not // Check if we should show nicklist or not
$scope.showNicklist = $scope.updateShowNicklist(); $scope.updateShowNicklist();
} }
if (ab.requestedLines < $scope.lines_per_screen) { if (ab.requestedLines < $scope.lines_per_screen) {
@ -323,6 +331,42 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
return document.getElementById('content').getAttribute('sidebar-state') === 'visible'; return document.getElementById('content').getAttribute('sidebar-state') === 'visible';
}; };
$scope.swipeRight = function() {
// Depending on swipe state
if ($scope.swipeStatus === 1) {
/* do nothing */
} else if ($scope.swipeStatus === 0) {
$scope.showSidebar(); // updates swipe status to 1
} else if ($scope.swipeStatus === -1) {
// hide nicklist
$scope.swipeStatus = 0;
$scope.updateShowNicklist();
} else {
console.log("Weird swipe status:", $scope.swipeStatus);
$scope.swipeStatus = 0; // restore sanity
$scope.updateShowNicklist();
$scope.hideSidebar();
}
};
$rootScope.swipeLeft = function() {
// Depending on swipe state, ...
if ($scope.swipeStatus === 1) {
$scope.hideSidebar(); // updates swipe status to 0
} else if ($scope.swipeStatus === 0) {
// show nicklist
$scope.swipeStatus = -1;
$scope.updateShowNicklist();
} else if ($scope.swipeStatus === -1) {
/* do nothing */
} else {
console.log("Weird swipe status:", $scope.swipeStatus);
$scope.swipeStatus = 0; // restore sanity
$scope.updateShowNicklist();
$scope.hideSidebar();
}
};
$scope.showSidebar = function() { $scope.showSidebar = function() {
document.getElementById('sidebar').setAttribute('data-state', 'visible'); document.getElementById('sidebar').setAttribute('data-state', 'visible');
document.getElementById('content').setAttribute('sidebar-state', 'visible'); document.getElementById('content').setAttribute('sidebar-state', 'visible');
@ -332,14 +376,18 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$timeout(function(){elem.blur();}); $timeout(function(){elem.blur();});
}); });
} }
$scope.swipeStatus = 1;
}; };
$rootScope.hideSidebar = function() { $rootScope.hideSidebar = function() {
if (utils.isMobileUi()) { if (utils.isMobileUi()) {
// make sure nicklist is hidden
document.getElementById('sidebar').setAttribute('data-state', 'hidden'); document.getElementById('sidebar').setAttribute('data-state', 'hidden');
document.getElementById('content').setAttribute('sidebar-state', 'hidden'); document.getElementById('content').setAttribute('sidebar-state', 'hidden');
} }
$scope.swipeStatus = 0;
}; };
settings.addCallback('autoconnect', function(autoconnect) { settings.addCallback('autoconnect', function(autoconnect) {
if (autoconnect && !$rootScope.connected && !$rootScope.sslError && !$rootScope.securityError && !$rootScope.errorMessage) { if (autoconnect && !$rootScope.connected && !$rootScope.sslError && !$rootScope.securityError && !$rootScope.errorMessage) {
$scope.connect(); $scope.connect();
@ -357,23 +405,6 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
} }
}; };
// Open and close panels while on mobile devices through swiping
$scope.openNick = function() {
if (utils.isMobileUi()) {
if (settings.nonicklist) {
settings.nonicklist = false;
}
}
};
$scope.closeNick = function() {
if (utils.isMobileUi()) {
if (!settings.nonicklist) {
settings.nonicklist = true;
}
}
};
// Watch model and update channel sorting when it changes // Watch model and update channel sorting when it changes
var set_filter_predicate = function(orderbyserver) { var set_filter_predicate = function(orderbyserver) {
if ($rootScope.showJumpKeys) { if ($rootScope.showJumpKeys) {
@ -541,6 +572,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
// Wrap in a condition so we save ourselves the $apply if nothing changes (50ms or more) // Wrap in a condition so we save ourselves the $apply if nothing changes (50ms or more)
if ($scope.wasMobileUi && !utils.isMobileUi()) { if ($scope.wasMobileUi && !utils.isMobileUi()) {
$scope.showSidebar(); $scope.showSidebar();
$scope.updateShowNicklist();
} }
$scope.wasMobileUi = utils.isMobileUi(); $scope.wasMobileUi = utils.isMobileUi();
$scope.calculateNumLines(); $scope.calculateNumLines();
@ -717,7 +749,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
// Watch model and update show setting when it changes // Watch model and update show setting when it changes
settings.addCallback('nonicklist', function() { settings.addCallback('nonicklist', function() {
$scope.showNicklist = $scope.updateShowNicklist(); $scope.updateShowNicklist();
// restore bottom view // restore bottom view
if ($rootScope.connected && $rootScope.bufferBottom) { if ($rootScope.connected && $rootScope.bufferBottom) {
$timeout(function(){ $timeout(function(){
@ -725,24 +757,30 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
}, 500); }, 500);
} }
}); });
settings.addCallback('alwaysnicklist', function() {
$scope.updateShowNicklist();
});
$scope.showNicklist = false; $scope.showNicklist = false;
// Utility function that template can use to check if nicklist should // Utility function that template can use to check if nicklist should
// be displayed for current buffer or not // be displayed for current buffer or not
// is called on buffer switch // is called on buffer switch and certain swipe actions
$scope.updateShowNicklist = function() { $scope.updateShowNicklist = function() {
var ab = models.getActiveBuffer(); $scope.showNicklist = (function() {
if (!ab) { var ab = models.getActiveBuffer();
return false; // Check whether buffer exists and nicklist is non-empty
} if (!ab || ab.isNicklistEmpty()) {
// Check if option no nicklist is set return false;
if (settings.nonicklist) { }
return false; // Check if nicklist is disabled in settings (ignored on mobile)
} if (!utils.isMobileUi() && settings.nonicklist) {
// Check if nicklist is empty return false;
if (ab.isNicklistEmpty()) { }
return false; // mobile: hide nicklist unless overriden by setting or swipe action
} if (utils.isMobileUi() && !settings.alwaysnicklist && $scope.swipeStatus !== -1) {
return true; return false;
}
return true;
})();
}; };
//XXX not sure whether this belongs here //XXX not sure whether this belongs here