Adding syntax highlighting to Shape Tracing

--HG--
branch : dev
This commit is contained in:
Sebastien Ros
2011-03-08 13:18:58 -08:00
parent c13cb4d7d2
commit 84d221c203
5 changed files with 101 additions and 70 deletions

View File

@@ -18,6 +18,7 @@
<OldToolsVersion>3.5</OldToolsVersion>
<UpgradeBackupLocation />
<TargetFrameworkProfile />
<UseIISExpress>false</UseIISExpress>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
<DebugSymbols>true</DebugSymbols>
@@ -60,7 +61,16 @@
<Reference Include="System.Xml.Linq" />
</ItemGroup>
<ItemGroup>
<Content Include="Styles\images\menu-glyph.png" />
<Content Include="Scripts\CodeMirror\codemirror.js" />
<Content Include="Scripts\CodeMirror\css.js" />
<Content Include="Scripts\CodeMirror\htmlmixed.js" />
<Content Include="Scripts\CodeMirror\javascript.js" />
<Content Include="Scripts\CodeMirror\razor.js" />
<Content Include="Styles\CodeMirror\codemirror.css" />
<Content Include="Styles\CodeMirror\razor.css" />
<Content Include="Styles\CodeMirror\css.css" />
<Content Include="Styles\CodeMirror\javascript.css" />
<Content Include="Styles\Images\menu-glyph.png" />
<Content Include="Scripts\orchard-designertools-shapetracing.js" />
<Content Include="Styles\orchard-designertools-shapetracing.css" />
<Content Include="Web.config">

View File

@@ -68,6 +68,12 @@
var wrapper = _this.parent().parent().first();
wrapper.children('.content').children().toggle(false);
wrapper.children('.content').children('div' + selector).toggle(true);
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%" });
}
});
}

View File

@@ -46,7 +46,7 @@
min-height:20px;
}
.debug-shapes body {
.debug-shapes body {
margin-top:25px;
}
@@ -131,8 +131,8 @@ ul.debuggerMenu { margin:8px 0 -8px 0; }
padding: 20px;
margin:8px 0 0 0;
border: 1px solid #e4e5e6;
height:10em;
overflow:scroll;
height:12em;
overflow:auto;
/*CSS3 properties*/
border-radius: 3px;
-webkit-border-radius: 3px;
@@ -206,3 +206,7 @@ h3:hover
-moz-transform:rotate(90deg) translate(3px, 3px);
transform:rotate(90deg) translate(3px, 3px);
}
.content textarea {
height:50%;
}

View File

