Skip to content

Commit

Permalink
Added pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrick477
Beata Czech authored and patrick477 committed Jan 10, 2021
1 parent 4124db1 commit 6da359e
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 64 deletions.
17 changes: 14 additions & 3 deletions src/Resources/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative!important;
}
.media {
width: 100px!important;
Expand All @@ -35,7 +36,17 @@
grid-template-columns: repeat(7, 1fr);
grid-gap: 20px;
}
.media__button {
padding: 5px!important;
border: 1px solid grey!important;
.mediaInput {
position: absolute!important;
bottom: 10px;
right: 10px;
}
.mediaInput:hover {
cursor: pointer;
}
.active {
font-weight: bold;
}
.btn {
display: inline-block!important;
}
182 changes: 121 additions & 61 deletions src/Resources/public/js/ckeditor-plugins/media/dialogs/media.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
let oldValue = null;
let currentPage = 1;
let phrase = '';
let current_page = 1;
let total_pages = null;
let limit = 5;

function insertHtml(data) {
var output = data.map(media =>
function insertHtml (data) {
const output = data.map(media =>
`<div class="media__item">
<label for="${media.code}">${media.name}</label>
<input image-path="${media.path}" class="mediaInput" type="radio" name="media" value="${media.code}">
Expand All @@ -12,52 +15,80 @@ function insertHtml(data) {
return output;
}

function ajaxCall(phrase) {
console.log("ajax call");
function refreshMedia () {
showMedia(phrase, current_page);
}

function numPages(totalResults){
return Math.ceil(totalResults/limit);
}

function prevPage(){
if (current_page > 1) {
current_page--;
changePage(current_page);
}
refreshMedia();

}

function nextPage(){
if (current_page < total_pages) {
current_page++;
changePage(current_page);
}
refreshMedia();
}

function changePage(page)
{
const btn_next = document.getElementById("btn_next");
const btn_prev = document.getElementById("btn_prev");
const pageNumber = document.getElementById("pageNumber");

if (page < 1) page = 1;
if (page > total_pages) page = total_pages;

pageNumber.innerHTML = page;

if (page == 1) {
btn_prev.style.visibility = "hidden";
}
else {
btn_prev.style.visibility = "visible";
}

var myObject = {
if (page == total_pages) {
btn_next.style.visibility = "hidden";
}
else {
btn_next.style.visibility = "visible";
}
}

function showMedia (phrase, pageNumber) {
const myObject = {
criteria: {
search: {
type: 'contains',
value: phrase
},
type: 'image',
},
page: currentPage,
limit: 20,
page: pageNumber,
limit: limit,
};
var shallowEncoded = $.param( myObject );
var shallowDecoded = decodeURIComponent( shallowEncoded );
const shallowEncoded = $.param( myObject );
const shallowDecoded = decodeURIComponent( shallowEncoded );

$.ajax({
type: 'GET',
url: route + '?' + shallowDecoded,
dataType: 'JSON',
success(data) {
var element = CKEDITOR.document.getById('grid');
if(data.length == 10){
var paginationContainer = CKEDITOR.document.getById('pagination');
if (paginationContainer) {
paginationContainer.setHtml(
`<button class="media__button">Next page..</button>`
);
}
}
else {
var paginationContainer = CKEDITOR.document.getById('pagination');
var pageNum = 1;
if (paginationContainer) {
paginationContainer.setHtml(
``
);

}
}
$('button').on('click', function () {
console.log("page has been changed");
currentPage++;
});

total_pages = numPages(data.total);
changePage(current_page);
const element = CKEDITOR.document.getById('grid');
if (element) {
element.setHtml(insertHtml(data._embedded.items));
}
Expand All @@ -70,14 +101,14 @@ function ajaxCall(phrase) {



CKEDITOR.dialog.add('mediaDialog', editor => ({
CKEDITOR.dialog.add ('mediaDialog', editor => ({
title: 'Insert products',
minWidth: 200,
minHeight: 200,
resizable: CKEDITOR.DIALOG_RESIZE_NONE,
onShow(api) {
let phrase = '';
ajaxCall(phrase);
phrase = '';
showMedia(phrase, current_page);
},

contents: [
Expand All @@ -88,55 +119,84 @@ CKEDITOR.dialog.add('mediaDialog', editor => ({
type: 'text',
id: 'phrase',
label: 'Search by phrase',
inputStyle: 'text-align: center',
controlStyle: 'width: 3em',
inputStyle: 'text-align: left',
controlStyle: 'width: 100%',
onKeyUp: function() {
var phrase = this.getValue();
phrase = this.getValue();
if(oldValue === phrase){
return;
}
oldValue = this.getValue();
ajaxCall(phrase);
changePage(current_page);
showMedia(phrase, current_page);
}
},
{
type: 'text',
id: 'imageWidth',
label: 'ImageWidth',
inputStyle: 'text-align: center',
controlStyle: 'width: 3em'
},
{
type: 'text',
id: 'imageHeight',
default: '200',
label: 'ImageHeight',
inputStyle: 'text-align: center',
controlStyle: 'width: 3em'
type: 'hbox',
widths: [ '25%', '25%' ],
style: 'width: 10em',
align: 'left',
children: [
{
type: 'text',
id: 'imageWidth',
label: 'Image width',
inputStyle: 'text-align: center',
controlStyle: 'width: 4em',
inputStyle: 'width: 4em',
},
{
type: 'text',
id: 'imageHeight',
default: '200',
label: 'Image height',
inputStyle: 'text-align: center',
controlStyle: 'width: 4em'
},
]
},

{
type: 'html',
id: 'mediaGrid',
html: '<form class="mediaGrid" id="grid"></form>',
},
{
type: 'html',
id: 'pagination',
html: '<div class="pagination" id="pagination"></div>',
type: 'hbox',
widths: [ '25%', '25%', '25%' ],
style: 'width: 10em',
align: 'left',
children: [
{
type: 'html',
id: 'btn_prev',
html: '<button class="btn btn_prev" id="btn_prev" onclick="prevPage()">Previous</button>',
},
{
type: 'html',
id: 'pageNumber',
html: '<span class="pageNumber" id="pageNumber"></span>',
},
{
type: 'html',
id: 'btn_next',
html: '<button class="btn btn_next" id="btn_next" onclick="nextPage()">Next</button>',
},
]
},



]
},
],
onOk() {
const dialog = this;
const document = CKEDITOR.document;
const element = document.find( '.mediaInput:checked');
const imgPath = element.getItem(0).getAttribute( 'image-path' );
const imagePath = element.getItem(0).getAttribute( 'image-path' );
const imageWidth = dialog.getContentElement('mediaContent','imageWidth').getValue();
const imageHeight = dialog.getContentElement('mediaContent','imageHeight').getValue();

editor.insertHtml(`<img src="${imgPath}" alt="media-img" style="height:${imageWidth}px; width:${imageHeight}px"/>`);

editor.insertHtml(`<img src="${imagePath}" alt="media-img" style="height:${imageWidth}px; width:${imageHeight}px"/>`);
},
}));

0 comments on commit 6da359e

Please sign in to comment.