From 10bf3572d0cf07faa8ee23204eb52380a5c6709b Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 24 Feb 2017 20:33:32 -0700
Subject: [PATCH] CRM-20179 - Upgrade jstree on contact summary screen

---
 CRM/Contact/Page/View/Summary.php             |  2 -
 CRM/Core/Smarty/plugins/function.crmStyle.php |  3 +
 CRM/Tag/Form/Tag.php                          | 11 ---
 css/contactSummary.css                        | 16 ++--
 templates/CRM/Tag/Form/Tag.tpl                | 90 +++++++++----------
 templates/CRM/Tag/Form/Tagtree.tpl            |  9 +-
 6 files changed, 53 insertions(+), 78 deletions(-)

diff --git a/CRM/Contact/Page/View/Summary.php b/CRM/Contact/Page/View/Summary.php
index 7a633d1e49..fe0cb5338a 100644
--- a/CRM/Contact/Page/View/Summary.php
+++ b/CRM/Contact/Page/View/Summary.php
@@ -119,8 +119,6 @@ class CRM_Contact_Page_View_Summary extends CRM_Contact_Page_View {
     CRM_Core_Resources::singleton()
       ->addScriptFile('civicrm', 'templates/CRM/Contact/Page/View/Summary.js', 2, 'html-header')
       ->addStyleFile('civicrm', 'css/contactSummary.css', 2, 'html-header')
-      ->addScriptFile('civicrm', 'packages/jquery/plugins/jstree/jquery.jstree.js', 0, 'html-header', FALSE)
-      ->addStyleFile('civicrm', 'packages/jquery/plugins/jstree/themes/default/style.css', 0, 'html-header')
       ->addScriptFile('civicrm', 'templates/CRM/common/TabHeader.js', 1, 'html-header')
       ->addSetting(array(
         'summaryPrint' => array('mode' => $this->_print),
diff --git a/CRM/Core/Smarty/plugins/function.crmStyle.php b/CRM/Core/Smarty/plugins/function.crmStyle.php
index b38e7f3c67..3f5f6b6fb8 100644
--- a/CRM/Core/Smarty/plugins/function.crmStyle.php
+++ b/CRM/Core/Smarty/plugins/function.crmStyle.php
@@ -56,6 +56,9 @@ function smarty_function_crmStyle($params, &$smarty) {
   if (empty($params['region'])) {
     $params['region'] = CRM_Core_Resources::DEFAULT_REGION;
   }
+  if (empty($params['ext'])) {
+    $params['ext'] = 'civicrm';
+  }
 
   if (array_key_exists('file', $params)) {
     $res->addStyleFile($params['ext'], $params['file'], $params['weight'], $params['region']);
diff --git a/CRM/Tag/Form/Tag.php b/CRM/Tag/Form/Tag.php
index 55ccd7514f..231fb43db0 100644
--- a/CRM/Tag/Form/Tag.php
+++ b/CRM/Tag/Form/Tag.php
@@ -99,17 +99,6 @@ class CRM_Tag_Form_Tag extends CRM_Core_Form {
 
     $tags = new CRM_Core_BAO_Tag();
     $tree = $tags->getTree($this->_entityTable, TRUE);
-
-    // let's not load jstree if there are not children. This also fixes blank
-    // display at the beginning of checkboxes
-    $loadJsTree = CRM_Utils_Array::retrieveValueRecursive($tree, 'children');
-    $this->assign('loadjsTree', FALSE);
-    if (!empty($loadJsTree)) {
-      CRM_Core_Resources::singleton()
-        ->addScriptFile('civicrm', 'packages/jquery/plugins/jstree/jquery.jstree.js', 0, 'html-header', FALSE)
-        ->addStyleFile('civicrm', 'packages/jquery/plugins/jstree/themes/default/style.css', 0, 'html-header');
-      $this->assign('loadjsTree', TRUE);
-    }
     $this->assign('tree', $tree);
 
     $this->assign('allTags', $allTags);
diff --git a/css/contactSummary.css b/css/contactSummary.css
index 6a957989da..c29270bac9 100644
--- a/css/contactSummary.css
+++ b/css/contactSummary.css
@@ -349,14 +349,7 @@ div#crm-contact-thumbnail {
   max-height: 500px;
   overflow: auto;
 }
-#tagtree,
-#tagtree li.highlighted ul {
-  background-color: white;
-}
-#tagtree li.highlighted,
-#tagtree li.highlighted-child.jstree-closed {
-  background-color: #fefcb0;
-}
+
 #tagtree li {
   margin-top: 5px;
 }
@@ -365,8 +358,11 @@ div#crm-contact-thumbnail {
   position: relative;
   top: -3px;
 }
-#tagtree input {
-  margin: 0;
+#tagtree .jstree-disabled {
+  cursor: not-allowed;
+}
+#tagtree .jstree-disabled > .jstree-checkbox {
+  opacity: .2;
 }
 
 #tagGroup table .label {
