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 src property for the thumbnail / small image
* Set href property to the URL of the full / large 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 export class Et2ImageExpose extends ExposeMixin(Et2Image) implements et2_IDetachedDOM
{ {
constructor() constructor()
@ -41,6 +42,7 @@ export class Et2ImageExpose extends ExposeMixin(Et2Image) implements et2_IDetach
getMedia(_value) : MediaValue[] getMedia(_value) : MediaValue[]
{ {
let media = super.getMedia(_value); let media = super.getMedia(_value);
media[0].title = this.label;
media[0].thumbnail = this.src; media[0].thumbnail = this.src;
return media; 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 // For filtering to only show things we can handle
const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ? const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
// IE only supports video/mp4 mime type // IE only supports video/mp4 mime type
new RegExp(/(video\/mp4)|(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\/:*)/); 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 // open office document mime type currently supported by webodf editor
const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/); 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 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, href : string,
// Mime type
type : string, 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) 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(); let fe = egw_get_file_editor_prefered_mimes();
// If the media type is not supported do not bind the click handler // 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') && (!fe || fe.mime && !fe.mime[this.exposeValue.mime])) || typeof this.exposeValue.download_url == 'undefined')
{ {
this.classList.remove("et2_clickable"); 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} {"button_id": 1, "text": egw.lang('close'), id: '1', image: 'cancel', default: true}
]; ];
// @ts-ignore
let mediaContent = this.getMedia(_value)[0]; let mediaContent = this.getMedia(_value)[0];
let dialog = new Et2Dialog(); let dialog = new Et2Dialog();
dialog.transformAttributes({ dialog.transformAttributes({
@ -609,6 +618,7 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
template: egw.webserverUrl + '/api/templates/default/audio_player.xet', template: egw.webserverUrl + '/api/templates/default/audio_player.xet',
dialogClass: "audio_player" dialogClass: "audio_player"
}); });
// @ts-ignore
document.body.appendChild(dialog); 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 // @ts-ignore Wants an argument, but does not require it
let fe = egw_get_file_editor_prefered_mimes(); 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); 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); this._audio_player(this.exposeValue);
} }
@ -827,7 +837,6 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
// Remove applied mime filter // Remove applied mime filter
nm.applyFilters({col_filter: {mime: ''}}); nm.applyFilters({col_filter: {mime: ''}});
} }
} }
protected expose_onclosed() {} protected expose_onclosed() {}

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

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