Changing Font Sizes in Experience Editor

Content Authors may not always want the same size of text for titles, even if those titles are the same component.   For example, if there are numerous Title & Body components on the same page, all with different titles, the Content Author may want to make some bigger and some smaller.   This happened to use with a Client in the past.  

Sitecore's Experience Editor can be extended to feature two buttons: one that increases and one that decreases the font size in realtime and allows the user to save the font size they select.   This is achieved with a combination of css, javascript, and (of course) code.   I will use the LaunchSitecore project to demo how this enhancement can be brought into your own website.   

First, I defined a javascript file to contain all of my experience editor functions.   

var launchsitecore = launchsitecore || {};

launchsitecore.experienceeditor = function ($) {
    var that = this;

    that.isInEditMode = function () {
        if (typeof Sitecore == "undefined") {
            return false;
        }
        if (typeof Sitecore.PageModes == "undefined" || Sitecore.PageModes == null) {
            return false;
        }
        return Sitecore.PageModes.PageEditor != null;
    }

    that.setAsModified = function () {
       
        scSitecore.prototype.setModified(true);
        JQuery(".scFrameSideHorizontal").hide();
        JQuery(".scFrameSideVertical").hide();
    }
    return that;

}(jQuery);

Second, I defined a javascript file to hold the font extension methods and click events.   

var launchsitecore = launchsitecore || {};

launchsitecore.resizeableTitle = function ($) {
    var that = this;
    var currentTitleAndContent;

    that.IncreaseFontSize = function () {
        var titleElement = JQuery(currentTitleAndContent).find("h2")[0];
        var titleSizeElement = JQuery(currentTitleAndContent).find(".font-weight .scWebEditInput")[0];
        var increasedValue = parseInt(JQuery(titleSizeElement).text()) + 1;

        if (!$.isNumeric(increasedValue)) {
            increasedValue = 0;
        }
        if (increasedValue > 5) {
            increasedValue = 5;
        }
        setTitleFontSizeValues(titleElement, titleSizeElement, increasedValue);
        launchsitecore.experienceeditor.setAsModified();
   } 

    that.DecreaseFontSize = function () {
        var titleElement = JQuery(currentTitleAndContent).find("h2")[0];
        var titleSizeElement = JQuery(currentTitleAndContent).find(".font-weight .scWebEditInput")[0];
        var decreasedValue = parseInt(JQuery(titleSizeElement).text()) - 1;

        if (!$.isNumeric(decreasedValue)) {
            decreasedValue = 0;
        }
        if (decreasedValue < -5)="" {="" decreasedvalue="-5;" }="" settitlefontsizevalues(titleelement,="" titlesizeelement,="" decreasedvalue);="" launchsitecore.pageeditor.setasmodified();="" }="" function="" settitlefontsizevalues(titleelement,="" titlesizeelement,="" value)="" {="" JQuery(titlesizeelement).text(value);="" var="" index="-5;" while="" (index="">< 6)="" {="" JQuery(titleelement).removeclass("title-size-"="" +="" index);="" index="index" +="" 1;="" }="" JQuery(titleelement).addclass("title-size-"="" +="" value);="" JQuery(document.getelementbyid(titlesizeelement.id.replace("_edit",="" ""))).val(value);="" }="" JQuery(document).ready(function="" ()="" {="" if="" (launchsitecore.experienceeditor.isineditmode())="" {="" JQuery(".text-widget="" h2="" .scwebeditinput").click(function="" ()="" {="" currenttitleandcontent="JQuery(this).closest(" .text-widget");"="" return="" false;="" });="" }="" JQuery(document).mousedown(function="" ()="" {="" JQuery(".scframesidehorizontal").show();="" JQuery(".scframesidevertical").show();="" });="" });="" return="" that;="" }(jquery);="">

Third, I set the css for these styles.  

.text-widget .title-size--5 {
    font-size: 10px;
}
.text-widget .title-size--4 {
    font-size: 13px;
}
.text-widget .title-size--3 {
    font-size: 14px;
}
.text-widget .title-size--2 {
    font-size: 15px;
}
.text-widget .title-size--1 {
    font-size: 16px;
}
.text-widget .title-size-0 {
    font-size: 17px;
}
.text-widget .title-size-1 {
    font-size: 18px;
}
.text-widget .title-size-2 {
    font-size: 19px;
}
.text-widget .title-size-3 {
    font-size: 20px;
}
.text-widget .title-size-4 {
    font-size: 21px;
}
.text-widget .title-size-5 {
    font-size: 22px;
}

Fourth, I had to add a Font Weight field to the template, and make the change to the Widget's ascx and cs files to take into account the new field. Below is the ascx of the result. The cs file's change was just to set the FontWeight variable to the value of the field, so that the css classes above will work with the variable.

<div class="text-widget sidebar-block">
 <h2 class="title-size-<%: FontWeight %>"><sc:fieldrenderer id="frTitle" runat="server" fieldname="Title"></sc:fieldrenderer></h2>
 <h4 class="font-weight" style="display: none;"><sc:text runat="server" id="Text1" field="Font Size Weight"></sc:text></h4>
 <sc:fieldrenderer id="frText" runat="server" fieldname="Text"></sc:fieldrenderer>
</div>

Fifth, I had to link all of these items together and define the Experience Editor's new buttons.   To do this, follow these steps:

1. Login to Sitecore's Desktop, and switch to the Core database.
   
2. Create a new WebEdit Button and call it "Increase Font Size"
   
3. Define the fields as seen below 
   
4. Repeat steps 2 and 3 for the Decrease Font Size button.  
5. On the field of the template that you want to have these new custom buttons, add the Increase/Decrease Buttons.  
   
6. When in the Experience Editor, you should be able to now see the font resizing options as well as use them and resize the selected title.  
   

Below is the final product in action!