├── .gitattributes
├── .gitignore
├── README.md
├── bb-extra-fields.php
├── geocode-field
    ├── README.md
    ├── bb-geocode-field.php
    ├── bb-geocode.css
    └── bb-geocode.js
├── responsive-field
    └── bb-responsive-field.php
├── slider-field
    ├── slider.css
    └── slider_field.php
└── toggle-field
    ├── toggle.css
    ├── toggle_field.js
    └── toggle_field.php


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # Created by https://www.gitignore.io/api/sublimetext
 3 | 
 4 | ### SublimeText ###
 5 | # cache files for sublime text
 6 | *.tmlanguage.cache
 7 | *.tmPreferences.cache
 8 | *.stTheme.cache
 9 | 
10 | # workspace files are user-specific
11 | *.sublime-workspace
12 | 
13 | # project files should be checked into the repository, unless a significant
14 | # proportion of contributors will probably not be using SublimeText
15 | # *.sublime-project
16 | 
17 | # sftp configuration file
18 | sftp-config.json
19 | 
20 | #pdf-field
21 | pdf-field
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | README
  2 | ======
  3 | 
  4 | *What is this repository for?*
  5 | 
  6 | Beaver Builder Extra Fields allows for the use of custom fields in your custom modules. There are currently the following extra fields:
  7 | 
  8 | - toggle field A multi-option button like field that could substitute for yes/no selectboxes or one/two/three options. It has no set constraints on number of options though but make sure it fits on screen.
  9 | 
 10 | - slider-field using the jquery-ui allows for easy creation of sliders with full-range, min-and-up and up-to-max ranges. Can use step-size. see https://jqueryui.com/slider/ for available options.
 11 | 
 12 | - sliderrange-field using the jquery-ui allows for easy creation of sliders with both min and max range. Can use stepsize. see https://jqueryui.com/slider/ for available options.
 13 | 
 14 | 
 15 | Version 1.1
 16 | -------------------
 17 | 
 18 | *How do I get set up?*
 19 | 
 20 | download the zip-file
 21 | go to /plugins/new plugins
 22 | install zip-file
 23 | activate
 24 | or
 25 | 
 26 | upload zip-file contents to wp-contents/plugins/ using a FTP-client
 27 | activate the plugin in the admin-panel
 28 | using the fields
 29 | 
 30 | In custom modules register a module and add the field type as you would any other field, for instance:
 31 | 
 32 | Toggle
 33 | ------
 34 | 
 35 |     'my_favorite_animal'   => array(
 36 |                     'type'          => 'toggle',
 37 |                     'label'         => __( 'Favorite Animal', 'textdomain' ),
 38 |                     'default'       => 'kitten',
 39 |                     'options'       => array(
 40 |                         'cat'           => __( 'Cat', 'textdomain' ),
 41 |                         'unicorn'       => __( 'Unicorn', 'textdomain' ),
 42 |                         'hamster'       => __( 'Hamster', 'textdomain'),
 43 |                     ),
 44 |                     'toggle'        => array (
 45 |                         'cat'       => array (
 46 |                             'fields'    => array ( 'name', 'size' ),
 47 |                         ),
 48 |                         'unicorn'       => array (),
 49 |                         'hamster'       => array (),
 50 |                     ),
 51 |                     'hide'          => array(),
 52 |                     'trigger'       => array(),
 53 |                     'oncolor'       => '#333333',
 54 |                     'offcolor'      => '#d1d1d1',
 55 |                 ),
 56 | 
 57 | Slider
 58 | ------
 59 | 
 60 |     'number_of_unicorns'      => array(
 61 |                     'type'      => 'slider',
 62 |                     'label'     => __( 'Unicorns' , 'textdomain' ),
 63 |                     'settings'  => array (
 64 |                         'min'       => 0,                   // min value for slider
 65 |                         'max'       => 60,              // max value for slider
 66 |                         'value'     => 30,              // default value to use when not set
 67 |                         'range'     => 'min',           // optional: min|max , do not set if no min- or max-range needed
 68 |                         'step'      => 5,                   // optional: step size, default to one
 69 |                         'color'     => '#666666',
 70 |                   ),
 71 |                 ),
 72 | 
 73 | Slider Range
 74 | ------------
 75 | 
 76 |     'number_of_kittens'      => array(
 77 |                   'type'        => 'sliderrange',
 78 |                   'label'       => __( 'Kittens' , 'textdomain' ),
 79 |                   'settings'     => array (
 80 |                       'min'       => 0,     // min value for slider
 81 |                       'max'       => 10,    // max value for slider
 82 |                       'defmin'    => 0,     // default min value
 83 |                       'defmax'    => 10,    // default max value
 84 |                       'value'     => 2,     // default value to use when not set
 85 |                       'step'      => 2,     // step size
 86 |                       'color'     => '#666666',
 87 |                   ),
 88 |                 ),
 89 | 
 90 | Using the returned values
 91 | -------------------------
 92 | **Toggle & Slider field**
 93 | Both Toggle and Slider field return the set value. From the code examples above, you should be able to get the field-value by using the
 94 | 
 95 |     echo 'Your favorite animal is a(n) ' . $settings->my_favorite_animal;
 96 | 
 97 | and
 98 | 
 99 |     echo 'You have a total of ' . $settings->number_of_unicorns . 'unicorns!';
