launcher/src/main/resources/org/apidesign/bck2brwsr/dew/js/app.js
author phrebejk
Tue, 22 Jan 2013 19:48:10 +0100
branchdew
changeset 542 7400dc9f48fb
parent 541 927a5f9fa430
permissions -rw-r--r--
Error badges + auto reload.
     1 // 'use strict';
     2 
     3 // Declare app level module which depends on filters, and services
     4 angular.module('bck2brwsr', []).
     5   directive('uiCodemirror', ['$timeout', function($timeout) {
     6         'use strict';
     7 
     8         var events = ["cursorActivity", "viewportChange", "gutterClick", "focus", "blur", "scroll", "update"];
     9         return {
    10             restrict: 'A',
    11             require: 'ngModel',
    12             link: function(scope, elm, attrs, ngModel) {
    13                 var options, opts, onChange, deferCodeMirror, codeMirror, timeoutId, val;
    14 
    15                 if (elm[0].type !== 'textarea') {
    16                     throw new Error('uiCodemirror3 can only be applied to a textarea element');
    17                 }
    18 
    19                 options = /* uiConfig.codemirror  || */ {};
    20                 opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror));
    21 
    22                 onChange = function(instance, changeObj) {                    
    23                     val = instance.getValue();
    24                     $timeout.cancel(timeoutId);
    25                     timeoutId = $timeout(function() {
    26                         ngModel.$setViewValue(val);                        
    27                       }, 500);                    
    28                 };
    29                 
    30                 deferCodeMirror = function() {
    31                     codeMirror = CodeMirror.fromTextArea(elm[0], opts);
    32                     elm[0].codeMirror = codeMirror;
    33                     // codeMirror.on("change", onChange(opts.onChange));
    34                     codeMirror.on("change", onChange);
    35 
    36                     for (var i = 0, n = events.length, aEvent; i < n; ++i) {
    37                         aEvent = opts["on" + events[i].charAt(0).toUpperCase() + events[i].slice(1)];
    38                         if (aEvent === void 0)
    39                             continue;
    40                         if (typeof aEvent !== "function")
    41                             continue;
    42                                                 
    43                         var bound = _.bind( aEvent, scope );
    44                         
    45                         codeMirror.on(events[i], bound);
    46                     }
    47 
    48                     // CodeMirror expects a string, so make sure it gets one.
    49                     // This does not change the model.
    50                     ngModel.$formatters.push(function(value) {
    51                         if (angular.isUndefined(value) || value === null) {
    52                             return '';
    53                         }
    54                         else if (angular.isObject(value) || angular.isArray(value)) {
    55                             throw new Error('ui-codemirror cannot use an object or an array as a model');
    56                         }
    57                         return value;
    58                     });
    59 
    60                     // Override the ngModelController $render method, which is what gets called when the model is updated.
    61                     // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
    62                     ngModel.$render = function() {
    63                         codeMirror.setValue(ngModel.$viewValue);
    64                     };
    65 
    66                 };
    67 
    68                 $timeout(deferCodeMirror);
    69 
    70             }
    71         };
    72 }]);
    73 
    74 function DevCtrl( $scope, $http ) {
    75     var templateHtml = "<html><body>\n"
    76         + " <button id='btn'>Hello!</button>\n"
    77         + " <hr/>\n"
    78         + "\n"
    79         + "\n"
    80         + "\n"
    81         + "\n"
    82         + "\n"
    83         + "\n"
    84         + "\n"
    85         + "\n"
    86         + "\n"
    87         + "\n"
    88         + "\n"
    89         + "\n"
    90         + "\n"
    91         + "\n"
    92         + "\n"
    93         + "\n"
    94         + "\n"
    95         + "\n"
    96         + "\n"
    97         + "\n"
    98         + " <script src=\"/bck2brwsr.js\"></script>\n"
    99         + " <script type=\"text/javascript\">\n"
   100         + "   function ldCls(res) {\n"
   101         + "     var request = new XMLHttpRequest();\n"
   102         + "     request.open('GET', '/classes/' + res, false);\n"
   103         + "     request.send();\n"
   104         + "     var arr = eval('(' + request.responseText + ')');\n"
   105         + "     return arr;\n"
   106         + "   }\n"
   107         + "   var vm = new bck2brwsr(ldCls);\n"
   108         + "   vm.loadClass('bck2brwsr.demo.Index');\n"
   109         + " </script>\n"
   110         + "</body></html>\n";
   111     var templateJava = "package bck2brwsr.demo;\n"
   112         + "import org.apidesign.bck2brwsr.htmlpage.api.*;\n"
   113         + "import static org.apidesign.bck2brwsr.htmlpage.api.OnEvent.*;\n"
   114         + "@Page(xhtml=\"index.html\", className=\"Index\")\n"
   115         + "class YourFirstHTML5PageInRealLanguage {\n"
   116         + "   @On(event=CLICK, id=\"btn\") static void clcs() {\n"
   117         + "     Element.alert(\"Hello World!\");\n"
   118         + "     Index.BTN.setDisabled(true);\n"
   119         + "   }\n"
   120         + "}\n";
   121 
   122     
   123     $scope.makeMarker = function( editor, line ) {
   124         var marker = document.createElement("div");
   125         marker.innerHTML = " ";
   126         marker.className = "issue";
   127         
   128         var info = editor.lineInfo(line);
   129         editor.setGutterMarker(line, "issues", info.markers ? null : marker);
   130         
   131         return marker;
   132     };
   133     
   134     
   135     // Returns a function, that, as long as it continues to be invoked, will not
   136     // be triggered. The function will be called after it stops being called for
   137     // N milliseconds. If `immediate` is passed, trigger the function on the
   138     // leading edge, instead of the trailing.
   139     $scope.debounce = function(func, wait, immediate) {
   140       var timeout, result;
   141       return function() {
   142         var context = this, args = arguments;
   143         var later = function() {
   144           timeout = null;
   145           if (!immediate) result = func.apply(context, args);
   146         };
   147         var callNow = immediate && !timeout;
   148         clearTimeout(timeout);
   149         timeout = setTimeout(later, wait);
   150         if (callNow) result = func.apply(context, args);
   151         return result;
   152       };
   153     };
   154     
   155     $scope.reload = function() {
   156         $scope.errors = null;
   157         var frame = document.getElementById("result");        
   158         frame.src = "result.html";
   159         frame.contentDocument.location.reload(true);
   160         frame.contentWindow.location.reload();
   161         document.getElementById("editorJava").codeMirror.clearGutter("issues");   
   162     };
   163     
   164     $scope.fail = function( data ) {
   165         $scope.errors = eval( data );
   166         var editor = document.getElementById("editorJava").codeMirror;   
   167         editor.clearGutter( "issues" );
   168         
   169         for( var i = 0; i < $scope.errors.length; i ++ ) {
   170             $scope.makeMarker( editor, $scope.errors[i].line - 1 );
   171         }
   172         
   173     };
   174     
   175     $scope.post = function() {
   176         return $http({url: ".",
   177             method: "POST",
   178             //headers: this.headers,
   179             data: { html : $scope.html, java : $scope.java} 
   180         }).success( $scope.reload ).error( $scope.fail );
   181     };
   182     
   183     $scope.errorClass = function( kind ) {
   184         switch( kind ) {
   185             case "ERROR" :
   186                 return "error";
   187             default :         
   188                 return "warning";   
   189         }
   190     };
   191     
   192     $scope.gotoError = function( line, col ) {
   193         var editor = document.getElementById("editorJava").codeMirror;   
   194         editor.setCursor({ line: line - 1, ch : col - 1 });
   195         editor.focus();
   196     };
   197     
   198     $scope.tab = "html";
   199     $scope.html= templateHtml;  
   200     $scope.java = templateJava;  
   201     
   202     $scope.$watch( "html", $scope.debounce( $scope.post, 2000 ) );
   203     $scope.$watch( "java", $scope.debounce( $scope.post, 2000 ) );
   204     $scope.post();
   205     
   206 }