source: products/quintagroup.plonetabs/branches/nokss/quintagroup/plonetabs/browser/templates/plonetabs.pt @ 3680

Last change on this file since 3680 was 3680, checked in by mike, 11 years ago

rewrite kss actions via jquery ajax; remove all related to kss resources
  • Property svn:eol-style set to native
File size: 21.4 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml"
2      xmlns:metal="http://xml.zope.org/namespaces/metal"
3      xmlns:tal="http://xml.zope.org/namespaces/tal"
4      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
5      xml:lang="en" lang="en"
6      metal:use-macro="context/prefs_main_template/macros/master"
7      i18n:domain="quintagroup.plonetabs">
8
9<metal:block metal:fill-slot="top_slot"
10             tal:define="dummy python:request.set('disable_border', 1)" />
11
12<body>
13
14<div metal:fill-slot="prefs_configlet_main"
15     tal:define="test nocall:view/test;
16                 category here/REQUEST/category|nothing;
17                 category python:test(category and category != '', category, 'portal_tabs');
18                 errors options/errors|nothing;
19                 portal_state context/@@plone_portal_state;
20                 portal_url portal_state/portal_url;
21                 test nocall:view/test">
22
23<div id="plonetabs_form">
24
25<div id="app" class="qPloneTabs">
26
27  <h1 id="plonetabs-form-title"
28      class="documentFirstHeading"
29      i18n:translate=""
30      tal:content="python:view.getPageTitle(category)">Plone Tabs</h1>
31
32  <a href=""
33     class="link-parent"
34     tal:attributes="href string:${portal_url}/plone_control_panel"
35     i18n:domain="plone"
36     i18n:translate="label_up_to_plone_setup">
37    Up to Site Setup
38  </a>
39
40  <div>
41    <form id="selectcategory_form"
42          name="selectcategory_form"
43          method="post"
44          action="@@plonetabs-controlpanel"
45          tal:attributes="action string:${portal_url}/${attrs/action}">
46      <div class="field"
47           tal:define="error errors/select_category|nothing"
48           tal:attributes="class python:test(error, 'field error', 'field')">
49        <div tal:replace="error">Error output</div>
50        <label for="select_category" i18n:translate="label_select_category">Select category to manage</label>
51        <select name="category"
52                id="select_category"
53                tal:define="categories view/getCategories">
54          <option value="current_category" selected="selected"
55                  tal:attributes="value category"
56                  i18n:translate=""
57                  tal:content="category" />
58          <tal:options repeat="cat categories">
59            <option tal:attributes="value cat"
60                    tal:content="cat"
61                    i18n:translate=""
62                    tal:condition="python: cat != category" />
63          </tal:options>
64        </select>
65        <input class="change-button kssHidden" type="submit" i18n:attributes="value" name="category.change" value="Change" />
66      </div>
67    </form>
68  </div>
69
70  <ul class="csshover"
71      id="tabslist"
72      tal:content="structure python:view.getActionsList(category=category, errors=errors)" />
73
74  <form id="addaction"
75        name="addaction_form"
76        method="post"
77        action="@@plonetabs-controlpanel"
78        tal:attributes="action string:${portal_url}/${attrs/action}">
79    <input type="hidden" name="form.submitted:boolean" value="True" />
80    <input type="hidden" name="category" value="category" tal:attributes="value category" />
81    <dl class="field-visible bridge">
82      <dt>
83        <label for="actvisible" i18n:translate="">Visible</label>
84      </dt>
85      <dd>
86        <input id="actvisible" type="checkbox" value="1" checked="checked" title="visibility" name="visible"
87               tal:attributes="checked request/visible|string:checked" />
88      </dd>
89    </dl>
90    <dl class="field-name"
91        tal:define="error errors/title|nothing"
92        tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
93      <dt>
94        <label for="actname" i18n:translate="">Name</label>
95      </dt>
96      <dd>
97        <span class="error-container" tal:content="error"
98              i18n:translate="">Validation error output</span>
99        <input id="actname" type="text" value="" name="title" autocomplete="off"
100               tal:attributes="value request/title|nothing"/>
101      </dd>
102    </dl>
103    <dl class="field-action"
104        tal:define="error errors/url_expr|nothing"
105        tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
106      <dt>
107        <label for="actaction" i18n:translate="">URL (Expression)</label>
108      </dt>
109      <dd>
110        <span class="error-container" tal:content="error"
111              i18n:translate="">Validation error output</span>
112        <input id="actaction" type="text" value="" size="30" name="url_expr"
113               tal:attributes="value request/url_expr|nothing"/>
114      </dd>
115    </dl>
116    <dl class="collapseAdvanced expandedBlock">
117      <dt class="headerAdvanced" i18n:translate="">Advanced</dt>
118      <dd class="contentAdvanced">
119        <dl class="field-id"
120            tal:define="error errors/id|nothing"
121            tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
122          <dt>
123            <label for="actid" i18n:translate="">Id</label>
124          </dt>
125          <dd>
126            <span class="error-container" tal:content="error"
127                  i18n:translate="">Validation error output</span>
128            <input id="actid" type="text" value="" name="id"
129                   tal:attributes="value request/id|nothing" />
130          </dd>
131        </dl>
132        <dl class="field-condition"
133            tal:define="error errors/available_expr|nothing"
134            tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
135          <dt>
136            <label for="actcondition" i18n:translate="">Condition (Expression)</label>
137          </dt>
138          <dd>
139            <span class="error-container" tal:content="error"
140                  i18n:translate="">Validation error output</span>
141            <input id="actcondition" type="text" value="" size="30" name="available_expr"
142                   tal:attributes="value request/available_expr|nothing" />
143          </dd>
144        </dl>
145        <div class="visualClear"><!-- --></div>
146      </dd>
147    </dl>
148    <div class="add-controls">
149      <input type="submit" id="buttonadd" class="context" i18n:attributes="value" name="add.add" value="Add" />
150      <input type="submit" id="buttoncancel" class="standalone" i18n:attributes="value" name="add.cancel" value="Cancel" />
151      <input type="reset"  id="buttonreset" class="editreset kssHidden context" i18n:attributes="value" name="add.reset" value="Reset"  />
152    </div>
153  </form>
154
155  <tal:autogenerated_section tal:replace="structure python:view.getAutoGenereatedSection(cat_name=category, errors=errors)" />
156
157</div>
158
159</div>
160<script>
161  (function(a){var b,c=a();a.fn.sortable=function(d){var e=String(d);return d=a.extend({connectWith:!1},d),this.each(function(){if(/^enable|disable|destroy$/.test(e)){var f=a(this).children(a(this).data("items")).attr("draggable",e=="enable");e=="destroy"&&f.add(this).removeData("connectWith items").off("dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s");return}var g,h,f=a(this).children(d.items),i=a("<"+(/^ul|ol$/i.test(this.tagName)?"li":"div")+' class="sortable-placeholder">');f.find(d.handle).mousedown(function(){g=!0}).mouseup(function(){g=!1}),a(this).data("items",d.items),c=c.add(i),d.connectWith&&a(d.connectWith).add(this).data("connectWith",d.connectWith),f.attr("draggable","true").on("dragstart.h5s",function(c){if(d.handle&&!g)return!1;g=!1;var e=c.originalEvent.dataTransfer;e.effectAllowed="move",e.setData("Text","dummy"),h=(b=a(this)).addClass("sortable-dragging").index()}).on("dragend.h5s",function(){b.removeClass("sortable-dragging").show(),c.detach(),h!=b.index()&&f.parent().trigger("sortupdate",{item:b}),b=null}).not("a[href], img").on("selectstart.h5s",function(){return this.dragDrop&&this.dragDrop(),!1}).end().add([this,i]).on("dragover.h5s dragenter.h5s drop.h5s",function(e){return!f.is(b)&&d.connectWith!==a(b).parent().data("connectWith")?!0:e.type=="drop"?(e.stopPropagation(),c.filter(":visible").after(b),!1):(e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="move",f.is(this)?(d.forcePlaceholderSize&&i.height(b.outerHeight()),b.hide(),a(this)[i.index()<a(this).index()?"after":"before"](i),c.not(i).detach()):!c.is(this)&&!a(this).children(d.items).length&&(c.detach(),a(this).append(i)),!1)})})}})(jQuery);
162</script>
163
164<script>
165//Functions declaration
166
167  function sortableList() {
168    console.log('sort changed');
169    var formData = {};
170
171    //?TODO formData.ajax_request = "edit_moveact"
172
173    formData.ajax_request = true;
174    var liIds = $('#tabslist li').map(function(i,n) {
175      return $(n).attr('id');
176    }).get().join('&');
177    cat_name = $('#select_category').val();
178    formData.cat_name  = cat_name;
179    formData.actions  = liIds;
180    formData.edit_moveact  = 'Move Action';
181    //formData.push({ name: 'edit.moveact', value: 'Move Action'});
182    $.ajax({
183      type:'POST',
184      url: '@@plonetabs-controlpanel',
185      data: formData,
186      success: function(response) {
187            var json = JSON.parse(response)
188            console.log("response from server: ");
189            console.log(json);
190
191            if (json.status_code === 200){
192                console.log('display success messages');
193            }
194            else{
195                console.log('display error messages');
196            }
197      }
198    });
199  }
200
201  function toggleCollapsible(el, collapse) {
202    collapse = typeof collapse !== 'undefined' ? collapse : 'default';
203
204    var node = el.parent(".collapseAdvanced");
205
206    if(collapse!=='default'){
207      if (collapse==true){
208          console.log("removeClass expandedBlock; addClass collapsedBlock");
209          node.removeClass('expandedBlock');
210          node.addClass('collapsedBlock');
211      }
212      else{
213          console.log("removeClass collapsedBlock; addClass expandedBlock");
214          node.removeClass('collapsedBlock');
215          node.addClass('expandedBlock');
216      }
217    }
218    else{
219      if (node.hasClass('collapsedBlock')){
220          console.log("removeClass collapsedBlock; addClass expandedBlock");
221          node.removeClass('collapsedBlock');
222          node.addClass('expandedBlock');
223      }
224      else{
225          console.log("removeClass expandedBlock; addClass collapsedBlock");
226          node.removeClass('expandedBlock');
227          node.addClass('collapsedBlock');
228      }
229    }
230
231  }
232
233  function startupActions() {
234    console.log('running basic methods');
235    $(".add-controls input").addClass('allowMultiSubmit');
236    $(".edit-controls input").addClass('allowMultiSubmit');
237    $(".collapseAdvanced").removeClass('expandedBlock').addClass('collapsedBlock');
238  }
239</script>
240
241<script>
242  $(document).ready(function() {
243    console.log('document ready');
244    $("#plonetabs_form").addClass('kssTabsActive');
245    startupActions()
246  });
247</script>
248
249
250<script>
251/*CLIENTS METHODS*/
252
253//titleWrapper
254    $("#tabslist .titleWrapper").live("click", function() {
255        console.log("#tabslist .titleWrapper clicked");
256        ($(this).closest('li')).addClass('editing');
257    });
258
259//collapse
260    $(".collapseAdvanced .headerAdvanced").live("click", function(event) {
261        console.log(".collapseAdvanced .headerAdvanced clicked");
262        toggleCollapsible($(this));
263    });
264</script>
265
266<script> 
267/*AJAX METHODS*/
268
269//save(edit)
270  $('#tabslist .editsave').live("click", function(event) {
271      console.log('.editsave clicked ');
272      event.preventDefault();
273      var formData = $(this).closest('form').serializeArray();
274      formData.push({ name: "edit_save", value: this.value });
275
276      //?TODO formData.ajax_request = "edit_save"
277
278      formData.push({ name: "ajax_request", value: true });
279      $.ajax({
280        type:'POST',
281        url: '@@plonetabs-controlpanel',
282        data: formData,
283        success: function(response) {
284            var json = JSON.parse(response)
285            console.log("response from server: ");
286            console.log(json);
287            if (json.status_code === 200){
288                console.log('display success messages'); 
289
290                $(this).closest('li').replaceWith(json.content);
291            }
292            else{
293                console.log('display error messages');
294
295                //if 'id' in errors or 'available_expr' in errors or 'url_expr' in errors:
296                toggleCollapsible($(this).find('.headerAdvanced'), false);
297            }
298        }
299    });
300  });
301
302//reset(cancel)
303  $('#tabslist .editcancel').live("click", function(event) {
304      console.log('.editcancel clicked ');
305      event.preventDefault();
306      var formData={};
307      formData.ajax_request = true;
308
309      //?TODO formData.ajax_request = "edit_cancel"
310
311      formData.edit_cancel = 'Cancel';
312      var parentFormSelect = $(this).closest('li');
313      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
314      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
315      $.ajax({
316        type:'POST',
317        url: '@@plonetabs-controlpanel',
318        data: formData,
319        success: function(response) {
320            var json = JSON.parse(response)
321            console.log("response from server: ");
322            console.log(json);
323
324            if (json.status_code === 200){
325                console.log('display success messages');
326                parentFormSelect.replaceWith(json.content);
327               
328            }
329            else{
330                console.log('display error messages');
331            }
332        }
333             
334  });
335});
336
337//delete
338  $('#tabslist .delete').live("click", function(event) {
339      console.log('.delete clicked ');
340      event.preventDefault();
341      var formData={};
342      formData.ajax_request = true;
343
344      //?TODO formData.ajax_request = "edit_delete"
345
346      formData.edit_delete = 'Delete';
347      var parentFormSelect = $(this).closest('li');
348      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
349      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
350      $.ajax({
351        type:'POST',
352        url: '@@plonetabs-controlpanel',
353        data: formData,
354        success: function(response) {
355            var json = JSON.parse(response)
356            console.log("response from server: ");
357            console.log(json);
358            if (json.status_code === 200){
359                console.log('display success messages');
360                parentFormSelect.remove()
361            }
362            else{
363                console.log('display error messages');
364            }
365           
366        }
367             
368  });
369});
370
371//visibility
372  $('#tabslist input.visibility').live("click", function(event) {
373      var formData={};
374      formData.ajax_request = true;
375      console.log('#tabslist input.visibility clicked ');
376      formData.tabslist_visible = 'Set visibillity';
377      var parentFormSelect = $(this).closest('li');
378      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
379      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
380      formData.visibility = $(this).is(":checked");
381
382      $.ajax({
383        type:'POST',
384        url: '@@plonetabs-controlpanel',
385        data: formData,
386        success: function(response) {
387            var json = JSON.parse(response)
388            console.log("response from server: ");
389            console.log(json);
390
391
392            if (json.status_code === 200){
393                console.log('display success messages');
394               
395                if (formData.visibility === true){
396                    parentFormSelect.removeClass("invisible");
397                }
398                else{
399                    parentFormSelect.addClass("invisible");
400                }
401            }
402            else{
403                console.log('display error messages');
404            }
405        }
406             
407  });
408});
409
410//changing category
411  $('#select_category').change(function(event) {
412        var formData={};
413        formData.ajax_request = true;
414        console.log('select_category changed ');
415        formData.category = $(this).val();
416        formData.category_change = 'Change';
417        $.ajax({
418          type: 'POST',
419          url:  '@@plonetabs-controlpanel',
420          data: formData,
421          success: function(response) {
422              var json = JSON.parse(response)
423              console.log(json);
424              if (json.status_code === 200){
425                  console.log('display success messages');
426                  $('form[name=addaction_form] input[name=category]').text($('#select_category').val());
427                  $('#tabslist').html(json.actionslist);
428                  $('#autogeneration_section').html(json.section);
429                  $('#plonetabs-form-title').text(json.title);
430
431                  $('#addaction').removeClass('adding');
432                  toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
433
434                  //Sorting lists
435                  $('#tabslist').unbind();
436                  $('#tabslist').sortable().bind('sortupdate', function(){sortableList()});
437
438                  //Running startupActions
439                  startupActions();
440              }
441              else{
442                  console.log('display error messages');
443              }
444          }
445        });
446  });
447</script>
448
449<script> 
450//portal_tabs methods
451
452//visibility
453  $('#roottabs .visibility').live("click", function(event) {
454      var formData={};
455      formData.ajax_request = true;
456      console.log('#roottabs .visibility clicked ');
457      formData.roottabs_visible = 'Visibillity';
458      var parentFormSelect = $(this).closest('li');
459      formData.orig_id = parentFormSelect.attr('id');
460      formData.visibility = $(this).is(":checked");
461      $.ajax({
462        type:'POST',
463        url: '@@plonetabs-controlpanel',
464        data: formData,
465        success: function(response) {
466            var json = JSON.parse(response)
467            console.log("response from server: ");
468            console.log(json);
469            if (json.status_code === 200){
470                console.log('display success messages');
471                $('#portal-globalnav').load(' #portal-globalnav>*');
472                if (formData.visibility === true){
473                    parentFormSelect.removeClass("invisible");
474                }
475                else{
476                    parentFormSelect.addClass("invisible");
477                }
478               
479            }
480            else{
481                console.log('display error messages');
482            }
483        }
484             
485  });
486});
487
488//General func for toggleGeneratedTabs and nonfolderish_tabs request
489  function sendRequest(field_name, checked_status){
490    var formData={};
491    formData.ajax_request = true;
492    formData.field = field_name;
493    formData.generated_tabs = checked_status;
494    $.ajax({
495      type:'POST',
496      url: '@@plonetabs-controlpanel',
497      data: formData,
498      success: function(response) {
499          var json = JSON.parse(response)
500          console.log("response from server: ");
501          console.log(json);
502          if (json.status_code === 200){
503              $('#roottabs').html(json.content);
504              $('#portal-globalnav').load(' #portal-globalnav>*');
505              console.log('display success messages');
506          }
507          else{
508              console.log('display error messages');
509          }
510      }     
511    });
512  }
513
514//toggleGeneratedTabs
515  $('#generated_tabs').live("click", function() {
516      console.log('#generated_tabs clicked ');
517      var field_name = 'disable_folder_sections';
518      var checked_status = $(this).is(":checked");
519      sendRequest(field_name, checked_status);
520  });
521
522//nonfolderish_tabs
523  $('#nonfolderish_tabs').live("click", function() {
524      console.log('#nonfolderish_tabs clicked ');
525      var field_name = 'disable_nonfolderish_sections';
526      var checked_status = $(this).is(":checked");
527      sendRequest(field_name, checked_status);
528  });
529</script>
530
531
532
533<script> 
534//Add new action methods
535
536//focus
537    $("#actname").live("focus", function() {
538        console.log("#actname on focus");
539        $('#addaction').addClass('adding');
540    });
541
542//cancel
543  $('#buttoncancel').live("click", function(event) {
544      console.log('#buttoncancel clicked ');
545      event.preventDefault();
546      $('#addaction').removeClass('adding');
547      toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
548      //('#kssPortalMessage').css("display", "none");
549  });
550
551//add
552  //TODO: add #addaction:submit event processing
553  $('#buttonadd').live("click", function(event) {
554      console.log('#buttonadd clicked ');
555      event.preventDefault();
556      var formData = $(this).closest('form').serializeArray();
557      formData.push({ name: "add_add", value: this.value });
558      formData.push({ name: "ajax_request", value: true });
559      formData.push({ name: "cat_name", value: $('#select_category').val() });
560
561      $.ajax({
562        type:'POST',
563        url: '@@plonetabs-controlpanel',
564        data: formData,
565        success: function(response) {
566          var json = JSON.parse(response)
567          console.log("response from server: ");
568          console.log(json);
569          if (json.status_code === 200){
570            console.log('display success messages');
571
572            $("#tabslist").append(json.content)   
573            $("addaction").removeClass("adding");
574            toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
575
576            //TODO
577            //self.kss_blur(ksscore.getHtmlIdSelector('actname'))
578
579          }
580          else{
581            console.log('display error messages');
582
583            //TODO
584            //if 'id' in errors or 'available_expr' in errors:
585            toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), false);
586           
587           
588          }
589        }
590    });
591  });
592</script>
593</div>
594
595</body>
596</html>
Note: See TracBrowser for help on using the repository browser.