app.js

/**
 * External Dependencies
 */
import 'jquery';
import 'slick-carousel';

import Cropper from 'cropperjs'

// function toggleNav() {
//   var $menu = $('.nav-primary, .mobile-nav-bg' );
//
//   if ( $menu.hasClass( 'show-nav' ) ) {
//     $menu.removeClass( 'show-nav' );
//   } else {
//     $menu.addClass( 'show-nav' );
//   }
// }


// /* ----- Mobile Navigation ----- */
const burger = document.querySelector('.toggle-nav i');
const nav = document.querySelector('.nav-primary');


function toggleNav() {
  burger.classList.toggle('fa-bars');
  burger.classList.toggle('fa-times');
  nav.classList.toggle('nav-active');
}

burger.addEventListener('click', function(e) {
  e.preventDefault();
  toggleNav();
});


/* ----- Mobile Navigation ----- */
// $('body').on('click', '.toggle-nav i', function () {
//   $(this).toggleClass('fa-bars');
//   $(this).toggleClass('fa-times');
//   $('.nav-primary').toggleClass('nav-active');
//   alert('test');
// });


function cropperUpdate(cropper) {

  var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;

  var containerData = cropper.getCanvasData();

  var imgWidth = containerData.width;
  var imgHeight = containerData.height;
  var ratio = imgWidth / imgHeight;
  var newWidth = $( '#single-product-img-dim-w' ).val();
  var newHeight = $( '#single-product-img-dim-h' ).val();
  var newRatio = newWidth / newHeight;


  if ( keepRatio ) {
    cropper.setCropBoxData({
      width: containerData.width,
      height: containerData.height,
    });
  } else {
    cropper.setCropBoxData({
      width: (newRatio < ratio? imgHeight * newRatio : imgWidth),
      height: (newRatio < ratio? imgHeight : imgWidth / newRatio),
    });
  }

  // update hidden post field: width, height
  $( '#image-width' ).val( newWidth );
  $( '#image-height' ).val( newHeight );

}

function priceUpdate() {
  var varations = JSON.parse( $( '.variations_form' ).attr( 'data-product_variations' ) );

  var selectedMaterialName = $('.tpk-material-icons li.selected').data().material

  var pricePerMeter = varations.find(el => el.attributes['attribute_rodzaj-materialu'] === selectedMaterialName).display_price;

  var photoPrice = $( '#fotolia-photo-price' ).val();
  var $price = $( '.tpk-single-price-span' );
  var widthVal = $( '#single-product-img-dim-w' ).val();
  var heightVal = $( '#single-product-img-dim-h' ).val();


  var area = Math.round( ( widthVal * heightVal ) / 100 ) / 100 ;

  $( '#image-area' ).val( area );

  var newPrice = Math.round( ( area * pricePerMeter + parseFloat( photoPrice ) ) * 100  ) / 100;

  $price.html( newPrice + ' zł' );
}

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var img = new Image();

      img.onload = function() {
        if ( img.width < 2000 || img.height < 2000 ) {
          $('.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.');
        } else {
          $('.file-error-placeholder').text('');
          $('.confirm-won-photo-wrapper').addClass('active');
        }

        $('#blah').attr('src', e.target.result);
      };

      img.src = reader.result;
    };

    reader.readAsDataURL(input.files[0]);
  }
}

function prepareUpload() {

  $(this).prop( 'disabled', true );

  var productName = document.getElementById('photo-upload-product-name').value || 'fototapety';
  var fileInputField = $('#imgInp');
  var file = fileInputField[0].files;
  var data = new FormData();
  var baseUrl = window.location.hostname === 'localhost'? 'http://localhost:3000/tapeko' : window.location.origin;

  data.append("action", "tpk_file_upload");

  $.each(file, function(key, value) {
    data.append("tpk_file_upload", value);
  });

  $.ajax({
    // eslint-disable-next-line no-undef
    url: tpk.ajax_url,
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data) {
      // console.log(baseUrl + '/produkt/' + productName + '/?wlasna_grafika=' + data.filename);
      window.location.replace( baseUrl + '/produkt/' + productName + '/?wlasna_grafika=' + data.filename );
    },
  });
}

