Getting Toolbar position of RadEditor

2 posts, 0 answers
  1. Sabry Guen
    Sabry Guen avatar
    2 posts
    Member since:
    Jul 2009

    Posted 08 Mar 2011 Link to this post

    Hi,

    I'd like to get hold of the toolbar position of a RadEditor when the Mode is set to:

                re.ToolbarMode = EditorToolbarMode.PageTop;

    I've added a custom save button to the toolbar and I'd like to flash a confirmation message just below the save button in the toolbar.
    Currently, when the user scrolls, the toolbar moves to ensure that it is always at the top of the page. (I assume that this is re-positioned based on the scroll event).

    Currently, I have code that looks like this but GetTopLeftPosition(el)  always returns zero.
    My question is how do I get hold of the new position of the toolbar (after scroll) so that I can display a message just below the save button?

            function OnClientCommandExecuting(editor, args)
            {
                var name = args.get_name();
                
                if (name == "Save")
                {   
                    var tool = args.get_tool();
                    var attributes = tool.get_attributes();
                    
                    SaveCommentary(editor,
                                   attributes["templateid"],
                                   attributes["controlid"],
                                   attributes["commentaryid"],
                                   attributes["param1"],
                                   attributes["param2"],
                                   attributes["param3"]);
                                   
                    args.set_cancel(true);
                }
            }
            
            function setOpacity(id, level)
            {
                var element = document.getElementById(id);
                element.style.display = 'inline';
                element.style.zoom = 1;
                element.style.opacity = level;
                element.style.MozOpacity = level;
                element.style.KhtmlOpacity = level;
                element.style.filter = "alpha(opacity=" + (level * 100) + ");";
            }

            function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration)
            {  
                var fadeInComplete;
                for (i = 0; i <= 1; i += (1 / steps))
                {
                  setTimeout("setOpacity('" + id + "', " + i + ")", i * duration);
                  fadeInComplete = i * duration;             
                }
                
                // Set the timeout to start after the fade in time and the interval to display the
                // message on the screen have both completed
                setTimeout("fadeOut('" + id + "', " + fadeOutSteps + ", " + fadeOutDuration + ")", fadeInComplete + interval);
            }

            function fadeOut(id, steps, duration)
            {
                var fadeOutComplete;       
                
                for (i = 0; i <= 1; i += (1 / steps))
                {
                  setTimeout("setOpacity('" + id + "', "  + (1 - i) + ")", i * duration);
                  fadeOutComplete = i * duration;
                }                  
                
                // Completely hide the displayed message after the fade effect is complete
                setTimeout("hide('" + id + "')", fadeOutComplete);
            }   

            function hide(id)
            {
                document.getElementById(id).style.display = 'none';
            }

            function SaveCommentary(editor,reportID,controlID,commID,param1,param2,param3)
            {
                debugger;
                
                var result;
                var str = editor.get_element().id;
                
                var text = editor.get_html();
                var firstStripText = text.replace("<BODY contentEditable=true>","");
                var secondStripText = firstStripText.replace("</BODY>","");
                
                if(param1==undefined)
                {
                    param1 = '';
                }
                
                if(param2==undefined)
                {
                    param2 = '';
                }
                
                if(param3==undefined)
                {
                    param3 = '';
                }
                
                result = Winston.SaveWithAjax(reportID, controlID, commID, param1, param2, param3, secondStripText);
                                        
                if (result.error == null)
                {
                    var statusLabelID = "ctl00_commentaryMessage";
                    var statusLabelText = document.getElementById(statusLabelID);
                    
                    var date = new Date();
                    var d  = date.getDate();
                    var day = (d < 10) ? '0' + d : d;
                    var m = date.getMonth() + 1;
                    var month = (m < 10) ? '0' + m : m;
                    var yy = date.getYear();
                    var year = (yy < 1000) ? yy + 1900 : yy;
                    var hour = date.getHours();
                    var min = date.getMinutes();
                    
                    if (min < 10)
                    {
                      min = "0" + min;
                    }
                    
                    var window = editor.get_toolAdapter().get_window();
                    
                    var oPos = GetTopLeftPosition(window);  
                    
                    // Position the label just below the save button
                    statusLabelText.style.left = oPos.x;
                    statusLabelText.style.top = oPos.y;
                    
                    statusLabelText.innerText = "Commentary Text Last saved at " + day + "-" + month + "-" + year + " " + hour + ":" + min
                    fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
                }
                else
                {
                    statusLabelText.innerText = "Failed to save commentary text. Please contact your system administrator.";
                    fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
                }
             }
             function GetTopLeftPosition(el)  
             {  
                  var left = 0;  
                  var top = 0;  
             
                  while (el.offsetParent)  
                  {  
                      left += el.offsetLeft;  
                      top += el.offsetTop;  
                      elel = el.offsetParent;  
                  }  
                  
                  if (el.x) left = el.x;  
                  if (el.y) top = el.y;  
                  var oPos = new Object();  
                  oPos.x = left;  
                  oPos.y = top;  
                  return oPos;  
             }  
  2. Rumen
    Admin
    Rumen avatar
    13843 posts

    Posted 11 Mar 2011 Link to this post

    Hello Sabry,

    Here is an example how to obtain the top and left coordinates of the RadWindow PageTop toolbar of RadEditor when the page is scrolled:

                var radWindow = editor.get_toolAdapter().get_window();
                var popup = radWindow.get_popupElement();
                if (!popup) return;
                var oPos = GetTopLeftPosition(popup);
    ...
     
            function GetTopLeftPosition(el) {
                var left = 0;
                var top = 0;
     
                if (el.style.left) left = el.style.left;
                if (el.style.top) top = el.style.top;
                var oPos = new Object();
                oPos.x = left;
                oPos.y = top;
                return oPos;
            }

    Note that the string window is reserved word in JavaScript and you should not name your variables with it.

    All the best,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top