Web Development

Creating a Synthetic Mouse Event: Event Sequence?

14-Jul-24 21:44

You should probably post this as a tip rather than a message in a forum that will soon be buried on page 42. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Steve Raw13-Jul-24 9:12

Steve Raw

13-Jul-24 9:12

I wrote a function in JavaScript that creates synthetic events to simulate a full mouse event. What I mean by "full" is that I'm creating and dispatching the "mouseenter", "mouseover", "mousemove", "mousedown", "mouseup", "click", and "mouseout" events.

In what order do the "mouseenter", "mouseover", and "mousemove" events occur? I've tried looking this up, but I'm not getting anything.

Re: Creating a Synthetic Mouse Event: Event Sequence?

Richard Deeming14-Jul-24 21:42

Re: Creating a Synthetic Mouse Event: Event Sequence?

14-Jul-24 21:42

Why not try it yourself and see?
Edit fiddle - JSFiddle - Code Playground[^]

In Firefox, I get over, then enter, then move. But if the precise order isn't documented anywhere, then it's probably not defined, and any code that relies on a specific sequence is most likely broken and wrong. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Jeremy Falcon17-Jul-24 16:32

fullcalendar with resourcetimeline laravel php

17-Jul-24 16:32

Just to add to what Richard said, you should read up on what these events actually do. Then your code will be less order dependent and more so intent dependent - even if they are synthetic. JavaScript really isn't a sequential kinda language anyway, despite its single execution thread.

The mouseover event triggers when the mouse pointer enters the div element and its child elements.

The mouseenter event is only triggered when the mouse pointer enters the div element.

The mousemove event triggers every time the mouse pointer is moved over the div element.

If you're writing code that performs entry logic on both enter and over, for instance, your code is probably running too slow.

W3C Schools sucks, but this demo should convey some concepts ok-ish.
Mouse Enter vs Over vs Move

Jeremy Falcon

mohammed naseralla27-Jun-24 0:43

mohammed naseralla

27-Jun-24 0:43

how do you use Draggable events with read start and end dates from the event and fix them but choose resource?

