461 lines
15 KiB
PHP
461 lines
15 KiB
PHP
<?php
|
|
|
|
$issued = false;
|
|
|
|
function st_allegro_section_type($items)
|
|
{
|
|
$type = strtolower($items[0]->type);
|
|
|
|
if (isset($items[1]))
|
|
{
|
|
$type .= '-'.strtolower($items[1]->type);
|
|
}
|
|
|
|
return $type;
|
|
}
|
|
?>
|
|
|
|
<script type="text/x-template" id="allegro-section-controls-tpl">
|
|
<ul class="tabs">
|
|
<li><a data-type="text" href="#"><?php echo __('Opis') ?></a></li>
|
|
<li><a data-type="image" href="#"><?php echo __('Zdjęcie') ?></a></li>
|
|
<li><a data-type="text-image" href="#"><?php echo __('Opis + Zdjęcie') ?></a></li>
|
|
<li><a data-type="image-text" href="#"><?php echo __('Zdjęcie + Opis') ?></a></li>
|
|
<li><a data-type="image-image" href="#"><?php echo __('Zdjęcie + Zdjęcie') ?></a></li>
|
|
</ul>
|
|
<div class="panes">
|
|
<div class="flex">
|
|
<div class="text"><textarea id="text-editor"></textarea></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="image"><a href="#"><span></span></a></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="text"><textarea id="text-image-editor"></textarea></div>
|
|
<div class="image"><a href="#"><span></span></a></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="image"><a href="#"><span></span></a></div>
|
|
<div class="text"><textarea id="image-text-editor"></textarea></div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="image"><a href="#"><span></span></a></div>
|
|
<div class="image"><a href="#"><span></span></a></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-description-image-select-modal-tpl">
|
|
<div id="allegro-description-image-select-modal" class="popup_window">
|
|
<div class="close"><img src="/images/backend/beta/gadgets/close.png" alt="<?php echo __('Zamknij', null, 'stBackend') ?>" /></div>
|
|
<h2><?php echo __('Wybierz zdjęcie') ?></h2>
|
|
<div class="content"></div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-section-text-tpl">
|
|
<div class="section bs-mb-3" data-type="text">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<div class="text"></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-section-image-tpl">
|
|
<div class="section bs-mb-3" data-type="text-image">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<div class="image"><?php echo st_admin_get_icon('add-photo', array('size' => 24)) ?></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-section-text-image-tpl">
|
|
<div class="section bs-mb-3" data-type="text-image">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<div class="text"></div>
|
|
<div class="image"><?php echo st_admin_get_icon('add-photo', array('size' => 24)) ?></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-section-image-text-tpl">
|
|
<div class="section bs-mb-3" data-type="image-text">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<div class="image"><?php echo st_admin_get_icon('add-photo', array('size' => 24)) ?></div>
|
|
<div class="text"></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/x-template" id="allegro-section-image-image-tpl">
|
|
<div class="section bs-mb-3" data-type="image-image">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<div class="image"><?php echo st_admin_get_icon('add-photo', array('size' => 24)) ?></div>
|
|
<div class="image"><?php echo st_admin_get_icon('add-photo', array('size' => 24)) ?></div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<?php echo modal('allegro-description-image-select-modal', __('Wybierz zdjęcie'), array(
|
|
'width' => 960,
|
|
)) ?>
|
|
|
|
<div class="row">
|
|
<div id="allegro-description">
|
|
<?php foreach ($value as $section): ?>
|
|
<div class="section bs-mb-3" data-type="<?php echo st_allegro_section_type($section->items) ?>">
|
|
<div class="header flex">
|
|
<div class="title"><h3><?php echo __("Edycja sekcji") ?></h3></div>
|
|
<div class="tools"><a class="remove" href="#"><?php echo st_admin_get_icon('close') ?></a></div>
|
|
</div>
|
|
<div class="section-controls tinymce-container"></div>
|
|
<div class="section-content flex">
|
|
<?php foreach ($section->items as $content): ?>
|
|
<?php if ($content->type == 'TEXT'): ?>
|
|
<div class="text"><?php echo $content->content ?></div>
|
|
<?php endif ?>
|
|
<?php if ($content->type == 'IMAGE'): ?>
|
|
<div class="image" data-value="<?php echo $content->url ?>">
|
|
<img src="<?php echo $content->url ?>">
|
|
</div>
|
|
<?php endif ?>
|
|
<?php endforeach ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach ?>
|
|
<?php echo input_hidden_tag($name, json_encode(stAllegroApi::objectToArray($value)), array('id' => 'allegro_auction_text')); ?>
|
|
<?php if (!$issued): ?>
|
|
<div class="text-right">
|
|
<?php echo st_get_admin_button('add', __('Dodaj sekcję'), '#', array('size' => 'small', 'id' => 'allegro-description-add-section', 'name' => 'add')) ?>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (!$issued): ?>
|
|
<script type="text/javascript">
|
|
jQuery(function($) {
|
|
const imageSelectModal = $('#allegro-description-image-select-modal');
|
|
let sectionContents = { text: undefined, image: { 0: undefined, 1: undefined } };
|
|
let firstInit = true;
|
|
const container = $('#allegro-description');
|
|
const tinymceConfig = {
|
|
version: "<?php echo sfRichTextEditorTinyMCE::VERSION ?>",
|
|
language: "<?php echo strtolower(substr(sfContext::getInstance()->getUser()->getCulture(), 0, 2)) ?>"
|
|
};
|
|
|
|
function cleanupHTML(html) {
|
|
|
|
var dom = $('<div>'+html+'</div>');
|
|
|
|
dom.find('*').each(function () {
|
|
var tag = $(this);
|
|
if (tag.parents(tag.prop('tagName')).length) {
|
|
tag.contents().unwrap();
|
|
}
|
|
});
|
|
|
|
html = dom.html();
|
|
|
|
return html
|
|
.replace(/<b>/g, '<strong>')
|
|
.replace(/<\/b>/g, '</strong>')
|
|
}
|
|
|
|
function resetActiveSection() {
|
|
$.each(['text-editor', 'image-text-editor', 'text-image-editor'], function() {
|
|
tinymce.remove('#'+this);
|
|
});
|
|
|
|
container.find('.section.active').removeClass('active').find('.section-controls').html("");
|
|
}
|
|
|
|
var updateSectionContents = function(selectedTab, sectionContent) {
|
|
switch(selectedTab.data('type'))
|
|
{
|
|
case 'text':
|
|
sectionContent.html('<div class="text">'+sectionContents['text']+'</div>');
|
|
break;
|
|
case 'image':
|
|
sectionContent.html('<div class="image" data-value="'+sectionContents['image'][0]+'"><img src="'+sectionContents['image'][0]+'"></div>');
|
|
break;
|
|
case 'text-image':
|
|
sectionContent.html('<div class="text">'+sectionContents['text']+'</div><div class="image" data-value="'+sectionContents['image'][1]+'"><img src="'+sectionContents['image'][1]+'"></div>');
|
|
break;
|
|
case 'image-text':
|
|
sectionContent.html('<div class="image" data-value="'+sectionContents['image'][0]+'"><img src="'+sectionContents['image'][0]+'"></div><div class="text">'+sectionContents['text']+'</div>');
|
|
break;
|
|
case 'image-image':
|
|
sectionContent.html('<div class="image" data-value="'+sectionContents['image'][0]+'"><img src="'+sectionContents['image'][0]+'"></div><div class="image" data-value="'+sectionContents['image'][1]+'"><img src="'+sectionContents['image'][1]+'"></div>');
|
|
break;
|
|
}
|
|
}
|
|
|
|
container.on('click', '.section', function() {
|
|
let pane = null;
|
|
let tab = null;
|
|
const section = $(this);
|
|
|
|
if (section.hasClass('active')) {
|
|
return true;
|
|
}
|
|
|
|
if (!section.data('allegro-init')) {
|
|
section.data('allegro-init', true);
|
|
section.find('.remove').click(function() {
|
|
resetActiveSection();
|
|
section.remove();
|
|
return false;
|
|
});
|
|
}
|
|
|
|
const sectionControls = section.find('.section-controls').html($('#allegro-section-controls-tpl').html());
|
|
const sectionContent = section.find('.section-content');
|
|
let tabInitialIndex = sectionControls.find('.tabs a[data-type="'+section.data('type')+'"]').closest('li').index();
|
|
|
|
resetActiveSection();
|
|
|
|
if (container.find('.section').length > 1) {
|
|
section.find('.tools').show();
|
|
} else {
|
|
section.find('.tools').hide();
|
|
}
|
|
|
|
section.addClass('active');
|
|
|
|
sectionContents = { text: undefined, image: { 0: undefined, 1: undefined } };
|
|
|
|
sectionContent.children('div').each(function(index) {
|
|
const elem = $(this);
|
|
if (elem.hasClass('image')) {
|
|
sectionContents[elem.attr('class')][index] = elem.data('value');
|
|
} else {
|
|
sectionContents[elem.attr('class')] = elem.html();
|
|
}
|
|
});
|
|
|
|
sectionControls.find('.panes').on('click', '.image > a', function() {
|
|
const link = $(this);
|
|
let index = link.parent().index();
|
|
|
|
imageSelectModal.one('modal.show', function(e, modal) {
|
|
const images = $('#st-allegro-edit-images .image-url');
|
|
|
|
modal.getElement().one('click', 'a.description-image', function() {
|
|
let value = $(this).data('value');
|
|
sectionContents['image'][index] = value;
|
|
link.children('span').css({ 'background-image': 'url('+value+')' });
|
|
updateSectionContents(tab, sectionContent);
|
|
modal.hide();
|
|
return false;
|
|
});
|
|
|
|
if (images.length > 0) {
|
|
let list = [];
|
|
|
|
$.each(images, function() {
|
|
let url = $(this).val();
|
|
list.push('<li><a href="#" data-value="'+url+'" class="description-image"><img src="'+url+'"></a><li>');
|
|
});
|
|
|
|
modal.updateContent('<ul>'+list.join('')+'</ul>');
|
|
} else {
|
|
modal.updateContent('Musisz wpierw wybrać zdjęcia do aukcji');
|
|
}
|
|
});
|
|
|
|
imageSelectModal.data('api').show();
|
|
|
|
return false;
|
|
});
|
|
|
|
sectionControls.find('.tabs').tabs('#allegro-description div.panes > div', {
|
|
initialIndex: tabInitialIndex,
|
|
onClick: function() {
|
|
pane = this.getCurrentPane();
|
|
tab = this.getCurrentTab();
|
|
|
|
let init = pane.data('allegro-init');
|
|
const tpl = $($('#allegro-section-'+section.data('type')+'-tpl'));
|
|
|
|
if (!init) {
|
|
pane.data('allegro-init', true);
|
|
|
|
if (tab.data('type') != 'image-image') {
|
|
const textarea = pane.find('.text textarea').get(0);
|
|
tinymce.init({
|
|
target: textarea,
|
|
skin: "custom",
|
|
plugins: ["lists", "autoresize", "paste"],
|
|
browser_spellcheck: true,
|
|
menubar: false,
|
|
convert_urls: false,
|
|
toolbar: "undo redo | formatselect | bold | bullist numlist",
|
|
valid_elements: "b,strong,p,h1,h2,ul,ol,li",
|
|
valid_children: "h1[-],h2[-],li[strong|p|b],p[strong|b],ol[li],ul[li]",
|
|
block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;',
|
|
resize: true,
|
|
force_p_newlines: true,
|
|
language: tinymceConfig.language,
|
|
width: "100%",
|
|
autoresize_max_height: 304,
|
|
autoresize_min_height: 304,
|
|
cache_suffix: "?v="+tinymceConfig.version,
|
|
entity_encoding: "raw",
|
|
keep_styles: false,
|
|
allow_conditional_comments: false,
|
|
content_css: ["/css/backend/stTinyMCEContent.css"],
|
|
setup: function(editor) {
|
|
editor.on('keydown', function(e) {
|
|
if (e.shiftKey && e.key == 'Enter') {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
init_instance_callback: function (editor) {
|
|
let updated = true;
|
|
// editor.shortcuts.remove('shift+enter');
|
|
editor.focus();
|
|
|
|
if (!sectionContents['text']) {
|
|
sectionContents['text'] = '';
|
|
}
|
|
|
|
if (sectionContents['text'].length) {
|
|
sectionContents['text'] = cleanupHTML(sectionContents['text']);
|
|
}
|
|
|
|
editor.setContent(sectionContents['text']);
|
|
|
|
sectionContents['text'] = editor.getContent();
|
|
|
|
updateSectionContents(tab, sectionContent);
|
|
|
|
editor.on('blur', function (e) {
|
|
let content = editor.getContent();
|
|
|
|
if (content.length) {
|
|
content = cleanupHTML(content);
|
|
}
|
|
|
|
editor.setContent(content);
|
|
|
|
sectionContents['text'] = content;
|
|
sectionContent.find('.text').html(content);
|
|
updated = false;
|
|
});
|
|
|
|
editor.on('focus', function() {
|
|
if (!updated) {
|
|
editor.setContent(sectionContents['text']);
|
|
updated = true;
|
|
}
|
|
});
|
|
|
|
if (firstInit) {
|
|
firstInit = false;
|
|
$('#allegro_auction_name').click().focus();
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
const editor = tinymce.get(tab.data('type')+'-editor');
|
|
if (editor) {
|
|
editor.focus();
|
|
}
|
|
|
|
updateSectionContents(tab, sectionContent);
|
|
}
|
|
|
|
if (tab.data('type') != 'text') {
|
|
|
|
pane.find('.image').each(function() {
|
|
const image = $(this);
|
|
if (sectionContents['image'][image.index()]) {
|
|
image.find('a > span').css({ 'background-image': 'url('+sectionContents['image'][image.index()]+')' });
|
|
} else {
|
|
image.removeAttr('style');
|
|
}
|
|
});
|
|
}
|
|
|
|
section.data('type', tab.data('type'));
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
container.find('.section').first().click();
|
|
|
|
$('#allegro-description-add-section').click(function() {
|
|
const section = $($('#allegro-section-text-tpl').html());
|
|
const btn = $(this);
|
|
|
|
btn.parent().before(section);
|
|
|
|
section.click();
|
|
|
|
return false;
|
|
});
|
|
|
|
const form = $('#allegro_auction_text').closest('form');
|
|
|
|
form.submit(function() {
|
|
const sections = [];
|
|
|
|
container.find('.section').each(function() {
|
|
const section = $(this);
|
|
|
|
const items = [];
|
|
|
|
section.find('.section-content > div').each(function() {
|
|
const item = $(this);
|
|
if (item.hasClass('text')) {
|
|
let content = $(this).html();
|
|
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
|
|
items.push({
|
|
'type': 'TEXT',
|
|
'content': content,
|
|
});
|
|
} else {
|
|
items.push({
|
|
'type': 'IMAGE',
|
|
'url': $(this).data('value'),
|
|
});
|
|
}
|
|
});
|
|
sections.push({ 'items': items });
|
|
});
|
|
|
|
// console.log(sections);
|
|
|
|
// return false;
|
|
|
|
$('#allegro_auction_text').val(JSON.stringify({ 'sections': sections }));
|
|
});
|
|
});
|
|
</script>
|
|
<?php endif ?>
|