From 3b3fcf26f1247e6f17a803fba91a9b647bd5c161 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sat, 1 May 2010 23:51:20 -0700
Subject: [PATCH] [Compass Core] Smooth out some rough edges in the text
 module.

---
 doc-src/content/CHANGELOG.markdown            | 16 ++++++++--
 .../stylesheets/compass/utilities/_text.scss  |  1 +
 .../compass/utilities/text/_ellipsis.scss     | 31 +++++++++++++------
 .../compass/utilities/text/_replacement.scss  | 27 +++++++++++-----
 .../compass/templates/ellipsis/ellipsis.sass  |  3 ++
 5 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown
index 5de8e98b..e0e5d36e 100644
--- a/doc-src/content/CHANGELOG.markdown
+++ b/doc-src/content/CHANGELOG.markdown
@@ -12,10 +12,20 @@ COMPASS CHANGELOG
 
 * [Rails] The default location for compass extensions has moved from
   `vendor/plugins/compass/extensions` to `vendor/plugins/compass_extensions`.
-* Global reset no longer automatically resets the *:focus. This allows browsers to
-  use their default :focus styles which is considered a best practice. If you wish
-  to reset :focus styles simply include this in your stylesheets:
+* [Compass Core] Global reset no longer automatically resets the *:focus.
+  This allows browsers to use their default :focus styles which is considered
+  a best practice. If you wish to reset :focus styles simply include this in
+  your stylesheets:
   `*:focus { @include reset-focus; }`
+* [Compass Core] A new mixin `replace-text-with-dimensions` has been added.
+  This is the same as the `replace-text` mixin except that it will read the
+  dimensions from the image and set them for you on the element.
+* [Compass Core] If you want Firefox 2 Support (via -moz-binding) for the
+  `ellipsis` mixin, you must now set `$firefox2-ellipsis` to `true` before
+  importing the module.
+* [Compass Core] The `compass/text/ellipsis` module is now imported
+  automatically by the `compass/text` module.
+  
 
 0.10.0.rc4 (April 27, 2010)
 ---------------------------
diff --git a/frameworks/compass/stylesheets/compass/utilities/_text.scss b/frameworks/compass/stylesheets/compass/utilities/_text.scss
index 2542fe49..9cd3f0a1 100644
--- a/frameworks/compass/stylesheets/compass/utilities/_text.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/_text.scss
@@ -1,2 +1,3 @@
+@import "text/ellipsis";
 @import "text/nowrap";
 @import "text/replacement";
diff --git a/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss b/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss
index ba03a1b9..1d4b0182 100644
--- a/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss
@@ -1,12 +1,25 @@
-// This technique, by [Justin Maxwell](http://code404.com/), was originally
-// published at http://mattsnider.com/css/css-string-truncation-with-ellipsis/
-// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/)
+@import "compass/css3/shared";
 
+// To get firefox2 support, you must install the ellipsis pattern:
+//
+//     compass install compass/ellipsis
+$firefox2-ellipsis: false !default;
+
+// This technique, by [Justin Maxwell](http://code404.com/), was originally
+// published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/).
+// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/).
 @mixin ellipsis($no-wrap: true) {
-  @if $no-wrap {
-    white-space: nowrap; }
+  @if $no-wrap { white-space: nowrap; }
   overflow: hidden;
-  text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-  -ms-text-overflow: ellipsis;
-  -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis")); }
+  @include experimental(text-overflow, ellipsis,
+    not -moz,
+    not -webkit,
+    -o,
+    -ms,
+    not -khtml,
+    official
+  );
+  @if $experimental-support-for-mozilla and $firefox2-ellipsis {
+    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));    
+  }
+}
diff --git a/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss b/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss
index cb7a654a..f265ebb8 100644
--- a/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss
@@ -1,21 +1,32 @@
 // Hides html text and replaces it with an image.
 // If you use this on an inline element, you will need to change the display to block or inline-block.
 // Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
-// @param img
-//   the relative path from the project image directory to the image.
-// @param x
-//   the x position of the background image.
-// @param y
-//   the y position of the background image.
+//
+// Parameters:
+//
+// * `img` -- the relative path from the project image directory to the image.
+// * `x` -- the x position of the background image.
+// * `y` -- the y position of the background image.
 @mixin replace-text($img, $x: 50%, $y: 50%) {
   @include hide-text;
   background: {
     image: image-url($img);
     repeat: no-repeat;
-    position: $x $y; }; }
+    position: $x $y;
+  };
+}
+
+// Like the `replace-text` mixin, but also sets the width
+// and height of the element according the dimensions of the image.
+@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%) {
+  @include replace-text($img, $x, $y);
+  width: image-width($img);
+  height: image-height($img);
+}
 
 // Hides text in an element so you can see the background.
 @mixin hide-text {
   text-indent: -9999em;
   overflow: hidden;
-  text-align: left; }
+  text-align: left;
+}
diff --git a/frameworks/compass/templates/ellipsis/ellipsis.sass b/frameworks/compass/templates/ellipsis/ellipsis.sass
index 8f23ed39..2e44f702 100644
--- a/frameworks/compass/templates/ellipsis/ellipsis.sass
+++ b/frameworks/compass/templates/ellipsis/ellipsis.sass
@@ -1,3 +1,6 @@
+// Since you've installed the xml file, you must set
+// $firefox2-ellipsis to true before importing.
+$firefox2-ellipsis: true
 @import compass/utilities/text/ellipsis
 
 // You can delete this sass file if you want, it's just an example of how to use the ellipsis mixin.