Added settings dialog with Mac OSX keyboard shortcuts (#99)

* Added settings dialog with Mac OSX keyboard shortcuts

Issue #98

* Added default keyboard prefix detection for Macs

Issue #98

www/assets/app.js

@@ -11,7 +11,7 @@
         }, 500);
     }]);
 
-    app.controller('PlayController', ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$window', function($scope, $log, $http, $location, $timeout, $mdDialog, $window) {
+    app.controller('PlayController', ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$window', 'KeyboardShortcutService', function($scope, $log, $http, $location, $timeout, $mdDialog, $window, KeyboardShortcutService) {
         $scope.sessionId = window.location.pathname.replace('/p/', '');
         $scope.instances = [];
         $scope.idx = {};
@@ -23,6 +23,8 @@
         $scope.newInstanceBtnText = '+ Add new instance';
         $scope.deleteInstanceBtnText = 'Delete';
         $scope.isInstanceBeingDeleted = false;
+        
+        var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts();
 
         angular.element($window).bind('resize', function() {
             if ($scope.selectedInstance) {
@@ -30,6 +32,10 @@
             }
         });
 
+        $scope.$on("settings:shortcutsSelected", function(e, preset) {
+            selectedKeyboardShortcuts = preset;
+        });
+
 
         $scope.showAlert = function(title, content, parent) {
             $mdDialog.show(
@@ -245,6 +251,17 @@
                 }
             });
 
+            term.attachCustomKeydownHandler(function(e) {
+                if (selectedKeyboardShortcuts == null)
+                    return;
+                var presets = selectedKeyboardShortcuts.presets
+                    .filter(function(preset) { return preset.keyCode == e.keyCode })
+                    .filter(function(preset) { return (preset.metaKey == undefined && !e.metaKey) || preset.metaKey == e.metaKey })
+                    .filter(function(preset) { return (preset.ctrlKey == undefined && !e.ctrlKey) || preset.ctrlKey == e.ctrlKey })
+                    .filter(function(preset) { return (preset.altKey == undefined && !e.altKey) || preset.altKey == e.altKey })
+                    .forEach(function(preset) { preset.action({ terminal : term })});
+            });
+
             term.open(terminalContainer);
 
             // Set geometry during the next tick, to avoid race conditions.
@@ -291,5 +308,89 @@
     .config(['$mdIconProvider', '$locationProvider', function($mdIconProvider, $locationProvider) {
         $locationProvider.html5Mode({enabled: true, requireBase: false});
         $mdIconProvider.defaultIconSet('../assets/social-icons.svg', 24);
-    }]);
+    }])
+    .component('settingsIcon', {
+        template : "<md-button ng-click='$ctrl.onClick()'><md-icon class='material-icons'>settings</md-icon></md-button>",
+        controller : function($mdDialog) {
+            var $ctrl = this;
+            $ctrl.onClick = function() {
+                $mdDialog.show({
+                    controller : function() {},
+                    template : "<settings-dialog></settings-dialog>",
+                    parent: angular.element(document.body),
+                    clickOutsideToClose : true
+                })
+            }
+        }
+    })
+    .component("settingsDialog", {
+        templateUrl : "settings-modal.html",
+        controller : function($mdDialog, KeyboardShortcutService, $rootScope) {
+            var $ctrl = this;
+
+            $ctrl.$onInit = function() {
+                $ctrl.keyboardShortcutPresets = KeyboardShortcutService.getAvailablePresets();
+                $ctrl.selectedShortcutPreset = KeyboardShortcutService.getCurrentShortcuts();
+            };
+
+            $ctrl.currentShortcutConfig = function(value) {
+                if (value !== undefined) {
+                    value = JSON.parse(value);
+                    KeyboardShortcutService.setCurrentShortcuts(value);
+                    $ctrl.selectedShortcutPreset = angular.copy(KeyboardShortcutService.getCurrentShortcuts());
+                    $rootScope.$broadcast('settings:shortcutsSelected', $ctrl.selectedShortcutPreset);
+                }
+                return JSON.stringify(KeyboardShortcutService.getCurrentShortcuts());
+            }
+
+            $ctrl.close = function() {
+                $mdDialog.cancel();
+            }
+        }
+    })
+    .service("KeyboardShortcutService", function() {
+        return {
+            getAvailablePresets : getAvailablePresets,
+            getCurrentShortcuts : getCurrentShortcuts,
+            setCurrentShortcuts : setCurrentShortcuts
+        };
+
+        function getAvailablePresets() {
+            return [
+                { name : "None", presets : [] },
+                { 
+                    name : "Mac OSX",
+                    presets : [
+                        { description : "Clear terminal", command : "Cmd+K", metaKey : true, keyCode : 75, action : function(context) { context.terminal.clear(); }}
+                    ]
+                }
+            ]
+        }
+
+        function getCurrentShortcuts() {
+            var shortcuts = localStorage.getItem("shortcut-preset-name");
+            if (shortcuts == null) {
+                shortcuts = getDefaultShortcutPrefixName();
+                if (shortcuts == null)
+                    return null;
+            }
+
+            var preset = getAvailablePresets()
+                .filter(function(preset) { return preset.name == shortcuts; });
+            if (preset.length == 0)
+                console.error("Unable to find preset with name '" + shortcuts + "'");
+            return preset[0];
+            return (shortcuts == null) ? null : JSON.parse(shortcuts);
+        }
+
+        function setCurrentShortcuts(config) {
+            localStorage.setItem("shortcut-preset-name", config.name);
+        }
+
+        function getDefaultShortcutPrefixName() {
+            if (window.navigator.platform.toUpperCase().indexOf('MAC') >= 0)
+                return "Mac OSX";
+            return null;
+        }
+    });
 })();

