Compare commits
No commits in common. "5461aa9f3fc1001b133d42126b105caac7e19b4e" and "711629fea816f02a6060489aa944d3ded68cc6b6" have entirely different histories.
5461aa9f3f
...
711629fea8
35
Makefile
|
@ -1,21 +1,15 @@
|
|||
DOCKER ?= docker
|
||||
COMPOSE ?= docker compose
|
||||
PUBLIC_URL ?= https://askar-association-ps.org
|
||||
PUBLIC_URL ?= https://askar.abbiamoundominio.org
|
||||
TMPDB_CONN = --host=127.0.0.1 --port=3307 --user=root --password=toor --ssl-verify-server-cert=FALSE
|
||||
DUMP_CONN = -h 127.0.0.1 -P 3306 --user root --password=toor --ssl-verify-server-cert=FALSE
|
||||
VERSIONED_DUMP = ./assets/db/dump.sql
|
||||
TMP_PROD_DUMP = ./out/db.tmp.sql
|
||||
PROD_DUMP = ./out/dump.sql
|
||||
REMOTE_DB_DUMP = ./out/remote.dump.sql
|
||||
WWW_USER ?= 33
|
||||
WWW_GROUP ?= 33
|
||||
|
||||
dev-run:
|
||||
$(COMPOSE) up
|
||||
|
||||
dev-run-db:
|
||||
$(COMPOSE) run --rm db
|
||||
|
||||
dev-stop:
|
||||
$(COMPOSE) down
|
||||
|
||||
|
@ -25,18 +19,6 @@ dev-clean:
|
|||
dev-dump:
|
||||
mariadb-dump $(DUMP_CONN) askar > $(VERSIONED_DUMP)
|
||||
|
||||
dev-import-db:
|
||||
cat $(REMOTE_DB_DUMP) |\
|
||||
sed -e 's;$(PUBLIC_URL);http://localhost:8080;g' |\
|
||||
grep -v -E '^/\*' |\
|
||||
(echo "SET sql_mode = '';" && cat) > ./assets/db/dump.sql
|
||||
|
||||
dev-import-website:
|
||||
sudo tar zxvf ./out/remote.uploads.tar.gz -C ./assets/wordpress/wp-content/
|
||||
sudo tar zxvf ./out/remote.plugins.tar.gz -C ./assets/wordpress/wp-content/
|
||||
sudo chown $(WWW_USER):$(WWW_GROUP) -R ./assets/wordpress/wp-content/
|
||||
|
||||
|
||||
./out:
|
||||
mkdir ./out
|
||||
|
||||
|
@ -66,28 +48,25 @@ tmpdb-do-dump:
|
|||
|
||||
prepare-db: tmpdb-start tmpdb-do-dump tmpdb-stop
|
||||
|
||||
_prepare-%:
|
||||
tar -C ./assets/wordpress/wp-content/ ./$* -czvf ./out/$*.tar.gz
|
||||
prepare-%:
|
||||
tar czvf ./out/$*.tar.gz -C ./assets/wordpress/wp-content/$*
|
||||
|
||||
prepare-data: _prepare-uploads _prepare-plugins
|
||||
prepare-data: prepare-uploads prepare-plugins
|
||||
|
||||
prepare-export: prepare-db prepare-data
|
||||
|
||||
push-db:
|
||||
cat $(PROD_DUMP) | ssh $(REMOTE_DB_HOST) mysql --user=$(REMOTE_DB_USER) --password=\'$$(age -d ./assets/db.prod.pass.age)\' $(REMOTE_DB_DATABASE)
|
||||
cat $(PROD_DUMP) | ssh $(REMOTE_DB_HOST) mysql --user $(REMOTE_DB_USER) --password $$(age -d ./assets/admin.pass.age) $(REMOTE_DB_DATABASE)
|
||||
|
||||
_push-%:
|
||||
cat ./out/$*.tar.gz | ssh $(REMOTE_WEB_HOST) tar -C $(REMOTE_WEB_ROOT) -zxvf -
|
||||
cat ./out/$*.tar.gz | ssh $(REMOTE_WEB_HOST) tar zxvf -C $(REMOTE_WEB_ROOT) -
|
||||
|
||||
push-website: _push-uploads _push-plugins
|
||||
|
||||
pull-db:
|
||||
ssh $(REMOTE_DB_HOST) mysqldump $(REMOTE_DB_DATABASE) > $(REMOTE_DB_DUMP)
|
||||
ssh $(REMOTE_DB_HOST) mysqldump --user $(REMOTE_DB_USER) --password $$(age -d ./assets/admin.pass.age) $(REMOTE_DB_DATABASE) > ./out/remote.dump.sql
|
||||
|
||||
_pull-%:
|
||||
ssh $(REMOTE_WEB_HOST) tar czvf - -C $(REMOTE_WEB_ROOT) $* > ./out/remote.$*.tar.gz
|
||||
|
||||
pull-website: _pull-uploads _pull-plugins
|
||||
|
||||
clean:
|
||||
rm ./out/*
|
||||
|
|
57
README.md
|
@ -34,60 +34,3 @@ The website will be a Wordpress with some customization. It will have the follow
|
|||
## Dev
|
||||
|
||||
We use GNU make + docker
|
||||
|
||||
Set the environment variables as appropriate
|
||||
|
||||
```
|
||||
export REMOTE_WEB_HOST=root@amelia.abbiamoundominio.org
|
||||
export REMOTE_WEB_ROOT=/var/www/askar
|
||||
export REMOTE_DB_HOST=root@comandantaramona.abbiamoundominio.org
|
||||
export REMOTE_DB_USER=wordpress_askar
|
||||
export REMOTE_DB_DATABASE=wordpress_askar
|
||||
export PUBLIC_URL=https://askar-association-ps.org
|
||||
```
|
||||
|
||||
### Pull content from production site
|
||||
|
||||
Pull the content (uploads+plugins)
|
||||
|
||||
```
|
||||
make pull-website
|
||||
```
|
||||
|
||||
Dump the remote db and pull it
|
||||
|
||||
```
|
||||
make pull-db
|
||||
```
|
||||
|
||||
### Push to production
|
||||
|
||||
Prepare the local content to be pushed (note that the following requires the dev site to be running with `make dev-run`):
|
||||
|
||||
```
|
||||
make prepare
|
||||
```
|
||||
|
||||
Stop the remote website
|
||||
|
||||
```
|
||||
ssh ${REMOTE_WEB_HOST} docker stop wordpress_askar
|
||||
```
|
||||
|
||||
Push the database
|
||||
|
||||
```
|
||||
make push-db
|
||||
```
|
||||
|
||||
Push the website content
|
||||
|
||||
```
|
||||
make push-website
|
||||
```
|
||||
|
||||
Restart the website
|
||||
|
||||
```
|
||||
ssh ${REMOTE_WEB_HOST} ./ wordpress_askar.sh
|
||||
```
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
age-encryption.org/v1
|
||||
-> scrypt ZsvmNNNAOTwpt3k8D59PMg 18
|
||||
8+DAfiRZkiaiDol6+vbUij/n8iHul7egJ9VQNjtqT3U
|
||||
--- YCZGkX9+aBvfbl2lRxhRtI2ql/00Tixi2p58ZwXCtv4
|
||||
¶"s¢
|
||||
Va¥]þ‘œð}ªfÕr™ð–ô»©J«6:d§¾l㦲깻?™éG”rʆÈE
|
|
@ -1,6 +0,0 @@
|
|||
age-encryption.org/v1
|
||||
-> scrypt QPnc38eDy9SOflZuKFHMsA 18
|
||||
Ke6fUjpQjBkBwyYUVLFncxAracLkZ+KkpyLOwz7Gejk
|
||||
--- xdQGEqKMOhv1G6sMNi9KiOlyt3yDzz3Qw7x1/upQvvk
|
||||
ðOJ1–Q@êåv¬Îƒ‹Y
|
||||
ïmÇ^Ù©“ØëÓR‡Ë
;1)÷cEÝ¿v*óEð›öjë¾ýZ
|
|
@ -1,6 +0,0 @@
|
|||
age-encryption.org/v1
|
||||
-> scrypt 6QrVQqHCz74QP99Wdncdlg 18
|
||||
6pKNpuQEpUOPQRo/EBndnQS6SiX5Vk5SarrCQyQV76I
|
||||
--- 3HNXyrypprIaex+N5i6H9aqV/r38nYg2jYj+aG4xShA
|
||||
öÞ–³ú¥öhrè’-í
|
||||
$jYÿŸ¹õ"Æù<C386>±MRÀ¯7‰áƵãùöKÈ<p‹ŽÇ_Á¦Û
|
|
@ -1,6 +0,0 @@
|
|||
age-encryption.org/v1
|
||||
-> scrypt rANUm1DqFtwf3eZDluBAvg 18
|
||||
UM0AVX+SloEjHC76jZzw3daY7I/wovKguXLm5NPNUfk
|
||||
--- y0/4l3ExLo/2sceGpLMa5Rov175jKdXfygy/nv/WEE0
|
||||
}W“¢ú÷-A5#£šƒ<^µ…¸
Ô>ÐK!ŸüùššF›vcšêdþDšéà<C3A9>ê\8ჿ˜Í
|
||||
Ì
|
0
assets/wordpress/wp-content/fonts/137e4d3f6a83a7b4382e00e2ad4ce776.css
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/c2fff3a7487165674b4f5535fb5d982e.css
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqW106F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWxU6F15M.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/fonts/open-sans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2
Executable file → Normal file
|
@ -1 +0,0 @@
|
|||
<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>
|
Before Width: | Height: | Size: 310 B |
|
@ -1 +0,0 @@
|
|||
<?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');
|
|
@ -1,165 +0,0 @@
|
|||
<?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;
|
||||
}
|
|
@ -1,254 +0,0 @@
|
|||
=== 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
|
|
@ -1,136 +0,0 @@
|
|||
.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;
|
||||
}
|
|
@ -1,341 +0,0 @@
|
|||
"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
|
|
@ -1,522 +0,0 @@
|
|||
(() => {
|
||||
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;
|
||||
};
|
||||
})
|
||||
}
|
||||
})()
|
|
@ -1,286 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
|
@ -1,79 +0,0 @@
|
|||
<?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' );
|
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/css/button-outline.css
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/cardo/LICENSE.txt
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_italic_400.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_400.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_700.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/instrument-sans/InstrumentSans-VariableFont_wdth,wght.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/instrument-sans/OFL.txt
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/inter/LICENSE.txt
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/jost/Jost-VariableFont_wght.woff2
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/fonts/jost/OFL.txt
Executable file → Normal file
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/abstract-geometric-art.webp
Executable file → Normal file
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/angular-roof.webp
Executable file → Normal file
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/art-gallery.webp
Executable file → Normal file
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/building-exterior.webp
Executable file → Normal file
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/green-staircase.webp
Executable file → Normal file
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/hotel-facade.webp
Executable file → Normal file
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/icon-message.webp
Executable file → Normal file
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/museum.webp
Executable file → Normal file
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/tourist-and-building.webp
Executable file → Normal file
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
0
assets/wordpress/wp-content/themes/twentytwentyfour/assets/images/windows.webp
Executable file → Normal file
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |