first commit

This commit is contained in:
2024-07-15 11:28:08 +02:00
commit f52d538ea5
21891 changed files with 6161164 additions and 0 deletions

View File

@@ -0,0 +1,495 @@
<?php
/**
* Module Name: Interface Builder
* Description: The module for the creation of interfaces in the WordPress admin panel
* Author: Cherry Team
* Author URI: http://www.cherryframework.com/
* License: GPLv3
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
*
* @package Cherry_Framework
* @subpackage Modules
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'Cherry5_Interface_Builder' ) ) {
/**
* Class Cherry Interface Builder.
*
* @since 1.0.0
*/
class Cherry5_Interface_Builder {
/**
* Core version.
*
* @since 1.5.0
* @access public
* @var string
*/
public $core_version = '';
/**
* Module directory path.
*
* @since 1.5.0
* @access protected
* @var srting.
*/
protected $module_path;
/**
* Module settings.
*
* @since 1.0.0
* @access private
* @var array
*/
private $args = array(
'views' => array(
'section' => 'inc/views/section.php',
'component-tab-vertical' => 'inc/views/component-tab-vertical.php',
'component-tab-horizontal' => 'inc/views/component-tab-horizontal.php',
'component-toggle' => 'inc/views/component-toggle.php',
'component-accordion' => 'inc/views/component-accordion.php',
'component-repeater' => 'inc/views/component-repeater.php',
'settings' => 'inc/views/settings.php',
'control' => 'inc/views/control.php',
'settings-children-title' => 'inc/views/settings-children-title.php',
'tab-children-title' => 'inc/views/tab-children-title.php',
'toggle-children-title' => 'inc/views/toggle-children-title.php',
'form' => 'inc/views/form.php',
'html' => 'inc/views/html.php',
),
'views_args' => array(
'parent' => '',
'type' => '',
'view' => '',
'view_wrapping' => true,
'html' => '',
'scroll' => false,
'master' => false,
'title' => '',
'description' => '',
),
);
/**
* A reference to an instance of this class.
*
* @since 1.0.0
* @access private
* @var object
*/
private static $instance = null;
/**
* UI element instance.
*
* @since 1.0.0
* @access public
* @var object
*/
public $ui_elements = null;
/**
* The structure of the interface elements.
*
* @since 1.0.0
* @access private
* @var array
*/
private $structure = array();
/**
* Cherry_Interface_Builder constructor.
*
* @since 1.0.0
* @access public
* @return void
*/
public function __construct( $core, array $args = array() ) {
$this->args = array_merge_recursive(
$args,
$this->args
);
$this->core_version = $core->get_core_version();
$this->module_path = $args['module_path'];
$this->ui_elements = $core->init_module( 'cherry-ui-elements' );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
}
/**
* Register element type section.
*
* @since 1.0.0
* @access public
* @param array $args Options section.
* @return void
*/
public function register_section( array $args = array() ) {
$this->add_new_element( $args, 'section' );
}
/**
* Register element type component.
*
* @since 1.0.0
* @access public
* @param array $args Options component.
* @return void
*/
public function register_component( array $args = array() ) {
$this->add_new_element( $args, 'component' );
}
/**
* Register element type settings.
*
* @since 1.0.0
* @access public
* @param array $args Options settings.
* @return void
*/
public function register_settings( array $args = array() ) {
$this->add_new_element( $args, 'settings' );
}
/**
* Register element type control.
*
* @since 1.0.0
* @access public
* @param array $args Options control.
* @return void
*/
public function register_control( array $args = array() ) {
$this->add_new_element( $args, 'control' );
}
/**
* Register element type form.
*
* @since 1.0.0
* @access public
* @param array $args Options form.
* @return void
*/
public function register_form( array $args = array() ) {
$this->add_new_element( $args, 'form' );
}
/**
* Register element type html.
*
* @since 1.0.0
* @access public
* @param array $args Options control.
* @return void
*/
public function register_html( array $args = array() ) {
$this->add_new_element( $args, 'html' );
}
/**
* This function adds a new element to the structure.
*
* @since 1.0.0
* @access protected
* @param array $args Options new element.
* @param string $type Type new element.
* @return void
*/
protected function add_new_element( array $args = array(), $type = 'section' ) {
if ( ! isset( $args[0] ) && ! is_array( current( $args ) ) ) {
if ( 'control' !== $type && 'component' !== $type ) {
$args['type'] = $type;
}
$this->structure[ $args['id'] ] = $args;
} else {
foreach ( $args as $key => $value ) {
if ( 'control' !== $type && 'component' !== $type ) {
$value['type'] = $type;
}
$this->structure[ $key ] = $value;
}
}
}
/**
* Sorts the elements of the structure, adding child items to the parent.
*
* @since 1.0.0
* @access protected
* @param array $structure The original structure of the elements.
* @param string $parent_key The key of the parent element.
* @return array
*/
protected function sort_structure( array $structure = array(), $parent_key = null ) {
$new_array = array();
foreach ( $structure as $key => $value ) {
if (
( null === $parent_key && ! isset( $value['parent'] ) )
|| null === $parent_key && ! isset( $structure[ $value['parent'] ] )
|| ( isset( $value['parent'] ) && $value['parent'] === $parent_key )
) {
if ( ! isset( $value['id'] ) ) {
$value['id'] = $key;
}
if ( ! isset( $value['name'] ) ) {
$value['name'] = $key;
}
$new_array[ $key ] = $value;
$children = $this->sort_structure( $structure, $key );
if ( ! empty( $children ) ) {
$new_array[ $key ]['children'] = $children;
}
}
}
return $new_array;
}
/**
* Reset structure array.
* Call this method only after render.
*
* @since 1.0.1
* @return void
*/
public function reset_structure() {
$this->structure = array();
}
/**
* Get view for interface elements.
*
* @since 1.0.0
* @access protected
* @param string $type View type.
* @param array $args Input data.
* @return string
*/
protected function get_view( $type = 'control', array $args = array() ) {
if ( empty( $args['view'] ) ) {
$path = ( array_key_exists( $type, $this->args['views'] ) ) ? $this->args['views'][ $type ] : $this->args['views']['control'];
$path = is_array( $path ) ? $path[0] : $path;
$path = file_exists( $path ) ? $path : $this->module_path . $path;
} else {
$path = $args['view'];
}
return Cherry_Toolkit::render_view( $path, $args );
}
/**
* Render HTML elements.
*
* @since 1.0.0
* @access public
* @param bool $echo Input data.
* @param array $args The original structure of the elements.
* @return string
*/
public function render( $echo = true, array $args = array() ) {
if ( empty( $args ) ) {
$args = $this->structure;
}
if ( empty( $args ) ) {
return false;
}
$sorted_structure = $this->sort_structure( $args );
$output = $this->build( $sorted_structure );
$output = str_replace( array( "\r\n", "\r", "\n", "\t" ), '', $output );
$this->reset_structure();
return $this->output_method( $output, $echo );
}
/**
* Render HTML elements.
*
* @since 1.0.0
* @access protected
* @param array $args Input data.
* @return string
*/
protected function build( array $args = array() ) {
$output = '';
$views = $this->args['views'];
foreach ( $args as $key => $value ) {
$value = wp_parse_args(
$value,
$this->args['views_args']
);
$value['class'] = isset( $value['class'] ) ? $value['class'] . ' ' : '';
$value['class'] .= $value['id'] . ' ';
if ( $value['scroll'] ) {
$value['class'] .= 'cherry-scroll ';
}
if ( $value['master'] ) {
$value['class'] .= $value['master'] . ' ';
}
$type = array_key_exists( $value['type'], $views ) ? $value['type'] : 'field';
$has_child = isset( $value['children'] ) && is_array( $value['children'] ) && ! empty( $value['children'] );
switch ( $type ) {
case 'component-tab-vertical':
case 'component-tab-horizontal':
if ( $has_child ) {
$value['tabs'] = '';
foreach ( $value['children'] as $key_children => $value_children ) {
$value['tabs'] .= $this->get_view( 'tab-children-title', $value_children );
unset( $value['children'][ $key_children ]['title'] );
}
}
break;
case 'component-toggle':
case 'component-accordion':
if ( $has_child ) {
foreach ( $value['children'] as $key_children => $value_children ) {
$value['children'][ $key_children ]['title_in_view'] = $this->get_view( 'toggle-children-title', $value_children );
}
}
break;
case 'settings':
if ( isset( $value['title'] ) && $value['title'] ) {
$value['title'] = isset( $value['title_in_view'] ) ? $value['title_in_view'] : $this->get_view( 'settings-children-title', $value );
}
break;
case 'html':
$value['children'] = $value['html'];
break;
case 'form':
$value['accept-charset'] = isset( $value['accept-charset'] ) ? $value['accept-charset'] : 'utf-8';
$value['action'] = isset( $value['action'] ) ? $value['action'] : '' ;
$value['autocomplete'] = isset( $value['autocomplete'] ) ? $value['autocomplete'] : 'on';
$value['enctype'] = isset( $value['enctype'] ) ? $value['enctype'] : 'application/x-www-form-urlencoded';
$value['method'] = isset( $value['method'] ) ? $value['method'] : 'post';
$value['novalidate'] = ( isset( $value['novalidate'] ) && $value['novalidate'] ) ? 'novalidate' : '';
$value['target'] = isset( $value['target'] ) ? $value['target'] : '';
break;
case 'field':
$ui_args = $value;
$ui_args['class'] = isset( $ui_args['child_class'] ) ? $ui_args['child_class'] : '' ;
if ( isset( $ui_args['options_callback'] ) ) {
$ui_args['options'] = call_user_func( $ui_args['options_callback'] );
}
unset( $ui_args['master'] );
$value['children'] = $this->ui_elements->get_ui_element_instance( $ui_args['type'], $ui_args )->render();
break;
}
if ( $has_child ) {
$value['children'] = $this->build( $value['children'] );
}
$output .= ( $value['view_wrapping'] ) ? $this->get_view( $type, $value ) : $value['children'];
}
return $output;
}
/**
* Output HTML.
*
* @since 1.0.0
* @access protected
* @param string $output Output HTML.
* @param boolean $echo Output type.
* @return string
*/
protected function output_method( $output = '', $echo = true ) {
if ( ! filter_var( $echo, FILTER_VALIDATE_BOOLEAN ) ) {
return $output;
} else {
echo $output;
}
}
/**
* Enqueue javascript and stylesheet interface builder.
*
* @since 4.0.0
* @access public
* @return void
*/
public function enqueue_assets() {
wp_enqueue_script(
'cherry-interface-builder',
esc_url( Cherry_Core::base_url( 'inc/assets/min/cherry-interface-builder.min.js', $this->module_path ) ),
array( 'jquery' ),
$this->core_version,
true
);
wp_enqueue_style(
'cherry-interface-builder',
esc_url( Cherry_Core::base_url( 'inc/assets/min/cherry-interface-builder.min.css', $this->module_path ) ),
array(),
$this->core_version,
'all'
);
}
/**
* Returns the instance.
*
* @since 1.0.0
* @access public
* @return object
*/
public static function get_instance( $core, $args ) {
// If the single instance hasn't been set, set it now.
if ( null == self::$instance ) {
self::$instance = new self( $core, $args );
}
return self::$instance;
}
}
}