<pre lang="text"><pre lang="Javascript">
<pre><script id="rendered-js">
        document.addEventListener('DOMContentLoaded', function () {

            var date = new Date()
            var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear()

            var Calendar = FullCalendar.Calendar;
            //var Draggable = FullCalendar.Draggable;

            var containerEl = document.getElementById('external-events');
            var checkbox = document.getElementById('drop-remove');

            var Draggable = FullCalendarInteraction.Draggable;

            new Draggable(containerEl, {
                itemSelector: '.external-event',
                eventData: function (eventEl) {
                    return {
                        id: eventEl.getAttribute('data-id'),
                        title: eventEl.getAttribute('data-title'),
                        start: eventEl.getAttribute('data-start'),
                        end: eventEl.getAttribute('data-end'),
                        resourceId: eventEl.getAttribute('data-resource-id'),
                        description: eventEl.getAttribute('data-description'),
                        backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                        borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                        textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color')
                    };
                }
            });


            let calendarEl = document.getElementById('calendar');
            let calendar;

            let start = '2024-05-01';
            let end = '2024-06-31';

            let resourcesurl = '/resources';//alert(resourcesurl);
            let zone = '{{$zone}}';
            let available = '{{$available}}';
            let resourcesIndex = 0;

            if (zone === '1') {
                resourcesIndex += 1;
                if (resourcesIndex === 1) {
                    resourcesurl += '?zone=on';
                } else {
                    resourcesurl += '&zone=on';
                }
            }
            if (available === '1') {
                resourcesIndex += 1;
                if (resourcesIndex === 1) {
                    resourcesurl += '?available=on';
                } else {
                    resourcesurl += '&available=on';
                }
            }

            u/foreach ($Branches as $key => $branch)
                @isset($data['BranchChoose'.$key])
                resourcesIndex += 1;
            if (resourcesIndex === 1) {
                resourcesurl += '?BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
            } else {
                resourcesurl += '&BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
            }
            @endisset
            @endforeach

            calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'resourceTimeline'],
                timeZone: 'UTC',
                defaultView: 'resourceTimelineDay',
                aspectRatio: 1.5,
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay'//,resourceTimelineWeek,resourceTimelineMonth
                },

                views: {
                    resourceTimelineDay: {
                        duration: {days: 10},
                        // type: 'timeline',
                        slotDuration: '{{$plus}}'
                    }
                },

                now: '{{$start_str_now}}',
                editable: true,
                droppable: true,
                resourceLabelText: '@lang("Car Plate Number")',
                resources: resourcesurl,//resourcesurl,//'/resources?zone=on&available=on',//resourcesurl,//'/resources',
                events: '/events?days=10&date={{$start_str_now}}',//?start=${start}&end=${end}

                eventRender: function (info) {

                    var eventObj = info.event;
                    var start = eventObj.start;
                    var end = eventObj.end;
                    var title = eventObj.title;

                    console.log('Event: ' + title + '\nStart: ' + start + '\nEnd: ' + end);

                    // // Fix the start and end dates here
                    // info.event.setStart('2024-06-23T00:00:00'); // Example fixed start date
                    // info.event.setEnd('2024-06-30T00:00:00');   // Example fixed end date

                    // Clear any existing icons
                    info.el.querySelectorAll('.custom-icon').forEach(function (icon) {
                        icon.remove();
                    });

                    let titleEl = '';

                    // Add custom icons before the title
                    if (info.event.extendedProps.icons) {
                         titleEl = info.el.querySelector('.fc-title');
                        info.event.extendedProps.icons.forEach(function (iconData) {
                            var icon = document.createElement('span');
                            icon.classList.add('custom-icon');
                            icon.innerHTML = iconData.html;
                            icon.setAttribute('title', iconData.tooltip); // Set tooltip for icon
                            // Insert icon before the title element
                            titleEl.parentNode.insertBefore(icon, titleEl);
                        });
                    }

                    // Set tooltip for the title
                    if (info.event.extendedProps.tooltip) {
                        info.el.querySelector('.fc-title').setAttribute('title', info.event.extendedProps.tooltip);
                    }


                    // info.event.start = 'Sun Jun 23 2024 03:00:00 GMT+0300 (GMT+03:00)';
                    // info.event.end = 'Sun Jun 30 2024 03:00:00 GMT+0300 (GMT+03:00)';
                    {{--console.log('Event id:',info.event.id);--}}
                    {{--$.ajax({--}}
                    {{--    url: '/calendar/ID',--}}
                    {{--    method: 'POST',--}}
                    {{--    data: {--}}
                    {{--        id: info.event.id,--}}
                    {{--        resourceId: info.event.id,--}}
                    {{--        // start: startDate,--}}
                    {{--        // end: endDate,--}}
                    {{--        _token: '{{ csrf_token() }}'--}}
                    {{--    },--}}
                    {{--    success: function(response) {--}}
                    {{--        // Assuming the response contains new start and end dates--}}
                    {{--        var newStart = response.start;--}}
                    {{--        var newEnd = response.end;--}}

                    {{--        info.event.setStart(newStart);--}}
                    {{--        info.event.setEnd(newEnd);--}}

                    {{--        console.log('Event newstart:',newStart);--}}
                    {{--        console.log('Event newend:',newEnd);--}}
                    {{--    },--}}
                    {{--    error: function (xhr) {--}}
                    {{--        info.revert();--}}
                    {{--    }--}}
                    {{--});--}}



                    // Calculate and display the duration
                    if (info.event.start && info.event.end) {
                        console.log('Event start:',info.event.start);
                        console.log('Event end:',info.event.end);

                        var duration = moment(info.event.end).diff(moment(info.event.start), 'hours');
                        var durationEl = document.createElement('span');
                        durationEl.classList.add('event-duration');
                        durationEl.innerText = `(${duration} hrs)`;

                         titleEl = info.el.querySelector('.fc-title');
                        if (titleEl) {
                            titleEl.appendChild(durationEl);
                        } else {
                            var timeEl = document.createElement('div');
                            timeEl.classList.add('fc-title');
                            timeEl.appendChild(durationEl);
                            info.el.appendChild(timeEl);
                        }
                    }

                    console.log('Event ID:', info.event.id);

                    console.log('Event ID:', 222222);
                },

                dateClick: function (info) {
                    var selectedDate = info.dateStr;
                    var elements = document.querySelectorAll('.fc-daygrid-day[data-date="' + selectedDate + '"]');
                    elements.forEach(function (element) {
                        element.style.backgroundColor = 'lightgreen';
                    });
                    console.log('Event ID:', 111111);
                },

                eventDidMount: function (info) {
                    // Change background on hover

                    // console.log('Event ID:', element.style.backgroundColor);

                    let element = info.el;
                    let originalBackground = element.style.backgroundColor;

                    // console.log('Event ID:', element.style.backgroundColor);

                    element.addEventListener('mouseover', function () {
                        // console.log('Event ID:', element.style.backgroundColor);
                        element.style.backgroundColor = 'lightgreen';
                    });

                    element.addEventListener('mouseout', function () {
                        // console.log('Event ID:', element.style.backgroundColor);
                        element.style.backgroundColor = originalBackground;
                    });
                },

                drop: function (info) {
                    if ($('#drop-remove').is(':checked')) {
                        info.draggedEl.parentNode.removeChild(info.draggedEl);
                    }
                },

                eventReceive: function(info) {
                    var event = info.event;

                    // Get start and end dates
                    // var startDate = event.start.toISOString();
                    // var endDate = event.end ? event.end.toISOString() : startDate;

                    console.log('Event ID:', event.id);
                    //console.log('Resource ID:', event.getResources()[0].id);
                    // console.log('Start Date:', startDate);
                    // console.log('End Date:', endDate);

                    $.ajax({
                        url: '/calendar/update',
                        method: 'POST',
                        data: {
                            id: event.id,
                            resourceId: event.getResources()[0].id,
                            // start: startDate,
                            // end: endDate,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            alert(response.success);
                            calendar.refetchEvents();
                        },
                        error: function (xhr) {
                            info.revert();
                        }
                    });
                },

                eventDrop: function (event, delta, revertFunc) {
                    //console.log('Event ID:', event.event.id);
                    //console.log('Event ID:', event.event._def.resourceIds[0]);
                    $.ajax({
                        url: '/calendar/update',
                        method: 'POST',
                        data: {
                            id: event.event.id,
                            resourceId: event.event._def.resourceIds[0],
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            alert(response.success);
                        },
                        error: function (xhr) {
                            revertFunc();
                        }
                    });
                },

            });
            calendar.render();



            $('.fc-event').mouseenter(function () {
                $(this).addClass('fc-event-hover');
            });
            $('.fc-event').mouseleave(function () {
                $(this).removeClass('fc-event-hover');
            });

            // // Initialize the external events
            // $('#external-events .external-event').each(function () {
            //     // Store data so the calendar knows to render an event upon drop
            //     $(this).data('event', {
            //         title: $.trim($(this).text()), // Use the element's text as the event title
            //         stick: true // Maintain the event on the calendar after it is dropped
            //     });
            //
            //     // Make the event draggable using jQuery UI
            //     $(this).draggable({
            //         zIndex: 999,
            //         revert: true, // Will cause the event to go back to its original position after the drag
            //         revertDuration: 0 // 0 means no animation
            //     });
            //
            // });

            // Initialize the external events
            $('#external-events .external-event').each(function () {
                // Make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true, // Will cause the event to go back to its original position after the drag
                    revertDuration: 0, // 0 means no animation
                    // Use the helper function to create a clone that represents the event
                    helper: function () {
                        var title = $(this).text().trim();
                        return $('<div class="fc-event">').text(title);
                    },
                    // Pass the event data to FullCalendar on drag start
                    start: function (event, ui) {
                        var eventData = {
                            id: $(this).attr('data-id'),
                            title: $(this).text().trim(),
                            start: $(this).attr('data-start'),
                            end: $(this).attr('data-end'),
                            resourceId: $(this).attr('data-resource-id'),
                            description: $(this).attr('data-description'),
                            backgroundColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
                            borderColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
                            textColor: window.getComputedStyle(this, null).getPropertyValue('color')
                        };
                        // Store the event data on the dragged element
                        $(this).data('eventData', eventData);
                    }
                });
            });



        });
        //# sourceURL=pen.js
    </script>

