diff --git a/css/customizer.css b/css/customizer.css index 6d406bd..f2fd009 100644 --- a/css/customizer.css +++ b/css/customizer.css @@ -105,17 +105,21 @@ input[type="number"]:focus { display: block; clear: both; } + .text_radio_button_control .radio-buttons { display: inline-block; border: 1px solid #f9f9fe; } + .text_radio_button_control .radio-button-label { cursor: pointer; float: left; } + .text_radio_button_control .radio-button-label > input { display: none; } + .text_radio_button_control .radio-button-label span { cursor: pointer; font-weight: 500; @@ -125,14 +129,17 @@ input[type="number"]:focus { padding: 5px 15px; display: inline-block; } + .text_radio_button_control .radio-button-label span:hover { background-color: rgba(255, 255, 255, .2); color: #2885bb; } + .text_radio_button_control .radio-button-label > input:checked + span { background-color: #2084bd; color: #fff; } + .text_radio_button_control .radio-button-label > input:checked + span:hover { color: #fff; } @@ -143,10 +150,12 @@ input[type="number"]:focus { .image_radio_button_control .radio-button-label > input { display: none; } + .image_radio_button_control .radio-button-label > img { cursor: pointer; border: 3px solid #ddd; } + .image_radio_button_control .radio-button-label > input:checked + img { border: 3px solid #2885bb; } @@ -157,93 +166,200 @@ input[type="number"]:focus { .image_checkbox_control .checkbox-label > input { display: none; } + .image_checkbox_control .checkbox-label > img { cursor: pointer; border: 3px solid #ddd; } + .image_checkbox_control .checkbox-label > input:checked + img { border: 3px solid #2885bb; } +/* ========================================================================== + Pill Checkboxes + ========================================================================== */ +.pill_checkbox_control .checkbox-label > input { + display: none; +} + +.pill_checkbox_control .checkbox-label > .sortable-pill-title { + box-sizing: border-box; + cursor: pointer; + background-color: #ddd; + padding: 5px 15px; + border-radius: 20px; + font-size: 1rem; + display: inline-block; + margin-bottom: 5px +} + +.pill_checkbox_control .sortable .checkbox-label > .sortable-pill-title { + cursor: move; +} + +.pill_checkbox_control .sortable.fullwidth_pills .checkbox-label > .sortable-pill-title { + cursor: pointer; +} + +.pill_checkbox_control .checkbox-label > input:checked + .sortable-pill-title { + background-color: #2084bd; + color: #fff; +} + +.pill_checkbox_control .checkbox-label > input:checked + .sortable-pill-title:before { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "dashicons"; + font-weight: normal; + font-size: 24px; + content: "\f147"; + margin-left: -10px; + vertical-align: bottom; +} + +.pill_checkbox_control .fullwidth_pills .checkbox-label > .sortable-pill-title { + width: 100%; + border-radius: 0; +} + +.pill_checkbox_control .sortable.fullwidth_pills .checkbox-label > .sortable-pill-title { + width: 90%; +} + +.pill-ui-state-highlight { + display: inline-block; + padding: 5px 15px; + border-radius: 20px; + font-size: 1rem; + border: 1px dotted #2084bd; + margin-bottom: 5px; + height: 16px; +} + +.pill_checkbox_control .sortable_pills .pill-ui-state-highlight { + width: 50px; + border-radius: 20px; +} + +.pill_checkbox_control .sortable_pills.fullwidth_pills .pill-ui-state-highlight { + width: 90%; + border-radius: 0; +} + +.pill_checkbox_control .dashicons-sort { + margin: 5px 0 0 1px; + color: #d4d4d4; + cursor: move; +} + +.pill_checkbox_control .dashicons-sort:hover { + color: #a7a7a7; +} + +.pill_checkbox_control .sortable_pills.fullwidth_pills .ui-sortable-helper { + width: calc(100% - 25px) !important; +} + /* ========================================================================== Slider ========================================================================== */ .slider-custom-control { margin-bottom: 30px; } + .slider-custom-control input[type=number]::-webkit-inner-spin-button, .slider-custom-control input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } + .slider-custom-control input[type=number] { -moz-appearance: textfield; } + .slider-custom-control .customize-control-title { display: inline-block; } + .slider-custom-control input[type=number] { text-align: right; width: 50px; float: right; } + .slider-custom-control .slider { width: 85%; float: left; margin: 20px 0 10px; } + .slider-custom-control .slider-reset { float: right; cursor: pointer; } + .slider-custom-control .slider-value { border: none; text-align: right; width: 50px; margin-right: 5px; } + .slider-custom-control .slider-value, .slider-custom-control .slider-unit { float: right; } + .slider-custom-control .ui-widget.ui-widget-content { border: 1px solid #f4f4f4; } + .slider-custom-control .ui-corner-all, .slider-custom-control .ui-corner-bottom, .slider-custom-control .ui-corner-right, .slider-custom-control .ui-corner-br { border-bottom-right-radius: 3px; } + .slider-custom-control .ui-corner-all, .slider-custom-control .ui-corner-bottom, .slider-custom-control .ui-corner-left, .slider-custom-control .ui-corner-bl { border-bottom-left-radius: 3px; } + .slider-custom-control .ui-corner-all, .slider-custom-control .ui-corner-top, .slider-custom-control .ui-corner-right, .slider-custom-control .ui-corner-tr { border-top-right-radius: 3px; } + .slider-custom-control .ui-corner-all, .slider-custom-control .ui-corner-top, .slider-custom-control .ui-corner-left, .slider-custom-control .ui-corner-tl { border-top-left-radius: 3px; } + .slider-custom-control .ui-widget-content { background: #f4f4f4 none repeat scroll 0 0; color: #333; } + .slider-custom-control .ui-slider-horizontal { height: 3px; } + .slider-custom-control .ui-slider { position: relative; text-align: left; } + .slider-custom-control .ui-state-default, .slider-custom-control .ui-widget-content .ui-state-default, .slider-custom-control .ui-widget-header .ui-state-default, @@ -255,11 +371,13 @@ input[type="number"]:focus { color: #454545; font-weight: normal; } + .slider-custom-control .ui-slider-horizontal .ui-slider-handle { margin-left: -7px; top: -7px; border-radius: 50%; } + .slider-custom-control .ui-slider .ui-slider-handle { cursor: pointer; height: 14px; @@ -267,11 +385,13 @@ input[type="number"]:focus { width: 14px; z-index: 2; } + .slider-custom-control .dashicons-image-rotate { margin-top: 10px; color: #d4d4d4; size: 16px; } + .slider-custom-control .dashicons-image-rotate:hover { color: #a7a7a7; } @@ -373,34 +493,42 @@ input[type="number"]:focus { margin: 0; padding: 0; } + .sortable input[type="text"] { margin: 5px 5px 5px 0; width: 80%; } + .sortable div { cursor: move; } + .customize-control-sortable-repeater-delete { color: #d4d4d4; } + .customize-control-sortable-repeater-delete:hover { color: #f00; } + .customize-control-sortable-repeater-delete .dashicons-no-alt { text-decoration: none; margin: 8px 0 0 0; font-weight: 600; } + .customize-control-sortable-repeater-delete:active, .customize-control-sortable-repeater-delete:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } + .repeater .dashicons-sort { margin: 8px 5px 0 5px; color: #d4d4d4; } + .repeater .dashicons-sort:hover { color: #a7a7a7; } @@ -415,6 +543,7 @@ input[type="number"]:focus { padding: 10px 5px 5px 0; cursor: pointer; } + .accordion-icon-toggle { font-size: 18px; margin-left: 5px; @@ -424,6 +553,7 @@ input[type="number"]:focus { -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } + .single-accordion-toggle-rotate .accordion-icon-toggle { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-0.5); -webkit-transform: rotate(-45deg); @@ -433,13 +563,16 @@ input[type="number"]:focus { transform: rotate(-45deg); display: inline-block; } + .single-accordion { display: none; } + .single-accordion ul { margin: 0; padding: 0; } + .single-accordion li { background-color: #e4e4e4; color: #888; @@ -449,6 +582,7 @@ input[type="number"]:focus { margin: 5px; text-align: center; } + .single-accordion li i { margin-left: 5px; } @@ -536,7 +670,6 @@ input[type="number"]:focus { line-height: 27px; margin-left: -14px; } - .alpha-color-picker-container .ui-slider-handle.show-opacity { font-size: 12px; } @@ -585,18 +718,11 @@ input[type="number"]:focus { ========================================================================== */ .customize-control-color .wp-color-result, .customize-control-alpha-color .wp-color-result { - border: none; box-shadow: none; } -.customize-control-color .wp-color-result:after, -.customize-control-alpha-color .wp-color-result:after { - border: none; -} - .customize-control-color .wp-color-result .wp-color-result-text, .customize-control-alpha-color .wp-color-result .wp-color-result-text { - line-height: 24px; border-left: none; } @@ -618,12 +744,8 @@ input[type="number"]:focus { WPColorPicker Alpha Color Picker ========================================================================== */ .customize-control-wpcolorpicker-alpha-color .wp-color-result { - border: none; box-shadow: none; } -.customize-control-wpcolorpicker-alpha-color .wp-color-result { - border: none; -} .customize-control-wpcolorpicker-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker { float: left; @@ -631,7 +753,6 @@ input[type="number"]:focus { } .customize-control-wpcolorpicker-alpha-color .wp-color-result .wp-color-result-text { - line-height: 24px; border-left: none; } @@ -649,6 +770,7 @@ input[type="number"]:focus { #customize-theme-controls #accordion-section-upsell_section { display: block !important; } + #customize-theme-controls .upsell-section-title { font-size: 14px; border-bottom: 1px solid #ddd; @@ -664,6 +786,7 @@ input[type="number"]:focus { -ms-user-select: none; user-select: none; } + #customize-theme-controls .upsell-section-title::after { position: absolute; top: 12px; @@ -677,6 +800,7 @@ input[type="number"]:focus { -moz-osx-font-smoothing: grayscale; text-decoration: none !important; } + #customize-theme-controls .upsell-section-title a { display: block; padding: 12px 15px 15px; diff --git a/functions.php b/functions.php index c4f67c4..31b7c7f 100644 --- a/functions.php +++ b/functions.php @@ -94,7 +94,7 @@ function skyrocket_generate_social_urls() { * Return an unordered list of linked social media icons, based on the urls provided in the Customizer Sortable Repeater * This is a sample function to display some social icons on your site. * This sample function is also used to show how you can call a PHP function to refresh the customizer preview. - * Add the following to header.php if you want to see the sample social icons displayed in the customizer preview and your theme. + * Add the following code to header.php if you want to see the sample social icons displayed in the customizer preview and your theme. * Before any social icons display, you'll also need to add the relevent URL's to the Header Navigation > Social Icons section in the Customizer. *
* @@ -225,6 +225,10 @@ function skyrocket_generate_defaults() { 'sample_single_accordion' => '', 'sample_alpha_color' => 'rgba(209,0,55,0.7)', 'sample_wpcolorpicker_alpha_color' => 'rgba(55,55,55,0.5)', + 'sample_wpcolorpicker_alpha_color2' => 'rgba(33,33,33,0.8)', + 'sample_pill_checkbox' => 'tiger,elephant,hippo', + 'sample_pill_checkbox2' => 'captainmarvel,msmarvel,squirrelgirl', + 'sample_pill_checkbox3' => 'author,categories,comments', 'sample_simple_notice' => '', 'sample_dropdown_select2_control_single' => 'vic', 'sample_dropdown_select2_control_multi' => 'Antarctica/McMurdo,Australia/Melbourne,Australia/Broken_Hill', diff --git a/inc/custom-controls.php b/inc/custom-controls.php index a2e459d..b835834 100644 --- a/inc/custom-controls.php +++ b/inc/custom-controls.php @@ -42,47 +42,47 @@ protected function get_skyrocket_resource_url() { } /** - * Image Check Box Custom Control + * Image Checkbox Custom Control * * @author Anthony Hortin * @license http://www.gnu.org/licenses/gpl-2.0.html * @link https://github.com/maddisondesigns */ class Skyrocket_Image_Checkbox_Custom_Control extends Skyrocket_Custom_Control { - /** - * The type of control being rendered - */ - public $type = 'image_checkbox'; - /** - * Enqueue our scripts and styles - */ - public function enqueue() { - wp_enqueue_style( 'skyrocket-custom-controls-css', $this->get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); - } - /** - * Render the control in the customizer - */ - public function render_content() { - ?> -
- label ) ) { ?> - label ); ?> - - description ) ) { ?> - description ); ?> - + /** + * The type of control being rendered + */ + public $type = 'image_checkbox'; + /** + * Enqueue our scripts and styles + */ + public function enqueue() { + wp_enqueue_style( 'skyrocket-custom-controls-css', $this->get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); + } + /** + * Render the control in the customizer + */ + public function render_content() { + ?> +
+ label ) ) { ?> + label ); ?> + + description ) ) { ?> + description ); ?> + value() ) ); ?> link(); ?> /> - choices as $key => $value ) { ?> - - -
- choices as $key => $value ) { ?> + + +
+ get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); - } - /** - * Render the control in the customizer - */ - public function render_content() { - ?> -
- label ) ) { ?> - label ); ?> - - description ) ) { ?> - description ); ?> - + /** + * The type of control being rendered + */ + public $type = 'text_radio_button'; + /** + * Enqueue our scripts and styles + */ + public function enqueue() { + wp_enqueue_style( 'skyrocket-custom-controls-css', $this->get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); + } + /** + * Render the control in the customizer + */ + public function render_content() { + ?> +
+ label ) ) { ?> + label ); ?> + + description ) ) { ?> + description ); ?> +
choices as $key => $value ) { ?> - - + +
-
- + get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); - } + } /** * Render the control in the customizer */ - public function render_content() { - ?> + public function render_content() { + ?>
label ) ) { ?> label ); ?> @@ -166,9 +166,9 @@ public function render_content() {
- description ) ) { echo '
    '; - foreach ( $this->description as $key => $value ) { + foreach ( $this->description as $key => $value ) { echo '
  • ' . $key . wp_kses( $value, $allowed_html ) . '
    • '; } echo '
'; @@ -361,8 +361,8 @@ class Skyrocket_Sortable_Repeater_Custom_Control extends Skyrocket_Custom_Contro */ public $type = 'sortable_repeater'; /** - * Button labels - */ + * Button labels + */ public $button_labels = array(); /** * Constructor @@ -388,7 +388,7 @@ public function enqueue() { */ public function render_content() { ?> -
+
label ) ) { ?> label ); ?> @@ -396,7 +396,7 @@ public function render_content() { description ); ?> link(); ?> /> -
+
@@ -486,8 +486,8 @@ public function render_content() { else { echo ''; } - } - ?> + } + ?>
- * @license http://www.gnu.org/licenses/gpl-3.0.html - * @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker - */ + * Alpha Color Picker Custom Control + * + * @author Braad Martin + * @license http://www.gnu.org/licenses/gpl-3.0.html + * @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker + */ class Skyrocket_Customize_Alpha_Color_Control extends Skyrocket_Custom_Control { /** * The type of control being rendered @@ -865,8 +865,8 @@ public function render_content() { * Props @kallookoo for WPColorPicker script with Alpha Channel support * * @author Sergio - * @license http://www.gnu.org/licenses/gpl-3.0.html - * @link https://github.com/kallookoo/wp-color-picker-alpha + * @license http://www.gnu.org/licenses/gpl-3.0.html + * @link https://github.com/kallookoo/wp-color-picker-alpha */ class Skyrocket_Alpha_Color_Control extends Skyrocket_Custom_Control { /** @@ -874,12 +874,12 @@ class Skyrocket_Alpha_Color_Control extends Skyrocket_Custom_Control { */ public $type = 'wpcolorpicker-alpha-color'; /** - * ColorPicker Attributes - */ + * ColorPicker Attributes + */ public $attributes = ""; /** - * Color palette defaults - */ + * Color palette defaults + */ public $defaultPalette = array( '#000000', '#ffffff', @@ -920,7 +920,7 @@ public function to_json() { */ public function render_content() { ?> -
+
label ) ) { ?> label ); ?> @@ -933,6 +933,75 @@ public function render_content() { } } + /** + * Sortable Pill Checkbox Custom Control + * + * @author Anthony Hortin + * @license http://www.gnu.org/licenses/gpl-2.0.html + * @link https://github.com/maddisondesigns + */ + class Skyrocket_Pill_Checkbox_Custom_Control extends Skyrocket_Custom_Control { + /** + * The type of control being rendered + */ + public $type = 'pill_checkbox'; + /** + * Define whether the pills can be sorted using drag 'n drop. Either false or true. Default = false + */ + private $sortable = false; + /** + * The width of the pills. Each pill can be auto width or full width. Default = false + */ + private $fullwidth = false; + /** + * Constructor + */ + public function __construct( $manager, $id, $args = array(), $options = array() ) { + parent::__construct( $manager, $id, $args ); + // Check if these pills are sortable + if ( isset( $this->input_attrs['sortable'] ) && $this->input_attrs['sortable'] ) { + $this->sortable = true; + } + // Check if the pills should be full width + if ( isset( $this->input_attrs['fullwidth'] ) && $this->input_attrs['fullwidth'] ) { + $this->fullwidth = true; + } + } /** + * Enqueue our scripts and styles + */ + public function enqueue() { + wp_enqueue_style( 'skyrocket-custom-controls-css', $this->get_skyrocket_resource_url() . 'css/customizer.css', array(), '1.0', 'all' ); + } + /** + * Render the control in the customizer + */ + public function render_content() { + ?> +
+ label ) ) { ?> + label ); ?> + + description ) ) { ?> + description ); ?> + + value() ) ); ?> + link(); ?> /> +
+ choices as $key => $value ) { ?> + + +
+
+ manager->get_control( $setting->id )->choices; + $choices = $setting->manager->get_control( $setting->id )->choices; if ( array_key_exists( $input, $choices ) ) { return $input; @@ -1135,7 +1204,7 @@ function skyrocket_in_range( $input, $min, $max ){ if ( $input > $max ) { $input = $max; } - return $input; + return $input; } } diff --git a/inc/customizer.php b/inc/customizer.php index 48fc813..f4dbcc9 100644 --- a/inc/customizer.php +++ b/inc/customizer.php @@ -689,7 +689,7 @@ public function skyrocket_register_sample_custom_controls( $wp_customize ) { // Another Test of WPColorPicker Alpha Color Picker Control $wp_customize->add_setting( 'sample_wpcolorpicker_alpha_color2', array( - 'default' => $this->defaults['sample_wpcolorpicker_alpha_color'], + 'default' => $this->defaults['sample_wpcolorpicker_alpha_color2'], 'transport' => 'refresh', 'sanitize_callback' => 'skyrocket_hex_rgba_sanitization' ) @@ -715,6 +715,91 @@ public function skyrocket_register_sample_custom_controls( $wp_customize ) { ) ) ); + // Test of Pill Checkbox Custom Control + $wp_customize->add_setting( 'sample_pill_checkbox', + array( + 'default' => $this->defaults['sample_pill_checkbox'], + 'transport' => 'refresh', + 'sanitize_callback' => 'skyrocket_text_sanitization' + ) + ); + $wp_customize->add_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox', + array( + 'label' => __( 'Pill Checkbox Control', 'skyrocket' ), + 'description' => esc_html__( 'This is a sample Pill Checkbox Control', 'skyrocket' ), + 'section' => 'sample_custom_controls_section', + 'input_attrs' => array( + 'sortable' => false, + 'fullwidth' => false, + ), + 'choices' => array( + 'tiger' => __( 'Tiger', 'skyrocket' ), + 'lion' => __( 'Lion', 'skyrocket' ), + 'giraffe' => __( 'Giraffe', 'skyrocket' ), + 'elephant' => __( 'Elephant', 'skyrocket' ), + 'hippo' => __( 'Hippo', 'skyrocket' ), + 'rhino' => __( 'Rhino', 'skyrocket' ), + ) + ) + ) ); + + // Test of Pill Checkbox Custom Control + $wp_customize->add_setting( 'sample_pill_checkbox2', + array( + 'default' => $this->defaults['sample_pill_checkbox2'], + 'transport' => 'refresh', + 'sanitize_callback' => 'skyrocket_text_sanitization' + ) + ); + $wp_customize->add_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox2', + array( + 'label' => __( 'Pill Checkbox Control', 'skyrocket' ), + 'description' => esc_html__( 'This is a sample Sortable Pill Checkbox Control', 'skyrocket' ), + 'section' => 'sample_custom_controls_section', + 'input_attrs' => array( + 'sortable' => true, + 'fullwidth' => false, + ), + 'choices' => array( + 'captainamerica' => __( 'Captain America', 'skyrocket' ), + 'ironman' => __( 'Iron Man', 'skyrocket' ), + 'captainmarvel' => __( 'Captain Marvel', 'skyrocket' ), + 'msmarvel' => __( 'Ms. Marvel', 'skyrocket' ), + 'Jessicajones' => __( 'Jessica Jones', 'skyrocket' ), + 'squirrelgirl' => __( 'Squirrel Girl', 'skyrocket' ), + 'blackwidow' => __( 'Black Widow', 'skyrocket' ), + 'hulk' => __( 'Hulk', 'skyrocket' ), + ) + ) + ) ); + + // Test of Pill Checkbox Custom Control + $wp_customize->add_setting( 'sample_pill_checkbox3', + array( + 'default' => $this->defaults['sample_pill_checkbox3'], + 'transport' => 'refresh', + 'sanitize_callback' => 'skyrocket_text_sanitization' + ) + ); + $wp_customize->add_control( new Skyrocket_Pill_Checkbox_Custom_Control( $wp_customize, 'sample_pill_checkbox3', + array( + 'label' => __( 'Pill Checkbox Control', 'skyrocket' ), + 'description' => esc_html__( 'This is a sample Sortable Fullwidth Pill Checkbox Control', 'skyrocket' ), + 'section' => 'sample_custom_controls_section', + 'input_attrs' => array( + 'sortable' => true, + 'fullwidth' => true, + ), + 'choices' => array( + 'date' => __( 'Date', 'skyrocket' ), + 'author' => __( 'Author', 'skyrocket' ), + 'categories' => __( 'Categories', 'skyrocket' ), + 'tags' => __( 'Tags', 'skyrocket' ), + 'comments' => __( 'Comments', 'skyrocket' ), + ) + ) + ) ); + // Test of Simple Notice control $wp_customize->add_setting( 'sample_simple_notice', array( diff --git a/js/customizer.js b/js/customizer.js index 3d0f46c..5c2f4bf 100644 --- a/js/customizer.js +++ b/js/customizer.js @@ -29,14 +29,14 @@ jQuery( document ).ready(function($) { }); // Make our Repeater fields sortable - $(this).find('.sortable').sortable({ + $(this).find('.sortable_repeater.sortable').sortable({ update: function(event, ui) { skyrocketGetAllInputs($(this).parent()); } }); // Remove item starting from it's parent element - $('.sortable').on('click', '.customize-control-sortable-repeater-delete', function(event) { + $('.sortable_repeater.sortable').on('click', '.customize-control-sortable-repeater-delete', function(event) { event.preventDefault(); var numItems = $(this).parent().parent().find('.repeater').length; @@ -61,12 +61,12 @@ jQuery( document ).ready(function($) { }); // Refresh our hidden field if any fields change - $('.sortable').change(function() { + $('.sortable_repeater.sortable').change(function() { skyrocketGetAllInputs($(this).parent()); }) // Add https:// to the start of the URL if it doesn't have it - $('.sortable').on('blur', '.repeater-input', function() { + $('.sortable_repeater.sortable').on('blur', '.repeater-input', function() { var url = $(this); var val = url.val(); if(val && !val.match(/^.+:\/\/.*/)) { @@ -171,7 +171,7 @@ jQuery( document ).ready(function($) { }); /** - * Image Check Box Custom Control + * Image Checkbox Custom Control * * @author Anthony Hortin * @license http://www.gnu.org/licenses/gpl-2.0.html @@ -179,22 +179,49 @@ jQuery( document ).ready(function($) { */ $('.multi-image-checkbox').on('change', function () { - getAllCheckboxes($(this).parent().parent()); + skyrocketGetAllImageCheckboxes($(this).parent().parent()); }); // Get the values from the checkboxes and add to our hidden field - function getAllCheckboxes($element) { + function skyrocketGetAllImageCheckboxes($element) { var inputValues = $element.find('.multi-image-checkbox').map(function() { if( $(this).is(':checked') ) { return $(this).val(); - // } else { - // return ''; } }).toArray(); // Important! Make sure to trigger change event so Customizer knows it has to save the field $element.find('.customize-control-multi-image-checkbox').val(inputValues).trigger('change'); } + /** + * Pill Checkbox Custom Control + * + * @author Anthony Hortin + * @license http://www.gnu.org/licenses/gpl-2.0.html + * @link https://github.com/maddisondesigns + */ + + $( ".pill_checkbox_control .sortable" ).sortable({ + placeholder: "pill-ui-state-highlight", + update: function( event, ui ) { + skyrocketGetAllPillCheckboxes($(this).parent()); + } + }); + + $('.pill_checkbox_control .sortable-pill-checkbox').on('change', function () { + skyrocketGetAllPillCheckboxes($(this).parent().parent().parent()); + }); + + // Get the values from the checkboxes and add to our hidden field + function skyrocketGetAllPillCheckboxes($element) { + var inputValues = $element.find('.sortable-pill-checkbox').map(function() { + if( $(this).is(':checked') ) { + return $(this).val(); + } + }).toArray(); + $element.find('.customize-control-sortable-pill-checkbox').val(inputValues).trigger('change'); + } + /** * Dropdown Select2 Custom Control * diff --git a/js/wp-color-picker-alpha.js b/js/wp-color-picker-alpha.js index b089912..aaeb7b0 100644 --- a/js/wp-color-picker-alpha.js +++ b/js/wp-color-picker-alpha.js @@ -8,4 +8,4 @@ * https://github.com/kallookoo/wp-color-picker-alpha * Licensed under the GPLv2 license. */ -!function(t){if(!t.wp.wpColorPicker.prototype._hasAlpha){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",r='
',e='
',i='',a=void 0!==wpColorPickerL10n.current;if(a)var n='';else{n='';var l="",s=''}Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_hasAlpha:!0,_create:function(){if(t.support.iris){var p=this,c=p.element;if(t.extend(p.options,c.data()),"hue"===p.options.type)return p._createHueOnly();p.close=t.proxy(p.close,p),p.initialValue=c.val(),c.addClass("wp-color-picker"),a?(c.hide().wrap(e),p.wrap=c.parent(),p.toggler=t(n).insertBefore(c).css({backgroundColor:p.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),p.pickerContainer=t(r).insertAfter(c),p.button=t(i).addClass("hidden")):(c.parent("label").length||(c.wrap(l),p.wrappingLabelText=t(s).insertBefore(c).text(wpColorPickerL10n.defaultLabel)),p.wrappingLabel=c.parent(),p.wrappingLabel.wrap(e),p.wrap=p.wrappingLabel.parent(),p.toggler=t(n).insertBefore(p.wrappingLabel).css({backgroundColor:p.initialValue}),p.toggler.find(".wp-color-result-text").text(wpColorPickerL10n.pick),p.pickerContainer=t(r).insertAfter(p.wrappingLabel),p.button=t(i)),p.options.defaultColor?(p.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString),a||p.button.attr("aria-label",wpColorPickerL10n.defaultAriaLabel)):(p.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),a||p.button.attr("aria-label",wpColorPickerL10n.clearAriaLabel)),a?c.wrap('').after(p.button):(p.wrappingLabel.wrap('
',e='
',i='',a=void 0!==wpColorPickerL10n.current;if(a)var n='';else{n='';var l="",s=''}Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_hasAlpha:!0,_create:function(){if(t.support.iris){var p=this,c=p.element;if(t.extend(p.options,c.data()),"hue"===p.options.type)return p._createHueOnly();p.close=t.proxy(p.close,p),p.initialValue=c.val(),c.addClass("wp-color-picker"),a?(c.hide().wrap(e),p.wrap=c.parent(),p.toggler=t(n).insertBefore(c).css({backgroundColor:p.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),p.pickerContainer=t(r).insertAfter(c),p.button=t(i).addClass("hidden")):(c.parent("label").length||(c.wrap(l),p.wrappingLabelText=t(s).insertBefore(c).text(wpColorPickerL10n.defaultLabel)),p.wrappingLabel=c.parent(),p.wrappingLabel.wrap(e),p.wrap=p.wrappingLabel.parent(),p.toggler=t(n).insertBefore(p.wrappingLabel).css({backgroundColor:p.initialValue}),p.toggler.find(".wp-color-result-text").text(wpColorPickerL10n.pick),p.pickerContainer=t(r).insertAfter(p.wrappingLabel),p.button=t(i)),p.options.defaultColor?(p.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString),a||p.button.attr("aria-label",wpColorPickerL10n.defaultAriaLabel)):(p.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),a||p.button.attr("aria-label",wpColorPickerL10n.clearAriaLabel)),a?c.wrap('').after(p.button):(p.wrappingLabel.wrap('