Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: lojjic/PIE
...
head fork: lojjic/PIE
Checking mergeability… Don’t worry, you can still create the pull request.
  • 1 commit
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Commits on Jun 16, 2012
@lojjic Prelimiary implementation of inset box-shadow. Only supports shadows …
…with 0,0 offset and no spread on blurred shadows.
8af5bea
View
2  build.xml
@@ -50,7 +50,7 @@
<fileset file="${src_dir}/BorderRenderer.js" />
<fileset file="${src_dir}/BorderImageRenderer.js" />
<fileset file="${src_dir}/BoxShadowOutsetRenderer.js" />
- <!--<fileset file="${src_dir}/BoxShadowInsetRenderer.js" />-->
+ <fileset file="${src_dir}/BoxShadowInsetRenderer.js" />
<fileset file="${src_dir}/ImgRenderer.js" />
<fileset file="${src_dir}/Element.js" />
<fileset file="${src_dir}/PIE_API.js" />
View
89 sources/BoxShadowInsetRenderer.js
@@ -11,7 +11,7 @@ PIE.BoxShadowInsetRenderer = PIE.RendererBase.newRenderer( {
needsUpdate: function() {
var si = this.styleInfos;
- return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed();
+ return si.boxShadowInfo.changed() || si.borderRadiusInfo.changed() || si.borderInfo.changed();
},
isActive: function() {
@@ -19,6 +19,89 @@ PIE.BoxShadowInsetRenderer = PIE.RendererBase.newRenderer( {
return boxShadowInfo.isActive() && boxShadowInfo.getProps().inset[0];
},
- updateRendering: PIE.emptyFn
-
+ draw: function() {
+ var me = this,
+ el = me.targetElement,
+ styleInfos = me.styleInfos,
+ borderInfo = styleInfos.borderInfo.getProps(),
+ borderWidths = borderInfo && borderInfo.widths,
+ borderT = borderWidths ? borderWidths['t'].pixels( el ) : 0,
+ borderR = borderWidths ? borderWidths['r'].pixels( el ) : 0,
+ borderB = borderWidths ? borderWidths['b'].pixels( el ) : 0,
+ borderL = borderWidths ? borderWidths['l'].pixels( el ) : 0,
+ shadowInfos = styleInfos.boxShadowInfo.getProps().inset,
+ radii = styleInfos.borderRadiusInfo.getProps(),
+ len = shadowInfos.length,
+ i = len,
+ bounds = me.boundsInfo.getBounds(),
+ w = bounds.w,
+ h = bounds.h,
+ shadowInfo, shape, xOff, yOff, spread, blur, color, alpha, alpha2, path,
+ totalW, totalH, focusX, focusY, focusAdjustRatio;
+
+ while( i-- ) {
+ shadowInfo = shadowInfos[ i ];
+ xOff = shadowInfo.xOffset.pixels( el );
+ yOff = shadowInfo.yOffset.pixels( el );
+ // Only support offset-less inset shadows for now
+ if (!xOff && !yOff) {
+ spread = shadowInfo.spread.pixels( el );
+ blur = shadowInfo.blur.pixels( el );
+ color = shadowInfo.color;
+ alpha = color.alpha();
+ alpha2 = 0;
+ color = color.colorValue( el );
+
+ // Shape path
+ path = me.getBoxPath( borderT, borderR, borderB, borderL, 2, radii );
+
+ // Create the shape object
+ shape = me.getShape( 'insetShadow' + i, me.shapeZIndex + ( .5 - i / 1000 ) );
+
+ if( blur ) {
+ totalW = w - borderL - borderR;
+ totalH = h - borderT - borderB;
+ focusX = totalW ? blur / totalW : 0;
+ focusY = totalH ? blur / totalH : 0;
+ alpha /= 2;
+
+ // If the blur is larger than half the element's narrowest dimension, then its focussize
+ // will to be less than zero which results in ugly artifacts. To get around this, we adjust
+ // the focus to keep it centered and then bump the center opacity down to match.
+ if (focusX > 0.5 || focusY > 0.5) {
+ focusAdjustRatio = 0.5 / Math.max(focusX, focusY);
+ focusX *= focusAdjustRatio;
+ focusY *= focusAdjustRatio;
+ alpha2 = alpha - alpha * focusAdjustRatio; //this is a rough eyeball-adjustment, could be refined
+ }
+
+ shape.setFillAttrs(
+ 'type', 'gradienttitle', //makes the VML gradient follow the shape's outline - hooray for undocumented features?!?!
+ 'method', 'sigma',
+ 'color2', color,
+ 'focusposition', focusX + ',' + focusY,
+ 'focussize', ( 1 - focusX * 2 ) + ',' + ( 1 - focusY * 2 ),
+ 'opacity', alpha,
+ 'o:opacity2', alpha2
+ );
+ } else {
+ shape.setFillAttrs(
+ 'type', 'solid',
+ 'opacity', alpha
+ );
+ path += me.getBoxPath( borderT + spread, borderR + spread, borderB + spread, borderL + spread, 2, radii );
+ }
+
+ shape.setAttrs(
+ 'path', path
+ );
+ shape.setFillAttrs( 'color', color );
+ shape.setSize( w, h );
+ }
+ }
+
+ // Delete any shadow shapes previously created which weren't reused above
+ while( me.deleteShape( 'insetShadow' + len++ ) ) {}
+ }
+
} );
View
2  sources/Element.js
@@ -150,7 +150,7 @@ PIE.Element = (function() {
childRenderers = [
new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- //new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
];

No commit comments for this range

Something went wrong with that request. Please try again.