freewind · greenlaw110 · Apr 6, 2013 · Apr 7, 2013 · Apr 7, 2013 · Apr 7, 2013
diff --git a/.gitignore b/.gitignore
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/angular-seed/app/css/app.css b/angular-seed/app/css/app.css
@@ -61,8 +61,7 @@
 
 .params .CodeMirror {
     height: auto;
-    max-height: 300px;
-    overflow-y: auto;
+    min-height: 50px;
 }
 
 .source .CodeMirror {
@@ -76,9 +75,12 @@
 }
 
 .template_error {
-    background-color: #F2DEDE;
-    color: #B94A48;
-    border-color: #EED3D7;
+    background-color: #000;
+    color: #F04441;
+    border-color: #000;
+}
+#RESULT_PANEL code, #RESULT_PANEL pre {
+    font-family: "Source Code Pro Semibold","Envy Code R",Consolas, Monaco, Menlo, 'Courier New', monospace;
 }
 
 .file_active {

diff --git a/angular-seed/app/embed.html b/angular-seed/app/embed.html
@@ -36,7 +36,7 @@
         .embedded .nav.nav-tabs li a {border: none;border-radius: 0;background: transparent;}
         .embedded .nav.nav-tabs li:not(.active) a:hover {text-decoration: underline;}
         .embedded form {margin-bottom: 1px;}
-        .embedded form .toolbar {margin-top: 5px;}
+        .embedded form .toolbar {margin-top: 5px;position: absolute;right:0;}
         .embedded .edit_panel input {border-radius: 0;}
         .embedded .btn {border-radius: 0;background-image: none;}
         .embedded .slight-buttons .btn {background: transparent;border-color: #fff;border-image: none;margin-bottom: -2px;opacity: .5;}
@@ -136,7 +136,7 @@
                 var $_ = $(this).find('.tag.lbl');
                 $_.html($_.data('label')).animate({opacity: 0.7}, 400);
             }
-        }, '.source .CodeMirror, .params .CodeMirror, #RESULT_PANEL div.result')
+        }, '.source .CodeMirror, .params .CodeMirror, #RESULT_PANEL div.result');
     });
     setInterval(function(){
         if ($('.source .CodeMirror .tag.lbl').size() > 0) return;

diff --git a/angular-seed/app/index-async.html b/angular-seed/app/index-async.html
diff --git a/angular-seed/app/index.html b/angular-seed/app/index.html
@@ -52,10 +52,14 @@
                 </li>
                 <li><a class="btn-link" ng-click="showAbout()">About</a></li>
             </ul>
-            <span>
-                <p class="navbar-text pull-right" ng-show="current">Logged in as {{current}}</p>
-                <a class="navbar-text pull-right" ng-href="#/login" ng-hide="current">Admin Login</a>
-            </span>
+            <ul class="pull-right nav">
+                <li class="navbar-text" ng-show="current">
+                    Logged in as {{current}}
+                </li>
+                <li ng-hide="current">
+                    <a ng-href="#/login">Admin Login</a>    
+                </li>
+            </ul>
         </div>
     </div>
 </div>
@@ -113,7 +117,12 @@
         }, '.source .CodeMirror, .params .CodeMirror, #RESULT_PANEL div.result')
         var wh = $(window).height();
         setInterval(function(){
-            $('.source .CodeMirror').animate({'height': (wh - 220) + 'px'});
+            var h = wh - 220;
+            $('.source .CodeMirror').animate({'height': h + 'px'});
+            var ph = $('.params .CodeMirror').height();
+            if (ph > h / 2) {
+                $('.params .CodeMirror').animate({height: (h / 2) + 'px'});
+            }
         }, 1000);
     });
     setInterval(function(){

diff --git a/angular-seed/app/js/controllers.js b/angular-seed/app/js/controllers.js
@@ -59,16 +59,43 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
     $scope.switchFile = switchFile;
     $scope.removeFile = removeFile;
     $scope.setMain = setMain;
-    $scope.editFileName = editFileName;
-    $scope.cancelEditFileName = cancelEditFileName;
+    $scope.renameFile = renameFile;
+    $scope.cancelRenameFile = cancelRenameFile;
     $scope.getActiveFile = getActiveFile;
     $scope.getMainFile = getMainFile;
     $scope.keyEventHandlerForCodeMirror = keyEventHandlerForCodeMirror;
+    $scope.ta = {
+        $source: function() {return $('.source textarea');},
+        $params: function() {return $('.params textarea');}
+    };
+    $scope.$focus = false;
+    $scope.storeCurFocus = function(){
+        $scope.$focus = $scope.ta.$source;
+        var $p = $scope.ta.$params();
+        if ($p.is(":focus")) {
+            $scope.$focus = $scope.ta.$params;
+        }
+    };
+    $scope.restoreFocus = function() {
+        setTimeout(function(){
+            if ($scope.$focus) {
+                $scope.$focus().focus();
+            } else {
+                $('.source textarea').focus();
+            }
+        },1);
+    }
 
     function keyEventHandlerForCodeMirror($event) {
         var keyCode = $event.keyCode;
         if (keyCode === 10 || keyCode == 13 && $event.ctrlKey) {
             run();
+        } else if (keyCode == 84 && $event.ctrlKey && $event.altKey) /*ctrl-al-t*/ {
+//            var $t = $scope.ta.$source(), $p = $scope.ta.$params();
+//            if ($t.is(':focus')) $p.focus();
+//            else $t.focus();
+        } else if (keyCode == 113 /*F2*/) {
+            renameFile();
         }
     }
 
@@ -108,6 +135,7 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
     }
 
     function setMain(file) {
+        if (!file) file = getActiveFile();
         _.each($scope.currentCode.files, function (file) {
             file.isMain = false;
         });
@@ -122,6 +150,7 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
     }
 
     function removeFile(file, noAlert) {
+        if (!file) file = getActiveFile();
         if ($scope.currentCode.files.length > 1) {
             if (noAlert || confirm('Delete this template?')) {
                 $scope.currentCode.files = _.without($scope.currentCode.files, file);
@@ -140,6 +169,8 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
     // 1. not null
     // 2. unique
     function saveFileName(file) {
+        if (!file) file = getActiveFile();
+        if (!file) return;
         var editName = file.editName;
         if (!editName) {
             alert('filename should not be empty');
@@ -156,20 +187,25 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
             file.filename = editName;
             file.editing = false;
         }
+        $scope.restoreFocus();
     }
 
-    function editFileName(file) {
+    function renameFile(file) {
+        $scope.storeCurFocus();
+        if (!file) file = getActiveFile();
         file.editName = file.filename;
         file.editing = !file.editing;
     }
 
-    function cancelEditFileName(file) {
+    function cancelRenameFile(file) {
+        if (!file) file = getActiveFile();
         if (!file.filename) {
             removeFile(file, true);
             return;
         }
         file.editName = null;
         file.editing = false;
+        $scope.restoreFocus();
     }
 
     function removeCurrentCode() {
@@ -209,7 +245,7 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
     }
 
     function run() {
-        if ($scope.currentCode.files.length > 0) {
+        if ($scope.currentCode.files.length > 0) { 
             if ($scope.running) return;
             $scope.running = true;
             $scope.resultPageActive = true;
@@ -246,7 +282,6 @@ function EditorCtrl($scope, $http, $routeParams, $dialog, $location, $timeout) {
             newOne.isMain = true;
         }
     }
-
 }
 EditorCtrl.$inject = ['$scope', '$http', '$routeParams', '$dialog', '$location', '$timeout'];
 
@@ -262,10 +297,12 @@ function SaveDialogCtrl($scope, dialog, code, $http, saveAsNew) {
         }
         $http.post('/api/Application/save', code).success(function (code) {
             dialog.close(code);
+            //TODO: $scope.run();
         }).error(function (data) {
-                alert(data);
-            });
+            alert(data);
+        });
     }
+
 }
 
 SaveDialogCtrl.$inject = ['$scope', 'dialog', 'code', '$http', 'saveAsNew'];

diff --git a/angular-seed/app/js/filters.js b/angular-seed/app/js/filters.js
@@ -23,7 +23,7 @@ angular.module('myApp.filters', []).
             }
 
             function safe_tags_replace(str) {
-                return str.replace(/[&<>]/g, replaceTag);
+                return str ? str.replace(/[&<>]/g, replaceTag) : "";
             }
 
             return safe_tags_replace(str);

diff --git a/angular-seed/app/partials/about.html b/angular-seed/app/partials/about.html
@@ -3,12 +3,24 @@
     <h3>Rythm Fiddle</h3>
 </div>
 <div class="modal-body">
-    <p>Rythm Fiddle is created by <a href="http://github.com/freewind">Freewind</a>
+    <p><b>Rythm Fiddle</b> is brought to you by <a href="http://github.com/freewind">Freewind</a>
         and <a href="http://github.com/greenlaw110">Green</a></p>
 
     <p>Fork me: <a href="https://github.com/freewind/rythmfiddle">https://github.com/freewind/rythmfiddle</a></p>
 
-    <p>License: Apache 2</p>
+    <p>License: <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License, Version 2</a></p>
+
+    <p>Use "messages.xx" or "msg.xx" or "m.xx" to name resource files if you need i18n</p>
+
+    <p>Shortcut keys</p>
+    <ul>
+        <li><b>Ctrl-Enter</b>: Run the fiddle (Only in editors)</li>
+        <li><b>F2</b>: Rename current source file (Global)</li>
+        <li><b>Escape</b>: Cancel source file rename (Only in rename input text element)</li>
+        <li><b>Ctrl-Alt-T</b>: Toggle focus between source editor and param editor (Only in editors)</li>
+        <li><b>Ctrl-Alt-T</b>: Focus source editor (focus is not in editors</li>
+        <li><b>Alt-1 ~ 9</b>: Select the nth template source file</li>
+    </ul>
 </div>
 <div class="modal-footer">
     <a class="btn" ng-click="close()">Close</a>

diff --git a/angular-seed/app/partials/editor.html b/angular-seed/app/partials/editor.html
@@ -22,12 +22,12 @@
 
             <hr/>
 
-            <div class="btn-toolbar">
-                <a ng-show="currentCode.id" class="btn" ng-href="/embed/#/{{currentCode.id}}"
-                   title="Show in Compact view" target="_blank" style="width:174px;padding:5px 0"><i class="icon-eye-close"> </i>
-                    Compact View
-                </a>
-            </div>
+            <!--<div class="btn-toolbar">-->
+                <!--<a ng-show="currentCode.id" class="btn" ng-href="/embed/#/{{currentCode.id}}"-->
+                   <!--title="Show in Compact view" target="_blank" style="width:174px;padding:5px 0"><i class="icon-eye-close"> </i>-->
+                    <!--Compact View-->
+                <!--</a>-->
+            <!--</div>-->
 
             <div class="btn-toolbar" ng-show="current">
                 <a class="btn" style="width: 85px;" ng-href="#/editor" title="create new demo">
@@ -61,13 +61,13 @@
                     <span class="btn" title="Add new template" ng-click="newFile()">
                         <i class="icon-plus"></i>
                     </span>
-                    <span class="btn" title="Rename current template" ng-click="editFileName(getActiveFile())">
+                    <span class="btn" title="Rename current template" ng-click="renameFile()">
                         <i class="icon-edit"></i>
                     </span>
-                    <span class="btn" title="Delete current template" ng-click="removeFile(getActiveFile())">
+                    <span class="btn" title="Delete current template" ng-click="removeFile()">
                         <i class="icon-remove"></i>
                     </span>
-                    <span class="btn" title="Set current template as main entry" ng-click="setMain(getActiveFile())"
+                    <span class="btn" title="Set current template as main entry" ng-click="setMain()"
                           ng-hide="getActiveFile().isMain">
                         <i class="icon-heart"></i>
                     </span>
@@ -80,11 +80,11 @@
                 </tabs>
                 <div class="edit_panel form-inline" ng-show="getActiveFile().editing">
                     <form class="form-inline">
-                        <input type="text" class="input" ng-model="getActiveFile().editName" autofocus="{{getActiveFile().editing}}"/>
-                        <button class="btn" ng-click="saveFileName(getActiveFile())">
+                        <input type="text" class="input" ng-model="getActiveFile().editName" ui-keydown="{esc: 'cancelRenameFile()'}" autofocus="{{getActiveFile().editing}}"/>
+                        <button class="btn" ng-click="saveFileName()">
                             <i class="icon-ok"></i>
                         </button>
-                        <span class="btn" ng-click="cancelEditFileName(getActiveFile())">
+                        <span class="btn" ng-click="cancelRenameFile()">
                             <i class="icon-remove"></i>
                         </span>
                     </form>
@@ -96,9 +96,11 @@
                     <form name="editorForm">
                         <div class="source">
                             <div ng-show="getActiveFile()">
-                                <textarea class="ng-cloak" ui-codemirror="{theme:'rythm-web',mode:'rythm','lineNumbers': true, 'onKeyEvent':'keyEventHandlerForCodeMirror($event)'}"
+                                <textarea class="ng-cloak" ui-codemirror="{theme:'rythm-web',mode:'rythm','lineNumbers': true, 'onKeyEvent':'keyEventHandlerForCodeMirror($event)', 'matchBrackets': true}"
                                           name="codeSource" ui-refresh="getActiveFile().active"
                                           ng-model="getActiveFile().source"
+                                          autofocus="autofocus"
+                                          ui-event="{focus: storeCurFocus()}"
                                         >@args String who\nHello @who!</textarea>
                             </div>
                             <div class="alert alert-info" style="border:none;background:transparent;font-family: tahoma,arial,sans-serif;color:#888">
@@ -112,7 +114,7 @@
                     <form name="paramsForm" title="Type in parameters in JSON">
                         <div class="params">
                             <textarea class="ng-cloak" ui-codemirror="{theme:'rythm-web',mode:'javascript','onKeyEvent':'keyEventHandlerForCodeMirror($event)'}"
-                                      name="codeParams" ng-model="currentCode.params"
+                                      name="codeParams" ng-model="currentCode.params" ui-event="{focus: storeCurFocus()}"
                                       placeholder="Params in Json format">{"who": "Rythm"}</textarea>
                         </div>
                     </form>
@@ -131,9 +133,34 @@
 <script type="text/javascript">
     setInterval(function () {
         var h1 = $('.source .CodeMirror').height(),
-                h2 = $('.params .CodeMirror').height();
+                h2 = $('.params').height();
         $('#RESULT_PANEL pre.result').css({'height': (h1 - h2 - 27) + 'px', 'overflow-y':'auto'});
     }, 300);
+    CodeMirror.commands.save = function(cm){
+        $('button[ng-click="save()"]').click();
+    }
+    $(window).on('keydown', function(event) {
+        if (event.which == 113) { // F2
+            $('.btn[ng-click="renameFile()"]').click();
+        } else {
+            //console.log(event);
+        }
+    });
+    $(window).on('keyup', function(event){
+        if (event.which == 84 && event.ctrlKey && event.altKey) { // ctrl-alt-t
+            var $s = $('.source textarea'), $p = $('.params textarea');
+            if ($s.is(':focus')) {
+                $p.focus();
+            } else {
+                $s.focus();
+            }
+        } else if (event.altKey && (47 < event.which) && (58 > event.which)) {
+            //alt 1 -> alt 10
+            var id = event.which - 48; 
+            if (id == 0) id = 10;
+            $('ul.nav-tabs li:nth-child(' + id + ') a').trigger('click');
+        }
+    });
 </script>
 
 

diff --git a/angular-seed/app/partials/embed.html b/angular-seed/app/partials/embed.html
@@ -2,6 +2,12 @@
     <div class="source">
         <div class="slight-buttons pull-right toolbar">
             <span ng-show="getActiveFile()">
+                <a id="view_in_fiddle" class="btn" target="new" title="View in rythmfiddle" ng-href="/editor/#/editor/{{currentCode.id}}" data-id="{{currentCode.id}}">
+                    View in Fiddle <i class="icon-cloud"></i>
+                </a>
+                <a id="view_in_fullscreen" class="btn" target="_blank" title="View in new tab" ng-href="/embed/#/{{currentCode.id}}" data-id="{{currentCode.id}}">
+                    <i class="icon-folder-close-alt"></i>
+                </a>
                 <span class="btn" title="Add new template" ng-click="newFile()">
                     <i class="icon-plus"></i>
                 </span>

diff --git a/angular-seed/app/partials/save_dialog.html b/angular-seed/app/partials/save_dialog.html
@@ -4,7 +4,7 @@
         <div class="control-group">
             <label class="control-label">Brief description: </label>
             <div class="controls">
-                <input type="text" ng-model="code.desc"/>
+                <input type="text" ng-model="code.desc" autofocus="autofocus" ui-keypress="{enter: 'save()'}"/>
             </div>
         </div>
         <div class="control-group">

diff --git a/app/common/Helper.java b/app/common/Helper.java
@@ -1,7 +1,7 @@
 package common;
 
 import com.google.gson.Gson;
-import com.greenlaw110.rythm.utils.S;
+import org.rythmengine.utils.S;
 import models.Code;
 
 import java.util.HashMap;

diff --git a/app/controllers/Application.java b/app/controllers/Application.java
@@ -1,7 +1,7 @@
 package controllers;
 
 import com.google.gson.Gson;
-import com.greenlaw110.rythm.utils.S;
+import org.rythmengine.utils.S;
 import common.CodeManager;
 import common.Helper;
 import models.Code;