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, 302 insertions, 0 deletions
diff --git a/misc/openlayers/examples/example-list.html b/misc/openlayers/examples/example-list.html
new file mode 100644
index 0000000..3ac9120
--- /dev/null
+++ b/misc/openlayers/examples/example-list.html
@@ -0,0 +1,302 @@
+<!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:08:42 +0000