eventTooltip - How to hide the tools

Show cool things you have done with our products
Post Reply
User avatar
SIM-LTD
Posts: 419
Joined: Thu Mar 28, 2019 4:12 pm

eventTooltip - How to hide the tools

Post by SIM-LTD » Thu Oct 10, 2019 6:38 pm

Hi there

We have been struggling on something that should be quite easy but.. we can't :o

In the Scheduler, we have entirely customized the toolTip; so...
Taking into account the code below, How can we hide the "tools" according to some value in 'eventRecord'

Code: Select all

 features: {
    eventTooltip : {
    tools : [ {  .....  }],  <-- How to hide the tool ? if -> this.eventRecord.xxx === value
    header : {  .... },
    template : data =>....
     ......
Thak you for your help
Attachments
Capture d’écran 2019-10-10 à 18.33.37.png
Capture d’écran 2019-10-10 à 18.33.37.png (19.99 KiB) Viewed 101 times

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: eventTooltip - How to hide the tools

Post by sergey.maltsev » Fri Oct 11, 2019 8:18 am

Hi!

Use beforeShow event to configure tip.
https://www.bryntum.com/docs/scheduler/#Common/widget/Tooltip#event-beforeShow

Updated code from this demo
https://www.bryntum.com/examples/scheduler/tooltips/

Code: Select all

    features : {
        eventTooltip : {
            tools : [
                {
                    ref     : 'copyTool',
                    cls     : 'b-fa b-fa-cut',
                    handler : function() {
                        this.eventRecord.split();
                        this.hide();
                    }
                },
                {
                    ref     : 'trashTool',
                    cls     : 'b-fa b-fa-trash',
                    handler : function() {
                        scheduler.eventStore.remove(this.eventRecord);
                        this.hide();
                    }
                },
                {
                    ref     : 'moveLeftTool',
                    cls     : 'b-fa b-fa-angle-left',
                    handler : function() {
                        this.eventRecord.shift(-1);
                    }
                },
                {
                    ref     : 'moveRightTool',
                    cls     : 'b-fa b-fa-angle-right',
                    handler : function() {
                        this.eventRecord.shift(1);
                    }
                }
            ],

            header : {
                titleAlign : 'start'
            },

            template : data => `
                <dl>
                    <dt>Assigned to:</dt>
                    <dd>
                         ${data.eventRecord.resource.get('image') ? `<img class="resource-image" src="../_shared/images/users/${data.eventRecord.resource.get('image')}"/>` : ''} 
                         ${data.eventRecord.resource.name}
                    </dd>
                    <dt>Time:</dt>
                    <dd>
                        ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
                    </dd>
                    ${data.eventRecord.get('note') ? `<dt>Note:</dt><dd>${data.eventRecord.note}</dd>` : ''}
                    
                    ${data.eventRecord.get('image') ? `<dt>Image:</dt><dd><img class="image" src="${data.eventRecord.get('image')}"/></dd>` : ''}
                </dl>
                `,

            listeners : {
                beforeShow : ({ source : tip }) => {
                    const
                        widgets = tip.widgetMap,
                        event   = scheduler.resolveEventRecord(tip.activeTarget),
                        hide    = event.resourceId === 'r6';
                    widgets.copyTool.hidden = hide;
                    widgets.trashTool.hidden = hide;
                    widgets.moveLeftTool.hidden = hide;
                    widgets.moveRightTool.hidden = hide;
                }
            }

            // You can also use Tooltip configs here, for example:
            // anchorToTarget : false,
            // trackMouse     : true
        }
    },

User avatar
SIM-LTD
Posts: 419
Joined: Thu Mar 28, 2019 4:12 pm

Re: eventTooltip - How to hide the tools

Post by SIM-LTD » Fri Oct 11, 2019 10:02 am

Hi Sergey

Thank you, we really appreciate your support on this.

To be honest we have thought about this way, beforeShow and hiding each element via "hidden"
but we were so focusing on hiding the tools itself, that we lost pretty much time for nothing... :)

Hence, according to you there no way to hide the tools itself directly, except hiding each element of the tools.

User avatar
saki
Core Developer
Core Developer
Posts: 158
Joined: Thu Mar 30, 2017 9:32 am

Re: eventTooltip - How to hide the tools

Post by saki » Fri Oct 11, 2019 10:21 am

You could also try to hide the tools with a css, if you want to hide them for all tooltips.

User avatar
SIM-LTD
Posts: 419
Joined: Thu Mar 28, 2019 4:12 pm

Re: eventTooltip - How to hide the tools

Post by SIM-LTD » Fri Oct 11, 2019 10:29 am

Hi Saki

Right, We did not think about that way too.

Thank you very much.

Can "DomHelper" be used so as to manage some element on the fly? instead of manipulating the CSS file directly?

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 187
Joined: Mon Dec 24, 2018 9:15 am

Re: eventTooltip - How to hide the tools

Post by sergey.maltsev » Fri Oct 11, 2019 10:33 am

Hi!

The code is to show how to hide a certain component if you want.
Off course you could hide all .

Code: Select all

Object.values(tip.tools).forEach(tool => tool.hidden = hide);

User avatar
saki
Core Developer
Core Developer
Posts: 158
Joined: Thu Mar 30, 2017 9:32 am

Re: eventTooltip - How to hide the tools

Post by saki » Fri Oct 11, 2019 2:14 pm

The question is if you want to show and hide the tools on the fly at runtime. In this case hiding and showing them in the code would be a better solution.

If you just want to hide them globally once forever, then you can add a simple css to your stylesheet that would hide them.

Post Reply