How to run a jQuery code after an angular function was loaded? - javascript

Basically I upload an image through angular with ng-file-upload and then I want to display it and initialize a jQuery plugin called Cropper.
How can I run the jQuery code from this one? The only way it works is when I have the $scope.loadedImage loaded before the upload.
HTML:
<img id="cropImage" ng-src="/{{loadedImage}}" />
Angular
$scope.upload = function (dataUrl) {
Upload.upload({
url: '/photocalc/upload/file',
method: 'POST',
file: dataUrl,
}).then(function (response) {
$timeout(function () {
$scope.result = response.status;
$scope.loadedImage = response.data;
jQuery('#cropImage').cropper({
viewMode: 0,
zoomable: false,
dragMode: 'crop',
guides: true,
highlight: true,
cropBoxMovable: true,
cropBoxResizable: true,
crop: function(e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
});
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
}, function (evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}

I would write an own directive which will observe the src attribute and init the cropper when the image loaded.
In my mind the image.onload will only fire once so you would have to remove and place a new image but try it without removing at first :)
edit: as Kevin B said this thought was wrong
angular.module( "$name$" ).directive( "imageCropper", [ function () {
return {
restrict: "A",
link : function ( $scope, $el, $attr ) {
$attr.$observe( "src", function ( src ) {
$el.on( "load", function () {
$timeout( function () {
$scope.result = response.status;
$scope.loadedImage = response.data;
jQuery( '#cropImage' ).cropper( {
viewMode : 0,
zoomable : false,
dragMode : 'crop',
guides : true,
highlight : true,
cropBoxMovable : true,
cropBoxResizable: true,
crop : function ( e ) {
// Output the result data for cropping image.
console.log( e.x );
console.log( e.y );
console.log( e.width );
console.log( e.height );
console.log( e.rotate );
console.log( e.scaleX );
console.log( e.scaleY );
}
} );
} );
} );
} );
}
}
} ] );

For this kind of situation you can use setTimeout and execute your jquery code after a little delay. Because it took a little bit(a very little) of time for angular to bind data in the view. So you need a little delay.
Also I've written a blog post where I've given a generic solution to call a callback function after ng-repeat finish binding all its data. You can try that as well. Check this post here. Let me know if you have any confusion. Thanks.

Related

Using a jQuery script in a .php file and adding a condition

How can I run the following woodmart theme jquery script based on a php condition?
The jQuery script here asks for age validation on the website and restricts the page if there is no validation.
I just want to use this code for some category products but I don't know how to add condition to jQuery script and I am bad at javascript.
(function($) {
woodmartThemeModule.ageVerify = function() {
if ( typeof Cookies === 'undefined' ) {
return;
}
if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
return;
}
$.magnificPopup.open({
items : {
src: '.wd-age-verify'
},
type : 'inline',
closeOnBgClick : false,
closeBtnInside : false,
showCloseBtn : false,
enableEscapeKey: false,
removalDelay : 500,
tClose : woodmart_settings.close,
tLoading : woodmart_settings.loading,
callbacks : {
beforeOpen: function() {
this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
}
}
});
$('.wd-age-verify-allowed').on('click', function(e) {
e.preventDefault();
Cookies.set('woodmart_age_verify', 'confirmed', {
expires: parseInt(woodmart_settings.age_verify_expires),
path : '/',
secure : woodmart_settings.cookie_secure_param
});
$.magnificPopup.close();
});
$('.wd-age-verify-forbidden').on('click', function(e) {
e.preventDefault();
$('.wd-age-verify').addClass('wd-forbidden');
});
};
$(document).ready(function() {
woodmartThemeModule.ageVerify();
});
})(jQuery);
UPDATE
The code here is working now, echo is no more, I also added 999 as priority and it works fine that way.
<?php
add_action( 'wp_footer', 'add_age_verify', 999 );
function add_age_verify() {
if( is_product_category( array( 4201, 4500, 4300 ) ) ) {
?>
<script type="text/javascript"> (function($) {
woodmartThemeModule.ageVerify = function() {
if ( typeof Cookies === 'undefined' ) {
return;
}
if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
return;
}
$.magnificPopup.open({
items : {
src: '.wd-age-verify'
},
type : 'inline',
closeOnBgClick : false,
closeBtnInside : false,
showCloseBtn : false,
enableEscapeKey: false,
removalDelay : 500,
tClose : woodmart_settings.close,
tLoading : woodmart_settings.loading,
callbacks : {
beforeOpen: function() {
this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
}
}
});
$('.wd-age-verify-allowed').on('click', function(e) {
e.preventDefault();
Cookies.set('woodmart_age_verify', 'confirmed', {
expires: parseInt(woodmart_settings.age_verify_expires),
path : '/',
secure : woodmart_settings.cookie_secure_param
});
$.magnificPopup.close();
});
$('.wd-age-verify-forbidden').on('click', function(e) {
e.preventDefault();
$('.wd-age-verify').addClass('wd-forbidden');
});
};
$(document).ready(function() {
woodmartThemeModule.ageVerify();
});
})(jQuery); </script>
<?php
}
}
You can send a JQuery ajax call to the php script, the php script then sends it back to the javascript file and then you can easily use the variable within javascript.
$.ajax({
url: 'path/to/your/php/file',
type: 'get',
success: (res) => {
//do things when you get the response
},
error: (err) => {
//do things when you get the error, error is optional
},
})
or you can even simplify it
$.get('url/to/your/script', (res) => {
//do things with the response
})
I copied the jQuery script into the child theme and then <script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script> to show the jQuery script, while doing this I added the conditions with PHP and now it works fine.
The final version of the code with PHP is like this.
<?php
add_action( 'wp_footer', 'add_age_verify_jquery', 999 );
function add_age_verify_jquery() {
if ( has_term(array('jacket', 'fridge', 'hats', 'magic wand'), 'product_cat')) {
?>
<script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script>
<?php
}
}
?>

How to add a process bar when you waiting for a response from the server

could someone help me with one problem? I want to add a process bar when you waiting for a response from the server (Django 3.x).
Step to reproduce:
On the page 'A' we have the form.
Enter data to form.
Submit POST request by clicking to button on the page 'A'.
Waiting for getting the result on the page 'A'.
Get the result on the page 'A'.
So, I want to add process bar after 4th and before 5th points on the page 'A'. When you will get the result on the page 'A' it should disappear.
Python 3.7
Django 3.x
You can use nprogress, it's a library used for progress bars. Use this inside the interceptor where you can config it for displaying only when request is in progress until finished.
There are lots of ways to do this. I think using jquery would be easier. Basically you just need to prevent submitting the page and do an Ajax request to server. something like
<script type='text/javascript'>
$(document).ready(function () {
$("form").submit(function (e) {
// prevent page loading
e.preventDefault(e);
$('#loadinAnimation').show();
// preapre formdata
$.ajax({
type: "yourRequestType",
url: "yourUrlEndpoint",
data: formdata,
success: function (data) {
$('#loadinAnimation').hide();
// do rest of the work with data
}
});
});
});
</script>
and show appropriate loading animation in your html part
<div id='loadinAnimation' style='display:none'>
<div>loading gif</div>
</div>
You can also do it using UiKit Library in Javascript on your Django Template Page.
Below code is when a file is Uploaded
In your template file (template.html)
<body>
..
<form>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
...
<div class="uk-alert-danger uk-margin-top uk-hidden" id="upload_error" uk-alert></div>
...
</form>
</head>
<script type="text/javascript">
$(document).ready(function(){
var bar = document.getElementById('js-progressbar');
UIkit.upload('.js-upload-list', {
url: '',
name : "customer-docs",
params :{
"csrfmiddlewaretoken":"{{csrf_token}}"
},
method : "POST",
concurrent:1,
allow:'*.(csv|xlsx)',
beforeSend: function (environment) {
console.log('beforeSend', arguments);
// The environment object can still be modified here.
// var {data, method, headers, xhr, responseType} = environment;
},
beforeAll: function (args,files) {
console.log('beforeAll', arguments);
},
load: function () {
console.log('load', arguments);
},
error: function (files) {
console.log("---------------")
},
complete: function () {
console.log('complete', arguments);
},
loadStart: function (e) {
console.log('loadStart', arguments);
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
},
progress: function (e) {
console.log('progress', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function (e) {
console.log('loadEnd', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function (data) {
console.log('completeAll', arguments);
console.log('completeAll', data);
let redirect_loc = ""
setTimeout(function () {
bar.setAttribute('hidden', 'hidden');
}, 1000);
// This is the response from your POST method of views.py
data.responseText = JSON.parse(data.responseText)
if(data.responseText.status == 201){
// swal is another library to show sweet alert pop ups
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Done: true
},
}).then((value) => {
switch (value) {
case "Done":
window.location.href = ""
break;
}
});
}
else if(data.responseText.status == 500){
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Ok: true
},
}).then((value) => {
switch (value) {
case "Ok":
window.location.href = ""
break;
}
});
}
}
});
// This block of code is to restrict user to upload only specific FILE formats (below example is for CSV & XLSX files)
(function() {
var _old_alert = window.alert;
window.alert = function(e) {
console.log(e)
if(e.includes("csv|xlsx") || e.includes("Invalid file type")) {
$("#upload_error").html("Invalid file format. Valid formats are CSV, XLSX").removeClass('uk-hidden')
}else if(e.includes("Internal Server Error")) {
$("#upload_error").html("Internal Server Error Kindly upload Documents again").removeClass('uk-hidden')
}
else {
_old_alert.apply(window,arguments);
$("#upload_error").addClass('uk-hidden').html("")
}
};
})();
});
</script>
On your views.py you can do your computation and once done, you can return a response like below
resp_json = {
"status" : 201,
"status_icon" : "success",
"url" : "/",
"message": message
}
return HttpResponse(json.dumps(resp_json))
For more info on SWAL (Sweet Alerts), visit https://sweetalert.js.org/guides/

