#1 Fixes issues related to Availability generation and theming

CRM/Availability/BAO/Availability.php

@@ -8,7 +8,7 @@ class CRM_Availability_BAO_Availability {
   static function loadResources() {
     Civi::resources()
       ->addStyleFile('availability', 'availability.css')
-      ->addScriptFile('availability', 'availability.js');
+      ->addScriptFile('availability', 'availability.js', 10, 'page-header');
 
     $fields = Civi::settings()->get('availability_fields');
 

README.md

@@ -38,7 +38,7 @@ function yourext_civicrm_pageRun(&$page) {
 
   if ($pageName == 'CRM_Contact_Page_View_Summary') {
     // For inline edit.
-    Civi::resources()->addScript('CRM.availabilityWidgetEdit("#crm-container #Contact .symbiocrm-custom-field-row-123");');
+    Civi::resources()->addScript('CRM.availabilityWidgetEdit("#crm-container #Contact .symbiocrm-custom-field-row-123");', 123);
 
     // View Contact
     Civi::resources()->addScript('CRM.availabilityWidgetView("#crm-container .customFieldGroup.my-custom-group-name .crm-summary-row:eq(0) .crm-content", 123);');

availability.css

@@ -74,3 +74,20 @@
   text-align: center;
   border: 2px solid #fff;
 }
+.crm-table-availability tr.crm-form-availability-weekdays:not(.crm-availability-data) td {
+  text-align:center;
+}
+
+/**
+ * Formatting for labels
+ */
+.crm-form-availability-period > td {
+  vertical-align:middle!important;
+}
+.crm-availability-processed tr.crm-form-availability-weekdays > td:not(:first-child),
+.crm-availability-processed tr.crm-form-availability-period > td {
+  cursor:pointer;
+}
+.crm-availability-processed td.html-adjust {
+  display:none;
+}

availability.js

@@ -14,42 +14,59 @@
 
         $field.addClass('crm-availability-processed');
 
+        // Build table
+        var $field_data = $field.find('td:last-child');
+        var $newTable = $('<td><table class="crm-table-availability"><tbody><tr class="crm-availability-data"></tr></tbody></table></td>');
+        $field.append($newTable);
+        var $tr = $newTable.find('tr');
+        $tr.addClass('crm-form-availability-weekdays');
+
+        // Firt column (under which we will have the periods).
+        $('<td></td>').appendTo($tr);
+
+        // Add day headers
+        for (let i=0; i < CRM.availability.fields[field_id].days.length; i++) {
+          $('<td>' + CRM.availability.fields[field_id].days[i] + '</td>').appendTo($tr);
+        }
+
+        // Add the various periods (ex: AM/PM/Evening)
+        for (let i = CRM.availability.fields[field_id].periods.length - 1; i >= 0; i--) {
+          $tr.after('<tr class="crm-form-availability-period"><td>' + CRM.availability.fields[field_id].periods[i] + '</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
+        }
+
+
+        // Parse the selected options
         $('.crm-form-checkbox', $field).each(function() {
-          var $this = $(this);
-          var $parent = $this.parent();
           var $label = $('label[for=' + $(this).attr('id') + ']');
-          var id = 'crm-checkbox-' + $this.attr('name').replace(/[^_a-zA-Z0-9]/g, '_') + '-wrapper';
+          var id = 'crm-checkbox-' + $(this).attr('name').replace(/[^_a-zA-Z0-9]/g, '_') + '-wrapper';
           var $div = $('<div>', {id: id, 'class': 'crm-availability-wrapper'});
+          var $parent = $(this).parent();
 
           // Move label as an attribute and remove/hide label (we still need the actual label for the CSS)
-          $div.attr('title', $label.text());
+          var timeLabel = $label.text();
+          $div.attr('title', timeLabel);
           $label.text('');
 
-          if ($this.prop('checked')) {
+          if ($(this).prop('checked')) {
             $div.addClass('selected');
           }
 
-          $div.append($this);
+          // Rebuild by wrapping it around a div
+          $div.append($(this));
           $div.append($label);
           $parent.append($div);
-        });
-
-        // Add day headers
-        var $tr = $('<tr>', {class: 'crm-form-availability-weekdays'});
-
-        // Firt column (under which we will have the periods).
-        $('<td></td>').appendTo($tr);
 
-        for (let i=0; i < CRM.availability.fields[field_id].days.length; i++) {
-          $('<td>' + CRM.availability.fields[field_id].days[i] + '</td>').appendTo($tr);
-        }
+          // Find the column/row matching the given day.
+          let parts = timeLabel.trim().split(' ');
+          var col = CRM.availabilityFindCol(field_id, parts[0]);
+          var row = CRM.availabilityFindRow(field_id, parts[1].toLowerCase());
 
-        $tr.prependTo($field.find('table > tbody'));
+          $newTable.find('tr:eq(' + row + ') td:eq(' + col + ')').append($div);
+        });
 
-        // Add the various periods (ex: AM/PM/Evening)
-        for (let i=0; i < CRM.availability.fields[field_id].periods.length; i++) {
-          $field.find('table > tbody > tr').eq(i+1).prepend('<td class="crm-form-availability-period">' + CRM.availability.fields[field_id].periods[i] + '</td>');
-        }
+        // Add the table
+        var $tr_data = $newTable.find('.crm-availability-data');
+        $field_data.appendTo($tr_data);
 
         // Make the days clickable
         $('.crm-form-availability-weekdays > td', $field).click(function() {
@@ -63,7 +80,7 @@
         });
 
         // Make rows clickable
-        $('td.crm-form-availability-period', $field).click(function() {
+        $('tr.crm-form-availability-period > td', $field).click(function() {
           var state = $(this).data('availability-all') ? false : true;
 
           // Find which row was clicked
@@ -116,15 +133,8 @@
 
       for (let i=0; i < t.length; i++) {
         let parts = t[i].trim().split(' ');
-
-        // Find the column matching the given day.
-        var col = $('tr.crm-form-availability-weekdays td', $table).filter(function() {
-          return $(this).text() == parts[0];
-        }).index();
-
-        var row = $('tr td.crm-form-availability-period', $table).filter(function() {
-          return $(this).text().toLowerCase() == parts[1].toLowerCase();
-        }).parent().index();
+        var col = CRM.availabilityFindCol(field_id, parts[0]);
+        var row = CRM.availabilityFindRow(field_id, parts[1].toLowerCase());
 
         $('tr:eq(' + row + ') td:eq(' + col + ')', $table).text('✔').addClass('selected');
       }
@@ -134,4 +144,27 @@
     $table.prependTo(selector);
   };
 
+  CRM.availabilityFindCol = function(field_id, label) {
+    for (let i=0; i< CRM.availability.fields[field_id].days.length; i++) {
+      if (CRM.availability.fields[field_id].days[i] == label) {
+        return i + 1;
+      }
+    }
+
+    console.log('Cannot find a matching col');
+    return -1;
+  };
+
+
+  CRM.availabilityFindRow = function(field_id, label) {
+    for (let i = CRM.availability.fields[field_id].periods.length - 1; i >= 0; i--) {
+      if (CRM.availability.fields[field_id].periods[i].toLowerCase() == label) {
+        return i + 1;
+      }
+    }
+
+    console.log('Cannot find a matching row');
+    return -1;
+  };
+
 })(CRM.$, CRM._, CRM.ts('availability'));