Do you have some feature in mind that you'd love to see in Couch? Let us know.
6 posts Page 1 of 1
I'd like to recommend a change to one of the default behaviors in Couch. Currently, when one saves a template or clonable page, it is immediately published. I would much prefer the default state to be "unpublished."

That seems to be the common practice across all sorts of applications, and it makes sense. You edit, preview, make changes, preview again, and when you're finally satisfied you publish your page. Publishing a page should happen only through conscious intent. I would even take it out of the advanced settings tab and add a Publish/Unpublish button alongside the Save button.

For myself and my admins, the very first step in creating a page is to click "unpublished." We've learned that the hard way, but nonetheless we'll sometimes forget and publish an unfinished page while saving our edits.

It may seem like a trivial problem except when posts are automatically posted to social media through RSS and subscribers are fed a strange and incomplete post or a link that leads to nothing. And once Facebook has taken a look at a page, it won't change the thumbnail, title, and description it serves even if the page is updated. It is fairly easy to reset Facebook's cache of this information, but it's a somewhat tedious and esoteric process.

While I'm at it, some sort of autosave feature would be nice, too. Another common head-slapping blunder is to surf away from a page without saving and loose your work.
I am quite sympathetic to your position; I will talk to KK about this.

In regards to losing un-saved work: we should be able to use the JavaScript OnBeforeUnload event (http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx) in this case to prompt the user before the page is closed or navigated away from. I will have to look into this further.
That's a great idea. A simple warning would be just as effective and seems easier to implement and use than an autosave feature. The only thing I would add is that it should only fire when there is unsaved data on the page, so it doesn't nag you unnecessarily.
I don't know if you've had a chance to look into this yet, cheesypoof. I've been fiddling around with it some and I'll be pleased to share what I've learned.

It's very simple to call window.onbeforeunload to prompt the user before closing the page.

Code: Select all
<script type="text/javascript">
   window.onbeforeunload = function() {
      return 'WARNING! Unsaved changes will be lost.';
   };      
</script>

This is a good start, but there are two problems. One is that the page will prompt you upon closing no matter what, even if the user does nothing at all. Maybe we can live with that and I'll come back to it. The more serious issue is that you get the prompt when you click on the Save button. That will never do.

The solution is to add an event listener to the Save button that will turn off the prompt when the Save button is clicked. Unfortunately, my goal of having a purely separate and modular solution was foiled by the structure of Couch's admin page. The Save button is submitted by Javascript in its onclick attribute, which fires before an external listener has a chance to act. In order to work in Couch, the function has to be added to the onclick attribute in the html.

Code: Select all
<a class="button" id="btn_submit" href="#" onclick="this.style.cursor='wait'; window.onbeforeunload = function() {return null;}; this.fireEvent('my_submit'); $('frm_edit_page').submit(); return false;">

This works pretty well really, and uses very little additional code. But to give it that finished polish, it would be nice to invoke window.onbeforeunload only if the data on the page has been changed.

A Couch template can have so many and such a variety of editable regions that it would be impractically complex to try to use too fine an instrument to decide whether anything has been changed. Simply listening to whether the form itself receives a click should be enough. True, someone might click on the form without changing anything, but for practical purposes this should be an adequate trigger for turning on the prompt. Once window.onbeforeunload is invoked, we can remove the listener. There's no point in triggering it over and over again.

Code: Select all
<script type="text/javascript">
/*add event listener*/
var unsaved = document.getElementById("frm_edit_page");
unsaved.addEventListener("click", pageUnsaved, false);

/*page changed, set warning and remove listener*/
function pageUnsaved() {
   this.removeEventListener("click", pageUnsaved, false);
   window.onbeforeunload = function() {
      return 'WARNING! Unsaved changes will be lost.';
   };      
}
</script>

There is some additional code necessary for this to function in older browsers (IE8 and earlier), but I'll set that aside for now because as it is it only works mostly in Couch. Unfortunately, this listener doesn't notice a click on the CKEditor, I guess because of how the CKEditor is included in the template (it hears a click on the toolbar, but not on the text). Perhaps there is some internal variable or code snippet that can be used to fix this problem, but that's as far as I could get on my own.

Sorry I couldn't get all the way to a solution, but I hope this might be some help.
Thanks for looking into this tim, your analysis was definitely helpful.

I dived in after reading your post and got this working for the redesign. I went with a different method for checking if the content has changed. I compare the form data in its original state and on 'onbeforeunload'. I think this is a less error-prone approach because it answers the question 'Is the content changed?' in a much more direct manner. There are a number of reasons for this... If we test for click events we aren't checking if any changes were actually performed. In addition, clicking is not the only way to focus a field; one could use (TAB) keyboard navigation.

The redesigned admin panel will include jQuery and as such I used it for this. The following code probably won't be of much use to you within the current admin panel, but maybe you can adapt a MooTools or raw JavaScript implementation:
Code: Select all
function addLeaveListener() {
    Couch.originalFormData = Couch.el.$content.serialize();

    Couch.el.$content.on('submit', function() {
        window.onbeforeunload = null;
    });

    window.onbeforeunload = function() {
        if (window.nicEditors) {
            $.each(nicEditors.editors, function(i, value) {
                value.nicInstances[0].saveContent();
            });
        }

        if (window.CKEDITOR) {
            $.each(CKEDITOR.instances, function(key, value) {
                value.updateElement();
            });
        }

        if (Couch.el.$content.serialize() !== Couch.originalFormData) {
            return "Any unsaved changes will be lost. Are you sure you want to leave this page?";
        }
    };
}
Hopefully this is part of the next Update. Very helpful!
* * * * * * I LOVE COUCH CMS - flexible and straight forward * * * * * *
6 posts Page 1 of 1

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest