lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2026-02-09 09:16:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fixing display issues in shape tracing

Browse Source 
--HG--
branch : dev
This commit is contained in:
Sebastien Ros
2011-03-14 16:15:00 -07:00
parent e0d6502ede
commit 6b942b7838
2 changed files with 93 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,17 +11,20 @@
'<div id="shape-tracing-window-content">foo</div>' +
'</div>' +
'</div>' +
'<div id="shape-tracing-container-ghost"></div>'
'<div id="shape-tracing-container-ghost"></div>' +
'<div id="shape-tracing-overlay"></div>'
).appendTo('body');
// preload main objects
var shapeTracingContainer = $('#shape-tracing-container');
var shapeTracingResizeHandle = $('#shape-tracing-resize-handle');
var shapeTracingToolbar = $('#shape-tracing-toolbar');
var shapeTracingToolbarSwitch = $('#shape-tracing-toolbar-switch');
var shapeTracingWindow = $('#shape-tracing-window');
var shapeTracingWindowTree = $('#shape-tracing-window-tree');
var shapeTracingWindowContent = $('#shape-tracing-window-content');
var shapeTracingGhost = $('#shape-tracing-container-ghost');
var shapeTracingOverlay = $('#shape-tracing-overlay');
// store the size of the container when it is closed (default in css)
var initialContainerSize = shapeTracingContainer.height();
@@ -31,13 +34,18 @@
// and the container is always positionned correctly
var syncResize = function () {
var _window = $(window);
var containerHeight = shapeTracingContainer.height();
var containerHeight = shapeTracingContainer.outerHeight();
var toolbarHeight = shapeTracingToolbar.outerHeight();
var resizeHandleHeight = shapeTracingResizeHandle.outerHeight();
shapeTracingGhost.height(containerHeight);
var windowHeight = _window.height();
var scrollTop = _window.scrollTop();
shapeTracingContainer.offset({ top: windowHeight - containerHeight + scrollTop, left: 0 });
shapeTracingWindow.height(containerHeight - toolbarHeight - resizeHandleHeight);
shapeTracingWindowTree.height(containerHeight - toolbarHeight - resizeHandleHeight);
shapeTracingContainer.width('100%');
};
@@ -88,11 +96,11 @@
// 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)
// assign the shape-id attribute to all direct children, except wrappers themselves (it would erase their own shape-id)
var found = false;
_this
.nextUntil('[end-of="' + shapeNode.id + '"]') // all elements between the script beacons
.find(':not(.shape-tracing-wrapper)') // all children but not inner beacons
.children(':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 () {
@@ -174,8 +182,63 @@
return false;
});
//create an overlay on shapes' descendants, and in shape tree
$('[shape-id]').add('[tree-shape-id] div').hover(
//create an overlay on shapes' descendants
var overlayTarget = null;
$('[shape-id]').add(shapeTracingOverlay).mousemove(
function (event) {
event.stopPropagation();
if ($(this).get(0) == shapeTracingOverlay.get(0)) {
shapeTracingOverlay.hide();
}
var element = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
shapeTracingOverlay.show();
while (element && !element.shapeNode)
element = element.parentNode;
if (!element || (overlayTarget != null && overlayTarget.get(0) == element)) {
return;
}
element = $(element);
shapeTracingOverlay.offset(element.offset());
shapeTracingOverlay.width(element.outerWidth()); // include border and padding
shapeTracingOverlay.height(element.outerHeight()); // include border and padding
overlayTarget = element;
}
);
// 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');
$('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected');
shapeTracingOverlay.hide();
}
// select shapes when clicked
shapeTracingOverlay.click(function () {
var shapeNode = overlayTarget.get(0).shapeNode;
selectShape(shapeNode.id);
var lastExpanded = null;
// open the tree until the selected element
$('li[tree-shape-id="' + shapeNode.id + '"]').parents('li').andSelf().find('> .expando-glyph-container').each(function () {
openExpando($(this));
})
.last()
.each(function () {
this.scrollIntoView()
});
return false;
});
//create an overlay on shape tree nodes
shapeTracingWindowTree.find('[tree-shape-id] div').hover(
function () {
var _this = $(this);
$('.shape-tracing-overlay').removeClass('shape-tracing-overlay');
@@ -186,23 +249,6 @@
}
);
// select shapes when clicked
$('[shape-id]').click(function (event) {
selectShape(this.shapeNode.id);
var lastExpanded = null;
// open the tree until the selected element
$('li[tree-shape-id="' + this.shapeNode.id + '"]').parents('li').andSelf().find('> .expando-glyph-container').each(function () {
openExpando($(lastExpanded = this));
});
if (lastExpanded) {
lastExpanded.scrollIntoView();
}
event.stopPropagation();
});
// select shape tree elements when clicked
$('[tree-shape-id] > div').click(function (event) {
var shapeId = $(this).parent().get(0).shapeNode.id;
@@ -223,7 +269,7 @@
var node = $('<li></li>');
node.attr('tree-shape-id', shapeNode.id);
node.get(0).shapeNode = shapeNode;
var text = shapeNode.type;
// add the hint to the tree node if available
if (shapeNode.hint != '') {
@@ -242,10 +288,4 @@
return node;
}
// select a specific shape in the tree, highlight its elements, and display the information
function selectShape(shapeId) {
$('.shape-tracing-selected').removeClass('shape-tracing-selected');
$('li[tree-shape-id="' + shapeId + '"] > div').add('[shape-id="' + shapeId + '"]').addClass('shape-tracing-selected');
}
})(jQuery);

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

@@ -23,17 +23,21 @@
width:100%;
display:none;
max-height:66%;
height:24px; /* handle + toolbar */
height:24px; /* handle (21) + toolbar (3) */
min-height:24px;
padding:0;
margin:0;
}
#shape-tracing-toolbar {
color:black;
background-color:#fff;
background: url(images/toolbar-bg.png) repeat-x;
height:21px;
padding-top:4px;
padding-top:0;
padding-left:5px;
padding-right:5px;
margin:0;
}
#shape-tracing-toolbar-switch {
@@ -42,6 +46,7 @@
width:14px;
height:100%;
background: url(images/expand.png) no-repeat;
margin-top:3px;
}
#shape-tracing-toolbar-switch.expanded {
@@ -66,7 +71,7 @@
}
.shape-tracing-overlay {
background-color:#eee;
background-color:#EBEFF9;
cursor: pointer;
}
@@ -75,9 +80,8 @@
cursor: pointer;
}
#shape-tracing-window {
#shape-tracing-window {
background-color: #fff;
height:100%;
}
#shape-tracing-window-tree {
@@ -85,8 +89,6 @@
float:left;
overflow:auto;
width:33%;
height:100%;
padding:10px;
}
#shape-tracing-window-tree li {
@@ -95,7 +97,11 @@
}
.shape-tracing-selected {
background-color:#FFA20D;
background-color: #EBEFF9;
}
#shape-tracing-window-tree .shape-tracing-selected {
background-color: #4B4FF9;
}
#shape-tracing-window-tree ul {
@@ -164,3 +170,12 @@
-moz-transform:rotate(90deg) translate(3px, 3px);
transform:rotate(90deg) translate(3px, 3px);
}
#shape-tracing-overlay {
display:none;
background-color:#0015FF;
position:absolute;
opacity:0.5;
filter:alpha(opacity=50);
z-index:2;
}