Skip to content

Commit

Permalink
Replace bind object with separate parameters
Browse files Browse the repository at this point in the history 
Also add some more parameter types.
  • Loading branch information
@theodorejb
theodorejb committed Nov 7, 2023
1 parent cdd76a5 commit d24a3d8
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 52 deletions.
67 changes: 43 additions & 24 deletions croppie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,11 @@ function fix(v, decimalPoints) {
return parseFloat(v).toFixed(decimalPoints || 0);
}

/**
* @param {string} src
* @returns {Promise<HTMLImageElement>}
*/
function loadImage(src) {
if (!src) { throw 'Source image missing'; }

var img = new Image();

return new Promise(function (resolve, reject) {
Expand All @@ -122,6 +124,9 @@ function loadImage(src) {
});
}

/**
* @param {HTMLImageElement} img
*/
function naturalImageDimensions(img) {
return {
width: img.naturalWidth,
Expand Down Expand Up @@ -160,12 +165,22 @@ export class Croppie {
this.#create();
}

bind(options) {
var points = options.points || [];
/**
* Bind an image from an src string. Returns a Promise which resolves when the image has been loaded and state is initialized.
* @param {string} src
* @param {number | null} zoom
* @param {[number, number, number, number] | []} points
* @returns {Promise<void>}
*/
bind(src, zoom = null, points = []) {
if (!src) {
throw new Error('src cannot be empty');
}

this.data.bound = false;
this.data.boundZoom = typeof(options.zoom) === 'undefined' ? null : options.zoom;
this.data.boundZoom = zoom;

return loadImage(options.url).then((img) => {
return loadImage(src).then((img) => {
this.#replaceImage(img);

if (!points.length) {
Expand All @@ -190,10 +205,7 @@ export class Croppie {
this.data.points = [x0, y0, x1, y1];
}

this.data.points = points.map(function (p) {
return parseFloat(p);
});

this.data.points = points.map((p) => parseFloat(p));
this.#updatePropertiesFromImage();
this.#triggerUpdate();
});
Expand Down Expand Up @@ -272,8 +284,11 @@ export class Croppie {
this.#triggerUpdate();
}

setZoom(v) {
this.#setZoomerVal(v);
/**
* @param {number} value
*/
setZoom(value) {
this.#setZoomerVal(value);
dispatchChange(this.elements.zoomer);
}

Expand Down Expand Up @@ -304,10 +319,12 @@ export class Croppie {
var bw = this.options.boundary.width;
var bh = this.options.boundary.height;

css(boundary, {
width: (bw + (isNaN(bw) ? '' : 'px')),
height: (bh + (isNaN(bh) ? '' : 'px'))
});
if (bw) {
css(boundary, {width: `${bw}px`});
}
if (bh) {
css(boundary, {height: `${bh}px`});
}

viewport.setAttribute('tabindex', 0);
viewport.classList.add('cr-viewport');
Expand Down Expand Up @@ -534,14 +551,10 @@ export class Croppie {
DOWN_ARROW = 40;

if (ev.shiftKey && (ev.keyCode === UP_ARROW || ev.keyCode === DOWN_ARROW)) {
var zoom;
if (ev.keyCode === UP_ARROW) {
zoom = parseFloat(this.elements.zoomer.value) + parseFloat(this.elements.zoomer.step)
}
else {
zoom = parseFloat(this.elements.zoomer.value) - parseFloat(this.elements.zoomer.step)
}
this.setZoom(zoom);
let zoomVal = parseFloat(this.elements.zoomer.value);
let stepVal = parseFloat(this.elements.zoomer.step);
stepVal = (ev.keyCode === UP_ARROW) ? stepVal : (stepVal * -1);
this.setZoom(zoomVal + stepVal);
} else if (this.options.enableKeyMovement && (ev.keyCode >= 37 && ev.keyCode <= 40)) {
ev.preventDefault();
var movement = parseKeyDown(ev.keyCode);
Expand Down Expand Up @@ -789,6 +802,9 @@ export class Croppie {
}
}

/**
* @param {number} val
*/
#setZoomerVal(val) {
if (this.options.enableZoom) {
var z = this.elements.zoomer;
Expand Down Expand Up @@ -849,6 +865,9 @@ export class Croppie {
this.#triggerUpdate();
}

/**
* @param {HTMLImageElement} img
*/
#replaceImage(img) {
if (this.elements.img.parentNode) {
Array.prototype.forEach.call(this.elements.img.classList, function(c) { img.classList.add(c); });
Expand Down
33 changes: 19 additions & 14 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function demoMain () {
},
});

cropper1.bind({ url: "demo/demo-1.jpg" });
cropper1.bind("demo/demo-1.jpg");

mc.addEventListener('update', function (ev) {
console.log('main update', ev);
Expand Down Expand Up @@ -54,10 +54,7 @@ function demoBasic() {
},
});

basic.bind({
url: 'demo/cat.jpg',
points: [77,469,280,739]
});
basic.bind('demo/cat.jpg', null, [77, 469, 280, 739]);

var basicResult = document.querySelector('.basic-result');
basicResult.addEventListener('click', function () {
Expand All @@ -78,10 +75,7 @@ function demoResizer() {
enableResize: true,
mouseWheelZoom: 'ctrl'
});
resize.bind({
url: 'demo/demo-2.jpg',
zoom: 0
});
resize.bind('demo/demo-2.jpg', 0);
vEl.addEventListener('update', function (ev) {
console.log('resize update', ev);
});
Expand Down Expand Up @@ -115,9 +109,7 @@ function demoUpload() {
reader.onload = function (e) {
document.querySelector('.upload-demo').classList.add('ready');

uploadCrop.bind({
url: e.target.result
}).then(function () {
uploadCrop.bind(e.target.result).then(function () {
console.log('uploadCrop bind complete');
});
}
Expand All @@ -143,6 +135,8 @@ function demoUpload() {

function demoHidden() {
var hidEl = document.getElementById('hidden-demo');
var hiddenResult = document.querySelector('.hidden-result');

var hiddenCrop = new Croppie(hidEl, {
viewport: {
width: 175,
Expand All @@ -154,12 +148,23 @@ function demoHidden() {
height: 200
}
});
hiddenCrop.bind({
url: 'demo/demo-3.jpg'

hiddenCrop.bind('demo/demo-3.jpg');

hiddenResult.addEventListener('click', function (ev) {
hiddenCrop.toCanvas(300).then(function (canvas) {
popupResult({
src: canvas.toDataURL("image/webp", 1),
viewport: hiddenCrop.options.viewport.type,
});
});
});

toggle(hiddenResult);

document.querySelector('.toggle-hidden').addEventListener('click', function () {
toggle(hidEl);
toggle(hiddenResult);
hiddenCrop.refresh();
});
}
Expand Down
29 changes: 15 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h2>
<pre><code class="language-html">&lt;div class="demo"&gt;&lt;/div&gt;
&lt;script&gt;
var c = new Croppie(document.querySelector('.demo'));
c.bind({ url: 'demo/demo-1.jpg' });
c.bind('demo/demo-1.jpg');
&lt;/script&gt;
</code></pre>
</div>
Expand Down Expand Up @@ -148,14 +148,20 @@ <h3>Methods</h3>
<p>Get the crop points.</p>
</li>
<li id="bind">
<strong class="focus">bind({ url, points, zoom })</strong><em>Promise</em>
<p>Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
<strong class="focus">bind(src, zoom, points)</strong><em>Promise</em>
<p>Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
<span class="default">Parameters</span>
<br />
<ul class="parameter-list">
<li><code class="language-javascript">url</code> URL to image</li>
<li><code class="language-javascript">src</code> URL to image</li>
<li><code class="language-javascript">zoom</code> Apply zoom after image has been bound</li>
<li>
<span class="default">Default:</span><code class="language-javascript">null</code>
</li>
<li><code class="language-javascript">points</code> Array of points that translate into <code class="language-javascript">[topLeftX, topLeftY, bottomRightX, bottomRightY]</code></li>
<li><code class="language-javascript">zoom</code> Apply zoom after image has been bound </li>
<li>
<span class="default">Default:</span><code class="language-javascript">[]</code>
</li>
</ul>
</li>
<li id="destroy">
Expand Down Expand Up @@ -248,10 +254,7 @@ <h2>Demos</h2>
height: 200
}
});
basic.bind({
url: 'demo/cat.jpg',
points: [77,469,280,739]
});
basic.bind('demo/cat.jpg', null, [77, 469, 280, 739]);
//on button click
basic.toCanvas(300).then((canvas) => {
let src = canvas.toDataURL();
Expand Down Expand Up @@ -281,10 +284,7 @@ <h2>Demos</h2>
enableResize: true,
mouseWheelZoom: 'ctrl'
});
resize.bind({
url: 'demo/demo-2.jpg',
zoom: 0,
});
resize.bind('demo/demo-2.jpg', 0);
//on button click
basic.toBlob(300, "image/jpeg", 0.9).then((blob) => {
// do something with cropped blob
Expand Down Expand Up @@ -345,6 +345,7 @@ <h2>Demos</h2>
<pre><code class="language-javascript">hiddenCrop.refresh();</code></pre>
<div class="actions">
<button class="toggle-hidden">Toggle Croppie</button>
<button class="hidden-result">Result</button>
</div>
</div>
<div class="col-1-2">
Expand All @@ -371,7 +372,7 @@ <h3>Visibility and Binding</h3>
<pre><code class="language-javascript">var cropEl = document.getElementById('my-croppie');
var myCroppie = new Croppie(cropEl, opts);
document.getElementById('my-modal').addEventListener('shown.bs.modal', function () {
myCroppie.bind(bindOpts);
myCroppie.bind(url);
});</code></pre>
<p>If you are having issues getting the correct crop result, and your croppie instance is shown inside of a modal, try taking your croppie out of the modal and see if your issues persist. If they don't, then make sure that your bind method is called after the modal is done animating.</p>
</article>
Expand Down

0 comments on commit d24a3d8

Please sign in to comment.