Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

303 lines (296 sloc) 11.266 kB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- This is the example list source: if you are trying to look at the
source of an example, YOU ARE IN THE WRONG PLACE. If you want to view
the source of just one example, you can typically choose
"This Frame -> View source" when right clicking on the exmaple. If not,
choose to open the example in a new window (via the context menu
click on the link), and view source from there. -->
<title>OpenLayers Examples</title>
<link rel="alternate" href="example-list.xml" type="application/atom+xml" />
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
line-height: 1.25em;
}
#logo {
text-shadow: 2px 2px 3px gray;
color: white;
vertical-align: middle;
position: absolute;
top: 5px;
left: 5px;
font-size: 34px;
font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
}
#logo img {
vertical-align: middle;
}
.ex_container{
}
.ex_container a {
text-decoration: none;
padding: 5px 1em;
display: block;
}
.ex_container a:hover {
background-color: #eeeeee;
}
.ex_title{
display: inline;
font-weight: bold;
color: #333;
}
.ex_tags{
display: inline;
font-size: smaller;
font-style: italic;
color: #333;
}
.ex_filename {
font-weight: normal;
font-size: 0.8em;
color: #ccc
}
.ex_description{
color: #222;
padding: 3px;
}
.ex_classes{
font-size: .7em;
color: gray;
display: none;
}
#toc {
width: 100%;
height: 100%;
}
#filter {
position: fixed;
text-align: center;
top: 0px;
background: #9D9FA1;
width: 100%;
padding: 1.3em 0;
}
#examples {
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
#examples ul {
list-style: none;
margin: 0;
padding: 0;
margin-top: 4em;
}
#examples ul li {
display: inline;
float: left;
width: 350px;
margin: 10px 0 0 10px;
padding: 0;
border: 1px solid #ddd;
border-radius: 3px;
}
#examples .mainlink {
height: 8em;
overflow: auto;
}
#exwin {
position: absolute;
top: 0;
left: 30%;
width: 70%;
height: 100%;
border: none;
border-left: 1px solid #cccccc;
margin: 0;
}
@media only screen and (max-width: 600px) {
#examples ul {
margin-top: 100px;
}
#filter {
padding-top: 50px;
}
#examples ul li {
margin-left: 0;
border-radius: 0;
border-width: 1px 0;
width: 100%;
}
#examples .mainlink {
height: auto;
}
#examples .ex_tags, #examples .ex_filename {
display: none;
}
}
</style>
<script type="text/javascript" src="Jugl.js"></script>
<script type="text/javascript" src="example-list.js"></script>
<script type="text/javascript">
var template, target;
function listExamples(examples) {
target.innerHTML = "";
var node = template.process({
context: {examples: examples},
clone: true,
parent: target
});
document.getElementById("count").innerHTML = "(" + examples.length + ")";
}
var timerId;
function inputChange() {
if(timerId) {
window.clearTimeout(timerId);
}
var text = this.value;
timerId = window.setTimeout(function() {
filterList(text);
}, 500);
}
function filterList(text) {
var examples;
if(text.length < 2) {
examples = info.examples;
} else {
var words = text.split(/\W+/);
var scores = {};
for(var i=0; i<words.length; ++i) {
var word = words[i].toLowerCase();
var dict = info.index[word];
var updateScores = function() {
for(exIndex in dict) {
var count = dict[exIndex];
if(scores[exIndex]) {
if(scores[exIndex][word]) {
scores[exIndex][word] += count;
} else {
scores[exIndex][word] = count;
}
} else {
scores[exIndex] = {};
scores[exIndex][word] = count;
}
}
};
if(dict) {
updateScores();
} else {
var r;
for (idx in info.index) {
r = new RegExp(word);
if (r.test(idx)) {
dict = info.index[idx];
updateScores();
}
}
}
}
examples = [];
for(var j in scores) {
var ex = info.examples[j];
ex.score = scores[j];
examples.push(ex);
}
// sort examples by first by number of words matched, then
// by word frequency
examples.sort(function(a, b) {
var cmp;
var aWords = 0, bWords = 0;
var aScore = 0, bScore = 0;
for(var i in a.score) {
aScore += a.score[i];
aWords += 1;
}
for(var j in b.score) {
bScore += b.score[j];
bWords += 1;
}
if(aWords == bWords) {
cmp = bScore - aScore;
} else {
cmp = bWords - aWords;
}
return cmp;
});
}
listExamples(examples);
}
function showAll() {
document.getElementById("keywords").value = "";
listExamples(info.examples);
}
function parseQuery() {
var params = {};
var list = window.location.search.substring(1).split("&");
for(var i=0; i<list.length; ++i) {
var pair = list[i].split("=");
if(pair.length == 2) {
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
}
if(params["q"]) {
var input = document.getElementById("keywords");
input.value = params["q"];
inputChange.call(input);
}
}
window.onload = function() {
//document.getElementById('keywords').focus();
template = new jugl.Template("template");
target = document.getElementById("examples");
listExamples(info.examples);
document.getElementById("keywords").onkeyup = inputChange;
parseQuery();
};
</script>
</head>
<body>
<div id="toc">
<div id="filter">
<div id="logo">
<img src="http://www.openlayers.org/images/OpenLayers.trac.png"
/>
OpenLayers
</div>
<p>
<input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
<span id="count"></span>
<a href="javascript:void showAll();">show all</a>
</p>
</div>
<div id="examples"></div>
</div>
<div style="display: none;">
<ul id="template">
<li class="ex_container" jugl:repeat="example examples">
<a jugl:attributes="href example.link" class="mainlink"
target="_blank">
<h5 class="ex_title">
<span jugl:replace="example.title">title</span><br>
<span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
</h5>
<div class="ex_description" jugl:content="example.shortdesc">
Short Description goes here
</div>
<p class="ex_classes" jugl:content="example.classes">
Related Classes go here
</p>
<div class="ex_tags" jugl:content="'...tagged with ' + example.tags">
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.