Jump to content

Checking for editing mode with Javascript?

Recommended Posts

Is there a way to detect if the page is in editing mode (e.g. button EDIT was clicked) with JavaScript?

I used to check for .sqs-edit-mode class with JS, but it doesn't seem to work anymore. 

document.body.classList.contains('sqs-edit-mode') 

returns false every time now, but I swear it was working month or two ago. 

Link to comment
14 hours ago, nick_sh said:

Is there a way to detect if the page is in editing mode (e.g. button EDIT was clicked) with JavaScript?

I used to check for .sqs-edit-mode class with JS, but it doesn't seem to work anymore. 

Your code is still valid. However it is worth noting that it checks whether the site is in edit mode (in other words you are logged in to the site. It does not check if the page is in edit mode - when you click the EDIT button to edit page content.

Creedon's suggestion will also work, by checking if it is running in a frame.

Squarespace also has a built in way to check specifically for the Config frame:

Y.Squarespace.Utils.isInDamaskFrame()

 

Edited by paul2009

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
4 hours ago, nick_sh said:

for some reason Y is undefined. I'm inserting code in the footer.

I have noticed lately that Y seems to be initialized later in the page load cycle. Not that I've used Y a lot so this is just an impression. I think this is on v7.1 sites. I think v7.0 sites are mostly unchanged.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
16 hours ago, creedon said:

Y seems to be initialized later in the page load cycle.

Exactly 🙂

The JS needs to include the proper checks to ensure everything has loaded. No site URL was provided in this thread so I wasn't able to check the code being used.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 4 months later...
On 7/4/2022 at 10:59 PM, creedon said:

This is how I check in my code.

if ( window.frameElement !== null ) return; // bail if in preview

Let us know how it goes.

Seems like Squarespace is inserting another iframe now – do we need to target by id or something?

Link to comment
10 hours ago, nick_sh said:

Seems like Squarespace is inserting another iframe now – do we need to target by id or something?

I've not seen any issues with my check code. It is pretty basic though and one could certainly check more deeply for ids or classes.

If you have a particular use case where the basic check fails, we'd be interested in seeing it.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 months later...

I tried to implement this in my own header code injection, but is does not seem to work. Where should I exactly place this line of code?

This is the code i want to run outside of edit mode only:

<script>
window.onload = function() {
  var nextArrow = document.querySelector(".summary-carousel-pager-next");
  
  function clickNext() {
    nextArrow.click();
  }
 
  setInterval(clickNext, 3000);
};
</script>
My next issue was that I wanted to control the time that it takes to rewind the carousel. I did this by changing the code to this:

window.onload = function() {
	let nextArrow = document.querySelector(".summary-carousel-pager-next");
	let prevArrow = document.querySelector(".summary-carousel-pager-prev");
	let clickCount;
  
  function clickNext() {
    nextArrow.click();
    clickCount++;
  };
  
  function goBack(){
    clickCount = 0;
    prevArrow.click();
    prevArrow.click();
  };
  
  function clickHandler(){
    console.log(clickCount);
  	if(clickCount <= 2){
     	clickNext();
    }else{
    	goBack();
    }
  };
 
  setInterval(clickHandler, 3000);
};

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.