2439 lines
53 KiB
JavaScript
2439 lines
53 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
BX.namespace('BX.UI.Viewer');
|
|
|
|
BX.UI.Viewer.Controller = function(options)
|
|
{
|
|
/**
|
|
* @type {BX.UI.Viewer.Item[]}
|
|
*/
|
|
this.items = null;
|
|
this.currentIndex = null;
|
|
this.handlers = {
|
|
handleCarouselItemError: this.handleCarouselItemError.bind(this),
|
|
};
|
|
|
|
this.baseContainer = options.baseContainer || document.body;
|
|
|
|
this.setItems(options.items || []);
|
|
|
|
this.isBodyPaddingAdded = null;
|
|
this.cycleMode = options.hasOwnProperty('cycleMode') ? options.cycleMode : true;
|
|
this.stretch = options.hasOwnProperty('stretch') ? options.stretch : false;
|
|
this.cachedData = {};
|
|
this.optionsByGroup = {};
|
|
this.layout = {
|
|
container: null,
|
|
content: null,
|
|
inner: null,
|
|
title: null,
|
|
itemContainer: null,
|
|
next: null,
|
|
prev: null,
|
|
close: null,
|
|
downloadBtn: null,
|
|
moreBtn: null,
|
|
error: null,
|
|
loader: null,
|
|
loaderContainer: null,
|
|
loaderText: null,
|
|
defaultActions: null,
|
|
extraActions: null,
|
|
carouselItems: null,
|
|
carouselContainer: null,
|
|
carouselScrollable: null,
|
|
};
|
|
|
|
// Compatibility for BX.Disk.Viewer.Actions.runActionEdit
|
|
this.actionPanel = {
|
|
getItemById: () => {},
|
|
};
|
|
|
|
this.maxParallelLoads = 3;
|
|
this.loadingItems = new Set();
|
|
this.moreMenu = null;
|
|
|
|
this.eventsAlreadyBinded = false;
|
|
this.pinchZoomHandler = null;
|
|
|
|
this.init();
|
|
};
|
|
|
|
BX.UI.Viewer.Controller.prototype = {
|
|
/**
|
|
* @param {HTMLElement} node
|
|
* @return {BX.Promise}
|
|
*/
|
|
buildItemListByNode: function (node)
|
|
{
|
|
var promise = new BX.Promise();
|
|
var nodes = [];
|
|
|
|
if (this.isSeparateItem(node))
|
|
{
|
|
nodes = [node];
|
|
}
|
|
else if(node.dataset.viewerGroupBy)
|
|
{
|
|
nodes = [].slice.call(node.ownerDocument.querySelectorAll("[data-viewer][data-viewer-group-by='" + node.dataset.viewerGroupBy + "']"));
|
|
}
|
|
else
|
|
{
|
|
nodes = [node];
|
|
}
|
|
|
|
this.loadExtensions(this.collectExtensionsForItems(nodes)).then(function (){
|
|
var items = nodes.map(function(node) {
|
|
return BX.UI.Viewer.buildItemByNode(node);
|
|
});
|
|
|
|
promise.fulfill(items);
|
|
}.bind(this));
|
|
|
|
return promise;
|
|
},
|
|
|
|
/**
|
|
* @param {HTMLElement} node
|
|
* @return {boolean}
|
|
*/
|
|
isSeparateItem: function (node)
|
|
{
|
|
return node.dataset.viewerSeparateItem;
|
|
},
|
|
|
|
shouldProcessSeparateMode: function (items)
|
|
{
|
|
return items.length === 1 && items[0].isSeparateItem();
|
|
},
|
|
|
|
shouldRunViewer: function (node)
|
|
{
|
|
if (!BX.type.isDomNode(node) || !node.dataset)
|
|
{
|
|
return false;
|
|
}
|
|
|
|
if (!node.dataset.hasOwnProperty('viewer'))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {HTMLElement[]} nodes
|
|
* @return {Array}
|
|
*/
|
|
collectExtensionsForItems: function (nodes)
|
|
{
|
|
var extensionSet = new Set();
|
|
nodes.forEach(function (node) {
|
|
if (BX.type.isString(node.dataset.viewerExtension))
|
|
{
|
|
extensionSet.add(node.dataset.viewerExtension);
|
|
}
|
|
});
|
|
|
|
var extensions = [];
|
|
extensionSet.forEach(function (ext) {
|
|
if (shouldLoadExtensions(ext))
|
|
{
|
|
extensions.push(ext);
|
|
}
|
|
});
|
|
|
|
return extensions;
|
|
},
|
|
|
|
/**
|
|
* @param {MouseEvent} event
|
|
* @return {HTMLElement|null}
|
|
*/
|
|
extractTargetFromEvent: function (event)
|
|
{
|
|
var target = BX.getEventTarget(event);
|
|
|
|
var shouldRunViewer = false;
|
|
var maxDepth = 8;
|
|
do
|
|
{
|
|
if (this.shouldRunViewer(target))
|
|
{
|
|
shouldRunViewer = true;
|
|
break;
|
|
}
|
|
|
|
target = target.parentNode;
|
|
maxDepth--;
|
|
}
|
|
while (maxDepth > 0 && target);
|
|
|
|
return shouldRunViewer? target : null;
|
|
},
|
|
|
|
handleDocumentClick: function (event)
|
|
{
|
|
var target = this.extractTargetFromEvent(event);
|
|
if (!target)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (target.tagName !== 'A' && target.closest('a[target="_blank"]'))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
event.preventDefault();
|
|
this.buildItemListByNode(target).then(function(items){
|
|
if (items.length === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this.shouldProcessSeparateMode(items))
|
|
{
|
|
this.setItems(items).then(function(){
|
|
this.openSeparate(0);
|
|
}.bind(this));
|
|
|
|
return;
|
|
}
|
|
|
|
// shortcut for download
|
|
if ((BX.browser.IsMac() && event.metaKey) || event.ctrlKey)
|
|
{
|
|
this.runActionByNode(target, 'download');
|
|
}
|
|
else
|
|
{
|
|
this.setItems(items).then(function(){
|
|
this.open(this.getIndexByNode(target));
|
|
}.bind(this));
|
|
}
|
|
}.bind(this));
|
|
},
|
|
|
|
bindEvents: function ()
|
|
{
|
|
if (this.eventsAlreadyBinded)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.eventsAlreadyBinded = true;
|
|
|
|
this.handlers.keyPress = this.handleKeyPress.bind(this);
|
|
this.handlers.touchStart = this.handleTouchStart.bind(this);
|
|
this.handlers.touchEnd = this.handleTouchEnd.bind(this);
|
|
this.handlers.resize = this.handleWindowResize.bind(this);
|
|
this.handlers.showNext = this.showNext.bind(this);
|
|
this.handlers.showPrev = this.showPrev.bind(this);
|
|
this.handlers.close = this.close.bind(this);
|
|
this.handlers.handleClickOnItemContainer = this.handleClickOnItemContainer.bind(this);
|
|
this.handlers.handleSliderCloseByEsc = this.handleSliderCloseByEsc.bind(this);
|
|
|
|
BX.bind(document, 'keydown', this.handlers.keyPress);
|
|
BX.bind(window, 'resize', this.handlers.resize);
|
|
BX.bind(this.getItemContainer(), 'touchstart', this.handlers.touchStart);
|
|
BX.bind(this.getItemContainer(), 'touchend', this.handlers.touchEnd);
|
|
|
|
BX.bind(this.getItemContainer(), 'click', this.handlers.handleClickOnItemContainer);
|
|
BX.bind(this.getNextButton(), 'click', this.handlers.showNext);
|
|
BX.bind(this.getPrevButton(), 'click', this.handlers.showPrev);
|
|
BX.bind(this.getCloseButton(), 'click', this.handlers.close);
|
|
|
|
BX.addCustomEvent('SidePanel.Slider:onCloseByEsc', this.handlers.handleSliderCloseByEsc);
|
|
},
|
|
|
|
handleVisibleControls: function(ev)
|
|
{
|
|
if (BX.browser.IsMobile() || BX.hasClass(document.documentElement, 'bx-touch'))
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this._timerIdReadingMode)
|
|
{
|
|
clearTimeout(this._timerIdReadingMode);
|
|
}
|
|
|
|
if (!this.cursorInPerimeter(ev) || BX.findParent(ev.target, {className: 'ui-viewer-next'}) || BX.findParent(ev.target, {className: 'ui-viewer-prev'}))
|
|
{
|
|
this.disableReadingMode();
|
|
}
|
|
else
|
|
{
|
|
this._timerIdReadingMode = setTimeout(function () {
|
|
this.enableReadingMode();
|
|
}.bind(this), 2800);
|
|
}
|
|
},
|
|
|
|
handleMoreBtnClick()
|
|
{
|
|
if (this.moreMenu === null)
|
|
{
|
|
const item = this.getCurrentItem();
|
|
|
|
const menuItems = [
|
|
...item.getMoreMenuItems(),
|
|
...this.createMoreMenuItems(item),
|
|
];
|
|
|
|
if (menuItems.length === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.moreMenu = new BX.Main.Menu({
|
|
angle: true,
|
|
minWidth: 150,
|
|
bindElement: this.getMoreButton(),
|
|
offsetLeft: 30,
|
|
offsetTop: -20,
|
|
items: menuItems,
|
|
cacheable: false,
|
|
events: {
|
|
onDestroy: () => {
|
|
this.moreMenu = null;
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
this.moreMenu.show();
|
|
},
|
|
|
|
enableReadingMode: function(withTimer)
|
|
{
|
|
if (BX.browser.IsMobile() || !this.isOnTop())
|
|
{
|
|
return;
|
|
}
|
|
|
|
if(withTimer)
|
|
{
|
|
this._timerIdReadingMode = setTimeout(function()
|
|
{
|
|
this.layout.container.classList.add('ui-viewer-reading-mode');
|
|
}.bind(this), 5000);
|
|
|
|
return;
|
|
}
|
|
|
|
this.layout.container.classList.add('ui-viewer-reading-mode');
|
|
},
|
|
|
|
disableReadingMode: function()
|
|
{
|
|
if(this._timerIdReadingMode)
|
|
{
|
|
clearTimeout(this._timerIdReadingMode);
|
|
}
|
|
|
|
this.layout.container.classList.remove('ui-viewer-reading-mode');
|
|
},
|
|
|
|
cursorInPerimeter: function(ev)
|
|
{
|
|
var offsetVertical = document.body.clientHeight / 100 * 30;
|
|
var offsetHorizontal = document.body.clientWidth / 100 * 30;
|
|
|
|
offsetHorizontal < 300 ? offsetHorizontal = 300 : null;
|
|
offsetVertical < 300 ? offsetVertical = 300 : null;
|
|
|
|
if( ev.y < offsetVertical || ev.y > document.body.clientHeight - offsetVertical ||
|
|
ev.x < offsetHorizontal || ev.x > document.body.clientWidth - offsetHorizontal)
|
|
{
|
|
return false
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @param {BX.SidePanel.Event} event
|
|
*/
|
|
handleSliderCloseByEsc: function(event)
|
|
{
|
|
if (this.isOpen() && (this.getZindex() > event.getSlider().getZindex()))
|
|
{
|
|
event.denyAction();
|
|
}
|
|
},
|
|
|
|
adjustViewport: function ()
|
|
{
|
|
var viewportNode = document.querySelector('[name="viewport"]');
|
|
if (!viewportNode)
|
|
{
|
|
return;
|
|
}
|
|
this._viewportContent = viewportNode.getAttribute('content');
|
|
viewportNode.setAttribute('content', 'width=device-width, user-scalable=no');
|
|
},
|
|
|
|
restoreViewport: function ()
|
|
{
|
|
var viewportNode = document.querySelector('[name="viewport"]');
|
|
if (!this._viewportContent || !viewportNode)
|
|
{
|
|
return;
|
|
}
|
|
|
|
viewportNode.setAttribute('content', this._viewportContent);
|
|
},
|
|
|
|
unbindEvents: function()
|
|
{
|
|
this.eventsAlreadyBinded = false;
|
|
|
|
BX.unbind(document, 'keydown', this.handlers.keyPress);
|
|
BX.unbind(window, 'resize', this.handlers.resize);
|
|
BX.unbind(this.getItemContainer(), 'touchstart', this.handlers.touchStart);
|
|
BX.unbind(this.getItemContainer(), 'touchend', this.handlers.touchEnd);
|
|
|
|
BX.unbind(this.getItemContainer(), 'click', this.handlers.handleClickOnItemContainer);
|
|
BX.unbind(this.getNextButton(), 'click', this.handlers.showNext);
|
|
BX.unbind(this.getPrevButton(), 'click', this.handlers.showPrev);
|
|
BX.unbind(this.getCloseButton(), 'click', this.handlers.close);
|
|
},
|
|
|
|
init: function ()
|
|
{},
|
|
|
|
openByNode: function (node)
|
|
{
|
|
this.buildItemListByNode(node).then(function (items) {
|
|
if (items.length === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this.shouldProcessSeparateMode(items))
|
|
{
|
|
this.setItems(items).then(function(){
|
|
this.openSeparate(0);
|
|
}.bind(this));
|
|
|
|
return;
|
|
}
|
|
|
|
this.setItems(items).then(function(){
|
|
this.open(this.getIndexByNode(node));
|
|
}.bind(this));
|
|
}.bind(this));
|
|
},
|
|
|
|
runActionByNode: function (node, actionId, additionalParams)
|
|
{
|
|
this.buildItemListByNode(node).then(function (items) {
|
|
if (items.length === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.setItems(items).then(function(){
|
|
this.runAction(this.getIndexByNode(node), actionId, additionalParams);
|
|
}.bind(this));
|
|
}.bind(this));
|
|
},
|
|
|
|
runAction(index, actionId, additionalParams)
|
|
{
|
|
const item = this.getItemByIndex(index);
|
|
if (actionId === 'download')
|
|
{
|
|
// Compatibility: a download action doesn't exist anymore
|
|
window.open(item.getDownloadUrl(), this.isExternalLink(item.getDownloadUrl()) ? '_blank' : '_self');
|
|
|
|
return;
|
|
}
|
|
|
|
var actionToRun = item.getActions().find(function (action) {
|
|
return action.id === actionId;
|
|
});
|
|
|
|
console.log('actionToRun', actionId, actionToRun);
|
|
if (!BX.type.isFunction(actionToRun.action))
|
|
{
|
|
console.log('action is not a function');
|
|
return;
|
|
}
|
|
|
|
actionToRun.action.call(this, item, additionalParams);
|
|
},
|
|
|
|
/**
|
|
* @returns {number}
|
|
*/
|
|
getZindex: function ()
|
|
{
|
|
var container = this.getViewerContainer();
|
|
if (!container.parentNode)
|
|
{
|
|
return 0;
|
|
}
|
|
|
|
var component = BX.ZIndexManager.getComponent(container);
|
|
|
|
return component.getZIndex();
|
|
},
|
|
|
|
/**
|
|
* @param items
|
|
* @return {Promise<extensionsCollection>}
|
|
*/
|
|
setItems: function (items)
|
|
{
|
|
if (!BX.type.isArray(items))
|
|
{
|
|
throw new Error("BX.UI.Viewer.Controller.setItems: 'items' has to be Array.");
|
|
}
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onSetItems', [this, items]);
|
|
|
|
if (this.items !== null)
|
|
{
|
|
this.items.forEach((item) => {
|
|
item.destroy();
|
|
});
|
|
}
|
|
|
|
this.items = items;
|
|
this.items.forEach(function (item) {
|
|
item.setController(this);
|
|
}, this);
|
|
|
|
return this.loadExtensions(this.collectExtensionsForAction(items));
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {String|String[]} extensions - Extension name
|
|
* @return {Promise<extensionsCollection>}
|
|
*/
|
|
loadExtensions: function (extensions)
|
|
{
|
|
return BX.loadExt(extensions);
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {BX.UI.Viewer.Item[]} items
|
|
* @return {Array}
|
|
*/
|
|
collectExtensionsForAction: function (items)
|
|
{
|
|
var extensionSet = new Set();
|
|
|
|
items.forEach(function (item) {
|
|
var actions = item.getActions() || [];
|
|
actions.forEach(function (action) {
|
|
if (!action.extension)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (!BX.type.isArray(action.extension))
|
|
{
|
|
action.extension = [action.extension];
|
|
}
|
|
|
|
action.extension.forEach(function (ext) {
|
|
extensionSet.add(ext);
|
|
});
|
|
});
|
|
});
|
|
|
|
var extensions = [];
|
|
extensionSet.forEach(function (ext) {
|
|
if (shouldLoadExtensions(ext))
|
|
{
|
|
extensions.push(ext);
|
|
}
|
|
});
|
|
|
|
return extensions;
|
|
},
|
|
|
|
appendItem: function (item)
|
|
{
|
|
if (!(item instanceof BX.UI.Viewer.Item))
|
|
{
|
|
throw new Error("BX.UI.Viewer.Controller.appendItem: 'item' has to be instance of BX.UI.Viewer.Item.");
|
|
}
|
|
|
|
item.setController(this);
|
|
this.items.push(item);
|
|
},
|
|
|
|
/**
|
|
* Reloads item in collection items. It means that we replace old item by the one new
|
|
* which is the copy.
|
|
* @param {BX.UI.Viewer.Item} item
|
|
* @param {Object} options
|
|
*/
|
|
reloadItem: function (item, options)
|
|
{
|
|
options = options || {};
|
|
|
|
if (!(item instanceof BX.UI.Viewer.Item))
|
|
{
|
|
throw new Error("BX.UI.Viewer.Controller.reloadItem: 'item' has to be instance of BX.UI.Viewer.Item.");
|
|
}
|
|
|
|
var index = this.items.indexOf(item);
|
|
if (index === -1)
|
|
{
|
|
throw new Error("BX.UI.Viewer.Controller.reloadItem: there is no 'item' in items to reload.");
|
|
}
|
|
|
|
var newItem = null;
|
|
if (item.sourceNode)
|
|
{
|
|
newItem = BX.UI.Viewer.buildItemByNode(item.sourceNode);
|
|
}
|
|
else
|
|
{
|
|
newItem = new item.constructor(item.options);
|
|
}
|
|
|
|
item.destroy();
|
|
|
|
newItem.setController(this);
|
|
newItem.applyReloadOptions(options);
|
|
|
|
this.items[index] = newItem;
|
|
},
|
|
|
|
show: function (index, options)
|
|
{
|
|
options = options || {};
|
|
if (typeof index === 'undefined')
|
|
{
|
|
index = 0;
|
|
}
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onBeforeShow', [this, index]);
|
|
|
|
var item = this.getItemByIndex(index);
|
|
if (!item)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.hideErrorBlock();
|
|
this.hideCurrentItem();
|
|
this.disableReadingMode();
|
|
this.showLoading();
|
|
|
|
const moveToStart = index === 0 && this.currentIndex === this.items.length - 1;
|
|
const moveToEnd = this.currentIndex === 0 && index === this.items.length - 1;
|
|
|
|
const direction = (index < this.currentIndex && !moveToStart) || moveToEnd ? 'backward' : 'forward';
|
|
this.currentIndex = index;
|
|
|
|
this.updateActions(this.getCurrentItem());
|
|
this.observeItemLoading(item);
|
|
|
|
const title = item.getTitle();
|
|
this.setTitle(BX.Type.isStringFilled(title) ? title : '');
|
|
|
|
item.load()
|
|
.then((loadedItem) => {
|
|
this.unobserveItemLoading(item);
|
|
|
|
if (this.getCurrentItem() === loadedItem)
|
|
{
|
|
console.log('show item');
|
|
this.processShowItem(loadedItem, options);
|
|
if (options.asFirstToShow)
|
|
{
|
|
loadedItem.asFirstToShow();
|
|
}
|
|
|
|
if (this.getCurrentItem() instanceof BX.UI.Viewer.Image)
|
|
{
|
|
(window.top || window).addEventListener('wheel', this.getPinchZoomHandler(), { passive: false });
|
|
}
|
|
else
|
|
{
|
|
(window.top || window).removeEventListener('wheel', this.getPinchZoomHandler(), { passive: false });
|
|
this.pinchZoomHandler = null;
|
|
}
|
|
}
|
|
|
|
this.processPreload(index, direction);
|
|
})
|
|
.catch((reason) => {
|
|
this.unobserveItemLoading(item);
|
|
|
|
var loadedItem = reason.item;
|
|
|
|
console.log('catch viewer');
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onItemError', [this, reason, loadedItem]);
|
|
|
|
if (this.getCurrentItem() === loadedItem)
|
|
{
|
|
this.processError(reason, loadedItem);
|
|
}
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onAfterProcessItemError', [this, reason, loadedItem]);
|
|
})
|
|
;
|
|
|
|
this.updateControls();
|
|
this.lockScroll();
|
|
this.adjustViewerHeight();
|
|
|
|
const cycleMove = this.items.length > 20 && (moveToStart || moveToEnd);
|
|
this.selectCarouselItem(this.currentIndex, options.asFirstToShow !== true && !cycleMove);
|
|
},
|
|
|
|
getPinchZoomHandler()
|
|
{
|
|
if (!this.pinchZoomHandler)
|
|
{
|
|
this.pinchZoomHandler = (event) => {
|
|
if (!(event.ctrlKey || event.metaKey))
|
|
{
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
if (event.deltaY < 0)
|
|
{
|
|
this.getCurrentItem().handleZoomIn();
|
|
}
|
|
else if (event.deltaY > 0)
|
|
{
|
|
this.getCurrentItem().handleZoomOut();
|
|
}
|
|
};
|
|
}
|
|
|
|
return this.pinchZoomHandler;
|
|
},
|
|
|
|
processPreload(fromIndex, direction)
|
|
{
|
|
if (this.maxParallelLoads < 1)
|
|
{
|
|
return;
|
|
}
|
|
|
|
const maxPreloads = this.maxParallelLoads - 1;
|
|
let preloadIndex = direction === 'backward' ? fromIndex - 1 : fromIndex + 1;
|
|
const shouldPreload = () => {
|
|
if (direction === 'backward')
|
|
{
|
|
return preloadIndex > (fromIndex - 1 - maxPreloads);
|
|
}
|
|
|
|
return preloadIndex < (maxPreloads + fromIndex + 1);
|
|
};
|
|
|
|
while (shouldPreload())
|
|
{
|
|
const itemByIndex = this.getItemByIndex(preloadIndex);
|
|
if (!itemByIndex)
|
|
{
|
|
break;
|
|
}
|
|
|
|
console.log('Trying to preload', preloadIndex);
|
|
|
|
this.observeItemLoading(itemByIndex);
|
|
itemByIndex.load()
|
|
.then(() => {
|
|
this.unobserveItemLoading(itemByIndex);
|
|
})
|
|
.catch(() => {
|
|
this.unobserveItemLoading(itemByIndex);
|
|
})
|
|
;
|
|
|
|
if (direction === 'backward')
|
|
{
|
|
preloadIndex--;
|
|
}
|
|
else
|
|
{
|
|
preloadIndex++;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reloads item and rerun show if item was as current item.
|
|
* @param {BX.UI.Viewer.Item} item
|
|
* @param {Object} options
|
|
*/
|
|
reload: function (item, options)
|
|
{
|
|
var isCurrentVisibleItem = this.getCurrentItem() === item;
|
|
this.reloadItem(item, options);
|
|
|
|
if (isCurrentVisibleItem)
|
|
{
|
|
console.log('reload');
|
|
this.show(this.currentIndex);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reloads and show current item.
|
|
* @param {?Object} options
|
|
*/
|
|
reloadCurrentItem: function (options)
|
|
{
|
|
this.reload(this.getCurrentItem(), options || {});
|
|
},
|
|
|
|
/**
|
|
* @param {BX.UI.Viewer.Item} item
|
|
*/
|
|
processShowItem: function(item, options)
|
|
{
|
|
|
|
this.hideCurrentItem();
|
|
this.hideLoading();
|
|
this.unlockExtraActions();
|
|
|
|
var contentWrapper = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-inner-content-wrapper'
|
|
},
|
|
});
|
|
|
|
const title = item.getTitle();
|
|
this.setTitle(BX.Type.isStringFilled(title) ? title : '');
|
|
|
|
var fragment = document.createDocumentFragment();
|
|
fragment.appendChild(item.render(options));
|
|
contentWrapper.appendChild(fragment);
|
|
var classList = this.layout.container.classList;
|
|
var containerModifiers = item.listContainerModifiers();
|
|
if (containerModifiers.length)
|
|
{
|
|
classList.add.apply(classList, containerModifiers);
|
|
}
|
|
|
|
this.layout.itemContainer.appendChild(contentWrapper);
|
|
|
|
item.afterRender();
|
|
this.adjustControlsSize(item.getContentWidth());
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onAfterShow', [this, item]);
|
|
},
|
|
|
|
adjustControlsSize: function(contentWidth)
|
|
{
|
|
this.getNextButton().style.width = null;
|
|
this.getPrevButton().style.width = null;
|
|
this.getNextButton().style.maxWidth = null;
|
|
this.getPrevButton().style.maxWidth = null;
|
|
|
|
if (contentWidth && BX.Type.isFunction(contentWidth.then))
|
|
{
|
|
contentWidth.then((width) => {
|
|
let controlWidth = Math.floor((document.body.offsetWidth - Math.ceil(width)) / 2);
|
|
controlWidth = Math.max(controlWidth, 70);
|
|
|
|
this.getNextButton().style.width = controlWidth + 'px';
|
|
this.getPrevButton().style.width = controlWidth + 'px';
|
|
this.getNextButton().style.maxWidth = 'none';
|
|
this.getPrevButton().style.maxWidth = 'none';
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Object} reason
|
|
* @param {BX.UI.Viewer.Item} item
|
|
*/
|
|
processError: function(reason, item)
|
|
{
|
|
reason = reason || {};
|
|
|
|
var message = reason.message || null;
|
|
if (BX.type.isArray(reason.errors) && reason.errors.length)
|
|
{
|
|
if (reason.errors[0].code === 1000 && !reason.message)
|
|
{
|
|
message = BX.message("JS_UI_VIEWER_ITEM_TRANSFORMATION_ERROR_1").replace('#DOWNLOAD_LINK#', item.getSrc());
|
|
}
|
|
}
|
|
|
|
this.hideCurrentItem();
|
|
this.hideLoading();
|
|
this.cleanExtraActions();
|
|
|
|
var contentWrapper = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-inner-content-wrapper'
|
|
}
|
|
});
|
|
|
|
var title = item.getTitle();
|
|
this.setTitle(BX.Type.isStringFilled(title) ? title : '');
|
|
|
|
var options = {};
|
|
if (message)
|
|
{
|
|
options.title = message;
|
|
}
|
|
if (reason.description)
|
|
{
|
|
options.description = reason.description;
|
|
}
|
|
contentWrapper.appendChild(this.getErrorBlock(options, item));
|
|
|
|
this.layout.itemContainer.appendChild(contentWrapper);
|
|
},
|
|
|
|
hideErrorBlock: function()
|
|
{
|
|
if (this.layout.error)
|
|
{
|
|
BX.remove(this.layout.error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Object} options
|
|
* @param {?string} [options.viewType='info']
|
|
* @param {?string} [options.title]
|
|
* @param {?string} [options.description]
|
|
* @param {BX.UI.Viewer.Item} item
|
|
* @return {null}
|
|
*/
|
|
getErrorBlock: function(options, item)
|
|
{
|
|
this.hideErrorBlock();
|
|
|
|
var viewType = BX.prop.getString(options, 'viewType', 'info');
|
|
var title = BX.prop.getString(options, 'title', BX.message("JS_UI_VIEWER_ITEM_TRANSFORMATION_ERROR_1").replace('#DOWNLOAD_LINK#', item.getSrc()));
|
|
var description = BX.prop.getString(options, 'description', BX.message("JS_UI_VIEWER_ITEM_TRANSFORMATION_HINT"));
|
|
|
|
this.layout.error = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-error'
|
|
},
|
|
style: {
|
|
maxWidth: description? '440px' : null
|
|
},
|
|
children: [
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-' + viewType + '-title'
|
|
},
|
|
html: title
|
|
}),
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-' + viewType + '-text'
|
|
},
|
|
html: description
|
|
})
|
|
]
|
|
});
|
|
|
|
return this.layout.error;
|
|
},
|
|
|
|
/**
|
|
* @param {String} link
|
|
* @return {boolean}
|
|
*/
|
|
isExternalLink: function (link)
|
|
{
|
|
var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
|
|
if (!isAbsoluteLink.test(link))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
if (!BX.getClass('URL'))
|
|
{
|
|
return link.indexOf(location.hostname) === -1;
|
|
}
|
|
|
|
try
|
|
{
|
|
return (new URL(link)).hostname !== location.hostname;
|
|
}
|
|
catch(e)
|
|
{}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @param {BX.UI.Viewer.Item} item
|
|
*/
|
|
createMoreMenuItems(item)
|
|
{
|
|
return item.getActions().map((action) => {
|
|
const menuItem = { ...action };
|
|
|
|
if (!menuItem.href && BX.type.isFunction(menuItem.action))
|
|
{
|
|
const fn = menuItem.action;
|
|
menuItem.onclick = (event, menuItem) => {
|
|
fn.call(this, item, { event, menuItem });
|
|
this.moreMenu?.close();
|
|
};
|
|
}
|
|
|
|
menuItem.disabled = menuItem.disableBeforeLoaded === true && item.isLoaded === false;
|
|
|
|
if (BX.Type.isArrayFilled(menuItem.items))
|
|
{
|
|
menuItem.items = menuItem.items.map((subMenuItem) => {
|
|
const newMenuItem = { ...subMenuItem };
|
|
if (BX.type.isString(newMenuItem.onclick))
|
|
{
|
|
const onclick = new Function('event', 'popupItem', newMenuItem.onclick);
|
|
newMenuItem.onclick = (event, popupItem) => {
|
|
onclick(event, popupItem);
|
|
this.moreMenu?.close();
|
|
};
|
|
}
|
|
|
|
return newMenuItem;
|
|
});
|
|
}
|
|
|
|
return menuItem;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @param {BX.UI.Viewer.Item} item
|
|
*/
|
|
refineItemActions(item)
|
|
{
|
|
const defaultActions = {
|
|
download: {
|
|
id: 'download',
|
|
type: 'download',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_DOWNLOAD'),
|
|
href: item.src,
|
|
buttonIconClass: 'ui-btn-icon-download',
|
|
},
|
|
edit: {
|
|
id: 'edit',
|
|
type: 'edit',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_EDIT'),
|
|
buttonIconClass: 'ui-btn-icon-edit',
|
|
},
|
|
share: {
|
|
id: 'share',
|
|
type: 'share',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_SHARE'),
|
|
buttonIconClass: 'ui-btn-icon-share',
|
|
},
|
|
print: {
|
|
id: 'print',
|
|
type: 'print',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_PRINT'),
|
|
buttonIconClass: 'ui-btn-icon-print ui-btn-disabled',
|
|
disableBeforeLoaded: true,
|
|
},
|
|
info: {
|
|
id: 'info',
|
|
type: 'info',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_INFO'),
|
|
buttonIconClass: 'ui-btn-icon-info ui-action-panel-item-last',
|
|
},
|
|
delete: {
|
|
id: 'delete',
|
|
type: 'delete',
|
|
text: BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_DELETE'),
|
|
buttonIconClass: 'ui-btn-icon-remove',
|
|
},
|
|
};
|
|
|
|
const actions = [];
|
|
for (const [, nakedAction] of item.getNakedActions().entries())
|
|
{
|
|
const action = (
|
|
defaultActions[nakedAction.type]
|
|
? BX.mergeEx(defaultActions[nakedAction.type], nakedAction)
|
|
: nakedAction
|
|
);
|
|
|
|
if (!action.id)
|
|
{
|
|
action.id = action.type;
|
|
}
|
|
|
|
if (action.id === 'download' && BX.Type.isStringFilled(action.href))
|
|
{
|
|
item.setDownloadUrl(action.href);
|
|
|
|
continue;
|
|
}
|
|
|
|
if (!action.action && action.href)
|
|
{
|
|
action.action = () => {
|
|
window.open(action.href, this.isExternalLink(action.href) ? '_blank' : '_self');
|
|
};
|
|
}
|
|
|
|
if (BX.type.isString(action.action))
|
|
{
|
|
const params = action.params || {};
|
|
const actionString = action.action;
|
|
|
|
action.action = (item, additionalParams) => {
|
|
try
|
|
{
|
|
const fn = eval(actionString);
|
|
fn.call(this, item, params, additionalParams);
|
|
}
|
|
catch (e)
|
|
{
|
|
console.log(e);
|
|
}
|
|
};
|
|
}
|
|
|
|
actions.push(action);
|
|
}
|
|
|
|
return actions;
|
|
},
|
|
|
|
getLoader: function(options)
|
|
{
|
|
if (!this.layout.loader)
|
|
{
|
|
this.layout.loader = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-loader'
|
|
},
|
|
style: {
|
|
zIndex: -1
|
|
},
|
|
children: [
|
|
this.layout.loaderContainer = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-loader-container'
|
|
}
|
|
}),
|
|
this.layout.loaderText = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-loader-text'
|
|
},
|
|
text: ''
|
|
})
|
|
]
|
|
});
|
|
|
|
var loader = new BX.Loader({size: 130});
|
|
loader.show(this.layout.loaderContainer);
|
|
}
|
|
|
|
return this.layout.loader;
|
|
},
|
|
|
|
getPrevButton: function()
|
|
{
|
|
if (!this.layout.prev)
|
|
{
|
|
this.layout.prev = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-prev'
|
|
},
|
|
events: {
|
|
mousewheel: function(event) {
|
|
this.handleMouseWheelOnControlButton(this.layout.prev, event);
|
|
}.bind(this)
|
|
}
|
|
})
|
|
}
|
|
|
|
return this.layout.prev;
|
|
},
|
|
|
|
getNextButton: function()
|
|
{
|
|
if (!this.layout.next)
|
|
{
|
|
this.layout.next = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-next'
|
|
},
|
|
events: {
|
|
mousewheel: function(event) {
|
|
this.handleMouseWheelOnControlButton(this.layout.next, event);
|
|
}.bind(this)
|
|
}
|
|
});
|
|
}
|
|
|
|
return this.layout.next;
|
|
},
|
|
|
|
handleMouseWheelOnControlButton: function(controlNode, event)
|
|
{
|
|
if (this._timeoutIdMouseWheel)
|
|
{
|
|
clearTimeout(this._timeoutIdMouseWheel);
|
|
}
|
|
|
|
controlNode.style.pointerEvents = 'none';
|
|
|
|
this._timeoutIdMouseWheel = setTimeout(function() {
|
|
controlNode.style.pointerEvents = null;
|
|
}, 50);
|
|
},
|
|
|
|
getCloseButton: function()
|
|
{
|
|
if (!this.layout.close)
|
|
{
|
|
this.layout.close = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-close',
|
|
},
|
|
html:
|
|
'<div class="ui-viewer-close-icon">'
|
|
+ '<div class="ui-icon-set --cross-40"></div>'
|
|
+ '</div>'
|
|
});
|
|
}
|
|
|
|
return this.layout.close;
|
|
},
|
|
|
|
getDownloadButton: function()
|
|
{
|
|
if (!this.layout.downloadBtn)
|
|
{
|
|
this.layout.downloadBtn = BX.Tag.render`
|
|
<a
|
|
class="ui-viewer-download-btn"
|
|
target="_blank"
|
|
title="${BX.Text.encode(BX.Loc.getMessage('JS_UI_VIEWER_ITEM_ACTION_DOWNLOAD'))}"
|
|
href=""
|
|
download
|
|
>
|
|
<div class="ui-icon-set --download ui-viewer-download-btn-icon"></div>
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
return this.layout.downloadBtn;
|
|
},
|
|
|
|
getMoreButton: function()
|
|
{
|
|
if (!this.layout.moreBtn)
|
|
{
|
|
this.layout.moreBtn = BX.Tag.render`
|
|
<div class="ui-viewer-more-btn" onclick="${this.handleMoreBtnClick.bind(this)}">
|
|
<div class="ui-icon-set --more ui-viewer-more-btn-icon"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.moreBtn;
|
|
},
|
|
|
|
isOpen: function ()
|
|
{
|
|
return this._isOpen;
|
|
},
|
|
|
|
addBodyPadding: function()
|
|
{
|
|
var padding = window.innerWidth - document.documentElement.clientWidth;
|
|
|
|
if (BX.getClass('BXIM.messenger.popupMessenger') ||
|
|
padding === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
document.body.style.paddingRight = padding + 'px';
|
|
|
|
var imBar = document.getElementById('bx-im-bar');
|
|
if(imBar)
|
|
{
|
|
var borderColor = 'rgb(238, 242, 244)';
|
|
|
|
if(document.body.classList.contains('bitrix24-light-theme'))
|
|
{
|
|
borderColor = 'rgba(255, 255, 255, .1)';
|
|
}
|
|
|
|
if(document.body.classList.contains('bitrix24-dark-theme'))
|
|
{
|
|
borderColor = 'rgba(82, 92, 105, .1)';
|
|
}
|
|
|
|
imBar.style.borderRight = padding + 'px solid ' + borderColor;
|
|
}
|
|
|
|
this.isBodyPaddingAdded = true;
|
|
},
|
|
|
|
removeBodyPadding: function()
|
|
{
|
|
document.body.style.removeProperty('padding-right');
|
|
|
|
var imBar = document.getElementById('bx-im-bar');
|
|
if (imBar)
|
|
{
|
|
imBar.style.removeProperty('border-right');
|
|
}
|
|
|
|
this.isBodyPaddingAdded = false;
|
|
},
|
|
|
|
openSeparate: function(index)
|
|
{
|
|
var item = this.getItemByIndex(index);
|
|
if (!item)
|
|
{
|
|
return;
|
|
}
|
|
|
|
item.load()
|
|
.then(function (loadedItem) {}.bind(this))
|
|
.catch(function (reason) {
|
|
var loadedItem = reason.item;
|
|
|
|
console.log('catch viewer');
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onItemError', [this, reason, loadedItem]);
|
|
|
|
if (this.getCurrentItem() === loadedItem)
|
|
{
|
|
this.processError(reason, loadedItem);
|
|
}
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onAfterProcessItemError', [this, reason, loadedItem]);
|
|
}.bind(this));
|
|
},
|
|
|
|
open: function(index)
|
|
{
|
|
|
|
this.adjustViewport();
|
|
this.addBodyPadding();
|
|
|
|
var container = this.getViewerContainer();
|
|
|
|
const baseContainer = this.baseContainer || document.body;
|
|
baseContainer.appendChild(container);
|
|
|
|
BX.focus(container);
|
|
|
|
var component = BX.ZIndexManager.getComponent(container);
|
|
if (!component)
|
|
{
|
|
BX.ZIndexManager.register(container);
|
|
}
|
|
|
|
BX.ZIndexManager.bringToFront(container);
|
|
|
|
this.createCarouselItems(index);
|
|
|
|
this.show(index, {
|
|
asFirstToShow: true,
|
|
});
|
|
|
|
this.bindEvents();
|
|
|
|
this._isOpen = true;
|
|
},
|
|
|
|
setTitle: function(title)
|
|
{
|
|
if (BX.Type.isStringFilled(title))
|
|
{
|
|
this.getTitleContainer().textContent = title;
|
|
}
|
|
},
|
|
|
|
getTitleContainer: function()
|
|
{
|
|
if (!this.layout.title)
|
|
{
|
|
this.layout.title = BX.Tag.render`
|
|
<span class="ui-viewer-title-text"></span>
|
|
`;
|
|
}
|
|
|
|
return this.layout.title;
|
|
},
|
|
|
|
getExtraActions: function()
|
|
{
|
|
if (!this.layout.extraActions)
|
|
{
|
|
this.layout.extraActions = BX.Tag.render`
|
|
<div class="ui-viewer-extra-actions"></div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.extraActions;
|
|
},
|
|
|
|
getDefaultActions: function()
|
|
{
|
|
if (!this.layout.defaultActions)
|
|
{
|
|
this.layout.defaultActions = BX.Tag.render`
|
|
<div class="ui-viewer-default-actions">
|
|
${this.getDownloadButton()}
|
|
${this.getMoreButton()}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.defaultActions;
|
|
},
|
|
|
|
observeItemLoading(item)
|
|
{
|
|
const supportAbort = Object.hasOwn(Object.getPrototypeOf(item), 'abort');
|
|
if (item.isLoaded === true || !supportAbort)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.loadingItems.add(item);
|
|
|
|
if (this.loadingItems.size > this.maxParallelLoads)
|
|
{
|
|
for (const queueItem of this.loadingItems)
|
|
{
|
|
if (queueItem === item || queueItem === this.getCurrentItem())
|
|
{
|
|
continue;
|
|
}
|
|
|
|
const success = queueItem.abort();
|
|
if (success === true)
|
|
{
|
|
this.loadingItems.delete(queueItem);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
unobserveItemLoading(item)
|
|
{
|
|
this.loadingItems.delete(item);
|
|
},
|
|
|
|
updateActions(item)
|
|
{
|
|
this.getDownloadButton().setAttribute('href', item.getDownloadUrl());
|
|
|
|
if (item.getActions().length > 0)
|
|
{
|
|
BX.Dom.removeClass(this.getMoreButton(), '--hidden');
|
|
}
|
|
else
|
|
{
|
|
BX.Dom.addClass(this.getMoreButton(), '--hidden');
|
|
}
|
|
|
|
this.renderExtraActions(item);
|
|
if (!item.isLoaded)
|
|
{
|
|
this.lockExtraActions();
|
|
}
|
|
},
|
|
|
|
getCarouselContainer: function()
|
|
{
|
|
if (!this.layout.carouselContainer)
|
|
{
|
|
this.layout.carouselContainer = BX.Tag.render`
|
|
<div class="ui-viewer-carousel">
|
|
${this.getCarouselScrollable()}
|
|
<div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.carouselContainer;
|
|
},
|
|
|
|
getCarouselScrollable: function()
|
|
{
|
|
if (!this.layout.carouselScrollable)
|
|
{
|
|
this.layout.carouselScrollable = BX.Tag.render`
|
|
<div
|
|
class="ui-viewer-carousel-scrollable"
|
|
onscroll="${BX.Runtime.debounce(this.handleCarouselScroll, 200, this)}"
|
|
>
|
|
${this.getCarouselItems()}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.carouselScrollable;
|
|
},
|
|
|
|
getCarouselItems: function()
|
|
{
|
|
if (!this.layout.carouselItems)
|
|
{
|
|
this.layout.carouselItems = BX.Tag.render`
|
|
<div class="ui-viewer-carousel-items" onclick="${this.handleCarouselClick.bind(this)}"></div>
|
|
`;
|
|
}
|
|
|
|
return this.layout.carouselItems;
|
|
},
|
|
|
|
getCarouselItemWidth: function(selected = false)
|
|
{
|
|
const margin = 4 * 2;
|
|
|
|
return selected ? 72 + margin : 46 + margin;
|
|
},
|
|
|
|
createCarouselItems: function(selectedIndex)
|
|
{
|
|
const itemsContainer = this.getCarouselItems();
|
|
BX.Dom.clean(itemsContainer);
|
|
BX.Dom.style(itemsContainer, { paddingLeft: null, paddingRight: null });
|
|
BX.Dom.style(this.getCarouselContainer(), { width: null });
|
|
|
|
BX.Dom.remove(this.getCarouselContainer());
|
|
|
|
if (!this.isCarouselEnabled())
|
|
{
|
|
return;
|
|
}
|
|
|
|
for (const [index, item] of this.items.entries())
|
|
{
|
|
const container = BX.Tag.render`
|
|
<div class="ui-viewer-carousel-item" data-index="${index}"></div>
|
|
`;
|
|
|
|
if (index === selectedIndex)
|
|
{
|
|
BX.Dom.addClass(container, '--selected');
|
|
}
|
|
|
|
if (item.getPreviewUrl() === null)
|
|
{
|
|
const icon = this.createItemIcon(item);
|
|
icon.renderTo(container);
|
|
}
|
|
else
|
|
{
|
|
const img = document.createElement('img');
|
|
img.className = 'ui-viewer-carousel-item-preview-img';
|
|
img.onerror = this.handlers.handleCarouselItemError;
|
|
|
|
// Preload first 10 items
|
|
if (index <= 10 || item.getPreviewUrl().startsWith('blob:'))
|
|
{
|
|
img.src = item.getPreviewUrl();
|
|
}
|
|
else
|
|
{
|
|
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
|
container.dataset.lazyloadSrc = item.getPreviewUrl();
|
|
}
|
|
|
|
container.appendChild(img);
|
|
}
|
|
|
|
BX.Dom.append(container, this.getCarouselItems());
|
|
}
|
|
|
|
BX.Dom.append(this.getCarouselContainer(), this.getViewerContainer());
|
|
|
|
const maxViewportWidth = this.getCarouselItemWidth() * 6 + this.getCarouselItemWidth(true); // 7 items
|
|
const minViewportWidth = (
|
|
(this.getItemsCount() - 1) * this.getCarouselItemWidth() + this.getCarouselItemWidth(true) / 2
|
|
) * 2;
|
|
|
|
const viewportWidth = Math.max(
|
|
this.getCarouselContainer().offsetWidth,
|
|
Math.min(minViewportWidth, maxViewportWidth),
|
|
);
|
|
const offset = viewportWidth / 2 - this.getCarouselItemWidth(true) / 2;
|
|
|
|
BX.Dom.style(this.getCarouselContainer(), {
|
|
width: `${viewportWidth}px`,
|
|
});
|
|
|
|
BX.Dom.style(itemsContainer, {
|
|
paddingLeft: `${offset}px`,
|
|
paddingRight: `${offset}px`,
|
|
});
|
|
},
|
|
|
|
loadCarouselPreviews()
|
|
{
|
|
const itemWidth = this.getCarouselItemWidth();
|
|
const scrollContainer = this.getCarouselItems().parentNode;
|
|
const windowWidth = scrollContainer.parentNode.offsetWidth;
|
|
const itemsInWindow = Math.round(windowWidth / itemWidth);
|
|
const scrollLeft = scrollContainer.scrollLeft;
|
|
|
|
const middleItemIndex = Math.ceil(scrollLeft / itemWidth);
|
|
const leftItemIndex = Math.max(middleItemIndex - itemsInWindow, 0);
|
|
const rightItemIndex = Math.min(middleItemIndex + itemsInWindow * 1.5, this.items.length - 1);
|
|
|
|
for (let index = leftItemIndex; index <= rightItemIndex; index++)
|
|
{
|
|
const carouselItem = this.getCarouselItems().children[index];
|
|
if (carouselItem.dataset.lazyloadSrc)
|
|
{
|
|
const img = carouselItem.firstElementChild;
|
|
img.src = carouselItem.dataset.lazyloadSrc;
|
|
|
|
BX.Dom.attr(carouselItem, 'data-lazyload-src', null);
|
|
}
|
|
}
|
|
},
|
|
|
|
getFileExtension: function(filename)
|
|
{
|
|
const position = BX.Type.isStringFilled(filename) ? filename.lastIndexOf('.') : -1;
|
|
|
|
return position > 0 ? filename.slice(Math.max(0, position + 1)) : '';
|
|
},
|
|
|
|
handleCarouselClick: function(event)
|
|
{
|
|
const container = event.target.closest('.ui-viewer-carousel-item');
|
|
if (!container)
|
|
{
|
|
return;
|
|
}
|
|
|
|
const index = Number(container.dataset.index);
|
|
|
|
this.show(index);
|
|
},
|
|
|
|
handleCarouselScroll(event)
|
|
{
|
|
this.loadCarouselPreviews();
|
|
},
|
|
|
|
handleCarouselItemError(event)
|
|
{
|
|
const container = event.target.closest('.ui-viewer-carousel-item');
|
|
const index = container.dataset.index;
|
|
const item = this.getItemByIndex(index);
|
|
|
|
BX.Dom.clean(container);
|
|
|
|
const icon = this.createItemIcon(item);
|
|
icon.renderTo(container);
|
|
},
|
|
|
|
createItemIcon(item)
|
|
{
|
|
return new BX.UI.Icons.Generator.FileIcon({
|
|
name: this.getFileExtension(item.getTitle()) || '...',
|
|
size: 18,
|
|
});
|
|
},
|
|
|
|
isCarouselEnabled: function()
|
|
{
|
|
if (this.items.length < 2)
|
|
{
|
|
return false;
|
|
}
|
|
|
|
return this.items.some((item) => {
|
|
return item.getPreviewUrl() !== null;
|
|
});
|
|
},
|
|
|
|
selectCarouselItem: function(index, smooth = true)
|
|
{
|
|
if (!this.isCarouselEnabled())
|
|
{
|
|
return;
|
|
}
|
|
|
|
const currentSelected = this.getCarouselItems().querySelector('.ui-viewer-carousel-item.--selected');
|
|
if (currentSelected)
|
|
{
|
|
BX.Dom.removeClass(currentSelected, '--selected');
|
|
}
|
|
|
|
const newSelected = this.getCarouselItems().querySelector(`.ui-viewer-carousel-item[data-index="${index}"]`);
|
|
BX.Dom.addClass(newSelected, '--selected');
|
|
|
|
this.adjustCarouselPosition(this.currentIndex, smooth);
|
|
this.loadCarouselPreviews();
|
|
},
|
|
|
|
adjustCarouselPosition: function(index, smooth = true)
|
|
{
|
|
if (!this.isCarouselEnabled())
|
|
{
|
|
return false;
|
|
}
|
|
|
|
const scrollContainer = this.getCarouselItems().parentNode;
|
|
const carouselItem = this.getCarouselItems().querySelector(`.ui-viewer-carousel-item[data-index="${index}"]`);
|
|
if (carouselItem === null)
|
|
{
|
|
return false;
|
|
}
|
|
|
|
const scrollLeft = this.getCarouselItemWidth() * index;
|
|
if (scrollContainer.scrollLeft !== scrollLeft)
|
|
{
|
|
scrollContainer.scrollTo({
|
|
left: scrollLeft,
|
|
behavior: smooth ? 'smooth' : 'instant',
|
|
});
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
hideCurrentItem: function()
|
|
{
|
|
if (this.getCurrentItem())
|
|
{
|
|
var classList = this.layout.container.classList;
|
|
var containerModifiers = this.getCurrentItem().listContainerModifiers();
|
|
if (containerModifiers.length)
|
|
{
|
|
classList.remove.apply(classList, containerModifiers);
|
|
}
|
|
|
|
this.getCurrentItem().beforeHide();
|
|
}
|
|
|
|
this.moreMenu?.close();
|
|
|
|
BX.cleanNode(this.layout.itemContainer);
|
|
},
|
|
|
|
updateControls: function()
|
|
{
|
|
if (!this.allowToUseCycleMode() && this.currentIndex + 1 >= this.items.length)
|
|
{
|
|
BX.addClass(this.getNextButton(), 'ui-viewer-navigation-hide');
|
|
}
|
|
else
|
|
{
|
|
BX.removeClass(this.getNextButton(), 'ui-viewer-navigation-hide');
|
|
}
|
|
|
|
if (!this.allowToUseCycleMode() && this.currentIndex === 0)
|
|
{
|
|
BX.addClass(this.getPrevButton(), 'ui-viewer-navigation-hide');
|
|
}
|
|
else
|
|
{
|
|
BX.removeClass(this.getPrevButton(), 'ui-viewer-navigation-hide');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @return {BX.UI.Viewer.Item}
|
|
*/
|
|
getCurrentItem: function ()
|
|
{
|
|
return this.getItemByIndex(this.currentIndex);
|
|
},
|
|
|
|
/**
|
|
* @param {HTMLElement} node
|
|
* @return {int}
|
|
*/
|
|
getIndexByNode: function (node)
|
|
{
|
|
var nodeIndex = null;
|
|
this.items.forEach(function (item, index) {
|
|
if (item.sourceNode === node)
|
|
{
|
|
nodeIndex = index;
|
|
}
|
|
});
|
|
|
|
return nodeIndex;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param index
|
|
* @returns BX.UI.Viewer.Item
|
|
*/
|
|
getItemByIndex: function (index)
|
|
{
|
|
index = parseInt(index, 10);
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onGetItemByIndex', [this, index]);
|
|
|
|
if (index < 0 || (index - 1) > this.items.length)
|
|
{
|
|
return null;
|
|
}
|
|
|
|
return this.items[index];
|
|
},
|
|
|
|
getItemsCount: function()
|
|
{
|
|
return this.items.length;
|
|
},
|
|
|
|
handleClickOnItemContainer: function (event)
|
|
{
|
|
this.getCurrentItem().handleClickOnItemContainer(event);
|
|
},
|
|
|
|
allowToUseCycleMode: function ()
|
|
{
|
|
var cycleMode = this.cycleMode;
|
|
var groupBy = this.getCurrentItem().getGroupBy();
|
|
if (this.optionsByGroup[groupBy] && this.optionsByGroup[groupBy].hasOwnProperty('cycleMode'))
|
|
{
|
|
cycleMode = this.optionsByGroup[groupBy].cycleMode;
|
|
}
|
|
|
|
return this.items.length > 1 && cycleMode;
|
|
},
|
|
|
|
showNext: function ()
|
|
{
|
|
var index = this.currentIndex + 1;
|
|
if (this.allowToUseCycleMode() && index >= this.items.length)
|
|
{
|
|
index = 0;
|
|
}
|
|
|
|
this.show(index);
|
|
},
|
|
|
|
showPrev: function ()
|
|
{
|
|
var index = this.currentIndex - 1;
|
|
if (this.allowToUseCycleMode() && index === -1)
|
|
{
|
|
index = this.items.length - 1;
|
|
}
|
|
|
|
this.show(index);
|
|
},
|
|
|
|
close: function ()
|
|
{
|
|
this._isOpen = false;
|
|
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onClose', [this]);
|
|
|
|
BX.addClass(this.layout.container, 'ui-viewer-hide');
|
|
this.restoreViewport();
|
|
this.hideCurrentItem();
|
|
|
|
BX.bind(this.layout.container, 'transitionend', function()
|
|
{
|
|
BX.ZIndexManager.unregister(this.layout.container);
|
|
BX.remove(this.layout.container);
|
|
BX.removeClass(this.layout.container, 'ui-viewer-hide');
|
|
BX.unbindAll(this.layout.container);
|
|
|
|
this.unLockScroll();
|
|
this.unbindEvents();
|
|
this.disableReadingMode();
|
|
if(this.isBodyPaddingAdded)
|
|
{
|
|
this.removeBodyPadding();
|
|
}
|
|
}.bind(this));
|
|
|
|
if (this.pinchZoomHandler)
|
|
{
|
|
(window.top || window).removeEventListener('wheel', this.getPinchZoomHandler(), { passive: false });
|
|
this.pinchZoomHandler = null;
|
|
}
|
|
|
|
// this.items = null;
|
|
// this.currentIndex = null;
|
|
// this.layout.container = null;
|
|
// this.layout.close = null;
|
|
},
|
|
|
|
showLoading: function (options)
|
|
{
|
|
options = options || {};
|
|
options.zIndex = BX.type.isNumber(options.zIndex)? options.zIndex : -1;
|
|
|
|
this.layout.inner.appendChild(this.getLoader());
|
|
this.setTextOnLoading(options.text || '');
|
|
this.layout.loader.style.zIndex = options.zIndex;
|
|
},
|
|
|
|
setTextOnLoading: function (text)
|
|
{
|
|
this.layout.loaderText.textContent = text;
|
|
},
|
|
|
|
hideLoading: function ()
|
|
{
|
|
BX.remove(this.layout.loader);
|
|
},
|
|
|
|
lockScroll: function()
|
|
{
|
|
BX.addClass(document.body, 'ui-viewer-lock-body');
|
|
},
|
|
|
|
unLockScroll: function()
|
|
{
|
|
BX.removeClass(document.body, 'ui-viewer-lock-body');
|
|
},
|
|
|
|
renderExtraActions(item)
|
|
{
|
|
this.cleanExtraActions();
|
|
BX.Dom.append(item.renderExtraActions(), this.getExtraActions());
|
|
},
|
|
|
|
cleanExtraActions()
|
|
{
|
|
BX.Dom.clean(this.getExtraActions());
|
|
},
|
|
|
|
lockExtraActions: function()
|
|
{
|
|
BX.Dom.addClass(this.getExtraActions(), '--locked');
|
|
},
|
|
|
|
unlockExtraActions: function()
|
|
{
|
|
BX.Dom.removeClass(this.getExtraActions(), '--locked');
|
|
},
|
|
|
|
handleWindowResize()
|
|
{
|
|
this.adjustViewerHeight();
|
|
const item = this.getCurrentItem();
|
|
if (item)
|
|
{
|
|
item.handleResize();
|
|
}
|
|
},
|
|
|
|
adjustViewerHeight: function()
|
|
{
|
|
if(!this.layout.container || BX.browser.IsMobile())
|
|
return;
|
|
|
|
this.layout.container.style.height = document.documentElement.clientHeight + 'px';
|
|
},
|
|
|
|
getViewerContainer: function()
|
|
{
|
|
if (!this.layout.container)
|
|
{
|
|
this.layout.container = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer',
|
|
tabIndex: 22081990,
|
|
},
|
|
style: {
|
|
height: window.clientHeight + 'px'
|
|
},
|
|
children: [
|
|
BX.Tag.render`
|
|
<div class="ui-viewer-header">
|
|
<div class="ui-viewer-author"></div>
|
|
<div class="ui-viewer-title">
|
|
${this.getTitleContainer()}
|
|
</div>
|
|
<div class="ui-viewer-actions">
|
|
${this.getExtraActions()}
|
|
${this.getDefaultActions()}
|
|
${this.getCloseButton()}
|
|
</div>
|
|
</div>
|
|
`,
|
|
this.layout.inner = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-inner',
|
|
},
|
|
children: [
|
|
this.getItemContainer(),
|
|
],
|
|
}),
|
|
this.getPrevButton(),
|
|
this.getNextButton(),
|
|
],
|
|
});
|
|
}
|
|
|
|
return this.layout.container;
|
|
},
|
|
|
|
getItemContainer: function()
|
|
{
|
|
if (!this.layout.itemContainer)
|
|
{
|
|
this.layout.itemContainer = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-inner-content'
|
|
}
|
|
});
|
|
}
|
|
|
|
return this.layout.itemContainer
|
|
},
|
|
|
|
handleTouchStart: function(event)
|
|
{
|
|
var touchObject = event.changedTouches[0];
|
|
this.swipeDirection = null;
|
|
this.startX = touchObject.pageX;
|
|
this.startY = touchObject.pageY;
|
|
this.startTime = (new Date()).getTime();
|
|
// event.preventDefault();
|
|
|
|
},
|
|
|
|
handleTouchEnd: function(event)
|
|
{
|
|
var touchObject = event.changedTouches[0];
|
|
var allowedTime = 300;
|
|
var threshold = 80;
|
|
var restraint = 100;
|
|
var distanceX = touchObject.pageX - this.startX;
|
|
var distanceY = touchObject.pageY - this.startY;
|
|
var elapsedTime = (new Date()).getTime() - this.startTime;
|
|
|
|
if (elapsedTime <= allowedTime)
|
|
{
|
|
if (Math.abs(distanceX) >= threshold && Math.abs(distanceY) <= restraint)
|
|
{
|
|
this.swipeDirection = (distanceX < 0) ? 'left' : 'right';
|
|
}
|
|
// else if (Math.abs(distanceY) >= threshold && Math.abs(distanceX) <= restraint)
|
|
// {
|
|
// this.swipeDirection = (distanceY < 0) ? 'up' : 'down';
|
|
// }
|
|
}
|
|
|
|
switch (this.swipeDirection)
|
|
{
|
|
case 'left':
|
|
this.showPrev();
|
|
break;
|
|
case 'right':
|
|
this.showNext();
|
|
break;
|
|
}
|
|
|
|
// event.preventDefault();
|
|
},
|
|
|
|
isOnTop: function ()
|
|
{
|
|
if (!this.isOpen())
|
|
{
|
|
return false;
|
|
}
|
|
|
|
if (BX.getClass('BXIM.messenger') && BXIM.messenger.popupMessenger)
|
|
{
|
|
return true;
|
|
}
|
|
|
|
if (!BX.getClass('BX.SidePanel.Instance') || !BX.SidePanel.Instance.getTopSlider())
|
|
{
|
|
return true;
|
|
}
|
|
|
|
return this.getZindex() > BX.SidePanel.Instance.getTopSlider().getZindex();
|
|
},
|
|
|
|
handleKeyPress: function (event)
|
|
{
|
|
if (!this.isOnTop())
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (event.metaKey)
|
|
{
|
|
return;
|
|
}
|
|
|
|
const handled = this.getCurrentItem().handleKeyPress(event);
|
|
if (handled === true)
|
|
{
|
|
return;
|
|
}
|
|
|
|
switch (event.code)
|
|
{
|
|
case 'Space':
|
|
case 'ArrowRight':
|
|
this.showNext();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
break;
|
|
case 'ArrowLeft':
|
|
this.showPrev();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
break;
|
|
case 'Escape':
|
|
this.close();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
break;
|
|
}
|
|
},
|
|
|
|
setOptionsByGroup: function (groupBy, options)
|
|
{
|
|
this.optionsByGroup[groupBy] = options;
|
|
|
|
return this;
|
|
},
|
|
|
|
getCachedData: function(id)
|
|
{
|
|
return this.cachedData[id];
|
|
},
|
|
|
|
setCachedData: function(id, data)
|
|
{
|
|
this.cachedData[id] = data;
|
|
},
|
|
|
|
unsetCachedData: function(id)
|
|
{
|
|
this.cachedData[id] = null;
|
|
},
|
|
|
|
/**
|
|
* @param {String} type
|
|
* @param {String} className
|
|
*/
|
|
addType: function (type, className)
|
|
{
|
|
return BX.UI.Viewer.addType(type, className);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @extends {BX.UI.Viewer.Controller}
|
|
* @param options
|
|
* @constructor
|
|
*/
|
|
BX.UI.Viewer.InlineController = function (options)
|
|
{
|
|
options = options || {};
|
|
|
|
BX.UI.Viewer.Controller.apply(this, arguments);
|
|
};
|
|
|
|
BX.UI.Viewer.InlineController.prototype =
|
|
{
|
|
__proto__: BX.UI.Viewer.Controller.prototype,
|
|
constructor: BX.UI.Viewer.Controller,
|
|
|
|
adjustViewport: function(){},
|
|
addBodyPadding: function(){},
|
|
adjustZindex: function(){},
|
|
adjustViewerHeight: function(){},
|
|
// showLoading: function(){},
|
|
|
|
/**
|
|
* @param {HTMLElement} node
|
|
*/
|
|
renderItemByNode: function (node)
|
|
{
|
|
if (!node)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.buildItemListByNode(node).then(function(items){
|
|
if (items.length === 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.setItems(items).then(function(){
|
|
this.open(0);
|
|
}.bind(this));
|
|
}.bind(this));
|
|
},
|
|
|
|
getViewerContainer: function()
|
|
{
|
|
if (!this.layout.container)
|
|
{
|
|
//this.layout.inner? for showLoading
|
|
this.layout.container = this.layout.inner = BX.create('div', {
|
|
props: {
|
|
className: 'ui-viewer-inner'
|
|
},
|
|
children: [
|
|
this.getItemContainer()
|
|
]
|
|
});
|
|
}
|
|
|
|
return this.layout.container;
|
|
},
|
|
|
|
handleClickOnItemContainer: function(){},
|
|
handleKeyPress: function(){},
|
|
|
|
temp()
|
|
{
|
|
// timestamp update 207392
|
|
},
|
|
};
|
|
/**
|
|
* @param type
|
|
* @param {HTMLElement} node
|
|
* @return {BX.UI.Viewer.Item}
|
|
*/
|
|
BX.UI.Viewer.buildItemByTypeAndNode = function (type, node)
|
|
{
|
|
var item = new type();
|
|
|
|
if (!(item instanceof BX.UI.Viewer.Item))
|
|
{
|
|
throw new Error("BX.UI.Viewer.buildItemByTypeAndNode: 'item' has to be instance of BX.UI.Viewer.Item.");
|
|
}
|
|
|
|
item.bindSourceNode(node);
|
|
item.setPropertiesByNode(node);
|
|
item.setActions(BX.UI.Viewer.Instance.refineItemActions(item));
|
|
|
|
return item;
|
|
};
|
|
|
|
/**
|
|
* @param {HTMLElement} node
|
|
* @returns {BX.UI.Viewer.Item}
|
|
*/
|
|
BX.UI.Viewer.buildItemByNode = function (node)
|
|
{
|
|
if (!BX.type.isDomNode(node))
|
|
{
|
|
throw new Error("BX.UI.Viewer.buildItemByNode: 'node' has to be DomNode.");
|
|
}
|
|
|
|
var typeCode = node.dataset.viewerType;
|
|
if (!typeCode && node.tagName.toLowerCase() === 'img')
|
|
{
|
|
typeCode = 'image';
|
|
}
|
|
|
|
BX.UI.Viewer.triggerEventToFindTypeClass(typeCode);
|
|
|
|
var className = types[typeCode];
|
|
if (className)
|
|
{
|
|
return BX.UI.Viewer.buildItemByTypeAndNode(BX.getClass(className), node);
|
|
}
|
|
|
|
if (node.dataset.viewerTypeClass)
|
|
{
|
|
if (!BX.getClass(node.dataset.viewerTypeClass))
|
|
{
|
|
throw new Error("BX.UI.Viewer.buildItemByNode: could not find class " + node.dataset.viewerTypeClass);
|
|
}
|
|
|
|
return BX.UI.Viewer.buildItemByTypeAndNode(BX.getClass(node.dataset.viewerTypeClass), node);
|
|
}
|
|
|
|
console.warn("BX.UI.Viewer.buildItemByNode: could not find class to build type {" + typeCode + "}");
|
|
|
|
return BX.UI.Viewer.buildItemByTypeAndNode(BX.getClass(types.unknown), node);
|
|
};
|
|
|
|
var types = {
|
|
image: 'BX.UI.Viewer.Image',
|
|
plainText: 'BX.UI.Viewer.PlainText',
|
|
unknown: 'BX.UI.Viewer.Unknown',
|
|
video: 'BX.UI.Viewer.Video',
|
|
audio: 'BX.UI.Viewer.Audio',
|
|
document: 'BX.UI.Viewer.Document',
|
|
code: 'BX.UI.Viewer.HightlightCode'
|
|
};
|
|
|
|
/**
|
|
* @param {String} type
|
|
* @param {String} className
|
|
*/
|
|
BX.UI.Viewer.addType = function (type, className)
|
|
{
|
|
types[type] = className;
|
|
};
|
|
|
|
BX.UI.Viewer.triggerEventToFindTypeClass = function (type)
|
|
{
|
|
BX.onCustomEvent('BX.UI.Viewer.Controller:onFindType', [BX.UI.Viewer.Instance, type]);
|
|
};
|
|
|
|
/**
|
|
* @param {HTMLElement} container
|
|
* @param filter
|
|
* @returns {BX.Promise}
|
|
*/
|
|
BX.UI.Viewer.bind = function (container, filter)
|
|
{
|
|
if (!BX.type.isDomNode(container))
|
|
{
|
|
throw new Error("BX.UI.Viewer.bind: 'container' has to be DomNode.");
|
|
}
|
|
if (!BX.type.isPlainObject(filter) && !BX.type.isFunction(filter))
|
|
{
|
|
filter = function(node) {
|
|
return BX.type.isElementNode(node) && node.dataset.hasOwnProperty('viewer');
|
|
};
|
|
}
|
|
|
|
BX.bindDelegate(container, 'click', filter, function(event) {
|
|
var nodes = BX.findChildren(container, filter, true);
|
|
var indexToShow = 0;
|
|
var targetNode = BX.getEventTarget(event);
|
|
if (targetNode.tagName !== 'A' && targetNode.closest('a[target="_blank"]'))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
const openViewer = () => {
|
|
const items = nodes.map((node, index) => {
|
|
if (node === targetNode)
|
|
{
|
|
indexToShow = index;
|
|
}
|
|
|
|
return top.BX.UI.Viewer.buildItemByNode(node);
|
|
});
|
|
|
|
top.BX.UI.Viewer.Instance.setItems(items)
|
|
.then(() => {
|
|
top.BX.UI.Viewer.Instance.open(indexToShow);
|
|
})
|
|
.catch(() => {
|
|
// Fail silently
|
|
});
|
|
};
|
|
|
|
if (window.top !== window && !BX.getClass('window.top.BX.UI.Viewer.Instance'))
|
|
{
|
|
top.BX.loadExt('ui.viewer')
|
|
.then(() => {
|
|
openViewer();
|
|
})
|
|
.catch(() => {
|
|
// Fail Silently
|
|
});
|
|
}
|
|
else
|
|
{
|
|
openViewer();
|
|
}
|
|
|
|
event.preventDefault();
|
|
});
|
|
};
|
|
|
|
var shouldLoadExtensions = function(extension) {
|
|
if (extension === 'disk.viewer.actions' && BX.getClass('BX.Disk.Viewer.Actions'))
|
|
{
|
|
return false;
|
|
}
|
|
if (extension === 'disk.viewer.document-item' && BX.getClass('BX.Disk.Viewer.DocumentItem'))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
var instance = null;
|
|
/**
|
|
* @memberOf BX.UI.Viewer
|
|
* @name BX.UI.Viewer#Instance
|
|
* @type BX.UI.Viewer.Controller
|
|
* @static
|
|
* @readonly
|
|
*/
|
|
Object.defineProperty(BX.UI.Viewer, 'Instance', {
|
|
enumerable: false,
|
|
get: function()
|
|
{
|
|
if (window.top !== window && BX.getClass('window.top.BX.UI.Viewer.Instance'))
|
|
{
|
|
return window.top.BX.UI.Viewer.Instance;
|
|
}
|
|
|
|
if (instance === null)
|
|
{
|
|
instance = new BX.UI.Viewer.Controller({});
|
|
}
|
|
|
|
return instance;
|
|
}
|
|
});
|
|
|
|
window.document.addEventListener('click', function(event) {
|
|
if (event.button !== 0)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (window.top !== window && !BX.getClass('window.top.BX.UI.Viewer.Instance'))
|
|
{
|
|
top.BX.loadExt('ui.viewer').then(function () {
|
|
top.BX.UI.Viewer.Instance.handleDocumentClick(event);
|
|
});
|
|
}
|
|
else
|
|
{
|
|
top.BX.UI.Viewer.Instance.handleDocumentClick(event);
|
|
}
|
|
}, true);
|
|
|
|
//We have to show viewer only in top window not in iframe.
|
|
//So we try to load ui.viewer to the top window if there is no viewer.
|
|
if (window.top !== window && !BX.getClass('window.top.BX.UI.Viewer.Instance'))
|
|
{
|
|
top.BX.loadExt('ui.viewer');
|
|
}
|
|
})();
|