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

Convert expose to TS and apply it to all exposable widgets

Browse Source
This commit is contained in:
Hadi Nategh 2020-02-19 17:14:44 +01:00
parent 2d5012d208
commit 9a4f2d1e69
13 changed files with 1722 additions and 1178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/js/etemplate/et2_core_common.js
View File

@ -428,6 +428,7 @@ function et2_activateLinks(_content) {
* Inserts the structure generated by et2_activateLinks into the given DOM-Node
*/
function et2_insertLinkText(_text, _node, _target) {
var _a;
if (!_node) {
egw.debug("warn", "et2_insertLinkText called without node", _text, _node, _target);
return;
@ -449,8 +450,7 @@ function et2_insertLinkText(_text, _node, _target) {
}
}
}
else if (s.text) // no need to generate a link, if there is no content in it
{
else if ((_a = s) === null || _a === void 0 ? void 0 : _a.text) {
if (!s.href) {
egw.debug("warn", "et2_activateLinks gave bad data", s, _node, _target);
s.href = "";

2
api/js/etemplate/et2_core_common.ts
View File

@ -606,7 +606,7 @@ function et2_insertLinkText(_text, _node, _target)
}
}
}
else if(s.text) // no need to generate a link, if there is no content in it
else if(s?.text) // no need to generate a link, if there is no content in it
{
if(!s.href)
{

4
api/js/etemplate/et2_core_interfaces.js
View File

@ -49,4 +49,8 @@ var et2_IPrint = "et2_IPrint";
function implements_et2_IPrint(obj) {
return implements_methods(obj, ["beforePrint", "afterPrint"]);
}
var et2_IExposable = "et2_IExposable";
function implements_et2_IExposable(obj) {
return implements_methods(obj, ["getMedia"]);
}
//# sourceMappingURL=et2_core_interfaces.js.map

17
api/js/etemplate/et2_core_interfaces.ts
View File

@ -211,3 +211,20 @@ function implements_et2_IPrint(obj : et2_widget)
{
return implements_methods(obj, ["beforePrint", "afterPrint"]);
}
/**
* Interface all exposed widget must support in order to getMedia for the blueimp Gallery.
*/
interface et2_IExposable
{
/**
* get media an array of media objects to pass to blueimp Gallery
* @param {array} _attrs
*/
getMedia(_attrs) : void;
}
var et2_IExposable = "et2_IExposable";
function implements_et2_IExposable(obj : et2_widget)
{
return implements_methods(obj, ["getMedia"]);
}

2
api/js/etemplate/et2_types.d.ts vendored
View File

@ -167,7 +167,6 @@ declare var et2_vfsUid : any;
declare var et2_vfsUpload : any;
declare var et2_vfsSelect : any;
declare var et2_video : any;
declare var et2_IExposable : any;
declare var tinymce : any;
declare var date : any;
declare var tinyMCE : any;
@ -200,3 +199,4 @@ declare class Resumable {
declare class dhtmlXTreeObject {
constructor(options : any);
}
declare function expose(widget:any) : any;

17
api/js/etemplate/et2_widget_description.js
View File

@ -21,6 +21,7 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
@ -35,7 +36,7 @@ require("./et2_types");
/**
* Class which implements the "description" XET-Tag
*/
var et2_description = /** @class */ (function (_super) {
exports.et2_description = expose((_a = /** @class */ (function (_super) {
__extends(et2_description, _super);
/**
* Constructor
@ -167,7 +168,7 @@ var et2_description = /** @class */ (function (_super) {
var $span = this.options.mime_data ? jQuery(this.span) : jQuery('a', this.span);
$span.click(function (e) {
if (self.options.expose_view && typeof self.options.mime != 'undefined' && self.options.mime.match(self.mime_regexp, 'ig')) {
// ToDoExpose: self._init_blueimp_gallery(e, href);
self._init_blueimp_gallery(e, href);
}
else {
egw(window).open_link(mime_data || href, self.options.extra_link_target, self.options.extra_link_popup, null, null, self.options.mime);
@ -267,7 +268,9 @@ var et2_description = /** @class */ (function (_super) {
.tooltip("open");
}, { widget: this, span: this.span }));
};
et2_description._attributes = {
return et2_description;
}(et2_core_baseWidget_1.et2_baseWidget)),
_a._attributes = {
"label": {
"name": "Label",
"default": "",
@ -349,9 +352,7 @@ var et2_description = /** @class */ (function (_super) {
"default": "Edit",
"description": "Text to show as tooltip of defined action"
}
};
return et2_description;
}(et2_core_baseWidget_1.et2_baseWidget));
exports.et2_description = et2_description;
et2_core_widget_1.et2_register_widget(et2_description, ["description", "label"]);
},
_a));
et2_core_widget_1.et2_register_widget(exports.et2_description, ["description", "label"]);
//# sourceMappingURL=et2_widget_description.js.map

7
api/js/etemplate/et2_widget_description.ts
View File

@ -23,7 +23,7 @@ import './et2_types';
/**
* Class which implements the "description" XET-Tag
*/
export class et2_description extends et2_baseWidget implements et2_IDetachedDOM
export const et2_description = expose(class et2_description extends et2_baseWidget implements et2_IDetachedDOM, et2_IExposable
{
static readonly _attributes : any = {
"label": {
@ -292,7 +292,7 @@ export class et2_description extends et2_baseWidget implements et2_IDetachedDOM
$span.click(function(e) {
if (self.options.expose_view && typeof self.options.mime !='undefined' && self.options.mime.match(self.mime_regexp,'ig'))
{
// ToDoExpose: self._init_blueimp_gallery(e, href);
self._init_blueimp_gallery(e, href);
}
else
{
@ -423,6 +423,5 @@ export class et2_description extends et2_baseWidget implements et2_IDetachedDOM
.tooltip("open");
}, {widget: this, span: this.span}));
}
}
});
et2_register_widget(et2_description, ["description", "label"]);

22
api/js/etemplate/et2_widget_link.js
View File

@ -22,6 +22,7 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
@ -528,7 +529,7 @@ var et2_link_entry = /** @class */ (function (_super) {
buttonItem.css('background-image', 'url(' + url + ')');
},
_renderItem: function (ul, item) {
var li = jQuery("<li>", { "class": "et2_link_entry_app_option" }), wrapper = jQuery("<div>", { text: item.label });
var li = jQuery("<li>", { class: "et2_link_entry_app_option" }), wrapper = jQuery("<div>", { text: item.label });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
@ -1229,7 +1230,7 @@ et2_core_widget_1.et2_register_widget(et2_link, ["link", "link-entry_ro"]);
*
* TODO: This one used to have expose
*/
var et2_link_string = /** @class */ (function (_super) {
exports.et2_link_string = expose((_a = /** @class */ (function (_super) {
__extends(et2_link_string, _super);
/**
* Constructor
@ -1410,7 +1411,9 @@ var et2_link_string = /** @class */ (function (_super) {
this._labelContainer.contents().not(this.list).remove();
}
};
et2_link_string._attributes = {
return et2_link_string;
}(et2_core_valueWidget_1.et2_valueWidget)),
_a._attributes = {
"application": {
"name": "Application",
"type": "string",
@ -1436,14 +1439,12 @@ var et2_link_string = /** @class */ (function (_super) {
"expose_view": {
name: "Expose view",
type: "boolean",
"default": true,
default: true,
description: "Clicking on description with href value would popup an expose view, and will show content referenced by href."
}
};
return et2_link_string;
}(et2_core_valueWidget_1.et2_valueWidget));
exports.et2_link_string = et2_link_string;
et2_core_widget_1.et2_register_widget(et2_link_string, ["link-string"]);
},
_a));
et2_core_widget_1.et2_register_widget(exports.et2_link_string, ["link-string"]);
/**
* UI widget for one or more links in a list (table)
*/
@ -1882,7 +1883,7 @@ var et2_link_list = /** @class */ (function (_super) {
}
};
return et2_link_list;
}(et2_link_string));
}(exports.et2_link_string));
exports.et2_link_list = et2_link_list;
et2_core_widget_1.et2_register_widget(et2_link_list, ["link-list"]);
/**
@ -1948,3 +1949,4 @@ var et2_link_add = /** @class */ (function (_super) {
}(et2_core_inputWidget_1.et2_inputWidget));
exports.et2_link_add = et2_link_add;
et2_core_widget_1.et2_register_widget(et2_link_add, ["link-add"]);
//# sourceMappingURL=et2_widget_link.js.map

4
api/js/etemplate/et2_widget_link.ts
View File

@ -1496,7 +1496,7 @@ et2_register_widget(et2_link, ["link", "link-entry_ro"]);
*
* TODO: This one used to have expose
*/
export class et2_link_string extends et2_valueWidget implements et2_IDetachedDOM
export const et2_link_string = expose(class et2_link_string extends et2_valueWidget implements et2_IDetachedDOM, et2_IExposable
{
static readonly _attributes : any = {
"application": {
@ -1751,7 +1751,7 @@ export class et2_link_string extends et2_valueWidget implements et2_IDetachedDOM
this._labelContainer.contents().not(this.list).remove();
}
}
}
});
et2_register_widget(et2_link_string, ["link-string"]);
/**

15
api/js/etemplate/et2_widget_vfs.js
View File

@ -22,6 +22,7 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
@ -429,10 +430,9 @@ et2_core_widget_1.et2_register_widget(et2_vfsName_ro, ["vfs-name_ro"]);
* </span>
*
* span.overlayContainer is optional and only generated for symlinks
* @todo implement mixin Expose class
* @augments et2_valueWidget
*/
var et2_vfsMime = /** @class */ (function (_super) {
exports.et2_vfsMime = expose((_a = /** @class */ (function (_super) {
__extends(et2_vfsMime, _super);
/**
* Constructor
@ -579,7 +579,9 @@ var et2_vfsMime = /** @class */ (function (_super) {
this.set_value(_values['value']);
}
};
et2_vfsMime._attributes = {
return et2_vfsMime;
}(et2_core_valueWidget_1.et2_valueWidget)),
_a._attributes = {
"value": {
"type": "any",
"description": "Array of (stat) information about the file"
@ -608,10 +610,9 @@ var et2_vfsMime = /** @class */ (function (_super) {
default: "",
description: " Size of thumbnail in pixel for specified mime type with syntax of: mime_type(s),size (eg. image,video,128)"
}
};
return et2_vfsMime;
}(et2_core_valueWidget_1.et2_valueWidget));
et2_core_widget_1.et2_register_widget(et2_vfsMime, ["vfs-mime"]);
},
_a));
et2_core_widget_1.et2_register_widget(exports.et2_vfsMime, ["vfs-mime"]);
/**
* vfs-size
* Human readable file sizes

5
api/js/etemplate/et2_widget_vfs.ts
View File

@ -483,10 +483,9 @@ et2_register_widget(et2_vfsName_ro, ["vfs-name_ro"]);
* </span>
*
* span.overlayContainer is optional and only generated for symlinks
* @todo implement mixin Expose class
* @augments et2_valueWidget
*/
class et2_vfsMime extends et2_valueWidget implements et2_IDetachedDOM
export const et2_vfsMime = expose(class et2_vfsMime extends et2_valueWidget implements et2_IDetachedDOM, et2_IExposable
{
static readonly _attributes : any = {
"value": {
@ -694,7 +693,7 @@ class et2_vfsMime extends et2_valueWidget implements et2_IDetachedDOM
this.set_value(_values['value']);
}
}
}
});
et2_register_widget(et2_vfsMime, ["vfs-mime"]);
/**

386
api/js/etemplate/expose.js
View File

@ -1,3 +1,4 @@
"use strict";
/**
* EGroupware eTemplate2 - JS object implementing expose view of media and a gallery view
*
@ -9,37 +10,28 @@
* @copyright Stylite AG
* @version $Id$
*/
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
/api/js/jquery/blueimp/js/blueimp-gallery.min.js;
*/
/**
* Interface all exposed widget must support in order to getMedia for the blueimp Gallery.
*/
var et2_IExposable = new Interface(
{
/**
* get media an array of media objects to pass to blueimp Gallery
* @param {array} _attrs
*/
getMedia: function(_attrs) {}
});
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/**
* This function extends the given widget with blueimp gallery plugin
*
* @param {type} widget
* @returns {widget}
*/
function expose (widget)
{
function expose(Base) {
"use strict";
// Common expose functions
var THUMBNAIL_MAX = 100;
// Minimum data to qualify as an image and not cause errors
var IMAGE_DEFAULT = {
title: egw.lang('loading'),
@ -48,19 +40,15 @@ function expose (widget)
thumbnail: '',
loading: true
};
// For filtering to only show things we can handle
var mime_regex = new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))/);
// open office document mime type currently supported by webodf editor
var mime_odf_regex = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
var MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
// IE only supports video/mp4 mime type
if (navigator.userAgent.match(/(MSIE|Trident)/)) mime_regex.compile(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))/);
new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))/) :
new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))/);
// open office document mime type currently supported by webodf editor
var MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
// Only one gallery
var gallery = null;
/**
* See if the current widget is in a nextmatch, as this allows us to display
* thumbnails underneath
@ -68,15 +56,12 @@ function expose (widget)
* @param {et2_IExposable} widget
* @returns {et2_nextmatch | null}
*/
var find_nextmatch = function(widget)
{
var find_nextmatch = function (widget) {
var current = widget;
var nextmatch = null;
while(nextmatch == null && current)
{
while (nextmatch == null && current) {
current = current.getParent();
if(typeof current !='undefined' && current.instanceOf(et2_nextmatch))
{
if (typeof current != 'undefined' && current.instanceOf(et2_nextmatch)) {
nextmatch = current;
}
}
@ -84,11 +69,10 @@ function expose (widget)
// At the moment only filemanger nm would work
// as gallery, thus we disable other nestmatches
// to build up gallery but filemanager
if(nextmatch == null || nextmatch.controller == null || !nextmatch.dom_id.match(/filemanager/,'ig')) return null;
if (nextmatch == null || nextmatch.controller == null || !nextmatch.dom_id.match(/filemanager/, 'ig'))
return null;
return nextmatch;
};
/**
* Read images out of the data for the nextmatch
*
@ -97,16 +81,13 @@ function expose (widget)
* @param {number} start_at
* @returns {undefined}
*/
var read_from_nextmatch = function(nm, images, start_at)
{
if(!start_at) start_at = 0;
var read_from_nextmatch = function (nm, images, start_at) {
if (!start_at)
start_at = 0;
var image_index = start_at;
var stop = Math.max.apply(null,Object.keys(nm.controller._indexMap));
for(var i = start_at; i <= stop; i++)
{
if(!nm.controller._indexMap[i] || !nm.controller._indexMap[i].uid)
{
var stop = Math.max.apply(null, Object.keys(nm.controller._indexMap));
for (var i = start_at; i <= stop; i++) {
if (!nm.controller._indexMap[i] || !nm.controller._indexMap[i].uid) {
// Returning instead of using IMAGE_DEFAULT means we stop as
// soon as a hole is found, instead of getting everything that is
// available. The gallery can't fill in the holes.
@ -114,16 +95,15 @@ function expose (widget)
continue;
}
var uid = nm.controller._indexMap[i].uid;
if(!uid) continue;
if (!uid)
continue;
var data = egw.dataGetUIDdata(uid);
if(data && data.data && data.data.mime && mime_regex.test(data.data.mime))
{
if (data && data.data && data.data.mime && MIME_REGEX.test(data.data.mime)) {
var media = this.getMedia(data.data);
images[image_index++] = jQuery.extend({}, data.data, media[0]);
}
}
};
/**
* Set a particular index/image in the gallery instead of just appending
* it to the end
@ -132,48 +112,38 @@ function expose (widget)
* @param {Object} image
* @returns {undefined}
*/
var set_slide = function(index, image)
{
var set_slide = function (index, image) {
var active = (index == gallery.index);
// Pad with blanks until length is right
while(index > gallery.getNumber())
{
while (index > gallery.getNumber()) {
gallery.add([jQuery.extend({}, IMAGE_DEFAULT)]);
}
// Don't bother with adding a default, we just did that
if(image.loading)
{
if (image.loading) {
//Add load class if it's really a slide with error
if (gallery.slidesContainer.find('[data-index="'+index+'"]').hasClass(gallery.options.slideErrorClass))
if (gallery.slidesContainer.find('[data-index="' + index + '"]').hasClass(gallery.options.slideErrorClass))
jQuery(gallery.slides[index])
.addClass(gallery.options.slideLoadingClass)
.removeClass(gallery.options.slideErrorClass);
return;
}
// Remove the loading class if the slide is loaded
else
{
else {
jQuery(gallery.slides[index]).removeClass(gallery.options.slideLoadingClass);
}
// Just use add to let gallery create everything it needs
var new_index = gallery.num;
gallery.add([image]);
// Move it to where we want it.
// Gallery uses arrays and indexes and has several internal variables
// that need to be updated.
//
// list
gallery.list[index] = gallery.list[new_index];
gallery.list.splice(new_index,1);
gallery.list.splice(new_index, 1);
// indicators & slides
var dom_nodes = ['indicators','slides'];
for(var i in dom_nodes)
{
var dom_nodes = ['indicators', 'slides'];
for (var i in dom_nodes) {
var var_name = dom_nodes[i];
// Remove old one from DOM
jQuery(gallery[var_name][index]).remove();
@ -182,42 +152,37 @@ function expose (widget)
// Move into place in DOM
var node = jQuery(gallery[var_name][index]);
node.attr('data-index', index)
.insertAfter(jQuery("[data-index='"+(index-1)+"']",node.parent()));
if(active) node.addClass(gallery.options.activeIndicatorClass);
gallery[var_name].splice(new_index,1);
.insertAfter(jQuery("[data-index='" + (index - 1) + "']", node.parent()));
if (active)
node.addClass(gallery.options.activeIndicatorClass);
gallery[var_name].splice(new_index, 1);
}
if(active)
{
if (active) {
gallery.activeIndicator = jQuery(gallery.indicators[index]);
}
// positions
gallery.positions[index] = active ? 0 : (index > gallery.index ? gallery.slideWidth : -gallery.slideWidth);
gallery.positions.splice(new_index,1);
gallery.positions.splice(new_index, 1);
// elements - removing will allow to re-do the slide
if(gallery.elements[index])
{
if (gallery.elements[index]) {
delete gallery.elements[index];
gallery.loadElement(index);
}
// Remove the one we just added
gallery.num -= 1;
};
return widget.extend([et2_IExposable],{
/**
* Initialize the expose media gallery
*/
init: function()
{
this._super.apply(this, arguments);
this.mime_regexp = mime_regex;
this.mime_odf_regex = mime_odf_regex;
var self=this;
this.expose_options = {
return /** @class */ (function (_super) {
__extends(exposable, _super);
function exposable() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this.mime_regexp = MIME_REGEX;
_this.mime_odf_regex = MIME_ODF_REGEX;
var self = _this;
_this.expose_options = {
// The Id, element or querySelector of the gallery widget:
container: '#blueimp-gallery',
// The tag name, Id, element or querySelector of the slides container:
@ -255,7 +220,7 @@ function expose (widget)
// The class for the "play-pause" toggle control:
playPauseClass: 'play-pause',
// The class to add for fullscreen button option
fullscreenClass:'fullscreen',
fullscreenClass: 'fullscreen',
// The list object property (or data attribute) with the object type:
typeProperty: 'type',
// The list object property (or data attribute) with the object title:
@ -316,7 +281,7 @@ function expose (widget)
//Hide controls when the slideshow is playing
hideControlsOnSlideshow: true,
//Request fullscreen on slide show
toggleFullscreenOnSlideShow:true,
toggleFullscreenOnSlideShow: true,
// The transition speed for automatic slide changes, set to an integer
// greater 0 to override the default transition speed:
slideshowTransitionSpeed: undefined,
@ -333,86 +298,79 @@ function expose (widget)
thumbnailWithImgTag: true,
// Callback function executed when the Gallery is initialized.
// Is called with the gallery instance as "this" object:
onopen: jQuery.proxy(this.expose_onopen,this),
onopen: jQuery.proxy(_this.expose_onopen, _this),
// Callback function executed when the Gallery has been initialized
// and the initialization transition has been completed.
// Is called with the gallery instance as "this" object:
onopened: jQuery.proxy(this.expose_onopened,this),
onopened: jQuery.proxy(_this.expose_onopened, _this),
// Callback function executed on slide change.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslide: function(index, slide) {
onslide: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslide.apply(self, [this, index,slide]);
self.expose_onslide.apply(self, [this, index, slide]);
},
// Callback function executed after the slide change transition.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslideend: function(index, slide) {
onslideend: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslideend.apply(self, [this, index,slide]);
self.expose_onslideend.apply(self, [this, index, slide]);
},
//// Callback function executed on slide content load.
// Is called with the gallery instance as "this" object and the
// slide index and slide element as arguments:
onslidecomplete: function(index, slide) {
onslidecomplete: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslidecomplete.apply(self, [this, index,slide]);
self.expose_onslidecomplete.apply(self, [this, index, slide]);
},
//// Callback function executed when the Gallery is about to be closed.
// Is called with the gallery instance as "this" object:
onclose:jQuery.proxy(this.expose_onclose,this),
onclose: jQuery.proxy(_this.expose_onclose, _this),
// Callback function executed when the Gallery has been closed
// and the closing transition has been completed.
// Is called with the gallery instance as "this" object:
onclosed: jQuery.proxy(this.expose_onclosed,this)
onclosed: jQuery.proxy(_this.expose_onclosed, _this)
};
var $body = jQuery('body');
if ($body.find('#blueimp-gallery').length == 0)
{
if ($body.find('#blueimp-gallery').length == 0) {
// Gallery Main DIV container
var $expose_node = jQuery(document.createElement('div')).attr({id:"blueimp-gallery", class:"blueimp-gallery"});
var $expose_node = jQuery(document.createElement('div')).attr({
id: "blueimp-gallery",
class: "blueimp-gallery"
});
// Create Gallery DOM NODE
$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a title="'+ egw().lang('Close') + '" class="close">×</a><a title="'+ egw().lang('Play/Pause') + '" class="play-pause"></a><a title="'+ egw().lang('Fullscreen') + '" class="fullscreen"></a><a title="'+ egw().lang('Save') +'" class="download"></a><ol class="indicator"></ol>');
$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a title="' + egw().lang('Close') + '" class="close">×</a><a title="' + egw().lang('Play/Pause') + '" class="play-pause"></a><a title="' + egw().lang('Fullscreen') + '" class="fullscreen"></a><a title="' + egw().lang('Save') + '" class="download"></a><ol class="indicator"></ol>');
// Append the gallery Node to DOM
$body.append($expose_node);
}
},
set_value:function (_value)
{
if (typeof this._super == 'undefined') return;
this._super.apply(this,arguments);
return _this;
}
exposable.prototype.set_value = function (_value) {
//todo: not sure if we need that with the new construction
//if (typeof this._super == 'undefined') return;
_super.prototype.set_value.call(this, _value);
// Do not run set value of expose if expose_view is not set
// it causes a wired error on nested image widgets which
// seems the expose is not its child widget
if (!this.options.expose_view )
{
if (!this.options.expose_view) {
return;
}
var fe = egw_get_file_editor_prefered_mimes();
var self=this;
var self = this;
// If the media type is not supported do not bind the click handler
if (!_value || typeof _value.mime != 'string' || (!_value.mime.match(mime_regex,'ig')
&& (!fe || fe.mime && !fe.mime[_value.mime])) || typeof _value.download_url == 'undefined')
{
if (!_value || typeof _value.mime != 'string' || (!_value.mime.match(MIME_REGEX, 'ig')
&& (!fe || fe.mime && !fe.mime[_value.mime])) || typeof _value.download_url == 'undefined') {
return;
}
if (typeof this.options.expose_view != 'undefined' && this.options.expose_view )
{
jQuery(this.node).on('click', function(event){
if (typeof this.options.expose_view != 'undefined' && this.options.expose_view) {
jQuery(this.node).on('click', function (event) {
// Do not trigger expose view if one of the operator keys are held
if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey)
{
if (_value.mime.match(mime_regex,'ig'))
{
if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
if (_value.mime.match(MIME_REGEX, 'ig')) {
self._init_blueimp_gallery(event, _value);
}
else if(fe && fe.mime && fe.edit && fe.mime[_value.mime])
{
else if (fe && fe.mime && fe.edit && fe.mime[_value.mime]) {
egw.open_link(egw.link('/index.php', {
menuaction: fe.edit.menuaction,
path: _value.path,
@ -423,47 +381,38 @@ function expose (widget)
event.stopImmediatePropagation();
}).addClass('et2_clickable');
}
},
_init_blueimp_gallery: function (event, _value)
{
};
exposable.prototype._init_blueimp_gallery = function (event, _value) {
var mediaContent = [];
var nm = find_nextmatch(this);
var current_index = 0;
if(nm && !this._is_target_indepth(nm,event.target))
{
if (nm && !this._is_target_indepth(nm, event.target)) {
// Get the row that was clicked, find its index in the list
var current_entry = nm.controller.getRowByNode(event.target);
// But before it goes, we'll pull everything we can
read_from_nextmatch.call(this, nm, mediaContent);
// find current_entry in array and set it's array-index
for(var i=0; i < mediaContent.length; i++)
{
if ('filemanager::'+mediaContent[i].path == current_entry.uid)
{
for (var i = 0; i < mediaContent.length; i++) {
if ('filemanager::' + mediaContent[i].path == current_entry.uid) {
current_index = i;
break;
}
}
// This will trigger nm to refresh and get just the ones we can handle
// but it might take a while, so do it later - make sure our current
// one is loaded first.
window.setTimeout(function() {
nm.applyFilters({col_filter: {mime: '/'+mime_regex.source+'/'}});
},1);
window.setTimeout(function () {
nm.applyFilters({ col_filter: { mime: '/' + MIME_REGEX.source + '/' } });
}, 1);
}
else
{
else {
mediaContent = this.getMedia(_value);
// Do not show thumbnail indicator on single expose view
this.expose_options.thumbnailIndicators = false;
}
this.expose_options.index = current_index;
gallery = blueimp.Gallery(mediaContent, this.expose_options);
},
};
/**
* Check if clicked target from nm is in depth
*
@ -472,154 +421,137 @@ function expose (widget)
*
* @return {boolean} returns false if target is not in depth otherwise True
*/
_is_target_indepth: function (nm, target){
exposable.prototype._is_target_indepth = function (nm, target) {
var res = false;
if (nm)
{
if (!target)
{
var target = this.getDOMNode();
if (nm) {
if (!target) {
var target_1 = this.getDOMNode();
}
var entry = nm.controller.getRowByNode(target);
if (entry && entry.controller.getDepth()>0)
{
if (entry && entry.controller.getDepth() > 0) {
res = true;
}
}
return res;
},
expose_onopen: function (event){},
expose_onopened: function (event){
};
exposable.prototype.expose_onopen = function (event) { };
exposable.prototype.expose_onopened = function (event) {
// Check to see if we're in a nextmatch, do magic
var nm = find_nextmatch(this);
var self=this;
if(nm)
{
var self = this;
if (nm) {
// Add scrolling to the indicator list
var total_count = nm.controller._grid.getTotalCount();
if(total_count >= gallery.num)
{
if (total_count >= gallery.num) {
var $indicator = gallery.container.find('.indicator');
$indicator.off()
.addClass('paginating')
.swipe(function(event, direction, distance) {
if(direction == jQuery.fn.swipe.directions.LEFT)
{
.swipe(function (event, direction, distance) {
if (direction == jQuery.fn.swipe.directions.LEFT) {
distance *= -1;
}
else if(direction == jQuery.fn.swipe.directions.RIGHT)
{
else if (direction == jQuery.fn.swipe.directions.RIGHT) {
// OK.
}
else
{
else {
return;
}
jQuery(this).css('left',min(0,parseInt(jQuery(this).css('left'))-(distance*30))+'px');
jQuery(this).css('left', min(0, parseInt(jQuery(this).css('left')) - (distance * 30)) + 'px');
});
// Bind the mousewheel handler for FF (DOMMousewheel), and other browsers (mousewheel)
$indicator.bind('mousewheel DOMMousewheel',function(event, _delta) {
$indicator.bind('mousewheel DOMMousewheel', function (event, _delta) {
var delta = _delta || event.originalEvent.wheelDelta / 120;
if(delta > 0 && parseInt(jQuery(this).css('left')) > gallery.container.width() / 2) return;
if (delta > 0 && parseInt(jQuery(this).css('left')) > gallery.container.width() / 2)
return;
//Reload next pictures into the gallery by scrolling on thumbnails
if (delta<0 && jQuery(this).width() + parseInt(jQuery(this).css('left')) < gallery.container.width())
{
if (delta < 0 && jQuery(this).width() + parseInt(jQuery(this).css('left')) < gallery.container.width()) {
var nextIndex = gallery.indicatorContainer.find('[title="loading"]')[0];
if (nextIndex) self.expose_onslideend(gallery,nextIndex.dataset.index -1);
if (nextIndex)
self.expose_onslideend(gallery, nextIndex.dataset.index - 1);
return;
}
// Move it about 5 indicators
jQuery(this).css('left',parseInt(jQuery(this).css('left'))-(-delta*gallery.activeIndicator.width()*5)+'px');
jQuery(this).css('left', parseInt(jQuery(this).css('left')) - (-delta * gallery.activeIndicator.width() * 5) + 'px');
event.preventDefault();
});
}
}
},
};
/**
* Trigger on slide left/right
* @param {Gallery} gallery
* @param {integer} index
* @param {DOMNode} slide
*/
expose_onslide: function (gallery, index, slide){
if (typeof this._super == 'undefined') return;
exposable.prototype.expose_onslide = function (gallery, index, slide) {
//todo
//if (typeof this._super == 'undefined') return;
// First let parent try
this._super.apply(this, arguments);
_this = _super.call(this, gallery, index, slide) || this;
var nm = find_nextmatch(this);
if(nm)
{
if (nm) {
// See if we need to move the indicator
var indicator = gallery.container.find('.indicator');
var current = jQuery('.active',indicator).position();
if(current)
{
indicator.animate({left: (gallery.container.width() / 2)-current.left},10);
var current = jQuery('.active', indicator).position();
if (current) {
indicator.animate({ left: (gallery.container.width() / 2) - current.left }, 10);
}
}
},
expose_onslideend: function (gallery, index, slide){
};
exposable.prototype.expose_onslideend = function (gallery, index, slide) {
// Check to see if we're in a nextmatch, do magic
var nm = find_nextmatch(this);
if(nm)
{
if (nm) {
// Check to see if we're near the end, or maybe some pagination
// would be good.
var total_count = nm.controller._grid.getTotalCount();
// Already at the end, don't bother
if(index == total_count -1 || index == 0) return;
if (index == total_count - 1 || index == 0)
return;
// Try to determine direction from state of next & previous slides
var direction = 1;
for(var i in gallery.elements)
{
for (var i in gallery.elements) {
// Loading or error
if(gallery.elements[i] == 1 || gallery.elements[i] == 3 || gallery.list[i].loading)
{
if (gallery.elements[i] == 1 || gallery.elements[i] == 3 || gallery.list[i].loading) {
direction = i >= index ? 1 : -1;
break;
}
}
if(!gallery.list[index+direction] || gallery.list[index+direction].loading ||
total_count > gallery.getNumber() && index + ET2_DATAVIEW_STEPSIZE > gallery.getNumber())
{
if (!gallery.list[index + direction] || gallery.list[index + direction].loading ||
total_count > gallery.getNumber() && index + ET2_DATAVIEW_STEPSIZE > gallery.getNumber()) {
// This will get the next batch of rows
var start = Math.max(0, direction > 0 ? index : index - ET2_DATAVIEW_STEPSIZE);
var end = Math.min(total_count - 1, start + ET2_DATAVIEW_STEPSIZE);
nm.controller._gridCallback(start, end);
var images = [];
read_from_nextmatch.call(this, nm, images, start);
// Gallery always adds to the end, causing problems with pagination
for(var i in images)
{
for (var i in images) {
//if(i == index || i < gallery.num) continue;
set_slide(i, images[i]);
//gallery.add([images[i]]);
}
}
}
},
expose_onslidecomplete:function (gallery, index, slide){},
expose_onclose: function(event){
};
exposable.prototype.expose_onslidecomplete = function (gallery, index, slide) {
};
exposable.prototype.expose_onclose = function (event) {
// Check to see if we're in a nextmatch, remove magic
var nm = find_nextmatch(this);
if(nm && !this._is_target_indepth(nm))
{
if (nm && !this._is_target_indepth(nm)) {
// Remove scrolling from thumbnails
gallery.container.find('.indicator')
.removeClass('paginating')
.off('mousewheel')
.off('swipe');
// Remove applied mime filter
nm.applyFilters({col_filter: {mime: ''}});
nm.applyFilters({ col_filter: { mime: '' } });
}
},
expose_onclosed: function (event){},
});
};
exposable.prototype.expose_onclosed = function (event) {
};
return exposable;
}(Base));
}
//# sourceMappingURL=expose.js.map

589
api/js/etemplate/expose.ts Normal file
View File

@ -0,0 +1,589 @@
/**
* EGroupware eTemplate2 - JS object implementing expose view of media and a gallery view
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link http://www.egroupware.org
* @author Hadi Nategh <hn[at]stylite.de>
* @copyright Stylite AG
* @version $Id$
*/
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
/api/js/jquery/blueimp/js/blueimp-gallery.min.js;
*/
import {WidgetConfig} from "./et2_core_widget";
import {ClassWithAttributes} from "./et2_core_inheritance";
type Constructor<T = {}> = new (...args: any[]) => T;
/**
* This function extends the given widget with blueimp gallery plugin
*
* @param {type} widget
* @returns {widget}
*/
function expose<TBase extends Constructor>(Base: TBase) {
"use strict";
// Minimum data to qualify as an image and not cause errors
const IMAGE_DEFAULT = {
title: egw.lang('loading'),
href: '',
type: 'image/png',
thumbnail: '',
loading: true
};
// 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))/) :
new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))/);
// open office document mime type currently supported by webodf editor
const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
// Only one gallery
var gallery = null;
/**
* See if the current widget is in a nextmatch, as this allows us to display
* thumbnails underneath
*
* @param {et2_IExposable} widget
* @returns {et2_nextmatch | null}
*/
var find_nextmatch = function (widget) {
var current = widget;
var nextmatch = null;
while (nextmatch == null && current) {
current = current.getParent();
if (typeof current != 'undefined' && current.instanceOf(et2_nextmatch)) {
nextmatch = current;
}
}
// No nextmatch, or nextmatch not quite ready
// At the moment only filemanger nm would work
// as gallery, thus we disable other nestmatches
// to build up gallery but filemanager
if (nextmatch == null || nextmatch.controller == null || !nextmatch.dom_id.match(/filemanager/, 'ig')) return null;
return nextmatch;
};
/**
* Read images out of the data for the nextmatch
*
* @param {et2_nextmatch} nm
* @param {Object[]} images
* @param {number} start_at
* @returns {undefined}
*/
var read_from_nextmatch = function (nm, images, start_at) {
if (!start_at) start_at = 0;
var image_index = start_at;
var stop = Math.max.apply(null, Object.keys(nm.controller._indexMap));
for (var i = start_at; i <= stop; i++) {
if (!nm.controller._indexMap[i] || !nm.controller._indexMap[i].uid) {
// Returning instead of using IMAGE_DEFAULT means we stop as
// soon as a hole is found, instead of getting everything that is
// available. The gallery can't fill in the holes.
images[image_index++] = IMAGE_DEFAULT;
continue;
}
var uid = nm.controller._indexMap[i].uid;
if (!uid) continue;
var data = egw.dataGetUIDdata(uid);
if (data && data.data && data.data.mime && MIME_REGEX.test(data.data.mime)) {
var media = this.getMedia(data.data);
images[image_index++] = jQuery.extend({}, data.data, media[0]);
}
}
};
/**
* Set a particular index/image in the gallery instead of just appending
* it to the end
*
* @param {integer} index
* @param {Object} image
* @returns {undefined}
*/
var set_slide = function (index, image) {
var active = (index == gallery.index);
// Pad with blanks until length is right
while (index > gallery.getNumber()) {
gallery.add([jQuery.extend({}, IMAGE_DEFAULT)]);
}
// Don't bother with adding a default, we just did that
if (image.loading) {
//Add load class if it's really a slide with error
if (gallery.slidesContainer.find('[data-index="' + index + '"]').hasClass(gallery.options.slideErrorClass))
jQuery(gallery.slides[index])
.addClass(gallery.options.slideLoadingClass)
.removeClass(gallery.options.slideErrorClass);
return;
}
// Remove the loading class if the slide is loaded
else {
jQuery(gallery.slides[index]).removeClass(gallery.options.slideLoadingClass);
}
// Just use add to let gallery create everything it needs
var new_index = gallery.num;
gallery.add([image]);
// Move it to where we want it.
// Gallery uses arrays and indexes and has several internal variables
// that need to be updated.
//
// list
gallery.list[index] = gallery.list[new_index];
gallery.list.splice(new_index, 1);
// indicators & slides
var dom_nodes = ['indicators', 'slides'];
for (var i in dom_nodes) {
var var_name = dom_nodes[i];
// Remove old one from DOM
jQuery(gallery[var_name][index]).remove();
// Move new one into it's place in gallery
gallery[var_name][index] = gallery[var_name][new_index];
// Move into place in DOM
var node = jQuery(gallery[var_name][index]);
node.attr('data-index', index)
.insertAfter(jQuery("[data-index='" + (index - 1) + "']", node.parent()));
if (active) node.addClass(gallery.options.activeIndicatorClass);
gallery[var_name].splice(new_index, 1);
}
if (active) {
gallery.activeIndicator = jQuery(gallery.indicators[index]);
}
// positions
gallery.positions[index] = active ? 0 : (index > gallery.index ? gallery.slideWidth : -gallery.slideWidth);
gallery.positions.splice(new_index, 1);
// elements - removing will allow to re-do the slide
if (gallery.elements[index]) {
delete gallery.elements[index];
gallery.loadElement(index);
}
// Remove the one we just added
gallery.num -= 1;
};
return class exposable extends Base {
private mime_regexp: RegExp;
private mime_odf_regex: RegExp;
private expose_options: {
container: string; toggleControlsOnReturn: boolean; closeOnSwipeUpOrDown: boolean; clearSlides: boolean; onopen: any; emulateTouchEvents: boolean; onslideend: (index, slide) => void; rightEdgeClass: string; thumbnailWithImgTag: boolean; onslidecomplete: (index, slide) => void; continuous: boolean; startSlideshow: boolean; fullscreenClass: string; onslide: (index, slide) => void; playingClass: string; slideClass: string; urlProperty: string; closeOnEscape: boolean; singleClass: string; slideErrorClass: string; index: number; preloadRange: number; slideContentClass: string; onclosed: any; hidePageScrollbars: boolean; displayTransition: boolean; indicatorContainer: string; disableScroll: boolean; unloadElements: boolean; nextClass: string; stopTouchEventsPropagation: boolean; transitionSpeed: number; carousel: boolean; titleProperty: string; prevClass: string; typeProperty: string; enableKeyboardNavigation: boolean; slidesContainer: string; closeOnSlideClick: boolean; stretchImages: boolean; onclose: any; onopened: any; playPauseClass: string; thumbnailProperty: string; titleElement: string; slideLoadingClass: string; toggleSlideshowOnSpace: boolean; thumbnailIndicators: boolean; activeIndicatorClass: string; displayClass: string; closeClass: string; slideshowInterval: number; toggleClass: string; hideControlsOnSlideshow: boolean; controlsClass: string; toggleFullscreenOnSlideShow: boolean; leftEdgeClass: string; slideshowTransitionSpeed: undefined
};
constructor(...args: any[])
{
// Call the inherited constructor
super(...args);
this.mime_regexp = MIME_REGEX;
this.mime_odf_regex = MIME_ODF_REGEX;
let self = this;
this.expose_options = {
// The Id, element or querySelector of the gallery widget:
container: '#blueimp-gallery',
// The tag name, Id, element or querySelector of the slides container:
slidesContainer: 'div',
// The tag name, Id, element or querySelector of the title element:
titleElement: 'h3',
// The class to add when the gallery is visible:
displayClass: 'blueimp-gallery-display',
// The class to add when the gallery controls are visible:
controlsClass: 'blueimp-gallery-controls',
// The class to add when the gallery only displays one element:
singleClass: 'blueimp-gallery-single',
// The class to add when the left edge has been reached:
leftEdgeClass: 'blueimp-gallery-left',
// The class to add when the right edge has been reached:
rightEdgeClass: 'blueimp-gallery-right',
// The class to add when the automatic slideshow is active:
playingClass: 'blueimp-gallery-playing',
// The class for all slides:
slideClass: 'slide',
// The slide class for loading elements:
slideLoadingClass: '',
// The slide class for elements that failed to load:
slideErrorClass: 'slide-error',
// The class for the content element loaded into each slide:
slideContentClass: 'slide-content',
// The class for the "toggle" control:
toggleClass: 'toggle',
// The class for the "prev" control:
prevClass: 'prev',
// The class for the "next" control:
nextClass: 'next',
// The class for the "close" control:
closeClass: 'close',
// The class for the "play-pause" toggle control:
playPauseClass: 'play-pause',
// The class to add for fullscreen button option
fullscreenClass: 'fullscreen',
// The list object property (or data attribute) with the object type:
typeProperty: 'type',
// The list object property (or data attribute) with the object title:
titleProperty: 'title',
// The list object property (or data attribute) with the object URL:
urlProperty: 'href',
// The gallery listens for transitionend events before triggering the
// opened and closed events, unless the following option is set to false:
displayTransition: true,
// Defines if the gallery slides are cleared from the gallery modal,
// or reused for the next gallery initialization:
clearSlides: true,
// Defines if images should be stretched to fill the available space,
// while maintaining their aspect ratio (will only be enabled for browsers
// supporting background-size="contain", which excludes IE < 9).
// Set to "cover", to make images cover all available space (requires
// support for background-size="cover", which excludes IE < 9):
stretchImages: true,
// Toggle the controls on pressing the Return key:
toggleControlsOnReturn: true,
// Toggle the automatic slideshow interval on pressing the Space key:
toggleSlideshowOnSpace: true,
// Navigate the gallery by pressing left and right on the keyboard:
enableKeyboardNavigation: true,
// Close the gallery on pressing the ESC key:
closeOnEscape: true,
// Close the gallery when clicking on an empty slide area:
closeOnSlideClick: false,
// Close the gallery by swiping up or down:
closeOnSwipeUpOrDown: true,
// Emulate touch events on mouse-pointer devices such as desktop browsers:
emulateTouchEvents: true,
// Stop touch events from bubbling up to ancestor elements of the Gallery:
stopTouchEventsPropagation: false,
// Hide the page scrollbars:
hidePageScrollbars: true,
// Stops any touches on the container from scrolling the page:
disableScroll: true,
// Carousel mode (shortcut for carousel specific options):
carousel: true,
// Allow continuous navigation, moving from last to first
// and from first to last slide:
continuous: false,
// Remove elements outside of the preload range from the DOM:
unloadElements: true,
// Start with the automatic slideshow:
startSlideshow: false,
// Delay in milliseconds between slides for the automatic slideshow:
slideshowInterval: 3000,
// The starting index as integer.
// Can also be an object of the given list,
// or an equal object with the same url property:
index: 0,
// The number of elements to load around the current index:
preloadRange: 2,
// The transition speed between slide changes in milliseconds:
transitionSpeed: 400,
//Hide controls when the slideshow is playing
hideControlsOnSlideshow: true,
//Request fullscreen on slide show
toggleFullscreenOnSlideShow: true,
// The transition speed for automatic slide changes, set to an integer
// greater 0 to override the default transition speed:
slideshowTransitionSpeed: undefined,
// The tag name, Id, element or querySelector of the indicator container:
indicatorContainer: 'ol',
// The class for the active indicator:
activeIndicatorClass: 'active',
// The list object property (or data attribute) with the thumbnail URL,
// used as alternative to a thumbnail child element:
thumbnailProperty: 'thumbnail',
// Defines if the gallery indicators should display a thumbnail:
thumbnailIndicators: true,
//thumbnail with image tag
thumbnailWithImgTag: true,
// Callback function executed when the Gallery is initialized.
// Is called with the gallery instance as "this" object:
onopen: jQuery.proxy(this.expose_onopen, this),
// Callback function executed when the Gallery has been initialized
// and the initialization transition has been completed.
// Is called with the gallery instance as "this" object:
onopened: jQuery.proxy(this.expose_onopened, this),
// Callback function executed on slide change.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslide: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslide.apply(self, [this, index, slide]);
},
// Callback function executed after the slide change transition.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslideend: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslideend.apply(self, [this, index, slide]);
},
//// Callback function executed on slide content load.
// Is called with the gallery instance as "this" object and the
// slide index and slide element as arguments:
onslidecomplete: function (index, slide) {
// Call our onslide method, and include gallery as an attribute
self.expose_onslidecomplete.apply(self, [this, index, slide]);
},
//// Callback function executed when the Gallery is about to be closed.
// Is called with the gallery instance as "this" object:
onclose: jQuery.proxy(this.expose_onclose, this),
// Callback function executed when the Gallery has been closed
// and the closing transition has been completed.
// Is called with the gallery instance as "this" object:
onclosed: jQuery.proxy(this.expose_onclosed, this)
};
let $body = jQuery('body');
if ($body.find('#blueimp-gallery').length == 0) {
// Gallery Main DIV container
let $expose_node = jQuery(document.createElement('div')).attr({
id: "blueimp-gallery",
class: "blueimp-gallery"
});
// Create Gallery DOM NODE
$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a title="' + egw().lang('Close') + '" class="close">×</a><a title="' + egw().lang('Play/Pause') + '" class="play-pause"></a><a title="' + egw().lang('Fullscreen') + '" class="fullscreen"></a><a title="' + egw().lang('Save') + '" class="download"></a><ol class="indicator"></ol>');
// Append the gallery Node to DOM
$body.append($expose_node);
}
}
set_value(_value) {
//todo: not sure if we need that with the new construction
//if (typeof this._super == 'undefined') return;
super.set_value(_value);
// Do not run set value of expose if expose_view is not set
// it causes a wired error on nested image widgets which
// seems the expose is not its child widget
if (!this.options.expose_view) {
return;
}
var fe = egw_get_file_editor_prefered_mimes();
var self = this;
// If the media type is not supported do not bind the click handler
if (!_value || typeof _value.mime != 'string' || (!_value.mime.match(MIME_REGEX, 'ig')
&& (!fe || fe.mime && !fe.mime[_value.mime])) || typeof _value.download_url == 'undefined') {
return;
}
if (typeof this.options.expose_view != 'undefined' && this.options.expose_view) {
jQuery(this.node).on('click', function (event) {
// Do not trigger expose view if one of the operator keys are held
if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
if (_value.mime.match(MIME_REGEX, 'ig')) {
self._init_blueimp_gallery(event, _value);
} else if (fe && fe.mime && fe.edit && fe.mime[_value.mime]) {
egw.open_link(egw.link('/index.php', {
menuaction: fe.edit.menuaction,
path: _value.path,
cd: 'no' // needed to not reload framework in sharing
}), '', fe.edit_popup);
}
}
event.stopImmediatePropagation();
}).addClass('et2_clickable');
}
}
private _init_blueimp_gallery(event, _value) {
let mediaContent = [];
let nm = find_nextmatch(this);
let current_index = 0;
if (nm && !this._is_target_indepth(nm, event.target)) {
// Get the row that was clicked, find its index in the list
let current_entry = nm.controller.getRowByNode(event.target);
// But before it goes, we'll pull everything we can
read_from_nextmatch.call(this, nm, mediaContent);
// find current_entry in array and set it's array-index
for (let i = 0; i < mediaContent.length; i++) {
if ('filemanager::' + mediaContent[i].path == current_entry.uid) {
current_index = i;
break;
}
}
// This will trigger nm to refresh and get just the ones we can handle
// but it might take a while, so do it later - make sure our current
// one is loaded first.
window.setTimeout(function () {
nm.applyFilters({col_filter: {mime: '/' + MIME_REGEX.source + '/'}});
}, 1);
} else {
mediaContent = this.getMedia(_value);
// Do not show thumbnail indicator on single expose view
this.expose_options.thumbnailIndicators = false;
}
this.expose_options.index = current_index;
gallery = blueimp.Gallery(mediaContent, this.expose_options);
}
/**
* Check if clicked target from nm is in depth
*
* @param nm nextmatch widget
* @param target selected target dom node
*
* @return {boolean} returns false if target is not in depth otherwise True
*/
private _is_target_indepth(nm, target?)
{
let res = false;
if (nm) {
if (!target) {
let target = this.getDOMNode();
}
let entry = nm.controller.getRowByNode(target);
if (entry && entry.controller.getDepth() > 0) {
res = true;
}
}
return res;
}
expose_onopen(event) {}
expose_onopened(event)
{
// Check to see if we're in a nextmatch, do magic
let nm = find_nextmatch(this);
let self = this;
if (nm) {
// Add scrolling to the indicator list
let total_count = nm.controller._grid.getTotalCount();
if (total_count >= gallery.num) {
let $indicator = gallery.container.find('.indicator');
$indicator.off()
.addClass('paginating')
.swipe(function (event, direction, distance) {
if (direction == jQuery.fn.swipe.directions.LEFT) {
distance *= -1;
} else if (direction == jQuery.fn.swipe.directions.RIGHT) {
// OK.
} else {
return;
}
jQuery(this).css('left', min(0, parseInt(jQuery(this).css('left')) - (distance * 30)) + 'px');
});
// Bind the mousewheel handler for FF (DOMMousewheel), and other browsers (mousewheel)
$indicator.bind('mousewheel DOMMousewheel', function (event, _delta) {
var delta = _delta || event.originalEvent.wheelDelta / 120;
if (delta > 0 && parseInt(jQuery(this).css('left')) > gallery.container.width() / 2) return;
//Reload next pictures into the gallery by scrolling on thumbnails
if (delta < 0 && jQuery(this).width() + parseInt(jQuery(this).css('left')) < gallery.container.width()) {
var nextIndex = gallery.indicatorContainer.find('[title="loading"]')[0];
if (nextIndex) self.expose_onslideend(gallery, nextIndex.dataset.index - 1);
return;
}
// Move it about 5 indicators
jQuery(this).css('left', parseInt(jQuery(this).css('left')) - (-delta * gallery.activeIndicator.width() * 5) + 'px');
event.preventDefault();
});
}
}
}
/**
* Trigger on slide left/right
* @param {Gallery} gallery
* @param {integer} index
* @param {DOMNode} slide
*/
expose_onslide(gallery, index, slide)
{
//todo
//if (typeof this._super == 'undefined') return;
// First let parent try
super(gallery, index, slide);
let nm = find_nextmatch(this);
if (nm) {
// See if we need to move the indicator
let indicator = gallery.container.find('.indicator');
let current = jQuery('.active', indicator).position();
if (current) {
indicator.animate({left: (gallery.container.width() / 2) - current.left}, 10);
}
}
}
expose_onslideend(gallery, index, slide?) {
// Check to see if we're in a nextmatch, do magic
let nm = find_nextmatch(this);
if (nm) {
// Check to see if we're near the end, or maybe some pagination
// would be good.
let total_count = nm.controller._grid.getTotalCount();
// Already at the end, don't bother
if (index == total_count - 1 || index == 0) return;
// Try to determine direction from state of next & previous slides
let direction = 1;
for (let i in gallery.elements) {
// Loading or error
if (gallery.elements[i] == 1 || gallery.elements[i] == 3 || gallery.list[i].loading) {
direction = i >= index ? 1 : -1;
break;
}
}
if (!gallery.list[index + direction] || gallery.list[index + direction].loading ||
total_count > gallery.getNumber() && index + ET2_DATAVIEW_STEPSIZE > gallery.getNumber()) {
// This will get the next batch of rows
let start = Math.max(0, direction > 0 ? index : index - ET2_DATAVIEW_STEPSIZE);
let end = Math.min(total_count - 1, start + ET2_DATAVIEW_STEPSIZE);
nm.controller._gridCallback(start, end);
let images = [];
read_from_nextmatch.call(this, nm, images, start);
// Gallery always adds to the end, causing problems with pagination
for (let i in images) {
//if(i == index || i < gallery.num) continue;
set_slide(i, images[i]);
//gallery.add([images[i]]);
}
}
}
}
expose_onslidecomplete(gallery, index, slide) {
}
expose_onclose(event) {
// Check to see if we're in a nextmatch, remove magic
let nm = find_nextmatch(this);
if (nm && !this._is_target_indepth(nm)) {
// Remove scrolling from thumbnails
gallery.container.find('.indicator')
.removeClass('paginating')
.off('mousewheel')
.off('swipe');
// Remove applied mime filter
nm.applyFilters({col_filter: {mime: ''}});
}
}
expose_onclosed(event) {
}
}
}