/*******************************************************************************
* Copyright (c) 2017 Genialist Software Ltd.
* All rights reserved.
******************************************************************************/
const pPictureGalleries = new pMap();
/******************************************************************************/
function getVisibleGallery() {
return pPictureGalleries.getValue(pElement.getAttribute('view-item', 'gallery'), null);
}
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
function pPictureGalleryInstance(p_id, p_element) {
var that = this, m_id = p_id, m_element = p_element, m_thumb_height = pStyleUtil.parseWidth(pDocument.getStyleValue('.img-picture-thumb', 'height')), resize_gallery_disabled, refresh,
canDoPrevious, canDoNext, do_update, m_ui_slide = true, m_sortByDateTaken, h, m_effects = [ '', 'picture-trans-opactity', 'picture-trans-opactity' ], m_thumb_surround = 0;
[ 'margin-left', 'margin-right', 'border-left', 'border-right', 'padding-left', 'padding-right' ].forEach(function(x) {
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', x));
})
/*
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'margin-left'));//new pStyle(x).surroundWidth();
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'margin-right'));
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'border-left'));
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'border-right'));
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'padding-left'));
m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'padding-right'));*/
this.tracePrefix = 'PictureGallery';
//*** REGISTER
pPictureGalleries.put(p_id, this);
//*** INIT STATE
pDocument.initHistoryState('view-item');
this.fullScreen = false;
function f_getImage(op) {
if (pApplicationUI.OPTION_PICTURES_SCALE)
if (op.height)
if (op.height > screen.height && op.scaled && op.scaled.length>0) {
var i;
for(i=0 ; i<op.scaled.length ; i++) {
if (op.scaled[i].height && op.scaled[i].height>=screen.height)
return op.scaled[i];
}
for(i=0 ; i<op.scaled.length ; i++) {
if (op.scaled[i].height && op.scaled[i].height<=screen.height)
return op.scaled[i];
}
/*
if (op.s1024x768 && op.s1024x768.height && op.s1024x768.height<screen.height)
p_url = op.s1024x768.uri;
if (op.s1920x1080 && op.s1920x1080.height && op.s1920x1080.height<screen.height)
p_url = op.s1920x1080.uri;*/
}
return op;
}
function f_getURL(o) {
o = f_getImage(o);
return pURL.addParam(o.uri, 'v', o.lastModified);
}
function f_ui_removeImage() {
var x_c = pElement.x('view-item-content'), x_cp = pElement.x('view-item-image-container'+(that.m_view));
if (x_cp)
x_c.removeChild(x_cp);
pElement.setTextContent("picture-count", (that.images? that.images.length : '?')+' Picture(s)');
}
function f_ui_size(x, x_div) {
x = pDocument.height(x);
if (x>0) {
x_div.style.height = x + 'px';
x_div.style.lineHeight = x + 'px';
}
}
function onResize() {
//console.log('picture on resize...');
var v = pElement.x('view-item'), e = pElement.x('view-item-content'), h;
if (e) {
if (that.fullScreen) {
e.style.height = '100%';
e.style.minHeight = '100%';
e.style.maxHeight = '100%';
pElement.addClassName(v, 'fullscreen');
/*pElement.addClassName(i_e, 'fullscreen');
pElement.removeClassName("view-item-close", "link");
pElement.addClassName("view-item-close", "fullscreen");
pElement.removeClassName("view-item-exit-fullscreen", "link");
pElement.addClassName("view-item-exit-fullscreen", "fullscreen");*/
if (that.images) {
h = pDocument.height(e);
that.images.forEach(function(im, i) {
i = pElement.x("view-item-image-container"+i);
if (i) {
i.style.height = h + 'px';
i.style.lineHeight = h + 'px';
}
});
}
}
else {
pElement.removeClassName(v, 'fullscreen');
/*
pElement.removeClassName(i_e, 'fullscreen');
pElement.addClassName("view-item-close", "link");
pElement.removeClassName("view-item-close", "fullscreen");
pElement.addClassName("view-item-exit-fullscreen", "link");
pElement.removeClassName("view-item-exit-fullscreen", "fullscreen");
*/
//var h = window.innerHeight - pDocument.top(v) - new pStyle(v).surroundHeight() - new pStyle(e).surroundHeight();
//var h = (window.innerHeight - (150 -31 + pDocument.height('picture-toolbar')));
pDocument.setTimeout('pic', function() {
var top = Math.max(pDocument.height('view-item-close'), pDocument.height('view-item-title')), m = pElement.x('menu');
//pConsole.info(this, v.id + '.top: ' + pDocument.top(v));
//pConsole.info(this, v.id + '.surroundHeight: ' + new pStyle(v).surroundHeight());
//pConsole.info(this, e.id + '.surroundHeight: ' + new pStyle(e).surroundHeight());
//pConsole.info(this, 'view-item-close.height: ' + top);
//pConsole.info(this, 'picture-toolbar.height: ' + pDocument.height('picture-toolbar'));
h = getInnerHeight() - pDocument.height(m) - new pStyle(v).surroundHeight() - new pStyle(e).surroundHeight() - pDocument.height('picture-toolbar') - top;
e.style.height = e.style.minHeight = e.style.maxHeight = h + 'px';
//pConsole.info(this, e.id + ".style.height -> " + h);
if (that.images) {
//var h = pDocument.height(e);
that.images.forEach(function(im, i) {
i = pElement.x("view-item-image-container"+i);
if (i) {
i.style.height = h + 'px';
i.style.lineHeight = h + 'px';
//pConsole.info(this, i.id + ".style.height -> " + h);
}
});
}
}, 100);
//i_e.style.height = i_h + 'px';
//i_e.style.width = window.innerWidth;
//window.f_resize_play();
}
}
/*if (this.images) {
var h = pDocument.height(e);
this.images.forEach(function(im, i) {
i = pElement.x("view-item-image-container"+i);
if (i) {
i.style.height = h + 'px';
i.style.lineHeight = h + 'px';
}
});
}*/
that.updateDimensions();
if (!resize_gallery_disabled)
if (pApplicationUI.OPTION_PICTURES_RESIZE_GALLERY)// && window.innerWidth>800)
if (!pDialog.isDialogOn())
that.resizeImages();
}
function f_delete() {
var i_curl = that.getCurrentImageURL();
var n = that.m_view;
that.images.splice(n, 1);
f_ui_removeImage();
if (that.images.length==0)
that.viewItemClose();
else if (that.images.length==1)
that.viewItem(0, true);
else if (n>that.images.length-1)
that.viewItem(n-1, true);
else
that.viewItem(n, true);
//var e = pElement.x('picture-thumb-'+n);
//m_element.remove(e);
refresh = true;
//this.showImages(-1);
//this.resizeImages();
}
function c_renameItem(n) {
this.autostart = { name: n }; // new_name
do_update = true;
that.viewItemClose();
}
function c_showFullscreenButtons() {
if (canDoPrevious)
pDocument.showAndFadeOut('view-item-prev');
if (canDoNext)
pDocument.showAndFadeOut('view-item-next');
if (this.fullScreen) {
pDocument.showAndFadeOut('view-item-close');
pDocument.showAndFadeOut('view-item-exit-fullscreen');
}
}
//this.m_start = 0;
this.m_view = -1;
//this.first = function() { if (pDialog.isDialogOn() === false) that.viewItem(0); };
//this.previous = function() { if (pDialog.isDialogOn() === false) that.viewItem(n-1); };
//this.next = function() { if (pDialog.isDialogOn() === false) that.viewItem(n+1); };
//this.last = function() { if (pDialog.isDialogOn() === false) that.viewItem(this.images.length-1); };
this.enterFullscreen = function() {
if (!that.fullScreen) {
pDocument.setHistoryState('show-images-fullscreen', true);
that.fullScreen = true;
onResize();
c_showFullscreenButtons();
//if (!pDevice.isIOS() || pDevice.isIOS12())
// pDocument.fullScreen('view-item');
}
};
this.exitFullscreen = function() {
if (that.fullScreen) {
//if (!pDevice.isIOS())
//pDocument.exitFullScreen(m_element);
pDocument.setHistoryState('show-images-fullscreen', false);
that.fullScreen = false;
onResize();
pElement.removeClassName('view-item-close', 'fadeout');
pDocument.show('view-item-close');
}
};
pElement.x('view-item').addEventListener('dblclick', function() {
if (!that.fullScreen)
that.enterFullscreen();
else
that.exitFullscreen();
});
this.viewItemClose = function() {
pDocument.clearTimeout('gallery');
that.exitFullscreen();
//*** save state
pDocument.setHistoryState('view-item', pObject.removeMember(pDocument.getHistoryState('view-item'), 'n'));
if (pDocument.componentIsShown('view-item')) {
pDocument.hideComponent('view-item');
pElement.setOnClick('toolbar-img-first', null);
pElement.setOnClick('toolbar-img-previous', null);
pElement.setOnClick('toolbar-img-next', null);
pElement.setOnClick('toolbar-img-last', null);
f_ui_removeImage();
resize_gallery_disabled = false;
if (refresh) {
that.showImages(-1);
refresh = false;
}
if (do_update) {
that.update();
do_update = false;
}
}
pTouch.enableScroll();
pDocumenti.removeOnKeyDown(that.viewItemClose, pKeys.escape, true);
};
this.getCurrentImage = function() {
return that.images[that.m_view];
};
this.getCurrentImageURL = function() {
return that.getCurrentImage().uri;
};
this.getAllImageURLs = function() {
return that.images.map(function(img) { return img.uri });
};
this.deletePicture = function(p_doc_url) {
if (!that.images || that.images.length<1)
return false;
if (pDocument.componentIsShown('view-item') === false)
return false;
var i_img = that.getCurrentImage(), r = {
id: 'delete-picture',
options: [ '!question', pImages.createDialogOption(i_img) ],
doc_url: p_doc_url || window.location.pathname,
play_url: i_img.uri,
gallery: that
};
pDialog.question(r).then(function () {
pMediaLibrary.deletePicture(r.doc_url, [ r.play_url ], f_delete, false);
});
return true;
};
this.deleteAllPictures = function(p_doc_url) {
//TODO: in case of partial failure, refresh images...
var req = { id: 'delete-all-pictures', gallery: that, doc_url: p_doc_url, play_urls: that.getAllImageURLs() };
pDialog.question(req).then(function() {
pMediaLibrary.deletePicture(req.doc_url, req.play_urls, req.gallery.update, false);
});
};
this.convertPicture = function(p_doc_url) {
pMediaLibrary.convertToMP4({ play_url: that.getCurrentImage().name, ximport: false, img: true }).then(c_renameItem);
};
this.renamePicture = function(p_doc_url) {
pMediaLibrary.renameItem(p_doc_url || window.location.pathname, that.getCurrentImageURL(), c_renameItem, that.getCurrentImage().name || pString.basename(that.getCurrentImageURL()));
};
this.movePicture = function(p_doc_url) {
pMediaLibrary.movePicture(p_doc_url || window.location.pathname, that.getCurrentImageURL(), f_delete);
};
this.moveAllPictures = function(p_doc_url) {
//TODO: in case of partial failure, refresh images...
pMediaLibrary.movePicture(p_doc_url || window.location.pathname, that.getAllImageURLs(), that.update);
};
this.resume = function() {
if (!that.images || that.images.length<1)
return false;
if (that.m_view<0)
that.viewItem(0);
else if (pDocument.componentIsShown('view-item') === false) {
if (that.m_view>=that.images.length)
that.viewItem(that.images.length-1);
else
that.viewItem(that.m_view);
}
else
that.viewItemClose();
return true;
};
this.next = function() {
return pElement.click('toolbar-img-next');
};
this.previous = function() {
return pElement.click('toolbar-img-previous');
};
this.updateDimensions = function() {
if (pDocument.componentIsShown('view-item') === true) {
var /*i_short = true*//*pDevice.isIPhone() || pDevice.isIPod() || pDevice.isAndroid();*//*,*/ i = that.getCurrentImage(), x = pElement.x('view-item-image'+that.m_view);
if (x) {
var w = pPictures.width(x), h = pPictures.height(x), t = i.mime==null || pPictures.supports(i.mime);
if (i.width!=w || i.height!=h)
pElement.setTextContent('view-item-image-dim', '(' + (t? '':'transcoded; ') + i.width + ' x ' + i.height + ' > ' + w + ' x ' + h +')');
else
pElement.setTextContent('view-item-image-dim', '(' + (t? '':'transcoded; ') + i.width + ' x ' + i.height +')');
setTimeout(window.f_resize_play, 100);
}
}
};
//this.n = 0;
function f_ui_slidePictureFromRight(x_div) {
pElement.addClassName(x_div, "view-item-image-container-right");
setTimeout(function(){
pElement.removeClassName(x_div, "view-item-image-container-right");
pElement.addClassName(x_div, "view-item-image-container-center");
that.busy = false;
}, 1);
}
function f_ui_slidePictureFromLeft(x_div) {
pElement.addClassName(x_div, "view-item-image-container-left");
setTimeout(function(){
pElement.removeClassName(x_div, "view-item-image-container-left");
pElement.addClassName(x_div, "view-item-image-container-center");
that.busy = false;
}, 1);
}
var x_img;
this.viewItem = function(n, p_force, p_slideshow, p_effect) {
if (pDialog.isDialogOn() === true)
return;
if (that.busy === true)
return;
pDocument.clearTimeout('gallery');
that.wait = setTimeout(function() { pDocument.wait(); that.wait = null; }, 100);
resize_gallery_disabled = true;
var i_current = that.m_view;
var i_show = pDocument.componentIsShown('view-item') === false;
if (n.name)
n = that.images.findIndex(function(i) { return i.name == n.name; });
//*** FIX n
if (!n) n = 0;
try {
n = parseInt(n);
if (n>=that.images.length) n = that.images.length-1;
if (n<0) n=0;
}
catch (exception) {
n = 0;
}
that.m_view = n;
that.busy = true;
//*** LOAD IMAGE
var i_current_img = that.images[n], i_url = f_getURL(i_current_img);
//*** REPORT PAGE/TIME
if (that.reportPage) {
if (pConsole.debugging())
pConsole.debug(that, "Report Time (Page): " + pDate.toLocaleString(new Date()) + ': ' + n);
pHTTPRequest.post(window.location.pathname + "?action=play-update&time=" + n);
}
//*** CREATE IMAGE
var i_img = new Image();
i_img.onerror = function() {
if (that.wait)
clearTimeout(that.wait);
pDocument.stopwait();
that.viewItemClose();
that.busy = false;
pApplicationUI.errorDialog({ text: 'Failed to load image: <br/>'+i_url, icon: { src: '/resources/html/images/32x32/picture_error.png' } });
};
var cl=''
if (pApplicationUI.OPTION_PICTURES_ROTATE) {
var o = parseInt(i_current_img.orientation);
//if (o == 8) //turn to right
// cl = 'rotate-right';
if (o == 3) //flip horizontally
cl = 'rotate-half';
//if (o == 6) //turn to left
// cl = 'rotate-left';
}
i_img.onload = function() {
if (pApplicationUI.OPTION_PICTURES_ROTATE) {
var o = parseInt(i_current_img.orientation);
if (o == 8) //turn to right
i_url = pPictures.turnToLeft(that.ximg);
//if (o == 3) //flip horizontally
// i_url = pPictures.flipHorizontally(that.ximg);
if (o == 6) //turn to left
i_url = pPictures.turnToRight(that.ximg);
}
if (that.wait)
clearTimeout(that.wait);
pDocument.stopwait();
//onResize();
//var i_view = that.m_view;
if (m_ui_slide) {
var x_c = pElement.x('view-item-content'), x_div = pElement.create("div", "view-item-image-container"+n, "view-item-image-container " + cl), i_x = pElement.create("span"), x_cp;
f_ui_size(x_c, x_div);
i_x.innerHTML="​";
//i_x.className = "noselect";
//i_x.style.width = "0px;";
x_div.appendChild(i_x);
x_img = pElement.create("img", 'view-item-image'+n, "view-item-pictures-medias");
//x_img.style.paddingTop = screen.height/2 - i_img.naturalHeight + 'px';
pElement.setSrc(x_img, i_url);
if (pApplicationUI.OPTION_PICTURES_TOOLTIPS)
x_img.title = pPictures.tooltip(i_current_img, '\n ');
//x_img.style.marginTop = -(x_img.height / 2) + 'px';
x_div.appendChild(x_img);
x_c.appendChild(x_div);
if (null==i_current || i_current == -1 || i_show === true) {
pElement.addClassName(x_div, "view-item-image-container-center");
x_img.style.maxHeight = '10px';
setTimeout(function(){
/*if (that.fullScreen)
x_img.style.maxHeight = '100%';
else if (h)
x_img.style.maxHeight = h + 'px';
else*/
x_img.style.maxHeight = '100%';
setTimeout(function(){
onResize();
that.busy = false;
}, 100);
}, 1);
}
else if (n >= i_current) {
pElement.addClassName(x_div, "view-item-image-container-right "+(p_effect || ''));
x_cp = pElement.x('view-item-image-container'+i_current);
if (x_cp && x_cp!=x_div) {
pElement.addClassName(x_cp, "view-item-image-container-left "+(p_effect || ''));
pElement.removeClassName(x_cp, "view-item-image-container-center");
setTimeout(function(){
pElement.removeClassName(x_div, "view-item-image-container-right");
pElement.addClassName(x_div, "view-item-image-container-center "+(p_effect || ''));
}, 10);
setTimeout(function(){
x_c.removeChild(x_cp);
that.busy = false;
}, 200);
}
else
f_ui_slidePictureFromRight(x_div);
}
else {
pElement.addClassName(x_div, "view-item-image-container-left");
x_cp = pElement.x('view-item-image-container'+i_current);
if (x_cp && x_cp!=x_div) {
pElement.addClassName(x_cp, "view-item-image-container-right");
pElement.removeClassName(x_cp, "view-item-image-container-center");
setTimeout(function(){
pElement.removeClassName(x_div, "view-item-image-container-left");
pElement.addClassName(x_div, "view-item-image-container-center");
}, 10);
setTimeout(function(){
x_c.removeChild(x_cp);
that.busy = false;
}, 200);
}
else
f_ui_slidePictureFromLeft(x_div);
}
}
else {
x_img = pElement.x('view-item-image', 'view-item-image'+n);
pElement.setSrc(x_img, p_url);
pElement.removeClassName(x_img, 'not-visible');
pElement.addClassName('view-item-busy', 'not-visible');
that.busy = false;
}
that.images[that.m_view].dimensions = { width: this.width, height: this.height };
that.updateDimensions();
setTimeout(that.updateDimensions, 300);
setTimeout(that.updateDimensions, 300);
pElement.setOnClick('view-item-image', function() { window.open(p_url, '_blank'); });//pLocation.assign(p_url); });
//*** AUTOMATIC SLIDESHOW
if (p_slideshow === true && n+1<that.images.length) {
pDocument.setTimeout('gallery', function() { that.viewItem(n+1, null, true, pArray.randomElement(m_effects)); }, 5000);
}
setTimeout(window.f_resize_play, 100);
setTimeout(onResize, 100);
}.bind({ ximg: i_img, img: f_getImage(i_current_img) }); // i_img.onload = function()
//*** LOAD IMAGE
pElement.setTextContent('view-item-title-content', (n+1)+'/'+that.images.length + ' - ' + pString.encodeHTML(pPictures.title(that.images[n])));
pElement.setTextContent('view-item-image-dim', '');
pConsole.debug(that, "Loading image: " + i_url);
i_img.src = i_url;
//*** LOAD PREVIOUS IMAGE
if (n>0) {
i_img = new Image();
i_img.src = f_getURL(that.images[n-1]);
}
//*** LOAD NEXT IMAGE
if (n+1<=that.images.length-1) {
i_img = new Image();
i_img.src = f_getURL(that.images[n+1]);
}
//*** SET BUTTONS
if (n>0) {
canDoPrevious = true;
pDocument.showAndFadeOut('view-item-prev');
}
else {
canDoPrevious = false;
pDocument.hide('view-item-prev');
}
if (n+1<=that.images.length-1) {
canDoNext = true;
pDocument.showAndFadeOut('view-item-next');
}
else {
canDoNext = false;
pDocument.hide('view-item-next');
}
if (that.fullScreen) {
pDocument.showAndFadeOut('view-item-close');
pDocument.showAndFadeOut('view-item-exit-fullscreen');
}
//*** UPDATE TOOLBAR
var h = pElement.x('picture-toolbar'), i_getgal = 'pPictureGalleries.getValue(\''+m_id+'\')';
pElement.removeAllChildren(h);
if (n>0) pElement.add(h, pApplicationUI.createToolbarItem('img-first', i_getgal+'.viewItem(0)', 'toolbar-img-first'));
if (canDoPrevious) pElement.add(h, pApplicationUI.createToolbarItem('img-previous', i_getgal+'.viewItem('+(n-1)+')', 'toolbar-img-previous'));
pElement.add(h, [[ 'div', "toolbar-view", "toolbar-item toolbar-view link", 'Full Size', null, [ 'onclick', 'pLocation.assign(\''+i_current_img.uri+'?v='+i_current_img.lastModified+'\')' ]]]);
if (pResources.get('admin') === "true") {
if (i_current_img.canWrite != false)
pElement.add(h, [[ 'div', "toolbar-rename-item", "toolbar-item toolbar-rename-item link", 'Rename...', null, [ 'onclick', i_getgal+'.renamePicture()' ]]]);
if (i_current_img.canCopy != false)
pElement.add(h, [[ 'div', "toolbar-copy-item", "toolbar-item toolbar-copy-item link", 'Copy To...', null, [ 'onclick', "pMediaLibrary.copyPicture(null, "+i_getgal+".getCurrentImageURL())" ]]]);
if (i_current_img.canWrite != false)
pElement.add(h, [[ 'div', "toolbar-move-item", "toolbar-item toolbar-move-item link", 'Move To...', null, [ 'onclick', i_getgal+'.movePicture()' ]]]);
if (i_current_img.canWrite != false)
pElement.add(h, [[ 'div', "toolbar-delete-item", "toolbar-item toolbar-delete-item toolbar-delete-picture link", 'Delete...', null, [ 'onclick', i_getgal+'.deletePicture()' ]]]);
pElement.add(h, pApplicationUI.createToolbarItem('file-properties', 'pMediaLibrary.getFileMetadata(null, \''+ i_current_img.name+'\')'));
//h += '<div class="toolbar-item toolbar-properties link" id="toolbar-properties" onclick="pMediaLibrary.getFileMetadata(null, \''+ i_current_img.name+'\')">File Properties...</div>';
pElement.add(h, [[ 'div', null, "toolbar-item toolbar-convert link", 'Convert...', pApplicationUI.OPTION_TOOLS_CONVERT? '':'display: none;', [ 'onclick', i_getgal+".convertPicture()" ]]]);
}
if (canDoNext) pElement.add(h, pApplicationUI.createToolbarItem('img-next', i_getgal+'.viewItem('+(n+1)+')', 'toolbar-img-next'));
if (n!=that.images.length-1) pElement.add(h, pApplicationUI.createToolbarItem('img-last', i_getgal+'.viewLastItem()', 'toolbar-img-last'));
pElement.add(h, pApplicationUI.createToolbarItem('img-fullscreen', i_getgal+'.enterFullscreen()'));
//pElement.add(h, pApplicationUI.createToolbarItem('img-zoomout', i_getgal+".zoomout(event, x_img)"));
//pElement.add(h, pApplicationUI.createToolbarItem('img-zoomin', i_getgal+"zoomin(event, x_img)"));
//h += '<button is="google-cast-button" onclick="window.castPicture('+i_getgal+'.getCurrentImageURL)" style="width: 16px; height: 16px;"></button>';
//TODO: if tags enabled
if (pResources.get('admin') === "true")
pElement.add(h, pApplicationUI.createToolbarItem('img-tags', 'pMediaLibrary.selectTags()'));
pElement.add(h, [[ 'div', null, "toolbar-item toolbar-more link", 'More...', null, [ 'onclick', 'pApplicationMenu.menu(\'picture-toolbar\')' ]],
[ 'div', null , "toolbar-end" ]]);
//pElement.setInnerHTML('picture-toolbar', h);
pElement.addClassName('view-item-image', 'not-visible');
pElement.removeClassName('view-item-busy', 'not-visible');
if (pDocument.componentIsShown('view-item') === false) {
pDocument.showComponent('view-item', 'picture-hide');
pElement.setAttribute('view-item', 'gallery', m_id);
/*var resetTimeout;
interact(pElement.x('view-item-content')).gesturable({
onstart: function (event) {
//clearTimeout(resetTimeout);
//scaleElement.classList.remove('reset');
},
onmove: function (event) {
alert('pincg: ' + event.ds);//scale = scale * (1 + event.ds);
//scaleElement.style.webkitTransform =
//scaleElement.style.transform =
// 'scale(' + scale + ')';
dragMoveListener(event);
},
onend: function (event) {
//resetTimeout = setTimeout(reset, 1000);
//scaleElement.classList.add('reset');
}
}) .draggable({ onmove: dragMoveListener });*/
}
pDocumenti.addOnKeyDown(that.viewItemClose, pKeys.escape, true);
pTouch.disableScroll();
setTimeout(window.f_resize_play, 100);
setTimeout(onResize, 100);
return true;
};
this.viewLastItem = function() {
this.viewItem(that.images.length-1);
};
this.renderPageToolbar = function(i_imgs, m_max, p_start) {
var h = '';
if (m_max > 0 && i_imgs.length > m_max) {
h += '<div class="listview-page">';
for(var l=0 ; l<i_imgs.length ; l+=m_max) {
var i_max = l+m_max;
if (i_max > i_imgs.length)
i_max = i_imgs.length;
if (l==p_start)
h += '<span class=\"listview-item-page listview-item-page-selected selected\">' + (l+1) + '-'+i_max + '</span>';
else
h += '<span class=\"listview-item-page\"><a class=\"listview-item-page-link link\" href=\"javascript:pPictureGalleries.getValue(\''+m_id+'\').showImages('+l+')\">' + (l+1) + '-'+i_max + '</a></span>';
}
h += '</div>';
}
return h;
};
var current_page_start;
this.showImages = function(p_start) {
if (pDocument.componentIsShown('view-item') === false)
pDocument.show(m_element);
var i_imgs = that.images;
if (!i_imgs) {
that.showAsUnavailable();
return;
}
if (i_imgs.length<1) {
pElement.setInnerHTML(m_element, '<span class="warning">This picture folder is empty.</span>');
return;
}
const m_max = pApplicationUI.OPTION_PAGE_MAXSIZE;
var h = '<div class="dragenter-help"><!----></div>';
//*** FIX P_START
if (p_start<0)
p_start = current_page_start || pDocument.getHistoryState('show-images-start', 0);
if (p_start>=i_imgs.length) ///TO TEST
p_start = Math.floor(i_imgs.length / m_max) * m_max;
//*** SAVE P_START
current_page_start = p_start;
pDocument.setHistoryState('show-images-start', p_start);
//*** PAGE TOOLBAR
h += that.renderPageToolbar(i_imgs, m_max, p_start);
//*** RESIZING DATA
var i_line_first = 0, i_first_of_line = true, i_x = pElement.x(m_element), i_prect_right = pDocument.innerWidth(i_x), i_right = 0;
//console.log("view: " + i_prect_right);
const hh = m_thumb_height, w_surround = m_thumb_surround, i_resize = false;//pApplicationUI.OPTION_PICTURES_RESIZE_GALLERY;// && window.innerWidth>800;
var i_divs = [], i_tooltip = pApplicationUI.OPTION_PICTURES_TOOLTIPS;
for(var i=p_start ; i<i_imgs.length ; i++) {
if (m_max>0 && i>=p_start+m_max) break;
var i_img = i_imgs[i], w = i_img.ww + w_surround, i_div = 'class="picture-thumb" id=\"picture-thumb-'+ i +'\">\n', i_title = '', cl = '';
if (i_tooltip)
i_title = pPictures.tooltip(i_img, '
');
if (!i_img.thumbs && pApplicationUI.OPTION_PICTURES_ROTATE) {
var o = parseInt(i_img.orientation);
if (o == 8) //turn to right
cl = 'rotate-right';
if (o == 3) //flip horizontally
cl = 'rotate-half'
if (o == 6)
cl = 'rotate-left';
}
i_div += '<img class=\"img-picture-thumb '+((i<10)? 'key-'+(i+1):'')+' view-item-start '+cl+'\" src=\"'
i_div += (i_img.thumbs)? pURL.addParam(i_img.thumbs[0].uri, 'v', i_img.thumbs[0].lastModified) : pURL.addParam(i_img.uri, 'v', i_img.lastModified);
i_div += '\" id="img-picture-thumb-'+i+'" onclick=\"pPictureGalleries.getValue(\''+m_id+'\').viewItem('+i+')\" onerror=\"pConsole.error(this, this.src)\"';
if (i_img.width && i_img.width>=0)
i_div += ' org-width="'+i_img.width+'" org-height="' + i_img.height + '" ';
i_div += ' org-or="'+i_img.orientation + '" ';
i_div += ' attr-url=\"'+pImages.toURL(i_img)+'\" ondragstart=\"pPictures.dragStart(event);\"';
if (i_resize) {
if (!i_img.thumbs && pApplicationUI.OPTION_PICTURES_ROTATE) {
var o = parseInt(i_img.orientation);
if (o == 6 || o == 8)
i_div += ' style="width: '+hh+'px; height: '+Math.max(hh, i_img.ww)+'px;';
else
i_div += ' style="width: '+i_img.ww+'px; height: '+hh+'px;';
}
else
i_div += ' style="width: '+i_img.ww+'px; height: '+hh+'px;';
}
i_divs[i_divs.length] = { div: i_div, w: w, ww: i_img.ww, title: i_title, img_ml: 0 };
if (!i_resize) continue;
//*** RESIZE
if (i_first_of_line) {
i_first_of_line = false;
i_line_first = i;
i_right = w;
}
else if (i_right + w == i_prect_right) { // line break
i_first_of_line = true;
}
else if (i_right + w > i_prect_right) { // line break;
i_first_of_line = true;
//var n = i - i_line_first + 1;
var aw = w - (i_prect_right - i_right) + 1;
//console.log(i+' aw: ' + aw + ' w: ' + w + ' rect: ' + i_prect_right + ' r: ' + i_right);
if (aw > 0) {
//0.9.13
pPictures.resizeLine(i_divs.slice(i_line_first-p_start, i+1-p_start), aw);
}
}
else
i_right += w;
}
i_divs.forEach(function(i_div) {
if (i_resize) {
var w = i_div.w - w_surround;
if (w < i_div.ww) {
//console.log(i_i.id + ' marginLeft: ' + i_i.img_w + ' - ' + w + ' ' + (i_i.img_w - w)/2 + ' ' + Math.trunc((i_i.img_w - w)/2));
i_div.img_ml = -Math.trunc((i_div.ww - w)/2);
}
h += '<div style="width: '+ w + 'px;" ';
if (pString.v(i_div.title))
h += ' title="'+pString.encodeHTMLLines(i_div.title)+'"';//' '+i_div.ww + ' > ' + w +' ' + i_div.img_ml + '"';
h += i_div.div + ' margin-left: '+i_div.img_ml+'px;"/>\n';
}
else
h += '<div '+((pString.v(i_div.title))? ' title="'+pString.encodeHTMLLines(i_div.title)+'" ' : ' ')+ i_div.div + '>';
h += '</div>\n';
});
h += '<div style="clear: both;"/>';
//*** PAGE TOOLBAR
h += that.renderPageToolbar(i_imgs, m_max, p_start);
//*** RENDER
pElement.setInnerHTML(m_element, h);
//*** RESIZE IMAGES
pDocument.setTimeout('resize', that.resizeImages, 300);
};
this.resizeImages = function() {
//return;
var i_imgs = that.images;
if (!i_imgs || i_imgs.length<1)
return;
//pConsole.info(that, "Resizing Picture Gallery...");
var p_start = pDocument.getHistoryState('show-images-start', 0);
var i_x = pElement.x(m_element);
const m_max = pApplicationUI.OPTION_PAGE_MAXSIZE;
var imgs = []
for(var i=p_start ; i<i_imgs.length;i++) {
if (m_max>0 && i>=p_start+m_max) break;
imgs[imgs.length] = pElement.x('picture-thumb-' + i);
}
pPictures.resizeImages(i_x, imgs, m_thumb_height);
};
var available;
this.showAsAvailable = function(p_request) {
pDocument.show('movie-play-default');
pDocument.hide('movie-play-default-unavailable');
pDocument.hide('movie-play-default-unavailable2');
pElement.removeClassName(pElement.c('container-movie-play-default-unavailable'), 'movie-unavailable');
available = true;
};
this.showAsUnavailable = function() {
pElement.setInnerHTML(m_element, '<span class="warning">This picture folder is not available or cannot be found.</span>');
pDocument.hide('movie-play-default');
pDocument.show('movie-play-default-unavailable', 'table-cell');
pDocument.show('movie-play-default-unavailable2');
pElement.addClassName(pElement.c('container-movie-play-default-unavailable'), 'movie-unavailable');
available = false;
};
this.thumbWidth = function(i_img) {
return pPictures.thumbWidth(i_img.width, i_img.height, m_thumb_height);
};
function f_sort(a, b) {
if (a.date == b.date)
return 0;
if (a.date < b.date)
return -1;
return 1;
};
this.update = function(p_autostart) {
pConsole.info(that, 'Getting pictures...');
var u = pURL.addQueryParameter(null, [ 'action', 'contents', 'v', Math.random() ]);
if (pApplicationUI.OPTION_PICTURES_GET_ORIENTATION)
u = pURL.addQueryParameter(u, 'get_orientation', '1');
var p_prop = that.show_propname, i_autostart = p_autostart;
pHTTPRequest.get(u, function(p_request) {
if (pROSE.handleHTTPResponse(p_request)===false)
return;
try {
//pConsole.info(that, 'Getting pictures... Response: ' + p_request.responseText);
var i_obj = pJSON.parse(p_request.responseText);
if (!i_obj)
return;
var i_imgs = i_obj.images;
if (null==i_imgs || i_obj.exists === false) {
that.images = null;
that.showAsUnavailable();
if (i_autostart != false)
if (that.autostart!=null || pROSE.getProp(p_prop)===true || pDocument.isHidden(m_element)===false) {
that.autostart = null;
if (pDocument.getHistoryState('show-images-fullscreen', false))
that.enterFullscreen();
that.showImages(0);
}
that.updateToolbar();
return;
}
//*** SORT BY DATE TAKEN...
that.unsorted_images = i_imgs;
if (that.sortByDateTaken)
//if (i_obj.dates === true)
for(var i=0 ; i<i_imgs.length ; i++)
if (i_imgs[i].date!=null && i_imgs[i].date!='' && i_imgs[i].date!='-1') {
pConsole.info(that, "Sort pictures by date taken...");
// concat files with no date and files with date
var i_d = i_imgs.filter(function(i) { return i.date!=null && i.date!='' && i.date!='-1'; });
var i_nd = i_imgs.filter(function(i) { return !i_d.includes(i); });
i_imgs = i_nd.concat(i_d.sort(f_sort));
//i_imgs.sort(f_sort);
break;
}
that.images = i_imgs;
//*** CALC THUMB SIZE ON SCREEN
//const h = m_thumb_height;
that.images.forEach(function(i) {
var o = parseInt(i.orientation);
if (o == 6 || o ==8)
{ var w = i.width; i.width = i.height; i.height = w; }
if (i.thumbs)
i.ww = that.thumbWidth(i.thumbs[0]);
else
i.ww = that.thumbWidth(i);
//i_img.uri = pString.decodeHTML(i_img.uri);
});
that.showAsAvailable();
if (pROSE.getProp(p_prop)===true)
that.showImages(-1); //TODO
that.updateToolbar();
if (i_autostart != false) {
if (that.autostart!=null) {
that.viewItem(that.autostart);
that.autostart = null;
}
else if (pROSE.getProp(p_prop)===true || pDocument.isHidden(m_element)===false) {
that.autostart = null;
//TODO: ... that.showImages(0);
}
}
}
catch (ex) {
pConsole.error(that, 'Failed to update images', ex);
}
}, false);
pElement.setOnClick('view-item-content', c_showFullscreenButtons);
};
//*** INSTALL ESCAPE AND SPACE KEY
pDocumenti.addOnKeyDown(function(e, k) {
pConsole.info(that, 'keyCode: ' + k);
/*if (k == pKeys.escape) { //Escape
if (pDocument.componentIsShown('view-item') === true)
that.viewItemClose();
return true;
}*/
if (k == pKeys.space) //SPACE
return that.resume();
});
this.updateToolbar = function() {
var h = pElement.x('main-toolbar');
pElement.removeAllChildren(h);
var i_getgal = 'pPictureGalleries.getValue(\''+m_id+'\')', i_empty = that.images==null || that.images.length<1;
pElement.add(h, [[ 'div', null, 'toolbar-item', [ [ 'span', 'picture-count', 'toolbar-text', (that.images? that.images.length : '?')+' Picture(s)' ]]]]);
//h += '<div class="toolbar-item"><span class="toolbar-text" id="picture-count">'+((this.images)? this.images.length : '?')+' Picture(s)</span></div>';
if (available && !i_empty) {
if (pPage.type == "books.medias")
pElement.add(h, pApplicationUI.createToolbarItem('read', i_getgal+'.viewItem(0)'));
else
pElement.add(h, pApplicationUI.createToolbarItem('play', i_getgal+'.viewItem(0)'));
pElement.add(h, pApplicationUI.createToolbarItem('show-pictures', i_getgal+'.showImages(0)'));
//h += '<div class="toolbar-item toolbar-show-pictures link" onclick="pPictureGallery.showImages(0)">'+pResources.resources.toolbar.showImages+'</div>';
}
if (available) {
pElement.add(h, pApplicationUI.createToolbarItem('refresh', i_getgal+'.update()', 'toolbar-refresh'));
//h += '<div class="toolbar-item toolbar-update link" onclick="pPictureGallery.update()" id="toolbar-refresh">'+pResources.resources.toolbar.refresh+'</div>';
}
if (pResources.get('admin') === "true") {
if (available) {
pElement.add(h, pApplicationUI.createToolbarItem('addpictures', 'pMediaLibrary.selectAddImage()'));
//h += '<div class="toolbar-item toolbar-add-picture link" id="toolbar-add-picture" onclick="pMediaLibrary.selectAddImage()">'+pResources.resources.toolbar.addpictures+'</div>';
pElement.add(h, pApplicationUI.createToolbarItem('create-folder', 'pMediaLibrary.createFolder()'));
//h += '<div class="toolbar-item toolbar-create-folder link" id="toolbar-create-folder" onclick="pMediaLibrary.createFolder()">'+pResources.resources.toolbar.createFolder+'</div>';
pElement.add(h, pApplicationUI.createToolbarItem('artwork', 'pMediaLibrary.selectArtworkImage()', 'toolbar-artwork'));
//h += '<div class="toolbar-item toolbar-artwork link" id="toolbar-artwork" onclick="pMediaLibrary.selectArtworkImage()">'+pResources.resources.toolbar.selectArtwork+'</div>';
//h += '<div class="toolbar-item toolbar-poster link" id="toolbar-poster" onclick="pMediaLibrary.selectPosterImage()">'+pResources.resources.toolbar.selectPoster+'</div>';
//h += '<div class="toolbar-item toolbar-backdrop link" id="toolbar-backdrop" onclick="pMediaLibrary.selectBackdropImage()">'+pResources.resources.toolbar.selectBackdrop+'</div>';
}
if (available && !i_empty) {
var i_canWrite = that.images.every(function(img) {return img.canWrite != false });
if (that.images.every(function(img) { return img.canCopy != false }))
pElement.add(h, pApplicationUI.createToolbarItem('copy-item', 'pMediaLibrary.copyPicture(null, '+i_getgal+'.getAllImageURLs())', 'toolbar-copy-item'));
//h += '<div class="toolbar-item toolbar-copy-item link" id="toolbar-copy-item" onclick="pMediaLibrary.copyPicture(null, pPictureGallery.getAllImageURLs())">Copy All Picture(s) To...</div>';
if (i_canWrite)
pElement.add(h, pApplicationUI.createToolbarItem('move-item', i_getgal+'.moveAllPictures()', 'toolbar-move-item'));
//h += '<div class="toolbar-item toolbar-move-item link" id="toolbar-move-item" onclick="'+">Move All Picture(s) To...</div>';
if (i_canWrite)
pElement.add(h, pApplicationUI.createToolbarItem('delete-allpictures', i_getgal+'.deleteAllPictures()', 'toolbar-delete-allitems'));
//h += '<div class="toolbar-item toolbar-delete-allitems toolbar-delete-allpictures link" id="toolbar-delete-allitems" onclick="'+i_getgal+'.deleteAllPictures()">Delete All Picture(s)...</div>';
}
if (available) {
var tid = pMediaLibrary.getLIDfromURL().split('.')[0];
//if (pResources.get('library.list.('+tid+'.authors).enabled') != 'false')
// h += '<div class="toolbar-item toolbar-author link" onclick="pMediaLibrary.selectAuthors()">'+pResources.resources.toolbar.selectAuthors+'</div>';
//if (pResources.get('library.list.('+tid+'.genres).enabled') != 'false')
// h += '<div class="toolbar-item toolbar-genres link" onclick="pMediaLibrary.selectGenres()">'+pResources.resources.toolbar.selectGenres+'</div>';
if (pResources.get('library.list.('+tid+'.tags).enabled') != 'false')
pElement.add(h, pApplicationUI.createToolbarItem('select-tags', 'pMediaLibrary.selectTags()'));
//h += '<div class="toolbar-item toolbar-tags link" onclick="pMediaLibrary.selectTags()">'+pResources.resources.toolbar.selectTags+'</div>';
//if (tid=='pictures' && pResources.get('library.list.('+tid+'.models).enabled') != 'false')
// h += '<div class="toolbar-item toolbar-models link" onclick="pMediaLibrary.selectModels()">'+pResources.resources.toolbar.selectModels+'</div>';
}
pElement.add(h, pApplicationUI.createToolbarItem('set-access', 'pMediaLibrary.setAccess()'));
//h += '<div class="toolbar-item toolbar-set-access link" onclick="pMediaLibrary.setAccess()">'+pResources.resources.toolbar.access+'</div>';
pElement.add(h, pApplicationUI.createToolbarItem('file-properties', 'pResources.fileProperties()', 'toolbar-properties'));
//h += '<div class="toolbar-item toolbar-properties toolbar-properties-pictures-medias link" id="toolbar-properties" onclick="pResources.fileProperties()">'+pResources.resources.fileProperties_title+'</div>';
//0.9.18
if (available) {
pElement.add(h, pApplicationUI.createToolbarItem('reimport-parent-folder', 'pMediaLibrary.reImportParentFolder()'));
pElement.add(h, pApplicationUI.createToolbarItem('rename-parent-folder', 'pMediaLibrary.renameParentFolder()'));
}
pElement.add(h, pApplicationUI.createToolbarItem('remove', 'pMediaLibrary.removeThis()'));
//h += '<div class="toolbar-item toolbar-remove link" onclick="">'+pResources.resources.toolbar.remove+'</div>';
if (available) {
pElement.add(h, pApplicationUI.createToolbarItem('reimport', 'pMediaLibrary.reImport()'));
//h += '<div class="toolbar-item toolbar-reimport link" onclick="">'+pResources.resources.toolbar.reimport+'</div>';
pElement.add(h, pApplicationUI.createToolbarItem('optimize', 'pMediaLibrary.optimize()'));
//h += '<div class="toolbar-item toolbar-optimize link" onclick="">'+pResources.resources.toolbar.optimize+'</div>';
}
}
pElement.add(h, pApplicationUI.createToolbarItem('more', 'pApplicationMenu.menu(\'main-toolbar\')'));
//h += '<div class="toolbar-item toolbar-more link" onclick="">'+pResources.resources.toolbar.more+'</div>';
pElement.add(h, [[ 'div', null, 'toolbar-end' ]]);
//h += '<div class="toolbar-end"><!----></div>';
//pElement.setInnerHTML('main-toolbar', h);
pApplicationUI.initDragAndDrop();
};
// "show_propname" property
var m_show_propname;
Object.defineProperty(this, "show_propname", { get: function() { return m_show_propname || 'view-user-advanced-show-images' }, set: function(v) {
if (typeof v == "string")
m_show_propname = v;
}});
// "sortByDateTaken" property
var user_sortByDateTaken;
Object.defineProperty(this, "sortByDateTaken", { get: function() {
return user_sortByDateTaken? m_sortByDateTaken : pApplicationUI.OPTION_PICTURES_SORT_DATETAKEN
}, set: function(v) { user_sortByDateTaken = true; m_sortByDateTaken = v; }});
// "canExitFullscreen" property
var m_canExitFullscreen = true;
Object.defineProperty(this, "canExitFullscreen", { get: function() { m_canExitFullscreen; }, set: function(v) { if (typeof v == "boolean") m_canExitFullscreen = v; }});
// "reportPage" property
var m_reportPage = true;
Object.defineProperty(this, "reportPage", { get: function() { m_reportPage; }, set: function(v) { if (typeof v == "boolean") m_reportPage = v; }});
this.zoomin = function(event, p_img) {
p_img.style.maxHeight = "none";
p_img.style.maxWidth = "none";
var resize = 150; // resize amount in percentage
var origH = p_img.height; // original image height
var origW = p_img.width; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize / 100);
var newW = origW * (resize / 100);
// Set the new width and height
p_img.style.height = newH;// p_img.style.maxHeight = "none";
p_img.style.width = newW;// p_img.style.maxWidth = "none";
var c = this.parentNode;
if (c) {
// Work out the new center
c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
c.scrollTop = (mouseY * (resize / 100)) - (newH / 2) / 2;
}
};
this.zoomout = function(event, p_img) {
p_img.style.maxHeight = "none";
p_img.style.maxWidth = "none";
var resize = 150; // resize amount in percentage
var origH = p_img.height; // original image height
var origW = p_img.width; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (100 / resize);
var newW = origW * (100 / resize);
// Set the new width and height
p_img.style.height = newH;// p_img.style.maxHeight = "none";
p_img.style.width = newW;// p_img.style.maxWidth = "none";
var c = this.parentNode;
if (c) {
// Work out the new center
c.scrollLeft = (mouseX * (100 / resize)) - (newW / 2) / 2;
c.scrollTop = (mouseY * (100 / resize)) - (newH / 2) / 2;
}
};
//*** LISTEN FOR IMAGE EVENTS
window.addEventListener('storage', function(e) {
if (that.images && that.images.find(function(i) { return i.uri == e.key; }))
that.update();
});
//*** TOUCH GESTURES
if (pTouch) {
pTouch.enable('view-item-content');
var t = pTouch.getData('view-item-content');
t.onleft = function() { that.next(); return true; };
t.onright = function() { that.previous(); return true; };
}
//*** SAVE STATE
window.addEventListener('beforeunload', function() {
pDocument.setHistoryState('view-item', pObject.setMember(pDocument.getHistoryState('view-item'), 'n', pDocument.componentIsShown('view-item')? that.m_view : null));
});
//*** ON PAGE RESIZE...
pDocument.addOnResize(onResize);
//*** RESIZE
onResize();
};
/******************************************************************************/
/*** END OF FILE ************************************************************/
/******************************************************************************/