Skip to content

Commit 31d725f

Browse files
thomaslulethomaslule
committed
use div and ul for fixed container
1 parent 8d544da commit 31d725f

File tree

6 files changed

+55
-39
lines changed

6 files changed

+55
-39
lines changed

‎playground/demo.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
body {
22
margin: 0;
33
background-color: #ecc546;
4+
font-family: 'Helvetica Neue', sans-serif;
45
}
56

67
h1 {
78
color: #111;
8-
font-family: 'Helvetica Neue', sans-serif;
99
font-size: 200px;
1010
font-weight: bold;
1111
letter-spacing: -1px;
@@ -38,7 +38,6 @@ h2 {
3838

3939
p {
4040
color: #685206;
41-
font-family: 'Helvetica Neue', sans-serif;
4241
font-size: 14px;
4342
line-height: 24px;
4443
margin: 0 5px 24px 5px;

‎playground/index.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,24 @@ <h1>fixed-footnotes</h1>
3838
position: fixed;
3939
bottom: 0;
4040
background-color: #ecc546;
41+
color: #685206;
42+
font-size: 14px;
4143
border-top: 1px solid black;
4244
max-width: 500px;
4345
width: 100%;
46+
padding: 5px;
4447
}
4548

46-
.fixed-footnotes-container:empty {
49+
.fixed-footnotes-container.empty {
4750
display: none;
4851
}
4952

50-
.fixed-footnotes-note {
51-
margin: 0;
52-
}</code></pre>
53+
.fixed-footnotes-container > ul {
54+
margin: 0;
55+
padding: 0;
56+
list-style-type: none;
57+
}
58+
</code></pre>
5359
</div>
5460
</div>
5561
<h2>Scroll this long article to see footnotes show and hide as you pass their references.</h2>

‎playground/theme.css

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,20 @@
22
position: fixed;
33
bottom: 0;
44
background-color: #ecc546;
5+
color: #685206;
6+
font-size: 14px;
57
border-top: 1px solid black;
68
max-width: 500px;
79
width: 100%;
10+
padding: 5px;
811
}
912

10-
.fixed-footnotes-container:empty {
13+
.fixed-footnotes-container.empty {
1114
display: none;
1215
}
1316

14-
.fixed-footnotes-note {
15-
margin: 0;
17+
.fixed-footnotes-container > ul {
18+
margin: 0;
19+
padding: 0;
20+
list-style-type: none;
1621
}

‎spec/fixed-footnotes-spec.js

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe("fixed-footnotes", function() {
77
jsdom.env("<body></body>", ["http://code.jquery.com/jquery.js"], function(err, w) {
88
global.window = w;
99
var ffn = footnotes();
10-
expect(w.$("section").length).toBe(1);
10+
expect(w.$(".fixed-footnotes-container").length).toBe(1);
1111
done();
1212
});
1313
});
@@ -25,21 +25,20 @@ describe("fixed-footnotes", function() {
2525
jsdom.env("<body><div></div></body>", ["http://code.jquery.com/jquery.js"],
2626
function(err, w) {
2727
var ffn = footnotes({}, w);
28-
expect(w.$("body > *:last").prop("tagName")).toBe("SECTION");
28+
expect(w.$("body > *:last").hasClass("fixed-footnotes-container")).toBe(true);
2929
done();
3030
});
3131
});
3232

3333
it("should create the container properly with the options provided", function(done) {
34-
jsdom.env("<body><div></div></body>", ["http://code.jquery.com/jquery.js"],
34+
jsdom.env("<body><div id='super'></div></body>", ["http://code.jquery.com/jquery.js"],
3535
function(err, w) {
3636
var ffn = footnotes({
37-
fixedContainerLocation: "div",
37+
fixedContainerLocation: "#super",
3838
fixedContainerId: "myId",
3939
fixedContainerClass: "myClass"
4040
}, w);
41-
var $container = w.$("div > *:last");
42-
expect($container.prop("tagName")).toBe("SECTION");
41+
var $container = w.$("#super > *:last");
4342
expect($container.attr("id")).toBe("myId");
4443
expect($container.hasClass("myClass")).toBe(true);
4544
done();
@@ -77,7 +76,7 @@ describe("fixed-footnotes", function() {
7776
global.window = w;
7877
var ffn = footnotes({}, w);
7978
ffn._displayNote(w.$("#note")[0])
80-
expect(w.$("section p").length).toBe(1);
79+
expect(w.$(".fixed-footnotes-note").length).toBe(1);
8180
done();
8281
});
8382
});
@@ -95,9 +94,9 @@ describe("fixed-footnotes", function() {
9594
}
9695
}, w);
9796
ffn._displayNote(w.$("#note")[0])
98-
expect(w.$("section p").length).toBe(1);
99-
expect(w.$("section p").hasClass("anotherClass")).toBe(true);
100-
expect(w.$("section p").text()).toBe("NOTE");
97+
expect(w.$(".fixed-footnotes-note").length).toBe(1);
98+
expect(w.$(".fixed-footnotes-note").hasClass("anotherClass")).toBe(true);
99+
expect(w.$(".fixed-footnotes-note").text()).toBe("NOTE");
101100
done();
102101
});
103102
});

‎src/fixed-footnotes.css

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
border-top: 1px solid grey;
66
width: 100%;
77
padding: 5px;
8+
color: black;
89
}
910

10-
.fixed-footnotes-container:empty {
11+
.fixed-footnotes-container.empty {
1112
display: none;
1213
}
1314

14-
.fixed-footnotes-note {
15-
color: black;
16-
margin: 0;
17-
padding: 0;
15+
.fixed-footnotes-container > ul {
16+
margin: 0;
17+
padding: 0;
18+
list-style-type: none;
1819
}

‎src/fixed-footnotes.js

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ var FixedFootnotes = function(options, w) {
1010
this.options = Object.assign({}, this.defaultOptions, options);
1111
this._window = w || window;
1212

13-
this._fixedContainer = this._createFixedContainer();
13+
var fixedContainer = this._createFixedContainer();
14+
this._fixedContainer = fixedContainer;
15+
this._fixedContainerList = fixedContainer.firstChild;
1416
this._refreshListeners = [];
1517

1618
// throttle of the refresh event to improve performances
@@ -57,9 +59,15 @@ FixedFootnotes.prototype.stop = function() {
5759
*/
5860
FixedFootnotes.prototype.refresh = function() {
5961
var self = this;
60-
util.emptyElement(this._fixedContainer);
62+
util.emptyElement(this._fixedContainerList);
63+
this._fixedContainer.className = this.options.fixedContainerClass + " empty";
6164
this._getReferences().forEach(function(reference) {
62-
self._displayIfVisible(reference);
65+
var note = self._getNoteFromRef(reference);
66+
if (!note) return;
67+
if (util.isElementInViewport(reference, self._window) && !util.isElementInViewport(note, self._window)) {
68+
self._displayNote(note);
69+
self._fixedContainer.className = self.options.fixedContainerClass;
70+
}
6371
});
6472
this._dispatchRefresh();
6573
};
@@ -99,9 +107,10 @@ FixedFootnotes.prototype.removeRefreshListener = function(listener) {
99107
* Create the fixed container that will host the footnotes.
100108
*/
101109
FixedFootnotes.prototype._createFixedContainer = function() {
102-
var fixedContainer = this._window.document.createElement("section");
110+
var fixedContainer = this._window.document.createElement("div");
103111
fixedContainer.id = this.options.fixedContainerId;
104-
fixedContainer.className = this.options.fixedContainerClass;
112+
fixedContainer.className = this.options.fixedContainerClass + " empty";
113+
fixedContainer.appendChild(this._window.document.createElement("ul"));
105114
this._window.document.querySelector(this.options.fixedContainerLocation).appendChild(fixedContainer);
106115
return fixedContainer;
107116
}
@@ -118,11 +127,7 @@ FixedFootnotes.prototype._getReferences = function() {
118127
* It won't display the footnote in the fixed container if the footnote is already on screen.
119128
*/
120129
FixedFootnotes.prototype._displayIfVisible = function(reference) {
121-
var note = this._getNoteFromRef(reference);
122-
if (!note) return;
123-
if (util.isElementInViewport(reference, this._window) && !util.isElementInViewport(note, this._window)) {
124-
this._displayNote(note);
125-
}
130+
126131
};
127132

128133
/*
@@ -136,11 +141,12 @@ FixedFootnotes.prototype._getNoteFromRef = function(reference) {
136141
* Add a footnote to the fixed container.
137142
*/
138143
FixedFootnotes.prototype._displayNote = function(note) {
139-
var newNote = note.cloneNode(true);
140-
util.removeAllIds(newNote); // we don't want duplicate ids
141-
newNote.className += (" " + this.options.footnoteClass);
142-
newNote = this.options.transformNote(newNote);
143-
this._fixedContainer.appendChild(newNote);
144+
var li = this._window.document.createElement("li");
145+
li.className = this.options.footnoteClass;
146+
li.innerHTML = note.innerHTML;
147+
util.removeAllIds(li); // we don't want duplicate ids
148+
li = this.options.transformNote(li);
149+
this._fixedContainerList.appendChild(li);
144150
};
145151

146152
/*

0 commit comments

Comments
 (0)