445 lines
16 KiB
JavaScript
445 lines
16 KiB
JavaScript
/**
|
|
* Navigation-Editor
|
|
* Stellt die Funktionalität für die Bearbeitung der Navigations-Struktur zur Verfügung
|
|
*
|
|
* Created by CS medien- & kommunikationssysteme.
|
|
* @author Christian Steinle
|
|
* @date 06.10.2016
|
|
*
|
|
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
|
*/
|
|
|
|
var Navigation = {
|
|
structureHtml: '',
|
|
chosenNavID: 0,
|
|
chosenNavPath: [],
|
|
chosenBreadCrumb: '',
|
|
|
|
/**
|
|
* jQuery-Variablen des Navigations-Editors
|
|
*/
|
|
structureElement: null,
|
|
moveStructureElement: null,
|
|
breadCrumbElement: null,
|
|
tokenElement: null,
|
|
buttonEditElement: null,
|
|
buttonSortElement: null,
|
|
buttonMoveElement: null,
|
|
buttonChildElement: null,
|
|
buttonSiblingElement: null,
|
|
|
|
init: function () {
|
|
Navigation.initElements();
|
|
Navigation.initIconFunctions();
|
|
},
|
|
|
|
initElements: function () {
|
|
Navigation.structureElement = $('#csEditorStructure');
|
|
Navigation.moveStructureElement = $('#csEditorMoveStructure');
|
|
Navigation.breadCrumbElement = $('.csEditorBreadCrumb');
|
|
Navigation.buttonEditElement = $('.formEdit');
|
|
Navigation.buttonSortElement = $('.formSort');
|
|
Navigation.buttonMoveElement = $('.formMove');
|
|
Navigation.buttonChildElement = $('.formChild');
|
|
Navigation.buttonSiblingElement = $('.formSibling');
|
|
},
|
|
|
|
initIconFunctions: function () {
|
|
Navigation.structureElement.on('click', '.glyphicon-folder-close', function () {
|
|
$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
|
|
$(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
|
|
});
|
|
|
|
Navigation.structureElement.on('click', '.glyphicon-folder-open', function (event) {
|
|
if (event.target !== this) {
|
|
return true;
|
|
}
|
|
$(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
|
|
$(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
|
|
});
|
|
|
|
Navigation.structureElement.on('click', 'li', function () {
|
|
if (event.target !== this) {
|
|
return true;
|
|
}
|
|
|
|
$('li', Navigation.structureElement).removeClass('csEditorChosen');
|
|
$(this).addClass('csEditorChosen');
|
|
$(this).parents('li').addClass('csEditorChosen');
|
|
Navigation.setChosenElements(this);
|
|
});
|
|
|
|
Navigation.moveStructureElement.on('click', '.glyphicon-folder-close', function () {
|
|
$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
|
|
$(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
|
|
});
|
|
|
|
Navigation.moveStructureElement.on('click', '.glyphicon-folder-open', function (event) {
|
|
if (event.target !== this) {
|
|
return true;
|
|
}
|
|
$(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
|
|
$(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
|
|
});
|
|
|
|
Navigation.moveStructureElement.on('click', 'li:not(.csEditorNotEditable)', function () {
|
|
if (event.target !== this) {
|
|
return true;
|
|
}
|
|
var navStart = $(this).data('navstart');
|
|
var navID = $(this).data('navid');
|
|
if (navID !== 0) {
|
|
var actualNavElement = CS.editorData['navStart_' + navStart]['navID_' + navID];
|
|
}
|
|
else {
|
|
var actualNavElement = {navName: '/'};
|
|
}
|
|
|
|
var maxNavSort = 0;
|
|
if (CS.editorData['navStart_' + navID] != undefined) {
|
|
$.each(CS.editorData['navStart_' + navID], function (key, navPoint) {
|
|
maxNavSort = Math.max(navPoint.navSort, maxNavSort);
|
|
});
|
|
++maxNavSort;
|
|
}
|
|
$('.moveSubmit').show();
|
|
$('li', Navigation.moveStructureElement).removeClass('csEditorChosen');
|
|
$(this).addClass('csEditorChosen');
|
|
$("input[name='navStart']", $('.moveFields')).val(navID);
|
|
$("input[name='navSort']", $('.moveFields')).val(maxNavSort);
|
|
$('#csEditorMoveToItem').html(actualNavElement['navName']);
|
|
})
|
|
},
|
|
|
|
fillEditorContent: function () {
|
|
if (CS.editorData === null || CS.editorHtml === '') {
|
|
window.setTimeout('Navigation.fillEditorContent()', 50);
|
|
return true;
|
|
}
|
|
Navigation.init();
|
|
|
|
Navigation.chosenNavID = csEditorParams.navID;
|
|
Navigation.chosenNavPath = csEditorParams.navigationPath;
|
|
Navigation.buildStructureHtml(0);
|
|
Navigation.structureElement.html(Navigation.structureHtml);
|
|
Navigation.breadCrumbElement.html(Navigation.chosenBreadCrumb);
|
|
Navigation.fillForm();
|
|
},
|
|
|
|
buildStructureHtml: function (navStart) {
|
|
var actualNavStartElements = CS.editorData['navStart_' + navStart];
|
|
if (navStart === 0) {
|
|
Navigation.structureHtml += '<ul class="well"><li data-navid="0" class="csEditorOpen csEditorChosen"><span class="glyphicon glyphicon-folder-open"></span> /';
|
|
Navigation.chosenBreadCrumb += '/ ';
|
|
}
|
|
Navigation.structureHtml += '<ul>';
|
|
|
|
$.each(actualNavStartElements, function (key, actualNavElement) {
|
|
var liClass = '';
|
|
var spanClass = '';
|
|
|
|
if ($.inArray(actualNavElement['navID'], Navigation.chosenNavPath) !== -1) {
|
|
liClass += 'csEditorOpen ';
|
|
spanClass = 'glyphicon glyphicon-folder-open';
|
|
Navigation.chosenBreadCrumb += '> ' + actualNavElement['navName'] + ' ';
|
|
}
|
|
else {
|
|
liClass += 'csEditorClosed ';
|
|
spanClass = 'glyphicon glyphicon-folder-close';
|
|
}
|
|
|
|
if (CS.editorData['navStart_' + actualNavElement['navID']] == undefined) {
|
|
liClass += 'csEditorEmpty ';
|
|
spanClass = 'glyphicon glyphicon-align-justify';
|
|
}
|
|
|
|
if (actualNavElement['navActive'] !== 'yes') {
|
|
liClass += 'csEditorInactive ';
|
|
}
|
|
if (actualNavElement['navID'] == csEditorParams.navID) {
|
|
liClass += 'csEditorChosen';
|
|
}
|
|
Navigation.structureHtml += '<li data-navstart="' + navStart + '" data-navid="' + actualNavElement['navID'] + '" class="' + liClass + '"><span class="' + spanClass + '"></span> ' + actualNavElement['navName'];
|
|
if (CS.editorData['navStart_' + actualNavElement['navID']] != undefined) {
|
|
Navigation.buildStructureHtml(actualNavElement['navID']);
|
|
}
|
|
Navigation.structureHtml += '</li>';
|
|
});
|
|
|
|
if (navStart === 0) {
|
|
Navigation.structureHtml += '</li>';
|
|
}
|
|
Navigation.structureHtml += '</ul>';
|
|
},
|
|
|
|
setChosenElements: function (element) {
|
|
Navigation.chosenNavID = element.dataset.navid;
|
|
Navigation.buildBreadCrumb(element);
|
|
Navigation.buildNavPath(element);
|
|
Navigation.fillForm();
|
|
},
|
|
|
|
fillForm: function () {
|
|
if (Navigation.chosenNavID == 0) {
|
|
Navigation.enableRootButtons();
|
|
}
|
|
else {
|
|
Navigation.enableAllButtons();
|
|
}
|
|
var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
|
|
var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
|
|
$.each(chosenNavElement, function (key, value) {
|
|
$("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
|
|
if (value !== null) {
|
|
$("input[type='radio'][name='" + key + "'][value='" + value.replace(/\'/g, '\\') + "']", CS.contentElement).prop('checked', true);
|
|
}
|
|
});
|
|
Navigation.fillSpecial();
|
|
},
|
|
|
|
fillSpecial: function () {
|
|
if (Navigation.chosenNavID > 0) {
|
|
Navigation.fillMove();
|
|
Navigation.fillSibling();
|
|
}
|
|
Navigation.fillSort();
|
|
Navigation.fillChild();
|
|
},
|
|
|
|
fillSort: function () {
|
|
if (CS.editorData['navStart_' + Navigation.chosenNavID] == undefined) {
|
|
$('.csEditorSortable').html('Keine Untermenü-Punkte zum Sortieren vorhanden!');
|
|
$('.sortSubmit').hide();
|
|
return true;
|
|
}
|
|
|
|
var sortHtml = '<ul>';
|
|
$('.sortSubmit').show();
|
|
$.each(CS.editorData['navStart_' + Navigation.chosenNavID], function (key, navPoint) {
|
|
sortHtml += '<li data-id="' + navPoint['navID'] + '">' + navPoint['navName'] + '<span class="glyphicon glyphicon-sort"></span></li>';
|
|
});
|
|
sortHtml += '</ul>';
|
|
$("input[name='navStart']", '.sortFields').val(Navigation.chosenNavID);
|
|
|
|
$('.csEditorSortable').html(sortHtml);
|
|
$('ul', '.csEditorSortable').sortable({
|
|
axis: 'y',
|
|
forcePlaceholderSize: true,
|
|
handle: '.glyphicon-sort',
|
|
stop: function () {
|
|
var order = $('ul', '.csEditorSortable').sortable('toArray', {attribute: 'data-id'});
|
|
$("input[name='sortOrder']", '.sortFields').val(order);
|
|
}
|
|
});
|
|
},
|
|
|
|
fillMove: function () {
|
|
Navigation.moveStructureElement.html(Navigation.structureHtml);
|
|
var ownItem = $("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement);
|
|
$(ownItem.parents('li')[0]).addClass('csEditorNotEditable');
|
|
$("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement).remove();
|
|
$("input[name='navSort']", '.moveFields').val(0);
|
|
$('.moveSubmit').hide();
|
|
},
|
|
|
|
fillChild: function () {
|
|
$("input[name='navStart']", '.childFields').val(Navigation.chosenNavID);
|
|
$("input[name='navName']", '.childFields').val('');
|
|
$("input[name='navTitle']", '.childFields').val('');
|
|
$("input[name='navSort']", '.childFields').val(0);
|
|
$("input[name='navActive']", '.childFields').val('yes');
|
|
},
|
|
|
|
fillSibling: function () {
|
|
var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
|
|
var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
|
|
$("input[name='navSort']", '.siblingFields').val(parseInt(chosenNavElement.navSort) + 1);
|
|
$("input[name='navName']", '.siblingFields').val('');
|
|
$("input[name='navTitle']", '.siblingFields').val('');
|
|
$("input[name='navActive']", '.siblingFields').val('yes');
|
|
},
|
|
|
|
buildBreadCrumb: function (element) {
|
|
Navigation.breadCrumb = '>' + $(element)[0].childNodes[1].textContent;
|
|
|
|
$.each($(element).parents('li'), function () {
|
|
Navigation.breadCrumb = '>' + ($(this)[0].childNodes[1].textContent) + ' ' + Navigation.breadCrumb;
|
|
});
|
|
|
|
Navigation.breadCrumb = Navigation.breadCrumb.substr(2);
|
|
Navigation.breadCrumbElement.html(Navigation.breadCrumb);
|
|
},
|
|
|
|
buildNavPath: function (element) {
|
|
var path = [];
|
|
path.push(element.dataset.navid);
|
|
|
|
$.each($(element).parents('li'), function () {
|
|
path.push(this.dataset.navid);
|
|
});
|
|
|
|
path.push('0');
|
|
Navigation.chosenNavPath = path.reverse();
|
|
},
|
|
|
|
enableEdit: function () {
|
|
Navigation.disableSort();
|
|
Navigation.disableMove();
|
|
Navigation.disableSibling();
|
|
Navigation.disableChild();
|
|
Navigation.disableDelete();
|
|
|
|
$('input', '.editFields').prop('disabled', false);
|
|
$('.editFields').show();
|
|
},
|
|
|
|
enableSort: function () {
|
|
Navigation.disableEdit();
|
|
Navigation.disableMove();
|
|
Navigation.disableSibling();
|
|
Navigation.disableChild();
|
|
Navigation.disableDelete();
|
|
|
|
$('input', '.sortFields').prop('disabled', false);
|
|
$('.sortFields').show();
|
|
},
|
|
|
|
enableMove: function () {
|
|
Navigation.disableEdit();
|
|
Navigation.disableSort();
|
|
Navigation.disableSibling();
|
|
Navigation.disableChild();
|
|
Navigation.disableDelete();
|
|
|
|
$('input', '.moveFields').prop('disabled', false);
|
|
$('.moveFields').show();
|
|
},
|
|
|
|
enableSibling: function () {
|
|
Navigation.disableEdit();
|
|
Navigation.disableSort();
|
|
Navigation.disableMove();
|
|
Navigation.disableChild();
|
|
Navigation.disableDelete();
|
|
|
|
$('input', '.siblingFields').prop('disabled', false);
|
|
$('.siblingFields').show();
|
|
},
|
|
|
|
enableChild: function () {
|
|
Navigation.disableEdit();
|
|
Navigation.disableSort();
|
|
Navigation.disableMove();
|
|
Navigation.disableSibling();
|
|
Navigation.disableDelete();
|
|
|
|
$('input', '.childFields').prop('disabled', false);
|
|
$('.childFields').show();
|
|
},
|
|
|
|
enableDelete: function () {
|
|
Navigation.disableEdit();
|
|
Navigation.disableSort();
|
|
Navigation.disableMove();
|
|
Navigation.disableSibling();
|
|
Navigation.disableChild();
|
|
|
|
$('input', '.deleteFields').prop('disabled', false);
|
|
$('.deleteFields').show();
|
|
},
|
|
|
|
disableEdit: function () {
|
|
$('input', '.editFields').prop('disabled', true);
|
|
$('.editFields').hide();
|
|
},
|
|
|
|
disableSort: function () {
|
|
/* TODO: Destroy Sortable;
|
|
if (imgEditor.imgThumbElement.is(':ui-sortable')) {
|
|
imgEditor.imgThumbElement.sortable('destroy');
|
|
*/
|
|
|
|
$('input', '.sortFields').prop('disabled', true);
|
|
$('.sortFields').hide();
|
|
},
|
|
|
|
disableMove: function () {
|
|
$('input', '.moveFields').prop('disabled', true);
|
|
$('.moveFields').hide();
|
|
},
|
|
|
|
disableSibling: function () {
|
|
$('input', '.siblingFields').prop('disabled', true);
|
|
$('.siblingFields').hide();
|
|
},
|
|
|
|
disableChild: function () {
|
|
$('input', '.childFields').prop('disabled', true);
|
|
$('.childFields').hide();
|
|
},
|
|
|
|
disableDelete: function () {
|
|
$('input', '.deleteFields').prop('disabled', true);
|
|
$('.deleteFields').hide();
|
|
},
|
|
|
|
enableAllButtons: function () {
|
|
Navigation.disableAllButtons();
|
|
|
|
Navigation.buttonEditElement.removeClass('disabled');
|
|
Navigation.buttonMoveElement.removeClass('disabled');
|
|
Navigation.buttonSiblingElement.removeClass('disabled');
|
|
|
|
Navigation.buttonEditElement.on('click', Navigation.enableEdit);
|
|
Navigation.buttonSortElement.on('click', Navigation.enableSort);
|
|
Navigation.buttonMoveElement.on('click', Navigation.enableMove);
|
|
Navigation.buttonChildElement.on('click', Navigation.enableChild);
|
|
Navigation.buttonSiblingElement.on('click', Navigation.enableSibling);
|
|
},
|
|
|
|
enableRootButtons: function () {
|
|
Navigation.disableAllButtons();
|
|
|
|
Navigation.buttonEditElement.addClass('disabled');
|
|
Navigation.buttonMoveElement.addClass('disabled');
|
|
Navigation.buttonSiblingElement.addClass('disabled');
|
|
|
|
Navigation.buttonEditElement.on('click', function () {
|
|
return false;
|
|
});
|
|
Navigation.buttonSortElement.on('click', Navigation.enableSort);
|
|
Navigation.buttonMoveElement.on('click', function () {
|
|
return false;
|
|
});
|
|
Navigation.buttonChildElement.on('click', Navigation.enableChild);
|
|
Navigation.buttonSiblingElement.on('click', function () {
|
|
return false;
|
|
});
|
|
},
|
|
|
|
disableAllButtons: function () {
|
|
Navigation.buttonEditElement.off();
|
|
Navigation.buttonSortElement.off();
|
|
Navigation.buttonMoveElement.off();
|
|
Navigation.buttonChildElement.off();
|
|
Navigation.buttonSiblingElement.off();
|
|
},
|
|
|
|
close: function () {
|
|
Navigation.structureHtml = '';
|
|
Navigation.chosenNavID = 0;
|
|
Navigation.chosenNavPath = [];
|
|
Navigation.chosenBreadCrumb = '';
|
|
|
|
Navigation.structureElement = null;
|
|
Navigation.moveStructureElement = null;
|
|
Navigation.breadCrumbElement = null;
|
|
Navigation.tokenElement = null;
|
|
Navigation.buttonEditElement = null;
|
|
Navigation.buttonSortElement = null;
|
|
Navigation.buttonMoveElement = null;
|
|
Navigation.buttonChildElement = null;
|
|
Navigation.buttonSiblingElement = null;
|
|
}
|
|
};
|