source: extensions/lmt/templates/lmt_dialog_licence_choose.tpl @ 15341

{combine_script id="jquery" path="themes/default/js/jquery.js"}
{combine_script id="jquery.ui" path="themes/default/js/ui/minified/jquery.ui.core.js"}
{combine_script id="jquery.ui.dialog" path="themes/default/js/ui/minified/jquery.ui.dialog.js"}

{literal}
<style type='text/css'>
  #lmtRulesArea { border-top:1px solid; overflow:auto; margin-top:5px; }
  img.pointer, span.pointer, div.pointer { cursor:pointer; }
  li.valueItems {
    -moz-border-radius:4px 4px 4px 4px;
    border:1px solid #666666;
    margin-bottom:5px;
    padding:4px;
  }
  #iBDLMTLicenceList {
    list-style:none;
    margin:8px;
    padding:0;
  }
  img.imgLicence { position:relative; top:3px; }
</style>

<script type="text/javascript">

/**
 * include this template in a page and use dialogChooseLMTBox.show({options}) to display
 * the dialog box
 *
 */
dialogChooseLMTBox = function()
{
  var licencesNfo=[
  {/literal}
  {foreach from=$datas.licencesList item=licence}
    {ldelim} value:'{$licence.value}', name:'{$licence.name}' {rdelim},
  {/foreach}
  {literal}
  ];

  var dialogLMTOptions = {
        id:'',
        eventOk:null,
        cBuilder:null,
        licences:[],
      };


  /**
   * initialize the dialog box
   */
  var initDialogBox = function()
  {

    $("#iDialogLMTChoose")
    .dialog(
      {
        autoOpen: false,
        resizable: false,
        width:640,
        height:250,
        modal: true,
        draggable:true,
        dialogClass: 'gcBgTabSheet gcBorder',
        title: '{/literal}{"lmt_choose_licence_type"|@translate}{literal}',
        open: function(event, ui)
        {
        },
        buttons:
        {
          '{/literal}{"lmt_ok"|@translate}{literal}':
            function()
            {
              if(checkValidity())
              {
                if(dialogLMTOptions.cBuilder!=null)
                {
                  setCBuilderItem(dialogLMTOptions.id, dialogLMTOptions.licences);
                }

                if(dialogLMTOptions.eventOk!=null)
                {
                  dialogLMTOptions.eventOk(dialogLMTOptions.id, dialogLMTOptions.licences);
                }

                $(this).dialog('close');
              }
            },
          '{/literal}{"lmt_cancel"|@translate}{literal}':
            function()
            {
              $(this).dialog('close');
            }
        }
      }
    );

    $('#iBDLMTAddLicence').bind('click', function () { addLicence(); } );

  };


  /**
   * add the selected licence in list
   */
  var addLicence = function ()
  {
    value=$('#iBDLMTLicenceType').val();

    if(!$('#iBDLMTLicenceType option[value='+value+']').attr('disabled'))
    {
      dialogLMTOptions.licences.push(value);
      addLicenceItem(value);
    }
  };

  /**
   *
   */
  var addLicenceItem = function (value)
  {
    li=$("<li/>",
          {
            'class':'valueItems gcBgPage',
            licence:value
          }
        ).append("<span><img class='imgLicence' src='./plugins/lmt/img/"+value.toLowerCase()+"_80x15.png'>&nbsp;"+getLicenceName(value)+"</span>")
         .append($("<img/>",
                    {
                      {/literal}
                      src:'{$themeconf.admin_icon_dir}/delete.png',
                      'class':'button pointer',
                      alt:'{"g003_delete"|@translate}',
                      title:'{"g003_delete"|@translate}',
                      {literal}
                      css:{'float':'right'}
                    }
                  ).bind('click', function () { removeLicence(this); })
                );

    $('#iBDLMTLicenceList').append(li);
    $('#iBDLMTLicenceType option[value='+value+']').attr('disabled', true);
  }

  /**
   * remove the selected licence in list
   */
  var removeLicence = function (item)
  {
    value=$(item).parent().attr('licence');
    index=dialogLMTOptions.licences.indexOf(value);

    if(index>-1)
    {
      dialogLMTOptions.licences.splice(index,1);
      $('#iBDLMTLicenceType option[value='+value+']').attr('disabled', false);
      $(item).unbind().parent().remove();
    }
  };

  /**
   * returns the licence name
   * @param String value : the licence value
   * @return String : the licence name
   */
  var getLicenceName = function (value)
  {
    for(var i=0;i<licencesNfo.length;i++)
    {
      if(licencesNfo[i].value==value) return(licencesNfo[i].name);
    }
    return('');
  }


  /**
   * check the validity of the condition
   * return Boolean : true if OK, otherwise false
   */
  var checkValidity = function ()
  {
    $(".error").removeClass('error');
    returned=true;

    if(dialogLMTOptions.licences.length==0)
    {
      alert("{/literal}{'lmt_error_num_items'|@translate}{literal}");
      returned=false;
    }

    return(returned);
  }



  /**
   * the show() function display and manage a dialog box to choose
   * a geographic area
   *
   * @param options : properties to manage the dialog box
   *                  - licences : an array of string (licences)
   *                  - id : a string to identify a DOM object ; this parameter
   *                         is given to the callback when the OK button is pushed
   *                  - eventOK : a callback function, with 2 parameters : id of
   *                              the given DOM object and the bounds object
   *                  - cBuilder : a criteriaBuilder object
   *                               if set, the dialog box manage automaticaly
   *                               the criteria builder interface
   */
  this.show = function (options)
  {
    showDialog(options);
  }

  /**
   * private function used to show the dialog box
   */
  var showDialog = function(options)
  {
    if(options.licences!=null)
    {
      dialogLMTOptions.licences=options.licences;
    }
    else
    {
      dialogLMTOptions.licences=[];
    }

    if(options.id!=null)
    {
      dialogLMTOptions.id=options.id;
    }
    else
    {
      dialogLMTOptions.id='';
    }

    if(options.eventOk!=null)
    {
      dialogLMTOptions.eventOk=options.eventOk;
    }

    if(options.cBuilder!=null)
    {
      dialogLMTOptions.cBuilder=options.cBuilder;
      dialogLMTOptions.cBuilder.doAction('setOptions',
        {
          onEdit:function (e) { editGA(e.data); },
          onDelete:function (e) { deleteGA(e.data); },
        }
      );
    }

    $('#iBDLMTLicenceType option').attr('disabled', false);
    $('#iBDLMTLicenceList img').unbind();
    $('#iBDLMTLicenceList').html('');
    for(var i=0;i<dialogLMTOptions.licences.length;i++)
    {
      addLicenceItem(dialogLMTOptions.licences[i]);
    }

    $("#iDialogLMTChoose").dialog('open');
  };



  /**
   * manage the 'edit' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var editGA = function (itemId)
  {
    extraData=dialogLMTOptions.cBuilder.doAction('getExtraData', itemId);
    showDialog(
      {
        id:itemId,
        licences:extraData.param.licences
      }
    );
  };

  /**
   * manage the 'delete' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var deleteGA = function (itemId)
  {
    dialogLMTOptions.cBuilder.doAction('delete', itemId);
  };

  /**
   * set the content for the cBuilder item
   */
  var setCBuilderItem = function(id, licences)
  {
    var content="";

    if(licences.length>1)
    {
      content="{/literal}{'lmt_search_pictures_with_licence_n'|@translate}{literal}";
    }
    else
    {
      content="{/literal}{'lmt_search_pictures_with_licence_1'|@translate}{literal}";
    }

    content+='<br><div style="font-style:italic;padding-left:15px;">';
    for(var i=0;i<licences.length;i++)
    {
      content+="<img class='imgLicence' src='./plugins/lmt/img/"+licences[i].toLowerCase()+"_80x15.png'>&nbsp;"+getLicenceName(licences[i])+'<br>';
    }
    content+='</div>';

    if(id=='')
    {
      //no id:add a new item in the list
      dialogLMTOptions.cBuilder.doAction('add', content, criteriaBuilder.makeExtendedData('LMT', {licences:licences } ) );
    }
    else
    {
      // update item
      dialogLMTOptions.cBuilder.doAction('edit', id,  content, criteriaBuilder.makeExtendedData('LMT', {licences:licences } ) );
    }
  };

  initDialogBox();
}


</script>
{/literal}

<div id="iDialogLMTChoose" style='display:none;margin-top:5px;'>
  {'lmt_licence_type'|@translate}&nbsp;
  <select id='iBDLMTLicenceType'>
    {foreach from=$datas.licencesList item=licence}
      <option value='{$licence.value}'>{$licence.name}</option>
    {/foreach}
  </select>&nbsp;
  <input type='button' value='{"lmt_add"|@translate}' id='iBDLMTAddLicence'>

  <div id='lmtRulesArea'>
    <ul id='iBDLMTLicenceList'>
    </ul>
  </div>
</div>