JavaScript

<pre lang="HTML">

<pre><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Draggable Events</h4>
                        </div>
                        <div class="card-body">
                            <div id="external-events">
                                <!-- PHP loop to generate draggable events -->
                                @foreach ($events as $event)
                                    <div class="external-event"
                                         id="event_{{ $event->id }}"
                                         data-id="{{ $event->id }}"
                                         data-title="{{ $event->title }}"
                                         data-start="{{ $event->start }}"
                                         data-end="{{ $event->end }}"
                                         data-resource-id="{{ $event->resourceId }}"
                                         data-description="{{ $event->description }}"
                                         style="background-color: {{ $event->color }}; color: white;">
                                        {{ $event->title }}
                                    </div>
                                @endforeach
                                <div class="checkbox">
                                    <label for="drop-remove">
                                        <input type="checkbox" checked="checked" readonly id="drop-remove">
                                        remove after drop
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>

Can you use ApiKey and JWT in the same web API

Mycroft Holmes24-Jun-24 15:29

Mycroft Holmes

24-Jun-24 15:29

I have a web api that services both wpf and browser clients. WPF only requires and ApiKey built into the application while the web will require authentication and authorisation (using JWT bearer tokens).

If so does anyone have an example.

Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP

Do I need Open API when using Azure

Mycroft Holmes12-Jun-24 16:06

