sitecakeGlobals and editMode variables

integration
#1

Hello,

I just maybe discovered a bug or I am just wrong, please let me know what you think :

In order to disable functions and to enable editable scripted divs or htlm code, I am using this condition :

if ( !window.sitecakeGlobals || sitecakeGlobals.editMode !== true ) {}

The point is that is seems not to be true at the time of authentication. Let say that I exclude a function in order to edit, display and/or hide things as it would be in raw html (or with js disabled). So I put it in the condition but at the very first loading of the page admin.php?sc-page=whateverpage.html, the variable seems to keep the state it had before login until I refresh the page.
I think this looks like a broken behavior.
Please let me know if I do it wrong or if it is really a bug ?

#2

Hi,

not exactly sure when you expect your condition to work. window.sitecakeGlobals is always present when you access page through admin.php. sitecakeGlobals.editMode is true only if you are logged in and in edit mode (toolbar is visible). It’s not true on login screen.

#3

Hello,

Sorry for the long reply, I was off.
What I expect is to override a data-lazyload attribute on image when I enter in the admin panel.
So here is how it is expected to work : I have a page with divs pre-filled with a generic img ( data-lazyload=“500x300.jpg” ’ ). When the data-lazyload attribute match with this string ‘500x300’ and the edit mode variable is false, these divs are hidden by a js function in public mode, so only the one that have already been edited are shown. In edit mode, those generic images are displayed in order to edit it.
The issue : on the admin.php access just after filling the password, the tag is attributed with src=unknown, BUT if i reload the page, the generic placeholder image is well displayed. In fact, each time I log into this page, I have to reload it in order to SC take the data-lazyload attribute into account.

the html :

`<div class="fbox-media sc-content">
       <a href="">
                 <img alt="" data-lazyload="/images/500x333.jpg">
       </a>
 </div>`

the js

function() {
			
			var lazyLoadEl = $('[data-lazyload]');
			if ( !window.sitecakeGlobals || sitecakeGlobals.editMode !== true ) {
				if( lazyLoadEl.length > 0 ) {
					lazyLoadEl.each( function(){
						var element = $(this),
							elementImg = element.attr( 'data-lazyload' );

						element.attr( 'src', '/images/blank.svg' ).css({ 'background': 'url(/images/preloader.gif) no-repeat center center #FFF' });

						element.appear(function () {
							element.css({ 'background': 'none' }).removeAttr( 'width' ).removeAttr( 'height' ).attr('src', elementImg);
						},{accX: 0, accY: 120},'easeInCubic');
					});
				}
			} else{

				if( lazyLoadEl.length > 0 ) {
					lazyLoadEl.each( function(){

						var element = $(this),
							elementImg = element.attr( 'data-lazyload' );
							element.attr( 'src', elementImg );
					});
				}

			}
		}

Let me know if it’s unclear
Thank you