I want to check, if a given image file is valid (means displayable in a browser window and not getting a indicating, that the image cannot be displayed. This is the code I tried:
var bWindow;
bWindow = new electron.BrowserWindow({"show": false});
bWindow.loadURL("file://defect.png");
bWindow.webContents.on("did-fail-load", function (event, errCode, errDescription) {
console.log("error", errDescription);
});
bWindow.webContents.on("did-finish-load", function () {
console.log("success");
});
expecting to get "error". But I always get "success". How can I achieve what I want?
Try-
function checkImage(imageSrc, good, bad) {
var img = new Image();
img.onload = good;
img.onerror = bad;
img.src = imageSrc;
}
checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); } );
Related
I have a problem with an indexeddb query with index when running on IOS devices.
$.indexedDB(dbName).objectStore(tablename).index("INDICE").each(function(itemLocal) {
itemLocal.delete();
}, [VALORINDICE]).then(function() {
callback();
}, function() {
console.log("error");
});
The problem is if there is more than one record that matches the index, it does not eliminate them, it eliminates the first one and leaves. But if for example I put console.log (itemLocal) instead of itemLocal.delete() if it shows all those that match the index. Any suggestions of something that may be leaking?
I have tried with this code and I get the same error(code without api jquery)
var request = indexedDB.open(DATABASE_NAME);
request.onsuccess = function(event) {
var db = request.result;
var transaction = db.transaction(["TABLE"], "readwrite");
var table = transaction.objectStore("TABLE");
var index = table.index("INDEX");
var req = index.openCursor();
req.onsuccess = function() {
var cursor = req.result;
if (cursor) {
console.info(cursor.value);
cursor["delete"]();
cursor["continue"]();
}
};
req.onerror = function(e) {
console.error(e, req);
};
};
request.onerror = function(e) {
console.error(e, request);
};
I'm making a cross platform app with cordova.
I want to get an image from photo library and preview it on screen and upload it to server.
I could do the image is displayed on screen so far.
The problem is reader.onloadend is not fired and nothing happens.
$scope.getImage = function() {
var options = {
quality: 100,
sourceType: 0 // 0:Photo Library, 1=Camera, 2=Saved Album
};
var onSuccess = function(imageURI) {
var pic = document.getElementById('addImage');
pic.style.display = 'block';
pic.src = imageURI;
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("loaded");
};
reader.onerror = function(error) {
alert("error");
};
reader.readAsArrayBuffer(imageURI);
};
var onFail = function(message) {
alert("error");
};
navigator.camera.getPicture(onSuccess, onFail, options);
};
I've been struggling this problem for 2 days and found exactly same thread phonegap filereader onloadend doesn't work but couldn't solve yet.
Does anyone have any suggestion?
I appreciate any help.
I identified this as an issue with zone.js in Angular 2.
A workaround is to wrap FileReader object into it's own zone.
const WrappedFileReader = window.FileReader
window.FileReader = function OriginalFileReader(...args) {
WrappedFileReader.apply(this, args)
const originalInstance = this[Zone.__symbol__('originalInstance')] // eslint-disable-line
return originalInstance || this
}
I'm dealing with a huge javascript codebase that I'm trying to reorganize. I'm not really an expert and I just started studying good javascript coding practices. So, one thing I'm trying to do is to divide all the code in modules. In this particular case I'm trying to create a module that would help me to optimize video embeds. I would like to pass the module an id and receive some html code or an image out of it.
I'm not putting the whole code here, but it's enough for the example:
var videoIframe = (function($) {
'use strict';
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
})(jQuery);
In another module I assign it to two variables:
var video1 = videoIframe;
var video2 = videoIframe;
video1.getVideoThumbnail(123);
video2.getVideoThumbnail(456);
video1.test();
video2.test();
And, of course, I'm not getting what I expected. After the second getVideoThumbnail call, it always prints 456.
Doing some research I understood that I'm creating a singleton, a single instance, and I'm only changing values inside that instance. I think I need a constructor for my module, but I'm not sure how to create it in combination with the IIFE pattern. And is it the right approach?
And is it the right approach?
No. IIFEs are for things you want to do exactly once.
If you want to do something multiple times, then use a regular function and call it multiple times.
var videoIframe = (function($) {
function videoIframe() {
'use strict';
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
}
return videoIframe;
})(jQuery);
var video1 = videoIframe();
var video2 = videoIframe();
video1.getVideoThumbnail(123);
video2.getVideoThumbnail(456);
video1.test();
video2.test();
The problem is that you are initializing object when assigning to videoIframe variable:
var videoIframe = (function($) {
// ...
})(jQuery);
You can try with:
var videoIframe = (function($) {
// ...
});
var video1 = videoIframe(jQuery);
var video2 = videoIframe(jQuery);
Just keep videoIframe as a function that returns your IIFE, instead of reusing the singleton. I kept the IIFE so the id and the inner functions keep being encapsulated and hence, not reachable if they're not in the returned interface object. If you are planning to create alot of these, it might be more efficient to just use a constructor and a prototype, so the inner functions don't get recreated for every instance.
var videoIframe = function() {
'use strict';
return (function() {
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
}());
};
I did some minor modification. Hope it will be helpful
var videoIframe = (function($) {
'use strict';
var id;
function _setVideoId(videoId) {
id = videoId;
alert(id);
};
function _getVideoThumbnail(videoId) {
_setVideoId(videoId);
};
function _test(){
console.log(id)
}
function _getVideoEmbedCode() {
};
return {
test: _test,
getVideoThumbnail: _getVideoThumbnail
};
})(jQuery);
Now you can call like this
videoIframe.getVideoThumbnail(123);
videoIframe.getVideoThumbnail(561);
jsfiddle
I have a google map with a load of markers on it, each corresponding to a different post in the html. Each marker id is the same as each post id. Inside the map initialize = function() {... I have the following code (I'm using gon to pass info from rails to javascript):
for (m = 0; m < gon.markers.length; m++) {
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(gon.markers[m].lat, gon.markers[m].lng),
icon: image,
infowindow: gon.markers[m].infowindow,
id: gon.markers[m].id
});
google.maps.event.addListener(marker, 'mouseover', function() {
var image = $("#map-canvas").data('marker2');
this.setIcon(image);
// console.log("marker.id: " + marker.id);
// console.log("this.id" + this.id);
$('#' + marker.id).css('background', 'red');
});
google.maps.event.addListener(marker, 'mouseout', function() {
var image = $("#map-canvas").data('marker1');
this.setIcon(image);
$('#' + marker.id).css('background', 'white');
});
markers[markers.length] = marker;
}
Uncommenting the console.log lines demonstrates that it is the classic closure problem (marker.id always has the same value no matter which marker is hovered on).
My question is, how do I code it properly so it does as intended? I just can't get the code right now matter what I try. I've tried stuff like this but is just doesn't work:
marker.on('mouseover', noticeHover(marker.id));
function noticeHover(id) {
var image = $("#map-canvas").data('marker2');
this.setIcon(image);
$('#' + id).css('background', 'gainsboro');
}
Wrap the entire code that handles the marker-creation into a function and pass the items inside the loop as argument to this function:
for (m = 0; m < gon.markers.length; m++) {
//anonymous,self-executing function
(function(props){
var goo = google.maps,
marker = new goo.Marker({
map: map,
position: new goo.LatLng(props.lat,
props.lng),
icon: image,
infowindow: props.infowindow,
id: props.id
});
goo.event.addListener(marker, 'mouseover', function() {
var image = $("#map-canvas").data('marker2');
this.setIcon(image);
$('#' + marker.id).css('background', 'red');
});
goo.event.addListener(marker, 'mouseout', function() {
var image = $("#map-canvas").data('marker1');
this.setIcon(image);
$('#' + marker.id).css('background', 'white');
});
markers.push(marker);
}(
gon.markers[m]//pass current loop-item as argument
));
}
using jquery-ui-map
here is my code
$(document).ready(function() {$('#map_canvas').gmap({ 'center': new google.maps.LatLng(3.162456,21.09375), 'zoom': 2, 'streetViewControl': false, 'callback':
function() {
$('#map_canvas').gmap('loadHTML', 'microformat', '.importers', function(markerOpts, node, index) {
var clone = $(node);
// We have to add a callback in the addmarker method so we can access the marker just added
var name = $(node).find('.name');
var icon = $(node).find('.icon');
$('#map_canvas').gmap('addMarker', jQuery.extend({ 'title': name.html(), 'icon':new google.maps.MarkerImage(icon.html())}, markerOpts), function(map, marker) {
$(name).click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
$('.reveal').removeClass('reveal');
$(this).get(0).map.panTo($(this).get(0).position);
$(clone).toggleClass('reveal');
//need to wait till pan has complete before doing zoom!
});
});
}
});
});
at the moment when you click on a market it pans to its position
what i want to do is also zoomin, i've tried just adding
$(this).get(0).map.setZoom(5, true);
but this means the pan does not work it just jumps straight to the zoom level, how do i get it to fire the $(this).get(0).map.setZoom(5, true); after the panning is done?
thanks in advance
$('#map_canvas').gmap('addMarker').click(function() {
$(this).get(0).map.panTo($(this).get(0).position);
var self = $(this).get(0);
setTimeout(function() { self.map.setCenter(self.position); self.map.setZoom(15); }, 2000);
});
This would be the easy way of setting the zoom after the pan.