100 | 
101 | **Sliderrange field**
102 | The sliderrange will have 2 values, that you will need to explode in order to get two seperate values.
103 | 
104 |     $values = explode( '|' , $settings->number_of_kittens );
105 |     echo 'having ' . $values[1] . ' kittens is more than having ' . $values[0];
106 | 
107 | 
108 | Dependencies
109 | ------------
110 | 
111 | Since your custom modules will need to be sure to have the custom field available, make sure to test for the existence of the bbExtraFields class at the top of your modules code (somewhere right after the opening php tag. If not, don't register the module and return. it won't show in Beaver Builder until you reactivate the bb-extra-fields plugin.
112 | 
113 |     if ( ! class_exists ( bbExtraFields ) ) { return; }
114 | 
115 | version history
116 | 1.1   removed the geotag field. Updated toggle-field code, sliderrange-field. Fields have fallback default settings.
117 | 1.0   -
118 | 


--------------------------------------------------------------------------------
/bb-extra-fields.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Plugin Name: Beaver Builder Custom Field Types
 4 |  * Plugin URI: http://www.badabing.nl
 5 |  * Description: Custom Field Types for the Beaver Builder Plugin.
 6 |  * Version: 1.1
 7 |  * Author: Badabing
 8 |  * Author URI: http://www.badabing.nl
 9 |  */
10 | 
11 | define( 'BBEXTRA_FIELDS_VERSION' , '1.1' );
12 | define( 'BBEXTRA_FIELDS_DIR', plugin_dir_path( __FILE__ ) );
13 | define( 'BBEXTRA_FIELDS_URL', plugins_url( '/', __FILE__ ) );
14 | 
15 | function BBEXTRA_extra_fields() {
16 | 
17 |   if ( class_exists( 'FLBuilder' ) ) {
18 | 
19 |   	require_once ( 'toggle-field/toggle_field.php' );
20 |   	require_once ( 'slider-field/slider_field.php' );
21 | 
22 |   }
23 | }
24 | 
25 | add_action( 'init', 'BBEXTRA_extra_fields' );
26 | 
27 | // Create a dummy class so we can do a quick test when loading custom modules
28 | // if ( ! class_exists ( bbExtraFields ) ) { return; }
29 | class bbExtraFields { }
30 | 


--------------------------------------------------------------------------------
/geocode-field/README.md:
--------------------------------------------------------------------------------
 1 | README
 2 | 
 3 | WHY USE THE GEOCODE FIELD
 4 | 
 5 | Using the geocode field you can see if your markers will pan out to a location on the map. You can then easily add markers. Each marker is checked on validity each time you open the module.
 6 | 
 7 | HOW TO USE THE GEOCODE-FIELD
 8 | 
 9 | Include the GEOCODE within your module settings as a field
10 | 
11 |     'geocode'     => array(
12 |         'type'      =>"geocode",
13 |         'label'     => __( 'Geocode' , 'textdomain' ),
14 |         'settings'  => array (
15 |             'default' => '',
16 |             'placeholder' => 'enter location',
17 |             'foundcolor'	  => '#060',
18 |             'notfoundcolor' => '#900',
19 |         ),
20 |     ),
21 | 
22 | Button text is handled by the textdomain translation files
23 | 
24 | USING THE SET FIELD-VALUE WITHIN YOUR CODE
25 | 
26 | The Field-value is a uriencoded json value. This means the set data has to be urldecoded first and then json decoded:
27 | 
28 | <?php
29 | 
30 | 	// frontend.php / frontend.js.php // frontend.css.php
31 | 
32 | 	$geocode = ( json_decode( urldecode( $settings->geocode ) ) );
33 | 
34 | 	$address = $geocode->address;
35 | 	$lat = $geocode->marker->lat;
36 | 	$lng = $geocode->marker->lng;
37 | ?>
38 | 
39 | or Using Javascript / jQuery
40 | 
41 | var myValueArray = JSON.parse( decodeURIComponent( '<?php echo $settings->geocode; ?>'' ) );
42 | 
43 | then access them using
44 | 
45 | var address = myValueArray.address;
46 | var lat = myValueArray.marker.lat;
47 | var lng = myValueArray.marker.lng;
48 | 


--------------------------------------------------------------------------------
/geocode-field/bb-geocode-field.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // register scripts that we will use to get the geocode data
 4 | wp_register_script( 'bb_ggmap' ,'https://cdn.rawgit.com/hpneo/gmaps/master/gmaps.js', array ( 'jquery' ), 1 , false );
 5 | wp_register_script( 'bb_gmaps' ,'http://maps.google.com/maps/api/js?sensor=true&.js', array ( 'jquery' ), 1 , false );
 6 | wp_register_style( 'bb_geocodecss' , BBEXTRA_FIELDS_URL . 'geocode-field/bb-geocode.css', false , BBEXTRA_FIELDS_VERSION , 'all' );
 7 | wp_register_script( 'bb_geocodejs' , BBEXTRA_FIELDS_URL . 'geocode-field/bb-geocode.js' , array( 'jquery' ) ,BBEXTRA_FIELDS_VERSION , false );
 8 | // enqueue script and style-files for slider & sliderrange
 9 | add_action( 'wp_enqueue_scripts', 'fl_enqueue_geocode' );
10 | 
11 | // register hook for geocode field
12 | add_action( 'fl_builder_control_geocode', 'fl_geocode_field', 1, 3 );
13 | 
14 | /**
15 |  * Render a geocode field that stores lat and long position when address has been found.
16 |  * These coordinates can be used to place markers on a map by address
17 |  *
18 |  * @param  string $name
19 |  * @param  string $value
20 |  * @param  array $field
21 |  * @return void
22 |  */
23 | function fl_geocode_field ( $name , $value , $field ) {
24 | 	$value = ( !$value ) ? $field[ 'settings' ][ 'default' ] :  $value ;
25 | 	?>
26 | <div class="bb-geocode">
27 | 	<div class="bb-geocode-field">
28 | 		<label class="geocode-label" for="<?php echo 'geo_' . $name . '_address' ;?>" data-field-name="<?php echo $name; ?>">
29 | 		<input type="text" name="" id="<?php echo 'geo_' . $name . '_address' ;?>" class="geo-address" data-field-name="<?php echo $name; ?>" placeholder="<?php echo $field[ 'settings' ][ 'placeholder' ]; ?>" />
30 | 		<input type="button" value="<?php _e( 'get coordinates', 'textdomain' );?>" class="geo-button" data-init-value="<?php _e( 'get coordinates' , 'textdomain'); ?>" data-found-value="<?php _e( 'found it!' , 'textdomain' ); ?>" data-notfound-value="<?php _e( 'not found' , 'textdomain' ); ?>" data-field-name="<?php echo $name; ?>" id="geo_<?php echo $name; ?>_button" />
31 | 		<input type="hidden" id="<?php echo $name; ?>" name="<?php echo $name; ?>" value="<?php echo ($value); ?>" data-field-name="<?php echo $name; ?>" />
32 | 	</div>
33 | </div>
34 | <script>
35 | 	( function ( $ ) {
36 | 
37 | 		$( document ).ready ( function () {
38 | 			// decode and parse field value (need to codeURI to allow for certain characters )
39 | 			if ( $( '#<?php echo $name; ?>' ).val() !== '' ) { GEO._getData ( '<?php echo $name; ?>' );	}
40 | 			// add a delegate for this field to monitor changes and set button color accordingly
41 | 			$( '#geo_<?php echo $name; ?>_address' ).on('change keyup paste', function() { GEO._clearField( $( this ).data('field-name') ); });
42 | 
43 | 		});
44 | 	}) ( jQuery );
45 | </script>
46 | <?php if ( array_key_exists( 'foundcolor' , $field['settings'] ) || array_key_exists( 'notfoundcolor' , $field['settings'] ) ){?>
47 | <style>
48 | <?php if ( array_key_exists( 'foundcolor' , $field['settings'] ) ) {
49 | ?>
50 | input#geo_<?php echo $name; ?>_button.green[type="button"] {
51 | 	background-color: <?php echo $field[ 'settings' ][ 'foundcolor' ]; ?>;
52 | 	color: #fff;
53 | }
54 | <?php }
55 | if ( array_key_exists( 'notfoundcolor' , $field['settings'] ) ) {
56 | ?>
57 | input#geo_<?php echo $name; ?>_button.red[type="button"] {
58 | 	background-color: <?php echo $field[ 'settings' ][ 'notfoundcolor' ]; ?>;
59 | 	color: #fff;
60 | }
61 | <?php } ?>
62 | </style>
63 | <?php }?>
64 | <?php
65 | }
66 | 
67 | function fl_enqueue_geocode () {
68 |     // don't bother enqueueing if builder not active
69 |     if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
70 | 		wp_enqueue_script( 'bb_ggmap' );
71 | 		wp_enqueue_script( 'bb_gmaps' );
72 | 		wp_enqueue_style( 'bb_geocodecss' );
73 | 		wp_enqueue_script( 'bb_geocodejs' );
74 | 	}
75 | }
76 | 


