source: products/qPloneDropDownMenu/branches/0.2/skins/qPloneDropDownMenu/javascripts/qplonedropdownmenu.js @ 1

Last change on this file since 1 was 1, checked in by myroslav, 18 years ago

Building directory structure

File size: 10.2 KB
Line 
1var gObj = {title:'',url:''}, gEditCancel = {}, gReorderingLi = null;
2
3var myrules = {
4  '#app .item_icon' : function(el){
5    el.onclick = function(ev){
6      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI');
7      if (el.hasClassName('collapsed_icon')) {
8        expandItem(li);
9        reorderDisplaying(li,true);
10      }
11      else {
12        collapseItem(li);
13        reorderDisplaying(li, false);
14      };
15      Event.stop(ev);
16      return false;
17    }
18  },
19  '#app .reorder' : function(el){
20    el.onclick = function(ev){
21      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
22          ul = li.getElementsByTagName('UL')[0];
23      if (getChildLis(ul).length > 1){
24        isCollapsed(li)?expandItem(li):'';
25        gReorderingLi = li;
26        Element.addClassName(li, 'childsort');
27        disableScreen('rootMenu', li);
28      };
29      Event.stop(ev);
30      return false;
31    }
32  },
33  '#app .tabslist li div.deleteHover' : function(el){
34     if (el.attachEvent){
35      if (!el.hovers) el.hovers = {};
36      if (el.hovers['hover']) return;
37      el.hovers['hover'] = true;
38      el.attachEvent('onmouseover', function(){el.className += ' hover';});
39      el.attachEvent('onmouseout',  function(){el.className = el.className.replace((new RegExp('\\s+hover')),'');});
40     }
41  },
42  '#app .delete' : function(el){
43    el.onclick = function(ev){
44      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'), path = $F(li.getElementsByTagName('INPUT')[0]),
45          ul = Event.findElement(ev, 'UL'),
46          parentLi = ul.parentNode.parentNode;
47      new Ajax.Request('qpdm_delete',
48        {parameters:'submenu_path='+path,
49         onSuccess:function(request) {
50           new Effect.Fade(li, {duration: 0.7, afterFinish: function(){
51             Element.update(ul.parentNode, request.responseText);
52             reorderDisplaying(parentLi, true);
53             Behaviour.apply();
54           }});
55         },
56         onFailure: function(request) {window.alert(getMes(request.responseText));}
57        }
58      );
59      Event.stop(ev);
60      return false;
61    }
62  },
63//   '#app .tabslist dt.collapsibleHeader' : function(el){el.onclick = toggleCollapsible;},
64  '.tabslist li span' : function(el){
65    el.onclick = function(ev){
66      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
67          inputs = li.getElementsByTagName('INPUT');
68      gEditCancel[inputs[0].value] = [inputs[2].value, inputs[3].value];
69      Element.classNames(li).set('childedit');
70      inputs[2].focus();
71      Event.stop(ev);
72      return false;
73    }
74  },
75  '.tabslist input.editsave' : function(el){
76    el.onclick = function(ev){
77      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
78          inputs = li.getElementsByTagName('INPUT'), path = inputs[0].value,
79          title = $F(inputs[2]);
80      if (/[^\s]/.test(title)) {
81         new Ajax.Request('qpdm_edit',
82           {parameters:'submenu_path='+path+'&'+Form.serialize(Event.findElement(ev, 'FORM')),
83            onSuccess: function(request){
84              Element.classNames(li).set('');
85              li.id = 'tabslist_'+title;
86              li.getElementsByTagName('SPAN')[0].update(title);
87              Behaviour.apply();
88           },
89           onFailure: function(request){window.alert(getMes(request.responseText));}
90          }
91        );
92      }
93      else window.alert('Name is required!');
94      Event.stop(ev);
95      return false;
96    }
97  },
98  '.tabslist input.editcancel' : function(el){
99    el.onclick = function(ev){
100      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
101          inputs = li.getElementsByTagName('INPUT');
102      Element.classNames(li).set('');
103      values = gEditCancel[inputs[0].value];
104      inputs[2].value = values[0];
105      inputs[3].value = values[1];
106      Event.stop(ev);
107      return false;
108    }
109  },
110  '#app li input.acttitle' : function(el){
111    el.onfocus = function(ev){
112      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI');
113      Element.classNames(li).add('childadd');
114      Event.stop(ev);
115      return false;
116    };
117  },
118 '#app li .buttonadd' : function(el){
119    el.onclick = function(ev){
120      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'), lis=[],
121          inputs = li.getElementsByTagName('INPUT'), form = Event.findElement(ev, 'FORM');
122      if ($F(inputs[1])){
123        new Ajax.Request('qpdm_add',
124          {parameters:'num='+getChildLis(li.parentNode).length+'&'+Form.serialize(form),
125           onSuccess: function(request){
126             var parentLi = Event.findElement(ev, 'UL').parentNode.parentNode;
127             new Insertion.Before(li, request.responseText);
128             Element.removeClassName(li, 'childadd');
129             Form.reset(form);
130             reorderDisplaying(parentLi, true);
131             Behaviour.apply();
132           },
133           onFailure: function(request){window.alert(getMes(request.responseText));}
134          }
135        );
136      }
137      else window.alert('Title is required!');
138      Event.stop(ev);
139      return false;
140    }
141  },
142  '#app li .buttoncancel' : function(el){
143    el.onclick = function(ev){
144      var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI');
145      Element.removeClassName(li, 'childadd');
146      Form.reset(Event.findElement(ev, 'FORM'));
147      Event.stop(ev);
148      return false;
149    }
150  }
151//   '#generated_tabs' : function(el){
152//     el.onclick = function(ev){new Ajax.Request('qpt_setproperty', {parameters:'generated_tabs='+el.checked});}
153//   }
154};
155
156Behaviour.register(myrules);
157
158var globalHandlers = {
159  onCreate: function(){Element.addClassName('app', 'working');},
160  onComplete: function() {if(Ajax.activeRequestCount == 0) Element.removeClassName('app', 'working');}
161};
162
163Ajax.Responders.register(globalHandlers);
164
165function removeHandlers(el, cur) {
166  var el = el?el:'rootMenu';
167  getChildLis(el).each(function(item){item!=cur?item.getElementsByTagName('SPAN')[0].onclick='':'';});
168};
169
170function getMes(txt) {
171  try {
172    message = (/Error Value\s*<\/dt>\s*<dd>(.*?)<\/dd>/i).exec(txt)[1];
173  }
174  catch(e) {
175    message = txt;
176  };
177  return message;
178};
179
180function collapseItem(item) {
181  var img = document.getElementsByClassName('item_icon', item)[0],
182      ul  = document.getElementsByClassName('tabslist', item)[0];
183  if (img && ul){
184    shiftClasses(img, 'expanded_icon', 'collapsed_icon');
185    shiftClasses(ul, 'showLevel', 'hideLevel');
186    return true;
187  }
188  else return false;
189};
190
191function expandItem(item) {
192  var img = document.getElementsByClassName('item_icon', item)[0],
193      ul  = document.getElementsByClassName('tabslist', item)[0];
194  if (img && ul){
195    shiftClasses(img, 'collapsed_icon', 'expanded_icon');
196    shiftClasses(ul, 'hideLevel', 'showLevel');
197    return true;
198  }
199  else return false;
200};
201
202function isCollapsed(item) {
203    var ul = document.getElementsByClassName('tabslist', item);
204  return (ul[0] && Element.hasClassName(ul[0], 'hideLevel'));
205};
206
207function initLightbox (li) {
208  var objBody = document.getElementsByTagName("body").item(0),
209      objOverlay = document.createElement("div"),
210      objLi = document.createElement("li");
211  objOverlay.setAttribute('id', 'overlay_modal');
212  objLi.setAttribute('id', 'overlay_li');
213  objOverlay.className = "overlay_alert";
214  objLi.className = "overlay_li childsort";
215  objOverlay.style.display = 'none';
216  objLi.style.display = 'none';
217  objOverlay.style.position = 'absolute';
218  objLi.style.position = 'absolute';
219  objOverlay.style.zIndex = 5000;
220  objLi.style.zIndex = 10000;
221  objOverlay.style.width = '100%';
222  objLi.style.width = '100%';
223  Element.update(objLi, li.innerHTML);
224  objBody.insertBefore(objOverlay, objBody.firstChild);
225  li.parentNode.appendChild(objLi);
226};
227
228function disableScreen(overElement, li) {
229  initLightbox(li);
230  var objOverlay = $('overlay_modal'), objLi = $('overlay_li'),
231      ul = objLi.getElementsByTagName('UL')[0];
232  Position.clone(overElement, objOverlay);
233  Position.clone(li, objLi);
234  objOverlay.style.display = 'block';
235  objLi.style.display = 'block';
236  ul ? Sortable.create(ul, {handle: 'drag-handle'}) : '';
237  Event.observe(document.getElementsByClassName('cancel', objLi)[0], 'click', onReorderingCancel, false);
238  Event.observe(document.getElementsByClassName('save', objLi)[0], 'click', onReorderingSave, false);
239  return li;
240};
241
242function enableScreen(ev) {
243  var ev = ev?ev:window.event, objOverlay =  $('overlay_modal'), objLi = $('overlay_li');
244  Event.stopObserving(Event.element(ev), 'click', onReorderingCancel, false);
245  Event.stopObserving(Event.element(ev), 'click', onReorderingSave, false);
246  Sortable.destroy(objLi.getElementsByTagName('UL')[0]);
247  if (objOverlay) Element.remove(objOverlay);
248  if (objLi) Element.remove(objLi);
249};
250
251function getChildLis(el) {
252  return $A($(el).childNodes).findAll(function(item){return (item.tagName=='LI'&&!Element.hasClassName(item,'addItem'))})
253};
254
255function reorderDisplaying(el, expand) {
256  var div = el.getElementsByTagName('DIV')[0],
257      lis = getChildLis(el.getElementsByTagName('UL')[0]).length;;
258  if (expand && lis>1) Element.addClassName(div, 'reorderHover');
259  else Element.removeClassName(div, 'reorderHover');
260};
261
262function shiftClasses(el, from, to) {
263  Element.removeClassName(el, from);
264  Element.addClassName(el, to);
265};
266
267function onReorderingCancel(ev) {
268  var ev = ev?ev:window.event, ul = gReorderingLi.getElementsByTagName('UL')[0];
269  if (ul) {
270    Element.removeClassName(gReorderingLi, 'childsort');
271    enableScreen(ev);
272  };
273  Event.stop(ev);
274  return false;
275};
276
277function onReorderingSave(ev) {
278  var ev = ev?ev:window.event, li = Event.findElement(ev, 'LI'),
279      path = li.getElementsByTagName('INPUT')[0].value,
280      ul = li.getElementsByTagName('UL')[0], params = '',
281      ulOrigin = gReorderingLi.getElementsByTagName('UL')[0];
282  $A(getChildLis(ul)).each(function(i){
283    var val = i.getElementsByTagName('INPUT')[1].value;
284    params += val?'&idxs='+val:'';
285  });
286  new Ajax.Request('qpdm_reorder',
287    {method: 'post',
288     parameters: 'submenu_path='+path+params,
289     onSuccess: function(request){
290       new Effect.Highlight(ulOrigin, {duration: 0.7, afterFinish: function(){
291       Element.removeClassName(gReorderingLi, 'childsort');
292       Element.update(ulOrigin.parentNode, request.responseText);
293       enableScreen(ev);
294       Behaviour.apply();}});
295     },
296    onFailure: function(request){window.alert(getMes(request.responseText));},
297    }
298  );
299  Event.stop(ev);
300  return false;
301}
Note: See TracBrowser for help on using the repository browser.