holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Et2ImageExpose, used in Resources app

Browse Source
This commit is contained in:
nathan 2022-05-05 08:51:09 -06:00
parent a8bcdd88b0
commit 632c40fbb7
3 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Expose/Et2ImageExpose.ts
View File

@ -8,6 +8,7 @@ import {et2_IDetachedDOM} from "../et2_core_interfaces";
* Set src property for the thumbnail / small image
* Set href property to the URL of the full / large image
*/
//@ts-ignore Something not right with types & inheritance according to TypeScript
export class Et2ImageExpose extends ExposeMixin(Et2Image) implements et2_IDetachedDOM
{
constructor()
@ -41,6 +42,7 @@ export class Et2ImageExpose extends ExposeMixin(Et2Image) implements et2_IDetach
getMedia(_value) : MediaValue[]
{
let media = super.getMedia(_value);
media[0].title = this.label;
media[0].thumbnail = this.src;
return media;

31
api/js/etemplate/Expose/ExposeMixin.ts
View File

@ -28,10 +28,10 @@ const IMAGE_DEFAULT = {
// For filtering to only show things we can handle
const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
// IE only supports video/mp4 mime type
new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/) :
new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/);
new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'ig') :
new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/, 'ig');
const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/);
const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/, 'ig');
// open office document mime type currently supported by webodf editor
const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
@ -48,14 +48,24 @@ export interface ExposeValue
}
/**
* Data to show the slide
* Data to show a single slide
*/
export interface MediaValue
{
title : string,
// Label for the image, shown in top left
title? : string,
// URL to the large version of the image, or full version of file
href : string,
// Mime type
type : string,
thumbnail? : string
// Smaller image (api/thumbnail.php) to show in indicator
thumbnail? : string,
// Url to download the file
download_href? : string
}
export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
@ -167,7 +177,7 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
let fe = egw_get_file_editor_prefered_mimes();
// If the media type is not supported do not bind the click handler
if(!this.exposeValue || typeof this.exposeValue.mime != 'string' || (!this.exposeValue.mime.match(MIME_REGEX, 'ig')
if(!this.exposeValue || typeof this.exposeValue.mime != 'string' || (!this.exposeValue.mime.match(MIME_REGEX)
&& (!fe || fe.mime && !fe.mime[this.exposeValue.mime])) || typeof this.exposeValue.download_url == 'undefined')
{
this.classList.remove("et2_clickable");
@ -579,7 +589,6 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
{"button_id": 1, "text": egw.lang('close'), id: '1', image: 'cancel', default: true}
];
// @ts-ignore
let mediaContent = this.getMedia(_value)[0];
let dialog = new Et2Dialog();
dialog.transformAttributes({
@ -609,6 +618,7 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
template: egw.webserverUrl + '/api/templates/default/audio_player.xet',
dialogClass: "audio_player"
});
// @ts-ignore
document.body.appendChild(dialog);
}
@ -652,11 +662,11 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
// @ts-ignore Wants an argument, but does not require it
let fe = egw_get_file_editor_prefered_mimes();
if(this.exposeValue.mime.match(MIME_REGEX, 'ig') && !this.exposeValue.mime.match(MIME_AUDIO_REGEX, 'ig'))
if(this.exposeValue.mime.match(MIME_REGEX) && !this.exposeValue.mime.match(MIME_AUDIO_REGEX))
{
this._init_blueimp_gallery(event, this.exposeValue);
}
else if(this.exposeValue.mime.match(MIME_AUDIO_REGEX, 'ig'))
else if(this.exposeValue.mime.match(MIME_AUDIO_REGEX))
{
this._audio_player(this.exposeValue);
}
@ -827,7 +837,6 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
// Remove applied mime filter
nm.applyFilters({col_filter: {mime: ''}});
}
}
protected expose_onclosed() {}

54
resources/templates/default/show.xet
View File

@ -39,17 +39,19 @@
<nextmatch-customfields id="customfields"/>
</row>
<row class="$row_cont[class]">
<image id="${row}[picture_thumb]" width="100%" expose_view="true" height="auto" href="$row_cont[picture_original]" src="${row}[picture_thumb]" />
<vbox>
<description id="${row}[name]" no_lang="1"/>
<description id="${row}[short_description]" no_lang="1"/>
</vbox>
<vbox align="left">
<description align="left" id="${row}[useable]" no_lang="1"/>
<description align="left" id="${row}[quantity]" no_lang="1"/>
<description align="left" id="${row}[bookable]" no_lang="1"/>
</vbox>
<vbox>
<et2-image-expose id="${row}[picture_thumb]" label="$row_cont[name]"
href="$row_cont[picture_original]"
src="$row_cont[picture_thumb]"/>
<vbox>
<description id="${row}[name]" no_lang="1"/>
<description id="${row}[short_description]" no_lang="1"/>
</vbox>
<vbox align="left">
<description align="left" id="${row}[useable]" no_lang="1"/>
<description align="left" id="${row}[quantity]" no_lang="1"/>
<description align="left" id="${row}[bookable]" no_lang="1"/>
</vbox>
<vbox>
<menulist>
<menupopup type="select-cat" id="{$row}[cat_id]" no_lang="1" readonly="true"/>
</menulist>
@ -108,20 +110,20 @@
</vbox>
</box>
<styles>
.image16 img {
max-width: 16px;
max-height: 16px;
}
div.action_popup[id] {
position: fixed;
top: 200px;
left: 450px;
width: 76ex;
z-index: 20000;
display: none;
border-collapse:collapse;
border-spacing:0px
}
</styles>
.image16 img {
max-width: 16px;
max-height: 16px;
}
.action_popup[id] {
position: fixed;
top: 200px;
left: 450px;
width: 76ex;
z-index: 20000;
display: none;
border-collapse:collapse;
border-spacing:0px
}
</styles>
</template>
</overlay>