--------------------------------------------------------------------------------
/geocode-field/bb-geocode.css:
--------------------------------------------------------------------------------
 1 | .bb-geocode-field input[type="button"] {
 2 | 	padding:2px 5px;
 3 | 	margin:3px;
 4 | 	float:none;
 5 | 	background-color: #ccc;
 6 | 	border-color: #999;
 7 | }
 8 | 
 9 | .bb-geocode-field input[type="button"]:hover {
10 | 	background-color: #000;
11 | }
12 | input.geo-button.green[type="button"] {
13 | 	background-color: #060;
14 | 	color: #fff;
15 | }
16 | 
17 | input.geo-button.red[type="button"] {
18 | 	background-color: #900;
19 | 	color: #fff;
20 | }
21 | 


--------------------------------------------------------------------------------
/geocode-field/bb-geocode.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Get the Lat Lng Marker location using GMaps geocode
 3 |  * @param  string location [description]
 4 |  * @return {[type]}          [description]
 5 |  */
 6 | 
 7 | 
 8 | ( function ( $ )  {
 9 | 
10 | 	$( document ).ready ( function () {
11 | 		$( 'body' ).delegate( '.geo-button', 'click', function() {
12 | 			GEO._getGeoLocation( $ ( '#geo_' + $( this ).data( 'field-name' ) + '_address' ).val() , $( this ).data( 'field-name' ) );
13 | 		});
14 | 	});
15 | 
16 | 	GEO = {
17 | 		_getGeoLocation : function ( location , fieldname ) {
18 | 			GMaps.geocode ({ address: location,
19 | 				callback: function (results, status) {
20 | 					if (status == 'OK') {
21 | 						latlng = results[0].geometry.location;
22 | 						var marker = { lat:latlng.lat() , lng: latlng.lng() };
23 | 						// remove red, add green class to the button to indicate that it is all good
24 | 						$( '#geo_' + fieldname + '_button' ).removeClass('red').addClass('green').attr( 'value' , $( '#geo_' + fieldname + '_button' ).data( 'found-value' ) );
25 | 
26 | 						var fielddata = { marker: marker , address : location };
27 | 						$( '#' + fieldname ).attr( 'value' , encodeURIComponent( JSON.stringify( fielddata ) ) );
28 | 					} else {
29 | 						console.log ('there was an error getting the location');
30 | 						// remove green, add red class to the button to indicate that it is not good
31 | 						$( '#geo_' + fieldname + '_button' ).removeClass('green').addClass('red').attr( 'value' , $( '#geo_' + fieldname + '_button' ).data( 'notfound-value' ) );
32 | 
33 | 					}
34 | 				}
35 | 			});
36 | 		},
37 | 
38 | 		_getData : function ( fieldname ) {
39 | 				var fielddata = JSON.parse( decodeURIComponent( $( '#'+ fieldname ).val() ) );
40 | 				$( '#geo_'+ fieldname +'_address' ).attr( 'value' , fielddata.address );
41 | 				this._getGeoLocation( fielddata.address , fieldname );
42 | 		},
43 | 
44 | 		_clearField : function ( fieldname ) {
45 | 				var buttonname = '#geo_' + fieldname + '_button';
46 | 				$( buttonname ).removeClass('green').removeClass('red').attr( 'value' , $( buttonname ).data( 'init-value' ) );
47 | 				$( '#'+fieldname ).attr( 'value' , '' );
48 | 		}
49 | 	}
50 | 
51 | } ) ( jQuery );
52 | 


