Improving Shape Tracing syntax coloration, and fixing little bugs

--HG-- branch : dev
2026-02-09 09:16:41 +08:00 · 2011-03-09 13:49:06 -08:00
parent 67afadffb0
commit c79dfef20d
5 changed files with 114 additions and 37 deletions
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/CodeMirror/razor.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/CodeMirror/razor.js
@@ -57,11 +57,15 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
        }
        // text mode
        else if (ch == "@") {
-            state.tokenize = inRazor(inText);
-            return "razor-tag";
+            if (stream.peek() != "@") { // handle @@ escaping
+                state.tokenize = inRazor(inText);
+                return "razor-tag";
+            }
+
+            stream.next()
        }
        else {
-            stream.eatWhile(/[^&<]/);
+            stream.eatWhile(/[^&<@]/);
            return null;
        }
    }
@@ -91,12 +95,12 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
        return function (stream, state) {
            var razor = false;
            while (!stream.eol()) {
-                if (stream.next() == quote) {
-                    state.tokenize = inTag;
+                if (stream.peek() == "@") {
+                    state.tokenize = inRazorAttribute(quote);
                    break;
                }
-                else if (stream.peek() == "@") {
-                    state.tokenize = inRazor(inAttribute(quote), "xml-attribute");
+                else if (stream.next() == quote) {
+                    state.tokenize = inTag;
                    break;
                }
            }
@@ -104,6 +108,14 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
        };
    }

+    function inRazorAttribute(quote) {
+        return function (stream, state) {
+            stream.eat("@");
+            state.tokenize = inRazor(inAttribute(quote), "xml-attribute");
+            return "razor-tag";
+        }
+    }
+
    function inBlock(style, terminator) {
        return function (stream, state) {
            while (!stream.eol()) {
@@ -128,10 +140,10 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
                return "razor-keyword";
            }
            else if (stream.match("{")) {
-                state.tokenize = inRazorBlock();
+                state.tokenize = inRazorBlock(1, nextState);
            }
            else {
-                stream.eatWhile(/[^\s\'\"\<]/);
+                stream.eatWhile(/[^\s\'\"<@]/);
                state.tokenize = nextState;
            }

@@ -156,33 +168,42 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
        }
    }

-    function inRazorBlock(nestedLevel) {
+    function inRazorBlock(nestedLevel, nextState) {
        var nested = nestedLevel || 1;

        return function (stream, state) {
            while (!stream.eol()) {

                // identify keywords
-                if (stream.eatWhile(/[a-zA-Z]/)) {
+                if (stream.eatWhile(/\w/)) {
+                    state.tokenize = inRazorBlock(nested, nextState);
+
                    if (keywords[stream.current()]) {
-                        state.tokenize = inRazorBlock(nested);
+                        stream.eatSpace();
                        return "razor-keyword";
                    }
+
+                    stream.next();
+                    break;
+                }
+
+                if (stream.peek() == '"') {
+                    state.tokenize = inRazorString(inRazorBlock(nested, nextState));
+                    break;
                }

                if (stream.peek() == '{') nested++;
                if (stream.peek() == '}') nested--;

                if (nested == 0) {
-                    state.tokenize = inRazorBlockEnd;
+                    state.tokenize = inRazorBlockEnd(nextState);
                    break;
                }

-                // eat keywords separators
-                if (stream.eatWhile(/^[a-zA-Z]/)) {
-                    state.tokenize = inRazorBlock(nested);
-                    stream.next();
-                    return "razor";
+                if (stream.eatWhile(/[^\w{}\"]/)) {
+                    stream.eatSpace();
+                    state.tokenize = inRazorBlock(nested, nextState);
+                    break;
                }

                stream.next();
@@ -192,10 +213,23 @@ CodeMirror.defineMode("razor", function (config, parserConfig) {
        };
    }

-    function inRazorBlockEnd(stream, state) {
-        stream.eat("}");
-        state.tokenize = inText;
-        return "razor-tag";
+    function inRazorBlockEnd(nextState) {
+        return function (stream, state) {
+            stream.eat("}");
+            state.tokenize = nextState;
+            return "razor-tag";
+        }
+    }
+
+    function inRazorString(nextState) {
+        return function (stream, state) {
+            // when in this state, the " is not read yet
+            stream.eat('"');
+            stream.eatWhile(/[^"]/);
+            stream.eat('"');
+            state.tokenize = nextState;
+            return "razor-string";
+        }
    }

    var curState, setStyle;
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -71,7 +71,9 @@

                if (wrapper.children('.content').children('div' + selector).children('.CodeMirror').length == 0) {
                    var textArea = wrapper.children('.content').children('div' + selector).children('textarea').get(0);
-                    CodeMirror.fromTextArea(textArea, { mode: "razor", tabMode: "indent", height: "100%" });
+                    if (textArea) {
+                        CodeMirror.fromTextArea(textArea, { mode: "razor", tabMode: "indent", height: "100%", readOnly : true });
+                    }
                }

            });
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/CodeMirror/razor.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/CodeMirror/razor.css
@@ -9,3 +9,11 @@ span.xml-entity {color: #a22;}
 span.razor {background-color: rgb(236, 242, 245)}
 span.razor-tag {background-color: yellow;}
 span.razor-keyword {color: blue; background-color: rgb(236, 242, 245)}
+span.razor-string {color: rgb(163,21,21); background-color: rgb(236, 242, 245)}
+
+.CodeMirror 
+{
+    font-family:Consolas, Monospace;
+    font-size:10pt;
+    line-height:12pt;
+}
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
@@ -36,8 +36,8 @@

 .debug-shapes .shape-tracing .wrapper {
    background:#FFF;
-    border:1px dotted #CA7230;
-    margin:5px;
+    /*border:1px dotted #CA7230;
+    margin:5px;*/
    padding:0px;
    display:inline-block;

@@ -139,14 +139,14 @@ ul.debuggerMenu { margin:8px 0 -8px 0; }
    -moz-border-radius: 3px;
 }

-.meta .model div.name
+.meta .model div.name, .meta ul.properties div.name
 {
    display:block;
    float:left;
    width:30%;
 }

-.meta .model ul 
+.meta .model ul, .meta ul.properties
 {
    padding:0;
    margin-left:-15px;
@@ -154,12 +154,12 @@ ul.debuggerMenu { margin:8px 0 -8px 0; }
    list-style-type:none;
 }

-.meta .model ul li
+.meta .model ul li, .meta ul.properties li
 {
    padding-left:15px;
 }

-.meta .model h3
+.meta .model h3, .meta ul.properties h3
 {
    margin:0;
    padding:0;
@@ -183,14 +183,18 @@ h3:hover
    background-image:url(images/menu-glyph.png);
 }

-.expando-glyph-container.closed .expando-glyph {
+.expando-glyph-container.closed .expando-glyph 
+{
+    background-repeat:none;
    background-image:url(images/menu-glyph.png);
    background-position:0 3px;
 }
 .expando-glyph-container.closed .expando-glyph:hover {
    background-image:url(images/menu-glyph.png);
 }
-.expando-glyph-container.closing .expando-glyph {
+.expando-glyph-container.closing .expando-glyph 
+{
+    background-repeat:none;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
@@ -198,7 +202,9 @@ h3:hover
    -moz-transform:rotate(-90deg) translate(3px, -3px);
    transform:rotate(-90deg) translate(3px, -3px);
 }
-.expando-glyph-container.opening .expando-glyph {
+.expando-glyph-container.opening .expando-glyph 
+{
+    background-repeat:none;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml
@@ -16,11 +16,38 @@

    <div class="content">
        <div class="shape">
-            Shape: @Model.ShapeType <br />
-            Definition: @Model.Definition  <br />
-            Display Type: @(Model.DisplayType  ?? "n/a")<br />
-            Position: @(Model.Position ?? "n/a") <br />
-            Placement Source: @(Model.PlacementSource ?? "n/a") <br />
+            <ul class="properties">
+                <li>
+                    <h3>
+                        <div class="name">Shape</div>
+                        <div class="value">@Model.ShapeType</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Definition</div>
+                        <div class="value">@Model.Definition</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Display Type</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.DisplayType) ? T("n/a").Text : Model.DisplayType.ToString())</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Position</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.Position) ? T("n/a").Text : Model.Position.ToString())</div>
+                    </h3>
+                </li>
+                <li>
+                    <h3>
+                        <div class="name">Placement Source</div>
+                        <div class="value">@(String.IsNullOrEmpty((string)Model.PlacementSource) ? T("n/a").Text : Model.PlacementSource.ToString())</div>
+                    </h3>
+                </li>
+            </ul>
        </div>
            
        <div class="model" style="display:none">