Context Navigation

← Previous Changeset
Next Changeset →

Changeset 1065

Timestamp:

10/06/08 11:13:33 (2 months ago)

Author:

nicholasbs

Message:

Fix formatting and tabs

Files:

: 1 modified

trunk/modules/InlineStyler/InlineStyler.js (modified) (3 diffs)

Legend:

: Unmodified
: Added
: Removed

trunk/modules/InlineStyler/InlineStyler.js

r1044	r1065
1	1	Xinha.InlineStyler = function(element, editor, doc)
2	2	{
3		this.element = element;
4		this.editor = editor;
5		this.doc = doc ? doc : document;
6		this.inputs = {
7		styles : {},
8		aux : {}
9		}
10		this.styles = {};
11		this.auxData = {}; //units and such
	3	this.element = element;
	4	this.editor = editor;
	5	this.doc = doc ? doc : document;
	6	this.inputs = {
	7	styles : {},
	8	aux : {}
	9	}
	10	this.styles = {};
	11	this.auxData = {}; //units and such
12	12	}
13	13
14	14	Xinha.InlineStyler.getLength = function(value)
15	15	{
16		var len = parseInt(value);
17		if (isNaN(len))
18		{
19		len = "";
20		}
21		return len;
	16	var len = parseInt(value);
	17	if (isNaN(len))
	18	{
	19	len = "";
	20	}
	21	return len;
22	22	};
23	23
…	…
25	25	Xinha.InlineStyler.prototype.applyStyle = function(params)
26	26	{
27		var element = this.element;
28		var style = element.style;
29
30		for (var i in params)
31		{
32		if (typeof params[i] == 'function')
33		continue;
34		var val = params[i].value;
35		switch (i)
36		{
37		case "backgroundImage":
38		if (/\S/.test(val))
39		{
40		style.backgroundImage = "url(" + val + ")";
41		}
42		else
43		{
44		style.backgroundImage = "none";
45		}
46		break;
47		case "borderCollapse":
48		style.borderCollapse = params[i].checked ? "collapse" : "";
49		break;
50		case "width":
51		if (/\S/.test(val))
52		{
53		style.width = val + this.inputs.aux["widthUnit"].value;
54		}
55		else
56		{
57		style.width = "";
58		}
59		break;
60		case "height":
61		if (/\S/.test(val))
62		{
63		style.height = val + this.inputs.aux["heightUnit"].value;
64		}
65		else
66		{
67		style.height = "";
68		}
69		break;
70		case "textAlign":
71		if (val == "char")
72		{
73		var ch = this.inputs.aux["textAlignChar"].value;
74		if (ch == '"')
75		{
76		ch = '\\"';
77		}
78		style.textAlign = '"' + ch + '"';
79		}
80		else
81		if (val == "-")
82		{
83		style.textAlign = "";
84		}
85		else
86		{
87		style.textAlign = val;
88		}
89		break;
90		case "verticalAlign":
91		element.vAlign = "";
92		if (val == "-")
93		{
94		style.verticalAlign = "";
95
96		}
97		else
98		{
99		style.verticalAlign = val;
100		}
101		break;
102		case "float":
103		if (Xinha.is_ie) {
104		style.styleFloat = val;
105		}
106		else {
107		style.cssFloat = val;
108		}
109		break;
110		case "borderWidth":
111		var borderWidthUnit = this.inputs.aux["heightUnit"].value;
112		style[i] = val + (borderWidthUnit) ? borderWidthUnit : 'px';
113		break;
114		default:
115		style[i] = val;
116		break;
117		// case "f_st_margin":
118		// style.margin = val + "px";
119		// break;
120		// case "f_st_padding":
121		// style.padding = val + "px";
122		// break;
123		}
124		}
	27	var element = this.element;
	28	var style = element.style;
	29
	30	for (var i in params)
	31	{
	32	if (typeof params[i] == 'function')
	33	continue;
	34	var val = params[i].value;
	35	switch (i)
	36	{
	37	case "backgroundImage":
	38	if (/\S/.test(val))
	39	{
	40	style.backgroundImage = "url(" + val + ")";
	41	}
	42	else
	43	{
	44	style.backgroundImage = "none";
	45	}
	46	break;
	47	case "borderCollapse":
	48	style.borderCollapse = params[i].checked ? "collapse" : "";
	49	break;
	50	case "width":
	51	if (/\S/.test(val))
	52	{
	53	style.width = val + this.inputs.aux["widthUnit"].value;
	54	}
	55	else
	56	{
	57	style.width = "";
	58	}
	59	break;
	60	case "height":
	61	if (/\S/.test(val))
	62	{
	63	style.height = val + this.inputs.aux["heightUnit"].value;
	64	}
	65	else
	66	{
	67	style.height = "";
	68	}
	69	break;
	70	case "textAlign":
	71	if (val == "char")
	72	{
	73	var ch = this.inputs.aux["textAlignChar"].value;
	74	if (ch == '"')
	75	{
	76	ch = '\\"';
	77	}
	78	style.textAlign = '"' + ch + '"';
	79	}
	80	else
	81	if (val == "-")
	82	{
	83	style.textAlign = "";
	84	}
	85	else
	86	{
	87	style.textAlign = val;
	88	}
	89	break;
	90	case "verticalAlign":
	91	element.vAlign = "";
	92	if (val == "-")
	93	{
	94	style.verticalAlign = "";
	95
	96	}
	97	else
	98	{
	99	style.verticalAlign = val;
	100	}
	101	break;
	102	case "float":
	103	if (Xinha.is_ie) {
	104	style.styleFloat = val;
	105	}
	106	else {
	107	style.cssFloat = val;
	108	}
	109	break;
	110	case "borderWidth":
	111	var borderWidthUnit = this.inputs.aux["heightUnit"].value;
	112	style[i] = val + (borderWidthUnit) ? borderWidthUnit : 'px';
	113	break;
	114	default:
	115	style[i] = val;
	116	break;
	117	// case "f_st_margin":
	118	// style.margin = val + "px";
	119	// break;
	120	// case "f_st_padding":
	121	// style.padding = val + "px";
	122	// break;
	123	}
	124	}
125	125	};
126	126
127	127	Xinha.InlineStyler.prototype.createStyleLayoutFieldset = function()
128	128	{
129		var self = this;
130		var editor = this.editor;
131		var doc = this.doc;
132		var el = this.element;
133		var fieldset = doc.createElement("fieldset");
134		var legend = doc.createElement("legend");
135		fieldset.appendChild(legend);
136		legend.innerHTML = Xinha._lc("Layout", "TableOperations");
137		var table = doc.createElement("table");
138		fieldset.appendChild(table);
139		table.style.width = "100%";
140		var tbody = doc.createElement("tbody");
141		table.appendChild(tbody);
142
143		var tagname = el.tagName.toLowerCase();
144		var tr, td, input, select, option, options, i;
145
146		if (tagname != "td" && tagname != "tr" && tagname != "th")
147		{
148		tr = doc.createElement("tr");
149		tbody.appendChild(tr);
150		td = doc.createElement("td");
151		td.className = "label";
152		tr.appendChild(td);
153		td.innerHTML = Xinha._lc("Float", "TableOperations") + ":";
154		td = doc.createElement("td");
155		tr.appendChild(td);
156		select = doc.createElement("select");
157		td.appendChild(select);
158		this.inputs.styles['float'] = select;
159
160		options = ["None", "Left", "Right"];
161		for (var i = 0; i < options.length; ++i)
162		{
163		var Val = options[i];
164		var val = options[i].toLowerCase();
165		option = doc.createElement("option");
166		option.innerHTML = Xinha._lc(Val, "TableOperations");
167		option.value = val;
168		if (Xinha.is_ie) {
169		option.selected = (("" + el.style.styleFloat).toLowerCase() == val);
170		}
171		else {
172		option.selected = (("" + el.style.cssFloat).toLowerCase() == val);
173		}
174		select.appendChild(option);
175		}
176		}
177
178		tr = doc.createElement("tr");
179		tbody.appendChild(tr);
180		td = doc.createElement("td");
181		td.className = "label";
182		tr.appendChild(td);
183		td.innerHTML = Xinha._lc("Width", "TableOperations") + ":";
184		td = doc.createElement("td");
185		tr.appendChild(td);
186		input = doc.createElement("input");
187		input.type = "text";
188		input.value = Xinha.InlineStyler.getLength(el.style.width);
189		input.size = "5";
190		this.inputs.styles['width'] = input;
191		input.style.marginRight = "0.5em";
192		td.appendChild(input);
193		select = doc.createElement("select");
194		this.inputs.aux['widthUnit'] = select;
195		option = doc.createElement("option");
196		option.innerHTML = Xinha._lc("percent", "TableOperations");
197		option.value = "%";
198		option.selected = /%/.test(el.style.width);
199		select.appendChild(option);
200		option = doc.createElement("option");
201		option.innerHTML = Xinha._lc("pixels", "TableOperations");
202		option.value = "px";
203		option.selected = /px/.test(el.style.width);
204		select.appendChild(option);
205		td.appendChild(select);
206
207		select.style.marginRight = "0.5em";
208		td.appendChild(doc.createTextNode(Xinha._lc("Text align", "TableOperations") + ":"));
209		select = doc.createElement("select");
210		select.style.marginLeft = select.style.marginRight = "0.5em";
211		td.appendChild(select);
212		this.inputs.styles['textAlign'] = select;
213		options = ["Left", "Center", "Right", "Justify", "-"];
214		if (tagname == "td")
215		{
216		options.push("Char");
217		}
218		input = doc.createElement("input");
219		this.inputs.aux['textAlignChar'] = input;
220		input.name= 'fuck';
221		input.size = "1";
222		input.style.fontFamily = "monospace";
223		td.appendChild(input);
224
225		for (var i = 0; i < options.length; ++i)
226		{
227		var Val = options[i];
228		var val = Val.toLowerCase();
229		option = doc.createElement("option");
230		option.value = val;
231		option.innerHTML = Xinha._lc(Val, "TableOperations");
232		option.selected = ((el.style.textAlign.toLowerCase() == val) \|\| (el.style.textAlign == "" && Val == "-"));
233		select.appendChild(option);
234		}
235		var textAlignCharInput = input;
236		function setCharVisibility(value)
237		{
238		textAlignCharInput.style.visibility = value ? "visible" : "hidden";
239		if (value)
240		{
241		textAlignCharInput.focus();
242		textAlignCharInput.select();
243		}
244		}
245		select.onchange = function()
246		{
247		setCharVisibility(this.value == "char");
248		};
249		setCharVisibility(select.value == "char");
250
251		tr = doc.createElement("tr");
252		tbody.appendChild(tr);
253		td = doc.createElement("td");
254		td.className = "label";
255		tr.appendChild(td);
256		td.innerHTML = Xinha._lc("Height", "TableOperations") + ":";
257		td = doc.createElement("td");
258		tr.appendChild(td);
259		input = doc.createElement("input");
260		input.type = "text";
261		input.value = Xinha.InlineStyler.getLength(el.style.height);
262		input.size = "5";
263		this.inputs.styles['height'] = input;
264		input.style.marginRight = "0.5em";
265		td.appendChild(input);
266		select = doc.createElement("select");
267		this.inputs.aux['heightUnit'] = select;
268		option = doc.createElement("option");
269		option.innerHTML = Xinha._lc("percent", "TableOperations");
270		option.value = "%";
271		option.selected = /%/.test(el.style.height);
272		select.appendChild(option);
273		option = doc.createElement("option");
274		option.innerHTML = Xinha._lc("pixels", "TableOperations");
275		option.value = "px";
276		option.selected = /px/.test(el.style.height);
277		select.appendChild(option);
278		td.appendChild(select);
279
280		select.style.marginRight = "0.5em";
281		td.appendChild(doc.createTextNode(Xinha._lc("Vertical align", "TableOperations") + ":"));
282		select = doc.createElement("select");
283		this.inputs.styles['verticalAlign'] = select;
284		select.style.marginLeft = "0.5em";
285		td.appendChild(select);
286		options = ["Top", "Middle", "Bottom", "Baseline", "-"];
287		for (var i = 0; i < options.length; ++i)
288		{
289		var Val = options[i];
290		var val = Val.toLowerCase();
291		option = doc.createElement("option");
292		option.value = val;
293		option.innerHTML = Xinha._lc(Val, "TableOperations");
294		option.selected = ((el.style.verticalAlign.toLowerCase() == val) \|\| (el.style.verticalAlign == "" && Val == "-"));
295		select.appendChild(option);
296		}
297
298		return fieldset;
	129	var self = this;
	130	var editor = this.editor;
	131	var doc = this.doc;
	132	var el = this.element;
	133	var fieldset = doc.createElement("fieldset");
	134	var legend = doc.createElement("legend");
	135	fieldset.appendChild(legend);
	136	legend.innerHTML = Xinha._lc("Layout", "TableOperations");
	137	var table = doc.createElement("table");
	138	fieldset.appendChild(table);
	139	table.style.width = "100%";
	140	var tbody = doc.createElement("tbody");
	141	table.appendChild(tbody);
	142
	143	var tagname = el.tagName.toLowerCase();
	144	var tr, td, input, select, option, options, i;
	145
	146	if (tagname != "td" && tagname != "tr" && tagname != "th")
	147	{
	148	tr = doc.createElement("tr");
	149	tbody.appendChild(tr);
	150	td = doc.createElement("td");
	151	td.className = "label";
	152	tr.appendChild(td);
	153	td.innerHTML = Xinha._lc("Float", "TableOperations") + ":";
	154	td = doc.createElement("td");
	155	tr.appendChild(td);
	156	select = doc.createElement("select");
	157	td.appendChild(select);
	158	this.inputs.styles['float'] = select;
	159
	160	options = ["None", "Left", "Right"];
	161	for (var i = 0; i < options.length; ++i)
	162	{
	163	var Val = options[i];
	164	var val = options[i].toLowerCase();
	165	option = doc.createElement("option");
	166	option.innerHTML = Xinha._lc(Val, "TableOperations");
	167	option.value = val;
	168	if (Xinha.is_ie) {
	169	option.selected = (("" + el.style.styleFloat).toLowerCase() == val);
	170	}
	171	else {
	172	option.selected = (("" + el.style.cssFloat).toLowerCase() == val);
	173	}
	174	select.appendChild(option);
	175	}
	176	}
	177
	178	tr = doc.createElement("tr");
	179	tbody.appendChild(tr);
	180	td = doc.createElement("td");
	181	td.className = "label";
	182	tr.appendChild(td);
	183	td.innerHTML = Xinha._lc("Width", "TableOperations") + ":";
	184	td = doc.createElement("td");
	185	tr.appendChild(td);
	186	input = doc.createElement("input");
	187	input.type = "text";
	188	input.value = Xinha.InlineStyler.getLength(el.style.width);
	189	input.size = "5";
	190	this.inputs.styles['width'] = input;
	191	input.style.marginRight = "0.5em";
	192	td.appendChild(input);
	193	select = doc.createElement("select");
	194	this.inputs.aux['widthUnit'] = select;
	195	option = doc.createElement("option");
	196	option.innerHTML = Xinha._lc("percent", "TableOperations");
	197	option.value = "%";
	198	option.selected = /%/.test(el.style.width);
	199	select.appendChild(option);
	200	option = doc.createElement("option");
	201	option.innerHTML = Xinha._lc("pixels", "TableOperations");
	202	option.value = "px";
	203	option.selected = /px/.test(el.style.width);
	204	select.appendChild(option);
	205	td.appendChild(select);
	206
	207	select.style.marginRight = "0.5em";
	208	td.appendChild(doc.createTextNode(Xinha._lc("Text align", "TableOperations") + ":"));
	209	select = doc.createElement("select");
	210	select.style.marginLeft = select.style.marginRight = "0.5em";
	211	td.appendChild(select);
	212	this.inputs.styles['textAlign'] = select;
	213	options = ["Left", "Center", "Right", "Justify", "-"];
	214	if (tagname == "td")
	215	{
	216	options.push("Char");
	217	}
	218	input = doc.createElement("input");
	219	this.inputs.aux['textAlignChar'] = input;
	220	input.name= 'fuck';
	221	input.size = "1";
	222	input.style.fontFamily = "monospace";
	223	td.appendChild(input);
	224
	225	for (var i = 0; i < options.length; ++i)
	226	{
	227	var Val = options[i];
	228	var val = Val.toLowerCase();
	229	option = doc.createElement("option");
	230	option.value = val;
	231	option.innerHTML = Xinha._lc(Val, "TableOperations");
	232	option.selected = ((el.style.textAlign.toLowerCase() == val) \|\| (el.style.textAlign == "" && Val == "-"));
	233	select.appendChild(option);
	234	}
	235	var textAlignCharInput = input;
	236	function setCharVisibility(value)
	237	{
	238	textAlignCharInput.style.visibility = value ? "visible" : "hidden";
	239	if (value)
	240	{
	241	textAlignCharInput.focus();
	242	textAlignCharInput.select();
	243	}
	244	}
	245	select.onchange = function()
	246	{
	247	setCharVisibility(this.value == "char");
	248	};
	249	setCharVisibility(select.value == "char");
	250
	251	tr = doc.createElement("tr");
	252	tbody.appendChild(tr);
	253	td = doc.createElement("td");
	254	td.className = "label";
	255	tr.appendChild(td);
	256	td.innerHTML = Xinha._lc("Height", "TableOperations") + ":";
	257	td = doc.createElement("td");
	258	tr.appendChild(td);
	259	input = doc.createElement("input");
	260	input.type = "text";
	261	input.value = Xinha.InlineStyler.getLength(el.style.height);
	262	input.size = "5";
	263	this.inputs.styles['height'] = input;
	264	input.style.marginRight = "0.5em";
	265	td.appendChild(input);
	266	select = doc.createElement("select");
	267	this.inputs.aux['heightUnit'] = select;
	268	option = doc.createElement("option");
	269	option.innerHTML = Xinha._lc("percent", "TableOperations");
	270	option.value = "%";
	271	option.selected = /%/.test(el.style.height);
	272	select.appendChild(option);
	273	option = doc.createElement("option");
	274	option.innerHTML = Xinha._lc("pixels", "TableOperations");
	275	option.value = "px";
	276	option.selected = /px/.test(el.style.height);
	277	select.appendChild(option);
	278	td.appendChild(select);
	279
	280	select.style.marginRight = "0.5em";
	281	td.appendChild(doc.createTextNode(Xinha._lc("Vertical align", "TableOperations") + ":"));
	282	select = doc.createElement("select");
	283	this.inputs.styles['verticalAlign'] = select;
	284	select.style.marginLeft = "0.5em";
	285	td.appendChild(select);
	286	options = ["Top", "Middle", "Bottom", "Baseline", "-"];
	287	for (var i = 0; i < options.length; ++i)
	288	{
	289	var Val = options[i];
	290	var val = Val.toLowerCase();
	291	option = doc.createElement("option");
	292	option.value = val;
	293	option.innerHTML = Xinha._lc(Val, "TableOperations");
	294	option.selected = ((el.style.verticalAlign.toLowerCase() == val) \|\| (el.style.verticalAlign == "" && Val == "-"));
	295	select.appendChild(option);
	296	}
	297
	298	return fieldset;
299	299	};
300	300
…	…
304	304	Xinha.InlineStyler.prototype.createStyleFieldset = function()
305	305	{
306		var editor = this.editor;
307		var doc = this.doc;
308		var el = this.element;
309
310		var fieldset = doc.createElement("fieldset");
311		var legend = doc.createElement("legend");
312		fieldset.appendChild(legend);
313		legend.innerHTML = Xinha._lc("CSS Style", "TableOperations");
314		var table = doc.createElement("table");
315		fieldset.appendChild(table);
316		table.style.width = "100%";
317		var tbody = doc.createElement("tbody");
318		table.appendChild(tbody);
319
320		var tr, td, input, select, option, options, i;
321
322		tr = doc.createElement("tr");
323		tbody.appendChild(tr);
324		td = doc.createElement("td");
325		tr.appendChild(td);
326		td.className = "label";
327		td.innerHTML = Xinha._lc("Background", "TableOperations") + ":";
328		td = doc.createElement("td");
329		tr.appendChild(td);
330
331		input = doc.createElement("input");
332		input.value = Xinha._colorToRgb( el.style.backgroundColor );
333		input.type = "hidden";
334		this.inputs.styles['backgroundColor'] = input;
335		input.style.marginRight = "0.5em";
336		td.appendChild(input);
337		new Xinha.colorPicker.InputBinding(input)
338
339		td.appendChild(doc.createTextNode(Xinha._lc("Image URL", "TableOperations") + ": "));
340		input = doc.createElement("input");
341		input.type = "text";
342		this.inputs.styles['backgroundImage'] = input;
343		if (el.style.backgroundImage.match(/url$\s(.?)\s*$/))
344		{
345		input.value = RegExp.$1;
346		}
347		// input.style.width = "100%";
348		td.appendChild(input);
349
350		tr = doc.createElement("tr");
351		tbody.appendChild(tr);
352		td = doc.createElement("td");
353		tr.appendChild(td);
354		td.className = "label";
355		td.innerHTML = Xinha._lc("FG Color", "TableOperations") + ":";
356		td = doc.createElement("td");
357		tr.appendChild(td);
358		input = doc.createElement("input");
359		input.value = Xinha._colorToRgb( el.style.color );
360		input.type = "hidden";
361		this.inputs.styles['color'] = input;
362		input.style.marginRight = "0.5em";
363		td.appendChild(input);
364		new Xinha.colorPicker.InputBinding(input)
365
366		// for better alignment we include an invisible field.
367		input = doc.createElement("input");
368		input.style.visibility = "hidden";
369		input.type = "text";
370		td.appendChild(input);
371
372		tr = doc.createElement("tr");
373		tbody.appendChild(tr);
374		td = doc.createElement("td");
375		tr.appendChild(td);
376		td.className = "label";
377		td.innerHTML = Xinha._lc("Border", "TableOperations") + ":";
378		td = doc.createElement("td");
379		tr.appendChild(td);
380		input = doc.createElement("input");
381		input.value = Xinha._colorToRgb( el.style.borderColor );