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.

On 7/4/2022 at 6:53 PM, 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.

@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.

@creedon Piggy-backing onto this convo because this is def above my head. Haha.

I'm using a blog to manage a client's team members, and I've got some code in to hide the blog post titles. As we're using the duplicate function to streamline adding new members, the issue comes in when the title that needs to be edited (as it affects the URL and label in the backend), but is now hidden for the admin editing as well. Therefore, the only way to update the team member's name is to remove the code so I can see the post title, edit it and then re-add the code...every. time.

Is there any way to get around this? I'm anticipating training the client and that's not ideal. TIA!

39 minutes ago, LemonstrikeCreativeStudios said:

Piggy-backing onto this convo because this is def above my head. Haha.

I'm using a blog to manage a client's team members, and I've got some code in to hide the blog post titles. As we're using the duplicate function to streamline adding new members, the issue comes in when the title that needs to be edited (as it affects the URL and label in the backend), but is now hidden for the admin editing as well. Therefore, the only way to update the team member's name is to remove the code so I can see the post title, edit it and then re-add the code...every. time.

Is there any way to get around this? I'm anticipating training the client and that's not ideal. TIA!

Suppose your site url is lemonstrike.squarespace.com

You can access this link: lemonstrike.squarespace.com/config/safe

It will disable all custom code in Edit Mode, then you can edit title without removing the code

@tuanphan Unfortunately, that doesn't work for me. I still the blog title hidden from being editable when viewing the site with /safe at the end of the URL. Any other ideas?

@tuanphan I've tracked down the following code (source) and stuill nothing. Would love any insight you might have!

body:not(.sqs-edit-mode-active) {
  .collection-6491eebaa220bc4d8d6b648e .blog-item-title {
  display: none !important;
  }
}

URL: https://lomi.squarespace.com/team-members/thomas-pope
PW: lomi

@creedon Hey! Any chance you can help me figure this one out? I'm on the verge of tears for not being able to get this working.

I've got two blogs and need to hide the titles for all posts in only one of them (only that specific collection), however the titles should only be hidden on the front end, not for the admin when editing the site.

The code I've been testing is below. Please note it's not currently added to the site, but I can add it for testing purposes.

body:not(.sqs-edit-mode-active) {

  #collection-6491eebaa220bc4d8d6b648e  .blog-item-wrapper .blog-item-title h1.entry-title {
display: none !important;
}
}

Collection URL: https://lomi.squarespace.com/team-members
PW: lomi

Any help is GREATLY appreciated.

1 hour ago, LemonstrikeCreativeStudios said:

the titles should only be hidden on the front end, not for the admin when editing the site.

Where did you install this code? Design > Custom CSS?

28 minutes ago, creedon said:

Where did you install this code? Design > Custom CSS?

@creedon I ended up removing it. I'm at my wits end and nothing was working so I changed gears, however if you'd like me to install it for testing purposes, I can do that, and yes, I originally had it in Design > Custom CSS.

1 hour ago, LemonstrikeCreativeStudios said:

I ended up removing it.

Understood. I needed install location context so I can begin to diagnose the issue.

5 minutes ago, creedon said:

Understood. I needed install location context so I can begin to diagnose the issue.

@creedon Does that mean I should install that code again for you? (And I appreciate your help very much!)

2 minutes ago, LemonstrikeCreativeStudios said:

Does that mean I should install that code again for you?

No. I am in diagnostic mode and should be able to do it locally on my test site.

The issue is that the sqs-edit-mode-active class is only on the DOM when the page is being edited, i.e. when you click the Edit button for a page.

Use the following in place of your code.

html:not( .squarespace-damask ) {

  #collection-6491eebaa220bc4d8d6b648e .blog-item-wrapper .blog-item-title h1.entry-title {
  
    display : none;
    
    }
    
  }

The squarespace-damask class is on the DOM when you are in the backend of your site. I use this check to turn off code in the backend extensively. I find it easier to know that code isn't messing up the backend and then just use private browsing to see what site visitors will see.

Let us know how it goes.