first commit
This commit is contained in:
+102
@@ -0,0 +1,102 @@
|
||||
<?php
|
||||
/**
|
||||
* The admin-specific functionality of the module.
|
||||
*
|
||||
* @link https://codesupply.co
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @package Powerkit
|
||||
* @subpackage Modules/Admin
|
||||
*/
|
||||
|
||||
/**
|
||||
* The admin-specific functionality of the module.
|
||||
*/
|
||||
class Powerkit_Justified_Gallery_Admin extends Powerkit_Module_Admin {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function initialize() {
|
||||
add_action( 'admin_init', array( $this, 'register_settings_section' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register admin page
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function register_settings_section() {
|
||||
|
||||
add_settings_section( 'powerkit_justified_gallery_settings', sprintf( '<span id="%s">%s</span>', powerkit_get_page_slug( $this->slug ), esc_html__( 'Justified Gallery', 'powerkit' ) ), array( $this, 'powerkit_justified_gallery_settings_callback' ), 'media' );
|
||||
|
||||
add_settings_field( 'powerkit_justified_gallery_margins', esc_html__( 'Space between images', 'powerkit' ), array( $this, 'powerkit_justified_gallery_margins_callback' ), 'media', 'powerkit_justified_gallery_settings' );
|
||||
add_settings_field( 'powerkit_justified_gallery_row_height', esc_html__( 'Row height', 'powerkit' ), array( $this, 'powerkit_justified_gallery_row_height_callback' ), 'media', 'powerkit_justified_gallery_settings' );
|
||||
add_settings_field( 'powerkit_justified_gallery_max_row_height', esc_html__( 'Max row height', 'powerkit' ), array( $this, 'powerkit_justified_gallery_max_row_height_callback' ), 'media', 'powerkit_justified_gallery_settings' );
|
||||
add_settings_field( 'powerkit_justified_gallery_last_row', esc_html__( 'Last row', 'powerkit' ), array( $this, 'powerkit_justified_gallery_last_row_callback' ), 'media', 'powerkit_justified_gallery_settings' );
|
||||
|
||||
register_setting( 'media', 'powerkit_justified_gallery_margins' );
|
||||
register_setting( 'media', 'powerkit_justified_gallery_row_height' );
|
||||
register_setting( 'media', 'powerkit_justified_gallery_max_row_height' );
|
||||
register_setting( 'media', 'powerkit_justified_gallery_last_row' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Section Description.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function powerkit_justified_gallery_settings_callback() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Field | Space between images.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function powerkit_justified_gallery_margins_callback() {
|
||||
?>
|
||||
<input class="small-text" id="powerkit_justified_gallery_margins" name="powerkit_justified_gallery_margins" type="number" min="0" step="1" value="<?php echo esc_attr( get_option( 'powerkit_justified_gallery_margins', '10' ) ); ?>">
|
||||
<span><?php esc_html_e( 'px', 'powerkit' ); ?></span>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Field | Row height.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function powerkit_justified_gallery_row_height_callback() {
|
||||
?>
|
||||
<input class="small-text" id="powerkit_justified_gallery_row_height" name="powerkit_justified_gallery_row_height" type="number" min="0" step="1" value="<?php echo esc_attr( get_option( 'powerkit_justified_gallery_row_height', '160' ) ); ?>">
|
||||
<span><?php esc_html_e( 'px. The preferred height of rows.', 'powerkit' ); ?></span>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Field | Space Max row height.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function powerkit_justified_gallery_max_row_height_callback() {
|
||||
?>
|
||||
<input class="small-text" id="powerkit_justified_gallery_max_row_height" name="powerkit_justified_gallery_max_row_height" type="number" step="1" value="<?php echo esc_attr( get_option( 'powerkit_justified_gallery_max_row_height', '-1' ) ); ?>">
|
||||
<span><?php esc_html_e( 'px. Input -1 to remove the limit of the maximum row height.', 'powerkit' ); ?></span>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Field | Last row.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function powerkit_justified_gallery_last_row_callback() {
|
||||
?>
|
||||
<label><input id="powerkit_justified_gallery_last_row" name="powerkit_justified_gallery_last_row" type="radio" value="nojustify" <?php checked( 'nojustify', get_option( 'powerkit_justified_gallery_last_row', 'justify' ) ); ?>><?php esc_html_e( 'No Justify', 'powerkit' ); ?> </label>
|
||||
<label><input id="powerkit_justified_gallery_last_row" name="powerkit_justified_gallery_last_row" type="radio" value="justify" <?php checked( 'justify', get_option( 'powerkit_justified_gallery_last_row', 'justify' ) ); ?>><?php esc_html_e( 'Justify', 'powerkit' ); ?> </label>
|
||||
<label><input id="powerkit_justified_gallery_last_row" name="powerkit_justified_gallery_last_row" type="radio" value="hide" <?php checked( 'hide', get_option( 'powerkit_justified_gallery_last_row', 'justify' ) ); ?>><?php esc_html_e( 'Hide', 'powerkit' ); ?></label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* Justified Gallery
|
||||
*
|
||||
* @package Powerkit
|
||||
* @subpackage Modules
|
||||
*/
|
||||
|
||||
if ( class_exists( 'Powerkit_Module' ) ) {
|
||||
/**
|
||||
* Init module
|
||||
*/
|
||||
class Powerkit_Justified_Gallery extends Powerkit_Module {
|
||||
|
||||
/**
|
||||
* Register module
|
||||
*/
|
||||
public function register() {
|
||||
$this->name = esc_html__( 'Justified Gallery', 'powerkit' );
|
||||
$this->desc = esc_html__( 'Create beautiful tiled galleries with the Justified Gallery module. Control the image height and padding between images per gallery or globally.', 'powerkit' );
|
||||
$this->slug = 'justified_gallery';
|
||||
$this->type = 'default';
|
||||
$this->category = 'basic';
|
||||
$this->priority = 90;
|
||||
$this->public = true;
|
||||
$this->enabled = true;
|
||||
$this->links = array(
|
||||
array(
|
||||
'name' => esc_html__( 'Go to settings', 'powerkit' ),
|
||||
'url' => admin_url( sprintf( 'options-media.php#%s', powerkit_get_page_slug( $this->slug ) ) ),
|
||||
),
|
||||
array(
|
||||
'name' => esc_html__( 'View documentation', 'powerkit' ),
|
||||
'url' => powerkit_get_setting( 'documentation' ) . '/content-presentation/justified-gallery/',
|
||||
'target' => '_blank',
|
||||
),
|
||||
);
|
||||
$this->load_extensions = array(
|
||||
'gallery',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize module
|
||||
*/
|
||||
public function initialize() {
|
||||
|
||||
/* Load the required dependencies for this module */
|
||||
|
||||
// Admin and public area.
|
||||
require_once dirname( __FILE__ ) . '/admin/class-powerkit-justified-gallery-admin.php';
|
||||
require_once dirname( __FILE__ ) . '/public/class-powerkit-justified-gallery-public.php';
|
||||
|
||||
new Powerkit_Justified_Gallery_Admin( $this->slug );
|
||||
new Powerkit_Justified_Gallery_Public( $this->slug );
|
||||
}
|
||||
}
|
||||
|
||||
new Powerkit_Justified_Gallery();
|
||||
}
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
/**
|
||||
* The public-facing functionality of the module.
|
||||
*
|
||||
* @link https://codesupply.co
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @package Powerkit
|
||||
* @subpackage Modules/public
|
||||
*/
|
||||
|
||||
/**
|
||||
* The public-facing functionality of the module.
|
||||
*/
|
||||
class Powerkit_Justified_Gallery_Public extends Powerkit_Module_Public {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function initialize() {
|
||||
add_filter( 'powerkit_gallery_types', array( $this, 'gallery_types' ) );
|
||||
add_filter( 'powerkit_gallery_settings', array( $this, 'gallery_settings' ), 10, 2 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Add new gallery types
|
||||
*
|
||||
* @param array $types Gallery types.
|
||||
*/
|
||||
public function gallery_types( $types ) {
|
||||
|
||||
$types = array_merge( $types, array(
|
||||
'justified' => esc_html__( 'Justified', 'powerkit' ),
|
||||
) );
|
||||
|
||||
return $types;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set gallery settings
|
||||
*
|
||||
* @param array $settings Gallery settings.
|
||||
* @param array $attr Gallery attr.
|
||||
*/
|
||||
public function gallery_settings( $settings, $attr ) {
|
||||
|
||||
if ( isset( $attr['type'] ) && 'justified' === $attr['type'] ) {
|
||||
|
||||
$data = array(
|
||||
'pk-jg-margins' => (int) get_option( 'powerkit_justified_gallery_margins', '10' ),
|
||||
'pk-jg-row-height' => (int) get_option( 'powerkit_justified_gallery_row_height', '160' ),
|
||||
'pk-jg-max-row-height' => (int) get_option( 'powerkit_justified_gallery_max_row_height', '-1' ),
|
||||
'pk-jg-last-row' => (string) get_option( 'powerkit_justified_gallery_last_row', 'justify' ),
|
||||
);
|
||||
|
||||
$data = array_merge( (array) $data, (array) $attr );
|
||||
|
||||
if ( -1 === $data['pk-jg-max-row-height'] ) {
|
||||
$data['pk-max-row-height'] = 'false';
|
||||
}
|
||||
|
||||
$settings['custom_attrs'] .= sprintf( ' data-jg-margins="%s" data-jg-row-height="%s" data-jg-max-row-height="%s" data-jg-last-row="%s"', $data['pk-jg-margins'], $data['pk-jg-row-height'], $data['pk-jg-max-row-height'], $data['pk-jg-last-row'] );
|
||||
}
|
||||
|
||||
return $settings;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register the stylesheets for the public-facing side of the site.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style( 'powerkit-justified-gallery', powerkit_style( plugin_dir_url( __FILE__ ) . 'css/public-powerkit-justified-gallery.css' ), array(), powerkit_get_setting( 'version' ), 'all' );
|
||||
|
||||
// Add RTL support.
|
||||
wp_style_add_data( 'powerkit-justified-gallery', 'rtl', 'replace' );
|
||||
|
||||
// Scripts.
|
||||
wp_enqueue_script( 'justifiedgallery', plugin_dir_url( __FILE__ ) . 'js/jquery.justifiedGallery.min.js', array( 'jquery' ), powerkit_get_setting( 'version' ), true );
|
||||
|
||||
wp_enqueue_script( 'powerkit-justified-gallery', plugin_dir_url( __FILE__ ) . 'js/public-powerkit-justified-gallery.js', array( 'jquery' ), powerkit_get_setting( 'version' ), true );
|
||||
|
||||
wp_localize_script( 'powerkit-justified-gallery', 'powerkitJG', array(
|
||||
'rtl' => is_rtl(),
|
||||
) );
|
||||
}
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.gallery-type-justified {
|
||||
--pk-twitter-caption-color: #FFFFFF;
|
||||
--pk-twitter-caption-background: rgba(0, 0, 0, 0.5);
|
||||
--pk-twitter-loader-border-color: rgba(0, 0, 0, 0.25);
|
||||
--pk-twitter-loader-color: #777;
|
||||
--pk-twitter-caption-font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.gallery-type-justified {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > img,
|
||||
.gallery-type-justified .gallery-item > a > img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > .caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
opacity: 0;
|
||||
color: var(--pk-twitter-caption-color);
|
||||
background-color: var(--pk-twitter-caption-background);
|
||||
font-size: var(--pk-twitter-caption-font-size);
|
||||
transition: 0.2s ease opacity;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > .caption.caption-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .entry-visible {
|
||||
opacity: 1;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .entry-visible > img,
|
||||
.gallery-type-justified > .entry-visible > a > img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .jg-filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified.justified-loaded:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 2px solid var(--pk-twitter-loader-border-color);
|
||||
border-top-color: var(--pk-twitter-loader-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
-webkit-animation: loader-rotate 1s linear infinite;
|
||||
animation: loader-rotate 1s linear infinite;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.gallery-type-justified {
|
||||
--pk-twitter-caption-color: #FFFFFF;
|
||||
--pk-twitter-caption-background: rgba(0, 0, 0, 0.5);
|
||||
--pk-twitter-loader-border-color: rgba(0, 0, 0, 0.25);
|
||||
--pk-twitter-loader-color: #777;
|
||||
--pk-twitter-caption-font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.gallery-type-justified {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > img,
|
||||
.gallery-type-justified .gallery-item > a > img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > .caption {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
opacity: 0;
|
||||
color: var(--pk-twitter-caption-color);
|
||||
background-color: var(--pk-twitter-caption-background);
|
||||
font-size: var(--pk-twitter-caption-font-size);
|
||||
transition: 0.2s ease opacity;
|
||||
}
|
||||
|
||||
.gallery-type-justified .gallery-item > .caption.caption-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .entry-visible {
|
||||
opacity: 1;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .entry-visible > img,
|
||||
.gallery-type-justified > .entry-visible > a > img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gallery-type-justified > .jg-filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified.justified-loaded:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-type-justified:before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 2px solid var(--pk-twitter-loader-border-color);
|
||||
border-top-color: var(--pk-twitter-loader-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
-webkit-animation: loader-rotate 1s linear infinite;
|
||||
animation: loader-rotate 1s linear infinite;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Vendored
+8
File diff suppressed because one or more lines are too long
+59
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Justified Gallery
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
function powerkitInitJustifiedGallery() {
|
||||
|
||||
$( '.gallery-type-justified:not(.gallery-type-justified-ready)' ).imagesLoaded( function( instance ) {
|
||||
|
||||
$( instance.elements ).each( function( index, el ) {
|
||||
var $el = $( el );
|
||||
var data = $el.data();
|
||||
|
||||
$el.filter(':not(.gallery-type-justified-ready)')
|
||||
.addClass( 'gallery-type-justified-ready' )
|
||||
.justifiedGallery( {
|
||||
rtl: !!powerkitJG.rtl,
|
||||
margins: data.jgMargins,
|
||||
rowHeight: data.jgRowHeight,
|
||||
maxRowHeight: data.jgMaxRowHeight,
|
||||
lastRow: data.jgLastRow,
|
||||
border: 0,
|
||||
border: typeof data.jgBorder !== 'undefined' ? data.jgBorder : 0,
|
||||
selector: 'figure',
|
||||
captions: typeof data.jgCaptions !== 'undefined' ? data.jgCaptions : true,
|
||||
randomize: typeof data.jgRandomize !== 'undefined' ? data.jgRandomize : false,
|
||||
cssAnimation: true,
|
||||
captionSettings: {
|
||||
animationDuration: 100,
|
||||
visibleOpacity: 1.0,
|
||||
nonVisibleOpacity: 0.0
|
||||
}
|
||||
} ).on( 'jg.complete', function( e ) {
|
||||
|
||||
$el.addClass( 'justified-loaded' );
|
||||
|
||||
$( document.body ).trigger( 'image-load' );
|
||||
} );
|
||||
} );
|
||||
|
||||
} );
|
||||
}
|
||||
|
||||
$( document ).ready( function() {
|
||||
powerkitInitJustifiedGallery();
|
||||
$( document.body ).on( 'post-load', function() {
|
||||
powerkitInitJustifiedGallery();
|
||||
} );
|
||||
|
||||
if ( 'undefined' !== typeof wp && 'undefined' !== typeof wp.hooks ) {
|
||||
wp.hooks.addAction( 'canvas.components.serverSideRender.onChange', 'canvas/justified-gallery.init', function( props ) {
|
||||
if ( 'canvas/justified-gallery' === props.block ) {
|
||||
powerkitInitJustifiedGallery();
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user