first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,13 @@
|
||||
.cnvs-block-jg-add-media-button button.components-button {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-gallery-type-slider.gallery {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider .gallery-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider .wp-caption-text {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider figure {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider > .gallery-item:not(:first-child) {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
right: -9999px;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-gallery-type-slider.gallery {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider .gallery-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider .wp-caption-text {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider figure {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cnvs-gallery-type-slider > .gallery-item:not(:first-child) {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.cnvs-block-jg-add-media-button button.components-button {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,176 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import "./block.scss";
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
Button,
|
||||
DropZone,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
MediaPlaceholder,
|
||||
MediaUpload,
|
||||
mediaUpload,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
createBlock,
|
||||
} = wp.blocks;
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Slider Gallery block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/slider-gallery' !== blockProps.name ) {
|
||||
return edit;
|
||||
}
|
||||
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isSelected,
|
||||
} = blockProps;
|
||||
|
||||
const {
|
||||
images,
|
||||
} = attributes;
|
||||
|
||||
const ALLOWED_MEDIA_TYPES = [ 'image' ];
|
||||
|
||||
const hasImages = images && images.length;
|
||||
|
||||
// show gallery with images.
|
||||
if ( hasImages ) {
|
||||
return (
|
||||
<div>
|
||||
{ edit }
|
||||
<DropZone
|
||||
onFilesDrop={ ( files ) => {
|
||||
const currentImages = images || [];
|
||||
mediaUpload( {
|
||||
allowedTypes: ALLOWED_MEDIA_TYPES,
|
||||
filesList: files,
|
||||
onFileChange: ( images ) => {
|
||||
const result = images.map( ( image ) => {
|
||||
return image.id;
|
||||
} );
|
||||
|
||||
setAttributes( {
|
||||
images: currentImages.concat( result ),
|
||||
} );
|
||||
},
|
||||
onError( e ) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( e );
|
||||
},
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
{ isSelected ? (
|
||||
<div className="cnvs-block-jg-add-media-button">
|
||||
<MediaUpload
|
||||
onSelect={ ( images ) => {
|
||||
const result = images.map( ( image ) => {
|
||||
return image.id;
|
||||
} );
|
||||
|
||||
setAttributes( {
|
||||
images: result,
|
||||
} );
|
||||
} }
|
||||
allowedTypes={ ALLOWED_MEDIA_TYPES }
|
||||
multiple
|
||||
gallery
|
||||
value={ images }
|
||||
render={ ( { open } ) => (
|
||||
<Button isDefault={ true } onClick={ open }>{ __( 'Edit Gallery' ) }</Button>
|
||||
) }
|
||||
/>
|
||||
</div>
|
||||
) : '' }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// add media upload if no images selected.
|
||||
return (
|
||||
<div>
|
||||
<MediaPlaceholder
|
||||
icon="format-gallery"
|
||||
labels={ {
|
||||
title: __( 'Gallery' ),
|
||||
instructions: __( 'Drag images, upload new ones or select files from your library.' ),
|
||||
} }
|
||||
onSelect={ ( images ) => {
|
||||
const result = images.map( ( image ) => {
|
||||
return image.id;
|
||||
} );
|
||||
|
||||
setAttributes( {
|
||||
images: result,
|
||||
} );
|
||||
} }
|
||||
accept="image/*"
|
||||
allowedTypes={ ALLOWED_MEDIA_TYPES }
|
||||
multiple
|
||||
value={ undefined }
|
||||
onError={ ( e ) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( e );
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Block transformations.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/slider-gallery' === blockData.name ) {
|
||||
blockData.transforms = {
|
||||
from: [
|
||||
{
|
||||
type: 'block',
|
||||
blocks: [ 'canvas/justified-gallery' ],
|
||||
transform: function( attrs ) {
|
||||
return createBlock(
|
||||
'canvas/slider-gallery',
|
||||
{
|
||||
images: attrs.images,
|
||||
imageSize: attrs.imageSize,
|
||||
linkTo: attrs.linkTo,
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/slider-gallery/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/slider-gallery/registerData', registerData );
|
||||
+1
File diff suppressed because one or more lines are too long
+83
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Slider Gallery
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
function canvasInitSliderGallery() {
|
||||
|
||||
/**
|
||||
* Get Page Info
|
||||
*/
|
||||
function canvasSliderPageInfo( cellNumber, cellsLength ) {
|
||||
var sep = canvas_sg_flickity.page_info_sep;
|
||||
|
||||
return '<span class="current">' + ( cellNumber + 1 ) + '</span><span class="sep">' + sep + '</span><span class="cells">' + cellsLength + '</span>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Slider Init
|
||||
*/
|
||||
$( '.cnvs-gallery-type-slider:not(.cnvs-gallery-type-slider-ready)' ).imagesLoaded( function( instance ) {
|
||||
|
||||
$( instance.elements ).each( function( index, el ) {
|
||||
var $el = $( el );
|
||||
|
||||
$el.filter(':not(.cnvs-gallery-type-slider-ready)')
|
||||
.addClass( 'cnvs-gallery-type-slider-ready' )
|
||||
.flickity( {
|
||||
pageDots: $el.data( 'sg-page-dots' ),
|
||||
prevNextButtons: $el.data( 'sg-nav' ),
|
||||
adaptiveHeight: true,
|
||||
cellAlign: 'left',
|
||||
contain: true,
|
||||
on: {
|
||||
ready: function() {
|
||||
var data = Flickity.data( el );
|
||||
|
||||
$el.addClass( 'is-animate slider-loaded' );
|
||||
|
||||
if ( $el.data( 'sg-page-info' ) ) {
|
||||
|
||||
if ( $el.data( 'sg-page-dots' ) ) {
|
||||
$el.find( '.flickity-page-dots' ).wrap( '<div class="flickity-pages"></div>' );
|
||||
} else {
|
||||
$el.append( '<div class="flickity-pages"></div>' );
|
||||
}
|
||||
|
||||
var cellNumber = data.selectedIndex;
|
||||
|
||||
$el.find( '.flickity-pages' ).append( '<div class="flickity-page-info">' + canvasSliderPageInfo( cellNumber, data.cells.length ) + '</div>' );
|
||||
}
|
||||
|
||||
$( document.body ).trigger( 'image-load' );
|
||||
},
|
||||
change: function( cellNumber ) {
|
||||
var data = Flickity.data( el );
|
||||
|
||||
if ( $el.data( 'sg-page-info' ) ) {
|
||||
|
||||
$el.find( '.flickity-page-info' ).html( canvasSliderPageInfo( cellNumber, data.cells.length ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
$( document ).ready( function() {
|
||||
canvasInitSliderGallery();
|
||||
$( document.body ).on( 'post-load', function() {
|
||||
canvasInitSliderGallery();
|
||||
} );
|
||||
|
||||
if ( 'undefined' !== typeof wp && 'undefined' !== typeof wp.hooks ) {
|
||||
wp.hooks.addAction( 'canvas.components.serverSideRender.onChange', 'canvas/slider-gallery.init', function( props ) {
|
||||
if ( 'canvas/slider-gallery' === props.block ) {
|
||||
canvasInitSliderGallery();
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
/**
|
||||
* Slider Gallery block template
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$images = (array) ( isset( $attributes['images'] ) ? $attributes['images'] : array() );
|
||||
|
||||
if ( empty( $images ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
echo '<div class="' . esc_attr( $attributes['className'] ) . '" ' . ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ) . '>';
|
||||
|
||||
?>
|
||||
|
||||
<div
|
||||
class='gallery cnvs-gallery-type-slider'
|
||||
cnvs-flickity="init"
|
||||
data-sg-page-dots="<?php echo esc_attr( $attributes['showBullets'] ? 'true' : 'false' ); ?>"
|
||||
data-sg-page-info="<?php echo esc_attr( $attributes['showCaptions'] ? 'true' : 'false' ); ?>"
|
||||
data-sg-nav="<?php echo esc_attr( $attributes['showPrevNextButtons'] ? 'true' : 'false' ); ?>"
|
||||
>
|
||||
<?php
|
||||
foreach ( $images as $img ) {
|
||||
$link = false;
|
||||
|
||||
switch ( $attributes['linkTo'] ) {
|
||||
case 'post':
|
||||
$link = get_the_permalink( $img );
|
||||
break;
|
||||
case 'file':
|
||||
$link = wp_get_attachment_image_src( $img, 'full' )[0];
|
||||
break;
|
||||
}
|
||||
|
||||
?>
|
||||
<figure class="gallery-item">
|
||||
<?php if ( $link ) : ?>
|
||||
<a href="<?php echo esc_url( $link ); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo wp_get_attachment_image( $img, $attributes['imageSize'] ); ?>
|
||||
|
||||
<?php if ( $link ) : ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
if ( $attributes['showCaptions'] ) {
|
||||
$caption = wp_get_attachment_caption( $img );
|
||||
|
||||
if ( $caption ) {
|
||||
echo '<div class="caption wp-caption-text gallery-caption">' . wp_kses( $caption, 'post' ) . '</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</figure>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
|
||||
echo '</div>';
|
||||
Reference in New Issue
Block a user