Advanced Image Styles - Version 0.2

Version Description

  • Disable left and right margin inputs when image alignment is set to center
  • Use color input type when available for border color.
  • Use empty fields as default so that a value of zero can be set.
Download this release

Release Info

Developer gcorne
Plugin Icon wp plugin Advanced Image Styles
Version 0.2
Comparing to
See all releases

Code changes from version 0.1 to 0.2

Files changed (5) hide show
  1. _inc/advanced-image-styles-tmpl.php +9 -9
  2. advanced-image-styles.php +1 -1
  3. css/advanced-image-styles.css +24 -0
  4. js/advanced-image-styles.js +79 -17
  5. readme.txt +8 -2
_inc/advanced-image-styles-tmpl.php CHANGED
@@ -7,26 +7,26 @@
7
  </label>
8
  <label class="border-color">
9
  <span><?php esc_html_e( 'Color', 'advanced-image-styles' ); ?></span>
10
- <input type="text" data-setting="borderColor" value="{{ data.borderColor }}" />
11
  </label>
12
  </div>
13
  <span class="group-label"><?php esc_html_e( 'Image Margins', 'advanced-image-styles' ); ?></span>
14
  <div class="image-settings-group margins">
15
- <label class="left">
16
- <span><?php esc_html_e( 'Left', 'advanced-image-styles' ); ?></span>
17
- <input type="text" data-setting="marginLeft" value="{{ data.marginLeft }}" />
18
- </label>
19
  <label class="top">
20
  <span><?php esc_html_e( 'Top', 'advanced-image-styles' ); ?></span>
21
  <input type="text" data-setting="marginTop" value="{{ data.marginTop }}" />
22
  </label>
23
- <label class="right">
24
- <span><?php esc_html_e( 'Right', 'advanced-image-styles' ); ?></span>
25
- <input type="text" data-setting="marginRight" value="{{ data.marginRight }}" />
26
- </label>
27
  <label class="bottom">
28
  <span><?php esc_html_e( 'Bottom', 'advanced-image-styles' ); ?></span>
29
  <input type="text" data-setting="marginBottom" value="{{ data.marginBottom }}" />
30
  </label>
 
 
 
 
 
 
 
 
31
  </div>
32
  </script>
7
  </label>
8
  <label class="border-color">
9
  <span><?php esc_html_e( 'Color', 'advanced-image-styles' ); ?></span>
10
+ <input type="{{ data.colorInputType }}" data-setting="borderColor" value="{{ data.borderColor }}" />
11
  </label>
12
  </div>
13
  <span class="group-label"><?php esc_html_e( 'Image Margins', 'advanced-image-styles' ); ?></span>
14
  <div class="image-settings-group margins">
 
 
 
 
15
  <label class="top">
16
  <span><?php esc_html_e( 'Top', 'advanced-image-styles' ); ?></span>
17
  <input type="text" data-setting="marginTop" value="{{ data.marginTop }}" />
18
  </label>
 
 
 
 
19
  <label class="bottom">
20
  <span><?php esc_html_e( 'Bottom', 'advanced-image-styles' ); ?></span>
21
  <input type="text" data-setting="marginBottom" value="{{ data.marginBottom }}" />
22
  </label>
23
+ <label class="left">
24
+ <span><?php esc_html_e( 'Left', 'advanced-image-styles' ); ?></span>
25
+ <input type="text" data-setting="marginLeft" value="{{ data.marginLeft }}" />
26
+ </label>
27
+ <label class="right">
28
+ <span><?php esc_html_e( 'Right', 'advanced-image-styles' ); ?></span>
29
+ <input type="text" data-setting="marginRight" value="{{ data.marginRight }}" />
30
+ </label>
31
  </div>
32
  </script>
advanced-image-styles.php CHANGED
@@ -6,7 +6,7 @@
6
  * Author URI: http://gregorycornelius.com
7
  * Description: Adjust an image's margins and border with ease in the Visual
8
  * editor.
9
- * Version: 0.1
10
  * License: GPL2+
11
  * Text Domain: advanced-image-styles
12
  * Domain Path: /languages/
6
  * Author URI: http://gregorycornelius.com
7
  * Description: Adjust an image's margins and border with ease in the Visual
8
  * editor.
9
+ * Version: 0.2
10
  * License: GPL2+
11
  * Text Domain: advanced-image-styles
12
  * Domain Path: /languages/
