Liferay Content Page Edit Mode Detection

gistfile1.txt

<script>
$( document ).ready(function() { 
    
    /* DON'T DO THIS IN EDIT MODE */
    if (!$('body').hasClass('has-edit-mode-menu')) {
        console.log("You're in Page View Mode");
        
        
    } else {
        
        console.log("You're in Edit Mode");
        alert("You're in Edit Mode");
    }
    
});
</script>


<style>
    .fragment_${fragmentEntryLinkNamespace} .editmode {
        display : none;
    }
    
    
    /* When has-edit-mode-menu is present in body tag, show the content */
    body.has-edit-mode-menu .fragment_${fragmentEntryLinkNamespace} .editmode {
        display : block !important;
    }
    
    .fragment_${fragmentEntryLinkNamespace} {
        padding : 2rem;
        border  : 1px solid #ff0000;
    }
</style>



<div class="fragment_2601 fragment_${fragmentEntryLinkNamespace}">
    <p class="editmode">This will only show in edit mode</p>
    <p>This will be visible all the time</p>
    
    <button class="editmode">This will only show in edit mode</button>
</div>