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,271 @@
jQuery( document ).on( 'ready', function( /*$, CherryJsCore*/ ) {
var $ = jQuery,
CherryJsCore = window.CherryJsCore;
CherryJsCore.utilites.namespace( 'cherry5InsertShortcode' );
CherryJsCore.cherry5InsertShortcode = {
openPopUpButton: '.cherry5-is__open-button',
closePopUpButton: '.cherry5-is__close-button',
insertionWindow: '.cherry5-is__modal-window',
insertionPopUp: '.cherry5-is__popup',
insertionPopUpBg: '.cherry5-is__background',
shortcodeOptionHolder: '.cherry5-is__shortcodes-options',
shortcodeOptionHolderClass: '.cherry5-is__shortcode-form.show',
insertButton: '.cherry5-is__insert-button',
spinner: '.cherry-loader-wrapper',
contentArea: '.cherry5-is__shortcode-content',
sidebar: '.cherry5-is__popup-sidebar',
sidebarButton: '.cherry5-is__sidebar-button',
insertShortcodeId: 'cherry5_insert_shortcode',
getShortcodeOptionButton: '.cherry5-is__get-shotcode',
getShortcodeOptionInstance: null,
selectedContent: '',
openedShortcode: [],
devMode: false,
sessionStorage:{
optionsTemplate: {},
activeShortcode: {}
},
init: function() {
this.devMode = ( 'true' === window.cherry5InsertShortcode.devMode ) ? true : false ;
this.sessionStorage = ( ! this.devMode ) ? this.getState() || this.sessionStorage : this.sessionStorage ;
this.getShortcodeOptionInstance = new CherryJsCore.CherryAjaxHandler(
{
handlerId: this.insertShortcodeId,
successCallback: this.getShortcodeOptionCallback.bind( this )
}
);
this.addEvent();
this.switchFirstShortcode();
},
addEvent: function() {
$( 'body' )
.on( 'click.cherry5InsertShortcode', this.openPopUpButton, this.showPopUp.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.closePopUpButton, this.hidePopUp.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.insertionPopUpBg, this.hidePopUp.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.insertButton, this.insertShortcode.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.insertButton, this.hidePopUp.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.getShortcodeOptionButton, this.getShortcodeOption.bind( this ) )
.on( 'click.cherry5InsertShortcode', this.sidebarButton, this.openSodebar.bind( this ) );
},
showPopUp: function() {
var activeShortcode;
if ( window.tinymce ) {
if ( window.tinymce.get( 'content' ) && window.tinymce.get( 'content' ).selection ) {
this.selectedContent = window.tinymce.get( 'content' ).selection.getContent( { format: 'text' } );
}
activeShortcode = this.sessionStorage.activeShortcode;
this.afterShowShortcode( activeShortcode.pluginSlug + '-' + activeShortcode.shortcodeSlug, activeShortcode.enclosing );
}
$( this.insertionWindow ).addClass( 'open show' );
$( this.insertionPopUp, this.insertionWindow ).off( 'animationend' );
},
hidePopUp: function() {
this.selectedContent = '';
this.openedShortcode = [];
$( this.insertionWindow ).removeClass( 'open' );
$( this.insertionPopUp, this.insertionWindow ).on( 'animationend', this.hideModalWindow.bind( this ) );
},
hideModalWindow: function() {
$( this.insertionWindow ).removeClass( 'show' );
},
switchFirstShortcode: function() {
var data = this.sessionStorage.activeShortcode,
target = null ;
if ( data.pluginSlug && data.shortcodeSlug ) {
target = $( '#button-' + data.pluginSlug + '-' + data.shortcodeSlug );
} else {
target = $( '.cherry5-is__shortcode-list:first > li:first .cherry5-is__get-shotcode' );
}
this.switchShortcode( target );
},
getShortcodeOption: function( event ) {
this.switchShortcode( $( event.target ) );
return false;
},
switchShortcode: function( targetButton ) {
var pluginSlug = targetButton.data( 'plugin-slug' ),
shortcodeSlug = targetButton.data( 'shortcode-slug' ),
shortcodeId = pluginSlug + '-' + shortcodeSlug,
shortcodeSection = $( '#' + shortcodeId ),
data;
$( this.insertButton, this.insertionPopUp ).attr( 'disabled', 'disabled' );
// Remove class to active button
this.hide( $( this.getShortcodeOptionButton + '.show' ) );
// Add class to active button
this.show( targetButton );
this.hide( $( this.shortcodeOptionHolderClass ) );
if ( shortcodeSection[0] ) {
data = this.sessionStorage.optionsTemplate[ shortcodeId ];
this.setProxyStorage( data, shortcodeId );
this.show( shortcodeSection );
this.afterShowShortcode( shortcodeId, data.enclosing );
return;
}
if ( ! this.devMode && this.sessionStorage.optionsTemplate[ shortcodeId ] ) {
this.getShortcodeOptionCallback( { data: this.sessionStorage.optionsTemplate[ shortcodeId ] } );
return;
}
this.show( $( this.spinner, this.shortcodeOptionHolder ) );
this.getShortcodeOptionInstance.sendData( { 'plugin_slug': pluginSlug, 'shortcode_slug': shortcodeSlug } );
},
getShortcodeOptionCallback: function( response ) {
var data = response.data,
holder = $( this.shortcodeOptionHolder, 'body' ),
shortcodeId;
if ( data.error ) {
window.console.log( data.message );
return;
}
shortcodeId = data.pluginSlug + '-' + data.shortcodeSlug;
this.setProxyStorage( data, shortcodeId );
this.hide( $( this.spinner, this.shortcodeOptionHolder ) );
holder.append( data.html );
this.afterShowShortcode( shortcodeId, data.enclosing );
$( document ).trigger( 'cherryInterfaceBuilder' );
$( 'body' ).trigger( { type: 'cherry-ui-elements-init', _target: $( '#' + shortcodeId, holder ) } );
},
setProxyStorage: function( data, id ) {
if ( data ) {
this.sessionStorage.optionsTemplate[ id ] = data;
this.sessionStorage.activeShortcode = data;
}
if ( ! this.devMode ) {
this.setState();
}
},
afterShowShortcode: function( shortcodeId, enclosing ) {
var defaultContent,
content = '';
if ( enclosing && -1 === this.openedShortcode.indexOf( shortcodeId ) ) {
defaultContent = this.sessionStorage.activeShortcode.defaultContent;
if ( this.selectedContent ) {
content = this.selectedContent;
} else if ( defaultContent ) {
content = defaultContent;
}
$( '#' + shortcodeId + '-content' ).val( content );
this.openedShortcode.push( shortcodeId );
}
$( this.insertButton, this.insertionPopUp ).removeAttr( 'disabled' );
},
insertShortcode: function() {
var activeShortcode = this.sessionStorage.activeShortcode,
slug = activeShortcode.shortcodeSlug,
pluginSlug = activeShortcode.pluginSlug,
shortcodeId = pluginSlug + '-' + slug,
enclosing = activeShortcode.enclosing,
tepmlate = ( enclosing ) ? '[$1$2]$3[/$1]' : '[$1$2]',
attrs = $( 'form#' + shortcodeId ).serializeArray(),
sortedAttra = {},
outputAttr = '',
content = '',
key,
attr,
attrName,
output;
if ( attrs[0] ) {
for ( key in attrs ) {
attr = attrs[ key ];
attrName = attr.name.replace( /\[\S*\]/g, '' );
if ( 'cherry5-is__shortcode-content' === attrName ) {
continue;
}
if ( ! sortedAttra[ attrName ] ) {
sortedAttra[ attrName ] = attr.value;
continue;
} else {
sortedAttra[ attrName ] += ',' + attr.value;
continue;
}
}
$.map( sortedAttra, function( elem, index ) {
if ( elem ) {
outputAttr += ' ' + index + '="' + elem + '"' ;
}
} );
}
if ( enclosing ) {
content = $( '#' + shortcodeId + '-content' ).val();
}
output = tepmlate
.replace( /\$1/g, slug )
.replace( /\$2/g, outputAttr )
.replace( /\$3/g, content );
window.wp.media.editor.insert( output );
},
getState: function() {
try {
return JSON.parse( sessionStorage.getItem( 'cherry5-insert-shortcode' ) );
} catch ( e ) {
return false;
}
},
setState: function() {
try {
sessionStorage.setItem( 'cherry5-insert-shortcode', JSON.stringify( this.sessionStorage ) );
} catch ( e ) {
return false;
}
},
show: function( target ) {
target.addClass( 'show' );
},
hide: function( target ) {
target.removeClass( 'show' );
},
openSodebar: function() {
$( this.sidebar ).toggleClass( 'open' );
}
};
CherryJsCore.cherry5InsertShortcode.init();
} );

