social-media-studio/script.js

var imageMode = 0;
var overlay = "";

var hasTouchScreen = false;
var useShare = false;
var redirect = false;

if ("maxTouchPoints" in navigator) {
    hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
    hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
    var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
    if (mQ && mQ.media === "(pointer:coarse)") {
        hasTouchScreen = !!mQ.matches;
    } else if ('orientation' in window) {
        hasTouchScreen = true; // deprecated, but good fallback
    } else {
        // Only as a last resort, fall back to user agent sniffing
        var UA = navigator.userAgent;
        hasTouchScreen = (
            /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
            /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
        );
    }
}

// function iOS() {
//  return [
//    'iPad Simulator',
//    'iPhone Simulator',
//    'iPod Simulator',
//    'iPad',
//    'iPhone',
//    'iPod'
//    ].includes(navigator.platform)
//  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
// }

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;

$(function() {

  if (hasTouchScreen && navigator.share && !isAndroid) {
    useShare = true;
    $("#useIcon").addClass("fas fa-share fa-fw");
  } else if (!navigator.share && isAndroid) {
    redirect = true;
    $('#uploadfile h1').text('Open deze pagina in Chrome via de drie puntjes bovenin je scherm.');
    $('#uploadfile h1').css('background', '#EB1951aa');
    $('#uploadfile p').hide();
  } else {
    useShare = false;
    $("#useIcon").addClass("fas fa-file-download fa-fw");
  }

  overlay = $("#thumbs .profiel:first").attr("src");

  $("#foto_input").change(function() {
    readURL(this);
    // console.log(this);
  });

  let isSwitching = false;

  $("#switch").on("mouseup", function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (isSwitching) {
      return;
    }

    isSwitching = true;
    
    if (imageMode == 0) {
      imageMode = 1;
      $('.cr-boundary').css("border-radius", "0");
      $('.switch').addClass("right");
      $('#modePost').removeClass("inactive");
      $('#modeProfiel').addClass("inactive");
      $(".thumb.profiel").fadeOut(250, function() {
        $(".thumb.post").fadeIn(250);
      });
      var newSrc = $("#thumbs .post:first").attr("src");
      var $overlay = $('#overlay');

      $overlay.fadeOut(250, function() {
        $overlay.attr('src', newSrc).fadeIn(250);
      });

    } else {
      imageMode = 0;
      $('.cr-boundary').css("border-radius", "50%");
      $('.switch').removeClass("right");
      $('.switch').removeClass("inactive");
      $('#modeProfiel').removeClass("inactive");
      $('#modePost').addClass("inactive");
      $(".thumb.post").fadeOut(250, function() {
        $(".thumb.profiel").fadeIn(250);
      });

      var newSrc = $("#thumbs .profiel:first").attr("src");
      var $overlay = $('#overlay');
      
      $overlay.fadeOut(250, function() {
        $overlay.attr('src', newSrc).fadeIn(250);
      });
    }

    setTimeout(() => {
      isSwitching = false;
    }, 500);
    
  });

  $('.thumb').on('click', function(e) {
    $('#overlay').attr('src',$(this).attr('src'));
    overlay = $(this).attr('src');
  });




  $("html").on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    // $('#uploadfile').addClass('hilight');
  });

    $("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });

    $('#uploadfile').on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $('#uploadfile').addClass('hilight');
    });

    $('#uploadfile').on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
       $('#uploadfile').addClass('hilight');
    });

    $('#uploadfile').on('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();
       $('#uploadfile').removeClass('hilight');
    });

    $('#uploadfile').on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        var file = e.originalEvent.dataTransfer;
        var fd = new FormData();

        fd.append('file', file[0]);
        readURL(file);
    });

    if (!redirect) {
      $("#uploadfile").click(function(){
        $("#foto_input").click();
      });
    }


});

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: 'image/png' });
}

function readURL(input) {
  if (input.files && input.files[0]) {
    if (input.files.length != 1) { $('#uploadfile').removeClass('hilight'); return }
    
    var resize;
    
    var imageType = /image.*/;
    if (input.files[0].type.match(imageType)) {


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

        $('#profielfoto').attr('src', e.target.result);
        resize = new Croppie($('#profielfoto')[0], {
          viewport: { 
            width: 365, 
            height: 365,
            type: 'circle'
          },
          boundary: { 
            width: 365, 
            height: 365 
          },
          enableExif: true,
          enableOrientation: true,
          initialZoom: .5,
          update: function (data) {
            
            resize.result({ type: 'base64', size: { width: 100, height: 100 }, circle: false }).then(function(dataImg) {
              // console.log(dataImg);
              $('.thumb').css('background-image', 'url(' + dataImg + ')');
            });
          }
        });

        resize.bind(e.target.result)
        .then(() => {
          resize.setZoom(0);
        });

        $( ".cr-boundary" ).prepend( '<img id="overlay" src="'+$("#thumbs .profiel:first").attr("src")+'" class="cr-viewport cr-vp-circle" style="width:365px;height:365px;" />' );
        
        $('#cropper').show();
        $('#uploadfile').hide();

        $('#use').on('click', function(e) {
          e.preventDefault();

          $("#useIcon").hide();
          $("#spin").css("display", "inline-block");

          tagOverlay = overlay.match(/\/([^/]+)\.png/)[1];

          resize.result({ type: 'base64', size: { width: 1080, height: 1080 }, circle: false }).then(function(dataImg) {
            
            var c=document.getElementById("dummyCanvas");
            var context=c.getContext("2d");
            var achtergrond = new Image();
            var pvdd_overlay = new Image();
            
            achtergrond.src = dataImg;
            achtergrond.onload = function() {
              context.drawImage(achtergrond, 0, 0, 1080, 1080);
              pvdd_overlay.src = overlay;
              pvdd_overlay.onload = function() {
                context.drawImage(pvdd_overlay, 0, 0, 1080, 1080);
                var img = c.toDataURL("image/png");

                var t = new Date;
                var timestamp = t.getDate()+"-"+(t.getMonth()+1)+"-"+t.getFullYear()+
                " om " +t.getHours()+"."+t.getMinutes()+"."+t.getSeconds();
                var a = document.createElement("a");
                a.href = img;
                a.download = "Profielfoto "+timestamp+".png";

                if (useShare) {
                  var blob = dataURItoBlob(img);
                  navigator.share({
                    files: [new File([blob], "Profielfoto "+timestamp+".png", {type: blob.type})],
                  });
                } else {
                  a.click();
                }

                $("#useIcon").css("display", "inline-block");
                $("#spin").hide();

              }
            };
          })
        });

        $('#back').on('click', function(e) {
          location.reload(true);
        });

        $('#help').on('click', function(e) {
          // $('#helpoverlay').fadeIn('fast');
          $('#helpbg').fadeIn('fast');
        });

        $('#helpoverlay, #helpbg').on('click', function(e) {
          // $('#helpoverlay').fadeOut('fast');
          $('#helpbg').fadeOut('fast');
        });

      }

   } else {
    $('#uploadfile').removeClass('hilight');
   }

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