Spacer - Version 3.0

Version Description

You can now create an arsenal of additional spacers and sectional breaks to have at your disposal as you lay out your pages.
Give your new Spacers names and save them for later.
Use the new live preview tool to help visualize the Spacer as you build it.
When writing your posts and pages, you can choose which Spacer you want to add via the Spacer button.

Release Info

Developer	clevelandwebdeveloper
Plugin	Spacer
Version	3.0
Comparing to
See all releases

Code changes from version 2.0.3 to 3.0

Files changed (13) hide show

admin-style.css +1 -0
adminpage-style.css +32 -0
editor_plugin.js +61 -39
editor_plugin_back.js +75 -0
editor_plugin_backback.js +72 -0
editor_plugin_backbackback.js +47 -0
images/dfa3.png +0 -0
images/vart.png +0 -0
index.php +841 -75
js/motech-color-picker.js +11 -1
js/motech-javascript.js +213 -0
js/spacer_imageupload.js +1 -1
readme.txt +37 -14

admin-style.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ i.mce-i-motech_spacer, .mce-ico.motech_spacer_icon,.mceIcon.mce_motech_spacer,.mceIcon.mce_motech_spacer, .wp_themeSkin .mceIcon.mce_motech_spacer {background-image: url('icon.png');background: url('icon.png');}

adminpage-style.css ADDED Viewed

	@@ -0,0 +1,32 @@


1	+ .msaddon{ float: left;
2	+ margin: 0 20px 20px 0;
3	+ width: 300px;
4	+ position: relative;}
5	+ .mscol { background: #fff;
6	+ border: 1px solid #ccc;
7	+ border-radius: 4px;
8	+ padding: 10px;}
9	+
10	+ .msaddon img {
11	+ margin-bottom: 10px;
12	+ max-width: 100%;
13	+ height: auto;
14	+ }
15	+
16	+ .wrap .msaddon h2{
17	+ font-size: 14px;
18	+ padding: 8px 12px;
19	+ margin: 0;
20	+ line-height: 1.4;
21	+ display: block;
22	+ font-weight: 600;
23	+ }
24	+ .msaddon-content p {
25	+ min-height: 60px;
26	+ }
27	+ .msaddon .msdbutton {
28	+ float: left;
29	+ }
30	+ .msaddon .msbutton {
31	+ float: right;
32	+ }

editor_plugin.js CHANGED Viewed

@@ -1,45 +1,67 @@
             (function() {
-            -
            	jQuery.ajax({
-            -
            	   type: "POST",
-            -
            	   dataType: "json",
-            -
            	   url: ajaxurl,
-            -
            	   data: {action: 'motech_spacer'},
-            -
            	   success: function(response) { //ajax response
-            -
            			 //modal.find('.modal-body').html(data); //insert the response.
-            -
            			 ajaxresponse = response;
-            -
            	   }
-            -
               });
-            -
            	var button_name = 'motech_spacer'; //set button name
-            -
            	tinymce.create('tinymce.plugins.'+button_name, {
-            -
            		init : function(ed, url) {
-            -
            			ed.addButton(button_name, {
-            -
            				title : 'Add a Spacer', //set button label
-            -
            				image : url+'/icon.png', //set icon filename (20 X 20px). put icon in same folder
-            -
            				onclick : function() {
-            -
            					//idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
-            -
            					//var vidId = prompt("YouTube Video", "Enter the id or url for your video");
-            -
            					//var m = idPattern.exec(vidId);
-            -
            					//if (m != null && m != 'undefined')
-            -
            						ed.execCommand('mceInsertContent', false, '[spacer height="'+ajaxresponse["useheight"]+'"]');
-            -
            				}
-            -
            			});
-            -
            		},
-            -
            		createControl : function(n, cm) {
-            -
            			return null;
-            -
            		},
-            -
            		getInfo : function() {
-            -
            			return {
-            -
            				longname : button_name,
-            -
            				author : 'Justin Saad',
-            -
            				authorurl : 'http://clevelandwebdeveloper.com/',
-            -
            				infourl : 'http://clevelandwebdeveloper.com/',
-            -
            				version : "1.0"
-            -
            			};
-            -
            		}
-            -
            	});
-            -
            	tinymce.PluginManager.add(button_name, tinymce.plugins[button_name]);
             })();


1	(function() {
2
3	+ var button_name = 'motech_spacer'; //set button name
4	+ //console.log(ajaxresponse);
5	+ tinymce.PluginManager.add(button_name, function( editor, url ) {
6	+ var self = this, button;




7
8	+ /* function getMenu() {
9	+ return editor.settings.myMenu;
10	+ }*/
11	+
12	+ editor.addButton( button_name, {
13	+ title: 'Add a Spacer',
14	+ type: 'menubutton',
15	+ icon: 'icon motech_spacer_icon',
16	+ onPostRender: function() {
17	+ //this is a hack to get button refrence.
18	+ //there may be a better way to do this
19	+ var ctrl = this;
20	+ jQuery.ajax({
21	+ type: "POST",
22	+ dataType: "json",
23	+ //async: false,
24	+ url: ajaxurl,
25	+ data: {action: 'motech_spacer'},
26	+ success: function(response) { //ajax response
27	+ //modal.find('.modal-body').html(data); //insert the response.
28	+ ajaxresponse = response;
29	+
30	+ var menu_array = [];
31	+ menu_array.push({
32	+ text:"Default",
33	+ onclick:function() {
34	+ editor.insertContent('[spacer height="'+ajaxresponse["useheight"]+'"]');
35	+ }
36	+ });
37	+ var addspacers = ajaxresponse["addspacers"];
38	+ var index;
39	+ if(ajaxresponse["addspacers"]){
40	+ for (index = 0; index < addspacers.length; index++) {
41	+ menu_array.push({
42	+ text: addspacers[index]["title"],
43	+ value: '[spacer height="'+addspacers[index]["height"]+'" id="'+addspacers[index]["id"]+'"]',
44	+ onclick:function() {
45	+ editor.insertContent(this.value());
46	+ }
47	+ });
48	+ }
49	+ }
50	+
51	+ //Set new values to myKeyValueList
52	+ ctrl.state.data.menu = ctrl.settings.menu = menu_array;
53	+
54
55	+ }
56	+ });
57	+ }
58	+
59	+ });
60	+
61	+
62	+ });
63	+
64	+
65	+
66




























67	})();

editor_plugin_back.js ADDED Viewed

	@@ -0,0 +1,75 @@


1	+ (function() {
2	+
3	+ jQuery.ajax({
4	+ type: "POST",
5	+ dataType: "json",
6	+ url: ajaxurl,
7	+ data: {action: 'motech_spacer'},
8	+ success: function(response) { //ajax response
9	+ //modal.find('.modal-body').html(data); //insert the response.
10	+ ajaxresponse = response;
11	+ var menu_array = [];
12	+ menu_array.push({
13	+ text:"Default",
14	+ value:'[spacer height="'+ajaxresponse["useheight"]+'"]',
15	+ onclick:function() {
16	+ tinyMCE.activeEditor.insertContent(this.value());
17	+ }
18	+ });
19	+ var addspacers = ajaxresponse["addspacers"];
20	+ var index;
21	+ if(ajaxresponse["addspacers"]){
22	+ for (index = 0; index < addspacers.length; index++) {
23	+ menu_array.push({
24	+ text: addspacers[index]["title"],
25	+ value: '[spacer height="'+addspacers[index]["height"]+'" id="'+addspacers[index]["id"]+'"]',
26	+ onclick:function() {
27	+ tinyMCE.activeEditor.insertContent(this.value());
28	+ }
29	+ });
30	+ }
31	+ }
32	+ //Call following code block from ajax success method
33	+ //Set new values to myKeyValueList
34	+ tinyMCE.activeEditor.settings.myKeyValueList = menu_array;
35	+ //Call plugin method to reload the dropdown
36	+ tinyMCE.activeEditor.plugins.motech_spacer.refresh();
37	+
38	+ }
39	+ });
40	+
41	+ var button_name = 'motech_spacer'; //set button name
42	+
43	+ tinymce.PluginManager.add(button_name, function( editor, url ) {
44	+ var self = this, button;
45	+
46	+ function getValues() {
47	+ return editor.settings.myKeyValueList;
48	+ }
49	+ // Add a button that opens a window
50	+ editor.addButton(button_name, {
51	+ title: 'Add a Spacer',
52	+ type: 'menubutton',
53	+ icon: 'icon motech_spacer_icon',
54	+ menu: getValues(),
55	+ onPostRender: function() {
56	+ //this is a hack to get button refrence.
57	+ //there may be a better way to do this
58	+ button = this;
59	+ },
60	+ });
61	+
62	+ self.refresh = function() {
63	+ //remove existing menu if it is already rendered
64	+ if(button.menu){
65	+ button.menu.remove();
66	+ button.menu = null;
67	+ }
68	+
69	+ button.settings.menu = getValues();
70	+ };
71	+ });
72	+
73	+
74	+
75	+ })();

editor_plugin_backback.js ADDED Viewed

	@@ -0,0 +1,72 @@


1	+ jQuery(document).ready(function($) {
2	+
3	+
4	+
5	+ var button_name = 'motech_spacer'; //set button name
6	+ var msdata = motech_spacer_prepjsbuttons;
7	+ tinymce.create('tinymce.plugins.'+button_name, {
8	+ init : function(ed, url) {
9	+ ed.addButton(button_name, {
10	+ title : 'Add a Spacer', //set button label
11	+ //image : url+'/icon.png', //set icon filename (20 X 20px). put icon in same folder
12	+ icon: 'icon motech_spacer_icon',
13	+ onclick : function() {
14	+
15	+ ed.execCommand('mceInsertContent', false, '[spacer height="'+msdata["useheight"]+'"]');
16	+ },
17	+
18	+ });
19	+ },
20	+
21	+ createControl: function(n, cm) {
22	+
23	+ switch (n) {
24	+ case button_name:
25	+ var c = cm.createMenuButton(button_name, {
26	+ title : 'Add a Spacer',
27	+ //image : '/example_data/example.gif',
28	+ icons : false
29	+ });
30	+
31	+ c.onRenderMenu.add(function(c, m) {
32	+ m.add({title:"Default",onclick : function(){
33	+ tinyMCE.activeEditor.execCommand('mceInsertContent', false, '[spacer height="'+msdata["useheight"]+'"]' );
34	+ }});
35	+ if(msdata.hasOwnProperty("addspacers")){
36	+ var index;
37	+ for (index = 0; index < msdata["addspacers"].length; index++) {
38	+
39	+ useval = msdata["addspacers"][index]["height"];
40	+ useid = msdata["addspacers"][index]["id"];
41	+ m.add({title:msdata["addspacers"][index]["title"],value:'[spacer height="'+useval+'" id="'+useid+'"]',onclick : function(){
42	+ //console.log(my_shortcodes);
43	+ //console.log(this.value);
44	+ //console.log(msdata.addspacers.index);
45	+ tinyMCE.activeEditor.execCommand('mceInsertContent', false, this.value );
46	+ }});
47	+ }
48	+ }
49	+
50	+ });
51	+
52	+ // Return the new menu button instance
53	+ return c;
54	+ }
55	+
56	+ return null;
57	+ },
58	+ getInfo : function() {
59	+ return {
60	+ longname : button_name,
61	+ author : 'Justin Saad',
62	+ authorurl : 'http://clevelandwebdeveloper.com/',
63	+ infourl : 'http://clevelandwebdeveloper.com/',
64	+ version : "1.0"
65	+ };
66	+ }
67	+ });
68	+ tinymce.PluginManager.add(button_name, tinymce.plugins[button_name]);
69	+
70	+
71	+
72	+ });

editor_plugin_backbackback.js ADDED Viewed

	@@ -0,0 +1,47 @@


1	+ (function() {
2	+
3	+ jQuery.ajax({
4	+ type: "POST",
5	+ dataType: "json",
6	+ url: ajaxurl,
7	+ data: {action: 'motech_spacer'},
8	+ success: function(response) { //ajax response
9	+ //modal.find('.modal-body').html(data); //insert the response.
10	+ ajaxresponse = response;
11	+
12	+ }
13	+ });
14	+
15	+ var button_name = 'motech_spacer'; //set button name
16	+
17	+ tinymce.create('tinymce.plugins.'+button_name, {
18	+ init : function(ed, url) {
19	+ ed.addButton(button_name, {
20	+ title : 'Add a Spacer', //set button label
21	+ //image : url+'/icon.png', //set icon filename (20 X 20px). put icon in same folder
22	+ icon: 'icon motech_spacer_icon',
23	+ onclick : function() {
24	+ //idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&\|$)/;
25	+ //var vidId = prompt("YouTube Video", "Enter the id or url for your video");
26	+ //var m = idPattern.exec(vidId);
27	+ //if (m != null && m != 'undefined')
28	+ ed.execCommand('mceInsertContent', false, '[spacer height="'+ajaxresponse["useheight"]+'"]');
29	+ }
30	+ });
31	+ },
32	+ createControl : function(n, cm) {
33	+ return null;
34	+ },
35	+ getInfo : function() {
36	+ return {
37	+ longname : button_name,
38	+ author : 'Justin Saad',
39	+ authorurl : 'http://clevelandwebdeveloper.com/',
40	+ infourl : 'http://clevelandwebdeveloper.com/',
41	+ version : "1.0"
42	+ };
43	+ }
44	+ });
45	+ tinymce.PluginManager.add(button_name, tinymce.plugins[button_name]);
46	+
47	+ })();