View File

@@ -0,0 +1,491 @@
$border-color: #e5e5e5;
$link-color: #298ffc; // link color.
$link-color-2: #23282d; // link color.
$color-1: #206ff4; // Scrollbar track background
$color-2: #e5e5e5; // Scrollbar background.
$color-3: #fff; // Background color.
$br-radius: 5px; // Border radius.
$min_screen_width: '961px';
$middle_screen_width: '1200px';
$padding: 15px;
$shadow: 0px 5px 21px rgba(0, 0, 0, 0.1); //Shadow.
$border: 1px solid rgba(0, 0, 0, 0.1) ;
.cherry5-is{
&__open-button{
padding: 0 7px;
margin-right: 5px;
margin-bottom: 4px;
vertical-align: top;
text-transform: capitalize;
box-sizing: border-box;
white-space: nowrap;
text-decoration: none;
font-weight: normal;
line-height: 26px;
.cherry5-insert-shortcode-icon {
margin-right: 5px;
display: inline-block;
line-height: 1.1;
}
@media screen and (max-width: 782px) {
height: auto;
line-height: normal;
padding: 6px 14px;
vertical-align: middle;
}
}
&__icon{
width: 18px;
height: 18px;
margin-right: 10px;
line-height: 22px;
vertical-align: text-top;
}
&__modal-window{
position: fixed;
display: none;
top: 0px;
right: 0;
left: 0;
bottom: 0;
z-index: 99999;
justify-content: center;
align-items: center;
&.show{
display: flex;
}
@media ( min-width: 780px ) {
top: 32px;
}
}
&__background{
background-color: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation-name: simple-fade-out;
animation-fill-mode: both;
animation-duration: 0.25s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
.open &{
animation-name: simple-fade-in;
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
}
&__popup{
background-color: $color-3;
order: 0;
align-self: center;
height: 100%;
flex: 0 1 100%;
width: 100%;
z-index: 1;
display: flex;
flex-direction: column;
transition: all 0.5s ease;
animation-name: close-pop-up;
animation-fill-mode: both;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
.open &{
animation-name: open-pop-up;
}
@media ( min-width: $min_screen_width ) {
height: 85%;
flex: 0 1 85%;
box-shadow:$shadow;
border-radius: $br-radius;
border: $border;
}
}
&__popup-header{
border-bottom: 1px solid $border-color;
}
&__popup-header-inner{
display: flex;
}
&__popup-title{
flex: 0 1 100%;
padding: $padding - 5;
margin: 0;
@media ( min-width: $min_screen_width ) {
padding: $padding;
}
}
&__close-button{
flex: 0 1 auto;
padding: $padding - 5;
border-left: 1px solid $border-color;
cursor: pointer;
box-sizing: border-box;
width: 43px;
padding: 10px;
transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
box-shadow: inset 0px 0px 0px rgba(41,143,252,0.0);
&:hover{
color: $link-color;
outline: none;
box-shadow: inset 0px 0px 10px rgba(41,143,252,0.5);
};
@media ( min-width: $min_screen_width ) {
padding: $padding;
width: 50px;
}
}
&__popup-body{
display: flex;
height: 100%;
min-height: 50%;
position: relative;
}
&__popup-sidebar{
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
flex-direction: row;
right: 100%;
margin-right: -41px;
transition: right .5s cubic-bezier(0.215, 0.61, 0.355, 1), margin-right .5s cubic-bezier(0.215, 0.61, 0.355, 1);
&.open{
right: 0%;
margin-right: -1px;
}
@media ( min-width: $min_screen_width ) {
position: relative;
flex: 0 1 50%;
align-self: stretch;
width: inherit;
right: inherit;
margin-right:0;
}
@media ( min-width: 1200px ) {
flex: 0 1 50%;
}
@media ( min-width: 1500px ) {
flex: 0 1 30%;
}
}
&__sidebar-button{
min-height: 100%;
flex: 0 1 44px;
border-top: none;
border-left: $border;
border-right: $border;
background: #fff;
cursor: pointer;
position: relative;
box-sizing: border-box;
.close, .open{
position: absolute;
top: 50%;
left: 50%;
font-size: 45px;
width: 38px;
height: 44px;
margin: -22px 0 0 -20px;
text-align: left;
}
.open{
display: block;
}
.close{
display: none;
}
.cherry5-is__popup-sidebar.open &{
.open{
display: none;
}
.close{
display: block;
}
}
@media ( min-width: $min_screen_width ) {
display: none;
}
}
&__sidebar-list{
background-color: $color-3;
box-sizing: border-box;
overflow-y: scroll;
flex: 0 1 100%;
align-self: stretch;
.cherry-component.cherry-accordion{
.cherry-component__title{
margin: 10px 15px 15px;
}
.cherry-accordion__title [class*="icon"], .cherry-settings ul [class*="icon"]{
float: left;
text-align: left;
margin-right: 10px;
line-height: 0.9;
}
.cherry-settings {
box-shadow: none;
border-radius: 0;
border-left: 0;
border-right: 0;
&__content{
background: $border-color;
overflow: hidden;
box-shadow: inset 0px 0px 10px rgba(163, 163, 163, 0.3);
}
ul{
margin: 15px 20px;
.cherry5-is__get-shotcode{
color: $link-color-2;
transition: color 350ms ease-in-out;
background: none;
display: block;
width: 100%;
text-align: left;
padding: 0;
margin: 0;
border: none;
line-height: 1.5;
&:hover, &.show{
color: $link-color;
};
}
li + li {
margin-top: 15px
}
}
& + .cherry-settings{
margin-top: 0;
border-top: 0;
}
}
}
}
&__popup-section{
box-sizing: border-box;
width: 100%;
flex: 0 1 100%;
padding-left: 30px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
.cherry-component{
> .cherry-component__title, > .cherry-component__description{
margin: 20px;
}
}
.cherry-accordion, .cherry-toggle{
.cherry-component__content{
.cherry-settings{
border-radius: 0;
border-right: 0;
border-left: 0;
}
}
}
.cherry-tab{
>.cherry-tab__body{
border-radius: 0;
.cherry-tab__tabs{
border-radius: 0;
border-left:0;
border-bottom: 0;
}
.cherry-tab__content{
border-radius: 0;
border-bottom: 0;
border-right: 0;
}
}
}
@media ( min-width: $min_screen_width ) {
padding-left: 0;
}
}
&__shortcodes-options{
flex: 0 1 100%;
@media ( min-width: $min_screen_width ) {
position: relative;
flex: 0 1 100%;
}
}
&__content-area{
padding: $padding - 5 $padding - 5 $padding - 5 $padding + 5;
border-bottom: $border;
@media ( min-width: $min_screen_width ) {
padding: $padding;
}
}
&__content-area-title{
margin-top:0;
}
&__shortcode-form{
display: none;
&-header{
border-bottom: $border;
.cherry5-is__shortcode-title, .cherry5-is__shortcode-description{
margin: 20px;
}
}
&.show{
display: flex;
flex-direction: column;
min-height: 100%;
}
}
&__popup-footer{
flex: 0 1 auto;
align-self: auto;
border-top: 1px solid $border-color;
padding: $padding - 5;
background: $color-3;
@media ( min-width: $min_screen_width ) {
padding: $padding;
}
}
&__insert-button{
float: right;
transition: all .5s ease;
@media ( max-width: $min_screen_width ) {
padding: $padding - 6 $padding - 3;
}
&[disabled]{
opacity: 0.8;
cursor: default;
pointer-events: none;
}
}
&.cherry-ui-kit {
.cherry-component{
padding: 0;
}
}
&__has-not-option{
font-size: 1.5rem;
text-align: center;
flex: 1 1 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-content: stretch;
align-items: center;
&-text{
}
}
}
.cherry-scroll{
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
margin: -5px;
&-button {
width: 0px;
height: 0px;
}
&-thumb {
background-color: $link-color;
border: none;
border-radius: $br-radius;
&:hover, &:active {
background: $color-1;
}
}
&-track {
background-color: $color-2;
border: none;
border-radius: $br-radius;
}
&-corner {
background: transparent;
}
}
}
.cherry-loader {
display: block;
width: 20px;
height: 20px;
animation: spin .7s linear infinite;
border: 3px solid $border-color;
border-top: 3px solid #3498DB;
border-radius: 50%;
&-wrapper {
transition: opacity .5s ease, transform .5s ease;
transform: scale(0);
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -13px 0 0 -13px;
&.show{
display: block;
transform: scale(1);
opacity: 1;
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes open-pop-up {
0% {
transform: scale( 0.5 );
opacity: 0;
}
100%{
transform: scale( 1 );
opacity: 1;
}
}
@keyframes close-pop-up {
0% {
transform: scale( 1 );
opacity: 1;
}
100%{
transform: scale( 0.5 );
opacity: 0;
}
}
@keyframes simple-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.7;
}
}
@keyframes simple-fade-out {
0% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long