--------------------------------------------------------------------------------
/responsive-field/bb-responsive-field.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // value desktop
 4 | // checkbox
 5 | // 		value middle
 6 | // 		value small
 7 | // check within modules:
 8 | // $global_settings = FLBuilderModel::get_global_settings();
 9 | // bind results to media queries
10 | 
11 | /**
12 |  * set callback for the responsive control field
13 |  */
14 | add_action('fl_builder_control_responsive', 'fl_responsive_field', 1, 3);
15 | 
16 | 
17 | function fl_responsive_field ( $name , $value , $field ) {
18 | 
19 | ?>
20 | <div class="bb-responsive">
21 | 	<div class="bb-responsive-field">
22 | 		<label for="bb-responsive-label" name="<?php echo $name ; ?>" data-field-name="<?php echo $name; ?>">
23 | 		<input name="<?php echo $name; ?>" id="<?php echo $name; ?>" class="bb-responsive-desktop">
24 | 		<input name="<?php echo $name; ?>_isresp" id="<?php echo $name; ?>_isresp" class="bb-responsive-is_resp">
25 | 		<input name="<?php echo $name; ?>_medium" id="<?php echo $name; ?>_medium" class="bb-responsive-medium">
26 | 		<input name="<?php echo $name; ?>_small" id="<?php echo $name; ?>_small" class="bb-responsive-small">
27 | 	</div>
28 | </div>
29 | <?php
30 | 
31 | }
32 | 
33 | 


