Angular 6 - Ng-fullcalendar issue - angular6

The following is my runtime enviroment:
Angular CLI version 6.
ng-fullcalendar version 1.6.2.
fullcalendar vesion 3.6.1
HTML code:
<div *ngIf="calendarOptions">
<ng-fullcalendar
#ucCalendar
[options]="calendarOptions"
(select)="select($event.detail)"
(eventClick)="eventClick($event.detail)"
(eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)"
[(eventsModel)]="events"
(viewRender)="loadEvents($event.detail)"
></ng-fullcalendar>
</div>
Component code:
this.events = resp.data.items.map(item => ({
start: moment(item.startTime).toDate(),
end: moment(item.toTime).toDate(),
item
}));
When I try to load events, it shows this error:
core.js:1673 ERROR TypeError: Cannot read property 'footprint' of undefined
at HTMLDivElement.<anonymous> (fullcalendar.js:5773)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at constructor.renderFgSegEls (fullcalendar.js:5768)
at constructor.renderFgRanges (fullcalendar.js:5668)
at constructor.render (fullcalendar.js:5652)
at members.constructor.executeEventRender (fullcalendar.js:6559)
at constructor.executeEventRender (fullcalendar.js:17772)
at Object.func (fullcalendar.js:8294)
at constructor.runTask (fullcalendar.js:2667)

This might not be the solution but it is a workaround. I had the same error as yours but I'm running FullCalendar v3.10.1.
The issue might not be in your code but in the jQuery version you are running. FullCalendar broke when I went from jQuery v3.2.1 to v3.5.1.
I reverted back to jQuery v3.4.1 and it's working again.

For those that for whatever reason need jQuery#^3.5.0, you can use similar method described in the jQuery issue describing 3.5 incompatible with FullCalendar 3. The code fixing this problem can be found at the top of this jsfiddle:
var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi;
jQuery.htmlPrefilter = function( html ) {
return html.replace( rxhtmlTag, "<$1></$2>" );
};
But please be aware that this functionality was removed from jQuery as a security fix and by using this, you're exposing yourself to that attack vector again.

Related

Processing error after upgrade to Version 6.0

With the following function I am trying to load the model into the earlier initialized viewer.
viewer.loadModel("https://developer.api.autodesk.com/modelderivative/v2/designdata/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM/manifest/urn%3Aadsk.viewing%3Afs.file%3AdXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM%2Foutput%2FRai_04.3ds.svf")
Unfortuneately I get the following error for the function:
viewer3D.js:74844 Error while processing SVF: {"url":"https://developer.api.autodesk.com/modelderivative/v2/designdata/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM/manifest/urn%253Aadsk.viewing%253Afs.file%253AdXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM%252Foutput%252FRai_04.3ds.svf?domain=http%3A%2F%2Flocalhost%3A3002","httpStatus":400,"httpStatusText":"Bad Request","data":{"url":"https://developer.api.autodesk.com/modelderivative/v2/designdata/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM/manifest/urn%253Aadsk.viewing%253Afs.file%253AdXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6aW1wbGVuaWFfaW1kL1JhaV8wNC4zZHM%252Foutput%252FRai_04.3ds.svf?domain=http%3A%2F%2Flocalhost%3A3002"}}
This is the way I initialize my viewer:
function onInitialized() { //console.log("viewer inizialized");
var config = Autodesk.Viewing.createViewerConfig();
config.extensions.push('Autodesk.Viewing.ZoomWindow');
config.startOnInitialize = true;
config.theme = 'light-theme';
viewerApp = new Autodesk.Viewing.ViewingApplication('main-viewer');
viewerApp.registerViewer(viewerApp.k3D,Autodesk.Viewing.Private.GuiViewer3D ,config);
viewer = viewerApp.getViewer(config);
viewer.start();
If I use the version 4.1 of the viewer, the model can be loaded this way. Changing to 6.0 the above described error appears.
I would really appreaciate a hint to a solution of my problem!
Thanks a lot in advance!
Cheers,
Felix
With v6 and onwards, call wrapper method Viewer3D.load insteadof .loadModel so that the resource requests made to Forge endpoints can be formed properly:
viewer.load('https://developer.api.autodesk.com/derivativeservice/v2/derivatives/urn:adsk.viewing:fs.file:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c2IyMzMvd2Fycmlvci4zZHM/output/warrior.3ds.svf');
or simply:
viewer.start(svfUrl)
Code sample: https://jsfiddle.net/dukedhx/9qncbuLt

Refused to get unsafe header "x-parse-job-status-id" - AngularJs and Parse Server

After months of working without any trouble, now when trying to make login, this error appears. The code shown is simplified, when it arrives at "Parse.User.logIn" is when the error happens. There are some similar questions here, but all of them are related to CORS, and I don´t know how or where to make something like the line below:
Access-Control-Expose-Headers: x-parse-job-status-id
CODE:
$scope.signin = function () {
var email = $scope.login.email;
var pass = $scope.login.pass;
Parse.User.logIn(email, pass, {
success: function (user) {
Stuff after successful login
}
});
},
error: function (user, error) {
stuff after unsuccessful login
}
});
}
}
Any help would be appreciated.
Fix can be found here. We tried it and worked like a charm 👍
https://github.com/parse-community/Parse-SDK-JS/issues/622
Edit:
Solution (can be found in link)
"I believe you're using the unpkg version:
https://unpkg.com/parse/dist/parse.js, and the minified production version is at https://unpkg.com/parse/dist/parse.min.js.
Which is automatically pointing to the latest release, you should use:
https://unpkg.com/parse#1.11.1/dist/parse.js
As you are now pointing to the SDK v2.0 which contains that issue."

