[bknr-cvs] hans changed trunk/projects/bos/
BKNR Commits
bknr at bknr.net
Fri Nov 28 19:30:00 UTC 2008
Revision: 4095
Author: hans
URL: http://bknr.net/trac/changeset/4095
POI microsite kind of usable.
U trunk/projects/bos/m2/poi.lisp
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/m2/poi.lisp
===================================================================
--- trunk/projects/bos/m2/poi.lisp 2008-11-28 11:07:06 UTC (rev 4094)
+++ trunk/projects/bos/m2/poi.lisp 2008-11-28 19:30:00 UTC (rev 4095)
@@ -309,6 +309,13 @@
(defmethod json-encode progn ((object store-object))
(json:encode-object-element "id" (store-object-id object)))
+(defmethod json-encode progn ((poi poi))
+ (json:encode-object-elements
+ "name" (poi-name poi)
+ "icon" (poi-icon poi)
+ "x" (poi-center-x poi)
+ "y" (poi-center-y poi)))
+
(defmethod json-encode progn ((blob blob))
(json:encode-object-elements
"type" (blob-type blob)
Modified: trunk/projects/bos/payment-website/static/poi-ms.css
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.css 2008-11-28 11:07:06 UTC (rev 4094)
+++ trunk/projects/bos/payment-website/static/poi-ms.css 2008-11-28 19:30:00 UTC (rev 4095)
@@ -12,4 +12,16 @@
position: absolute;
left: -42px;
top: 2px;
-}
\ No newline at end of file
+}
+
+ul#media-list .active {
+ background-color: #0f0;
+}
+
+.map {
+ position: relative;
+}
+
+.map .icon {
+ position: absolute;
+}
Modified: trunk/projects/bos/payment-website/static/poi-ms.html
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.html 2008-11-28 11:07:06 UTC (rev 4094)
+++ trunk/projects/bos/payment-website/static/poi-ms.html 2008-11-28 19:30:00 UTC (rev 4095)
@@ -13,8 +13,6 @@
<div id="doc" class="yui-t3">
<div id="hd">
<img src="/infosystem/bilder/infosystem_header-de.gif" />
- <h1>Malaienbärgehege</h1>
- <h2>Rund 60 Hektar für Renaturierung und Bären</h2>
</div>
<div id="bd">
<div id="yui-main">
@@ -45,6 +43,7 @@
</div>
</div>
<div class="yui-b">
+ <h1>Malaienbärgehege</h1>
<ul id="media-list">
<li>
<img src="/poi-image/sunbear-sanctuary/1" width="40" height="40"/>
Modified: trunk/projects/bos/payment-website/static/poi-ms.js
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.js 2008-11-28 11:07:06 UTC (rev 4094)
+++ trunk/projects/bos/payment-website/static/poi-ms.js 2008-11-28 19:30:00 UTC (rev 4095)
@@ -3,60 +3,130 @@
$(document).ready(init);
var poi_id;
+var poi;
Date.prototype.renderDate = function() {
return this.getDate() + '.' + this.getMonth() + '.' + (1900 + this.getYear());
}
-var makeMediumMenuEntry = {
- image: function (medium) {
- return LI(null,
- IMG({ src: '/image/' + medium.id, width: 40, height: 40 }),
- (new Date(medium.timestamp)).renderDate(),
- BR(),
- A({ href: '#' }, medium.title || medium.name));
+var B = createDOMFunc('b', null);
+var OBJECT = createDOMFunc('object');
+var PARAM = createDOMFunc('param');
+var EMBED = createDOMFunc('embed');
+var APPLET = createDOMFunc('applet');
+
+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));
+ }
},
- panorama: function (medium) {
- return LI(null,
- IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 }),
- (new Date(medium.timestamp)).renderDate(),
- BR(),
- A({ href: '#' }, medium.title || medium.name));
+ 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));
+ }
},
- movie: function (medium) {
- return LI(null,
- IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 }),
- (new Date(medium.timestamp)).renderDate(),
- BR(),
- A({ href: '#' }, medium.title || medium.name));
+ 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));
+ }
}
-
};
-function loadPoi(poi) {
+function selectMedium(fn, e) {
+ $('#media-list *').removeClass('active');
+ $(e.target).addClass('active');
+ fn();
+}
+
+function loadMainInfo() {
+ var map = [];
+ for (var y = -1; y < 3; y++) {
+ var tiles = [];
+ for (var x = -1; x < 3; x++) {
+ tiles.push(IMG({ 'class': 'map-tile',
+ src: '/overview/'
+ + (Math.floor(poi.x / 90) + x) * 90
+ + '/'
+ + (Math.floor(poi.y / 90) + y) * 90,
+ width: 90, height: 90 }));
+ }
+ map.push(DIV(null, tiles));
+ }
+ map.push(IMG({ 'class': 'icon',
+ src: '/images/' + poi.icon + '.gif',
+ 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'}));
+
+ $('#content').empty().append(H2(null, poi.subtitle),
+ DIV({ 'class': 'map' }, map),
+ P(null, poi.description));
+}
+
+var B = createDOMFunc('b', null);
+
+function loadPoi() {
document.title = poi.title;
- $('#hd h1').html(poi.title);
- $('#hd h2').html(poi.subtitle);
- $('#content').empty().html(poi.description);
+ $('.yui-b h1').html(poi.title);
+ loadMainInfo();
$('#media-list').empty();
map(function (medium) {
- if (makeMediumMenuEntry[medium.mediumType]) {
- $('#media-list').append(makeMediumMenuEntry[medium.mediumType](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);
}
function loadData(data) {
- var pois = data.pois;
+ try {
+ var pois = data.pois;
- for (var i in pois) {
- if (pois[i].id == poi_id) {
- loadPoi(pois[i]);
- return;
+ for (var i in pois) {
+ if (pois[i].id == poi_id) {
+ poi = pois[i];
+ loadPoi();
+ return;
+ }
}
+
+ alert('invalid poi id (not found)');
}
-
- alert('invalid poi id (not found)');
+ catch (e) {
+ alert(e);
+ }
}
function init() {
More information about the Bknr-cvs
mailing list