Add codeview

draft/library/wsf_js_widget/kernel/input/wsf_codeview_control.e

@@ -0,0 +1,17 @@
+note
+	description: "Summary description for {WSF_CODEVIEW_CONTROL}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+class
+	WSF_CODEVIEW_CONTROL
+
+inherit
+	WSF_TEXTAREA_CONTROL
+		rename
+			make_textarea as make_codeview
+		end
+create
+	make_codeview
+end

draft/library/wsf_js_widget/kernel/webcontrol/wsf_control.e

@@ -49,6 +49,18 @@ feature -- Actions
 			actions.add (modal)
 		end
 
+	start_modal_big(url:STRING; title:STRING)
+		--Start a modal window containg an other or the same page
+		local
+			modal:WSF_JSON_OBJECT
+		do
+			create modal.make
+			modal.put_string ("start_modal_big", "type")
+			modal.put_string (url, "url")
+			modal.put_string (title, "title")
+			actions.add (modal)
+		end
+
 	show_alert(mesage:STRING)
 		--Start a modal window containg an other or the same page
 		local

draft/library/wsf_js_widget/kernel/webcontrol/wsf_page_control.e

@@ -111,7 +111,7 @@ feature -- Implementation
 				Result.append ("<script src=%"assets/widget.js%"></script>")
 				Result.append ("<script type=%"text/javascript%">$(function() {var page= new WSF_PAGE_CONTROL(")
 				Result.append (full_state.representation)
-				Result.append (");page.attach_events();});</script>")
+				Result.append (");page.initialize();});</script>")
 				Result.append ("</body></html>")
 			else
 				Result.append ("<div data-name=%"" + control_name + "%" data-type=%"WSF_PAGE_CONTROL%">")

examples/widgetapp/application.e

@@ -81,6 +81,7 @@ feature -- Router and Filter
 			map_agent_uri ("/grid", agent grid_demo, Void)
 			map_agent_uri ("/repeater", agent repeater_demo, Void)
 			map_agent_uri ("/slider", agent slider_demo, Void)
+			map_agent_uri ("/codeview", agent codeview, Void)
 
 				-- NOTE: you could put all those files in a specific folder, and use WSF_FILE_SYSTEM_HANDLER with "/"
 				-- this way, it handles the caching and so on
@@ -136,5 +137,15 @@ feature -- Execution
 			page.execute
 		end
 
+	codeview (request: WSF_REQUEST; response: WSF_RESPONSE)
+		local
+			page: CODEVIEW_PAGE
+		do
+				-- To send a response we need to setup, the status code and
+				-- the response headers.
+			create page.make (request, response)
+			page.execute
+		end
+
 
 end

examples/widgetapp/assets/codemirror/codemirror.css

