Unique Variables in Instances of Plugins

Plugin builders
5

Thanks for the interest Vini! I can give you the whole thing. It’s pretty simple and there is a lot of junk in here (I’m removing css variables for defining css in JS so all the document.body.style.setProperty lines are being replaced):

Here’s the initialise function:

function(instance, context) {

  	modImgWidth = 510;
  	modImgHeight = 634;

  var newDiv = $('<div class="innermatte"><img id=imagetarget class="imagetarget"/></div>');
	instance.canvas.append(newDiv);
  console.log("instance: " + instance.class);
  console.log("instance.canvas: " + instance.canvas.class);
  
  //instance.canvas.css("background", "#ff00f0"); // for testing, makes it easier to find the bubble canvas


    imagetarget = $(".imagetarget").croppie({
 //    imagetarget = $("instance.canvas").croppie({
        viewport: { width: modImgWidth, height: modImgHeight },
        boundary: { width: modImgWidth, height: modImgHeight },
      	showZoomer: false,
      	enableResize: true,
      	enableOrientation: true,
      	enforceBoundary: true,
      
      	update: function (data) {

          	modImgWidth = $(".cr-viewport").width();
          	modImgHeight = $(".cr-viewport").height();

          	document.body.style.setProperty("--mat-width", modImgWidth + "px");
          	document.body.style.setProperty("--mat-height", modImgHeight + "px");
          
          	matHorzMargins = (instance.canvas.width() - modImgWidth) / 2;
  		  	document.body.style.setProperty("--mat-horz-margins", matHorzMargins + "px");
          	matVertMargins = (instance.canvas.height() - modImgHeight) / 2;
  		  	document.body.style.setProperty("--mat-vert-margins", matVertMargins + "px");

          	
          	imgPoints = data.points;
          	imgZoom = data.zoom;
          
            console.log("zoom: " + data.zoom);
          	console.log("points.topLeftX: " + data.points[0]);
          	console.log("points.topLeftY: " + data.points[1]);
          	console.log("points.bottomRightX: " + data.points[2]);
          	console.log("points.bottomRightY: " + data.points[3]);
          	console.log(".cr-viewport.width: " + $(".cr-viewport").width());
          	console.log(".cr-viewport.height: " + $(".cr-viewport").height());
          	console.log("instance.canvas.width: " + instance.canvas.width());
            console.log("modImgWidth: " + modImgWidth + "px");
          	console.log("modImgHeight: " + modImgHeight + "px");
          	console.log("matHorzMargins: " + matHorzMargins + "px");
          	console.log("matVertMargins: " + matVertMargins + "px");
           
      	}

    }); 
  
        $(".innermatte").on("click", function() {
    console.log("innermatte clicked");
    instance.triggerEvent('clicked');

  });
  
}

And the update function:

function(instance, properties, context) {
    
instance.canvas.css("background", properties.defBGColor); // for testing, makes it easier to find the bubble canvas



      	modImgWidth = 510;
      	modImgHeight = 634;
 
// Load the image to get it's dimensions
/*	origImg = new Image(); 
 	origImg.src = properties.mat_image_url;
  	origImg.onload = function() {
      
      	modImgWidth = origImg.width / 2;
      	modImgHeight = origImg.height / 2; */

/*        widthDivider = origImg.width / properties.bubble.width; // get ratio of image width to container
    	heightDivider = heightDivider / properties.bubble.height; // get ratio of image height to container*/

  		matHorzMargins = ((properties.bubble.width - modImgWidth) / 2);
 		matVertMargins = ((properties.bubble.width - modImgHeight) / 2);
  
   //   imagetarget.croppie('destroy'); 
  
  imagetarget.croppie('bind', {
        orientation: 1,
    	zoom: imgZoom,
		points: imgPoints,
    	url: properties.mat_image_url
      });
  
  	console.log("mat_image_url: " + properties.mat_image_url);
  	console.log("mat_color: " + properties.mat_color);
  	console.log("cut_width: " + properties.cut_width);
  	console.log("mat_shadow: " + properties.mat_shadow);
  	console.log("aspect_ratio: " + properties.aspect_ratio);
  	console.log("bubble.width: " + properties.bubble.width);
  	console.log("bubble.height: " + properties.bubble.height);
  	console.log("bubble.top: " + properties.bubble.top);
  	console.log("bubble.left: " + properties.bubble.left);
    console.log("matHorzMargins: " + matHorzMargins);
  	console.log("matVertMargins: " + matVertMargins);
   // console.log("widthDivider: " + widthDivider);
  	//console.log("heightDivider: " + heightDivider);
     // console.log("origImg.width: " + origImg.width);
  	//	console.log("origImg.height: " + origImg.height);
    console.log("modImgWidth: " + modImgWidth);
  	console.log("modImgHeight: " + modImgHeight);
  

  $(".innermatte").css("background-color", properties.mat_color);
  $(".innermatte").css("border-width", properties.cut_width + "px");
  
//  	document.body.style.setProperty("--box-shadow", properties.mat_shadow);
//  	document.body.style.setProperty("--mat-color", properties.mat_color);
//	document.body.style.setProperty("--cut-width", properties.cut_width + "px");
    document.body.style.setProperty("--mat-horz-margins", matHorzMargins + "px");
  	document.body.style.setProperty("--mat-vert-margins", matVertMargins + "px");
    document.body.style.setProperty("--mat-width", modImgWidth + "px");
    document.body.style.setProperty("--mat-height", modImgHeight + "px");
  $(".innermatte").css("border-bottom-color", properties.border_bottom_color);
  $(".innermatte").css("border-left-color", properties.border_left_color);
  $(".innermatte").css("border-top-color", properties.border_top_color);
  $(".innermatte").css("borrder-right-color", properties.border_right_color);

  
 if (properties.mat_shadow) {
//	document.body.style.setProperty("--box-shadow", "8px 10px 25px 5px rgba(0, 0, 0, 0.5) inset" );
   $(".innermatte").css("box-shadow", "8px 10px 25px 5px rgba(0, 0, 0, 0.5) inset");
} else {
//	document.body.style.setProperty("--box-shadow", "0px 0px 0px 0px rgba(0, 0, 0, 0.5) inset" );
  $(".innermatte").css("box-shadow", "0px 0px 0px 0px rgba(0, 0, 0, 0.5) inset");
}; 

  
// end of update function 
}
1 Like