diff --git a/templates/CRM/Tag/Form/Tag.tpl b/templates/CRM/Tag/Form/Tag.tpl
index b83dffad9c..64ccc9707e 100644
--- a/templates/CRM/Tag/Form/Tag.tpl
+++ b/templates/CRM/Tag/Form/Tag.tpl
@@ -24,6 +24,7 @@
  +--------------------------------------------------------------------+
 *}
 {* this template is used for adding/editing tags  *}
+{crmStyle file='bower_components/jstree/dist/themes/default/style.min.css'}
 {literal}
 <script type="text/javascript">
   (function($, _){{/literal}
@@ -31,71 +32,60 @@
       entityTable='{$entityTable}',
       $form = $('form.{$form.formClass}');
     {literal}
-    CRM.updateContactSummaryTags = function() {
-      var tags = [];
-      $('#tagtree input:checkbox:checked+a label').each(function() {
-        tags.push('<span class="crm-tag-item" style="' + $(this).attr('style') + '" title="' + ($(this).attr('title') || '') + '">' + $(this).text() + '</span>');
-      });
-      $('input.crm-contact-tagset').each(function() {
-        $.each($(this).select2('data'), function (i, tag) {
-          tags.push('<span class="crm-tag-item" title="' + (tag.description || '') + '"' + (tag.color ? 'style="color: ' + CRM.utils.colorContrast(tag.color) + '; background-color: ' + tag.color + ';"' : '') + '>' + tag.label + '</span>');
-        });
-      });
-      // contact summary tabs and search forms both listen for this event
-      $($form).closest('.crm-ajax-container').trigger('crmFormSuccess', {tabCount: tags.length});
-      // update summary tab
-      $("#contact-summary #tags").html(tags.join(' '));
-    };
 
     $(function() {
-      function highlightSelected() {
-        $("ul input:not(:checked)", '#tagtree').each(function () {
-          $(this).closest("li").removeClass('highlighted highlighted-child');
+
+      // Display tags on the contact summary
+      function updateContactSummaryTags() {
+        var tags = [],
+          selected = $("#tagtree").jstree(true).get_selected(true);
+        $.each(selected, function(k, item) {
+          var $tag = $(item.text);
+          tags.push('<span class="crm-tag-item" style="' + $tag.attr('style') + '" title="' + ($tag.attr('title') || '') + '">' + $tag.text() + '</span>');
         });
-        $("ul input:checked", '#tagtree').each(function () {
-          $(this).closest("li").addClass('highlighted');
-          $(this).parents("li[id^=tag]").addClass('highlighted-child');
+        $('input.crm-contact-tagset').each(function() {
+          $.each($(this).select2('data'), function (i, tag) {
+            tags.push('<span class="crm-tag-item" title="' + (tag.description || '') + '"' + (tag.color ? 'style="color: ' + CRM.utils.colorContrast(tag.color) + '; background-color: ' + tag.color + ';"' : '') + '>' + tag.label + '</span>');
+          });
         });
+        // contact summary tabs and search forms both listen for this event
+        $($form).closest('.crm-ajax-container').trigger('crmFormSuccess', {tabCount: tags.length});
+        // update summary tab
+        $("#contact-summary #tags").html(tags.join(' '));
       }
-      highlightSelected();
 
-      $("#tagtree input").change(function(){
-        var tagid = this.id.replace("check_", "");
-        var op = (this.checked) ? 'create' : 'delete';
-        var api = CRM.api3('entity_tag', op, {entity_table: entityTable, entity_id: entityID, tag_id: tagid}, true);
-        highlightSelected();
-        CRM.updateContactSummaryTags();
-      });
-      var childTag = "{/literal}{$loadjsTree}{literal}";
-      if (childTag) {
-        //load js tree.
+      // Load js tree.
+      CRM.loadScript(CRM.config.resourceBase + 'bower_components/jstree/dist/jstree.min.js').done(function() {
         $("#tagtree").jstree({
-          plugins : ["themes", "html_data", "search"],
-          core: {animation: 100},
+          plugins : ['search', 'wholerow', 'checkbox'],
+          core: {
+            animation: 100,
+            themes: {
+              "theme": 'classic',
+              "dots": false,
+              "icons": false
+            }
+          },
           'search': {
             'case_insensitive' : true,
             'show_only_matches': true
           },
-          themes: {
-            "theme": 'classic',
-            "dots": false,
-            "icons": false,
-            "url": CRM.config.resourceBase + 'packages/jquery/plugins/jstree/themes/classic/style.css'
+          checkbox: {
+            three_state: false
           }
-        });
-      }
-      {/literal}
-      {if $permission neq 'edit'}
-        {literal}
-          $("#tagtree input").prop('disabled', true);
-        {/literal}
-      {/if}
-      {literal}
+        })
+          .on('select_node.jstree deselect_node.jstree', function(e, selected) {
+            var id = selected.node.a_attr.id.replace('tag_', ''),
+              op = e.type === 'select_node' ? 'create' : 'delete';
+            CRM.api3('entity_tag', op, {entity_table: entityTable, entity_id: entityID, tag_id: id}, true);
+            updateContactSummaryTags();
+          });
+      });
 
-      $(document).on('change', 'input.crm-contact-tagset', CRM.updateContactSummaryTags);
+      $(document).on('change', 'input.crm-contact-tagset', updateContactSummaryTags);
 
       $('input[name=filter_tag_tree]', '#Tag').on('keyup change', function() {
-        $("#tagtree").jstree('search', $(this).val());
+        $("#tagtree").jstree(true).search($(this).val());
       });
     });
   })(CRM.$, CRM._);
diff --git a/templates/CRM/Tag/Form/Tagtree.tpl b/templates/CRM/Tag/Form/Tagtree.tpl
index 5c27022c2a..8f3a1df17e 100644
--- a/templates/CRM/Tag/Form/Tagtree.tpl
+++ b/templates/CRM/Tag/Form/Tagtree.tpl
@@ -26,12 +26,11 @@
 {* This tpl runs recursively to build each level of the tag tree *}
 <ul class="tree-level-{$level}">
   {foreach from=$tree item="node" key="id"}
-    <li id="tag_{$id}">
-      <input name="tagList[{$id}]" id="check_{$id}" type="checkbox" {if $node.is_selectable EQ 0}disabled=""{/if} {if $tagged[$id]}checked="checked"{/if}/>
-      <a>
-        <label for="check_{$id}" id="tagLabel_{$id}" class="crm-tag-item" {if !empty($allTags.$id.color)}style="background-color: {$allTags.$id.color}; color: {$allTags.$id.color|colorContrast};"{/if} title="{$node.description}">
+    <li>
+      <a id="tag_{$id}" class="{if !$node.is_selectable || $permission neq 'edit'}jstree-disabled{/if} {if $tagged[$id]}jstree-clicked{/if}">
+        <span class="crm-tag-item" {if !empty($allTags.$id.color)}style="background-color: {$allTags.$id.color}; color: {$allTags.$id.color|colorContrast};"{/if} title="{$node.description}">
           {$node.name}
-        </label>
+        </span>
       </a>
       {if $node.children}
         {* Recurse... *}
-- 
2.25.1