/
list-overflow.html
132 lines (113 loc) · 3.13 KB
/
list-overflow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>List overflow prototype</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="presets.js"></script>
<link rel="stylesheet" type="text/css" href="stylish.css" />
</head>
<body>
<div id="demo-navigation">
<a id="design-link" href="#">DESIGN TIME</a> | <a id="runtime-link" href="#">RUNTIME</a>
</div>
<div id="runtime">
<div id="container">
<ul id="links"><!-- visible links will fill in here --></ul>
<div id="overflow">
<a id="overflow-entry" href="#">···</a>
<ul id="overflow-links"><!-- overflow links will fill in here --></ul>
</div>
</div>
</div>
<div id="design">
<p>Load a preset link..</p>
<select id="design-presets"><!-- presets will fill in here --></select>
<br/><br/>
<p>You can add more lists in the file presets.js</p>
</div>
<script type="text/javascript" charset="utf-8">
// demo navigation.. yes this is ugly, but it's 3am
$("#runtime-link").click(function(){
switchToRuntime();
});
$("#design-link").click(function(){
$("#runtime").hide();
$("#design-link").css("fontWeight", "bold");
$("#runtime-link").css("fontWeight", "normal");
$("#design").show();
});
function switchToRuntime(){
hydrate();
recalc();
$("#runtime-link").css("fontWeight", "bold");
$("#design-link").css("fontWeight", "normal");
$("#design").hide();
$("#runtime").show();
}
// design time
var link_widths = presets.few;
$("#design-presets").change(function(){
link_widths = presets[$(this).val()];
switchToRuntime();
});
$.each(presets, function(name, val){
$("#design-presets").append($("<option value='" + name + "'>" + name + "</option>"));
});
// runtime
var SPACING = 40;
var TOTAL_WIDTH = 700;
var ENTRY_WIDTH = 25;
var DROPDOWN_PADDING = 10;
$("#overflow-entry").click(function(){
$("#overflow-links").toggle();
});
// turn the JS objects into divs in the link selector
function hydrate(){
// reset the runtime
$("#links li").remove();
$("#overflow-links").empty();
$("#overflow-links").css("marginLeft", 0);
$("#overflow-entry").hide();
$.each(link_widths, function(i, width){
var el = $("<li><a href='#'></a></li>");
el.width(width);
$("#links").append(el);
});
}
// the goods
function recalc() {
if (determineWidth() <= TOTAL_WIDTH) {
$("#links>li").last().css("marginRight", "0px");
return;
} else {
$("#overflow-entry").show();
moveToOverflow();
recalc();
}
};
// shift the last link to the top of the overflow list
function moveToOverflow() {
var last = $("#links>li").last();
$("#overflow-links").prepend(last.clone());
if(last.width() > Math.abs(parseInt($("#overflow-links").css("marginLeft")))){
$("#overflow-links").css("marginLeft", "-"+last.width()+"px");
}
last.remove();
}
// determines the width of the visible links
function determineWidth() {
var width = 0;
$("#links>li").each(function(){
width += $(this).width();
width += SPACING;
});
if($("#overflow-entry").is(":visible"))
{
return width + ENTRY_WIDTH - SPACING;
} else {
return width - SPACING;
}
}
</script>
</body>
</html>