Files
vivespos-landing/modules/system/assets/ui/docs/input-monitor.md
avives 1f72193a64
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
- Base: wintercms/winter branch 1.2 (full framework)
- Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS
- Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication
- Partials: hero (offline-first), features, modes (offline/nube toggle),
  screenshots, pricing (3 planes), comparison, FAQ, CTA
- Plugin VivesPOS.Site with ContactForm
- Dockerfile: PHP 8.2 Apache, port 80, healthcheck
- Added winter/wn-pages, blog, sitemap, seo plugins
- Active theme set to vivespos
2026-08-21 19:29:00 -06:00

1.9 KiB

Input Monitoring

This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page. The script adds the "oc-data-changed" class to the form element when the form data is changed.

<form
    data-change-monitor
    data-window-close-confirm="There is unsaved data"
>
    ...
</form>

Example

Click the "Mark changed" button and "Reload page".

<form
    data-window-close-confirm="There is unsaved data"
    data-change-monitor>

    <button type="button" onclick="$(this).trigger('change')">
        Mark changed
    </button>

    <button type="button" onclick="$(this).trigger('unchange.oc.changeMonitor')">
        Mark saved
    </button>

    <hr />

    <button type="button" onclick="window.location.reload()">
        Reload page
    </button>

</form>

Supported data attributes

  • data-change-monitor - enables the plugin form a form
  • data-window-close-confirm - confirmation message to show when a browser window is closing and there is unsaved data

Supported events

  • change - marks the form data as "changed". The event can be triggered on any element within a form or on a form itself.
  • unchange.oc.changeMonitor - marks the form data as "unchanged". The event can be triggered on any element within a form or on a form itself.
  • pause.oc.changeMonitor - temporary pauses the change monitoring. The event can be triggered on any element within a form or on a form itself.
  • resume.oc.changeMonitor - resumes the change monitoring. The event can be triggered on any element within a form or on a form itself.

Triggered events

  • changed.oc.changeMonitor - triggered when the form data changes.
  • unchanged.oc.changeMonitor - triggered when the form data unchanges.
  • ready.oc.changeMonitor triggered when the change monitor instance finishes initialization.

JavaScript API

$('#form').changeMonitor()