https://www.subaru.co.za/wp-content/plugins/wp-store-locator/assets/src/admin/js/modules/helpers/wpsl-ui.js

1/**
2 * UI component helpers
3 * 
4 * @since 3.0.0
5 */
6export const ui = {
7    /**
8     * SVG icons and graphic elements used across the application
9     * 
10     * @since 3.0.0
11     */
12    icons: {
13        /**
14         * Return the SVG markup for a cross/close icon.
15         *
16         * @since  3.0.0
17         * @return {string} SVG markup
18         */
19        cross: function() {
20            return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>';
21        },
22
23        /**
24         * Return the SVG markup for a copy icon.
25         *
26         * @since  3.0.0
27         * @return {string} SVG markup
28         */
29        copy: function() {
30            return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><rect x="7" y="7" width="10" height="10" fill="none" stroke="#999" stroke-width="1.5" rx="1" ry="1"/><rect x="3" y="3" width="10" height="10" fill="white" stroke="#999" stroke-width="1.5" rx="1" ry="1"/></svg>';
31        },
32
33        /**
34         * Return the SVG markup for a copy success icon.
35         *
36         * @since  3.0.0
37         * @return {string} SVG markup
38         */
39        copySuccess: function() {
40            return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><circle cx="10" cy="10" r="8.5" fill="white" stroke="#999" stroke-width="1.5"/><path d="M6 10 L9 13 L14 7" fill="white" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
41        },
42    },
43
44    /**
45     * Dialog related helper functions
46     * 
47     * @since 3.0.0
48     */
49    dialog: {
50        /**
51         * Add a close button to the dialog if it doesn't exist yet
52         * 
53         * @since   3.0.0
54         * @param   {string} dialogClass The class of the dialog container
55         * @returns {void}
56         */
57        addCloseButton: function( dialogClass ) {
58            if ( jQuery( '.' + dialogClass + ' .wpsl-close-cross' ).length === 0 ) {
59                 jQuery( '.' + dialogClass + ' .ui-dialog-titlebar-close' ).remove();
60                 jQuery( '.' + dialogClass + ' .ui-dialog-titlebar' ).append( '<button class="wpsl-close-cross wpsl-dialog-close">' + ui.icons.cross() + '</button>' );
61            }
62        },
63
64        /**
65         * The event namespace one dialog's close handler is bound under.
66         *
67         * Derived from the selector so every dialog owns its own namespace:
68         * these handlers are delegated on document and bound again on each
69         * open, so without one a dialog either stacks handlers forever or --
70         * worse -- unbinds its neighbours along with itself.
71         *
72         * @since   3.0.0
73         * @param   {string} dialogSelector The dialog selector
74         * @returns {string} The namespaced click event
75         */
76        closeNamespace: function( dialogSelector ) {
77            return 'click.wpslDialogClose-' + String( dialogSelector ).replace( /[^a-z0-9]/gi, '' );
78        },
79
80        /**
81         * Bind click handlers to close a jQuery UI dialog.
82         *
83         * @since   3.0.0
84         * @param   {string}   dialogSelector The dialog selector to bind the close handler to
85         * @param   {Function} [callback]     Optional callback to run after closing the dialog
86         * @returns {void}
87         */
88        bindCloseHandler: function( dialogSelector, callback ) {
89            const namespace = this.closeNamespace( dialogSelector );
90
91            // Re-bound on every open, so drop this dialog's previous handler
92            // first -- and only this dialog's.
93            jQuery( document ).off( namespace ).on( namespace, '.ui-widget-overlay, .wpsl-dialog-close', function() {
94                jQuery( dialogSelector ).dialog( 'close' );
95
96                if ( typeof callback === 'function' ) {
97                    callback();
98                }
99            });
100        },
101
102        /**
103         * Remove one dialog's close handler.
104         *
105         * @since   3.0.0
106         * @param   {string} dialogSelector The dialog selector to unbind
107         * @returns {void}
108         */
109        unbindCloseHandler: function( dialogSelector ) {
110            jQuery( document ).off( this.closeNamespace( dialogSelector ) );
111        },
112    },
113
114    /**
115     * Show a WordPress-style snackbar notification at the bottom center of the screen.
116     *
117     * The classic-script screens can't reach this module, so they have the
118     * same markup and styling in wpslSharedFuncs.snackbar()
119     * ( assets/src/admin/js/wpsl-shared-funcs.js ). Keep the two in step.
120     *
121     * @since   3.0.0
122     * @param   {string} message The message to display, already HTML-escaped
123     * @returns {void}
124     */
125    snackbar: function( message ) {
126        jQuery( '.wpsl-snackbar' ).remove();
127
128        const $snackbar = jQuery( '<div class="wpsl-snackbar"><div class="wpsl-snackbar__content">' + message + '</div></div>' );
129        jQuery( 'body' ).append( $snackbar );
130
131        setTimeout( function() {
132            $snackbar.fadeOut( 400, function() { jQuery( this ).remove(); } );
133        }, 3000 );
134    },
135};