HITSword
@@ -0,0 +1,25 @@
|
||||
This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
|
||||
|
||||
Below you will find some information on how to run scripts.
|
||||
|
||||
>You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).
|
||||
|
||||
## 👉 `npm start`
|
||||
- Use to compile and run the block in development mode.
|
||||
- Watches for any changes and reports back any errors in your code.
|
||||
|
||||
## 👉 `npm run build`
|
||||
- Use to build production code for your block inside `dist` folder.
|
||||
- Runs once and reports back the gzip file sizes of the produced code.
|
||||
|
||||
## 👉 `npm run eject`
|
||||
- Use to eject your plugin out of `create-guten-block`.
|
||||
- Provides all the configurations so you can customize the project as you want.
|
||||
- It's a one-way street, `eject` and you have to maintain everything yourself.
|
||||
- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own.
|
||||
|
||||
---
|
||||
|
||||
###### Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/)
|
||||
|
||||
[](https://www.npmjs.com/package/create-guten-block) [](https://www.npmjs.com/package/create-guten-block) [](https://github.com/ahmadawais/create-guten-block) [](https://twitter.com/mrahmadawais/) [](https://github.com/ahmadawais/create-guten-block/stargazers) [](https://github.com/ahmadawais?tab=followers)
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
|
||||
div.revslider_block span {
|
||||
font-weight: 700;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||||
font-size: 16px; }
|
||||
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right; }
|
||||
|
||||
div.revslider_block .slider_editor_button {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
|
||||
div.revslider_block .slider_edit_button, div.revslider_block .slider_editor_button, div.revslider_block .slider_edit_button:focus, div.revslider_block .slider_editor_button:focus, div.revslider_block .slider_edit_button:active, div.revslider_block .slider_editor_button:active, div.revslider_block .slider_edit_button:active:enabled, div.revslider_block .slider_editor_button:active:enabled,
|
||||
div.revslider_block .slider_edit_button.components-button, div.revslider_block .slider_editor_button.components-button, div.revslider_block .slider_edit_button.components-button:focus, div.revslider_block .slider_editor_button.components-button:focus, div.revslider_block .slider_edit_button.components-button:active, div.revslider_block .slider_editor_button.components-button:active, div.revslider_block .slider_edit_button.components-button:active:enabled, div.revslider_block .slider_editor_button.components-button:active:enabled {
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
|
||||
div.revslider_block .slider_edit_button:hover, div.revslider_block .slider_editor_button:hover {
|
||||
-webkit-filter: brightness(120%);
|
||||
filter: brightness(120%);
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
|
||||
.sliderBar {
|
||||
padding-left: 160px; }
|
||||
|
||||
.sliderImage {
|
||||
background: #e3e5e8;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
margin-top: 20px; }
|
||||
|
||||
.sliderImage div {
|
||||
width: 267px;
|
||||
height: 150px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
margin: 0 auto; }
|
||||
|
||||
.showSilderImage {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga'; }
|
||||
|
||||
.hideSilderImage {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 13px !important;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga'; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .editor-block-toolbar > .components-toolbar svg {
|
||||
color: inherit !important; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .editor-block-list__block-edit.block-editor-block-list__block-edit {
|
||||
background: #f6f6f9; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block {
|
||||
background-position: 14px 14px; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block .sliderBar {
|
||||
padding: 14px 14px 14px 160px;
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block .sliderImage {
|
||||
margin-top: 0px;
|
||||
padding: 14px; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .sliderBar slider_editor_button_wrap {
|
||||
display: none; }
|
||||
|
||||
.slider_editor_button_wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
width: 220px;
|
||||
height: 30px;
|
||||
background: #f6f6f9; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"].is-hovered .sliderBar .slider_editor_button_wrap,
|
||||
.wp-block[data-type="themepunch/revslider"].is-selected .sliderBar .slider_editor_button_wrap {
|
||||
display: inline-block; }
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .sliderBar span {
|
||||
white-space: nowrap;
|
||||
height: 23px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
max-width: 100%; }
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: 120px 30px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
|
||||
div.revslider_block span {
|
||||
font-weight: bold;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
|
||||
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right; }
|
||||
|
||||
/*
|
||||
[data-type="themepunch/revslider"] .editor-block-list__block-edit:before {
|
||||
outline: 1px solid rgba(145, 151, 162, 0.25) !important; }
|
||||
*/
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,106 @@
|
||||
<?php
|
||||
/**
|
||||
* Blocks Initializer
|
||||
*
|
||||
* Enqueue CSS/JS of all the blocks.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @package CGB
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if(!defined('ABSPATH')) exit();
|
||||
|
||||
if(!class_exists('RevSliderGutenberg')){
|
||||
|
||||
class RevSliderGutenberg {
|
||||
|
||||
private $prefix;
|
||||
|
||||
public function __construct($pre){
|
||||
$this->prefix = $pre;
|
||||
|
||||
// add ThemePunch block category
|
||||
add_filter('block_categories', array($this, 'create_block_category'), 10, 2);
|
||||
|
||||
// Hook: Frontend assets.
|
||||
add_action('enqueue_block_assets', array($this, 'revslider_gutenberg_cgb_block_assets'));
|
||||
|
||||
// Hook: Editor assets.
|
||||
add_action('enqueue_block_editor_assets', array($this, 'revslider_gutenberg_cgb_editor_assets'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Check Array for Value Recursive
|
||||
*/
|
||||
private function in_array_r($needle, $haystack, $strict = false){
|
||||
if(is_array($haystack) && !empty($haystack)){
|
||||
foreach($haystack as $item){
|
||||
if(($strict ? $item === $needle : $item == $needle) || (is_array($item) && $this->in_array_r($needle, $item, $strict))){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add ThemePunch Gutenberg Block Category
|
||||
*/
|
||||
public function create_block_category($categories, $post){
|
||||
if($this->in_array_r('themepunch', $categories)){
|
||||
return $categories;
|
||||
}
|
||||
|
||||
return array_merge($categories, array(array('slug' => 'themepunch', 'title' => __('ThemePunch', 'revslider'))));
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue Gutenberg block assets for both frontend + backend.
|
||||
*
|
||||
* @uses {wp-editor} for WP editor styles.
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function revslider_gutenberg_cgb_block_assets(){ // phpcs:ignore
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'revslider_gutenberg-cgb-style-css', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.style.build.css', dirname( __FILE__ )), // Block style CSS.
|
||||
array('wp-editor'), // Dependency to include the CSS after it.
|
||||
RS_REVISION// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css') // Version: File modification time.
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue Gutenberg block assets for backend editor.
|
||||
*
|
||||
* @uses {wp-blocks} for block type registration & related functions.
|
||||
* @uses {wp-element} for WP Element abstraction — structure of blocks.
|
||||
* @uses {wp-i18n} to internationalize the block's text.
|
||||
* @uses {wp-editor} for WP editor styles.
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function revslider_gutenberg_cgb_editor_assets(){ // phpcs:ignore
|
||||
// Scripts.
|
||||
wp_enqueue_script(
|
||||
'revslider_gutenberg-cgb-block-js', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.build.js', dirname( __FILE__ )), // Block.build.js: We register the block here. Built with Webpack.
|
||||
array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor'), // Dependencies, defined above.
|
||||
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js'), // Version: File modification time.
|
||||
RS_REVISION,
|
||||
true // Enqueue the script in the footer.
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'revslider_gutenberg-cgb-block-editor-css', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.editor.build.css', dirname( __FILE__ )), // Block editor CSS.
|
||||
array('wp-edit-blocks'), // Dependency to include the CSS after it.
|
||||
RS_REVISION
|
||||
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css') // Version: File modification time.
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "revslider-gutenberg-cgb-guten-block",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "cgb-scripts start",
|
||||
"build": "cgb-scripts build",
|
||||
"eject": "cgb-scripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"cgb-scripts": "^1.17.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: revslider-gutenberg — CGB Gutenberg Block Plugin
|
||||
* Plugin URI: https://github.com/ahmadawais/create-guten-block/
|
||||
* Description: revslider-gutenberg — is a Gutenberg plugin created via create-guten-block.
|
||||
* Author: mrahmadawais, maedahbatool
|
||||
* Author URI: https://AhmadAwais.com/
|
||||
* Version: 1.0.0
|
||||
* License: GPL2+
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.txt
|
||||
*
|
||||
* @package CGB
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Initializer.
|
||||
*/
|
||||
require_once plugin_dir_path( __FILE__ ) . 'src/gutenberg-block.php';
|
||||
new RevSliderGutenberg('');
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* Block dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import './editor.scss';
|
||||
|
||||
/**
|
||||
* Internal block libraries
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
const { registerBlockType } = wp.blocks;
|
||||
const { TextControl, Button } = wp.components;
|
||||
const { Component } = wp.element;
|
||||
|
||||
/**
|
||||
* RevSlider Editor Element
|
||||
*/
|
||||
export class RevSlider extends Component {
|
||||
|
||||
constructor() {
|
||||
|
||||
super( ...arguments );
|
||||
const { attributes: { text, sliderTitle, modal } } = this.props;
|
||||
this.state = {
|
||||
text,
|
||||
sliderTitle,
|
||||
modal
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
if(!this.props.attributes.checked) {
|
||||
|
||||
this.props.attributes.checked = true;
|
||||
//RS_SC_WIZARD.openTemplateLibrary();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {
|
||||
attributes: { text, sliderTitle, modal },
|
||||
setAttributes } = this.props;
|
||||
|
||||
window.revslider_react = this;
|
||||
|
||||
const openDialog = () => {
|
||||
RS_SC_WIZARD.openTemplateLibrary();
|
||||
}
|
||||
|
||||
const openSliderEditor = () => {
|
||||
RS_SC_WIZARD.openSliderEditor();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="revslider_block" data-modal={ this.state.modal } >
|
||||
<span><i class="material-icons">picture_in_picture</i>{this.state.sliderTitle} </span>
|
||||
<TextControl
|
||||
className="slider_slug"
|
||||
value={ this.state.text }
|
||||
onChange={ ( text ) => setAttributes( { text: this.state.text } ) }
|
||||
/>
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { openSliderEditor }
|
||||
className="slider_editor_button"
|
||||
>
|
||||
edit
|
||||
</Button>
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { openDialog }
|
||||
className="slider_edit_button"
|
||||
>
|
||||
Select Module
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*/
|
||||
export default registerBlockType(
|
||||
'themepunch/revslider',
|
||||
{
|
||||
title: __( 'Slider Revolution', 'revslider' ),
|
||||
description: __( 'Add your Slider Revolution.', 'revslider' ),
|
||||
category: 'themepunch',
|
||||
icon: {
|
||||
src: 'update',
|
||||
background: 'rgb(94, 53, 177)',
|
||||
color: 'white',
|
||||
viewbox: "0 0 24 24"
|
||||
},
|
||||
keywords: [
|
||||
__( 'Banner', 'revslider' ),
|
||||
__( 'CTA', 'revslider' ),
|
||||
__( 'Slider', 'revslider' ),
|
||||
],
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
}
|
||||
},
|
||||
edit: props => {
|
||||
const { setAttributes } = props;
|
||||
return (
|
||||
<div>
|
||||
<RevSlider {...{ setAttributes, ...props }} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save: props => {
|
||||
const { attributes: { text, sliderTitle, modal } } = props;
|
||||
return (
|
||||
<div className="revslider" data-modal={modal} data-slidertitle={sliderTitle}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
deprecated: [
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
return (
|
||||
<div className="revslider" data-slidertitle={props.attributes.sliderTitle}>
|
||||
{props.attributes.text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* Block dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import './editor.scss';
|
||||
|
||||
/**
|
||||
* Internal block libraries
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
const { registerBlockType } = wp.blocks;
|
||||
const { TextControl, Button, ToggleControl, PanelBody } = wp.components;
|
||||
const { Component } = wp.element;
|
||||
const { InspectorControls } = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* RevSlider Editor Element
|
||||
*/
|
||||
export class RevSlider extends Component {
|
||||
|
||||
constructor() {
|
||||
|
||||
super( ...arguments );
|
||||
const { attributes: { text, sliderTitle, modal, sliderImage, hideSliderImage } } = this.props;
|
||||
this.state = {
|
||||
text,
|
||||
sliderTitle,
|
||||
modal,
|
||||
sliderImage,
|
||||
hideSliderImage,
|
||||
message : ''
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.attributes.text && wp.data.select( 'core/editor' ).hasChangedContent()) {
|
||||
window.revslider_react = this;
|
||||
//this.props.attributes.checked = true;
|
||||
RS_SC_WIZARD.openTemplateLibrary();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
openDialog = () => {
|
||||
window.revslider_react = this;
|
||||
RS_SC_WIZARD.openTemplateLibrary();
|
||||
}
|
||||
|
||||
openSliderEditor = () => {
|
||||
window.revslider_react = this;
|
||||
RS_SC_WIZARD.openSliderEditor();
|
||||
};
|
||||
|
||||
openOptimizer = () => {
|
||||
window.revslider_react = this;
|
||||
RS_SC_WIZARD.openOptimizer();
|
||||
}
|
||||
|
||||
setSliderAttributes = (alias) => {
|
||||
setAttributes( { text: alias } );
|
||||
setAttributes( { sliderImage: this.state.sliderImage } );
|
||||
}
|
||||
|
||||
hideSliderImagePreview = () => {
|
||||
window.revslider_react = this;
|
||||
window.revslider_react.props.setAttributes( { hideSliderImage: this.state.hideSliderImage ? false : true } );
|
||||
this.state.hideSliderImage = this.state.hideSliderImage ? false : true;
|
||||
}
|
||||
|
||||
refreshSliderImage = () => {
|
||||
window.revslider_react = this;
|
||||
var alias_array = this.state.text.split('"');
|
||||
var data;
|
||||
|
||||
RVS.F.ajaxRequest('getSliderImage', { alias : alias_array[1] }, function(response) {
|
||||
if(response.success) {
|
||||
try {
|
||||
data = JSON.stringify(response.image);
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
catch(e) {
|
||||
data = false;
|
||||
}
|
||||
|
||||
if(data) {
|
||||
window.revslider_react.props.setAttributes( { sliderImage: data } );
|
||||
window.revslider_react.setState({ sliderImage: data });
|
||||
window.revslider_react.setState({ message : ''});
|
||||
//window.revslider_react.state.sliderImage = window.revslider_react.props.attributes.sliderImage = data;
|
||||
//window.revslider_react.forceUpdate();
|
||||
}
|
||||
else {
|
||||
//console.log('No image');
|
||||
window.revslider_react.setState({message: __('No Admin Thumb set')});
|
||||
window.setTimeout(function(){window.revslider_react.setState({ message : ''});},4000);
|
||||
}
|
||||
}
|
||||
else {
|
||||
window.revslider_react.setState({message: __('No Admin Thumb set')});
|
||||
window.setTimeout(function(){window.revslider_react.setState({ message : ''});},4000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const {
|
||||
attributes: { text, sliderTitle, sliderImage, modal },
|
||||
setAttributes } = this.props;
|
||||
|
||||
window.revslider_react = this;
|
||||
|
||||
return [
|
||||
<InspectorControls>
|
||||
<PanelBody title={ __('Admin Thumb') } initialOpen={ true }>
|
||||
<div className="showHideButtons">
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.refreshSliderImage }
|
||||
className="hideSilderImage"
|
||||
>
|
||||
|
||||
{ this.state.sliderImage ? 'cached' : 'insert_photo' }
|
||||
</Button>
|
||||
<span>{ this.state.sliderImage ? __('Refresh Thumb') : __('Load Thumb') }</span>
|
||||
</div>
|
||||
<div className="sliderImageMessage">{this.state.message}</div>
|
||||
{
|
||||
this.state.sliderImage && (
|
||||
<div className="showHideButtons">
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.hideSliderImagePreview }
|
||||
className={ 'hideSilderImage' }
|
||||
>
|
||||
{ !this.state.hideSliderImage ? 'visibility_off' : 'visibility'}
|
||||
</Button>
|
||||
<span>{ this.state.hideSliderImage ? __('Show Thumb') : __('Hide Thumb') }</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</PanelBody>
|
||||
<PanelBody title={ __('Optimization') } initialOpen={ true }>
|
||||
<div className="optimizerButtons">
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openOptimizer }
|
||||
className={ 'optimizerOpen' }
|
||||
>
|
||||
flash_on
|
||||
</Button>
|
||||
<span>Optimize File Sizes</span>
|
||||
</div>
|
||||
</PanelBody>
|
||||
|
||||
|
||||
</InspectorControls>
|
||||
,
|
||||
<div className="revslider_block" data-modal={ this.state.modal } >
|
||||
<div class="sliderBar">
|
||||
<span>{this.state.sliderTitle} </span>
|
||||
<TextControl
|
||||
className="slider_slug"
|
||||
value={ this.state.text }
|
||||
onChange={ ( text ) => setSliderAttributes ( this.state.text ) }
|
||||
/>
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openSliderEditor }
|
||||
className="slider_editor_button"
|
||||
>
|
||||
edit
|
||||
</Button>
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openDialog }
|
||||
className="slider_edit_button"
|
||||
>
|
||||
Select Module
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
this.state.sliderImage && !this.state.hideSliderImage && (
|
||||
<div className="sliderImage">
|
||||
<div style={{ backgroundImage : 'url(' + this.state.sliderImage +')'}}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*/
|
||||
export default registerBlockType(
|
||||
'themepunch/revslider',
|
||||
{
|
||||
title: __( 'Slider Revolution', 'revslider' ),
|
||||
description: __( 'Add your Slider Revolution.', 'revslider' ),
|
||||
category: 'themepunch',
|
||||
icon: {
|
||||
src: 'update',
|
||||
background: 'rgb(94, 53, 177)',
|
||||
color: 'white',
|
||||
viewbox: "0 0 24 24"
|
||||
},
|
||||
keywords: [
|
||||
__( 'Banner', 'revslider' ),
|
||||
__( 'CTA', 'revslider' ),
|
||||
__( 'Slider', 'revslider' ),
|
||||
],
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
},
|
||||
sliderImage: {
|
||||
type:'string'
|
||||
},
|
||||
hideSliderImage:{
|
||||
boolean: false
|
||||
}
|
||||
},
|
||||
edit: props => {
|
||||
const { setAttributes } = props;
|
||||
return (
|
||||
<div>
|
||||
<RevSlider {...{ setAttributes, ...props }} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save: props => {
|
||||
const { attributes: { text, sliderTitle, modal } } = props;
|
||||
return (
|
||||
<div className="revslider" data-modal={modal} data-slidertitle={sliderTitle}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
deprecated: [
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
return (
|
||||
<div className="revslider" data-slidertitle={props.attributes.sliderTitle}>
|
||||
{props.attributes.text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,164 @@
|
||||
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
|
||||
div.revslider_block span {
|
||||
font-weight: 700;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||||
font-size: 16px; }
|
||||
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.revslider_block .slider_editor_button {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.revslider_block .slider_edit_button, div.revslider_block .slider_editor_button, div.revslider_block .slider_edit_button:focus , div.revslider_block .slider_editor_button:focus, div.revslider_block .slider_edit_button:active , div.revslider_block .slider_editor_button:active, div.revslider_block .slider_edit_button:active:enabled , div.revslider_block .slider_editor_button:active:enabled{
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.revslider_block .slider_edit_button:hover, div.revslider_block .slider_editor_button:hover{
|
||||
filter: brightness(120%);
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-type="themepunch/revslider"] .editor-block-list__block-edit:before {
|
||||
outline: 1px solid rgba(145, 151, 162, 0.25) !important; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
|
||||
.sliderBar{
|
||||
padding-left: 160px;
|
||||
}
|
||||
.sliderImage{
|
||||
background: #e3e5e8;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sliderImage div {
|
||||
width: 267px;
|
||||
height:150px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.showSilderImage {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.hideSilderImage{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.showHideButtons span, .optimizerButtons span {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.optimizerOpen {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.wp-block[data-type="themepunch/revslider"] .editor-block-toolbar > .components-toolbar svg {
|
||||
color: inherit!important;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: 120px 30px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
|
||||
div.revslider_block span {
|
||||
font-weight: bold;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
|
||||
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right; }
|
||||
|
||||
[data-type="themepunch/revslider"] .editor-block-list__block-edit:before {
|
||||
outline: 1px solid rgba(145, 151, 162, 0.25) !important; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Gutenberg Blocks
|
||||
*
|
||||
* All blocks related JavaScript files should be imported here.
|
||||
* You can create a new block folder in this dir and include code
|
||||
* for that block here as well.
|
||||
*
|
||||
* All blocks should be included here since this is the file that
|
||||
* Webpack is compiling as the input file.
|
||||
*/
|
||||
|
||||
import './revslider';
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
|
||||
// Colors.
|
||||
$black: rgb(41, 41, 41);
|
||||
$white: #f4f4f4;
|
||||
$gray: #dedede;
|
||||
$green: #bada55;
|
||||
$red: orangered;
|
||||
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
/**
|
||||
* Blocks Initializer
|
||||
*
|
||||
* Enqueue CSS/JS of all the blocks.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @package CGB
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if( ! class_exists( 'RevSliderGutenberg' ) ) {
|
||||
|
||||
class RevSliderGutenberg {
|
||||
|
||||
private $prefix;
|
||||
|
||||
public function __construct($pre) {
|
||||
|
||||
$this->prefix = $pre;
|
||||
|
||||
// add ThemePunch block category
|
||||
add_filter('block_categories', array($this, 'create_block_category'), 10, 2);
|
||||
|
||||
// Hook: Frontend assets.
|
||||
add_action( 'enqueue_block_assets', array( $this, 'revslider_gutenberg_cgb_block_assets' ) );
|
||||
|
||||
// Hook: Editor assets.
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'revslider_gutenberg_cgb_editor_assets' ) );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Check Array for Value Recursive
|
||||
*/
|
||||
private function in_array_r($needle, $haystack, $strict = false){
|
||||
if(is_array($haystack) && !empty($haystack)){
|
||||
foreach($haystack as $item){
|
||||
if(($strict ? $item === $needle : $item == $needle) || (is_array($item) && $this->in_array_r($needle, $item, $strict))){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add ThemePunch Gutenberg Block Category
|
||||
*/
|
||||
public function create_block_category($categories, $post) {
|
||||
|
||||
if($this->in_array_r('themepunch', $categories)){
|
||||
return $categories;
|
||||
}
|
||||
|
||||
return array_merge($categories, array(array('slug' => 'themepunch', 'title' => __('ThemePunch', 'revslider'))));
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue Gutenberg block assets for both frontend + backend.
|
||||
*
|
||||
* @uses {wp-editor} for WP editor styles.
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function revslider_gutenberg_cgb_block_assets() { // phpcs:ignore
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'revslider_gutenberg-cgb-style-css', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
|
||||
array( 'wp-editor' ) // Dependency to include the CSS after it.
|
||||
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue Gutenberg block assets for backend editor.
|
||||
*
|
||||
* @uses {wp-blocks} for block type registration & related functions.
|
||||
* @uses {wp-element} for WP Element abstraction — structure of blocks.
|
||||
* @uses {wp-i18n} to internationalize the block's text.
|
||||
* @uses {wp-editor} for WP editor styles.
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function revslider_gutenberg_cgb_editor_assets() { // phpcs:ignore
|
||||
// Scripts.
|
||||
wp_enqueue_script(
|
||||
'revslider_gutenberg-cgb-block-js', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
|
||||
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
|
||||
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: File modification time.
|
||||
true // Enqueue the script in the footer.
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'revslider_gutenberg-cgb-block-editor-css', // Handle.
|
||||
plugins_url( $this->prefix . 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
|
||||
array( 'wp-edit-blocks' ) // Dependency to include the CSS after it.
|
||||
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
const deprecated = [
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
},
|
||||
sliderImage: {
|
||||
type:'string'
|
||||
},
|
||||
hideSliderImage:{
|
||||
boolean: false
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
const { attributes: { text, sliderTitle, modal } } = props;
|
||||
return (
|
||||
<div className="revslider" data-modal={modal} data-slidertitle={sliderTitle}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
return (
|
||||
<div className="revslider" data-slidertitle={props.attributes.sliderTitle}>
|
||||
{props.attributes.text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
popup: {
|
||||
type: 'object'
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
},
|
||||
sliderImage: {
|
||||
type:'string'
|
||||
},
|
||||
hideSliderImage:{
|
||||
boolean: false
|
||||
},
|
||||
offset: {
|
||||
type: 'object'
|
||||
},
|
||||
layout: {
|
||||
type: 'string '
|
||||
},
|
||||
alias: {
|
||||
type: 'string'
|
||||
},
|
||||
zindex: {
|
||||
type: 'string'
|
||||
},
|
||||
shortcode: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
const { attributes: { text, sliderTitle, modal, zindex } } = props;
|
||||
let style;
|
||||
style = zindex ? "z-index:"+zindex+";" : "";
|
||||
return (
|
||||
<div className="revslider" data-modal={modal} data-slidertitle={sliderTitle} style={style}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
popup: {
|
||||
type: 'object'
|
||||
},
|
||||
content: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
sliderTitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
},
|
||||
sliderImage: {
|
||||
type:'string'
|
||||
},
|
||||
hideSliderImage:{
|
||||
boolean: false
|
||||
},
|
||||
offset: {
|
||||
type: 'object'
|
||||
},
|
||||
layout: {
|
||||
type: 'string '
|
||||
},
|
||||
alias: {
|
||||
type: 'string'
|
||||
},
|
||||
zindex: {
|
||||
type: 'string'
|
||||
},
|
||||
shortcode: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
save( props ) {
|
||||
const { attributes: { text, content, sliderTitle, modal, zindex } } = props;
|
||||
let style;
|
||||
style = zindex ? "z-index:" + zindex + ";" : "";
|
||||
let shortcode = !content && text ? text : content;
|
||||
return (
|
||||
<div className="revslider" data-modal={ modal } data-slidertitle={ sliderTitle } style={ style }>
|
||||
{ shortcode }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export {deprecated};
|
||||
@@ -0,0 +1,119 @@
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
div.revslider_block span {
|
||||
font-weight: 700;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||||
font-size: 16px; }
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right; }
|
||||
div.revslider_block .slider_editor_button {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
div.revslider_block .slider_edit_button, div.revslider_block .slider_editor_button, div.revslider_block .slider_edit_button:focus, div.revslider_block .slider_editor_button:focus, div.revslider_block .slider_edit_button:active, div.revslider_block .slider_editor_button:active, div.revslider_block .slider_edit_button:active:enabled, div.revslider_block .slider_editor_button:active:enabled,
|
||||
div.revslider_block .slider_edit_button.components-button, div.revslider_block .slider_editor_button.components-button, div.revslider_block .slider_edit_button.components-button:focus, div.revslider_block .slider_editor_button.components-button:focus, div.revslider_block .slider_edit_button.components-button:active, div.revslider_block .slider_editor_button.components-button:active, div.revslider_block .slider_edit_button.components-button:active:enabled, div.revslider_block .slider_editor_button.components-button:active:enabled {
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
div.revslider_block .slider_edit_button:hover, div.revslider_block .slider_editor_button:hover {
|
||||
-webkit-filter: brightness(120%);
|
||||
filter: brightness(120%);
|
||||
border-color: #5e35b1;
|
||||
background: #5e35b1;
|
||||
color: #fff; }
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
.sliderBar {
|
||||
padding-left: 160px; }
|
||||
.sliderImage {
|
||||
background: #e3e5e8;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
margin-top: 20px; }
|
||||
.sliderImage div {
|
||||
width: 267px;
|
||||
height: 150px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
margin: 0 auto; }
|
||||
.showSilderImage {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 26px;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga'; }
|
||||
.hideSilderImage {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
vertical-align: top;
|
||||
line-height: 13px !important;
|
||||
/*font-size: 16px;*/
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga'; }
|
||||
.wp-block[data-type="themepunch/revslider"] .editor-block-toolbar > .components-toolbar svg {
|
||||
color: inherit !important; }
|
||||
.wp-block[data-type="themepunch/revslider"] .editor-block-list__block-edit.block-editor-block-list__block-edit { background: #f6f6f9 }
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block { background-position: 14px 14px; }
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block .sliderBar { padding: 14px 14px 14px 160px; }
|
||||
.wp-block[data-type="themepunch/revslider"] .revslider_block .sliderImage { margin-top: 0px; padding: 14px; }
|
||||
.wp-block[data-type="themepunch/revslider"] .sliderBar button { display: none; }
|
||||
.wp-block[data-type="themepunch/revslider"].is-hovered .sliderBar button,
|
||||
.wp-block[data-type="themepunch/revslider"].is-selected .sliderBar button { display: inline-block; }
|
||||
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* Block dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import './editor.scss';
|
||||
|
||||
/**
|
||||
* Internal block libraries
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
const { registerBlockType } = wp.blocks;
|
||||
|
||||
import { deprecated } from './deprecated';
|
||||
import { RevSlider } from './revslider';
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*/
|
||||
export default registerBlockType(
|
||||
'themepunch/revslider',
|
||||
{
|
||||
title: __( 'Slider Revolution', 'revslider' ),
|
||||
description: __( 'Add your Slider Revolution Module!', 'revslider' ),
|
||||
category: 'themepunch',
|
||||
icon: {
|
||||
src: 'update',
|
||||
background: 'rgb(94, 53, 177)',
|
||||
color: 'white',
|
||||
viewbox: "0 0 28 28"
|
||||
},
|
||||
keywords: [
|
||||
__( 'Banner', 'revslider' ),
|
||||
__( 'CTA', 'revslider' ),
|
||||
__( 'Slider', 'revslider' ),
|
||||
],
|
||||
attributes: {
|
||||
checked: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: 'boolean',
|
||||
default: false
|
||||
},
|
||||
content: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
text: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'text',
|
||||
},
|
||||
slidertitle: {
|
||||
selector: '.revslider',
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'data-slidertitle',
|
||||
},
|
||||
sliderImage: {
|
||||
type:'string'
|
||||
},
|
||||
hideSliderImage:{
|
||||
boolean: false
|
||||
},
|
||||
alias: {
|
||||
type: 'string'
|
||||
},
|
||||
zindex: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
edit: props => {
|
||||
const { setAttributes } = props;
|
||||
return (
|
||||
<div>
|
||||
<RevSlider {...{ setAttributes, ...props }} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
deprecated,
|
||||
save: props => {
|
||||
const { attributes: { text, content, slidertitle, modal, zindex } } = props;
|
||||
let style;
|
||||
style = zindex ? "z-index:"+zindex+";" : "";
|
||||
let shortcode = !content && text ? text : content;
|
||||
return (
|
||||
<div className="revslider" data-modal={modal} data-slidertitle={slidertitle} style={style}>
|
||||
{shortcode}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* RevSlider Editor Element
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Internal block libraries
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
/**
|
||||
* Component RevSlider for usage in block
|
||||
*/
|
||||
export class RevSliderImage extends Component {
|
||||
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.state = {
|
||||
response : undefined,
|
||||
alias : this.props.attributes.alias,
|
||||
slidertitle: this.props.attributes.slidertitle,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Load Slider Image before it is mounted
|
||||
componentWillMount(){
|
||||
this.loadSliderImage();
|
||||
}
|
||||
|
||||
// Load Slider Image when it is mounted
|
||||
componentDidMount() {
|
||||
//this.loadSliderImage();
|
||||
}
|
||||
|
||||
// When new Props are send to the Block it will reload the image when the alias has changed
|
||||
componentWillReceiveProps(){
|
||||
if(this.state.alias != this.props.attributes.alias)
|
||||
this.loadSliderImage();
|
||||
}
|
||||
|
||||
// Loads the Slider Admin Thumb via Ajax Call
|
||||
loadSliderImage(){
|
||||
this.setState({response: undefined});
|
||||
this.setState({alias: this.props.attributes.alias});
|
||||
var self = this;
|
||||
if(!this.props.attributes.alias){
|
||||
if(this.props.attributes.content!==undefined || this.props.attributes.text!==undefined){
|
||||
let shortcode = this.props.attributes.content!==undefined ? RVS.SC.parseShortCode(this.props.attributes.content) : RVS.SC.parseShortCode(this.props.attributes.text);
|
||||
if(shortcode.attributes.alias) {
|
||||
this.props.attributes.alias = shortcode.attributes.alias;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(this.props.attributes.alias){
|
||||
RVS.F.ajaxRequest('getSliderImage', { alias : this.props.attributes.alias }, function(response) {
|
||||
if(response.success) {
|
||||
if (response!==undefined && response.image!==undefined) {
|
||||
self.setState({
|
||||
response
|
||||
});
|
||||
}
|
||||
RVS.F.showWaitAMinute({fadeIn:0,text:RVS_LANG.loadingcontent});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Renders the different states of the image (loading, loaded and no image)
|
||||
render() {
|
||||
//Image Loaded
|
||||
if(this.state.response && this.state.response.image !== ""){
|
||||
return [
|
||||
<div className="sliderImage">
|
||||
<div style={{ backgroundImage : 'url(' + this.state.response.image +')'}}></div>
|
||||
</div>
|
||||
]
|
||||
}
|
||||
else {
|
||||
//Image Loading
|
||||
if(!this.state.response)
|
||||
return [
|
||||
<div className="sliderImageLoading"></div>
|
||||
]
|
||||
//No Image
|
||||
else {
|
||||
return [
|
||||
<div className="noSliderImage"></div>
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* RevSlider Editor Element
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Internal block libraries
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
const { TextControl, Button, Tooltip } = wp.components;
|
||||
if(typeof wp.blockEditor !== 'undefined')
|
||||
var { InspectorControls } = wp.blockEditor;
|
||||
else
|
||||
var { InspectorControls } = wp.editor;
|
||||
|
||||
|
||||
import { RevSliderImage } from './revSliderImage';
|
||||
|
||||
/**
|
||||
* Component RevSlider for usage in block
|
||||
*/
|
||||
export class RevSlider extends Component {
|
||||
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.state = jQuery.extend(true,{},this.props.attributes);
|
||||
window.revslider_react = {};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
revslider_react = this;
|
||||
// Create Block in RVS with current state
|
||||
RVS.SC.BLOCK = this.state;
|
||||
|
||||
// Open Template Library when block is added for the first time to the page
|
||||
if(!this.props.attributes.content && !this.props.attributes.text && wp.data.select( 'core/editor' ).isEditedPostDirty()) {
|
||||
RVS.SC.openTemplateLibrary('gutenberg');
|
||||
}
|
||||
else{
|
||||
// Fallback for saved blocks with no alias attribute (< RevSlider V6.1.6)
|
||||
if(!this.props.attributes.alias){
|
||||
let shortcode = this.props.attributes.content!==undefined ? RVS.SC.parseShortCode(this.props.attributes.content) : RVS.SC.parseShortCode(this.props.attributes.text);
|
||||
if(shortcode.attributes.alias) {
|
||||
this.props.attributes.alias = shortcode.attributes.alias;
|
||||
RVS.SC.BLOCK.alias = this.props.attributes.alias;
|
||||
this.props.setAttributes( { alias : shortcode.attributes.alias } );
|
||||
}
|
||||
}
|
||||
if(!this.props.attributes.slidertitle ){
|
||||
if(this.props.attributes.sliderTitle){
|
||||
this.props.setAttributes( { slidertitle : this.props.attributes.sliderTitle } );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Open Block Settings like offset, popup, admin thumb
|
||||
openBlockSettings = () => {
|
||||
var data = false;
|
||||
RVS.SC.BLOCK = this.state;
|
||||
revslider_react = this;
|
||||
if(!this.props.attributes.alias) return false;
|
||||
RVS.SC.openBlockSettings('gutenberg',this.props.attributes.content);
|
||||
};
|
||||
|
||||
// Open Template Library
|
||||
openLibrary = () => {
|
||||
revslider_react = this;
|
||||
RVS.SC.BLOCK = this.props.attributes;
|
||||
RVS.SC.openTemplateLibrary('gutenberg');
|
||||
}
|
||||
|
||||
// Link to Slider Editor in new tab
|
||||
openSliderEditor = () => {
|
||||
if(!this.props.attributes.alias) return false;
|
||||
RVS.SC.openSliderEditor(this.props.attributes.alias);
|
||||
};
|
||||
|
||||
// Open File Optimizer PopUp
|
||||
openOptimizer = () => {
|
||||
if(!this.props.attributes.alias) return false;
|
||||
RVS.SC.openOptimizer(this.props.attributes.alias);
|
||||
}
|
||||
|
||||
// Update Attributes in case Slider alias changes
|
||||
setSliderAttributes = (alias) => {
|
||||
setAttributes( { alias } );
|
||||
setAttributes( { sliderImage: this.state.sliderImage } );
|
||||
}
|
||||
|
||||
render() {
|
||||
revslider_react = this;
|
||||
// Set Attributes from State (state was changed in RevSlider JS)
|
||||
this.props.setAttributes(this.state);
|
||||
const { setAttributes } = this.props;
|
||||
|
||||
// Turn off Styling in Block Options Sidebar when leaving block
|
||||
{
|
||||
!this.props.isSelected &&
|
||||
(RVS.SC.updateBlockViews(false))
|
||||
}
|
||||
|
||||
if(!this.props.attributes.slidertitle ){
|
||||
if(this.props.attributes.sliderTitle){
|
||||
this.props.setAttributes( { slidertitle : this.props.attributes.sliderTitle } );
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
<InspectorControls>
|
||||
{
|
||||
this.props.attributes.alias &&
|
||||
<div className="rs_optimizer_button_wrapper" onClick={ this.openOptimizer } >
|
||||
<Button
|
||||
isDefault
|
||||
className={ 'rs_optimizer_button' }
|
||||
>
|
||||
flash_on
|
||||
</Button>
|
||||
<span>Optimize File Sizes</span>
|
||||
</div>
|
||||
}
|
||||
</InspectorControls>
|
||||
,
|
||||
<div className="revslider_block" data-modal={ this.props.attributes.modal } >
|
||||
<div class="sliderBar">
|
||||
<span>{ this.props.attributes.slidertitle } </span>
|
||||
<TextControl
|
||||
className="slider_slug"
|
||||
value={ this.props.attributes.content }
|
||||
onChange={ ( content ) => setSliderAttributes ( this.props.attributes.content ) }
|
||||
/>
|
||||
|
||||
<Tooltip text="Open Block Settings">
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openBlockSettings }
|
||||
className="slider_editor_button"
|
||||
>
|
||||
tune
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Open Slider Editor">
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openSliderEditor }
|
||||
className="slider_editor_button"
|
||||
>
|
||||
edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button
|
||||
isDefault
|
||||
onClick = { this.openLibrary }
|
||||
className="slider_edit_button"
|
||||
>
|
||||
Select Module
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
<RevSliderImage {...{ setAttributes, ...this.props }} />
|
||||
</div>
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
div.revslider_block {
|
||||
background: url(images/rs6_logo_2x.png);
|
||||
background-size: 120px 30px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 32px; }
|
||||
|
||||
div.revslider_block .components-text-control__input {
|
||||
display: none; }
|
||||
|
||||
div.revslider_block span {
|
||||
font-weight: bold;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
|
||||
|
||||
div.revslider_block .slider_slug {
|
||||
float: left; }
|
||||
|
||||
div.revslider_block .slider_edit_button {
|
||||
float: right; }
|
||||
|
||||
/*
|
||||
[data-type="themepunch/revslider"] .editor-block-list__block-edit:before {
|
||||
outline: 1px solid rgba(145, 151, 162, 0.25) !important; }
|
||||
*/
|
||||
|
||||
.editor-block-list-item-themepunch-revslider svg,
|
||||
.components-panel__body.edit-post-block-sidebar__panel svg.dashicons-update {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
|
||||
.editor-block-list-item-themepunch-revslider .editor-block-types-list__item-title {
|
||||
padding: 4px 1px 4px 1px; }
|
||||
Reference in New Issue
Block a user