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

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();
});