css/advanced-image-styles.css CHANGED
@@ -23,6 +23,7 @@
23
  line-height: 1.1;
24
  font-size: 13px;
25
  color: #666;
 
26
  }
27
 
28
  .image-details .advanced-image-styles label {
@@ -34,7 +35,30 @@
34
  display: block;
35
  }
36
 
 
 
 
 
 
37
  .image-details .advanced-image-styles input[type="text"] {
38
  width: 5em;
39
  }
40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  line-height: 1.1;
24
  font-size: 13px;
25
  color: #666;
26
+ clear: both;
27
  }
28
 
29
  .image-details .advanced-image-styles label {
35
  display: block;
36
  }
37
 
38
+ .image-details .advanced-image-styles small {
39
+ color: #999;
40
+ font-size: inherit;
41
+ }
42
+
43
  .image-details .advanced-image-styles input[type="text"] {
44
  width: 5em;
45
  }
46
 
47
+ .image-details .advanced-image-styles input[type="color"] {
48
+ border: 1px solid #ddd;
49
+ width: 30px;
50
+ padding: 4px 6px;
51
+ height: 20px;
52
+ display: block;
53
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
54
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
55
+ }
56
+
57
+
58
+ @media screen and (max-width: 782px) {
59
+ .image-details .advanced-image-styles input[type="color"] {
60
+ -webkit-appearance: none;
61
+ height: 24px;
62
+ padding: 5px 8px;
63
+ }
64
+ }
js/advanced-image-styles.js CHANGED
@@ -1,10 +1,25 @@
1
  (function( $, wp, _ ) {
2
- var AdvancedImageStylesView, frame;
3
 
4
  if ( ! wp.media.events ) {
5
  return;
6
  }
7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  function addAdvancedStylesView( view ) {
9
  var advancedView;
10
 
@@ -35,7 +50,7 @@
35
  val = parseInt( val, 10 );
36
  }
37
 
38
- attributes[ key ] = _.isNaN( val ) ? 0 : val;
39
  } );
40
 
41
  attributes.borderColor = dom.toHex( dom.getStyle( image, 'borderColor' ) );
@@ -52,25 +67,42 @@
52
  dom = editor.dom,
53
  image = options.image,
54
  model = frame.content.get().model,
55
- border, marginTop, marginLeft, marginRight, marginBottom;
 
 
56
 
57
- if ( model.get('borderWidth') && model.get('borderWidth') !== '0' ) {
58
- border = model.get('borderWidth') + 'px solid ';
59
  border += model.get('borderColor') ? model.get('borderColor' ) : '#000';
60
- dom.setStyle( image, 'border', border );
61
- } else {
62
- dom.setStyle( image, 'border', '' );
63
  }
64
 
65
- marginTop = model.get( 'marginTop' ) ? model.get( 'marginTop' ) + 'px' : '';
66
- marginBottom = model.get( 'marginBottom' ) ? model.get( 'marginBottom' ) + 'px' : '';
67
- marginLeft = model.get( 'marginLeft' ) ? model.get( 'marginLeft' ) + 'px' : '';
68
- marginRight = model.get( 'marginRight' ) ? model.get( 'marginRight' ) + 'px' : '';
69
 
70
- dom.setStyle( image, 'marginTop', marginTop );
71
- dom.setStyle( image, 'marginBottom', marginBottom );
72
- dom.setStyle( image, 'marginLeft', marginLeft );
73
- dom.setStyle( image, 'marginRight', marginRight );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
 
75
  } );
76
 
@@ -78,8 +110,38 @@
78
  className: 'advanced-image-styles',
79
  template: wp.media.template('advanced-image-styles'),
80
 
 
 
 
 
 
81
  prepare: function() {
82
- return this.model.toJSON();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
  } );
85
 
1
  (function( $, wp, _ ) {
2
+ var AdvancedImageStylesView, frame, supportsColorInput;
3
 
4
  if ( ! wp.media.events ) {
5
  return;
6
  }
7
 
8
+ supportsColorInput = _.memoize( function() {
9
+ var supported = false,
10
+ elem;
11
+
12
+ try {
13
+ elem = document.createElement( 'input' );
14
+ elem.type = 'color';
15
+ if ( 'color' === elem.type ) {
16
+ supported = true;
17
+ }
18
+ } catch( ex ) {}
19
+
20
+ return supported;
21
+ } );
22
+
23
  function addAdvancedStylesView( view ) {
24
  var advancedView;
25
 
50
  val = parseInt( val, 10 );
51
  }
52
 
53
+ attributes[ key ] = _.isNaN( val ) ? '' : val;
54
  } );
