source: extensions/MyPiwiShop/admin/template/options.tpl @ 27568

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