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

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

add icon field
  • Property svn:eol-style set to native
File size: 22.0 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-icon"
133          tal:define="error errors/icon_expr|nothing"
134          tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
135        <dt>
136          <label for="actaction" i18n:translate="">Icon (Expression)</label>
137        </dt>
138        <dd>
139          <span class="error-container" tal:content="error"
140                i18n:translate="">Validation error output</span>
141          <input id="actaction" type="text" value="" size="30" name="icon_expr"
142                 tal:attributes="value request/icon_expr|nothing"/>
143        </dd>
144      </dl>
145        <dl class="field-condition"
146            tal:define="error errors/available_expr|nothing"
147            tal:attributes="class python:test(error, '%s error' % attrs['class'], attrs['class'])">
148          <dt>
149            <label for="actcondition" i18n:translate="">Condition (Expression)</label>
150          </dt>
151          <dd>
152            <span class="error-container" tal:content="error"
153                  i18n:translate="">Validation error output</span>
154            <input id="actcondition" type="text" value="" size="30" name="available_expr"
155                   tal:attributes="value request/available_expr|nothing" />
156          </dd>
157        </dl>
158        <div class="visualClear"><!-- --></div>
159      </dd>
160    </dl>
161    <div class="add-controls">
162      <input type="submit" id="buttonadd" class="context" i18n:attributes="value" name="add.add" value="Add" />
163      <input type="submit" id="buttoncancel" class="standalone" i18n:attributes="value" name="add.cancel" value="Cancel" />
164      <input type="reset"  id="buttonreset" class="editreset kssHidden context" i18n:attributes="value" name="add.reset" value="Reset"  />
165    </div>
166  </form>
167
168  <tal:autogenerated_section tal:replace="structure python:view.getAutoGenereatedSection(cat_name=category, errors=errors)" />
169
170</div>
171
172</div>
173<script>
174  (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);
175</script>
176
177<script>
178//Functions declaration
179
180  function sortableList() {
181    console.log('sort changed');
182    var formData = {};
183
184    //?TODO formData.ajax_request = "edit_moveact"
185
186    formData.ajax_request = true;
187    var liIds = $('#tabslist li').map(function(i,n) {
188      return $(n).attr('id');
189    }).get().join('&');
190    cat_name = $('#select_category').val();
191    formData.cat_name  = cat_name;
192    formData.actions  = liIds;
193    formData.edit_moveact  = 'Move Action';
194    //formData.push({ name: 'edit.moveact', value: 'Move Action'});
195    $.ajax({
196      type:'POST',
197      url: '@@plonetabs-controlpanel',
198      data: formData,
199      success: function(response) {
200            var json = JSON.parse(response)
201            console.log("response from server: ");
202            console.log(json);
203
204            if (json.status_code === 200){
205                console.log('display success messages');
206            }
207            else{
208                console.log('display error messages');
209            }
210      }
211    });
212  }
213
214  function toggleCollapsible(el, collapse) {
215    collapse = typeof collapse !== 'undefined' ? collapse : 'default';
216
217    var node = el.parent(".collapseAdvanced");
218
219    if(collapse!=='default'){
220      if (collapse==true){
221          console.log("removeClass expandedBlock; addClass collapsedBlock");
222          node.removeClass('expandedBlock');
223          node.addClass('collapsedBlock');
224      }
225      else{
226          console.log("removeClass collapsedBlock; addClass expandedBlock");
227          node.removeClass('collapsedBlock');
228          node.addClass('expandedBlock');
229      }
230    }
231    else{
232      if (node.hasClass('collapsedBlock')){
233          console.log("removeClass collapsedBlock; addClass expandedBlock");
234          node.removeClass('collapsedBlock');
235          node.addClass('expandedBlock');
236      }
237      else{
238          console.log("removeClass expandedBlock; addClass collapsedBlock");
239          node.removeClass('expandedBlock');
240          node.addClass('collapsedBlock');
241      }
242    }
243
244  }
245
246  function startupActions() {
247    console.log('running basic methods');
248    $(".add-controls input").addClass('allowMultiSubmit');
249    $(".edit-controls input").addClass('allowMultiSubmit');
250    $(".collapseAdvanced").removeClass('expandedBlock').addClass('collapsedBlock');
251  }
252</script>
253
254<script>
255  $(document).ready(function() {
256    console.log('document ready');
257    $("#plonetabs_form").addClass('kssTabsActive');
258    startupActions()
259  });
260</script>
261
262
263<script>
264/*CLIENTS METHODS*/
265
266//titleWrapper
267    $("#tabslist .titleWrapper").live("click", function() {
268        console.log("#tabslist .titleWrapper clicked");
269        ($(this).closest('li')).addClass('editing');
270    });
271
272//collapse
273    $(".collapseAdvanced .headerAdvanced").live("click", function(event) {
274        console.log(".collapseAdvanced .headerAdvanced clicked");
275        toggleCollapsible($(this));
276    });
277</script>
278
279<script> 
280/*AJAX METHODS*/
281
282//save(edit)
283  $('#tabslist .editsave').live("click", function(event) {
284      console.log('.editsave clicked ');
285      event.preventDefault();
286      var formData = $(this).closest('form').serializeArray();
287      formData.push({ name: "edit_save", value: this.value });
288
289      //?TODO formData.ajax_request = "edit_save"
290
291      formData.push({ name: "ajax_request", value: true });
292      $.ajax({
293        type:'POST',
294        url: '@@plonetabs-controlpanel',
295        data: formData,
296        success: function(response) {
297            var json = JSON.parse(response)
298            console.log("response from server: ");
299            console.log(json);
300            if (json.status_code === 200){
301                console.log('display success messages'); 
302
303                $(this).closest('li').replaceWith(json.content);
304            }
305            else{
306                console.log('display error messages');
307
308                //if 'id' in errors or 'available_expr' in errors or 'url_expr' in errors:
309                toggleCollapsible($(this).find('.headerAdvanced'), false);
310            }
311        }
312    });
313  });
314
315//reset(cancel)
316  $('#tabslist .editcancel').live("click", function(event) {
317      console.log('.editcancel clicked ');
318      event.preventDefault();
319      var formData={};
320      formData.ajax_request = true;
321
322      //?TODO formData.ajax_request = "edit_cancel"
323
324      formData.edit_cancel = 'Cancel';
325      var parentFormSelect = $(this).closest('li');
326      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
327      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
328      $.ajax({
329        type:'POST',
330        url: '@@plonetabs-controlpanel',
331        data: formData,
332        success: function(response) {
333            var json = JSON.parse(response)
334            console.log("response from server: ");
335            console.log(json);
336
337            if (json.status_code === 200){
338                console.log('display success messages');
339                parentFormSelect.replaceWith(json.content);
340               
341            }
342            else{
343                console.log('display error messages');
344            }
345        }
346             
347  });
348});
349
350//delete
351  $('#tabslist .delete').live("click", function(event) {
352      console.log('.delete clicked ');
353      event.preventDefault();
354      var formData={};
355      formData.ajax_request = true;
356
357      //?TODO formData.ajax_request = "edit_delete"
358
359      formData.edit_delete = 'Delete';
360      var parentFormSelect = $(this).closest('li');
361      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
362      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
363      $.ajax({
364        type:'POST',
365        url: '@@plonetabs-controlpanel',
366        data: formData,
367        success: function(response) {
368            var json = JSON.parse(response)
369            console.log("response from server: ");
370            console.log(json);
371            if (json.status_code === 200){
372                console.log('display success messages');
373                parentFormSelect.remove()
374            }
375            else{
376                console.log('display error messages');
377            }
378           
379        }
380             
381  });
382});
383
384//visibility
385  $('#tabslist input.visibility').live("click", function(event) {
386      var formData={};
387      formData.ajax_request = true;
388      console.log('#tabslist input.visibility clicked ');
389      formData.tabslist_visible = 'Set visibillity';
390      var parentFormSelect = $(this).closest('li');
391      formData.orig_id = parentFormSelect.find('.editform input[name="orig_id"]').val();
392      formData.category = parentFormSelect.find('.editform input[name="category"]').val();
393      formData.visibility = $(this).is(":checked");
394
395      $.ajax({
396        type:'POST',
397        url: '@@plonetabs-controlpanel',
398        data: formData,
399        success: function(response) {
400            var json = JSON.parse(response)
401            console.log("response from server: ");
402            console.log(json);
403
404
405            if (json.status_code === 200){
406                console.log('display success messages');
407               
408                if (formData.visibility === true){
409                    parentFormSelect.removeClass("invisible");
410                }
411                else{
412                    parentFormSelect.addClass("invisible");
413                }
414            }
415            else{
416                console.log('display error messages');
417            }
418        }
419             
420  });
421});
422
423//changing category
424  $('#select_category').change(function(event) {
425        var formData={};
426        formData.ajax_request = true;
427        console.log('select_category changed ');
428        formData.category = $(this).val();
429        formData.category_change = 'Change';
430        $.ajax({
431          type: 'POST',
432          url:  '@@plonetabs-controlpanel',
433          data: formData,
434          success: function(response) {
435              var json = JSON.parse(response)
436              console.log(json);
437              if (json.status_code === 200){
438                  console.log('display success messages');
439                  $('form[name=addaction_form] input[name=category]').text($('#select_category').val());
440                  $('#tabslist').html(json.actionslist);
441                  $('#autogeneration_section').html(json.section);
442                  $('#plonetabs-form-title').text(json.title);
443
444                  $('#addaction').removeClass('adding');
445                  toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
446
447                  //Sorting lists
448                  $('#tabslist').unbind();
449                  $('#tabslist').sortable().bind('sortupdate', function(){sortableList()});
450
451                  //Running startupActions
452                  startupActions();
453              }
454              else{
455                  console.log('display error messages');
456              }
457          }
458        });
459  });
460</script>
461
462<script> 
463//portal_tabs methods
464
465//visibility
466  $('#roottabs .visibility').live("click", function(event) {
467      var formData={};
468      formData.ajax_request = true;
469      console.log('#roottabs .visibility clicked ');
470      formData.roottabs_visible = 'Visibillity';
471      var parentFormSelect = $(this).closest('li');
472      formData.orig_id = parentFormSelect.attr('id');
473      formData.visibility = $(this).is(":checked");
474      $.ajax({
475        type:'POST',
476        url: '@@plonetabs-controlpanel',
477        data: formData,
478        success: function(response) {
479            var json = JSON.parse(response)
480            console.log("response from server: ");
481            console.log(json);
482            if (json.status_code === 200){
483                console.log('display success messages');
484                $('#portal-globalnav').load(' #portal-globalnav>*');
485                if (formData.visibility === true){
486                    parentFormSelect.removeClass("invisible");
487                }
488                else{
489                    parentFormSelect.addClass("invisible");
490                }
491               
492            }
493            else{
494                console.log('display error messages');
495            }
496        }
497             
498  });
499});
500
501//General func for toggleGeneratedTabs and nonfolderish_tabs request
502  function sendRequest(field_name, checked_status){
503    var formData={};
504    formData.ajax_request = true;
505    formData.field = field_name;
506    formData.generated_tabs = checked_status;
507    $.ajax({
508      type:'POST',
509      url: '@@plonetabs-controlpanel',
510      data: formData,
511      success: function(response) {
512          var json = JSON.parse(response)
513          console.log("response from server: ");
514          console.log(json);
515          if (json.status_code === 200){
516              $('#roottabs').html(json.content);
517              $('#portal-globalnav').load(' #portal-globalnav>*');
518              console.log('display success messages');
519          }
520          else{
521              console.log('display error messages');
522          }
523      }     
524    });
525  }
526
527//toggleGeneratedTabs
528  $('#generated_tabs').live("click", function() {
529      console.log('#generated_tabs clicked ');
530      var field_name = 'disable_folder_sections';
531      var checked_status = $(this).is(":checked");
532      sendRequest(field_name, checked_status);
533  });
534
535//nonfolderish_tabs
536  $('#nonfolderish_tabs').live("click", function() {
537      console.log('#nonfolderish_tabs clicked ');
538      var field_name = 'disable_nonfolderish_sections';
539      var checked_status = $(this).is(":checked");
540      sendRequest(field_name, checked_status);
541  });
542</script>
543
544
545
546<script> 
547//Add new action methods
548
549//focus
550    $("#actname").live("focus", function() {
551        console.log("#actname on focus");
552        $('#addaction').addClass('adding');
553    });
554
555//cancel
556  $('#buttoncancel').live("click", function(event) {
557      console.log('#buttoncancel clicked ');
558      event.preventDefault();
559      $('#addaction').removeClass('adding');
560      toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
561      //('#kssPortalMessage').css("display", "none");
562  });
563
564//add
565  //TODO: add #addaction:submit event processing
566  $('#buttonadd').live("click", function(event) {
567      console.log('#buttonadd clicked ');
568      event.preventDefault();
569      var formData = $(this).closest('form').serializeArray();
570      formData.push({ name: "add_add", value: this.value });
571      formData.push({ name: "ajax_request", value: true });
572      formData.push({ name: "cat_name", value: $('#select_category').val() });
573
574      $.ajax({
575        type:'POST',
576        url: '@@plonetabs-controlpanel',
577        data: formData,
578        success: function(response) {
579          var json = JSON.parse(response)
580          console.log("response from server: ");
581          console.log(json);
582          if (json.status_code === 200){
583            console.log('display success messages');
584
585            $("#tabslist").append(json.content)   
586            $("addaction").removeClass("adding");
587            toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), true);
588
589            //TODO
590            //self.kss_blur(ksscore.getHtmlIdSelector('actname'))
591
592          }
593          else{
594            console.log('display error messages');
595
596            //TODO
597            //if 'id' in errors or 'available_expr' in errors:
598            toggleCollapsible($('form[name=addaction_form] .headerAdvanced'), false);
599           
600           
601          }
602        }
603    });
604  });
605</script>
606</div>
607
608</body>
609</html>
Note: See TracBrowser for help on using the repository browser.