[27568] | 1 | {combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'} |
---|
| 2 | {combine_css path="themes/default/js/plugins/datatables/css/jquery.dataTables.css"} |
---|
| 3 | {combine_css path=$MPS_PATH|@cat:"admin/template/style.css"} |
---|
| 4 | {combine_script id='jquery.ui.sortable' load='footer' path='themes/default/js/ui/minified/jquery.ui.sortable.min.js'} |
---|
| 5 | |
---|
| 6 | |
---|
| 7 | {footer_script}{literal} |
---|
| 8 | (function($) { |
---|
| 9 | $(document).ready(function(){ |
---|
| 10 | |
---|
| 11 | var $oTable, |
---|
| 12 | $nEditing = null, |
---|
| 13 | $select = $('#select').html(); |
---|
| 14 | $val = $('.val').html(); |
---|
| 15 | |
---|
| 16 | $('#table_option input[type=checkbox]').each(function(){ |
---|
| 17 | $(this).prop('checked', false) |
---|
| 18 | }); |
---|
| 19 | |
---|
| 20 | $('.addedit').click(function() { |
---|
| 21 | $('.Tadd').show(); |
---|
[27589] | 22 | $('.add_content').css('top','100px') |
---|
[27568] | 23 | $('#add_option').fadeIn(); |
---|
| 24 | $("input[name=name]").focus(); |
---|
| 25 | _verif_type_opt(); |
---|
| 26 | return false; |
---|
| 27 | }); |
---|
| 28 | |
---|
| 29 | $('#close_addoption').click(function() { |
---|
| 30 | $('#add_option').fadeOut(function(){ |
---|
| 31 | $('.tit').hide(); |
---|
| 32 | $('#add_option input[type=text]').attr('value',''); |
---|
| 33 | $('.val').remove(); |
---|
| 34 | $('.valeur').append($('<div/>').addClass('val').append($val)); |
---|
| 35 | $('select#optType option').each(function(){ |
---|
| 36 | $(this).removeAttr('selected'); |
---|
| 37 | }); |
---|
| 38 | }); |
---|
| 39 | return false |
---|
| 40 | }); |
---|
| 41 | |
---|
| 42 | $('#addopt_form').submit(function(){ |
---|
| 43 | var $return = true; |
---|
| 44 | if($.trim($('input#optName',this).val()).length==0){ |
---|
| 45 | $return = false; |
---|
| 46 | $('.errors').show(); |
---|
| 47 | setTimeout(function(){ |
---|
| 48 | $('.errors').hide() |
---|
| 49 | },3000); |
---|
| 50 | } |
---|
| 51 | if($('.valeur').is(':hidden')){ |
---|
| 52 | $('.valeur').remove(); |
---|
| 53 | } |
---|
| 54 | return $return |
---|
| 55 | }) |
---|
| 56 | |
---|
| 57 | $(document).on('change','#optType',function(){ |
---|
| 58 | _verif_type_opt(); |
---|
| 59 | }); |
---|
| 60 | |
---|
| 61 | function _verif_type_opt(){ |
---|
| 62 | var $valSel = $('.addopt_table select#optType option:selected').attr('value'); |
---|
| 63 | if($valSel=="text" || $valSel=="textarea"){ |
---|
| 64 | $('.valeur').fadeOut('fast'); |
---|
| 65 | } else { |
---|
| 66 | $('.valeur').fadeIn('fast') |
---|
| 67 | } |
---|
| 68 | } |
---|
| 69 | |
---|
| 70 | $('#option_add').click(function(){ |
---|
| 71 | if($('.valeur').is(':hidden')){ |
---|
| 72 | $('.valeur').remove(); |
---|
| 73 | } |
---|
| 74 | $('#addopt_form').submit(); |
---|
| 75 | return false |
---|
| 76 | }) |
---|
| 77 | |
---|
| 78 | $('.addVal').click(function() { |
---|
| 79 | $('.valeur').append($('<div/>').addClass('val').append($val)); |
---|
| 80 | return false; |
---|
| 81 | }) |
---|
| 82 | |
---|
| 83 | |
---|
| 84 | $(document).on('click','.delVal',function(){ |
---|
| 85 | if (confirm("{/literal}{'Are you sure?'|translate|escape:javascript}{literal}")) { |
---|
| 86 | var $Nval = $('.addopt_table .valeur input').length; |
---|
| 87 | if($Nval>1){ |
---|
| 88 | $(this).parents('div.val').remove(); |
---|
| 89 | }else{ |
---|
| 90 | var $val = $(this).parents('div.val'); |
---|
| 91 | $('input', $val).val('').attr('value',''); |
---|
| 92 | } |
---|
| 93 | } |
---|
| 94 | return false |
---|
| 95 | }); |
---|
| 96 | |
---|
| 97 | $oTable = $('#table_option').dataTable({ |
---|
| 98 | "bAutoWidth": false, |
---|
| 99 | "bStateSave": true, |
---|
| 100 | "aoColumns" : [ |
---|
| 101 | { sWidth: '2%','sClass': 'center', 'bSortable': false, }, |
---|
| 102 | { sWidth: '35%'}, |
---|
| 103 | { sWidth: '36%'}, |
---|
| 104 | { sWidth: '15%', 'bSortable': false}, |
---|
| 105 | { sWidth: '7%' }, |
---|
| 106 | { sWidth: '4%','sClass': 'center', 'bSortable': false, }, |
---|
| 107 | ], |
---|
| 108 | "oLanguage": { |
---|
| 109 | "sProcessing": "{/literal}{'Loading...'|translate|escape:'javascript'}{literal}", |
---|
| 110 | "sSearch": '<span class="icon-search"></span>'+"{/literal}{'Search'|translate|escape:'javascript'}{literal}", |
---|
| 111 | "sLengthMenu": "{/literal}{'Display _MENU_ records per page'|translate|escape:'javascript'}{literal}", |
---|
| 112 | "sInfo": "{/literal}{'Showing _START_ to _END_ of _TOTAL_ records'|translate|escape:'javascript'}{literal}", |
---|
| 113 | "sInfoEmpty": "{/literal}{'Showing 0 to 0 of 0 records'|translate|escape:'javascript'}{literal}", |
---|
| 114 | "sInfoFiltered": "{/literal}{'(filtered from _MAX_ total records)'|translate|escape:'javascript'}{literal}", |
---|
| 115 | "sInfoPostFix": "", |
---|
| 116 | "sLoadingRecords": "{/literal}{'Loading...'|translate|escape:'javascript'}{literal}", |
---|
| 117 | "sZeroRecords": "{/literal}{'No matching option found'|translate|escape:'javascript'}{literal}", |
---|
| 118 | "oPaginate": { |
---|
| 119 | "sFirst": "{/literal}{'First'|translate|escape:'javascript'}{literal}", |
---|
| 120 | "sPrevious": '← '+"{/literal}{'Previous'|translate|escape:'javascript'}{literal}", |
---|
| 121 | "sNext": "{/literal}{'Next'|translate|escape:'javascript'}{literal}"+' →', |
---|
| 122 | "sLast": "{/literal}{'Last'|translate|escape:'javascript'}{literal}", |
---|
| 123 | }, |
---|
| 124 | }, |
---|
| 125 | }); |
---|
| 126 | |
---|
| 127 | $(document).on('click','#table_option .optEdit', function () { |
---|
[27589] | 128 | var $this =$(this), |
---|
| 129 | $pos = $(document).scrollTop(), |
---|
| 130 | $pos = $pos + 100; |
---|
| 131 | |
---|
| 132 | $('.add_content').css('top',$pos) |
---|
[27568] | 133 | $('.Tedit').show(); |
---|
| 134 | _rempform($this); |
---|
| 135 | $('#add_option').fadeIn(); |
---|
| 136 | |
---|
| 137 | return false; |
---|
| 138 | }); |
---|
| 139 | |
---|
| 140 | $(document).on('click','#table_option .optDupli', function () { |
---|
[27589] | 141 | var $this =$(this); |
---|
| 142 | $pos = $(document).scrollTop(), |
---|
| 143 | $pos = $pos + 100; |
---|
| 144 | |
---|
| 145 | $('.add_content').css('top',$pos) |
---|
[27568] | 146 | $('.Tdupli').show(); |
---|
| 147 | _rempform($this); |
---|
| 148 | $('input#optId').attr('value',''); |
---|
| 149 | $('#add_option').fadeIn(); |
---|
| 150 | |
---|
| 151 | return false; |
---|
| 152 | }); |
---|
| 153 | |
---|
| 154 | function _rempform($this){ |
---|
| 155 | var $nRow = $this.parents('tr')[0], |
---|
| 156 | $jqInputs = $('input', $nRow), |
---|
| 157 | $id = $jqInputs[0].value, |
---|
| 158 | $opt = $('#optvar').data('option'), |
---|
| 159 | $id = $opt[$id].id, |
---|
| 160 | $name = $opt[$id].name, |
---|
| 161 | $title = $opt[$id].title, |
---|
| 162 | $type = $opt[$id].type, |
---|
| 163 | $requi = $opt[$id].requi, |
---|
| 164 | $value = $opt[$id].val; |
---|
| 165 | |
---|
| 166 | $('input#optId').attr('value',$id); |
---|
| 167 | $('input#optName').attr('value',$name); |
---|
| 168 | $('input#optTitle').attr('value',$title); |
---|
| 169 | if($requi==1){ |
---|
| 170 | $('input#optRequi').attr('checked','checked'); |
---|
| 171 | }; |
---|
| 172 | $('select#optType').remove(); |
---|
| 173 | |
---|
| 174 | $('#typeOpt span:last').append($select) |
---|
| 175 | $('select#optType option[value=' +$type+']').attr('selected','selected'); |
---|
| 176 | |
---|
| 177 | if($value.length != 0){ |
---|
| 178 | $('.val').remove(); |
---|
| 179 | $.each($value,function(e,val){ |
---|
| 180 | $('.valeur').append($('<div />').addClass('val').append($val)); |
---|
| 181 | $('.val').last().find('input').attr('value',val) |
---|
| 182 | }); |
---|
| 183 | } |
---|
| 184 | _verif_type_opt(); |
---|
| 185 | |
---|
| 186 | } |
---|
| 187 | |
---|
| 188 | $('#selectAll').click(function () { |
---|
| 189 | $('#table_option input[type=checkbox]').prop('checked', true); |
---|
| 190 | _delet_button() |
---|
| 191 | return false; |
---|
| 192 | }); |
---|
| 193 | |
---|
| 194 | $('#selectNone').click(function () { |
---|
| 195 | $('#table_option input[type=checkbox]').prop('checked', false); |
---|
| 196 | _delet_button() |
---|
| 197 | return false; |
---|
| 198 | }); |
---|
| 199 | |
---|
| 200 | $('#selectInvert').click(function () { |
---|
| 201 | $('#table_option input[type=checkbox]').each(function(){ |
---|
| 202 | if($(this).is (':checked')){ |
---|
| 203 | $(this).prop('checked', false); |
---|
| 204 | }else{ |
---|
| 205 | $(this).prop('checked', true); |
---|
| 206 | } |
---|
| 207 | _delet_button() |
---|
| 208 | }); |
---|
| 209 | return false; |
---|
| 210 | }); |
---|
| 211 | |
---|
| 212 | $('#table_option td.del input[type=checkbox]').change(function () { |
---|
| 213 | _delet_button() |
---|
| 214 | }); |
---|
| 215 | |
---|
| 216 | function _delet_button(){ |
---|
| 217 | if($('#table_option td.del input[type=checkbox]:checked').length > 0){ |
---|
| 218 | $('#forbidAction').css('display','none'); |
---|
| 219 | $('#permitAction').css('display','block'); |
---|
| 220 | }else{ |
---|
| 221 | $('#forbidAction').css('display','block'); |
---|
| 222 | $('#permitAction').css('display','none'); |
---|
| 223 | } |
---|
| 224 | }; |
---|
| 225 | |
---|
| 226 | $("#listOrder").sortable({ |
---|
| 227 | placeholder: 'highlight', |
---|
| 228 | update: function() { |
---|
| 229 | var $order = $("#listOrder").sortable("toArray"); |
---|
| 230 | $('#newOrder').val($order.join(",")); |
---|
| 231 | } |
---|
| 232 | }); |
---|
| 233 | |
---|
| 234 | $("#listOrder").disableSelection(); |
---|
| 235 | |
---|
| 236 | $('#ChangeOrder').click(function() { |
---|
[27743] | 237 | var $pos = $(document).scrollTop(), |
---|
| 238 | $pos = $pos + 100; |
---|
| 239 | $('#change_Order .add_content').css('top',$pos) |
---|
[27568] | 240 | $("#change_Order").fadeIn( |
---|
| 241 | ); |
---|
| 242 | return false; |
---|
| 243 | }); |
---|
| 244 | |
---|
| 245 | $('#close_changeOrder').click(function() { |
---|
| 246 | $("#change_Order").fadeOut(); |
---|
| 247 | |
---|
| 248 | return false; |
---|
| 249 | }); |
---|
| 250 | |
---|
| 251 | |
---|
| 252 | }) |
---|
| 253 | |
---|
| 254 | })(jQuery); |
---|
| 255 | {/literal}{/footer_script} |
---|
| 256 | |
---|
| 257 | <div id="optvar" class="titrePage" data-option='{$mps_option|@json_encode}'> |
---|
| 258 | <h2>{'Options'|translate}</h2> |
---|
| 259 | </div> |
---|
| 260 | |
---|
| 261 | <p class="showCreateAlbum" id="showAddProd"> |
---|
| 262 | <a href="#" class="addedit icon-plus-circled">{'Add a option'|translate}</a> |
---|
| 263 | </p> |
---|
| 264 | |
---|
| 265 | <div id="add_option" class="add_wrap" style="display:none"> |
---|
| 266 | <div class="add_content"> |
---|
| 267 | <div class="boxtitre"><h1> |
---|
[28050] | 268 | <span class="tit Tadd">{'Add'|translate}</span> |
---|
| 269 | <span class="tit Tedit">{'Edit'|translate}</span> |
---|
| 270 | <span class="tit Tdupli">{'Duplicate'|translate}</span> |
---|
[27589] | 271 | <span class="tit Tedit Tdupli">{'the option'|translate}</span> |
---|
| 272 | <span class="tit Tadd">{'a option'|translate}</span> |
---|
[27568] | 273 | </h1></div> |
---|
| 274 | <span id="close_addoption" class="close_box_add"></span> |
---|
| 275 | |
---|
| 276 | <form id="addopt_form" method="post" name="add_opt" action=""> |
---|
| 277 | <div style="margin: 0 0 10px 5px" > |
---|
| 278 | <div class="addopt_table"> |
---|
| 279 | <div> |
---|
| 280 | <span>{'Name'|translate}</span> |
---|
| 281 | <span><input id="optId" type="hidden" name="id"></span> |
---|
| 282 | <span><input id="optName" type="text" name="name" size="40"></span> |
---|
| 283 | </div> |
---|
| 284 | |
---|
| 285 | <div id="typeOpt"> |
---|
| 286 | <span valign="top">{'Type of option'|translate}</span> |
---|
| 287 | <span id="select">{html_options name=type options=$mps_type_opt selected="select" id="optType"}</span> |
---|
| 288 | </div> |
---|
| 289 | |
---|
| 290 | <div> |
---|
| 291 | <span><label>{'The field is required'|@translate} |
---|
| 292 | <input id="optRequi" type="checkbox" name="requi" value="1"> |
---|
| 293 | </label><span> |
---|
| 294 | </div> |
---|
| 295 | <div> |
---|
| 296 | <span>{'Note administrator'|@translate}</span> |
---|
| 297 | <span><input id="optTitle" type="text" name="title" size="40"></span> |
---|
| 298 | </div> |
---|
| 299 | |
---|
| 300 | <div class="valeur"> |
---|
| 301 | <div> |
---|
| 302 | <span>{'Option value'|@translate}</span> |
---|
| 303 | <span><a class="icon-plus-circled addVal" href="#">{'add value'|@translate}</a></span> |
---|
| 304 | </div> |
---|
| 305 | |
---|
| 306 | <div class="val"> |
---|
| 307 | <span>{'Value'|@translate}</span> |
---|
| 308 | <span><input type="text" name="val[]" size="20"></span> |
---|
| 309 | <span><a class="icon-cancel-circled delVal" href="#">{'delete'|@translate}</a></span> |
---|
| 310 | </div> |
---|
| 311 | </div> |
---|
| 312 | |
---|
| 313 | </div> |
---|
| 314 | </div> |
---|
| 315 | |
---|
| 316 | <span class="actionButtons"> |
---|
| 317 | <input name="option_add" type="hidden" value="{'Submit'|@translate}"> |
---|
| 318 | <input id="option_add" class="submit" type="submit" value="{'Submit'|@translate}"> |
---|
| 319 | </span> |
---|
| 320 | <span class="errors" style="display:none">{'you must enter the name of the option'|@translate}</span> |
---|
| 321 | |
---|
| 322 | </form> |
---|
| 323 | </div> |
---|
| 324 | </div> |
---|
| 325 | |
---|
| 326 | |
---|
| 327 | |
---|
| 328 | <div class="optionCreate"> |
---|
| 329 | <form id="formOption" method="post" name="formOption" action=""> |
---|
| 330 | <table id="table_option"> |
---|
| 331 | <thead> |
---|
| 332 | <tr> |
---|
| 333 | <th></th> |
---|
| 334 | <th>{'Name'|@translate}</th> |
---|
| 335 | <th>{'Note administrator'|@translate}</th> |
---|
| 336 | <th></th> |
---|
| 337 | <th>{'Type'|@translate}</th> |
---|
| 338 | <th>{'Required'|@translate}</th> |
---|
| 339 | </tr> |
---|
| 340 | </thead> |
---|
| 341 | <tbody> |
---|
| 342 | {foreach from=$mps_option item=option name=option} |
---|
| 343 | <tr> |
---|
| 344 | <td class="del"><input type="checkbox" name="check[]" value={$option.id}></td> |
---|
| 345 | <td>{$option.name} <a title="{'edit'|translate|escape:'javascript'}" class="optEdit icon-pencil tabact">{'edit'|translate}</a> <a title="{'duplicate'|translate|escape:'javascript'}" class="optDupli icon-pencil tabact">{'duplicate'|translate}</a></td> |
---|
| 346 | <td>{$option.title}</td> |
---|
| 347 | <td> |
---|
| 348 | {if $option.type=="select"} |
---|
| 349 | {html_options name=option options=$option.val}</td> |
---|
| 350 | {/if} |
---|
| 351 | {if $option.type=="radio"} |
---|
| 352 | {html_radios name='option' options=$option.val separator='<br />'}</td> |
---|
| 353 | {/if} |
---|
| 354 | {if $option.type=="checkbox"} |
---|
| 355 | {html_checkboxes name='option' options=$option.val separator='<br />'}</td> |
---|
| 356 | {/if} |
---|
| 357 | |
---|
| 358 | {if $option.type=="text"} |
---|
| 359 | <input type="text" size="20"></td> |
---|
| 360 | {/if} |
---|
| 361 | {if $option.type=="textarea"} |
---|
| 362 | <textarea rows="4" cols="50"></textarea></td> |
---|
| 363 | {/if} |
---|
| 364 | <td>{$option.type}</td> |
---|
| 365 | <td>{if $option.requi=="1"}{'Yes'|@translate}{else}{'No'|@translate}{/if}</td> |
---|
| 366 | </tr> |
---|
| 367 | {/foreach} |
---|
| 368 | </table> |
---|
| 369 | <div style="clear:right"></div> |
---|
| 370 | |
---|
| 371 | <p class="checkActions"> |
---|
| 372 | {'Select:'|@translate} |
---|
| 373 | <a href="#" id="selectAll">{'All'|@translate}</a>, |
---|
| 374 | <a href="#" id="selectNone">{'None'|@translate}</a>, |
---|
| 375 | <a href="#" id="selectInvert">{'Invert'|@translate}</a> |
---|
| 376 | </p> |
---|
| 377 | |
---|
| 378 | </div> |
---|
| 379 | |
---|
| 380 | <div id="forbidAction">{'No product selected'|@translate}</div> |
---|
| 381 | <div id="permitAction" style="display:none"> |
---|
| 382 | |
---|
| 383 | <input type=submit name="delete" value="{'Delete'|@translate}"> |
---|
| 384 | <br></br> |
---|
| 385 | </div> |
---|
| 386 | </form> |
---|
| 387 | |
---|
| 388 | <p class="showCreateAlbum" id="showChangeOrder"> |
---|
| 389 | <a href="#" id="ChangeOrder" class="icon-plus-circled">{'Change the display order of options in the form'|translate}</a> |
---|
| 390 | </p> |
---|
| 391 | |
---|
| 392 | <div id="change_Order" class="add_wrap" style="display:none"> |
---|
| 393 | <div class="add_content"> |
---|
| 394 | <span id="close_changeOrder" class="close_box_add"></span> |
---|
| 395 | <div class="boxtitre"><h1>{'Change the display order of options in the form'|translate}</h1> |
---|
| 396 | <p> {'drag / drop to change the order'|translate}</p></div> |
---|
| 397 | <div id="form_order"> |
---|
| 398 | <form id="changeOrder" method="post" name="add_prod" action=""> |
---|
| 399 | <fieldset> |
---|
| 400 | |
---|
| 401 | <ul id="listOrder"> |
---|
| 402 | {foreach from=$mps_option item=option name=option} |
---|
| 403 | <li id="{$option.id}">{$option.name} -> {$option.type}</li> |
---|
| 404 | {/foreach} |
---|
| 405 | <br /> |
---|
| 406 | </fieldset> |
---|
| 407 | <input id="newOrder" type="hidden" value="" name="newOrder"> |
---|
| 408 | <input id="sortable" type="submit" name="submit" value="{'Submit'|@translate}"> |
---|
| 409 | |
---|
| 410 | </form> |
---|
| 411 | </div> |
---|
| 412 | </div> |
---|
| 413 | </div> |
---|
| 414 | |
---|
| 415 | |
---|
| 416 | |
---|