🎨 Disable Virtual Keyboard preview and auto accept

Thanks to @mikekscholz
BillyBlaze · Mar 11, 2020 · c434822 · c434822
1 parent f087a14
commit c434822
Show file tree

Hide file tree

Showing 6 changed files with 382 additions and 347 deletions.
diff --git a/octoprint_touchui/static/css/touchui.css b/octoprint_touchui/static/css/touchui.css
diff --git a/octoprint_touchui/static/js/touchui.bundled.js b/octoprint_touchui/static/js/touchui.bundled.js
@@ -224,177 +224,185 @@ TouchUI.prototype.components.fullscreen = {
 	}
 }
 
-TouchUI.prototype.components.keyboard = {
-
-	isActive: ko.observable(false),
-	config: {
-
-		default: {
-
-			display: {
-				'accept' :  'Save',
-				'bksp'   :  ' ',
-				'default': 'ABC',
-				'meta1'  : '.?123',
-				'meta2'  : '#+='
-			},
-
-			layout: 'custom',
-			customLayout: {
-				'default': [
-					'q w e r t y u i o p',
-					'a s d f g h j k l',
-					'{bksp} {s} z x c v b n m',
-					'{accept} {c} {left} {right} {meta1} {space}'
-				],
-				'shift': [
-					'Q W E R T Y U I O P',
-					'A S D F G H J K L',
-					'{bksp} {s} Z X C V B N M',
-					'{accept} {c} {left} {right} {meta1} {space}'
-				],
-				'meta1': [
-					'1 2 3 4 5 6 7 8 9 0',
-					'- / : ; ( ) \u20ac & @',
-					'{bksp} {meta2} . , ? ! \' "',
-					'{accept} {c} {left} {right} {default} {space}'
-				],
-				'meta2': [
-					'[ ] { } # % ^ * + =',
-					'_ \\ | ~ < > $ \u00a3 \u00a5',
-					'{bksp} {meta1} . , ? ! \' "',
-					'{accept} {c} {left} {right} {default} {space}'
-				]
-			}
-
-		},
-		terminal: {
-			display: {
-				'bksp'   :  ' ',
-				'accept' : 'Save',
-				'default': 'ABC',
-				'meta1'  : '.?123',
-				'meta2'  : '#+='
-			},
-
-			layout: 'custom',
-			customLayout: {
-				'default': [
-					'Q W E R T Y U I O P',
-					'A S D F G H J K L',
-					'{bksp} {s} Z X C V B N M',
-					'{accept} {c} {left} {right} {meta1} {space}'
-				],
-				'meta1': [
-					'1 2 3 4 5 6 7 8 9 0',
-					'- / : ; ( ) \u20ac & @',
-					'{bksp} {meta2} . , ? ! \' "',
-					'{accept} {c} {left} {right} {default} {space}'
-				],
-				'meta2': [
-					'[ ] { } # % ^ * + =',
-					'_ \\ | ~ < > $ \u00a3 \u00a5',
-					'{bksp} {meta1} . , ? ! \' "',
-					'{accept} {c} {left} {right} {default} {space}'
-				]
-			}
-
-		},
-		number: {
-			display: {
-				'bksp'   :  ' ',
-				'a'      :  'Save',
-				'c'      :  'Cancel'
-			},
-
-			layout: 'custom',
-			customLayout: {
-				'default' : [
-					'{bksp} 1 2 3 4 5 6 7 ',
-					'{accept} {c} {left} {right} 8 9 0 - , . '
-				]
-			},
-		}
-
-
-	},
-
-	init: function() {
-		var self = this;
-
-		// Add virtual keyboard
-		var obj = {
-			visible: self.components.keyboard.onShow,
-			beforeClose: self.components.keyboard.onClose
-		};
-
-		var notThis = ['[type="file"]','[type="checkbox"]','[type="radio"]'];
-		$(document).on("mousedown", 'input:not('+notThis+'), textarea', function(e) {
-			var $elm = $(e.target);
-
-			if(!self.components.keyboard.isActive()) {
-
-				if($elm.data("keyboard")) {
-					$elm.data("keyboard").close().destroy();
-				}
-
-			} else {
-
-				if(!self.settings.hasTouch) {
-
-					// Force iScroll to stop following the mouse (bug)
-					self.scroll.currentActive._end(e);
-					setTimeout(function() {
-						self.scroll.currentActive.scrollToElement($elm[0], 200, 0, -30);
-					}, 0);
-
-				}
-
-				// $elm already has a keyboard
-				if($elm.data("keyboard")) {
-					$elm.data('keyboard').reveal();
-					return;
-				}
-
-				if($elm.attr("type") === "number") {
-					$elm.keyboard($.extend(self.components.keyboard.config.number, obj));
-				} else if($elm.attr("id") === "terminal-command") {
-					$elm.keyboard($.extend(self.components.keyboard.config.terminal, obj));
-				} else {
-					$elm.keyboard($.extend(self.components.keyboard.config.default, obj));
-				}
-			}
-
-		});
-	},
-
-	onShow: function(event, keyboard, el) {
-		// Set the input cursor to the end of the input field
-		setTimeout(function() {
-			var prev = keyboard.$preview.get(0);
-			if (prev) {
-				prev.selectionStart = prev.selectionEnd = prev.value.length;
-			}
-		}, 10);
-
-		keyboard.$keyboard.find("button").on("mousedown", function(e) {
-			$(e.target).addClass("touch-focus");
-
-			if(typeof $(e.target).data("timeout") !== "function") {
-				clearTimeout($(e.target).data("timeout"));
-			}
-			var timeout = setTimeout(function() {
-				$(e.target).removeClass("touch-focus").data("timeout", "");
-			}, 600);
-			$(e.target).data("timeout", timeout);
-		});
-	},
-
-	onClose: function(event, keyboard, el) {
-		keyboard.$keyboard.find("button").off("mousedown");
-	}
-
-}
+TouchUI.prototype.components.keyboard = {
+
+	isActive: ko.observable(false),
+	config: {
+
+		default: {
+			usePreview: false,
+			autoAccept: true,
+
+			display: {
+				'accept' :  'Save',
+				'bksp'   :  ' ',
+				'default': 'ABC',
+				'meta1'  : '.?123',
+				'meta2'  : '#+='
+			},
+
+			layout: 'custom',
+			customLayout: {
+				'default': [
+					'q w e r t y u i o p',
+					'a s d f g h j k l',
+					'{bksp} {s} z x c v b n m',
+					'{accept} {c} {left} {right} {meta1} {space}'
+				],
+				'shift': [
+					'Q W E R T Y U I O P',
+					'A S D F G H J K L',
+					'{bksp} {s} Z X C V B N M',
+					'{accept} {c} {left} {right} {meta1} {space}'
+				],
+				'meta1': [
+					'1 2 3 4 5 6 7 8 9 0',
+					'- / : ; ( ) \u20ac & @',
+					'{bksp} {meta2} . , ? ! \' "',
+					'{accept} {c} {left} {right} {default} {space}'
+				],
+				'meta2': [
+					'[ ] { } # % ^ * + =',
+					'_ \\ | ~ < > $ \u00a3 \u00a5',
+					'{bksp} {meta1} . , ? ! \' "',
+					'{accept} {c} {left} {right} {default} {space}'
+				]
+			}
+
+		},
+		terminal: {
+			usePreview: false,
+			autoAccept: true,
+
+			display: {
+				'bksp'   :  ' ',
+				'accept' : 'Save',
+				'default': 'ABC',
+				'meta1'  : '.?123',
+				'meta2'  : '#+='
+			},
+
+			layout: 'custom',
+			customLayout: {
+				'default': [
+					'Q W E R T Y U I O P',
+					'A S D F G H J K L',
+					'{bksp} {s} Z X C V B N M',
+					'{accept} {c} {left} {right} {meta1} {space}'
+				],
+				'meta1': [
+					'1 2 3 4 5 6 7 8 9 0',
+					'- / : ; ( ) \u20ac & @',
+					'{bksp} {meta2} . , ? ! \' "',
+					'{accept} {c} {left} {right} {default} {space}'
+				],
+				'meta2': [
+					'[ ] { } # % ^ * + =',
+					'_ \\ | ~ < > $ \u00a3 \u00a5',
+					'{bksp} {meta1} . , ? ! \' "',
+					'{accept} {c} {left} {right} {default} {space}'
+				]
+			}
+
+		},
+		number: {
+			usePreview: false,
+			autoAccept: true,
+
+			display: {
+				'bksp'   :  ' ',
+				'a'      :  'Save',
+				'c'      :  'Cancel'
+			},
+
+			layout: 'custom',
+			customLayout: {
+				'default' : [
+					'{bksp} 1 2 3 4 5 6 7 ',
+					'{accept} {c} {left} {right} 8 9 0 - , . '
+				]
+			},
+		}
+
+
+	},
+
+	init: function() {
+		var self = this;
+
+		// Add virtual keyboard
+		var obj = {
+			visible: self.components.keyboard.onShow,
+			beforeClose: self.components.keyboard.onClose
+		};
+
+		var notThis = ['[type="file"]','[type="checkbox"]','[type="radio"]'];
+		$(document).on("mousedown", 'input:not('+notThis+'), textarea', function(e) {
+			var $elm = $(e.target);
+
+			if(!self.components.keyboard.isActive()) {
+
+				if($elm.data("keyboard")) {
+					$elm.data("keyboard").close().destroy();
+				}
+
+			} else {
+
+				if(!self.settings.hasTouch) {
+
+					// Force iScroll to stop following the mouse (bug)
+					self.scroll.currentActive._end(e);
+					setTimeout(function() {
+						self.scroll.currentActive.scrollToElement($elm[0], 200, 0, -30);
+					}, 0);
+
+				}
+
+				// $elm already has a keyboard
+				if($elm.data("keyboard")) {
+					$elm.data('keyboard').reveal();
+					return;
+				}
+
+				if($elm.attr("type") === "number") {
+					$elm.keyboard($.extend(self.components.keyboard.config.number, obj));
+				} else if($elm.attr("id") === "terminal-command") {
+					$elm.keyboard($.extend(self.components.keyboard.config.terminal, obj));
+				} else {
+					$elm.keyboard($.extend(self.components.keyboard.config.default, obj));
+				}
+			}
+
+		});
+	},
+
+	onShow: function(event, keyboard, el) {
+		// Set the input cursor to the end of the input field
+		setTimeout(function() {
+			var prev = keyboard.$preview.get(0);
+			if (prev) {
+				prev.selectionStart = prev.selectionEnd = prev.value.length;
+			}
+		}, 10);
+
+		keyboard.$keyboard.find("button").on("mousedown", function(e) {
+			$(e.target).addClass("touch-focus");
+
+			if(typeof $(e.target).data("timeout") !== "function") {
+				clearTimeout($(e.target).data("timeout"));
+			}
+			var timeout = setTimeout(function() {
+				$(e.target).removeClass("touch-focus").data("timeout", "");
+			}, 600);
+			$(e.target).data("timeout", timeout);
+		});
+	},
+
+	onClose: function(event, keyboard, el) {
+		keyboard.$keyboard.find("button").off("mousedown");
+	}
+
+}
 
 TouchUI.prototype.components.modal = {
 
@@ -1436,9 +1444,16 @@ TouchUI.prototype.knockout.isReady = function (viewModels) {
 		}, 0);
 
 		// Disable clicking outside models
