Permalink
Browse files

Split box-shadow renderer into two renderers for outset and inset sha…

…dows respectively.
  • Loading branch information...
Jason Johnston
Jason Johnston committed May 24, 2010
1 parent 37db46d commit ad351e8bd766f4bbaa7b7bf37cb43b03be9bb329
View
@@ -26,7 +26,8 @@
<fileset file="${src_dir}/BackgroundRenderer.js" />
<fileset file="${src_dir}/BorderRenderer.js" />
<fileset file="${src_dir}/BorderImageRenderer.js" />
- <fileset file="${src_dir}/BoxShadowRenderer.js" />
+ <fileset file="${src_dir}/BoxShadowOutsetRenderer.js" />
+ <fileset file="${src_dir}/BoxShadowInsetRenderer.js" />
<fileset file="${src_dir}/PIE_close.js" />
<fileset file="${src_dir}/event_handlers.js" />
</concat>
@@ -0,0 +1,40 @@
+/**
+ * Renderer for inset box-shadows
+ * @constructor
+ * @param {Element} el The target element
+ * @param {Object} styleInfos The StyleInfo objects
+ * @param {PIE.RootRenderer} parent
+ */
+PIE.BoxShadowInsetRenderer = (function() {
+ function BoxShadowInsetRenderer( el, styleInfos, parent ) {
+ this.element = el;
+ this.styleInfos = styleInfos;
+ this.parent = parent;
+ }
+ PIE.Util.merge( BoxShadowInsetRenderer.prototype, PIE.RendererBase, {
+
+ zIndex: 3,
+ boxName: 'inset-box-shadow',
+
+ needsUpdate: function() {
+ var si = this.styleInfos;
+ return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
+ },
+
+ isActive: function() {
+ var boxShadowInfo = this.styleInfos.boxShadowInfo;
+ return boxShadowInfo.isActive() && boxShadowInfo.getProps().inset[0];
+ },
+
+ updateSize: function() {
+ // TODO
+ },
+
+ updateProps: function() {
+ // TODO
+ }
+
+ } );
+
+ return BoxShadowInsetRenderer;
+})();
@@ -1,44 +1,44 @@
/**
- * Renderer for box-shadow
+ * Renderer for outset box-shadows
* @constructor
* @param {Element} el The target element
* @param {Object} styleInfos The StyleInfo objects
* @param {PIE.RootRenderer} parent
*/
-PIE.BoxShadowRenderer = (function() {
- function BoxShadowRenderer( el, styleInfos, parent ) {
+PIE.BoxShadowOutsetRenderer = (function() {
+ function BoxShadowOutsetRenderer( el, styleInfos, parent ) {
this.element = el;
this.styleInfos = styleInfos;
this.parent = parent;
}
- PIE.Util.merge( BoxShadowRenderer.prototype, PIE.RendererBase, {
+ PIE.Util.merge( BoxShadowOutsetRenderer.prototype, PIE.RendererBase, {
- outsetZIndex: 1,
- insetZIndex: 3,
+ zIndex: 1,
+ boxName: 'outset-box-shadow',
needsUpdate: function() {
var si = this.styleInfos;
return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
},
isActive: function() {
- return this.styleInfos.boxShadowInfo.isActive();
+ var boxShadowInfo = this.styleInfos.boxShadowInfo;
+ return boxShadowInfo.isActive() && boxShadowInfo.getProps().outset[0];
},
updateSize: function() {
if( this.isActive() ) {
var el = this.element,
- shadowInfos = this.styleInfos.boxShadowInfo.getProps(),
+ shadowInfos = this.styleInfos.boxShadowInfo.getProps().outset,
i = shadowInfos.length,
w = el.offsetWidth,
h = el.offsetHeight,
- shadowInfo, box, shape, ss, xOff, yOff, spread, blur, shrink, halfBlur, filter, alpha;
+ shadowInfo, shape, ss, xOff, yOff, spread, blur, shrink, halfBlur, filter, alpha;
while( i-- ) {
shadowInfo = shadowInfos[ i ];
- box = this.getBox( shadowInfo.inset );
- shape = this.getShape( 'shadow' + i, 'fill', box );
+ shape = this.getShape( 'shadow' + i, 'fill', this.getBox() );
ss = shape.style;
xOff = shadowInfo.xOffset.pixels( el );
@@ -79,13 +79,7 @@ PIE.BoxShadowRenderer = (function() {
shape.coordorigin = '1,1';
shape.path = this.getBoxPath( spread ? { t: -spread, r: -spread, b: -spread, l: -spread } : 0, 2 );
-
- box.appendChild( shape );
}
-
- // remove any previously-created border shapes which didn't get used above
- i = shadowInfos.length;
- while( this.deleteShape( 'shadow' + i++ ) ) {}
} else {
this.destroy();
}
@@ -94,31 +88,9 @@ PIE.BoxShadowRenderer = (function() {
updateProps: function() {
this.destroy();
this.updateSize();
- },
-
- getBox: function( isInset ) {
- var zIndex = isInset ? this.insetZIndex : this.outsetZIndex,
- box = this.parent.getLayer( zIndex );
- if( !box ) {
- box = this.element.document.createElement( ( isInset ? 'inset' : 'outset' ) + '-box-shadow' );
- box.style.position = 'absolute';
- this.parent.addLayer( zIndex, box );
-
- // Temporarily hide inset shadows, until they are properly implemented
- if( isInset ) {
- box.style.display = 'none';
- }
- }
- return box;
- },
-
- destroy: function() {
- this.parent.removeLayer( this.insetZIndex );
- this.parent.removeLayer( this.outsetZIndex );
- delete this._shapes;
}
} );
- return BoxShadowRenderer;
+ return BoxShadowOutsetRenderer;
})();
@@ -13,14 +13,14 @@ PIE.BoxShadowStyleInfo = (function() {
styleProperty: 'boxShadow',
parseCss: function( css ) {
- var props, item,
+ var props,
Length = PIE.Length,
Type = PIE.Tokenizer.Type,
tokenizer;
if( css ) {
tokenizer = new PIE.Tokenizer( css );
- props = [];
+ props = { outset: [], inset: [] };
function parseItem() {
var token, type, value, color, lengths, inset, len;
@@ -45,32 +45,28 @@ PIE.BoxShadowStyleInfo = (function() {
inset = true;
}
else { //encountered an unrecognized token; fail.
- return null;
+ return false;
}
}
len = lengths && lengths.length;
- return ( len > 1 && len < 5 ) ? {
- xOffset: new Length( lengths[0].value ),
- yOffset: new Length( lengths[1].value ),
- blur: new Length( lengths[2] ? lengths[2].value : '0' ),
- spread: new Length( lengths[3] ? lengths[3].value : '0' ),
- color: new PIE.Color( color || 'currentColor' ),
- inset: !!inset
- } : null;
- }
-
- while( tokenizer.hasNext() ) {
- if( !( item = parseItem() ) ) {
- // If parseItem() returned null that means it encountered something
- // invalid, so throw away everything.
- return null;
+ if( len > 1 && len < 5 ) {
+ ( inset ? props.inset : props.outset ).push( {
+ xOffset: new Length( lengths[0].value ),
+ yOffset: new Length( lengths[1].value ),
+ blur: new Length( lengths[2] ? lengths[2].value : '0' ),
+ spread: new Length( lengths[3] ? lengths[3].value : '0' ),
+ color: new PIE.Color( color || 'currentColor' )
+ } );
+ return true;
}
- props.push( item );
+ return false;
}
+
+ while( parseItem() ) {}
}
- return props && props.length ? props : null;
+ return props && ( props.inset.length || props.outset.length ) ? props : null;
}
} );
@@ -162,8 +162,9 @@ function init() {
var rootRenderer = new PIE.RootRenderer( el, styleInfos );
renderers = [
rootRenderer,
- new PIE.BoxShadowRenderer( el, styleInfos, rootRenderer ),
+ new PIE.BoxShadowOutsetRenderer( el, styleInfos, rootRenderer ),
new PIE.BackgroundRenderer( el, styleInfos, rootRenderer ),
+ new PIE.BoxShadowInsetRenderer( el, styleInfos, rootRenderer ),
new PIE.BorderRenderer( el, styleInfos, rootRenderer ),
new PIE.BorderImageRenderer( el, styleInfos, rootRenderer )
];

0 comments on commit ad351e8

Please sign in to comment.