Skip to content

Commit

Permalink
refactor: typescript support and custom popup
Browse files Browse the repository at this point in the history
  • Loading branch information
Soare-Robert-Daniel committed Sep 2, 2024
1 parent 649358f commit 3f0737b
Show file tree
Hide file tree
Showing 6 changed files with 397 additions and 63 deletions.
21 changes: 14 additions & 7 deletions classes/fields.class.php
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,17 @@ function load_script( $hook ) {

wp_enqueue_script( 'ppom-inputmask', PPOM_URL . '/js/inputmask/jquery.inputmask.min.js', array( 'jquery' ), '5.0.6', true );

// Popup
wp_enqueue_script( 'ppom-popup', PPOM_URL . '/js/popup.js', [], PPOM_VERSION, true );

// PPOM Meta Table File
wp_enqueue_script( 'ppom-meta-table', PPOM_URL . '/js/admin/ppom-meta-table.js', array( 'jquery' ), PPOM_VERSION, true );
wp_enqueue_script( 'ppom-meta-table', PPOM_URL . '/js/admin/ppom-meta-table.js', array( 'jquery', 'ppom-popup' ), PPOM_VERSION, true );

// Font-awesome File
if ( ppom_load_fontawesome() ) {
wp_enqueue_style( 'ppom-fontawsome', PPOM_URL . '/css/font-awesome/css/font-awesome.min.css' );
}

// Swal Files
wp_enqueue_style( 'ppom-swal', PPOM_URL . '/js/sweetalert/sweetalert2.min.css' );
wp_enqueue_script( 'ppom-swal', PPOM_URL . '/js/sweetalert/sweetalert2.js', [], PPOM_VERSION, true );

// Select2 Files
wp_enqueue_style( 'ppom-select2', PPOM_URL . '/css/select2.css' );
wp_enqueue_script( 'ppom-select2', PPOM_URL . '/js/select2.js', array( 'jquery' ), PPOM_VERSION, true );
Expand Down Expand Up @@ -136,7 +135,7 @@ function load_script( $hook ) {
'ppom-field',
PPOM_URL . '/js/admin/ppom-admin.js',
array(
'ppom-swal',
'ppom-popup',
'ppom-select2',
'ppom-tabletojson',
'ppom-datatables',
Expand Down Expand Up @@ -166,7 +165,15 @@ function load_script( $hook ) {
'importLabel'=>esc_html__( 'Import Field Groups ', 'woocommerce-product-addon' ),
'importLockedLabel'=>esc_html__( 'Import Field Groups (PRO)', 'woocommerce-product-addon' ),
'freemiumCFRContent' => \PPOM_Freemium::get_instance()->get_freemium_cfr_content(),
'freemiumCFRTab' => \PPOM_Freemium::TAB_KEY_FREEMIUM_CFR
'freemiumCFRTab' => \PPOM_Freemium::TAB_KEY_FREEMIUM_CFR,
'popup' => [
'confirmTitle' => __( 'Are you sure?', 'woocommerce-product-addon' ),
'confirmationBtn' => __( 'Confirm', 'woocommerce-product-addon' ),
'cancelBtn' => __( 'Cancel', 'woocommerce-product-addon' ),
'finishTitle' => __( 'Done', 'woocommerce-product-addon' ),
'errorTitle' => __( 'Error', 'woocommerce-product-addon' ),
'checkFieldTitle' => __( 'Please at least check one field!', 'woocommerce-product-addon' ),
]
]
);

Expand Down
84 changes: 84 additions & 0 deletions css/ppom-admin.css
Original file line number Diff line number Diff line change
Expand Up @@ -1163,4 +1163,88 @@ a[data-modal-id="ppom-nm-plugins-modal"] {

#ppom-admin-changelog-header-top {
padding: 15px 30px 0 0;
}

/* CSS for popup.js */
.ppom-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.ppom-popup {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 500px;
padding: 40px 50px 20px;
text-align: center;
}

.ppom-popup-container {
display: flex;
flex-direction: column;
align-items: center;

gap: 20px;
}

.ppom-popup-title {
font-size: 2.5em;
margin: 0;
line-height: 1.3;

color: #4caf50;
}

.ppom-popup-text {
font-size: 1.4em;
line-height: 1.3;
margin: 0;
}

.ppom-popup-actions {
display: flex;
justify-content: space-evenly;
width: 100%;
}

.ppom-popup-actions button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.3em;
transition: background-color 0.3s ease;
min-width: 110px;

color: #fff;
background-color: #4caf50;
}

.ppom-popup-actions button:hover {
background-color: #4588a0;
}

.ppom-popup-actions .ppom-btn-cancel {
background-color: #6c757d;
}

.ppom-popup.ppom-error .ppom-popup-title {
color: #f44336;
}

.ppom-popup.ppom-error .ppom-btn-confirm {
background-color: #f44336;
}

.ppom-hide {
display: none;
}
133 changes: 133 additions & 0 deletions global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
interface PopupOptions {
title?: string;
text?: string;
hideCloseBtn?: boolean;
type?: 'error' | 'success';
onConfirmation?: () => void;
onClose?: () => void;
}

export declare class Popup {
overlay: HTMLDivElement;
popup: HTMLDivElement;
container: HTMLDivElement;
title: HTMLHeadingElement;
text: HTMLParagraphElement;
confirmButton: HTMLButtonElement;
cancelButton: HTMLButtonElement;
onConfirmation: () => void;
onClose: () => void;

constructor();
open(options?: PopupOptions): void;
close(): void;
confirm(): void;
show(): void;
hide(): void;
}

interface GlobalVars {
i18n: {
addGroupUrl: string;
addGroupLabel: string;
bulkActionsLabel: string;
deleteLabel: string;
exportLabel: string;
exportLockedLabel: string;
importLabel: string;
importLockedLabel: string;
freemiumCFRContent: string;
freemiumCFRTab: string;
popup: {
confirmTitle: string;
confirmationBtn: string;
cancelBtn: string;
finishTitle: string;
errorTitle: string;
checkFieldTitle: string;
}
}
}

interface BulkQuantityGlobal {
i18n: {
validation: {
end_bigger_than_start: string;
start_cannot_be_equal_with_end: string;
range_intersection: string;
invalid_pattern: string;
}
}
}

interface FileUploadGlobal {
ajaxurl: string;
plugin_url: string;
file_upload_path_thumb: string;
file_upload_path: string;
mesage_max_files_limit: string;
file_inputs: any[];
delete_file_msg: string;
plupload_runtime: string;
croppie_options: {
viewport: {
width: number;
height: number;
type: string;
},
boundary: {
width: number;
height: number;
},
enableExif: boolean;
enforceBoundary: boolean;
enableZoom: boolean;
showZoomer: boolean;
}[];
ppom_file_upload_nonce: string;
ppom_file_delete_nonce: string;
enable_file_rename: boolean;
product_id: number;
}

interface InputVarsGlobal {
ajaxurl: string;
ppom_inputs: any[];
field_meta: any[];
ppom_validate_nonce: string;
wc_thousand_sep: string;
wc_currency_pos: string;
wc_decimal_sep: string;
wc_no_decimal: number;
wc_product_price: number;
wc_product_regular_price: number;
total_discount_label: string;
price_matrix_heading: string;
product_base_label: string;
option_total_label: string;
fixed_fee_heading: string;
total_without_fixed_label: string;
product_quantity_label: string;
product_title: string;
per_unit_label: string;
show_price_per_unit: boolean;
text_quantity: string;
show_option_price: boolean;
is_shortcode: string;
plugin_url: string;
is_mobile: boolean;
product_id: number;
tax_prefix: string;
}

/**
* Define global variables to allow IDE auto-completion and checking.
*/
declare global {
interface Window {
ppomPopup?: Popup;
ppom_vars: GlobalVars;
ppom_file_vars: FileUploadGlobal;
ppom_input_vars: InputVarsGlobal
}
}
40 changes: 19 additions & 21 deletions js/admin/ppom-admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,29 +211,27 @@ jQuery(function($) {
var check_field = $('.ppom-check-one-field input[type="checkbox"]:checked');

if (check_field.length > 0) {
swal.fire({
title: "Are you sure",
showCancelButton: true,
confirmButtonColor: "#DD6B55 ",
cancelButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
}).then( (result ) => {
if (!result.isConfirmed) return;

$('.ppom_field_table').find('.ppom-check-one-field input').each(function(i, meta_field) {

if (this.checked) {
var field_id = $(meta_field).val();
// console.log(field_id)
$(meta_field).parent().parent().parent('.row_no_' + field_id + '').remove();
}
$('.ppom_save_fields_model').find('#ppom_field_model_' + field_id + '').remove();
});
});
window?.ppomPopup?.open({
title: window?.ppom_vars?.i18n.popup.confirmTitle,
onConfirmation: () => {
$('.ppom_field_table').find('.ppom-check-one-field input').each(function(i, meta_field) {

const field_id = $(meta_field).val();
if (this.checked) {
// console.log(field_id)
$(meta_field).parent().parent().parent('.row_no_' + field_id + '').remove();
}
$('.ppom_save_fields_model').find('#ppom_field_model_' + field_id + '').remove();
});
}
})
}
else {
swal.fire("Please at least check one field!", "", "error");
window?.ppomPopup?.open({
title: window.ppom_vars.i18n.popup.checkFieldTitle,
type: "error",
hideCloseBtn: true
})
}
});

Expand Down
Loading

0 comments on commit 3f0737b

Please sign in to comment.