mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-08 07:47:00 +02:00
Code Issues Releases Wiki Activity

Update the column width slider in the fields list in ProcessTemplate to work more easily. I'm talking about the part where you click and hold the percent and then drag your mouse left/right or up/down to adjust the column width value. It's now using 5% increments (plus 33%, 34% and 66%), and [when or if needed] you can now double click the percent to open the dedicated range slider in a modal, for more specific column width numbers.

Browse Source
This commit is contained in:
Ryan Cramer
2024-08-23 14:20:38 -04:00
parent 95bd1d426c
commit e51ece23fe
5 changed files with 99 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
wire/modules/Process/ProcessField/ProcessField.js
View File

@@ -22,9 +22,8 @@ $(document).ready(function() {
if(showIf && showIf.length > 0) tpl = "<i class='fa fa-question-circle'></i>" + tpl;
if(required) tpl = "<i class='fa fa-asterisk'></i>" + tpl;
var w = parseInt($columnWidth.val());
if(w == 100) w = 0;
if(w < 1 || w > 100) w = 100;
if(w > 0) w = w + '%';
else w = '';
tpl = tpl.replace('%', w);
$asmListItemStatus.val(tpl);

2
wire/modules/Process/ProcessField/ProcessField.min.js vendored
View File

@@ -1 +1 @@
$(document).ready(function(){var fieldFilterFormChange=function(){$("#field_filter_form").trigger("submit")};$("#templates_id").on("change",fieldFilterFormChange);$("#fieldtype").on("change",fieldFilterFormChange);$("#wrap_show_system input").on("click",fieldFilterFormChange);var $asmListItemStatus=$("#asmListItemStatus");var $columnWidth=$("#columnWidth");function setAsmListItemStatus(){var tpl=$asmListItemStatus.attr("data-tpl");if(!tpl)return;var showIf=$("#Inputfield_showIf").val();var required=$("#Inputfield_required").is(":checked")?true:false;if(showIf&&showIf.length>0)tpl="<i class='fa fa-question-circle'></i>"+tpl;if(required)tpl="<i class='fa fa-asterisk'></i>"+tpl;var w=parseInt($columnWidth.val());if(w==100)w=0;if(w>0)w=w+"%";else w="";tpl=tpl.replace("%",w);$asmListItemStatus.val(tpl)}$("#Inputfield_showIf").on("change",setAsmListItemStatus);$("#Inputfield_required").on("change",setAsmListItemStatus);setAsmListItemStatus();$(".columnWidthInput").each(function(){var $columnWidth=$(this);var $slider=$("<div class='InputfieldColumnWidthSlider'></div>");var columnWidthVal=parseInt($columnWidth.val());$columnWidth.val(columnWidthVal+"%");$columnWidth.after($slider);$slider.slider({range:"min",min:10,max:100,value:parseInt($columnWidth.val()),slide:function(e,ui){var val=ui.value+"%";$columnWidth.val(val).trigger("change");if($columnWidth.prop("id")==="columnWidth")setAsmListItemStatus()}});$columnWidth.on("change",function(){var val=parseInt($(this).val());if(val>100)val=100;if(val<10)val=10;$(this).val(val+"%");$slider.slider("option","value",val)})});var $fieldEdit=$("#ProcessFieldEdit");if($fieldEdit.length>0&&$("li.WireTab").length>1){$fieldEdit.find("script").remove();$fieldEdit.WireTabs({items:$(".Inputfields li.WireTab"),id:"FieldEditTabs",skipRememberTabIDs:["delete"]})}$("#fieldgroupContextSelect").on("change",function(){var field_id=$("#Inputfield_id").val();var fieldgroup_id=$(this).val();var href="./edit?id="+field_id;if(fieldgroup_id>0)href+="&fieldgroup_id="+fieldgroup_id;window.location=href});$("a.fieldFlag").on("click",function(){if($(this).attr("href")==="#")return false});$("#export_data").on("click",function(){$(this).trigger("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");$("#wrap_Inputfield_send_templates").find(":input").on("change",function(){$("#_send_templates_changed").val("changed")});$("#viewRoles_37").on("click",function(){if($(this).is(":checked"))$("input.viewRoles").prop("checked",true)});$("input.viewRoles:not(#viewRoles_37)").on("click",function(){if($("#viewRoles_37").is(":checked"))return false;return true});$("input.editRoles:not(:disabled)").on("click",function(){if($(this).is(":checked")){$(this).closest("tr").find("input.viewRoles").prop("checked",true)}});$(".override-select-all").on("click",function(){var $checkboxes=$(this).closest("table").find("input[type=checkbox]");if($(this).hasClass("override-checked")){$checkboxes.prop("checked",false);$(this).removeClass("override-checked")}else{$checkboxes.prop("checked",true);$(this).addClass("override-checked")}return false});$(document).on("pw-modal-closed","a",function(e,ui){if(!$("#tab-overrides").is(":visible"))return;Inputfields.reload("#Inputfield_overrides_table")})});
$(document).ready(function(){var fieldFilterFormChange=function(){$("#field_filter_form").trigger("submit")};$("#templates_id").on("change",fieldFilterFormChange);$("#fieldtype").on("change",fieldFilterFormChange);$("#wrap_show_system input").on("click",fieldFilterFormChange);var $asmListItemStatus=$("#asmListItemStatus");var $columnWidth=$("#columnWidth");function setAsmListItemStatus(){var tpl=$asmListItemStatus.attr("data-tpl");if(!tpl)return;var showIf=$("#Inputfield_showIf").val();var required=$("#Inputfield_required").is(":checked")?true:false;if(showIf&&showIf.length>0)tpl="<i class='fa fa-question-circle'></i>"+tpl;if(required)tpl="<i class='fa fa-asterisk'></i>"+tpl;var w=parseInt($columnWidth.val());if(w<1||w>100)w=100;if(w>0)w=w+"%";tpl=tpl.replace("%",w);$asmListItemStatus.val(tpl)}$("#Inputfield_showIf").on("change",setAsmListItemStatus);$("#Inputfield_required").on("change",setAsmListItemStatus);setAsmListItemStatus();$(".columnWidthInput").each(function(){var $columnWidth=$(this);var $slider=$("<div class='InputfieldColumnWidthSlider'></div>");var columnWidthVal=parseInt($columnWidth.val());$columnWidth.val(columnWidthVal+"%");$columnWidth.after($slider);$slider.slider({range:"min",min:10,max:100,value:parseInt($columnWidth.val()),slide:function(e,ui){var val=ui.value+"%";$columnWidth.val(val).trigger("change");if($columnWidth.prop("id")==="columnWidth")setAsmListItemStatus()}});$columnWidth.on("change",function(){var val=parseInt($(this).val());if(val>100)val=100;if(val<10)val=10;$(this).val(val+"%");$slider.slider("option","value",val)})});var $fieldEdit=$("#ProcessFieldEdit");if($fieldEdit.length>0&&$("li.WireTab").length>1){$fieldEdit.find("script").remove();$fieldEdit.WireTabs({items:$(".Inputfields li.WireTab"),id:"FieldEditTabs",skipRememberTabIDs:["delete"]})}$("#fieldgroupContextSelect").on("change",function(){var field_id=$("#Inputfield_id").val();var fieldgroup_id=$(this).val();var href="./edit?id="+field_id;if(fieldgroup_id>0)href+="&fieldgroup_id="+fieldgroup_id;window.location=href});$("a.fieldFlag").on("click",function(){if($(this).attr("href")==="#")return false});$("#export_data").on("click",function(){$(this).trigger("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");$("#wrap_Inputfield_send_templates").find(":input").on("change",function(){$("#_send_templates_changed").val("changed")});$("#viewRoles_37").on("click",function(){if($(this).is(":checked"))$("input.viewRoles").prop("checked",true)});$("input.viewRoles:not(#viewRoles_37)").on("click",function(){if($("#viewRoles_37").is(":checked"))return false;return true});$("input.editRoles:not(:disabled)").on("click",function(){if($(this).is(":checked")){$(this).closest("tr").find("input.viewRoles").prop("checked",true)}});$(".override-select-all").on("click",function(){var $checkboxes=$(this).closest("table").find("input[type=checkbox]");if($(this).hasClass("override-checked")){$checkboxes.prop("checked",false);$(this).removeClass("override-checked")}else{$checkboxes.prop("checked",true);$(this).addClass("override-checked")}return false});$(document).on("pw-modal-closed","a",function(e,ui){if(!$("#tab-overrides").is(":visible"))return;Inputfields.reload("#Inputfield_overrides_table")})});

4
wire/modules/Process/ProcessField/ProcessField.module
View File

@@ -1183,9 +1183,11 @@ class ProcessField extends Process implements ConfigurableModule {
$field = $modules->get('InputfieldHidden');
$field->attr('id+name', 'asmListItemStatus');
$field->attr('class', 'asmListItemStatus');
$width = $this->field->columnWidth;
$field->attr('data-tpl',
// % gets replaced with live percent
"<span class='ui-priority-secondary'>" . $this->field->type->shortName . "</span> %"
"<span>" . $this->field->type->shortName . "</span> " .
"<span class='columnWidth ui-priority-secondary' data-was='$width' data-field='{$this->field->id}'>%</span>"
);
$field->attr('value', '');
$form->append($field);

99
wire/modules/Process/ProcessTemplate/ProcessTemplate.js
View File

@@ -96,6 +96,8 @@ function ProcessTemplateAsmSelect() {
var isDblClick = false;
var snapWithin = 9;
var snapWidth = 0;
var useSnapWidth = false;
var useRails = true;
function asmListItem($item) {
if(!$item.hasClass('asmListItem')) $item = $item.closest('.asmListItem');
@@ -112,6 +114,31 @@ function ProcessTemplateAsmSelect() {
return parseInt($item.text());
}
/**
* Given a width (10-100), pad it to the nearest 5% or nearest predefined (33%, etc.)
*
* @param width
* @returns {number|*}
*
*/
function getRailWidth(width) {
if(width >= 96) return 100;
if(width <= 10) return 10;
if(width == 33 || width == 34 || width == 66) return width;
width = width.toString();
var w1 = parseInt(width.substring(0,1));
var w2 = parseInt(width.substring(1));
if(w2 >= 7) {
w1++; w2 = 0;
} else if(w2 >= 4) {
w2 = 5;
} else if(w2 >= 0) {
w2 = 0;
}
return parseInt(w1.toString() + w2.toString());
}
// deprecated
function getSnapWidth($item) {
$item = asmListItem($item);
var rowWidth = getRowWidth($item);
@@ -169,19 +196,22 @@ function ProcessTemplateAsmSelect() {
$parent = $item;
$item = $item.find('.columnWidth');
}
if(snapWidth > 0) {
if(useSnapWidth && snapWidth > 0) {
if(columnWidth > snapWidth && columnWidth - snapWidth <= snapWithin) {
columnWidth = snapWidth;
} else if(columnWidth < snapWidth && snapWidth - columnWidth <= snapWithin) {
columnWidth = snapWidth;
}
}
if(useRails) columnWidth = getRailWidth(columnWidth);
var pct = parseInt(columnWidth) + '%';
$item.text(pct);
var $columnWidthBar = $parent.find('.columnWidthBar');
var $columnWidthBarPct = $columnWidthBar.children('.columnWidthBarPct');
$columnWidthBar.css('transition', 'width 0.1s');// ease-in');
$columnWidthBar.css('width', columnWidth + '%')
if(columnWidth >= 90) {
$columnWidthBarPct.text(pct);
if(columnWidth > 95) {
$columnWidthBarPct.text('');
} else {
$columnWidthBarPct.text(pct);
@@ -239,7 +269,7 @@ function ProcessTemplateAsmSelect() {
$('body').addClass('columnWidthActive');
$item.siblings('.fieldType, .fieldInfo').css('opacity', 0.3);
$list.sortable('disable');
snapWidth = getSnapWidth($parent);
if(useSnapWidth) snapWidth = getSnapWidth($parent);
startColumnWidthBar($item);
} else {
if(!mousingActive) return;
@@ -253,15 +283,39 @@ function ProcessTemplateAsmSelect() {
}
}
// returns all widths in an array. also disables the useRails option when
// any existing width does not line up with our predefined rail size
function getAllWidths($inputfield) {
var widths = [];
$inputfield.find('.columnWidth').each(function() {
var width = parseInt($(this).text());
widths.push(width);
if(useRails && width != 66 && width != 33 && width != 34) {
if(width % 5 !== 0) useRails = false;
}
});
useSnapWidth = !useRails;
return widths;
}
var mouseMove = function(e) {
if(lastPageX && lastPageY) {
var diffX = e.pageX - lastPageX;
var diffY = e.pageY - lastPageY;
var diffX = (e.pageX - lastPageX) / 3;
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--;
var detectMax = 10;
var detectMin = 1;
var d = Math.abs(diff);
if(useRails && d >= detectMax) {
var moveAmt = 5;
if(diff > 0 && pct < 100) pct += diff > detectMax ? moveAmt : 1;
if(diff < 0 && pct > 10) pct -= d > detectMax ? moveAmt : 1;
} else if(d >= detectMin) {
if(diff > 0 && pct < 100) pct++;
if(diff < 0 && pct > 10) pct--;
}
if(pct != currentPct) {
setColumnWidth($percentElement, pct);
currentPct = pct;
@@ -279,8 +333,27 @@ function ProcessTemplateAsmSelect() {
setupRows();
};
var mouseDblClick = function($percentElement) {
var $editLink = $percentElement.closest('li').find('.asmListItemEdit').eq(0).children('a');
var href = $editLink.attr('href'); // geet the url to update
$editLink.attr('href', href + '#find-columnWidth'); // update url to find the columnWidth inputfield
setTimeout(function() { $editLink.attr('href', href); }, 1000); // restore previous url
$editLink.trigger('click');
};
var isMousedown = false;
var mouseDown = function(e) {
$percentElement = $(this);
if(isMousedown) {
isMousedown = false;
mouseDblClick($percentElement);
$percentElement.trigger('mouseup'); // prevents a asm sort from starting
return;
}
isMousedown = true;
setTimeout(function() { isMousedown = false; }, 500);
if($percentElement.hasClass('columnWidthOff')) return false;
setActive($percentElement, true);
currentPct = getColumnWidth($percentElement);
@@ -298,9 +371,13 @@ function ProcessTemplateAsmSelect() {
$(this).closest('.ui-sortable').sortable('disable');
};
/*
var dblClick = function(e) {
var $t = $(this);
isDblClick = true;
console.log('dblclick');
var $editLink = $t.closest('li').find('.asmListItemEdit').eq(0).children('a');
$editLink.trigger('click');
snapWidth = getSnapWidth($t);
if(snapWidth) {
setColumnWidth($t, snapWidth);
@@ -309,6 +386,7 @@ function ProcessTemplateAsmSelect() {
}
isDblClick = false;
};
*/
/*
var toggleRequired = function() {
@@ -336,14 +414,17 @@ function ProcessTemplateAsmSelect() {
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()
// sets the useRails toggle
getAllWidths($inputfield);
})
.on('asmItemUpdated', function() {
setupRows();
});
$select.on('change', function(e, eventData) {

2
wire/modules/Process/ProcessTemplate/ProcessTemplate.min.js vendored
View File

File diff suppressed because one or more lines are too long