templates/CRM/Tag/Page/Tag.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | CiviCRM version 5                                                  |
   4  +--------------------------------------------------------------------+
   5  | Copyright CiviCRM LLC (c) 2004-2018                                |
   6  +--------------------------------------------------------------------+
   7  | This file is a part of CiviCRM.                                    |
   8  |                                                                    |
   9  | CiviCRM is free software; you can copy, modify, and distribute it  |
  10  | under the terms of the GNU Affero General Public License           |
  11  | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
  12  |                                                                    |
  13  | CiviCRM is distributed in the hope that it will be useful, but     |
  14  | WITHOUT ANY WARRANTY; without even the implied warranty of         |
  15  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
  16  | See the GNU Affero General Public License for more details.        |
  17  |                                                                    |
  18  | You should have received a copy of the GNU Affero General Public   |
  19  | License and the CiviCRM Licensing Exception along                  |
  20  | with this program; if not, contact CiviCRM LLC                     |
  21  | at info[AT]civicrm[DOT]org. If you have questions about the        |
  22  | GNU Affero General Public License or the licensing of CiviCRM,     |
  23  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  24  +--------------------------------------------------------------------+
  25 *}
  26 <div class="crm-content-block">
  27   <div class="help">
  28     {ts 1=', '|implode:$usedFor}Tags are a convenient way to categorize data (%1).{/ts}
  29     {if call_user_func(array('CRM_Core_Permission','check'), 'administer Tagsets')}
  30       <br />
  31       {ts}Create predefined tags in the main tree, or click the <strong>+</strong> to add a set for free tagging.{/ts}
  32     {/if}
  33     {docURL page="user/organising-your-data/groups-and-tags"}
  34   </div>
  35
  36   <div id="mainTabContainer">
  37     <ul>
  38       <li class="ui-corner-all crm-tab-button" title="{ts}Main Tag List{/ts}">
  39         <a href="#tree"><i class="crm-i fa-tags"></i> {ts}Tag Tree{/ts}</a>
  40       </li>
  41       {foreach from=$tagsets item=set}
  42         <li class="ui-corner-all crm-tab-button {if ($set.is_reserved)}is-reserved{/if}" title="{ts 1=', '|implode:$set.used_for_label}Tag Set for %1{/ts}">
  43           <a href="#tagset-{$set.id}">{$set.name}</a>
  44         </li>
  45       {/foreach}
  46       {if call_user_func(array('CRM_Core_Permission','check'), 'administer Tagsets')}
  47         <li class="ui-corner-all crm-tab-button" title="{ts}Add Tag Set{/ts}">
  48           <a href="#new-tagset"><i class="crm-i fa-plus"></i></a>
  49         </li>
  50       {/if}
  51     </ul>
  52     <div id="tree">
  53       <div class="help">
  54         {ts}Organize the tag hierarchy by clicking and dragging. Shift-click to select multiple tags to merge/move/delete.{/ts}
  55       </div>
  56       <input class="crm-form-text big" name="filter_tag_tree" placeholder="{ts}Filter List{/ts}" allowclear="1"/>
  57       <a class="crm-hover-button crm-clear-link" style="visibility:hidden;" title="{ts}Clear{/ts}"><i class="crm-i fa-times"></i></a>
  58     </div>
  59     {foreach from=$tagsets item=set}
  60       <div id="tagset-{$set.id}">
  61       </div>
  62     {/foreach}
  63     <div id="new-tagset">
  64     </div>
  65   </div>
  66 </div>
  67 {crmAPI entity="Contact" action="getsingle" var="user" return='display_name' id="user_contact_id"}
  68 {literal}
  69 <script type="text/javascript">
  70   (function($, _) {
  71     $(function($) {
  72       var $window = $(window),
  73         renderedTabs = ['tree'],
  74         tagSets = {/literal}{$tagsets|@json_encode}{literal},
  75         user = {/literal}{$user|@json_encode}{literal},
  76         usedFor = {/literal}{$usedFor|@json_encode}{literal},
  77         menuHeight = $('#civicrm-menu').height() + 15,
  78         noneSelectedTpl = _.template($('#noneSelectedTpl').html()),
  79         oneSelectedTpl = _.template($('#oneSelectedTpl').html()),
  80         moreSelectedTpl = _.template($('#moreSelectedTpl').html()),
  81         tagsetHeaderTpl = _.template($('#tagsetHeaderTpl').html());
  82
  83       function formatTagSet(info) {
  84         info.date = CRM.utils.formatDate(info.created_date);
  85         info.used_for_label = [];
  86         if (undefined !== info.used_for) {
  87           _.each(info.used_for.split(','), function(item) {
  88             info.used_for_label.push(usedFor[item]);
  89           });
  90         }
  91       }
  92
  93       _.each(tagSets, formatTagSet);
  94
  95       function renderTree($panel) {
  96         var plugins,
  97           selected = [],
  98           tagset = $panel.attr('id').split('-')[1] || 0;
  99
 100         function hasChildren(id) {
 101           var $node = $('.tag-tree', $panel).jstree(true).get_node(id, true);
 102           return !$node.hasClass('jstree-leaf');
 103         }
 104
 105         function changeColor() {
 106           var color = $(this).val().toLowerCase(),
 107             id = $(this).closest('.crm-entity').data('id'),
 108             node = $('.tag-tree', $panel).jstree(true).get_node(id);
 109           if (color === '#ffffff') {
 110             node.a_attr.style = '';
 111           } else {
 112             node.a_attr.style = 'background-color: ' + color + '; color: ' + CRM.utils.colorContrast(color) + ';';
 113           }
 114           node.data.color = color;
 115           $('.tag-tree', $panel).jstree(true).redraw(true);
 116           CRM.api3('Tag', 'create', {id: id, color: color}, true);
 117         }
 118
 119         function changeSelection(e, data) {
 120           var tplParams = {
 121             tagset: tagset,
 122             tagsetCount: _.keys(tagSets).length,
 123             adminReserved: CRM.checkPerm('administer reserved tags')
 124           },
 125             tree = $('.tag-tree', $panel).jstree(true),
 126             $infoBox = $('.tag-info', $panel);
 127           selected = data.selected;
 128           if (!data.selected || !data.selected.length) {
 129             tplParams.is_reserved = tagset ? tagSets[tagset].is_reserved == 1 : false;
 130             tplParams.length = $('.tag-tree li', $panel).length;
 131             tplParams.adminTagsets = CRM.checkPerm('administer Tagsets');
 132             $infoBox.html(noneSelectedTpl(tplParams));
 133           } else if (data.selected.length === 1) {
 134             tplParams.usedFor = usedFor;
 135             tplParams.hasChildren = hasChildren(data.node.id);
 136             $infoBox.html(oneSelectedTpl($.extend({}, data.node, tplParams)));
 137           } else {
 138             tplParams.items = data.selected;
 139             tplParams.hasChildren = tplParams.reserved = tplParams.usages = 0;
 140             _.each(data.selected, function(id) {
 141               var node = tree.get_node(id);
 142               tplParams.usages += node.data.usages;
 143               tplParams.reserved += node.data.is_reserved;
 144               tplParams.hasChildren += hasChildren(id) ? 1 : 0;
 145             });
 146             $infoBox.html(moreSelectedTpl(tplParams));
 147           }
 148           $infoBox.trigger('crmLoad');
 149         }
 150
 151         function clearSelection(e) {
 152           e.preventDefault();
 153           $('.tag-tree', $panel).jstree(true).deselect_all();
 154         }
 155
 156         function changeUsedFor() {
 157           var vals = $('input[name=used_for]:checked', $panel).map(function(i, el) {
 158             return $(el).val();
 159           }).get(),
 160             id = $(this).closest('.crm-entity').data('id');
 161           if (vals.length) {
 162             CRM.api3('Tag', 'create', {id: id, used_for: vals}, true);
 163             var node = $('.tag-tree', $panel).jstree(true).get_node(id);
 164             node.data.used_for = vals;
 165           }
 166         }
 167
 168         function moveTag(e, data) {
 169           if (data.parent != data.old_parent) {
 170             CRM.api3('Tag', 'create', {id: data.node.id, parent_id: data.parent.replace('#', '')}, true);
 171           }
 172         }
 173
 174         function deleteTagset() {
 175           $('#mainTabContainer').tabs('option', 'active', 0);
 176           $panel.off().remove();
 177           $("a[href='#tagset-" + tagset + "']").parent().remove();
 178           $('#mainTabContainer').tabs('refresh');
 179         }
 180
 181         function updateTagset(info) {
 182           tagSets[tagset].description = info.description;
 183           tagSets[tagset].name = info.name;
 184           tagSets[tagset].used_for = info.used_for;
 185           tagSets[tagset].is_reserved = info.is_reserved;
 186           formatTagSet(tagSets[tagset]);
 187           addTagsetHeader();
 188           $(".tag-tree", $panel).jstree("search", '');
 189         }
 190
 191         function addTagsetHeader() {
 192           $('.tagset-header', $panel).remove();
 193           $panel.prepend(tagsetHeaderTpl(tagSets[tagset]));
 194           $("a[href='#tagset-" + tagset + "']").text(tagSets[tagset].name)
 195             .parent().toggleClass('is-reserved', tagSets[tagset].is_reserved == 1)
 196             .attr('title', ts('{/literal}{ts escape='js' 1='%1'}Tag Set for %1{/ts}{literal}', {'1': tagSets[tagset].used_for_label.join(', ')}));
 197         }
 198
 199         if (tagset) {
 200           addTagsetHeader();
 201         }
 202
 203         function moveTagDialog(e) {
 204           e.preventDefault();
 205           var sets = [{key: '0', value: '{/literal}{ts escape='js'}Main Tag Tree{/ts}{literal}'}];
 206           _.each(tagSets, function(tagSet) {
 207             sets.push({key: tagSet.id, value: tagSet.name});
 208           });
 209           CRM.confirm({
 210             title: '{/literal}{ts escape='js'}Move to Tagset{/ts}{literal}',
 211             message: '<label for="select-tagset">{/literal}{ts escape='js'}Select Tagset{/ts}{literal}: '
 212               + '<select id="select-tagset" class="crm-select2 big">'
 213               + CRM.utils.renderOptions(sets, tagset)
 214               + '</select>'
 215           })
 216             .on('crmConfirm:yes', function() {
 217               var chosen = parseInt($('#select-tagset').val());
 218               if (parseInt(tagset) !== chosen) {
 219                 var apiCalls = [];
 220                 _.each(selected, function(id) {
 221                   apiCalls.push(['Tag', 'create', {id: id, parent_id: chosen || ''}]);
 222                 });
 223                 $('#mainTabContainer').block();
 224                 CRM.api3(apiCalls, true)
 225                   .done(function() {
 226                     $('.tag-tree', $panel).jstree(true).refresh();
 227                     $('#mainTabContainer').unblock();
 228                     var $otherPanel = $(chosen ? '#tagset-' + chosen : '#tree');
 229                     if ($('.tag-tree', $otherPanel).length) {
 230                       $('.tag-tree', $otherPanel).jstree(true).refresh();
 231                     }
 232                   });
 233               }
 234             });
 235         }
 236
 237         function isDraggable(nodes, event) {
 238           var draggable = true;
 239           _.each(nodes, function(node) {
 240             if (node.data.is_reserved && !CRM.checkPerm('administer reserved tags')) {
 241               draggable = false;
 242             }
 243           });
 244           return draggable;
 245         }
 246
 247         $panel
 248           .append('<div class="tag-tree-wrapper"><div class="tag-tree"></div><div class="tag-info"></div></div>')
 249           .on('change', 'input[type=color]', changeColor)
 250           .on('change', 'input[name=used_for]', changeUsedFor)
 251           .on('click', '.clear-tag-selection', clearSelection)
 252           .on('click', '.move-tag-button', moveTagDialog)
 253           .on('click', '.used-for-toggle', function() {
 254             $(this).attr('style', 'display: none !important;').next().show();
 255           })
 256           .on('click', 'a.crm-clear-link', function() {
 257             $('.tag-tree', $panel).jstree(true).refresh();
 258           })
 259           .on('crmPopupFormSuccess crmFormSuccess', function(e, cts, data) {
 260             if ($(e.target).hasClass('tagset-action-delete')) {
 261               deleteTagset();
 262             } else if ($(e.target).hasClass('tagset-action-update')) {
 263               updateTagset(data.tag);
 264             } else {
 265               $('.tag-tree', $panel).jstree(true).refresh();
 266             }
 267           });
 268
 269         plugins = ['wholerow', 'changed', 'search'];
 270         if (!tagset) {
 271           // Allow drag-n-drop nesting of the tag tree
 272           plugins.push('dnd');
 273         }
 274
 275         $('.tag-tree', $panel)
 276           .on('changed.jstree loaded.jstree', changeSelection)
 277           .on('move_node.jstree', moveTag)
 278           .on('search.jstree', function() {
 279             $(this).unblock();
 280           })
 281           .jstree({
 282             core: {
 283               data: {
 284                 url: CRM.url('civicrm/ajax/tagTree'),
 285                 data: function(node) {
 286                   return {parent_id: node.id === '#' ? tagset : node.id};
 287                 }
 288               },
 289               themes: {icons: false},
 290               check_callback: true
 291             },
 292             'search': {
 293               'ajax' : {
 294                 url : CRM.url('civicrm/ajax/tagTree')
 295               },
 296               'show_only_matches': true
 297             },
 298             plugins: plugins,
 299             dnd: {
 300               is_draggable: isDraggable,
 301               copy: false
 302             }
 303           });
 304
 305         $('input[name=filter_tag_tree]', $panel).on('keyup change', function(e) {
 306           var element = $(this);
 307           var searchString = element.val();
 308           if (e.type == 'change') {
 309             if (window.searchedString === searchString) {
 310               if (searchString === '') {
 311                 $('.tag-tree', $panel).jstree("clear_search");
 312                 $('.tag-tree', $panel).jstree("refresh", true, true);
 313               }
 314               else {
 315                 $('.tag-tree', $panel).block();
 316                 $(".tag-tree", $panel).jstree("search", searchString);
 317                 delete window.searchedString;
 318               }
 319             }
 320           }
 321           else {
 322             if (this.timer) clearTimeout(this.timer);
 323             this.timer = setTimeout(function() {
 324               if (_.isEmpty(window.searchedString) || window.searchedString !== searchString) {
 325                 window.searchedString = searchString;
 326                 element.trigger('change');
 327               }
 328             }, 1000);
 329           }
 330         });
 331       }
 332
 333       function newTagset() {
 334         CRM.loadForm(CRM.url('civicrm/tag/edit', {action: 'add', tagset: 1}))
 335           .on('crmFormSuccess', function(e, data) {
 336             tagSets[data.tag.id] = data.tag;
 337             tagSets[data.tag.id].display_name = user.display_name;
 338             formatTagSet(tagSets[data.tag.id]);
 339             $("#new-tagset").before('<div id="tagset-' + data.tag.id + '">');
 340             $("a[href='#new-tagset']").parent().before('<li class="ui-corner-all crm-tab-button"><a href="#tagset-' + data.tag.id + '">' + data.tag.name + '</a></li>');
 341             $('#mainTabContainer').tabs('refresh');
 342             $('#mainTabContainer').tabs('option', 'active', -2);
 343           });
 344       }
 345
 346       $('#mainTabContainer')
 347         .tabs()
 348         .on("tabsbeforeactivate", function (event, ui) {
 349           var id = $(ui.newPanel).attr('id');
 350           if (id === 'new-tagset') {
 351             event.preventDefault();
 352             newTagset();
 353             return false;
 354           }
 355           if ($.inArray(id, renderedTabs) < 0) {
 356             renderedTabs.push(id);
 357             renderTree(ui.newPanel);
 358           }
 359         });
 360
 361       renderTree($('#tree'));
 362
 363       // Prevent the info box from scrolling offscreen
 364       $window.on('scroll resize', function () {
 365         var $wrapper = $('.tag-tree-wrapper:visible'),
 366           pos = $wrapper.offset(),
 367           $box = $('.tag-info:visible');
 368         if ($window.scrollTop() + menuHeight > pos.top) {
 369           $box.css({
 370             position: 'fixed',
 371             top: menuHeight,
 372             right: parseInt($window.width() - (pos.left + $wrapper.width())),
 373             width: parseInt($wrapper.width() * .40)
 374           });
 375         } else {
 376           $box.removeAttr('style');
 377         }
 378       });
 379
 380     });
 381   })(CRM.$, CRM._);
 382 </script>
 383 <style type="text/css">
 384   div.tag-tree-wrapper {
 385     position: relative;
 386     min-height: 250px;
 387   }
 388   div.tag-tree {
 389     width: 59%;
 390   }
 391   div.tag-info {
 392     width: 40%;
 393     position: absolute;
 394     top: 5px;
 395     right: 0;
 396     min-height: 100px;
 397     border: 1px solid #aaa;
 398     border-radius: 4px;
 399     box-shadow: 0 0 4px #e3e3e3;
 400     padding: 1em;
 401     box-sizing: border-box;
 402     background: white;
 403   }
 404   div.tag-info .clear-tag-selection {
 405     position: absolute;
 406     top: 10px;
 407     right: 12px;
 408     color: inherit;
 409     opacity: .5;
 410   }
 411   div.tag-info .clear-tag-selection:hover,
 412   div.tag-info .clear-tag-selection:active {
 413     opacity: 1;
 414   }
 415   .tag-tree-wrapper .tag-tree a.crm-tag-item {
 416     border-radius: 3px;
 417     margin: 2px 0;
 418     height: 20px;
 419     line-height: 20px;
 420     font-size: 12px;
 421     padding: 0 3px;
 422   }
 423   #tree a.crm-tag-item {
 424     cursor: move;
 425   }
 426   li.is-reserved > a:after {
 427     content: ' *';
 428   }
 429   {/literal}{if !call_user_func(array('CRM_Core_Permission', 'check'), 'administer reserved tags')}{literal}
 430     #tree li.is-reserved > a.crm-tag-item {
 431       cursor: not-allowed;
 432     }
 433     li.is-reserved > a:after {
 434       color: #8A1F11;
 435     }
 436   {/literal}{/if}{literal}
 437   .tag-tree-wrapper ul {
 438     margin: 0;
 439     padding: 0;
 440   }
 441   div.tag-info h4 .crm-editable {
 442     min-width: 60%;
 443     padding: .2em;
 444   }
 445   div.tag-info .crm-editable-enabled {
 446     min-width: 5em;
 447   }
 448   div.tag-info .crm-editable-enabled[data-field=description] {
 449     min-width: 60%;
 450   }
 451   div.tag-info input[type=color] {
 452     cursor: pointer;
 453   }
 454   div.tag-info input[disabled] {
 455     cursor: default;
 456   }
 457   div.tag-info .tdl {
 458     font-weight: bold;
 459     color: #999;
 460   }
 461   div.tag-info hr {
 462     margin: .2em 0;
 463   }
 464   div.tag-info .crm-submit-buttons {
 465     margin: 10px 0 0;
 466   }
 467 </style>
 468 {/literal}
 469
 470 <script type="text/template" id="noneSelectedTpl">
 471   <% if (length) {ldelim} %>
 472     <h4>{ts}None Selected{/ts}</h4>
 473     <hr />
 474     <p>{ts}Select one or more tags for details.{/ts}</p>
 475   <% {rdelim} else {ldelim} %>
 476     <h4>{ts}Empty Tag Set{/ts}</h4>
 477     <hr />
 478     <p>{ts}No tags have been created in this set.{/ts}</p>
 479   <% {rdelim} %>
 480   <div class="crm-submit-buttons">
 481     <a href="{crmURL p="civicrm/tag/edit" q="action=add&parent_id="}<%= tagset || '' %>" class="button crm-popup">
 482       <span><i class="crm-i fa-plus"></i>&nbsp; {ts}Add Tag{/ts}</span>
 483     </a>
 484     <% if(tagset && adminTagsets) {ldelim} %>
 485       <a href="{crmURL p="civicrm/tag/edit" q="action=update&id="}<%= tagset %>" class="button crm-popup tagset-action-update">
 486         <span><i class="crm-i fa-pencil"></i>&nbsp; {ts}Edit Set{/ts}</span>
 487       </a>
 488     <% {rdelim} %>
 489     <% if(tagset && !length && adminTagsets && (!is_reserved || adminReserved)) {ldelim} %>
 490       <a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= tagset %>" class="button crm-popup small-popup tagset-action-delete">
 491         <span><i class="crm-i fa-trash"></i>&nbsp; {ts}Delete Set{/ts}</span>
 492       </a>
 493     <% {rdelim} %>
 494   </div>
 495 </script>
 496
 497 <script type="text/template" id="oneSelectedTpl">
 498   <div class="crm-entity" data-entity="Tag" data-id="<%= id %>">
 499     <h4>
 500       <input type="color" value="<%= data.color %>" <% if (!data.is_reserved || adminReserved) {ldelim} %>title="{ts}Select color{/ts}" <% {rdelim} else {ldelim} %>disabled<% {rdelim} %> />
 501       <span class="<% if (!data.is_reserved || adminReserved) {ldelim} %>crm-editable<% {rdelim} %>" data-field="name"><%- text %></span>
 502     </h4>
 503     <hr />
 504     <div><span class="tdl">{ts}Description:{/ts}</span>
 505       <span class="<% if (!data.is_reserved || adminReserved) {ldelim} %>crm-editable<% {rdelim} %>" data-field="description"><%- data.description %></span>
 506     </div>
 507     <div><span class="tdl">{ts}Selectable:{/ts}</span>
 508       <span class="<% if (!data.is_reserved || adminReserved) {ldelim} %>crm-editable<% {rdelim} %>" data-field="is_selectable" data-type="select"><% if (data.is_selectable) {ldelim} %> {ts}Yes{/ts} <% {rdelim} else {ldelim} %> {ts}No{/ts} <% {rdelim} %></span>
 509     </div>
 510     <div><span class="tdl">{ts}Reserved:{/ts}</span>
 511       <span class="<% if (adminReserved) {ldelim} %>crm-editable<% {rdelim} %>" data-field="is_reserved" data-type="select"><% if (data.is_reserved) {ldelim} %> {ts}Yes{/ts} <% {rdelim} else {ldelim} %> {ts}No{/ts} <% {rdelim} %></span>
 512     </div>
 513     <% if (parent === '#' && !tagset) {ldelim} %>
 514       <div>
 515         <span class="tdl">{ts}Used For:{/ts}</span>
 516         {literal}
 517           <span class="<% if (!data.is_reserved || adminReserved) { %>crm-editable-enabled used-for-toggle<% } %>">
 518             <% if (!data.used_for.length) { %><i class="crm-i fa-pencil crm-editable-placeholder"></i><% } %>
 519             <% _.forEach(data.used_for, function(key, i) { %><%- (i ? ', ' : '') + usedFor[key] %><% }) %>
 520           </span>
 521           <span style="display: none">
 522           <% _.forEach(usedFor, function(label, key) { %>
 523             <span style="white-space: nowrap">
 524               <input type="checkbox" name="used_for" value="<%= key %>" id="<%= id + '_used_for_' + key %>" <% if (data.used_for.indexOf(key) > -1) { %>checked<% } %> />
 525               <label for="<%= id + '_used_for_' + key %>"><%- label %></label>
 526             </span>
 527           <% }) %>
 528           </span>
 529         {/literal}
 530       </div>
 531     <% {rdelim} %>
 532     <div><span class="tdl">{ts}Usage Count:{/ts}</span> <%= data.usages %></div>
 533     <a class="clear-tag-selection" href="#" title="{ts}Clear selection{/ts}"><i class="crm-i fa-ban"></i></a>
 534   </div>
 535   <div class="crm-submit-buttons">
 536     <% if(!tagset) {ldelim} %>
 537       <a href="{crmURL p="civicrm/tag/edit" q="action=add&parent_id="}<%= id %>" class="button crm-popup" title="{ts}Create new tag under this one{/ts}">
 538         <span><i class="crm-i fa-plus"></i>&nbsp; {ts}Add Child{/ts}</span>
 539       </a>
 540     <% {rdelim} %>
 541     <a href="{crmURL p="civicrm/tag/edit" q="action=add&clone_from="}<%= id %>" class="button crm-popup" title="{ts}Duplicate ths tag{/ts}">
 542       <span><i class="crm-i fa-copy"></i>&nbsp; {ts}Clone Tag{/ts}</span>
 543     </a>
 544     <% if(!data.is_reserved || adminReserved) {ldelim} %>
 545       <% if(tagsetCount) {ldelim} %>
 546         <a href="#move" class="button move-tag-button" title="{ts}Move to a different tagset{/ts}">
 547           <span><i class="crm-i fa-share-square-o"></i>&nbsp; {ts}Move Tag{/ts}</span>
 548         </a>
 549       <% {rdelim} %>
 550       <% if(!hasChildren) {ldelim} %>
 551         <a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= id %>" class="button crm-popup small-popup">
 552           <span><i class="crm-i fa-trash"></i>&nbsp; {ts}Delete{/ts}</span>
 553         </a>
 554       <% {rdelim} %>
 555     <% {rdelim} %>
 556   </div>
 557 </script>
 558
 559 <script type="text/template" id="moreSelectedTpl">
 560   <h4>{ts 1="<%= items.length %>"}%1 Tags Selected{/ts}</h4>
 561   <hr />
 562     <% if (reserved) {ldelim} %>
 563       <p>* {ts 1="<%= reserved %>"}%1 reserved.{/ts}</p>
 564     <% {rdelim} %>
 565   <p><span class="tdl">{ts}Total Usage:{/ts}</span> <%= usages %></p>
 566   <a class="clear-tag-selection" href="#" title="{ts}Clear selection{/ts}"><i class="crm-i fa-ban"></i></a>
 567   <div class="crm-submit-buttons">
 568     <% if(!reserved || adminReserved) {ldelim} %>
 569       <a href="{crmURL p="civicrm/tag/merge" q="id="}<%= items.join() %>" class="button crm-popup small-popup" title="{ts}Combine tags into one{/ts}">
 570         <span><i class="crm-i fa-compress"></i>&nbsp; {ts}Merge Tags{/ts}</span>
 571       </a>
 572       <% if(tagsetCount) {ldelim} %>
 573         <a href="#move" class="button move-tag-button" title="{ts}Move to a different tagset{/ts}">
 574           <span><i class="crm-i fa-share-square-o"></i>&nbsp; {ts}Move Tags{/ts}</span>
 575         </a>
 576       <% {rdelim} %>
 577       <% if(!hasChildren) {ldelim} %>
 578         <a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= items.join() %>" class="button crm-popup small-popup">
 579           <span><i class="crm-i fa-trash"></i>&nbsp; {ts}Delete All{/ts}</span>
 580         </a>
 581       <% {rdelim} %>
 582     <% {rdelim} %>
 583   </div>
 584 </script>
 585
 586 <script type="text/template" id="tagsetHeaderTpl">
 587   <div class="tagset-header">
 588     <div class="help">
 589       <% if(is_reserved == 1) {ldelim} %><strong>{ts}Reserved{/ts}</strong><% {rdelim} %>
 590       <% if(undefined === display_name) {ldelim} var display_name = null; {rdelim} %>
 591       {ts 1="<%= used_for_label.join(', ') %>" 2="<%= date %>" 3="<%= display_name %>"}Tag Set for %1 (created %2 by %3).{/ts}
 592       <% if(typeof description === 'string' && description.length) {ldelim} %><p><em><%- description %></em></p><% {rdelim} %>
 593     </div>
 594     <input class="crm-form-text big" name="filter_tag_tree" placeholder="{ts}Filter List{/ts}" allowclear="1"/>
 595     <a class="crm-hover-button crm-clear-link" style="visibility:hidden;" title="{ts}Clear{/ts}"><i class="crm-i fa-times"></i></a>
 596   </div>
 597 </script>