Develop Reference

Angular 8, how to reference a component property inside a function of a javascript library

I am using Semantic UI in angular and I have the following code:
componentProperty: boolean = false;
ngOnInit() {
(<any>$('.ui.dropdown')).dropdown();
(<any>$('.ui.input')).popup({
on: 'focus',
onShow: (e) => {
return this.componentProperty;
}
});
}
the function popup is defined by semantic UI. Semantic UI relies on Jquery.
Here componentProperty is undefined.

This about scope. Try:
ngOnInit() {
const me = this;
(<any>$('.ui.dropdown')).dropdown();
(<any>$('.ui.input')).popup({
on: 'focus',
onShow: (e) => {
return me.componentProperty;
}
});
}

Have you tryed to define the onShow function in the components scope?
ngOnInit() {
const onShow = () => this.componentProperty;
(<any>$('.ui.input')).popup({
on: 'focus',
onShow
});
}
And if that still won't work:
const doOnShow = () => this.componentProperty;
(<any>$('.ui.input')).popup({
on: 'focus',
onShow: doOnShow.bind(this)
});

Overriding JS function

this is an original function from Framework I'm working with. It's a Python-based framework with a little bit Javascript. and as I do not really know much about JS I want to ask a question.
How can I override init: function (parent, options) part.
in that function, I need to change just one thing.
line 57
link
display_order: ORDER.ASC to ORDER.DESC
so i need somehow to call this functions in super and change arguments
var Thread = Widget.extend({
className: 'o_mail_thread',
events: {
"click a": "on_click_redirect",
"click img": "on_click_redirect",
"click strong": "on_click_redirect",
"click .o_thread_show_more": "on_click_show_more",
"click .o_thread_message_needaction": function (event) {
var message_id = $(event.currentTarget).data('message-id');
this.trigger("mark_as_read", message_id);
},
"click .o_thread_message_star": function (event) {
var message_id = $(event.currentTarget).data('message-id');
this.trigger("toggle_star_status", message_id);
},
"click .o_thread_message_reply": function (event) {
this.selected_id = $(event.currentTarget).data('message-id');
this.$('.o_thread_message').removeClass('o_thread_selected_message');
this.$('.o_thread_message[data-message-id=' + this.selected_id + ']')
.addClass('o_thread_selected_message');
this.trigger('select_message', this.selected_id);
event.stopPropagation();
},
"click .oe_mail_expand": function (event) {
event.preventDefault();
var $message = $(event.currentTarget).parents('.o_thread_message');
$message.addClass('o_message_expanded');
this.expanded_msg_ids.push($message.data('message-id'));
},
"click .o_thread_message": function (event) {
$(event.currentTarget).toggleClass('o_thread_selected_message');
},
"click": function () {
if (this.selected_id) {
this.unselect();
this.trigger('unselect_message');
}
},
},
init: function (parent, options) {
this._super.apply(this, arguments);
this.options = _.defaults(options || {}, {
display_order: ORDER.ASC,
display_needactions: true,
display_stars: true,
display_document_link: true,
display_avatar: true,
shorten_messages: true,
squash_close_messages: true,
display_reply_icon: false,
});
this.expanded_msg_ids = [];
this.selected_id = null;
},

If you're unable or not interested in changing the source code, you can pass
{display_order: ORDER.DESC} as the options parameter when creating this class.

How to use segment.io's analytics.js in a knockout custom bindings

I am using knockout to make a custom binding for analytics.track, but it seems to be having trouble. It seems if the analytics.track is nested in more than 2 functions the track call fails silently. It doesn't hit the callback and it doesn't report in segments debugger. I have provided 2 examples demonstrating the problem here:
Without Closure (works):
function sendTrack(event, props) {
console.log("Enter sendTrack");
analytics.track('Signed Up', {
plan: 'Enterprise'
}, {}, function () {
console.log('track callback logged');
});
}
ko.bindingHandlers.segmentTrack = {
init: function (element, valueAccessor) {
console.log("Init");
var value = ko.unwrap(valueAccessor());
ko.applyBindingsToNode(element, { click: sendTrack });
}
};
ko.applyBindings({});
With Closure (doesn't work):
(function(ko, $, analytics){
'use strict';
function sendTrack(event, props) {
console.log("Enter sendTrack");
analytics.track('Signed Up', {
plan: 'Enterprise'
}, {}, function () {
console.log('track callback logged');
});
}
ko.bindingHandlers.segmentTrack = {
init: function (element, valueAccessor) {
console.log("Init");
var value = ko.unwrap(valueAccessor());
ko.applyBindingsToNode(element, { click: sendTrack });
}
};
ko.applyBindings({});
})(window.ko, window.jQuery, window.analytics);
Edit1: Also note this works with if I move the analytics.track to init:
(function(ko, $, analytics){
'use strict';
ko.bindingHandlers.segmentTrack = {
init: function (element, valueAccessor) {
console.log("Init");
analytics.track('Signed Up', {
plan: 'Enterprise'
}, {}, function () {
console.log('track callback logged');
});
}
};
ko.applyBindings({});
})(window.ko, window.jQuery, window.analytics);
Please advise

This is very likely because of the order things load / are initialized on the window object. Because the iife executes immediately, the analytics variable will be set to whatever window.analytics is the moment the iife is encountered by the browser. In the first case, window.analytics will be resolved when the code is run.
Put differently: the closure captures window.analytics in a scoped analytics variable at the time the iife executes.
Here's a demo showing the problem.
Without closure:
function sendTrack() {
console.log("Tracking...");
analytics.track("stuff");
}
ko.bindingHandlers.segmentTrack = {
init: function(element) {
console.log("Init");
ko.applyBindingsToNode(element, { click: sendTrack });
}
}
ko.applyBindings({ });
// Simulate loading analytics now:
window.analytics = { track: function(txt) { console.log("Tracking " + txt); } };
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div data-bind="segmentTrack: true">CLICK ME</div>
vs with closure:
(function(ko, analytics) {
function sendTrack() {
console.log("Tracking...");
analytics.track("stuff");
}
ko.bindingHandlers.segmentTrack = {
init: function(element) {
console.log("Init");
ko.applyBindingsToNode(element, { click: sendTrack });
}
}
ko.applyBindings({});
})(window.ko, window.analytics); // window.analytics isn't quite okay yet!
// Simulate loading analytics now:
window.analytics = { track: function(txt) { console.log("Tracking " + txt); } };
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div data-bind="segmentTrack: true">CLICK ME</div>
True, in my examples the second scenario throws an error whereas you mention in the question nothing happens, but then again the question doesn't contain an actual repro so it's hard to tell where that difference lies.

So analytics.js asynchronously loads its self in the page. In the mean time it queues all calls to the API with a snub version of the object. Once analytics.js loads it executes all the calls in the queue. Then redefines its self, breaking all refs to the original window.analytics. So any calls that are encountered fast enough to My only work around for this is to make my exposer a function call that returns the current version of the window.analytics.
(function (ko, $, analytics) {
function sendTrack(event, props) {
analytics().track(event, props);
}
ko.bindingHandlers.segmentTrack = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
ko.applyBindingsToNode(element, { click: function () { sendTrack(value.event, value.options) }});
}
}
})(window.ko, window.jQuery, function () { return window.analytics; });

Creating a jQuery container to hold other functions

I am trying to create a simple class or a container to hold few JavaScript methods as shown below.
var Core = (function () {
var Error = {
alert: function() {
alert('Error => alert called');
},
display: function() {
alert('Error => display called');
}
};
var ajax = {
view: function(){
alert('Ajax => view called');
},
update: function(){
alert('Ajax => update called');
}
};
var call = function(){
Error.alert();
Error.display();
ajax.view();
ajax.update();
};
$(document).ready(function(){
call(); // This works fine.
}());
But for some reason I am not able to call these methods outside the container. For instance calling functions as shown below throws error.
$(document).ready(function(){
Core.Error.alert(); // This doesn't work.
Core.Call(); // This doesn't work.
});
Error: Uncaught TypeError: Cannot read property 'Error' of undefined
I can call the functions from within the container. I am new to the concept of jQuery plugins and would appreciate if someone can help me with this.

You can export these methods (read more about Module Pattern), like so
var Core = (function () {
...
return {
Error: Error,
Ajax: ajax,
Call: call
};
})();
Core.Error.alert();
Core.Call();
Example

Change it in:
var Core = {
error: {
alert: function () {
alert('Error => alert called');
},
display: function () {
alert('Error => display called');
}
},
ajax: {
view: function () {
alert('Ajax => view called');
},
update: function () {
alert('Ajax => update called');
}
},
call: function () {
Core.error.alert();
Core.error.display();
Core.ajax.view();
Core.ajax.update();
}
}
$(document).ready(function () {
Core.call(); // This works
}());
Working fiddle

How can i call that function inside that anonymous javascript? (TinyMce example)

How can i call test() inside that method? It's possible?
(function() {
tinymce.create('tinymce.plugins.WrImagerPlugin', {
init : function(editor, url) {
editor.addCommand('mceWrImagerLink', function() {
//--> how can i refer to test() here?
});
},
test: function () {alert('test');}
}
});
tinymce.PluginManager.add('wr_imager', tinymce.plugins.WrImagerPlugin);
})();

You can make test a regular function and assign it to the object, like this:
(function() {
function test() { alert('test'); }
tinymce.create('tinymce.plugins.WrImagerPlugin', {
init : function(editor, url) {
editor.addCommand('mceWrImagerLink', function() {
test();
});
},
test: test
});
tinymce.PluginManager.add('wr_imager', tinymce.plugins.WrImagerPlugin);
})();
Alternatively, you can keep a reference to the object:
(function() {
var wrImaergPlugin = {
init : function(editor, url) {
editor.addCommand('mceWrImagerLink', function() {
wrImagerPlugin.test();
});
},
test: function() { alert('test'); }
}
tinymce.create('tinymce.plugins.WrImagerPlugin', wrImagerPlugin);
tinymce.PluginManager.add('wr_imager', tinymce.plugins.WrImagerPlugin);
})();
Finally, in this specific case, you should be able to simply call tinymce.plugins.WrImagerPlugin.test().

You can also keep a reference to this in the init method that will be available in the addCommand closure:
(function() {
tinymce.create('tinymce.plugins.WrImagerPlugin', {
init : function(editor, url) {
var me = this;
editor.addCommand('mceWrImagerLink', function() {
//--> how can i refer to test() here?
me.test();
});
},
test: function () {alert('test');}
}
});
tinymce.PluginManager.add('wr_imager', tinymce.plugins.WrImagerPlugin);
})();