improve site layout, add slider plugin
This commit is contained in:
parent
2a962b6a53
commit
22f36c7828
1140
assets/db/dump.sql
1140
assets/db/dump.sql
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457 527.6400146484375"><path d="M65.28 207.3L359 376.9l32.65-18.85v-37.71L97.93 150.75l-32.65 18.84zm163.2 245l65.27-37.68L0 245V131.91L228.48 0 457 131.91v75.38L228.48 75.37l-65.28 37.69L457 282.65v113.08L228.48 527.64 0 395.73v-75.37z" fill="#FFF"/></svg>
|
||||||
|
After Width: | Height: | Size: 310 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '307ac8a38a353c4230a73358bbd4e886');
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,165 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Register superblockslider post type
|
||||||
|
*/
|
||||||
|
function register_superblockslider_post_type() : void {
|
||||||
|
$menu_icon = file_get_contents( plugin_dir_path( __FILE__ ) . '../assets/super-block-slider-icon.svg' );
|
||||||
|
|
||||||
|
$labels = [
|
||||||
|
'name' => _x( 'Super block slider', 'Super block slider', 'superblockslider' ),
|
||||||
|
'singular_name' => _x( 'Super block slider', 'Super block slider', 'superblockslider' ),
|
||||||
|
'menu_name' => __( 'Super block slider', 'superblockslider' ),
|
||||||
|
'name_admin_bar' => __( 'Super block slider', 'superblockslider' ),
|
||||||
|
'archives' => __( 'Super block slider Archives', 'superblockslider' ),
|
||||||
|
'attributes' => __( 'Super block slider Attributes', 'superblockslider' ),
|
||||||
|
'parent_item_colon' => __( 'Parent Super block slider:', 'superblockslider' ),
|
||||||
|
'all_items' => __( 'All slider', 'superblockslider' ),
|
||||||
|
'add_new_item' => __( 'Add New Super block slider', 'superblockslider' ),
|
||||||
|
'add_new' => __( 'Add New Slider', 'superblockslider' ),
|
||||||
|
'new_item' => __( 'New Super block slider', 'superblockslider' ),
|
||||||
|
'edit_item' => __( 'Edit Super block slider', 'superblockslider' ),
|
||||||
|
'update_item' => __( 'Update Super block slider', 'superblockslider' ),
|
||||||
|
'view_item' => __( 'View Super block slider', 'superblockslider' ),
|
||||||
|
'view_items' => __( 'View Super block slider', 'superblockslider' ),
|
||||||
|
];
|
||||||
|
$labels = apply_filters( 'superblockslider', $labels );
|
||||||
|
|
||||||
|
$args = [
|
||||||
|
'label' => __( 'Super block slider', 'superblockslider' ),
|
||||||
|
'description' => __( 'Super block slider for use with shortcode', 'superblockslider' ),
|
||||||
|
'labels' => $labels,
|
||||||
|
'supports' => [
|
||||||
|
'title',
|
||||||
|
'editor',
|
||||||
|
],
|
||||||
|
'hierarchical' => false,
|
||||||
|
'public' => true,
|
||||||
|
'show_ui' => true,
|
||||||
|
'show_in_menu' => true,
|
||||||
|
'menu_position' => 10,
|
||||||
|
'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode( $menu_icon ),
|
||||||
|
'show_in_admin_bar' => true,
|
||||||
|
'show_in_nav_menus' => true,
|
||||||
|
'exclude_from_search' => true,
|
||||||
|
'has_archive' => false,
|
||||||
|
'can_export' => false,
|
||||||
|
'capability_type' => 'page',
|
||||||
|
'show_in_rest' => true,
|
||||||
|
];
|
||||||
|
$args = apply_filters( 'superblockslider', $args );
|
||||||
|
|
||||||
|
register_post_type( 'superblockslider', $args );
|
||||||
|
// flush_rewrite_rules();
|
||||||
|
}
|
||||||
|
add_action( 'init', 'register_superblockslider_post_type', 0 );
|
||||||
|
|
||||||
|
// Define superblockslider shortcode
|
||||||
|
function superblockslider_shortcode($atts) {
|
||||||
|
// Extract the ID from the shortcode attributes
|
||||||
|
$atts = shortcode_atts(array(
|
||||||
|
'id' => '',
|
||||||
|
), $atts);
|
||||||
|
|
||||||
|
// Check if ID is provided
|
||||||
|
if (empty($atts['id'])) {
|
||||||
|
return 'Please provide a post ID.';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retrieve the post using the ID
|
||||||
|
$post = get_post($atts['id']);
|
||||||
|
|
||||||
|
// Check if the post exists
|
||||||
|
if (!$post) {
|
||||||
|
return 'Post not found.';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process shortcodes and Gutenberg blocks in the post content
|
||||||
|
$content = apply_filters('the_content', $post->post_content);
|
||||||
|
return do_shortcode($content);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Register superblockslider shortcode
|
||||||
|
add_shortcode('superblockslider', 'superblockslider_shortcode');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load superblockslider frontend scripts if the post content uses [superblockslider] shortcode.
|
||||||
|
*/
|
||||||
|
function load_shortcode_frontend_scripts() {
|
||||||
|
global $post;
|
||||||
|
if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'superblockslider') ) {
|
||||||
|
wp_enqueue_script('superblockslider');
|
||||||
|
wp_enqueue_style('superblockslider');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action( 'wp_enqueue_scripts', 'load_shortcode_frontend_scripts');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Block-editor mode: Add notice message
|
||||||
|
*/
|
||||||
|
function add_messsage_to_superblockslider_edit_page() {
|
||||||
|
$post_types = array('superblockslider');
|
||||||
|
|
||||||
|
// superblockslider post type edit screen
|
||||||
|
if (in_array(get_current_screen()->post_type, $post_types)) {
|
||||||
|
|
||||||
|
if (is_block_editor_active()) {
|
||||||
|
// Block editor is being used
|
||||||
|
global $post;
|
||||||
|
?>
|
||||||
|
<script>
|
||||||
|
// Wait for the editor to be ready.
|
||||||
|
wp.domReady(function() {
|
||||||
|
setTimeout(() => {
|
||||||
|
/**
|
||||||
|
* Add superblockslider if no block exist
|
||||||
|
*/
|
||||||
|
var editor = wp.data.select('core/block-editor');
|
||||||
|
var isFirstBlock = editor.getBlockCount() === 0;
|
||||||
|
|
||||||
|
if (isFirstBlock) {
|
||||||
|
var superblockslider_block = wp.blocks.createBlock('superblockslider/slider');
|
||||||
|
wp.data.dispatch('core/block-editor').insertBlock(superblockslider_block);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get notice element.
|
||||||
|
var editorElement = document.querySelector('.components-editor-notices__pinned');
|
||||||
|
if (editorElement) {
|
||||||
|
// Insert HTML content in admin notice section.
|
||||||
|
editorElement.insertAdjacentHTML('afterbegin', '<div class="components-notice is-warning"><div class="components-notice__content"><p>This section should only be used if a shortcode is needed for other editors. Super Block Slider can be inserted directly in the block editor.</p><p>Shortcode: <strong>[superblockslider id="' + <?php echo $post->ID; ?> + '"]</strong></p><div class="components-notice__actions"></div></div></div>');
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action('admin_footer', 'add_messsage_to_superblockslider_edit_page');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Classic-editor mode: Error notice if in classic editor mode
|
||||||
|
*/
|
||||||
|
function classic_editor_error_notice() {
|
||||||
|
global $current_screen;
|
||||||
|
$post_types = array('superblockslider');
|
||||||
|
|
||||||
|
// check if classic editor and post type is superblockslider screen and in edit post mode
|
||||||
|
if (!is_block_editor_active() && in_array($current_screen->post_type, $post_types) && $current_screen->base == 'post') {
|
||||||
|
$message = '<p>The block editor is required to create the slider and generate the shortcode to be used with classic or other editors.</p><p>Install <a href="https://wordpress.org/plugins/gutenberg/" target="_new">WordPress\'s block editor</a>, go to Settings > writing and <strong>Allow users to switch editors</strong> click "Yes". a "Switch to block editor" will appear on this page.</p>';
|
||||||
|
echo '<div class="notice notice-error">' . $message . '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action('admin_notices', 'classic_editor_error_notice');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check if using block-editor
|
||||||
|
*/
|
||||||
|
function is_block_editor_active() {
|
||||||
|
global $current_screen;
|
||||||
|
|
||||||
|
if (method_exists($current_screen, 'is_block_editor') && $current_screen->is_block_editor()) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,254 @@
|
||||||
|
=== Super block slider - Responsive image & content slider ===
|
||||||
|
Contributors: Mikemmx
|
||||||
|
Donate link: https://www.paypal.com/paypalme/wpslider
|
||||||
|
Tags: image slider, slider, parallax, content slider, responsive slider
|
||||||
|
Requires at least: 6.3
|
||||||
|
Tested up to: 6.5
|
||||||
|
Stable tag: 2.7.7
|
||||||
|
Requires PHP: 7.0.0
|
||||||
|
License: GPL-2.0-or-later
|
||||||
|
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
|
||||||
|
Lightweight, responsive, image & content slider for block and classic editor.
|
||||||
|
|
||||||
|
== Description ==
|
||||||
|
|
||||||
|
[youtube https://www.youtube.com/watch?v=6c2Rdi4o5MU]
|
||||||
|
<a href="https://superblockslider.com/slider-showcase/" target="_new">Slider examples</a>
|
||||||
|
|
||||||
|
Super Block Slider is a lightweight image & content slider plugin for creating dynamic and engaging sliders.
|
||||||
|
|
||||||
|
= Lightweight =
|
||||||
|
|
||||||
|
Standalone 5KB JavaScript file, optimize for loading speed and performance.
|
||||||
|
|
||||||
|
= Image slider =
|
||||||
|
|
||||||
|
Customize each slide's background image and customize the visual presentation of your sliders.
|
||||||
|
|
||||||
|
= Content slider =
|
||||||
|
|
||||||
|
Utilize any WordPress block in the content area, giving you full control over the slider layout and design.
|
||||||
|
|
||||||
|
= Supports block & classic editor =
|
||||||
|
|
||||||
|
Works for block editor and classic editor(via shortcode. example: [superblockslider id="123"]).
|
||||||
|
|
||||||
|
= Gradient / color overlay =
|
||||||
|
|
||||||
|
Enhance the visual impact of your sliders by applying gradient or solid color overlays, creating an eye-catching backdrop for your content.
|
||||||
|
|
||||||
|
= Responsive slider =
|
||||||
|
|
||||||
|
Set different background images for desktop, tablet, and mobile screen sizes, allowing for optimal visual presentation across various devices.
|
||||||
|
|
||||||
|
= Live Editor Preview =
|
||||||
|
|
||||||
|
Preview your slider's appearance in real-time within the WordPress editor, making it easy to fine-tune and perfect the design before publishing.
|
||||||
|
|
||||||
|
= Touch & mouse drag =
|
||||||
|
|
||||||
|
Supporting both touch and mouse swipe gestures, providing a seamless user experience on touchscreen devices and desktops.
|
||||||
|
|
||||||
|
= Title or Dot Icon Navigation =
|
||||||
|
|
||||||
|
Customize the navigation with title-based navigation or dot icons, allowing your users to easily navigate through your sliders.
|
||||||
|
|
||||||
|
= Parallax Effect =
|
||||||
|
|
||||||
|
Add a visually appealing parallax effect to your slider, this effect creates a captivating scrolling experience by moving the background at a different speed than the foreground content.
|
||||||
|
|
||||||
|
= Adaptive slider height =
|
||||||
|
|
||||||
|
The slider's height adjusts automatically based on the background size, ensuring that your slides are displayed properly.
|
||||||
|
|
||||||
|
= Transition Animations =
|
||||||
|
|
||||||
|
Choose from 20 transition animations to add dynamism and flair to your sliders.
|
||||||
|
|
||||||
|
== Featured highlight ==
|
||||||
|
|
||||||
|
* <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">Slide</a>, <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">fade</a> effect
|
||||||
|
* <a href="https://superblockslider.com/slider-showcase/#adaptive-height" target="_new">Adaptive slider height</a>
|
||||||
|
* Set multiple background image for responsive screen size
|
||||||
|
* <a href="https://superblockslider.com/slider-showcase/#demo" target="_new">Title-based</a> navigation or <a href="https://superblockslider.com/slider-showcase/#transition-efect" target="_new">dot icons</a>
|
||||||
|
* <a href="https://superblockslider.com/slider-showcase/#demo" target="_new">Parallax background effect</a>
|
||||||
|
* 20 slide <a href="https://superblockslider.com/slider-showcase/#transition-animations" target="_new">transition animations
|
||||||
|
* <a href="https://superblockslider.com/slider-showcase/#overlay" target="_new">Gradient or solid color overlay</a>
|
||||||
|
|
||||||
|
= Links =
|
||||||
|
|
||||||
|
<a href="https://superblockslider.com/slider-showcase/" target="_new">Slider examples</a>
|
||||||
|
<a href="https://superblockslider.com/documentations/" target="_new">Documentations</a>
|
||||||
|
|
||||||
|
== Changelog ==
|
||||||
|
|
||||||
|
= 2.7.7 =
|
||||||
|
|
||||||
|
* Fix editor styles: remove global editor styles
|
||||||
|
* clean up invalid registerBlockType parameter
|
||||||
|
|
||||||
|
= 2.7.6 =
|
||||||
|
|
||||||
|
* Fix bug Gutenberg blocks not being process when embeding using shortcode.
|
||||||
|
|
||||||
|
= 2.7.5 =
|
||||||
|
|
||||||
|
* Add load sueprblockslider.js in defer.
|
||||||
|
* Use passive listeners for touchstart, touchmove event.
|
||||||
|
|
||||||
|
= 2.7.3 =
|
||||||
|
|
||||||
|
* Fix WordPress 6.3 gradient crashes, bugs.
|
||||||
|
* Fix animating class
|
||||||
|
|
||||||
|
= 2.7.1 =
|
||||||
|
|
||||||
|
* Add class superblockslider__slide--animating-in, superblockslider__slide--animating-out when slide is animating.
|
||||||
|
|
||||||
|
= 2.7 =
|
||||||
|
|
||||||
|
* Added shortcode support for use in classic editor.
|
||||||
|
|
||||||
|
= 2.6.3 =
|
||||||
|
|
||||||
|
* Fix bug: Frontend autoplay not stopping when it should.
|
||||||
|
|
||||||
|
= 2.6.2 =
|
||||||
|
|
||||||
|
* Fix bug: Overlap timing of transition animate speed timing and autoplay timing.
|
||||||
|
|
||||||
|
= 2.6.1 =
|
||||||
|
|
||||||
|
* Fix bug: Reduce mobile touch sensitivity.
|
||||||
|
|
||||||
|
= 2.6 =
|
||||||
|
|
||||||
|
* Added content overflow options.
|
||||||
|
* Added mouse drag event changes slide
|
||||||
|
* Fix bug: Adaptive height not working in editor when slider is created.
|
||||||
|
* Optimise touch event code
|
||||||
|
* Add 6 more gradients
|
||||||
|
* Add donation link
|
||||||
|
|
||||||
|
= 2.4.7 =
|
||||||
|
|
||||||
|
* Fix Editor description for parallex.
|
||||||
|
* Fix Parallax code.
|
||||||
|
* Fix mobile gesture not stopping autoplay.
|
||||||
|
|
||||||
|
= 2.4.5 =
|
||||||
|
|
||||||
|
* Added "Adaptive slider height".
|
||||||
|
* Fix bug causing slider to disappear if transsition effect is set to "Fade".
|
||||||
|
* Fix bug: GradientPicker component causing crashes on full-site-editing mode.
|
||||||
|
* Fix ful-site-editing errors
|
||||||
|
|
||||||
|
= 2.3.2 =
|
||||||
|
|
||||||
|
* Fix bug: JS defer causes supersliderblock not to run.
|
||||||
|
|
||||||
|
= 2.3.1 =
|
||||||
|
|
||||||
|
* Add Mobile swipe gesture.
|
||||||
|
* Update responsive settings descriptions.
|
||||||
|
|
||||||
|
= 2.2.1 =
|
||||||
|
|
||||||
|
* Fix bug causing crashes if 2 or more slider is created.
|
||||||
|
* Changed editor text and rearange controls.
|
||||||
|
* Lock move control of single slide by default.
|
||||||
|
|
||||||
|
= 2.1.1 =
|
||||||
|
|
||||||
|
* Fix bug - CSS style causes slider arrow to overlaps content.
|
||||||
|
|
||||||
|
= 2.0 =
|
||||||
|
|
||||||
|
* Add custom responsive screen size images option.
|
||||||
|
* Fix bug - Added overflow style to content container.
|
||||||
|
|
||||||
|
= 1.5.5 =
|
||||||
|
|
||||||
|
* Fix bug - Slide index not set correctly if Super slider block is a child block.
|
||||||
|
* Slide title line height style.
|
||||||
|
* Update descriptions in editor.
|
||||||
|
|
||||||
|
= 1.5.4 =
|
||||||
|
|
||||||
|
* Fix parallax effect.
|
||||||
|
* Fix slide title line height in slide editor.
|
||||||
|
* Add src/js/
|
||||||
|
* minor bug fixes.
|
||||||
|
|
||||||
|
= 1.5.3 =
|
||||||
|
|
||||||
|
* Add support for WordPress version 5.9
|
||||||
|
|
||||||
|
= 1.5.2 =
|
||||||
|
|
||||||
|
* fix bug - WordPress version 5.8.1 cause slide index to be undefine.
|
||||||
|
|
||||||
|
= 1.5.1 =
|
||||||
|
|
||||||
|
* fix bug - Editor fade effect : selected slide not visible if child block selected.
|
||||||
|
|
||||||
|
= 1.5 =
|
||||||
|
|
||||||
|
* fix bug - track css transition all
|
||||||
|
|
||||||
|
= 1.4.9 =
|
||||||
|
|
||||||
|
* fix bug - Firefox transition-timing-function.
|
||||||
|
* fix bug - Chrome background image flicker.
|
||||||
|
|
||||||
|
= 1.4.8 =
|
||||||
|
|
||||||
|
* fix bug - fade effect not changing in editor.
|
||||||
|
|
||||||
|
= 1.4.7 =
|
||||||
|
|
||||||
|
* Add Parallax background image
|
||||||
|
|
||||||
|
= 1.3.7 =
|
||||||
|
|
||||||
|
* Add slide link option
|
||||||
|
|
||||||
|
= 1.2.7 =
|
||||||
|
|
||||||
|
* Fix bug - Title indicator to render html.
|
||||||
|
* Fix bug - Title indicator word-wrap.
|
||||||
|
* Fix editor .wp-block max-width css.
|
||||||
|
|
||||||
|
= 1.2.6 =
|
||||||
|
|
||||||
|
* Changed Super block slider category to 'Media' from 'Widgets'.
|
||||||
|
|
||||||
|
= 1.2.5 =
|
||||||
|
|
||||||
|
* Fix bug - initial active slide not correct cause by older versions.
|
||||||
|
|
||||||
|
== Installation ==
|
||||||
|
|
||||||
|
1. Visit **Plugins > Add New**.
|
||||||
|
2. Search for **super block slider**.
|
||||||
|
3. Install and activate the super block slider plugin.
|
||||||
|
|
||||||
|
= Manual installation =
|
||||||
|
|
||||||
|
1. Upload the entire `super-block-slider` folder to the `/wp-content/plugins/` directory.
|
||||||
|
2. Visit **Plugins**.
|
||||||
|
3. Activate super block slider.
|
||||||
|
|
||||||
|
= After activation =
|
||||||
|
|
||||||
|
While in Page/Post edit mode simply add/search for **super block slider**.
|
||||||
|
|
||||||
|
== Screenshots ==
|
||||||
|
|
||||||
|
1. Editor screenshot 1
|
||||||
|
2. Editor screenshot 2
|
||||||
|
3. Editor screenshot 3
|
||||||
|
4. Live results screenshot 4
|
||||||
|
5. Editor screenshot 5
|
||||||
|
6. Editor screenshot 6
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
.wp-block-superblockslider-slider {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.editor-styles-wrapper .wp-block-superblockslider-slider .wp-block {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
.superblockslider__slide {
|
||||||
|
min-width: 100px;
|
||||||
|
min-height: 100px;
|
||||||
|
|
||||||
|
.superblockslider__button--remove {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border: 1px solid;
|
||||||
|
margin: 5px;
|
||||||
|
background-color: rgba(255, 255, 255, .25);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.is-selected, &.is-hovered, &:hover {
|
||||||
|
.superblockslider__button--remove {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.superblockslider__window {
|
||||||
|
width: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
top: 2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.superblockslider__navigation {
|
||||||
|
top: 50%;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.superblockslider__button__navigation {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__buttons {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.superblockslider__button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
button {
|
||||||
|
line-height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rich-text {
|
||||||
|
min-width: 20px;
|
||||||
|
opacity: .5;
|
||||||
|
transition: all .5s;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active .rich-text {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-styles-wrapper .superblockslider__track {
|
||||||
|
|
||||||
|
> .block-editor-inner-blocks {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> .block-editor-block-list__layout {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-blocks {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editor-styles-wrapper div[data-type='superblockslider/slide'] {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
max-width: unset;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.block-editor-inner-blocks {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.components-button.has-icon.has-text.button-full-width {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
/* fade slider */
|
||||||
|
.editor-styles-wrapper div[data-transition-effect='fade'] div[data-type='superblockslider/slide'] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&.superblockslider__slide--active-editor {
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-panel__row {
|
||||||
|
.superblockslider__button.is-secondary {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide__bg > img {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide__image {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.extraLarge .visible--xl,
|
||||||
|
.desktop .visible--lg,
|
||||||
|
.tablet .visible--md,
|
||||||
|
.mobile .visible--sm {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,341 @@
|
||||||
|
"use strict";
|
||||||
|
(function () {
|
||||||
|
document.onreadystatechange = function () {
|
||||||
|
if (document.readyState === 'complete') {
|
||||||
|
superblockslider('.superblockslider');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var superblockslider = function (superblocksliderSlides) {
|
||||||
|
var superblocksliderSlider = document.querySelectorAll(superblocksliderSlides);
|
||||||
|
superblocksliderSlider.forEach(function (slider, index) {
|
||||||
|
var initialActiveSlideAttr = slider.getAttribute('data-initial-active-slide');
|
||||||
|
var loopSlideAttr = slider.getAttribute('data-loop-slide');
|
||||||
|
var autoplayAttr = slider.getAttribute('data-autoplay');
|
||||||
|
var autoplayIntervalAttr = slider.getAttribute('data-autoplay-interval');
|
||||||
|
var slideNavigationAttr = slider.getAttribute('data-slide-navigation');
|
||||||
|
var hoverPauseAttr = slider.getAttribute('data-hover-pause');
|
||||||
|
var transitionEffectAttr = slider.getAttribute('data-transition-effect');
|
||||||
|
var transitionDurationAttr = slider.getAttribute('data-transition-duration');
|
||||||
|
var animationAttr = slider.getAttribute('data-animation');
|
||||||
|
var transitionSpeedAttr = slider.getAttribute('data-transition-speed');
|
||||||
|
var arrowNavigationAttr = slider.getAttribute('data-arrow-navigation');
|
||||||
|
var variableHeightAttr = slider.getAttribute('data-variable-height');
|
||||||
|
var settings = {
|
||||||
|
initialActiveSlide: initialActiveSlideAttr ? parseInt(initialActiveSlideAttr) : 0,
|
||||||
|
loopSlide: loopSlideAttr ? false : true,
|
||||||
|
autoplay: autoplayAttr ? false : true,
|
||||||
|
autoplayInterval: autoplayIntervalAttr ? autoplayIntervalAttr : '1.5s',
|
||||||
|
slideNavigation: slideNavigationAttr ? slideNavigationAttr : 'dots',
|
||||||
|
hoverPause: hoverPauseAttr ? false : true,
|
||||||
|
transitionEffect: transitionEffectAttr ? transitionEffectAttr : 'slide',
|
||||||
|
transitionDuration: transitionDurationAttr ? transitionDurationAttr : '.6s',
|
||||||
|
animation: animationAttr ? animationAttr : 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
|
||||||
|
transitionSpeed: transitionSpeedAttr ? transitionSpeedAttr : '.6s',
|
||||||
|
arrowNavigation: arrowNavigationAttr ? false : true,
|
||||||
|
variableHeight: variableHeightAttr ? true : false,
|
||||||
|
};
|
||||||
|
var currentSlideIndex = settings.initialActiveSlide;
|
||||||
|
var currentSlideId = settings.initialActiveSlide;
|
||||||
|
var previousSlideId = settings.initialActiveSlide;
|
||||||
|
var animating = false;
|
||||||
|
var el_superblockslider__track = slider.querySelector('.superblockslider__track');
|
||||||
|
var el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide');
|
||||||
|
var el_superblockslider__button__previous = slider.querySelector('.superblockslider__button__previous');
|
||||||
|
var el_superblockslider__button__next = slider.querySelector('.superblockslider__button__next');
|
||||||
|
el_superblockslider__track.addEventListener('transitionstart', transitionStart);
|
||||||
|
el_superblockslider__track.addEventListener('transitionend', transitionEnd);
|
||||||
|
var offsetPercent = 100 / el_superblockslider__slides.length;
|
||||||
|
var translateXOffset = currentSlideIndex * offsetPercent;
|
||||||
|
var translateX = "translateX(-" + translateXOffset + "%)";
|
||||||
|
var parallaxSlides = slider.querySelectorAll('.superblockslider__slide[data-parallax="true"]');
|
||||||
|
if (parallaxSlides) {
|
||||||
|
parallaxInit();
|
||||||
|
window.addEventListener('scroll', function (event) {
|
||||||
|
parallaxSlides.forEach(function (parallaxSlide, index) {
|
||||||
|
var parallaxAttribute = parallaxSlide.getAttribute('data-parallax-speed');
|
||||||
|
var el_slide_bg = parallaxSlide.querySelectorAll('.superblockslider__slide__bg')[0];
|
||||||
|
if (parallaxAttribute) {
|
||||||
|
var sliderPositionY = parallaxSlide.getBoundingClientRect().y;
|
||||||
|
if (sliderPositionY <= window.innerHeight && sliderPositionY >= Math.abs(window.innerHeight) * -1) {
|
||||||
|
var parallaxSpeed = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0;
|
||||||
|
var parallaxOffset = (parallaxSpeed) * ((window.innerHeight - sliderPositionY));
|
||||||
|
var totalParallaxOffset = (parallaxSpeed) * ((window.innerHeight));
|
||||||
|
el_slide_bg.style.transform = "translateY(" + (parallaxOffset - totalParallaxOffset) + "px)";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
el_slide_bg.style.transform = "translateY(0px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
window.addEventListener('resize', parallaxInit);
|
||||||
|
}
|
||||||
|
function parallaxInit() {
|
||||||
|
parallaxSlides.forEach(function (slide, index) {
|
||||||
|
var parallaxAttribute = slide.getAttribute('data-parallax-speed');
|
||||||
|
var parallaxSpeed = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0;
|
||||||
|
var sliderBoundingRect = slider.getBoundingClientRect();
|
||||||
|
var sliderPositionY = sliderBoundingRect.y;
|
||||||
|
var sliderHeight = sliderBoundingRect.height;
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var el_slide_bg = slide.querySelectorAll('.superblockslider__slide__bg')[0];
|
||||||
|
var el_slide_bg_img = el_slide_bg.querySelectorAll('img')[0];
|
||||||
|
var imageHeight = (parallaxSpeed * windowHeight / 2) + sliderHeight;
|
||||||
|
el_slide_bg_img.style.height = imageHeight + "px";
|
||||||
|
var totalParallaxOffset = (parallaxSpeed) * ((windowHeight));
|
||||||
|
var parallaxOffset = 0;
|
||||||
|
if (sliderPositionY <= windowHeight && sliderPositionY >= Math.abs(windowHeight) * -1) {
|
||||||
|
parallaxOffset = (parallaxSpeed) * ((windowHeight - sliderPositionY));
|
||||||
|
}
|
||||||
|
el_slide_bg.style.transform = "translateY(" + (parallaxOffset - totalParallaxOffset) + "px)";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var autoplayTime;
|
||||||
|
var autoplayInterval;
|
||||||
|
var autopayToggle;
|
||||||
|
function onMouseOutAutoplay() {
|
||||||
|
autopayToggle = autoplayInterval;
|
||||||
|
}
|
||||||
|
if (settings.autoplay == true) {
|
||||||
|
if (settings.autoplayInterval.indexOf('ms') > 0) {
|
||||||
|
autoplayInterval = parseInt(settings.autoplayInterval.split('ms')[0]);
|
||||||
|
autopayToggle = autoplayInterval;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var seconds = Number(settings.autoplayInterval.split('s')[0]);
|
||||||
|
autoplayInterval = seconds * 1000;
|
||||||
|
autopayToggle = autoplayInterval;
|
||||||
|
}
|
||||||
|
if (typeof autoplayInterval === 'number') {
|
||||||
|
window.requestAnimationFrame(autoplayTimerFrame);
|
||||||
|
if (settings.hoverPause == true) {
|
||||||
|
slider.addEventListener('mouseover', function (event) {
|
||||||
|
autopayToggle = 'pause';
|
||||||
|
});
|
||||||
|
slider.addEventListener('mouseout', onMouseOutAutoplay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function autoplayTimerFrame(timestamp) {
|
||||||
|
if (autopayToggle === 'stop')
|
||||||
|
return;
|
||||||
|
if (autoplayTime === undefined || autopayToggle === 'pause')
|
||||||
|
autoplayTime = timestamp;
|
||||||
|
var elapsed = timestamp - autoplayTime;
|
||||||
|
window.requestAnimationFrame(autoplayTimerFrame);
|
||||||
|
if (elapsed >= autopayToggle) {
|
||||||
|
autoplayTime = timestamp;
|
||||||
|
nextSlide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var el_superblockslider__buttons = slider.querySelectorAll('.superblockslider__button');
|
||||||
|
if (settings.slideNavigation != 'none') {
|
||||||
|
el_superblockslider__buttons.forEach(function (button) {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
if (!animating) {
|
||||||
|
var buttonIdValue = parseInt(button.getAttribute('data-button-id'));
|
||||||
|
animateTrackToSlideId(buttonIdValue, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function animateTrackToSlideId(slideId, toggleAutoplay) {
|
||||||
|
if (toggleAutoplay === void 0) { toggleAutoplay = false; }
|
||||||
|
if (!animating) {
|
||||||
|
if (toggleAutoplay) {
|
||||||
|
slider.removeEventListener('mouseout', onMouseOutAutoplay);
|
||||||
|
autopayToggle = "stop";
|
||||||
|
}
|
||||||
|
if (currentSlideId != slideId) {
|
||||||
|
el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide');
|
||||||
|
var slideIndex_1 = slideId;
|
||||||
|
if (settings.loopSlide == false) {
|
||||||
|
}
|
||||||
|
else if (settings.transitionEffect == 'slide' && settings.loopSlide == true) {
|
||||||
|
if (currentSlideIndex === 0 && el_superblockslider__slides.length > 2) {
|
||||||
|
el_superblockslider__track.style.transition = 'none';
|
||||||
|
var lastSide = el_superblockslider__slides[el_superblockslider__slides.length - 1];
|
||||||
|
el_superblockslider__track.prepend(lastSide);
|
||||||
|
currentSlideIndex = 1;
|
||||||
|
var trackOffset = currentSlideIndex * offsetPercent;
|
||||||
|
translateX = "translateX(-" + trackOffset + "%)";
|
||||||
|
el_superblockslider__track.style.transform = translateX;
|
||||||
|
}
|
||||||
|
else if (currentSlideIndex === el_superblockslider__slides.length - 1) {
|
||||||
|
el_superblockslider__track.style.transition = 'none';
|
||||||
|
currentSlideIndex = el_superblockslider__slides.length - 2;
|
||||||
|
var trackOffset = currentSlideIndex * offsetPercent;
|
||||||
|
translateX = "translateX(-" + trackOffset + "%)";
|
||||||
|
el_superblockslider__track.style.transform = translateX;
|
||||||
|
var firstSlide = el_superblockslider__slides[0];
|
||||||
|
el_superblockslider__track.append(firstSlide);
|
||||||
|
}
|
||||||
|
var slideMatch = slider.querySelectorAll("[data-slide-index=\"" + slideId + "\"]");
|
||||||
|
if (slideMatch[0] && slideMatch[0].parentNode) {
|
||||||
|
var slideMatch_parent_children = slideMatch[0].parentNode.children;
|
||||||
|
var closeSlide = Array.from(slideMatch_parent_children).indexOf(slideMatch[0]);
|
||||||
|
slideIndex_1 = closeSlide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
animate(slideId, slideIndex_1);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function animate(slideId, slideIndex) {
|
||||||
|
if (settings.transitionEffect == 'slide') {
|
||||||
|
el_superblockslider__track.style.transition = "all " + settings.transitionDuration + " " + settings.animation;
|
||||||
|
var trackOffset = slideIndex * offsetPercent;
|
||||||
|
translateX = "translateX(-" + trackOffset + "%)";
|
||||||
|
el_superblockslider__track.style.transform = translateX;
|
||||||
|
currentSlideIndex = slideIndex;
|
||||||
|
currentSlideId = slideId;
|
||||||
|
}
|
||||||
|
else if (settings.transitionEffect == 'fade') {
|
||||||
|
currentSlideIndex = slideIndex;
|
||||||
|
currentSlideId = slideId;
|
||||||
|
transitionEnd();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function transitionStart() {
|
||||||
|
animating = true;
|
||||||
|
if (autopayToggle !== "stop")
|
||||||
|
autopayToggle = "pause";
|
||||||
|
if (settings.transitionEffect == 'slide') {
|
||||||
|
el_superblockslider__track.style.transition = "all " + settings.transitionDuration + " " + settings.animation;
|
||||||
|
}
|
||||||
|
if (settings.variableHeight) {
|
||||||
|
updateSliderHeight();
|
||||||
|
}
|
||||||
|
slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.add('superblockslider__slide--animating-in');
|
||||||
|
slider.querySelector("[data-slide-index=\"" + previousSlideId + "\"]").classList.add('superblockslider__slide--animating-out');
|
||||||
|
}
|
||||||
|
function transitionEnd() {
|
||||||
|
slider.querySelector('.superblockslider__slide--active').classList.remove('superblockslider__slide--active');
|
||||||
|
slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.add('superblockslider__slide--active');
|
||||||
|
if (settings.slideNavigation != 'none') {
|
||||||
|
slider.querySelector('.superblockslider__button--active').classList.remove('superblockslider__button--active');
|
||||||
|
el_superblockslider__buttons[currentSlideId].classList.add('superblockslider__button--active');
|
||||||
|
}
|
||||||
|
animating = false;
|
||||||
|
if (autopayToggle !== "stop")
|
||||||
|
autopayToggle = autoplayInterval;
|
||||||
|
}
|
||||||
|
if (el_superblockslider__button__previous && el_superblockslider__button__next) {
|
||||||
|
el_superblockslider__button__previous.addEventListener('click', function () {
|
||||||
|
prevSlide(null, true);
|
||||||
|
});
|
||||||
|
el_superblockslider__button__next.addEventListener('click', function () {
|
||||||
|
nextSlide(null, true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function prevSlide(event, toggleAutoplay) {
|
||||||
|
removeAnimatingClasses();
|
||||||
|
previousSlideId = currentSlideId;
|
||||||
|
var prevSlideId = currentSlideId - 1;
|
||||||
|
if (prevSlideId < 0) {
|
||||||
|
prevSlideId = el_superblockslider__slides.length - 1;
|
||||||
|
}
|
||||||
|
animateTrackToSlideId(prevSlideId, toggleAutoplay);
|
||||||
|
}
|
||||||
|
function nextSlide(event, toggleAutoplay) {
|
||||||
|
removeAnimatingClasses();
|
||||||
|
previousSlideId = currentSlideId;
|
||||||
|
var nextSlideId = currentSlideId + 1;
|
||||||
|
if (nextSlideId > el_superblockslider__slides.length - 1) {
|
||||||
|
nextSlideId = 0;
|
||||||
|
}
|
||||||
|
animateTrackToSlideId(nextSlideId, toggleAutoplay);
|
||||||
|
}
|
||||||
|
function removeAnimatingClasses() {
|
||||||
|
slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"]").classList.remove('superblockslider__slide--animating-in');
|
||||||
|
slider.querySelector("[data-slide-index=\"" + previousSlideId + "\"]").classList.remove('superblockslider__slide--animating-out');
|
||||||
|
}
|
||||||
|
if (settings.variableHeight) {
|
||||||
|
slider.style.transition = "height ease " + settings.transitionDuration;
|
||||||
|
updateSliderHeight();
|
||||||
|
window.addEventListener('resize', updateSliderHeight);
|
||||||
|
}
|
||||||
|
function updateSliderHeight() {
|
||||||
|
var sliderWidth = slider.offsetWidth;
|
||||||
|
var currentSceenSize = getScreenSize();
|
||||||
|
var currentImage = slider.querySelector("[data-slide-index=\"" + currentSlideId + "\"] img.visible--" + currentSceenSize);
|
||||||
|
if (currentImage) {
|
||||||
|
var imageOriginalWidth = Number(currentImage.getAttribute('width'));
|
||||||
|
var imageOriginalHeight = Number(currentImage.getAttribute('height'));
|
||||||
|
var imageVariableHeight = calculateVariableHeight(imageOriginalWidth, sliderWidth, imageOriginalHeight);
|
||||||
|
slider.style.height = imageVariableHeight + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function calculateVariableHeight(originalWidth, newWidth, originalHeight) {
|
||||||
|
var percentageDifference;
|
||||||
|
if (originalWidth < newWidth) {
|
||||||
|
var widthDifference = newWidth - originalWidth;
|
||||||
|
percentageDifference = widthDifference / originalWidth;
|
||||||
|
return (percentageDifference * originalHeight + originalHeight);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var widthDifference = originalWidth - newWidth;
|
||||||
|
percentageDifference = widthDifference / originalWidth;
|
||||||
|
return (originalHeight - percentageDifference * originalHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getScreenSize() {
|
||||||
|
var windowWidth = window.innerWidth;
|
||||||
|
if (windowWidth > 1280) {
|
||||||
|
return 'xl';
|
||||||
|
}
|
||||||
|
else if (windowWidth < 1280 && windowWidth >= 1024) {
|
||||||
|
return 'lg';
|
||||||
|
}
|
||||||
|
else if (windowWidth < 1024 && windowWidth >= 768) {
|
||||||
|
return 'md';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'sm';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var pressDownX = null;
|
||||||
|
var mouseXtriggerThreshold = 150;
|
||||||
|
slider.addEventListener('mousedown', function (event) {
|
||||||
|
pressDownX = event.pageX;
|
||||||
|
});
|
||||||
|
slider.addEventListener('mouseup', function (event) {
|
||||||
|
var diffX = event.pageX - pressDownX;
|
||||||
|
if (diffX > 0 && diffX < mouseXtriggerThreshold) {
|
||||||
|
nextSlide(null, true);
|
||||||
|
}
|
||||||
|
else if (diffX < 0 && diffX > -mouseXtriggerThreshold) {
|
||||||
|
prevSlide(null, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var touchXtriggerThreshold = 6;
|
||||||
|
slider.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||||
|
slider.addEventListener('touchmove', handleTouchMove, { passive: true });
|
||||||
|
function handleTouchStart(event) {
|
||||||
|
var firstTouch = event.touches[0];
|
||||||
|
pressDownX = firstTouch.clientX;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
function handleTouchMove(event) {
|
||||||
|
if (!pressDownX) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var xUp = event.touches[0].clientX;
|
||||||
|
var xDiff = pressDownX - xUp;
|
||||||
|
if (xDiff > touchXtriggerThreshold) {
|
||||||
|
nextSlide(null, true);
|
||||||
|
autopayToggle = 'stop';
|
||||||
|
}
|
||||||
|
else if (xDiff < -touchXtriggerThreshold) {
|
||||||
|
prevSlide(null, true);
|
||||||
|
autopayToggle = 'stop';
|
||||||
|
}
|
||||||
|
pressDownX = null;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
//# sourceMappingURL=superblockslider.js.map
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,522 @@
|
||||||
|
(() => {
|
||||||
|
document.onreadystatechange = function () {
|
||||||
|
if (document.readyState === 'complete') {
|
||||||
|
superblockslider('.superblockslider')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const superblockslider = (superblocksliderSlides: string)=> {
|
||||||
|
// slides query
|
||||||
|
const superblocksliderSlider = document.querySelectorAll<HTMLElement>(superblocksliderSlides)
|
||||||
|
superblocksliderSlider.forEach((slider, index) => {
|
||||||
|
// load settings
|
||||||
|
|
||||||
|
const initialActiveSlideAttr = slider.getAttribute('data-initial-active-slide')
|
||||||
|
const loopSlideAttr = slider.getAttribute('data-loop-slide')
|
||||||
|
const autoplayAttr = slider.getAttribute('data-autoplay')
|
||||||
|
const autoplayIntervalAttr = slider.getAttribute('data-autoplay-interval')
|
||||||
|
const slideNavigationAttr = slider.getAttribute('data-slide-navigation')
|
||||||
|
const hoverPauseAttr = slider.getAttribute('data-hover-pause')
|
||||||
|
const transitionEffectAttr = slider.getAttribute('data-transition-effect')
|
||||||
|
const transitionDurationAttr = slider.getAttribute('data-transition-duration')
|
||||||
|
const animationAttr = slider.getAttribute('data-animation')
|
||||||
|
|
||||||
|
const transitionSpeedAttr = slider.getAttribute('data-transition-speed')
|
||||||
|
const arrowNavigationAttr = slider.getAttribute('data-arrow-navigation')
|
||||||
|
const variableHeightAttr = slider.getAttribute('data-variable-height')
|
||||||
|
|
||||||
|
const settings: {
|
||||||
|
initialActiveSlide: number;
|
||||||
|
loopSlide: boolean;
|
||||||
|
autoplay: boolean;
|
||||||
|
autoplayInterval: string;
|
||||||
|
slideNavigation: string;
|
||||||
|
hoverPause: boolean;
|
||||||
|
transitionEffect: string;
|
||||||
|
transitionDuration: string;
|
||||||
|
animation: string;
|
||||||
|
|
||||||
|
transitionSpeed: string;
|
||||||
|
arrowNavigation: boolean;
|
||||||
|
variableHeight: boolean;
|
||||||
|
} = {
|
||||||
|
initialActiveSlide: initialActiveSlideAttr ? parseInt(initialActiveSlideAttr!) : 0,
|
||||||
|
loopSlide: loopSlideAttr ? false : true,
|
||||||
|
autoplay: autoplayAttr ? false : true,
|
||||||
|
autoplayInterval: autoplayIntervalAttr ? autoplayIntervalAttr! : '1.5s',
|
||||||
|
slideNavigation: slideNavigationAttr ? slideNavigationAttr! : 'dots',
|
||||||
|
hoverPause: hoverPauseAttr ? false : true,
|
||||||
|
transitionEffect: transitionEffectAttr ? transitionEffectAttr! : 'slide',
|
||||||
|
transitionDuration: transitionDurationAttr ? transitionDurationAttr! : '.6s',
|
||||||
|
animation: animationAttr ? animationAttr! : 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
|
||||||
|
|
||||||
|
transitionSpeed: transitionSpeedAttr ? transitionSpeedAttr! : '.6s',
|
||||||
|
arrowNavigation: arrowNavigationAttr ? false : true,
|
||||||
|
variableHeight: variableHeightAttr ? true : false,
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentSlideIndex = settings.initialActiveSlide
|
||||||
|
let currentSlideId = settings.initialActiveSlide
|
||||||
|
let previousSlideId = settings.initialActiveSlide
|
||||||
|
let animating = false
|
||||||
|
|
||||||
|
const el_superblockslider__track = slider.querySelector('.superblockslider__track')!
|
||||||
|
let el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide')
|
||||||
|
|
||||||
|
const el_superblockslider__button__previous = slider.querySelector('.superblockslider__button__previous')
|
||||||
|
const el_superblockslider__button__next = slider.querySelector('.superblockslider__button__next')
|
||||||
|
|
||||||
|
// console.log(settings)
|
||||||
|
|
||||||
|
el_superblockslider__track.addEventListener('transitionstart', transitionStart)
|
||||||
|
el_superblockslider__track.addEventListener('transitionend', transitionEnd)
|
||||||
|
|
||||||
|
// calculate slide width percentage
|
||||||
|
const offsetPercent = 100 / el_superblockslider__slides.length
|
||||||
|
const translateXOffset = currentSlideIndex * offsetPercent
|
||||||
|
// generate translateX
|
||||||
|
let translateX = `translateX(-${translateXOffset}%)`
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parallax
|
||||||
|
*/
|
||||||
|
|
||||||
|
const parallaxSlides = slider.querySelectorAll('.superblockslider__slide[data-parallax="true"]')
|
||||||
|
|
||||||
|
if(parallaxSlides) {
|
||||||
|
parallaxInit()
|
||||||
|
|
||||||
|
window.addEventListener('scroll', (event)=> {
|
||||||
|
parallaxSlides.forEach((parallaxSlide, index)=> {
|
||||||
|
let parallaxAttribute = parallaxSlide.getAttribute('data-parallax-speed')
|
||||||
|
const el_slide_bg: HTMLElement = (<HTMLElement>parallaxSlide.querySelectorAll('.superblockslider__slide__bg')[0])
|
||||||
|
if(parallaxAttribute) {
|
||||||
|
const sliderPositionY = parallaxSlide.getBoundingClientRect().y
|
||||||
|
if(sliderPositionY <= window.innerHeight && sliderPositionY >= Math.abs(window.innerHeight) * -1) {
|
||||||
|
let parallaxSpeed:number = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0
|
||||||
|
let parallaxOffset = (parallaxSpeed) * ((window.innerHeight - sliderPositionY));
|
||||||
|
const totalParallaxOffset = (parallaxSpeed) * ((window.innerHeight));
|
||||||
|
(<HTMLElement>el_slide_bg).style.transform = `translateY(${parallaxOffset - totalParallaxOffset}px)`
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
(<HTMLElement>el_slide_bg).style.transform = `translateY(0px)`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('resize', parallaxInit)
|
||||||
|
}
|
||||||
|
function parallaxInit() {
|
||||||
|
parallaxSlides.forEach((slide, index)=> {
|
||||||
|
let parallaxAttribute = slide.getAttribute('data-parallax-speed')
|
||||||
|
const parallaxSpeed:number = parallaxAttribute ? parseInt(parallaxAttribute) / 100 : 0
|
||||||
|
const sliderBoundingRect = slider.getBoundingClientRect()
|
||||||
|
const sliderPositionY = sliderBoundingRect.y
|
||||||
|
const sliderHeight = sliderBoundingRect.height
|
||||||
|
const windowHeight = window.innerHeight
|
||||||
|
|
||||||
|
const el_slide_bg: HTMLElement = (<HTMLElement>slide.querySelectorAll('.superblockslider__slide__bg')[0])
|
||||||
|
|
||||||
|
const el_slide_bg_img = el_slide_bg.querySelectorAll('img')[0]
|
||||||
|
|
||||||
|
const imageHeight = (parallaxSpeed * windowHeight / 2) + sliderHeight;
|
||||||
|
el_slide_bg_img.style.height = `${imageHeight}px`
|
||||||
|
const totalParallaxOffset = (parallaxSpeed) * ((windowHeight));
|
||||||
|
let parallaxOffset = 0
|
||||||
|
if(sliderPositionY <= windowHeight && sliderPositionY >= Math.abs(windowHeight) * -1 ) {
|
||||||
|
parallaxOffset = (parallaxSpeed) * ((windowHeight - sliderPositionY));
|
||||||
|
}
|
||||||
|
el_slide_bg.style.transform = `translateY(${parallaxOffset - totalParallaxOffset}px)`
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* autoplay
|
||||||
|
*/
|
||||||
|
let autoplayTime: number
|
||||||
|
let autoplayInterval: number
|
||||||
|
let autopayToggle: any
|
||||||
|
function onMouseOutAutoplay() {
|
||||||
|
autopayToggle = autoplayInterval
|
||||||
|
}
|
||||||
|
if(settings.autoplay == true) {
|
||||||
|
|
||||||
|
if(settings.autoplayInterval.indexOf('ms') > 0) {
|
||||||
|
autoplayInterval = parseInt(settings.autoplayInterval.split('ms')[0])
|
||||||
|
autopayToggle = autoplayInterval
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const seconds = Number(settings.autoplayInterval.split('s')[0])
|
||||||
|
autoplayInterval = seconds * 1000
|
||||||
|
autopayToggle = autoplayInterval
|
||||||
|
}
|
||||||
|
// autoplay
|
||||||
|
if(typeof autoplayInterval === 'number') {
|
||||||
|
window.requestAnimationFrame(autoplayTimerFrame)
|
||||||
|
|
||||||
|
if(settings.hoverPause == true) {
|
||||||
|
/**
|
||||||
|
* mouse over slider
|
||||||
|
*/
|
||||||
|
slider.addEventListener('mouseover', (event)=> {
|
||||||
|
autopayToggle = 'pause'
|
||||||
|
})
|
||||||
|
|
||||||
|
slider.addEventListener('mouseout', onMouseOutAutoplay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// timer
|
||||||
|
function autoplayTimerFrame(timestamp: number) {
|
||||||
|
if(autopayToggle === 'stop') return
|
||||||
|
|
||||||
|
if (autoplayTime === undefined || autopayToggle === 'pause') autoplayTime = timestamp
|
||||||
|
|
||||||
|
const elapsed = timestamp - autoplayTime
|
||||||
|
|
||||||
|
window.requestAnimationFrame(autoplayTimerFrame);
|
||||||
|
|
||||||
|
if (elapsed >= autopayToggle) {
|
||||||
|
// reset timer
|
||||||
|
autoplayTime = timestamp
|
||||||
|
|
||||||
|
nextSlide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let el_superblockslider__buttons = slider.querySelectorAll('.superblockslider__button')
|
||||||
|
if(settings.slideNavigation != 'none') {
|
||||||
|
/**
|
||||||
|
* slide button events
|
||||||
|
*/
|
||||||
|
el_superblockslider__buttons.forEach((button)=> {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
if(!animating) {
|
||||||
|
const buttonIdValue = parseInt(button.getAttribute('data-button-id')!)
|
||||||
|
|
||||||
|
animateTrackToSlideId(buttonIdValue, true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* animate track function
|
||||||
|
* @param {int} slideId
|
||||||
|
*/
|
||||||
|
function animateTrackToSlideId(slideId: number, toggleAutoplay: boolean = false) {
|
||||||
|
if(!animating) {
|
||||||
|
if(toggleAutoplay) {
|
||||||
|
slider.removeEventListener('mouseout', onMouseOutAutoplay)
|
||||||
|
autopayToggle = "stop"
|
||||||
|
}
|
||||||
|
if(currentSlideId != slideId) {
|
||||||
|
el_superblockslider__slides = slider.querySelectorAll('.superblockslider__slide')
|
||||||
|
|
||||||
|
let slideIndex = slideId
|
||||||
|
if(settings.loopSlide == false) {
|
||||||
|
|
||||||
|
}
|
||||||
|
// if infinite loop
|
||||||
|
else if(settings.transitionEffect == 'slide' && settings.loopSlide == true) {
|
||||||
|
/**
|
||||||
|
* move Last slide to first
|
||||||
|
*/
|
||||||
|
if(currentSlideIndex === 0 && el_superblockslider__slides.length > 2) {
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transition = 'none'
|
||||||
|
const lastSide = el_superblockslider__slides[el_superblockslider__slides.length - 1]
|
||||||
|
|
||||||
|
el_superblockslider__track.prepend(lastSide)
|
||||||
|
|
||||||
|
currentSlideIndex = 1
|
||||||
|
|
||||||
|
let trackOffset = currentSlideIndex * offsetPercent
|
||||||
|
translateX = `translateX(-${trackOffset}%)`;
|
||||||
|
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transform = translateX
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* move First slide to last
|
||||||
|
*/
|
||||||
|
else if(currentSlideIndex === el_superblockslider__slides.length - 1) {
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transition = 'none'
|
||||||
|
|
||||||
|
|
||||||
|
currentSlideIndex = el_superblockslider__slides.length - 2
|
||||||
|
|
||||||
|
let trackOffset = currentSlideIndex * offsetPercent
|
||||||
|
translateX = `translateX(-${trackOffset}%)`;
|
||||||
|
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transform = translateX
|
||||||
|
|
||||||
|
const firstSlide = el_superblockslider__slides[0]
|
||||||
|
el_superblockslider__track.append(firstSlide)
|
||||||
|
}
|
||||||
|
|
||||||
|
const slideMatch = slider.querySelectorAll(`[data-slide-index="${slideId}"]`)!
|
||||||
|
if(slideMatch[0] && slideMatch[0].parentNode) {
|
||||||
|
const slideMatch_parent_children = slideMatch[0].parentNode.children
|
||||||
|
|
||||||
|
let closeSlide = Array.from(slideMatch_parent_children).indexOf(slideMatch[0])
|
||||||
|
slideIndex = closeSlide
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// run on new thread to apply move translateX
|
||||||
|
setTimeout (() => {
|
||||||
|
animate(slideId, slideIndex)
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function animate(slideId: number, slideIndex: number) {
|
||||||
|
// console.log(animating)
|
||||||
|
if(settings.transitionEffect == 'slide') {
|
||||||
|
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transition = `all ${settings.transitionDuration} ${settings.animation}`;
|
||||||
|
|
||||||
|
let trackOffset = slideIndex * offsetPercent
|
||||||
|
translateX = `translateX(-${trackOffset}%)`;
|
||||||
|
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transform = translateX
|
||||||
|
|
||||||
|
currentSlideIndex = slideIndex
|
||||||
|
currentSlideId = slideId
|
||||||
|
}
|
||||||
|
else if(settings.transitionEffect == 'fade') {
|
||||||
|
currentSlideIndex = slideIndex
|
||||||
|
currentSlideId = slideId
|
||||||
|
transitionEnd()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function transitionStart() {
|
||||||
|
animating = true
|
||||||
|
|
||||||
|
if(autopayToggle !== "stop") autopayToggle = "pause"
|
||||||
|
|
||||||
|
if(settings.transitionEffect == 'slide') {
|
||||||
|
(<HTMLElement>el_superblockslider__track).style.transition = `all ${settings.transitionDuration} ${settings.animation}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* variable height animation
|
||||||
|
*/
|
||||||
|
if(settings.variableHeight) {
|
||||||
|
// set slider height to inital slide
|
||||||
|
updateSliderHeight()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add superblockslider__slide--animating
|
||||||
|
*/
|
||||||
|
|
||||||
|
slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.add('superblockslider__slide--animating-in')
|
||||||
|
slider.querySelector(`[data-slide-index="${previousSlideId}"]`)!.classList.add('superblockslider__slide--animating-out')
|
||||||
|
}
|
||||||
|
|
||||||
|
function transitionEnd() {
|
||||||
|
// remove slide active class
|
||||||
|
slider.querySelector('.superblockslider__slide--active')!.classList.remove('superblockslider__slide--active')
|
||||||
|
|
||||||
|
// add slide active class
|
||||||
|
slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.add('superblockslider__slide--active')
|
||||||
|
|
||||||
|
if(settings.slideNavigation != 'none') {
|
||||||
|
// remove button active class
|
||||||
|
slider.querySelector('.superblockslider__button--active')!.classList.remove('superblockslider__button--active')
|
||||||
|
// add button active class
|
||||||
|
el_superblockslider__buttons[currentSlideId].classList.add('superblockslider__button--active')
|
||||||
|
}
|
||||||
|
|
||||||
|
animating = false
|
||||||
|
if(autopayToggle !== "stop") autopayToggle = autoplayInterval
|
||||||
|
}
|
||||||
|
|
||||||
|
// next, prev button event
|
||||||
|
if(el_superblockslider__button__previous && el_superblockslider__button__next) {
|
||||||
|
el_superblockslider__button__previous.addEventListener('click', ()=> {
|
||||||
|
prevSlide(null, true)
|
||||||
|
})
|
||||||
|
el_superblockslider__button__next.addEventListener('click', ()=> {
|
||||||
|
nextSlide(null, true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* prev slide
|
||||||
|
*/
|
||||||
|
|
||||||
|
function prevSlide(event?: any, toggleAutoplay?: boolean) {
|
||||||
|
removeAnimatingClasses()
|
||||||
|
previousSlideId = currentSlideId
|
||||||
|
|
||||||
|
let prevSlideId = currentSlideId - 1
|
||||||
|
|
||||||
|
if(prevSlideId < 0) {
|
||||||
|
// get last slide Id
|
||||||
|
prevSlideId = el_superblockslider__slides.length - 1
|
||||||
|
}
|
||||||
|
animateTrackToSlideId(prevSlideId, toggleAutoplay)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* next slide
|
||||||
|
*/
|
||||||
|
|
||||||
|
function nextSlide(event?: any, toggleAutoplay?: boolean) {
|
||||||
|
removeAnimatingClasses()
|
||||||
|
previousSlideId = currentSlideId
|
||||||
|
|
||||||
|
let nextSlideId = currentSlideId + 1
|
||||||
|
if(nextSlideId > el_superblockslider__slides.length - 1) {
|
||||||
|
nextSlideId = 0
|
||||||
|
}
|
||||||
|
animateTrackToSlideId(nextSlideId, toggleAutoplay)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* remove animating classes
|
||||||
|
*/
|
||||||
|
function removeAnimatingClasses() {
|
||||||
|
// remove slide animating class
|
||||||
|
slider.querySelector(`[data-slide-index="${currentSlideId}"]`)!.classList.remove('superblockslider__slide--animating-in')
|
||||||
|
// remove slide animating class
|
||||||
|
slider.querySelector(`[data-slide-index="${previousSlideId}"]`)!.classList.remove('superblockslider__slide--animating-out')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Variable height
|
||||||
|
*/
|
||||||
|
|
||||||
|
if(settings.variableHeight) {
|
||||||
|
slider.style.transition = `height ease ${settings.transitionDuration}`
|
||||||
|
|
||||||
|
// set slider height to inital slide
|
||||||
|
updateSliderHeight()
|
||||||
|
|
||||||
|
window.addEventListener('resize', updateSliderHeight)
|
||||||
|
}
|
||||||
|
function updateSliderHeight() {
|
||||||
|
let sliderWidth = slider.offsetWidth
|
||||||
|
let currentSceenSize = getScreenSize()
|
||||||
|
let currentImage = <HTMLImageElement>slider.querySelector(`[data-slide-index="${currentSlideId}"] img.visible--${currentSceenSize}`)
|
||||||
|
if(currentImage) {
|
||||||
|
let imageOriginalWidth = Number(currentImage.getAttribute('width'))
|
||||||
|
let imageOriginalHeight = Number(currentImage.getAttribute('height'))
|
||||||
|
let imageVariableHeight = calculateVariableHeight(imageOriginalWidth, sliderWidth, imageOriginalHeight)
|
||||||
|
// currentImage.style.objectFit = 'cover'
|
||||||
|
slider.style.height = imageVariableHeight + 'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param originalWidth Original width of image
|
||||||
|
* @param newWidth Current rendered width of image
|
||||||
|
* @param originalHeight Original height of image
|
||||||
|
* @returns Number variable image height
|
||||||
|
*/
|
||||||
|
function calculateVariableHeight(originalWidth:number, newWidth:number, originalHeight:number,) {
|
||||||
|
// percenage increase
|
||||||
|
let percentageDifference:number;
|
||||||
|
if(originalWidth < newWidth) {
|
||||||
|
let widthDifference:number = newWidth - originalWidth;
|
||||||
|
percentageDifference = widthDifference / originalWidth;
|
||||||
|
return(percentageDifference * originalHeight + originalHeight)
|
||||||
|
}
|
||||||
|
|
||||||
|
// percentage decrease
|
||||||
|
else {
|
||||||
|
let widthDifference:number = originalWidth - newWidth;
|
||||||
|
percentageDifference = widthDifference / originalWidth;
|
||||||
|
return(originalHeight - percentageDifference * originalHeight)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns String window screen width
|
||||||
|
*/
|
||||||
|
function getScreenSize() {
|
||||||
|
let windowWidth = window.innerWidth
|
||||||
|
if(windowWidth > 1280) {
|
||||||
|
return 'xl'
|
||||||
|
}
|
||||||
|
else if (windowWidth < 1280 && windowWidth >= 1024) {
|
||||||
|
return 'lg'
|
||||||
|
}
|
||||||
|
else if (windowWidth < 1024 && windowWidth >= 768) {
|
||||||
|
return 'md'
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'sm'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mouse, touch drag change slide
|
||||||
|
*/
|
||||||
|
|
||||||
|
let pressDownX: any = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mouse drag
|
||||||
|
*/
|
||||||
|
const mouseXtriggerThreshold = 150
|
||||||
|
slider.addEventListener('mousedown', function (event) {
|
||||||
|
pressDownX = event.pageX
|
||||||
|
})
|
||||||
|
|
||||||
|
slider.addEventListener('mouseup', function (event) {
|
||||||
|
const diffX = event.pageX - pressDownX
|
||||||
|
|
||||||
|
if(diffX > 0 && diffX < mouseXtriggerThreshold) {
|
||||||
|
nextSlide(null, true)
|
||||||
|
}
|
||||||
|
else if(diffX < 0 && diffX > -mouseXtriggerThreshold) {
|
||||||
|
prevSlide(null, true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Touch drag
|
||||||
|
*/
|
||||||
|
const touchXtriggerThreshold = 6
|
||||||
|
slider.addEventListener('touchstart', handleTouchStart, {passive: true})
|
||||||
|
slider.addEventListener('touchmove', handleTouchMove, {passive: true})
|
||||||
|
|
||||||
|
function handleTouchStart(event: any) {
|
||||||
|
const firstTouch = event.touches[0];
|
||||||
|
|
||||||
|
pressDownX = firstTouch.clientX;
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleTouchMove(event: any) {
|
||||||
|
if ( ! pressDownX) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let xUp = event.touches[0].clientX;
|
||||||
|
|
||||||
|
let xDiff = pressDownX - xUp;
|
||||||
|
|
||||||
|
if ( xDiff > touchXtriggerThreshold) {
|
||||||
|
nextSlide(null, true)
|
||||||
|
autopayToggle = 'stop'
|
||||||
|
} else if(xDiff < -touchXtriggerThreshold) {
|
||||||
|
prevSlide(null, true)
|
||||||
|
autopayToggle = 'stop'
|
||||||
|
}
|
||||||
|
/* reset values */
|
||||||
|
pressDownX = null;
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
.superblockslider {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.entry-content > .superblockslider {
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__window, .superblockslider__track {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* window */
|
||||||
|
.superblockslider__window {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* track */
|
||||||
|
.superblockslider__track {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
transition: all .7s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.superblockslider__buttons {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
bottom: 3%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
align-items: center;
|
||||||
|
min-height: 2rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.slide__button {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.superblockslider__navigation {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__button, .superblockslider__button__navigation {
|
||||||
|
// height: 100%;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.superblockslider__button__title {
|
||||||
|
margin: .5rem;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
/* navigation arrows */
|
||||||
|
.superblockslider__button__navigation {
|
||||||
|
padding: 0;
|
||||||
|
opacity: .5;
|
||||||
|
transition: all .5s;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transition: all .5s;
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* slide buttons */
|
||||||
|
.superblockslider__button {
|
||||||
|
margin: 0 .1rem;
|
||||||
|
padding: 0;
|
||||||
|
opacity: .5;
|
||||||
|
transition: all .5s;
|
||||||
|
min-width: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
transition: all .5s;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
transition: all .5s;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
&--active, &:hover {
|
||||||
|
opacity: 1;
|
||||||
|
svg {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* slide */
|
||||||
|
.superblockslider__slide {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.is-vertical-center {
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-not-horizontal-center {
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
justify-content: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-vertical-bottom {
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* fade slider */
|
||||||
|
.superblockslider[data-transition-effect='fade'] .superblockslider__slide {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&.superblockslider__slide--active {
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.superblockslider__slide__bg, .superblockslider__slide__overlay {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: calc(100% - 58px * 2 - 10px * 2);
|
||||||
|
height: 81%;
|
||||||
|
top: 9%;
|
||||||
|
left: calc(58px + 10px);
|
||||||
|
|
||||||
|
padding-bottom: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.inner-blocks {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide__link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive */
|
||||||
|
.visible--md,
|
||||||
|
.visible--lg,
|
||||||
|
.visible--xl
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible--sm,
|
||||||
|
.visible--md.visible--sm {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.visible--sm,
|
||||||
|
.visible--lg,
|
||||||
|
.visible--xl,
|
||||||
|
.visible--xl.visible--lg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible--md,
|
||||||
|
.visible--md.visible--lg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
width: calc(100% - 68px * 2 - 15px * 2);
|
||||||
|
height: 83%;
|
||||||
|
top: 8.5%;
|
||||||
|
left: calc(68px + 15px);
|
||||||
|
}
|
||||||
|
.superblockslider__buttons {
|
||||||
|
bottom: 2.5%;
|
||||||
|
}
|
||||||
|
.superblockslider__button__navigation svg {
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.visible--sm,
|
||||||
|
.visible--md,
|
||||||
|
.visible--xl,
|
||||||
|
.visible--md.visible--sm
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible--lg,
|
||||||
|
.visible--lg.visible--md,
|
||||||
|
.visible--xl.visible--lg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
width: calc(100% - 70px * 2 - 15px * 2);
|
||||||
|
height: 86%;
|
||||||
|
top: 6%;
|
||||||
|
left: calc(70px + 15px);
|
||||||
|
}
|
||||||
|
.superblockslider__buttons {
|
||||||
|
bottom: 2%;
|
||||||
|
}
|
||||||
|
.superblockslider__button__navigation svg {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.visible--sm,
|
||||||
|
.visible--md,
|
||||||
|
.visible--lg,
|
||||||
|
.visible--lg.visible--md
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible--xl,
|
||||||
|
.visible--xl.visible--lg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.superblockslider__slide_inner {
|
||||||
|
width: calc(100% - 85px * 2 - 15px * 2);
|
||||||
|
height: 90%;
|
||||||
|
top: 5%;
|
||||||
|
left: calc(85px + 15px);
|
||||||
|
}
|
||||||
|
.superblockslider__buttons {
|
||||||
|
bottom: 3%;
|
||||||
|
}
|
||||||
|
.superblockslider__button__navigation svg {
|
||||||
|
width: 85px;
|
||||||
|
height: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Plugin Name: Super block slider
|
||||||
|
* Description: Lightweight, responsive, image & content slider for block and classic editor.
|
||||||
|
* Version: 2.7.7
|
||||||
|
* Author: mikemmx
|
||||||
|
* Plugin URI: https://superblockslider.com/
|
||||||
|
* Author URI: https://wordpress.org/support/users/mikemmx/
|
||||||
|
* License: GPL-2.0-or-later
|
||||||
|
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
* Text Domain: superblockslider
|
||||||
|
* Domain Path: /languages
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
$dir = __DIR__;
|
||||||
|
/**
|
||||||
|
* Load superblockslider post type
|
||||||
|
*/
|
||||||
|
$superblockslider_post_type = "$dir/includes/superblockslider_post_type.php";
|
||||||
|
require( $superblockslider_post_type );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register superblockslider
|
||||||
|
*/
|
||||||
|
function superblockslider() {
|
||||||
|
$dir = __DIR__;
|
||||||
|
|
||||||
|
$script_asset_path = "$dir/build/index.asset.php";
|
||||||
|
|
||||||
|
$index_js = 'build/index.js';
|
||||||
|
$script_asset = require( $script_asset_path );
|
||||||
|
wp_register_script(
|
||||||
|
'superblockslider-editor',
|
||||||
|
plugins_url( $index_js, __FILE__ ),
|
||||||
|
$script_asset['dependencies'],
|
||||||
|
$script_asset['version']
|
||||||
|
);
|
||||||
|
wp_set_script_translations( 'superblockslider-editor', 'slider' );
|
||||||
|
|
||||||
|
$slider_js = 'build/superblockslider.js';
|
||||||
|
wp_register_script(
|
||||||
|
'superblockslider',
|
||||||
|
plugins_url( $slider_js, __FILE__ ),
|
||||||
|
array(),
|
||||||
|
$script_asset['version'],
|
||||||
|
array(
|
||||||
|
'in_footer' => true,
|
||||||
|
'strategy' => 'defer',
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$editor_css = 'build/index.css';
|
||||||
|
wp_register_style(
|
||||||
|
'superblockslider-editor',
|
||||||
|
plugins_url( $editor_css, __FILE__ ),
|
||||||
|
array(),
|
||||||
|
filemtime( "$dir/$editor_css" )
|
||||||
|
);
|
||||||
|
|
||||||
|
$style_css = 'build/style-index.css';
|
||||||
|
wp_register_style(
|
||||||
|
'superblockslider',
|
||||||
|
plugins_url( $style_css, __FILE__ ),
|
||||||
|
array(),
|
||||||
|
filemtime( "$dir/$style_css" )
|
||||||
|
);
|
||||||
|
|
||||||
|
register_block_type(
|
||||||
|
'superblockslider/slider',
|
||||||
|
array(
|
||||||
|
'editor_script' => 'superblockslider-editor',
|
||||||
|
'editor_style' => 'superblockslider-editor',
|
||||||
|
'style' => 'superblockslider',
|
||||||
|
'script' => 'superblockslider',
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
add_action( 'init', 'superblockslider' );
|
||||||
Loading…
Reference in New Issue
Block a user