Quick tips: Unlocking polish letter “ś” in Umbraco CMS admin panel

,

At the beginning I want to ask you: have you ever heard of / have used Umbraco CMS (leave us a comment!)? We have 🙂 And we love the simplicity and posibilities for .NET developers inside that content management system. We developed couple less and more complex systems using Umbraco. Some of them were based only on clear installation of Umbraco and couple of hours with configurating it inside administration panel, but some of them were extended by custom controls, modules and libraries. We use Umbraco to provide simple and fast administration for our mobile apps and many many more. I wish and hope that we will find the time to describe a lot of these examples in this blog in the future 🙂

If you have used Umbraco CMS and you are for example from… Poland, you might already have a problem with using polish letter “ś” in Umbraco administration panel. “Ś” works only in TinyMCE control (Rich Textbox Editor). We don’t have considered this problem for too important at beginning. We had a solution for that! 🙂 We write the letter “ś” in the browser adress bar and copy – paste it inside textboxes or simple editors for example.  Voila! For us the problem no longer exists, but for our clients it was not an option so we need to eliminate that.

The cause of that situation is shortcuts implementation inside one of Umbraco javascript file which  originally approved only shortcuts with ctrl and shift combinations. The file is located in directory: /Umbraco/Js/umbracoCheckKeys.js. Original file:


var ctrlDown = false;
var shiftDown = false;
var keycode = 0

var currentRichTextDocument = null;
var currentRichTextObject = null;

function umbracoCheckKeysUp(e) {
	ctrlDown = e.ctrlKey;
	shiftDown = e.shiftKey;
}

function umbracoActivateKeys(ctrl, shift, key) {
	ctrlDown = ctrl;
	shiftDown = shift;
	keycode = key
	return runShortCuts();
}

function umbracoActivateKeysUp(ctrl, shift, key) {
	ctrlDown = ctrl;
	shiftDown = shift;
	keycode = key;
}

function umbracoCheckKeys(e) {
	ctrlDown = e.ctrlKey;
	shiftDown = e.shiftKey;
	keycode = e.keyCode;

	return runShortCuts();
}

function shortcutCheckKeysPressFirefox(e) {
	    if (ctrlDown && keycode == 83)
	        e.preventDefault();
}

function runShortCuts() {
	if (currentRichTextObject != undefined && currentRichTextObject != null) {
		if (ctrlDown) {
			if (!shiftDown && keycode == 9) 
				functionsFrame.tabSwitch(1);
			else
				if (shiftDown && keycode == 9) functionsFrame.tabSwitch(-1);

			if (keycode == 83) {doSubmit(); return false;}
			if (shiftDown && currentRichTextObject) {
				if (keycode == 70) {functionsFrame.umbracoInsertForm(myAlias); return false;}
				if (keycode == 76) {functionsFrame.umbracoLink(myAlias); return false;}
				if (keycode == 77) {functionsFrame.umbracoInsertMacro(myAlias, umbracoPath); return false;}
				if (keycode == 80) {functionsFrame.umbracoImage(myAlias); return false;}
				if (keycode == 84) {functionsFrame.umbracoInsertTable(myAlias); return false;}
				if (keycode == 86) {functionsFrame.umbracoShowStyles(myAlias); return false;}
				if (keycode == 85) {functionsFrame.document.getElementById('TabView1_tab01layer_publish').click(); return false;}
			}
		} 

	} else 
		if (isDialog) {
			if (keycode == 27) {window.close();} // ESC
			if (keycode == 13 && functionsFrame.submitOnEnter != undefined) {
				if (!functionsFrame.disableEnterSubmit) {
					if (functionsFrame.submitOnEnter) {
					 // firefox hack
					 if (window.addEventListener)
					    e.preventDefault();
					 doSubmit();
					}
				}
			}
			if (ctrlDown) {
				if (keycode == 83)
					doSubmit();
				else if (keycode == 85)
					document.getElementById('TabView1_tab01layer_publish').click();
				else if (!shiftDown && keycode == 9) {
					functionsFrame.tabSwitch(1);
					return false;
				}
				else
					if (shiftDown && keycode == 9) {
						functionsFrame.tabSwitch(-1);
						return false;
					}

			}
		}

		return true;

}

if (window.addEventListener) {
    document.addEventListener('keyup', umbracoCheckKeysUp, false);
    document.addEventListener('keydown', umbracoCheckKeys, false);
    document.addEventListener('keypress', shortcutCheckKeysPressFirefox, false);
} else {
    document.attachEvent( "onkeyup", umbracoCheckKeysUp);
    document.attachEvent("onkeydown", umbracoCheckKeys);            
}