@@ -0,0 +1,263 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+}
+.CodeMirror-scroll {
+  /* Set scrolling behaviour here */
+  overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+}
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+  z-index: 3;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+  z-index: 1;
+}
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
+
+.cm-tab { display: inline-block; }
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: black;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px; padding-right: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.CodeMirror-sizer {
+  position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  padding-bottom: 30px;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-code pre {
+  border-right: 30px solid transparent;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.CodeMirror-wrap .CodeMirror-code pre {
+  border-right: none;
+  width: auto;
+}
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  visibility: hidden;
+  border-right: none;
+  width: 0;
+}
+.CodeMirror-focused div.CodeMirror-cursor {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursor {
+    visibility: hidden;
+  }
+}

examples/widgetapp/assets/codemirror/eiffel.js

@@ -0,0 +1,148 @@
+CodeMirror.defineMode("eiffel", function() {
+  function wordObj(words) {
+    var o = {};
+    for (var i = 0, e = words.length; i < e; ++i) o[words[i]] = true;
+    return o;
+  }
+  var keywords = wordObj([
+    'note',
+    'across',
+    'when',
+    'variant',
+    'until',
+    'unique',
+    'undefine',
+    'then',
+    'strip',
+    'select',
+    'retry',
+    'rescue',
+    'require',
+    'rename',
+    'reference',
+    'redefine',
+    'prefix',
+    'once',
+    'old',
+    'obsolete',
+    'loop',
+    'local',
+    'like',
+    'is',
+    'inspect',
+    'infix',
+    'include',
+    'if',
+    'frozen',
+    'from',
+    'external',
+    'export',
+    'ensure',
+    'end',
+    'elseif',
+    'else',
+    'do',
+    'creation',
+    'create',
+    'check',
+    'alias',
+    'agent',
+    'separate',
+    'invariant',
+    'inherit',
+    'indexing',
+    'feature',
+    'expanded',
+    'deferred',
+    'class',
+    'Void',
+    'True',
+    'Result',
+    'Precursor',
+    'False',
+    'Current',
+    'create',
+    'attached',
+    'detachable',
+    'as',
+    'and',
+    'implies',
+    'not',
+    'or'
+  ]);
+  var operators = wordObj([":=", "and then","and", "or","<<",">>"]);
+  var curPunc;
+
+  function chain(newtok, stream, state) {
+    state.tokenize.push(newtok);
+    return newtok(stream, state);
+  }
+
+  function tokenBase(stream, state) {
+    curPunc = null;
+    if (stream.eatSpace()) return null;
+    var ch = stream.next();
+    if (ch == '"'||ch == "'") {
+      return chain(readQuoted(ch, "string"), stream, state);
+    } else if (ch == "-"&&stream.eat("-")) {
+      stream.skipToEnd();
+      return "comment";
+    } else if (ch == ":"&&stream.eat("=")) {
+      return "operator";
+    } else if (/[0-9]/.test(ch)) {
+      stream.eatWhile(/[xXbBCc0-9\.]/);
+      stream.eat(/[\?\!]/);
+      return "ident";
+    } else if (/[a-zA-Z_0-9]/.test(ch)) {
+      stream.eatWhile(/[a-zA-Z_0-9]/);
+      stream.eat(/[\?\!]/);
+      return "ident";
+    } else if (/[=+\-\/*^%<>~]/.test(ch)) {
+      stream.eatWhile(/[=+\-\/*^%<>~]/);
+      return "operator";
+    } else {
+      return null;
+    }
+  }
+
+  function readQuoted(quote, style,  unescaped) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && (unescaped || !escaped)) {
+          state.tokenize.pop();
+          break;
+        }
+        escaped = !escaped && ch == "%";
+      }
+      return style;
+    };
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: [tokenBase]};
+    },
+
+    token: function(stream, state) {
+      var style = state.tokenize[state.tokenize.length-1](stream, state);
+      if (style == "ident") {
+        var word = stream.current();
+        style = keywords.propertyIsEnumerable(stream.current()) ? "keyword"
+          : operators.propertyIsEnumerable(stream.current()) ? "operator"
+          : /^[A-Z][A-Z_0-9]*$/g.test(word) ? "tag"
+          : /^0[bB][0-1]+$/g.test(word) ? "number"
+          : /^0[cC][0-7]+$/g.test(word) ? "number"
+          : /^0[xX][a-fA-F0-9]+$/g.test(word) ? "number"
+          : /^([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)$/g.test(word) ? "number"
+          : /^[0-9]+$/g.test(word) ? "number"
+          : "variable";
+      }
+      return style;
+    },
+    lineComment: "--"
+  };
+});
+
+CodeMirror.defineMIME("text/x-eiffel", "eiffel");
+

examples/widgetapp/assets/codemirror/estudio.css

@@ -0,0 +1,8 @@
+.cm-s-estudio .cm-keyword {color: #000080; font-weight: bold;}
+
+.cm-s-estudio .cm-number {color: #8f02ff;}
+.cm-s-estudio .cm-variable {color: black;}
+.cm-s-estudio .cm-operator {color: #ff000d;}
+.cm-s-estudio .cm-comment {color: #800019;}
+.cm-s-estudio .cm-string {color: #008080;}
+.cm-s-estudio .cm-tag {color: #0000ff;}

examples/widgetapp/assets/widget.coffee

@@ -1,12 +1,50 @@
 #IMPORTANT PLEASE COMPILE WITH:: coffee -cbw widget.coffee
 cache = {}
-jQuery.cachedScript = (url, options) ->
+jQuery.cachedAsset = (url, options) ->
-  options = $.extend(options or {},
+  if /\.css$/.test(url)
-    dataType: "script"
+    $("<link/>",
-    cache: true
+      rel: "stylesheet"
-    url: url
+      type: "text/css"
-  )
+      href: url
-  jQuery.ajax options
+    ).appendTo("head")
+    return {
+      done:(fn)->
+        fn()
+    }
+  else
+    success = []
+    head = document.head or document.getElementsByTagName('head')[0] or
+      document.documentElement
+    script = document.createElement 'script'
+    script.async = 'async'
+    script.src   = url
+    successful = false
+    onload = (_, aborted = false) ->
+      return unless (aborted or
+      not script.readyState or script.readyState is 'complete')
+      clearTimeout timeoutHandle
+      script.onload = script.onreadystatechange = script.onerror = null
+      head.removeChild(script) if head and script.parentNode
+      script = undefined
+      if success and not aborted
+        successful = true
+        for s in success
+          s()
+        success = []
+    script.onload = script.onreadystatechange = onload
+    script.onerror = ->
+      onload null, true
+    timeoutHandle = setTimeout script.onerror, 7500
+    head.insertBefore script, head.firstChild
+    return {
+      done:(fn)->
+        if not successful
+          success.push(fn)
+        else
+          fn()
+        return 
+      }
+
 jQuery.unparam = (value) ->
   params = {}
   pieces = value.split("&")
@@ -33,6 +71,11 @@ Mini =
     }
 loaded = {}
 lazy_load = (requirements,fn,that)->
+  if requirements.length == 0
+    return ()->
+      a = arguments
+      fn.apply(that,a)
+
   if not that?
     that = window
   return ()->
@@ -47,12 +90,10 @@ lazy_load = (requirements,fn,that)->
           fn.apply(that,a)
         return
     for r in requirements
-      if loaded[r]?
+      if not loaded[r]?
-        done()
+        loaded[r]=$.cachedAsset(r)
-      else  
+      loaded[r].done(done)
-        $.cachedScript(r).done ()->
+            
-          done()
-          loaded[r] = true
     done()
 
 build_control = (control_name, state, control)->
@@ -266,8 +307,31 @@ class WSF_INPUT_CONTROL extends WSF_CONTROL
 
 class WSF_TEXTAREA_CONTROL extends WSF_INPUT_CONTROL
 
+class WSF_CODEVIEW_CONTROL extends WSF_INPUT_CONTROL
+  constructor:()->
+    super
+    #load codemirror and then eiffel syntax
+    @initialize = lazy_load ['assets/codemirror/codemirror.js','assets/codemirror/codemirror.css','assets/codemirror/estudio.css'],
+                            (lazy_load ['assets/codemirror/eiffel.js'], @attach_events, @), 
+                            @
+
+  attach_events: () ->
+    super 
+    @editor = CodeMirror.fromTextArea(@$el[0], {
+        mode: "eiffel",
+        tabMode: "indent",
+        indentUnit: 4,
+        lineNumbers: true,
+        theme:'estudio'
+      })
+    @editor.setSize("100%",700)
+  remove: ()->
+    @editor.toTextArea()
+    super
+
 class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
   requirements: ['assets/typeahead.min.js']
+
   attach_events: () ->
     super
     self = @
@@ -471,8 +535,11 @@ show_alert = (action)->
     alert(action.message)
 
 start_modal = lazy_load ['assets/bootstrap.min.js'], (action)->
+  cssclass = ""
+  if action.type == "start_modal_big"
+    cssclass = " big"
   modal = $("""<div class="modal fade">
-  <div class="modal-dialog">
+  <div class="modal-dialog#{cssclass}">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -495,3 +562,4 @@ start_modal = lazy_load ['assets/bootstrap.min.js'], (action)->
     .done (data) ->
       modal.find('.modal-body').append(data)
 
+start_modal_big = start_modal

examples/widgetapp/assets/widget.css

@@ -76,3 +76,25 @@ body {
 .tt-suggestion p {
     margin: 0;
 
+}
+
+
+@media (min-width:768px) and (max-width:991px){
+    .big{
+        width:100%;
+    }
+}
+@media (min-width:992px) and (max-width:1199px){
+    .big{
+        width:982px;
+        }
+}
+@media (min-width:1200px){
+    .big{
+        width:1190px;
+    }
+}
+
+.CodeMirror-code{
+    line-height: 1.4em;
+}

examples/widgetapp/assets/widget.js

@@ -1,17 +1,69 @@
 // Generated by CoffeeScript 1.6.1
-var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, show_alert, start_modal, template, tmpl,
+var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CODEVIEW_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, show_alert, start_modal, start_modal_big, template, tmpl,
   __hasProp = {}.hasOwnProperty,
   __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
 cache = {};
 
-jQuery.cachedScript = function(url, options) {
+jQuery.cachedAsset = function(url, options) {
-  options = $.extend(options || {}, {
+  var head, onload, script, success, successful, timeoutHandle;
-    dataType: "script",
+  if (/\.css$/.test(url)) {
-    cache: true,
+    $("<link/>", {
-    url: url
+      rel: "stylesheet",
-  });
+      type: "text/css",
-  return jQuery.ajax(options);
+      href: url
+    }).appendTo("head");
+    return {
+      done: function(fn) {
+        return fn();
+      }
+    };
+  } else {
+    success = [];
+    head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+    script = document.createElement('script');
+    script.async = 'async';
+    script.src = url;
+    successful = false;
+    onload = function(_, aborted) {
+      var s, _i, _len;
+      if (aborted == null) {
+        aborted = false;
+      }
+      if (!(aborted || !script.readyState || script.readyState === 'complete')) {
+        return;
+      }
+      clearTimeout(timeoutHandle);
+      script.onload = script.onreadystatechange = script.onerror = null;
+      if (head && script.parentNode) {
+        head.removeChild(script);
+      }
+      script = void 0;
+      if (success && !aborted) {
+        successful = true;
+        for (_i = 0, _len = success.length; _i < _len; _i++) {
+          s = success[_i];
+          s();
+        }
+        return success = [];
+      }
+    };
+    script.onload = script.onreadystatechange = onload;
+    script.onerror = function() {
+      return onload(null, true);
+    };
+    timeoutHandle = setTimeout(script.onerror, 7500);
+    head.insertBefore(script, head.firstChild);
+    return {
+      done: function(fn) {
+        if (!successful) {
+          success.push(fn);
+        } else {
+          fn();
+        }
+      }
+    };
+  }
 };
 
 jQuery.unparam = function(value) {
@@ -52,6 +104,13 @@ Mini = {
 loaded = {};
 
 lazy_load = function(requirements, fn, that) {
+  if (requirements.length === 0) {
+    return function() {
+      var a;
+      a = arguments;
+      return fn.apply(that, a);
+    };
+  }
   if (that == null) {
     that = window;
   }
@@ -71,14 +130,10 @@ lazy_load = function(requirements, fn, that) {
     };
     for (_i = 0, _len = requirements.length; _i < _len; _i++) {
       r = requirements[_i];
-      if (loaded[r] != null) {
+      if (loaded[r] == null) {
-        done();
+        loaded[r] = $.cachedAsset(r);
-      } else {
-        $.cachedScript(r).done(function() {
-          done();
-          return loaded[r] = true;
-        });
       }
+      loaded[r].done(done);
     }
     return done();
   };
@@ -463,6 +518,36 @@ WSF_TEXTAREA_CONTROL = (function(_super) {
 
 })(WSF_INPUT_CONTROL);
 
+WSF_CODEVIEW_CONTROL = (function(_super) {
+
+  __extends(WSF_CODEVIEW_CONTROL, _super);
+
+  function WSF_CODEVIEW_CONTROL() {
+    WSF_CODEVIEW_CONTROL.__super__.constructor.apply(this, arguments);
+    this.initialize = lazy_load(['assets/codemirror/codemirror.js', 'assets/codemirror/codemirror.css', 'assets/codemirror/estudio.css'], lazy_load(['assets/codemirror/eiffel.js'], this.attach_events, this), this);
+  }
+
+  WSF_CODEVIEW_CONTROL.prototype.attach_events = function() {
+    WSF_CODEVIEW_CONTROL.__super__.attach_events.apply(this, arguments);
+    this.editor = CodeMirror.fromTextArea(this.$el[0], {
+      mode: "eiffel",
+      tabMode: "indent",
+      indentUnit: 4,
+      lineNumbers: true,
+      theme: 'estudio'
+    });
+    return this.editor.setSize("100%", 700);
+  };
+
+  WSF_CODEVIEW_CONTROL.prototype.remove = function() {
+    this.editor.toTextArea();
+    return WSF_CODEVIEW_CONTROL.__super__.remove.apply(this, arguments);
+  };
+
+  return WSF_CODEVIEW_CONTROL;
+
+})(WSF_INPUT_CONTROL);
+
 WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
 
   __extends(WSF_AUTOCOMPLETE_CONTROL, _super);
@@ -822,8 +907,12 @@ show_alert = function(action) {
 };
 
 start_modal = lazy_load(['assets/bootstrap.min.js'], function(action) {
-  var modal;
+  var cssclass, modal;
-  modal = $("<div class=\"modal fade\">\n<div class=\"modal-dialog\">\n  <div class=\"modal-content\">\n    <div class=\"modal-header\">\n      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n      <h4 class=\"modal-title\">" + action.title + "</h4>\n    </div>\n    <div class=\"modal-body\">\n    \n    </div>\n  </div>\n</div>\n</div>");
+  cssclass = "";
+  if (action.type === "start_modal_big") {
+    cssclass = " big";
+  }
+  modal = $("<div class=\"modal fade\">\n<div class=\"modal-dialog" + cssclass + "\">\n  <div class=\"modal-content\">\n    <div class=\"modal-header\">\n      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n      <h4 class=\"modal-title\">" + action.title + "</h4>\n    </div>\n    <div class=\"modal-body\">\n    \n    </div>\n  </div>\n</div>\n</div>");
   modal.appendTo('body');
   modal.modal('show');
   modal.on('hidden.bs.modal', function() {
@@ -837,3 +926,5 @@ start_modal = lazy_load(['assets/bootstrap.min.js'], function(action) {
     return modal.find('.modal-body').append(data);
   });
 });
+
+start_modal_big = start_modal;

examples/widgetapp/base_page.e

@@ -10,8 +10,8 @@ deferred class
 inherit
 
 	WSF_PAGE_CONTROL
-	redefine
+		redefine
-		control
+			control
 		end
 
 feature
@@ -19,6 +19,7 @@ feature
 	initialize_controls
 		local
 			navbar: WSF_NAVBAR_CONTROL
+			btn: WSF_BUTTON_CONTROL
 		do
 			create control.make_multi_control ("container")
 			control.add_class ("container")
@@ -27,12 +28,21 @@ feature
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/grid%"", "Grid"))
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/repeater%"", "Repeater"))
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/slider%"", "Image Slider"))
-			navbar.add_list_element_right (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"#%"", "About"))
+			create btn.make_button ("scode", "Show Code")
+			btn.set_click_event (agent show_code)
+			btn.set_isolation (true)
+			btn.add_class ("btn-success") 
+			control.add_control (btn)
 			if not attached get_parameter ("ajax") then
 				control.add_control (navbar)
 			end
 		end
 
+	show_code
+		do
+			start_modal_big ("/codeview?file=" + generator.as_lower, "Eiffel code " + generator)
+		end
+
 feature
 
 	control: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]

examples/widgetapp/codeview_page.e

@@ -0,0 +1,45 @@
+note
+	description: "Summary description for {CODEVIEW_PAGE}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+class
+	CODEVIEW_PAGE
+
+inherit
+
+	WSF_PAGE_CONTROL
+		redefine
+			control
+		end
+create
+	make
+
+feature
+
+	initialize_controls
+		do
+			create control.make_codeview ("textarea", "")
+		end
+
+	process
+			-- Function called on page load (not on callback)
+		local
+			l_file: PLAIN_TEXT_FILE
+			l_content: STRING
+		do
+			if attached get_parameter ("file") as f then
+				create l_file.make_open_read ("./"+f+".e")
+				l_file.read_stream (l_file.count)
+				l_content := l_file.last_string.twin
+				l_file.close
+				control.set_text (l_content)
+			end
+		end
+
+feature
+
+	control: WSF_CODEVIEW_CONTROL
+
+end

examples/widgetapp/sample_page.e

@@ -71,8 +71,7 @@ feature
 			form.add_control (button1)
 				--Button 2
 			create button2.make_button ("sample_button2", "Start Modal Grid")
-			button2.set_click_event (agent handle_click2)
+			button2.set_click_event (agent handle_click)
-			button2.add_class ("col-lg-offset-2")
 			form.add_control (button2)
 				--Result
 			create result_html.make_html ("txtBox3", "p", "")
@@ -88,11 +87,6 @@ feature
 			control.add_control (progress)
 		end
 
-	handle_click2
-	do
-		start_modal ("/","My first modal")
-	end
-
 	handle_click
 		local
 			text: STRING