Make serial console resizable
This patch makes serial console resizable according to
parent element size like window or div container.
Closes-Bug:
Needed-By:
@@ -40,12 +40,14 @@ limitations under the License.
*/
.directive('serialConsole', serialConsole);
- serialConsole.$inject = ['states'];
+ serialConsole.$inject = ['states', '$timeout'];
- function serialConsole(states) {
+ function serialConsole(states, $timeout) {
return {
scope: true,
- template: '<div id="terminalNode"></div><br>{{statusMessage()}}',
+ template: '<div id="terminalNode"' +
+ 'termCols="{{termCols()}}" termRows="{{termRows()}}"></div>' +
+ '<br>{{statusMessage()}}',
restrict: 'E',
link: function postLink(scope, element, attrs) {
@@ -71,6 +73,43 @@ limitations under the License.
var termElement = angular.element(element)[0];
term.open(termElement.ownerDocument.getElementById('terminalNode'));
+ // default size of term.js
+ scope.cols = 80;
+ scope.rows = 24;
+ // event handler to resize console according to window resize.
+ angular.element(window).bind('resize', resizeTerminal);
+ function resizeTerminal() {
+ var terminal = angular.element('.terminal')[0];
+ // take margin for scroll-bars on window.
+ var winWidth = angular.element(window).width() - 30;
+ var winHeight = angular.element(window).height() - 50;
+ // calculate cols and rows.
+ var newCols = Math.floor(winWidth / (terminal.clientWidth / scope.cols));
+ var newRows = Math.floor(winHeight / (terminal.clientHeight / scope.rows));
+ if ((newCols !== scope.cols || newRows !== scope.rows) && newCols > 0 && newRows > 0) {
+ term.resize(newCols, newRows);
+ scope.cols = newCols;
+ scope.rows = newRows;
+ // To set size into directive attributes for watched by outside,
+ // termCols() and termRows() are needed to be execute for refreshing template.
+ // NOTE(shu-mutou): But scope.$apply is not useful here.
+ // "scope.$apply already in progress" error occurs at here.
+ // So we need to use $timeout.
+ $timeout(scope.termCols);
+ $timeout(scope.termRows);
+ }
+ }
+ // termCols and termRows provide console size into attribute of this directive.
+ // NOTE(shu-mutou): setting scope variables directly on template definition seems
+ // not to be effective for refreshing template.
+ scope.termCols = function () {
+ return scope.cols;
+ };
+ scope.termRows = function () {
+ return scope.rows;
+ };
+ resizeTerminal();
+
term.on('data', function(data) {
socket.send(data);
});
