templates/uredi_menu/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Uredi vsebino parent = {{menu_parent_g}}{% endblock %}
  6. {% block javascriptcode %}
  7.     <script type="text/javascript">
  8.         
  9.         var datotekaInputUploader;
  10.         var datotekaMultipleInputUploader;
  11.         var datotekaAdditionalInputUploader;
  12.         var api;
  13.         var apiMultiple;
  14.         var apiAdditional;
  15.         var gUploadedImage;
  17.         function createUploaderImageMenu()
  18.         {
  19.             $.ajax({
  20.                 url:'{{ path('editmenu_getpreloadedimage') }}',
  21.                 type: "POST",
  22.                 dataType: "json",
  23.                 async: true,
  24.                 data:{ id: {{ menu_parent_g }}},
  25.                 success: function (return_data)
  26.                 {  
  27.                     fileImage = $('#datotekaInput').fileuploader(
  28.                     {
  29.                         limit: 1,
  30.                         enableApi:true,
  31.                         files: return_data,
  32.                         onSelect: function(item) 
  33.                         {
  34.                             if (!item.html.find('.fileuploader-action-start').length)
  35.                                 item.html.find('.fileuploader-action-remove').before('<a class="fileuploader-action fileuploader-action-start" title="Upload"><i></i></a>');
  36.                         },
  37.                         upload:
  38.                         {
  39.                             url: '{{ path('dodajmenuuploadimagecall') }}',
  40.                             data: {
  41.                                'menu_id': {{ menu_parent_g }}
  42.                             },
  43.                             type: 'POST',
  44.                             enctype: 'multipart/form-data',
  45.                             start: true,
  46.                             synchron: true,
  47.                             beforeSend: function(item) 
  48.                             {
  49.                                 item.upload.data.custom_name = item.name;
  50.                             },
  51.                             onSuccess: function(result, item) 
  52.                             {
  53.                                 var data = {};
  54.                                 gUploadedImage = result[0].files[0].name;
  55.                                 try {
  56.                                     data = JSON.parse(result);
  57.                                 } catch (e) {
  58.                                     data.hasWarnings = true;
  59.                                 }
  61.                                 // get the new file name
  62.                                 if(data.isSuccess && data.files[0]) 
  63.                                 {
  64.                                     item.name = data.files[0].name;
  65.                                     item.html.find('.column-title div').animate({opacity: 0}, 400);
  66.                                 }
  67.                         
  68.                                 item.html.find('.fileuploader-action-remove').addClass('fileuploader-action-success');
  69.                                 setTimeout(function() 
  70.                                 {
  71.                                     item.html.find('.column-title div').attr('title', result[0].files[0].name).text(result[0].files[0].name).animate({opacity: 1}, 400);
  72.                                     item.html.find('.progress-bar2').fadeOut(400);
  73.                                 }, 
  74.                                 400);
  75.                                 
  76.                             },
  77.                             onError: function(item) 
  78.                             {
  79.                                 var progressBar = item.html.find('.progress-bar2');
  81.                                 // make HTML changes
  82.                                 if(progressBar.length > 0) 
  83.                                 {
  84.                                     progressBar.find('span').html(0 + "%");
  85.                                     progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
  86.                                     item.html.find('.progress-bar2').fadeOut(400);
  87.                                 }
  88.                                 
  89.                                 item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
  90.                                     '<a class="fileuploader-action fileuploader-action-retry" title="Retry"><i></i></a>'
  91.                                 ) : null;
  92.                             },
  93.                             onProgress: function(data, item) 
  94.                             {
  95.                                 var progressBar = item.html.find('.progress-bar2');
  97.                                 // make HTML changes
  98.                                 if(progressBar.length > 0) 
  99.                                 {
  100.                                     progressBar.show();
  101.                                     progressBar.find('span').html(data.percentage + "%");
  102.                                     progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
  103.                                 }
  104.                             },
  105.                             onComplete: null,
  106.                         },
  107.                         onRemove: function(item) 
  108.                         {       
  109.                             // send POST request
  110.                             $.post('/api/ajax_remove_file.php', {
  111.                                 file: item.name
  112.                             });
  113.                         },
  114.                         captions: 
  115.                         {
  116.                             button: function(options) { return 'Izberi ' + (options.limit == 1 ? 'datoteko' : 'datoteke'); },
  117.                             feedback: function(options) { return 'Izberi datoteko'; },
  118.                             feedback2: function(options) { return 'Število izbranih datotek: ' + options.length; },
  119.                             confirm: 'Potrdi',
  120.                             cancel: 'Prekliči',
  121.                             name: 'Ime',
  122.                             type: 'Tip',
  123.                             size: 'Velikost',
  124.                             dimensions: 'Dimenzije',
  125.                             duration: 'Čas trajanja',
  126.                             crop: 'Razreži',
  127.                             rotate: 'Rotiraj',
  128.                             sort: 'Sortiraj',
  129.                             download: 'Prenesi',
  130.                             upload: 'Naloži',
  131.                             remove: 'Odstrani',
  132.                             drop: 'Povlecite sem datotetke, ki jih želite naložiti na strežnik.',
  133.                             paste: '<div class="fileuploader-pending-loader"></div> Datoteka se bo prilepila. Kliknite sem, če želite preklicati akcijo.',
  134.                             removeConfirmation: 'Ste prepričani, da želite izbrisati datoteko?',
  135.                             errors: {
  136.                                 filesLimit: 'Število dovoljenih datotek: ${limit}.',
  137.                                 filesType: 'Dovoljeni tipi datotek: ${extensions}.',
  138.                                 fileSize: '${name} je predolga! Največja dovoljena velikost datoteke je ${fileMaxSize} MB.',
  139.                                 filesSizeAll: 'Datoteke so predolge! Največja dovoljena velikost datotek je ${maxSize} MB.',
  140.                                 fileName: 'Datoteka z imenom ${name} je že izbrana.',
  141.                                 folderUpload: 'Prenos map ni dovoljen.'
  142.                             }
  143.                         }   
  144.                     });
  145.                     apiContentImage = $.fileuploader.getInstance(fileImage);
  146.                 }});
  147.         }
  150.         function fillData()
  151.         {
  152.             
  153.             
  154.             gUploadedImage = '{{ menu_image }}';
  155.             createUploaderImageMenu(); 
  156.             //createUploaderMultipleImage();
  158.             //clearFields();            
  159.         }
  163.         $( document ).ready(function() 
  164.         {
  165.             if ('{{menu_lang_g}}' == 'si')
  166.             {
  167.                 $("#defaultFlag").attr("src","{{ asset('img/flags/Slovenia.png')}}");
  168.             }
  169.             else if ('{{menu_lang_g}}' =='en')
  170.             {
  171.                 $("#defaultFlag").attr("src","{{ asset('img/flags/United-Kingdom.png')}}");
  172.             } 
  173.             else if ('{{menu_lang_g}}' =='it')
  174.             {
  175.                 $("#defaultFlag").attr("src","{{ asset('img/flags/Italy.png')}}");
  176.             } 
  177.             
  178.             tinymce.init({
  179.                 selector: 'textarea',
  180.                 height:600,
  181.                         width:1000,
  182.                         plugins: 'fullpage advlist autolink lists link image charmap print preview hr anchor pagebreak moxiemanager code table',
  183.                         toolbar: 'fullpage code table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol undo redo | insert | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  184.                         toolbar_mode: 'floating',
  185.                         extended_valid_elements : "script[src|async|defer|type|charset]",
  186.                         convert_urls: false,
  187.                         entity_encoding:'raw',
  189.                 
  190.                 setup: function (editor) {
  191.                     
  192.                     
  193.                     
  194.                     editor.on('init', function () {
  195.                         
  196.                         var content ='{{menu_content}}';
  197.                         //editor.setContent(content);
  198.                         //editor.setContent('<p><b>To je bla</b></p>');
  199.                         
  200.                         var Title = $('<textarea />').html(content).text();
  202.                         var TitleTrimmed =Title.substring(1, Title.length-1);
  203.                         editor.setContent(TitleTrimmed.trim());
  204.                     });
  205.                 }  
  206.             });
  208.             fillData();
  209.             //tinymce.get('textarea').focus();
  210.             tinymce.activeEditor.setContent("Dodajte novo vsebino");
  212.             
  213.             
  214.             
  215.             
  216.             //napolnim vnosna polja za urejanje menija
  217.             $('#menu_title').val('{{menu_title}}');
  218.             
  220.             if('{{menu_visible}}' == 0)
  221.             {
  222.                 $('#menu_visible').prop('checked', false);
  223.             }
  224.             else
  225.             {
  226.                 $('#menu_visible').prop('checked', true);
  227.             }
  228.             
  229.             
  230.             //gumb zapriOkno CLICK!
  231.             $("#zapriOkno").click(function(){
  232.             
  233.                 location.href = '/menus';
  235.             });
  237.             //gumb shrani CLICK!
  238.             $("#shranimenu").click(function(){
  239.                 console.log("TEST");
  240.                 //var myContent = tinymce.get("textarea").getContent();
  241.                 var myContent = tinymce.activeEditor.getContent();
  242.                 console.log(myContent);
  244.                 //preverjamo ali je spremenljivka definirana
  245.                 if (typeof gUploadedImage !== 'undefined') {
  246.                     // the variable is defined
  247.                 }
  248.                 else
  249.                 {
  250.                     gUploadedImage = "";
  251.                 }
  253.                 //ajax call za uredi vsebino!
  254.                 $.ajax({
  255.                     url:'{{ path('uredimenucall') }}',
  256.                     type: "POST",
  257.                     dataType: "json",
  258.                     async: true,
  259.                     data: {
  260.                         'menu_title' : $('#menu_title').val(),
  261.                         'menu_content': myContent,
  262.                         'menu_parent': {{menu_parent_g}},
  263.                         'menu_lang': '{{menu_lang_g}}',
  264.                         'menu_top': $('#menu_top').is(':checked'),
  265.                         'menu_footer': $('#menu_footer').is(':checked'),
  266.                         'menu_visible': $('#menu_visible').is(':checked'),
  267.                         'menu_image': gUploadedImage
  268.                         },
  269.                     success: function (return_data)
  270.                     {          
  271.                         if (return_data.data == "ok")              
  272.                         {
  273.                             
  274.                         }
  275.                         else
  276.                         {
  277.                             $('#opozoriloSplosno').attr('class','alert alert-danger');
  278.                             $('#opozoriloSplosno').text('Brisanje LVK ni mogoče, ker imate nezaključene postavke.');
  279.                                                         
  280.                         }
  281.                         $('#opozoriloSplosno').show(); 
  282.                         $("html, body").animate({ scrollTop: 0 }, "slow");
  283.                     },
  284.                     error: function (xhr, ajaxOptions, thrownError)
  285.                     {
  286.                         console.log(thrownError);
  287.                     }
  288.                 });
  289.                 location.href = '/menus';
  290.                 //END ajax call za shrani vsebino
  292.             });
  293.             //END gumb shrani vsebino CLICK 
  295.         });
  296.     </script>
  297. {% endblock %}
  302. {% block breadcrumbs %}
  303.     <li class="breadcrumb-item">Domov</li>
  304.     <!--<li class="breadcrumb-item"><a href="#">Šifranti</a></li>-->
  305.     <li class="breadcrumb-item active">Vsebina</li>
  306.     <li style="float: right;">prijavljen: {{ app.user.name }}</li>
  307.     
  308.     <!-- Breadcrumb Menu-->
  309.     <li class="breadcrumb-menu d-md-down-none">
  310.         <div class="btn-group" role="group" aria-label="Button group with nested dropdown"></div>
  311.     </li>
  312. {% endblock %}
  314. {% block content %}
  315. <div class="card">
  316.         <div class="card-header">
  317.             <i class="fa fa-edit"></i>               
  318.             <strong>Urejanje menuja</strong>
  319.             <span id="shranjujem" style="padding-left: 20px;color: #20a8d8;display:none;">... shranjujem ... </span>
  320.             <div class="card-actions">                
  321.                 
  322.             </div>
  323.         </div>
  324.         <div class="card-body">
  325.             <div id="opozoriloSplosno" class="alert alert-danger" role="alert" style="display:none;">
  326.                 -
  327.             </div>
  329.             
  330.             <ul class="nav nav-tabs" role="tablist">
  331.                 <li class="nav-item">
  332.                      <a class="nav-link active" data-toggle="tab" href="#vsebina" role="tab" aria-controls="home"><i class="icon-book-open"></i> Vsebina</a>
  333.                 </li>
  334.                 <li class="nav-item">
  335.                     <a class="nav-link" data-toggle="tab" href="#dodatnefotografije" role="tab" aria-controls="profile"><i class="icon-picture"></i> Dodatne fotografije</a>
  336.                 </li>
  337.                 <li class="nav-item">
  338.                     <a class="nav-link" data-toggle="tab" href="#dodatnedatoteke" role="tab" aria-controls="messages"><i class="icon-paper-clip"></i> Dodatne datoteke</a>
  339.                 </li>
  340.             </ul>
  341.             <div class="tab-content">
  342.                                 <div class="tab-pane active" id="vsebina" role="tabpanel">
  343.                                     <form id="vsebinaForma" enctype="multipart/form-data">
  344.                                         <div class="form-group">
  345.                                             <label for="naslov">Naziv menija</label>
  346.                                             <input type="text" class="form-control" id="menu_title" placeholder="Vnesite naziv menija" name="menu_title">
  347.                                         </div>
  348.                                         
  349.                                         <div class="form-group">
  350.                                             <label for="besedilo">Besedilo menija</label>
  351.                                             
  352.                                             <textarea id="menu_content" name="menu_content">
  353.                                                 
  354.                                             </textarea>
  355.                                         </div>                                
  357.                                         <div class="form-group">
  358.                                             <div class="file-loading">
  359.                                                 <label for="datotekaInput">Slika menija</label>
  360.                                                 <input id="datotekaInput" type="file" class="file" data-overwrite-initial="false" name="datotekaInput" multiple="true"  data-fileuploader-files=''>
  361.                                             </div>
  362.                                         </div>
  363.                                         <hr>
  364.                                         <div class="form-group">
  365.                                             <label for="vidna">Ali naj bo meni viden?</label><br>
  366.                                             <label class="switch switch-text switch-pill switch-primary">
  367.                                                 <input type="checkbox" class="switch-input" checked="" name="menu_visible" id="menu_visible">
  368.                                                 <span class="switch-label" data-on="DA" data-off="NE"></span>
  369.                                                 <span class="switch-handle"></span>
  370.                                             </label>
  371.                                         </div>
  372.                                         <div class="form-group">
  373.                                             <label for="vidna_menu">Ali naj bo gradnik viden v menuju?</label><br>
  374.                                             <label class="switch switch-text switch-pill switch-primary">
  375.                                                 <input type="checkbox" class="switch-input" checked="" name="menu_top" id="menu_top">
  376.                                                 <span class="switch-label" data-on="DA" data-off="NE"></span>
  377.                                                 <span class="switch-handle"></span>
  378.                                             </label>
  379.                                         </div>
  380.                                         <div class="form-group">
  381.                                             <label for="vidna_footer">Ali naj bo gradnik vidna v nogi?</label><br>
  382.                                             <label class="switch switch-text switch-pill switch-primary">
  383.                                                 <input type="checkbox" class="switch-input" checked="" name="menu_footer" id="menu_footer">
  384.                                                 <span class="switch-label" data-on="DA" data-off="NE"></span>
  385.                                                 <span class="switch-handle"></span>
  386.                                             </label>
  387.                                         </div>
  388.                                     </form>
  389.                                 </div>
  390.                                 <div class="tab-pane" id="dodatnefotografije" role="tabpanel">
  391.                                     <form id="fotografijeForma" enctype="multipart/form-data">
  392.                                         <div class="form-group">
  393.                                             <div class="file-loading">
  394.                                                 <label for="datotekaMultipleInput">Dodatne fotografije</label>
  395.                                                 <input class="gallery_media" id="datotekaMultipleInput" type="file" class="file" name="datotekaMultipleInput[]" multiple="true" >
  396.                                             </div>
  397.                                         </div>
  398.                                     </form>
  399.                                 </div>
  400.                                 <div class="tab-pane" id="dodatnedatoteke" role="tabpanel">
  401.                                     <form id="datotekeForma" enctype="multipart/form-data">
  402.                                         <div class="form-group">
  403.                                             <div class="file-loading">
  404.                                                 <label for="datotekaAdditionalInput">Dodatne datoteke</label>
  405.                                                 <input id="datotekaAdditionalInput" type="file" class="file" data-overwrite-initial="false" name="datotekaAdditionalInput[]" multiple="true">
  406.                                             </div>
  407.                                         </div>                                
  408.                                     </form>
  409.                                 </div>  
  410.                             </div>
  411.         </div>
  412.         <div class="card-footer">
  413.             <button type="button" class="btn btn-primary" id="shranimenu">Shrani menu</button>
  414.             <button type="button" class="btn btn-secondary" id="zapriOkno">Prekliči</button>
  415.         </div>
  416.     </div><!--card-->
  417.     {% endblock %}