xsnippet logotype

xsnippet

#362681, Untitled [ JavaScript ]

by Guest
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
console.clear();

'use strict';

function validateText(value) {
	return value !== '' ? true : false;
}

function saveValue(value) {
	console.log('save to server: ' + value);
}

$('body').on('click', '[editable]', function(event) {
	event.preventDefault();

	var $element = $(this);

	var events = {
		aftersave: $element.attr('editable-aftersave') ? $element.attr('editable-aftersave') : null,
		beforesave: $element.attr('editable-beforesave') ? $element.attr('editable-beforesave') : null
	};

	var type = $element.attr('editable');

	function endEdit() {
		$element
			.insertAfter(this)
			.text( $(this).val() );

		if (events.aftersave)
			window[events.aftersave]($(this).val());

		$(this).remove();
	}

	$('<input>')
		.insertAfter($element)
		.attr('type', type)
		.val( $element.text() )
		.focus()
		.select()
		.on('keyup', function(event) {
			if (event.which === 13) {
				if (events.beforesave) {
					var result = window[events.beforesave]($(this).val());

					if (result) {
						endEdit.call(this);
					}
				} else {
					endEdit.call(this);
				}				
			} else if (event.which === 27) {
				$(this).trigger('blur');
			}
		})

	$('<button>')
	.insertAfter($('<input>'))
	.css

		.on('blur', function(event) {
			$element.insertAfter(this);
			$(this).remove();
		});

	$element.remove();
});