View File

@@ -0,0 +1,17 @@
.cherry-ui-kit{
button{
*{
pointer-events: none;
}
}
}
.cherry-component{
&__content{
.cherry-settings__content{
display: none;
&.show{
display: inherit;
}
}
}
}

View File

@@ -0,0 +1,193 @@
/**
* Interface Builder
*/
;( function( $, CherryJsCore ) {
'use strict';
CherryJsCore.utilites.namespace( 'interfaceBuilder' );
CherryJsCore.interfaceBuilder = {
init: function() {
this.component.init();
$( document )
.on( 'cherryInterfaceBuilder', this.component.init.bind( this.component ) );
},
component: {
tabClass: '.cherry-tab',
accordionClass: '.cherry-accordion',
toggleClass: '.cherry-toggle',
buttonClass: '.cherry-component__button',
contentClass: '.cherry-settings__content',
buttonActiveClass: 'active',
showClass: 'show',
localStorage: {},
init: function () {
this.localStorage = this.getState() || {};
this.componentInit( this.tabClass );
this.componentInit( this.accordionClass );
this.componentInit( this.toggleClass );
this.addEvent();
},
addEvent: function() {
$( 'body' )
.off( 'click.cherryInterfaceBuilder' )
.on( 'click.cherryInterfaceBuilder',
this.tabClass + ' ' + this.buttonClass + ', ' +
this.toggleClass + ' ' + this.buttonClass + ', ' +
this.accordionClass + ' ' + this.buttonClass,
this.componentClick.bind( this )
);
},
componentInit: function( componentClass ) {
var _this = this,
components = $( componentClass ),
componentId = null,
button = null,
contentId = null,
notShow = '';
components.each( function( index, component ) {
component = $( component );
componentId = component.data( 'compotent-id' );
switch ( componentClass ) {
case _this.toggleClass:
if ( _this.localStorage[ componentId ] && _this.localStorage[ componentId ].length ) {
notShow = _this.localStorage[ componentId ].join( ', ' );
}
$( _this.contentClass, component )
.not( notShow )
.addClass( _this.showClass )
.prevAll( _this.buttonClass )
.addClass( _this.buttonActiveClass );
break;
case _this.tabClass:
case _this.accordionClass:
if ( _this.localStorage[ componentId ] ) {
contentId = _this.localStorage[ componentId ][ 0 ];
button = $( '[data-content-id="' + contentId + '"]', component );
} else {
button = $( _this.buttonClass, component ).eq( 0 );
contentId = button.data( 'content-id' );
}
_this.showElement( button, component, contentId );
break;
}
} );
},
componentClick: function( event ) {
var $target = $( event.target ),
$parent = $target.closest( this.tabClass + ', ' + this.accordionClass + ', ' + this.toggleClass ),
expr = new RegExp( this.tabClass + '|' + this.accordionClass + '|' + this.toggleClass ),
componentName = $parent[0].className.match( expr )[ 0 ].replace( ' ', '.' ),
contentId = $target.data( 'content-id' ),
componentId = $parent.data( 'compotent-id' ),
activeFlag = $target.hasClass( this.buttonActiveClass ),
itemClosed;
switch ( componentName ) {
case this.tabClass:
if ( ! activeFlag ) {
this.hideElement( $parent );
this.showElement( $target, $parent, contentId );
this.localStorage[ componentId ] = new Array( contentId );
this.setState();
}
break;
case this.accordionClass:
this.hideElement( $parent );
if ( ! activeFlag ) {
this.showElement( $target, $parent, contentId );
this.localStorage[ componentId ] = new Array( contentId );
} else {
this.localStorage[ componentId ] = {};
}
this.setState();
break;
case this.toggleClass:
$target
.toggleClass( this.buttonActiveClass )
.nextAll( contentId )
.toggleClass( this.showClass );
if ( Array.isArray( this.localStorage[ componentId ] ) ) {
itemClosed = this.localStorage[ componentId ].indexOf( contentId );
if ( -1 !== itemClosed ) {
this.localStorage[ componentId ].splice( itemClosed, 1 );
} else {
this.localStorage[ componentId ].push( contentId );
}
} else {
this.localStorage[ componentId ] = new Array( contentId );
}
this.setState();
break;
}
$target.blur();
return false;
},
showElement: function ( button, holder, contentId ) {
button
.addClass( this.buttonActiveClass );
holder
.data( 'content-id', contentId );
$( contentId, holder )
.addClass( this.showClass );
},
hideElement: function ( holder ) {
var contsntId = holder.data( 'content-id' );
$( '[data-content-id="' + contsntId + '"]', holder )
.removeClass( this.buttonActiveClass );
$( contsntId, holder )
.removeClass( this.showClass );
},
getState: function() {
try {
return JSON.parse( localStorage.getItem( 'interface-builder' ) );
} catch ( e ) {
return false;
}
},
setState: function() {
try {
localStorage.setItem( 'interface-builder', JSON.stringify( this.localStorage ) );
} catch ( e ) {
return false;
}
}
}
};
CherryJsCore.interfaceBuilder.init();
}( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,511 @@
$color-1: #fff; // Background color.
$widget-bg: #495159; // Background color in widgets.
$color-2: #efefef; // Background color.
$color-3: #96989a; // Description color and tabs button text color.
$color-4: #b4b7ba; //
$color-5: #f1f1f1; // Scrollbar background
$color-6: #e5e5e5; // Hover scrollbar background
$color-7: #206ff4; // Scrollbar track background
$link-color: #298ffc; // link color.
$link-hover-color: #23282d; // link hover color.
$shadow: 2px 2px 5px rgba(0,0,0,0.05); //Shadow.
$border: 1px solid rgba(0, 0, 0, 0.1) ;
$br-radius: 3px; // Border radius.
$padding: 5px;
$margin: 5px;
$max-heught: 700px;
@import "use-in-js";
html{
font-size: 13px;
}
.cherry-ui-kit{
h1{
font-weight: 700;
font-size: 2.308rem;
line-height: 2.308rem;
.dashicons{
font-size: 3rem;
line-height: inherit;
width: 20px;
margin: 0 $margin * 2 0 $margin * -0.5;
}
}
h2{
font-weight: 600;
font-size: 1.538rem;
line-height: 1.538rem;
.dashicons{
font-size: 2rem;
line-height: inherit;
width: 20px;
margin-right: $margin * 2;
}
}
h3{
font-weight: 600;
font-size: 1.231rem;
line-height: 1.231rem;
.dashicons{
font-size: 1.7rem;
line-height: inherit;
margin-right: $margin * 0.5;
}
}
h4{
font-weight: 500;
font-size: 1.077rem;
line-height: 1.077rem;
}
h5{
font-weight: 500;
font-size: 1.077rem;
line-height: 1.077rem;
}
h6{
font-weight: 400;
font-size: 1rem;
line-height: 1rem;
}
a{
color: $link-color;
text-decoration: none;
&:hover{
color: $link-hover-color;
}
&:focus{
outline: 1px solid rgba(41, 143, 252, .6);
box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
}
}
&__description{
font-size: 0.9rem;
color: $color-3;
margin: $margin 0;
}
&__title{
margin: $margin*2 0;
}
&.hide{
display: none;
}
}
.cherry-control + .cherry-control, .cherry-settings + .cherry-control{
border-top: $border;
}
.cherry-section{
padding: $padding;
background-color: $color-1;
margin-left: -10px;
&__title, &__description{
margin: $margin 0 0 0;
}
& + .cherry-ui-kit {
border-top: $border;
}
@media ( min-width: 783px ) {
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
padding: $padding * 1.5;
margin: $margin * 1.5 $margin * 1.5 0 0;
&__holder{
background-color: $color-2;
border-radius: $br-radius;
padding: $padding * 1.5;
}
&__inner{
}
&__info{
background-color: $color-1;
border-radius: $br-radius;
padding: $padding * 1.5;
box-shadow: $shadow;
margin-bottom: $padding * 1.5;
}
.cherry-settings{
box-shadow: $shadow;
border-radius: $br-radius;
border: $border;
background-color: $color-1;
margin-top: $padding * 1.5;
&:first-child{
margin-top: 0;
}
}
}
@media ( min-width: 961px ) {
padding: $padding * 3;
margin: $margin * 2 $margin * 2 0 0;
&__info{
padding: $padding * 3;
margin-bottom: $padding * 3;
}
&__holder{
padding: $padding * 3;
}
.cherry-settings{
margin-top: $padding * 3;
}
}
}
.cherry-component{
padding: $padding * 2 0;
@media ( min-width: 783px ) {
padding: $padding * 1.5;
}
@media ( min-width: 961px ) {
padding: $padding * 3;
}
& + * {
border-top: $border;
}
&__title{
margin-top: 0;
}
& &__content{
.cherry-settings{
padding: 0;
border-top: none;
}
}
&__button{
display: block;
min-height: 45px;
.cherry-ui-kit__title {
color: inherit;
}
&.active, &:hover{
color: $link-color;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
&:focus{
outline: none;
box-shadow: inset 0 0 1px 0 rgba(41,143,252,0.5);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
&.cherry-accordion, &.cherry-toggle{
.cherry-component__button{
width: 100%;
padding: $padding * 1.5 $padding * 2;
border:0;
background: none;
cursor: pointer;
position: relative;
.widget &{
background-color: $widget-bg;
color: $color-1;
}
.cherry-toggle__title {
font-weight: 700;
font-size: 14px;
float: left;
margin: 0;
}
>span[class*="icon"]{
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
font-size: 25px;
color: $color-4;
padding: 5px 5px;
width: 10px;
height: 9px;
text-align: left;
overflow: hidden;
.widget &{
color: $color-1;
}
&.hide-icon{
&:before{
position: relative;
top: -8px;
left: -9px;
}
transform:scaleX(1);
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&.show-icon{
&:before{
position: relative;
top: -7px;
left: -9px;
}
transform:scaleX(0);
transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
&.active{
>span[class*="icon"]{
&.show-icon{
transform:scaleX(1);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&.hide-icon{
transform:scaleX(0);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
}
}
.cherry-component__button + .cherry-settings__content{
border-top: $border;
}
> .cherry-ui-kit__content{
& > .cherry-settings + .cherry-settings{
margin-top: $margin;
}
> .cherry-settings{
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
.widget &{
box-shadow:none;
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
}
}
&.cherry-tab{
.cherry-tab__tabs{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
border-bottom: $border;
.cherry-component__button{
order: 0;
flex: 0 1 100%;
align-self: auto;
padding: $padding * 1.5 $padding * 2;
border: 0;
background: none;
cursor: pointer;
&.active{
-ms-box-shadow: inset 0px -3px 0px 0px $link-color;
box-shadow: inset 0px -3px 0px 0px $link-color;
}
.cherry-tab__title {
font-weight: 700;
font-size: 14px;
float: left;
margin: 0;
}
& + button{
border-top: $border;
}
}
}
.cherry-tab__body{
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
background-color: $color-1;
.cherry-settings{
box-shadow: none;
border-radius: 0;
border: none;
background-color: inherit;
margin: 0;
}
}
@media ( min-width: 783px ) {
.cherry-tab__tabs{
border: solid 1px rgba(0,0,0,0.1);
.cherry-component__button{
& + button{
border-top: none;
}
}
}
.cherry-tab__body{
border: none;
.cherry-tab__content{
border: $border;
}
}
&--horizontal{
>.cherry-tab__body{
border-radius: none;
>.cherry-tab__tabs{
flex-wrap: nowrap;
flex-direction: row;
border-radius:$br-radius $br-radius 0 0;
border-bottom: none;
.cherry-component__button{
flex: 0 1 auto;
}
}
>.cherry-tab__content{
border-radius: 0 0 $br-radius $br-radius;
}
}
}
&--vertical{
>.cherry-tab__body{
display: flex;
border-radius: none;
>.cherry-tab__tabs{
flex-direction: row;
-webkit-box-flex: 0;
flex: 0 1 20%;
border-radius:$br-radius 0 0 $br-radius;
border-right: none;
.cherry-component__button{
text-align: right;
.cherry-tab__title {
width: 100%;
}
&.active{
box-shadow: inset -3px 0px 0px $link-color;
}
}
}
>.cherry-tab__content{
-webkit-box-flex: 0;
flex: 0 1 80%;
border-radius: 0 $br-radius $br-radius 0;
}
}
}
}
@media ( min-width: 1200px ) {
&--vertical{
.cherry-tab__tabs{
flex: 0 1 20%;
}
.cherry-tab__content{
flex: 0 1 80%;
}
}
}
}
.widget &{
padding: 0;
&__content{
margin: 0 $margin * -1.5 $margin * 2;
.cherry-control{
padding: $padding * 1.5 $padding * 2;
}
}
}
}
.cherry-settings{
& + & {
border-top: $border;
}
& &__title{
margin-bottom: $margin;
}
&__description, & &__title{
margin-left: $margin;
@media ( min-width: 783px ) {
margin-left: $margin * 1.5;
}
@media ( min-width: 961px ) {
margin-left: $margin * 3;
}
}
}
.cherry-control{
padding: $padding * 3 0;
margin: 0 $margin;
&__title{
margin: 0 0 $margin 0 ;
}
&__description{
margin-top: 0;
}
.cherry-ui-container {
margin: 0;
}
@media (min-width: 783px) {
padding: $padding * 4;
margin: 0 $margin * 1.5;
display: flex;
flex-flow: row nowrap;
&__info{
-webkit-box-flex: 0;
flex: 0 1 30%;
padding-right: $padding * 1.5;
}
&__content{
-webkit-box-flex: 0;
flex: 0 1 70%;
}
}
@media ( min-width: 961px ) {
padding: $padding * 6 0;
margin: 0 $margin * 3;
}
.widget & {
padding: $padding * 1.5 0;
flex-direction: column;
&__content{
-webkit-box-flex: 0;
flex: 0 1 100%;
}
&__info{
-webkit-box-flex: 0;
flex: 0 1 100%;
padding-right: 0;
}
}
}
.cherry-section.cherry-scroll > .cherry-section__holder > .cherry-section__inner,
.cherry-tab__content > .cherry-scroll,
.cherry-accordion__content > .cherry-scroll > .cherry-settings__content,
.cherry-toggle__content > .cherry-scroll > .cherry-settings__content,
{
@media ( min-width: 783px ) {
max-height: $max-heught;
overflow-y: auto;
position: relative;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
&-button {
width: 0px;
height: 0px;
}
&-thumb {
background-color: $link-color;
border: none;
border-radius: $br-radius;
&:hover, &:active {
background: $color-7;
}
}
&-track {
background-color: $color-1;
border: none;
border-radius: $br-radius;
}
&-corner {
background: transparent;
}
}
}
}

View File

@@ -0,0 +1 @@
!function(t,s){"use strict";s.utilites.namespace("interfaceBuilder"),s.interfaceBuilder={init:function(){this.component.init(),t(document).on("cherryInterfaceBuilder",this.component.init.bind(this.component))},component:{tabClass:".cherry-tab",accordionClass:".cherry-accordion",toggleClass:".cherry-toggle",buttonClass:".cherry-component__button",contentClass:".cherry-settings__content",buttonActiveClass:"active",showClass:"show",localStorage:{},init:function(){this.localStorage=this.getState()||{},this.componentInit(this.tabClass),this.componentInit(this.accordionClass),this.componentInit(this.toggleClass),this.addEvent()},addEvent:function(){t("body").off("click.cherryInterfaceBuilder").on("click.cherryInterfaceBuilder",this.tabClass+" "+this.buttonClass+", "+this.toggleClass+" "+this.buttonClass+", "+this.accordionClass+" "+this.buttonClass,this.componentClick.bind(this))},componentInit:function(s){var e=this,a=t(s),o=null,i=null,n=null,l="";a.each(function(a,c){switch(c=t(c),o=c.data("compotent-id"),s){case e.toggleClass:e.localStorage[o]&&e.localStorage[o].length&&(l=e.localStorage[o].join(", ")),t(e.contentClass,c).not(l).addClass(e.showClass).prevAll(e.buttonClass).addClass(e.buttonActiveClass);break;case e.tabClass:case e.accordionClass:e.localStorage[o]?(n=e.localStorage[o][0],i=t('[data-content-id="'+n+'"]',c)):(i=t(e.buttonClass,c).eq(0),n=i.data("content-id")),e.showElement(i,c,n)}})},componentClick:function(s){var e,a=t(s.target),o=a.closest(this.tabClass+", "+this.accordionClass+", "+this.toggleClass),i=new RegExp(this.tabClass+"|"+this.accordionClass+"|"+this.toggleClass),n=o[0].className.match(i)[0].replace(" ","."),l=a.data("content-id"),c=o.data("compotent-id"),r=a.hasClass(this.buttonActiveClass);switch(n){case this.tabClass:r||(this.hideElement(o),this.showElement(a,o,l),this.localStorage[c]=new Array(l),this.setState());break;case this.accordionClass:this.hideElement(o),r?this.localStorage[c]={}:(this.showElement(a,o,l),this.localStorage[c]=new Array(l)),this.setState();break;case this.toggleClass:a.toggleClass(this.buttonActiveClass).nextAll(l).toggleClass(this.showClass),Array.isArray(this.localStorage[c])?(e=this.localStorage[c].indexOf(l),-1!==e?this.localStorage[c].splice(e,1):this.localStorage[c].push(l)):this.localStorage[c]=new Array(l),this.setState()}return a.blur(),!1},showElement:function(s,e,a){s.addClass(this.buttonActiveClass),e.data("content-id",a),t(a,e).addClass(this.showClass)},hideElement:function(s){var e=s.data("content-id");t('[data-content-id="'+e+'"]',s).removeClass(this.buttonActiveClass),t(e,s).removeClass(this.showClass)},getState:function(){try{return JSON.parse(localStorage.getItem("interface-builder"))}catch(t){return!1}},setState:function(){try{localStorage.setItem("interface-builder",JSON.stringify(this.localStorage))}catch(t){return!1}}}},s.interfaceBuilder.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,30 @@
<?php
/**
* Accordion template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-component cherry-accordion <?php echo esc_attr( $__data['class'] ); ?>" data-compotent-id="#<?php echo esc_attr( $__data['id'] ) ?>">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h2 class="cherry-ui-kit__title cherry-component__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h2>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-component__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-component__content cherry-accordion__content" role="group" >
<?php echo $__data['children'] ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,30 @@
<?php
/**
* Repeater template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-component cherry-repeater <?php echo esc_attr( $__data['class'] ); ?>" data-compotent-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h2 class="cherry-ui-kit__title cherry-component__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h2>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-component__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-component__content" role="group" >
<?php echo $__data['children']; ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,35 @@
<?php
/**
* Horizontal tab template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-component cherry-tab cherry-tab--horizontal <?php echo esc_attr( $__data['class'] ) ?>" data-compotent-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h2 class="cherry-ui-kit__title cherry-component__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h2>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-component__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-tab__body" >
<div class="cherry-tab__tabs" role="navigation" >
<?php echo $__data['tabs']; ?>
</div>
<div class="cherry-ui-kit__content cherry-component__content cherry-tab__content" role="group" >
<?php echo $__data['children']; ?>
</div>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,35 @@
<?php
/**
* Verticall tab template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-component cherry-tab cherry-tab--vertical <?php echo esc_attr( $__data['class'] ); ?>" data-compotent-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h2 class="cherry-ui-kit__title cherry-component__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h2>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-component__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-tab__body" >
<div class="cherry-tab__tabs" role="navigation" >
<?php echo $__data['tabs']; ?>
</div>
<div class="cherry-ui-kit__content cherry-component__content cherry-tab__content" role="group" >
<?php echo $__data['children']; ?>
</div>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,30 @@
<?php
/**
* Toggle template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-component cherry-toggle <?php echo esc_attr( $__data['class'] ); ?>" data-compotent-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h2 class="cherry-ui-kit__title cherry-component__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h2>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-component__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-component__content cherry-toggle__content" role="group" >
<?php echo $__data['children']; ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,34 @@
<?php
/**
* Control template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-control <?php echo esc_attr( $__data['class'] ); ?>">
<?php if ( ! empty( $__data['title'] ) || ! empty( $__data['description'] ) ) { ?>
<div class="cherry-control__info">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h4 class="cherry-ui-kit__title cherry-control__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h4>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-control__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
</div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-control__content" role="group" >
<?php echo $__data['children']; ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,24 @@
<?php
/**
* Form template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<form class="cherry-form <?php echo esc_attr( $__data['class'] ); ?>" id="<?php echo esc_attr( $__data['id'] ); ?>" name="<?php echo esc_attr( $__data['id'] ); ?>" accept-charset="<?php echo esc_attr( $__data['accept-charset'] ); ?>" action="<?php echo esc_attr( $__data['action'] ); ?>" autocomplete="<?php echo esc_attr( $__data['autocomplete'] ); ?>" enctype="<?php echo esc_attr( $__data['enctype'] ); ?>" method="<?php echo esc_attr( $__data['method'] ); ?>" target="<?php echo esc_attr( $__data['target'] ); ?>" <?php echo esc_attr( $__data['novalidate'] ); ?> >
<?php
if ( ! empty( $__data['children'] ) ) {
echo $__data['children'];
}
?>
</form>

View File

@@ -0,0 +1,24 @@
<?php
/**
* HTML template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit <?php echo esc_attr( $__data['class'] ); ?>">
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content" role="group" >
<?php echo $__data['children']; ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,36 @@
<?php
/**
* Section template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-section <?php echo esc_attr( $__data['class'] ); ?>" onclick="void(0)">
<div class="cherry-section__holder">
<div class="cherry-section__inner">
<div class="cherry-section__info">
<?php if ( ! empty( $__data['title'] ) ) { ?>
<h1 class="cherry-ui-kit__title cherry-section__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h1>
<?php } ?>
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-section__description " role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
</div>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-section__content" role="group" >
<?php echo $__data['children']; ?>
</div>
<?php } ?>
</div>
</div>
</div>

View File

@@ -0,0 +1,18 @@
<?php
/**
* Settings title template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<h3 class="cherry-ui-kit__title cherry-settings__title" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h3>

View File

@@ -0,0 +1,32 @@
<?php
/**
* Settings template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="cherry-ui-kit cherry-settings <?php echo esc_attr( $__data['class'] ); ?>">
<?php if ( ! empty( $__data['title'] ) ) {
echo $__data['title'];
} ?>
<?php if ( ! empty( $__data['children'] ) || ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__content cherry-settings__content" role="group" id="<?php echo esc_attr( $__data['id'] ); ?>" >
<?php if ( ! empty( $__data['description'] ) ) { ?>
<div class="cherry-ui-kit__description cherry-settings__description" role="note" ><?php echo wp_kses_post( $__data['description'] ); ?></div>
<?php } ?>
<?php if ( ! empty( $__data['children'] ) ) { ?>
<?php echo $__data['children']; ?>
<?php } ?>
</div>
<?php } ?>
</div>

View File

@@ -0,0 +1,20 @@
<?php
/**
* Tabs title template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<button class="cherry-tab__button cherry-component__button" role="button" title="<?php echo esc_attr( $__data['title'] ); ?>" aria-expanded="false" data-content-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<h3 class="cherry-ui-kit__title cherry-tab__title" aria-grabbed="true" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h3>
</button>

View File

@@ -0,0 +1,22 @@
<?php
/**
* Toggle title template.
*
* @package Cherry_Interface_Builder
* @subpackage Views
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<button class="cherry-toggle__header cherry-component__button" role="button" aria-expanded="false" data-content-id="#<?php echo esc_attr( $__data['id'] ); ?>">
<h3 class="cherry-ui-kit__title cherry-toggle__title" aria-grabbed="true" role="banner" ><?php echo wp_kses_post( $__data['title'] ); ?></h3>
<span class="dashicons dashicons-arrow-down hide-icon"></span>
<span class="dashicons dashicons-arrow-up show-icon"></span>
</button>