Mycroft Holmes

12-Jun-24 16:06

I have a really simple API and see no need to implement open API except I want to host it on Azure (where my 2 table database is hosted). The overhead and learning curve for swagger is greater than the API learning curve.

So is it possible to host a non Open API on azure.

[edit]Search co pilot for "do I need open api to publish to azure" - the answer is no you do not need it. [/edit]

Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP

modified 14-Jun-24 18:20pm.

Opinions of WIX

DerekT-P11-Jun-24 9:19

DerekT-P

11-Jun-24 9:19

I'm a long-term web developer, used to building web-based applications in ASP.Net and using CSS, semantic markup, Javascript, AJAX and dynamically-generated content at the server. I'm happy hand-coding CSS and crafting HTML using classes, defining grids, floats etc. etc..

I've recently been "commandeered" by a charity I volunteer with to assist their overworked webmaster. Their website is primarily static pages, and end-users can add blog entries for specific categories. There's no server-side form processing involved. BUT the site is running on the WIX platform. It is possible to write page-specific CSS, but it won't do you much good as WIX generates its own HTML from your definitions of strips, sections, text etc - and doesn't let you add classnames or element IDs.

The webmaster reckons WIX is the bees-knees and claims that "Wix is probably the leading web platform around today. ... Wix is truly state of the art and the market leader." He also claims that it generates "responsive pages" - but the "responsiveness", such as it is, is done at the server. This means if you open a page on a mobile phone, then turn it into landscape, the page doesn't re-flow or re-structure; it just makes everything bigger to fill the width. This is NOT my understanding of "responsive design"...

I'm curious as to others' opinion of Wix, and whether I'm missing something obvious, or am way behind the web design trend.

Telegraph marker posts ... nothing to do with IT
Phasmid email discussion group ... also nothing to do with IT
Beekeeping and honey site ... still nothing to do with IT

Richard Deeming11-Jun-24 21:44

11-Jun-24 21:44

DerekT-P wrote:
probably the leading web platform around today. ... truly state of the art and the market leader.

Never heard of it, but based on that quote, it sounds like the webmaster has swallowed their marketing department's entire supply of BS. Laugh | :laugh:

According to Wikipedia[^], they have previously been caught stealing code from WordPress without complying with the license. They've also deleted websites at the request of the Chinese government, and fired an employee for being critical of Israel. So probably not the most trustworthy of companies then.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Jeremy Falcon23-Jul-24 13:09

23-Jul-24 13:09

Richard Deeming wrote:
they have previously been caught stealing code from WordPress without complying with the license. They've also deleted websites at the request of the Chinese government, and fired an employee for being critical of Israel. So probably not the most trustworthy of companies then.

Holy crap. Never knew any of this. So... might be time to rethink recommending them to smaller website owners.

Jeremy Falcon

Steve Raw17-Jun-24 14:52

Steve Raw

17-Jun-24 14:52

DerekT-P wrote:
I'm a long-term web developer, used to building web-based applications in ASP.Net and using CSS, semantic markup, Javascript, AJAX and dynamically-generated content at the server. I'm happy hand-coding CSS and crafting HTML using classes, defining grids, floats etc. etc..

It sounds like you know what you're doing.

DerekT-P wrote:
BUT the site is running on the WIX platform.

Oh, my...That's awful. I am so sorry to hear this.

DerekT-P wrote:
The webmaster reckons WIX is the bees-knees and claims that "Wix is probably the leading web platform around today. ... Wix is truly state of the art and the market leader."

Were you able to keep from laughing when he told you this? What market is he referring to? The local flea market? That's like saying "Notepad" is the industry standard IDE for software development.

I've never encountered a web design editor that improved the quality of my work or allowed me to develop more quickly. I remember using Dreamweaver back when Macromedia owned it. It was such a hassle to do the simplest of things and all it did was get in the way. Then we had NetObjects Cold Fusion. That was just as useless. However, I could say that if a person wants to throw together a cookie-cutter website, and they have no experience whatsoever in this field, then it's probably a great tool.

The thing to remember is that the tool is only as good as the person who uses it. Imagine what Pablo Picasso could do with a box of crayons. Compare that to someone without artistic talent using the most advanced digital art application out there. I'm talking about "Corel Painter". With great accuracy, it simulates the appearance and behavior of traditional media, such as oil painting, pastels, graphite, airbrush, pen and ink, and the list goes on.

Could Pablo Picasso do more with crayons than someone who lacks artistic talent and uses the most advanced tools out there? My money is on Picasso and his crayons every time.

