Simple Banner - Version 1.2.0

Version Description

  • Improve code structure for preview banner, add inner html preview. Banner text uses esc_attr().
Download this release

Release Info

Developer rpetersen29
Plugin Icon 128x128 Simple Banner
Version 1.2.0
Comparing to
See all releases

Code changes from version 1.1.0 to 1.2.0

Files changed (3) hide show
  1. readme.txt +8 -2
  2. simple-banner.css +2 -0
  3. simple-banner.php +103 -27
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: rpetersen29
3
  Donate link:
4
  Tags: cta, banner, banners, announcement, announcements, notification, bar, bars, free, hello bar, hellobar
5
  Requires at least: 3.0.1
6
- Tested up to: 4.9.4
7
- Stable tag: 1.1.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -45,6 +45,9 @@ Yes.
45
 
46
  == Changelog ==
47
 
 
 
 
48
  = 1.1.0 =
49
  * Add text to show scoping of custom CSS.
50
 
@@ -68,6 +71,9 @@ Yes.
68
 
69
  == Upgrade Notice ==
70
 
 
 
 
71
  = 1.1.0 =
72
  Added ".simple-banner { }" around Simple Banner Custom CSS to show that custom CSS is scoped to the banner and hopefully eliminate some support issues about custom CSS. No functionality changes.
73
 
3
  Donate link:
4
  Tags: cta, banner, banners, announcement, announcements, notification, bar, bars, free, hello bar, hellobar
5
  Requires at least: 3.0.1
6
+ Tested up to: 4.9.5
7
+ Stable tag: 1.2.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
45
 
46
  == Changelog ==
47
 
48
+ = 1.2.0 =
49
+ * Improve code structure for preview banner, add inner html preview. Banner text uses esc_attr().
50
+
51
  = 1.1.0 =
52
  * Add text to show scoping of custom CSS.
53
 
71
 
72
  == Upgrade Notice ==
73
 
74
+ = 1.2.0 =
75
+ You can now preview text in the preview banner up top.
76
+
77
  = 1.1.0 =
78
  Added ".simple-banner { }" around Simple Banner Custom CSS to show that custom CSS is scoped to the banner and hopefully eliminate some support issues about custom CSS. No functionality changes.
79
 
simple-banner.css CHANGED
@@ -6,12 +6,14 @@
6
  position: relative;
7
  display: block;
8
  }
 
9
  .simple-banner .simple-banner-text {
10
  color: #ffffff;
11
  font-size: 1.1em;
12
  font-weight: 700;
13
  padding: 10px;
14
  }
 
15
  .simple-banner .simple-banner-text a {
16
  color: #f16521;
17
  }
6
  position: relative;
7
  display: block;
8
  }
9
+
10
  .simple-banner .simple-banner-text {
11
  color: #ffffff;
12
  font-size: 1.1em;
13
  font-weight: 700;
14
  padding: 10px;
15
  }
16
+
17
  .simple-banner .simple-banner-text a {
18
  color: #f16521;
19
  }
simple-banner.php CHANGED
@@ -3,13 +3,13 @@
3
  * Plugin Name: Simple Banner
4
  * Plugin URI: https://github.com/rpetersen29/simple-banner
5
  * Description: Display a simple banner at the top of your website.
6
- * Version: 1.1.0
7
  * Author: Ryan Petersen
8
  * Author URI: http://rpetersen29.github.io/
9
  * License: GPL2
10
  *
11
  * @package Simple Banner
12
- * @version 1.1.0
13
  * @author Ryan Petersen <rpetersen.dev@gmail.com>
14
  */
15
 
@@ -52,7 +52,7 @@ function simple_banner_custom_text()
52
  if (get_option('simple_banner_text') != ""){
53
  echo '<script type="text/javascript">jQuery(document).ready(function() {
54
  var bannerSpan = document.getElementById("simple-banner");
55
- bannerSpan.innerHTML = "<div class=' . "simple-banner-text" . '><span>' . get_option('simple_banner_text') . '</span></div>"
56
  });
57
  </script>';
58
  }
