Permalink
Browse files

adjustments to read styles from the currentStyle and to defer styling…

… to CSS by default.
  • Loading branch information...
1 parent 29455f7 commit 032e4b0ab0f7223926be25691b0f5d18fecdcacc @heygrady committed May 20, 2011
Showing with 108 additions and 40 deletions.
  1. +60 −34 jquery.textshadow.js
  2. +48 −6 readme.md
View
94 jquery.textshadow.js
@@ -7,15 +7,11 @@
// create a plugin
$.fn.textshadow = function(value, options) {
- var values = rtextshadow.exec(value),
- x, y, blur, color, opacity;
-
- // capture the values
- x = parseFloat(values[1]); // TODO: handle units
- y = parseFloat(values[2]); // TODO: handle units
- blur = values[3] !== undefined ? parseFloat(values[3]) : 0; // TODO: handle units
- color = values[4] !== undefined ? toHex(values[4]) : 'inherit';
- opacity = getAlpha(values[4]);
+ if (typeof value === 'object' && !options) {
+ options = value;
+ value = null;
+ }
+ var skipStyle = options.skipStyle || true;
// loop the found items
return this.each(function() {
@@ -30,32 +26,15 @@
allWords(this);
$copy = $elem.find('.ui-text-shadow-copy');
}
-
- // style the elements
- $copy.css({
- color: color,
- left: (x - blur) + 'px',
- top: (y - blur) + 'px'
- });
-
- // try to prevent selection
- $copy.each(function() {
- var copy = this;
- copy.unselectable = "on";
- copy.onselectstart = function(){return false;};
-
- // add in the filters
- copy.style.filter = [
- filter + "Alpha(",
- "opacity=" + parseInt(opacity * 100, 10),
- ") ",
- filter + "Blur(",
- "pixelRadius=" + blur,
- ")"
- ].join('');
- });
+ if (!skipStyle)
+ applyStyles($elem, $copy, value);
+ }
});
};
+
+ //---------------------
+ // For splitting words
+ //---------------------
// function for returning al words in an element as text nodes
function allWords(elem) {
$(elem).contents().each(function() {
@@ -125,7 +104,54 @@
copy.appendChild(document.createTextNode(text));
return shadow;
}
-
+
+ //---------------------
+ // For Applying Styles
+ //---------------------
+ function applyStyles($elem, $copy, value) {
+ $copy.each(function() {
+ var copy = this,
+ style = value || $elem[0].currentStyle['text-shadow'];
+ $copy = $(copy);
+
+ // don't apply style if we can't find one
+ if (!style || style === 'none') {
+ return true;
+ }
+
+ // parse the style
+ var values = rtextshadow.exec(style),
+ x, y, blur, color, opacity;
+
+ // capture the values
+ x = parseFloat(values[1]); // TODO: handle units
+ y = parseFloat(values[2]); // TODO: handle units
+ blur = values[3] !== undefined ? parseFloat(values[3]) : 0; // TODO: handle units
+ color = values[4] !== undefined ? toHex(values[4]) : 'inherit';
+ opacity = getAlpha(values[4]);
+
+ // style the element
+ $copy.css({
+ color: color,
+ left: (x - blur) + 'px',
+ top: (y - blur) + 'px'
+ });
+
+ // add in the filters
+ copy.style.filter = [
+ filter + "Alpha(",
+ "opacity=" + parseInt(opacity * 100, 10),
+ ") ",
+ filter + "Blur(",
+ "pixelRadius=" + blur,
+ ")"
+ ].join('');
+ });
+ }
+
+ //---------------------
+ // For Colors
+ //---------------------
// http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
function toHex(color) {
// handle rgb
View
54 readme.md
@@ -2,23 +2,30 @@
This library is a `text-shadow` polyfill for Internet Explorer 9 and below. It uses the Microsoft proprietary [blur filter](http://msdn.microsoft.com/en-us/library/ms532979(v=vs.85\).aspx) and the [alpha filter](http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85\).aspx) along with layering to closely approximate `text-shadow`.
* currently only pixel units are supported
-* the color must be the last property
+* cutting and pasting text will result in doubled text
+* the creation of the extra DOM nodes could potentially be faster
# Usage
It is recommended to use this library with a feature detection library such as [Modernizr](http://www.modernizr.com/docs/#textshadow).
if (!Modernizr.textshadow) {
+ // [default] allowing the styles to be applied using CSS
+ $('h1').textshadow();
+
+ // reading the current style automatically
+ $('h1').textshadow({skipStyles: false});
+
// normal
$('h1').textshadow('2px 2px 2px #000');
// multiple shadows
- $('h1.cool').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
+ $('h1').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
// rgba
- $('h2').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
+ $('h1').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
// hsla
- $('h3').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
+ $('h1').textshadow('2px 2px 2px hsla(0, 0, 0, 0.5)');
}
There is a corresponding css file that provides base styles for the new elements used. It must be included in the document as well.
@@ -32,11 +39,46 @@ There is a corresponding css file that provides base styles for the new elements
</head>
<body>
...
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+ <script src="jquery.textshadow.js"></script>
+ <script>
+ if (!Modernizr.textshadow) {
+ $('h1').textshadow();
+ }
+ </script>
+ </body>
+ </html>
+
+For performance and flexibility reasons, its probably best to use CSS rather than JS to apply the shadow styles. Particularly when there are hover states or nested elements that need a different shadow applied. Overall the browser will perform better applying the filter properties from CSS rather than from JavaScript.
+
+ <!doctype html>
+ <html>
+ <head>
+ ...
+
+ <style>
+ h1 {
+ text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5); /* left top blur color */
+ }
+ h1 .ui-text-shadow-copy {
+ color: #000; /* color */
+ filter:
+ progid:DXImageTransform.Microsoft.Alpha(opacity=50) /* RGBA alpha */
+ progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
+ left: 1px; /* left - blur */
+ top: 1px; /* top - blur */
+ }
+ </style>
+ <link rel="stylesheet" href="jquery.textshadow.css">
+ <script src="js/libs/modernizr-1.7.min.js"></script>
+ </head>
+ <body>
+ ...
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="jquery.textshadow.js"></script>
<script>
if (!Modernizr.textshadow) {
- $('h1').textshadow('2px 2px 2px #000');
+ $('h1').textshadow();
}
</script>
</body>

0 comments on commit 032e4b0

Please sign in to comment.