Changeset Navigation

← Previous Changeset
Next Changeset →

Changeset 523

Timestamp:

09/12/06 09:54:06

Author:

piv

Message:

implemented all UI improvements, fixed some js bugs

Files:

qPloneTabs/trunk/HISTORY.txt (modified) (1 diff)
qPloneTabs/trunk/skins/qPloneTabs/javascripts/qplonetabs.js (modified) (17 diffs)
qPloneTabs/trunk/skins/qPloneTabs/prefs_tabs_form.cpt (modified) (1 diff)
qPloneTabs/trunk/skins/qPloneTabs/qplonetabs.css.dtml (modified) (3 diffs)
qPloneTabs/trunk/skins/qPloneTabs/qpt_edit.py (modified) (1 diff)
qPloneTabs/trunk/skins/qPloneTabs/qpt_setvisibility.py (modified) (1 diff)
qPloneTabs/trunk/version.txt (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

qPloneTabs/trunk/HISTORY.txt

r522	r523
	1	0.2.2
	2
	3	* possibility to change portal_tabs visibility
	4
	5	* better url processing
	6
	7	* fixed editing bug
	8
	9	* corrected some piece of csss
	10
	11	* fully remade elements state css logic
	12
	13	* fixed adding and editing javascript bugs in IE5.5
	14
	15	* corrected IE hovering
	16
	17	* don't collapse editing and adding forms after sorting
	18
	19	* possibility to edit any number of items at the same time
	20
	21	* display url in right side near the tab name
	22
	23	* generated tabs functionality
	24
	25	* sliding 'advanced' section & everything that push down forward content on the page
	26
1	27	0.2.0
2	28

qPloneTabs/trunk/skins/qPloneTabs/javascripts/qplonetabs.js

r522	r523
8	8	var myrules = {
9	9	'#app #reorder' : function(el){
10		el.onclick = function(){
	10	el.onclick = function(ev){
	11	var ev = ev?ev:window.event;
11	12	gBeforeReorderFragment = document.getElementById('tabslist').innerHTML;
12	13	shiftClassNames('app', 'viewing', 'sorting');
13	14	Sortable.create('tabslist', {handle: 'drag-handle'});
14		removeEdition(el);
	15	removeEdition('tabslist');
	16	Event.stop(ev);
15	17	return false;
16	18	}
17	19	},
18	20	'#app #save' : function(el){
19		el.onclick = function(){
20		var params = '';
	21	el.onclick = function(ev){
	22	var ev = ev?ev:window.event, params = '';
21	23	$A($('tabslist').getElementsByTagName('INPUT')).findAll(function(h){return h.type=='hidden';}).each(function(f,idx){params += idx==0?'idxs='+f.value:'&idxs='+f.value;});
22	24	new Ajax.Request('qpt_reorder',
…	…
38	40	}
39	41	);
	42	Event.stop(ev);
40	43	return false;
41	44	}
42	45	},
43	46	'#app #cancel' : function(el){
44		el.onclick = function(){
	47	el.onclick = function(ev){
	48	var ev = ev?ev:window.event;
45	49	Sortable.destroy('tabslist');
46	50	shiftClassNames('app', 'sorting', 'viewing');
…	…
48	52	el.attachEvent ? ieHover():'';
49	53	Behaviour.apply();
	54	Event.stop(ev);
50	55	return false;
51	56	}
52	57	},
53	58	'#app .csshover li' : function(el){
54		if (Element.hasClassName(el, '~~hover')) {el.className = el.className.replace('hover','');}~~
	59	if (Element.hasClassName(el, 'onHover')) {Element.removeClassName(el, 'onHover');};
55	60	},
56	61	'#app .visibility' : function(el){
…	…
67	72	};
68	73	},
69		onFailure: function(request){var message = (/Error Value\s<\/dt>\s<dd>(.*?)<\/dd>/i).exec(request.responseText);window.alert(message[1]);}
	74	onFailure: function(request){
	75	var message = (/Error Value\s<\/dt>\s<dd>(.*?)<\/dd>/i).exec(request.responseText);
	76	window.alert(message[1]);
	77	}
70	78	};
71	79	if (Event.findElement(ev, 'UL').id == 'roottabs'){
…	…
77	85	new Ajax.Request('qpt_edit', params);
78	86	};
	87	if (ev.stopPropagation) {ev.stopPropagation();}
	88	else {ev.cancelBubble = true;};
79	89	return true;
80	90	}
…	…
82	92	'#app .delete' : function(el){
83	93	el.onclick = function(ev){
84		var item = el.parentNode,
	94	var ev = ev?ev:window.event, item = el.parentNode,
85	95	num = $A($('tabslist').getElementsByTagName('LI')).indexOf(item);
86	96	new Ajax.Request('qpt_delete',
…	…
89	99	new Effect.Fade(item, {duration: 0.3, afterFinish: function(){
90	100	Element.remove(item);
91		$A($('tabslist').getElementsByTagName('INPUT')).findAll(function(h){return h.type=='hidden';}).each(function(f,idx){f.value=idx;});
	101	var lis = $A($('tabslist').getElementsByTagName('LI')),
	102	inputs = function(li){return $A(li.getElementsByTagName('INPUT'))};
	103	lis.each(function(el,idx){
	104	inputs(el).each(function(inpt){
	105	inpt.type=='hidden'?inpt.value=idx:inpt.name=inpt.name.replace(/i\d+_/, 'i'+idx+'_');
	106	});
	107	});
92	108	}});
93	109	}
94	110	}
95	111	);
	112	Event.stop(ev);
96	113	return false;
97	114	}
…	…
113	130	}
114	131	},
115		'#app #tabslist li span.tab-title' : function(el){
116		el.onclick = function(ev){
117		var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
118		inputs = $A(li.getElementsByTagName('FORM')[0].getElementsByTagName('INPUT')), tmp = [];
119		inputs.each(function(el,idx){(0<idx&&idx<5)?tmp.push(el.value):''});
120		gBeforeEditData[inputs[0]] = tmp;
121		Element.addClassName(li, 'editing');
	132	'#app #tabslist li' : function(el){
	133	el.onclick = function(ev){
	134	if (!el.sel) el.sel = true;
	135	else {return;};
	136	var ev = ev?ev:window.event,// li = Event.findElement(ev, 'LI'),
	137	inputs = $A(el.getElementsByTagName('FORM')[0].getElementsByTagName('INPUT')), tmp = [];
	138	inputs.each(function(e,idx){(0<idx && idx<5)?tmp.push(e.value):''});
	139	gBeforeEditData[el.id] = tmp;
	140	Element.addClassName(el, 'editing');
122	141	inputs[1].focus();
123		}
	142	// Event.stop(ev);
	143	return true;
	144	};
124	145	},
125	146	'#app #tabslist input.editsave' : function(el){
…	…
139	160	Element.removeClassName(li, 'editing');
140	161	li.id = 'tabslist_'+title;
141		Element.update(li.getElementsByTagName('SPAN')[1], title);
142		Element.update(document.getElementsByClassName('url-helper', li)[0], $F(tds[2]));
	162	var spans = li.getElementsByTagName('SPAN');
	163	Element.update(spans[1], title);
	164	Element.update(spans[0], $F(tds[2]));
143	165	Behaviour.apply();
144	166	}
…	…
148	170	var message = (/Error Value\s<\/dt>\s<dd>(.*?)<\/dd>/i).exec(request.responseText);
149	171	window.alert(message[1]);
150		}
	172	},
	173	onComplete: function(request){if (li.sel) {li.sel = null;};}
