47544fc1ed0736169a1976613c8f16329e0478a7
[Packages/TYPO3.CMS.git] / typo3 / js / constantEditor.js
1 /**
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14
15 /**
16 * observes clicks edit icons and make inline edit
17 *
18 * @author Steffen Kamper
19 * @author Jeff Segars
20 */
21
22 var ModuleConstantEditor = Class.create({
23 /**
24 * initially register event listeners
25 */
26 initialize: function() {
27
28 // initialize event listeners
29 Event.observe(document, 'dom:loaded', function(){
30 $$('.typo3-tstemplate-ceditor-control').invoke('observe', 'click', this.changeProperty);
31 $$('.typo3-tstemplate-ceditor-color-select').invoke('observe', 'change', this.updateColorFromSelect);
32 $$('.typo3-tstemplate-ceditor-color-input').invoke('observe', 'change', this.updateColorFromInput);
33 }.bind(this));
34
35 },
36
37 /**
38 * initially register event listeners
39 */
40 changeProperty: function(event) {
41 var editIcon = Event.element(event);
42 var paramName = editIcon.readAttribute('rel');
43 var defaultDiv = $('defaultTS-'+paramName);
44 var userDiv = $('userTS-'+paramName);
45 var checkBox = $('check[' + paramName + ']');
46
47 if (editIcon.hasClassName('editIcon')) {
48 $(defaultDiv).hide();
49 $(userDiv).show().setStyle({backgroundColor: '#fdf8bd'});
50 $(checkBox).enable().setValue('checked');
51 }
52
53 if (editIcon.hasClassName('undoIcon')) {
54 $(userDiv).hide();
55 $(defaultDiv).show();
56 $(checkBox).setValue('').disable();
57 }
58 },
59
60 updateColorFromSelect: function(event) {
61 var colorSelect = Event.element(event);
62 var paramName = colorSelect.readAttribute('rel');
63
64 var colorValue = colorSelect.getValue();
65 var colorInput = $('input-'+paramName);
66 var colorBox = $('colorbox-'+paramName);
67
68 $(colorInput).setValue(colorValue);
69 $(colorBox).setStyle({backgroundColor: colorValue});
70 },
71
72 updateColorFromInput: function(event) {
73 var colorInput = Event.element(event);
74 var paramName = colorInput.readAttribute('rel');
75
76 var colorValue = colorInput.getValue();
77 var colorBox = $('colorbox-'+paramName);
78 var colorSelect = $('select-'+paramName);
79
80 $(colorBox).setStyle({backgroundColor: colorValue});
81
82 $(colorSelect).childElements().each(function(option) {
83 if (option.value === colorValue) {
84 option.selected = true;
85 } else {
86 option.selected = false;
87 }
88 });
89 }
90
91 });
92
93
94 var TYPO3ModuleConstantEditor = new ModuleConstantEditor();