Skip to content

Commit b0b3f9d

Browse files
Beata Czechpatrick477
Beata Czech
authored and
patrick477
committed
Fixed classes, added name and code display
1 parent 6da359e commit b0b3f9d

File tree

3 files changed

+102
-62
lines changed

3 files changed

+102
-62
lines changed

‎src/Resources/public/css/style.css‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,60 @@
1919
width: auto;
2020
}
2121

22-
.media__item {
22+
.media-list {
23+
display: grid;
24+
grid-template-columns: repeat(6, 100px);
25+
grid-gap: 20px;
26+
}
27+
28+
.media-list__item {
2329
max-width: 150px;
2430
display: flex;
2531
flex-direction: column;
2632
align-items: flex-start;
27-
justify-content: flex-start;
33+
justify-content: space-between;
2834
position: relative!important;
2935
}
30-
.media {
31-
width: 100px!important;
32-
height:100px!important;
36+
37+
.media-list__item__label, .media-list__item__label > strong {
38+
white-space: -moz-pre-wrap !important;
39+
white-space: -webkit-pre-wrap!important;
40+
white-space: -pre-wrap!important;
41+
white-space: -o-pre-wrap!important;
42+
white-space: pre-wrap!important;
43+
word-wrap: break-word!important;
44+
word-break: break-all!important;
45+
white-space: normal!important;
3346
}
34-
.mediaGrid {
35-
display: grid;
36-
grid-template-columns: repeat(7, 1fr);
37-
grid-gap: 20px;
47+
48+
.media-list__item__label > strong {
49+
display: block!important;
3850
}
39-
.mediaInput {
51+
52+
.media-list__item__input {
4053
position: absolute!important;
4154
bottom: 10px;
4255
right: 10px;
4356
}
44-
.mediaInput:hover {
57+
58+
.media-list__item__input:hover {
4559
cursor: pointer;
4660
}
47-
.active {
48-
font-weight: bold;
61+
62+
.media-list__item__img {
63+
width: 100px!important;
64+
height:100px!important;
4965
}
66+
5067
.btn {
5168
display: inline-block!important;
69+
font-size: 1.4em!important;
70+
}
71+
72+
.btn:hover {
73+
cursor: pointer;
74+
}
75+
76+
.page-number {
77+
font-size: 1.4em!important;
5278
}

‎src/Resources/public/js/ckeditor-plugins/media/dialogs/media.js‎

Lines changed: 62 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,82 @@
11
let oldValue = null;
22
let phrase = '';
3-
let current_page = 1;
4-
let total_pages = null;
5-
let limit = 5;
3+
let currentPage = 1;
4+
let totalPages = null;
5+
let limit = 12;
6+
let mediaCodeLength = 20;
7+
8+
function trimValue(item) {
9+
return item.length > mediaCodeLength ?
10+
item.substring(0, mediaCodeLength) + '...' :
11+
item;
12+
}
13+
14+
function htmlToString(item) {
15+
return String(item).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
16+
};
17+
18+
function checkName(item) {
19+
if (item) return item;
20+
else return 'Empty name';
21+
};
622

723
function insertHtml (data) {
824
const output = data.map(media =>
9-
`<div class="media__item">
10-
<label for="${media.code}">${media.name}</label>
11-
<input image-path="${media.path}" class="mediaInput" type="radio" name="media" value="${media.code}">
12-
<img class="media" src=" ${media.path} "/>
25+
`<div class="media-list__item">
26+
<label for="${media.code}" class="media-list__item__label"><strong>${htmlToString(checkName(media.name))}</strong></strong> (${trimValue(media.code)})</label>
27+
<input image-path="${media.path}" class="media-list__item__input" type="radio" name="media" value="${media.code}">
28+
<img class="media-list__item__img" src="${media.path}"/>
1329
</div>`
1430
).join('');
1531
return output;
1632
}
1733

1834
function refreshMedia () {
19-
showMedia(phrase, current_page);
35+
showMedia(phrase, currentPage);
2036
}
2137

2238
function numPages(totalResults){
2339
return Math.ceil(totalResults/limit);
2440
}
2541

2642
function prevPage(){
27-
if (current_page > 1) {
28-
current_page--;
29-
changePage(current_page);
43+
if (currentPage > 1) {
44+
currentPage--;
45+
changePage(currentPage);
3046
}
3147
refreshMedia();
3248

3349
}
3450

3551
function nextPage(){
36-
if (current_page < total_pages) {
37-
current_page++;
38-
changePage(current_page);
52+
if (currentPage < totalPages) {
53+
currentPage++;
54+
changePage(currentPage);
3955
}
4056
refreshMedia();
4157
}
4258

4359
function changePage(page)
4460
{
45-
const btn_next = document.getElementById("btn_next");
46-
const btn_prev = document.getElementById("btn_prev");
47-
const pageNumber = document.getElementById("pageNumber");
61+
const btn_next = document.getElementById("btn-next");
62+
const btn_prev = document.getElementById("btn-prev");
63+
const pageNumber = document.getElementById("page-number");
4864

4965
if (page < 1) page = 1;
50-
if (page > total_pages) page = total_pages;
66+
if (page > totalPages) page = totalPages;
5167

5268
pageNumber.innerHTML = page;
5369

5470
if (page == 1) {
5571
btn_prev.style.visibility = "hidden";
56-
}
72+
}
5773
else {
5874
btn_prev.style.visibility = "visible";
5975
}
6076

61-
if (page == total_pages) {
77+
if (page == totalPages) {
6278
btn_next.style.visibility = "hidden";
63-
}
79+
}
6480
else {
6581
btn_next.style.visibility = "visible";
6682
}
@@ -86,9 +102,9 @@ function showMedia (phrase, pageNumber) {
86102
url: route + '?' + shallowDecoded,
87103
dataType: 'JSON',
88104
success(data) {
89-
total_pages = numPages(data.total);
90-
changePage(current_page);
91-
const element = CKEDITOR.document.getById('grid');
105+
totalPages = numPages(data.total);
106+
changePage(currentPage);
107+
const element = CKEDITOR.document.getById('media-list');
92108
if (element) {
93109
element.setHtml(insertHtml(data._embedded.items));
94110
}
@@ -99,21 +115,19 @@ function showMedia (phrase, pageNumber) {
99115
});
100116
}
101117

102-
103-
104118
CKEDITOR.dialog.add ('mediaDialog', editor => ({
105-
title: 'Insert products',
106-
minWidth: 200,
107-
minHeight: 200,
119+
title: 'Choose media',
120+
minWidth: 500,
121+
minHeight: 300,
108122
resizable: CKEDITOR.DIALOG_RESIZE_NONE,
109-
onShow(api) {
123+
onShow() {
110124
phrase = '';
111-
showMedia(phrase, current_page);
125+
showMedia(phrase, currentPage);
112126
},
113127

114128
contents: [
115129
{
116-
id: "mediaContent",
130+
id: "media-content",
117131
elements: [
118132
{
119133
type: 'text',
@@ -127,8 +141,8 @@ CKEDITOR.dialog.add ('mediaDialog', editor => ({
127141
return;
128142
}
129143
oldValue = this.getValue();
130-
changePage(current_page);
131-
showMedia(phrase, current_page);
144+
changePage(currentPage);
145+
showMedia(phrase, currentPage);
132146
}
133147
},
134148
{
@@ -155,47 +169,46 @@ CKEDITOR.dialog.add ('mediaDialog', editor => ({
155169
},
156170
]
157171
},
158-
172+
159173
{
160174
type: 'html',
161-
id: 'mediaGrid',
162-
html: '<form class="mediaGrid" id="grid"></form>',
175+
id: 'media-list',
176+
label: 'Media found:',
177+
html: '<form class="media-list" id="media-list"></form>',
163178
},
164179
{
165180
type: 'hbox',
166181
widths: [ '25%', '25%', '25%' ],
167182
style: 'width: 10em',
168-
align: 'left',
183+
align: 'center',
169184
children: [
170185
{
171186
type: 'html',
172-
id: 'btn_prev',
173-
html: '<button class="btn btn_prev" id="btn_prev" onclick="prevPage()">Previous</button>',
187+
id: 'btn-prev',
188+
html: '<button class="btn" id="btn-prev" onclick="prevPage()">&lsaquo;</button>',
174189
},
175190
{
176191
type: 'html',
177-
id: 'pageNumber',
178-
html: '<span class="pageNumber" id="pageNumber"></span>',
192+
id: 'page-number',
193+
html: '<span class="page-number" id="page-number"></span>',
179194
},
180195
{
181196
type: 'html',
182-
id: 'btn_next',
183-
html: '<button class="btn btn_next" id="btn_next" onclick="nextPage()">Next</button>',
197+
id: 'btn-next',
198+
html: '<button class="btn" id="btn-next" onclick="nextPage()">&rsaquo;</button>',
184199
},
185200
]
186201
},
187-
188-
189202
]
190203
},
191204
],
192205
onOk() {
193206
const dialog = this;
194207
const document = CKEDITOR.document;
195-
const element = document.find( '.mediaInput:checked');
208+
const element = document.find( '.media-list__item__input:checked');
196209
const imagePath = element.getItem(0).getAttribute( 'image-path' );
197-
const imageWidth = dialog.getContentElement('mediaContent','imageWidth').getValue();
198-
const imageHeight = dialog.getContentElement('mediaContent','imageHeight').getValue();
210+
const imageWidth = dialog.getContentElement('media-content','imageWidth').getValue();
211+
const imageHeight = dialog.getContentElement('media-content','imageHeight').getValue();
199212

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

‎src/Resources/views/Macro/mediaWidget.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
<div class="ui upload box segment">
33
{{ form_row(form) }}
44
<a href="{{ path('bitbag_sylius_cms_plugin_admin_media_create') }}" target="_blank" class="ui button create_btn" type="button">{{ 'sylius.ui.create'|trans }}</a>
5+
<div class="mediaPlacehod"></div>
56
</div>
67
{% endmacro %}

0 commit comments

Comments
 (0)