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. ...@@ -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 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 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', are given the classes 'flot-[x|y]-axis', and 'flot-[x|y]#-axis', where '#' is
where '#' is the number of the axis when there are multiple axes. For example, the number of the axis when there are multiple axes. For example, the x-axis
the x-axis labels for a simple plot with only one x-axis might look like this: labels for a simple plot with only a single x-axis might look like this:
```html ```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 class='flot-tick-label'>January 2013</div>
... ...
</div> </div>
......
...@@ -38,16 +38,6 @@ Licensed under the MIT license. ...@@ -38,16 +38,6 @@ Licensed under the MIT license.
var hasOwnProperty = Object.prototype.hasOwnProperty; 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. // The Canvas object is a wrapper around an HTML5 <canvas> tag.
// //
...@@ -109,6 +99,7 @@ Licensed under the MIT license. ...@@ -109,6 +99,7 @@ Licensed under the MIT license.
// Collection of HTML div layers for text overlaid onto the canvas // Collection of HTML div layers for text overlaid onto the canvas
this.textContainer = null;
this.text = {}; this.text = {};
// Cache of text fragments and metrics, so we can avoid expensively // Cache of text fragments and metrics, so we can avoid expensively
...@@ -228,8 +219,25 @@ Licensed under the MIT license. ...@@ -228,8 +219,25 @@ Licensed under the MIT license.
// Create the text layer if it doesn't exist // Create the text layer if it doesn't exist
if (layer == null) { 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>") layer = this.text[classes] = $("<div></div>")
.addClass("flot-text " + classes) .addClass(classes)
.css({ .css({
position: "absolute", position: "absolute",
top: 0, top: 0,
...@@ -237,7 +245,7 @@ Licensed under the MIT license. ...@@ -237,7 +245,7 @@ Licensed under the MIT license.
bottom: 0, bottom: 0,
right: 0 right: 0
}) })
.insertAfter(this.element); .appendTo(this.textContainer);
} }
return layer; 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