$(document).ready(() => {

  if ( document.body.classList.contains('single-product') ) {

    var cropper;

    var cropperOptions = {
      checkCrossOrigin: false,
      dragMode: 'none',
      viewMode:  2,
      guides: false,
      autoCropArea: 1,
      movable: false,
      zoomable: false,
      zoomOnTouch: false,
      zoomOnWheel: false,
      cropBoxResizable: false,
      toggleDragModeOnDblclick: false,
      preview: '.visualization-entry-img',
      crop: function() {
        $( '#image-cropdata' ).val( JSON.stringify( cropper.getData() ) );
      },
      ready: function() {
        var containerData = cropper.getCanvasData();

        var imgWidth = containerData.width;
        var imgHeight = containerData.height;

        var lowerDim = Math.min( imgWidth, imgHeight );
        var lowerDimName = lowerDim === imgWidth? 'width' : 'height';

        cropper.setCropBoxData({
          left: lowerDimName === 'width'? 0 : Math.abs( imgWidth - imgHeight ) / 2,
          top: lowerDimName !== 'width'? 0 : Math.abs( imgWidth - imgHeight ) / 2,
          width: lowerDim,
          height: lowerDim,
        });

        $( 'body' ).on( 'click', '#img-option-bw', function(){

          $( '.img-cropper-container' ).toggleClass( 'bw' );
          const isToggled = $( '.img-cropper-container' ).hasClass('bw')
          $( '#image-grayscale' ).val(isToggled ? 1 : 0)
        });

        $( 'body' ).on( 'click', '#img-option-mirrorx', function(){

          var cropperData = cropper.getData();

          cropper.setData({
            scaleX: cropperData.scaleX === 1? -1 : 1,
          });

          $( '.vis-fotolia-img' ).toggleClass('mirrorx');
        });

        $( 'body' ).on( 'click', '#img-option-mirrory', function(){
          var cropperData = cropper.getData();

          cropper.setData({
            scaleY: cropperData.scaleY === 1? -1 : 1,
          });

          $( '.vis-fotolia-img' ).toggleClass('mirrory');
        });

        $( 'body' ).on( 'click', '#img-option-rotate', function(){
          cropper.rotate( 90 );
          cropperUpdate(cropper);
        });
      },
    };

    var image = document.getElementById( 'fotolia-img' );

    if ( image ) {
      cropper = new Cropper(image, cropperOptions);

      var varations = JSON.parse( $( '.variations_form' ).attr( 'data-product_variations' ) );

      if ( varations.length === 1 ) {
        var varations_name = varations[0].attributes.attribute_material;
        $( '.variations .value select' ).hide();
        $( '.variations .value' ).append( varations_name );
      }
    }

    // visualizations
    $('.slider-enabled').slick({
      autoplay: false,
      arrows: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    });


    $( 'body' ).on( 'keyup mouseup', '#single-product-img-dim-w', function() {

      if ( ! $( '.pattern-wrapper' ).length ) {
        var containerData = cropper.getCanvasData();
        var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;
        var ratio = containerData.width / containerData.height;
        var newWidth = $( this ).val();

        if( keepRatio ) {
          $( '#single-product-img-dim-h' ).val( Math.round( newWidth / ratio ) );
        }
        cropperUpdate(cropper);
      } else {
        $( '#image-width' ).val( $( this ).val() );
      }

      priceUpdate();
    });

    $( 'body' ).on( 'keyup mouseup', '#single-product-img-dim-h', function() {

      if ( ! $( '.pattern-wrapper' ).length ) {
        var containerData = cropper.getCanvasData();
        var keepRatio = $( '#single-product-img-ratio' )[ 0 ].checked;
        var ratio = containerData.width / containerData.height;
        var newHeight = $( this ).val();

        if( keepRatio ) {
          $( '#single-product-img-dim-w' ).val( Math.round( newHeight * ratio ) );
        }

        cropperUpdate(cropper);
      } else {
        $( '#image-height' ).val( $( this ).val() );
      }

      priceUpdate();
    });

    $( 'body' ).on( 'click', '#single-product-img-ratio', function(){
      $( '#single-product-img-dim-w' ).trigger( 'keyup' );
    });

    $(function() {

      // if ($(window).width() < 768) {
      //   $('.toggle-nav').click(function() {
      //       toggleNav();
      //   });
      //
      //   $( '.mobile-nav-bg' ).on( 'click', function() {
      //     toggleNav();
      //   });
      //
      //   $( '.mobile-times' ).on( 'click', function() {
      //     toggleNav();
      //   });
      // }


      $( 'body' ).on( 'click', '.pattern-settings button', function() {
        var patternGrid = parseInt( $( this ).data( 'pattern-grid' ) );
        var fotoliaImgUrl = $( '#fotolia-img-url' ).val();
        var patternHTML = '';

        for ( var i = 0; i < patternGrid; i++ ) {
          patternHTML += '<img src="' + fotoliaImgUrl + '" class="pattern-item pattern-' + patternGrid + '">';
        }

        $( '.pattern-wrapper' ).html( patternHTML );

        $( '#image-pattern_density' ).val( patternGrid );

        $(this).addClass( 'active' ).siblings().removeClass( 'active' );

        // vis

        var patternVisHTML = '';
        var patternVisGrid = 4 * patternGrid;

        for ( var j = 0; j < patternVisGrid; j++ ) {
          patternVisHTML += '<img src="' + fotoliaImgUrl + '" class="vis-tapety-fotolia-img">';
        }

        $('.visualization-tapety-fotolia-img-wrapper').html( patternVisHTML ).attr('class', 'visualization-tapety-fotolia-img-wrapper density-' + patternGrid);
      });
    });

    $('.tpk-material-icons li').on('click', function() {
      var $this = $(this);

      var newMaterial = $this.data('material');
      var newDescription = $this.data('description');
      var variationId = $this.data('variation-id');
      var $select = $('#rodzaj-materialu');

      $('.tpk-selected-material').text(newDescription);
      $this.addClass('selected').siblings().removeClass('selected');
      $select.val(newMaterial);

      $( ".variation_id" ).val(variationId)

      priceUpdate();
    });

  } else if ( document.body.classList.contains('page-template-template-top-level') ) {
    Array.from(document.querySelectorAll('.collections-list a')).forEach(function(varation, i, array) {
      varation.addEventListener('click', function(event) {
        event.preventDefault();

        array.forEach(function(el) {
          el.classList.remove('current');
          el.setAttribute('aria-selected', false);
        });

        event.target.classList.add('current');
        event.target.setAttribute('aria-selected', true);

        var index = array.indexOf(event.target);

        Array.from(document.querySelectorAll('.collections-tabs-content > div')).forEach(function(el, i) {
          el.setAttribute('aria-hidden', true);
          el.style.display = 'none';

          if (i === index) {
            el.setAttribute('aria-hidden', false);
            el.style.display = 'block';
          }
        });
      });
    });

    $('.ptl-features li').on('click', function() {
      var material = $(this).data('material');

      $(this).addClass('toggled').siblings().removeClass('toggled');

      $('.collection-items a').each(function(i, el) {
        var href = $(el).attr('href');
        var qindex = href.match('[?]');

        if (qindex) {
          href = href.slice(0, qindex.index);
        }

        $(el).attr('href', href + '?attribute_rodzaj-materialu=' + material);
      });
    });

    Array.from(document.querySelectorAll('.collection-tab')).forEach(function(collection) {

      Array.from(collection.querySelectorAll('.collection-pages-dots div')).forEach(function(dot, i, array) {
        dot.addEventListener('click', function(event) {
          event.preventDefault();

          array.forEach(function(el) {
            el.classList.remove('active');
            el.setAttribute('aria-selected', false);
          });

          event.target.classList.add('active');
          event.target.setAttribute('aria-selected', true);

          window.scrollTo(0, document.querySelector('.ptl-collections').offsetTop);

          var index = array.indexOf(event.target);

          Array.from(collection.querySelectorAll('.collection-items > div')).forEach(function(el, i) {
            el.setAttribute('aria-hidden', true);
            el.classList.remove('active');

            if (i === index) {
              el.setAttribute('aria-hidden', false);
              el.classList.add('active');
            }
          });
        });
      });
    });
  } else if ( document.body.classList.contains('page-template-template-own-photo') ) {

    $("#imgInp").change(function() {
      readURL(this);
    });

    $(document).one('click', '.btn-confirm-own-photo', prepareUpload);
  }
});