pagination on media search

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,<svg width="0.7em" height="1em" viewBox="0 0 16 16" class="bi bi-check2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
-}
+}
+
+/* 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);
+}

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 += '<div class="item"></div>';
 			html += '<div class="item"></div>';
 			html += '<div class="item"></div>';
+
+			//paging
+			html_paging += '<div class="media-paging" id="media_paging">';
+			html_paging += '<button type="button" data-value="1">&lt;</button> ';
+			for(var i = 1; i <= Math.min(10, pages); i++) {
+				var selected = '';
+				if(this.page == i){
+					var selected = 'selected';
+				}
+				html_paging += '<button type="button" class="'+selected+'" data-value="'+i+'">'+i+'</button> ';
+			}
+			html_paging += '<button type="button" data-value="'+Math.min(this.page + 1, pages)+'">&gt;</button> ';
+			html_paging += '</div>';
+		}
+		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.');