move trench styling into CSS; fix trenches so that, if in showDebug mode, the trenches will stay drawn

This commit is contained in:
Michael Yoshitaka Erlewine 2010-06-28 02:55:26 -04:00
parent 95b7cd38f1
commit 2aeca5ec1f
2 changed files with 49 additions and 16 deletions

View File

@ -214,7 +214,7 @@ Trench.prototype = {
if (this.active && this.showGuide) {
if (!this.dom.guideTrench)
this.dom.guideTrench = iQ("<div/>").css({position: 'absolute', zIndex: -101, opacity: 0.9, borderTop: '1px dashed black', borderLeft: '1px dashed black', id: 'guideTrench'+this.id});
this.dom.guideTrench = iQ("<div/>").addClass('guideTrench').css({id: 'guideTrench'+this.id});
var guideTrench = this.dom.guideTrench;
guideTrench.css(this.guideRect);
iQ("body").append(guideTrench);
@ -229,27 +229,24 @@ Trench.prototype = {
}
if (!this.dom.visibleTrench)
this.dom.visibleTrench = iQ("<div/>").css({position: 'absolute', zIndex:-103, opacity: 0.05, id: 'visibleTrench'+this.id});
this.dom.visibleTrench = iQ("<div/>")
.addClass('visibleTrench')
.addClass(this.type) // border or guide
.css({id: 'visibleTrench'+this.id});
var visibleTrench = this.dom.visibleTrench;
if (!this.dom.activeVisibleTrench) {
this.dom.activeVisibleTrench = iQ("<div/>").css({position: 'absolute', zIndex:-102, id: 'activeVisibleTrench'+this.id});
}
if (!this.dom.activeVisibleTrench)
this.dom.activeVisibleTrench = iQ("<div/>")
.addClass('activeVisibleTrench')
.addClass(this.type) // border or guide
.css({id: 'activeVisibleTrench'+this.id});
var activeVisibleTrench = this.dom.activeVisibleTrench;
if (this.active)
activeVisibleTrench.css({opacity: 0.45});
activeVisibleTrench.addClass('activeTrench');
else
activeVisibleTrench.css({opacity: 0});
activeVisibleTrench.removeClass('activeTrench');
if (this.type == "border") {
visibleTrench.css({backgroundColor:'red'});
activeVisibleTrench.css({backgroundColor:'red'});
} else {
visibleTrench.css({backgroundColor:'blue'});
activeVisibleTrench.css({backgroundColor:'blue'});
}
visibleTrench.css(this.rect);
activeVisibleTrench.css(this.activeRect || this.rect);
iQ("body").append(visibleTrench);
@ -523,7 +520,7 @@ var Trenches = {
this.trenches.forEach(function(t) {
t.active = false;
t.showGuide = false;
t.hide();
t.show();
});
},

View File

@ -197,6 +197,42 @@ body {
inset rgba(255, 255, 255, 0.6) -2px 0px 0px; */
}
/* Trenches
----------------------------------*/
.guideTrench, .visibleTrench, .activeVisibleTrench {
position: absolute;
}
.guideTrench {
z-index: -101;
opacity: 0.9;
border-top: 5px dashed rgba(0,0,0,0.3);
border-left: 5px dashed rgba(0,0,0,0.3);
}
.visibleTrench {
z-index: -103;
opacity: 0.05;
}
.activeVisibleTrench {
z-index: -102;
opacity: 0;
}
.activeVisibleTrench.activeTrench {
opacity: 0.45;
}
.visibleTrench.border, .activeVisibleTrench.border {
background-color: red;
}
.visibleTrench.guide, .activeVisibleTrench.guide {
background-color: blue;
}
/* Other
----------------------------------*/