www/index.html

@@ -2,7 +2,7 @@
 <html ng-app="DockerPlay" ng-controller="PlayController">
     <head>
         <title>Docker Playground</title>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons" />
         <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
         <link rel="stylesheet" href="/assets/xterm.css" />
         <link rel="stylesheet" href="/assets/style.css" />
@@ -44,7 +44,10 @@
                 <md-toolbar class="md-theme-indigo">
                   <span class="clock">{{ttl}}</span>
                   <md-button class="md-warn md-raised" ng-click="closeSession()">Close session</md-button>
-                  <h1 class="md-toolbar-tools">Instances</h1>
+                  <div class="md-toolbar-tools">
+                    <h1 class="md-toolbar-tools">Instances</h1>
+                    <settings-icon></settings-icon>
+                  </div>
                 </md-toolbar>
                 <md-content layout-padding>
                   <md-button ng-click="newInstance()" ng-disabled="isInstanceBeingCreated" class="md-primary">{{newInstanceBtnText}}</md-button>
@@ -109,6 +112,54 @@
             </section>
         </div>
 
+        <script type="text/ng-template" id="settings-modal.html">
+            <md-toolbar>
+                <div class="md-toolbar-tools">
+                    <h2>Settings</h2>
+                    <span flex></span>
+                    <md-button class="md-icon-button" ng-click="$ctrl.close()">
+                        <md-icon class="material-icon" aria-label="Close dialog">close</md-icon>
+                    </md-button>
+                </div>
+                </md-toolbar>
+
+                <md-dialog-content>
+                <div class="md-dialog-content" style="width:600px;">
+                    <div layout="row">
+                        <div flex="50">
+                            <md-input-container class="md-block" flex-gt-sm>
+                                <label>Keyboard Shortcut Preset</label>
+                                <md-select ng-model="$ctrl.currentShortcutConfig" ng-model-options="{getterSetter: true}" placeholder="Keyboard shortcut prefix">
+                                    <md-option ng-repeat="preset in $ctrl.keyboardShortcutPresets" value="{{preset}}">
+                                        {{preset.name}}
+                                    </md-option>
+                                </md-select>
+                            </md-input-container>
+                        </div>
+                        <div flex="10"></div>
+                        <div flex="40">
+                            <div ng-if="$ctrl.selectedShortcutPreset">
+                                Preset details:
+                                <ul>
+                                    <li ng-if="$ctrl.selectedShortcutPreset.presets.length == 0">No presets defined</li>
+                                    <li ng-repeat="preset in $ctrl.selectedShortcutPreset.presets">
+                                        <code>{{preset.command}}</code> - {{preset.description}}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                </md-dialog-content>
+
+                <md-dialog-actions layout="row">
+                    <span flex></span>
+                    <md-button ng-click="$ctrl.close()">
+                        Close
+                    </md-button>
+                </md-dialog-actions>
+        </script>
+
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>