Develop Reference

Wait for the format change of an image

during a project I need to set up a cropper associated with a face detection. The face detection works well but the cropper modifies the format of the image with its object, the coordinates returned by the facedetector are false. Do you know how to apply the facedetector once the image has been modified with the cropper interface ?
var image = document.getElementById('img');
var cropper = new Cropper(image, {
/* aspectRatio: 9 / 16,*/
// autoCrop: true,
scalable: false,
cropBoxResizable: false,
guides: true,
dragMode: 'none',
preview: '.preview',
data:{
width: 250,
height: 325,
},
crop: function(e) {
$('#x').val(e.detail.x);
$('#y').val(e.detail.y);
$('#w').val(e.detail.width);
$('#h').val(e.detail.height);
},
});
$('#img').faceDetection({
complete: function (faces) {
console.log(faces)
initx = faces[0].x;
inity = faces[0].y;
cropper.data({x:120,y:init});
}
});

You probably need to first, get the coords, then initiate Cropper with those coordinates, like this:
const img = $('img');
img.faceDetection({
complete: function (faces) {
initCropper(faces[0]);
}
});
function initCropper(data) {
cropper = new Cropper(img[0], {
data
});
}
https://jsbin.com/keruzal/edit?js,output

addClass to jquery-asProgress.js when value is 100%

I'm using the library "jquery-asProgress.js" to produce 100% complete bar graphs.
Library can be found here: https://github.com/thecreation/jquery-asProgress
I'd like to have the bar change color when 100% is reached.
Current code is as follows:
<div class="progress" role="progressbar" data-goal="15" aria-valuemin="0" aria-valuemax="100">
<div class="progress__bar"><span class="progress__label"></span></div>
</div>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress__bar"><span class="progress__label"></span></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="../dist/jquery-asProgress.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
});
$('.progress').asProgress('start');
});
</script>
I tried adding this section to allow a class to be added if the value is 100 but it just breaks the JS
$('.progress').asProgress({
var percentage ="100";
$('progress__bar').addClass("wishlist_100");
});
EDIT:
I've altered using the suggestion by #Roamer-1888, the trouble is that they all get the class applied, not just the Value of 100.
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
}).on('asProgress::finish', function(e) {
$('.progress__bar').addClass('wishlist_100');
}).asProgress('start');
});

You need to establish a handler for the finish event;
jQuery(function($) {
$('.progress').asProgress({
'namespace': 'progress',
'bootstrap': false,
'min': 0,
'max': 100,
'goal': 100,
'speed': 10, // speed of 1/100
'easing': 'ease',
'labelCallback': function(n) {
return `${this.getPercentage(n)}%`;
}
}).on('asProgress::finish', function(e) {
// change colour here.
}).asProgress('start');
});

I managed to get this functional using a combination of solutions however it may not be the "right way" to do this.
The limitation present now is that the JS query breaksdown if the value supplied for "data-goal" is over 100, however I will have my backend developer supply a limiter on his end. We're developing using Classic ASP for those curious.
Many thanks to #Roamer-1888 for his help.
jQuery(function($) {
$('.progress').asProgress({
namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 10, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
var percentage = this.getPercentage(n);
return percentage + '%';
}
});
$('.progress').asProgress('start');
$(".progress[data-goal='100']").find('.progress__bar').addClass('wishlist_100');
});

Slow image loading using spritespin.js

Im trying to animate 360 degree spin on a page using lot of images (110) with the spritespin bundle, which means that they are all loaded so that means the page take some time to be viewable. I tried preloading only one frame but then when I spin the picture around some frames dont load correctly (i get white spaces instead), especially on the last frame (so most likely the last frame still did not load).
So this is my spritespin config:
<script>
var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', {
frame: [1, 110]
});
$(".spritespin").spritespin({
// path to the source images.
source: frames,
//width : 480, // width in pixels of the window/frame
//height : 327, // height in pixels of the window/frame
responsive: true,
animate: false,
preloadCount:1,
plugins: [
'360', // display plugin
'drag', // interaction plugin
]
});
</script>
You can also check how the website is slowly loading here:
https://dry-cove-88007.herokuapp.com

var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', {
frame: [1, 110]
});
//add img
let imgLoading = $('<span class="loadersprite"><img src="/images/loading.gif"></span>');
imgLoading.insertAfter('.spritespin');
and then in the oncomplete method
$(".spritespin").spritespin({
source: frames,
//width : 480, // width in pixels of the window/frame
//height : 327, // height in pixels of the window/frame
responsive: true,
animate: false,
preloadCount:1,
plugins: [
'360', // display plugin
'drag', // interaction plugin
],
onComplete:function(){
imgLoading.hide();
}
});

Freewall.js only loads after resize

I'm using freewall.js for displaying a grid on my frontpage. But it doesn't work correct. It only loads after resize. And also after the resize it calculates false heights and puts some objects on other places where they shouldn't be.
Here's my JS:
$(function(){
var wall = new Freewall(".freewall");
wall.reset({
selector: '.freewall-item',
animate: false,
cellW: 150,
cellH: 'auto',
gutterY: 15,
gutterX: 15,
onResize: function() {
wall.fitWidth();
}
});
wall.container.find('.event-intro-image').load(function() {
wall.fitWidth();
});
$(window).trigger('resize');
});
As you can see i also tried to use $(window).trigger('resize');, without sucess.

Raphael.FreeTransform rotate only

Is that possible with Raphael.FreeTransform to rotate an element, without scaling it?
When I initialize my element with scale: false, rotate: true I can only rotate it without scaling and that's OK. I wan't to achieve the same but when rotate start event occurs, ie. I want to change the scale dynamically from the callback function:
ft = paper.freeTransform(rect, {}, function(ft, events) {
if (events.indexOf("rotate start") !== -1) {
ft.setOpts({scale: false});
}
});
The element is initialized with the following properties:
ft.setOpts({
keepRatio: false,
draw: 'bbox',
snap: {
rotate: 45
},
keepRatio: ['axisX', 'axisY']
});
JSFiddle

I actually figured out how to do this. Just initialize FreeTransform with the following parameters:
ft.setOpts({
drag: ['center', 'self'],
rotate: ['axisY'],
scale: ['bboxCorners', 'bboxSides'],
keepRatio: ['bboxCorners'],
snap: {
rotate: 45
},
draw: 'bbox'
});
http://alias.io/raphael/free_transform/ helped a lot in figuring this out.