I'm vuejs newbie, and I'm start to use the clearsale api for validations and want make a fingerprint catch for an validation, and need's call a script funcion on page's bottom only in one vuejs component. This is the script in question:
<script>
(function(a, b, c, d, e, f, g) {
a["CsdpObject"] = e;
(a[e] =
a[e] ||
function() {
(a[e].q = a[e].q || []).push(arguments);
}),
(a[e].l = 1 * new Date());
(f = b.createElement(c)), (g = b.getElementsByTagName(c)[0]);
f.async = 1;
f.src = d;
g.parentNode.insertBefore(f, g);
})(window, document, "script", "//device.clearsale.com.br/p/fp.js", "csdp");
csdp("app", "appKey");
csdp("sessionid", "sessionID");
</script>
I called out of export default scope, but thei not recognize the csdp functions.
(p.s. sorry about my english)
You should put this inline script in your public/index.html file - but without the last 2 statements (where you call the csdp function). In your component then you will write
window.csdp("app", "appKey");
window.csdp("sessionid", "sessionID");
Related
I' trying to call a doThis() function from my html after it has been generated from a <script>.
Because it is a script that runs an external url, I need to add it using a variable in my .ts file. It executes with no problem and creates my html element. That html element is a payment form, when it is completed, it calls a function that is inside the and gives me the order information as parameter.
My problem here is I'm trying to call a function in my .ts file from that html function to use that order information but I can't find a way to reference that .ts function from inside my html.
.ts file
export class Component implements OnInit {
giftupHtml: string = `<script type="text/javascript">
(function (g, i, f, t, u, p, s) {
g[u] = g[u] || function() { (g[u].q = g[u].q || []).push(arguments) };
p = i.createElement(f);
p.async = 1;
p.src = t;
s = i.getElementsByTagName(f)[0];
s.parentNode.insertBefore(p, s);
})(window, document, 'script', 'https://cdn.giftup.app/dist/gift-up.js', 'giftup');
// Track conversions:
giftup("conversion", function (payload) {
doThis();
});
</script>
`;
constructor( ) { }
doThis() {
console.log("This isn't called.");
}
Basically the giftupHtml is used as [innerHTML] inside a .
It renders fine and I know the html function is called since I can console.log(payload) but I can't reference my .ts file or function.
Anything you call outside the Angular zone will need to be wrapped in a call from ngZone. And make sure you use arrow functions so that the references to this stay as the component.
constructor(ngZone: NgZone) {
window['doThis'] = () => {
ngZone.run(() => {
// Now you have full access to the component here
});
};
}
ngOnDestroy() {
delete window['doThis'];
}
actually thats normal you are trying to access angular function from script window you cant do that normally but there is some workarounds
https://www.c-sharpcorner.com/blogs/call-angular-2-function-from-javascript
but i am really interested in the reason you are doing this for?
I use a web based development environment for data entry forms. The environment lets me create rules that are triggered by form events. These events run in js in the browser but there is almost no support for debugging, which makes problem solving a nightmare.
The code in the browser has a central event handler, which has a logging feature but the quantity of information produced by it is so large, it makes finding what you need difficult. Think of info level logging gone mad. Plus you have to open a separate window to access the log.
I need to be able to log certain events to the console, or trigger breakpoints at specified rules. Is there a way to modify the environment's code below to allow it to call my debugger instead of (or in addition) to SFLog?
function handleEvent(n,t,q,r,u,f,e,o,s,h,c,l){
if(eventsCancelled!==!0){
SFLog({type:3,source:"handleEvent",category:"Events",
message:"{2} event fired from {1} - {0}",parameters:[n,t,q]});
var b="Events/Event[#SourceID='"+n+"'][#SourceType='"+t+"'][Name/text()="+q.xpathValueEncode()+"]";
//Rest of the event handler...
function SFLog(n){
if(checkExists(_debug)){var s=translateDebugLevel(n.type);
if(s>=_debug){
varu=n.type,e=n.source,r=n.category,q=n.message,h=n.parameters,o=checkExists(n.exception)? WriteExceptionXml(n.exception):null,t=n.data,l=checkExists(n.humanateData)?
n.humanateData:!0,f=(new Date).format("yyyy-MM-ddTHH:mm:ss:fff");
checkExists(t)&&(dataString=t.xml,checkExists(dataString)||(dataString=t),l===!0&&(dataString=Humanate(dataString)));
//more code for SFLog...
Cleaned Up Code
function handleEvent(n, t, q, r, u, f, e, o, s, h, c, l) {
if (eventsCancelled !== !0) {
SFLog({
type: 3,
source: "handleEvent",
category: "Events",
message: "{2} event fired from {1} - {0}",
parameters: [n, t, q]
});
var b = "Events/Event[#SourceID='" + n + "'][#SourceType='" + t + "'][Name/text()=" + q.xpathValueEncode() + "]";
//Rest of the event handler...
}
}
function SFLog(n) {
if (checkExists(_debug)) {
var s = translateDebugLevel(n.type);
if (s >= _debug)
{
varu = n.type;
e = n.source;
r = n.category;
q = n.message;
h = n.parameters;
o = checkExists(n.exception) ?
WriteExceptionXml(n.exception) :
null;
t = n.data;
l = checkExists(n.humanateData) ?
n.humanateData :
!0;
f = (new Date).format("yyyy-MM-ddTHH:mm:ss:fff");
checkExists(t) &&
(dataString = t.xml, checkExists(dataString) ||
(dataString = t), l === !0 && (dataString = Humanate(dataString)));
//more code for SFLog.
I agree with #Eddie but one solution could be to wrap the logger function and and override it, and only log the events you care about. e.g.:
function SFLog(n){
//old code
}
//run on the console, the first line, and then the second.
var oldLoggger = SFLog;
function SFLog(n) {
if(/*some criteria*/) {
oldLogger(n);
}
}
This way you can run the default logger with different conditions, but it probably would be best if you could modify the logger code itself to accept certain criteria, like, event type to log, or targetElement's ID, class etc.
PD: If you need to modify the eventHandler itself, you should:
remove the event handler first.
create your wrapper function.
add the wrapper function as event handler
I tried to craft a text slider, but I got weird result:
TypeError: HomeHeaderSlider.init is not a function
I am still learning es6 javascript.
Here are my classes:
import S from "skylake"
class HomeHeaderSlider {
init(e, t) {
function i() {
o.dataset.headerslider = h,
t()
}
let o = S.Geb.id("h-header"),
// some other variables
"h-header-arrow-btn-left" === e.target.id ? (h = 0 === c ? 5 : c - 1, d = -1) : (h = c < 5 ? c + 1 : 0, d = 1)
// some content
}
}
And here is the class extends...
class HomeController extends HomeHeaderSlider {
constructor(e) {
super();
S.BindMaker(this, ["addListeners", "getHomeHeaderSlider"]),
this.RO = new S.RO({
throttle: {
delay: 100,
atEnd: !0
}
})
}
init(e) {
let t = this
this.addListeners()
}
addListeners() {
this.listeners("add")
}
listeners(e) {
"add" === e ? this.RO.on() : this.RO.off(),
S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider)
}
getHomeHeaderSlider(e) {
this.listeners("remove"),
HomeHeaderSlider.init(e, this.addListeners)
}
destroy(e, t) {
this.listeners("remove")
}
}
console.log(h)
// export default HomeHeaderSlider
const slidctrl = new HomeController()
slidctrl.init()
export default HomeController
It sems the code doesn't call the HomeHeaderSlider.init function.
My question is how can I call it?
HomeHeaderSlider is your class. There is no such function HomeHeaderSlider.init() on the class. The .init() method is on HomeHeaderSlider.prototoype.init or on an object instance of HomeHeaderSlider.
In this method:
getHomeHeaderSlider(e) {
this.listeners("remove"),
HomeHeaderSlider.init(e, this.addListeners)
}
it isn't entirely clear what you're trying to do there. If you want to call the base class version of .init() rather than your HomeController version of it, then you can use super.init() as in:
getHomeHeaderSlider(e) {
this.listeners("remove"),
super.init(e, this.addListeners)
}
It also looks like you may have an issue with the binding of this in this line:
S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider)
where you need to change that to this:
S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider.bind(this))
so that your getHomeHeaderSlider() method will have the proper value of this when it is called. When you pass this.getHomeHeaderSlider to a function, it looks on this, gets the reference to the getHomeHeaderSlider method and passes only the reference to that method. When the click handler later calls your method, there's no connection at all to the right object so the value of this is lost. Using .bind() the way I showed allows you to make sure the proper value of this stays connected to the method call. This is needed when passing a reference to a method of an object that is going to get called by some other agent that doesn't know anything about your object.
I need to shorten my functions (I use them a lot, if i shorten them probably my app needs less storage)
For Example I have navigator.notification.confirm
it is a function. I call it like this : navigator.notification.confirm(a, b, c, [d, e, f, ...])
I want to shorten it as : confirm(a, b, c, [d, e, f, ...])
I used var confirm = navigator.notification.confirm but it doesn't work :(
I can use function confirm(a, b, c, d) { navigator.notification.confirm(a, b, c, d) }
but isn't there any shorter way ?
Here is an example of how I do this for navigator.notification.alert:
I put this in my function that is called from the deviceReady event.
//Shortcut for navigator.notification.alert
if (navigator.notification) {
window.alert = function (message,func,title,buttonTxt) {
if(!func){
func = null;
}
navigator.notification.alert(message, func, title, buttonTxt);
};
}
Now with this code in place, anytime I want to alert something I can do this:
alert('hi');
instead of:
navigator.notification.alert('hi');
I'm trying to use Keen.io, I converted their JS to coffee as follows:
# Keen init
Keen = Keen or
configure: (e) ->
#_cf = e
addEvent: (e, t, n, i) ->
#_eq = #_eq or []
#_eq.push([e, t, n, i])
setGlobalProperties: (e) ->
#_gp = e
onChartsReady: (e) ->
#_ocrq = #_ocrq or []
#_ocrq.push(e)
(->
e = document.createElement("script")
e.type = "text/javascript"
e.async = not 0
e.src = ((if "https:" is document.location.protocol then "https://" else "http://")) + "dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js"
t = document.getElementsByTagName("script")[0]
t.parentNode.insertBefore e, t
)()
Keen.configure myParams
Keen.addEvent "script_tag_init"
But looks like events aren't hitting. What gives?
Yeah, that would be the problem. The Keen object won't be visible to the global scope due to how the CoffeeScript will compile.
"Exporting" Keen to window after initializing will work.
Alternatively you can initialize Keen directly on the window object:
# Keen init
window.Keen =
configure: (e) ->
#_cf = e
...
Note: This method does exclude checking if Keen already exists on the page first, which is a corner-case performance optimization and isn't necessary for most applications. In other words it should be fine.
Since coffee wraps everything in a closure, you need to include this after the call to configure:
# Keen works with variable as it is attached to window
window.Keen = Keen