@@ -82,9 +82,9 @@ function simple_banner_settings_page() {
82
  <br />e.g. <code>&lt;a href=&#39;http:&#47;&#47;www.wordpress.com&#39;&gt;Link to Wordpress&lt;&#47;a&gt;</code>.</p>
83
 
84
  <!-- Preview Banner -->
85
- <div id="preview_banner" class="simple-banner" style="width: 100%;background: <?php echo ((get_option('simple_banner_color') == '') ? '#024985' : esc_attr( get_option('simple_banner_color') )); ?>;text-align: center;">
86
- <div id="preview_banner_text" class="simple-banner-text" style="color: <?php echo ((get_option('simple_banner_text_color') == '') ? '#ffffff' : esc_attr( get_option('simple_banner_text_color') )); ?>;font-size: 1.1em;font-weight: 700;padding: 10px; }">
87
- <span>This is what your banner will look like with a <a id="preview_banner_link" style="color:<?php echo ((get_option('simple_banner_link_color') == '') ? '#f16521' : esc_attr( get_option('simple_banner_link_color') )); ?>;" href="/">link</a>.*</span>
88
  </div>
89
  </div>
90
  <br>
@@ -101,12 +101,11 @@ function simple_banner_settings_page() {
101
  <td style="vertical-align:top;">
102
  <input type="text" id="simple_banner_color" name="simple_banner_color" placeholder="Hex value"
103
  value="<?php echo esc_attr( get_option('simple_banner_color') ); ?>"
104
- onchange="(document.getElementById('simple_banner_color').value == '') ? document.getElementById('simple_banner_color_show').value = '#024985' : document.getElementById('simple_banner_color_show').value = document.getElementById('simple_banner_color').value;
105
- document.getElementById('preview_banner').style.background = ((document.getElementById('simple_banner_color').value == '') ? '#024985' : document.getElementById('simple_banner_color').value);" />
106
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_color_show"
107
  value="<?php echo ((get_option('simple_banner_color') == '') ? '#024985' : esc_attr( get_option('simple_banner_color') )); ?>"
108
  onchange="javascript:document.getElementById('simple_banner_color').value = document.getElementById('simple_banner_color_show').value;
109
- document.getElementById('preview_banner').style.background = document.getElementById('simple_banner_color_show').value;">
110
  </td>
111
  </tr>
112
  <!-- Text Color -->
@@ -115,12 +114,11 @@ function simple_banner_settings_page() {
115
  <td style="vertical-align:top;">
116
  <input type="text" id="simple_banner_text_color" name="simple_banner_text_color" placeholder="Hex value"
117
  value="<?php echo esc_attr( get_option('simple_banner_text_color') ); ?>"
118
- onchange="javascript:(document.getElementById('simple_banner_text_color').value == '') ? document.getElementById('simple_banner_text_color_show').value = '#ffffff' : document.getElementById('simple_banner_text_color_show').value = document.getElementById('simple_banner_text_color').value;
119
- document.getElementById('preview_banner_text').style.color = ((document.getElementById('simple_banner_text_color').value == '') ? '#ffffff' : document.getElementById('simple_banner_text_color').value);" />
120
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_text_color_show"
121
  value="<?php echo ((get_option('simple_banner_text_color') == '') ? '#ffffff' : esc_attr( get_option('simple_banner_text_color') )); ?>"
122
  onchange="javascript:document.getElementById('simple_banner_text_color').value = document.getElementById('simple_banner_text_color_show').value;
123
- document.getElementById('preview_banner_text').style.color = document.getElementById('simple_banner_text_color_show').value;">
124
  </td>
125
  </tr>
126
  <!-- Link Color-->
@@ -129,22 +127,23 @@ function simple_banner_settings_page() {
129
  <td style="vertical-align:top;">
130
  <input type="text" id="simple_banner_link_color" name="simple_banner_link_color" placeholder="Hex value"
131
  value="<?php echo esc_attr( get_option('simple_banner_link_color') ); ?>"
132
- onchange="javascript:(document.getElementById('simple_banner_link_color').value == '') ? document.getElementById('simple_banner_link_color_show').value = '#f16521' : document.getElementById('simple_banner_link_color_show').value = document.getElementById('simple_banner_link_color').value;
133
- document.getElementById('preview_banner_link').style.color = document.getElementById('simple_banner_link_color').value;
134
- document.getElementById('preview_banner_link').style.color = ((document.getElementById('simple_banner_link_color').value == '') ? '#f16521' : document.getElementById('simple_banner_link_color').value);" />
135
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_link_color_show"
136
  value="<?php echo ((get_option('simple_banner_link_color') == '') ? '#f16521' : esc_attr( get_option('simple_banner_link_color') )); ?>"
137
  onchange="javascript:document.getElementById('simple_banner_link_color').value = document.getElementById('simple_banner_link_color_show').value;
138
- document.getElementById('preview_banner_link').style.color = document.getElementById('simple_banner_link_color_show').value;">
139
  </td>
140
  </tr>
141
  <!-- Text Contents -->
142
  <tr valign="top">
143
- <th scope="row">Simple Banner Text<br><span style="font-weight:400;">(Leaving this blank removes the banner)</span></th>
 
 
 
 
144
  <td>
145
- <textarea style="height: 150px;width: 265px;resize: none;" name="simple_banner_text"><?php echo get_option('simple_banner_text'); ?></textarea>
146
  </td>
147
- <td style="color:blue;">Remember to only use single quotes with the href links.</td>
148
  </tr>
149
  <!-- Custom CSS -->
150
  <tr valign="top">
@@ -169,22 +168,99 @@ function simple_banner_settings_page() {
169
 
170
  <!-- Script to apply styles to Preview Banner -->
171
  <script type="text/javascript">
172
- var style = document.createElement('style');
173
- var style_dynamic = null;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
 
175
- style.type = 'text/css';
176
- style.id = 'preview_banner_custom_stylesheet'
177
- style.appendChild(document.createTextNode('.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'));
178
- document.getElementsByTagName('head')[0].appendChild(style);
 
179
 
180
- document.getElementById('simple_banner_custom_css').onblur=function(){
181
  var child = document.getElementById('preview_banner_custom_stylesheet');
182
  if (child){child.innerText = "";child.id='';}
183
 
184
  var style_dynamic = document.createElement('style');
185
  style_dynamic.type = 'text/css';
186
  style_dynamic.id = 'preview_banner_custom_stylesheet';
187
- style_dynamic.appendChild(document.createTextNode('.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'));
 
 
 
 
188
  document.getElementsByTagName('head')[0].appendChild(style_dynamic);
189
  };
190
  </script>
3
  * Plugin Name: Simple Banner
4
  * Plugin URI: https://github.com/rpetersen29/simple-banner
5
  * Description: Display a simple banner at the top of your website.
6
+ * Version: 1.2.0
7
  * Author: Ryan Petersen
8
  * Author URI: http://rpetersen29.github.io/
9
  * License: GPL2
10
  *
11
  * @package Simple Banner
12
+ * @version 1.2.0
13
  * @author Ryan Petersen <rpetersen.dev@gmail.com>
14
  */
15
 
52
  if (get_option('simple_banner_text') != ""){
53
  echo '<script type="text/javascript">jQuery(document).ready(function() {
54
  var bannerSpan = document.getElementById("simple-banner");
55
+ bannerSpan.innerHTML = "<div class=' . "simple-banner-text" . '><span>' . esc_attr( get_option('simple_banner_text') ) . '</span></div>"
56
  });
57
  </script>';
58
  }
82
  <br />e.g. <code>&lt;a href=&#39;http:&#47;&#47;www.wordpress.com&#39;&gt;Link to Wordpress&lt;&#47;a&gt;</code>.</p>
83
 
84
  <!-- Preview Banner -->
85
+ <div id="preview_banner" class="simple-banner" style="width: 100%;text-align: center;">
86
+ <div id="preview_banner_text" class="simple-banner-text" style="font-size: 1.1em;font-weight: 700;padding: 10px; }">
87
+ <span>This is what your banner will look like with a <a href="/">link</a>.*</span>
88
  </div>
89
  </div>
90
  <br>
101
  <td style="vertical-align:top;">
102
  <input type="text" id="simple_banner_color" name="simple_banner_color" placeholder="Hex value"
103
  value="<?php echo esc_attr( get_option('simple_banner_color') ); ?>"
104
+ onchange="(document.getElementById('simple_banner_color').value == '') ? document.getElementById('simple_banner_color_show').value = '#024985' : document.getElementById('simple_banner_color_show').value = document.getElementById('simple_banner_color').value" />
 
105
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_color_show"
106
  value="<?php echo ((get_option('simple_banner_color') == '') ? '#024985' : esc_attr( get_option('simple_banner_color') )); ?>"
107
  onchange="javascript:document.getElementById('simple_banner_color').value = document.getElementById('simple_banner_color_show').value;
108
+ document.getElementById('simple_banner_color').onchange();">
109
  </td>
110
  </tr>
111
  <!-- Text Color -->
114
  <td style="vertical-align:top;">
115
  <input type="text" id="simple_banner_text_color" name="simple_banner_text_color" placeholder="Hex value"
116
  value="<?php echo esc_attr( get_option('simple_banner_text_color') ); ?>"
117
+ onchange="javascript:(document.getElementById('simple_banner_text_color').value == '') ? document.getElementById('simple_banner_text_color_show').value = '#ffffff' : document.getElementById('simple_banner_text_color_show').value = document.getElementById('simple_banner_text_color').value;" />
 
118
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_text_color_show"
119
  value="<?php echo ((get_option('simple_banner_text_color') == '') ? '#ffffff' : esc_attr( get_option('simple_banner_text_color') )); ?>"
120
  onchange="javascript:document.getElementById('simple_banner_text_color').value = document.getElementById('simple_banner_text_color_show').value;
121
+ document.getElementById('simple_banner_text_color').onchange();">
122
  </td>
123
  </tr>
124
  <!-- Link Color-->
127
  <td style="vertical-align:top;">
128
  <input type="text" id="simple_banner_link_color" name="simple_banner_link_color" placeholder="Hex value"
129
  value="<?php echo esc_attr( get_option('simple_banner_link_color') ); ?>"
130
+ onchange="javascript:(document.getElementById('simple_banner_link_color').value == '') ? document.getElementById('simple_banner_link_color_show').value = '#f16521' : document.getElementById('simple_banner_link_color_show').value = document.getElementById('simple_banner_link_color').value;" />
 
 
131
  <input style="height: 30px;width: 100px;" type="color" id="simple_banner_link_color_show"
132
  value="<?php echo ((get_option('simple_banner_link_color') == '') ? '#f16521' : esc_attr( get_option('simple_banner_link_color') )); ?>"
133
  onchange="javascript:document.getElementById('simple_banner_link_color').value = document.getElementById('simple_banner_link_color_show').value;
134
+ document.getElementById('simple_banner_link_color').onchange();">
135
  </td>
136
  </tr>
137
  <!-- Text Contents -->
138
  <tr valign="top">
139
+ <th scope="row">
140
+ Simple Banner Text
141
+ <br><span style="font-weight:400;">(Leaving this blank removes the banner)</span>
142
+ <br><span style="font-weight:400;color:blue;">Remember to only use single quotes with the href links.</span>
143
+ </th>
144
  <td>
145
+ <textarea id="simple_banner_text" style="height: 150px;width: 265px;resize: none;" name="simple_banner_text"><?php echo get_option('simple_banner_text'); ?></textarea>
146
  </td>
 
147
  </tr>
148
  <!-- Custom CSS -->
149
  <tr valign="top">
168
 
169
  <!-- Script to apply styles to Preview Banner -->
170
  <script type="text/javascript">
171
+ var style_background_color = document.createElement('style');
172
+ var style_link_color = document.createElement('style');
173
+ var style_text_color = document.createElement('style');
174
+ var style_custom_css = document.createElement('style');
175
+
176
+ // Banner Text
177
+ document.getElementById('preview_banner_text').innerHTML = document.getElementById('simple_banner_text').value != "" ? '<span>'+document.getElementById('simple_banner_text').value+'</span>' : '<span>This is what your banner will look like with a <a href="/">link</a>.*</span>';
178
+ document.getElementById('simple_banner_text').onchange=function(e){
179
+ console.log(e.target.value);
180
+ document.getElementById('preview_banner_text').innerHTML = e.target.value != "" ? '<span>'+e.target.value+'</span>' : '<span>This is what your banner will look like with a <a href="/">link</a>.*</span>';
181
+ };
182
+
183
+ // Background Color
184
+ style_background_color.type = 'text/css';
185
+ style_background_color.id = 'preview_banner_background_color'
186
+ style_background_color.appendChild(document.createTextNode('.simple-banner{background:'+document.getElementById('simple_banner_color').value || '#024985'+'}'));
187
+ document.getElementsByTagName('head')[0].appendChild(style_background_color);
188
+
189
+ document.getElementById('simple_banner_color').onchange=function(){
190
+ var child = document.getElementById('preview_banner_background_color');
191
+ if (child){child.innerText = "";child.id='';}
192
+
193
+ var style_dynamic = document.createElement('style');
194
+ style_dynamic.type = 'text/css';
195
+ style_dynamic.id = 'preview_banner_background_color';
196
+ style_dynamic.appendChild(
197
+ document.createTextNode(
198
+ '.simple-banner{background:'+document.getElementById('simple_banner_color').value || '#024985'+'}'
199
+ )
200
+ );
201
+ document.getElementsByTagName('head')[0].appendChild(style_dynamic);
202
+ };
203
+
204
+ // Text Color
205
+ style_text_color.type = 'text/css';
206
+ style_text_color.id = 'preview_banner_text_color'
207
+ style_text_color.appendChild(document.createTextNode('.simple-banner .simple-banner-text{color:'+document.getElementById('simple_banner_text_color').value || '#ffffff'+'}'));
208
+ document.getElementsByTagName('head')[0].appendChild(style_text_color);
209
+
210
+ document.getElementById('simple_banner_text_color').onchange=function(){
211
+ var child = document.getElementById('preview_banner_text_color');
212
+ if (child){child.innerText = "";child.id='';}
213
+
214
+ var style_dynamic = document.createElement('style');
215
+ style_dynamic.type = 'text/css';
216
+ style_dynamic.id = 'preview_banner_text_color';
217
+ style_dynamic.appendChild(
218
+ document.createTextNode(
219
+ '.simple-banner .simple-banner-text{color:'+document.getElementById('simple_banner_text_color').value || '#ffffff'+'}'
220
+ )
221
+ );
222
+ document.getElementsByTagName('head')[0].appendChild(style_dynamic);
223
+ };
224
+
225
+ // Link Color
226
+ style_link_color.type = 'text/css';
227
+ style_link_color.id = 'preview_banner_link_color'
228
+ style_link_color.appendChild(document.createTextNode('.simple-banner .simple-banner-text a{color:'+document.getElementById('simple_banner_link_color').value || '#f16521'+'}'));
229
+ document.getElementsByTagName('head')[0].appendChild(style_link_color);
230
+
231
+ document.getElementById('simple_banner_link_color').onchange=function(){
232
+ var child = document.getElementById('preview_banner_link_color');
233
+ if (child){child.innerText = "";child.id='';}
234
+
235
+ var style_dynamic = document.createElement('style');
236
+ style_dynamic.type = 'text/css';
237
+ style_dynamic.id = 'preview_banner_link_color';
238
+ style_dynamic.appendChild(
239
+ document.createTextNode(
240
+ '.simple-banner .simple-banner-text a{color:'+document.getElementById('simple_banner_link_color').value || '#f16521'+'}'
241
+ )
242
+ );
243
+ document.getElementsByTagName('head')[0].appendChild(style_dynamic);
244
+ };
245
 
246
+ //Custom CSS
247
+ style_custom_css.type = 'text/css';
248
+ style_custom_css.id = 'preview_banner_custom_stylesheet'
249
+ style_custom_css.appendChild(document.createTextNode('.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'));
250
+ document.getElementsByTagName('head')[0].appendChild(style_custom_css);
251
 
252
+ document.getElementById('simple_banner_custom_css').onchange=function(){
253
  var child = document.getElementById('preview_banner_custom_stylesheet');
254
  if (child){child.innerText = "";child.id='';}
255
 
256
  var style_dynamic = document.createElement('style');
257
  style_dynamic.type = 'text/css';
258
  style_dynamic.id = 'preview_banner_custom_stylesheet';
259
+ style_dynamic.appendChild(
260
+ document.createTextNode(
261
+ '.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'
262
+ )
263
+ );
264
  document.getElementsByTagName('head')[0].appendChild(style_dynamic);
265
  };
266
  </script>