-		viewModels.settingsViewModel.appearance_closeModalsWithClick(this.settings.closeDialogsOutside());
-		$('#settings-appearanceCloseModalsWithClick').parent().addClass('touchui_disabled');
-		$('<span>(Disabled and managed by TouchUI)</span>').appendTo($('#settings-appearanceCloseModalsWithClick').parent());
+		if (viewModels.settingsViewModel.appearance_closeModalsWithClick) {
+			$('#settings-appearanceCloseModalsWithClick').parent().addClass('touchui_disabled');
+			$('<span>(Disabled and managed by TouchUI)</span>').appendTo($('#settings-appearanceCloseModalsWithClick').parent());
+
+			this.settings.closeDialogsOutside.subscribe(function(close) {
+				viewModels.settingsViewModel.appearance_closeModalsWithClick(close);
+			});
+
+			this.settings.closeDialogsOutside.valueHasMutated();
+		}
 	}
 }
 

diff --git a/octoprint_touchui/static/less/touchui.bundled.less b/octoprint_touchui/static/less/touchui.bundled.less
@@ -2721,6 +2721,9 @@ margin: 0 !important;
 min-height: 100vh;
 margin-left: -110% !important;
 display: block;
+&.hide:not(.in) {
+display: none;
+}
 .box-sizing(border-box);
 .slimScrollDiv, #settings_plugin_pluginmanager_repositorydialog_list {
 height: auto !important;