This is a migrated thread and some comments may be shown as answers.
Dropdownlist in toolbar leads to loss of focus in Safari
3 Answers 17 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Peter
Top achievements
Rank 1
Peter asked on 28 Dec 2011, 11:49 AM
hi,

I have added a client event to the editor. Which result to the toolbar hiding when the editor loses focus. Found this on the fora

@using Telerik.Web.Mvc.UI
@model string
@{
    var documentName = ViewData.TemplateInfo.HtmlFieldPrefix;
    var hideShowFunction = "HideShow" + documentName;
    string documentContent = HttpUtility.HtmlDecode(ViewData.TemplateInfo.FormattedModelValue.ToString());
 
}
 
<script type="text/javascript">
function @(hideShowFunction)() {
        var editor = $("#@documentName").data("tEditor");
        $(editor.window).bind("focus", function () {
            $("#@documentName .t-editor-toolbar").show();
        }).bind("blur", function () {
            $("#@documentName .t-editor-toolbar").hide();
        });
      $("#@documentName .t-editor-toolbar").hide();
}
</script>
 
 
@(
 Html.Telerik().Editor()
        .Name(documentName)
        .ClientEvents(events => events.OnLoad(hideShowFunction))
        .Value(documentContent)
        .HtmlAttributes(new { style = "height:120px" }))

This works great except for the dropdowns (like font size) in Safari. The moment the user selects the drop down the editor considers's it's focus lost and the toolbar disappears.

Is there a work-round for this ? We have a lot of Apple users and I do like Safari myself too. The solution has to be generic, as the editor is in a template.

kind regards

Peter

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 28 Dec 2011, 02:56 PM
Hello Peter,

Most of the browsers (not Internet Explorer) loose focus when you click out of the Editor's area (for example DropDownItems in the font menu).
I would suggest to use the following work around: 

<script type="text/javascript">
function @(hideShowFunction)() {
 
        var editor = $("#@documentName").data("tEditor");
        $(editor.window).bind("focus", function () {
            $("#@documentName .t-editor-toolbar").show();
        });
 
        $(document).click(function(e){
            if($(e.target).is('#@documentName, #@documentName *'))return;
            $('#@documentName .t-editor-toolbar').hide();
            if ($(e.target).is('.t-animation-container, .t-animation-container *')) {
                $("#@documentName .t-editor-toolbar").show();
            }
             
        });
 
      $("#@documentName .t-editor-toolbar").hide();
}
</script>

The idea is to check if the click is outside the Editor's area or the DropDownElements you hide the header toolbar.
I hope this helps.

All the best,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Peter
Top achievements
Rank 1
answered on 28 Dec 2011, 04:21 PM
hi,

no that's not going to work. It does prevent the toolbar from disappearing. But...
What I don't like is hooking in the click of the document. And things go wrong with several editors on a page (we have up to 9...). Working in one editor pops up the toolbars of all other editors.

Back to the drawing board :?

Peter


0
Petur Subev
Telerik team
answered on 29 Dec 2011, 10:18 AM
Hello Peter,

If you want to hide wherever the user clicks outside the Editor you can use the following JavaScript function hooked to the OnLoad event on every editor.
function @(hideShowFunction)() {
        var editorElement = this;
        var editorID = editorElement.id;
        var editor = $(editorElement).data("tEditor");
 
        $(editor.window).bind("focus", function () {
            $(".t-editor-toolbar").hide();
            $(".t-editor-toolbar", editorElement).show();
        });
  
        $(document).click(function(e){
            if($(e.target).is('#'+editorID+', #'+editorID+' *'))return;
            if (!$(".t-editor-toolbar", editorElement).is(':visible')) return;
            $('.t-editor-toolbar', editorElement).hide();
            if ($(e.target).is('.t-animation-container, .t-animation-container *')) {
                $(".t-editor-toolbar", editorElement).show();
            }
        });
  
      $(".t-editor-toolbar", editorElement).hide();
}

If you do not want to handle when the user clicks outside any Editor and hide the header you can use the following JavaScript function hooked to the OnLoad event:

function onLoad(e) {
    var editor = $(this).data("tEditor");
    $(".t-editor-toolbar-wrap", editor.element).hide();
    $(editor.window).bind("focus", function () {
        OnEditorFocus(editor.element);
    });
}
 
function OnEditorFocus(editorElement) {
    $(".t-editor-toolbar-wrap", editorElement).show();
    $(".t-editor[id!=" + editorElement.id + "]").each(function () {
            HideEditorToolbar(this);
    });
}
 
function HideEditorToolbar(editorElement) {
    $(".t-editor-toolbar-wrap", editorElement).hide();
}


All the best,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
Editor
Asked by
Peter
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Peter
Top achievements
Rank 1
Share this question
or