images/dfa3.png ADDED Viewed

Binary file

images/vart.png ADDED Viewed

Binary file

index.php CHANGED Viewed

@@ -2,8 +2,9 @@
             /*
             Plugin Name: Spacer
             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.
-            -
            Version: 2.0.3
             Author: Justin Saad
             Author URI: http://www.clevelandwebdeveloper.com
             License: GPL2
@@ -23,6 +24,14 @@ class motech_spacer {
             		$this->plugin_slug = $plugin_slug;
             		$this->plugin_label = $plugin_label;
             		$this->plugin_dir = plugins_url( '' , __FILE__ );
             		//do when class is instantiated
             		add_shortcode('spacer', array($this, 'addShortcodeHandler'));
@@ -45,22 +54,51 @@ class motech_spacer {
             			add_action( 'admin_enqueue_scripts', array($this, 'enqueue_color_picker') ); //enqueue color picker
             			add_action( 'wp_ajax_motech_spacer', array($this,'motech_spacer_callback') );
             			//admin messages
             			add_action('admin_notices', array($this,'admin_show_message'));
-            -
            			add_action('admin_init', array($this,'adminmessage_init'));
+            		}
             		//prepare plugin for localization
             		load_plugin_textdomain('motech-spacer', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
+            	}
             	function motech_spacer_callback() {
             		$return = array();
             		$checkheight = get_option($this->plugin_slug . '_default_height','20');
             		$checkunit = get_option($this->plugin_slug . '_default_height_unit','px');
             		$return["useheight"] = $checkheight.$checkunit;
             		echo json_encode($return);
             		wp_die(); // this is required to terminate immediately and return a proper response
+            	}
@@ -69,20 +107,20 @@ class motech_spacer {
+            	{
             		$user_id = get_current_user_id();
             		//there is no default spacer height set, and nag message not ignored...
-            -
            		$checkdefault = get_option($this->plugin_slug . '_default_height_mobile','');
-            -
            		if ( ( ! get_user_meta($user_id, 'spacer3001_nag_ignore') ) && ($checkdefault=='') && (current_user_can( 'manage_options' )) ) {
             			echo '<div id="message" class="updated fade notice"><p>';
-            -
            			echo "<b>".__('You can now', 'motech-spacer')." <a href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin\">".__('hide spacer on mobile screens', 'motech-spacer')."</a>, ".__('or set a custom spacer height for mobile screens.', 'motech-spacer')."</b>";
             			echo "</p>";
-            -
            			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', 'motech-spacer')."</a> | <a class=\"dismiss-notice\" style=\"color:red;\" href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin&spacer3001_nag_ignore=0\" target=\"_parent\">".__('Dismiss this notice', 'motech-spacer')." [X]</a></strong></p></div>";
+            		}
+            	}
             	function adminmessage_init()
+            	{
-            -
            		if ( isset($_GET['spacer3001_nag_ignore']) && '0' == $_GET['spacer3001_nag_ignore'] ) {
             			$user_id = get_current_user_id();
-            -
            			add_user_meta($user_id, 'spacer3001_nag_ignore', 'true', true);
             			if (wp_get_referer()) {
             				/* Redirects user to where they were before */
             				wp_safe_redirect(wp_get_referer());
