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

Last change on this file since 27589 was 27589, checked in by Miklfe, 10 years ago
File size: 12.6 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_content').css('top','100px')
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": '&larr; '+"{/literal}{'Previous'|translate|escape:'javascript'}{literal}",
121                                        "sNext":     "{/literal}{'Next'|translate|escape:'javascript'}{literal}"+' &rarr;',
122                                        "sLast":     "{/literal}{'Last'|translate|escape:'javascript'}{literal}",
123                                },
124                        },
125                });
126               
127                $(document).on('click','#table_option .optEdit', function () {
128                        var $this       =$(this),
129                                $pos    = $(document).scrollTop(),
130                                $pos    = $pos + 100;
131                               
132                        $('.add_content').css('top',$pos)
133                        $('.Tedit').show();
134                        _rempform($this);
135                        $('#add_option').fadeIn();
136       
137                        return false;
138                });     
139               
140                $(document).on('click','#table_option .optDupli', function () {
141                        var $this       =$(this);
142                                $pos    = $(document).scrollTop(),
143                                $pos    = $pos + 100;
144                               
145                        $('.add_content').css('top',$pos)
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() {
237                        $("#change_Order").fadeIn(
238                        );
239                        return false;
240                });
241               
242                $('#close_changeOrder').click(function() {
243                        $("#change_Order").fadeOut();
244
245                        return false;
246                });
247               
248               
249        })
250       
251})(jQuery);
252{/literal}{/footer_script}             
253               
254<div id="optvar" class="titrePage" data-option='{$mps_option|@json_encode}'>
255        <h2>{'Options'|translate}</h2>
256</div>
257
258<p class="showCreateAlbum" id="showAddProd">
259  <a href="#" class="addedit icon-plus-circled">{'Add a option'|translate}</a>
260</p>
261
262<div id="add_option" class="add_wrap" style="display:none">
263<div class="add_content">
264        <div class="boxtitre"><h1>
265        <span class="tit Tadd">{'Add '|translate}</span>
266        <span class="tit Tedit">{'Edit '|translate}</span>
267        <span class="tit Tdupli">{'Duplicate '|translate}</span>
268        <span class="tit Tedit Tdupli">{'the option'|translate}</span>
269        <span class="tit Tadd">{'a option'|translate}</span>
270        </h1></div>
271        <span id="close_addoption" class="close_box_add"></span>
272
273<form id="addopt_form" method="post" name="add_opt" action="">
274 <div style="margin: 0 0 10px 5px" >
275        <div class="addopt_table">
276    <div>
277                <span>{'Name'|translate}</span>
278                <span><input id="optId" type="hidden" name="id"></span>
279                <span><input id="optName" type="text" name="name" size="40"></span>
280        </div>
281   
282        <div id="typeOpt">
283      <span valign="top">{'Type of option'|translate}</span>
284      <span id="select">{html_options name=type options=$mps_type_opt selected="select" id="optType"}</span>
285    </div>
286 
287        <div>
288      <span><label>{'The field is required'|@translate}
289      <input id="optRequi" type="checkbox" name="requi" value="1">
290          </label><span>
291    </div>
292        <div>
293      <span>{'Note administrator'|@translate}</span>
294      <span><input id="optTitle" type="text" name="title" size="40"></span>
295    </div>
296
297        <div class="valeur">
298        <div>
299        <span>{'Option value'|@translate}</span>
300        <span><a class="icon-plus-circled addVal" href="#">{'add value'|@translate}</a></span>
301        </div>
302       
303        <div class="val">
304        <span>{'Value'|@translate}</span>
305        <span><input type="text" name="val[]" size="20"></span>
306        <span><a class="icon-cancel-circled delVal"  href="#">{'delete'|@translate}</a></span>
307        </div>
308        </div>
309       
310        </div>
311 </div>
312 
313    <span class="actionButtons">
314          <input name="option_add" type="hidden" value="{'Submit'|@translate}">
315      <input id="option_add" class="submit" type="submit" value="{'Submit'|@translate}">
316    </span>
317          <span class="errors" style="display:none">{'you must enter the name of the option'|@translate}</span>
318
319</form>
320</div>
321</div>
322
323
324       
325<div class="optionCreate">
326<form id="formOption" method="post" name="formOption" action="">
327        <table id="table_option">
328                <thead>
329                <tr>
330                        <th></th>
331                        <th>{'Name'|@translate}</th>
332                        <th>{'Note administrator'|@translate}</th>
333                        <th></th>
334                        <th>{'Type'|@translate}</th>
335                        <th>{'Required'|@translate}</th>
336                </tr>
337        </thead>
338        <tbody>
339        {foreach from=$mps_option item=option name=option}
340        <tr>
341                <td class="del"><input type="checkbox" name="check[]" value={$option.id}></td>
342                <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>
343                <td>{$option.title}</td>
344                <td>
345                {if $option.type=="select"}
346                {html_options name=option options=$option.val}</td>
347                {/if}
348                {if $option.type=="radio"}
349                {html_radios name='option' options=$option.val separator='<br />'}</td>
350                {/if}
351                {if $option.type=="checkbox"}
352                {html_checkboxes name='option' options=$option.val separator='<br />'}</td>
353                {/if}
354
355                {if $option.type=="text"}
356                <input type="text" size="20"></td>
357                {/if}
358                {if $option.type=="textarea"}
359                <textarea rows="4" cols="50"></textarea></td>
360                {/if}
361                <td>{$option.type}</td>
362                <td>{if $option.requi=="1"}{'Yes'|@translate}{else}{'No'|@translate}{/if}</td>
363        </tr>
364                {/foreach}
365        </table>
366<div style="clear:right"></div>
367
368<p class="checkActions">
369  {'Select:'|@translate}
370  <a href="#" id="selectAll">{'All'|@translate}</a>,
371  <a href="#" id="selectNone">{'None'|@translate}</a>,
372  <a href="#" id="selectInvert">{'Invert'|@translate}</a>
373</p>
374
375</div>
376
377  <div id="forbidAction">{'No product selected'|@translate}</div>
378  <div id="permitAction" style="display:none">
379                       
380<input type=submit name="delete" value="{'Delete'|@translate}">
381<br></br>
382  </div>
383</form>         
384
385<p class="showCreateAlbum" id="showChangeOrder">
386  <a href="#" id="ChangeOrder" class="icon-plus-circled">{'Change the display order of options in the form'|translate}</a>
387</p>
388
389<div id="change_Order" class="add_wrap" style="display:none">
390<div class="add_content">
391<span id="close_changeOrder" class="close_box_add"></span>
392<div class="boxtitre"><h1>{'Change the display order of options in the form'|translate}</h1>
393        <p> {'drag / drop to change the order'|translate}</p></div>
394<div id="form_order">
395<form id="changeOrder"  method="post" name="add_prod" action="">
396<fieldset>  
397       
398 <ul id="listOrder">
399        {foreach from=$mps_option item=option name=option}
400        <li id="{$option.id}">{$option.name} -> {$option.type}</li>
401        {/foreach}
402    <br />
403</fieldset>
404<input id="newOrder" type="hidden" value="" name="newOrder">
405<input id="sortable" type="submit" name="submit" value="{'Submit'|@translate}">
406
407</form>
408</div>
409</div>
410</div>
411
412
413
Note: See TracBrowser for help on using the repository browser.