Skip to content

Instantly share code, notes, and snippets.

@artikus11

artikus11/custom-control.css

Last active October 29, 2018 09:41
Show Gist options
  • Save artikus11/6d4f67952f75266266c1894a3cf2c789 to your computer and use it in GitHub Desktop.
Save artikus11/6d4f67952f75266266c1894a3cf2c789 to your computer and use it in GitHub Desktop.
Download ZIP
Кастомный контрол для добавления слайдера картинок в кастомайзер
Raw
custom-control.css
/* ==========================================================================
Slider Images
========================================================================== */
.repeat_block .dashicons.dashicons-no-alt:hover{
color: red;
}
.repeatable {
margin-bottom: 7px;
counter-reset: items;
}
.repeat_block {
background: #f8f8f8;
margin-bottom: 10px;
padding: 3px 7px;
position: relative;
border: 1px solid #d1d1d1;
box-sizing: border-box;
}
.repeat_block {
counter-increment: items;
}
.repeat_block .repeat_title:after{
content: ' ' counter(items);
}
.repeat_block textarea {
width: 100%;
}
.repeat_block i.dashicons {
color: #fff;
position: absolute;
top: -1px;
right: 0;
padding: 6px;
cursor: pointer;
}
.repeat_block .toggle_block i.dashicons {
right: 32px;
}
.repeat_block.toggled .repeat_title {
margin-bottom: -3px;
}
.repeat_block .dashicons-arrow-down-alt2,
.repeat_block .dashicons-arrow-up-alt2,
.repeat_block .dashicons.dashicons-no-alt {
background: transparent;
color: #fff;
}
.repeat_block .dashicons-arrow-down-alt2:hover,
.repeat_block .dashicons-arrow-up-alt2:hover,
.repeat_block .dashicons.dashicons-no-alt:hover{
color: #7c7c7c;
}
.repeat_block .repeat_title {
cursor: move;
margin-top: -3px;
margin-left: -7px;
background: #d1d1d1;
padding: 5px 7px 7px;
width: 100%;
margin-bottom: 3px;
}
.repeat_block .img_prev {
margin: 3px 0;
}
.repeat-item-col{
margin: 7px 0;
}
Raw
custom-control.js
jQuery(document).ready(function ($) {
/**
*
* R E P E A T A B L E S L I D E R bloks
*
* ______________________________________________________________________________ */
var $slide_box = $(".repeatable"),
$slide_items = $(".repeat_block");
$slide_box.sortable();
$slide_box.disableSelection();
$slide_box.on("sortstop", function (event, ui) {
console.log(this);
art_update_repeatable_list(this);
});
$slide_items.find('input[data-name="url"]').on('change', function (e) {
art_update_repeatable_list(this);
});
$slide_items.find('textarea[data-name="title"]').on('change', function (e) {
art_update_repeatable_list(this);
});
$slide_items.find('input[data-name="link"]').on('change', function (e) {
art_update_repeatable_list(this);
});
$slide_items.find('textarea[data-name="text"]').on('change', function (e) {
art_update_repeatable_list(this);
});
// update joined value
function art_update_repeatable_list(el) {
// console.log(el);
var $box = ( $(el).hasClass('repeatable') ) ? $(el) : $(el).parents('.repeatable'),
$all_items = $box.find('.repeat_block'),
val = [];
// console.log( $box );
$all_items.each(function () {
var val_url = $(this).find('input[data-name="url"]').val(),
val_title = $(this).find('textarea[data-name="title"]').val(),
val_link = $(this).find('input[data-name="link"]').val(),
val_text = $(this).find('textarea[data-name="text"]').val();
val.push({
url: ( val_url ) ? val_url : '',
title: ( val_title ) ? val_title : '',
link: ( val_link ) ? val_link : '',
text: ( val_text ) ? val_text : ''
});
});
var encoded = JSON.stringify(val, "", 4);
$box.siblings('input.repeatable_value').val(encoded).trigger('change');
// console.log('after = ' + $box.siblings('input.repeatable_value').val());
}
// choose images
$('.slider_upload_image').click(function (e) {
var l = 'Upload',
s = "Select";
e.preventDefault();
var img_url = $(this).prev(),
image = wp.media({
title: l,
multiple: false,
button: {text: s}
}).open()
.on('select', function (e) {
var uploaded_image = image.state().get('selection').first();
var image_url = uploaded_image.toJSON().url;
$(img_url).prev().html('<img src="' + image_url + '" alt="" />');
$(img_url).val(image_url);
// console.log( $(img_url).parents('.repeatable') );
art_update_repeatable_list( $(img_url).parents('.repeatable') );
});
});
// add slide
$('.repeat_block_add').click(function () {
var $box = $(this).parent().siblings('.repeatable'),
cloned = $box.find('.repeat_block').eq(0).clone(true);
// clear fields
$(cloned).find('input[type=text], input[type=hidden], textarea').each(function () {
$(this).val('');
});
$(cloned).find('.img_prev').html('');
$(cloned).find('.remove_block').on('click', remove_function);
// toggle
$(cloned).find('.toggle_block i').removeClass('dashicons-arrow-down-alt2');
$(cloned).find('.toggle_block i').addClass('dashicons-arrow-up-alt2');
$(cloned).find('.repeat-item-col').show();
$(cloned).appendTo($box);
art_update_repeatable_list( $box );
// console.log('ACTION: repeat_block_add');
});
// remove slide
$('.remove_block').bind('click', remove_function);
function remove_function() {
var iam = $(this).parents('.repeat_block'), //closest('.repeat_block'),
$others = $(iam).siblings();
if ($others.length >= 1) {
$(this).parent('.repeat_block').remove();
}
else {
$(iam).find('input[type=text], input[type=hidden] textarea').each(function () {
$(this).val('');
});
$(iam).find('.img_prev').html('');
}
art_update_repeatable_list( $others.eq(0) );
}
$('.toggle_block').on('click', function () {
$(this).find('i.dashicons').toggleClass('dashicons-arrow-up-alt2');
$(this).find('i.dashicons').toggleClass('dashicons-arrow-down-alt2');
$(this).parents('.repeat_block').toggleClass('toggled');
$(this).parents('.repeat_block').find('.repeat-item-col').toggle();
});
});
Raw
custom-control.php
<?php
if ( class_exists( 'WP_Customize_Control' ) ) {
/**
* Class Art_Images_Slider_Custom_Control
*
* @since 1.0.0
*
*/
class Art_Images_Slider_Custom_Control extends WP_Customize_Control {
public $type = 'slider_images';
/**
* Scripts for this control
*/
public function enqueue() {
/**
* !Внимание! Обязательно изменить пути к файлам скрипта и стилей
*/
wp_enqueue_style( 'slider-controls-css', get_stylesheet_directory_uri() . '/assets/css/custom-control.css', null );
wp_enqueue_script( 'slider-controls-js', get_stylesheet_directory_uri() . '/assets/js/custom-control.js', array(
'jquery',
'jquery-ui-droppable',
'jquery-ui-draggable',
'jquery-ui-sortable',
), null, true );
wp_enqueue_media();
}
/**
* HTML
*/
public function render_content() {
if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php endif;
if ( ! empty( $this->description ) ) : ?>
<span class="description customize-control-description"><?php echo $this->description; ?></span>
<?php endif;
$items = $this->value();
if ( ! is_array( $this->value() ) ) {
$items = json_decode( $this->value() );
}
if ( empty( $items ) ) {
$items = array( array( 'url' => '', 'title' => '', 'link' => '', 'text' => '' ) );
}
echo '<div class="repeatable">';
foreach ( $items as $pos => $block ) {
?>
<div class="repeat_block">
<div class="repeat_title">Слайд</div>
<div class="remove_block" title="Удалить слайд">
<i class="dashicons dashicons-no-alt"></i>
</div>
<div class="toggle_block" title="Свернуть слайд">
<i class="dashicons dashicons-arrow-up-alt2"></i>
</div>
<?php foreach ( $block as $key => $value ) {
$label = 'Заголовок';
switch ( $key ) {
case 'title':
?>
<div class="repeat-item-col">
<label>
<?php echo $label; ?>: <textarea data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" rows="1"><?php echo $value; ?></textarea>
</label>
</div>
<?php
break;
case 'url':
$img_prev = ( $value ) ? '<img src="' . $value . '" alt="slide image">' : '';
$label = 'Изображение';
?>
<div class="repeat-item-col">
<label>
<?php echo $label; ?>:
<div class='img_prev'><?php echo $img_prev; ?></div>
<input data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" type="hidden" value='<?php echo $value; ?>'> <input type='button'
class='button slider_upload_image'
value='Загрузить изображение'/> </label>
</div>
<?php
break;
case 'link':
$label = 'Ссылка';
?>
<div class="repeat-item-col">
<label>
<?php echo $label; ?>: <input data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" type="text" value='<?php echo $value; ?>'> </label>
</div>
<?php
break;
case 'text':
$label = 'Описание';
?>
<div class='repeat-item-col textarea-desc'>
<label>
<?php echo $label; ?>: <textarea rows="3" data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>"><?php echo $value; ?></textarea>
</label>
</div>
<?php
break;
}
}
echo "</div>";
} ?>
</div> <p><a class='button repeat_block_add'>Добавить слайд</a></p> <input type="hidden" <?php $this->link(); ?>
value="<?php echo esc_attr( $this->value() ); ?>" class="repeatable_value"/>
<?php
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment