Simple Social Icons - Version 1.0.8

Version Description

  • Added border options
Download this release

Release Info

Developer nathanrice
Plugin Icon 128x128 Simple Social Icons
Version 1.0.8
Comparing to
See all releases

Code changes from version 1.0.7 to 1.0.8

Files changed (2) hide show
  1. readme.txt +6 -3
  2. simple-social-icons.php +76 -5
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: nathanrice, studiopress, bgardner
3
  Tags: social media, social networking, social profiles
4
  Requires at least: 4.0
5
- Tested up to: 4.0
6
- Stable tag: 1.0.7
7
 
8
  This plugin allows you to insert social icons in any widget area.
9
 
@@ -89,4 +89,7 @@ NOTE - The rights to each pictogram in the social extension are either trademark
89
  * Added filters
90
 
91
  = 1.0.7 =
92
- * Added Bloglovin icon
 
 
 
2
  Contributors: nathanrice, studiopress, bgardner
3
  Tags: social media, social networking, social profiles
4
  Requires at least: 4.0
5
+ Tested up to: 4.1
6
+ Stable tag: 1.0.8
7
 
8
  This plugin allows you to insert social icons in any widget area.
9
 
89
  * Added filters
90
 
91
  = 1.0.7 =
92
+ * Added Bloglovin icon
93
+
94
+ = 1.0.8 =
95
+ * Added border options
simple-social-icons.php CHANGED
@@ -6,7 +6,7 @@ Description: A simple, CSS and icon font driven social icons widget.
6
  Author: Nathan Rice
7
  Author URI: http://www.nathanrice.net/
8
 
9
- Version: 1.0.7
10
 
11
  License: GNU General Public License v2.0 (or later)
12
  License URI: http://www.opensource.org/licenses/gpl-license.php