Programmatically loading a ES6 module with Traceur in web page

I have been using Traceur to develop some projects in ES6. In my HTML page, I include local Traceur sources:
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
and if I have a module in the HTML afterwards like:
<script type="module" src="foo.js"></script>
Then Traceur loads in that module, compiles it and everything works great.
I now want to programmatically add an ES6 module to the page from within another ES6 module (reasons are somewhat complicated). Here was my first attempt:
var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
console.log('Inside the module now!');
`;
document.body.appendChild(module);
Unfortunately this doesn't work as Traceur does not monitor the page for every script tag added, I guess.
How can I get Traceur to compile and execute the script? I guess I need to invoke something on either 'traceur' or '$traceurRuntime' but I haven't found a good online source of documentation for that.
You can load other modules using ES6 import statements or TraceurLoader API for dynamic dependencies.
Example from Traceur Documentation
function getLoader() {
var LoaderHooks = traceur.runtime.LoaderHooks;
var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
function(mod) {
console.log('DONE');
},
function(error) {
console.error(error);
}
);
Also, System.js loader seems to be supported as well
window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');
Dynamic module loading is a (not-yet-standardized) feature of System:
System.import('./repl-module.js').catch(function(ex) {
console.error('Internal Error ', ex.stack || ex);
});
To make this work you need to npm test then include BrowserSystem
<script src="../bin/BrowserSystem.js"></script>
You might also like to look into https://github.com/systemjs/systemjs as it has great support for browser loading.
BTW the System object may eventually be standardize (perhaps under a different name) in the WHATWG: http://whatwg.github.io/loader/#system-loader-instance

window.onerror not working in chrome

I am trying to add an onerror event to my website.
window.onerror = function() {
alert("an error");
}
But all I receive is:
notThere();
ReferenceError: notThere is not defined
What am I missing?
Browser: Chrome 26.0.1410.64 m
Steps to reproduce:
add the code to the console.
add notThere() to the console
window.onerror is not triggered when the console directly generates an error. It can be triggered via setTimeout though, e.g., setTimeout(function() { notThere(); }, 0);
Possible duplicate: Chrome: Will an error in code invoked from the dev console trigger window.onerror?
The window.onerror works in Chrome (see jsfiddle - http://jsfiddle.net/PWSDF/), but apparently not in the console - which makes some sense.
Some other reasons that you may not be able to handle errors in window.onerror (apart from the mentioned ones):
Another library sets window.onerror after you.
If you are using Angular, errors wont pass through window.onerror. You have to handle them using this factory:
.factory('$exceptionHandler', function() {
return function errorCatcherHandler(exception, cause) {
console.error(exception);
if (window.OnClientError) window.OnClientError(exception);
};
})
See:
https://docs.angularjs.org/api/ng/service/$exceptionHandler
http://bahmutov.calepin.co/catch-all-errors-in-angular-app.html

Ace editor - Uncaught TypeError: Cannot read property 'clientX' of undefined

Im using ace editor and mootools.
I have just updated my mootools to version 1.4.5 and when i click/drag on the editor i get js exception:
Uncaught TypeError: Cannot read property 'clientX' of undefined
Please help... Thanks
Instead of removing the bind method always I think I found a workaround. It seems that only a couple of Mootools builds have this issue. So I use this code to fix them:
if (this.MooTools.build=='ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0') {
delete Function.prototype.bind;
Function.implement({
/*<!ES5-bind>*/
bind: function(that){
var self = this,
args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
F = function(){};
var bound = function(){
var context = that, length = arguments.length;
if (this instanceof bound){
F.prototype = self.prototype;
context = new F;
}
var result = (!args && !length)
? self.call(context)
: self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
return context == that ? result : context;
};
return bound;
},
/*</!ES5-bind>*/
});
}
The benefit is that I can fix it for each build separately. The drawback is clearly to have mootools code shipped with my own code. But currently I see no other option and since I code for Joomla I'm pretty sure that there is a limited number of mootools versions in use.
i solve it for my situation!
i've delete some lines from mootools.js:
1) bind:function(e){var a=this,b=arguments.length>1?Array.slice(arguments,1):null,d=function(){};var c=function(){var g=e,h=arguments.length;if(this instanceof c){d.prototype=a.prototype;
g=new d;}var f=(!b&&!h)?a.call(g):a.apply(g,b&&h?b.concat(Array.slice(arguments)):b||arguments);return g==e?f:g;};return c;}
2) delete Function.prototype.bind;
(i don't need mouse binding in mootools so it's revelation for me!)
This is a very strange error. During debugging I didn't get the error. But as soon as I removed the breakpoint it appeared again. I finally solved the issue by adding the latest version of mootools 1.4.5 to joomla. The error was immediately gone.