Is it possible to use tal:conditions in a Javascript file?

Question

I am working on creating a new context menu that provides more accessibility. The old menu was using the context menu ID's to check conditions with tal in Index.html. My issue now is that I am no longer using action and not using the ID's. The new context menu is creating each menu with a different ID. I tried declaring "var emp_menu_items = [];" in a script tag inside the condition and removing it from the Employee class but I'm still getting error that it is undefined.

I also tried building the new context menu in Index.html but it needs parameters that are inside of Employee.js. So is there a solution to use the tal:conditions in a JS file?

Index.html

<a metal:fill-slot="context_menus" tal:omit-tag="">
    <ul id="employee_context_menu" class="hidden" tal:define="sec_posted python:container.util.checkSecurity(mn_name='Posted')">
      <li tal:condition="python:layout == 'np'"><a href="#assign_pat">Assign Patients</a></li>
      <li tal:condition="python:container.util.checkSecurity(mn_name='File')"><a href="#hr_file">HR File</a></li>
      <li tal:condition="python:sec_posted"><a href="#schedule">Pay Period Schedule</a></li>
      <li><a href="#Close">Close Menu</a></li>
    </ul>

This is the old menu in Employee.js class

$name.contextMenu({
          menu:      "employee_context_menu",
          leftClick: true
        }, function(action, elem, position) {
          if(action == 'Close') {
            jQuery(".contextMenu").hide();
            return true;
          } else if(action === 'hr_file') {
            $iframe.attr('src', 'Personnel/cgi_utran/cgi_utran?args=-i'+$div.data('obj').id).load(function() {resizeIframe(this)});
          } else if(action === 'assign_pat') {

              $j.PatientAssignment.assign_check = emp.id;
              $name.addClass('highlight');

              var title_str ='Assign Patients to ' + employee_name;
              $j.PatientAssignment.sub_title = ''
              var mheight = $j(window).height()*0.7;
              $j('#beds').dialog('close');
              $j('#beds').css('max-height',mheight).dialog({
                      modal: false,
                      title: title_str,
                      height:'auto',
                      width: 'auto',
                      close: function() { $name.removeClass('highlight'); }
              });

              syncPatientAssignments();
              syncBedAssignments();
              return true;

          } else if(action === 'schedule') {
            $iframe.attr('src', 'ScheduleStaff/cgi_daystaff?szDate='+emp.shiftdate+'&szID='+emp.id+'&args=-t').load(function() {resizeIframe(this)});
          } else if(action === 'assign_work') {
            $iframe.attr('src', 'ScheduleStaff/cgi_daystaff?args=-t OneEmployee -I'+emp.id+' -B'+emp.shiftdate).load(function() {resizeIframe(this)});
          } else { }
          $name.addClass('highlight');
          $j("#modal_window").dialog({
            modal:    true,
            width:    'auto',
            show:     'scale',
            hide:     'scale',
            height:   'auto',
            close:  function() {window.location.reload(); $name.removeClass('highlight'); }
          });
        });

My changes to the context menu in Employee.js

employeeContextMenu($div, emp, employee_name, count) {
      var emp_menu_items = [];
      var emp_menu = {};
      emp_menu_items.push({
          name: 'Assign Patients', title: 'Assign Patients',
          fn: function(el) {
            $j.PatientAssignment.assign_check = emp.id;
            var title_str ='Assign Patients to ' + employee_name;
            $j.PatientAssignment.sub_title = ''
            var mheight = $j(window).height()*0.7;

            if ($j('#beds').hasClass("ui-dialog-content") && $j( "#beds" ).dialog( "isOpen" )){
            $j('#beds').dialog('close');
              }
            $j('#beds').css('max-height',mheight).dialog({
                    modal: false,
                    title: title_str,
                    height:'auto',
                    width: 'auto',
                    position: [670, 115],
                    focus: function(event,ui) {
                      $j(".ui-icon-closethick").focus();
                    },
                    buttons: {
                      OK: function(){
                        $j(this).dialog("close");
                      }
                    }

            });

            syncPatientAssignments();
            syncBedAssignments();
            }
        });
      emp_menu_items.push({
            name: 'HR File', title: 'HR File',
            fn: function(el){return pop_over_window('Personnel/cgi_utran/cgi_utran?args=-i'+$div.data('obj').id);}});
      emp_menu_items.push({
            name: 'Pay Period Schedule', title: 'Pay Period Schedule',
            fn: function(el){return pop_over_window('ScheduleStaff/cgi_daystaff?szDate='+emp.shiftdate+'&szID='+emp.id+'&args=-t');}});
      emp_menu_items.push({
            name: 'Close Menu', title: '',
            fn: function(el){return false}, });
    
      emp_menu = new ContextMenu('employee_context_menu_'+count, 'Employee Context Menu Options', '.name', emp_menu_items, {container:$div[0]});
    }

Answer 1

I guess what you are looking for is to use server-side code inside a javascript "file" (I presume from the tagging of your question that you are working in Zope, so the javascript would be contained in an object in the ZODB).

Create your Employee.js as a DTML Method or DTML Document or Script (Python) to this end.

In the DTML objects, instead of tal-conditions, you can use <dtml-if>my js code<dtml-else>more js code</dtml-if> and any other DTML construct.

Of course you could also write a Python Script that returns the javascript code.