templates/base3d.html.twig line 1

Open in your IDE?
  1. <!-- app/Resources/views/base3d.html.php qqw-->
  2. <!DOCTYPE html>
  3. <html lang="cs">
  4.     <head>
  5.         <title>{% block title %}e-Commerce Virtual Reality Portal{% endblock %}</title>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  7.         <meta name="description" content="{% block description %}E-Commerce Portal{% endblock %}">
  8.         <meta name="keywords" content="E-Commerce, E-shop">
  9.         <meta name="author" content="Webexciter.com">
  10.         <meta name="viewport" content="width=device-width, initial-scale=1">
  11.         <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
  12.         <script src="{{ asset('assets/vendor/jquery.cycle.all.js') }}</script>
  13.         <script src="{{ asset('assets/vendor/x3d_webexciter.js') }}"></script>
  14.         <script src="{{ asset('assets/js/am.js') }}"></script>
  15.         <script type='text/javascript' src="{{ asset('assets/x3dom/x3dom.js') }}"> </script>
  16.   <!-- X_ICTE requirements -->
  17.     <link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/latest/dist/x_ite.css"/>
  18.     <script type="text/javascript" src="https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js"></script>
  19.     {# we set demo_standard.css as default stylesheet#}
  20.     {% if eshop is defined and eshop.eshopCss is defined and eshop.eshopCss != '' %}
  21.         {% set css = asset('css/' ~ eshop.eshopCss) %}
  22.     {% elseif externalCss is defined and externalCss == false %}
  23.         {% set css = null %}
  24.     {% elseif gallery3D is defined and gallery3D.gallery.galleryCss is defined %}
  25.         {% set css = asset('css/' ~ gallery3D.gallery.galleryCss) %}
  26.     {% else %}
  27.         {% set css = asset('css/demo_standard.css') %}
  28.     {% endif %}
  29.         <link rel="stylesheet" href="{{ css }}" />
  30.       <script>
  31.       
  32.       //Handle image gallery click
  33.       function imageGalleryClick(imagePath, linkUrl, serviceTitle, linkNewUrl=null, $galleryId)
  34.       {
  35.         document.getElementById('slideshow_texture').setAttribute('url', imagePath); 
  36.         document.getElementById('slideshow_url').setAttribute('url', linkUrl); 
  37.         // alert('linkUrl: ' + linkUrl); 
  38.         
  39.       } 
  40.       
  41.       function changeViewpoint(viewpointId)
  42.       {
  43.         document.getElementById(viewpointId).setAttribute('set_bind','true');
  44.       }    
  45.       function playSound(soundPath)
  46.       {
  47.         //alert('soundPath: ' + soundPath);
  48.         var audio = new Audio(soundPath);
  49.         audio.play();
  50.       }       
  51.       
  52.       function setBasketCount(basketCount)
  53.       {
  54.         //alert('setBasketCount: ' + basketCount);
  55.           $('#eshop_basket_count').text(basketCount);
  56.       }    
  57.       function openInfoMessage(message, isLinkToBasket=false)
  58.       {
  59.         $('#x3d_info_message').animate({
  60.           height: 35
  61.         }, 500);
  62.         $('#x3d_info_message_text').text(message);
  63.         $('#button_info_message_close').show();
  64.         $('#infoMessageTable').show();
  65.       }            
  66.       
  67.       function addBasket(eshopId, productId, units, price, productName)
  68.       {
  69.         var xmlhttp = new XMLHttpRequest();
  70.         //alert('addBasket 22: ' + eshopId + ' :: productId: ' + productId);
  71.         console.log('addBasket e-shop 22: ', eshopId);
  72.         console.log('addBasket productId: ', productId);
  73.         
  74.         if (window.location.toString().indexOf('app_dev.php') !== -1) {
  75.             var url = '/app_dev.php/api/eshop/' + eshopId + '/addbasket';
  76.         } else {
  77.             var url = '/api/eshop/' + eshopId + '/addbasket';
  78.         }        
  79.         
  80.         var params = 'productId=' + productId + '&units=1&productPrice=' + price;
  81.         xmlhttp.open('POST', url, true);
  82.         //Send the proper header information along with the request
  83.         xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  84.         xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  85.             //alert('adding eshopId 2: ' + eshopId + ' :: productId: ' + productId);
  86.             if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  87.                 //alert('response 110: ' +xmlhttp.responseText);
  88.                 var responseData = JSON.parse(xmlhttp.responseText);
  89.                 basketCount = responseData.basketCount;
  90.                 setBasketCount(basketCount);
  91.                 if(!productName) {
  92.                   productName = '';
  93.                 }
  94.                 openInfoMessage("Ok, product " + productName + " inserted into basket.", true);
  95.                 $('#button_info_message_cart_button').show();
  96.             } 
  97.         }
  98.         xmlhttp.send(params);
  99.       }      
  100.       function getProductDetail(eshopId, productId)
  101.       {
  102.         //alert('getProductDetail 22: ' + eshopId + ' :: productId: ' + productId);
  103.         
  104.         var xmlhttp = new XMLHttpRequest();
  105.         //var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId;
  106.         
  107.         if (window.location.toString().indexOf('app_dev.php') !== -1) {
  108.             var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId;
  109.         } else {
  110.             var url = '/api/eshop/' + eshopId + '/product/' + productId;
  111.         }
  112.         
  113.         var productName = '';
  114.         xmlhttp.open('GET', url);
  115.         xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  116.         xmlhttp.onprogress = function () {
  117.           console.log('LOADING: ', xmlhttp.status);
  118.         };
  119.         xmlhttp.onload = function () {
  120.           console.log('DONE: ', xmlhttp.status);
  121.         };        
  122.         xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  123.             //alert('getProductDetail 108 :: productId: ' + productId);
  124.             if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  125.                 //alert('response 110: ' +xmlhttp.responseText);
  126.                 var productData = JSON.parse(xmlhttp.responseText);
  127.                 productInfo = productData.product;
  128.                 //productName = productInfo.productName;
  129.                 //alert('window.location: ' + window.location + " :: url: " + url);
  130.                 $('#x3d_product_id').val(productId);   
  131.                 $('#x3d_product_name').text(productInfo.productName);
  132.                 $('#x3d_product_key').text(productInfo.productKey);
  133.                 $('#x3d_product_price').text(productInfo.displayPrice);  
  134.                 $('#x3d_product_description').text(productInfo.productDescription);    
  135.                 
  136.                 
  137.                 //$('#x3d_product_image').text(productInfo.image1);     
  138.                 var imagePath = $(location).attr('protocol') + '//' + $(location).attr('hostname') + '/users/Kantona/images/' + productInfo.image1;   
  139.                 $('#x3d_product_image').attr("src", imagePath); 
  140.             }
  141.         }
  142.         //xmlhttp.send(JSON.stringify({ "email": "hello@user.com", "response": { "name": "Tester" } }));
  143.         xmlhttp.send();
  144.         //xmlhttp.send(params);
  145.         
  146.         //x3d_menu
  147.         
  148.         $('#x3d_product_detail').animate({
  149.         width: 500
  150.           }, 500);
  151.           
  152.      
  153.         
  154.         //alert('status 112: ' + xmlhttp.status + ' :: responseText: ' + xmlhttp.responseText + ' :: url: ' + url);
  155.       }       
  156.       function getGaleryItemDetail(itemName, itemDescription)
  157.       {
  158.         //alert('itemName: ' + itemName + ' :: itemDescription: ' + itemDescription);
  159.         $('#x3d_item_name').text(itemName);
  160.         $('#x3d_item_description').text(itemDescription);
  161.         
  162.         $('#x3d_item_detail').animate({
  163.     width: 500
  164.         }, 500);
  165.       }       
  166.       function getQuickBasket(eshopId) 
  167.       {
  168.         //alert('getProductDetail 22: ' + eshopId + ' :: productId: ' + productId);
  169.         
  170.         var xmlhttp = new XMLHttpRequest();
  171.         //var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId;
  172.         
  173.         if (window.location.toString().indexOf('app_dev.php') !== -1) {
  174.           var url = '/app_dev.php/api/eshop/' + eshopId + '/getbasket';
  175.         } else {
  176.           var url = '/api/eshop/' + eshopId + '/getbasket';
  177.         }
  178.         console.log('3D getQuickBasket 1: ', url);
  179.         
  180.         var productName = '';
  181.         xmlhttp.open('GET', url);
  182.         xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  183.         xmlhttp.onprogress = function () {
  184.           console.log('LOADING: ', xmlhttp.status);
  185.         };
  186.         xmlhttp.onload = function () {
  187.           console.log('DONE: ', xmlhttp.status);
  188.         };        
  189.         xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
  190.             //alert('getProductDetail 108 :: productId: ' + productId);
  191.             if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  192.                 //alert('response 110: ' +xmlhttp.responseText);
  193.                 var responseData = JSON.parse(xmlhttp.responseText);
  194.                 basketItems = responseData.basketItems;
  195.                 console.log('responseText: ', xmlhttp.responseText);
  196.                 //productInfo = productData.product;
  197.                 //productName = productInfo.productName;
  198.                 //alert('window.location: ' + window.location + " :: url: " + url);
  199.                 $('#x3d_quick_basket_text').html("");
  200.                 $('#x3d_quick_basket_text').append('<ul>');
  201.                 for (let index = 0; index < basketItems.length; ++index) {
  202.                     const element = basketItems[index];
  203.                     console.log('element: ', element);
  204.                     $('#x3d_quick_basket_text').append('<li class="quickBasketRow">'
  205.                                                       +'<span class="quickBasketName">'+element.title+'</span>'
  206.                                                       +'<span class="quickBasketUnits">'+element.units+'</span>'
  207.                                                       +'<span class="quickBasketPrice">'+element.price+'</span>'
  208.                                                       +'</li>');
  209.                   }
  210.                 $('#x3d_quick_basket_text').append('</ul>');
  211.                 //$('#x3d_quick_basket_text').text('basket content ...');
  212.             }
  213.         }
  214.         //xmlhttp.send(JSON.stringify({ "email": "hello@user.com", "response": { "name": "Tester" } }));
  215.         xmlhttp.send();
  216.         //xmlhttp.send(params);
  217.         
  218.         //x3d_menu
  219.         //alert('status 112: ' + xmlhttp.status + ' :: responseText: ' + xmlhttp.responseText + ' :: url: ' + url);
  220.       }          
  221.       
  222.       function loadModel(modelPath, inlineId) {
  223.             //alert(document.getElementById(inlineId).getAttribute("url"));
  224.           //var inline = document.createElement("Inline");
  225.           var emptyString = "";
  226.           var url = document.getElementById(inlineId).getAttribute("url").valueOf();
  227.           //console.log('inlineId: ' + inlineId);
  228.           //console.log('url: -' + String(url).trim() + '-');
  229.           //removeNode('x3d_inline_external');
  230.           //document.getElementById('x3d_inline_external').setAttribute("url", modelPath);
  231.           //if (compareStrings(String(url).trim(), emptyString)) {
  232.             document.getElementById(inlineId).setAttribute("nameSpaceName", "ExtX3D");
  233.             document.getElementById(inlineId).setAttribute("contentType", "model/x3d+xml");
  234.             document.getElementById(inlineId).setAttribute('bboxSize','5 5 5');
  235.             document.getElementById(inlineId).setAttribute('bboxCenter','0 0 0');      
  236.             document.getElementById(inlineId).setAttribute("url", modelPath);
  237.           //}
  238.       }     
  239.       function removeNode(inlineId)
  240.       {
  241.         var ot = document.getElementById(inlineId);
  242.         for (var i = 0; i < ot.childNodes.length; i++) {
  243.           // check if we have a real X3DOM Node; not just e.g. a Text-tag
  244.           if (ot.childNodes[i].nodeType === Node.ELEMENT_NODE) {
  245.             ot.removeChild(ot.childNodes[i]);
  246.           break;
  247.         }
  248.       }
  249.         
  250.         return false;
  251.     };
  252.        function compareStrings(a,b){
  253.           if (a.length !== b.length) {
  254.                //alert('csrt: false');
  255.                return false;
  256.           }
  257.            //alert('csrt: true');
  258.           return a.localeCompare(b) === 0;
  259.       }  
  260.       
  261.       function changeColor()
  262.      {
  263.         if(document.getElementById("color").getAttribute('diffuseColor')=="1 0 0")
  264.            document.getElementById("color").setAttribute('diffuseColor', '0 0 1');
  265.         else
  266.            document.getElementById("color").setAttribute('diffuseColor', '1 0 0');
  267.      }   
  268.       function pushCtrl()
  269.       {
  270.         alert('pushCtrl: ');
  271.       } 
  272.      </script>
  273.      
  274.      <script>
  275.            //resize x3d scene
  276.       $(document).ready(function() {
  277.         var $win = $(window);
  278.         var $discountHeight = 96;
  279.         $('#button_fullscreen').click(function() {
  280.           $('#x3d').animate({
  281.         height: ($win.height() - $discountHeight),
  282.         width: $win.width()
  283.           }, 500);
  284.           $('#x3d_section').animate({
  285.         height: ($win.height() - $discountHeight),
  286.         width: $win.width()
  287.           }, 500);
  288.           $('#x3dom-x3d_section-canvas').animate({
  289.         height: ($win.height() - $discountHeight),
  290.         width: '100%'
  291.           }, 500);     
  292.           $("#x3d_section").attr("height",($win.height() - $discountHeight));
  293.         });
  294.         
  295.         $('#button_defaultscreen').click(function() {
  296.           $('#x3d').animate({
  297.         height: "323px",
  298.         width: '100%'
  299.           }, 500);
  300.           $('#x3d_section').animate({
  301.               height: "323px",
  302.               width: '100%'
  303.           }, 500);        
  304.           $('#x3dom-x3d_section-canvas').animate({
  305.               height: "323px",
  306.               width: '100%'
  307.           }, 500);          
  308.           $("#x3d_section").attr("height","323px");  
  309.         });
  310.             
  311.         $('#button_product_detail_close').click(function() {
  312.           $('#x3d_product_detail').animate({
  313.               width: 0
  314.           }, 500);
  315.         });
  316.         $('#button_product_detail_close2').click(function() {
  317.           $('#x3d_product_detail').animate({
  318.               width: 0
  319.           }, 500);
  320.         });             
  321.       $('#x3d_button_addcart').click(function() {
  322.         //alert('x3d_button_addcart: ' + $('#x3d_product_id').val());
  323.         
  324.         addBasket($('#x3d_eshop_id').val(), $('#x3d_product_id').val(), 1, $('#x3d_product_price').val(), $('#x3d_product_name').val());
  325.         $('#x3d_info_message').animate({
  326.           height: 35
  327.         }, 500);
  328.       });        
  329.       $('#x3d_info_message_close').click(function() {
  330.         $('#x3d_info_message_text').text('');
  331.         $('#button_info_message_close').hide();
  332.         $('#infoMessageTable').hide();      
  333.         $('#x3d_info_message').animate({
  334.           height: 0
  335.         }, 500);
  336.       });  
  337.       $('#basketPanel').mouseover(function() {
  338.         $('#x3d_quick_basket').animate({
  339.           height: 150
  340.         }, 500);
  341.         $('#quickBasketTable').show();  
  342.         $('#x3d_quick_basket_close').show();
  343.         var full_url = document.URL; 
  344.         var shopId = full_url.substring(full_url.lastIndexOf('/') + 1);
  345.         getQuickBasket(shopId);
  346.       });
  347.       $('#x3d_quick_basket').mouseleave(function() {
  348.         $('#x3d_quick_basket').animate({
  349.           height: 0
  350.         }, 500);
  351.         $('#quickBasketTable').hide();  
  352.       });    
  353.       $('#button_item_detail_close').click(function() {
  354.         $('#x3d_item_detail').animate({
  355.           width: 0
  356.         }, 500);
  357.       });
  358.       $('#button_item_detail_close2').click(function() {
  359.         $('#x3d_item_detail').animate({
  360.           width: 0
  361.         }, 500);
  362.       });          
  363.       });
  364.     </script>
  365.         
  366.     </head>
  367.     <body>
  368.         <div class="contentContainer">
  369.           <div class="content">
  370.               {% block content %}{% endblock %}
  371.           </div>
  372.         </div>
  373.     </body>
  374. </html>