How to overwrite the properties of richwidget dropdown menu ?

HI, how to open the dropdown menu widget by hover than by click?


I tried overwriting the javascript of dropdown menu richwidget by changing the click with hover. it works but i can't hover to the dropdown panel menu. When I hover it disappears.


Here's What i did,

SyntaxEditor Code Snippet

$(function($) {
    var RichWidgets = (window.RichWidgets = window.RichWidgets || {});

    // configuration
    var rootSel = '.Menu_DropDownButton',
        primarySel = '.Menu_TopMenu',
        panelSel = '.Menu_DropDownPanel',
        openClass = 'open';

    // auxiliary stuff
    var caproot = $(document.body);
    var $openRoots = $([]);

    var openRoot = function($root) {
        $root.addClass(openClass);
        if (RichWidgets.DropDownMenus.customOpenFunction) {
            $root.find(panelSel).each(function() {
                RichWidgets.DropDownMenus.customOpenFunction(this);
            });
        } else {
            $root.find(panelSel).show();
        }
        $openRoots = $openRoots.add($root);
    };
    var closeRoot = function($root) {
        $root.removeClass(openClass);
        if (RichWidgets.DropDownMenus.customCloseFunction) {
            $root.find(panelSel).each(function() {
                RichWidgets.DropDownMenus.customCloseFunction(this);
            });
        } else {
            $root.find(panelSel).hide();
        }
        $openRoots = $openRoots.not($root);
    };
    caproot.delegate(primarySel, "hover", function(ev) {
        var $primary = $(this);
        var $root = $primary.closest(rootSel);
        if ( !$root.length ) { return; } // not our menus, bail out
        var $panel = $root.find(panelSel);
        if ( !$panel.text().length ) { return; } // menu without content

        if ($root.hasClass(openClass)) { // close it
            closeRoot($root);
        } else { // open it
            openRoot($root);
        }
        ev.preventDefault();
    });

    // 2. a hover somewhere that's not a menu, closes all menus
    $( document.body ).bind( "hover", function(ev) {
        var $inMenu = $(ev.target).closest(rootSel);
        $openRoots.not($inMenu).each(function() {
            var $root = $(this);
            if ($root.hasClass(openClass)) {
                closeRoot($root);
            }
        });
    });

    // 3. add the V thingie
    $( rootSel ).has( panelSel + " a" ).find( primarySel ).each(function() {
        var $this = $( this );
        $this.find("div").append(' <span class="Menu_DropDownArrow"/>' );
    });

    // 4. expose an API
    RichWidgets.DropDownMenus = {
        // close all currently open menus
        closeAllMenus: function() {
            $openRoots.each(function() { closeRoot($( this )); });
        },
        // specify a custom function that shows the menu panel
        // (possibly using a different effect)
        // arguments: HTMLElement to be shown 
        customOpenFunction: function(e) { $(e).slideDown(50); },
        // specify a custom function that hides the menu panel
        // (possibly using a different effect)
        // arguments: HTMLElement to be hidden
        customCloseFunction: null
    };
});



Hi Sathish,

If you really want to modify the Richwidget dropdownMenu, you can clone the Richwidget espace, modify the script and use it instead of the original Richwidget.

Kind regards,

 Cy

Cy wrote:

Hi Sathish,

If you really want to modify the Richwidget dropdownMenu, you can clone the Richwidget espace, modify the script and use it instead of the original Richwidget.

Kind regards,

 Cy


So If I use the above code in clone eSpace, does it work ? I'm trying to implement a logic to open the dropdown menu by hover rather than by click. So I just replaced the click by hover in the script. But it soes't seem to work. Can you look at the code and tell me?

How to use this cloned widget? It is opening in 'CloneOfPatterns'

Sudhakar Dantanala wrote:

How to use this cloned widget? It is opening in 'CloneOfPatterns'


Hi,


If you clone Patterns and want to use that clone in your app, you need to publish the clone, go to your app, open manage dependencies, and select the clone (and what you want from it) to add that to your app.


Hope that this can help.


Best regards,

Ricardo