A ribbon bar is a user-friendly interface for desktop environments when users can utilize a mouse to navigate. On tablets or smart-phones, another, more touch-enabled, interface might be required. This sample shows how to implement your own button bar based on the Javascript API of Web.TextControl, the HTML5 based web editor.

Building a touch-enabled button bar with Javascript

The new button bar itself is a simple DIV element with CSS-styled HTML INPUT elements:

[from index.aspx]

<div id="iOSUXBar">
        <input type="button" id="fontbold" title="Bold" class="btniOSUX" />
        <input type="button" id="fontitalic" title="Italic" class="btniOSUX" />
        <input type="button" id="listbullet"
                title="Bulleted List" class="btniOSUX separator" />
        <input type="button" id="liststructured"
                title="Structured List" class="btniOSUX" />
</div>

The CSS for the DIV and the INPUT elements looks like this:

#iOSUXBar {
    border-top: 1px #bbbbbb solid;
    border-bottom: 1px #bbbbbb solid;
    padding: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btniOSUX {  
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    width: 50px;
    height: 50px;
    border: 1px solid #c2c2c2;
    border-radius: 2px;
}

#fontbold {
    background-image: url('images/fontbold.png');
}

.btniOSUX:hover {
    background-color: #d5e1f2;
}

.btniOSUX-selected {
    background-color: #c2d5f2;
}

The following Javascript adds the click event to the newly inserted bold button:

[from index.aspx]

$('#fontbold').click(function(){
        if ($(this).hasClass('btniOSUX-selected')) {
                $(this).removeClass('btniOSUX-selected');
                TXTextControl.sendCommand(TXTextControl.Command.InputFormat,
                        TXTextControl.InputFormatProperty.Bold, 0);
        } 
        else
        {
                $(this).addClass('btniOSUX-selected');
                TXTextControl.sendCommand(TXTextControl.Command.InputFormat,
                        TXTextControl.InputFormatProperty.Bold, 1);
        }

        TXTextControl.focus();
})

Web.TextControl will raise the inputFormatReceived event, if the InputFormat at the current input position has been changed. The following Javascript attaches the event handler inputFormatReceivedHandler to the event:

[from index.aspx]

document.addEventListener("inputFormatReceived", inputFormatReceivedHandler);

function inputFormatReceivedHandler(e) {
        var msg = e.detail;
        if (msg.hasOwnProperty("Bold"))
                inputFormatChanged(TXTextControl.InputFormatProperty.Bold, msg.Bold);
}

The function inputFormatChanged changes the state of the buttons to reflect the input format at the current input position:

[from index.aspx]

function inputFormatChanged(id, value, stringValue) {
        var btns = null;

        switch (id) {
                case TXTextControl.InputFormatProperty.Bold:
                        btns = [$("#fontbold")];
                        break;
        }

        if (btns) {
                btns.forEach(function (btn) {
                        if (value) btn.addClass('btniOSUX-selected');
                        else btn.removeClass('btniOSUX-selected');
                });
        }
}

Download the sample from GitHub and test it on your own.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on GitHub.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)