151	174	}
152	175	);
153	176	};
	177	Event.stop(ev);
154	178	return false;
155	179	}
…	…
157	181	'#app #tabslist input.editcancel' : function(el){
158	182	el.onclick = function(ev){
159		var ev = ev ? ev:window.event, li = Event.findElement(ev, 'LI'),
	183	var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
160	184	inputs = $A(li.getElementsByTagName('FORM')[0].getElementsByTagName('INPUT')),
161		values = $A(gBeforeEditData[~~inputs[0]~~]),
	185	values = $A(gBeforeEditData[li.id]),
162	186	dl = li.getElementsByTagName('DL')[1], dd = dl.getElementsByTagName('DD')[0];
163	187	values.each(function(el,idx){inputs[idx+1].value = el});
…	…
171	195	});
172	196	}
173		else {
174		~~Element.removeClassName(li, 'editing')~~;
175		};
	197	else {Element.removeClassName(li, 'editing');};
	198	if (li.sel) {li.sel = null;};
	199	Event.stop(ev);
176	200	return false;
177	201	}
178	202	},
179	203	'#app #addaction' : function(el){
180		el.onsubmit = function(ev){document.getElementById('actname').blur();return false;};
	204	el.onsubmit = function(ev){
	205	document.getElementById('actname').blur();
	206	return false;
	207	};
181	208	},
182	209	'#app #actname' : function(el){
183	210	var re = new RegExp('[^a-zA-Z0-9-_~,.\\$\$\$# ]','g'), initialVal = $F(el);
184		el.onfocus = function(){
185		Element.addClassName('addaction', 'adding');
186		};
	211	el.onfocus = function(){Element.addClassName('addaction', 'adding');};
187	212	el.onkeyup = function() {
188	213	var name = $F(el), id = $F('actid');
…	…
209	234	Form.reset('addaction');
210	235	Element.removeClassName('addaction', 'adding');
211		var dls = document.getElementsByClassName('collapseAdvanced', 'tabslist');
	236	var dls = $A($('tabslist').getElementsByTagName('DL')).findAll(
	237	function(dl){return Element.hasClassName(dl, 'collapseAdvanced');}
	238	);
212	239	collapseLi(dls[dls.length-1]);
	240	ieHover();
213	241	Behaviour.apply();
214		~~ieHover();~~
215	242	}
216	243	});
…	…
239	266	}
240	267	});
	268	Event.stop(ev);
