Checking for editing mode with Javascript?

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. 

This is how I check in my code.

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

Let us know how it goes.

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()

@creedon's suggestion seems to be working, thanks!

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

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.

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.

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?

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.

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);
};

9 hours ago, sophietnc said:

Where should I exactly place this line of code?

Generally you'll want to put the check in as the first line of your function. That way the rest of the code in the function won't run.