galette/templates/default/edit_socials.tpl

   1 <fieldset class="{if isset($social_fieldset_class)}{$social_fieldset_class}{else}cssform{/if}" id="social">
   2     <legend{if isset($social_fieldset_legend_class)} class="{$social_fieldset_legend_class}"{/if}>{_T string="Social networks"}</legend>
   3     <div>
   4     {foreach item=social from=$socials}
   5         <p>
   6             <label for="social_{$social->id}" class="bline">{$social->getSystemType($social->type)}</label>
   7             <span>
   8                 <input type="text" name="social_{$social->id}" id="social_{$social->id}" value="{$social->url}" class="large"/>
   9                 <a href="#" class="fright tooltip delete delsocial">
  10                     <i class="fas fa-trash-alt"></i>
  11                     <span class="sr-only">{_T string="Remove %type" pattern="/%type/" replace=$social->getSystemType($social->type)}</span>
  12                 </a>
  13             </span>
  14         </p>
  15     {/foreach}
  16     <p>
  17         <span class="bline">{_T string="Add new social network"}</span>
  18         <span>
  19             <select name="social_new_type_1" id="social_new_type_1" class="nochosen socials_selector">
  20                 <option value="">{_T string="Choose or enter your own..."}</option>
  21     {foreach item=social_type from=$osocials->getSystemTypes(false)}
  22                 <option value="{$social_type}">{$osocials->getSystemType($social_type)}</option>
  23     {/foreach}
  24             </select>
  25             <input type="text" name="social_new_value_1" id="social_new_value_1" value="" size="50"/>
  26             <a href="#" class="fright tooltip action addsocial">
  27                 <i class="fas fa-plus-square"></i>
  28                 <span class="sr-only">{_T string="Add"}</span>
  29             </a>
  30         </span>
  31         <script type="text/javascript">
  32             var _selectize = function(selector) {
  33                 if ( !selector ) {
  34                     selector = '.socials_selector';
  35                 }
  36
  37                 $(selector).selectize({
  38                     maxItems: 1,
  39                     create: true,
  40                     createOnBlur: true
  41                 });
  42             }
  43
  44             $('.addsocial').click(function(e){
  45                 e.preventDefault();
  46                 $('.socials_selector').each(function(){ // do this for every select with the 'combobox' class
  47                     var _this = $(this);
  48                     if (_this[0].selectize) { // requires [0] to select the proper object
  49                         var value = $(this).val(); // store the current value of the select/input
  50                         _this[0].selectize.destroy(); // destroys selectize()
  51                         _this.val(value);  // set back the value of the select/input
  52                     }
  53                 });
  54
  55                 var _newindex = $(this).parents('fieldset').find('p:last select').attr('id').replace('social_new_type_', '');
  56                 ++_newindex;
  57                 $(this).parents('p')
  58                     .clone() // copy
  59                     .insertAfter('#social p:last') // where
  60                     .find('select').attr('id', 'social_new_type_' + _newindex).attr('name', 'social_new_type_' + _newindex)
  61                     .parent().find('input').attr('id', 'social_new_value_' + _newindex).attr('name', 'social_new_value_' + _newindex)
  62                     .parent().find('.addsocial').remove()
  63                 ;
  64
  65                 _selectize();
  66             });
  67
  68             var _rmFilter = function(elt) {
  69                 if ( typeof elt == 'undefined') {
  70                     elt = $('#social p');
  71                 }
  72                 elt.find('.delsocial').click(function(e){
  73                     e.preventDefault();
  74                     var _this = $(this);
  75                     _this.parents('p').remove();
  76                 });
  77             }
  78             _rmFilter();
  79             _selectize();
  80         </script>
  81     </p>
  82     </div>
  83 </fieldset>