Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • jake williamson 169 posts 738 karma points
    Aug 07, 2020 @ 00:13
    jake williamson
    0

    is it possible to pass arguments to the 'umbButtonGroup' handler function?

    hey out there,

    i want to use the umbButtonGroup directive inside a ng-repeat so each row can have multiple actions in one button rather than having a bunch of buttons.

    https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbButtonGroup

    trick is, i need to pass the item to the handler function:

    defaultButton: {
        labelKey: "general_defaultButton",
        hotKey: "ctrl+d",
        hotKeyWhenHidden: true,
        handler: function() {
            // do magic here
        }
    }
    

    does anyone know if this is possible? i've attempted a couple of different things and picked through the core code but can't find an example where this happens...

    any suggestions would be grand!

    cheers,

    jake

  • jake williamson 169 posts 738 karma points
    Aug 07, 2020 @ 23:28
    jake williamson
    100

    i came to the conclusion that the core directive just didn't support what i was trying to do so i ended up making my own ;)

    it's 99.9% the same as the one in the core but allows you to pass an argument variable.

    this is the view - i've named it umb-button-group-extended.html:

    <div class="btn-group umb-button-group" ng-class="{'dropup': direction === 'up'}">
    
        <umb-button ng-if="defaultButton"
                    alias="{{defaultButton.alias ? defaultButton.alias : 'groupPrimary' }}"
                    type="button"
                    action="defaultButton.handler(args)"
                    button-style="{{buttonStyle}}"
                    state="state"
                    label="{{defaultButton.labelKey}}"
                    label-key="{{defaultButton.labelKey}}"
                    shortcut="{{defaultButton.hotKey}}"
                    shortcut-when-hidden="{{defaultButton.hotKeyWhenHidden}}"
                    size="{{size}}"
                    icon="{{icon}}"
                    add-ellipsis={{defaultButton.addEllipsis}}>
        </umb-button>
    
        <button data-element="button-group-toggle"
                type="button"
                prevent-default
                class="btn btn-{{buttonStyle}} dropdown-toggle umb-button-group__toggle umb-button--{{size}}"
                ng-if="subButtons.length > 0"
                ng-click="toggleDropdown()"
                aria-haspopup="true"
                aria-expanded="{{dropdown.isOpen}}">
            <span class="caret">
                <span class="sr-only">
                    <localize key="{{labelKey}}">{{label}}</localize>
                </span>
            </span>
        </button>
    
        <umb-dropdown ng-show="subButtons.length > 0 && dropdown.isOpen"
                      class="umb-button-group__sub-buttons extended"
                      on-close="closeDropdown()"
                      deep-blur="closeDropdown()"
                      ng-class="{'-align-right': float === 'right'}">
            <umb-dropdown-item ng-repeat="subButton in subButtons">
                <button data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}"
                        type="button" ng-click="executeMenuItem(subButton)"
                        hotkey="{{subButton.hotKey}}"
                        hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}"
                        prevent-default>
                    <localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
                    <span ng-if="subButton.addEllipsis === 'true'">...</span>
                </button>
            </umb-dropdown-item>
        </umb-dropdown>
    
    </div>
    

    and this is the js:

    (function () {
        'use strict';
    
        function buttonGroupExtendedDirective() {
    
            function link(scope) {
    
                scope.dropdown = {
                    isOpen: false
                };
    
                scope.toggleDropdown = function () {
                    scope.dropdown.isOpen = !scope.dropdown.isOpen;
                };
    
                scope.closeDropdown = function () {
                    scope.dropdown.isOpen = false;
                };
    
                scope.executeMenuItem = function (subButton) {
                    subButton.handler(scope.args);
                    scope.closeDropdown();
                };
    
            }
    
            var directive = {
                restrict: 'E',
                replace: true,
                templateUrl: '/App_Plugins/UmbLogExporter/backoffice/umbLogExporter/directives/umb-button-group-extended.html',
                scope: {
                    defaultButton: "=",
                    subButtons: "=",
                    state: "=?",
                    direction: "@?",
                    float: "@?",
                    buttonStyle: "@?",
                    size: "@?",
                    icon: "@?",
                    label: "@?",
                    labelKey: "@?",
                    args: "@?"
                },
                link: link
            };
    
            return directive;
        }
    
        angular.module('umbraco.directives').directive('umbButtonGroupExtended', buttonGroupExtendedDirective);
    
    })();
    

    it can be used in the views as:

    <umb-button-group-extended
        ng-if="vm.buttonGroup"
        default-button="vm.buttonGroup.defaultButton"
        sub-buttons="vm.buttonGroup.subButtons"
        args="{{myObjectOrProperty}}"
        direction="down"
        float="right">
    </umb-button-group-extended>
    

    and wired up with the following js:

    vm.buttonGroup = {
        defaultButton: {
            labelKey: "general_view",
            hotKey: "",
            hotKeyWhenHidden: true,
            handler: function (myObjectOrProperty) {
                //do something here
            }
        },
        subButtons: [
            {
                labelKey: "actions_download",
                hotKey: "",
                hotKeyWhenHidden: true,
                handler: function (myObjectOrProperty) {
                    //do something here
                }
            }
        ]
    };
    

    passing an object or property to the args property on the scope will pass it up to the handlers for the default and sub buttons.

    hope someone out there finds this useful ;)

  • D K M J 82 posts 237 karma points
    Aug 09, 2020 @ 07:50
    D K M J
    0

    Hey Jake , In the umbraco updation these changes also will replace with the core files right??

  • jake williamson 169 posts 738 karma points
    Aug 10, 2020 @ 00:49
    jake williamson
    0

    hey there,

    no, this doesn't replace the one in the umbraco core...

    i'm using this in a package so it's loaded as an additional directive...

    i may try and push it in as a change request to the core though as it's a useful tweak!

    cheers,

    jake

Please Sign in or register to post replies

Write your reply to:

Draft