Develop Reference

JS IE11 - re-write localStorage is null

I use the script from user4822973 in Post localStorage object is undefined in IE.
But I still have the problem in the IE-11, when I re-write the storage, all data is null. With Firefox and Opera there is no problem.
// Check 'local storage'
!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
if (typeof(Storage) != "undefined") {
var myObj = JSON.parse(localStorage.getItem("multipleData"));
alert(myObj);
if (!myObj || 0 === myObj.length){
//default values
document.getElementById("reason").value = reason;
document.getElementById("mailTo").value = mailTo;
document.getElementById("mailCc").value = mailCc;
document.getElementById("workStart").value = workStart;
document.getElementById("workEnd").value = workEnd;
}
else{
var myObjReason = myObj["reason"];
var myObjMailTo = myObj["mailTo"];
var myObjMailCc = myObj["mailCc"];
var myObjWorkStart = myObj["workStart"];
var myObjWorkEnd = myObj["workEnd"];
...
//Write to storage
function saveLocalStorage(){
var multipleData = {"reason" : document.getElementById("reason").value , "mailTo" : document.getElementById("mailTo").value , "mailCc" : document.getElementById("mailCc").value , "workStart" : document.getElementById("workStart").value, "workEnd" : document.getElementById("workEnd").value};
localStorage.setItem("multipleData", JSON.stringify(multipleData));
}

Unable to open a url in chrome and sfari

I am using openModal() javascript function ,its working fine in ie ,but in chrome and safari its appending base url with url i am sending,resulting in an error? Please Help!!
function OpenModalReplyDialog(url, SubscriberId) {
//Todo: Cleanup the unnecessary code.
var returnValue = new ModalReturnValue(null, null, null);
var retVal = null;
var urlredirect = url + '/UC_5_0_0.aspx?SubscriberId=' + SubscriberId;
returnValue = openModal(urlredirect, 350, 500);
return true;
}
This is code for openModal()
function openModal(url, width, height, args, options)
{
var returnValue = new ModalReturnValue(null, null, null);
var dialogArguments = self;
var defaultWindowOptions = 'center:yes;status:no;unadorned:yes;help:no;resizable:yes;';
if(args !=null)
{
dialogArguments = args;
}
var windowOptions = 'dialogHeight:' + height + 'px;dialogWidth:' + width + 'px;' + (options != null ? options : defaultWindowOptions);
returnValue = window.showModalDialog(url, dialogArguments, windowOptions);
if (returnValue != null)
{
if (returnValue.Command == "TimeOut") {
if (pageSessionTimeoutInfo != null) {
if (pageSessionTimeoutInfo.IsModal) {
closeModal(returnValue);
return;
}
}
redirectToUrl(returnValue.Url);
}
else
return returnValue;
}
else
return returnValue;
}

window.showModalDialog() is deprecated, it’s removed by Chrome & Firefox etc but works in IE. Please consider other options like Jquery dialog or bootstrap dialog or HTML5 dialog element. window.showModalDialog polyfill using a dialog element, click here for details.

Linkedin Integration with Meteor

I am working on Meteor trying to implement linkedin oauth. I have a button, when user clicks it, a window appears asking the user to allow access, when the user allows, the profile info of the user has to be displayed.
My Approach.
When button is clicked, I am injecting this
"window.open('https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=XXXXXXX&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2F_oauth%2Flinkedin%3Fclose&scope=&state=XXXXX', 'newwindow', 'width=400, height=250');"
which opens a new window that asks access permission. And when user allows access by giving username and password, the window goes off instantly. I know that linkedin directs it to our app giving authorization code and state in the url. And I need to use this authorization code to get the access token. But I am not being able to catch this authorization code.
Please let me know how can I achieve this functionality and if my approach is correct.

Use the accounts-linkedin package to do this: https://atmospherejs.com/pauli/accounts-linkedin
You can add it with:
meteor add accounts-linkedin
Alternatively, look at the source code for that package if you really want to know how it's done.

This is a reply for all those who voted down the question. I was finally able to do it.
Session.set('authCode',null);
Session.set('profile',null);
Template.home.events({
'click .viewLinkedinProfileButton' :function(event, template){
var redirect_uri = encodeURIComponent(Meteor.absoluteUrl('userAuthComplete'));
var client_id='XXXXXXX';
var state = 'myRandomString';
var scope = ['r_basicprofile'];
var url = "https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id="+client_id+"&redirect_uri="+redirect_uri+"&state="+state+"&scope=r_basicprofile";
showPopup(url,function(err){
if(err){
console.log("Cancelled "+err);
}
else{
Meteor.call('getAccessToken',Session.get('authCode'),function(err,res){
if(res){
console.log(res);
Session.set('profile',res);
}
});
Session.set('authCode',null);
}
})
}
});
function showPopup(url, callback, dimensions) {
// default dimensions that worked well for facebook and google
var popup = openCenteredPopup(
url,
(dimensions && dimensions.width) || 650,
(dimensions && dimensions.height) || 331
);
var checkPopupOpen = setInterval(function() {
try {
var popupClosed = popup.closed || popup.closed === undefined;
} catch (e) {
return;
}
if (popupClosed) {
var url = popup.document.URL;
if(url.toLowerCase().indexOf('code') !== -1){
var array1 = url.split('code=');
var array2 =array1[1].split('&');
Session.set('authCode',array2[0]);
clearInterval(checkPopupOpen);
callback();
}
else{
clearInterval(checkPopupOpen);
}
}
}, 50);
}
function openCenteredPopup(url, width, height) {
var screenX = typeof window.screenX !== 'undefined'
? window.screenX : window.screenLeft;
var screenY = typeof window.screenY !== 'undefined'
? window.screenY : window.screenTop;
var outerWidth = typeof window.outerWidth !== 'undefined'
? window.outerWidth : document.body.clientWidth;
var outerHeight = typeof window.outerHeight !== 'undefined'
? window.outerHeight : (document.body.clientHeight - 22);
var left = screenX + (outerWidth - width) / 2;
var top = screenY + (outerHeight - height) / 2;
var features = ('width=' + width + ',height=' + height +
',left=' + left + ',top=' + top + ',scrollbars=yes');
var newwindow = window.open(url, 'Login', features);
if (newwindow.focus)
newwindow.focus();
return newwindow;
}
Template.home.helpers({
profile:function(){
return Session.get('profile');
}
});

Error preloading images in IE8

I am using this code to preload image and reference them later by id.
It's working in most browsers and on ipad, but IE8 generates this error:
'Unable to get property 'target' of undefined null reference'
This is my code:
var images = [{id:"kids", url:"assets/driekids.png"}, {id:"title",url:"assets/gametitle.png"}];
var assets = [];
var fnCallback = fn;
var loaded = 0;
this.startLoading = function() {
var t = this;
for(var i = 0;i<images.length;i++){
var r = new Image();
r.src = images[i].url;
r.name = images[i].id;
r.onload = function(){t.checkLoaded();};
}
}
this.checkLoaded = function(e) {
this.assets[e.target.name] = e.target;
loaded++;
if(loaded == images.length) fnCallback();
}
My question: is this way of image preloading, by using new Image(), possible on IE8?

In IE you get the event object like this:
window.event
so you will have to make modifications to your code:
this.startLoading = function() {
var t = this;
for(var i = 0;i<images.length;i++){
var r = new Image();
r.src = images[i].url;
r.name = images[i].id;
r.onload = t.checkLoaded; // you dont want an anonymous function here
}
}
this.checkLoaded = function(e) {
// get the event object for both IE and other browsers
var event = e || window.event;
var target = e.target || event.srcElement ;
this.assets[target.name] = target;
loaded++;
if(loaded == images.length) fnCallback();
}

Monkey patching CKEditor to embed YouTube videos

I'm trying to configure CKEditor so that it could embed YouTube videos directly... I saw there's a proposed patch but I want to keep the original CKEditor distribution as it is, so I was wondering if it's possible to "monkey patch" CKEditor at runtime so that if the user types a YouTube URL inside the Flash dialog, the URL gets transformed to allow embedding.
I've tried this:
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
var f = dialogDefinition.onOk;
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
f(ev);
}
}
}
but it won't work, since inside f the code uses this, and my "patch" changes it...

If you attach the onOK to another property of dialogDefinition, this will be correct within it (I think).
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
dialogDefinition.oldOnOk = dialogDefinition.onOk; //change here
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
dialogDefinition.oldOnOk(ev); //and change here
}
}
}
Or use Function.apply:
CKEDITOR.on('dialogDefinition', function(ev){
if (dialogName == 'flash'){
var infotab = dialogDefinition.getContents('info');
var f = dialogDefinition.onOk;
dialogDefinition.onOk = function(ev) {
var cur = this.getContentElement('info', 'src').getValue();
var newurl = cur.replace('youtube.com/watch?v=', 'youtube.com/v/');
if (cur != newurl) {
this.getContentElement('info', 'src').setValue(newurl);
};
f.apply(this, ev); //change here
}
}
}