302 lines
12 KiB
PHP
302 lines
12 KiB
PHP
<?php
|
|
|
|
class BlockStrap_Widget_Scroll_Top extends WP_Super_Duper
|
|
{
|
|
|
|
public $arguments;
|
|
|
|
|
|
/**
|
|
* Sets up the widgets name etc
|
|
*/
|
|
public function __construct()
|
|
{
|
|
$options = [
|
|
'textdomain' => 'blockstrap',
|
|
'output_types' => [
|
|
'block',
|
|
'shortcode',
|
|
],
|
|
'block-icon' => 'fas fa-arrow-up',
|
|
'block-category' => 'layout',
|
|
'block-keywords' => "['back','scroll','top']",
|
|
'block-wrap' => '',
|
|
'block-supports' => ['customClassName' => false],
|
|
'block-edit-returnx' => "el('span', wp.blockEditor.useBlockProps({
|
|
dangerouslySetInnerHTML: {__html: onChangeContent()},
|
|
style: {'minHeight': '30px'},
|
|
className: '',
|
|
}))",
|
|
'class_name' => __CLASS__,
|
|
'base_id' => 'bs_scroll_top',
|
|
'name' => __('BS > Scroll Top', 'blockstrap-page-builder-blocks'),
|
|
'widget_ops' => [
|
|
'classname' => 'bs-scroll-top',
|
|
'description' => esc_html__('A button for scrolling the website back tot he top of the page.', 'blockstrap-page-builder-blocks'),
|
|
],
|
|
'example' => false,
|
|
'no_wrap' => true,
|
|
'block_group_tabs' => [
|
|
// 'content' => [
|
|
// 'groups' => [ __('Home Link', 'blockstrap-page-builder-blocks') ],
|
|
// 'tab' => [
|
|
// 'title' => __('Content', 'blockstrap-page-builder-blocks'),
|
|
// 'key' => 'bs_tab_content',
|
|
// 'tabs_open' => true,
|
|
// 'open' => true,
|
|
// 'class' => 'text-center flex-fill d-flex justify-content-center',
|
|
// ],
|
|
// ],
|
|
'styles' => [
|
|
'groups' => [
|
|
__('Background', 'blockstrap-page-builder-blocks'),
|
|
__('Typography', 'blockstrap-page-builder-blocks'),
|
|
],
|
|
'tab' => [
|
|
'title' => __('Styles', 'blockstrap-page-builder-blocks'),
|
|
'key' => 'bs_tab_styles',
|
|
'tabs_open' => true,
|
|
'open' => true,
|
|
'class' => 'text-center flex-fill d-flex justify-content-center',
|
|
],
|
|
],
|
|
'advanced' => [
|
|
'groups' => [
|
|
__('Wrapper Styles', 'blockstrap-page-builder-blocks'),
|
|
__('Advanced', 'blockstrap-page-builder-blocks'),
|
|
],
|
|
'tab' => [
|
|
'title' => __('Advanced', 'blockstrap-page-builder-blocks'),
|
|
'key' => 'bs_tab_advanced',
|
|
'tabs_open' => true,
|
|
'open' => true,
|
|
'class' => 'text-center flex-fill d-flex justify-content-center',
|
|
],
|
|
],
|
|
],
|
|
];
|
|
|
|
parent::__construct($options);
|
|
|
|
}//end __construct()
|
|
|
|
|
|
/**
|
|
* Set the arguments later.
|
|
*
|
|
* @return array
|
|
*/
|
|
public function set_arguments()
|
|
{
|
|
$arguments = [];
|
|
|
|
$arguments['source_auto_notice'] = [
|
|
'type' => 'notice',
|
|
'desc' => __('This should ideally be placed in the site footer so it works on all pages.', 'blockstrap-page-builder-blocks'),
|
|
'status' => 'warning',
|
|
'group' => __('Typography', 'blockstrap-page-builder-blocks'),
|
|
];
|
|
|
|
$arguments['icon_class'] = [
|
|
'type' => 'text',
|
|
'title' => __('Icon Class', 'blockstrap-page-builder-blocks'),
|
|
'desc' => __('Enter a font awesome icon class.', 'blockstrap-page-builder-blocks'),
|
|
'placeholder' => __('fas fa-arrow-up', 'blockstrap-page-builder-blocks'),
|
|
'default' => '',
|
|
'desc_tip' => true,
|
|
'group' => __('Typography', 'blockstrap-page-builder-blocks'),
|
|
];
|
|
|
|
// Typography
|
|
// icon color
|
|
$arguments['color_class'] = array(
|
|
'type' => 'select',
|
|
'title' => __( 'Color', 'blockstrap-page-builder-blocks' ),
|
|
'options' => sd_aui_colors( true , true, true, true ),
|
|
'default' => 'outline-primary',
|
|
'desc_tip' => true,
|
|
'group' => __( 'Typography', 'blockstrap-page-builder-blocks' ),
|
|
);
|
|
|
|
|
|
// margins mobile
|
|
$arguments['mt'] = sd_get_margin_input('mt', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['mr'] = sd_get_margin_input('mr', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['mb'] = sd_get_margin_input('mb', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['ml'] = sd_get_margin_input('ml', [ 'device_type' => 'Mobile' ]);
|
|
|
|
// margins tablet
|
|
$arguments['mt_md'] = sd_get_margin_input('mt', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['mr_md'] = sd_get_margin_input('mr', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['mb_md'] = sd_get_margin_input('mb', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['ml_md'] = sd_get_margin_input('ml', [ 'device_type' => 'Tablet' ]);
|
|
|
|
// margins desktop
|
|
$arguments['mt_lg'] = sd_get_margin_input('mt', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['mr_lg'] = sd_get_margin_input('mr', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['mb_lg'] = sd_get_margin_input('mb', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['ml_lg'] = sd_get_margin_input('ml', [ 'device_type' => 'Desktop' ]);
|
|
|
|
// padding
|
|
$arguments['pt'] = sd_get_padding_input('pt', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['pr'] = sd_get_padding_input('pr', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['pb'] = sd_get_padding_input('pb', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['pl'] = sd_get_padding_input('pl', [ 'device_type' => 'Mobile' ]);
|
|
|
|
// padding tablet
|
|
$arguments['pt_md'] = sd_get_padding_input('pt', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['pr_md'] = sd_get_padding_input('pr', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['pb_md'] = sd_get_padding_input('pb', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['pl_md'] = sd_get_padding_input('pl', [ 'device_type' => 'Tablet' ]);
|
|
|
|
// padding desktop
|
|
$arguments['pt_lg'] = sd_get_padding_input('pt', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['pr_lg'] = sd_get_padding_input('pr', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['pb_lg'] = sd_get_padding_input('pb', [ 'device_type' => 'Desktop' ]);
|
|
$arguments['pl_lg'] = sd_get_padding_input('pl', [ 'device_type' => 'Desktop' ]);
|
|
|
|
// shadow
|
|
$arguments['shadow'] = sd_get_shadow_input('shadow');
|
|
|
|
$arguments['display'] = sd_get_display_input('d', [ 'device_type' => 'Mobile' ]);
|
|
$arguments['display_md'] = sd_get_display_input('d', [ 'device_type' => 'Tablet' ]);
|
|
$arguments['display_lg'] = sd_get_display_input('d', [ 'device_type' => 'Desktop' ]);
|
|
|
|
$arguments['css_class'] = sd_get_class_input();
|
|
|
|
if (function_exists('sd_get_custom_name_input')) {
|
|
$arguments['metadata_name'] = sd_get_custom_name_input();
|
|
}
|
|
|
|
return $arguments;
|
|
|
|
}//end set_arguments()
|
|
|
|
|
|
/**
|
|
* This is the output function for the widget, shortcode and block (front end).
|
|
*
|
|
* @param array $args The arguments values.
|
|
* @param array $widget_args The widget arguments when used.
|
|
* @param string $content The shortcode content argument
|
|
*
|
|
* @return string
|
|
*/
|
|
public function output($args=[], $widget_args=[], $content='')
|
|
{
|
|
global $aui_bs5;
|
|
|
|
$output = '';
|
|
|
|
ob_start();
|
|
$style = $this->is_preview() ? '' : 'display: none !important;';
|
|
$class_btt = $this->is_preview() ? ' d-flex' : ' fixed-bottom';
|
|
$fa_icon = empty( $args['icon_class'] ) ? 'fas fa-arrow-up' : sd_sanitize_html_classes( $args['icon_class'] );
|
|
$color_class = empty( $args['color_class'] ) ? 'outline-primary' : esc_attr( $args['color_class'] );
|
|
$wrap_class = sd_build_aui_class( $args );
|
|
?>
|
|
<div class="btn btn-<?php esc_attr_e( $color_class ); ?> bs-back-to-top p-0 m-0 rounded-circle c-pointer justify-content-center align-items-center <?php esc_attr_e( $class_btt );?> <?php esc_attr_e($wrap_class);?>" style="<?php esc_attr_e( $style ); ?>bottom: 20px;right: 20px;left: auto;width: 50px; height: 50px;z-index: 1000;">
|
|
<svg class="bs-progress-ring position-absolute p-0 m-0" width="50" height="50" style="min-width: 50px;">
|
|
<circle class="bs-progress-ring__circle" style=" transition: stroke-dasharray 0.3s ease-out, stroke-dashoffset 0.3s ease-out;transform: rotate(-90deg);transform-origin: 50% 50%;" stroke="#007bff" stroke-width="2" fill="transparent" r="23" cx="25" cy="25" />
|
|
</svg>
|
|
<i class="<?php esc_attr_e( $fa_icon );?>"></i>
|
|
</div>
|
|
<?php
|
|
|
|
// Extra CSS for admin preview
|
|
if ($this->is_preview()) {
|
|
?>
|
|
<style>
|
|
/* hide the progress */
|
|
.wp-block-blockstrap-blockstrap-widget-scroll-top .bs-progress-ring{
|
|
display: none;
|
|
}
|
|
|
|
/* post/page editor */
|
|
.editor-styles-wrapper .wp-block-blockstrap-blockstrap-widget-scroll-top{
|
|
min-height: 0 !important;
|
|
float: right;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
}
|
|
|
|
/* editor */
|
|
.block-editor-iframe__body .wp-block-blockstrap-blockstrap-widget-scroll-top{
|
|
min-height: 0 !important;
|
|
position: fixed !important;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
}
|
|
</style>
|
|
<?php
|
|
}
|
|
$output .= ob_get_clean();
|
|
|
|
if ($output) {
|
|
add_action( 'wp_footer', array( $this, 'add_js' ) );
|
|
}
|
|
|
|
return $output;
|
|
|
|
}//end output()
|
|
|
|
/**
|
|
* @return void
|
|
*/
|
|
public function add_js() {
|
|
?>
|
|
<script>
|
|
jQuery(document).ready(function(){
|
|
var backToTop = jQuery('.bs-back-to-top');
|
|
var circle = jQuery('.bs-progress-ring__circle').get(0); // Get the native SVG circle element
|
|
|
|
var radius = circle.r.baseVal.value;
|
|
var circumference = radius * 2 * Math.PI;
|
|
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circle.style.strokeDashoffset = `${circumference}`;
|
|
|
|
// Function to update the stroke color based on the button's background color
|
|
function updateStrokeColor() {
|
|
var buttonColor = jQuery('.bs-back-to-top').css('color'); // Fetch the color of the button
|
|
circle.style.stroke = buttonColor; // Set the stroke color of the circle
|
|
}
|
|
|
|
jQuery(window).scroll(function() {
|
|
var scrollPercent = jQuery(window).scrollTop() / (jQuery(document).height() - jQuery(window).height());
|
|
var offset = circumference - scrollPercent * circumference;
|
|
|
|
circle.style.strokeDashoffset = offset;
|
|
updateStrokeColor(); // Update the stroke color on scroll
|
|
|
|
if (jQuery(this).scrollTop() > 50) {
|
|
backToTop.fadeIn().css({"display": "flex"});
|
|
} else {
|
|
backToTop.fadeOut(400, function() {
|
|
// backToTop.attr("style", "display: none !important");
|
|
backToTop.css({"display": "none !important"});
|
|
});
|
|
}
|
|
});
|
|
|
|
backToTop.click(function(e) {
|
|
e.preventDefault();
|
|
jQuery('html, body').animate({scrollTop: 0}, 400);
|
|
});
|
|
|
|
updateStrokeColor(); // Initial color update when the page loads
|
|
});
|
|
</script>
|
|
<?php
|
|
}
|
|
|
|
|
|
}//end class
|
|
|
|
// register it.
|
|
add_action(
|
|
'widgets_init',
|
|
function () {
|
|
register_widget('BlockStrap_Widget_Scroll_Top');
|
|
}
|
|
);
|