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() {
-
BKNR Commits