Commit df0875e5 authored by David Schnur's avatar David Schnur

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.
parent 13c71fa0
......@@ -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>
......
......@@ -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,8 +219,25 @@ 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,
......@@ -237,7 +245,7 @@ Licensed under the MIT license.
bottom: 0,
right: 0
})
.insertAfter(this.element);
.appendTo(this.textContainer);
}
return layer;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment