artabro/wire/modules/Process/ProcessTemplate/ProcessTemplate.js

585 lines
16 KiB
JavaScript
Raw Permalink Normal View History

2024-08-27 11:35:37 +02:00
function ProcessTemplateAsmSelect() {
/**
* Identify asmSelect <li> items with classes that indicate how they contribute to Inputfield width rows
*
* - "rowItem" class is added all items that contribute to a row
* - "rowStart" class is added to items that begin a row
* - "rowStop" class is added to items that stop/finish a row
* - "rowError" class is also added to items that stop a row but row does not add up to 100%
*
* This method should be called at init, as well as after any sorting or other changes to the asmSelect.
* Return value is integer containing the quantity of rows that use columnWidth.
*
*/
function setupRows() {
var $inputfield = $('#wrap_fieldgroup_fields');
var $item = $inputfield.find('.asmListItem').eq(0);
var $lastItem = null;
var lastItemWidth = 0;
var total = 0;
var numRows = 0;
do {
$item.removeClass('rowItem rowStart rowStop rowError');
var w = parseInt($item.find('.columnWidth').text());
if(w === 100) {
// new 100% item
if(total > 0 && total < 100 && lastItemWidth > 0 && lastItemWidth < 100) {
// last total was under 100, so last item didn't finish a row
$lastItem.addClass('rowError');
if(!$lastItem.hasClass('rowStart')) $lastItem.addClass('rowStop');
}
// start new total
total = 0;
} else {
// new partial width item
if(!total) {
$item.addClass('rowStart'); // starting a new row
numRows++;
}
$item.addClass('rowItem');
if(total + w > 100) {
// existing total plus this item makes it exceed 100% width
if($lastItem && lastItemWidth < 100) {
if($lastItem.hasClass('rowStart')) {
// last item started a single-item row under 100%
$lastItem.addClass('rowError');
} else {
// last item finished a multi-item row that didn't reach 100%
$lastItem.addClass('rowStop rowError');
}
}
// start our new row
$item.addClass('rowStart');
numRows++;
total = w;
} else if(total + w == 100) {
// this item plus previous item(s) add up to a 100% row
$item.addClass('rowStop');
total = 0; // new row will start on next iteration
} else {
// partial width item in the middle of a row
total += w;
}
}
$lastItem = $item;
lastItemWidth = w;
$item = $item.next('.asmListItem');
} while($item.length);
if($lastItem.length && lastItemWidth < 100) {
$lastItem.addClass('rowStop');
if(total > 0 && total < 100) {
$lastItem.addClass('rowError');
} else {
$lastItem.removeClass('rowError');
}
}
return numRows;
}
/**
* Setup the inline column-width adjustment feature in asmList <li> items
*
*/
function setupColumnWidth() {
var $percentElement = null;
var currentPct = 0;
var lastPageX = 0;
var lastPageY = 0;
var mousingActive = false;
var isDblClick = false;
var snapWithin = 9;
var snapWidth = 0;
function asmListItem($item) {
if(!$item.hasClass('asmListItem')) $item = $item.closest('.asmListItem');
return $item;
}
function columnWidthItem($item) {
if($item.hasClass('columnWidth')) return $item;
return $item.find('.columnWidth');
}
function getColumnWidth($item) {
$item = columnWidthItem($item);
return parseInt($item.text());
}
function getSnapWidth($item) {
$item = asmListItem($item);
var rowWidth = getRowWidth($item);
var itemWidth = getColumnWidth($item);
var snap;
if(rowWidth == 100) {
snap = itemWidth;
} else {
snap = 100 - (rowWidth - itemWidth);
}
return snap;
}
function getRowStartItem($item) {
$item = asmListItem($item);
if(!$item.hasClass('rowItem') || $item.hasClass('rowStart')) return $item;
var $prevItem = $item;
do {
$prevItem = $prevItem.prev('.rowItem');
} while($prevItem.length && !$prevItem.hasClass('rowStart'));
return $prevItem.length ? $prevItem : $item;
}
function getRowStopItem($item) {
$item = asmListItem($item);
if(!item.hasClass('rowItem') || $item.hasClass('rowStop')) return $item;
var $nextItem = $item;
do {
$nextItem = $nextItem.next('.rowItem');
} while($nextItem.length && !$nextItem.hasClass('rowStop'));
return $nextItem.length ? $nextItem : $item;
}
function getRowWidth($item) {
if(!$item.hasClass('rowItem')) return 100;
$item = getRowStartItem($item);
var total = getColumnWidth($item);
var $nextItem = $item;
var w = 0;
do {
$nextItem = $nextItem.next('.rowItem');
if(!$nextItem.length || $nextItem.hasClass('rowStart')) break;
w = getColumnWidth($nextItem);
if(total + w > 100) break;
total += w;
} while(total < 100 && !$nextItem.hasClass('rowStop'));
return total;
}
function setColumnWidth($item, columnWidth) {
var $parent;
if($item.hasClass('columnWidth')) {
$parent = $item.closest('.asmListItem');
} else {
$parent = $item;
$item = $item.find('.columnWidth');
}
if(snapWidth > 0) {
if(columnWidth > snapWidth && columnWidth - snapWidth <= snapWithin) {
columnWidth = snapWidth;
} else if(columnWidth < snapWidth && snapWidth - columnWidth <= snapWithin) {
columnWidth = snapWidth;
}
}
var pct = parseInt(columnWidth) + '%';
$item.text(pct);
var $columnWidthBar = $parent.find('.columnWidthBar');
var $columnWidthBarPct = $columnWidthBar.children('.columnWidthBarPct');
$columnWidthBar.css('width', columnWidth + '%')
if(columnWidth >= 90) {
$columnWidthBarPct.text('');
} else {
$columnWidthBarPct.text(pct);
}
}
function saveColumnWidth($item) {
var columnWidth = getColumnWidth($item);
var $li = $item.hasClass('asmListItem') ? $item : $item.closest('.asmListItem');
var url = './saveProperty';
var data = {
id: $('#Inputfield_id').val(),
property: 'columnWidth',
columnWidth: columnWidth,
field: parseInt($li.find('.columnWidth').attr('data-field'))
};
var $csrf = $('input._post_token');
data[$csrf.attr('name')] = $csrf.val();
$.post(url, data, function(result) {
if(result.success) {
if(result.value != columnWidth) setColumnWidth($item, result.value);
}
}, 'json');
}
function startColumnWidthBar($item) {
if(!$item.hasClass('asmListItem')) $item = $item.closest('.asmListItem');
if(isDblClick || !mousingActive) return;
var $columnWidthBar = $item.find('.columnWidthBar');
if($columnWidthBar.length) $columnWidthBar.remove();
var pct = getColumnWidth($item) + '%';
var $columnWidthBarPct = $("<span />").addClass('columnWidthBarPct').text(pct);
$columnWidthBar = $('<div />').addClass('columnWidthBar').append($columnWidthBarPct);
$columnWidthBar.appendTo($item);
$columnWidthBar.css('width', pct);
}
function stopColumnWidthBar($item) {
if(!$item.hasClass('asmListItem')) $item = $item.closest('.asmListItem');
var $columnWidthBar = $item.find('.columnWidthBar');
if(!$columnWidthBar.length) return;
$columnWidthBar.remove();
}
function setActive($item, active) {
var $list = $item.closest('.ui-sortable');
if(!$item.hasClass('columnWidth')) $item = $item.find('.columnWidth');
var $parent = $item.closest('.asmListItem');
if(active) {
if(mousingActive) return;
mousingActive = true;
$item.addClass('columnWidthActive');
$('body').addClass('columnWidthActive');
$item.siblings('.fieldType, .fieldInfo').css('opacity', 0.3);
$list.sortable('disable');
snapWidth = getSnapWidth($parent);
startColumnWidthBar($item);
} else {
if(!mousingActive) return;
mousingActive = false;
stopColumnWidthBar($item);
snapWidth = 0;
$item.removeClass('columnWidthActive');
$('body').removeClass('columnWidthActive');
$item.siblings('.fieldType, .fieldInfo').css('opacity', 1.0);
$list.sortable('enable');
}
}
var mouseMove = function(e) {
if(lastPageX && lastPageY) {
var diffX = e.pageX - lastPageX;
var diffY = e.pageY - lastPageY;
var diff = Math.abs(diffX) >= Math.abs(diffY) ? diffX : (diffY * -1);
if(diff === 0) return;
var pct = currentPct;
if(diff > 0 && pct < 100) pct++;
if(diff < 0 && pct > 10) pct--;
if(pct != currentPct) {
setColumnWidth($percentElement, pct);
currentPct = pct;
}
}
lastPageX = e.pageX;
lastPageY = e.pageY;
};
var mouseUp = function() {
$(document).off('mouseup', mouseUp);
$(document).off('mousemove', mouseMove);
saveColumnWidth($percentElement);
setActive($percentElement, false);
setupRows();
};
var mouseDown = function(e) {
$percentElement = $(this);
if($percentElement.hasClass('columnWidthOff')) return false;
setActive($percentElement, true);
currentPct = getColumnWidth($percentElement);
$(document).on('mouseup', mouseUp);
$(document).on('mousemove', mouseMove);
};
var mouseOut = function(e) {
if(mousingActive) return;
$(this).closest('.ui-sortable').sortable('enable');
};
var mouseOver = function(e) {
if(mousingActive) return;
$(this).closest('.ui-sortable').sortable('disable');
};
var dblClick = function(e) {
var $t = $(this);
isDblClick = true;
snapWidth = getSnapWidth($t);
if(snapWidth) {
setColumnWidth($t, snapWidth);
setupRows()
saveColumnWidth($t);
}
isDblClick = false;
};
/*
var toggleRequired = function() {
var $li = $(this).closest('.asmListItem');
var $a = $li.find('.asmListItemEdit').eq(0).children('a');
var url = $a.attr('href');
var $inputRequired = $li.find('.inputRequired');
var value = $inputRequired.text();
var data = {
save_property: 'required',
required: (value.indexOf('*') > -1 ? 0 : 1)
};
$inputRequired.html("<i class='fa fa-spin fa-spinner fa-fw'></i>");
$.post(url, data, function(result) {
$inputRequired.text('');
if(result.success) {
$inputRequired.text(result.value);
}
}, 'json');
};
*/
var $inputfield = $('#wrap_fieldgroup_fields'); // Inputfield wrapping element
var $select = $('#fieldgroup_fields'); // original (hidden) select
$inputfield
//.on('dblclick', '.fieldType', toggleRequired)
.on('mousedown', '.columnWidth', mouseDown)
.on('mouseover', '.columnWidth', mouseOver)
.on('mouseout', '.columnWidth', mouseOut)
.on('dblclick', '.columnWidth', dblClick)
.on('asm-ready', function() {
// triggered by manual inline call to ProcessTemplateInitFields() function
setupRows()
});
$select.on('change', function(e, eventData) {
// eventData is provided by a change event triggered from asmSelect plugin after a sort or select event
if(typeof eventData == "undefined") return;
if(typeof eventData.type == "undefined") return;
if(eventData.type === 'add') $inputfield.addClass('field-added');
if(eventData.type != 'sort') return;
// update row identifications after any changes
setupRows();
// save changes to order
var value = $(this).val();
var url = './saveProperty';
var data = {
id: $('#Inputfield_id').val(),
property: 'fieldgroup_fields',
fieldgroup_fields: value,
_fieldgroup_fields_changed: 'changed'
};
var $csrf = $('input._post_token');
data[$csrf.attr('name')] = $csrf.val();
$.post(url, data, function(result) {
// we just silently post
}, 'json');
});
}
setupColumnWidth();
}
/********************************************************************/
function ProcessTemplate() {
/**
* Access/Roles
*
*/
function setupAccessTab() {
var redirectLoginClick = function() {
if($("#redirectLogin_-1:checked").length > 0) {
$("#wrap_redirectLoginURL").slideDown();
} else {
$("#wrap_redirectLoginURL").hide();
}
}
var adjustAccessFields = function() {
var items = [ '#wrap_redirectLogin', '#wrap_guestSearchable' ];
if($("#roles_37").is(":checked")) {
$("#wrap_redirectLoginURL").hide();
$(items).each(function(key, value) {
var $item = $(value);
if($item.is(".InputfieldStateCollapsed")) {
$item.hide();
} else {
$item.slideUp();
}
});
$('input.viewRoles').prop('checked', true);
} else {
$(items).each(function(key, value) {
var $item = $(value);
if($item.is(":visible")) return;
$item.slideDown("fast", function() {
if(!$item.is(".InputfieldStateCollapsed")) return;
$item.find(".InputfieldStateToggle").trigger('click');
});
});
redirectLoginClick();
}
};
$("#wrap_useRoles input").on('click', function() {
if($("#useRoles_1:checked").length > 0) {
$("#wrap_redirectLogin").hide();
$("#wrap_guestSearchable").hide();
$("#useRolesYes").slideDown(400, function(){ $(this).css('overflow','visible') });
$("input.viewRoles").prop('checked', true);
} else {
$("#useRolesYes").slideUp();
$("#accessOverrides:visible").slideUp();
}
});
if($("#useRoles_0:checked").length > 0) {
$("#useRolesYes").hide();
$("#accessOverrides").hide();
}
$("#roles_37").on('click', adjustAccessFields);
$("input.viewRoles:not(#roles_37)").on('click', function() {
// prevent unchecking 'view' for other roles when 'guest' role is checked
var $t = $(this);
if($("#roles_37").is(":checked")) return false;
return true;
});
// when edit checked or unchecked, update the createRoles to match since they are dependent
var editRolesClick = function() {
var $editRoles = $("#roles_editor input.editRoles");
var numChecked = 0;
$editRoles.each(function() {
var $t = $(this);
if($t.is(":disabled")) return false;
var $createRoles = $("input.createRoles[value=" + $t.attr('value') + "]");
if($t.is(":checked")) {
numChecked++;
$createRoles.prop('disabled', false);
} else {
$createRoles.prop('checked', false).prop('disabled', true);
}
});
if(numChecked) {
$("#accessOverrides").slideDown();
} else {
$("#accessOverrides").hide();
}
return true;
};
var editOrAddClick = function() {
var numChecked = 0;
$("#roles_editor input.editRoles").each(function() {
if(!$(this).is(":disabled") && $(this).is(":checked")) numChecked++;
});
$("#roles_editor input.addRoles").each(function() {
if(!$(this).is(":disabled") && $(this).is(":checked")) numChecked++;
});
numChecked > 0 ? $("#wrap_noInherit").slideDown() : $("#wrap_noInherit").hide();
};
$("#roles_editor input.editRoles").on('click', editRolesClick);
$("#roles_editor input.editRoles, #roles_editor input.addRoles").on('click', editOrAddClick);
editRolesClick();
editOrAddClick();
$("#wrap_redirectLogin input").on('click', redirectLoginClick);
adjustAccessFields();
redirectLoginClick();
}
/**
* Export and import functions
*
*/
function setupImportExport() {
$("#export_data").on('click', function() { $(this).select(); });
$(".import_toggle input[type=radio]").on('change', function() {
var $table = $(this).parents('p.import_toggle').next('table');
var $fieldset = $(this).closest('.InputfieldFieldset');
if($(this).is(":checked") && $(this).val() == 0) {
$table.hide();
$fieldset.addClass('ui-priority-secondary');
} else {
$table.show();
$fieldset.removeClass('ui-priority-secondary');
}
}).trigger('change');
$("#import_form table td:not(:first-child)").each(function() {
var html = $(this).html();
var refresh = false;
if(html.substring(0,1) == '{') {
html = '<pre>' + html + '</pre>';
html = html.replace(/<br>/g, "");
refresh = true;
}
if(refresh) $(this).html(html);
});
}
/**
* Initialization
*
*/
function init() {
$("#wrap_filter_system input").on('click', function() {
$(this).parents("form").trigger('submit');
});
$("#filter_field").on('change', function() {
$(this).parents("form").trigger('submit');
});
setupAccessTab();
// instantiate the WireTabs
var $templateEdit = $("#ProcessTemplateEdit");
if($templateEdit.length > 0) {
$templateEdit.find('script').remove();
$templateEdit.WireTabs({
items: $(".Inputfields li.WireTab"),
id: 'TemplateEditTabs',
skipRememberTabIDs: ['WireTabDelete']
});
}
setupImportExport();
$("#fieldgroup_fields").on('change', function() {
$("#_fieldgroup_fields_changed").val('changed');
});
}
init();
}
function ProcessTemplateInitFields() {
$('#wrap_fieldgroup_fields').trigger('asm-ready');
}
$(document).ready(function() {
ProcessTemplate();
ProcessTemplateAsmSelect();
});