I have some JavaScript running that on my page that I DON’T want to run in Pinegrow (even when JS is enabled). How do I do this?
is there a class or element somewhere that exists only within the Pinegrow interface that I can check against? I’m sure there’s a way to find this out myself so a lil help on how to look inside Pinegrow would be fab! Otherwise, for now, I’m checking if the URL is localhost.
e.g.
if (!document.body.classList.contains('is-pinegrow')) {
// run the code
}
Assuming your Pinegrow internal server is running at 127.0.0.1 at port 40000, try:
if(location.host === “127.0.0.1:40000) {
console.log(“I’m within the Pinegrow matrix”)
}
Hey @TechAkayy,
Thanks for this. Unfortunately, this does not then run when I preview in the browser. I just want it to not run in the Pinegrow interface.
May be location.href? I think this has some url parameters, and in external browser, I think it doesn’t have url params… haven’t checked this yet at my end!
@fakesamgregory and @TechAkayy,
Yeah, @TechAkayy is right. location.href in Pinegrow will have have a pgedit URL parameter, while the browser won’t.
Cheers,
Bob
Here you go:
if(location.search.includes('pgedit'))
console.log('Editing within pinegrow')
Great this works!! Thanks both
Checking for data-pg-id attributes would also work:
if (!document.body.hasAttribute('data-pg-id') {
// run the code
}
Extending from this, is there a way to hide/show elements just within Pinegrow from the UI?
Off the head, i’d create a class/attribute hide-in-pg and in my CSS…
[data-pg-id] [hide-in-pg] {
display: none !important;
}
In the tree panel, selecting an element shows the vertical element menu. It has hide/show icon. Is that what you are after?
That’s exactly it. Thank you.
To bring this back from the dead, Is there any way from the interface to persist @TechAkayy’s suggestion of hiding/showing elements in Pinegrow?
It’d be interesting to see what is more preferred from users using the hide/show icon and whether they’d prefer it if the state persists.
