Spacer - Version 2.0

Version Description

  • Feature added: Choose to hide spacer on mobile devices, or choose a different spacer height for mobile.
  • Feature added: Manually edit mobile height, custom classes, and inline style for individual spacer elements.
  • Feature added: Compatibility with Beaver Page Builder's wysiswyg UI.
  • Premium users: Speed up your workflow by setting a default height for your spacer. You can also set defaults for your spacer's custom classes and inline style.
Download this release

Release Info

Developer clevelandwebdeveloper
Plugin Icon 128x128 Spacer
Version 2.0
Comparing to
See all releases

Version 2.0

Files changed (12) hide show
  1. editor_plugin.js +32 -0
  2. icon.png +0 -0
  3. images/Thumbs.db +0 -0
  4. images/buy_sprite.png +0 -0
  5. images/green_ribbon_base.png +0 -0
  6. images/green_ribbon_left.png +0 -0
  7. images/green_ribbon_right.png +0 -0
  8. images/premium_back.png +0 -0
  9. index.php +823 -0
  10. js/motech-color-picker.js +3 -0
  11. js/spacer_imageupload.js +42 -0
  12. readme.txt +78 -0
editor_plugin.js ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function() {
2
+ var button_name = 'motech_spacer'; //set button name
3
+
4
+ tinymce.create('tinymce.plugins.'+button_name, {
5
+ init : function(ed, url) {
6
+ ed.addButton(button_name, {
7
+ title : 'Add a Spacer', //set button label
8
+ image : url+'/icon.png', //set icon filename (20 X 20px). put icon in same folder
9
+ onclick : function() {
10
+ //idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
11
+ //var vidId = prompt("YouTube Video", "Enter the id or url for your video");
12
+ //var m = idPattern.exec(vidId);
13
+ //if (m != null && m != 'undefined')
14
+ ed.execCommand('mceInsertContent', false, '[spacer height="default"]');
15
+ }
16
+ });
17
+ },
18
+ createControl : function(n, cm) {
19
+ return null;
20
+ },
21
+ getInfo : function() {
22
+ return {
23
+ longname : button_name,
24
+ author : 'Justin Saad',
25
+ authorurl : 'http://clevelandwebdeveloper.com/',
26
+ infourl : 'http://clevelandwebdeveloper.com/',
27
+ version : "1.0"
28
+ };
29
+ }
30
+ });
31
+ tinymce.PluginManager.add(button_name, tinymce.plugins[button_name]);
32
+ })();
icon.png ADDED
Binary file
images/Thumbs.db ADDED
Binary file
images/buy_sprite.png ADDED
Binary file
images/green_ribbon_base.png ADDED
Binary file
images/green_ribbon_left.png ADDED
Binary file
images/green_ribbon_right.png ADDED
Binary file
images/premium_back.png ADDED
Binary file
index.php ADDED
@@ -0,0 +1,823 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /*
4
+ Plugin Name: Spacer
5
+ Description: Adds a spacer button to the WYSIWYG visual editor which allows you to add precise custom spacing between lines in your posts and pages.
6
+ Version: 2.0
7
+ Author: Justin Saad
8
+ Author URI: http://www.clevelandwebdeveloper.com
9
+ License: GPL2
10
+ */
11
+
12
+
13
+ //begin wysiwyg visual editor custom button plugin
14
+
15
+ $plugin_label = "Spacer";
16
+ $plugin_slug = "motech_spacer";
17
+
18
+ class motech_spacer {
19
+
20
+ public function __construct() {
21
+
22
+ global $plugin_label, $plugin_slug;
23
+ $this->plugin_slug = $plugin_slug;
24
+ $this->plugin_label = $plugin_label;
25
+ $this->plugin_dir = plugins_url( '' , __FILE__ );
26
+
27
+ //do when class is instantiated
28
+ add_shortcode('spacer', array($this, 'addShortcodeHandler'));
29
+ add_filter( 'tiny_mce_version', array($this, 'my_refresh_mce'));
30
+
31
+ //plugin row links
32
+ add_filter( 'plugin_row_meta', array($this,'plugin_row_links'), 10, 2 );
33
+
34
+ if(is_admin()){
35
+ add_action('admin_init', array($this, 'page_init'));
36
+ add_action('admin_menu', array($this, 'add_plugin_page'));
37
+ //custom image picker css for admin page
38
+ add_action('admin_head', array($this,'motech_imagepicker_admin_css'));
39
+ //custom image picker jquery for admin page
40
+ add_action('admin_footer', array($this,'motech_imagepicker_admin_jquery'));
41
+ //add Settings link to plugin page
42
+ add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), array($this, 'add_plugin_action_links') );
43
+ //image upload script
44
+ add_action('admin_enqueue_scripts', array($this,'spacer_imageupload_script'));
45
+
46
+ add_action( 'admin_enqueue_scripts', array($this, 'enqueue_color_picker') ); //enqueue color picker
47
+
48
+ //admin messages
49
+ add_action('admin_notices', array($this,'admin_show_message'));
50
+ add_action('admin_init', array($this,'adminmessage_init'));
51
+ }
52
+ }
53
+
54
+
55
+ function admin_show_message()
56
+ {
57
+ $user_id = get_current_user_id();
58
+ //there is no default spacer height set, and nag message not ignored...
59
+ $checkdefault = get_option($this->plugin_slug . '_default_height_mobile','');
60
+ if ( ( ! get_user_meta($user_id, 'spacer3001_nag_ignore') ) && ($checkdefault=='') ) {
61
+ echo '<div id="message" class="updated fade notice"><p>';
62
+ echo ("<b>You can now <a href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin\">hide spacer on mobile screens</a>, or set a custom spacer height for mobile screens.</b>");
63
+ echo "</p>";
64
+ echo "<p><strong><a href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin\" target=\"_parent\">Set spacer height for mobile devices</a> | <a class=\"dismiss-notice\" href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin&spacer3001_nag_ignore=0\" target=\"_parent\">Dismiss this notice</a></strong></p></div>";
65
+ }
66
+ }
67
+
68
+ function adminmessage_init()
69
+ {
70
+ if ( isset($_GET['spacer3001_nag_ignore']) && '0' == $_GET['spacer3001_nag_ignore'] ) {
71
+ $user_id = get_current_user_id();
72
+ add_user_meta($user_id, 'spacer3001_nag_ignore', 'true', true);
73
+ if (wp_get_referer()) {
74
+ /* Redirects user to where they were before */
75
+ wp_safe_redirect(wp_get_referer());
76
+ } else {
77
+ /* if there is no referrer you redirect to home */
78
+ wp_safe_redirect(home_url());
79
+ }
80
+ }
81
+ }
82
+
83
+ function enqueue_color_picker( $hook_suffix ) {
84
+ wp_enqueue_style( 'wp-color-picker' );
85
+ wp_enqueue_script( $this->plugin_slug.'-script-handle', plugins_url('js/motech-color-picker.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
86
+ }
87
+
88
+ function spacer_imageupload_script() {
89
+ if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') {
90
+ wp_enqueue_media();
91
+ wp_register_script('spacer_imageupload-js', plugins_url( 'js/spacer_imageupload.js' , __FILE__ ), array('jquery'));
92
+ wp_enqueue_script('spacer_imageupload-js');
93
+ }
94
+ }
95
+
96
+ // add the shortcode handler
97
+ function addShortcodeHandler($atts, $content = null) {
98
+ extract(shortcode_atts(array( "height" => '', "mheight" => '', "class" => '', "style" => '' ), $atts));
99
+
100
+ //prep variables
101
+ $spacer_css = "";
102
+ $classes = "";
103
+
104
+ //prep mobile height, if it's empty we will use desktop height. if set to 0 we will hide the spacer on mobile devices.
105
+ $mobile_height = "";
106
+ $mobile_height_inline = "";
107
+ $mobile_height_default = get_option($this->plugin_slug . '_default_height_mobile','');
108
+
109
+ //first check for inline height, then check default mobile height
110
+ if(isset($mheight) && $mheight != ""){
111
+ $mobile_height = $mheight;
112
+ $mobile_height_inline = $mheight;
113
+ }elseif(isset($mobile_height_default) && $mobile_height_default != ""){
114
+ $mobile_height = get_option($this->plugin_slug . '_default_height_mobile','');
115
+ $mobile_height_default = $mobile_height;
116
+ }
117
+
118
+
119
+ //determine the height to use for the spacer. if it's a mobile device and there is a mobile height set, use that. otherwise use desktop height
120
+ if( function_exists('wp_is_mobile') && wp_is_mobile() && (isset($mobile_height) && $mobile_height != "")) {
121
+ $mobileunit = get_option($this->plugin_slug . '_default_height_mobile_unit','px');
122
+
123
+
124
+ if(isset($mobile_height_inline) && $mobile_height_inline != "") {
125
+ if ($mobile_height_inline > 0 ) {
126
+ $spacer_css .= "padding-top: " . $mobile_height_inline . ";";
127
+ } elseif($mobile_height_inline < 0) {
128
+ $spacer_css .= "margin-top: " . $mobile_height_inline . ";";
129
+ } elseif($mobile_height_inline == 0){
130
+ $spacer_css .= "display:none;";
131
+ }
132
+ } elseif(isset($mobile_height_default) && $mobile_height_default != ""){
133
+ if($mobile_height_default > 0){
134
+ $spacer_css .= "padding-top: " . $mobile_height_default . $mobileunit.";";
135
+ }elseif($mobile_height_default < 0){
136
+ $spacer_css .= "margin-top: " . $mobile_height_default . $mobileunit. ";";
137
+ }elseif($mobile_height_default == 0){;
138
+ $spacer_css .= "display:none;";
139
+ }
140
+ }
141
+
142
+ } elseif($height=="default"){ //there is no mobile height set. use the desktop default height
143
+
144
+ //for now assume positive. in a sec add logic for if negative
145
+ $checkheight = get_option($this->plugin_slug . '_default_height','20');
146
+ $checkunit = get_option($this->plugin_slug . '_default_height_unit','px');
147
+
148
+ if($checkheight > 0){
149
+ $spacer_css .= "padding-top: " . $checkheight . $checkunit.";";
150
+ }elseif($checkheight < 0){
151
+ $spacer_css .= "margin-top: " . $checkheight . $checkunit. ";";
152
+ }
153
+ } elseif ($height > 0 ) { #no default for desktop, use positive inline height
154
+ $spacer_css .= "padding-top: " . $height . ";";
155
+ } elseif($height < 0) { #no positive inline for desktop, use negative inline height
156
+ $spacer_css .= "margin-top: " . $height . ";";
157
+ }
158
+
159
+
160
+ //custom background image
161
+ $bg = get_option($this->plugin_slug.'_custom_background_image_upload');
162
+ if(!empty($bg)) {
163
+ $spacer_css .= "background: url(".$bg.");";
164
+ }
165
+
166
+ //custom background image position
167
+ $spacer_css .= $this->background_position();
168
+
169
+ //background color
170
+ $bgcolor = get_option($this->plugin_slug.'_background_color');
171
+ if(!empty($bgcolor)) {
172
+ $spacer_css .= "background-color:".$bgcolor.";";
173
+ }
174
+
175
+ //classes
176
+ $defaultclasses = get_option($this->plugin_slug.'_spacer_class','');
177
+ $classes .= $defaultclasses;
178
+ if(!empty($class)){
179
+ $classes .= " ".$class;
180
+ }
181
+
182
+ //styles
183
+ $defaultstyle = get_option($this->plugin_slug.'_spacer_style','');
184
+ $spacer_css .= $defaultstyle;
185
+ if(!empty($style)){
186
+ $spacer_css .= " ".$style;
187
+ }
188
+
189
+
190
+ //create the spacer after all settings have been loaded
191
+ return '<span class="'.$classes.'" style="display:block;clear:both;height: 0px;'.$spacer_css.'"></span>';
192
+ }
193
+
194
+ function background_position(){
195
+ $bgposition = get_option($this->plugin_slug.'_custom_background_image_position','repeat');
196
+ if($bgposition=="repeat"){
197
+ return "background-repeat:repeat;";
198
+ } elseif($bgposition=="croptofit"){
199
+ return "background-size:cover;background-position:center;";
200
+ } elseif($bgposition=="stretch"){
201
+ return "background-size: 100% 100%;background-repeat: no-repeat;background-position: center;";
202
+ } elseif($bgposition=="propstretch"){
203
+ return "background-size: contain;background-repeat: no-repeat;background-position: center;";
204
+ }
205
+ }
206
+
207
+
208
+ function add_custom_button() {
209
+ if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
210
+ return;
211
+ if ( get_user_option('rich_editing') == 'true') {
212
+ add_filter('mce_external_plugins', array($this, 'add_custom_tinymce_plugin'),99999999);
213
+ add_filter('mce_buttons', array($this, 'register_custom_button'),99999999);
214
+ }
215
+ }
216
+
217
+ function register_custom_button($buttons) {
218
+ array_push($buttons, "|", get_class($this));
219
+ return $buttons;
220
+ }
221
+
222
+ function add_custom_tinymce_plugin($plugin_array) {
223
+ //use this in a plugin
224
+ $plugin_array[get_class($this)] = plugins_url( 'editor_plugin.js' , __FILE__ );
225
+ //use this in a theme
226
+ //$plugin_array[get_class($this)] = get_bloginfo('template_url').'/editor_plugin.js';
227
+ return $plugin_array;
228
+ }
229
+
230
+ function my_refresh_mce($ver) {
231
+ $ver += 5;
232
+ return $ver;
233
+ }
234
+
235
+ function plugin_row_links($links, $file) {
236
+ $plugin = plugin_basename(__FILE__);
237
+ if ($file == $plugin) // only for this plugin
238
+ return array_merge( $links,
239
+ array( '<a target="_blank" href="http://www.linkedin.com/in/ClevelandWebDeveloper/">' . __('Find me on LinkedIn' ) . '</a>' ),
240
+ array( '<a target="_blank" href="http://twitter.com/ClevelandWebDev">' . __('Follow me on Twitter') . '</a>' )
241
+ );
242
+ return $links;
243
+ }
244
+
245
+ public function create_admin_page(){
246
+ ?>
247
+ <div class="wrap" style="position:relative">
248
+ <?php screen_icon(); ?>
249
+ <h2 class="aplabel"><?php echo $this->plugin_label ?></h2>
250
+
251
+
252
+ <div id="green_ribbon">
253
+
254
+ <div id="green_ribbon_top">
255
+ <div id="green_ribbon_left">
256
+ </div>
257
+ <div id="green_ribbon_base">
258
+ <span id="hms_get_premium">NEW! Get Premium &raquo;</span>
259
+ <span class="hms_get_premium_meta">Spacer Premium is now available for as low as $20!</span>
260
+ </div>
261
+ <div id="green_ribbon_right">
262
+ </div>
263
+ </div>
264
+
265
+ <div class="motech_premium_box">
266
+ <div class="motech_premium_box_wrap">
267
+ <h2>Get Premium</h2>
268
+ <div class="updated below-h2" style="margin-bottom: -20px !important;"><p><strong>Purchase will be processed via PayPal.</strong></p></div>
269
+ <div class="updated below-h2"><p><strong>Every license is valid for the lifetime of the website where it's installed.</strong></p></div>
270
+
271
+ <div class="motech_purchase_buttons">
272
+
273
+ <div class="motech_purchase_button one_use">
274
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" value="_s-xclick" type="hidden"><input name="hosted_button_id" value="W5UNGBADQSZ9A" type="hidden"><input type="hidden" name="page_style" value="motech_spacer_premium">
275
+ <button name="submit">
276
+ <div class="purchase_graphic">Buy 1 Use</div>
277
+ <div class="purchase_bubble">
278
+ <div class="purchase_price">$20</div>
279
+ <div class="purchase_meta">1 site license</div>
280
+ </div>
281
+ </button>
282
+ <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">
283
+ </form>
284
+ </div>
285
+
286
+
287
+ <div class="motech_purchase_button unlimited_use">
288
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" value="_s-xclick" type="hidden"><input name="hosted_button_id" value="P7E4QQM6Q25MN" type="hidden"><input type="hidden" name="page_style" value="motech_spacer_premium">
289
+ <button name="submit">
290
+ <div class="purchase_graphic">Buy <span>Unlimited</span></div>
291
+ <div class="purchase_bubble">
292
+ <div class="purchase_price">$50</div>
293
+ <div class="purchase_meta">Unlimited sites forever!</div>
294
+ </div>
295
+ </button>
296
+ <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">
297
+ </form>
298
+ </div>
299
+
300
+ </div>
301
+
302
+ <div class="motech_premium_cancel"><span>Cancel</span></div>
303
+
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+
309
+ <form method="post" action="options.php" class="<?php echo $this->plugin_slug ?>_form">
310
+ <?php
311
+ // This prints out all hidden setting fields
312
+ settings_fields($this->plugin_slug.'_option_group');
313
+ do_settings_sections($this->plugin_slug.'-setting-admin');
314
+ ?>
315
+ <?php submit_button(); ?>
316
+ </form>
317
+ </div>
318
+ <?php
319
+ }
320
+
321
+ public function page_init(){
322
+
323
+ add_settings_section(
324
+ $this->plugin_slug.'_setting_section',
325
+ 'Configuration',
326
+ array($this, 'print_section_info'),
327
+ $this->plugin_slug.'-setting-admin'
328
+ );
329
+
330
+ //add text input field
331
+ $field_slug = "default_height";
332
+ $field_label = "Default Spacer Height" . $this->get_premium_warning();
333
+ $field_id = $this->plugin_slug.'_'.$field_slug;
334
+ register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po_20'));
335
+ add_settings_field(
336
+ $field_id,
337
+ $field_label,
338
+ array($this, 'create_a_text_input'), //callback function for text input
339
+ $this->plugin_slug.'-setting-admin',
340
+ $this->plugin_slug.'_setting_section',
341
+ array( // The array of arguments to pass to the callback.
342
+ "id" => $field_id, //sends field id to callback
343
+ "desc" => 'Speed up your workfolow by setting a default height to apply to your spacers. Note that you can also enter negative spacing to shift the following content upwards.', //description of the field (optional)
344
+ "placeholder" => 'eg: 20',
345
+ "default" => '20' //sets the default field value (optional), when grabbing this option value later on remember to use get_option(option_name, default_value) so it will return default value if no value exists yet
346
+ )
347
+ );
348
+
349
+ //add a select input field
350
+ $field_slug = "default_height_unit";
351
+ $field_label = "Spacer Height Unit" . $this->get_premium_warning();
352
+ $field_id = $this->plugin_slug.'_'.$field_slug;
353
+ $this->unit_options = array(
354
+ array("label" => "px", "value" => "px"),
355
+ array("label" => "em", "value" => "em"),
356
+ array("label" => "rem", "value" => "rem"),
357
+ array("label" => "%", "value" => "%"),
358
+ );
359
+ register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po_px'));
360
+ add_settings_field(
361
+ $field_id,
362
+ $field_label,
363
+ array($this, 'create_a_select_input'), //callback function for select input
364
+ $this->plugin_slug.'-setting-admin',
365
+ $this->plugin_slug.'_setting_section',
366
+ array( // The array of arguments to pass to the callback.
367
+ "id" => $field_id, //sends select field id to callback
368
+ "default" => 'px', //sets the default field value (optional), when grabbing this field value later on remember to use get_option(option_name, default_value) so it will return default value if no value exists yet
369
+ "desc" => 'Select a unit of measurement to use with your default spacer height.', //description of the field (optional)
370
+ "meta" => 'style="max-width:450px;"',
371
+ "select_options" => $this->unit_options //sets select option data
372
+ )
373
+ );
374
+
375
+ //add text input field
376
+ $field_slug = "default_height_mobile";
377
+ $field_label = "Default Spacer Height On Mobile (Optional)";
378
+ $field_id = $this->plugin_slug.'_'.$field_slug;
379
+ register_setting($this->plugin_slug.'_option_group', $field_id);
380
+ add_settings_field(
381
+ $field_id,
382
+ $field_label,
383
+ array($this, 'create_a_text_input'), //callback function for text input
384
+ $this->plugin_slug.'-setting-admin',
385
+ $this->plugin_slug.'_setting_section',
386
+ array( // The array of arguments to pass to the callback.
387
+ "id" => $field_id, //sends field id to callback
388
+ "desc" => 'Set the default spacer height on mobile devices. If left empty, the spacer mobile height will be the same as the spacer desktop height. If set to 0, the spacer will be hidden on mobile.', //description of the field (optional)
389
+ "placeholder" => 'eg: 10',
390
+ "default" => '' //sets the default field value (optional), when grabbing this option value later on remember to use get_option(option_name, default_value) so it will return default value if no value exists yet
391
+ )
392
+ );
393
+
394
+ //add a select input field
395
+ $field_slug = "default_height_mobile_unit";
396
+ $field_label = "Spacer Height Unit On Mobile";
397
+ $field_id = $this->plugin_slug.'_'.$field_slug;
398
+ $this->unit_options = array(
399
+ array("label" => "px", "value" => "px"),
400
+ array("label" => "em", "value" => "em"),
401
+ array("label" => "rem", "value" => "rem"),
402
+ array("label" => "%", "value" => "%"),
403
+ );
404
+ register_setting($this->plugin_slug.'_option_group', $field_id);
405
+ add_settings_field(
406
+ $field_id,
407
+ $field_label,
408
+ array($this, 'create_a_select_input'), //callback function for select input
409
+ $this->plugin_slug.'-setting-admin',
410
+ $this->plugin_slug.'_setting_section',
411
+ array( // The array of arguments to pass to the callback.
412
+ "id" => $field_id, //sends select field id to callback
413
+ "default" => 'px', //sets the default field value (optional), when grabbing this field value later on remember to use get_option(option_name, default_value) so it will return default value if no value exists yet
414
+ "desc" => 'Select a unit of measurement to use with your default spacer height on mobile devices. This only applies if you have a default spacer height set for mobile.', //description of the field (optional)
415
+ "meta" => 'style="max-width:450px;"',
416
+ "select_options" => $this->unit_options //sets select option data
417
+ )
418
+ );
419
+
420
+ //add text input field
421
+ $field_slug = "spacer_class";
422
+ $field_label = "Default Spacer Class (Optional)" . $this->get_premium_warning();
423
+ $field_id = $this->plugin_slug.'_'.$field_slug;
424
+ register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po'));
425
+ add_settings_field(
426
+ $field_id,
427
+ $field_label,
428
+ array($this, 'create_a_text_input'), //callback function for text input
429
+ $this->plugin_slug.'-setting-admin',
430
+ $this->plugin_slug.'_setting_section',
431
+ array( // The array of arguments to pass to the callback.
432
+ "id" => $field_id, //sends field id to callback
433
+ "desc" => 'Enter a custom css class to apply to all of your spacer elements. Multiple classes can be added by putting a blank space between each class name', //description of the field (optional)
434
+ "placeholder" => 'eg: MyClass1 Class2'
435
+ )
436
+ );
437
+
438
+ //add textarea input field
439
+ $field_slug = "spacer_style";
440
+ $field_label = "Spacer Style (Optional)" . $this->get_premium_warning();
441
+ $field_id = $this->plugin_slug.'_'.$field_slug;
442
+ register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po'));
443
+ add_settings_field(
444
+ $field_id,
445
+ $field_label,
446
+ array($this, 'create_a_textarea_input'), //callback function for textarea input
447
+ $this->plugin_slug.'-setting-admin',
448
+ $this->plugin_slug.'_setting_section',
449
+ array( // The array of arguments to pass to the callback.
450
+ "id" => $field_id, //sends field id to callback
451
+ "desc" => 'Enter custom css to apply to all of your spacer elements. This is for advanced users. Just leave this empty if you\'re not sure what this means or if you don\'t have a use for it.', //description of the field (optional)
452
+ "placeholder" => '(for example) border-top: solid 2px black; border-bottom: solid 2px black; margin-bottom: 25px;' //sets the field placeholder which appears when the field is empty (optional)
453
+ )
454
+ );
455
+
456
+
457
+
458
+ //add radio option
459
+ //$option_id = "status";
460
+ //add_settings_field($option_id, 'Status', array($this, 'create_radio_field'), 'wordpresshidesite-setting-admin', 'setting_section_id', array("option_id" => $option_id));
461
+
462
+ } //end page_init
463
+
464
+
465
+ /**
466
+ * This following set of functions handle all input field creation
467
+ *
468
+ */
469
+ function create_image_upload($args) {
470
+ ?>
471
+ <?php
472
+ //set default value if applicable
473
+ if(isset($args["default"])) {
474
+ $default = $args["default"];
475
+ } else {
476
+ $default = false;
477
+ }
478
+ ?>
479
+ <input class="motech_upload_image" type="text" size="36" name="<?php echo $args["id"] ?>" value="<?php echo get_option($args["id"], $default) ?>" />
480
+ <input class="motech_upload_image_button" class="button" type="button" value="Upload Image" />
481
+ <br />
482
+ <?php
483
+ if(isset($args["desc"])) {
484
+ echo "<span class='description'>".$args["desc"]."</span>";
485
+ } else {
486
+ echo "<span class='description'>Enter a URL or upload an image.</span>";
487
+ }
488
+ ?>
489
+ <?php
490
+ $current_image = get_option($args["id"],$default);
491
+ if(!empty($current_image)) {
492
+ echo "<br><strong>Preview</strong><br><img style='padding-left:20px; max-width: 50%; max-height: 400px;' src='".$current_image."'>";
493
+ }
494
+ ?>
495
+ <?php
496
+ } // end create_image_upload
497
+
498
+ function create_a_checkbox($args) {
499
+ $html = '<input type="checkbox" id="' . $args["id"] . '" name="' . $args["id"] . '" value="1" ' . checked(1, get_option($args["id"], $args["default"]), false) . '/>';
500
+
501
+ // Here, we will take the desc argument of the array and add it to a label next to the checkbox
502
+ $html .= '<label for="' . $args["id"] . '">&nbsp;' . $args["desc"] . '</label>';
503
+
504
+ echo $html;
505
+
506
+ } // end create_a_checkbox
507
+
508
+ function create_a_text_input($args) {
509
+ //grab placeholder if there is one
510
+ if(isset($args["placeholder"])) {
511
+ $placeholder_html = "placeholder=\"".$args["placeholder"]."\"";
512
+ } else {
513
+ $placeholder_html = "";
514
+ }
515
+ //grab maxlength if there is one
516
+ if(isset($args["maxlength"])) {
517
+ $max_length_html = "maxlength=\"".$args["maxlength"]."\"";
518
+ } else {
519
+ $max_length_html = "";
520
+ }
521
+ if(isset($args["default"])) {
522
+ $default = $args["default"];
523
+ } else {
524
+ $default = false;
525
+ }
526
+ if(!isset($args["class"])){
527
+ $args["class"] = "";
528
+ }
529
+ // Render the output
530
+ echo '<input type="text" ' . $placeholder_html . $max_length_html . ' id="' . $args["id"] . '" class="' . $args["class"]. '" name="' . $args["id"] . '" value="' . get_option($args["id"], $default) . '" />';
531
+ if($args["desc"]) {
532
+ echo "<p class='description'>".$args["desc"]."</p>";
533
+ }
534
+
535
+
536
+ } // end create_a_text_input
537
+
538
+ function create_a_textarea_input($args) {
539
+ //grab placeholder if there is one
540
+ if($args["placeholder"]) {
541
+ $placeholder_html = "placeholder=\"".$args["placeholder"]."\"";
542
+ } else {
543
+ $placeholder_html = "";
544
+ }
545
+ //get default value if there is one
546
+ if(isset($args["default"])) {
547
+ $default = $args["default"];
548
+ } else {
549
+ $default = false;
550
+ }
551
+ // Render the output
552
+ echo '<textarea ' . $placeholder_html . ' id="' . $args["id"] . '" name="' . $args["id"] . '" rows="5" cols="50">' . get_option($args["id"], $default) . '</textarea>';
553
+ if($args["desc"]) {
554
+ echo "<p class='description'>".$args["desc"]."</p>";
555
+ }
556
+ }
557
+
558
+ function create_a_radio_input($args) {
559
+
560
+ $radio_options = $args["radio_options"];
561
+ $html = "";
562
+ if($args["desc"]) {
563
+ $html .= $args["desc"] . "<br>";
564
+ }
565
+ //get default value if there is one
566
+ if(isset($args["default"])) {
567
+ $default = $args["default"];
568
+ } else {
569
+ $default = false;
570
+ }
571
+ foreach($radio_options as $radio_option) {
572
+ $html .= '<input type="radio" id="' . $args["id"] . '_' . $radio_option["value"] . '" name="' . $args["id"] . '" value="'.$radio_option["value"].'" ' . checked($radio_option["value"], get_option($args['id'], $default), false) . '/>';
573
+ $html .= '<label for="' . $args["id"] . '_' . $radio_option["value"] . '"> '.$radio_option["label"].'</label><br>';
574
+ }
575
+
576
+ echo $html;
577
+
578
+ } // end create_a_radio_input callback
579
+
580
+ function create_a_select_input($args) {
581
+
582
+ $select_options = $args["select_options"];
583
+ $html = "";
584
+ //get default value if there is one
585
+ if(isset($args["default"])) {
586
+ $default = $args["default"];
587
+ } else {
588
+ $default = false;
589
+ }
590
+ if(isset($args["meta"])) {
591
+ $meta = $args["meta"];
592
+ } else {
593
+ $meta = "";
594
+ }
595
+ $html .= '<select id="' . $args["id"] . '" name="' . $args["id"] . '" ' . $meta . '" >';
596
+ foreach($select_options as $select_option) {
597
+ $html .= '<option value="'.$select_option["value"].'" ' . selected( $select_option["value"], get_option($args["id"], $default), false) . '>'.$select_option["label"].'</option>';
598
+ }
599
+ $html .= '</select>';
600
+ if($args["desc"]) {
601
+ $html .= "<p class='description'>".$args["desc"]."</p>";
602
+ }
603
+ echo $html;
604
+
605
+ } // end create_a_select_input callback
606
+
607
+ public function print_section_info(){ //section summary info goes here
608
+ //print 'This is the where you set the password for your site.';
609
+ }
610
+
611
+ public function add_plugin_page(){
612
+ // This page will be under "Settings"
613
+ add_options_page('Settings Admin', $this->plugin_label, 'manage_options', $this->plugin_slug.'-setting-admin', array($this, 'create_admin_page'));
614
+ }
615
+
616
+ //add plugin action links logic
617
+ function add_plugin_action_links( $links ) {
618
+
619
+ return array_merge(
620
+ array(
621
+ 'settings' => '<a href="' . get_bloginfo( 'wpurl' ) . '/wp-admin/options-general.php?page='.$this->plugin_slug.'-setting-admin">Settings</a>'
622
+ ),
623
+ $links
624
+ );
625
+
626
+ }
627
+
628
+ function motech_imagepicker_admin_css() {
629
+ if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
630
+ ?>
631
+ <style>
632
+ .hmshidden {display:none;}
633
+ #wpbody h3 {font-size:20px;}
634
+ #hide_my_site_current_theme {display:none;}
635
+ div.updated.success {background-color: rgb(169, 252, 169);border-color: rgb(85, 151, 85);}
636
+ .mvalid {background-color: rgb(169, 252, 169);border-color: rgb(85, 151, 85);width: 127px;font-weight: bold;padding-left: 10px;border: solid 1px rgb(85, 151, 85);border-radius: 3px;}
637
+ .motech_premium_only {color:red;}
638
+ #green_ribbon_top {position:relative;z-index:2;}
639
+ #green_ribbon_left {background:url(<?php echo $this->plugin_dir ?>/images/green_ribbon_left.png) no-repeat -11px 0px;width: 80px;height: 60px;float: left;}
640
+ #green_ribbon_right {background:url(<?php echo $this->plugin_dir ?>/images/green_ribbon_right.png) no-repeat;width: 80px;height: 60px;position: absolute;top: 0px;right: -10px;}
641
+ #green_ribbon_base {background:url(<?php echo $this->plugin_dir ?>/images/green_ribbon_base.png) repeat-x;height: 60px;margin-left: 49px;margin-right: 70px;}
642
+ #green_ribbon_base span {display: inline-block;color: white;position: relative;top: 11px;height: 35px; line-height:33px;font-size: 17px;font-weight: bold;font-style: italic;text-shadow: 1px 3px 2px #597c2a;}
643
+ #hms_get_premium {background: rgb(58, 80, 27);background: rgba(58, 80, 27, 0.73);cursor:pointer;padding: 0px 12px;margin-left: -17px;font-style: normal !important;margin-right: 12px;text-shadow: 1px 3px 2px #364C18 !important;}
644
+ #hms_get_premium:hover {background:rgb(30, 43, 12);background:rgba(30, 43, 12, 0.73);text-shadow: 1px 3px 2px #21310B !important;}
645
+ .motech_premium_box {background:url(<?php echo $this->plugin_dir ?>/images/premium_back.png); margin-left: 49px;padding-top: 29px;padding-bottom:36px;margin-right: 70px;position:relative;top:-16px;display:none;}
646
+ .motech_premium_box_wrap {margin-left:20px; margin-right:20px;}
647
+ .motech_premium_box h2 {text-align: center;color: #585858;font-size: 36px;text-shadow: 1px 3px 2px #acabab;}
648
+ .motech_premium_box .updated {margin-bottom: 20px !important;margin-top: 29px !important;}
649
+ .motech_premium_box button {background: none;border: none; position:relative;cursor: pointer;overflow: visible;}
650
+ .motech_purchase_button .purchase_graphic {background:url(<?php echo $this->plugin_dir ?>/images/buy_sprite.png) no-repeat;height: 100px;width: 101px;background-position: -17px -24px;color: white;font-size: 22px;padding: 20px 42px;padding-top: 57px;text-shadow: 1px 1px 7px black;position: absolute;top: -80px;left: -80px;line-height:normal;font-family: 'Open Sans', sans-serif;}
651
+ .redeem_info{margin-top:20px;display:none;}
652
+ .motech_purchase_button.unlimited_use .purchase_graphic {width: 115px;padding: 21px 36px;padding-top: 57px;}
653
+ .motech_purchase_button.unlimited_use .purchase_graphic span {font-weight:bold;}
654
+ .motech_purchase_button .purchase_bubble {background: white;border-radius: 9px;width: 350px;height: 123px;margin-bottom: 5px;-webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;}
655
+ .motech_purchase_button:hover .purchase_bubble { background-color: #99dcf8;box-shadow:2px 3px 2px rgba(0, 0, 0, 0.31);}
656
+ .motech_purchase_button.three_use:hover .purchase_bubble { background-color: #96f5e4;}
657
+ .motech_purchase_button.unlimited_use:hover .purchase_bubble { background-color: #f8c4c6;}
658
+ .motech_purchase_buttons {padding-top:90px;text-align:center;}
659
+ .motech_purchase_button {display:inline-block;margin-right: 100px;vertical-align:top;}
660
+ .motech_purchase_button .purchase_price {font-size: 60px;color: #585858;line-height:normal;}
661
+ .motech_purchase_button:last-child {margin-right:0px;}
662
+ .motech_purchase_button.three_use .purchase_graphic {background-position: -208px -24px;}
663
+ .motech_purchase_button.unlimited_use .purchase_graphic {background-position: -397px -24px;}
664
+ .motech_premium_cancel {color:#626262;text-align:center;font-size:22px;margin-top:43px;}
665
+ .motech_premium_cancel span:hover {cursor:pointer;text-decoration:underline;}
666
+ .<?php echo $this->plugin_slug ?>_form > .form-table {max-width:770px;}
667
+
668
+
669
+ /*css for the image picker*/
670
+ .motech_image_picker img {border-radius: 14px;box-shadow: 0px 0px 0px 2px rgba(0, 0, 255, 0.3);}
671
+ .motech_image_picker_wrap:hover img, .motech_image_picker_wrap:focus img {box-shadow: 0px 0px 0px 2px rgba(0, 0, 255, 0.56);}
672
+ .motech_image_picker_wrap.current img, .motech_image_picker_wrap:active img {box-shadow: 0px 0px 0px 4px rgba(0, 0, 255, 0.9);}
673
+ .motech_image_picker_wrap {display:inline-block;cursor: pointer;margin-right:20px;margin-bottom: 30px;}
674
+ .motech_image_picker_wrap div {font-weight:bold;font-size:16px;margin-top:10px;color:rgba(0, 0, 0, 0.47);}
675
+
676
+ /* Begin Responsive
677
+ ====================================================================== */
678
+ @media only screen and (max-width: 1700px) {
679
+ .motech_purchase_button .purchase_price {font-size: 42px;padding-top: 18px;}
680
+ .motech_purchase_button .purchase_bubble {width: 252px;}
681
+ }
682
+ @media only screen and (max-width: 1535px) {
683
+ .motech_purchase_button .purchase_bubble {width: 131px;padding-top: 69px;}
684
+ .motech_purchase_button .purchase_graphic {left: -23px;}
685
+ .motech_purchase_button {margin-right:70px;}
686
+ }
687
+ @media only screen and (max-width: 1255px) {
688
+ .motechdonate {height: 55px;}
689
+ }
690
+ @media only screen and (max-width: 1025px) {
691
+ .hms_get_premium_meta {display:none !important;}
692
+ }
693
+ @media only screen and (max-width: 980px) {
694
+ .motech_purchase_button {display:block;margin-bottom: 80px;margin-right:0px;}
695
+ }
696
+ @media only screen and (max-width: 445px) {
697
+ .motech_premium_box h2 {font-size:22px;}
698
+ }
699
+ @media only screen and (max-width: 380px) {
700
+ #green_ribbon_base span {font-size: 12px;}
701
+ #hms_get_premium {margin-right:0px;}
702
+ }
703
+ @media only screen and (max-width: 330px) {
704
+ .motech_purchase_button {
705
+ margin-left: -9px;
706
+ }
707
+ </style>
708
+
709
+ <!--[if lt IE 9]>
710
+ <style>
711
+ .motech_image_picker_wrap.current img, .motech_image_picker_wrap:active img {
712
+ border: 4px solid rgb(0, 0, 255);
713
+ margin:-4px;
714
+ }
715
+ .motech_purchase_button {
716
+ display: block;
717
+ padding-bottom: 70px;
718
+ margin-right: 0px;
719
+ }
720
+ .motech_purchase_button.unlimited_use {
721
+ padding-bottom: 0px;
722
+ }
723
+ .hms_get_premium_meta {display:none !important;}
724
+ </style>
725
+ <![endif]-->
726
+ <?php
727
+ }
728
+ }
729
+
730
+ function po($input) {
731
+ if (get_option($this->plugin_slug . '_ihmsa','') == 'hmsia') {
732
+ return $input;
733
+ }
734
+ if (!empty($input)) {
735
+ add_settings_error('plk_error_id81',esc_attr('settings_updated_81'),__('A premium option was not saved. You must first enter your license key to unlock this premium feature.'),'error');
736
+ }
737
+ }
738
+
739
+ function po_px($input) {
740
+ if (get_option($this->plugin_slug . '_ihmsa','') == 'hmsia') {
741
+ return $input;
742
+ }
743
+ if ($input != "px") {
744
+ add_settings_error('plk_error_id82',esc_attr('settings_updated_82'),__('A premium option was not saved. You must first enter your license key to unlock this premium feature.'),'error');
745
+ }
746
+ }
747
+
748
+ function po_20($input) {
749
+ if (get_option($this->plugin_slug . '_ihmsa','') == 'hmsia') {
750
+ return $input;
751
+ }
752
+ if ($input != "20") {
753
+ add_settings_error('plk_error_id83',esc_attr('settings_updated_83'),__('A premium option was not saved. You must first enter your license key to unlock this premium feature.'),'error');
754
+ }
755
+ return "20";
756
+ }
757
+
758
+ function get_premium_warning() {
759
+ if (get_option($this->plugin_slug . '_ihmsa','') == 'hmsia') {
760
+ return '';
761
+ } else {
762
+ return '<span class="motech_premium_only"> (Premium Only)</span>';
763
+ }
764
+ }
765
+
766
+ function motech_imagepicker_admin_jquery() {
767
+ if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
768
+ ?>
769
+ <script>
770
+ jQuery(function() {
771
+
772
+ //jquery for color picker
773
+ jQuery('tr.motech-color-field').removeClass('motech-color-field');
774
+
775
+ //jquery for image picker
776
+ jQuery(".motech_image_picker_wrap").click(function(){
777
+ jQuery(this).closest(".motech_image_picker").find(".motech_image_picker_wrap").removeClass("current");
778
+ jQuery(this).addClass("current");
779
+ selectedvalue = jQuery(this).find("img").attr("alt");
780
+ jQuery("#<?php echo $this->plugin_slug ?>_current_theme").val(selectedvalue);
781
+ });
782
+ jQuery("#<?php echo $this->plugin_slug ?>_current_theme").parent().parent().hide();
783
+ <?php if (get_option($this->plugin_slug . '_ihmsa','') == 'hmsia') : ?>
784
+ <?php
785
+ if(get_option('hide_my_site_premium_expansion_plk','') != '') {
786
+ $useval = get_option('hide_my_site_premium_expansion_plk','');
787
+ } elseif(get_option($this->plugin_slug . '_plk','') != '') {
788
+ $useval = get_option('hide_my_site_premium_expansion_plk','');
789
+ }
790
+ ?>
791
+ useval = '<?php echo $useval ?>';
792
+ jQuery("#hide_my_site_plk").replaceWith("<div>"+useval+"</div>");
793
+ <?php else : ?>
794
+ jQuery("#hide_my_site_plk").replaceWith("<div></div>");
795
+ <?php endif ?>
796
+
797
+ jQuery("#hms_get_premium, .motech_premium_cancel span").click(function(){
798
+ jQuery(".motech_premium_box").slideToggle(200);
799
+ });
800
+ jQuery(".how_to_redeem").click(function(){
801
+ jQuery(".redeem_info").slideToggle(200);
802
+ });
803
+ jQuery(".hms_get_premium").click(function(){
804
+ jQuery("html, body").animate({ scrollTop: 0 }, 300, function() {
805
+ // Animation complete.
806
+ jQuery(".motech_premium_box").slideDown(200);
807
+ });
808
+ });
809
+
810
+
811
+ });
812
+ </script>
813
+ <?php
814
+ }
815
+ }
816
+
817
+
818
+
819
+ } //end class
820
+
821
+ $class = new motech_spacer();
822
+
823
+ add_action('init', array($class, 'add_custom_button'));
js/motech-color-picker.js ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ jQuery(document).ready(function($){
2
+ jQuery('.motech-color-field').wpColorPicker();
3
+ });
js/spacer_imageupload.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ jQuery(document).ready(function($){
2
+
3
+
4
+ var custom_uploader;
5
+
6
+
7
+ $('.motech_upload_image_button').click(function(e) {
8
+ e.preventDefault();
9
+
10
+ //select closest image field so if there is more than one the right one will get changed
11
+ image_field = $(this).siblings('.motech_upload_image');
12
+
13
+ //If the uploader object has already been created, reopen the dialog
14
+ if (custom_uploader) {
15
+ custom_uploader.open();
16
+ return;
17
+ }
18
+
19
+ //Extend the wp.media object
20
+ custom_uploader = wp.media.frames.file_frame = wp.media({
21
+ title: 'Choose Image',
22
+ button: {
23
+ text: 'Choose Image'
24
+ },
25
+ multiple: false
26
+ });
27
+
28
+
29
+
30
+ //When a file is selected, grab the URL and set it as the text field's value
31
+ custom_uploader.on('select', function() {
32
+ attachment = custom_uploader.state().get('selection').first().toJSON();
33
+ image_field.val(attachment.url);
34
+ });
35
+
36
+ //Open the uploader dialog
37
+ custom_uploader.open();
38
+
39
+ });
40
+
41
+
42
+ });
readme.txt ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Spacer ===
2
+ Contributors: clevelandwebdeveloper
3
+ Donate link: http://www.clevelandwebdeveloper.com/wordpress-plugins/donate.php
4
+ Tags: spacer, spacing, line space
5
+ Requires at least: 2.9
6
+ Tested up to: 4.4
7
+ Stable tag: 2.0
8
+ License: GPLv2
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ Adds a spacer button to the WYSIWYG visual editor which allows you to add precise custom spacing between lines in your posts and pages.
12
+
13
+ == Description ==
14
+
15
+ This plugin adds a spacer button to the WYSIWYG visual editor which allows you to add precise custom spacing between lines in your posts and pages. Note that you can also enter negative spacing to shift the following content upwards.
16
+
17
+ <h3>New in Version 2.0</h3>
18
+
19
+ <ul>
20
+ <li>You can now hide spacer on mobile screens, or set a custom spacer height for mobile screens.</li>
21
+ <li>On individual spacers, you can manually edit the mobile height, custom classes, and inline style for the spacer element (see FAQ).</li>
22
+ <li>Added compatibility with Beaver Page Builder's wysiswyg UI.</li>
23
+ </ul>
24
+
25
+ <h4>For Premium Users</h4>
26
+ <b>Speed up your workflow by setting a default spacer height. You can also set defaults for your spacer element's custom classes and inline style.</b>
27
+
28
+ == Installation ==
29
+
30
+ 1. From WP admin > Plugins > Add New
31
+ 1. Search "Spacer" under search and hit Enter
32
+ 1. Click "Install Now"
33
+ 1. Click the Activate Plugin link
34
+
35
+ == Frequently asked questions ==
36
+
37
+ = Why shouldn't I just press enter for new lines? =
38
+
39
+ Every time you press Enter or Shift-Enter you will get line breaks that are a certain specific height. Some times you want control over the exact amount of space between lines.
40
+
41
+ = How do I hide spacer on mobile screens? =
42
+
43
+ Settings > Spacer > Default Spacer Height On Mobile > Set this to 0
44
+
45
+ = How do I add a spacer to a page/post? =
46
+
47
+ Press the spacer button in WYSIWYG visual editor (see screenshot). This will add a shortcode [spacer height="default"].
48
+
49
+ = How do I manually set the spacer height on individual spacers? =
50
+
51
+ Press the spacer button in WYSIWYG visual editor. This will add a shortcode [spacer height="default"]. Change default to whatever your desired line spacing is. For example, [spacer height="30px"] will give you 30 pixels of extra line spacing. If you use negative values the following content will be shifted upwards.
52
+
53
+ = How do I manually edit the height, mobile height, classes, and inline style on individual spacers? =
54
+ Here's an example of how you could apply this:
55
+ <pre>[spacer height="30px" mheight="0px" class="myspacer" style="background-color:red;"]</pre>
56
+
57
+ == Screenshots ==
58
+
59
+ 1. Spacer Button
60
+ 1. Setting the spacer height
61
+ 1. Spacer height: 35px
62
+ 1. Spacer height: -35px
63
+
64
+ == Changelog ==
65
+
66
+ = 2.0 =
67
+ * Feature added: Choose to hide spacer on mobile devices, or choose a different spacer height for mobile.
68
+ * Feature added: Manually edit mobile height, custom classes, and inline style for individual spacer elements.
69
+ * Feature added: Compatibility with Beaver Page Builder's wysiswyg UI.
70
+ * Premium users: Speed up your workflow by setting a default height for your spacer. You can also set defaults for your spacer's custom classes and inline style.
71
+
72
+ = 1.0 =
73
+ * Initial version
74
+
75
+ == Upgrade Notice ==
76
+
77
+ = 2.0 =
78
+ New: The new version allows you to hide spacer on mobile devices, or choose a different spacer height for mobile. Added compatibility with Beaver Page Builder's wysiswyg UI.