@@ -96,19 +134,78 @@ class motech_spacer {
             	function enqueue_color_picker( $hook_suffix ) {
             		wp_enqueue_style( 'wp-color-picker' );
             		wp_enqueue_script( $this->plugin_slug.'-script-handle', plugins_url('js/motech-color-picker.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
+            	}
             	function spacer_imageupload_script() {
             		if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') {
-            -
            			wp_enqueue_media();
             			wp_register_script('spacer_imageupload-js', plugins_url( 'js/spacer_imageupload.js' , __FILE__ ), array('jquery'));
             			wp_enqueue_script('spacer_imageupload-js');
+            		}
+            	}
             	// add the shortcode handler
             	function addShortcodeHandler($atts, $content = null) {
-            -
            			extract(shortcode_atts(array( "height" => '', "mheight" => '', "class" => '', "style" => '' ), $atts));
             			//prep variables
             			$spacer_css = "";
@@ -117,21 +214,21 @@ class motech_spacer {
             			//prep mobile height, if it's empty we will use desktop height. if set to 0 we will hide the spacer on mobile devices.
             			$mobile_height = "";
             			$mobile_height_inline = "";
-            -
            			$mobile_height_default = get_option($this->plugin_slug . '_default_height_mobile','');
             			//first check for inline height, then check default mobile height
             			if(isset($mheight) && $mheight != ""){
             				$mobile_height = $mheight;
             				$mobile_height_inline = $mheight;
             			}elseif(isset($mobile_height_default) && $mobile_height_default != ""){
-            -
            				$mobile_height = get_option($this->plugin_slug . '_default_height_mobile','');
             				$mobile_height_default = $mobile_height;
+            			}
             			//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
             			if( function_exists('wp_is_mobile') && wp_is_mobile() && (isset($mobile_height) && $mobile_height != "")) {
-            -
            				$mobileunit = get_option($this->plugin_slug . '_default_height_mobile_unit','px');
             				if(isset($mobile_height_inline) && $mobile_height_inline != "") {
@@ -155,8 +252,8 @@ class motech_spacer {
             			} elseif($height=="default"){ //there is no mobile height set. use the desktop default height
             				//for now assume positive. in a sec add logic for if negative
-            -
            				$checkheight = get_option($this->plugin_slug . '_default_height','20');
-            -
            				$checkunit = get_option($this->plugin_slug . '_default_height_unit','px');
             				if($checkheight > 0){
             					$spacer_css .= "padding-top: " . $checkheight . $checkunit.";";
@@ -171,34 +268,37 @@ class motech_spacer {
             			//custom background image
-            -
            			$bg = get_option($this->plugin_slug.'_custom_background_image_upload');
             			if(!empty($bg)) {
             				$spacer_css .= "background: url(".$bg.");";
-            -
            			}
             			//custom background image position
-            -
            			$spacer_css .= $this->background_position();
             			//background color
-            -
            			$bgcolor = get_option($this->plugin_slug.'_background_color');
             			if(!empty($bgcolor)) {
             				$spacer_css .= "background-color:".$bgcolor.";";
-            -
            			}
             			//classes
-            -
            			$defaultclasses = get_option($this->plugin_slug.'_spacer_class','');
             			$classes .= $defaultclasses;
             			if(!empty($class)){
             				$classes .= " ".$class;
+            			}
             			//styles
-            -
            			$defaultstyle = get_option($this->plugin_slug.'_spacer_style','');
             			$spacer_css .= $defaultstyle;
             			if(!empty($style)){
             				$spacer_css .= " ".$style;
-            -
            			}
-            -
             			//create the spacer after all settings have been loaded
             			return '<span class="'.$classes.'" style="display:block;clear:both;height: 0px;'.$spacer_css.'"></span>';
@@ -224,7 +324,12 @@ class motech_spacer {
             	   if ( get_user_option('rich_editing') == 'true') {
             		 add_filter('mce_external_plugins', array($this, 'add_custom_tinymce_plugin'),99999999);
             		 add_filter('mce_buttons', array($this, 'register_custom_button'),99999999);
+            	   }
+            	}
             	function register_custom_button($buttons) {
@@ -233,8 +338,15 @@ class motech_spacer {
+            	}
             	function add_custom_tinymce_plugin($plugin_array) {
             	   //use this in a plugin
-            -
            	   $plugin_array[get_class($this)] = plugins_url( 'editor_plugin.js' , __FILE__ );
             	   //use this in a theme
             	   //$plugin_array[get_class($this)] = get_bloginfo('template_url').'/editor_plugin.js';
             	   return $plugin_array;
@@ -262,14 +374,14 @@ class motech_spacer {
             		    <h2 class="aplabel"><?php echo $this->plugin_label ?></h2>
-            -
                        <div id="green_ribbon">
                         	<div id="green_ribbon_top">
                             	<div id="green_ribbon_left">
                                 </div>
                                 <div id="green_ribbon_base">
-            -
                                	<span id="hms_get_premium"><?php _e('NEW! Get Premium &raquo;', 'motech-spacer')?></span>
-            -
                                    <span class="hms_get_premium_meta"><?php _e('Spacer Premium is now available for as low as $20!', 'motech-spacer')?></span>
                                 </div>
                                 <div id="green_ribbon_right">
                                 </div>
@@ -277,33 +389,31 @@ class motech_spacer {
                             <div class="motech_premium_box">
                             	<div class="motech_premium_box_wrap">
-            -
                                    <h2><?php _e('Get Premium', 'motech-spacer')?></h2>
                                     <div class="updated below-h2" style="margin-bottom: -20px !important;"><p><strong><?php _e('Purchase will be processed via PayPal.', 'motech-spacer')?></strong></p></div>
                                     <div class="updated below-h2"><p><strong><?php _e('Every license is valid for the lifetime of the website where it\'s installed.', 'motech-spacer')?></strong></p></div>
-            -
                                     <div class="motech_purchase_buttons">
-            -
-            -
                                        <div class="motech_purchase_button one_use">
-            -
                                            <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">
                                                 <button name="submit">
-            -
                                                    <div class="purchase_graphic"><?php _e('Buy 1 Use', 'motech-spacer')?></div>
                                                     <div class="purchase_bubble">
-            -
                                                        <div class="purchase_price">$20</div>
-            -
                                                        <div class="purchase_meta"><?php _e('1 site license', 'motech-spacer')?></div>
                                                     </div>
                                                 </button>
                                                 <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">
                                             </form>
                                         </div>
-            -
-            -
-            -
                                        <div class="motech_purchase_button unlimited_use">
-            -
                                            <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">
                                                 <button name="submit">
-            -
                                                    <div class="purchase_graphic"><?php _e('Buy', 'motech-spacer')?> <span><?php _e('Unlimited', 'motech-spacer')?></span></div>
                                                     <div class="purchase_bubble">
-            -
                                                        <div class="purchase_price">$50</div>
-            -
                                                        <div class="purchase_meta"><?php _e('Unlimited sites forever!', 'motech-spacer')?></div>
                                                     </div>
                                                 </button>
                                                 <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">
@@ -318,27 +428,379 @@ class motech_spacer {
                             </div>
                         </div>
-            -
             		    <form method="post" action="options.php" class="<?php echo $this->plugin_slug ?>_form">
             		        <?php
             	            // This prints out all hidden setting fields
             			    settings_fields($this->plugin_slug.'_option_group');
             				?>
-            -
            				<div class="motech-spacer-options section general" style="border-bottom: solid 1px #BFBFBF;padding-bottom: 3px;">
-            -
            			    	<?php do_settings_sections($this->plugin_slug.'-setting-admin'); ?>
                             </div>
-            -
                            <div class="motech-spacer-options section mobileoptions" style="border-bottom: solid 1px #BFBFBF;padding-bottom: 3px;">
-            -
                            	<?php do_settings_sections($this->plugin_slug.'-setting-admin_mobileoptions'); ?>
                             </div>
-            -
                            <div class="motech-spacer-options section styleoptions">
-            -
                            	<?php do_settings_sections($this->plugin_slug.'-setting-admin_styleoptions'); ?>
-            -
                            </div>
-            -
            		        <?php submit_button(); ?>
             		    </form>
             		</div>
             	<?php
+                }
             	public function DisplayMobileOptions(){
                     add_settings_section(
             	    $this->plugin_slug.'_setting_section',
@@ -403,9 +865,9 @@ class motech_spacer {
             		//add text input field
             		$field_slug = "spacer_class";
-            -
            		$field_label = __('Default Spacer Class (Optional)', 'motech-spacer') . $this->get_premium_warning();
             		$field_id = $this->plugin_slug.'_'.$field_slug;
-            -
            		register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po'));
             		add_settings_field(
             		    $field_id,
             		    $field_label,
@@ -421,9 +883,9 @@ class motech_spacer {
             		//add textarea input field
             		$field_slug = "spacer_style";
-            -
            		$field_label = __('Spacer Style (Optional)', 'motech-spacer') . $this->get_premium_warning();
             		$field_id = $this->plugin_slug.'_'.$field_slug;
-            -
            		register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po'));
             		add_settings_field(
             			$field_id,
             			$field_label,
@@ -432,10 +894,21 @@ class motech_spacer {
             		    $this->plugin_slug.'_setting_section',
             		    array(								// The array of arguments to pass to the callback.
             				"id" => $field_id, //sends field id to callback
-            -
            				"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.', 'motech-spacer'), //description of the field (optional)
             				"placeholder" => __('(for example)', 'motech-spacer').' 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)
+            			)
             		);
+            	}
                 public function page_init(){
@@ -443,19 +916,31 @@ class motech_spacer {
             		//register other settings sections
             		$this->DisplayMobileOptions();
             		$this->DisplayStyleOptions();
                     add_settings_section(
             	    $this->plugin_slug.'_setting_section',
-            -
            	    __('Configuration', 'motech-spacer'),
             	    array($this, 'print_section_info'),
             	    $this->plugin_slug.'-setting-admin'
             		);
             		//add text input field
             		$field_slug = "default_height";
-            -
            		$field_label = __('Default Spacer Height', 'motech-spacer') . $this->get_premium_warning();
             		$field_id = $this->plugin_slug.'_'.$field_slug;
-            -
            		register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po_20'));
             		add_settings_field(
             		    $field_id,
             		    $field_label,
@@ -472,7 +957,7 @@ class motech_spacer {
             		//add a select input field
             		$field_slug = "default_height_unit";
-            -
            		$field_label = __('Spacer Height Unit', 'motech-spacer') . $this->get_premium_warning();
             		$field_id = $this->plugin_slug.'_'.$field_slug;
             		$this->unit_options = array(
             								array("label" => "px", "value" => "px"),
@@ -480,7 +965,7 @@ class motech_spacer {
             								array("label" => "rem", "value" => "rem"),
             								array("label" => "%", "value" => "%"),
             		);
-            -
            		register_setting($this->plugin_slug.'_option_group', $field_id, array($this, 'po_px'));
             		add_settings_field(
             			$field_id,
             			$field_label,
@@ -517,8 +1002,13 @@ class motech_spacer {
                         } else {
                             $default = false;
+                        }
                         ?>
-            -
                        <input class="motech_upload_image" type="text" size="36" name="<?php echo $args["id"] ?>" value="<?php echo get_option($args["id"], $default) ?>" />
                         <input class="motech_upload_image_button" class="button" type="button" value="<?php _e('Upload Image', 'motech-spacer')?>" />
                     	<br />
             			<?php
@@ -528,14 +1018,48 @@ class motech_spacer {
             				echo "<span class='description'>".__('Enter a URL or upload an image.', 'motech-spacer')."</span>";
+            			}
             			?>
-            -
                        <?php
             				$current_image = get_option($args["id"],$default);
             				if(!empty($current_image)) {
-            -
            					echo "<br><strong>".__('Preview', 'motech-spacer')."</strong><br><img style='padding-left:20px; max-width: 50%; max-height: 400px;' src='".$current_image."'>";
+            				}
-            -
            			?>
                     <?php
             	} // end create_image_upload
             	function create_a_checkbox($args) {
             		$html = '<input type="checkbox" id="'  . $args["id"] . '" name="'  . $args["id"] . '" value="1" ' . checked(1, get_option($args["id"], $args["default"]), false) . '/>';
@@ -570,13 +1094,50 @@ class motech_spacer {
+            		}
             		// Render the output
             		echo '<input type="text" '  . $placeholder_html . $max_length_html . ' id="'  . $args["id"] . '" class="' . $args["class"]. '" name="'  . $args["id"] . '" value="' . get_option($args["id"], $default) . '" />';
-            -
            		if($args["desc"]) {
             			echo "<p class='description'>".$args["desc"]."</p>";
+            		}
             	} // end create_a_text_input
             	function create_a_textarea_input($args) {
             		//grab placeholder if there is one
             		if($args["placeholder"]) {
@@ -597,6 +1158,34 @@ class motech_spacer {
+            		}
+            	}
             	function create_a_radio_input($args) {
             		$radio_options = $args["radio_options"];
@@ -639,16 +1228,57 @@ class motech_spacer {
             				$html .= '<option value="'.$select_option["value"].'" ' . selected( $select_option["value"], get_option($args["id"], $default), false) . '>'.$select_option["label"].'</option>';
+            			}
             		$html .= '</select>';
-            -
            		if($args["desc"]) {
             			$html .= "<p class='description'>".$args["desc"]."</p>";
+            		}
             		echo $html;
             	} // end create_a_select_input callback
                 public function print_section_info(){ //section summary info goes here
             		//print 'This is the where you set the password for your site.';
-            -
                }
                 public function add_plugin_page(){
                     // This page will be under "Settings"
@@ -672,6 +1302,85 @@ class motech_spacer {
             		if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
             			?>
                         <style>
             				.hmshidden {display:none;}
             				#wpbody h3 {font-size:20px;}
             				#hide_my_site_current_theme {display:none;}
@@ -707,6 +1416,13 @@ class motech_spacer {
             				.motech_premium_cancel {color:#626262;text-align:center;font-size:22px;margin-top:43px;}
             				.motech_premium_cancel span:hover {cursor:pointer;text-decoration:underline;}
             				.<?php echo $this->plugin_slug ?>_form > .form-table {max-width:770px;}
             				/*css for the image picker*/
@@ -715,6 +1431,13 @@ class motech_spacer {
             				.motech_image_picker_wrap.current img, .motech_image_picker_wrap:active img {box-shadow: 0px 0px 0px 4px rgba(0, 0, 255, 0.9);}
             				.motech_image_picker_wrap {display:inline-block;cursor: pointer;margin-right:20px;margin-bottom: 30px;}
             				.motech_image_picker_wrap div {font-weight:bold;font-size:16px;margin-top:10px;color:rgba(0, 0, 0, 0.47);}
             				/* Begin Responsive
             				====================================================================== */
@@ -735,7 +1458,11 @@ class motech_spacer {
+            				}
             				@media only screen and (max-width: 980px) {
             					.motech_purchase_button {display:block;margin-bottom: 80px;margin-right:0px;}
+            				}
             				@media only screen and (max-width: 445px) {
             					.motech_premium_box h2 {font-size:22px;}
+            				}
@@ -806,6 +1533,35 @@ class motech_spacer {
+            		}
+            	}
             	function motech_imagepicker_admin_jquery() {
             		if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
             			?>
@@ -837,15 +1593,26 @@ class motech_spacer {
             							jQuery("#hide_my_site_plk").replaceWith("<div></div>");
             						<?php endif ?>
-            -
            						jQuery("#hms_get_premium, .motech_premium_cancel span").click(function(){
             							jQuery(".motech_premium_box").slideToggle(200);
             						});
             						jQuery(".how_to_redeem").click(function(){
             							jQuery(".redeem_info").slideToggle(200);
             						});
-            -
            						jQuery(".hms_get_premium").click(function(){
             							jQuery("html, body").animate({ scrollTop: 0 }, 300, function() {
                 							// Animation complete.
             								jQuery(".motech_premium_box").slideDown(200);
               							});
             						});
@@ -855,12 +1622,11 @@ class motech_spacer {
             				</script>
                         <?php
+            		}
-            -
            	}
-            -
-            -
             } //end class
             $class = new motech_spacer();
-            -
            add_action('init', array($class, 'add_custom_button'));


2
3	/*
4	Plugin Name: Spacer
5	+ Plugin URI: http://www.clevelandwebdeveloper.com/wordpress-plugins/spacer
6	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.
7	+ Version: 3.0
8	Author: Justin Saad
9	Author URI: http://www.clevelandwebdeveloper.com
10	License: GPL2

24	$this->plugin_slug = $plugin_slug;
25	$this->plugin_label = $plugin_label;
26	$this->plugin_dir = plugins_url( '' , __FILE__ );
27	+ $checkaddspacers = get_option($this->plugin_slug."_addspacer_id");
28	+ if(!empty($checkaddspacers)){
29	+ $this->key_array = $checkaddspacers;
30	+ $this->has_addspacers = true;
31	+ }else{
32	+ $this->key_array = array(0);
33	+ $this->has_addspacers = false;
34	+ }
35
36	//do when class is instantiated
37	add_shortcode('spacer', array($this, 'addShortcodeHandler'));

54
55	add_action( 'admin_enqueue_scripts', array($this, 'enqueue_color_picker') ); //enqueue color picker
56
57	+ add_action( 'admin_enqueue_scripts', array($this, 'enqueue_motech_javascript'), 50 ); //enqueue color picker
58	+
59	add_action( 'wp_ajax_motech_spacer', array($this,'motech_spacer_callback') );
60
61	//admin messages
62	add_action('admin_notices', array($this,'admin_show_message'));
63	+ add_action('admin_init', array($this,'adminmessage_init'));
64	+
65	+ add_action( 'admin_enqueue_scripts', array($this,'load_custom_wp_admin_style'), 50 );
66	}
67
68	//prepare plugin for localization
69	load_plugin_textdomain('motech-spacer', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
70	}
71
72	+ function load_custom_wp_admin_style() {
73	+
74	+ wp_register_style( 'mspacer_wp_admin_css', plugins_url( 'admin-style.css' , __FILE__ ), false, '1.0.0' );
75	+ wp_enqueue_style( 'mspacer_wp_admin_css' );
76	+ if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
77	+ wp_register_style( 'mspacer_wp_adminpage_css', plugins_url( 'adminpage-style.css' , __FILE__ ), false, '1.0.0' );
78	+ wp_enqueue_style( 'mspacer_wp_adminpage_css' );
79	+ }
80	+ }
81	+
82	function motech_spacer_callback() {
83	$return = array();
84	$checkheight = get_option($this->plugin_slug . '_default_height','20');
85	$checkunit = get_option($this->plugin_slug . '_default_height_unit','px');
86	$return["useheight"] = $checkheight.$checkunit;
87	+ if($this->has_addspacers){
88	+ $ids = $this->key_array;
89	+ $checkaddheights = get_option($this->plugin_slug . '_default_height_addspacers');
90	+ $checkaddheightunits = get_option($this->plugin_slug . '_default_height_unit_addspacers');
91	+ $checktitles = get_option($this->plugin_slug . '_title_addspacers');
92	+ foreach($ids as $key=>$value){
93	+ $useheight = $checkaddheights[$key];
94	+ $useunit = $checkaddheightunits[$key];
95	+ $usetitle = $checktitles[$key];
96	+ if(empty($usetitle)){
97	+ $usetitle = "Untitled";
98	+ }
99	+ $return["addspacers"][] = array("id"=>$value,"height"=>$useheight.$useunit,"title"=>$usetitle);
100	+ }
101	+ }
102	echo json_encode($return);
103	wp_die(); // this is required to terminate immediately and return a proper response
104	}

107	{
108	$user_id = get_current_user_id();
109	//there is no default spacer height set, and nag message not ignored...
110	+ //$checkdefault = get_option($this->plugin_slug . '_default_height_mobile','');
111	+ if ( ( ! get_user_meta($user_id, 'spacer3029_nag_ignore') ) && (current_user_can( 'manage_options' )) ) {
112	echo '<div id="message" class="updated fade notice"><p>';
113	+ echo "<b>".__('You can now create an UNLIMITED amount of spacers, dividers, and section breaks! Give them names and save them for later. Put them to good use as you style your posts and pages. Oh yeah, you also get a live preview tool to help you visualize as you build. Enjoy!', 'motech-spacer')."</b>";
114	echo "</p>";
115	+ echo "<p><strong><a href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin\" target=\"_parent\">".__('Create Spacers »', 'motech-spacer')."</a> \| <a class=\"dismiss-notice\" style=\"color:red;\" href=\"".get_bloginfo( 'wpurl' ) . "/wp-admin/options-general.php?page=".$this->plugin_slug."-setting-admin&spacer3029_nag_ignore=0\" target=\"_parent\">".__('Stop bugging me', 'motech-spacer')." [X]</a></strong></p></div>";
116	}
117	}
118
119	function adminmessage_init()
120	{
121	+ if ( isset($_GET['spacer3029_nag_ignore']) && '0' == $_GET['spacer3029_nag_ignore'] ) {
122	$user_id = get_current_user_id();
123	+ add_user_meta($user_id, 'spacer3029_nag_ignore', 'true', true);
124	if (wp_get_referer()) {
125	/* Redirects user to where they were before */
126	wp_safe_redirect(wp_get_referer());

134	function enqueue_color_picker( $hook_suffix ) {
135	wp_enqueue_style( 'wp-color-picker' );
136	wp_enqueue_script( $this->plugin_slug.'-script-handle', plugins_url('js/motech-color-picker.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
137	+ }
138	+
139	+ function enqueue_motech_javascript( ) {
140	+ if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') {
141	+ wp_enqueue_script( $this->plugin_slug.'-motech-javascript', plugins_url('js/motech-javascript.js', __FILE__ ), array('jquery'), false, true );
142	+ }
143	}
144
145	function spacer_imageupload_script() {
146	if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') {
147	+ if(function_exists('wp_enqueue_media')){
148	+ wp_enqueue_media();
149	+ }
150	wp_register_script('spacer_imageupload-js', plugins_url( 'js/spacer_imageupload.js' , __FILE__ ), array('jquery'));
151	wp_enqueue_script('spacer_imageupload-js');
152	}
153	+ }
154	+
155	+ function activespacer($id="") { #return attributes for active spacer based on id.
156	+ $return = array();
157	+ if($this->has_addspacers && $id!=""){
158	+ $ids = $this->key_array;
159	+ $key = array_search($id, $ids);
160	+ if($key){
161	+ #associated spacer id found so we return those values
162	+ $get = get_option($this->plugin_slug . '_spacer_style_addspacers');
163	+ $return["defaultstyle"] = $get[$key];
164	+ $get = get_option($this->plugin_slug . '_default_height_mobile_addspacers');
165	+ $return["mobile_height_default"] = $get[$key];
166	+ $return["mobile_height"] = $return["mobile_height_default"];
167	+ $get = get_option($this->plugin_slug . '_default_height_mobile_unit_addspacers');
168	+ $return["mobileunit"] = $get[$key];
169	+ $get = get_option($this->plugin_slug . '_default_height_addspacers');
170	+ $return["checkheight"] = $get[$key];
171	+ $get = get_option($this->plugin_slug . '_default_height_unit_addspacers');
172	+ $return["checkunit"] = $get[$key];
173	+ //$get = get_option($this->plugin_slug.'_custom_background_image_upload_addspacers');
174	+ //$return["bg"] = $get[$key];
175	+ //$get = get_option($this->plugin_slug . '_background_color_addspacers');
176	+ //$return["bgcolor"] = $get[$key];
177	+ $get = get_option($this->plugin_slug . '_spacer_class_addspacers');
178	+ $return["defaultclasses"] = $get[$key];
179	+ if(has_filter('spacer_add_to_extras')) {
180	+ $return = apply_filters('spacer_add_to_extras',$return,$key);
181	+ }
182	+ return $return;
183	+ }
184	+
185	+
186	}
187	+
188	+ #no associated spacer id found so we return default spacer values
189	+ $return["mobile_height_default"] = get_option($this->plugin_slug . '_default_height_mobile','');
190	+ $return["mobile_height"] = get_option($this->plugin_slug . '_default_height_mobile','');
191	+ $return["mobileunit"] = get_option($this->plugin_slug . '_default_height_mobile_unit','px');
192	+ $return["checkheight"] = get_option($this->plugin_slug . '_default_height','20');
193	+ $return["checkunit"] = get_option($this->plugin_slug . '_default_height_unit','px');
194	+ //$return["bg"] = get_option($this->plugin_slug.'_custom_background_image_upload');
195	+ //$return["bgcolor"] = get_option($this->plugin_slug.'_background_color');
196	+ $return["defaultclasses"] = get_option($this->plugin_slug.'_spacer_class','');
197	+ $return["defaultstyle"] = get_option($this->plugin_slug.'_spacer_style','');
198	+ if(has_filter('spacer_add_to_default')) {
199	+ $return = apply_filters('spacer_add_to_default', $return);
200	+ }
201	+
202	+ return $return;
203	+ }
204
205	// add the shortcode handler
206	function addShortcodeHandler($atts, $content = null) {
207	+ extract(shortcode_atts(array( "height" => '', "mheight" => '', "class" => '', "id" => '', "style" => '' ), $atts));
208	+ $activespacer = $this->activespacer($id);
209
210	//prep variables
211	$spacer_css = "";

214	//prep mobile height, if it's empty we will use desktop height. if set to 0 we will hide the spacer on mobile devices.
215	$mobile_height = "";
216	$mobile_height_inline = "";
217	+ $mobile_height_default = $activespacer["mobile_height_default"];
218
219	//first check for inline height, then check default mobile height
220	if(isset($mheight) && $mheight != ""){
221	$mobile_height = $mheight;
222	$mobile_height_inline = $mheight;
223	}elseif(isset($mobile_height_default) && $mobile_height_default != ""){
224	+ $mobile_height = $activespacer["mobile_height"];
225	$mobile_height_default = $mobile_height;
226	}
227
228
229	//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
230	if( function_exists('wp_is_mobile') && wp_is_mobile() && (isset($mobile_height) && $mobile_height != "")) {
231	+ $mobileunit = $activespacer["mobileunit"];
232
233
234	if(isset($mobile_height_inline) && $mobile_height_inline != "") {

252	} elseif($height=="default"){ //there is no mobile height set. use the desktop default height
253
254	//for now assume positive. in a sec add logic for if negative
255	+ $checkheight = $activespacer["checkheight"];
256	+ $checkunit = $activespacer["checkunit"];
257
258	if($checkheight > 0){
259	$spacer_css .= "padding-top: " . $checkheight . $checkunit.";";

268
269
270	//custom background image
271	+ /* $bg = $activespacer["bg"];
272	if(!empty($bg)) {
273	$spacer_css .= "background: url(".$bg.");";
274	+ }*/
275
276	//custom background image position
277	+ //$spacer_css .= $this->background_position();
278
279	//background color
280	+ /* $bgcolor = $activespacer["bgcolor"];
281	if(!empty($bgcolor)) {
282	$spacer_css .= "background-color:".$bgcolor.";";
283	+ }*/
284
285	//classes
286	+ $defaultclasses = $activespacer["defaultclasses"];
287	$classes .= $defaultclasses;
288	if(!empty($class)){
289	$classes .= " ".$class;
290	}
291
292	+ if(has_filter('spacer_add_css')) {
293	+ $spacer_css = apply_filters('spacer_add_css', $spacer_css, $activespacer);
294	+ }
295	+
296	//styles
297	+ $defaultstyle = $activespacer["defaultstyle"];
298	$spacer_css .= $defaultstyle;
299	if(!empty($style)){
300	$spacer_css .= " ".$style;
301	+ }

302
303	//create the spacer after all settings have been loaded
304	return '<span class="'.$classes.'" style="display:block;clear:both;height: 0px;'.$spacer_css.'"></span>';

324	if ( get_user_option('rich_editing') == 'true') {
325	add_filter('mce_external_plugins', array($this, 'add_custom_tinymce_plugin'),99999999);
326	add_filter('mce_buttons', array($this, 'register_custom_button'),99999999);
327	+ global $wp_version;
328	+ if($wp_version < 3.9){
329	+ add_action('admin_head', array($this,'motech_spacer_prepjsbuttons'));
330	+ }
331	}
332	+
333	}
334
335	function register_custom_button($buttons) {

338	}
339
340	function add_custom_tinymce_plugin($plugin_array) {
341	+ global $wp_version;
342	//use this in a plugin
343	+ if($wp_version >= 4.4){
344	+ $plugin_array[get_class($this)] = plugins_url( 'editor_plugin.js' , __FILE__ );
345	+ }elseif($wp_version >= 3.9){
346	+ $plugin_array[get_class($this)] = plugins_url( 'editor_plugin_back.js' , __FILE__ );
347	+ }else {
348	+ $plugin_array[get_class($this)] = plugins_url( 'editor_plugin_backback.js' , __FILE__ );
349	+ }
350	//use this in a theme
351	//$plugin_array[get_class($this)] = get_bloginfo('template_url').'/editor_plugin.js';
352	return $plugin_array;

374	<h2 class="aplabel"><?php echo $this->plugin_label ?></h2>
375
376
377	+ <div id="green_ribbon" style="display:none;">
378
379	<div id="green_ribbon_top">
380	<div id="green_ribbon_left">
381	</div>
382	<div id="green_ribbon_base">
383	+ <?php /?><span id="hms_get_premium"><?php _e('NEW! Get Premium »', 'motech-spacer')?></span><?php /?>
384	+ <?php /?><span class="hms_get_premium_meta"><?php _e('Spacer Premium is now available for as low as $20!', 'motech-spacer')?></span><?php /?>
385	</div>
386	<div id="green_ribbon_right">
387	</div>

389
390	<div class="motech_premium_box">
391	<div class="motech_premium_box_wrap">
392	+ <h2><?php _e('Get Visual Artist', 'motech-spacer')?></h2>
393	<div class="updated below-h2" style="margin-bottom: -20px !important;"><p><strong><?php _e('Purchase will be processed via PayPal.', 'motech-spacer')?></strong></p></div>
394	<div class="updated below-h2"><p><strong><?php _e('Every license is valid for the lifetime of the website where it\'s installed.', 'motech-spacer')?></strong></p></div>

395	<div class="motech_purchase_buttons">
396	+
397	+ <div class="motech_purchase_button unlimited_use">
398	+ <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="FK8RLFRUBCL5N" type="hidden"><input type="hidden" name="page_style" value="visual_artist">
399	<button name="submit">
400	+ <div class="purchase_graphic"><?php _e('Buy', 'motech-spacer')?> <span><?php _e('Unlimited', 'motech-spacer')?></span></div>
401	<div class="purchase_bubble">
402	+ <div class="purchase_price">$49</div>
403	+ <div class="purchase_meta"><?php _e('Unlimited sites forever!', 'motech-spacer')?></div>
404	</div>
405	</button>
406	<img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">
407	</form>
408	</div>
409	+
410	+ <div class="motech_purchase_button one_use">
411	+ <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="C59XHASJBCHLQ" type="hidden"><input type="hidden" name="page_style" value="visual_artist">

412	<button name="submit">
413	+ <div class="purchase_graphic"><?php _e('Buy 1 Use', 'motech-spacer')?></div>
414	<div class="purchase_bubble">
415	+ <div class="purchase_price">$19</div>
416	+ <div class="purchase_meta"><?php _e('1 site license', 'motech-spacer')?></div>
417	</div>
418	</button>
419	<img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" border="0" height="1" width="1">

428	</div>
429	</div>
430
431	+ <h2 class="nav-tab-wrapper">
432	+ <a href="#defaultspacer" class="nav-tab nav-tab-active"><?php _e('Default', 'motech-spacer')?></a>
433	+ <a href="#addspacers" class="nav-tab"><span class="dashicons dashicons-plus dashicons-plus-alt"></span> <?php _e('Add Spacers', 'motech-spacer')?></a>
434	+ <a href="#addons" class="nav-tab"><span class="dashicons dashicons-admin-plugins"></span> <?php _e('Add-Ons', 'motech-spacer')?></a>
435	+ <a href="#licenses" class="nav-tab"><span class="dashicons dashicons-admin-network"></span> <?php _e('Licenses', 'motech-spacer')?></a>
436	+ <?php /*?> <a href="#privacy-settings" class="nav-tab">Privacy settings</a>
437	+ <a href="#admin-custom" class="nav-tab">Admin Customizations</a>
438	+ <a href="#smtp" class="nav-tab">Smtp Settings</a><?php */?>
439	+ </h2>
440	+
441	<form method="post" action="options.php" class="<?php echo $this->plugin_slug ?>_form">
442	+ <div class="mt_boxed leftside">
443	<?php
444	// This prints out all hidden setting fields
445	settings_fields($this->plugin_slug.'_option_group');
446	?>
447	+ <div id="defaultspacer" class="metabox-holder mainsection aspacerunit">
448	+ <div class="motech-spacer-options section general wrap" style="border-bottom: solid 1px #BFBFBF;padding-bottom: 3px;">
449	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin'); ?>
450	+ </div>
451	+ <div class="motech-spacer-options section mobileoptions" style="border-bottom: solid 1px #BFBFBF;padding-bottom: 3px;">
452	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_mobileoptions'); ?>
453	+ </div>
454	+ <div class="motech-spacer-options section styleoptions">
455	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_styleoptions'); ?>
456	+ </div>
457	+ <?php
458	+ if(has_filter('spacer_default_sections')) {
459	+ apply_filters('spacer_default_sections', '',$this);
460	+ }
461	+ ?>
462	+ <div class="spacer_preview_area_container">
463	+ <h2><?php _e('Preview', 'motech-spacer')?></h2>
464	+ <div class="spacer_preview_area">
465	+ <p><?php _e('Sample text before Spacer', 'motech-spacer')?></p>
466	+ <span class="spacer_preview" style="display:block;clear:both;height: 0px;padding-top: 20px;"></span>
467	+ <p><?php _e('Sample text after Spacer', 'motech-spacer')?></p>
468	+ </div>
469	+ </div>
470	+ <div class="hidden" style="display:none;"><?php do_settings_sections($this->plugin_slug.'-setting-admin_hdoptions'); ?></div>
471	</div>
472	+ <div id="addspacers" class="metabox-holder mainsection hidden wrap">
473	+ <h2 style="padding-bottom:20px;"><?php _e('Add New Spacers', 'motech-spacer')?></h2>
474	+ <div class="nothinghere hidden"><div style="font-weight: bold;font-size: 127px;line-height: normal;margin-bottom: 10px;">:-(</div><div style="font-size: 19px; line-height: normal;margin-bottom: 30px;"><?php _e('You don\'t have any additional Spacers yet', 'motech-spacer')?></div></div>
475	+ <?php
476	+ $key_array = $this->key_array;
477	+ $getoption = get_option($this->plugin_slug.'_title_addspacers','');
478	+ foreach($key_array as $key=>$value){
479	+ if(isset($getoption[$key])){
480	+ $gettitle = $getoption[$key];
481	+ }
482	+ if(empty($gettitle)){
483	+ $gettitle = "Untitled";
484	+ }
485	+ ?>
486	+ <div class="aspacerunit addspacerunit postbox closed">
487	+ <button type="button" class="handlediv button-link" aria-expanded="true"><span class="toggle-indicator" aria-hidden="true"></span></button>
488	+ <h2 class="hndle ui-sortable-handle"><span><?php echo $gettitle ?></span></h2>
489	+ <div class="inside">
490	+ <div class="motech-spacer-options section title" style="border-bottom: solid 1px #eee;padding-bottom: 3px;">
491	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_title_addspacers'.$key); ?>
492	+ </div>
493	+ <div class="motech-spacer-options section general" style="border-bottom: solid 1px #eee;padding-bottom: 3px;">
494	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_addspacers'.$key); ?>
495	+ </div>
496	+ <div class="motech-spacer-options section mobileoptions" style="border-bottom: solid 1px #eee;padding-bottom: 3px;">
497	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_mobileoptions_addspacers'.$key); ?>
498	+ </div>
499	+ <div class="motech-spacer-options section styleoptions">
500	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_styleoptions_addspacers'.$key); ?>
501	+ </div>
502	+ <?php
503	+ if(has_filter('spacer_addspacer_sections'.$key)) {
504	+ apply_filters('spacer_addspacer_sections'.$key, '',$key);
505	+ }
506	+ ?>
507	+ <div class="spacer_preview_area_container">
508	+ <h2><?php _e('Preview', 'motech-spacer')?></h2>
509	+ <div class="spacer_preview_area">
510	+ <p><?php _e('Sample text before Spacer', 'motech-spacer')?></p>
511	+ <span class="spacer_preview" style="display:block;clear:both;height: 0px;padding-top: 20px;"></span>
512	+ <p><?php _e('Sample text after Spacer', 'motech-spacer')?></p>
513	+ </div>
514	+ </div>
515	+ <div class="hiddenx" style="display:none;">
516	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_hd_addspacers'.$key); ?>
517	+ </div>
518	+ <div class="removebutton"><span class="dashicons dashicons-trash"></span> <?php _e('REMOVE', 'motech-spacer') ?></div>
519	+ </div>
520	+ </div>
521	+ <?php } ?>
522	+
523	+ <div class="newbutton"><span class="dashicons dashicons-plus dashicons-plus-alt"></span> <?php _e('NEW SPACER', 'motech-spacer') ?></div>
524	+
525	+
526	</div>
527	+ <div id="addons" class="metabox-holder mainsection hidden wrap">
528	+ <?php
529	+ $actionbutton = '<a href="http://justinsaad.com/extensions/conditional-logic/?utm_medium=plugin&utm_source=plugin-addons-page&utm_campaign=Ninja+Forms+Addons+Page&utm_content=Conditional+Logic" title="'.__('Buy Visual Artist', 'motech-spacer').'" class="button-primary msbutton buynowbutton">'.__('Buy Now', 'motech-spacer').'</a>';
530	+ if( is_plugin_active( 'spacer-visual-artist/index.php' ) ) {
531	+ $actionbutton = '<a href="javascript:void(0)" title="'.__('Active', 'motech-spacer').'" class="button-secondary msbutton">'.__('Active', 'motech-spacer').'</a>';
532	+ } elseif( file_exists(plugin_dir_path(__FILE__) . '../spacer-visual-artist/index.php') ) {
533	+ $actionbutton = '<a href="javascript:void(0)" title="'.__('Installed', 'motech-spacer').'" class="button-secondary msbutton">'.__('Installed', 'motech-spacer').'</a>';
534	+ }
535	+ ?>
536	+ <div class="msaddon mscol"><img src="<?php echo plugins_url( 'images/vart.png' , __FILE__ ) ?>"><h2><?php _e('Visual Artist', 'motech-spacer') ?></h2><div class="msaddon-content"><p><?php _e('Design fancy dividers, horizontal rules, and other ornate section breaks. Incorporate rich colors and images, all without mastering css.', 'motech-spacer') ?></p><div class="msaddon-buttons"><a href="http://www.clevelandwebdeveloper.com/?p=644&utm_medium=plugin&utm_source=plugin-addons-page&utm_campaign=Spacers+Addons+Page&utm_content=Spacer+Learn" target="_blank" class="button-secondary msdbutton"><?php _e('Learn More', 'motech-spacer') ?></a><?php echo $actionbutton ?></div></div></div>
537	+ </div>
538	+ <div id="licenses" class="metabox-holder mainsection hidden wrap">
539	+ <div class="motech-spacer-options section general wrap">
540	+ <?php do_settings_sections($this->plugin_slug.'-setting-admin_licenses'); ?>
541	+ </div>
542	+ </div>
543	+ <div class="wrap"><div class="savebutton"><button type="submit"><span class="dashicons dashicons-yes"></span> <?php _e('SAVE CHANGES!', 'motech-spacer') ?></button></div></div>
544	+ </div>
545	+ <div class="mt_boxed rightside">
546	+ <h3 style="margin-top:0px;"><?php _e('Spacer Add-Ons', 'motech-spacer') ?></h3>
547	+ <img src="<?php echo plugins_url( 'images/dfa3.png' , __FILE__ ) ?>" style="cursor:pointer;" class="buynowbutton" />
548	+ <div class="msaddon-buttons" style="margin-top: 12px;"><a href="http://www.clevelandwebdeveloper.com/?p=644&utm_medium=plugin&utm_source=plugin-settings-page&utm_campaign=Spacers+Settings+Page&utm_content=Spacer+Sidebar" target="_blank" class="button-secondary msdbutton" style="float:left;"><?php _e('Learn More', 'motech-spacer') ?></a><a href="javascript:void(0)" class="button-primary msbutton buynowbutton" style="float:right;"><?php _e('Buy Now', 'motech-spacer') ?></a></div>
549	+ <div style="clear:both;"></div>
550	+ <hr style="border:none;border-top:dotted 1px #f25a4b;margin: 30px 0;">
551	+
552	+
553	+
554	+ <iframe width="290" height="163" src="https://www.youtube-nocookie.com/embed/43MFLibyFBU?rel=0" frameborder="0" style="margin-bottom:11px;" allowfullscreen></iframe>
555	+ <strong><?php _e('Improve Your Layouts With Visual Artist</strong><br />Design fancy dividers, horizontal rules, and other ornate section breaks. Incorporate rich colors and images, all without mastering css.', 'motech-spacer') ?>
556	+
557	+ </div>
558	+
559	</form>
560	+
561	</div>
562	<?php
563	}
564
565	+ public function DisplayAddSpacers(){
566	+ $key_array = $this->key_array;
567	+ foreach($key_array as $key=>$value){
568	+ add_settings_section(
569	+ $this->plugin_slug.'_setting_section',
570	+ __('', 'motech-spacer'),
571	+ false,
572	+ $this->plugin_slug.'-setting-admin_title_addspacers'.$key
573	+ );
574	+
575	+ add_settings_section(
576	+ $this->plugin_slug.'_setting_section',
577	+ __('', 'motech-spacer'),
578	+ false,
579	+ $this->plugin_slug.'-setting-admin_hd_addspacers'.$key
580	+ );
581	+
582	+ //add text input field
583	+ $field_slug = "title_addspacers";
584	+ $field_label = __('Spacer Title', 'motech-spacer');
585	+ $field_id = $this->plugin_slug.'_'.$field_slug;
586	+ register_setting($this->plugin_slug.'_option_group', $field_id);
587	+ add_settings_field(
588	+ $field_id,
589	+ $field_label,
590	+ array($this, 'create_a_text_input_array'), //callback function for text input
591	+ $this->plugin_slug.'-setting-admin_title_addspacers'.$key,
592	+ $this->plugin_slug.'_setting_section',
593	+ array( // The array of arguments to pass to the callback.
594	+ "id" => $field_id, //sends field id to callback
595	+ "key" => $key,
596	+ "class" => "addingspacer",
597	+ "desc" => __('Give this Spacer a title.', 'motech-spacer'), //description of the field (optional)
598	+ "placeholder" => __('eg: Medium Spacer', 'motech-spacer')
599	+ //"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
600	+ )
601	+ );
602	+
603	+ //add text input field
604	+ $field_slug = "addspacer_id";
605	+ $field_label = "Spacer ID";
606	+ $field_id = $this->plugin_slug.'_'.$field_slug;
607	+ register_setting($this->plugin_slug.'_option_group', $field_id);
608	+ $desc = "";
609	+ add_settings_field(
610	+ $field_id,
611	+ $field_label,
612	+ array($this, 'create_a_text_input_array'), //callback function for text input
613	+ $this->plugin_slug.'-setting-admin_hd_addspacers'.$key,
614	+ $this->plugin_slug.'_setting_section',
615	+ array( // The array of arguments to pass to the callback.
616	+ "id" => $field_id, //sends field id to callback
617	+ "key" => $key,
618	+ "class" => "hmshidden addspacer_id",
619	+ "desc" => $desc, //description of the field (optional)
620	+ )
621	+ );
622	+
623	+ add_settings_section(
624	+ $this->plugin_slug.'_setting_section',
625	+ __('', 'motech-spacer'),
626	+ false,
627	+ $this->plugin_slug.'-setting-admin_addspacers'.$key
628	+ );
629	+
630	+ //add text input field
631	+ $field_slug = "default_height_addspacers";
632	+ $field_label = __('Default Height', 'motech-spacer');
633	+ $field_id = $this->plugin_slug.'_'.$field_slug;
634	+ register_setting($this->plugin_slug.'_option_group', $field_id);
635	+ add_settings_field(
636	+ $field_id,
637	+ $field_label,
638	+ array($this, 'create_a_text_input_array'), //callback function for text input
639	+ $this->plugin_slug.'-setting-admin_addspacers'.$key,
640	+ $this->plugin_slug.'_setting_section',
641	+ array( // The array of arguments to pass to the callback.
642	+ "id" => $field_id, //sends field id to callback
643	+ "key" => $key,
644	+ "class" => 'sheight',
645	+ "desc" => __('Set a default height. Note that you can also enter negative spacing to shift the following content upwards.', 'motech-spacer'), //description of the field (optional)
646	+ "placeholder" => __('eg: 20', 'motech-spacer'),
647	+ "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
648	+ )
649	+ );
650	+
651	+ //add a select input field
652	+ $field_slug = "default_height_unit_addspacers";
653	+ $field_label = __('Height Unit', 'motech-spacer');
654	+ $field_id = $this->plugin_slug.'_'.$field_slug;
655	+ $this->unit_options = array(
656	+ array("label" => "px", "value" => "px"),
657	+ array("label" => "em", "value" => "em"),
658	+ array("label" => "rem", "value" => "rem"),
659	+ array("label" => "%", "value" => "%"),
660	+ );
661	+ register_setting($this->plugin_slug.'_option_group', $field_id);
662	+ add_settings_field(
663	+ $field_id,
664	+ $field_label,
665	+ array($this, 'create_a_select_input_array'), //callback function for select input
666	+ $this->plugin_slug.'-setting-admin_addspacers'.$key,
667	+ $this->plugin_slug.'_setting_section',
668	+ array( // The array of arguments to pass to the callback.
669	+ "id" => $field_id, //sends select field id to callback
670	+ "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
671	+ "desc" => __('Select a unit of measurement to use with your default spacer height.', 'motech-spacer'), //description of the field (optional)
672	+ "key" => $key,
673	+ "class" => "msunit",
674	+ "meta" => 'style="max-width:450px;"',
675	+ "select_options" => $this->unit_options //sets select option data
676	+ )
677	+ );
678	+
679	+ add_settings_section(
680	+ $this->plugin_slug.'_setting_section',
681	+ __('', 'motech-spacer'),
682	+ false,
683	+ $this->plugin_slug.'-setting-admin_mobileoptions_addspacers'.$key
684	+ );
685	+
686	+ //add text input field
687	+ $field_slug = "default_height_mobile_addspacers";
688	+ $field_label = __('Default Height On Mobile (Optional)', 'motech-spacer');
689	+ $field_id = $this->plugin_slug.'_'.$field_slug;
690	+ register_setting($this->plugin_slug.'_option_group', $field_id);
691	+ add_settings_field(
692	+ $field_id,
693	+ $field_label,
694	+ array($this, 'create_a_text_input_array'), //callback function for text input
695	+ $this->plugin_slug.'-setting-admin_mobileoptions_addspacers'.$key,
696	+ $this->plugin_slug.'_setting_section',
697	+ array( // The array of arguments to pass to the callback.
698	+ "id" => $field_id, //sends field id to callback
699	+ "desc" => __('Set the default height on mobile devices. If left empty, the mobile height will be the same as the desktop height. If set to 0, the spacer will be hidden on mobile.', 'motech-spacer'), //description of the field (optional)
700	+ "key" => $key,
701	+ "placeholder" => __('eg: 10', 'motech-spacer'),
702	+ "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
703	+ )
704	+ );
705	+
706	+ //add a select input field
707	+ $field_slug = "default_height_mobile_unit_addspacers";
708	+ $field_label = __('Height Unit On Mobile', 'motech-spacer');
709	+ $field_id = $this->plugin_slug.'_'.$field_slug;
710	+ $this->unit_options = array(
711	+ array("label" => "px", "value" => "px"),
712	+ array("label" => "em", "value" => "em"),
713	+ array("label" => "rem", "value" => "rem"),
714	+ array("label" => "%", "value" => "%"),
715	+ );
716	+ register_setting($this->plugin_slug.'_option_group', $field_id);
717	+ add_settings_field(
718	+ $field_id,
719	+ $field_label,
720	+ array($this, 'create_a_select_input_array'), //callback function for select input
721	+ $this->plugin_slug.'-setting-admin_mobileoptions_addspacers'.$key,
722	+ $this->plugin_slug.'_setting_section',
723	+ array( // The array of arguments to pass to the callback.
724	+ "id" => $field_id, //sends select field id to callback
725	+ "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
726	+ "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.', 'motech-spacer'), //description of the field (optional)
727	+ "key" => $key,
728	+ "class"=> "msunitmobile",
729	+ "meta" => 'style="max-width:450px;"',
730	+ "select_options" => $this->unit_options //sets select option data
731	+ )
732	+ );
733	+
734	+ add_settings_section(
735	+ $this->plugin_slug.'_setting_section',
736	+ __('', 'motech-spacer'),
737	+ false,
738	+ $this->plugin_slug.'-setting-admin_styleoptions_addspacers'.$key
739	+ );
740	+
741	+ //add text input field
742	+ $field_slug = "spacer_class_addspacers";
743	+ $field_label = __('Default Class (Optional)', 'motech-spacer');
744	+ $field_id = $this->plugin_slug.'_'.$field_slug;
745	+ register_setting($this->plugin_slug.'_option_group', $field_id);
746	+ add_settings_field(
747	+ $field_id,
748	+ $field_label,
749	+ array($this, 'create_a_text_input_array'), //callback function for text input
750	+ $this->plugin_slug.'-setting-admin_styleoptions_addspacers'.$key,
751	+ $this->plugin_slug.'_setting_section',
752	+ array( // The array of arguments to pass to the callback.
753	+ "id" => $field_id, //sends field id to callback
754	+ "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', 'motech-spacer'), //description of the field (optional)
755	+ "key" => $key,
756	+ "placeholder" => __('eg: MyClass1 Class2', 'motech-spacer')
757	+ )
758	+ );
759	+
760	+ //add textarea input field
761	+ $field_slug = "spacer_style_addspacers";
762	+ $field_label = __('Style (Optional)', 'motech-spacer');
763	+ $field_id = $this->plugin_slug.'_'.$field_slug;
764	+ register_setting($this->plugin_slug.'_option_group', $field_id);
765	+ add_settings_field(
766	+ $field_id,
767	+ $field_label,
768	+ array($this, 'create_a_textarea_input_array'), //callback function for textarea input
769	+ $this->plugin_slug.'-setting-admin_styleoptions_addspacers'.$key,
770	+ $this->plugin_slug.'_setting_section',
771	+ array( // The array of arguments to pass to the callback.
772	+ "id" => $field_id, //sends field id to callback
773	+ "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.<br><span style="color:red">NEW:</span> Want to create visually stunning divider elements, without needing to know any CSS? See <a href="http://www.clevelandwebdeveloper.com/wordpress-plugins/visual-artist/?utm_medium=plugin&utm_source=plugin-settings-page&utm_campaign=Spacers+Settings+Page&utm_content=Spacer+Inline" target="_blank">examples of what you can do with the Visual Artist add-on »</a><br>Ready to make your own? <a href="#" class="buynowbutton">Buy It Now »</a>', 'motech-spacer'), //description of the field (optional)
774	+ "key" => $key,
775	+ "class" => 'msstyle',
776	+ "placeholder" => __('(for example)', 'motech-spacer').' 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)
777	+ )
778	+ );
779	+
780	+ //add text input field
781	+ $field_slug = "addspacer_index";
782	+ $field_label = "Add Spacer index";
783	+ $field_id = $this->plugin_slug.'_'.$field_slug;
784	+ register_setting($this->plugin_slug.'_option_group', $field_id);
785	+ $desc = "";
786	+ add_settings_field(
787	+ $field_id,
788	+ $field_label,
789	+ array($this, 'create_a_text_input'), //callback function for text input
790	+ $this->plugin_slug.'-setting-admin_hdoptions',
791	+ $this->plugin_slug.'_setting_section',
792	+ array( // The array of arguments to pass to the callback.
793	+ "id" => $field_id, //sends field id to callback
794	+ "class" => "hmshidden",
795	+ "default" => "1",
796	+ "desc" => $desc, //description of the field (optional)
797	+ )
798	+ );
799	+
800	+ }
801	+
802	+ }
803	+
804	public function DisplayMobileOptions(){
805	add_settings_section(
806	$this->plugin_slug.'_setting_section',

865
866	//add text input field
867	$field_slug = "spacer_class";
868	+ $field_label = __('Default Spacer Class (Optional)', 'motech-spacer');
869	$field_id = $this->plugin_slug.'_'.$field_slug;
870	+ register_setting($this->plugin_slug.'_option_group', $field_id);
871	add_settings_field(
872	$field_id,
873	$field_label,

883
884	//add textarea input field
885	$field_slug = "spacer_style";
886	+ $field_label = __('Spacer Style (Optional)', 'motech-spacer');
887	$field_id = $this->plugin_slug.'_'.$field_slug;
888	+ register_setting($this->plugin_slug.'_option_group', $field_id);
889	add_settings_field(
890	$field_id,
891	$field_label,

894	$this->plugin_slug.'_setting_section',
895	array( // The array of arguments to pass to the callback.
896	"id" => $field_id, //sends field id to callback
897	+ "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.<br><span style="color:red">NEW:</span> Want to create visually stunning divider elements, without needing to know any CSS? See <a href="http://www.clevelandwebdeveloper.com/wordpress-plugins/visual-artist/?utm_medium=plugin&utm_source=plugin-settings-page&utm_campaign=Spacers+Settings+Page&utm_content=Spacer+Inline" target="_blank">examples of what you can do with the Visual Artist add-on »</a><br>Ready to make your own? <a href="#" class="buynowbutton">Buy It Now »</a>', 'motech-spacer'), //description of the field (optional)
898	"placeholder" => __('(for example)', 'motech-spacer').' 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)
899	)
900	);
901	+
902	+ if(has_filter('spacer_default_settings')) {
903	+ apply_filters('spacer_default_settings','',$this);
904	+ }
905	+
906	+ add_settings_section(
907	+ $this->plugin_slug.'_setting_section',
908	+ __('', 'motech-spacer'),
909	+ false,
910	+ $this->plugin_slug.'-setting-admin_hdoptions'
911	+ );
912	}
913
914	public function page_init(){

916	//register other settings sections
917	$this->DisplayMobileOptions();
918	$this->DisplayStyleOptions();
919	+ $this->DisplayAddSpacers();
920
921	add_settings_section(
922	$this->plugin_slug.'_setting_section',
923	+ __('Configure Default Spacer', 'motech-spacer'),
924	array($this, 'print_section_info'),
925	$this->plugin_slug.'-setting-admin'
926	);
927
928	+ add_settings_section(
929	+ $this->plugin_slug.'_setting_section',
930	+ __('Licenses', 'motech-spacer'),
931	+ array($this, 'print_section_info_licenses'),
932	+ $this->plugin_slug.'-setting-admin_licenses'
933	+ );
934	+
935	+ if(has_filter('spacer_licenses_settings')) {
936	+ apply_filters('spacer_licenses_settings','',$this);
937	+ }
938	+
939	//add text input field
940	$field_slug = "default_height";
941	+ $field_label = __('Default Spacer Height', 'motech-spacer');
942	$field_id = $this->plugin_slug.'_'.$field_slug;
943	+ register_setting($this->plugin_slug.'_option_group', $field_id);
944	add_settings_field(
945	$field_id,
946	$field_label,

957
958	//add a select input field
959	$field_slug = "default_height_unit";
960	+ $field_label = __('Spacer Height Unit', 'motech-spacer');
961	$field_id = $this->plugin_slug.'_'.$field_slug;
962	$this->unit_options = array(
963	array("label" => "px", "value" => "px"),

965	array("label" => "rem", "value" => "rem"),
966	array("label" => "%", "value" => "%"),
967	);
968	+ register_setting($this->plugin_slug.'_option_group', $field_id);
969	add_settings_field(
970	$field_id,
971	$field_label,

1002	} else {
1003	$default = false;
1004	}
1005	+ if(isset($args["meta"])) {
1006	+ $meta = $args["meta"];
1007	+ } else {
1008	+ $meta = "";
1009	+ }
1010	?>
1011	+ <input class="motech_upload_image" type="text" name="<?php echo $args["id"] ?>" value="<?php echo get_option($args["id"], $default) ?>" <?php echo $meta ?> />
1012	<input class="motech_upload_image_button" class="button" type="button" value="<?php _e('Upload Image', 'motech-spacer')?>" />
1013	<br />
1014	<?php

1018	echo "<span class='description'>".__('Enter a URL or upload an image.', 'motech-spacer')."</span>";
1019	}
1020	?>
1021	+ <?php /*?> <?php
1022	$current_image = get_option($args["id"],$default);
1023	if(!empty($current_image)) {
1024	+ echo "<span class='motech_spacer_preview_image_container'><br><strong>".__('Image Preview', 'motech-spacer')."</strong><br><span class='motech_spacer_preview_image' style='background-size: contain;background-position: 0% 0%;background-repeat: no-repeat;margin-left:20px;display:block; width:75px; height: 75px;background-image:url(".$current_image.");'></span></span>";
1025	}
1026	+ ?><?php */?>
1027	<?php
1028	} // end create_image_upload
1029	+
1030	+ function create_image_upload_array($args) {
1031	+ ?>
1032	+ <?php
1033	+ //set default value if applicable
1034	+ if(isset($args["default"])) {
1035	+ $default = $args["default"];
1036	+ } else {
1037	+ $default = false;
1038	+ }
1039	+ $key = $args["key"];
1040	+ $getarray = get_option($args["id"]);
1041	+ if(!isset($getarray[$key])){
1042	+ $getarray[$key] = "";
1043	+ }
1044	+ ?>
1045	+ <input class="motech_upload_image" type="text" name="<?php echo $args["id"]."[".$key."]" ?>" value="<?php echo $getarray[$key] ?>" />
1046	+ <input class="motech_upload_image_button" class="button" type="button" value="<?php _e('Upload Image', 'motech-spacer')?>" />
1047	+ <br />
1048	+ <?php
1049	+ if(isset($args["desc"])) {
1050	+ echo "<span class='description'>".$args["desc"]."</span>";
1051	+ } else {
1052	+ echo "<span class='description'>".__('Enter a URL or upload an image.', 'motech-spacer')."</span>";
1053	+ }
1054	+ ?>
1055	+ <?php /*?> <?php
1056	+ $current_image = $getarray[$key];
1057	+ if(!empty($current_image)) {
1058	+ echo "<span class='motech_spacer_preview_image_container'><br><strong>".__('Image Preview', 'motech-spacer')."</strong><br><span class='motech_spacer_preview_image' style='background-size: contain;background-position: 0% 0%;background-repeat: no-repeat;margin-left:20px;display:block; width:75px; height: 75px;background-image:url(".$current_image.");'></span>";
1059	+ }
1060	+ ?><?php */?>
1061	+ <?php
1062	+ } // end create_image_upload
1063
1064	function create_a_checkbox($args) {
1065	$html = '<input type="checkbox" id="' . $args["id"] . '" name="' . $args["id"] . '" value="1" ' . checked(1, get_option($args["id"], $args["default"]), false) . '/>';

1094	}
1095	// Render the output
1096	echo '<input type="text" ' . $placeholder_html . $max_length_html . ' id="' . $args["id"] . '" class="' . $args["class"]. '" name="' . $args["id"] . '" value="' . get_option($args["id"], $default) . '" />';
1097	+ if(isset($args["desc"])) {
1098	echo "<p class='description'>".$args["desc"]."</p>";
1099	}
1100
1101
1102	} // end create_a_text_input
1103
1104	+ function create_a_text_input_array($args) {
1105	+ //grab placeholder if there is one
1106	+ if(isset($args["placeholder"])) {
1107	+ $placeholder_html = "placeholder=\"".$args["placeholder"]."\"";
1108	+ } else {
1109	+ $placeholder_html = "";
1110	+ }
1111	+ //grab maxlength if there is one
1112	+ if(isset($args["maxlength"])) {
1113	+ $max_length_html = "maxlength=\"".$args["maxlength"]."\"";
1114	+ } else {
1115	+ $max_length_html = "";
1116	+ }
1117	+ if(isset($args["default"])) {
1118	+ $default = $args["default"];
1119	+ } else {
1120	+ $default = false;
1121	+ }
1122	+ if(!isset($args["class"])){
1123	+ $args["class"] = "";
1124	+ }
1125	+ $key = $args["key"];
1126	+ $getarray = get_option($args["id"]);
1127	+ if(!isset($getarray[$key])){
1128	+ $getarray[$key] = "";
1129	+ }
1130	+ // Render the output
1131	+ echo '<input type="text" ' . $placeholder_html . $max_length_html . ' class="' . $args["class"]. '" name="' . $args["id"] . '['.$key.']" value="' . $getarray[$key] . '" />';
1132	+ //echo '<input type="text" ' . ' name="' . $args["id"] . '['.$key.']" value="' . $value . '" />';
1133	+ if(isset($args["desc"])) {
1134	+ echo "<p class='description'>".$args["desc"]."</p>";
1135	+ }
1136	+
1137	+
1138	+
1139	+ } // end create_a_text_input
1140	+
1141	function create_a_textarea_input($args) {
1142	//grab placeholder if there is one
1143	if($args["placeholder"]) {

1158	}
1159	}
1160
1161	+ function create_a_textarea_input_array($args) {
1162	+ //grab placeholder if there is one
1163	+ if($args["placeholder"]) {
1164	+ $placeholder_html = "placeholder=\"".$args["placeholder"]."\"";
1165	+ } else {
1166	+ $placeholder_html = "";
1167	+ }
1168	+ //get default value if there is one
1169	+ if(isset($args["default"])) {
1170	+ $default = $args["default"];
1171	+ } else {
1172	+ $default = false;
1173	+ }
1174	+ if(!isset($args["class"])){
1175	+ $args["class"] = "";
1176	+ }
1177	+ $key = $args["key"];
1178	+ $getarray = get_option($args["id"], $default);
1179	+ if(!isset($getarray[$key])){
1180	+ $getarray[$key] = "";
1181	+ }
1182	+ // Render the output
1183	+ echo '<textarea ' . $placeholder_html . ' id="' . $args["id"] . $args["key"] .'" class="' . $args["class"]. '" name="' . $args["id"] . '['.$key.']" rows="5" cols="50">' . $getarray[$key] . '</textarea>';
1184	+ if($args["desc"]) {
1185	+ echo "<p class='description'>".$args["desc"]."</p>";
1186	+ }
1187	+ }
1188	+
1189	function create_a_radio_input($args) {
1190
1191	$radio_options = $args["radio_options"];

1228	$html .= '<option value="'.$select_option["value"].'" ' . selected( $select_option["value"], get_option($args["id"], $default), false) . '>'.$select_option["label"].'</option>';
1229	}
1230	$html .= '</select>';
1231	+ if(isset($args["desc"])) {
1232	$html .= "<p class='description'>".$args["desc"]."</p>";
1233	}
1234	echo $html;
1235
1236	} // end create_a_select_input callback
1237
1238	+ function create_a_select_input_array($args) {
1239	+
1240	+ $select_options = $args["select_options"];
1241	+ $html = "";
1242	+ //get default value if there is one
1243	+ if(isset($args["default"])) {
1244	+ $default = $args["default"];
1245	+ } else {
1246	+ $default = false;
1247	+ }
1248	+ if(isset($args["meta"])) {
1249	+ $meta = $args["meta"];
1250	+ } else {
1251	+ $meta = "";
1252	+ }
1253	+ if(!isset($args["class"])){
1254	+ $args["class"] = "";
1255	+ }
1256	+ $key = $args["key"];
1257	+ $getarray = get_option($args["id"], $default);
1258	+ if(!isset($getarray[$key])){
1259	+ $getarray[$key] = "";
1260	+ }
1261	+ $html .= '<select id="' . $args["id"] . $args["key"] . '" class="' . $args["class"]. '" name="' . $args["id"]. '['.$key.']" ' . $meta . '" >';
1262	+ foreach($select_options as $select_option) {
1263	+ $html .= '<option value="'.$select_option["value"].'" ' . selected( $select_option["value"], $getarray[$key], false) . '>'.$select_option["label"].'</option>';
1264	+ }
1265	+ $html .= '</select>';
1266	+ if(isset($args["desc"])) {
1267	+ $html .= "<p class='description'>".$args["desc"]."</p>";
1268	+ }
1269	+ echo $html;
1270	+
1271	+ } // end create_a_select_input callback
1272	+
1273	public function print_section_info(){ //section summary info goes here
1274	//print 'This is the where you set the password for your site.';
1275	+ }
1276	+
1277	+ public function print_section_info_licenses(){ //section summary info goes here
1278	+ if(!has_filter('spacer_licenses_settings')) {
1279	+ _e('To activate licenses for Spacer add ons you must first install and activate the chosen add on. License settings will then appear below.', 'motech-spacer');
1280	+ }
1281	+ }
1282
1283	public function add_plugin_page(){
1284	// This page will be under "Settings"

1302	if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
1303	?>
1304	<style>
1305	+ .motech_spacer_preview_image { -moz-transition: all .5s ease-out;
1306	+ -o-transition: all .5s ease-out;
1307	+ transition: all .5s ease-out;}
1308	+ .spacer_preview_area_container h2 {margin-bottom:3px;}
1309	+ .addspacerunit .spacer_preview_area_container h2 {font-size:1.3em;font-weight:bold; padding-bottom: 0px; margin-bottom: -3px;}
1310	+ .spacer_preview_area { min-height: 75px; overflow: hidden;
1311	+ background: white;
1312	+ padding-left: 25px;
1313	+ padding-top: 1px;
1314	+ padding-bottom: 11px;
1315	+ padding-right: 25px;box-shadow: 0 1px 1px rgba(0,0,0,.04); border: #e5e5e5 solid 1px;}
1316	+ .spacer_preview {-moz-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
1317	+ .spacer_preview_area p {
1318	+ font-size: 15px;}
1319	+ .nothinghere {text-align:center;color:#9C9C98;}
1320	+ .newbutton,.removebutton,.savebutton {
1321	+ font-family: Helvetica,Verdana,sans-serif!important;
1322	+ margin: 10px;
1323	+ background: #3ba0ff;
1324	+ color:#fff;
1325	+ display:block;
1326	+ font-weight:700;
1327	+ font-size:14px;
1328	+ padding:10px;
1329	+ text-shadow:none;
1330	+ text-align: center;cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
1331	+ user-select: none; transition: background 300ms ease-out;
1332	+ }
1333	+ .motech-spacer-options.general h3{
1334	+ font-size: 23px !important;
1335	+ font-weight: normal;
1336	+ padding-left: 0px;
1337	+ }
1338	+ .newbutton:hover{background:#1E7CD4;}
1339	+ .newbutton{margin-bottom:50px;}
1340	+ .removebutton{background:red;margin-top: 27px; margin-bottom: 26px;}
1341	+ .removebutton:hover{background:#a00;}
1342	+ .js .postbox .handlediv { background: transparent;
1343	+ border: 0;
1344	+ outline: 0;}
1345	+ .js .postbox .handlediv .toggle-indicator:before {
1346	+ margin-top: 4px;
1347	+ width: 20px;
1348	+ -webkit-border-radius: 50%;
1349	+ border-radius: 50%;
1350	+ text-indent: -1px;
1351	+ }
1352	+ .savebutton {padding: 0px;background:#45CE58;margin-top: 40px;}
1353	+ .savebutton:hover {background:#39b54a;}
1354	+ .savebutton button{width: 100%;
1355	+ border: 0;
1356	+ outline: 0;
1357	+ padding: 10px;
1358	+ background: none;
1359	+ cursor: pointer;
1360	+ color: white;}
1361	+ .savebutton .dashicons{
1362	+ font-size: 28px;
1363	+ position: relative;
1364	+ top: -4px;
1365	+ left: -2px;
1366	+ }
1367	+ .js .postbox .toggle-indicator:before, .js .sidebar-name .sidebar-name-arrow:before {
1368	+ content: "\f142";
1369	+ display: inline-block;
1370	+ font: 400 20px/1 dashicons;
1371	+ speak: none;
1372	+ -webkit-font-smoothing: antialiased;
1373	+ -moz-osx-font-smoothing: grayscale;
1374	+ text-decoration: none!important;
1375	+ }
1376	+ .js .postbox.closed .handlediv .toggle-indicator:before, .js .widgets-holder-wrap.closed .sidebar-name-arrow:before {
1377	+ content: "\f140";
1378	+ }
1379	+ .motech_spacer_form .postbox .hndle {cursor:pointer;font-size: 14px;
1380	+ font-weight: bold;
1381	+ padding: 8px 12px;
1382	+ line-height: 1.4;
1383	+ border-bottom: 1px solid #eee;}
1384	.hmshidden {display:none;}
1385	#wpbody h3 {font-size:20px;}
1386	#hide_my_site_current_theme {display:none;}

1416	.motech_premium_cancel {color:#626262;text-align:center;font-size:22px;margin-top:43px;}
1417	.motech_premium_cancel span:hover {cursor:pointer;text-decoration:underline;}
1418	.<?php echo $this->plugin_slug ?>_form > .form-table {max-width:770px;}
1419	+ .motech_spacer_form {margin-right:310px;}
1420	+ .mt_boxed.rightside { width: 290px;
1421	+ margin-top: 35px;
1422	+ float: right;
1423	+ margin-right: -310px;}
1424	+ .mt_boxed.leftside {padding: 0 20px 0 0; float: left; width: 100%;}
1425	+
1426
1427
1428	/css for the image picker/

1431	.motech_image_picker_wrap.current img, .motech_image_picker_wrap:active img {box-shadow: 0px 0px 0px 4px rgba(0, 0, 255, 0.9);}
1432	.motech_image_picker_wrap {display:inline-block;cursor: pointer;margin-right:20px;margin-bottom: 30px;}
1433	.motech_image_picker_wrap div {font-weight:bold;font-size:16px;margin-top:10px;color:rgba(0, 0, 0, 0.47);}
1434	+ </style>
1435	+ <?php
1436	+ if(has_filter('spacer_add_to_admincss')) {
1437	+ apply_filters('spacer_add_to_admincss','');
1438	+ }
1439	+ ?>
1440	+ <style>
1441
1442	/* Begin Responsive
1443	====================================================================== */

1458	}
1459	@media only screen and (max-width: 980px) {
1460	.motech_purchase_button {display:block;margin-bottom: 80px;margin-right:0px;}
1461	+ .motech_spacer_form {margin-right:0px;}
1462	+ .mt_boxed.rightside {margin-right:0px;float:none;}
1463	+ .mt_boxed.leftside {padding: 0px; float: none; width: 100%;}
1464	}
1465	+
1466	@media only screen and (max-width: 445px) {
1467	.motech_premium_box h2 {font-size:22px;}
1468	}

1533	}
1534	}
1535
1536	+ function motech_spacer_prepjsbuttons(){
1537	+ ?>
1538	+ <script type="text/javascript">
1539	+ <?php
1540	+ $checkheight = get_option($this->plugin_slug . '_default_height','20');
1541	+ $checkunit = get_option($this->plugin_slug . '_default_height_unit','px');
1542	+ $return["useheight"] = $checkheight.$checkunit;
1543	+ if($this->has_addspacers){
1544	+ $ids = $this->key_array;
1545	+ $checkaddheights = get_option($this->plugin_slug . '_default_height_addspacers');
1546	+ $checkaddheightunits = get_option($this->plugin_slug . '_default_height_unit_addspacers');
1547	+ $checktitles = get_option($this->plugin_slug . '_title_addspacers');
1548	+ foreach($ids as $key=>$value){
1549	+ $useheight = $checkaddheights[$key];
1550	+ $useunit = $checkaddheightunits[$key];
1551	+ $usetitle = $checktitles[$key];
1552	+ if(empty($usetitle)){
1553	+ $usetitle = "Untitled";
1554	+ }
1555	+ $return["addspacers"][] = array("id"=>$value,"height"=>$useheight.$useunit,"title"=>$usetitle);
1556	+ }
1557	+ }
1558	+ ?>
1559	+
1560	+ var motech_spacer_prepjsbuttons = <?php echo json_encode($return); ?>;
1561	+ </script>
1562	+ <?php
1563	+ }
1564	+
1565	function motech_imagepicker_admin_jquery() {
1566	if (isset($_GET['page']) && $_GET['page'] == $this->plugin_slug.'-setting-admin') { //if we are on our admin page
1567	?>

1593	jQuery("#hide_my_site_plk").replaceWith("<div></div>");
1594	<?php endif ?>
1595
1596	+ jQuery("#hms_get_premium").click(function(){
1597	jQuery(".motech_premium_box").slideToggle(200);
1598	});
1599	+
1600	+ jQuery(".motech_premium_cancel span").click(function(){
1601	+ jQuery(".motech_premium_box").slideUp(200, function() {
1602	+ // Animation complete.
1603	+ jQuery("#green_ribbon").hide();
1604	+ });
1605	+
1606	+ });
1607	jQuery(".how_to_redeem").click(function(){
1608	jQuery(".redeem_info").slideToggle(200);
1609	});
1610	+
1611	+ jQuery("body").on('click', '.hms_get_premium, .buynowbutton', function(e) {
1612	+ e.preventDefault();
1613	jQuery("html, body").animate({ scrollTop: 0 }, 300, function() {
1614	// Animation complete.
1615	+ jQuery("#green_ribbon").show();
1616	jQuery(".motech_premium_box").slideDown(200);
1617	});
1618	});

1622	</script>
1623	<?php
1624	}
1625	+ }
1626	+

1627
1628	} //end class
1629
1630	$class = new motech_spacer();
1631
1632	+ add_action('init', array($class, 'add_custom_button'));

js/motech-color-picker.js CHANGED Viewed

@@ -1,3 +1,13 @@
             jQuery(document).ready(function($){
-            -
                jQuery('.motech-color-field').wpColorPicker();
             });


1	jQuery(document).ready(function($){
2	+ jQuery('.motech-color-field').wpColorPicker({
3	+ change: function(event, ui) {
4	+ if($(event.target).attr("name").indexOf("motech_spacer_default_bg_color") >= 0){
5	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('background-color',ui.color.toString());
6	+ }else if($(event.target).attr("name").indexOf("motech_spacer_default_border_top_color") >= 0){
7	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('border-top-color',ui.color.toString());
8	+ }else if($(event.target).attr("name").indexOf("motech_spacer_default_border_bottom_color") >= 0){
9	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('border-bottom-color',ui.color.toString());
10	+ }
11	+ }
12	+ });
13	});

js/motech-javascript.js ADDED Viewed

	@@ -0,0 +1,213 @@


1	+ jQuery(document).ready(function($){
2	+
3	+ //console.log(hash);
4	+ //Tabs on click
5	+ $('.nav-tab-wrapper').on('click', 'a', function(e){
6	+ e.preventDefault();
7	+ tabContent = $(this).attr('href');
8	+ $('.nav-tab').removeClass('nav-tab-active');
9	+ //$tabBoxes.addClass('hidden');
10	+ //$currentTab = $($tabContent).toggleClass('hidden');
11	+ $(".mainsection").addClass("hidden");
12	+ $(tabContent+".mainsection").removeClass("hidden");
13	+ $(this).addClass('nav-tab-active');
14	+ if(window.location.hash != tabContent){
15	+ if(history.pushState) {
16	+ history.pushState(null, null, tabContent);
17	+ }
18	+ else {
19	+ location.hash = tabContent;
20	+ }
21	+ //window.location.replace(tabContent);
22	+ }
23	+ if($(this).attr("href")=="#addons"){
24	+ $(".savebutton").hide();
25	+ }else{
26	+ $(".savebutton").show();
27	+ }
28	+ /* if(history.pushState) {
29	+ history.pushState(null, null, $tabContent);
30	+ }
31	+ else {
32	+ location.hash = $tabContent;
33	+ }*/
34	+ })
35	+
36	+ var hash = window.location.hash;
37	+ $('.nav-tab-wrapper a[href="'+hash+'"]').click();
38	+
39	+ $("body").on('click', '.removebutton', function(e) {
40	+ e.preventDefault();
41	+ element = $(this).closest(".addspacerunit.postbox");
42	+ element.fadeOut("fast", function() {
43	+ element.remove();
44	+ if($(".addspacerunit.postbox").length == 0){
45	+ $(".nothinghere").hide().removeClass(".hidden").fadeIn("fast");
46	+ }
47	+ });
48	+ });
49	+
50	+ //perform function when element is clicked
51	+ $('body').on('click', '.motech_spacer_form .postbox .hndle, .motech_spacer_form .postbox .handlediv', function(e) {
52	+ e.preventDefault();
53	+ $(this).closest(".postbox").toggleClass("closed");
54	+ });
55	+
56	+ $('body').on('input change', 'input.addingspacer', function() {
57	+ var newval = jQuery(this).val();
58	+ if(newval==""){
59	+ newval = "Untitled";
60	+ }
61	+ jQuery(this).closest(".addspacerunit.postbox").find(".hndle span").first().text(newval);
62	+ });
63	+
64	+ $('body').on('input change', '.aspacerunit input, .aspacerunit textarea, .aspacerunit select', function() {
65	+ spacerunit = $(this).closest(".aspacerunit");
66	+ motechSpacerPreview.core(spacerunit);
67	+ });
68	+
69	+
70	+
71	+
72	+ //perform function when element is clicked
73	+ jQuery(".newbutton").click(function(){
74	+ $(".nothinghere").fadeOut("fast", function() {
75	+ if($(".addspacerunit").length != 0){
76	+ newspacer = $(".addspacerunit").last().clone();
77	+ }else{
78	+ newspacer = lastspacer.clone();
79	+ }
80	+ newspacer.hide().insertBefore(".newbutton").fadeIn("fast");
81	+ newspacer.find(":input:not(select):not([type=button])").val("").trigger("change");
82	+ newspacer.find(":input").removeAttr("id");
83	+ newspacer.find("input.sheight").val("20");
84	+ newspacer.find("select option").attr('selected', false);
85	+ newspacer.find(".motech_spacer_preview_image_container").remove();
86	+
87	+ newspacer.removeClass("closed");
88	+
89	+ indexelement = $("#motech_spacer_addspacer_index");
90	+ getindex = indexelement.val();
91	+ //console.log(getindex);
92	+ newindex = parseInt(getindex)+1;
93	+ indexelement.val(newindex);
94	+ newspacer.find(".addspacer_id").val(newindex);
95	+ //newspacer.find(".msunit,.msunitmobile").val("px");
96	+ newspacer.find("select").each(
97	+ function() {
98	+ $(this).val($(this).find("option:first").val());
99	+ });
100	+ //$("#target").val($("#target option:first").val());
101	+
102	+
103	+ //set new image pickers to work
104	+ newspacer.find('.wp-picker-input-wrap').each(function(){
105	+ targetinput = $(this).find(".motech-color-field");
106	+ $(this).closest(".wp-picker-container").before(targetinput).remove();
107	+ targetinput.wpColorPicker({
108	+ change: function(event, ui) {
109	+ if($(event.target).attr("name").indexOf("motech_spacer_default_bg_color") >= 0){
110	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('background-color',ui.color.toString());
111	+ }else if($(event.target).attr("name").indexOf("motech_spacer_default_border_top_color") >= 0){
112	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('border-top-color',ui.color.toString());
113	+ }else if($(event.target).attr("name").indexOf("motech_spacer_default_border_bottom_color") >= 0){
114	+ $(event.target).closest(".aspacerunit").find(".spacer_preview").css('border-bottom-color',ui.color.toString());
115	+ }
116	+ }
117	+ });;
118	+ });
119	+
120	+ //set new custom upload to work
121	+ var custom_uploader;
122	+
123	+ newspacer.find('.motech_upload_image_button').click(function(e) {
124	+ e.preventDefault();
125	+
126	+ //select closest image field so if there is more than one the right one will get changed
127	+ image_field = $(this).siblings('.motech_upload_image');
128	+
129	+ //If the uploader object has already been created, reopen the dialog
130	+ if (custom_uploader) {
131	+ custom_uploader.open();
132	+ return;
133	+ }
134	+
135	+ //Extend the wp.media object
136	+ custom_uploader = wp.media.frames.file_frame = wp.media({
137	+ title: 'Choose Image',
138	+ button: {
139	+ text: 'Choose Image'
140	+ },
141	+ multiple: false
142	+ });
143	+
144	+
145	+
146	+ //When a file is selected, grab the URL and set it as the text field's value
147	+ custom_uploader.on('select', function() {
148	+ attachment = custom_uploader.state().get('selection').first().toJSON();
149	+ image_field.val(attachment.url).trigger("change");
150	+ });
151	+
152	+ //Open the uploader dialog
153	+ custom_uploader.open();
154	+
155	+ });
156	+
157	+
158	+
159	+ motechSpacerPreview.core(newspacer);
160	+ var titlename = newspacer.find("input.addingspacer").attr("name");
161	+ var arraykey = titlename.slice(titlename.indexOf('[') +1,titlename.indexOf(']'));
162	+ newkey = parseInt(arraykey)+1;
163	+ //console.log(newkey);
164	+ newspacer.find(":input").each(function () {
165	+ oldname = $(this).attr("name");
166	+ if (typeof oldname !== typeof undefined && oldname !== false) {
167	+ newname = oldname.replace("["+arraykey+"]", "["+newkey+"]");
168	+ $(this).attr("name",newname);
169	+ //console.log($(this).attr("name"));
170	+ }
171	+ });
172	+
173	+
174	+ });
175	+ });
176	+
177	+ lastspacer = $(".addspacerunit").last().clone(); //create a clone of the last spacer during initial load, store it for later...
178	+ if(lastspacer.find("input.addspacer_id").val()==""){ //delete initial add spacer if none exist...
179	+ $(".addspacerunit").last().remove();
180	+ $(".nothinghere").hide().removeClass(".hidden").fadeIn("fast");
181	+ }
182	+
183	+ $(".aspacerunit").each(function () {
184	+ motechSpacerPreview.core($(this));
185	+ });
186	+
187	+
188	+
189	+ });
190	+
191	+ var motechSpacerPreview = {
192	+ hooks : [],
193	+ core : function(spacerElement){
194	+ //spacerElement.css("opacity",".5");
195	+ useheight = spacerElement.find("input[name='motech_spacer_default_height'], input.sheight").first().val();
196	+ useunit = spacerElement.find("select[name='motech_spacer_default_height_unit'], select.msunit").val();
197	+ spacerElement.find(".spacer_preview").attr("style","display: block; clear: both; height: 0px;");
198	+ if(useheight > 0) {
199	+ spacerElement.find(".spacer_preview").css({ 'padding-top' : useheight+useunit, 'margin-top' : '' });
200	+ }else if(useheight < 0){
201	+ spacerElement.find(".spacer_preview").css({ 'margin-top' : useheight+useunit, 'padding-top' : '' });
202	+ }else{
203	+ spacerElement.find(".spacer_preview").css({ 'margin-top' : '', 'padding-top' : '' });
204	+ }
205	+ for (i = 0; i < this.hooks.length; i++) {
206	+ this.hooks[i](spacerElement); //send the spacer preview element to the callback function.
207	+ }
208	+ usestyle = spacerElement.find("textarea[name='motech_spacer_spacer_style'], textarea.msstyle").val();
209	+ currentstyle = spacerElement.find(".spacer_preview").attr("style");
210	+ spacerElement.find(".spacer_preview").attr("style",currentstyle+usestyle);
211	+
212	+ }
213	+ }

js/spacer_imageupload.js CHANGED Viewed

	@@ -30,7 +30,7 @@ jQuery(document).ready(function($){
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


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).trigger("change");
34	});
35
36	//Open the uploader dialog

readme.txt CHANGED Viewed

	@@ -2,29 +2,30 @@
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.3
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
	@@ -44,18 +45,34 @@ 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="20px"].
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="20px"]. Change 20px 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
	@@ -63,6 +80,12 @@ Here's an example of how you could apply this:
63
64	== Changelog ==
65






66	= 2.0.3 =
67	* Added dividers on settings page to group the config options logically.
68	* Text internationalized so the plugin can easily by translated into other languages.
	@@ -86,5 +109,5 @@ Here's an example of how you could apply this:
86
87	== Upgrade Notice ==
88
89	- = 2.0.3 =
90	- New: ~~Dividers~~ on ~~the~~ ~~settings~~ ~~page~~ ~~group~~ ~~the~~ ~~config~~ ~~options~~ ~~logically.~~ ~~Plugin~~ ~~internationalized~~ and ~~added~~ ~~translations~~ in ~~Spanish~~ and ~~Chinese~~.


2	Contributors: clevelandwebdeveloper
3	Donate link: http://www.clevelandwebdeveloper.com/wordpress-plugins/donate.php
4	Tags: spacer, spacing, line space
5	+ Requires at least: 3.5
6	Tested up to: 4.4
7	+ Stable tag: 3.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	+ Via the Spacer Settings page, you can create an arsenal of additional spacers and sectional breaks to have at your disposal as you lay out your pages. The Spacers that you build can be added into your posts and pages with the spacer button in the WYSIWYG visual editor (see screenshots).
18	+
19	+ Spacer is also compatible with WordPress Multisite.
20	+
21	+ <h3>New in Version 3.0</h3>
22
23	<ul>
24	+ <li>Create an <strong>unlimited</strong> amount of spacers, dividers, and section break presets. Give your new Spacers names and save them for later.</li>
25	+ <li>Live preview tool as you build your Spacers.</li>
26	+ <li>Choose which Spacer you want to add via the spacer button in the WYSIWYG visual editor.</li>
27	</ul>
28



29	== Installation ==
30
31	1. From WP admin > Plugins > Add New

45
46	= How do I add a spacer to a page/post? =
47
48	+ Press the spacer button in WYSIWYG visual editor, then choose which spacer you want to add (see screenshot). This will add a shortcode [spacer height="20px"]. If you choose a custom Spacer, it will add something like [spacer height="40px" id="19"]
49
50	= How do I manually set the spacer height on individual spacers? =
51
52	+ After you add a spacer via the spacer button in WYSIWYG visual editor, you can change the height in the shortcode. For example, let's say you start off with the shortcode [spacer height="20px"]. Change 20px 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.
53
54	= How do I manually edit the height, mobile height, classes, and inline style on individual spacers? =
55	Here's an example of how you could apply this:
56	<pre>[spacer height="30px" mheight="0px" class="myspacer" style="background-color:red;"]</pre>
57
58	+ = How do I create additional Spacers =
59	+
60	+ Settings > Spacer > Add Spacers (top tab) > New Spacer
61	+
62	+ = How do I give my Spacer a background color? =
63	+
64	+ Try adding something like <code>background:gray;</code> to the Spacer's Style setting.
65	+
66	+ = I'm trying to create a divider, but the space above the divider is much more than the space below it. What can I do? =
67	+
68	+ Try adding <code>margin-bottom: 25px;</code> to the Spacer's Style setting.
69	+
70	== Screenshots ==
71
72	+ 1. Live preview tool
73	+ 1. Create an arsenal of spacers and sectional breaks to have at your disposal as you lay out your pages.
74	+ 1. When writing your posts and pages, you can choose which Spacer you want to add via the Spacer button.
75	+ 1. Showcasing some examples of Spacers and sectional breaks you can create.
76	1. Spacer Button
77	1. Setting the spacer height
78	1. Spacer height: 35px

80
81	== Changelog ==
82
83	+ = 3.0 =
84	+ * You can now create an arsenal of additional spacers and sectional breaks to have at your disposal as you lay out your pages.
85	+ * Give your new Spacers names and save them for later.
86	+ * Use the new live preview tool to help visualize the Spacer as you build it.
87	+ * When writing your posts and pages, you can choose which Spacer you want to add via the Spacer button.
88	+
89	= 2.0.3 =
90	* Added dividers on settings page to group the config options logically.
91	* Text internationalized so the plugin can easily by translated into other languages.

109
110	== Upgrade Notice ==
111
112	+ = 3.0 =
113	+ New: You can now create an unlimited amount of spacers, dividers, and section breaks! Give them names and save them for later. Put them to good use as your style your posts and pages. Oh yeah, you also get a live preview tool to help visualize the Spacers as you build them. Enjoy!