@@ -57,6 +57,9 @@ class Simple_Social_Icons_Widget extends WP_Widget {
57
  'new_window' => 0,
58
  'size' => 36,
59
  'border_radius' => 3,
 
 
 
60
  'icon_color' => '#ffffff',
61
  'icon_color_hover' => '#ffffff',
62
  'background_color' => '#999999',
@@ -189,6 +192,62 @@ class Simple_Social_Icons_Widget extends WP_Widget {
189
  /** Load CSS in <head> */
190
  add_action( 'wp_head', array( $this, 'css' ) );
191
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  }
193
 
194
  /**
@@ -211,6 +270,8 @@ class Simple_Social_Icons_Widget extends WP_Widget {
211
 
212
  <p><label for="<?php echo $this->get_field_id( 'border_radius' ); ?>"><?php _e( 'Icon Border Radius:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'border_radius' ); ?>" name="<?php echo $this->get_field_name( 'border_radius' ); ?>" type="text" value="<?php echo esc_attr( $instance['border_radius'] ); ?>" size="3" />px</p>
213
 
 
 
214
  <p>
215
  <label for="<?php echo $this->get_field_id( 'alignment' ); ?>"><?php _e( 'Alignment', 'ssiw' ); ?>:</label>
216
  <select id="<?php echo $this->get_field_id( 'alignment' ); ?>" name="<?php echo $this->get_field_name( 'alignment' ); ?>">
@@ -222,13 +283,17 @@ class Simple_Social_Icons_Widget extends WP_Widget {
222
 
223
  <hr style="background: #ccc; border: 0; height: 1px; margin: 20px 0;" />
224
 
225
- <p><label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Icon Font Color:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'icon_color' ); ?>" name="<?php echo $this->get_field_name( 'icon_color' ); ?>" type="text" value="<?php echo esc_attr( $instance['icon_color'] ); ?>" size="6" /></p>
 
 
226
 
227
- <p><label for="<?php echo $this->get_field_id( 'background_color_hover' ); ?>"><?php _e( 'Icon Font Hover Color:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'icon_color_hover' ); ?>" name="<?php echo $this->get_field_name( 'icon_color_hover' ); ?>" type="text" value="<?php echo esc_attr( $instance['icon_color_hover'] ); ?>" size="6" /></p>
228
 
229
- <p><label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Background Color:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'background_color' ); ?>" name="<?php echo $this->get_field_name( 'background_color' ); ?>" type="text" value="<?php echo esc_attr( $instance['background_color'] ); ?>" size="6" /></p>
230
 
231
- <p><label for="<?php echo $this->get_field_id( 'background_color_hover' ); ?>"><?php _e( 'Background Hover Color:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'background_color_hover' ); ?>" name="<?php echo $this->get_field_name( 'background_color_hover' ); ?>" type="text" value="<?php echo esc_attr( $instance['background_color_hover'] ); ?>" size="6" /></p>
 
 
232
 
233
  <hr style="background: #ccc; border: 0; height: 1px; margin: 20px 0;" />
234
 
@@ -258,6 +323,10 @@ class Simple_Social_Icons_Widget extends WP_Widget {
258
  $newinstance[$key] = 0;
259
  }
260
 
 
 
 
 
261
  /** Validate hex code colors */
262
  elseif ( strpos( $key, '_color' ) && 0 == preg_match( '/^#(([a-fA-F0-9]{3}$)|([a-fA-F0-9]{6}$))/', $value ) ) {
263
  $newinstance[$key] = $oldinstance[$key];
@@ -345,12 +414,14 @@ class Simple_Social_Icons_Widget extends WP_Widget {
345
  background-color: ' . $instance['background_color'] . ' !important;
346
  border-radius: ' . $instance['border_radius'] . 'px;
347
  color: ' . $instance['icon_color'] . ' !important;
 
348
  font-size: ' . $font_size . 'px;
349
  padding: ' . $icon_padding . 'px;
350
  }
351
 
352
  .simple-social-icons ul li a:hover {
353
  background-color: ' . $instance['background_color_hover'] . ' !important;
 
354
  color: ' . $instance['icon_color_hover'] . ' !important;
355
  }';
356
 
6
  Author: Nathan Rice
7
  Author URI: http://www.nathanrice.net/
8
 
9
+ Version: 1.0.8
10
 
11
  License: GNU General Public License v2.0 (or later)
12
  License URI: http://www.opensource.org/licenses/gpl-license.php
57
  'new_window' => 0,
58
  'size' => 36,
59
  'border_radius' => 3,
60
+ 'border_width' => 0,
61
+ 'border_color' => '#ffffff',
62
+ 'border_color_hover' => '#ffffff',
63
  'icon_color' => '#ffffff',
64
  'icon_color_hover' => '#ffffff',
65
  'background_color' => '#999999',
192
  /** Load CSS in <head> */
193
  add_action( 'wp_head', array( $this, 'css' ) );
194
 
195
+ /** Load color picker */
196
+ add_action( 'admin_enqueue_scripts', array( $this, 'load_color_picker' ) );
197
+ add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
198
+
199
+ }
200
+
201
+ /**
202
+ * Color Picker.
203
+ *
204
+ * Enqueue the color picker script.
205
+ *
206
+ */
207
+ function load_color_picker( $hook ) {
208
+ if( 'widgets.php' != $hook )
209
+ return;
210
+ wp_enqueue_style( 'wp-color-picker' );
211
+ wp_enqueue_script( 'wp-color-picker' );
212
+ wp_enqueue_script( 'underscore' );
213
+ }
214
+
215
+ /**
216
+ * Print scripts.
217
+ *
218
+ * Reference https://core.trac.wordpress.org/attachment/ticket/25809/color-picker-widget.php
219
+ *
220
+ */
221
+ function print_scripts() {
222
+ ?>
223
+ <script>
224
+ ( function( $ ){
225
+ function initColorPicker( widget ) {
226
+ widget.find( '.ssiw-color-picker' ).wpColorPicker( {
227
+ change: function ( event ) {
228
+ var $picker = $( this );
229
+ _.throttle(setTimeout(function () {
230
+ $picker.trigger( 'change' );
231
+ }, 5), 250);
232
+ },
233
+ width: 235,
234
+ });
235
+ }
236
+
237
+ function onFormUpdate( event, widget ) {
238
+ initColorPicker( widget );
239
+ }
240
+
241
+ $( document ).on( 'widget-added widget-updated', onFormUpdate );
242
+
243
+ $( document ).ready( function() {
244
+ $( '#widgets-right .widget:has(.ssiw-color-picker)' ).each( function () {
245
+ initColorPicker( $( this ) );
246
+ } );
247
+ } );
248
+ }( jQuery ) );
249
+ </script>
250
+ <?php
251
  }
252
 
253
  /**
270
 
271
  <p><label for="<?php echo $this->get_field_id( 'border_radius' ); ?>"><?php _e( 'Icon Border Radius:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'border_radius' ); ?>" name="<?php echo $this->get_field_name( 'border_radius' ); ?>" type="text" value="<?php echo esc_attr( $instance['border_radius'] ); ?>" size="3" />px</p>
272
 
273
+ <p><label for="<?php echo $this->get_field_id( 'border_width' ); ?>"><?php _e( 'Border Width:', 'ssiw' ); ?></label> <input id="<?php echo $this->get_field_id( 'border_width' ); ?>" name="<?php echo $this->get_field_name( 'border_width' ); ?>" type="text" value="<?php echo esc_attr( $instance['border_width'] ); ?>" size="3" />px</p>
274
+
275
  <p>
276
  <label for="<?php echo $this->get_field_id( 'alignment' ); ?>"><?php _e( 'Alignment', 'ssiw' ); ?>:</label>
277
  <select id="<?php echo $this->get_field_id( 'alignment' ); ?>" name="<?php echo $this->get_field_name( 'alignment' ); ?>">
283
 
284
  <hr style="background: #ccc; border: 0; height: 1px; margin: 20px 0;" />
285
 
286
+ <p><label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Icon Font Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'icon_color' ); ?>" name="<?php echo $this->get_field_name( 'icon_color' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['icon_color'] ); ?>" value="<?php echo esc_attr( $instance['icon_color'] ); ?>" size="6" /></p>
287
+
288
+ <p><label for="<?php echo $this->get_field_id( 'background_color_hover' ); ?>"><?php _e( 'Icon Font Hover Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'icon_color_hover' ); ?>" name="<?php echo $this->get_field_name( 'icon_color_hover' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['icon_color_hover'] ); ?>" value="<?php echo esc_attr( $instance['icon_color_hover'] ); ?>" size="6" /></p>
289
 
290
+ <p><label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Background Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'background_color' ); ?>" name="<?php echo $this->get_field_name( 'background_color' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['background_color'] ); ?>" value="<?php echo esc_attr( $instance['background_color'] ); ?>" size="6" /></p>
291
 
292
+ <p><label for="<?php echo $this->get_field_id( 'background_color_hover' ); ?>"><?php _e( 'Background Hover Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'background_color_hover' ); ?>" name="<?php echo $this->get_field_name( 'background_color_hover' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['background_color_hover'] ); ?>" value="<?php echo esc_attr( $instance['background_color_hover'] ); ?>" size="6" /></p>
293
 
294
+ <p><label for="<?php echo $this->get_field_id( 'border_color' ); ?>"><?php _e( 'Border Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'border_color' ); ?>" name="<?php echo $this->get_field_name( 'border_color' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['border_color'] ); ?>" value="<?php echo esc_attr( $instance['border_color'] ); ?>" size="6" /></p>
295
+
296
+ <p><label for="<?php echo $this->get_field_id( 'border_color_hover' ); ?>"><?php _e( 'Border Hover Color:', 'ssiw' ); ?></label><br /> <input id="<?php echo $this->get_field_id( 'border_color_hover' ); ?>" name="<?php echo $this->get_field_name( 'border_color_hover' ); ?>" type="text" class="ssiw-color-picker" data-default-color="<?php echo esc_attr( $this->defaults['border_color_hover'] ); ?>" value="<?php echo esc_attr( $instance['border_color_hover'] ); ?>" size="6" /></p>
297
 
298
  <hr style="background: #ccc; border: 0; height: 1px; margin: 20px 0;" />
299
 
323
  $newinstance[$key] = 0;
324
  }
325
 
326
+ if ( ( 'border_width' == $key || 'size' == $key ) && ( '' == $value || ! ctype_digit( $value ) ) ) {
327
+ $newinstance[$key] = 0;
328
+ }
329
+
330
  /** Validate hex code colors */
331
  elseif ( strpos( $key, '_color' ) && 0 == preg_match( '/^#(([a-fA-F0-9]{3}$)|([a-fA-F0-9]{6}$))/', $value ) ) {
332
  $newinstance[$key] = $oldinstance[$key];
414
  background-color: ' . $instance['background_color'] . ' !important;
415
  border-radius: ' . $instance['border_radius'] . 'px;
416
  color: ' . $instance['icon_color'] . ' !important;
417
+ border: ' . $instance['border_width'] . 'px ' . $instance['border_color'] . ' solid !important;
418
  font-size: ' . $font_size . 'px;
419
  padding: ' . $icon_padding . 'px;
420
  }
421
 
422
  .simple-social-icons ul li a:hover {
423
  background-color: ' . $instance['background_color_hover'] . ' !important;
424
+ border-color: ' . $instance['border_color_hover'] . ' !important;
425
  color: ' . $instance['icon_color_hover'] . ' !important;
426
  }';
427