better swipe handling
this makes the mobile UI less pleasant to use on Desktop :\
This commit is contained in:
parent
363f4a9e36
commit
e37666a571
@ -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($event)" 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($event)" ng-swipe-left="swipeLeft($event)" 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="closeNick()" 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,7 @@ npm run build-electron-{windows, darwin, linux}</pre>
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li ng-if="!isMobileUi()">
|
||||||
<form class="form-inline" role="form">
|
<form class="form-inline" role="form">
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label>
|
<label>
|
||||||
|
@ -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);
|
||||||
@ -29,6 +30,7 @@ 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'];
|
||||||
|
$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.
|
||||||
@ -118,6 +120,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// expose
|
||||||
|
$rootScope.isMobileUi = function() { return utils.isMobileUi(); };
|
||||||
|
|
||||||
if (typeof $scope.documentVisibilityChange !== "undefined") {
|
if (typeof $scope.documentVisibilityChange !== "undefined") {
|
||||||
document.addEventListener($scope.documentVisibilityChange, function() {
|
document.addEventListener($scope.documentVisibilityChange, function() {
|
||||||
if (!document[$scope.documentHidden]) {
|
if (!document[$scope.documentHidden]) {
|
||||||
@ -168,6 +173,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||||||
// Check if we should show nicklist or not
|
// Check if we should show nicklist or not
|
||||||
$scope.showNicklist = $scope.updateShowNicklist();
|
$scope.showNicklist = $scope.updateShowNicklist();
|
||||||
}
|
}
|
||||||
|
if ($scope.swipeStatus <= 0) {
|
||||||
|
$scope.swipeStatus = $scope.showNicklist ? -1 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
if (ab.requestedLines < $scope.lines_per_screen) {
|
if (ab.requestedLines < $scope.lines_per_screen) {
|
||||||
// buffer has not been loaded, but some lines may already be present if they arrived after we connected
|
// buffer has not been loaded, but some lines may already be present if they arrived after we connected
|
||||||
@ -323,6 +331,40 @@ 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($event) {
|
||||||
|
var touch = $event instanceof TouchEvent;
|
||||||
|
// Depending on swipe state
|
||||||
|
if ($scope.swipeStatus === 1) {
|
||||||
|
/* do nothing */
|
||||||
|
} else if ($scope.swipeStatus === 0 && touch) {
|
||||||
|
$scope.showSidebar();
|
||||||
|
} else if ($scope.swipeStatus === -1) {
|
||||||
|
$scope.closeNick();
|
||||||
|
} else {
|
||||||
|
console.log("Weird swipe status:", $scope.swipeStatus);
|
||||||
|
$scope.swipeStatus = 0; // restore sanity
|
||||||
|
$scope.closeNick();
|
||||||
|
$scope.hideSidebar();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$rootScope.swipeLeft = function($event) {
|
||||||
|
var touch = $event instanceof TouchEvent;
|
||||||
|
// Depending on swipe state, ...
|
||||||
|
if ($scope.swipeStatus === 1 && touch) {
|
||||||
|
$scope.hideSidebar();
|
||||||
|
} else if ($scope.swipeStatus === 0) {
|
||||||
|
$scope.openNick();
|
||||||
|
} else if ($scope.swipeStatus === -1) {
|
||||||
|
/* do nothing */
|
||||||
|
} else {
|
||||||
|
console.log("Weird swipe status:", $scope.swipeStatus);
|
||||||
|
$scope.swipeStatus = 0; // restore sanity
|
||||||
|
$scope.closeNick();
|
||||||
|
$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');
|
||||||
@ -331,15 +373,24 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||||||
_.each(document.getElementsByTagName('textarea'), function(elem) {
|
_.each(document.getElementsByTagName('textarea'), function(elem) {
|
||||||
$timeout(function(){elem.blur();});
|
$timeout(function(){elem.blur();});
|
||||||
});
|
});
|
||||||
|
// hide nicklist
|
||||||
|
settings.nonicklist = true;
|
||||||
}
|
}
|
||||||
|
$scope.swipeStatus = 1;
|
||||||
};
|
};
|
||||||
|
|
||||||
$rootScope.hideSidebar = function() {
|
$rootScope.hideSidebar = function() {
|
||||||
if (utils.isMobileUi()) {
|
if (utils.isMobileUi()) {
|
||||||
|
// make sure nicklist is hidden
|
||||||
|
settings.nonicklist = true;
|
||||||
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;
|
||||||
};
|
};
|
||||||
|
// fugly hack
|
||||||
|
$scope.hideSidebar = function() { $rootScope.hideSidebar(); };
|
||||||
|
|
||||||
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();
|
||||||
@ -718,6 +769,9 @@ 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.showNicklist = $scope.updateShowNicklist();
|
||||||
|
if ($scope.swipeStatus <= 0) {
|
||||||
|
$scope.swipeStatus = $scope.showNicklist ? -1 : 0;
|
||||||
|
}
|
||||||
// restore bottom view
|
// restore bottom view
|
||||||
if ($rootScope.connected && $rootScope.bufferBottom) {
|
if ($rootScope.connected && $rootScope.bufferBottom) {
|
||||||
$timeout(function(){
|
$timeout(function(){
|
||||||
|
Loading…
Reference in New Issue
Block a user