241	269	return false;
242	270	}
…	…
289	317	el.hovers['hover'] = true;
290	318	el.attachEvent('onmouseover', function(){
291		~~Element.hasClassName(el, 'hover') ? '':Element.addClassName(el, 'hover')~~;
	319	if (!Element.hasClassName(el, 'onHover')) {Element.addClassName(el, 'onHover');};
292	320	});
293		el.attachEvent('onmouseout', function(){
294		el.className = el.className.replace(/\bhover\b/g,'');
295		});
	321	el.attachEvent('onmouseout', function(){Element.removeClassName(el, 'onHover');});
296	322	}
297	323	});
…	…
307	333
308	334	function collapseAdvanced() {
309		$A(document.getElementsByClassName('collapseAdvanced', 'app')).each(collapseLi);
	335	var dls = $A($('tabslist').getElementsByTagName('DL')).findAll(
	336	function(dl){return Element.hasClassName(dl, 'collapseAdvanced');}
	337	);
	338	$A(dls).each(collapseLi);
310	339	};
311	340
…	…
333	362
334	363	function removeEdition(el) {
335		~~$A($('tabslist').getElementsByTagName('SPAN')).each(function(sp,idx){~~
336		~~if(sp != el && Element.hasClassName(sp, 'tab-title')) sp~~.onclick='';});
337		};
	364	var el = el?el:'tabslist';
	365	$A($(el).getElementsByTagName('LI')).each(function(li,idx){if(li != el) li.onclick='';});
	366	};

qPloneTabs/trunk/skins/qPloneTabs/prefs_tabs_form.cpt

r522	r523
51	51	<dd><input id="actaction" type="text" value="" size="30"
52	52	name="action" /></dd></dl>
53
54	53	<dl class="advanced collapseAdvanced expandedBlock">
55	54	<dt class="headerAdvanced">Advanced</dt>

qPloneTabs/trunk/skins/qPloneTabs/qplonetabs.css.dtml

r522	r523
26	26	*/
27	27
28		#app.viewing .reorder-controls,
29		#app.sorting .sort-controls,
30		#app.viewing li.editing .editform,
31		#app #addaction.adding .field-visible,
32		#app #addaction.adding .field-name dt,
33		#app #addaction.adding .field-action,
34		#app #addaction.adding .field-action label,
35		#app #addaction.adding .advanced,
36		#app #addaction.adding .field-id,
37		#app #addaction.adding .field-condition,
38		#app #addaction.adding .add-controls {display: block;}
39
40		#app #busy,
41		#app .reorder-controls,
42		#app .sort-controls,
43		#app.viewing li.editing .url-helper,
44		#app.viewing li.editing .tab-title,
45		#app .drag-handle,
46		#app .delete,
47		#app ul.csshover li.editing:hover .delete,
48		#app ul.csshover li.editing.hover .delete,
49		#app .visibility,
50		#app .editform,
51		#app.sorting #addaction,
52		#app .field-visible,
53		#app .field-name dt,
54		#app .field-action,
55		#app .advanced,
56		#app .field-id,
57		#app .field-condition,
58		#app .add-controls {display: none;}
	28	#app.viewing .reorder-controls,
	29	#app.sorting .sort-controls,
	30	#app.viewing li.editing .editform,
	31	#app #addaction.adding .field-visible,
	32	#app #addaction.adding .field-name dt,
	33	#app #addaction.adding .field-action,
	34	#app #addaction.adding .field-action label,
	35	#app #addaction.adding .advanced,
	36	#app #addaction.adding .field-id,
	37	#app #addaction.adding .field-condition,
	38	#app #addaction.adding .add-controls {display: block;}
	39
	40	#app #busy,
	41	#app .reorder-controls,
	42	#app .sort-controls,
	43	#app.viewing li.editing .url-helper,
	44	#app.viewing li.editing .tab-title,
	45	#app .drag-handle,
	46	#app .delete,
	47	#app .visibility,
	48	#app .editform,
	49	#app.sorting #addaction,
	50	#app .field-visible,
	51	#app .field-name dt,
	52	#app .field-action,
	53	#app .advanced,
	54	#app .field-id,
	55	#app .field-condition,
	56	#app .add-controls {display: none;}
