From 0d83b97cc3a7118ed3d1b6dec55ba9fbf1f1c702 Mon Sep 17 00:00:00 2001 From: Sebastien Ros Date: Fri, 11 Mar 2011 15:12:53 -0800 Subject: [PATCH] Constructing shapes tree --HG-- branch : dev --- .../orchard-designertools-shapetracing.js | 77 +++++++++++++++++-- .../Services/ShapeTracingFactory.cs | 1 + .../orchard-designertools-shapetracing.css | 40 +++++++--- .../Views/ShapeTracingWrapper.cshtml | 4 +- 4 files changed, 103 insertions(+), 19 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js index c5db895ed..11c11dec1 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js @@ -6,7 +6,7 @@ '
' + '
' + '
' + - '
window
' + + '
' + '' + '
' ).appendTo('body'); @@ -65,17 +65,64 @@ $('#shape-tracing-resize-handle').addClass('ui-resizable-handle ui-resizable-n'); shapeTracingContainer.resizable({ handles: { n: '#shape-tracing-resize-handle'} }); + var shapeNodes = {}; // represents the main index of shape nodes, indexed by id + // projects the shape ids to each DOM element - var shapeTracingWrappers = $('.shape-tracing-wrapper'); - shapeTracingWrappers.each(function () { + var startShapeTracingBeacons = $('.shape-tracing-wrapper[shape-id]'); + startShapeTracingBeacons.each(function () { var _this = $(this); - var shapeId = _this.attr('shape-id'); + + var shapeNode = { + id: _this.attr('shape-id'), + type: _this.attr('shape-type'), + parent: null, + children: {} + }; + + // register the new shape node into the main shape nodes index + shapeNodes[shapeNode.id] = shapeNode; + // assign the shape-id attribute to all elements, except wrappers themselves (it would erase their own shape-id) - _this.nextUntil('[end-of="' + shapeId + '"]').find(':not(.shape-tracing-wrapper)').andSelf().attr('shape-id', shapeId); + _this + .nextUntil('[end-of="' + shapeNode.id + '"]') // all elements between the script beacons + .find(':not(.shape-tracing-wrapper)') // all children but not inner beacons + .andSelf() // add the first level items + .attr('shape-id', shapeNode.id) // add the shape-id attribute + .each(function () { + // assign a shapeNode instance to the DOM element + this.shapeNode = shapeNode; + }); + + this.shapeNode = shapeNode; }); - // removes all wrappers, by unwrapping the first element of each of them - shapeTracingWrappers.remove(); + // construct the shape tree based on all current nodes + // for each start beacon, search for the first parent beacon, and create nodes if they don't exist + startShapeTracingBeacons.each(function () { + var _this = $(this); + var shapeNode = this.shapeNode; + var parent = _this.parent('[shape-id!=' + shapeNode.id + ']').get(0); + + shapeNodes[shapeNode.id] = shapeNode; + + if (parent.shapeNode) { + var parentShapeNode = parent.shapeNode; + shapeNodes[parentShapeNode.id] = parentShapeNode; + shapeNode.parent = parentShapeNode; + parentShapeNode.children[shapeNode.id] = shapeNode; + } + }); + + // removes all beacons as we don't need them anymore + $('.shape-tracing-wrapper').remove(); + + var shapes = $(''); + for (var shapeId in shapeNodes) { + if (!shapeNodes[shapeId].parent) { + shapes.append(createTreeNode(shapeNodes[shapeId])); + } + } + shapeTracingWindow.append(shapes); //create an overlay on shapes' descendants $('[shape-id]').hover( @@ -87,6 +134,20 @@ $(this).removeClass('shape-tracing-overlay'); } ); - }); + + function createTreeNode(shapeNode) { + var node = $('
  • '); + node.text(shapeNode.type); + var list = $(''); + node.append(list); + if (shapeNode.children) { + for (var shapeId in shapeNode.children) { + var child = createTreeNode(shapeNode.children[shapeId]); + list.append(child); + } + } + return node; + } + })(jQuery); diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs index d4b61a594..28074bc10 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Services/ShapeTracingFactory.cs @@ -29,6 +29,7 @@ namespace Orchard.DesignerTools.Services { if (context.ShapeType != "Layout" && context.ShapeType != "DocumentZone" && context.ShapeType != "PlaceChildContent" + && context.ShapeType != "ContentZone" && context.ShapeType != "ShapeTracingMeta") { var shapeMetadata = (ShapeMetadata)context.Shape.Metadata; diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css index 122c74326..ae2ecbbf7 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css @@ -1,7 +1,17 @@ /* - todo: (sebros) override every css property to reset any value defined in the theme, - which could interfere with the shape-tracing window + shape tracing container styles reset + must contain all tags used in the container */ + +#shape-tracing-container ul, +#shape-tracing-container li { + background-color: #fff; + margin:0; + padding:0; + color:#000; + font-size:100%; +} + #shape-tracing-container { clear:both; display:block; @@ -21,8 +31,8 @@ #shape-tracing-toolbar { color:black; background: url(images/toolbar-bg.png) repeat-x; - height:17px; - padding-top:4px; /* total size 21px = height + padding */ + height:21px; + padding-top:4px; padding-left:5px; padding-right:5px; } @@ -39,11 +49,6 @@ background: url(images/collapse.png) no-repeat; } -#shape-tracing-window { - background-color: #343131; - height:100%; -} - /* this element is behind the stw to ensure the document is bigger and a scrollbar is added on the document so that the stw doesn't hide some content @@ -63,4 +68,21 @@ .shape-tracing-overlay { background-color:#eee; + cursor: pointer; +} + +#shape-tracing-window { + background-color: #fff; + height:100%; +} + +#shape-tracing-window li +{ + list-style-type:inherit; +} + +#shape-tracing-window ul +{ + margin-left:10px; + padding-left:10px; } diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml index 5b5aa27f4..8aa2de442 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingWrapper.cshtml @@ -7,7 +7,7 @@ Script.Require("jQueryUI_Tabs").AtHead(); Script.Require("jQueryUI_Resizable").AtHead(); Script.Include("orchard-designertools-shapetracing.js").AtHead(); - Style.Include("orchard-designertools-shapetracing.css").AtHead(); + Style.Include("orchard-designertools-shapetracing.css"); // Code Mirror Script.Include("CodeMirror/codemirror.js"); @@ -21,7 +21,7 @@ Script.Include("CodeMirror/htmlmixed.js"); } -@Display(Model.Metadata.ChildContent) +@Display(Model.Metadata.ChildContent) @{ Layout.Zones["Tail"].Add( New.ShapeTracingMeta(