Skip to content

Commit

Permalink
fix mobile
Browse files Browse the repository at this point in the history 
fixes to toggle enable/disable
fixes to touch scroll in less
fixes to hold to select and copy outside of less
  • Loading branch information
@jcubic
jcubic committed Mar 15, 2020
1 parent fdd9d3b commit ef0c069
Show file tree
Hide file tree
Showing 12 changed files with 253 additions and 91 deletions.
21 changes: 12 additions & 9 deletions css/jquery.terminal-2.15.0.css
View file
Expand Up @@ -12,7 +12,7 @@
* Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
* Released under the MIT license
*
* Date: Sun, 15 Mar 2020 13:12:45 +0000
* Date: Sun, 15 Mar 2020 18:52:36 +0000
*/
.terminal .terminal-output .format, .cmd .format,
.cmd-prompt, .cmd-prompt div {
Expand Down Expand Up @@ -131,10 +131,10 @@ body.full-screen-terminal .terminal {
.terminal a[tabindex="1000"]:focus {
outline: none;
}
.terminal .inverted, .cmd .inverted,
.terminal .terminal-inverted, .cmd .cmd-inverted {
background-color: #aaa;
color: #000;
.terminal .inverted, .cmd.cmd.cmd .inverted,
.terminal .terminal-inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: #aaa !important;
color: #000 !important;
}
.terminal .terminal-output > :not(.raw) a[href] span,
.cmd a[href] span {
Expand Down Expand Up @@ -703,9 +703,9 @@ terminal .terminal-output > div {
.cmd .clipboard {
top: calc(var(--size, 1) * 14 * var(--cursor-line, 0) * 1px);
}
.terminal .inverted, .cmd .inverted {
background-color: var(--color, #aaa);
color: var(--background, #000);
.terminal .inverted, .cmd.cmd.cmd .inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: var(--color, #aaa) !important;
color: var(--background, #000) !important;
}
.cmd div {
min-height: calc(var(--size, 1) * 14px);
Expand Down Expand Up @@ -924,9 +924,12 @@ terminal .terminal-output > div {
* mobile scroll fix, with help from StackOverflow
* https://stackoverflow.com/a/60535925/387194
*/
.terminal-mobile .terminal-wrapper {
.terminal-mobile.terminal-less .terminal-wrapper {
pointer-events: none;
}
.terminal-mobile.terminal-less .terminal-output a {
pointer-events: visible;
}
.cmd-editable {
position: absolute;
top: calc(var(--cmd-y, 0) * 1px);
Expand Down
4 changes: 2 additions & 2 deletions css/jquery.terminal-2.15.0.min.css
View file

Large diffs are not rendered by default.

19 changes: 11 additions & 8 deletions css/jquery.terminal-src.css
View file
Expand Up @@ -131,10 +131,10 @@ body.full-screen-terminal .terminal {
.terminal a[tabindex="1000"]:focus {
outline: none;
}
.terminal .inverted, .cmd .inverted,
.terminal .terminal-inverted, .cmd .cmd-inverted {
background-color: #aaa;
color: #000;
.terminal .inverted, .cmd.cmd.cmd .inverted,
.terminal .terminal-inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: #aaa !important;
color: #000 !important;
}
.terminal .terminal-output > :not(.raw) a[href] span,
.cmd a[href] span {
Expand Down Expand Up @@ -703,9 +703,9 @@ terminal .terminal-output > div {
.cmd .clipboard {
top: calc(var(--size, 1) * 14 * var(--cursor-line, 0) * 1px);
}
.terminal .inverted, .cmd .inverted {
background-color: var(--color, #aaa);
color: var(--background, #000);
.terminal .inverted, .cmd.cmd.cmd .inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: var(--color, #aaa) !important;
color: var(--background, #000) !important;
}
.cmd div {
min-height: calc(var(--size, 1) * 14px);
Expand Down Expand Up @@ -924,9 +924,12 @@ terminal .terminal-output > div {
* mobile scroll fix, with help from StackOverflow
* https://stackoverflow.com/a/60535925/387194
*/
.terminal-mobile .terminal-wrapper {
.terminal-mobile.terminal-less .terminal-wrapper {
pointer-events: none;
}
.terminal-mobile.terminal-less .terminal-output a {
pointer-events: visible;
}
.cmd-editable {
position: absolute;
top: calc(var(--cmd-y, 0) * 1px);
Expand Down
21 changes: 12 additions & 9 deletions css/jquery.terminal.css
View file
Expand Up @@ -12,7 +12,7 @@
* Copyright (c) 2011-2020 Jakub Jankiewicz <https://jcubic.pl/me>
* Released under the MIT license
*
* Date: Sun, 15 Mar 2020 13:12:45 +0000
* Date: Sun, 15 Mar 2020 18:52:36 +0000
*/
.terminal .terminal-output .format, .cmd .format,
.cmd-prompt, .cmd-prompt div {
Expand Down Expand Up @@ -131,10 +131,10 @@ body.full-screen-terminal .terminal {
.terminal a[tabindex="1000"]:focus {
outline: none;
}
.terminal .inverted, .cmd .inverted,
.terminal .terminal-inverted, .cmd .cmd-inverted {
background-color: #aaa;
color: #000;
.terminal .inverted, .cmd.cmd.cmd .inverted,
.terminal .terminal-inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: #aaa !important;
color: #000 !important;
}
.terminal .terminal-output > :not(.raw) a[href] span,
.cmd a[href] span {
Expand Down Expand Up @@ -703,9 +703,9 @@ terminal .terminal-output > div {
.cmd .clipboard {
top: calc(var(--size, 1) * 14 * var(--cursor-line, 0) * 1px);
}
.terminal .inverted, .cmd .inverted {
background-color: var(--color, #aaa);
color: var(--background, #000);
.terminal .inverted, .cmd.cmd.cmd .inverted, .cmd.cmd.cmd .cmd-inverted {
background-color: var(--color, #aaa) !important;
color: var(--background, #000) !important;
}
.cmd div {
min-height: calc(var(--size, 1) * 14px);
Expand Down Expand Up @@ -924,9 +924,12 @@ terminal .terminal-output > div {
* mobile scroll fix, with help from StackOverflow
* https://stackoverflow.com/a/60535925/387194
*/
.terminal-mobile .terminal-wrapper {
.terminal-mobile.terminal-less .terminal-wrapper {
pointer-events: none;
}
.terminal-mobile.terminal-less .terminal-output a {
pointer-events: visible;
}
.cmd-editable {
position: absolute;
top: calc(var(--cmd-y, 0) * 1px);
Expand Down
4 changes: 2 additions & 2 deletions css/jquery.terminal.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/jquery.terminal.min.css.map
View file

Large diffs are not rendered by default.

89 changes: 70 additions & 19 deletions js/jquery.terminal-2.15.0.js
View file
Expand Up @@ -41,7 +41,7 @@
*
* broken image by Sophia Bai from the Noun Project (CC-BY)
*
* Date: Sun, 15 Mar 2020 13:12:44 +0000
* Date: Sun, 15 Mar 2020 18:52:35 +0000
*/
/* global define, Map */
/* eslint-disable */
Expand Down Expand Up @@ -845,7 +845,9 @@
if (window.getSelection) {
//contenteditable
if (isContentEditable) {
target.focus();
if (!this.is(':focus')) {
target.focus();
}
var range1 = window.getSelection().getRangeAt(0),
range2 = range1.cloneRange();
range2.selectNodeContents(target);
Expand Down Expand Up @@ -885,8 +887,11 @@
if (window.getSelection) {
//contenteditable
if (isContentEditable) {
target.focus();
window.getSelection().collapse(target.firstChild, pos);
if (!this.is(':focus')) {
target.focus();
}
var selection = window.getSelection();
selection.collapse(selection.focusNode, pos);
}
//textarea
else
Expand Down Expand Up @@ -1021,7 +1026,7 @@
var previous;
$(this).on('touchstart.scroll', function(e) {
e = e.originalEvent;
if (e.touches.length === 1) {
if (e.target.tagName.toLowerCase() !== 'a' && e.touches.length === 1) {
previous = origin = e.touches[0];
}
}).on('touchmove.scroll', function(e) {
Expand Down Expand Up @@ -1624,10 +1629,10 @@
var clip = {
$node: $node,
val: function(value) {
if (value) {
$node.html(value);
} else {
if (typeof value === 'undefined') {
return $node.text();
} else {
$node.html(value);
}
},
reset: function() {
Expand Down Expand Up @@ -2131,7 +2136,7 @@
function paste_event() {
clip.val('');
paste_count = 0;
if (self.isenabled() && !clip.is(':focus')) {
if (self.isenabled() && !clip.$node.is(':focus')) {
clip.$node.trigger('focus', [true]);
}
clip.$node.one('input', paste);
Expand Down Expand Up @@ -2400,7 +2405,7 @@
self.oneTime(10, function() {
try {
// we check first to improve performance
if (!is_mobile && clip.$node.caret() !== position + 1) {
if (clip.$node.caret() !== position + 1) {
clip.$node.caret(position + 1);
}
} catch (e) {
Expand Down Expand Up @@ -4332,7 +4337,7 @@
// -------------------------------------------------------------------------
$.terminal = {
version: '2.15.0',
date: 'Sun, 15 Mar 2020 13:12:44 +0000',
date: 'Sun, 15 Mar 2020 18:52:35 +0000',
// colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
color_names: [
'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
Expand Down Expand Up @@ -9423,6 +9428,7 @@
when_ready(function ready() {
command_line.destroy().remove();
self.resizer('unbind');
self.touch_scroll('unbind');
font_resizer.resizer('unbind').remove();
$(document).unbind('.terminal_' + self.id());
$(window).unbind('.terminal_' + self.id());
Expand Down Expand Up @@ -9458,6 +9464,13 @@
if (!terminals.length()) {
$(window).off('hashchange');
}
if (is_mobile) {
self.off([
'touchstart.terminal',
'touchmove.terminal',
'touchend.terminal'
].join(' '));
}
output.remove();
wrapper.remove();
if (body_terminal) {
Expand Down Expand Up @@ -9851,16 +9864,54 @@
if (is_mobile) {
(function() {
self.addClass('terminal-mobile');
self.on('touchstart.terminal', function() {
if (!frozen) {
if (!self.enabled()) {
command_line.clip().focus();
self.focus();
} else {
command_line.clip().blur();
self.disable();
var start;
var move;
var enabled;
var SENSITIVITY = 3;
var clip = command_line.clip();
var HOLD_TIME = 200;
var timer;
clip.$node.off('touchstart.cmd');
self.on('touchstart.terminal', function(e) {
window.touch_event = e;
if (e.target.tagName.toLowerCase() === 'a') {
return;
}
if (!frozen && e.touches.length === 1) {
enabled = self.enabled();
var point = e.touches[0];
start = {
x: point.clientX,
y: point.clientY
};
timer = setTimeout(function() {
start = null;
}, HOLD_TIME);
}
}).on('touchmove.terminal', function(e) {
if (e.touches.length === 1 && start) {
var point = e.touches[0];
var diff_x = Math.abs(point.clientX - start.x);
var diff_y = Math.abs(point.clientY - start.y);
if (diff_x > SENSITIVITY || diff_y > SENSITIVITY) {
move = true;
}
}
}).on('touchend.terminal', function() {
if (start) {
clearTimeout(timer);
if (!move) {
if (!enabled) {
clip.focus();
self.focus();
} else {
clip.blur();
self.disable();
}
}
}
move = false;
start = null;
});
})();
} else {
Expand Down
4 changes: 2 additions & 2 deletions js/jquery.terminal-2.15.0.min.js
View file

Large diffs are not rendered by default.

0 comments on commit ef0c069

Please sign in to comment.