[bknr-cvs] hans changed trunk/projects/bos/payment-website/static/poi-ms.
BKNR Commits
bknr at bknr.net
Fri Nov 28 23:56:22 UTC 2008
Revision: 4097
Author: hans
URL: http://bknr.net/trac/changeset/4097
Refactor a bit.
Add overview page.
Add POI selector.
U trunk/projects/bos/payment-website/static/poi-ms.css
U trunk/projects/bos/payment-website/static/poi-ms.html
U trunk/projects/bos/payment-website/static/poi-ms.js
Modified: trunk/projects/bos/payment-website/static/poi-ms.css
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.css 2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.css 2008-11-28 23:56:21 UTC (rev 4097)
@@ -2,6 +2,10 @@
h2 { font-size: 160% }
h3 { font-size: 120% }
+ul#media-list {
+ margin: 2em 0em 2em 0em;
+}
+
ul#media-list li {
position: relative;
height: 44px;
@@ -18,6 +22,11 @@
background-color: #0f0;
}
+#poi-selector {
+ width: 300px;
+ font-size: 180%;
+}
+
.map {
position: relative;
}
Modified: trunk/projects/bos/payment-website/static/poi-ms.html
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.html 2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.html 2008-11-28 23:56:21 UTC (rev 4097)
@@ -17,64 +17,16 @@
<div id="bd">
<div id="yui-main">
<div class="yui-b" id="content">
- <img src="/poi-image/sunbear-sanctuary/1" width="360"
- height="360" float="left"/>Am 11.01 wurde in Samboja Lestari ein
- kleiner weiblicher Malaienbär (indonesisch: Bruang Madu =
- Honigbär) von einem Dorfbewohner abgegeben, die Mutter ist
- wahrscheinlich getötet worden. Bei der Ankunft war sie
- ungefähr eine Woche alt und wog nur einen Kilo. Seitdem
- wird sie von sechs Pflegern abwechselnd rund um die Uhr
- gepflegt. Ihr wurde der Name Arkana gegeben, und
- inzwischen wiegt sie schon 1,6 Kilo. Ihre neue
- "Mutter", also die Hauptbezugsperson ist Slamet
- Mulyono. Täglich wird sie für eine Stunde in die Sonne
- gebracht, mehrmals täglich wird ihre Temperatur gemessen,
- die genau wie bei Menschen auch zwischen 36 und 37 Grad
- liegt. Fällt die Temperatur, wird sie mit Eukalypusöl
- (indonesisch: Minyak Kayu Putih) eingerieben. Auch nachdem
- sie Milch bekommt, wird sie damit eingerieben, um den
- Kreislauf anzuregen. Wenn sie älter ist, wird sie Früchte
- zu essen bekommen, das Hauptnahrungsmittel der
- Malaienbären. Die Früchte, meistens Salak, Mango, Papaya,
- Ananas und Zuckerrohr kommen aus dem ökologischen Garten
- Samboja Lestaris Mehrmals täglich bekommt sie ein frisches
- Nest aus verschieden Blättern, normalerweise frisst die
- Mutter die Exkremente, und hält so das Nest sauber.
</div>
</div>
<div class="yui-b">
- <h1>Malaienbärgehege</h1>
+ <div id="small-map">
+ <img src="/infosystem/bilder/uebersichtskarte_klein.gif" width="118" height="62"/>
+ </div>
+ <select id="poi-selector" size="1">
+ <option>Ãœberblick</option>
+ </select>
<ul id="media-list">
- <li>
- <img src="/poi-image/sunbear-sanctuary/1" width="40" height="40"/>
- 20.03.2004<br/>
- <a href="#">Arkana der kleine Malaienbär</a>
- </li>
- <li>
- <img src="/poi-image/sunbear-sanctuary/2" width="40" height="40" />
- 20.03.2004<br/>
- <a href="#">Ursus Malayanus</a>
- </li>
- <li>
- <img src="/poi-image/sunbear-sanctuary/3" width="40" height="40" />
- 20.03.2004<br/>
- <a href="#">Das Gehege</a>
- </li>
- <li>
- <img src="/poi-image/sunbear-sanctuary/4" width="40" height="40" />
- 20.03.2004<br/>
- <a href="#">Fütterungskäfig</a>
- </li>
- <li>
- <img src="/poi-image/sunbear-sanctuary/5" width="40" height="40" />
- 20.03.2004<br/>
- <a href="#">Futterzubereitung</a>
- </li>
- <li>
- <img src="/poi-image/sunbear-sanctuary/6" width="40" height="40" />
- 20.03.2004<br/>
- <a href="#">Erfrischung in den Tropen</a>
- </li>
</ul>
</div>
</div>
Modified: trunk/projects/bos/payment-website/static/poi-ms.js
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.js 2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.js 2008-11-28 23:56:21 UTC (rev 4097)
@@ -2,8 +2,7 @@
$(document).ready(init);
-var poi_id;
-var poi;
+var pois = {};
Date.prototype.renderDate = function() {
return this.getDate() + '.' + this.getMonth() + '.' + (1900 + this.getYear());
@@ -17,55 +16,52 @@
var mediaHandlers = {
image: {
- icon: function (medium) { return IMG({ src: '/image/' + medium.id, width: 40, height: 40 }) },
- action: function (medium) {
- $('#content')
- .empty()
- .append(H2(null, medium.title),
- IMG({ src: '/image/' + medium.id }), BR(),
- H3(null, medium.subtitle),
- P(null, medium.description));
+ icon: function (medium) {
+ return IMG({ src: '/image/' + medium.id + '/thumbnail,,40,40', width: 40, height: 40 })
+ },
+ makeViewer: function (medium) {
+ return IMG({ src: '/image/' + medium.id });
}
},
panorama: {
- icon: function (medium) { return IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 }) },
- action: function (medium) {
- $('#content')
- .empty()
- .append(H2(null, medium.title),
- APPLET({ archive: '/static/ptviewer.jar',
- code: 'ptviewer.class',
- width: 400,
- height: 300},
- PARAM({ name: 'file', value: '/image/' + medium.id}),
- PARAM({ name: 'cursor', value: 'MOVE' })),
- H3(null, medium.subtitle),
- P(null, medium.description));
+ icon: function (medium) {
+ return IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 })
+ },
+ makeViewer: function (medium) {
+ return APPLET({ archive: '/static/ptviewer.jar',
+ code: 'ptviewer.class',
+ width: 400,
+ height: 300},
+ PARAM({ name: 'file', value: '/image/' + medium.id}),
+ PARAM({ name: 'cursor', value: 'MOVE' }));
}
},
movie: {
- icon: function (medium) { return IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 }) },
- action: function (medium) {
- $('#content')
- .empty()
- .append(H2(null, medium.title),
- OBJECT({ width: 360, height: 360 },
- PARAM({ name: "movie", value: medium.url }),
- EMBED({ src: medium.url, type: 'application/x-shockwave-flash',
- width: 400, height: 300 })), BR(),
- H3(null, medium.subtitle),
- P(null, medium.description));
+ icon: function (medium) {
+ return IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 })
+ },
+ makeViewer: function (medium) {
+ return OBJECT({ width: 360, height: 360 },
+ PARAM({ name: "movie", value: medium.url }),
+ EMBED({ src: medium.url, type: 'application/x-shockwave-flash',
+ width: 400, height: 300 }));
}
}
};
-function selectMedium(fn, e) {
+function showMedium(e) {
+ var medium = e.data;
$('#media-list *').removeClass('active');
$(e.target).addClass('active');
- fn();
+ $('#content')
+ .empty()
+ .append(H2(null, medium.title),
+ mediaHandlers[medium.mediumType].makeViewer(medium),
+ H3(null, medium.subtitle),
+ P(null, medium.description));
}
-function loadMainInfo() {
+function loadMainInfo(poi) {
var map = [];
for (var y = -1; y < 3; y++) {
var tiles = [];
@@ -81,6 +77,7 @@
}
map.push(IMG({ 'class': 'icon',
src: '/images/' + poi.icon + '.gif',
+ width: 16, height: 16,
style: 'left: ' + (poi.x - ((Math.floor(poi.x / 90) - 1) * 90) - 8) + 'px; '
+ 'top: ' + (poi.y - ((Math.floor(poi.y / 90) - 1) * 90) - 8) + 'px'}));
@@ -89,40 +86,69 @@
P(null, poi.description));
}
-var B = createDOMFunc('b', null);
+function showPOI(e) {
+ var poi = pois[(e.target && e.target.value) || e.data];
-function loadPoi() {
- document.title = poi.title;
- $('.yui-b h1').html(poi.title);
- loadMainInfo();
$('#media-list').empty();
- map(function (medium) {
- if (mediaHandlers[medium.mediumType]) {
- $('#media-list')
- .append($(A({ href: '#' },
- LI(null,
- mediaHandlers[medium.mediumType].icon(medium),
- (new Date(medium.timestamp)).renderDate(),
- BR(),
- B(null, medium.title || medium.name))))
- .bind('click', null, partial(selectMedium, partial(mediaHandlers[medium.mediumType].action, medium))));
- }
- }, poi.media);
+ if (!poi) {
+ showOverview();
+ } else {
+ document.title = poi.title;
+ $('.yui-b h1').html(poi.title);
+ loadMainInfo(poi);
+ map(function (medium) {
+ if (mediaHandlers[medium.mediumType]) {
+ $('#media-list')
+ .append($(A({ href: '#' },
+ LI(null,
+ mediaHandlers[medium.mediumType].icon(medium),
+ (new Date(medium.timestamp)).renderDate(),
+ BR(),
+ B(null, medium.title || medium.name))))
+ .bind('click', medium, showMedium));
+ }
+ }, poi.media);
+ }
}
+function showOverview() {
+
+ var elements = [];
+ elements.push(IMG({ src: '/infosystem/bilder/karte_uebersicht.jpg', width: 360, height: 360 }));
+ for (var i in pois) {
+ var poi = pois[i];
+ var link = A({ href: '#' },
+ IMG({ 'class': 'icon',
+ src: '/images/' + poi.icon + '.gif',
+ width: 16, height: 16,
+ title: poi.title,
+ style: 'left: ' + (Math.round(poi.x / 30) - 8) + 'px; '
+ + 'top: ' + (Math.round(poi.y / 30) - 8) + 'px' }));
+ $(link).bind('click', poi.id, showPOI);
+ elements.push(link);
+ }
+
+ $('#content')
+ .empty()
+ .append(H2(null, 'XXuebersichtXX'),
+ DIV({ 'class': 'map' }, elements));
+}
+
function loadData(data) {
try {
- var pois = data.pois;
+ for (var i in data.pois) {
+ var poi = data.pois[i];
+ pois[poi.id] = poi;
+ $('#poi-selector').append(OPTION({ value: poi.id }, poi.title));
+ }
+ $('#poi-selector').bind('change', null, showPOI);
- for (var i in pois) {
- if (pois[i].id == poi_id) {
- poi = pois[i];
- loadPoi();
- return;
- }
+ var poi_id = document.location.hash.replace(/#/, "");
+ if (poi_id) {
+ showPOI({ data: poi_id });
+ } else {
+ showOverview();
}
-
- alert('invalid poi id (not found)');
}
catch (e) {
alert(e);
@@ -130,11 +156,5 @@
}
function init() {
- poi_id = document.location.hash.replace(/#/, "");
-
- if (poi_id.match(/^[0-9]+$/)) {
- loadJSONDoc('/poi-json').addCallback(loadData);
- } else {
- alert('invalid poi id');
- }
+ loadJSONDoc('/poi-json').addCallback(loadData);
}
\ No newline at end of file
More information about the Bknr-cvs
mailing list