Adding breadcrumb to Shape Tracing model tab

--HG--
branch : dev

src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js

@@ -26,6 +26,8 @@
         var shapeTracingGhost = $('#shape-tracing-container-ghost');
         var shapeTracingOverlay = $('#shape-tracing-overlay');
 
+        var shapeTracingEnabled = false;
+
         // store the size of the container when it is closed (default in css)
         var initialContainerSize = shapeTracingContainer.height();
         var previousSize = 0;
@@ -66,19 +68,33 @@
             _this.toggleClass('expanded');
             if (_this.hasClass('expanded')) {
                 shapeTracingContainer.height(Math.max(previousSize, 100, shapeTracingContainer.height()));
+                enableShapeTracing();
             }
             else {
                 // save previous height
                 previousSize = shapeTracingContainer.height();
                 shapeTracingContainer.height(initialContainerSize);
+                disableShapeTracing();
             }
 
             syncResize();
         });
 
+        var disableShapeTracing = function () {
+            shapeTracingEnabled = false;
+            selectShape();
+        }
+
+        var enableShapeTracing = function () {
+            shapeTracingEnabled = true;
+        }
+
         // add a resizable handle to the container
         $('#shape-tracing-resize-handle').addClass('ui-resizable-handle ui-resizable-n');
-        shapeTracingContainer.resizable({ handles: { n: '#shape-tracing-resize-handle'} });
+        shapeTracingContainer.resizable({
+            handles: { n: '#shape-tracing-resize-handle' },
+            grid: 20 // mitigates the number of calls to syncResize(), and aligns to the line height
+        });
 
         var shapeNodes = {}; // represents the main index of shape nodes, indexed by id
 
@@ -175,6 +191,10 @@
         var overlayTarget = null;
         $('[shape-id]').add(shapeTracingOverlay).mousemove(
             function (event) {
+                if (!shapeTracingEnabled) {
+                    return;
+                }
+
                 event.stopPropagation();
 
                 if ($(this).get(0) == shapeTracingOverlay.get(0)) {
@@ -203,7 +223,15 @@
 
         // selects a specific shape in the tree, highlight its elements, and display the information
         var selectShape = function (shapeId) {
-            $('.shape-tracing-selected').removeClass('shape-tracing-selected');
+            if (!shapeId) {
+                // remove selection ?
+                shapeTracingOverlay.hide();
+                shapeTracingWindowTree.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
+                $('[shape-id-meta]:visible').toggle(false);
+                return;
+            }
+
+            shapeTracingWindowTree.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
             $('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected');
             shapeTracingOverlay.hide();
 
@@ -235,7 +263,8 @@
         });
 
         //create an overlay on shape tree nodes
-        shapeTracingWindowTree.find('[tree-shape-id] div').hover(
+        shapeTracingWindowTree.find('[tree-shape-id] > div')
+        .hover(
             function () {
                 var _this = $(this);
                 $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
@@ -243,11 +272,8 @@
             },
             function () {
                 $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
-            }
-        );
-
-        // select shape tree elements when clicked
-        $('[tree-shape-id] > div').click(function (event) {
+            })
+        .click(function (event) {
             var shapeId = $(this).parent().get(0).shapeNode.id;
             selectShape(shapeId);
 
@@ -314,6 +340,39 @@
 
             return false;
         });
+
+        //create an overlay on model nodes
+        shapeTracingWindowContent.find('.model div.name')
+        .hover(
+            function () {
+                var _this = $(this);
+                $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
+                _this.addClass('shape-tracing-overlay');
+            },
+            function () {
+                $('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
+            })
+        .click(function (event) {
+            // model node is selected
+            var _this = $(this);
+            shapeTracingWindowContent.find('.shape-tracing-selected').removeClass('shape-tracing-selected');
+            _this.addClass('shape-tracing-selected');
+
+            // display breadcrumb
+            var breadcrumb;
+            _this.parentsUntil('.model').children('.name').each(function () {
+                if (breadcrumb != null) {
+                    breadcrumb = $(this).text() + '.' + breadcrumb;
+                }
+                else {
+                    breadcrumb = $(this).text();
+                }
+            });
+
+            _this.parents('.model').find('.shape-tracing-breadcrumb').text('@' + breadcrumb);
+            event.stopPropagation();
+        });
+
     });
 
     // recursively create a node for the shapes tree

src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css

@@ -106,7 +106,7 @@
     background-color: #EBEFF9;
 }
 
-#shape-tracing-window-tree .shape-tracing-selected  {
+#shape-tracing-window .shape-tracing-selected  {
     background:#2c66c3;
     color:#fff;
     
@@ -235,11 +235,17 @@
 }
 
 #shape-tracing-window-content .model div.type, #shape-tracing-window-content .model div.value {
-    left:300px;
-    position:relative;
+    float:right;
+    display:inline;
+    width:66%;
 }
 
 
 #shape-tracing-window-content .model li  {
     clear:both;
+}
+
+#shape-tracing-window-content .shape-tracing-breadcrumb 
+{
+    margin: 3px 0px;
 }

src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml

@@ -52,6 +52,7 @@
         </div>
             
         <div class="model" style="display:none">
+            <div class="shape-tracing-breadcrumb">foo</div>
             @(new MvcHtmlString(@Model.Dump))
         </div>