55
 
56
  attributes.borderColor = dom.toHex( dom.getStyle( image, 'borderColor' ) );
67
  dom = editor.dom,
68
  image = options.image,
69
  model = frame.content.get().model,
70
+ borderWidth = model.get('borderWidth'),
71
+ border = '',
72
+ margin;
73
 
74
+ if ( borderWidth ) {
75
+ border = borderWidth + 'px solid ';
76
  border += model.get('borderColor') ? model.get('borderColor' ) : '#000';
 
 
 
77
  }
78
 
79
+ dom.setStyle( image, 'border', border );
 
 
 
80
 
81
+ margin = {
82
+ top: model.get( 'marginTop' ),
83
+ bottom: model.get( 'marginBottom' ),
84
+ left: model.get( 'marginLeft' ),
85
+ right: model.get( 'marginRight' )
86
+ };
87
+
88
+ _.each( margin, function( val, key ) {
89
+ if ( val !== '' ) {
90
+ val = parseInt( val, 10 );
91
+ val = _.isNaN( val ) ? '' : val + 'px';
92
+ }
93
+ margin[ key ] = val;
94
+ });
95
+
96
+ dom.setStyle( image, 'marginTop', margin.top );
97
+ dom.setStyle( image, 'marginBottom', margin.bottom );
98
+
99
+ if ( 'center' !== model.get( 'align' ) ) {
100
+ dom.setStyle( image, 'marginLeft', margin.left );
101
+ dom.setStyle( image, 'marginRight', margin.right );
102
+ } else {
103
+ dom.setStyle( image, 'marginLeft', null );
104
+ dom.setStyle( image, 'marginRight', null );
105
+ }
106
 
107
  } );
108
 
110
  className: 'advanced-image-styles',
111
  template: wp.media.template('advanced-image-styles'),
112
 
113
+ initialize: function() {
114
+ wp.Backbone.View.prototype.initialize.apply( this, arguments );
115
+ this.listenTo( this.model, 'change:align', this.toggleInputs );
116
+ },
117
+
118
  prepare: function() {
119
+ var data = this.model.toJSON();
120
+ data.colorInputType = supportsColorInput() ? 'color' : 'text';
121
+ return data;
122
+ },
123
+
124
+ render: function() {
125
+ wp.Backbone.View.prototype.render.apply( this, arguments );
126
+ this.toggleInputs( this.model, this.model.get( 'align' ) );
127
+ return this;
128
+ },
129
+
130
+ toggleInputs: function( model, align ) {
131
+ var $left = this.$el.find( '[data-setting="marginLeft"]' ),
132
+ $right = this.$el.find( '[data-setting="marginRight"]' );
133
+
134
+ if ( 'center' === align ) {
135
+ $left.val( 'auto' );
136
+ $right.val( 'auto' );
137
+ $left.prop('disabled', true );
138
+ $right.prop('disabled', true );
139
+ } else {
140
+ $left.val( model.get( 'marginLeft' ) );
141
+ $right.val( model.get( 'marginRight' ) );
142
+ $left.prop('disabled', false );
143
+ $right.prop('disabled', false );
144
+ }
145
  }
146
  } );
147
 
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: gcorne
3
  Tags: image, editor, formatting, photo, TinyMCE
4
  Tested up to: 3.9
5
  Requires at least: 3.9
6
- tag: tags
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -13,7 +13,13 @@ Adjust an image's margins and border with ease in the Visual editor.
13
 
14
  == Changelog ==
15
 
 
 
 
 
 
 
16
  = 0.1 =
17
- Initial Version.
18
 
19
 
3
  Tags: image, editor, formatting, photo, TinyMCE
4
  Tested up to: 3.9
5
  Requires at least: 3.9
6
+ Stable tag: 0.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
13
 
14
  == Changelog ==
15
 
16
+ = 0.2 =
17
+ * Disable left and right margin inputs when image alignment is set to center
18
+ * Use color input type when available for border color.
19
+ * Use empty fields as default so that a value of zero can be set.
20
+
21
+
22
  = 0.1 =
23
+ * Initial Version.
24
 
25