How to display the scope in html from a custom directive in angular?

I am new to angular js.
How can I display the values of e.width and e.height in HTML ? Can I use the scope in here?
.directive( "cropping", [function ($scope) {
return {
restrict: "A",
link : function ( $scope, $el, $attr ) {
$attr.$observe( "src", function ( src ) {
jQuery( '#cropImage' ).cropper('destroy');
jQuery( '#cropImage' ).cropper( {
viewMode : 0,
zoomable : false,
preview: ".extra-preview",
dragMode : 'crop',
guides : true,
highlight : true,
cropBoxMovable : true,
cropBoxResizable: true,
crop : function ( e ) {
// Output the result data for cropping image.
console.log( e.width );
console.log( e.height );
}
} );
} );
}
}
} ] );
using below code you will get HTML height and width directly.
console.log( e[0].offsetHeight);
console.log( e[0].offsetWidth);

Ember multiple sendAction failing

Update below
Here's an interesting one. I have a template which contains a form component, and that form component's template also includes a component:
NewObj.hbs -> obj-form.js / obj-form.hbs -> file-uploader.js
The file uploader uses ember-uploader and it works great. I used its events to make sendAction calls to tell the obj-form controller that things are happening, IE pass on the upload progress percentage and indicate when the upload is complete.
If however I add one more sendAction, for some reason obj-form never receives the event for onComplete. No matter how I try it, it just never happens - no errors anywhere.
The file-uploader component is invoked in the obj-form template like so:
{{file-uploader
url="/uploads"
onProgress="fileUploadProgress"
onComplete="fileUploadComplete"
value=newProjectDownloadFile}}
file-uploader.js itself looks like this:
App.FileUploaderComponent = EmberUploader.FileField.extend({
url: '',
onProgress: 'onProgress',
onComplete: 'onComplete',
filesDidChange: function(files) {
var uploadUrl = this.get('url');
var that = this;
var uploader = EmberUploader.Uploader.create({
url: uploadUrl
});
uploader.on('progress', function (e) {
that.sendAction('onProgress', e);
});
uploader.on('didUpload', function (response) {
that.sendAction('onComplete', response);
});
if (!Ember.isEmpty(files)) {
uploader.upload(files[0]);
}
}
});
And obj-form.js has these methods in the actions hash:
fileUploadProgress: function (e) {
this.set('uploadPercentage', e.percent.toFixed(2));
},
fileUploadComplete: function (response) {
this.set('newProjectDownloadFileUrl', response.url);
this.set('newProjectDownloadFileName', response.fileName);
this.send('addDownload');
},
It works great. But I wanted to make a progress bar only appear while uploading and disappear when upload was complete. I added the property uploadInProgress: false to the obj-form controller, and this:
isUploading: function () {
return this.uploadInProgress;
}.property('this.uploadInProgress')
I use {{#if isUploading}} to show/hide the progress bar.
I added:
this.set('uploadInProgress', false);
to the obj-form fileUploadComplete() method, and added this new method:
fileUploadStart: function () {
this.set('uploadInProgress', true);
},
I modified the file-uploader component call to this:
{{file-uploader
url="/connect/projectDownloads/file"
onStart="fileUploadStart"
onProgress="fileUploadProgress"
onComplete="fileUploadComplete"
value=newProjectDownloadFile}}
And changed file-uploader.js to look like this:
App.FileUploaderComponent = EmberUploader.FileField.extend({
url: '',
onStart: 'onStart',
onProgress: 'onProgress',
onComplete: 'onComplete',
filesDidChange: function(files) {
var uploadUrl = this.get('url');
var that = this;
var uploader = EmberUploader.Uploader.create({
url: uploadUrl
});
uploader.on('progress', function (e) {
that.sendAction('onProgress', e);
});
uploader.on('didUpload', function (response) {
that.sendAction('onComplete', response);
});
if (!Ember.isEmpty(files)) {
that.sendAction('onStart', true);
uploader.upload(files[0]);
}
}
});
I've tried putting the that.sendAction('onStart', true); bit in all kinds of places in file-uploader.js but if that line exists, then the obj-form controller never receives the onComplete action. I have absolutely no idea why. I take that line out, it works again.
UPDATE ok I've found something new. It's not the sendAction that breaks it, it's this line in obj-form.js:
this.set('uploadInProgress', true);
For some reason, when I set that to true, it all falls apart. I'm wondering if I'm doing something wrong with the way I'm trying to make that work?
Could it be something to do with didInsertElement? I noticed that's getting triggered when I set uploadInProgress to true - because that property is being used to determine whether the progress bar appears on the page or not. So maybe I'm using didInsertElement incorrectly? Here's my didInsertElement and willDestroyElement:
didInsertElement: function() {
// console.log('didInsertElement');
this.set( 'postType', this.get( 'content' ).get( 'postType' ) );
this.set( 'projectDownloads', this.get( 'content' ).get( 'projectDownloads' ) );
this.set( 'projectLinks', this.get( 'content' ).get( 'projectLinks' ) );
this.set( 'published', this.get( 'content' ).get( 'published' ) );
Ember.addObserver( this.get( 'content' ), 'postType', this, this.postTypeDidChange );
Ember.addObserver( this.get( 'content' ), 'projectDownloads', this, this.projectDownloadsDidChange );
Ember.addObserver( this.get( 'content' ), 'projectLinks', this, this.projectLinksDidChange );
Ember.addObserver( this.get( 'content' ), 'published', this, this.publishedDidChange );
},
willDestroyElement: function() {
console.log('willDestroyElement');
Ember.removeObserver( this.get( 'content' ), 'postType', this.postTypeDidChange );
Ember.removeObserver( this.get( 'content' ), 'projectDownloads', this.projectDownloadsDidChange );
Ember.removeObserver( this.get( 'content' ), 'projectLinks', this.projectLinksDidChange );
Ember.removeObserver( this.get( 'content' ), 'published', this.publishedDidChange );
}
I've tried modifying isUploading to the alias style you recommended, but that hasn't helped anything. The idea is when that gets set to true, it makes the progress bar appear and the fileupload form disappear. Then when it gets set to false the reverse happens. I'm open to other ways to make this happen in Ember, I just can't figure out what I'm doing that's breaking things.
Not the answer yet, but won't fit in comment correctly... this isn't necessary in the dependency chain, even easier is to change this to an alias.
From
isUploading: function () {
return this.uploadInProgress;
}.property('this.uploadInProgress')
To
isUploading: Ember.computed.alias('uploadInProgress')

Integrating Dropzone.js with angular

I am working from some code that integrated DropboxJS as an angular directive. I cannot get it to work. I've taken his fiddle and updated it with current CDN links. Any idea why the directive code never fires? For ex if I drop an image it will go to /upload instead of /desiredupload and the event doesn't fire.
Fiddle: http://jsfiddle.net/cyberwombat/3tDqZ//1/
angular.module('dropZone', [])
.directive('dropZone', function() {
return function(scope, element, attrs) {
element.dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
}
});
angular.module('dropZone', [])
.controller('dropZoneCtrl', function() {});
Additionally and unfortunately I cannot replicate in my fiddle - on my local code I get this error: Object [object Object] has no method 'dropzone'
I am loading dropzone, then angular (tried the the other way) then my app, directives, etc.. so I don't think order is an issue. Dropzone successfully detects the form and makes it DnD but my directive element doesn't seem to have dropz
This is how I do it:
.directive('dropZone', function () {
return {
scope: {
action: "#",
autoProcess: "=?",
callBack: "&?",
dataMax: "=?",
mimetypes: "=?",
message: "#?",
},
link: function (scope, element, attrs) {
console.log("Creating dropzone");
// Autoprocess the form
if (scope.autoProcess != null && scope.autoProcess == "false") {
scope.autoProcess = false;
} else {
scope.autoProcess = true;
}
// Max file size
if (scope.dataMax == null) {
scope.dataMax = Dropzone.prototype.defaultOptions.maxFilesize;
} else {
scope.dataMax = parseInt(scope.dataMax);
}
// Message for the uploading
if (scope.message == null) {
scope.message = Dropzone.prototype.defaultOptions.dictDefaultMessage;
}
element.dropzone({
url: scope.action,
maxFilesize: scope.dataMax,
paramName: "file",
acceptedFiles: scope.mimetypes,
maxThumbnailFilesize: scope.dataMax,
dictDefaultMessage: scope.message,
autoProcessQueue: scope.autoProcess,
success: function (file, response) {
if (scope.callBack != null) {
scope.callBack({response: response});
}
}
});
}
}
})
An example usage of this would be:
<div action="/file/upload/" class="dropzone" drop-zone
call-back="myCallBackMethod(response)"
data-max="5"
auto-process="false"
message="Drop file here or click to select"
mimetypes=".doc,.docx,.pages,.pdf,.odt"
id="file-dropzone">
</div>
Any scope variable that has a ? next to it is optional. The only required field is action, which would be the URL to send post to.
$(element).dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
Wrap element with $(...). In AngularJS it says all DOM elements are JQuery object but I think you might be using a older version of AngularJS.

Categories