59	57
60	58	#app.working #busy,
61		#app.viewing ul.csshover li:hover .delete,
62		#app.viewing ul.csshover li.hover .delete,
63		#app.viewing ul.csshover li:hover .visibility,
64		#app.viewing ul.csshover li.hover .visibility,
65		#app ul#roottabs.csshover li:hover .visibility,
66		#app ul#roottabs.csshover li.hover .visibility,
67		#app.sorting .drag-handle {display: inline;}
	59	#app.viewing ul.csshover li:hover .delete,
	60	#app.viewing ul.csshover li.onHover .delete,
	61	#app.viewing ul.csshover li:hover .visibility,
	62	#app.viewing ul.csshover li.onHover .visibility,
	63	#app ul#roottabs.csshover li:hover .visibility,
	64	#app ul#roottabs.csshover li.onHover .visibility,
	65	#app.sorting .drag-handle {display: inline;}
68	66
69	67	/**********************************************************/
…	…
99	97	position:absolute;
100	98	right:0;
101		margin-right:-~~6.3~~em;
	99	margin-right:-5.7em;
102	100	color: &dtml-linkColor; !important;
103	101	}
104	102
105	103	#app ul.csshover li {
106		border: 1px &dtml-borderStyle; transparent;
	104	border: 1px &dtml-borderStyle; transparent;
107	105	border-right:0;
108	106	padding: 0 0.5em;
…	…
221	219	/hover**************************************************/
222	220
223		#app.viewing ul.csshover li:hover,
224		#app.viewing ul.csshover li.hover,
225		#app ul#roottabs.csshover li:hover,
226		#app ul#roottabs.csshover li.hover {
	221	#app.viewing ul#tabslist.csshover li:hover,
	222	#app.viewing ul#tabslist.csshover li.onHover {
227	223	background-color: #FFFFDD;
228		border: 1px inset threedface;
	224	border: 1px inset threedface;
229	225	cursor: text;
230	226	}
231	227
232		#app.viewing ul.csshover li.editing,
233		#app.viewing ul.csshover li.editing {
	228	#app.viewing ul#tabslist.csshover li.editing {
234	229	background-color: &dtml-backgroundColor;;
235	230	border: 1px &dtml-borderStyle; white;
236	231	cursor: auto;
	232	}
	233
	234	#app ul#roottabs.csshover li:hover,
	235	#app ul#roottabs.csshover li.onHover {
	236	background-color: #FFFFDD;
	237	/* border: 1px inset threedface;*/
	238	cursor: default;
237	239	}
238	240

qPloneTabs/trunk/skins/qPloneTabs/qpt_edit.py

r522	r523
14	14	if visibility != []: params['visibility'] = visibility
15	15	for item in fields:
16		params[item] = ~~str(req.get('i'+idx+'_'+item, None)~~)
	16	params[item] = req.get('i'+idx+'_'+item, None)
17	17
18	18	from Products.qPloneTabs.utils import editAction

qPloneTabs/trunk/skins/qPloneTabs/qpt_setvisibility.py

r522	r523
10	10
11	11	from Products.CMFCore.utils import getToolByName
12		~~portal = getToolByName(context, 'portal_url').getPortalObject()~~
13	12	obj = getToolByName(context, id, None)
14	13	if obj:

qPloneTabs/trunk/version.txt

r522 r523

1 0.2.1
1 0.2.2

Changeset Navigation

Changeset 523

Legend:

qPloneTabs/trunk/HISTORY.txt

qPloneTabs/trunk/skins/qPloneTabs/javascripts/qplonetabs.js

qPloneTabs/trunk/skins/qPloneTabs/prefs_tabs_form.cpt

qPloneTabs/trunk/skins/qPloneTabs/qplonetabs.css.dtml

qPloneTabs/trunk/skins/qPloneTabs/qpt_edit.py

qPloneTabs/trunk/skins/qPloneTabs/qpt_setvisibility.py

qPloneTabs/trunk/version.txt

Download in other formats: