From 41d14bb9a0357e5522ce2f4ebb611100986a9f06 Mon Sep 17 00:00:00 2001 From: Sebastien Ros Date: Mon, 21 Mar 2011 09:44:40 -0700 Subject: [PATCH] Bringing shape tracing tabs back --HG-- branch : dev --- .../Orchard.DesignerTools.csproj | 2 +- .../orchard-designertools-shapetracing.js | 82 +++++++++++++++---- .../orchard-designertools-shapetracing.css | 49 +++++++++-- .../Views/ShapeTracingMeta.cshtml | 24 ++++-- 4 files changed, 123 insertions(+), 34 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj index c7f910fc7..bef1fd3a7 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Orchard.DesignerTools.csproj @@ -111,7 +111,7 @@ - + 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 5c5d3108c..6e596f629 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 @@ -8,7 +8,7 @@ '' + '
' + '
' + - '
foo
' + + '
' + '
' + '' + '
' + @@ -46,6 +46,8 @@ shapeTracingContainer.offset({ top: windowHeight - containerHeight + scrollTop, left: 0 }); shapeTracingWindow.height(containerHeight - toolbarHeight - resizeHandleHeight); shapeTracingWindowTree.height(containerHeight - toolbarHeight - resizeHandleHeight); + shapeTracingWindowContent.height(containerHeight - toolbarHeight - resizeHandleHeight); + shapeTracingWindowContent.width(shapeTracingContainer.outerWidth - shapeTracingWindowTree.outerWidth); shapeTracingContainer.width('100%'); }; @@ -146,7 +148,7 @@ shapeTracingWindowTree.append(shapes); - // add the expand/collapse logic + // add the expand/collapse logic to the shapes tree var glyph = $('​'); shapeTracingWindowTree.find('div').parent(':has(li)').prepend(glyph); @@ -169,19 +171,6 @@ } } - // automatically expand or collapse shapes in the tree - shapeTracingWindowTree.find('.expando-glyph-container').click(function () { - var _this = $(this); - if (_this.hasClass("closed") || _this.hasClass("closing")) { - openExpando(_this); - } - else { - closeExpando(_this); - } - - return false; - }); - //create an overlay on shapes' descendants var overlayTarget = null; $('[shape-id]').add(shapeTracingOverlay).mousemove( @@ -217,6 +206,14 @@ $('.shape-tracing-selected').removeClass('shape-tracing-selected'); $('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected'); shapeTracingOverlay.hide(); + + // show the properties for the selected shape + $('[shape-id-meta]:visible').toggle(false); + var target = $('[shape-id-meta="' + shapeId + '"]"'); + target.toggle(true); + + // enable codemirror for the current tab + enableCodeMirror(target); } // select shapes when clicked @@ -262,6 +259,61 @@ event.stopPropagation(); }); + + // move all shape tracing meta blocks to the content window + $("[shape-id-meta]").detach().prependTo(shapeTracingWindowContent); + + // add the expand/collapse logic to the shape model + // var glyph = $('​'); + shapeTracingWindowContent.find('h3').parent(':has(li)').prepend(glyph); + + // collapse all sub uls + shapeTracingWindowContent.find('ul ul').toggle(false); + + // tabs events + shapeTracingWindowContent.find('.shape-tracing-tabs > li').click(function () { + var _this = $(this); + var tabName = this.className.split(/\s/)[0]; + + // toggle the selected class on the tab li + $('.shape-tracing-tabs > li.selected').removeClass('selected'); + $('.shape-tracing-tabs > li.' + tabName).addClass('selected'); + + // hide all tabs and display the selected one + $('.shape-tracing-meta-content > div').toggle(false); + $('.shape-tracing-meta-content > div.' + tabName).toggle(true); + + // look for the targetted panel + var wrapper = _this.parent().parent().first(); + var panel = wrapper.find('div.' + tabName); + + // enable codemirror for the current tab + enableCodeMirror(panel); + }); + + // activates codemirror on specific textareas + var enableCodeMirror = function (target) { + // if there is a script, and colorization is not enabled yet, turn it on + // code mirror seems to work only if the textarea is visible + target.find('textarea:visible').each(function () { + if ($(this).next('.CodeMirror').length == 0) { + CodeMirror.fromTextArea(this, { mode: "razor", tabMode: "indent", height: "100%", readOnly: true }); + } + }); + } + + // automatically expand or collapse shapes in the tree + shapeTracingWindow.find('.expando-glyph-container').click(function () { + var _this = $(this); + if (_this.hasClass("closed") || _this.hasClass("closing")) { + openExpando(_this); + } + else { + closeExpando(_this); + } + + return false; + }); }); // recursively create a node for the shapes tree 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 758169340..a22fd185f 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 @@ -123,21 +123,20 @@ display:block; float:left; width:66%; - background:yellow; - height:100%; + overflow:auto; } -#shape-tracing-window-tree .expando-glyph { +#shape-tracing-window .expando-glyph { background:transparent no-repeat 0 -19px; background-image:url(images/menu-glyph.png); padding-left:15px; } -#shape-tracing-window-tree .expando-glyph:hover { +#shape-tracing-window .expando-glyph:hover { background-image:url(images/menu-glyph.png); } -#shape-tracing-window-tree .expando-glyph-container { +#shape-tracing-window .expando-glyph-container { float:left; display:block; width:15px; @@ -145,17 +144,17 @@ cursor:default; } -#shape-tracing-window-tree .expando-glyph-container.closed .expando-glyph { +#shape-tracing-window .expando-glyph-container.closed .expando-glyph { background-repeat:no-repeat; background-image:url(images/menu-glyph.png); background-position:0 3px; } -#shape-tracing-window-tree .expando-glyph-container.closed .expando-glyph:hover { +#shape-tracing-window .expando-glyph-container.closed .expando-glyph:hover { background-image:url(images/menu-glyph.png); } -#shape-tracing-window-tree .expando-glyph-container.closing .expando-glyph +#shape-tracing-window .expando-glyph-container.closing .expando-glyph { background-repeat:no-repeat; -webkit-transition:all .2s ease-in-out; @@ -166,7 +165,7 @@ transform:rotate(-90deg) translate(3px, -3px); } -#shape-tracing-window-tree .expando-glyph-container.opening .expando-glyph +#shape-tracing-window .expando-glyph-container.opening .expando-glyph { background-repeat:no-repeat; -webkit-transition:all .2s ease-in-out; @@ -184,4 +183,36 @@ opacity:0.5; filter:alpha(opacity=50); z-index:2; +} + +/* tabs */ + +#shape-tracing-window-content ul.shape-tracing-tabs { margin:8px 0 -8px 0; } + +#shape-tracing-window-content .shape-tracing-tabs li { + color:#4053DE; + display: inline; + font-size:15px; + line-height:32px; +} +#shape-tracing-window-content .shape-tracing-tabs li { + margin:0 2px; + padding: 8px 18px 7px 18px; +} +#shape-tracing-window-content .shape-tracing-tabs li.middle, #shape-tracing-window-content .shape-tracing-tabs li.first, #shape-tracing-window-content .shape-tracing-tabs li.last { + border:1px solid #E4E5E6; + border-bottom:none; + background-color: #F5F5F5; +} +#shape-tracing-window-content .shape-tracing-tabs li.first { + margin-left:16px; +} +#shape-tracing-window-content .shape-tracing-tabs li.selected { + background-color: #fff; +} +#shape-tracing-window-content .shape-tracing-tabs li.selected, #shape-tracing-window-content .shape-tracing-tabs li:hover { + background-color: #fff; +} +#shape-tracing-window-content .shape-tracing-tabs li.selected a { + color: #3A822E; } \ No newline at end of file diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml index b5c4728f7..0b2065f40 100644 --- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml +++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracingMeta.cshtml @@ -1,13 +1,21 @@ -@* - -@functions { +@functions { string FormatShapeFilename(string type, string themeId) { return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml"; } + + string RemoveBeacons(string htmlContent) { + var regex = new System.Text.RegularExpressions.Regex(@""); + return regex.Replace(htmlContent, String.Empty); + } + + string RemoveEmptyLines(string htmlContent) { + var regex = new System.Text.RegularExpressions.Regex(@"[\r\n]+"); + return regex.Replace(htmlContent, System.Environment.NewLine); + } } -