Skip to content

Commit b2121cc

Browse files
Ludwig44Ludwig44
committed
comments on components, ameliorations on media component
1 parent 4a55018 commit b2121cc

File tree

10 files changed

+85
-12
lines changed

10 files changed

+85
-12
lines changed

‎template/plugin-name/admin/components/checkbox.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Checkbox component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
$_POST[ $data['name'] ] = is_array( $_POST[ $data['name'] ] ) ? $_POST[ $data['name'] ] : array();
47
update_option( $data['name'], $_POST[ $data['name'] ] );

‎template/plugin-name/admin/components/code-editor.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Code editor component like theme editor for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], $_POST[ $data['name'] ] );
47
}

‎template/plugin-name/admin/components/media.php‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
<?php
2+
/**
3+
* Media component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], sanitize_text_field( $_POST[ $data['name'] ] ) );
47
}
58
wp_enqueue_media();
69
$is_multiple = isset( $data['multiple'] ) && $data['multiple'] === true ? 'true' : 'false';
710
$image_preview_template = '<img src="%s" title="%s" class="media-preview-image">';
811

12+
$medias_string = isset( $data['name'] ) ? get_option( $data['name'], '' ) : '';
13+
$medias = $medias_string ? explode( ',', $medias_string ) : array();
914
?>
1015
<div class="plugin-name-media-input-container">
16+
<div id="<?php echo esc_attr( $data['name'] ?? '' ); ?>_is_empty" class="plugin-name-media-input--is-empty" style="display: <?php echo !empty($medias) ? 'none' : 'block'; ?>">
17+
<?php _e( 'No image selected', PLUGIN_NAME_TEXT_DOMAIN ); ?>
18+
</div>
1119
<input
1220
type="hidden"
1321
name="<?php echo esc_attr( $data['name'] ?? '' ); ?>"
1422
id="<?php echo esc_attr( $data['name'] ?? '' ); ?>"
15-
value="<?php echo esc_attr( get_option( $data['name'] ) ); ?>"
23+
value="<?php echo esc_attr( $medias_string ); ?>"
1624
>
1725
<div id="<?php echo esc_attr( $data['name'] ?? '' ); ?>_medias-selected" class="plugin-name-medias-selected-container">
1826
<?php
19-
$medias = explode( ',', get_option( $data['name'] ) );
2027
foreach( $medias as $media_id ) {
2128
$media = get_post( $media_id );
2229
if( $media ) {
@@ -35,6 +42,13 @@
3542
class="button button-secondary"
3643
value="<?php echo esc_attr( $data['button_text'] ?? __( 'Select media', PLUGIN_NAME_TEXT_DOMAIN ) ); ?>"
3744
>
45+
<input type="button"
46+
name="<?php echo esc_attr( $data['name'] ?? '' ); ?>_remove_button"
47+
id="<?php echo esc_attr( $data['name'] ?? '' ); ?>_remove_button"
48+
class="button button-secondary button-remove-media"
49+
value="<?php echo esc_attr( $data['remove_button_text'] ?? __( 'Remove medias', PLUGIN_NAME_TEXT_DOMAIN ) ); ?>"
50+
<?php echo empty( $medias ) ? 'disabled' : ''; ?>
51+
>
3852
</div>
3953

4054
<script type="text/javascript">
@@ -49,13 +63,11 @@ class="button button-secondary"
4963
})
5064

5165
image.on('select', function(e){
52-
console.log(image.state().get('selection').toJSON());
5366
const medias = image.state().get('selection').toJSON();
5467
let selected_medias_preview = '';
5568
let medias_ids = '';
5669
medias.forEach( media => {
5770
medias_ids = medias_ids === '' ? media.id : medias_ids + ',' + media.id;
58-
console.log(medias_ids);
5971
let preview_image = '';
6072
if( media.type === 'image' ) {
6173
preview_image = media.sizes.thumbnail.url;
@@ -66,12 +78,13 @@ class="button button-secondary"
6678
});
6779
jQuery( "#" + id + "_medias-selected" ).html( selected_medias_preview );
6880
jQuery( "#" + id ).val( medias_ids );
81+
82+
jQuery( "#" + id + "_remove_button" ).prop( 'disabled', false );
83+
jQuery( '#' + id + "_is_empty" ).hide();
6984
});
7085

7186
image.on('open', function(e){
72-
console.log(id);
7387
const medias_ids = jQuery( "#" + id ).val();
74-
console.log(medias_ids);
7588
if( medias_ids !== '' ) {
7689
const medias = medias_ids.split(',');
7790
const selection = image.state().get('selection');
@@ -86,5 +99,14 @@ class="button button-secondary"
8699
image.open();
87100

88101
});
102+
103+
jQuery( "#" + id + "_remove_button" ).click(function(e) {
104+
e.preventDefault();
105+
jQuery( "#" + id + "_medias-selected" ).html( '' );
106+
jQuery( "#" + id ).val( '' );
107+
108+
jQuery( "#" + id + "_remove_button" ).attr( 'disabled', 'disabled' );
109+
jQuery( '#' + id + "_is_empty" ).show();
110+
});
89111
});
90112
</script>

‎template/plugin-name/admin/components/radio.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Radio component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], sanitize_text_field( $_POST[ $data['name'] ] ) );
47
}

‎template/plugin-name/admin/components/select.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Select component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], sanitize_text_field( $_POST[ $data['name'] ] ) );
47
}

‎template/plugin-name/admin/components/text.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Text component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], sanitize_text_field( $_POST[ $data['name'] ] ) );
47
}

‎template/plugin-name/admin/components/textarea.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Textarea component for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
update_option( $data['name'], sanitize_textarea_field( $_POST[ $data['name'] ] ) );
47
}

‎template/plugin-name/admin/components/toggle.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
/**
3+
* Toggle component like IOS style for the settings page
4+
*/
25
if( isset( $data['name'], $_POST[ $data['name'] ] ) ) {
36
$value_to_save = $_POST[ $data['name'] ] == '1' ? '1' : '0';
47
update_option( $data['name'], sanitize_text_field( $_POST[ $data['name'] ] ) );

‎template/plugin-name/admin/css/page-settings.css‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:root {
2+
--plugin-name-primary-color: #2196F3;
3+
}
4+
15
.radio-values,
26
.checkbox-values {
37
margin: 0;
@@ -35,17 +39,17 @@
3539
width: 26px;
3640
left: 4px;
3741
bottom: 4px;
38-
background-color: white;
42+
background-color: #fff;
3943
-webkit-transition: .4s;
4044
transition: .4s;
4145
}
4246

4347
input:checked + .slider {
44-
background-color: #2196F3;
48+
background-color: var(--plugin-name-primary-color);
4549
}
4650

4751
input:focus + .slider {
48-
box-shadow: 0 0 1px #2196F3;
52+
box-shadow: 0 0 1px var(--plugin-name-primary-color);
4953
}
5054

5155
input:checked + .slider:before {
@@ -75,8 +79,34 @@ input:checked + .slider:before {
7579
background: #fff;
7680
}
7781

82+
.plugin-name-media-input--is-empty {
83+
margin-bottom: 10px;
84+
}
85+
86+
.plugin-name-medias-selected-container {
87+
max-height: 200px;
88+
overflow-y: auto;
89+
position: relative;
90+
}
91+
92+
.plugin-name-medias-selected-container:after {
93+
content: "";
94+
display: block;
95+
height: 35px;
96+
width: 100%;
97+
background: linear-gradient(360deg, #fff, transparent);
98+
position: sticky;
99+
bottom: 0;
100+
left: 0;
101+
}
102+
78103
.plugin-name-medias-selected-container .media-preview-image {
79104
max-height: 50px;
80105
max-width: 50px;
81106
margin: 5px;
107+
}
108+
109+
.button-secondary.button-remove-media {
110+
color: #bb0000;
111+
border-color: #bb0000;
82112
}

‎template/plugin-name/languages/plugin-name.pot‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Blank WordPress Pot
1+
# WordPress Plugin Boilerplate Pot
22
# Copyright 2014 ...
33
# This file is distributed under the GNU General Public License v3 or later.
44
msgid ""
55
msgstr ""
6-
"Project-Id-Version: Plugin Name v1.0.0\n"
7-
"POT-Creation-Date: 2012-10-05 10:50+0100\n"
6+
"Project-Id-Version: WordPress Plugin Boilerplate v1.0.0\n"
7+
"POT-Creation-Date: 2022-11-01 10:50+0100\n"
88
"PO-Revision-Date: \n"
99
"Last-Translator: Your Name <email@example.com>\n"
1010
"Language-Team: Your Name <email@example.com>\n"

0 commit comments

Comments
 (0)