Permalink
Browse files

Replace the stylesheet hack with inline styles.

The purpose of the stylesheet hack was to provide a default without
having to use inline styles on containers.  We can do this much more
neatly by instead just giving the inline styles to a parent container,
leaving users free to customize the children.
  • Loading branch information...
1 parent 13c71fa commit df0875e549048013798d8f995eab3779c00caeca @dnschnur dnschnur committed Mar 30, 2013
Showing with 24 additions and 16 deletions.
  1. +4 −4 API.md
  2. +20 −12 jquery.flot.js
View
@@ -281,12 +281,12 @@ deprecated and scheduled to be removed with the release of version 1.0.0.
To enable more granular control over styles, labels are divided between a set
of text containers, with each holding the labels for one axis. These containers
-are given the classes 'flot-text', 'flot-[x|y]-axis', and 'flot-[x|y]#-axis',
-where '#' is the number of the axis when there are multiple axes. For example,
-the x-axis labels for a simple plot with only one x-axis might look like this:
+are given the classes 'flot-[x|y]-axis', and 'flot-[x|y]#-axis', where '#' is
+the number of the axis when there are multiple axes. For example, the x-axis
+labels for a simple plot with only a single x-axis might look like this:
```html
-<div class='flot-text flot-x-axis flot-x1-axis'>
+<div class='flot-x-axis flot-x1-axis'>
<div class='flot-tick-label'>January 2013</div>
...
</div>
View
@@ -38,16 +38,6 @@ Licensed under the MIT license.
var hasOwnProperty = Object.prototype.hasOwnProperty;
- // Add default styles for tick labels and other text
-
- $(function() {
- $("head").prepend([
- "<style id='flot-default-styles'>",
- ".flot-tick-label {font-size:smaller;color:#545454;}",
- "</style>"
- ].join(""));
- });
-
///////////////////////////////////////////////////////////////////////////
// The Canvas object is a wrapper around an HTML5 <canvas> tag.
//
@@ -109,6 +99,7 @@ Licensed under the MIT license.
// Collection of HTML div layers for text overlaid onto the canvas
+ this.textContainer = null;
this.text = {};
// Cache of text fragments and metrics, so we can avoid expensively
@@ -228,16 +219,33 @@ Licensed under the MIT license.
// Create the text layer if it doesn't exist
if (layer == null) {
+
+ // Create the text layer container, if it doesn't exist
+
+ if (this.textContainer == null) {
+ this.textContainer = $("<div class='flot-text'></div>")
+ .css({
+ position: "absolute",
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ 'font-size': "smaller",
+ color: "#545454"
+ })
+ .insertAfter(this.element);
+ }
+
layer = this.text[classes] = $("<div></div>")
- .addClass("flot-text " + classes)
+ .addClass(classes)
.css({
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
})
- .insertAfter(this.element);
+ .appendTo(this.textContainer);
}
return layer;

0 comments on commit df0875e

Please sign in to comment.