Apolmb Media Viewer Code
Status: Alpha
Brought to you by:
mkong
Menu
▾
▴
[r3]: / trunk / index.lzx Maximize Restore History
343 lines (227 with data), 9.9 kB
<?xml version="1.0" encoding="UTF-8"?>
<!-- ======================================================================
APOLMB
A PHP- and OpenLaszlo-based Media Browser
No need to get your thumb nailed.
- thumbnailless image gallery (intended to be a complete media browser somewhen)
- just (OpenLaszlo) Flash & PHP
VERSION: 0.1 (pre-alpha, developers and designers welcome)
HOMEPAGE: http://sourceforge.net/projects/apolmb/
AUTHOR: Mathias Weis
LICENSE: Creative Commons 3.0 non-commercial share alike license
KNOWN BUGS:
- for one reference gallery no pics are shown
- for some images only the first column of pixels is loaded and repeated in the thumbnail section
HOW-TO:
create version: - validate index.html
====================================================================== -->
<canvas height="100%" width="100%" bgcolor="#FFFFFF" title="APOLMB">
<!-- USER SETTINGS (GLOBALS) -->
<!-- Base URL of the application e.g. http://www.yourdomain.com/aplomb/ -->
<attribute name="baseurl" type="string" value="${global.HTTP_Path}"/>
<!-- Background image (jpeg, gif or png)-->
<attribute name="bgimage" type="string" value="${global.BG_Image}"/>
<!-- GLOBAL SETTINGS -->
<!-- The path the public directories containing media-->
<attribute name="path" type="string" value="public"/>
<!-- URL linking to the browse function php -->
<attribute name="browseurl" type="string" value="${canvas.baseurl + 'php/ls.php?path='}"/>
<!-- HANDLER -->
<handler name="onpath">
<![CDATA[
// set new source for listing and do request
// TODO: this throws a 'deprecated' warning, but setAttribute doesnt work
canvas.images.setSrc(canvas.browseurl + canvas.path);
Debug.write(canvas.browseurl + canvas.path);
canvas.images.doRequest();
]]>
</handler>
<!-- DATASETS -->
<!-- current directory XML data -->
<dataset name="images" proxied="false" request="true" src="${canvas.browseurl + canvas.path}" type="http">
<handler name="ondata">
<![CDATA[
Debug.write("Updated directory data");
]]>
</handler>
</dataset>
<!-- html for start screen -->
<dataset name="ds_html" proxied="false" request="true" src="html/welcome.html" type="http"/>
<!-- CUSTOM CLASSES -->
<class name="mytext" extends="text" fgcolor="#FFFFFF" resize="true"/>
<!-- CANVAS BACKGROUND -->
<image name="bg" y="0" x="0" height="${canvas.height}"
src="${canvas.bgimage}"
width="${canvas.width}"
/>
<view name="bgover" y="0" x="0" height="${canvas.height}"
bgcolor="#000000" opacity="0.8"
width="${canvas.width}"
/>
<!-- FILE BROWSER -->
<view name="files" y="20" opacity="0.5"
x="10"
bgcolor="#000000"
width="${canvas.width*0.18}"
height="${canvas.height*0.75}"
>
<method name="upDir" args="text">
<![CDATA[
if (canvas.path != "public"){
// create the new path
var splitpath = canvas.path.split("/");
var newpath = "";
for(var i=0;i<(splitpath.length-1);i++){
newpath = newpath + splitpath[i] + "/";
}
// slice last slash
newpath = newpath.slice(0,-1);
canvas.setAttribute("path", newpath);
}
]]>
</method>
<simplelayout axis="y" spacing="5" />
<view>
<simplelayout axis="x" spacing="5" />
<image src="graphics/system-file-manager.png" valign="middle" opacity="1"/>
<mytext text="${canvas.path + ' - File browser'}"/>
</view>
<view>
<simplelayout axis="x" spacing="10" />
<image src="graphics/go-up.png" valign="middle"
<image src="graphics/view-refresh.png" valign="middle"
canvas.path)"/>
<image src="graphics/go-home.png" valign="middle"
'public')"/>
</view>
<view datapath="images:/directory/directory[3-]">
<mytext datapath="text()"
canvas.path + '/' + this.text)"/>
</view>
</view>
<!-- IMAGE -->
<view name="image" y="90"
x="${canvas.width*0.2}"
bgcolor="#000000"
width="${canvas.width*0.6}"
height="${canvas.height - 150}">
<image name="image" y="10" height="${parent.height-70}"
width="${this.resourcewidth/this.resourceheight*(parent.height-70)}"
align="center" valign="middle"
src="" stretches="both">
</image>
<text name="html" y="20 " align="center" bgcolor="white"
height="${parent.height-70}"
width="${parent.width-40}"
multiline="true"
datapath="ds_html:/html/serialize()"/>
</view>
<!-- META SECTION -->
<view name="currentdir" datapath="images:/directory"
y="20" x="${canvas.width*0.2}"
height="50" width="${canvas.width*0.6}"
opacity="0.5" bgcolor="#000000" >
<!-- The total number of images in this directory -->
<attribute name="totalImages" type="number" value="0"/>
<handler name="ondata">
<![CDATA[
var timg = this.datapath.xpathQuery("image/last()");
if (timg == null)
{
timg = 0;
canvas.thumbs.setAttribute('page', 0);
}else{
canvas.thumbs.setAttribute('page', 1);
}
Debug.write(this.datapath.xpathQuery("image/last()"));
this.setAttribute("totalImages", timg);
]]>
</handler>
<simplelayout axis="x" spacing="2" />
<mytext text="${parent.totalImages + ' images in this directory'}"/>
<view datapath="archive">
<mytext text="${'Download images: <a href=\'' +
canvas.path + '/' +
parent.datapath.xpathQuery('text()') +
'\' target=\'_blank\'>' +
parent.datapath.xpathQuery('text()') +
'</a>'}"/>
</view>
</view>
<!-- THUMBNAILS -->
<view y="20" x="${canvas.width*0.81}"
height="${canvas.height*0.75}" width="${canvas.width*0.18}"
name="thumbs">
<!-- The current page were on -->
<attribute name="page" type="number" value="1"/>
<!-- Images per page -->
<attribute name="ipp" type="number" value="7"/>
<!-- The total number of pages -->
<attribute name="pagesTotal" type="number" value="${Math.ceil(canvas.currentdir.totalImages / this.ipp)}"/>
<simplelayout axis="y" spacing="10" />
<view width="${parent.width}" bgcolor="#000000" height="25">
<image x="10" src="graphics/media-skip-backward.png" valign="middle"
1 )"
visible="${canvas.thumbs.page > 1}"/>
<image x="30" src="graphics/media-seek-backward.png" valign="middle"
canvas.thumbs.page -1 )"
visible="${canvas.thumbs.page > 1}"/>
<mytext valign="middle"
text="${'Showing page ' + canvas.thumbs.page + ' of ' + canvas.thumbs.pagesTotal}"
x="60" width="${parent.width -100}"/>
<image x="${parent.width - 30}"
src="graphics/media-seek-forward.png"
valign="middle"
visible="${canvas.thumbs.page != canvas.thumbs.pagesTotal}"
canvas.thumbs.page + 1 )"/>
</view>
<view name="imagebox" width="${parent.width}" height="${parent.height - 40}">
<wrappinglayout axis="x" spacing="10" />
<view datapath="${'images:/directory/image['+ (canvas.thumbs.ipp*(canvas.thumbs.page-1)+1) + '-' + canvas.thumbs.ipp*canvas.thumbs.page +']'}"
bgcolor="#000000"
height="${parent.height*0.15}">
<!--<attribute name="filename" value="$path{'text()'}"/>-->
<handler name="ondata">
<![CDATA[
// set canvas.baseurl + for testing
this.image.setAttribute("src", canvas.path + "/" + this.datapath.xpathQuery("text()"));
]]>
</handler>
<simplelayout axis="x" spacing="0" />
<view width="${parent.height*0.1}" bgcolor="#000000"/>
<image name="image" src=""
width="${this.resourcewidth/this.resourceheight*parent.height/5*4}"
height="${(parent.height/5)*4}"
stretches="both"
valign="middle">
<handler name="onclick">
<![CDATA[
canvas.image.html.setAttribute("visible", false);
canvas.image.image.setAttribute("src", this.src);
]]>
</handler>
</image>
<view width="${parent.height*0.1}" bgcolor="#000000"/>
</view>
</view>
</view>
<!-- FOOTER -->
<view name="footer"
y="${canvas.height - 40}" x="${canvas.width*0.01}"
height="30" width="${canvas.width*0.98}"
bgcolor="#000000" opacity="0.5">
<mytext align="center" fontsize="10" fontstyle="bold">
This is a
<font color="#6666FF"><u><a href="http://sourceforge.net/projects/apolmb/" target="_blank">APOLMB v0.1</a></u></font>
thumbnailless Flash image gallery based on the
<font color="#6666FF"><u><a href="http://www.openlaszlo.org" target="_blank">OpenLaszlo Framework</a></u></font>
.
<font color="#6666FF"><u><a href="http://sourceforge.net/projects/apolmb/" target="_blank">APOLMB</a></u></font>
is licensed
<font color="#6666FF"><u><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">CC 3.0 BY-NC-SA</a></u></font>
. All Icons are part of the great
<font color="#6666FF"><u><a href="http://tango.freedesktop.org/" target="_blank">Tango Desktop Project</a></u></font>.
</mytext>
</view>
</canvas>