This unfortunate "webmaster" is out of touch with reality. Does he share his other beliefs with you? If so, do those beliefs defy reality? He may have a serious condition. Such a condition could cause him harm.

In the most severe cases, people who undergo this type of psychotic break from reality exhibit delusions of grandeur. An afflicted person might believe they can fly and jump off the roof of a building.

It may start off with using WIX, but that could lead to using things such as Microsoft Edge. Once a person starts using something like that, it's only a matter of time until they start using crack, and Python.

Friends don't let friends use WIX. Laugh | :laugh:

Jeremy Falcon23-Jul-24 13:07

23-Jul-24 13:07

Steve Raw wrote:
What market is he referring to? The local flea market?

Jeremy Falcon

Jeremy Falcon23-Jul-24 13:06

23-Jul-24 13:06

DerekT-P wrote:
The webmaster reckons WIX is the bees-knees and claims that "Wix is probably the leading web platform around today. ... Wix is truly state of the art and the market leader."

Anyone who drops buzzword nonsense like that is not a legit professional. At beast he's been hanging around too many business types and his ego makes him think he knows all about the web or he's just flat-out incompetent. Either way, saying crap like that is amateur hour.

That being said, nothing wrong with WIX. It's not the holy grail home dude pretends it is. But, it does have its place. It's great for people that just want to throw together a simple site or mom and pop shops who don't need anything hard core and just want to put a web page up. It'll never replace custom work or heavy lifting, but it can be a great way to get people started with their own site and maybe do a little ecom or put a family photo album online, etc.

Just know the market it serves. If you're a professional web dev even, and don't want to spend your time working on volunteer sites (like this), it's great. If they need anything with more custom power, they can pay for custom dev work. But, most folks just starting out can't afford that. So, I'm a fan of WIX. Just know its market and don't believe some dude with an ego.

Jeremy Falcon

Configuration Error

Richard Andrew x6415-May-24 10:32

15-May-24 10:32

I configured my website in IIS to use Windows Authentication, and it works when I don't try to add Authorization Rules.

However, I added an Allow rule to allow only users in the Administrators group, and it gives the below error when attempting to load the page:

HTTP Error 500.19 - Internal Server Error

Quote:
Cannot add duplicate collection entry of type 'add' with combined key attributes 'users, roles, verbs' respectively set to ', Administrators, '

This is what my web config looks like:
<security>
<authorization>
<remove users="*" roles="" verbs="" />
<add accessType="Allow" users="" roles="Administrators" />
</authorization>
</security>

Can anyone see what I'm doing wrong?

The difficult we do right away...
...the impossible takes slightly longer.

Re: Configuration Error

Richard Deeming15-May-24 21:43

15-May-24 21:43

That matches the configuration sample in the documentation:
Security Authorization <authorization> | Microsoft Learn[^]

Based on the error, it sounds like you have authorization rules configured further up the hierarchy - either a parent folder, a parent application, or machine-wide. You could try using IIS Manager to look at the configured rules, using the "Authorization Rules" option in the IIS group rather than the ".NET Authorization Rules" in the ASP.NET group.

As a brute-force approach, you could clear the rules first:

XML

<security>
    <authorization>
        <clear />
        <add accessType="Allow" users="" roles="Administrators" />
    </authorization>
</security>

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Configuration Error

Richard Andrew x6416-May-24 3:27

Identity Management Recommendations

16-May-24 3:27

Thanks, Richard. I didn't realize the multilayered nature of the settings.

I made sure that the settings on the server, website and application were all the same, and now it works. Smile | :)

The difficult we do right away...
...the impossible takes slightly longer.

Richard Andrew x6414-May-24 3:45

Re: Identity Management Recommendations

14-May-24 3:45

My company wants to create an internal portal website as a gateway to our applications that is hosted in an on-premises web server.

I don't want to try to re-invent the identity management, login and authorization process.

Is there any third-party solution that can be integrated with a local website to perform login functionality and user management?

The difficult we do right away...
...the impossible takes slightly longer.

Richard Deeming14-May-24 3:51

Re: Identity Management Recommendations

14-May-24 3:51

If it's a Windows server on your local network, why not use integrated / Windows authentication[^]? That way, you don't need to worry about storing or validating the user's credentials. Smile | :)

I generally combine that with a database to map Windows usernames to application-specific roles, with some admin screens to manage the mapping. But if your AD infrastructure is sound, you could potentially use AD group membership to manage access to the site's features, moving all of that admin onto the network administrators instead.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Richard Andrew x6414-May-24 4:32