summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/example-list.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/example-list.html')
-rw-r--r--misc/openlayers/examples/example-list.html302
1 files changed, 0 insertions, 302 deletions
diff --git a/misc/openlayers/examples/example-list.html b/misc/openlayers/examples/example-list.html
deleted file mode 100644
index 3ac9120..0000000
--- a/misc/openlayers/examples/example-list.html
+++ /dev/null
@@ -1,302 +0,0 @@
-<!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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 22:06:18 +0000