All we need to do with that file is to add support to event when the alt key is down. It is only 6-8 lines of code modification and I put overrided file below with bold on changed / added lines of code.


var ctrlDown = false;
var altDown = false;
var shiftDown = false;
var keycode = 0

var currentRichTextDocument = null;
var currentRichTextObject = null;

function umbracoCheckKeysUp(e) {
    altDown = e.altKey;
    ctrlDown = e.ctrlKey;
    shiftDown = e.shiftKey;
}

function umbracoActivateKeys(ctrl, shift, key) {
    ctrlDown = ctrl;
    shiftDown = shift;
    keycode = key
    return runShortCuts();
}

function umbracoActivateKeysUp(ctrl, shift, key) {
    ctrlDown = ctrl;
    shiftDown = shift;
    keycode = key;
}

function umbracoCheckKeys(e) {
    altDown = e.altKey;
    ctrlDown = e.ctrlKey;
    shiftDown = e.shiftKey;
    keycode = e.keyCode;

    return runShortCuts();
}

function shortcutCheckKeysPressFirefox(e) {
    if (ctrlDown && keycode == 83 && !altDown)
        e.preventDefault();
}

function runShortCuts() {
    if (currentRichTextObject != undefined && currentRichTextObject != null) {
        if (ctrlDown && !altDown) {
            if (!shiftDown && keycode == 9)
                functionsFrame.tabSwitch(1);
            else
                if (shiftDown && keycode == 9) functionsFrame.tabSwitch(-1);

            if (keycode == 83) { doSubmit(); return false; }
            if (shiftDown && currentRichTextObject) {
                if (keycode == 70) { functionsFrame.umbracoInsertForm(myAlias); return false; }
                if (keycode == 76) { functionsFrame.umbracoLink(myAlias); return false; }
                if (keycode == 77) { functionsFrame.umbracoInsertMacro(myAlias, umbracoPath); return false; }
                if (keycode == 80) { functionsFrame.umbracoImage(myAlias); return false; }
                if (keycode == 84) { functionsFrame.umbracoInsertTable(myAlias); return false; }
                if (keycode == 86) { functionsFrame.umbracoShowStyles(myAlias); return false; }
                if (keycode == 85) { functionsFrame.document.getElementById('TabView1_tab01layer_publish').click(); return false; }
            }
        }

    } else
        if (isDialog) {
            if (keycode == 27) { window.close(); } // ESC
            if (keycode == 13 && functionsFrame.submitOnEnter != undefined) {
                if (!functionsFrame.disableEnterSubmit) {
                    if (functionsFrame.submitOnEnter) {
                        // firefox hack
                        if (window.addEventListener)
                            e.preventDefault();
                        doSubmit();
                    }
                }
            }
            if (ctrlDown && !altDown) {
                if (keycode == 83) {
                    try {
                        doSubmit();
                    } catch (e) { }
                }
                else if (keycode == 85)
                    document.getElementById('TabView1_tab01layer_publish').click();
                else if (!shiftDown && keycode == 9) {
                    functionsFrame.tabSwitch(1);
                    return false;
                }
                else
                    if (shiftDown && keycode == 9) {
                        functionsFrame.tabSwitch(-1);
                        return false;
                    }

            }
        }

    return true;

}

if (window.addEventListener) {
    document.addEventListener('keyup', umbracoCheckKeysUp, false);
    document.addEventListener('keydown', umbracoCheckKeys, false);
    document.addEventListener('keypress', shortcutCheckKeysPressFirefox, false);
} else {
    document.attachEvent("onkeyup", umbracoCheckKeysUp);
    document.attachEvent("onkeydown", umbracoCheckKeys);
}

In the official issue thread on Umbraco YouTrack, this bug (http://issues.umbraco.org/issue/U4-502) have status “Fixed” due in version 6.2.0. If my memory is good I remember that this status have been raised earlier in older versions and the bug still exists. But we will see 🙂 Many of developers may have been also using older versions of Umbraco without upgrading them. So, this code is for them and us as well.

At the end of that post I want to ask you about yours experiences with content management systems such as Umbraco, Joomla, WordPress or other. Maybe we could also learn something new. We really want to make Umbraco popular in Poland. We also hope that someday we could participate in events such as CodeGarden (http://codegarden14.com/) for Umbraco Developers and we encourage everybody to do so.


Related articles