@@ -5,57 +5,57 @@
}
<div class="shape-tracing meta shapeId-@Model.ShapeId" style="display:none">
<ul class="debuggerMenu">
<li class="shape selected first"><a href="#">Shape</a></li>
<li class="model middle"><a href="#">Model</a></li>
<li class="placement middle"><a href="#">Placement</a></li>
<li class="templates middle"><a href="#">Templates</a></li>
<li class="source middle"><a href="#">Source</a></li>
<li class="html last"><a href="#">HTML</a></li>
</ul>
<ul class="debuggerMenu">
<li class="shape selected first"><a href="#">Shape</a></li>
<li class="model middle"><a href="#">Model</a></li>
<li class="placement middle"><a href="#">Placement</a></li>
<li class="templates middle"><a href="#">Templates</a></li>
<li class="source middle"><a href="#">Source</a></li>
<li class="html last"><a href="#">HTML</a></li>
</ul>
<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 />
</div>
<div class="model" style="display:none">
@(new MvcHtmlString(@Model.Dump))
</div>
<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 />
</div>
<div class="model" style="display:none">
@(new MvcHtmlString(@Model.Dump))
</div>
<div class="placement" style="display:none">
<pre>@Model.PlacementContent</pre>
</div>
<div class="placement" style="display:none">
<textarea id="placement-@Model.ShapeId" name="placement-@Model.ShapeId">@Model.PlacementContent</textarea>
</div>
<div class="templates" style="display:none">
<div class="alternates">
<span>Alternates</span>
@foreach(var alternate in Model.Alternates) {
var formatted = @FormatShapeFilename(alternate, WorkContext.CurrentTheme.Id);
<div>@formatted</div>
}
</div>
<div class="wrappers">
<span >Wrappers</span>
@foreach(var wrapper in Model.Wrappers) {
if(wrapper != "ShapeTracing_Wrapper") {
var formatted = @FormatShapeFilename(wrapper, WorkContext.CurrentTheme.Id);
<div>@formatted</div>
}
}
</div>
</div>
<div class="templates" style="display:none">
<div class="alternates">
<span>Alternates</span>
@foreach(var alternate in Model.Alternates) {
var formatted = @FormatShapeFilename(alternate, WorkContext.CurrentTheme.Id);
<div>@formatted</div>
}
</div>
<div class="wrappers">
<span >Wrappers</span>
@foreach(var wrapper in Model.Wrappers) {
if(wrapper != "ShapeTracing_Wrapper") {
var formatted = @FormatShapeFilename(wrapper, WorkContext.CurrentTheme.Id);
<div>@formatted</div>
}
}
</div>
</div>
<div class="source" style="display:none">
<pre>@Model.DefinitionContent</pre>
</div>
<div class="source" style="display:none">
<textarea id="source-@Model.ShapeId" name="source-@Model.ShapeId">@Model.DefinitionContent</textarea>
</div>
<div class="html" style="display:none">
<pre>@HttpUtility.HtmlEncode(Display(Model.ChildContent))</pre>
</div>
</div>
<div class="html" style="display:none">
<textarea id="html-@Model.ShapeId" name="html-@Model.ShapeId">@HttpUtility.HtmlEncode(Display(Model.ChildContent))</textarea>
</div>
</div>
</div>

View File

@@ -7,25 +7,36 @@
Script.Require("jQueryUI_Tabs");
Script.Include("orchard-designertools-shapetracing.js");
Style.Include("orchard-designertools-shapetracing.css");
// Code Mirror
Script.Include("CodeMirror/codemirror.js");
Style.Include("CodeMirror/codemirror.css");
Script.Include("CodeMirror/razor.js");
Style.Include("CodeMirror/razor.css");
Script.Include("CodeMirror/javascript.js");
Style.Include("CodeMirror/javascript.css");
Script.Include("CodeMirror/css.js");
Style.Include("CodeMirror/css.css");
Script.Include("CodeMirror/htmlmixed.js");
}
<div class="shape-tracing wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode() " title="@Model.Metadata.Type">
@Display(Model.Metadata.ChildContent)
@{
Layout.Zones["Tail"].Add(
New.ShapeTracingMeta(
ShapeType: Model.Metadata.Type,
Definition: Model._Definition,
DefinitionContent: Model._DefinitionContent,
DisplayType: Model.Metadata.DisplayType,
Position: Model.Metadata.Position,
PlacementSource: Model.Metadata.PlacementSource,
Dump: Model._Dump,
PlacementContent: Model.PlacementContent,
Alternates: Model.Metadata.Alternates,
Wrappers: Model.Metadata.Wrappers,
ChildContent: Model.Metadata.ChildContent,
ShapeId: Model.GetHashCode()
));
}
@Display(Model.Metadata.ChildContent)
@{
Layout.Zones["Tail"].Add(
New.ShapeTracingMeta(
ShapeType: Model.Metadata.Type,
Definition: Model._Definition,
DefinitionContent: Model._DefinitionContent,
DisplayType: Model.Metadata.DisplayType,
Position: Model.Metadata.Position,
PlacementSource: Model.Metadata.PlacementSource,
Dump: Model._Dump,
PlacementContent: Model.PlacementContent,
Alternates: Model.Metadata.Alternates,
Wrappers: Model.Metadata.Wrappers,
ChildContent: Model.Metadata.ChildContent,
ShapeId: Model.GetHashCode()
));
}
</div>