Файловый менеджер - Редактировать - /home/elecjxjk/tumaninvestigators.com/wp-content/plugins/wpforms-lite/assets/js/admin/payments/overview.js
Назад
/* eslint-disable camelcase */ /* global flatpickr, Chart, moment, ajaxurl, wpforms_admin_payments_overview, wpforms_admin */ /** * Script for manipulating DOM events in the "Payments Overview" page. * This script will be accessible in the "WPForms" → "Payments" page. * * @since 1.8.2 */ const WPFormsPaymentsOverview = window.WPFormsPaymentsOverview || ( function( document, window, $, ajaxurl, l10n ) { /** * Elements holder. * * @since 1.8.2 * * @type {Object} */ const el = {}; /** * Runtime variables. * * @since 1.8.2 * * @type {Object} */ const vars = { /** * Chart.js instance. * * @since 1.8.2 */ chart: null, /** * Flatpickr instance. * * @since 1.8.2 */ datepicker: null, /** * The ISO 639-2 language code of the WordPress installation. * * @since 1.8.2 */ locale: l10n.locale, /** * Get the base currency code. * * @since 1.8.2 */ currency: l10n.currency, /** * Get the number of decimal points for the currency. * * @since 1.8.4 */ currencyDecimals: l10n.decimals, /** * Cryptographic token for validating authorized Ajax data exchange. * * @since 1.8.2 */ nonce: l10n.nonce, /** * Initial dataset that will appear on the chart. * * @since 1.8.2 */ data: [], /** * Chart type. Options are "Line" or "Bar". * A line chart is a way of plotting data points on a line. * A bar chart provides a way of showing data values represented as vertical bars. * * 1: Bar. * 2: Line. * * @since 1.8.2 */ type: l10n.settings.graph_style === 1 ? 'bar' : 'line', /** * Timespan (date range) delimiter. By default: ' - '. * * @since 1.8.2 */ delimiter: l10n.delimiter, /** * The Moment.js compatible format string to use for the tooltip. * * @since 1.8.5.4 */ tooltipFormat: l10n.date_format, /** * The current page URI. * * @since 1.8.2 * * @return {URL} The current page URI. */ get currentPageUri() { // eslint-disable-next-line compat/compat return new URL( l10n.page_uri ); }, /** * Generic CSS class names for applying visual changes. * * @since 1.8.2 */ classNames: { hide: 'wpforms-hide', ready: 'is-ready', fetching: 'doing-ajax', selected: 'is-selected', calculated: 'is-calculated', }, /** * Start and end dates. * * @since 1.8.2 */ timespan: '', /** * Report stats that are currently being viewed. * * @since 1.8.2 */ report: l10n.active_report, /** * Whether the viewed stats are representing the price amounts. * * @since 1.8.2 */ isAmount: false, /** * Chart color options. * * @since 1.8.2 * * @return {Object} Colors object specified for the graph. */ get colors() { const isLine = this.type === 'line'; return { total_payments: { // Bahama Blue. hoverBorderColor: '#055f9a', hoverBackgroundColor: '#055f9a', borderColor: '#056aab', backgroundColor: isLine ? '#e6f0f7' : '#056aab', }, total_sales: { // Fun Green. hoverBorderColor: '#00831e', hoverBackgroundColor: '#00831e', borderColor: '#008a20', backgroundColor: isLine ? '#e3f3e4' : '#008a20', }, total_refunded: { // Bright Gray. hoverBorderColor: '#373e45', hoverBackgroundColor: '#373e45', borderColor: '#50575e', backgroundColor: isLine ? '#ebebec' : '#50575e', }, default: { // Zest - WPForms. hoverBorderColor: '#cd6622', hoverBackgroundColor: '#cd6622', borderColor: '#e27730', backgroundColor: isLine ? '#fcf1ea' : '#e27730', }, }; }, /** * Translated texts. * * @since 1.8.2 * * @return {Object} Localized strings. */ get i18n() { return l10n.i18n; }, /** * In case the time span extends to other years, the xAxes date display format is updated to include the year identifier. * * @since 1.8.2 * * @return {Object} Localized strings. */ get xAxesDisplayFormat() { if ( ! this.timespan.length ) { return 'MMM D'; } const dates = this.timespan.split( this.delimiter ); if ( ! Array.isArray( dates ) || dates.length !== 2 ) { return 'MMM D'; } const startYear = moment( dates[ 0 ] ).format( 'YYYY' ); const endYear = moment( dates[ 1 ] ).format( 'YYYY' ); return startYear === endYear ? 'MMM D' : 'MMM D YYYY'; }, /** * Returns language-sensitive number formatting instance. * * @since 1.8.2 * * @return {Object} Returns a new NumberFormat object. */ get amountFormatter() { return new Intl.NumberFormat( this.locale, { style: 'currency', useGrouping: true, currencyDisplay: 'narrowSymbol', currency: this.currency, minimumFractionDigits: this.currencyDecimals, maximumFractionDigits: this.currencyDecimals, } ); }, /** * Retrieves the previewed dataset label. * * @since 1.8.2.2 * * @return {string} The dataset tooltip label. */ get datasetLabel() { const $statcard = $( `[data-stats=${ this.report }]` ); if ( ! $statcard.length ) { return this.i18n?.label; } return $statcard.find( '.statcard-label' ).text(); }, /** * Chart.js settings. * * @since 1.8.2 * * @return {Object} Scriptable options as a function which is called for the chart instances. */ get settings() { /* eslint max-lines-per-function: ["error", 200] */ /** * Check if the site is RTL. * * @since 1.9.1 */ const isRTL = $( 'body' ).hasClass( 'rtl' ); return { type: this.type, data: { labels: [], datasets: [ { data: [], label: '', borderWidth: 2, pointRadius: 4, pointBorderWidth: 1, maxBarThickness: 100, ...{ pointBackgroundColor: '#ffffff', ...( this.colors[ this.report ] || this.colors.default ), }, }, ], }, options: { maintainAspectRatio: false, layout: { padding: { left: 15, right: 19, top: 25, bottom: 9, }, }, scales: { x: { type: 'timeseries', offset: this.type === 'bar', time: { tooltipFormat: this.tooltipFormat, }, reverse: isRTL, ticks: { padding: 10, font: { size: 13, color: '#a7aaad', }, labelOffset: 10, minRotation: 25, maxRotation: 25, callback( value, index, values ) { // Distribute the ticks equally starting from the right side of xAxis. const gap = Math.floor( values.length / 7 ); if ( gap < 1 ) { return moment( value ).format( vars.xAxesDisplayFormat ); } if ( ( values.length - index - 1 ) % gap === 0 ) { return moment( value ).format( vars.xAxesDisplayFormat ); } }, }, }, y: { beginAtZero: true, ticks: { maxTicksLimit: 6, padding: 20, font: { size: 13, color: '#a7aaad', }, callback: ( value ) => { // Update the scales if the dataset returned includes price amounts. if ( this.isAmount ) { return this.amountFormatter.format( value ); } // Make sure the tick value has no decimals. if ( Math.floor( value ) === value ) { return value; } }, }, }, }, elements: { line: { tension: 0, fill: true, }, }, animation: false, plugins: { legend: { display: false, }, tooltip: { displayColors: false, rtl: isRTL, callbacks: { label: ( tooltipItem ) => { let label = `${ this.datasetLabel } `; const value = tooltipItem.formattedValue; // Update the scales if the dataset returned includes price amounts. if ( this.isAmount ) { label += this.amountFormatter.format( value ); return label; } label += value; return label; }, }, }, }, }, }; }, }; /** * Public functions and properties. * * @since 1.8.2 */ const app = { /** * Start the engine. * * @since 1.8.2 */ init() { $( app.ready ); }, /** * Document ready. * * @since 1.8.2 */ ready() { app.setup(); app.bindEvents(); app.initDatePicker(); app.initChart(); app.initMultiSelect(); }, /** * Setup. Prepare some variables. * * @since 1.8.2 */ setup() { // Cache DOM elements. el.$document = $( document ); el.$wrapper = $( '.wpforms-payments-wrap-payments' ); el.$form = $( '#wpforms-payments-table' ); el.$spinner = $( '.wpforms-overview-chart .spinner' ); el.$canvas = $( '#wpforms-payments-overview-canvas' ); el.$filterBtn = $( '#wpforms-datepicker-popover-button' ); el.$datepicker = $( '#wpforms-payments-overview-datepicker' ); el.$filterForm = $( '.wpforms-overview-top-bar-filter-form' ); el.$activeStat = el.$filterForm.find( 'input[name="statcard"]' ); el.$table = $( '.wpforms-table-list' ); el.$notice = $( '.wpforms-overview-chart-notice' ); el.$reports = $( '.wpforms-payments-overview-reports' ); el.$multiSelect = $( '.wpforms-multiselect' ); }, /** * Bind events. * * @since 1.8.2 */ bindEvents() { el.$document .on( 'click', { selectors: [ '.wpforms-datepicker-popover', '.wpforms-dash-widget-settings-menu' ] }, app.handleOnClickOutside ); el.$wrapper .on( 'submit', '.wpforms-overview-top-bar-filter-form', app.handleOnSubmitDatepicker ) .on( 'submit', '#wpforms-payments-table', app.handleOnSubmitOverviewTable ) .on( 'click', '#doaction', app.handleOnBulkAction ) .on( 'click', '.wpforms-overview-top-bar-filter-form [type="reset"]', app.handleOnResetDatepicker ) .on( 'change', '.wpforms-overview-top-bar-filter-form [type="radio"]', app.handleOnUpdateDatepicker ) .on( 'click', '.wpforms-payments-overview-reports button', app.handleOnChangeStatCard ) .on( 'click', '.wpforms-dash-widget-settings-menu-save', app.handleOnSaveSettings ) .on( 'click', '#wpforms-payments-mode-toggle', app.handleOnToggleMode ) .on( 'click', '#wpforms-dash-widget-settings-button', { selector: '.wpforms-dash-widget-settings-menu', hide: '.wpforms-datepicker-popover' }, app.handleOnToggle ) .on( 'click', '#wpforms-datepicker-popover-button', { selector: '.wpforms-datepicker-popover', hide: '.wpforms-dash-widget-settings-menu' }, app.handleOnToggle ); }, /** * Create an instance of "flatpickr". * * @since 1.8.2 */ initDatePicker() { if ( ! el.$datepicker.length ) { return; } vars.timespan = el.$datepicker.val(); vars.datepicker = flatpickr( el.$datepicker, { mode: 'range', inline: true, allowInput: false, enableTime: false, clickOpens: false, altInput: true, altFormat: 'M j, Y', dateFormat: 'Y-m-d', locale: { // Localized per-instance, if applicable. ...flatpickr.l10ns[ vars.locale ] || {}, rangeSeparator: vars.delimiter, }, onChange( selectedDates, dateStr, instance ) { // Immediately after a user interacts with the datepicker, ensure that the "Custom" option is chosen. const $custom = el.$filterForm.find( 'input[value="custom"]' ); $custom.prop( 'checked', true ); app.selectDatepickerChoice( $custom.parent() ); if ( dateStr ) { // Update filter button label when date range specified. el.$filterBtn.text( instance.altInput.value ); } }, } ); // Determine if a custom date range was provided or selected. this.handleOnUpdateDatepicker( {}, el.$filterForm.find( 'input[value="custom"]' ).prop( 'checked' ) ); }, /** * Callback which is called when the filter form gets submitted. * * @since 1.8.2 */ handleOnSubmitDatepicker() { // Exclude radio inputs from the form submission. $( this ).find( 'input[type="radio"]' ).attr( 'name', '' ); // Remove the popover from the view. // When the dropdown is closed, aria-expended="false". app.hideElm( el.$filterBtn.next() ); }, /** * Callback for the bulk action. * * @since 1.8.4 * * @param {Object} event An event which takes place in the DOM. */ handleOnBulkAction( event ) { event.preventDefault(); // Get the selected value for the name="action" select element. const $action = el.$wrapper.find( 'select[name="action"]' ); const selectedAction = $action.val(); const actionsToExclude = [ 'trash', 'delete' ]; // Leave early if delete/trash is not selected. // Trash is happening when you move payment to the trash. Delete is when you delete it permanently. if ( ! actionsToExclude.includes( selectedAction ) ) { el.$form.submit(); return; } // Get the selected checkboxes. const $checkboxes = el.$wrapper.find( 'input[name="payment_id[]"]:checked' ); // Leave early if no checkboxes are selected. if ( ! $checkboxes.length ) { el.$form.submit(); return; } // Determine whether the selected payment has a renewal. const hasRenewal = $checkboxes.closest( 'tr' ).hasClass( 'subscription-has-renewal' ); if ( ! hasRenewal ) { el.$form.submit(); return; } const { i18n: { subscription_delete_confirm: message, delete_button: buttonText } } = vars; // Warn the user that the selected payment has a renewal. $.confirm( { title: wpforms_admin.heads_up, content: message, icon: 'fa fa-exclamation-circle', type: 'orange', buttons: { confirm: { text: buttonText, btnClass: 'btn-confirm', keys: [ 'enter' ], action() { el.$form.submit(); }, }, cancel: { text: wpforms_admin.cancel, keys: [ 'esc' ], action() { el.$form.trigger( 'reset' ); }, }, }, } ); }, /** * Callback which is called when the overview table gets submitted. * * @since 1.8.4 */ handleOnSubmitOverviewTable() { // Leave early if the multi-select element is not present. if ( ! el.$multiSelect.length ) { return; } // Prevent empty or unspecified values from being submitted. // This is to avoid having empty values in the $_GET array for aesthetic reasons. $( '.wpforms-multiselect-checkbox-input[value=""]' ).removeAttr( 'name' ); }, /** * Callback which is called when the datepicker "Cancel" button clicked. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. */ handleOnResetDatepicker( event ) { event.preventDefault(); // To return the form to its original state, manually reset it. el.$filterForm.get( 0 ).reset(); // Remove the popover from the view. // When the dropdown is closed, aria-expended="false". app.hideElm( el.$filterBtn.next() ); app.handleOnUpdateDatepicker(); }, /** * Callback which is called when the filter form elements change. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. * @param {boolean} isCustomDates Determine whether a custom date range is provided. */ // eslint-disable-next-line no-unused-vars handleOnUpdateDatepicker( event = {}, isCustomDates = false ) { const $selected = el.$filterForm.find( 'input:checked' ); const $parent = $selected.parent(); const $target = isCustomDates ? el.$datepicker : $selected; const dates = $target.val().split( vars.delimiter ); el.$filterBtn.text( isCustomDates ? $target.next().val() : $parent.text() ); app.selectDatepickerChoice( $parent ); if ( Array.isArray( dates ) && dates.length === 2 ) { // Sets the current selected date(s). vars.datepicker.setDate( dates ); return; } vars.datepicker.clear(); // Reset the datepicker. }, /** * Create an instance of chart. * * @since 1.8.2 */ initChart() { if ( ! el.$canvas.length ) { return; } const elm = el.$canvas.get( 0 ).getContext( '2d' ); const $selected = el.$reports.find( `.${ vars.classNames.selected }` ); vars.report = $selected.data( 'stats' ); vars.isAmount = $selected.hasClass( 'is-amount' ); vars.chart = new Chart( elm, vars.settings ); this.updateChartByReport(); }, /** * Create instances of multi-select. * * @since 1.8.4 */ initMultiSelect() { // Check if multi-select elements and required class are present if ( ! el.$multiSelect.length || ! window.WPFormsMultiSelectCheckbox ) { return; } // Initialize each multi-select element. el.$multiSelect.each( function() { const multiSelectCheckbox = new window.WPFormsMultiSelectCheckbox( this, { showMask: true, delimiter: '|', } ); multiSelectCheckbox.init(); } ); }, /** * Updates main chart stats when user switches between different stat card. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. */ handleOnChangeStatCard( event ) { event.preventDefault(); const $this = $( this ); // If the already selected stat card is clicked, don't process the dataset. if ( $this.hasClass( vars.classNames.selected ) || $this.hasClass( 'disabled' ) ) { return; } app.spinner(); vars.report = $this.data( 'stats' ); vars.isAmount = $this.hasClass( 'is-amount' ); el.$reports.find( 'button' ).removeClass( vars.classNames.selected ); $this.addClass( vars.classNames.selected ); // If the `statcard` field is not present, create it. if ( ! el.$activeStat.length ) { // Append a hidden input field for the statcard. el.$filterForm.append( '<input type="hidden" name="statcard">' ); // Update the reference to the activeStat element. el.$activeStat = el.$filterForm.find( 'input[name="statcard"]' ); } // Update the value of the statcard field with the selected report. el.$activeStat.val( vars.report ); // Update the chart stats with consideration to possible form stats being viewed. app.updateChartByReport(); }, /** * Save the user's preferred graph style and color scheme. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. */ handleOnSaveSettings( event ) { event.preventDefault(); const $wrapper = $( this ).closest( '.wpforms-dash-widget-settings-container' ); const graphStyle = $wrapper.find( 'input[name="wpforms-style"]:checked' ).val(); vars.type = Number( graphStyle ) === 1 ? 'bar' : 'line'; const options = Object.assign( {}, vars.settings ); options.data.labels = vars.chart.data.labels; options.data.datasets[ 0 ].data = vars.chart.data.datasets[ 0 ].data; vars.chart.destroy(); const elm = el.$canvas.get( 0 ).getContext( '2d' ); vars.chart = new Chart( elm, options ); $.post( ajaxurl, { graphStyle, _ajax_nonce: vars.nonce, action: 'wpforms_payments_overview_save_chart_preference_settings', } ).done( function() { el.$wrapper.find( '.wpforms-dash-widget-settings-menu' ).hide(); } ); }, /** * Callback which is called when the "Toggle Mode" button clicked. * * @since 1.8.2 */ handleOnToggleMode() { const { currentPageUri: url } = vars; url.searchParams.set( 'mode', this.checked ? 'test' : 'live' ); window.location.href = url.href; }, /** * Display or hide the matched elements. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. */ handleOnToggle( event ) { event.preventDefault(); event.stopPropagation(); const { data: { selector, hide } } = event; // Toggle the visibility of the matched element. el.$wrapper.find( selector ).toggle( 0, function() { const $selector = $( selector ); // When the dropdown is open, aria-expended="true". $selector.attr( 'aria-expanded', $selector.is( ':visible' ) ); } ); // In case the other popover is open, let’s hide it to avoid clutter. // When the dropdown is closed, aria-expended="false". app.hideElm( el.$wrapper.find( hide ) ); }, /** * Hide the matched elements when clicked outside their container. * * @since 1.8.2 * * @param {Object} event An event which takes place in the DOM. */ handleOnClickOutside( event ) { const { target, data: { selectors } } = event; $.each( selectors, function( index, selector ) { if ( ! $( target ).closest( `${ selector }:visible` ).length ) { app.hideElm( el.$wrapper.find( selector ) ); } } ); }, /** * Either fills the container with placeholder data or determines * whether actual data is available to process the chart dataset. * * @since 1.8.2 * * @param {Object} data Chart dataset data. * * @return {Object} Labels and dataset data object. */ processDatasetData( data ) { const labels = []; const datasets = []; if ( $.isPlainObject( data ) && Object.keys( data ).length > 0 ) { el.$notice.addClass( vars.classNames.hide ); $.each( data || [], function( index, item ) { const date = moment( item.day ); labels.push( date ); datasets.push( { x: date, y: item?.count || 0, } ); } ); return { labels, datasets }; } const { i18n: { no_dataset: placeholderText } } = vars; // If there is a placeholder text for the current report, use it. if ( placeholderText?.[ vars.report ] ) { el.$notice.find( 'h2' ).text( placeholderText[ vars.report ] ); } el.$notice.removeClass( vars.classNames.hide ); let date; const end = moment().startOf( 'day' ); const days = 30; const minY = 5; const maxY = 20; for ( let i = 1; i <= days; i++ ) { date = end.clone().subtract( i, 'days' ); labels.push( date ); datasets.push( { x: date, y: Math.floor( Math.random() * ( maxY - minY + 1 ) ) + minY, // NOSONAR not used in secure contexts. } ); } return { labels, datasets }; }, /** * Populate the chart with a fresh set of dataset data. * * @since 1.8.2 * * @param {Array} data Chart dataset data. */ updateChart( data ) { const { labels, datasets } = app.processDatasetData( data || [] ); vars.chart.data.labels = labels; vars.chart.data.datasets[ 0 ] = vars.settings.data.datasets[ 0 ]; vars.chart.data.datasets[ 0 ].data = datasets; vars.chart.update(); el.$spinner.addClass( vars.classNames.hide ); }, /** * Fetch and process the chart dataset data for the selected stat card. * * @since 1.8.2 * * @param {Object} args Optional. Additional arguments provided for the Ajax request. */ updateChartByReport( args ) { // Cache dataset of payments for the chart stats. if ( vars.report && Object.hasOwn( vars.data, vars.report ) ) { app.updateChart( vars.data[ vars.report ]?.data || [] ); return; } // Add a class name indicating that the chart is fetching data. // This is mainly to avoid fast clicking on the stat cards to avoid multiple Ajax requests. el.$reports.addClass( vars.classNames.fetching ); $.post( ajaxurl, $.extend( {}, { report: vars.report, dates: vars.timespan, _ajax_nonce: vars.nonce, action: 'wpforms_payments_overview_refresh_chart_dataset_data', }, args ), function( { data } ) { vars.data = Object.assign( { [ vars.report ]: data }, vars.data ); app.updateChart( data?.data || [] ); app.updateReports( data?.reports || {} ); } ).done( function() { el.$reports.addClass( vars.classNames.ready ); el.$reports.removeClass( vars.classNames.fetching ); } ); }, /** * Reflect payments summary stats in their corresponding areas (elements). * * @since 1.8.2 * * @param {Object} reports Reports summary stats queried from the database. */ updateReports( reports ) { // Bail early, in case given reports object is empty. if ( $.isEmptyObject( reports ) ) { return; } el.$reports .find( 'li' ).each( // eslint-disable-next-line complexity function() { const $this = $( this ); const $button = $this.find( 'button' ); // Skip iterating over stat cards that are disabled. if ( $button.hasClass( 'disabled' ) ) { return true; // This is the same as 'continue'. } const stats = $button.data( 'stats' ); const value = reports[ stats ] || 0; const delta = Number( reports[ `${ stats }_delta` ] ) || 0; const $value = $this.find( '.statcard-value' ); const $delta = $this.find( '.statcard-delta' ); $value.addClass( vars.classNames.calculated ).html( value ); $delta.addClass( vars.classNames.calculated ).html( Math.abs( delta ) ); if ( delta !== 0 ) { $delta.addClass( Number( delta > 0 ) ? 'is-upward' : 'is-downward' ); } // Skip iterating over stat cards that do not represent an amount. if ( ! $button.hasClass( 'is-amount' ) ) { return; // This is the same as 'continue'. } // Add a title attribute to the stat card value if it does not have one. $value.attr( 'title', $value.text() ); } ); }, /** * Pick an option (given) from the datepicker’s choices. * * @since 1.8.2 * * @param {Object} $this Reference to the DOM element. */ selectDatepickerChoice( $this ) { el.$filterForm.find( 'label' ).removeClass( vars.classNames.selected ); $this.addClass( vars.classNames.selected ); }, /** * Signal to users that the processing of their request is underway and will soon complete. * * @since 1.8.2 */ spinner() { el.$spinner.removeClass( vars.classNames.hide ); }, /** * Hides the given DOM element. * * @since 1.8.2 * * @param {Object} $elm Reference to the DOM element. */ hideElm( $elm ) { $elm.attr( 'aria-expanded', 'false' ).hide(); }, }; // Provide access to public functions/properties. return app; }( document, window, jQuery, ajaxurl, wpforms_admin_payments_overview ) ); // Initialize. WPFormsPaymentsOverview.init();
| ver. 1.4 |
Github
|
.
| PHP 8.1.30 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка