diff --git a/src/css/component.css b/src/css/component.css
index 23175bf..6efeb02 100644
--- a/src/css/component.css
+++ b/src/css/component.css
@@ -692,4 +692,20 @@ button img{
.ui_toggle_button[aria-pressed="true"]:before {
background-color: var(--button-text-color-active);
background-image: url('data:image/svg+xml;utf8,');
-}
\ No newline at end of file
+}
+
+/* media */
+
+.media-paging{
+ width: 100%;
+ margin: 10px 0;
+ text-align: center;
+}
+.media-paging button{
+ background-color: var(--button-background-color);
+ color: var(--text-color);
+}
+.media-paging button.selected{
+ background-color: var(--background-color-active);
+ color: var(--text-color-active);
+}
diff --git a/src/js/tools/media.js b/src/js/tools/media.js
index b5bb58a..2d7c1f9 100644
--- a/src/js/tools/media.js
+++ b/src/js/tools/media.js
@@ -14,6 +14,8 @@ class Media_class extends Base_tools_class {
this.POP = new Dialog_class();
this.name = 'media';
this.cache = [];
+ this.page = 1;
+ this.per_page = 50;
}
load() {
@@ -33,10 +35,12 @@ class Media_class extends Base_tools_class {
*
* @param {string} query
* @param {array} data
+ * @param pages
*/
- search(query = '', data = []) {
+ search(query = '', data = [], pages = null) {
var _this = this;
var html = '';
+ var html_paging = '';
var key = config.pixabay_key;
key = key.split("").reverse().join("");
@@ -54,6 +58,22 @@ class Media_class extends Base_tools_class {
html += '
';
html += '';
html += '';
+
+ //paging
+ html_paging += '';
+ html_paging += ' ';
+ for(var i = 1; i <= Math.min(10, pages); i++) {
+ var selected = '';
+ if(this.page == i){
+ var selected = 'selected';
+ }
+ html_paging += ' ';
+ }
+ html_paging += ' ';
+ html_paging += '
';
+ }
+ else{
+ this.page = 1;
}
var settings = {
@@ -67,7 +87,7 @@ class Media_class extends Base_tools_class {
on_load: function (params, popup) {
var node = document.createElement("div");
node.classList.add('flex-container');
- node.innerHTML = html;
+ node.innerHTML = html + html_paging;
popup.el.querySelector('.dialog_content').appendChild(node);
//events
var targets = popup.el.querySelectorAll('.item img');
@@ -81,6 +101,14 @@ class Media_class extends Base_tools_class {
_this.POP.hide();
});
}
+ var targets = popup.el.querySelectorAll('#media_paging button');
+ for (var i = 0; i < targets.length; i++) {
+ targets[i].addEventListener('click', function (event) {
+ //we have click
+ _this.page = parseInt(this.dataset.value);
+ _this.POP.save();
+ });
+ }
},
on_finish: function (params) {
_this.Tools_settings.save_setting('safe_search', params.safe_search);
@@ -88,31 +116,38 @@ class Media_class extends Base_tools_class {
if (params.query == '')
return;
- if (_this.cache[params.query] != undefined) {
+ var URL = "https://pixabay.com/api/?key=" + key
+ + "&page=" + _this.page
+ + "&per_page=" + _this.per_page
+ + "&safesearch=" + params.safe_search
+ + "&q=" + encodeURIComponent(params.query);
+
+ if (_this.cache[URL] != undefined) {
//using cache
setTimeout(function () {
//only call same function after all handlers finishes
- var data = _this.cache[params.query];
- if (parseInt(data.totalHits) == 0) {
- alertify.error('Your search did not match any images.');
- }
- _this.search(params.query, data.hits);
- }, 100);
- }
- else {
- //query to service
- var URL = "https://pixabay.com/api/?key=" + key
- + "&per_page=50"
- + "&safesearch=" + params.safe_search
- + "&q=" + encodeURIComponent(params.query);
- $.getJSON(URL, function (data) {
- _this.cache[params.query] = data;
+ var data = _this.cache[URL];
if (parseInt(data.totalHits) == 0) {
alertify.error('Your search did not match any images.');
}
- _this.search(params.query, data.hits);
+
+ var pages = Math.ceil(data.totalHits / _this.per_page);
+ _this.search(params.query, data.hits, pages);
+ }, 100);
+ }
+ else {
+ //query to service
+ $.getJSON(URL, function (data) {
+ _this.cache[URL] = data;
+
+ if (parseInt(data.totalHits) == 0) {
+ alertify.error('Your search did not match any images.');
+ }
+
+ var pages = Math.ceil(data.totalHits / _this.per_page);
+ _this.search(params.query, data.hits, pages);
})
.fail(function () {
alertify.error('Error connecting to service.');