49 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			49 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| function convertToSlug(Text) {
 | |
|     return Text
 | |
|         .toLowerCase()
 | |
|         .replace(/[^\w ]+/g, '')
 | |
|         .replace(/ +/g, '-')
 | |
|         ;
 | |
| }
 | |
| 
 | |
| 
 | |
| const $source = $('input[name=name]');
 | |
| const $result = $('input[name=slug]');
 | |
| 
 | |
| const typeHandler = function (e) {
 | |
|     $result.val(convertToSlug(e.target.value));
 | |
| }
 | |
| 
 | |
| $source.on('input', typeHandler) // register for oninput
 | |
| $source.on('propertychange', typeHandler) // for IE8
 | |
| 
 | |
| window.addEventListener('load', function () {
 | |
| 
 | |
|     function addRemoveEventListener(widgetElement) {
 | |
|         widgetElement.querySelectorAll('.array-remove').forEach(function (element) {
 | |
|             element.addEventListener('click', function () {
 | |
|                 this.parentNode.parentNode.remove();
 | |
|             });
 | |
|         });
 | |
|     }
 | |
| 
 | |
|     document.querySelectorAll('.dynamic-array-widget').forEach(function (widgetElement) {
 | |
| 
 | |
|         addRemoveEventListener(widgetElement);
 | |
| 
 | |
|         widgetElement.querySelector('.add-array-item').addEventListener('click', function () {
 | |
|             var first = widgetElement.querySelector('.array-item');
 | |
|             var newElement = first.cloneNode(true);
 | |
|             var id_parts = newElement.querySelector('input').getAttribute('id').split('_');
 | |
|             var id = id_parts.slice(0, -1).join('_') + '_' + String(parseInt(id_parts.slice(-1)[0]) + 1);
 | |
|             newElement.querySelector('input').setAttribute('id', id);
 | |
|             newElement.querySelector('input').value = '';
 | |
| 
 | |
|             addRemoveEventListener(newElement);
 | |
|             first.parentElement.insertBefore(newElement, first.parentNode.lastChild);
 | |
|         });
 | |
| 
 | |
|     });
 | |
| 
 | |
| });
 | 
