Mary_Pieroszkiewicz

app.js

Mar 5th, 2021
586
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * External Dependencies
  3.  */
  4. import 'jquery';
  5. import 'slick-carousel';
  6.  
  7. import Cropper from 'cropperjs'
  8.  
  9. // function toggleNav() {
  10. //   var $menu = $('.nav-primary, .mobile-nav-bg' );
  11. //
  12. //   if ( $menu.hasClass( 'show-nav' ) ) {
  13. //     $menu.removeClass( 'show-nav' );
  14. //   } else {
  15. //     $menu.addClass( 'show-nav' );
  16. //   }
  17. // }
  18.  
  19.  
  20. // /* ----- Mobile Navigation ----- */
  21. const burger = document.querySelector('.toggle-nav i');
  22. const nav = document.querySelector('.nav-primary');
  23.  
  24.  
  25. function toggleNav() {
  26.   burger.classList.toggle('fa-bars');
  27.   burger.classList.toggle('fa-times');
  28.   nav.classList.toggle('nav-active');
  29. }
  30.  
  31. burger.addEventListener('click', function(e) {
  32.   e.preventDefault();
  33.   toggleNav();
  34. });
  35.  
  36.  
  37. /* ----- Mobile Navigation ----- */
  38. // $('body').on('click', '.toggle-nav i', function () {
  39. //   $(this).toggleClass('fa-bars');
  40. //   $(this).toggleClass('fa-times');
  41. //   $('.nav-primary').toggleClass('nav-active');
  42. //   alert('test');
  43. // });
  44.  
  45.  
  46. function cropperUpdate(cropper) {
  47.  
  48.   var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;
  49.  
  50.   var containerData = cropper.getCanvasData();
  51.  
  52.   var imgWidth = containerData.width;
  53.   var imgHeight = containerData.height;
  54.   var ratio = imgWidth / imgHeight;
  55.   var newWidth = $( '#single-product-img-dim-w' ).val();
  56.   var newHeight = $( '#single-product-img-dim-h' ).val();
  57.   var newRatio = newWidth / newHeight;
  58.  
  59.  
  60.   if ( keepRatio ) {
  61.     cropper.setCropBoxData({
  62.       width: containerData.width,
  63.       height: containerData.height,
  64.     });
  65.   } else {
  66.     cropper.setCropBoxData({
  67.       width: (newRatio < ratio? imgHeight * newRatio : imgWidth),
  68.       height: (newRatio < ratio? imgHeight : imgWidth / newRatio),
  69.     });
  70.   }
  71.  
  72.   // update hidden post field: width, height
  73.   $( '#image-width' ).val( newWidth );
  74.   $( '#image-height' ).val( newHeight );
  75.  
  76. }
  77.  
  78. function priceUpdate() {
  79.   var varations = JSON.parse( $( '.variations_form' ).attr( 'data-product_variations' ) );
  80.  
  81.   var selectedMaterialName = $('.tpk-material-icons li.selected').data().material
  82.  
  83.   var pricePerMeter = varations.find(el => el.attributes['attribute_rodzaj-materialu'] === selectedMaterialName).display_price;
  84.  
  85.   var photoPrice = $( '#fotolia-photo-price' ).val();
  86.   var $price = $( '.tpk-single-price-span' );
  87.   var widthVal = $( '#single-product-img-dim-w' ).val();
  88.   var heightVal = $( '#single-product-img-dim-h' ).val();
  89.  
  90.  
  91.   var area = Math.round( ( widthVal * heightVal ) / 100 ) / 100 ;
  92.  
  93.   $( '#image-area' ).val( area );
  94.  
  95.   var newPrice = Math.round( ( area * pricePerMeter + parseFloat( photoPrice ) ) * 100  ) / 100;
  96.  
  97.   $price.html( newPrice + ' zł' );
  98. }
  99.  
  100. function readURL(input) {
  101.  
  102.   if (input.files && input.files[0]) {
  103.     var reader = new FileReader();
  104.  
  105.     reader.onload = function(e) {
  106.       var img = new Image();
  107.  
  108.       img.onload = function() {
  109.         if ( img.width < 2000 || img.height < 2000 ) {
  110.           $('.file-error-placeholder').text('Przesłane zdjęcie jest w za małej rozdzielczości (' + img.width + ' pikseli x ' + img.height + ' pikseli). Wymagana rozdzielczość to 2000 pikseli na 2000 pikseli.');
  111.         } else {
  112.           $('.file-error-placeholder').text('');
  113.           $('.confirm-won-photo-wrapper').addClass('active');
  114.         }
  115.  
  116.         $('#blah').attr('src', e.target.result);
  117.       };
  118.  
  119.       img.src = reader.result;
  120.     };
  121.  
  122.     reader.readAsDataURL(input.files[0]);
  123.   }
  124. }
  125.  
  126. function prepareUpload() {
  127.  
  128.   $(this).prop( 'disabled', true );
  129.  
  130.   var productName = document.getElementById('photo-upload-product-name').value || 'fototapety';
  131.   var fileInputField = $('#imgInp');
  132.   var file = fileInputField[0].files;
  133.   var data = new FormData();
  134.   var baseUrl = window.location.hostname === 'localhost'? 'http://localhost:3000/tapeko' : window.location.origin;
  135.  
  136.   data.append("action", "tpk_file_upload");
  137.  
  138.   $.each(file, function(key, value) {
  139.     data.append("tpk_file_upload", value);
  140.   });
  141.  
  142.   $.ajax({
  143.     // eslint-disable-next-line no-undef
  144.     url: tpk.ajax_url,
  145.     type: 'POST',
  146.     data: data,
  147.     cache: false,
  148.     dataType: 'json',
  149.     processData: false,
  150.     contentType: false,
  151.     success: function(data) {
  152.       // console.log(baseUrl + '/produkt/' + productName + '/?wlasna_grafika=' + data.filename);
  153.       window.location.replace( baseUrl + '/produkt/' + productName + '/?wlasna_grafika=' + data.filename );
  154.     },
  155.   });
  156. }
  157.  
  158. $(document).ready(() => {
  159.  
  160.   if ( document.body.classList.contains('single-product') ) {
  161.  
  162.     var cropper;
  163.  
  164.     var cropperOptions = {
  165.       checkCrossOrigin: false,
  166.       dragMode: 'none',
  167.       viewMode:  2,
  168.       guides: false,
  169.       autoCropArea: 1,
  170.       movable: false,
  171.       zoomable: false,
  172.       zoomOnTouch: false,
  173.       zoomOnWheel: false,
  174.       cropBoxResizable: false,
  175.       toggleDragModeOnDblclick: false,
  176.       preview: '.visualization-entry-img',
  177.       crop: function() {
  178.         $( '#image-cropdata' ).val( JSON.stringify( cropper.getData() ) );
  179.       },
  180.       ready: function() {
  181.         var containerData = cropper.getCanvasData();
  182.  
  183.         var imgWidth = containerData.width;
  184.         var imgHeight = containerData.height;
  185.  
  186.         var lowerDim = Math.min( imgWidth, imgHeight );
  187.         var lowerDimName = lowerDim === imgWidth? 'width' : 'height';
  188.  
  189.         cropper.setCropBoxData({
  190.           left: lowerDimName === 'width'? 0 : Math.abs( imgWidth - imgHeight ) / 2,
  191.           top: lowerDimName !== 'width'? 0 : Math.abs( imgWidth - imgHeight ) / 2,
  192.           width: lowerDim,
  193.           height: lowerDim,
  194.         });
  195.  
  196.         $( 'body' ).on( 'click', '#img-option-bw', function(){
  197.  
  198.           $( '.img-cropper-container' ).toggleClass( 'bw' );
  199.           const isToggled = $( '.img-cropper-container' ).hasClass('bw')
  200.           $( '#image-grayscale' ).val(isToggled ? 1 : 0)
  201.         });
  202.  
  203.         $( 'body' ).on( 'click', '#img-option-mirrorx', function(){
  204.  
  205.           var cropperData = cropper.getData();
  206.  
  207.           cropper.setData({
  208.             scaleX: cropperData.scaleX === 1? -1 : 1,
  209.           });
  210.  
  211.           $( '.vis-fotolia-img' ).toggleClass('mirrorx');
  212.         });
  213.  
  214.         $( 'body' ).on( 'click', '#img-option-mirrory', function(){
  215.           var cropperData = cropper.getData();
  216.  
  217.           cropper.setData({
  218.             scaleY: cropperData.scaleY === 1? -1 : 1,
  219.           });
  220.  
  221.           $( '.vis-fotolia-img' ).toggleClass('mirrory');
  222.         });
  223.  
  224.         $( 'body' ).on( 'click', '#img-option-rotate', function(){
  225.           cropper.rotate( 90 );
  226.           cropperUpdate(cropper);
  227.         });
  228.       },
  229.     };
  230.  
  231.     var image = document.getElementById( 'fotolia-img' );
  232.  
  233.     if ( image ) {
  234.       cropper = new Cropper(image, cropperOptions);
  235.  
  236.       var varations = JSON.parse( $( '.variations_form' ).attr( 'data-product_variations' ) );
  237.  
  238.       if ( varations.length === 1 ) {
  239.         var varations_name = varations[0].attributes.attribute_material;
  240.         $( '.variations .value select' ).hide();
  241.         $( '.variations .value' ).append( varations_name );
  242.       }
  243.     }
  244.  
  245.     // visualizations
  246.     $('.slider-enabled').slick({
  247.       autoplay: false,
  248.       arrows: true,
  249.       infinite: true,
  250.       speed: 500,
  251.       slidesToShow: 1,
  252.       slidesToScroll: 1,
  253.     });
  254.  
  255.  
  256.     $( 'body' ).on( 'keyup mouseup', '#single-product-img-dim-w', function() {
  257.  
  258.       if ( ! $( '.pattern-wrapper' ).length ) {
  259.         var containerData = cropper.getCanvasData();
  260.         var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;
  261.         var ratio = containerData.width / containerData.height;
  262.         var newWidth = $( this ).val();
  263.  
  264.         if( keepRatio ) {
  265.           $( '#single-product-img-dim-h' ).val( Math.round( newWidth / ratio ) );
  266.         }
  267.         cropperUpdate(cropper);
  268.       } else {
  269.         $( '#image-width' ).val( $( this ).val() );
  270.       }
  271.  
  272.       priceUpdate();
  273.     });
  274.  
  275.     $( 'body' ).on( 'keyup mouseup', '#single-product-img-dim-h', function() {
  276.  
  277.       if ( ! $( '.pattern-wrapper' ).length ) {
  278.         var containerData = cropper.getCanvasData();
  279.         var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;
  280.         var ratio = containerData.width / containerData.height;
  281.         var newHeight = $( this ).val();
  282.  
  283.         if( keepRatio ) {
  284.           $( '#single-product-img-dim-w' ).val( Math.round( newHeight * ratio ) );
  285.         }
  286.  
  287.         cropperUpdate(cropper);
  288.       } else {
  289.         $( '#image-height' ).val( $( this ).val() );
  290.       }
  291.  
  292.       priceUpdate();
  293.     });
  294.  
  295.     $( 'body' ).on( 'click', '#single-product-img-ratio', function(){
  296.       $( '#single-product-img-dim-w' ).trigger( 'keyup' );
  297.     });
  298.  
  299.     $(function() {
  300.  
  301.       // if ($(window).width() < 768) {
  302.       //   $('.toggle-nav').click(function() {
  303.       //       toggleNav();
  304.       //   });
  305.       //
  306.       //   $( '.mobile-nav-bg' ).on( 'click', function() {
  307.       //     toggleNav();
  308.       //   });
  309.       //
  310.       //   $( '.mobile-times' ).on( 'click', function() {
  311.       //     toggleNav();
  312.       //   });
  313.       // }
  314.  
  315.  
  316.       $( 'body' ).on( 'click', '.pattern-settings button', function() {
  317.         var patternGrid = parseInt( $( this ).data( 'pattern-grid' ) );
  318.         var fotoliaImgUrl = $( '#fotolia-img-url' ).val();
  319.         var patternHTML = '';
  320.  
  321.         for ( var i = 0; i < patternGrid; i++ ) {
  322.           patternHTML += '<img src="' + fotoliaImgUrl + '" class="pattern-item pattern-' + patternGrid + '">';
  323.         }
  324.  
  325.         $( '.pattern-wrapper' ).html( patternHTML );
  326.  
  327.         $( '#image-pattern_density' ).val( patternGrid );
  328.  
  329.         $(this).addClass( 'active' ).siblings().removeClass( 'active' );
  330.  
  331.         // vis
  332.  
  333.         var patternVisHTML = '';
  334.         var patternVisGrid = 4 * patternGrid;
  335.  
  336.         for ( var j = 0; j < patternVisGrid; j++ ) {
  337.           patternVisHTML += '<img src="' + fotoliaImgUrl + '" class="vis-tapety-fotolia-img">';
  338.         }
  339.  
  340.         $('.visualization-tapety-fotolia-img-wrapper').html( patternVisHTML ).attr('class', 'visualization-tapety-fotolia-img-wrapper density-' + patternGrid);
  341.       });
  342.     });
  343.  
  344.     $('.tpk-material-icons li').on('click', function() {
  345.       var $this = $(this);
  346.  
  347.       var newMaterial = $this.data('material');
  348.       var newDescription = $this.data('description');
  349.       var variationId = $this.data('variation-id');
  350.       var $select = $('#rodzaj-materialu');
  351.  
  352.       $('.tpk-selected-material').text(newDescription);
  353.       $this.addClass('selected').siblings().removeClass('selected');
  354.       $select.val(newMaterial);
  355.  
  356.       $( ".variation_id" ).val(variationId)
  357.  
  358.       priceUpdate();
  359.     });
  360.  
  361.   } else if ( document.body.classList.contains('page-template-template-top-level') ) {
  362.     Array.from(document.querySelectorAll('.collections-list a')).forEach(function(varation, i, array) {
  363.       varation.addEventListener('click', function(event) {
  364.         event.preventDefault();
  365.  
  366.         array.forEach(function(el) {
  367.           el.classList.remove('current');
  368.           el.setAttribute('aria-selected', false);
  369.         });
  370.  
  371.         event.target.classList.add('current');
  372.         event.target.setAttribute('aria-selected', true);
  373.  
  374.         var index = array.indexOf(event.target);
  375.  
  376.         Array.from(document.querySelectorAll('.collections-tabs-content > div')).forEach(function(el, i) {
  377.           el.setAttribute('aria-hidden', true);
  378.           el.style.display = 'none';
  379.  
  380.           if (i === index) {
  381.             el.setAttribute('aria-hidden', false);
  382.             el.style.display = 'block';
  383.           }
  384.         });
  385.       });
  386.     });
  387.  
  388.     $('.ptl-features li').on('click', function() {
  389.       var material = $(this).data('material');
  390.  
  391.       $(this).addClass('toggled').siblings().removeClass('toggled');
  392.  
  393.       $('.collection-items a').each(function(i, el) {
  394.         var href = $(el).attr('href');
  395.         var qindex = href.match('[?]');
  396.  
  397.         if (qindex) {
  398.           href = href.slice(0, qindex.index);
  399.         }
  400.  
  401.         $(el).attr('href', href + '?attribute_rodzaj-materialu=' + material);
  402.       });
  403.     });
  404.  
  405.     Array.from(document.querySelectorAll('.collection-tab')).forEach(function(collection) {
  406.  
  407.       Array.from(collection.querySelectorAll('.collection-pages-dots div')).forEach(function(dot, i, array) {
  408.         dot.addEventListener('click', function(event) {
  409.           event.preventDefault();
  410.  
  411.           array.forEach(function(el) {
  412.             el.classList.remove('active');
  413.             el.setAttribute('aria-selected', false);
  414.           });
  415.  
  416.           event.target.classList.add('active');
  417.           event.target.setAttribute('aria-selected', true);
  418.  
  419.           window.scrollTo(0, document.querySelector('.ptl-collections').offsetTop);
  420.  
  421.           var index = array.indexOf(event.target);
  422.  
  423.           Array.from(collection.querySelectorAll('.collection-items > div')).forEach(function(el, i) {
  424.             el.setAttribute('aria-hidden', true);
  425.             el.classList.remove('active');
  426.  
  427.             if (i === index) {
  428.               el.setAttribute('aria-hidden', false);
  429.               el.classList.add('active');
  430.             }
  431.           });
  432.         });
  433.       });
  434.     });
  435.   } else if ( document.body.classList.contains('page-template-template-own-photo') ) {
  436.  
  437.     $("#imgInp").change(function() {
  438.       readURL(this);
  439.     });
  440.  
  441.     $(document).one('click', '.btn-confirm-own-photo', prepareUpload);
  442.   }
  443. });
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×