217 lines
8.5 KiB
JavaScript
217 lines
8.5 KiB
JavaScript
$.widget("wpj.blocks", {
|
|
options: {
|
|
acn: 'edit',
|
|
isSuperuser: false,
|
|
itemsOuterContainerSelector: '#pageBlocksOuterContainer',
|
|
defaultItemSelector: '[data-form-item="0"]',
|
|
addRootItemBtnSelector: '[data-form-custom-add-root]',
|
|
$inputRelations: $('<input type="hidden" name="relations" value="{ }" />'),
|
|
newItemIndex: 0,
|
|
ckeditorConfig: {
|
|
customConfig: '/admin/static/js/ckeditor.js',
|
|
"autoGrow_maxHeight": 0,
|
|
"autoGrow_onStartup": true,
|
|
toolbar: "BasicTable",
|
|
filebrowserBrowseUrl: '/_ckfinder/browse/',
|
|
filebrowserImageBrowseUrl: '/_ckfinder/browse/?rsrcType=Obrázky',
|
|
filebrowserUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Soubory',
|
|
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Obrázky'
|
|
}
|
|
},
|
|
_create: function () {
|
|
this._super();
|
|
|
|
// append hidden input with block relations to closest form
|
|
// value of this input will also change on successful drag&drop or after adding new item
|
|
this.element.closest('form').append(this.options.$inputRelations);
|
|
|
|
// save initial relations to hidden input
|
|
this.refreshRelations();
|
|
|
|
// assign default item for creating new items
|
|
this.$defaultItem = $(this.options.defaultItemSelector);
|
|
|
|
var that = this;
|
|
|
|
// initialize nestedSortable
|
|
this.element.nestedSortable({
|
|
listType: 'ul',
|
|
forcePlaceholderSize: true,
|
|
handle: 'span.drag-drop-mover',
|
|
helper: 'clone',
|
|
items: 'li.blockItem',
|
|
opacity: .6,
|
|
placeholder: 'placeholder',
|
|
revert: 250,
|
|
tabSize: 25,
|
|
tolerance: 'pointer',
|
|
toleranceElement: '> div',
|
|
update: function (event, ui) {
|
|
that.refreshRelations();
|
|
|
|
// TODO fix freezing after drop - maybe think of sth better then recreating ckeditor
|
|
var $item = $(ui.item);
|
|
that.reinitializeCkeditor($item);
|
|
$item.find('[data-form-item]').each(function(i,e) {
|
|
that.reinitializeCkeditor($(e));
|
|
});
|
|
}
|
|
});
|
|
|
|
initForm({
|
|
selector: this.options.itemsOuterContainerSelector,
|
|
beforeAdd: this.postAddInit
|
|
});
|
|
|
|
// add nested items
|
|
this.element.on('click', '[data-form-custom-add]', function(event) {
|
|
event.preventDefault();
|
|
var $item = $(this).closest('[data-form-item]');
|
|
var $container = $item.children('ul:last');
|
|
if (!$container.length) {
|
|
$container = $('<ul></ul>');
|
|
$item.append($container);
|
|
}
|
|
that.postAddInit(function() {
|
|
return that.addItem($container)
|
|
});
|
|
return false;
|
|
});
|
|
|
|
// add root items
|
|
$(this.options.addRootItemBtnSelector).on('click', function(event) {
|
|
event.preventDefault();
|
|
that.postAddInit(function() {
|
|
return that.addItem(that.element);
|
|
});
|
|
});
|
|
|
|
// refresh block name
|
|
this.element.on('input', 'input[name$="][name]"]', function(event) {
|
|
var $input = $(this);
|
|
var $item = $input.closest('[data-form-item]');
|
|
var $blockHeading = $item.children('.panel-heading');
|
|
$blockHeading.find('[data-block-heading-name]').text($input.val() == '' && !$item.is('[data-form-item-id]') ? '[Nový blok]' : $input.val());
|
|
});
|
|
|
|
this.element.on('keydown', null, 'ctrl+enter', function (e) {
|
|
var data = e.data;
|
|
if (data.modif == "ctrl+" && data.special == "return") {
|
|
that.addItem(that.element);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
if (this.options.isSuperuser) {
|
|
// refresh block identifier
|
|
this.element.on('input', 'input[name$="][identifier]"]', function (event) {
|
|
var $input = $(this);
|
|
var $blockHeading = $input.closest('[data-form-item]').children('.panel-heading');
|
|
$blockHeading.find('[data-block-heading-identifier]').text($input.val() == '' ? '' : $input.val());
|
|
});
|
|
}
|
|
|
|
// initialize ckeditor when block is being opened
|
|
this.element.on('show.bs.collapse', '.blockItem', function(event) {
|
|
var $item = $(event.currentTarget);
|
|
var $textarea = $item.find('[name="data[blocks][' + $item.attr('data-form-item') + '][content]"]');
|
|
if (!$textarea.length || $textarea.attr('name') in CKEDITOR.instances ) {
|
|
return;
|
|
}
|
|
CKEDITOR.replace($textarea.attr('name'), that.options.ckeditorConfig)
|
|
});
|
|
|
|
// focus ckeditor after opening block animation
|
|
this.element.on('shown.bs.collapse', '.blockItem', function(event) {
|
|
var $item = $(event.currentTarget);
|
|
var $textarea = $item.find('[name="data[blocks][' + $item.attr('data-form-item') + '][content]"]');
|
|
if (!$textarea.length)
|
|
return;
|
|
if ($textarea.attr('name') in CKEDITOR.instances ) {
|
|
CKEDITOR.instances[$textarea.attr('name')].focus();
|
|
}
|
|
});
|
|
|
|
this.element.find('.blockItem:not([data-form-index="0"])').each(function(index, el) {
|
|
that.initPhotos($(el));
|
|
});
|
|
},
|
|
refreshRelations: function() {
|
|
var relations = { };
|
|
this.element.find('[data-form-index]').each(function(index, el) {
|
|
var $item = $(el);
|
|
var $parentItem = $item.parent('ul').parent('[data-form-item]');
|
|
// parentID for already existing blocks, parentIndex (data-form-item) for new blocks
|
|
if ($parentItem.length && !$parentItem.is('[data-form-item-id]')) {
|
|
relations[$item.attr('data-form-item')] = {
|
|
'parentIndex': $parentItem.attr('data-form-item')
|
|
};
|
|
} else {
|
|
relations[$item.attr('data-form-item')] = {
|
|
'parentID': $parentItem.length ? $parentItem.data('form-item-id') : null,
|
|
'parentIndex': $parentItem.length ? $parentItem.attr('data-form-item') : null
|
|
};
|
|
}
|
|
|
|
});
|
|
relations = JSON.stringify(relations);
|
|
this.options.$inputRelations.val(relations);
|
|
},
|
|
reinitializeCkeditor: function($item) {
|
|
var $textarea = $item.find('[name="data[blocks][' + $item.attr('data-form-item') + '][content]"]');
|
|
if (!$textarea.length)
|
|
return;
|
|
var $newTextarea = $textarea.clone();
|
|
var $textareaContainer = $textarea.parent();
|
|
for (var instanceName in CKEDITOR.instances) {
|
|
if (CKEDITOR.instances[instanceName]['name'] == $textarea.attr('name')) {
|
|
$newTextarea.html(CKEDITOR.instances[instanceName].getData());
|
|
CKEDITOR.remove(CKEDITOR.instances[instanceName]);
|
|
break;
|
|
}
|
|
}
|
|
$textareaContainer.html($newTextarea);
|
|
CKEDITOR.replace($newTextarea.attr('name'), this.options.ckeditorConfig);
|
|
},
|
|
initPhotos: function($item) {
|
|
$item.find('.photo-select:first').chosen({
|
|
width: '100%',
|
|
placeholder_text_multiple: 'Vyberte obrázky'
|
|
});
|
|
},
|
|
addItem: function($container) {
|
|
var newItemIndex = --this.options.newItemIndex;
|
|
unstyleFormInputs(this.$defaultItem);
|
|
var $newItem = this.$defaultItem.clone();
|
|
$newItem.attr('data-form-item', newItemIndex);
|
|
$newItem.children('[data-target="#collapse_0"]').attr('data-target', '#collapse_' + newItemIndex);
|
|
$newItem.children('#collapse_0').attr('id', 'collapse_' + newItemIndex);
|
|
$newItem.find('[name="data[blocks][0][delete]"]').attr('name', 'data[blocks][' + newItemIndex + '][delete]');
|
|
$newItem.find('[name="data[blocks][0][name]"]').attr('name', 'data[blocks][' + newItemIndex + '][name]');
|
|
$newItem.find('[name="data[blocks][0][identifier]"]').attr('name', 'data[blocks][' + newItemIndex + '][identifier]');
|
|
$newItem.find('[name="data[blocks][0][content]"]').attr('name', 'data[blocks][' + newItemIndex + '][content]');
|
|
$newItem.find('[name="data[blocks][0][photos][]"]').attr('name', 'data[blocks][' + newItemIndex + '][photos][]');
|
|
$container.append($newItem);
|
|
this.refreshRelations();
|
|
$newItem.slideDown(150, function() {
|
|
// animate block form
|
|
$newItem.find('> .panel-heading:first').trigger('click');
|
|
});
|
|
styleFormInputs($newItem);
|
|
this.initPhotos($newItem);
|
|
return $newItem;
|
|
},
|
|
postAddInit: function(original, $container) {
|
|
var $form = original();
|
|
var name = $form.find('textarea').attr('name');
|
|
if (name)
|
|
CKEDITOR.replace(name, this.options.ckeditorConfig);
|
|
|
|
// scroll to new item
|
|
$('html,body').animate({
|
|
scrollTop: $form.offset().top
|
|
});
|
|
}
|
|
});
|