feat(modalconsole): wrap lines option and output whitespace (v1.1.4)

_build/build.config.php

@@ -4,7 +4,7 @@
 define('PKG_NAME', 'modalConsole');
 define('PKG_NAME_LOWER', strtolower(PKG_NAME));
 
-define('PKG_VERSION', '1.1.3');
+define('PKG_VERSION', '1.1.4');
 define('PKG_RELEASE', 'pl');
 define('PKG_AUTO_INSTALL', false);
 define('PKG_NAMESPACE_PATH', '{core_path}components/' . PKG_NAME_LOWER . '/');

assets/components/modalconsole/css/mgr/modalconsole.css

@@ -62,6 +62,17 @@
 	padding: 5px;
 	overflow: auto;
 }
+#modalconsole-result .x-panel-body,
+#modalconsole-result pre {
+	white-space: pre;
+	margin: 0;
+}
+#modalconsole-result.modalconsole-result--wrap .x-panel-body,
+#modalconsole-result.modalconsole-result--wrap pre {
+	white-space: pre-wrap;
+	word-break: break-word;
+	overflow-wrap: break-word;
+}
 #modalconsole-editor {
 	box-sizing: border-box;
 	width: inherit !important;
@@ -82,11 +93,13 @@
 	width: 200px;
 }
 #modalconsole-save-code + .x-form-cb-label::before,
-#modalconsole-format-result + .x-form-cb-label::before {
+#modalconsole-format-result + .x-form-cb-label::before,
+#modalconsole-wrap-lines + .x-form-cb-label::before {
 	line-height: 1;
 }
 #modalconsole-save-code + .x-form-cb-label,
-#modalconsole-format-result + .x-form-cb-label {
+#modalconsole-format-result + .x-form-cb-label,
+#modalconsole-wrap-lines + .x-form-cb-label {
 	padding-left: 18px;
 	height: 18px;
 	display: flex;

assets/components/modalconsole/js/mgr/modalconsole.js

@@ -273,6 +273,19 @@ let modalConsoleWindow = function (config) {
 			profileName: 'Memory',
 			initValue: '0 MB / 0 MB'
 		}, '->' , {
+			xtype: 'xcheckbox',
+			boxLabel: _('modalconsole_wrap_lines'),
+			cls: 'toolbar-checkbox',
+			id: 'modalconsole-wrap-lines',
+			checked: this.initWrapLinesState(),
+			listeners: {
+				check: function(o, value) {
+					this.setWrapLinesState(value);
+					this.applyResultWrapClass();
+				},
+				scope: this
+			}
+		}, {
 			text: _("modalconsole_close") ? _("modalconsole_close") : 'Close',
 			cls: 'modalconsole-window-btn',
 			handler: function () {modalConsole.toggle();},
@@ -306,6 +319,7 @@ let modalConsoleWindow = function (config) {
 				el.on('click', function (e) {
 					modalConsole.toggle();
 				});
+				this.applyResultWrapClass();
 			},
 			'beforerender': function(w) {
 				this.codePanel = Ext.getCmp('modalconsole-code');
@@ -479,6 +493,39 @@ Ext.extend(modalConsoleWindow, MODx.Window, {
 		Ext.util.Cookies.set('modalconsoleFormatResult', +state);
 		return state;
 	},
+	initWrapLinesState: function() {
+		let state = Ext.util.Cookies.get('modalconsoleWrapLines');
+		if (state === null) {
+			state = this.setWrapLinesState(true);
+		}
+		return +state;
+	},
+	getWrapLinesState: function() {
+		let c = Ext.getCmp('modalconsole-wrap-lines');
+		if (c) {
+			return c.checked;
+		}
+		let s = Ext.util.Cookies.get('modalconsoleWrapLines');
+		if (s === null) {
+			return true;
+		}
+		return +s !== 0;
+	},
+	setWrapLinesState: function(state) {
+		Ext.util.Cookies.set('modalconsoleWrapLines', +state);
+		return state;
+	},
+	applyResultWrapClass: function() {
+		let p = this.resultPanel || Ext.getCmp('modalconsole-result');
+		if (!p || !p.getEl()) {
+			return;
+		}
+		if (this.getWrapLinesState()) {
+			p.addClass('modalconsole-result--wrap');
+		} else {
+			p.removeClass('modalconsole-result--wrap');
+		}
+	},
 	formatResult: function (output) {
 		return this.getFormatCodeState() ? '<pre>' + output + '</pre>' : output;
 	},

core/components/modalconsole/docs/changelog.txt

@@ -1,3 +1,8 @@
+1.1.4-pl
+==============
+- Script result panel: preserve newline characters in output (white-space pre/pre-wrap).
+- Footer checkbox "Wrap lines" toggles wrapping of long lines; setting stored in a cookie.
+
 1.1.3-pl
 ==============
 - Design adapted for MODX3

core/components/modalconsole/lexicon/en/default.inc.php

@@ -11,6 +11,7 @@
 $_lang['modalconsole_save_code'] = 'Remember';
 $_lang['modalconsole_title_save_code'] = 'Save the code in the history';
 $_lang['modalconsole_format_result'] = 'Format';
+$_lang['modalconsole_wrap_lines'] = 'Wrap lines';
 $_lang['modalconsole_search_text'] = 'Name of php function';
 
 $_lang['modalconsole_file'] = 'File';

core/components/modalconsole/lexicon/ru/default.inc.php

@@ -12,6 +12,7 @@
 $_lang['modalconsole_save_code'] = 'Запомнить';
 $_lang['modalconsole_title_save_code'] = 'Сохранить код в истории';
 $_lang['modalconsole_format_result'] = 'Форматировать';
+$_lang['modalconsole_wrap_lines'] = 'Переносить строки';
 $_lang['modalconsole_search_text'] = 'Введите имя PHP функции';