--------------------------------------------------------------------------------
/slider-field/slider.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .slider-field-flex {
 4 |   display: -webkit-flex;
 5 |   display: -flex;
 6 | }
 7 | .slider-field-flex .flex-item {
 8 |   -webkit-align-items: center;
 9 |           align-items: center;
10 |   -webkit-justify-content: center;
11 |           justify-content: center;
12 | }
13 | .slider-field-flex .slider-value {
14 | 	width:80px;
15 | 	min-width:60px;
16 | 	padding: 0px 5px;
17 | }
18 | 
19 | .slider-field-flex .slider-slider {
20 | 	-webkit-flex: 1;
21 | 			flex: 1;
22 | 			padding-top:4px;
23 | }
24 | 


--------------------------------------------------------------------------------
/slider-field/slider_field.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | wp_register_script( 'jquery_ui_js', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js' , array( 'jquery' ), '1.0.0' );
  4 | wp_register_style( 'jquery_ui_css', 'https://code.jquery.com/ui/jquery-ui-git.css', 0 ,'1.12' , 'all' );
  5 | wp_register_style( 'bb-slider-css', BBEXTRA_FIELDS_URL . 'slider-field/slider.css', array(), '' );
  6 | 
  7 | // enqueue script and style-files for slider & sliderrange
  8 | add_action( 'wp_enqueue_scripts', 'fl_slider_field_assets' );
  9 | 
 10 | // register hook for sliderrange field
 11 | add_action('fl_builder_control_sliderrange', 'fl_sliderrange_field', 1, 3);
 12 | 
 13 | // register hook for slider field
 14 | add_action('fl_builder_control_slider', 'fl_slider_field', 1, 3);
 15 | 
 16 | /**
 17 |  * Render the Slider Range Field
 18 |  *
 19 |  *  * @param  string $name
 20 |  * @param  string $value
 21 |  * @param  array $field
 22 |  * @return void
 23 |  * @example
 24 |  */
 25 | function fl_sliderrange_field ( $name , $value , $field ) {
 26 | 
 27 |   $field = array_merge(
 28 |       array( 'settings' => array(
 29 |         'min' => 0 ,
 30 |         'max' => 10 ,
 31 |         'defmin' => 0 ,
 32 |         'defmax' => 10 ,
 33 |         'value' => '0|10' ,
 34 |         'step' => 1 ,
 35 |         'color' => '#666666'
 36 |       )
 37 |     ) , $field );
 38 | 
 39 | 	if ( sizeof( $value = explode( '|' , $value ) ) !== 2 ) {
 40 |     $value = array ( $field[ 'settings' ][ 'defmin' ], $field[ 'settings' ]['defmax' ] );
 41 |   }
 42 | ?>
 43 | <script>
 44 | ( function( $ ) {
 45 |   $( function() {
 46 |     $( "#slider-range-<?php echo $name ; ?>" ).slider( {
 47 |       range: true,
 48 |       min: <?php echo $field[ 'settings' ][ 'min' ]; ?>,
 49 |       max: <?php echo $field[ 'settings' ][ 'max' ];?>,
 50 |       values: <?php echo ('['. $value[0]. ',' .$value[1] . ']');?> ,
 51 |       <?php if ( $field[ 'settings' ][ 'step' ] != null ) {
 52 |       ?>
 53 |       step: <?php echo $field[ 'settings' ][ 'step' ]; ?>,
 54 |       <?php
 55 |       }
 56 |       ?>
 57 |       slide: function( event, ui ) {
 58 |         $( "#slid<?php echo $name ; ?>" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
 59 |         $( "#<?php echo $name ; ?>" ).val( ui.values[ 0 ] + "|" + ui.values[ 1 ] );
 60 |       },
 61 |     });
 62 |     $( "#slid<?php echo $name ; ?>" ).val( $( "#slider-range-<?php echo $name ; ?>" ).slider( "values", 0 ) + " - " + $( "#slider-range-<?php echo $name ; ?>" ).slider( "values", 1 ) );
 63 |   });
 64 | })(jQuery);
 65 | </script>
 66 | <div class="slider-field">
 67 |   <div class="slider-field-flex">
 68 |     <div class="flex-item slider-value"><input type="text" id="slid<?php echo $name; ?>" readonly style="border:0; color:<?php echo (isset($field['settings']['color']))?$field['settings']['color']:'#f6931f';?>; font-weight:bold;"></div>
 69 |     <div class="flex-item slider-slider"><div id="slider-range-<?php echo $name ; ?>"></div>
 70 |   </div>
 71 |   <input type="hidden" name="<?php echo $name; ?>" id="<?php echo $name; ?>" value="<?php echo $value[0]."|".$value[1];?>">
 72 | </div>
 73 | <?php
 74 | }
 75 | 
 76 | 
 77 | function fl_slider_field ( $name , $value , $field ) {
 78 | 
 79 | 
 80 |   $field = array_merge(
 81 |       array( 'settings' => array(
 82 |         'min' => 0 ,
 83 |         'max' => 10 ,
 84 |         'range' => 'min',
 85 |         'value' => 10 ,
 86 |         'step' => 1 ,
 87 |         'color' => '#666666'
 88 |       )
 89 |     ) , $field );
 90 | 
 91 |   if ( $value==null ) $value = $field[ 'settings' ][ 'value' ];
 92 | 
 93 | ?>
 94 | <script>
 95 | ( function( $ ) {
 96 |   $( function( ) {
 97 |     $( "#slider-<?php echo $name ; ?>" ).slider( {
 98 |       <?php if ( isset($field['settings']['range']) ) echo 'range: "'.$field['settings']['range'].'",' ; ?>
 99 |       min: <?php echo $field[ 'settings' ][ 'min' ];?>,
100 |       max: <?php echo $field[ 'settings' ][ 'max' ];?>,
101 |       value: <?php echo $field['settings']['value']; ?>,
102 |       <?php if ( isset( $field[ 'settings' ][ 'step' ] ) ) { ?>
103 |       step: <?php echo $field[ 'settings' ][ 'step' ]; ?>,
104 |       <?php } ?>
105 |       slide: function( event, ui ) {
106 |         $( "#slid<?php echo $name ; ?>" ).val( ui.value );
107 |         $( "#<?php echo $name ; ?>" ).attr( "value",ui.value );
108 |       },
109 |     } );
110 |     $( "#slid<?php echo $name ; ?>" ).val( $( "#slider-<?php echo $name ; ?>" ).slider( "value" ) );
111 |   } );
112 | } )( jQuery );
113 | </script>
114 | <div class="slider-field">
115 |   <div class="slider-field-flex">
116 |     <div class="flex-item slider-value">
117 |       <input type="text" id="slid<?php echo $name; ?>" readonly style="border:0; color:<?php echo  $field['settings']['color'] ;?>;font-weight:bold;">
118 |     </div>
119 |     <div class="flex-item slider-slider">
120 |       <div id="slider-<?php echo $name ; ?>">
121 |     </div>
122 |   </div>
123 |   <input type="hidden" name="<?php echo $name; ?>" id="<?php echo $name; ?>" value="<?php echo $value;?>">
124 | </div>
125 | <?php
126 | }
127 | 
128 | /**
129 |  * enqueue the registered classes if needed
130 |  * @return void
131 |  */
132 | function fl_slider_field_assets() {
133 |     // don't bother enqueueing if builder not active
134 |     if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
135 |       wp_enqueue_script( "jquery_ui_js" );
136 |       wp_enqueue_style ( "jquery_ui_css" );
137 |       wp_enqueue_style( "bb-slider-css" );
138 |     }
139 | }
140 | 
141 | 


--------------------------------------------------------------------------------
/toggle-field/toggle.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .toggle-field {
 3 |     overflow: hidden;
 4 | }
 5 | .toggle-title {
 6 |   margin-bottom: 6px;
 7 | }
 8 | .toggle-field input {
 9 |   display: none;
10 | }
11 | .toggle-field label {
12 |   float: left;
13 | }
14 | .toggle-field label {
15 |   display: inline-block;
16 |   width: auto;
17 |   color: rgba(0, 0, 0, 0.3);
18 |   font-weight: normal;
19 |   text-align: center;
20 |   text-shadow: none;
21 |   padding: 2px 10px;
22 |   border: 1px solid rgba(0, 0, 0, 0.2);
23 |   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
24 |   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
25 |   -webkit-transition: all 0.1s ease-in-out;
26 |   -moz-transition:    all 0.1s ease-in-out;
27 |   -ms-transition:     all 0.1s ease-in-out;
28 |   -o-transition:      all 0.1s ease-in-out;
29 |   transition:         all 0.1s ease-in-out;
30 | }
31 | .toggle-field label:hover {
32 |     cursor: pointer;
33 | }
34 | .toggle-field input:checked + label {
35 |   -webkit-box-shadow: none;
36 |   box-shadow: none;
37 |   color: rgba(255,255,255,1);
38 | }
39 | .toggle-field label:first-of-type {
40 |   border-radius: 4px 0 0 4px;
41 | }
42 | .toggle-field label:last-of-type {
43 |   border-radius: 0 4px 4px 0;
44 | }
45 | 


--------------------------------------------------------------------------------
/toggle-field/toggle_field.js:
--------------------------------------------------------------------------------
 1 | ( function ( $ ) {
 2 | 
 3 | 	function toggleChanged ( select ) {
 4 | 		//var select  = $(this),
 5 | 			toggle  = select.attr('data-toggle'),
 6 | 			hide    = select.attr('data-hide'),
 7 | 			trigger = select.attr('data-trigger'),
 8 | 			val     = select.val(),
 9 | 			i       = 0,
10 | 			k       = 0;
11 | 
12 | 		// TOGGLE sections, fields or tabs.
13 | 		if(typeof toggle !== 'undefined') {
14 | 
15 | 			toggle = JSON.parse(toggle);
16 | 
17 | 			for(i in toggle) {
18 | 				FLBuilder._settingsSelectToggle(toggle[i].fields, 'hide', '#fl-field-');
19 | 				FLBuilder._settingsSelectToggle(toggle[i].sections, 'hide', '#fl-builder-settings-section-');
20 | 				FLBuilder._settingsSelectToggle(toggle[i].tabs, 'hide', 'a[href*=fl-builder-settings-tab-', ']');
21 | 			}
22 | 
23 | 			if(typeof toggle[val] !== 'undefined') {
24 | 				FLBuilder._settingsSelectToggle(toggle[val].fields, 'show', '#fl-field-');
25 | 				FLBuilder._settingsSelectToggle(toggle[val].sections, 'show', '#fl-builder-settings-section-');
26 | 				FLBuilder._settingsSelectToggle(toggle[val].tabs, 'show', 'a[href*=fl-builder-settings-tab-', ']');
27 | 			}
28 | 		}
29 | 
30 | 		// HIDE sections, fields or tabs.
31 | 		if(typeof hide !== 'undefined') {
32 | 
33 | 			hide = JSON.parse(hide);
34 | 
35 | 			if(typeof hide[val] !== 'undefined') {
36 | 				FLBuilder._settingsSelectToggle(hide[val].fields, 'hide', '#fl-field-');
37 | 				FLBuilder._settingsSelectToggle(hide[val].sections, 'hide', '#fl-builder-settings-section-');
38 | 				FLBuilder._settingsSelectToggle(hide[val].tabs, 'hide', 'a[href*=fl-builder-settings-tab-', ']');
39 | 			}
40 | 		}
41 | 
42 | 		// TRIGGER select inputs.
43 | 		if(typeof trigger !== 'undefined') {
44 | 
45 | 			trigger = JSON.parse(trigger);
46 | 
47 | 			if(typeof trigger[val] !== 'undefined') {
48 | 				if(typeof trigger[val].fields !== 'undefined') {
49 | 					for(i = 0; i < trigger[val].fields.length; i++) {
50 | 						$('#fl-field-' + trigger[val].fields[i]).find('select').trigger('change');
51 | 					}
52 | 				}
53 | 			}
54 | 		}
55 | 	}
56 | 
57 | 	$ ( document ).ready (function () {
58 | 		// make sure the FLBuilder exists
59 | 		if ( typeof FLBuilder != 'object' ) return;
60 | 		// have the radio:checked toggle take place
61 | 		$( 'body' ).delegate( '.fl-builder-settings-fields :radio:checked' , 'change' ,  function () { toggleChanged($(this));  } );
62 | 
63 | 		// toggle fields, tabs, sections when loading the module-settings
64 | 		//$.onCreate( '.fl-lightbox-header' , function () { $( '.fl-lightbox-content .fl-builder-settings-fields :radio:checked' ).each( function ( ) { toggleChanged( $( this ) ); } ); } , true );
65 | 	});
66 | 
67 | 
68 | } )( jQuery );
69 | 


--------------------------------------------------------------------------------
/toggle-field/toggle_field.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * This file is toggle_field.php
  4 |  *
  5 |  * @author Badabing
  6 |  * @package package name
  7 |  * @subpackage Customizations
  8 |  */
  9 | 
 10 | /**
 11 |  * Enqueue styles and scripts for this toggle control field
 12 |  */
 13 | add_action( 'wp_enqueue_scripts', 'sw_enqueue_toggle' );
 14 | 
 15 | /**
 16 |  * set callback for the toggle control field
 17 |  */
 18 | add_action('fl_builder_control_toggle', 'fl_toggle_field_true', 1, 3);
 19 | 
 20 | 
 21 | /**
 22 |  * Render the Toggle Field to the browser
 23 |  *
 24 |  * @param  string $name  unique name of the field
 25 |  * @param  string $value assigned value for $name
 26 |  * @param  array $field settings for field
 27 |  * @return void
 28 |  *
 29 |   * 'line_bar'   => array(
 30 |  *   'type'          => 'toggle',
 31 |  *   'label'         => __( 'Graph Type', 'textdomain' ),
 32 |  *   'default'       => 'Line',
 33 |  *   'options'       => array(
 34 |  *       'Line'      => __( 'Line', 'textdomain' ),
 35 |  *       'Bar'      => __( 'Bar', 'textdomain' ),
 36 |  *       'Radar'     => __( 'Radar', 'textdomain'),
 37 |  *   ),
 38 |  *   'toggle'      => array (
 39 |  *       'Line'      => array (
 40 |  *           'fields'    => array ( 'usebeziers', 'beziercurvetension' ),
 41 |  *       ),
 42 |  *       'Bar'          => array (),
 43 |  *       'Radar'          => array (),
 44 |  *   ),
 45 |  *   'hide'        => array(),
 46 |  *   'trigger'      => array(),
 47 |  *   'oncolor'         => '#333333',
 48 |  *   'offcolor'        => '#d1d1d1',
 49 |  *
 50 |  */
 51 | function fl_toggle_field_true( $name , $value , $field ) {
 52 | 
 53 |   // merge settings with default settings
 54 |   $field = array_merge(
 55 |       array( 'settings' => array(
 56 |         'oncolor' => '#e4e4e4' ,
 57 |         'offcolor' => '#a5dc86' ,
 58 |       )
 59 |     ) , $field );
 60 | 
 61 |   $buttoncount = count($field['options']);
 62 | 
 63 | ?>
 64 | <div class="toggle-field">
 65 |   <style>
 66 |     .toggle-field .<?php echo $name; ?> {
 67 |       background-color: <?php echo $field['offcolor']; ?>;
 68 |     }
 69 |       .toggle-field  .<?php echo $name; ?>:checked + .<?php echo $name; ?> {
 70 |       background-color: <?php echo $field['oncolor']; ?>;
 71 | }
 72 |   </style>
 73 | <?php
 74 | 
 75 |     //if ( array_key_exists( 'options' , $field ) ) {
 76 | 
 77 |   foreach ( $field[ 'options' ] as $key => $option ) {
 78 | 
 79 |     $checked = '';
 80 |     if ( isset( $value ) && $key == $value ) {
 81 |       $checked = 'checked';
 82 |     } elseif ( !isset( $value ) && $key == $field[ 'default' ] ) {
 83 |       $checked = 'checked';
 84 |     }
 85 | 
 86 |     $toggle = isset( $field[ 'toggle' ][ $key ]) ? 'data-toggle=\''. json_encode( $field[ 'toggle' ] ) . '\'' : '';
 87 |     $hide = isset( $field[ 'hide' ][ $key ]) ? 'data-hide="'. json_encode( $field[ 'hide' ] ) . '"' : '';
 88 |     $trigger = isset( $field[ 'trigger' ][ $key ] )? 'data-trigger="'. json_encode( $field[ 'trigger' ] ) . '"' : '';
 89 | 
 90 |     $html  = sprintf( '<input type="radio" class="%s" id="%s" name="%s" value="%s" %s' , $name , $name . '_' . $key , $name , $key , $checked);
 91 |     $html .= sprintf( ' %s %s %s />' , $toggle , $hide , $trigger );
 92 |     $html .= sprintf( '<label class="%s" for="%s">%s</label>' , $name , $name . '_' . $key , $option );
 93 | 
 94 |     echo $html;
 95 |   }
 96 | ?>
 97 | </div>
 98 | <?php
 99 | }
100 | 
101 | /**
102 |  * Enqueue toggle field stylesheet and javascript to handle toggle hide and trigger actions
103 |  *
104 |  * @return void
105 |  */
106 | function sw_enqueue_toggle() {
107 |   if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
108 |   	wp_enqueue_style( 'bbtoggle-css', BBEXTRA_FIELDS_URL . 'toggle-field/toggle.css' , null , BBEXTRA_FIELDS_VERSION , 'all' );
109 |     wp_enqueue_script( 'bbtoggle-js', BBEXTRA_FIELDS_URL . 'toggle-field/toggle_field.js' , null , BBEXTRA_FIELDS_VERSION , true );
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------