[pixabay] Fix some problems with plugin.

This commit is contained in:
Alexey Matveev
2024-03-01 15:58:44 +03:00
parent da113cbcbc
commit 7d4880e00b
9 changed files with 107 additions and 150 deletions

View File

@ -8,7 +8,7 @@
"description": "Pixabay",
"url": "index.html",
"icons": [ "resources/light/icon.png", "resources/light/icon@2x.png" ],
"icons": "resources/%theme-type%(dark|light)/%scale%(default).%extension%(png)",
"icons2": [
{
"style" : "light",

View File

@ -199,7 +199,11 @@
<div id="main-search-container-id" style="display:none;">
<input type="text" id="search-phrase" class="form-control i18n" placeholder="Enter search phrase" data-id="search-phrase-id" style="width: calc(100% - 24px); margin: 16px 12px 0 12px; text-align: left;">
<button id="button-search-id" class="btn-text-default i18n">Search</button>
<div id="hide_show_reconf"><label class="hidden i18n">Hide advanced settings</label><label class="opened i18n">Show advanced settings</label><label id="reconf" class="i18n">Reconfigure API key</label></div>
<div id="hide_show_reconf">
<label class="hidden i18n">Hide settings</label>
<label class="opened i18n">Show settings</label>
<label id="reconf" class="i18n">API key</label>
</div>
<div id="first-separator" class="separator horizontal" style="width: calc(100% - 24px); margin: 16px 0 16px 12px; display:none;"></div>
<div id="settings" style="position: relative; height: 88%; display:none;">
<div id="locale-container" style="margin: 0 12px 16px 12px;">
@ -293,7 +297,7 @@
</div>
</div>
<div id="scrollable-container-id" style="position: relative; height: calc(100% - 100px); overflow: hidden; min-height: 200px;">
<div id="preview-images-container-id" style="display: block; position: absolute;">
<div id="preview-images-container-id" style="display: flex; position: absolute; flex-flow: wrap; align-items: center; justify-content: center;">
</div>
</div>
<div id="pagination-container-id" style="display: table; width: 100%; text-align: center; ">

View File

@ -16,11 +16,11 @@
*
*/
var Ps1, Ps2;
let Ps1, Ps2;
(function(window, undefined) {
(function(window) {
var displayNoneClass = "display-none";
const displayNoneClass = "display-none";
function showLoader(show) {
switchClass(elements.loader, displayNoneClass, !show);
@ -35,33 +35,33 @@ var Ps1, Ps2;
};
function SetSavedSettings() {
var allInputs = $('.rule-checkbox');
const allInputs = $('.rule-checkbox');
var saved_apikey = localStorage.getItem($(elements.api_input).attr('data-id'));
const saved_apikey = localStorage.getItem($(elements.api_input).attr('data-id'));
if (saved_apikey && saved_apikey !== '') {
elements.api_input.value = saved_apikey;
$('#save').trigger('click');
}
var savedQuery = localStorage.getItem($(elements.search_phrase).attr('data-id'));
const savedQuery = localStorage.getItem($(elements.search_phrase).attr('data-id'));
if (savedQuery) {
sLastQuery = savedQuery;
elements.search_phrase.value = sLastQuery;
}
var locale_saved = localStorage.getItem('pixabay-locale');
const locale_saved = localStorage.getItem('pixabay-locale');
if (locale_saved !== null) {
$('#pixabay-locale').val(locale_saved);
$('#pixabay-locale').trigger('change');
}
var category_saved = localStorage.getItem('pixabay-category');
if (category_saved !== null) {
if (localStorage.getItem('pixabay-category') !== null) {
$('#pixabay-category').val(category_saved);
$('#pixabay-category').trigger('change');
}
$(allInputs).each(function() {
var savedValue = localStorage.getItem($(this).attr("data-id"));
const savedValue = localStorage.getItem($(this).attr("data-id"));
if (savedValue !== null)
if (savedValue === true.toString())
$(this).prop("checked", true);
@ -78,16 +78,15 @@ var Ps1, Ps2;
return false;
};
var widthPix = 185;
var sLastQuery = 'flower';
var sEmptyQuery = 'summer';
var elements = {};
var nLastPage = 1, nLastPageCount = 1;
var nImageWidth = 200;
var nVertGap = 5;
let sLastQuery = 'flower',
sEmptyQuery = 'summer',
elements = {},
nLastPage = 1,
nLastPageCount = 1;
const nImageWidth = 200;
function createScript(oElement, w, h) {
var sScript = '';
let sScript = '';
if (oElement) {
switch (window.Asc.plugin.info.editorType) {
@ -96,10 +95,9 @@ var Ps1, Ps2;
sScript += '\nvar oParagraph, oRun, arrInsertResult = [], oImage;';
sScript += '\noParagraph = Api.CreateParagraph();';
sScript += '\narrInsertResult.push(oParagraph);';
var sSrc = oElement.Src;
var nEmuWidth = ((w / 96) * 914400) >> 0;
var nEmuHeight = ((h / 96) * 914400) >> 0;
sScript += '\n oImage = Api.CreateImage(\'' + sSrc + '\', ' + nEmuWidth + ', ' + nEmuHeight + ');';
const nEmuWidth = ( ( w / 96 ) * 914400 ) >> 0;
const nEmuHeight = ( ( h / 96 ) * 914400 ) >> 0;
sScript += '\n oImage = Api.CreateImage(\'' + oElement.Src + '\', ' + nEmuWidth + ', ' + nEmuHeight + ');';
sScript += '\noParagraph.AddDrawing(oImage);';
sScript += '\noDocument.InsertContent(arrInsertResult);';
break;
@ -109,10 +107,9 @@ var Ps1, Ps2;
sScript += '\nvar oSlide = oPresentation.GetCurrentSlide()';
sScript += '\nif (oSlide) {';
sScript += '\nvar fSlideWidth = oSlide.GetWidth(), fSlideHeight = oSlide.GetHeight();';
var sSrc = oElement.Src;
var nEmuWidth = ((w / 96) * 914400) >> 0;
var nEmuHeight = ((h / 96) * 914400) >> 0;
sScript += '\n var oImage = Api.CreateImage(\'' + sSrc + '\', ' + nEmuWidth + ', ' + nEmuHeight + ');';
const nEmuWidth = ( ( w / 96 ) * 914400 ) >> 0;
const nEmuHeight = ( ( h / 96 ) * 914400 ) >> 0;
sScript += '\n var oImage = Api.CreateImage(\'' + oElement.Src + '\', ' + nEmuWidth + ', ' + nEmuHeight + ');';
sScript += '\n oImage.SetPosition((fSlideWidth -' + nEmuWidth + ')/2, (fSlideHeight -' + nEmuHeight + ')/2);';
sScript += '\n oSlide.AddObject(oImage);';
sScript += '\n}'
@ -123,10 +120,9 @@ var Ps1, Ps2;
sScript += '\nif (oWorksheet) {';
sScript += '\nvar oActiveCell = oWorksheet.GetActiveCell();';
sScript += '\nvar nCol = oActiveCell.GetCol(), nRow = oActiveCell.GetRow();';
var sSrc = oElement.Src;
var nEmuWidth = ((w / 96) * 914400) >> 0;
var nEmuHeight = ((h / 96) * 914400) >> 0;
sScript += '\n oWorksheet.AddImage(\'' + sSrc + '\', ' + nEmuWidth + ', ' + nEmuHeight + ', nCol, 0, nRow, 0);';
const nEmuWidth = ( ( w / 96 ) * 914400 ) >> 0;
const nEmuHeight = ( ( h / 96 ) * 914400 ) >> 0;
sScript += '\n oWorksheet.AddImage(\'' + oElement.Src + '\', ' + nEmuWidth + ', ' + nEmuHeight + ', nCol, 0, nRow, 0);';
sScript += '\n}';
break;
}
@ -135,35 +131,18 @@ var Ps1, Ps2;
return sScript;
};
function updatePaddings() {
var oContainer = $('#preview-images-container-id');
var nFullWidth = $('#scrollable-container-id').width() - 24;
var nCount = (nFullWidth/(nImageWidth + 2*nVertGap) + 0.01) >> 0;
if (nCount < 1)
nCount = 1;
var nGap = (((nFullWidth - nCount*nImageWidth)/(nCount))/2) >> 0;
var aChildNodes = oContainer[0].childNodes;
for (var i = 0; i < aChildNodes.length; ++i) {
var oDivElement = aChildNodes[i];
$(oDivElement).css('margin-left', nGap + 'px');
$(oDivElement).css('margin-right', nGap + 'px');
}
};
function updateNavigation() {
if (arguments.length == 2) {
nLastPage = arguments[0];
nLastPageCount = arguments[1];
}
if (nLastPage <= nLastPageCount)
var nUsePage = nLastPage - 1;
var oPagesCell = $('#pages-cell-id');
// if (nLastPage <= nLastPageCount)
let nUsePage = nLastPage - 1;
let oPagesCell = $('#pages-cell-id');
oPagesCell.empty();
var nW = $('#pagination-table-container-id').width() - $('#pagination-table-id').width();
var nMaxCountPages = (nW/22)>>0;
let nW = $('#pagination-table-container-id').width() - $('#pagination-table-id').width();
let nMaxCountPages = ( nW / 22 ) >> 0;
if (nLastPageCount === 0) {
$('#pagination-table-id').hide();
@ -171,7 +150,9 @@ var Ps1, Ps2;
} else {
$('#pagination-table-id').show();
}
var nStart, nEnd;
let nStart, nEnd;
if (nLastPageCount <= nMaxCountPages) {
nStart = 0;
nEnd = nLastPageCount;
@ -185,8 +166,8 @@ var Ps1, Ps2;
nStart = nUsePage - ((nMaxCountPages/2)>>0);
nEnd = nUsePage + ((nMaxCountPages/2)>>0);
}
for (var i = nStart; i< nEnd; ++i) {
var oButtonElement = $('<div class="pagination-button-div noselect" style="width:22px; height:22px;"><p>' + (i + 1) +'</p></div>');
for (let i = nStart; i< nEnd; ++i) {
let oButtonElement = $('<div class="pagination-button-div noselect" style="width:22px; height:22px;"><p>' + (i + 1) +'</p></div>');
oPagesCell.append(oButtonElement);
oButtonElement.attr('data-index', i + '');
if (i === nUsePage)
@ -200,77 +181,65 @@ var Ps1, Ps2;
};
function fillTableFromResponse(imgsInfo) {
var oContainer = $('#preview-images-container-id');
let oContainer = $('#preview-images-container-id');
oContainer.empty();
//calculate count images in string
var nFullWidth = $('#scrollable-container-id').width() - 24;
var nCount = ( nFullWidth / ( nImageWidth + 2 * nVertGap ) + 0.01 ) >> 0;
if (nCount < 1)
nCount = 1;
var nGap = ( ( ( nFullWidth - nCount * nImageWidth ) / ( nCount ) ) / 2 ) >> 0;
for (var i = 0; i < imgsInfo.length; ++i) {
var oDivElement = $('<div></div>');
oDivElement.css('display', 'inline-block');
for (let i = 0; i < imgsInfo.length; ++i) {
let oDivElement = $('<div></div>', {
class: 'noselect'
});
oDivElement.css('display', 'flex');
oDivElement.css('width', nImageWidth + 'px');
oDivElement.css('height', nImageWidth + 'px');
oDivElement.css('vertical-align','middle');
$(oDivElement).addClass('noselect');
oDivElement.css('margin-left', nGap + 'px');
oDivElement.css('margin-right', nGap + 'px');
oDivElement.css('margin-bottom', (nVertGap/2) + 'px');
oDivElement.css('justify-content','center');
oDivElement.css('align-items','center');
oDivElement.css('margin', '0px 10px 10px 10px');
oDivElement.css('border', '1px solid');
var oImageTh = {
let oImageTh = {
width : imgsInfo[i]["Width"],
height : imgsInfo[i]["Height"]
};
var nMaxSize = Math.max(oImageTh.width, oImageTh.height);
var fCoeff = nImageWidth / nMaxSize;
var oImgElement = $('<img>');
var nWidth = (oImageTh.width * fCoeff) >> 0;
var nHeight = (oImageTh.height * fCoeff) >> 0;
let nMaxSize = Math.max(oImageTh.width, oImageTh.height);
let fCoeff = nImageWidth / nMaxSize;
let oImgElement = $('<img>');
let nWidth = (oImageTh.width * fCoeff) >> 0;
let nHeight = (oImageTh.height * fCoeff) >> 0;
if (nWidth === 0 || nHeight === 0) {
oImgElement.on('load', function(event) {
var nMaxSize = Math.max(this.naturalWidth, this.naturalHeight);
var fCoeff = nImageWidth / nMaxSize;
var nWidth = (this.naturalWidth * fCoeff) >> 0;
var nHeight = (this.naturalHeight * fCoeff) >> 0;
$(this).css('width', nWidth + 'px');
$(this).css('height', nHeight + 'px');
$(this).css('margin-left', (((nImageWidth - nWidth)/2) >> 0) + 'px');
//$(this).css('margin-top', (((nImageWidth - nHeight)/2) >> 0) + 'px');
let nMaxSize = Math.max(this.naturalWidth, this.naturalHeight);
let fCoeff = nImageWidth / nMaxSize;
let nWidth = (this.naturalWidth * fCoeff) >> 0;
let nHeight = (this.naturalHeight * fCoeff) >> 0;
$(this).css('width', nWidth + 'px');
$(this).css('height', nHeight + 'px');
$(this).css('margin-left', (((nImageWidth - nWidth)/2) >> 0) + 'px');
});
}
oImgElement.css('width', nWidth + 'px');
oImgElement.css('height', nHeight + 'px');
oImgElement.css('margin-left', ( ( ( nImageWidth - nWidth ) / 2 ) >> 0) + 'px');
//oImgElement.css('margin-top', (((nImageWidth - nHeight)/2) >> 0) + 'px');
oImgElement.attr('src', imgsInfo[i].Src);
oImgElement.attr('data-index', i + '');
oImgElement.on('dragstart', function(event) { event.preventDefault(); });
oImgElement.mouseenter(function(e) {
$(this).css('opacity', '0.65');
});
oImgElement.mouseleave(function(e) {
$(this).css('opacity', '1');
});
function addImg(img) {
window.Asc.plugin.info.recalculate = true;
var oElement = imgsInfo[parseInt(img.dataset.index)];
window.Asc.plugin.executeCommand("command", createScript(oElement, img.naturalWidth, img.naturalHeight), function() {
img.style.pointerEvents = "auto";
});
};
oImgElement.click(function(e) {
this.style.pointerEvents = "none";
addImg(this);
});
oImgElement.on('dragstart', function(event) { event.preventDefault(); });
function addImg(img) {
window.Asc.plugin.info.recalculate = true;
let oElement = imgsInfo[parseInt(img.dataset.index)];
window.Asc.plugin.executeCommand("command", createScript(oElement, img.naturalWidth, img.naturalHeight), function() {
img.style.pointerEvents = "auto";
});
};
oDivElement.append(oImgElement);
oContainer.append(oDivElement);
@ -306,7 +275,6 @@ var Ps1, Ps2;
Ps2 = new PerfectScrollbar('#main-container-id', {});
$(window).resize(function() {
updatePaddings();
updateScroll();
updateNavigation();
});
@ -370,7 +338,7 @@ var Ps1, Ps2;
});
$('#save').on('click', function() {
var apikey = elements.api_input.value.trim();
const apikey = elements.api_input.value.trim();
if (apikey !== '') {
loadClipArtPage(1, sLastQuery);
} else {
@ -428,7 +396,7 @@ var Ps1, Ps2;
function loadClipArtPage(nIndex, sQuery) {
showLoader(true);
var sRequest = CreateRequest(nIndex, sQuery);
const sRequest = CreateRequest(nIndex, sQuery);
$.ajax({
method: 'GET',
url: 'https://pixabay.com/api/?' + sRequest,
@ -450,15 +418,15 @@ var Ps1, Ps2;
container = document.getElementById('scrollable-container-id');
container.scrollTop = 0;
updateScroll();
updateNavigation(nIndex, Math.ceil(oResponse.totalHits / 20) + 1);
updateNavigation( nIndex, Math.ceil(oResponse.totalHits / 20) );
var imgCount = oResponse.hits.length;
var imgsInfo = [];
let imgCount = oResponse.hits.length;
let imgsInfo = [];
function loadImgs(sUrl) {
var img = new Image();
let img = new Image();
img.onload = function() {
var imgInfo = {
let imgInfo = {
"Width": this.width,
"Height": this.height,
"Src": this.src,
@ -490,7 +458,7 @@ var Ps1, Ps2;
updateScroll();
return;
}
for (var nUrl = 0; nUrl < oResponse.hits.length; nUrl++) {
for (let nUrl = 0; nUrl < oResponse.hits.length; nUrl++) {
//loadImgs(oResponse.items[nUrl].pngurl[oResponse.items[0].pngurl.length - 1]);
loadImgs(oResponse.hits[nUrl].largeImageURL);
}
@ -518,19 +486,19 @@ var Ps1, Ps2;
"class": "error_color",
text: window.Asc.plugin.tr("Invalid API key!")
}).appendTo('#preview-images-container-id');
updateScroll();
}
});
};
function CreateRequest(nPageIndex, sQuery) {
var sRequest = 'key=';
var apikey = elements.api_input.value.trim();
var lang = elements.locale.value;
var category = elements.category.value;
var search_phrase = elements.search_phrase.value.replace(/ /gi, "+") || sQuery.replace(/ /gi, "+");
var image_types = [];
let sRequest = 'key=';
let apikey = elements.api_input.value.trim();
let lang = elements.locale.value;
let category = elements.category.value;
let search_phrase = elements.search_phrase.value.replace(/ /gi, "+") || sQuery.replace(/ /gi, "+");
let image_types = [];
if (elements.img_type_all.checked) {
image_types.push('all');
} else {
@ -544,7 +512,7 @@ var Ps1, Ps2;
image_types.push('vector');
}
var orientations = [];
let orientations = [];
if (elements.orient_vert.checked)
orientations.push('vertical');
@ -553,18 +521,16 @@ var Ps1, Ps2;
sRequest += apikey + '&lang=' + lang + '&q=' + search_phrase + '&category=' + category + '&page=' + nPageIndex;
for (var nImgType = 0; nImgType < image_types.length; nImgType++)
for (let nImgType = 0; nImgType < image_types.length; nImgType++)
sRequest += '&image_type=' + image_types[nImgType];
for (var nOrientType = 0; nOrientType < orientations.length; nOrientType++)
for (let nOrientType = 0; nOrientType < orientations.length; nOrientType++)
sRequest += '&orientation=' + orientations[nOrientType];
return sRequest;
};
window.Asc.plugin.button = function(id) {
window.Asc.plugin.button = function() {
this.executeCommand("close", '');
};
@ -572,9 +538,9 @@ var Ps1, Ps2;
sLastQuery = window.Asc.plugin.tr(sLastQuery);
sEmptyQuery = window.Asc.plugin.tr(sEmptyQuery);
var elements = document.getElementsByClassName("i18n");
for (var i = 0; i < elements.length; i++) {
var el = elements[i];
let elementsTr = document.getElementsByClassName("i18n");
for (let i = 0; i < elementsTr.length; i++) {
let el = elementsTr[i];
if (el.attributes["placeholder"]) el.attributes["placeholder"].value = window.Asc.plugin.tr(el.attributes["placeholder"].value);
if (el.innerText) el.innerText = window.Asc.plugin.tr(el.innerText);
}
@ -585,12 +551,4 @@ var Ps1, Ps2;
});
};
window.Asc.plugin.onExternalMouseUp = function() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseup", true, true, window, 1, 0, 0, 0, 0,
false, false, false, false, 0, null);
document.dispatchEvent(evt);
};
})(window);

View File

@ -3,9 +3,8 @@
"Save" : "Uložit",
"Enter search phrase" : "Zadejte hledanou frázi",
"Language" : "Jazyk",
"Hide advanced settings" : "Skrýt pokročilá nastavení",
"Show advanced settings" : "Zobrazit pokročilá nastavení",
"Reconfigure API key" : "Překonfigurujte klíč API",
"Hide settings" : "Skrýt nastavení",
"Show settings" : "Zobrazit nastavení",
"Image type" : "Typ obrázku",
"All" : "Všechen",
"Photo" : "Fotografia",

View File

@ -3,9 +3,8 @@
"Save" : "Speichern",
"Enter search phrase" : "Suchbegriff eingeben",
"Language" : "Sprache",
"Hide advanced settings" : "Erweiterte Einstellungen ausblenden",
"Show advanced settings" : "Erweiterte Einstellungen anzeigen",
"Reconfigure API key" : "API-Schlüssel neu konfigurieren",
"Hide settings" : "Einstellungen ausblenden",
"Show settings" : "Einstellungen anzeigen",
"Image type" : "Bildtyp",
"All" : "Alle",
"Photo" : "Foto",

View File

@ -3,9 +3,8 @@
"Save" : "Guardar",
"Ingrese la frase de búsqueda" : "Ingrese la frase de búsqueda",
"Language" : "Idioma",
"Hide advanced settings" : "Ocultar configuración avanzada",
"Show advanced settings" : "Mostrar configuración avanzada",
"Reconfigure API key" : "Reconfigurar la clave API",
"Hide settings" : "Ocultar configuración",
"Show settings" : "Mostrar configuración",
"Image type" : "Tipo de imagen",
"All" : "Todos",
"Photo" : "Foto",

View File

@ -3,9 +3,8 @@
"Save" : "Sauvegarder",
"Enter search phrase" : "Chercher",
"Language" : "Langue",
"Hide advanced settings" : "Masquer les paramètres avancés",
"Show advanced settings" : "Afficher les paramètres avancés",
"Reconfigure API key" : "Reconfigurer la clé API",
"Hide settings" : "Masquer les paramètres",
"Show settings" : "Afficher les paramètres",
"Image type" : "Type d'image",
"All" : "Tous",
"Photo" : "Photos",

View File

@ -3,9 +3,8 @@
"Save" : "Сохранить",
"Enter search phrase" : "Поиск",
"Language" : "Язык",
"Hide advanced settings" : "Скрыть дополнительные настройки",
"Show advanced settings" : "Показать дополнительные настройки",
"Reconfigure API key" : "Поменять API ключ",
"Hide settings" : "Скрыть настройки",
"Show settings" : "Показать настройки",
"Image type" : "Тип изображения",
"All" : "Все",
"Photo" : "Фото",