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 @@
.cherry5-ui-button{position:relative;display:inline-block;font-size:11px;line-height:18px;text-decoration:none;padding:4px 22px;color:#23282d;text-transform:uppercase;border-radius:4px;border-width:1px;border-style:solid;outline:none;cursor:pointer;transition:all 200ms linear}.cherry5-ui-button:before{position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:4px;background-image:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);content:''}.cherry5-ui-button:hover:before{background-image:linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%)}.cherry5-ui-button:active:before{opacity:0}.cherry5-ui-button.cherry5-ui-button-normal-style{color:#23282d;border-color:#d7d7d7 #b7b7b7 #b7b7b7 #d7d7d7;background-color:#f0f0f0}.cherry5-ui-button.cherry5-ui-button-normal-style:active{background-color:#e1e1e1;border-color:#9e9e9e #d7d7d7 #d7d7d7 #9e9e9e}.cherry5-ui-button.cherry5-ui-button-success-style{color:#fff;border-color:#49c56a #3a9e54 #3a9e54 #49c56a;background-color:#49c66a}.cherry5-ui-button.cherry5-ui-button-success-style:active{background-color:#3ba956;border-color:#2c7940 #49c56a #49c56a #2c7940}.cherry5-ui-button.cherry5-ui-button-primary-style{color:#fff;border-color:#5b9add #3e6a99 #3e6a99 #5b9add;background-color:#2a90fc}.cherry5-ui-button.cherry5-ui-button-primary-style:active{background-color:#206ff4;border-color:#2f5175 #5b9add #5b9add #2f5175}.cherry5-ui-button.cherry5-ui-button-secondary-style{color:#fff;border-color:#777879 #41464d #41464d #777879;background-color:#495159}.cherry5-ui-button.cherry5-ui-button-secondary-style:active{background-color:#495159;border-color:#2a2d31 #777879 #777879 #2a2d31}.cherry5-ui-button.cherry5-ui-button-danger-style{color:#fff;border-color:#e54444 #b83636 #b83636 #e54444;background-color:#e64545}.cherry5-ui-button.cherry5-ui-button-danger-style:active{background-color:#c73434;border-color:#912a2a #e54444 #e54444 #912a2a}.cherry5-ui-button.cherry5-ui-button-warning-style{color:#fff;border-color:#faa832 #c98627 #c98627 #faa832;background-color:#faa832}.cherry5-ui-button.cherry5-ui-button-warning-style:active{background-color:#ee8425;border-color:#9e6a1f #faa832 #faa832 #9e6a1f}

View File

@@ -0,0 +1,66 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
.cherry5-ui-button{
@include button_base();
&.cherry5-ui-button-normal-style {
color: $dark_color;
border-color: $normal_outset_1 $normal_outset_2 $normal_outset_2 $normal_outset_1;
background-color: $normal_gradint_2;
&:active {
background-color: $normal_bg_color;
border-color: darken( $normal_outset_2, 10%) $normal_outset_1 $normal_outset_1 darken( $normal_outset_2, 10%);
}
}
&.cherry5-ui-button-success-style {
color: $light_color;
border-color: $success_outset_1 $success_outset_2 $success_outset_2 $success_outset_1;
background-color: $success_gradint_2;
&:active {
background-color: $success_bg_color;
border-color: darken( $success_outset_2, 10%) $success_outset_1 $success_outset_1 darken( $success_outset_2, 10%);
}
}
&.cherry5-ui-button-primary-style {
color: $light_color;
border-color: $primary_outset_1 $primary_outset_2 $primary_outset_2 $primary_outset_1;
background-color: $primary_gradint_2;
&:active {
background-color: $primary_bg_color;
border-color: darken( $primary_outset_2, 10%) $primary_outset_1 $primary_outset_1 darken( $primary_outset_2, 10%);
}
}
&.cherry5-ui-button-secondary-style {
color: $light_color;
border-color: $secondary_outset_1 $secondary_outset_2 $secondary_outset_2 $secondary_outset_1;
background-color: $secondary_gradint_2;
&:active {
background-color: $secondary_bg_color;
border-color: darken( $secondary_outset_2, 10%) $secondary_outset_1 $secondary_outset_1 darken( $secondary_outset_2, 10%);
}
}
&.cherry5-ui-button-danger-style{
color: $light_color;
border-color: $danger_outset_1 $danger_outset_2 $danger_outset_2 $danger_outset_1;
background-color: $danger_gradint_2;
&:active {
background-color: $danger_bg_color;
border-color: darken( $danger_outset_2, 10%) $danger_outset_1 $danger_outset_1 darken( $danger_outset_2, 10%);
}
}
&.cherry5-ui-button-warning-style{
color: $light_color;
border-color: $warning_outset_1 $warning_outset_2 $warning_outset_2 $warning_outset_1;
background-color: $warning_gradint_2;
&:active {
background-color: $warning_bg_color;
border-color: darken( $warning_outset_2, 10%) $warning_outset_1 $warning_outset_1 darken( $warning_outset_2, 10%);
}
}
}

View File

@@ -0,0 +1,40 @@
@mixin button_base() {
position: relative;
display: inline-block;
font-size: 11px;
line-height: 18px;
text-decoration: none;
padding: 4px 22px;
color: $dark_color;
text-transform: uppercase;
border-radius: $border_radius_small;
border-width: 1px;
border-style: solid;
outline: none;
cursor: pointer;
transition: all 200ms linear;
&:before {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: $border_radius_small;
background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
content: '';
}
&:hover {
&:before {
background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}
}
&:active {
&:before {
opacity: 0;
}
}
}

View File

@@ -0,0 +1,46 @@
$light_color: #ffffff;
$dark_color: #23282d;
$normal_bg_color: #e1e1e1;
$normal_gradint_1: #ffffff;
$normal_gradint_2: #f0f0f0;
$normal_outset_1: #d7d7d7;
$normal_outset_2: #b7b7b7;
$primary_bg_color: #206ff4;
$primary_gradint_1: #5fadff;
$primary_gradint_2: #2a90fc;
$primary_outset_1: #5b9add;
$primary_outset_2: #3e6a99;
$secondary_bg_color: #495159;
$secondary_gradint_1: #4c5054;
$secondary_gradint_2: #495159;
$secondary_outset_1: #777879;
$secondary_outset_2: #41464d;
$success_bg_color: #3ba956;
$success_gradint_1: #71e18f;
$success_gradint_2: #49c66a;
$success_outset_1: #49c56a;
$success_outset_2: #3a9e54;
$danger_bg_color: #c73434;
$danger_gradint_1: #f98888;
$danger_gradint_2: #e64545;
$danger_outset_1: #e54444;
$danger_outset_2: #b83636;
$warning_bg_color: #ee8425;
$warning_gradint_1: #ffcb81;
$warning_gradint_2: #faa832;
$warning_outset_1: #faa832;
$warning_outset_2: #c98627;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,86 @@
<?php
/**
* Class for the building ui-button elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Button' ) ) {
/**
* Class for the building ui-button elements.
*/
class UI_Button extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-button-id',
'name' => 'cherry-ui-button-name',
'value' => 'button',
'disabled' => false,
'form' => '',
'formaction' => '',
'button_type' => 'button',
'style' => 'normal',
'content' => 'Button',
'class' => '',
'master' => '',
);
/**
* Constructor method for the UI_Button class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-button-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Button.
*
* @since 1.0.0
*/
public function render() {
$html = Cherry_Toolkit::render_view(
Cherry_UI_Elements::$module_path . 'inc/ui-elements/ui-button/view/button-view.php',
$this->settings
);
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Button.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-button',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-button/assets/min/ui-button.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1,37 @@
<?php
/**
* Ui-Button view
*
* @package Cherry_UI_Elements
* @subpackage View
* @author Cherry Team <cherryframework@gmail.com>
* @copyright Copyright (c) 2012 - 2017, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
$classes = array( 'cherry5-ui-button', 'cherry5-ui-button-' . $__data['style'] . '-style', $__data['master'], $__data['class'], 'ui-button' );
$classes = array_filter( $classes );
$class = trim( implode( ' ', $classes ) );
$attrs = Cherry_Toolkit::join(
array(
'type' => esc_attr( $__data['button_type'] ),
'id' => esc_attr( $__data['id'] ),
'name' => esc_attr( $__data['name'] ),
'class' => esc_attr( $class ),
'form' => esc_attr( $__data['form'] ),
'formaction' => esc_attr( $__data['formaction'] ),
)
);
if ( filter_var( $__data['disabled'], FILTER_VALIDATE_BOOLEAN ) ) {
$attrs .= ' disabled';
}
?>
<button <?php echo $attrs; ?>><?php echo $__data['content']; ?></button>

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.hide{display:none !important}.cherry-checkbox-item{width:20px;height:20px;display:inline-block;border-radius:2px;margin-right:10px;margin-bottom:10px;cursor:pointer;position:relative;background-color:#f1f1f1;user-select:none;transition:all 0.4s cubic-bezier(0.77, 0, 0.175, 1)}.cherry-checkbox-item .marker{position:absolute;width:20px;height:20px;top:0px;left:0px;color:#fff;font-size:20px;transition:inherit;transform:scale(0)}.cherry-checkbox-item .marker:before{transition:inherit;position:relative;left:-1px}.cherry-lable-content{display:flex}.cherry-checkbox-input[checked]+.cherry-checkbox-item{background-color:#48c569}.cherry-checkbox-input[checked]+.cherry-checkbox-item .marker{transform:scale(1)}.cherry-checkbox-label{font-size:12px;line-height:20px;color:#23282d;user-select:none}.cherry-checkbox-label:focus{outline:1px solid rgba(41,143,252,0.6);box-shadow:0px 0px 2px rgba(41,143,252,0.6)}

View File

@@ -0,0 +1 @@
!function(e,t){"use strict";t.utilites.namespace("ui_elements.checkbox"),t.ui_elements.checkbox={inputClass:'.cherry-checkbox-input[type="hidden"]:not([name*="__i__"])',labelClass:".cherry-checkbox-label, .cherry-checkbox-item",init:function(){e(document).on("ready.cherry-ui-elements-init",this.addEvent.bind(this)).on("cherry-ui-elements-init",this.initState.bind(this))},addEvent:function(){e("body").on("click.masterSlave",this.labelClass,this.switchState.bind(this)),this.initState()},initState:function(){for(var t,i,s,n=e(this.inputClass),c=n.length-1;c>=0;c--)t=e(n[c]),i=t.data(),s=t.closest("form"),jQuery.isEmptyObject(i)||e("."+i.slave,s)[t[0].checked?"removeClass":"addClass"]("hide")},switchState:function(t){var i=e(t.currentTarget).siblings(this.inputClass),s=i.data(),n=i[0].checked,c=i.closest("form");i.val(n?"false":"true").attr("checked",!n).trigger("change"),jQuery.isEmptyObject(s)||e("."+s.slave,c)[n?"addClass":"removeClass"]("hide")}},t.ui_elements.checkbox.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,58 @@
/**
* Checkbox
*/
( function( $, CherryJsCore ) {
'use strict';
CherryJsCore.utilites.namespace('ui_elements.checkbox');
CherryJsCore.ui_elements.checkbox = {
inputClass: '.cherry-checkbox-input[type="hidden"]:not([name*="__i__"])',
labelClass: '.cherry-checkbox-label, .cherry-checkbox-item',
init: function() {
$( document )
.on( 'ready.cherry-ui-elements-init', this.addEvent.bind( this ) )
.on( 'cherry-ui-elements-init', this.initState.bind( this ) );
},
addEvent: function() {
$( 'body' ).on( 'click.masterSlave', this.labelClass, this.switchState.bind( this ) );
this.initState();
},
initState: function(){
var $_input = $( this.inputClass ),
i = $_input.length - 1,
$_target,
data,
wrapper;
for ( ; i >= 0; i-- ) {
$_target = $( $_input[ i ] );
data = $_target.data();
wrapper = $_target.closest('form');
if ( jQuery.isEmptyObject( data ) ) {
continue;
} else {
$( '.' + data.slave, wrapper )[ ( $_target[0].checked ) ? 'removeClass' : 'addClass' ]( 'hide' );
}
}
},
switchState: function( event ) {
var $_input = $( event.currentTarget ).siblings( this.inputClass ),
data = $_input.data(),
flag = $_input[0].checked,
wrapper = $_input.closest('form');
$_input
.val( ( flag ) ? 'false' : 'true' )
.attr( 'checked', ( flag ) ? false : true )
.trigger( 'change' );
if ( ! jQuery.isEmptyObject( data ) ) {
$( '.' + data.slave, wrapper )[ ( flag ) ? 'addClass' : 'removeClass' ]( 'hide' );
}
}
};
CherryJsCore.ui_elements.checkbox.init();
} ( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,69 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.hide{
display: none !important;
}
.cherry-checkbox-item{
width: 20px;
height: 20px;
display: inline-block;
border-radius: $border_radius_extra_small;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
background-color: $grey_color_3;
user-select: none;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
.marker{
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
color: #fff;
font-size: 20px;
transition:inherit;
transform: scale(0);
&:before{
transition:inherit;
position: relative;
left: -1px;
}
}
}
.cherry-lable-content {
display: flex;
}
.cherry-checkbox-input{
&[checked]{
&+.cherry-checkbox-item{
background-color: $green_color;
.marker{
transform: scale(1);
}
}
}
}
.cherry-checkbox-label{
font-size: 12px;
line-height: 20px;
color: $dark_color_1;
user-select: none;
&:focus{
outline: 1px solid rgba(41, 143, 252, .6);
box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
}
}

View File

@@ -0,0 +1,184 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius_small;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,23 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,154 @@
<?php
/**
* Class for the building ui-checkbox elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Checkbox' ) ) {
/**
* Class for the building UI_Checkbox elements.
*/
class UI_Checkbox extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-checkbox-id',
'name' => 'cherry-ui-checkbox-name',
'value' => array(
'checkbox-1' => 'true',
'checkbox-2' => 'true',
'checkbox-3' => 'true',
),
'options' => array(
'checkbox-1' => 'checkbox 1',
'checkbox-2' => 'checkbox 2',
'checkbox-3' => 'checkbox 3',
),
'label' => '',
'class' => '',
'master' => '',
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Checkbox class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-checkbox-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Checkbox.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
$counter = 0;
if ( $this->settings['options'] && ! empty( $this->settings['options'] ) && is_array( $this->settings['options'] ) ) {
if ( ! is_array( $this->settings['value'] ) ) {
$this->settings['value'] = array( $this->settings['value'] );
}
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
foreach ( $this->settings['options'] as $option => $option_value ) {
$lock_option = new Cherry5_Lock_Element( $option_value );
if ( ! empty( $this->settings['value'] ) ) {
$option_checked = array_key_exists( $option, $this->settings['value'] ) ? $option : '';
$item_value = ! empty( $option_checked ) ? $this->settings['value'][ $option ] : 'false';
} else {
$option_checked = '';
$item_value = 'false';
}
$checked = ( ! empty( $option_checked ) && 'true' === $item_value ) ? 'checked' : '';
$option_label = isset( $option_value ) && is_array( $option_value ) ? $option_value['label'] : $option_value;
$data_slave = isset( $option_value['slave'] ) && ! empty( $option_value['slave'] ) ? ' data-slave="' . $option_value['slave'] . '"' : '';
$html .= '<div class="cherry-checkbox-item-wrap">';
$html .= '<span class="' . $lock_option->get_class( 'inline-block' ) . '"">';
$html .= '<span class="cherry-lable-content">';
$html .= '<input type="hidden" id="' . esc_attr( $this->settings['id'] ) . '-' . $counter . '" class="cherry-checkbox-input" name="' . esc_attr( $this->settings['name'] ) . '[' . $option . ']" ' . $checked . ' value="' . esc_html( $item_value ) . '"' . $data_slave . $lock_option->get_disabled_attr() . '>';
$html .= '<div class="cherry-checkbox-item"><span class="marker dashicons dashicons-yes"></span></div>';
$html .= '<label class="cherry-checkbox-label" for="' . esc_attr( $this->settings['id'] ) . '-' . $counter . '"><span class="cherry-lable-content">' . esc_html( $option_label ) . '</span></label> ';
$html .= '</span>';
$html .= $lock_option->get_html();
$html .= '</span>';
$html .= '</div>';
$counter++;
}
}
$html .= $this->lock_element->get_html() . '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Checkbox.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_script(
'ui-checkbox',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-checkbox/assets/min/ui-checkbox.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-checkbox',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-checkbox/assets/min/ui-checkbox.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:no-drop;position:relative;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{-webkit-animation-name:lock_show;animation-name:lock_show;-webkit-animation-duration:450ms;animation-duration:450ms;-webkit-animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;-webkit-animation-name:lock_hide;animation-name:lock_hide;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@-webkit-keyframes lock_show{0%{opacity:0;-webkit-filter:blur(5px);filter:blur(5px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;-webkit-transform:scale(1.1) translate(-50%, -130%);transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_show{0%{opacity:0;-webkit-filter:blur(5px);filter:blur(5px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;-webkit-transform:scale(1.1) translate(-50%, -130%);transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}}@-webkit-keyframes lock_hide{0%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;-webkit-filter:blur(3px);filter:blur(3px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}}@keyframes lock_hide{0%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;-webkit-filter:blur(3px);filter:blur(3px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.cherry-ui-colorpicker-wrapper .wp-picker-container{padding:3px;border-radius:3px}.cherry-ui-colorpicker-wrapper .wp-picker-container .wp-color-result-text{line-height:18px;text-align:right}.cherry-ui-colorpicker-wrapper .wp-picker-container .wp-color-result{width:105px;height:26px;padding:0;border:none;margin:0;box-shadow:inset 0 0 0 3px white;border:1px solid #d5dadf}.cherry-ui-colorpicker-wrapper .wp-picker-container .wp-color-result:focus{border:1px solid #9ba7b3;outline:none}.cherry-ui-colorpicker-wrapper .wp-picker-container .wp-color-result:after{display:none}.cherry-ui-colorpicker-wrapper .wp-picker-container .wp-picker-input-wrap{margin:1px 0}.cherry-ui-colorpicker-wrapper .wp-picker-container.wp-picker-active .wp-color-result{margin-right:6px}.cherry-ui-colorpicker-wrapper .wp-picker-container .iris-picker{position:absolute;z-index:999}

View File

@@ -0,0 +1 @@
!function(e,r){"use strict";r.utilites.namespace("ui_elements.colorpicker"),r.ui_elements.colorpicker={init:function(){e(document).on("ready",this.render).on("cherry-ui-elements-init",this.render)},render:function(r){var i=r._target?r._target:e("body"),n=e('input.cherry-ui-colorpicker:not([name*="__i__"])',i);n[0]&&n.wpColorPicker()}},r.ui_elements.colorpicker.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,26 @@
/**
* ColorPicker
*/
( function( $, CherryJsCore ) {
'use strict';
CherryJsCore.utilites.namespace('ui_elements.colorpicker');
CherryJsCore.ui_elements.colorpicker = {
init: function () {
$( document )
.on( 'ready', this.render )
.on( 'cherry-ui-elements-init', this.render );
},
render: function ( event ) {
var target = ( event._target ) ? event._target : $( 'body' ),
input = $( 'input.cherry-ui-colorpicker:not([name*="__i__"])', target );
if ( input[0] ) {
input.wpColorPicker();
}
}
};
CherryJsCore.ui_elements.colorpicker.init();
}( jQuery, window.CherryJsCore ));

View File

@@ -0,0 +1,68 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
$font_size: 14px;
.cherry-ui-elements-lock {
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container {
margin: 10px 0 20px 0;
}
label.cherry-label {
margin: 0 0 5px 0;
display: block;
}
.cherry-ui-colorpicker-wrapper {
.wp-picker-container {
padding: 3px;
border-radius: 3px;
.wp-color-result-text {
line-height: 18px;
text-align: right;
}
.wp-color-result {
width: 105px;
height: 26px;
padding: 0;
border: none;
margin: 0;
box-shadow: inset 0 0 0 3px white;
border: 1px solid #d5dadf;
&:focus {
border: 1px solid #9ba7b3;
outline: none;
}
&:after {
display: none;
}
}
.wp-picker-input-wrap {
margin: 1px 0;
}
&.wp-picker-active {
.wp-color-result {
margin-right: 6px;
}
}
.iris-picker {
position: absolute;
z-index: 999;
}
}
}

View File

@@ -0,0 +1,184 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius_small;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,23 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,490 @@
/**!
* wp-color-picker-alpha
*
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
* Only run in input and is defined data alpha in true
*
* Version: 2.1.2
* https://github.com/kallookoo/wp-color-picker-alpha
* Licensed under the GPLv2 license.
*/
( function( $ ) {
// Variable for some backgrounds ( grid )
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
// html stuff for wpColorPicker copy of the original color-picker.js
_after = '<div class="wp-picker-holder" />',
_wrap = '<div class="wp-picker-container" />',
_button = '<input type="button" class="button button-small" />',
// Prevent CSS issues in < WordPress 4.9
_deprecated = ( wpColorPickerL10n.current !== undefined );
// Declare some global variables when is deprecated or not
if ( _deprecated ) {
var _before = '<a tabindex="0" class="wp-color-result" />';
} else {
var _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
_wrappingLabel = '<label></label>',
_wrappingLabelText = '<span class="screen-reader-text"></span>';
}
/**
* Overwrite Color
* for enable support rbga
*/
Color.fn.toString = function() {
if ( this._alpha < 1 )
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
var hex = parseInt( this._color, 10 ).toString( 16 );
if ( this.error )
return '';
if ( hex.length < 6 )
hex = ( '00000' + hex ).substr( -6 );
return '#' + hex;
};
/**
* Overwrite wpColorPicker
*/
$.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
/**
* @summary Creates the color picker.
*
* Creates the color picker, sets default values, css classes and wraps it all in HTML.
*
* @since 3.5.0
*
* @access private
*
* @returns {void}
*/
_create: function() {
// Return early if Iris support is missing.
if ( ! $.support.iris ) {
return;
}
var self = this,
el = self.element;
// Override default options with options bound to the element.
$.extend( self.options, el.data() );
// Create a color picker which only allows adjustments to the hue.
if ( self.options.type === 'hue' ) {
return self._createHueOnly();
}
// Bind the close event.
self.close = $.proxy( self.close, self );
self.initialValue = el.val();
// Add a CSS class to the input field.
el.addClass( 'wp-color-picker' );
if ( _deprecated ) {
el.hide().wrap( _wrap );
self.wrap = el.parent();
self.toggler = $( _before )
.insertBefore( el )
.css( { backgroundColor : self.initialValue } )
.attr( 'title', wpColorPickerL10n.pick )
.attr( 'data-current', wpColorPickerL10n.current );
self.pickerContainer = $( _after ).insertAfter( el );
self.button = $( _button ).addClass('hidden');
} else {
/*
* Check if there's already a wrapping label, e.g. in the Customizer.
* If there's no label, add a default one to match the Customizer template.
*/
if ( ! el.parent( 'label' ).length ) {
// Wrap the input field in the default label.
el.wrap( _wrappingLabel );
// Insert the default label text.
self.wrappingLabelText = $( _wrappingLabelText )
.insertBefore( el )
.text( wpColorPickerL10n.defaultLabel );
}
/*
* At this point, either it's the standalone version or the Customizer
* one, we have a wrapping label to use as hook in the DOM, let's store it.
*/
self.wrappingLabel = el.parent();
// Wrap the label in the main wrapper.
self.wrappingLabel.wrap( _wrap );
// Store a reference to the main wrapper.
self.wrap = self.wrappingLabel.parent();
// Set up the toggle button and insert it before the wrapping label.
self.toggler = $( _before )
.insertBefore( self.wrappingLabel )
.css( { backgroundColor: self.initialValue } );
// Set the toggle button span element text.
self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
// Set up the Iris container and insert it after the wrapping label.
self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
// Store a reference to the Clear/Default button.
self.button = $( _button );
}
// Set up the Clear/Default button.
if ( self.options.defaultColor ) {
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
if ( ! _deprecated ) {
self.button.attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
}
} else {
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
if ( ! _deprecated ) {
self.button.attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
}
}
if ( _deprecated ) {
el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
} else {
// Wrap the wrapping label in its wrapper and append the Clear/Default button.
self.wrappingLabel
.wrap( '<span class="wp-picker-input-wrap hidden" />' )
.after( self.button );
/*
* The input wrapper now contains the label+input+Clear/Default button.
* Store a reference to the input wrapper: we'll use this to toggle
* the controls visibility.
*/
self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
}
el.iris( {
target: self.pickerContainer,
hide: self.options.hide,
width: self.options.width,
mode: self.options.mode,
palettes: self.options.palettes,
/**
* @summary Handles the onChange event if one has been defined in the options.
*
* Handles the onChange event if one has been defined in the options and additionally
* sets the background color for the toggler element.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
* @param {HTMLElement} ui The HTMLElement containing the color picker.
*
* @returns {void}
*/
change: function( event, ui ) {
if ( self.options.alpha ) {
self.toggler.css( { 'background-image' : 'url(' + image + ')' } );
if ( _deprecated ) {
self.toggler.html( '<span class="color-alpha" />' );
} else {
self.toggler.css( {
'position' : 'relative'
} );
if ( self.toggler.find('span.color-alpha').length == 0 ) {
self.toggler.append('<span class="color-alpha" />');
}
}
self.toggler.find( 'span.color-alpha' ).css( {
'width' : '30px',
'height' : '24px',
'position' : 'absolute',
'top' : 0,
'left' : 0,
'border-top-left-radius' : '2px',
'border-bottom-left-radius' : '2px',
'background' : ui.color.toString()
} );
} else {
self.toggler.css( { backgroundColor : ui.color.toString() } );
}
if ( $.isFunction( self.options.change ) ) {
self.options.change.call( this, event, ui );
}
}
} );
el.val( self.initialValue );
self._addListeners();
// Force the color picker to always be closed on initial load.
if ( ! self.options.hide ) {
self.toggler.click();
}
},
/**
* @summary Binds event listeners to the color picker.
*
* @since 3.5.0
*
* @access private
*
* @returns {void}
*/
_addListeners: function() {
var self = this;
/**
* @summary Prevent any clicks inside this widget from leaking to the top and closing it.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returs {void}
*/
self.wrap.on( 'click.wpcolorpicker', function( event ) {
event.stopPropagation();
});
/**
* @summary Open or close the color picker depending on the class.
*
* @since 3.5
*/
self.toggler.click( function(){
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
self.close();
} else {
self.open();
}
});
/**
* @summary Checks if value is empty when changing the color in the color picker.
*
* Checks if value is empty when changing the color in the color picker.
* If so, the background color is cleared.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returns {void}
*/
self.element.on( 'change', function( event ) {
// Empty or Error = clear
if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) {
if ( self.options.alpha ) {
if ( _deprecated ) {
self.toggler.removeAttr( 'style' );
}
self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
} else {
self.toggler.css( 'backgroundColor', '' );
}
// fire clear callback if we have one
if ( $.isFunction( self.options.clear ) )
self.options.clear.call( this, event );
}
} );
/**
* @summary Enables the user to clear or revert the color in the color picker.
*
* Enables the user to either clear the color in the color picker or revert back to the default color.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returns {void}
*/
self.button.on( 'click', function( event ) {
if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
self.element.val( '' );
if ( self.options.alpha ) {
if ( _deprecated ) {
self.toggler.removeAttr( 'style' );
}
self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
} else {
self.toggler.css( 'backgroundColor', '' );
}
if ( $.isFunction( self.options.clear ) )
self.options.clear.call( this, event );
} else if ( $( this ).hasClass( 'wp-picker-default' ) ) {
self.element.val( self.options.defaultColor ).change();
}
});
},
});
/**
* Overwrite iris
*/
$.widget( 'a8c.iris', $.a8c.iris, {
_create: function() {
this._super();
// Global option for check is mode rbga is enabled
this.options.alpha = this.element.data( 'alpha' ) || false;
// Is not input disabled
if ( ! this.element.is( ':input' ) )
this.options.alpha = false;
if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) {
var self = this,
el = self.element,
_html = '<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>',
aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ),
aSlider = aContainer.find( '.iris-slider-offset-alpha' ),
controls = {
aContainer : aContainer,
aSlider : aSlider
};
if ( typeof el.data( 'custom-width' ) !== 'undefined' ) {
self.options.customWidth = parseInt( el.data( 'custom-width' ) ) || 0;
} else {
self.options.customWidth = 100;
}
// Set default width for input reset
self.options.defaultWidth = el.width();
// Update width for input
if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 )
el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) );
// Push new controls
$.each( controls, function( k, v ) {
self.controls[k] = v;
} );
// Change size strip and add margin for sliders
self.controls.square.css( { 'margin-right': '0' } );
var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ),
stripsMargin = ( emptyWidth / 6 ),
stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin );
$.each( [ 'aContainer', 'strip' ], function( k, v ) {
self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } );
} );
// Add new slider
self._initControls();
// For updated widget
self._change();
}
},
_initControls: function() {
this._super();
if ( this.options.alpha ) {
var self = this,
controls = self.controls;
controls.aSlider.slider({
orientation : 'vertical',
min : 0,
max : 100,
step : 1,
value : parseInt( self._color._alpha * 100 ),
slide : function( event, ui ) {
// Update alpha value
self._color._alpha = parseFloat( ui.value / 100 );
self._change.apply( self, arguments );
}
});
}
},
_change: function() {
this._super();
var self = this,
el = self.element;
if ( this.options.alpha ) {
var controls = self.controls,
alpha = parseInt( self._color._alpha * 100 ),
color = self._color.toRgb(),
gradient = [
'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%',
'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%'
],
defaultWidth = self.options.defaultWidth,
customWidth = self.options.customWidth,
target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' );
// Generate background slider alpha, only for CSS3 old browser fuck!! :)
controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } );
if ( target.hasClass( 'wp-picker-open' ) ) {
// Update alpha value
controls.aSlider.slider( 'value', alpha );
/**
* Disabled change opacity in default slider Saturation ( only is alpha enabled )
* and change input width for view all value
*/
if ( self._color._alpha < 1 ) {
controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) );
el.width( parseInt( defaultWidth + customWidth ) );
} else {
el.width( defaultWidth );
}
}
}
var reset = el.data( 'reset-alpha' ) || false;
if ( reset ) {
self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() {
self._color._alpha = 1;
self.active = 'external';
self._change();
} );
}
},
_addInputListeners: function( input ) {
var self = this,
debounceTimeout = 100,
callback = function( event ) {
var color = new Color( input.val() ),
val = input.val();
input.removeClass( 'iris-error' );
// we gave a bad color
if ( color.error ) {
// don't error on an empty input
if ( val !== '' )
input.addClass( 'iris-error' );
} else {
if ( color.toString() !== self._color.toString() ) {
// let's not do this on keyup for hex shortcodes
if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) )
self._setOption( 'color', color.toString() );
}
}
};
input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) );
// If we initialized hidden, show on first focus. The rest is up to you.
if ( self.options.hide ) {
input.on( 'focus', function() {
self.show();
} );
}
}
} );
}( jQuery ) );
// Auto Call plugin is class is color-picker
jQuery( document ).ready( function( $ ) {
$( '.color-picker' ).wpColorPicker();
} );

View File

@@ -0,0 +1,129 @@
<?php
/**
* Class for the building ui-colorpicker elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Colorpicker' ) ) {
/**
* Class for the building UI_Colorpicker elements.
*/
class UI_Colorpicker extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-colorpicker-id',
'name' => 'cherry-ui-colorpicker-name',
'value' => '',
'label' => '',
'class' => '',
'master' => '',
'alpha' => false,
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Colorpicker class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-colorpicker-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Colorpicker.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
)
);
$alpha = '';
if ( true === $this->settings['alpha'] ) {
$alpha = ' data-alpha=true ';
}
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= '<div class="cherry-ui-colorpicker-wrapper' . $this->lock_element->get_class() .'">';
$html .= '<input type="text" id="' . esc_attr( $this->settings['id'] ) . '" class="cherry-ui-colorpicker" name="' . esc_attr( $this->settings['name'] ) . '"' . $alpha . 'value="' . esc_html( $this->settings['value'] ) . '"' . $this->lock_element->get_disabled_attr() . '/>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Colorpicker.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_script(
'wp-color-picker-alpha',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-colorpicker/assets/min/wp-color-picker-alpha.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'wp-color-picker' ),
'1.2.2',
true
);
wp_enqueue_script(
'ui-colorpicker',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-colorpicker/assets/min/ui-colorpicker.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-colorpicker',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-colorpicker/assets/min/ui-colorpicker.min.css', Cherry_UI_Elements::$module_path ) ),
array( 'wp-color-picker' ),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.cherry-ui-dimensions{max-width:300px}.cherry-ui-dimensions__units{margin-right:20%;display:flex;justify-content:flex-end}.cherry-ui-dimensions__unit{color:#c2cbd2;cursor:pointer;font-size:9px;text-transform:uppercase;margin:0 2px}.cherry-ui-dimensions__unit.is-active{color:#6d7882;text-decoration:underline}.cherry-ui-dimensions__values{display:flex;border:1px solid #a4afb7;border-radius:3px}.cherry-ui-dimensions__value-item{position:relative;width:20%}.cherry-ui-dimensions__value-item input{width:100%;margin:0;border:none;box-shadow:none;border-right:1px solid #a4afb7;font-size: 12px;}.cherry-ui-dimensions__value-item input:first-child{border-radius:3px 0 0 3px}.cherry-ui-dimensions__value-item input:focus{border-color:none}.cherry-ui-dimensions__value-label{width:100%;display:block;position:absolute;bottom:-18px;font-size:9px;text-transform:uppercase;text-align:center;color:#d5dadf}.cherry-ui-dimensions__is-linked{width:20%;height:28px;background-color:white;text-align:center;color:#a4afb7;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0 3px 3px 0}.cherry-ui-dimensions__is-linked .link-icon{display:none}.cherry-ui-dimensions__is-linked .unlink-icon{display:block}.cherry-ui-dimensions__is-linked.is-linked{color:white;background-color:#a4afb7}.cherry-ui-dimensions__is-linked.is-linked .link-icon{display:block}.cherry-ui-dimensions__is-linked.is-linked .unlink-icon{display:none}

View File

@@ -0,0 +1,96 @@
/**
* Radio
*/
(function($, CherryJsCore){
'use strict';
CherryJsCore.utilites.namespace('ui_elements.dimensions');
CherryJsCore.ui_elements.dimensions = {
container: '.cherry-ui-dimensions',
isLinked: '.cherry-ui-dimensions__is-linked',
units: '.cherry-ui-dimensions__unit',
unitsInput: 'input[name*="[units]"]',
linkedInput: 'input[name*="[is_linked]"]',
valuesInput: '.cherry-ui-dimensions__val',
init: function() {
$( document ).on( 'ready', this.addEvents.bind( this ) );
this.triggers();
},
triggers: function( $target ) {
if ( $target ) {
$( document ).trigger( 'cherry-ui-elements-init', { 'target': $target } );
}
return this;
},
addEvents: function() {
$( 'body' )
// Delegate events
.on( 'click', this.isLinked, { 'self': this }, this.switchLinked )
.on( 'click', this.units, { 'self': this }, this.switchUnits )
.on( 'input', this.valuesInput + '.is-linked', { 'self': this }, this.changeLinked );
this.triggers();
},
switchLinked: function( event ) {
var self = event.data.self,
$this = $( this ),
$container = $this.closest( self.container ),
$input = $container.find( self.linkedInput ),
$values = $container.find( self.valuesInput ),
isLinked = $input.val();
if ( 0 === parseInt( isLinked ) ) {
$input.val(1);
$this.addClass( 'is-linked' );
$values.addClass( 'is-linked' );
} else {
$input.val(0);
$this.removeClass( 'is-linked' );
$values.removeClass( 'is-linked' );
}
},
switchUnits: function( event ) {
var self = event.data.self,
$this = $( this ),
unit = $this.data( 'unit' ),
$container = $this.closest( self.container ),
$input = $container.find( self.unitsInput ),
$values = $container.find( self.valuesInput ),
range = $container.data( 'range' );
if ( $this.hasClass( 'is-active' ) ) {
return;
}
$this.addClass( 'is-active' ).siblings( self.units ).removeClass( 'is-active' );
$input.val( unit );
$values.attr({
min: range[ unit ].min,
max: range[ unit ].max,
step: range[ unit ].step
});
},
changeLinked: function( event ) {
var self = event.data.self,
$this = $( this ),
$container = $this.closest( '.cherry-ui-dimensions__values' );
$( self.valuesInput, $container ).val( $this.val() )
}
};
CherryJsCore.ui_elements.dimensions.init();
}(jQuery, window.CherryJsCore));

View File

@@ -0,0 +1,115 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.cherry-ui-dimensions {
max-width: 300px;
&__units {
margin-right: 20%;
display: flex;
justify-content: flex-end;
}
&__unit {
color: #c2cbd2;
cursor: pointer;
font-size: 9px;
text-transform: uppercase;
margin: 0 2px;
&.is-active {
color: #6d7882;
text-decoration: underline;
}
}
&__values {
display: flex;
border: 1px solid #a4afb7;
border-radius: 3px;
}
&__value-item {
position: relative;
width: 20%;
input {
width: 100%;
margin: 0;
border: none;
box-shadow: none;
border-right: 1px solid #a4afb7;
font-size: 12px;
&:first-child {
border-radius: 3px 0 0 3px;
}
&:focus {
border-color: none;
}
}
}
&__value-label {
width: 100%;
display: block;
position: absolute;
bottom: -18px;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #d5dadf;
}
&__is-linked {
width: 20%;
height: 28px;
background-color: white;
text-align: center;
color: #a4afb7;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 3px 3px 0;
.link-icon {
display: none;
}
.unlink-icon {
display: block;
}
&.is-linked {
color: white;
background-color: #a4afb7;
.link-icon {
display: block;
}
.unlink-icon {
display: none;
}
}
}
}

View File

@@ -0,0 +1,15 @@
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color;
background-color: $bg_color;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}

View File

@@ -0,0 +1,7 @@
$light_color: #ffffff;
$dark_color: #23282d;
$bg_color: #f1f1f1;
$border_color: #dcdcdc;
$border_radius_extra_small: 2px;

View File

@@ -0,0 +1,260 @@
<?php
/**
* Class for the building ui-dimensions elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Dimensions' ) ) {
/**
* Class for the building ui-dimensions elements.
*/
class UI_Dimensions extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'type' => 'dimensions',
'id' => 'cherry-ui-dimensions-id',
'name' => 'cherry-ui-dimensions-name',
'value' => array(),
'range' => array(
'px' => array(
'min' => 0,
'max' => 100,
'step' => 1,
),
),
'label' => '',
'dimension_labels' => array(
'top' => 'Top',
'right' => 'Right',
'bottom' => 'Bottom',
'left' => 'Left',
),
'class' => '',
'master' => '',
'required' => false,
'lock' => false,
);
protected $default_value = array(
'units' => 'px',
'is_linked' => true,
'top' => '',
'right' => '',
'bottom' => '',
'left' => '',
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Text class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-dimensions-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Get required attribute.
*
* @since 1.0.0
* @return string
*/
public function get_required() {
if ( $this->settings['required'] ) {
return 'required="required"';
}
return '';
}
/**
* Render html UI_Text.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class(),
)
);
if ( empty( $this->settings['value'] ) ) {
$this->settings['value'] = $this->default_value;
} else {
$this->settings['value'] = array_merge( $this->default_value, $this->settings['value'] );
}
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= $this->get_fields();
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Return UI fileds
* @return [type] [description]
*/
public function get_fields() {
$hidden = '<input type="hidden" name="%1$s" id="%3$s" value="%2$s">';
$number = '<div class="cherry-ui-dimensions__value-item"><input type="number" name="%1$s" id="%3$s" value="%2$s" min="%4$s" max="%5$s" step="%6$s" class="cherry-ui-dimensions__val%7$s"><span class="cherry-ui-dimensions__value-label">%8$s</span></div>';
$value = $this->settings['value'];
$value = array_merge( $this->default_value, $value );
$result = sprintf(
'<div class="cherry-ui-dimensions" data-range=\'%s\'>',
json_encode( $this->settings['range'] )
);
foreach ( array( 'units', 'is_linked' ) as $field ) {
$result .= sprintf(
$hidden,
$this->get_name_attr( $field ), $value[ $field ], $this->get_id_attr( $field )
);
}
$result .= $this->get_units();
$result .= '<div class="cherry-ui-dimensions__values">';
$value['is_linked'] = filter_var( $value['is_linked'], FILTER_VALIDATE_BOOLEAN );
foreach ( array( 'top', 'right', 'bottom', 'left' ) as $field ) {
$result .= sprintf(
$number,
$this->get_name_attr( $field ),
$value[ $field ],
$this->get_id_attr( $field ),
$this->settings['range'][ $value['units'] ]['min'],
$this->settings['range'][ $value['units'] ]['max'],
$this->settings['range'][ $value['units'] ]['step'],
( true === $value['is_linked'] ? ' is-linked' : '' ),
$this->settings['dimension_labels'][ $field ]
);
}
$result .= sprintf(
'<div class="cherry-ui-dimensions__is-linked%s"><span class="dashicons dashicons-admin-links link-icon"></span><span class="dashicons dashicons-editor-unlink unlink-icon"></span></div>',
( true === $value['is_linked'] ? ' is-linked' : '' )
);
$result .= '</div>';
$result .= '</div>';
return $result;
}
/**
* Returns units selector
*
* @return string
*/
public function get_units() {
$units = array_keys( $this->settings['range'] );
$switcher = 'can-switch';
if ( 1 === count( $units ) ) {
$switcher = '';
}
$item = '<span class="cherry-ui-dimensions__unit%2$s" data-unit="%1$s">%1$s</span>';
$result = '';
foreach ( $units as $unit ) {
$result .= sprintf(
$item,
$unit,
( $this->settings['value']['units'] === $unit ? ' is-active' : '' )
);
}
return sprintf( '<div class="cherry-ui-dimensions__units">%s</div>', $result );
}
/**
* Retrurn full name attibute by name
*
* @param [type] $name [description]
* @return [type] [description]
*/
public function get_name_attr( $name = '' ) {
return sprintf( '%s[%s]', esc_attr( $this->settings['name'] ), esc_attr( $name ) );
}
/**
* Retrurn full ID attibute by name
*
* @param [type] $name [description]
* @return [type] [description]
*/
public function get_id_attr( $name = '' ) {
return sprintf( '%s_%s', esc_attr( $this->settings['name'] ), esc_attr( $name ) );
}
/**
* Enqueue javascript and stylesheet UI_Text.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-dimensions',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-dimensions/assets/min/ui-dimensions.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
wp_enqueue_script(
'ui-dimensions',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-dimensions/assets/ui-dimensions.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
}
}
}

View File

@@ -0,0 +1 @@
!function(e,t,n){"use strict";t.utilites.namespace("ui_elements.iconpicker"),t.ui_elements.iconpicker={iconSets:{},iconSetsKey:"cherry5-icon-sets",init:function(){e(document).on("cherry-ajax-handler-success",this.setIconsSets.bind(this)).on("ready.iconpicker",this.setIconsSets.bind(this,window.cherry5IconSets)).on("ready.iconpicker",this.render.bind(this)).on("cherry-ui-elements-init",this.render.bind(this))},setIconsSets:function(e){var t,i=this;e&&(t=e.response?e.response.cherry5IconSets:e,n.each(t,function(e,t){i.iconSets[t]=e}),i.setState(i.iconSetsKey,i.iconSets))},getIconsSets:function(){var e=this.getState(this.iconSetsKey);e&&(this.iconSets=e)},render:function(t){var n,i,s,c=t._target?t._target:e("body"),o=e('.cherry-ui-iconpicker:not([name*="__i__"])',c),r=this;o[0]&&(this.getIconsSets(),o.each(function(){n=e(this),i=n.data("set"),s=r.iconSets[i],n.length&&s.icons&&n.iconpicker({icons:s.icons,iconBaseClass:s.iconBase,iconClassPrefix:s.iconPrefix,animation:!1,fullClassFormatter:function(e){return s.iconBase+" "+s.iconPrefix+e}}).on("iconpickerUpdated",function(){e(this).trigger("change")}),s&&e("head").append('<link rel="stylesheet" type="text/css" href="'+s.iconCSS+'"">')}))},getState:function(e){try{return JSON.parse(window.sessionStorage.getItem(e))}catch(e){return!1}},setState:function(e,t){try{window.sessionStorage.setItem(e,JSON.stringify(t))}catch(e){return!1}}},t.ui_elements.iconpicker.init()}(jQuery,window.CherryJsCore,window._);

View File

@@ -0,0 +1,102 @@
/**
* Iconpicker
*/
(function( $, CherryJsCore, underscore ) {
'use strict';
CherryJsCore.utilites.namespace( 'ui_elements.iconpicker' );
CherryJsCore.ui_elements.iconpicker = {
iconSets: {},
iconSetsKey: 'cherry5-icon-sets',
init: function() {
$( document )
.on( 'cherry-ajax-handler-success', this.setIconsSets.bind( this ) )
.on( 'ready.iconpicker', this.setIconsSets.bind( this, window.cherry5IconSets ) )
.on( 'ready.iconpicker', this.render.bind( this ) )
.on( 'cherry-ui-elements-init', this.render.bind( this ) );
},
setIconsSets: function( iconSets ) {
var icon,
_this = this;
if ( iconSets ) {
icon = ( iconSets.response ) ? iconSets.response.cherry5IconSets : iconSets;
underscore.each(
icon,
function( element, index ) {
_this.iconSets[ index ] = element;
}
);
_this.setState( _this.iconSetsKey, _this.iconSets );
}
},
getIconsSets: function() {
var iconSets = this.getState( this.iconSetsKey );
if ( iconSets ) {
this.iconSets = iconSets;
}
},
render: function( event ) {
var target = ( event._target ) ? event._target : $( 'body' ),
$picker = $( '.cherry-ui-iconpicker:not([name*="__i__"])', target ),
$this,
set,
setData,
_this = this;
if ( $picker[0] ) {
this.getIconsSets();
$picker.each( function() {
$this = $( this );
set = $this.data( 'set' );
setData = _this.iconSets[set];
if ( $this.length && setData.icons ) {
$this.iconpicker({
icons: setData.icons,
iconBaseClass: setData.iconBase,
iconClassPrefix: setData.iconPrefix,
animation: false,
fullClassFormatter: function( val ) {
return setData.iconBase + ' ' + setData.iconPrefix + val;
}
}).on( 'iconpickerUpdated', function() {
$( this ).trigger( 'change' );
});
}
if ( setData ) {
$( 'head' ).append( '<link rel="stylesheet" type="text/css" href="' + setData.iconCSS + '"">' );
}
} );
}
},
getState: function( key ) {
try {
return JSON.parse( window.sessionStorage.getItem( key ) );
} catch ( e ) {
return false;
}
},
setState: function( key, data ) {
try {
window.sessionStorage.setItem( key, JSON.stringify( data ) );
} catch ( e ) {
return false;
}
}
};
CherryJsCore.ui_elements.iconpicker.init();
}( jQuery, window.CherryJsCore, window._ ) );

View File

@@ -0,0 +1,336 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-iconpicker-group {
position: relative;
.full &{
max-width: 100%;
}
.fixed &{
max-width: 150px;
}
.input-group-addon {
position: absolute;
width: 20px;
height: 20px;
left: 0px;
top: 0px;
background: $grey_color_3;
font-size: 14px;
line-height: 20px;
text-align: center;
border-radius: 3px 0 0 3px;
border-right: 1px solid #dddcdc;
margin: 3px;
.fa {
line-height: 20px;
}
}
.cherry-ui-text{
@include input();
padding: 0px 0px 0px 30px;
}
}
.iconpicker-popover.popover {
position: absolute;
top: 0;
left: 0;
display: none;
max-width: none;
padding: 1px;
text-align: left;
width: 242px;
background: #f0f0f0;
z-index: 999;
}
.iconpicker-popover.popover.top,
.iconpicker-popover.popover.topLeftCorner,
.iconpicker-popover.popover.topLeft,
.iconpicker-popover.popover.topRight,
.iconpicker-popover.popover.topRightCorner {
margin-top: -10px;
}
.iconpicker-popover.popover.right,
.iconpicker-popover.popover.rightTop,
.iconpicker-popover.popover.rightBottom {
margin-left: 10px;
}
.iconpicker-popover.popover.bottom,
.iconpicker-popover.popover.bottomRightCorner,
.iconpicker-popover.popover.bottomRight,
.iconpicker-popover.popover.bottomLeft,
.iconpicker-popover.popover.bottomLeftCorner {
margin-top: 10px;
}
.iconpicker-popover.popover.left,
.iconpicker-popover.popover.leftBottom,
.iconpicker-popover.popover.leftTop {
margin-left: -10px;
}
.iconpicker-popover.popover.inline {
margin: 0 0 14px 0;
position: relative;
display: inline-block;
opacity: 1;
top: auto;
left: auto;
bottom: auto;
right: auto;
max-width: 100%;
box-shadow: none;
z-index: auto;
vertical-align: top;
}
.iconpicker-popover.popover.inline > .arrow {
display: none;
}
.dropdown-menu .iconpicker-popover.inline {
margin: 0;
border: none;
}
.dropdown-menu.iconpicker-container {
padding: 0;
}
.iconpicker-popover.popover .popover-title {
padding: 14px;
font-size: 14px;
line-height: 16px;
border-bottom: 1px solid #ebebeb;
background-color: #f0f0f0;
}
.iconpicker-popover.popover .popover-title input[type=search].iconpicker-search {
margin: 0 0 2px 0;
}
.iconpicker-popover.popover .popover-title-text ~ input[type=search].iconpicker-search {
margin-top: 14px;
}
.iconpicker-popover.popover .popover-content {
padding: 0px;
text-align: center;
}
.iconpicker-popover .popover-footer {
float: none;
clear: both;
padding: 14px;
text-align: right;
margin: 0;
border-top: 1px solid #ebebeb;
background-color: #f0f0f0;
}
.iconpicker-popover .popover-footer:before,
.iconpicker-popover .popover-footer:after {
content: " ";
display: table;
}
.iconpicker-popover .popover-footer:after {
clear: both;
}
.iconpicker-popover .popover-footer .iconpicker-btn {
margin-left: 10px;
}
.iconpicker-popover .popover-footer input[type=search].iconpicker-search {
margin-bottom: 14px;
}
.iconpicker-popover.popover > .arrow,
.iconpicker-popover.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.iconpicker-popover.popover > .arrow {
border-width: 11px;
}
.iconpicker-popover.popover > .arrow:after {
border-width: 10px;
content: "";
}
.iconpicker-popover.popover.top > .arrow,
.iconpicker-popover.popover.topLeft > .arrow,
.iconpicker-popover.popover.topRight > .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #f0f0f0;
bottom: -11px;
}
.iconpicker-popover.popover.top > .arrow:after,
.iconpicker-popover.popover.topLeft > .arrow:after,
.iconpicker-popover.popover.topRight > .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.iconpicker-popover.popover.topLeft > .arrow {
left: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.topRight > .arrow {
left: auto;
right: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.right > .arrow,
.iconpicker-popover.popover.rightTop > .arrow,
.iconpicker-popover.popover.rightBottom > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #f0f0f0;
}
.iconpicker-popover.popover.right > .arrow:after,
.iconpicker-popover.popover.rightTop > .arrow:after,
.iconpicker-popover.popover.rightBottom > .arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
.iconpicker-popover.popover.rightTop > .arrow {
top: auto;
bottom: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.rightBottom > .arrow {
top: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.bottom > .arrow,
.iconpicker-popover.popover.bottomRight > .arrow,
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #f0f0f0;
top: -11px;
}
.iconpicker-popover.popover.bottom > .arrow:after,
.iconpicker-popover.popover.bottomRight > .arrow:after,
.iconpicker-popover.popover.bottomLeft > .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #f0f0f0;
}
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.bottomRight > .arrow {
left: auto;
right: 14px;
margin-left: 0;
}
.iconpicker-popover.popover.left > .arrow,
.iconpicker-popover.popover.leftBottom > .arrow,
.iconpicker-popover.popover.leftTop > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #f0f0f0;
}
.iconpicker-popover.popover.left > .arrow:after,
.iconpicker-popover.popover.leftBottom > .arrow:after,
.iconpicker-popover.popover.leftTop > .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}
.iconpicker-popover.popover.leftBottom > .arrow {
top: 14px;
margin-top: 0;
}
.iconpicker-popover.popover.leftTop > .arrow {
top: auto;
bottom: 14px;
margin-top: 0;
}
.iconpicker {
position: relative;
text-align: left;
text-shadow: none;
line-height: 0;
display: block;
margin: 0;
overflow: hidden;
}
.iconpicker * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
}
.iconpicker:before,
.iconpicker:after {
content: " ";
display: table;
}
.iconpicker:after {
clear: both;
}
.iconpicker .iconpicker-items {
position: relative;
clear: both;
float: none;
padding: 10px 0 0 10px;
background: #fff;
margin: 0;
overflow: hidden;
overflow-y: auto;
min-height: 55px;
max-height: 275px;
}
.iconpicker .iconpicker-items:before,
.iconpicker .iconpicker-items:after {
content: " ";
display: table;
}
.iconpicker .iconpicker-items:after {
clear: both;
}
.iconpicker .iconpicker-item {
float: left;
width: 28px;
height: 28px;
line-height: 28px;
margin: 0 7px 7px 0;
text-align: center;
cursor: pointer;
border-radius: 3px;
font-size: 18px;
color: #444;
box-shadow: 0 0 0 1px #dddddd;
.fa {
line-height: 28px;
}
}
.iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
background-color: #eeeeee;
}
.iconpicker .iconpicker-item.iconpicker-selected {
box-shadow: none;
background: #ddd;
}
.iconpicker-component {
cursor: pointer;
}

View File

@@ -0,0 +1,183 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius_small;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 12px;
line-height: 16px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
min-height: 26px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,23 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,377 @@
<?php
/**
* Class for the building ui-iconpicker elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Iconpicker' ) ) {
/**
* Class for the building ui-iconpicker elements.
*/
class UI_Iconpicker extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'type' => 'iconpicker',
'id' => 'cherry-ui-input-id',
'name' => 'cherry-ui-input-name',
'value' => '',
'placeholder' => '',
'icon_data' => array(),
'auto_parse' => false,
'label' => '',
'class' => '',
'master' => '',
'width' => 'fixed', // full, fixed
'required' => false,
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Default icon data settings.
*
* @var array
*/
private $default_icon_data = array(
'icon_set' => '',
'icon_css' => '',
'icon_base' => 'icon',
'icon_prefix' => '',
'icons' => '',
);
/**
* Icons sets
*
* @var array
*/
public static $sets = array();
/**
* Check if sets already printed
*
* @var boolean
*/
public static $printed = false;
/**
* Array of already printed sets to check it before printing current
*
* @var array
*/
public static $printed_sets = array();
public $temp_icons = null;
/**
* Constructor method for the UI_Iconpicker class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-input-icon-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
add_action( 'admin_footer', array( $this, 'print_icon_set' ), 1 );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_icon_set' ), 9999 );
add_filter( 'cherry_handler_response_data', array( $this, 'send_icon_set' ), 10, 1 );
}
/**
* Get required attribute
*
* @return string required attribute
*/
public function get_required() {
if ( $this->settings['required'] ) {
return 'required="required"';
}
return '';
}
/**
* Render html UI_Iconpicker.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$lock_lable = ! empty( $this->settings['lock']['label'] )? sprintf('<div class="cherry-lock-label">%1$s</div>', $this->settings['lock']['label'] ) : '' ;
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->settings['width'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$this->settings['icon_data'] = wp_parse_args(
$this->settings['icon_data'],
$this->default_icon_data
);
$html .= '<div class="cherry-ui-iconpicker-group">';
if ( $this->validate_icon_data( $this->settings['icon_data'] ) ) {
$html .= $this->render_picker();
} else {
$html .= 'Incorrect Icon Data Settings';
}
$html .= '</div>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
/**
* Maybe add js repeater template to response
*
* @var bool
*/
$add_js_to_response = apply_filters( 'cherry_ui_add_data_to_element', false );
if ( $add_js_to_response ) {
ob_start();
$this->print_icon_set();
$icons = ob_get_clean();
$in_repeater = apply_filters( 'cherry_ui_is_repeater', false );
if ( $in_repeater ) {
$this->temp_icons = $icons;
add_filter( 'cherry_ui_add_repater_data', array( $this, 'store_icons' ) );
} else {
$html .= $icons;
}
}
return $html;
}
public function store_icons( $data = array() ) {
if ( ! is_array( $data ) ) {
$data = array();
}
$data[] = $this->temp_icons;
return $data;
}
/**
* Returns iconpicker html markup
*
* @return string
*/
private function render_picker() {
$format = '<span class="input-group-addon"></span><input type="text" name="%1$s" id="%2$s" value="%3$s" class="widefat cherry-ui-text cherry-ui-iconpicker %4$s" data-set="%5$s">';
$this->prepare_icon_set();
return sprintf(
$format,
$this->settings['name'],
$this->settings['id'],
$this->settings['value'],
$this->settings['class'],
$this->settings['icon_data']['icon_set']
);
}
/**
* Return JS markup for icon set variable.
*
* @return void
*/
public function prepare_icon_set() {
if ( empty( $this->settings['icon_data']['icons'] ) ) {
$this->maybe_parse_set_from_css();
}
if ( ! array_key_exists( $this->settings['icon_data']['icon_set'], self::$sets ) ) {
self::$sets[ $this->settings['icon_data']['icon_set'] ] = array(
'iconCSS' => $this->settings['icon_data']['icon_css'],
'iconBase' => $this->settings['icon_data']['icon_base'],
'iconPrefix' => $this->settings['icon_data']['icon_prefix'],
'icons' => $this->settings['icon_data']['icons'],
);
}
}
/**
* Check if 'parse_set' is true and try to get icons set from CSS file
*
* @return void
*/
private function maybe_parse_set_from_css() {
if ( true !== $this->settings['auto_parse'] || empty( $this->settings['icon_data']['icon_css'] ) ) {
return;
}
ob_start();
$path = str_replace( content_url(), WP_CONTENT_DIR, $this->settings['icon_data']['icon_css'] );
if ( file_exists( $path ) ) {
include $path;
}
$result = ob_get_clean();
preg_match_all( '/\.([-_a-zA-Z0-9]+):before[, {]/', $result, $matches );
if ( ! is_array( $matches ) || empty( $matches[1] ) ) {
return;
}
if ( is_array( $this->settings['icon_data']['icons'] ) ) {
$this->settings['icon_data']['icons'] = array_merge(
$this->settings['icon_data']['icons'],
$matches[1]
);
} else {
$this->settings['icon_data']['icons'] = $matches[1];
}
}
/**
* Checks if all required icon data fields are passed
*
* @param array $data Icon data.
* @return bool
*/
private function validate_icon_data( $data ) {
$validate = array_diff( $this->default_icon_data, array( 'icon_base', 'icon_prefix' ) );
foreach ( $validate as $key => $field ) {
if ( empty( $data[ $key ] ) ) {
return false;
}
return true;
}
}
/**
* Function sends the icons into ajax response.
*
* @param array $data Icon data.
* @return array
*/
public function send_icon_set( $data ) {
if ( empty( $data['cherryIconsSets'] ) ) {
$data['cherry5IconSets'] = array();
}
foreach ( self::$sets as $key => $value ) {
$data['cherry5IconSets'][ $key ] = $value;
}
return $data;
}
/**
* Print icon sets
*
* @return void
*/
public function print_icon_set() {
if ( empty( self::$sets ) || true === self::$printed ) {
return;
}
self::$printed = true;
foreach ( self::$sets as $set => $data ) {
if ( in_array( $set, self::$printed_sets ) ) {
continue;
}
self::$printed_sets[] = $set;
$json = json_encode( $data );
printf( '<script> if ( ! window.cherry5IconSets ) { window.cherry5IconSets = {} } window.cherry5IconSets.%1$s = %2$s</script>', $set, $json );
}
}
/**
* Enqueue javascript and stylesheet UI_Iconpicker
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-iconpicker',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-iconpicker/assets/min/ui-iconpicker.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
wp_enqueue_script(
'jquery-iconpicker',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-iconpicker/assets/min/jquery-iconpicker.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_script(
'ui-iconpicker',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-iconpicker/assets/min/ui-iconpicker.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
}
}
}

View File

@@ -0,0 +1 @@
!function(e,a){"use strict";a.utilites.namespace("ui_elements.media"),a.ui_elements.media={init:function(){e(document).on("ready",this.render).on("cherry-ui-elements-init",this.render)},render:function(a){var i=a._target?a._target:e("body"),r=e(".cherry-upload-button",i);r.each(function(){var a=e(this),i=a.closest(".cherry-ui-media-wrap"),r={input:e(".cherry-upload-input",i),img_holder:e(".cherry-upload-preview",i),title_text:a.data("title"),multiple:a.data("multi-upload"),library_type:a.data("library-type")},t=wp.media.frames.file_frame=wp.media({title:r.title_text,button:{text:r.title_text},multiple:r.multiple,library:{type:r.library_type}});if(!i.has('input[name*="__i__"]')[0]){a.off("click.cherry-media").on("click.cherry-media",function(){return t.open(),!1}),t.on("select",function(){var a=t.state().get("selection").toJSON(),i=0,s="",c=e(".cherry-all-images-wrap",r.img_holder),n="",l="";for(r.multiple&&(s=r.input.val(),l=",",n=c.html());a[i];){var o=a[i],d=o.id,p=o.mime,m="",u="";switch(p){case"image/jpeg":case"image/png":case"image/gif":void 0!==o.sizes&&(m=o.sizes.thumbnail?o.sizes.thumbnail.url:o.sizes.full.url),u='<img src="'+m+'" alt="" data-img-attr="'+d+'">';break;case"image/x-icon":u='<span class="dashicons dashicons-format-image"></span>';break;case"video/mpeg":case"video/mp4":case"video/quicktime":case"video/webm":case"video/ogg":u='<span class="dashicons dashicons-format-video"></span>';break;case"audio/mpeg":case"audio/wav":case"audio/ogg":u='<span class="dashicons dashicons-format-audio"></span>'}n+='<div class="cherry-image-wrap"><div class="inner"><div class="preview-holder" data-id-attr="'+d+'"><div class="centered">'+u+'</div></div><a class="cherry-remove-image" href="#"><i class="dashicons dashicons-no"></i></a><span class="title">'+o.title+"</span></div></div>",s+=l+d,i++}r.input.val(s.replace(/(^,)/,"")).trigger("change"),c.html(n)});var s=function(a){var i=a.closest(".cherry-ui-media-wrap"),r=e(".cherry-upload-input",i),t=a.parent().parent(".cherry-image-wrap"),s=e(".preview-holder",t).data("id-attr"),c=r.attr("value"),n=new RegExp(""+s+"(,*)","i");c=c.replace(n,""),c=c.replace(/(,$)/,""),r.attr({value:c}).trigger("change"),t.remove()};i.on("click",".cherry-remove-image",function(){return s(e(this)),!1})}}),e(".cherry-all-images-wrap",i).sortable({items:"div.cherry-image-wrap",cursor:"move",scrollSensitivity:40,forcePlaceholderSize:!0,forceHelperSize:!1,helper:"clone",opacity:.65,placeholder:"cherry-media-thumb-sortable-placeholder",start:function(){},stop:function(){},update:function(){var a="";e(".cherry-image-wrap",this).each(function(){var i=e(".preview-holder",this).data("id-attr");a=a+i+","}),a=a.substr(0,a.lastIndexOf(",")),e(this).parent().siblings(".cherry-element-wrap").find("input.cherry-upload-input").val(a).trigger("change")}})}},a.ui_elements.media.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,51 @@
@mixin button_base() {
position: relative;
display: inline-block;
font-size: 11px;
line-height: 18px;
font-weight: 900;
text-decoration: none;
padding: 4px 22px;
color: $dark_color;
text-transform: uppercase;
border-radius: $border_radius_small;
border-width: 1px;
border-style: solid;
outline: none;
cursor: pointer;
transition: all 200ms linear;
&:before {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: $border_radius_small;
background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
content: '';
}
&:hover {
&:before {
background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}
}
&:active {
&:before {
opacity: 0;
}
}
}
@mixin secondary_button() {
color: $light_color;
border-color: $secondary_outset_1 $secondary_outset_2 $secondary_outset_2 $secondary_outset_1;
background-color: $secondary_gradint_2;
&:active {
background-color: $secondary_bg_color;
border-color: darken( $secondary_outset_2, 10%) $secondary_outset_1 $secondary_outset_1 darken( $secondary_outset_2, 10%);
}
}

View File

@@ -0,0 +1,52 @@
$bg_color: #f1f1f1;
$border_color: #dcdcdc;
$blue_color: #298ffc;
$remove_color: #e54343;
$light_color: #ffffff;
$dark_color: #23282d;
$normal_bg_color: #e1e1e1;
$normal_gradint_1: #ffffff;
$normal_gradint_2: #f0f0f0;
$normal_outset_1: #d7d7d7;
$normal_outset_2: #b7b7b7;
$primary_bg_color: #206ff4;
$primary_gradint_1: #5fadff;
$primary_gradint_2: #2a90fc;
$primary_outset_1: #5b9add;
$primary_outset_2: #3e6a99;
$secondary_bg_color: #495159;
$secondary_gradint_1: #4c5054;
$secondary_gradint_2: #495159;
$secondary_outset_1: #777879;
$secondary_outset_2: #2f343a;
$success_bg_color: #3ba956;
$success_gradint_1: #71e18f;
$success_gradint_2: #49c66a;
$success_outset_1: #49c56a;
$success_outset_2: #3a9e54;
$danger_bg_color: #c73434;
$danger_gradint_1: #f98888;
$danger_gradint_2: #e64545;
$danger_outset_1: #e54444;
$danger_outset_2: #b83636;
$warning_bg_color: #ee8425;
$warning_gradint_1: #ffcb81;
$warning_gradint_2: #faa832;
$warning_outset_1: #faa832;
$warning_outset_2: #c98627;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,156 @@
/**
* Media
*/
(function( $, CherryJsCore){
'use strict';
CherryJsCore.utilites.namespace('ui_elements.media');
CherryJsCore.ui_elements.media = {
init: function () {
$( document )
.on( 'ready', this.render )
.on( 'cherry-ui-elements-init', this.render );
},
render: function ( event ) {
var target = ( event._target ) ? event._target : $( 'body' ),
buttons = $('.cherry-upload-button', target);
buttons.each( function() {
var button = $( this ),
button_parent = button.closest('.cherry-ui-media-wrap'),
settings = {
input: $('.cherry-upload-input', button_parent),
img_holder: $('.cherry-upload-preview', button_parent),
title_text: button.data('title'),
multiple: button.data('multi-upload'),
library_type: button.data('library-type'),
},
cherry_uploader = wp.media.frames.file_frame = wp.media({
title: settings.title_text,
button: { text: settings.title_text },
multiple: settings.multiple,
library : { type : settings.library_type }
});
if ( ! button_parent.has('input[name*="__i__"]')[ 0 ] ) {
button.off( 'click.cherry-media' ).on( 'click.cherry-media', function() {
cherry_uploader.open();
return !1;
} ); // end click
cherry_uploader.on('select', function() {
var attachment = cherry_uploader.state().get('selection').toJSON(),
count = 0,
input_value = '',
new_img_object = $('.cherry-all-images-wrap', settings.img_holder),
new_img = '',
delimiter = '';
if ( settings.multiple ) {
input_value = settings.input.val();
delimiter = ',';
new_img = new_img_object.html();
}
while( attachment[ count ] ) {
var img_data = attachment[count],
return_data = img_data.id,
mimeType = img_data.mime,
img_src = '',
thumb = '';
switch (mimeType) {
case 'image/jpeg':
case 'image/png':
case 'image/gif':
if( img_data.sizes !== undefined){
img_src = img_data.sizes.thumbnail ? img_data.sizes.thumbnail.url : img_data.sizes.full.url;
}
thumb = '<img src="' + img_src + '" alt="" data-img-attr="'+return_data+'">';
break;
case 'image/x-icon':
thumb = '<span class="dashicons dashicons-format-image"></span>';
break;
case 'video/mpeg':
case 'video/mp4':
case 'video/quicktime':
case 'video/webm':
case 'video/ogg':
thumb = '<span class="dashicons dashicons-format-video"></span>';
break;
case 'audio/mpeg':
case 'audio/wav':
case 'audio/ogg':
thumb = '<span class="dashicons dashicons-format-audio"></span>';
break;
}
new_img += '<div class="cherry-image-wrap">'+
'<div class="inner">'+
'<div class="preview-holder" data-id-attr="' + return_data +'"><div class="centered">' + thumb + '</div></div>'+
'<a class="cherry-remove-image" href="#"><i class="dashicons dashicons-no"></i></a>'+
'<span class="title">' + img_data.title + '</span>'+
'</div>'+
'</div>';
input_value += delimiter+return_data;
count++;
}
settings.input.val(input_value.replace(/(^,)/, '')).trigger( 'change' );
new_img_object.html(new_img);
} );
var removeMediaPreview = function( item ) {
var button_parent = item.closest('.cherry-ui-media-wrap'),
input = $('.cherry-upload-input', button_parent),
img_holder = item.parent().parent('.cherry-image-wrap'),
img_attr = $('.preview-holder', img_holder).data('id-attr'),
input_value = input.attr('value'),
pattern = new RegExp(''+img_attr+'(,*)', 'i');
input_value = input_value.replace(pattern, '');
input_value = input_value.replace(/(,$)/, '');
input.attr({'value':input_value}).trigger( 'change' );
img_holder.remove();
};
// This function remove upload image
button_parent.on('click', '.cherry-remove-image', function () {
removeMediaPreview( $(this) );
return !1;
});
}
} ); // end each
// Image ordering
$('.cherry-all-images-wrap', target).sortable( {
items: 'div.cherry-image-wrap',
cursor: 'move',
scrollSensitivity: 40,
forcePlaceholderSize: true,
forceHelperSize: false,
helper: 'clone',
opacity: 0.65,
placeholder: 'cherry-media-thumb-sortable-placeholder',
start:function(){},
stop:function(){},
update: function() {
var attachment_ids = '';
$('.cherry-image-wrap', this).each(
function() {
var attachment_id = $('.preview-holder', this).data( 'id-attr' );
attachment_ids = attachment_ids + attachment_id + ',';
}
);
attachment_ids = attachment_ids.substr(0, attachment_ids.lastIndexOf(',') );
$(this).parent().siblings('.cherry-element-wrap').find('input.cherry-upload-input').val( attachment_ids ).trigger( 'change' );
}
} );
// End Image ordering
}
};
CherryJsCore.ui_elements.media.init();
}( jQuery , window.CherryJsCore ) );

View File

@@ -0,0 +1,157 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container {
margin: 10px 0 20px 0;
}
label.cherry-label {
margin: 0 0 5px 0;
display: block;
}
.cherry-ui-media-wrap {
.cherry-upload-preview {
display: block;
margin: 0 0 5px 0;
.cherry-image-wrap {
position: relative;
display: inline-block;
vertical-align: top;
width: 128px;
height: 128px;
.inner {
width: 110px;
height: 110px;
margin: 3px;
position: relative;
border: 1px solid #d5dadf;
padding: 5px;
overflow: hidden;
.preview-holder {
width: 100%;
height: 100%;
position: relative;
background: $bg_color;
box-sizing: border-box;
.centered {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate(50%,50%);
}
img {
max-width: 100%;
height: auto;
transform: translate(-50%,-50%);
}
span {
width: auto;
height: auto;
font-size: 60px;
transform: translate(-50%,-50%);
}
}
.title {
position: absolute;
display: none;
width: 100px;
padding: 5px;
margin: 5px;
bottom: 0;
left: 0;
color: #fff;
background: #a4afb7;
text-align: center;
font-size: 11px;
overflow: hidden;
}
}
&:hover {
.inner {
border-color: #d5dadf;
}
.title {
display: block;
}
.cherry-remove-image {
display: block;
}
}
}
.cherry-media-thumb-sortable-placeholder {
width: 120px;
height: 120px;
margin: 3px;
vertical-align: top;
border: 1px dashed $border_color;
display: inline-block;
background-color: $bg_color;
}
}
.upload-button {
float: left;
}
.cherry-remove-image {
width: 25px;
height: 25px;
color: $remove_color;
display: block;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
text-decoration: none;
outline: 0;
display: none;
i {
width: 25px;
height: 25px;
font-size: 25px;
}
&:hover {
color: darken( $remove_color, 10% );
}
}
.cherry-bgsetting {
float: left;
width: 32%;
margin-right: 1%;
&:nth-child(3n+1) {
width: 34%;
margin-right: 0;
}
select {
margin-bottom: 10px;
}
}
}
.button-default_ {
@include button_base();
@include secondary_button();
}

View File

@@ -0,0 +1,195 @@
<?php
/**
* Class for the building ui-media elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Media' ) ) {
/**
* Class for the building UI_Media elements.
*/
class UI_Media extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-media-id',
'name' => 'cherry-ui-media-name',
'value' => '',
'multi_upload' => true,
'library_type' => '', // image, video, sound
'upload_button_text' => 'Choose Media',
'label' => '',
'class' => '',
'master' => '',
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Media class.
*
* @since 1.0.0
*/
public function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-media-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Media.
*
* @since 1.0.0
*/
public function render() {
$html = '';
if ( current_user_can( 'upload_files' ) ) {
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' != $this->settings['value'] ) {
$this->settings['value'] = str_replace( ' ', '', $this->settings['value'] );
$medias = explode( ',', $this->settings['value'] );
} else {
$this->settings['value'] = '';
$medias = array();
}
$img_style = ! $this->settings['value'] ? 'style="display:none;"' : '' ;
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= '<div class="cherry-ui-media-wrap">';
$html .= '<div class="cherry-upload-preview" >';
$html .= '<div class="cherry-all-images-wrap">';
if ( is_array( $medias ) && ! empty( $medias ) ) {
foreach ( $medias as $medias_key => $medias_value ) {
$media_title = get_the_title( $medias_value );
$mime_type = get_post_mime_type( $medias_value );
$tmp = wp_get_attachment_metadata( $medias_value );
$img_src = '';
$thumb = '';
switch ( $mime_type ) {
case 'image/jpeg':
case 'image/png':
case 'image/gif':
$img_src = wp_get_attachment_image_src( $medias_value, 'thumbnail' );
$img_src = $img_src[0];
$thumb = '<img src="' . esc_html( $img_src ) . '" alt="">';
break;
case 'image/x-icon':
$thumb = '<span class="dashicons dashicons-format-image"></span>';
break;
case 'video/mpeg':
case 'video/mp4':
case 'video/quicktime':
case 'video/webm':
case 'video/ogg':
$thumb = '<span class="dashicons dashicons-format-video"></span>';
break;
case 'audio/mpeg':
case 'audio/wav':
case 'audio/ogg':
$thumb = '<span class="dashicons dashicons-format-audio"></span>';
break;
}
$html .= '<div class="cherry-image-wrap">';
$html .= '<div class="inner">';
$html .= '<div class="preview-holder" data-id-attr="' . esc_attr( $medias_value ) . '">';
$html .= '<div class="centered">';
$html .= $thumb;
$html .= '</div>';
$html .= '</div>';
$html .= '<span class="title">' . $media_title . '</span>';
$html .= '<a class="cherry-remove-image" href="#" title=""><i class="dashicons dashicons-no"></i></a>';
$html .= '</div>';
$html .= '</div>';
}
}
$html .= '</div>';
$html .= '</div>';
$html .= '<div class="cherry-element-wrap">';
$html .= '<input type="hidden" id="' . esc_attr( $this->settings['id'] ) . '" class="cherry-upload-input" name="' . esc_attr( $this->settings['name'] ) . '" value="' . esc_html( $this->settings['value'] ) . '"' . $this->lock_element->get_disabled_attr() . '>';
$html .= '<button type="button" class="upload-button cherry-upload-button button-default_" value="' . esc_attr( $this->settings['upload_button_text'] ) . '" data-title="' . esc_attr( $this->settings['upload_button_text'] ) . '" data-multi-upload="' . esc_attr( $this->settings['multi_upload'] ) . '" data-library-type="' . esc_attr( $this->settings['library_type'] ) . '"' . $this->lock_element->get_disabled_attr() . '>' . esc_attr( $this->settings['upload_button_text'] ) . '</button>';
$html .= '<div class="clear"></div>';
$html .= '</div>';
$html .= '</div>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
}
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Media.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
if ( current_user_can( 'upload_files' ) ) {
wp_enqueue_media();
wp_enqueue_script(
'ui-media',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-media/assets/min/ui-media.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery', 'jquery-ui-sortable' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-media',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-media/assets/min/ui-media.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.hide{display:none !important}input.cherry-radio-input{display:none}.cherry-radio-item{margin-bottom:10px}.cherry-radio-item:last-child{margin-bottom:0}.cherry-radio-item label{display:inline-block;font-size:12px;line-height:14px;color:#23282d}.cherry-radio-item span.cherry-radio-item{width:16px;height:16px;border-radius:25px;margin-right:10px;cursor:pointer;position:relative;background-color:white;display:inline-block;float:left;box-shadow:1px 1px 6px rgba(0,0,0,0.2)}.cherry-radio-item span.cherry-radio-item i{width:8px;height:8px;background-color:#495159;margin:4px;border-radius:20px;display:inline-block;transform:scale(0);transition:all 0.4s cubic-bezier(0.77, 0, 0.175, 1)}.cherry-radio-item .cherry-radio-input:checked+label span i{transform:scale(1)}.cherry-radio-img{float:left;margin:10px 5px 0 5px;text-align:center;max-width:60px;font-size:12px;position:relative}.cherry-radio-img .cherry-lable-content{display:flex;flex-flow:column}.cherry-radio-img label{display:inline-block}.cherry-radio-img img{width:100%;height:auto;margin:0 0 5px 0;pointer-events:none}.cherry-radio-img .cherry-radio-input:checked+label{font-weight:bold}.cherry-radio-img .cherry-radio-input:checked+label .check{display:block}.cherry-radio-img .cherry-radio-input:checked+label img{box-shadow:0 0 0 2px #fffeff,0 0 0 5px #49c66a}

View File

@@ -0,0 +1 @@
!function(t,e){"use strict";e.utilites.namespace("ui_elements.radio"),e.ui_elements.radio={inputClass:'.cherry-radio-input:not([name*="__i__"])',containerClass:".cherry-ui-container",wrapperClass:".widget, .postbox, .cherry-form, .cherry-ui-repeater-item",init:function(){t(document).on("ready.cherry-ui-elements-init",this.addEvent.bind(this)).on("cherry-ui-elements-init",this.setState.bind(this))},addEvent:function(){t("body").on("click.masterSlave",this.inputClass,this.switchState.bind(this)),this.setState({_target:t("body")})},setState:function(e){this.switchState({currentTarget:t(this.inputClass,e._target)})},switchState:function(e){for(var i,s,n,r=t(e.currentTarget).closest(this.containerClass),a=t(this.inputClass,r),c=a.length-1;c>=0;c--)i=t(a[c]),n=i.data(),s=i.closest(this.wrapperClass),jQuery.isEmptyObject(n)||t("."+n.slave,s)[i[0].checked?"removeClass":"addClass"]("hide")}},e.ui_elements.radio.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,184 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius_small;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,21 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius: 4px;
$border_radius_2x: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,48 @@
/**
* Radio
*/
(function($, CherryJsCore){
'use strict';
CherryJsCore.utilites.namespace('ui_elements.radio');
CherryJsCore.ui_elements.radio = {
inputClass: '.cherry-radio-input:not([name*="__i__"])',
containerClass: '.cherry-ui-container',
wrapperClass: '.widget, .postbox, .cherry-form, .cherry-ui-repeater-item',
init: function () {
$( document )
.on( 'ready.cherry-ui-elements-init', this.addEvent.bind( this ) )
.on( 'cherry-ui-elements-init', this.setState.bind( this ) );
},
addEvent: function () {
$( 'body' ).on( 'click.masterSlave', this.inputClass, this.switchState.bind( this ) );
this.setState( { '_target': $( 'body' ) } );
},
setState: function ( event ) {
this.switchState( { 'currentTarget': $( this.inputClass, event._target ) } );
},
switchState: function ( event ) {
var parent = $( event.currentTarget ).closest( this.containerClass ),
children = $( this.inputClass, parent ),
i = children.length - 1,
$_target,
wrapper,
data;
for (; i >= 0; i--) {
$_target = $( children[ i ] );
data = $_target.data();
wrapper = $_target.closest( this.wrapperClass );
if ( jQuery.isEmptyObject( data ) ) {
continue;
} else {
$( '.' + data.slave, wrapper )[ ( $_target[ 0 ].checked ) ? 'removeClass' : 'addClass' ]( 'hide' );
}
}
}
};
CherryJsCore.ui_elements.radio.init();
}(jQuery, window.CherryJsCore));

View File

@@ -0,0 +1,105 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.hide{
display: none !important;
}
input.cherry-radio-input{
display: none;
}
.cherry-radio-item{
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
label {
display: inline-block;
font-size: 12px;
line-height: 14px;
color: $dark_color_1;
}
span.cherry-radio-item {
width: 16px;
height: 16px;
border-radius: 25px;
margin-right: 10px;
cursor: pointer;
position: relative;
background-color: white;
display: inline-block;
float: left;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
i {
width: 8px;
height: 8px;
background-color: #495159;
margin: 4px;
border-radius: 20px;
display: inline-block;
transform: scale(0);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
}
}
.cherry-radio-item {
.cherry-radio-input:checked{
& + label{
span{
i{
transform: scale(1);
}
}
}
}
}
.cherry-radio-img {
float: left;
margin: 10px 5px 0 5px;
text-align: center;
max-width: 60px;
font-size: 12px;
position: relative;
.cherry-lable-content {
display: flex;
flex-flow: column;
}
label{
display: inline-block;
}
img {
width: 100%;
height: auto;
margin: 0 0 5px 0;
pointer-events: none;
}
}
.cherry-radio-img{
.cherry-radio-input:checked{
& + label{
font-weight: bold;
.check{
display: block;
}
img{
box-shadow: 0 0 0 2px rgba(255, 254, 255, 1), 0 0 0 5px #49c66a;
}
}
}
}

View File

@@ -0,0 +1,155 @@
<?php
/**
* Class for the building ui-radio elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Radio' ) ) {
/**
* Class for the building UI_Radio elements.
*/
class UI_Radio extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-radio-id',
'name' => 'cherry-ui-radio-name',
'value' => 'radio-2',
'options' => array(
'radio-1' => array(
'label' => 'Radio 1',
'img_src' => '',
'slave' => '',
'lock' => array(
'label' => '',
'url' => '',
'icon' => '',
),
),
'radio-2' => array(
'label' => 'Radio 2',
'img_src' => '',
'slave' => '',
),
'radio-3' => array(
'label' => 'Radio 3',
'img_src' => '',
'slave' => '',
),
),
'slave' => array(),
'label' => '',
'class' => '',
'master' => '',
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Radio class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-radio-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
self::enqueue_assets();
}
/**
* Render html UI_Radio.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '" >';
if ( $this->settings['options'] && ! empty( $this->settings['options'] ) && is_array( $this->settings['options'] ) ) {
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . $this->settings['label'] . '</label> ';
}
$html .= '<div class="cherry-radio-group">';
foreach ( $this->settings['options'] as $option => $option_value ) {
$lock_option = new Cherry5_Lock_Element( $option_value );
$checked = $option == $this->settings['value'] ? ' checked' : '';
$radio_id = $this->settings['id'] . '-' . $option;
$img = isset( $option_value['img_src'] ) && ! empty( $option_value['img_src'] ) ? '<img src="' . esc_url( $option_value['img_src'] ) . '" alt="' . esc_html( $option_value['label'] ) . '">' : '<span class="cherry-radio-item"><i></i></span>';
$data_slave = isset( $option_value['slave'] ) && ! empty( $option_value['slave'] ) ? ' data-slave="' . $option_value['slave'] . '"' : '';
$class_box = isset( $option_value['img_src'] ) && ! empty( $option_value['img_src'] ) ? ' cherry-radio-img' : ' cherry-radio-item' ;
$class_box .= $lock_option->get_class();
$html .= '<div class="' . $class_box . '">';
$html .= '<input type="radio" id="' . esc_attr( $radio_id ) . '" class="cherry-radio-input" name="' . esc_attr( $this->settings['name'] ) . '" ' . checked( $option, $this->settings['value'], false ) . ' value="' . esc_attr( $option ) . '"' . $data_slave . ' ' . $lock_option->get_disabled_attr() . '/>';
$label_content = $img . $option_value['label'];
$html .= '<label for="' . esc_attr( $radio_id ) . '"><span class="cherry-lable-content">' . $label_content . '</span>' . $lock_option->get_html() . '</label> ';
$html .= '</div>';
}
$html .= '<div class="clear"></div>';
$html .= '</div>';
}
$html .= $this->lock_element->get_html() . '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Radio.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-radio',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-radio/assets/min/ui-radio.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
wp_enqueue_script(
'ui-radio-min',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-radio/assets/min/ui-radio.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-ui-repeater-container label.cherry-label{margin:0 0 5px 0;display:block}.cherry-ui-repeater-add{display:inline-block;text-decoration:none;font-size:12px;line-height:20px;font-weight:bold;color:#298ffc;text-transform:uppercase;transition:all 200ms linear}.cherry-ui-repeater-add:hover{color:#23282d;box-shadow:none}.cherry-ui-repeater-add:focus,.cherry-ui-repeater-add:active{outline:none;border-color:rgba(41,143,252,0.6);box-shadow:0 0 2px rgba(41,143,252,0.6);color:#298ffc}.cherry-ui-repeater-add:before{content:"";display:inline-block;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;height:18px;line-height:18px;text-align:center;text-decoration:inherit;transition:all 200ms linear;vertical-align:middle;padding:0 5px 0 0;color:#b4b7ba}.cherry-ui-repeater-add:hover:before{color:#298ffc}.cherry-ui-repeater-item{padding:10px 10px 10px 30px;position:relative}.cherry-ui-repeater-remove{position:absolute;width:20px;height:20px;right:18px;top:13px;border-radius:50%;border:1px solid currentColor;color:red;font-size:18px;line-height:20px;text-align:center;cursor:pointer}.cherry-ui-repeater-remove:before{content:"\00D7"}.cherry-ui-repeater-remove:hover{color:black}.cherry-ui-kit.cherry-ui-repeater-container{padding:30px;border:2px solid #e5e5e5;background:#f1f1f1;border-radius:8px}.cherry-ui-kit>label.cherry-label{margin:-30px -30px 30px -30px;border-radius:8px 8px 0 0;border-bottom:1px solid #e5e5e5;padding:20px 30px;font-weight:bold;font-size:16px;line-height:18px;text-align:center;background:#fff}.cherry-ui-kit .cherry-ui-repeater-item{margin:0 0 30px;padding:20px;background:#fff;box-shadow:0 8px 21px rgba(0,0,0,0.1);border-radius:4px}.cherry-ui-kit .cherry-ui-repeater-actions-box{margin:-20px -20px 20px -20px;border-radius:4px 4px 0 0;border-bottom:1px solid #e5e5e5;padding:20px 30px;font-weight:bold;font-size:16px;line-height:18px;background:#fff;padding:15px 20px;cursor:move;position:relative;text-align:center;min-height:18px}.cherry-ui-kit .cherry-ui-repeater-toggle{position:absolute;color:#b4b7ba;width:20px;height:20px;font-size:22px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;text-decoration:none;box-shadow:none;outline:none;top:13px;left:18px}.cherry-ui-kit .cherry-ui-repeater-toggle:before{content:"\f142";-webkit-transition:all 200ms linear;transition:all 200ms linear;font-family:dashicons;vertical-align:middle}.cherry-ui-kit .cherry-ui-repeater-toggle:hover{color:#23282d}.cherry-ui-kit .cherry-ui-repeater-remove{position:absolute;border:none;color:#b4b7ba;font-size:20px;line-height:20px;width:20px;height:20px;text-align:center;vertical-align:middle;text-decoration:none;box-shadow:none;outline:none;top:13px;right:18px}.cherry-ui-kit .cherry-ui-repeater-remove:before{content:"\f158";-webkit-transition:all 200ms linear;transition:all 200ms linear;font-family:dashicons;vertical-align:middle}.cherry-ui-kit .cherry-ui-repeater-remove:hover{color:#23282d}.cherry-ui-kit .cherry-ui-repeater-title{width:70%;overflow:hidden;text-overflow:ellipsis;display:inline-block;font-size:14px}.cherry-ui-kit .cherry-ui-repeater-add:focus{outline:none;box-shadow:none}.cherry-ui-kit .cherry-ui-repeater-min{padding-bottom:0}.cherry-ui-kit .cherry-ui-repeater-min>.cheryr-ui-repeater-content-box{display:none}.cherry-ui-kit .cherry-ui-repeater-min>.cherry-ui-repeater-actions-box{margin-bottom:0;border-bottom:none;background:none}.cherry-ui-kit .cherry-ui-repeater-min>.cherry-ui-repeater-actions-box .cherry-ui-repeater-toggle:before{content:"\f140"}

View File

@@ -0,0 +1 @@
!function(e,t){"use strict";t.utilites.namespace("ui_elements.repeater"),t.ui_elements.repeater={repeaterContainerClass:".cherry-ui-repeater-container",repeaterListClass:".cherry-ui-repeater-list",repeaterItemClass:".cherry-ui-repeater-item",repeaterItemHandleClass:".cherry-ui-repeater-actions-box",repeaterTitleClass:".cherry-ui-repeater-title",addItemButtonClass:".cherry-ui-repeater-add",removeItemButtonClass:".cherry-ui-repeater-remove",toggleItemButtonClass:".cherry-ui-repeater-toggle",minItemClass:"cherry-ui-repeater-min",sortablePlaceholderClass:"sortable-placeholder",init:function(){e(document).on("ready",this.addEvents.bind(this))},addEvents:function(){e("body").on("click",this.addItemButtonClass,{self:this},this.addItem).on("click",this.removeItemButtonClass,{self:this},this.removeItem).on("click",this.toggleItemButtonClass,{self:this},this.toggleItem).on("change",this.repeaterListClass+" input, "+this.repeaterListClass+" textarea, "+this.repeaterListClass+" select",{self:this},this.changeWrapperLable).on("sortable-init",{self:this},this.sortableItem),e(document).on("cherry-ui-elements-init",{self:this},this.sortableItem),this.triggers()},triggers:function(t){return e("body").trigger("sortable-init"),t&&e(document).trigger("cherry-ui-elements-init",{target:t}),this},addItem:function(t){var r=t.data.self,a=e(this).prev(r.repeaterListClass),s=a.data("index"),i=a.data("name"),n=wp.template(i),l=a.data("widget-id"),o={index:s};(l="__i__"!==l?l:a.attr("id"))&&(o.widgetId=l),a.append(n(o)),s++,a.data("index",s),r.triggers(e(r.repeaterItemClass+":last",a)).stopDefaultEvent(t)},removeItem:function(t){var r=t.data.self,a=e(this).closest(r.repeaterListClass);r.applyChanges(a),e(this).closest(r.repeaterItemClass).remove(),r.triggers().stopDefaultEvent(t)},toggleItem:function(t){var r=t.data.self;e(this).closest(r.repeaterItemClass).toggleClass(r.minItemClass),r.stopDefaultEvent(t)},sortableItem:function(t){var r,a,s=t.data.self;e(s.repeaterListClass).each(function(t,i){r=e(i),(a=e(i).data("sortable-init"))?r.sortable("refresh"):r.sortable({items:s.repeaterItemClass,handle:s.repeaterItemHandleClass,cursor:"move",scrollSensitivity:40,forcePlaceholderSize:!0,forceHelperSize:!1,distance:2,tolerance:"pointer",helper:function(e,t){return t.clone().find(":input").attr("name",function(e,t){return"sort_"+parseInt(1e5*Math.random(),10).toString()+"_"+t}).end()},opacity:.65,placeholder:s.sortablePlaceholderClass,create:function(){r.data("sortable-init",!0)},update:function(t){var r=e(t.target);s.applyChanges(r)}})})},changeWrapperLable:function(t){var r,a,s=t.data.self,i=e(s.repeaterListClass).data("title-field"),n=e(this);i&&n.closest("."+i+"-wrap")[0]&&(r=n.val(),a=n.closest(s.repeaterItemClass),e(s.repeaterTitleClass,a).html(r)),s.stopDefaultEvent(t)},applyChanges:function(t){return void 0!==wp.customize&&e("input[name]:first, select[name]:first",t).change(),this},stopDefaultEvent:function(e){return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),this}},t.ui_elements.repeater.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,184 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_2x;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_2x $border_radius_2x 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius $border_radius 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,21 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius: 4px;
$border_radius_2x: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,185 @@
/**
* Repeater
*/
(function( $, CherryJsCore ) {
'use strict';
CherryJsCore.utilites.namespace( 'ui_elements.repeater' );
CherryJsCore.ui_elements.repeater = {
repeaterContainerClass: '.cherry-ui-repeater-container',
repeaterListClass: '.cherry-ui-repeater-list',
repeaterItemClass: '.cherry-ui-repeater-item',
repeaterItemHandleClass: '.cherry-ui-repeater-actions-box',
repeaterTitleClass: '.cherry-ui-repeater-title',
addItemButtonClass: '.cherry-ui-repeater-add',
removeItemButtonClass: '.cherry-ui-repeater-remove',
toggleItemButtonClass: '.cherry-ui-repeater-toggle',
minItemClass: 'cherry-ui-repeater-min',
sortablePlaceholderClass: 'sortable-placeholder',
init: function() {
$( document ).on( 'ready', this.addEvents.bind( this ) );
},
addEvents: function() {
$( 'body' )
// Delegate events
.on( 'click', this.addItemButtonClass, { 'self': this }, this.addItem )
.on( 'click', this.removeItemButtonClass, { 'self': this }, this.removeItem )
.on( 'click', this.toggleItemButtonClass, { 'self': this }, this.toggleItem )
.on( 'change', this.repeaterListClass + ' input, ' + this.repeaterListClass + ' textarea, ' + this.repeaterListClass + ' select', { 'self': this }, this.changeWrapperLable )
// Custom events
.on( 'sortable-init', { 'self': this }, this.sortableItem );
$( document )
.on( 'cherry-ui-elements-init', { 'self': this }, this.sortableItem );
this.triggers();
},
triggers: function( $target ) {
$( 'body' ).trigger( 'sortable-init' );
if ( $target ) {
$( document ).trigger( 'cherry-ui-elements-init', { 'target': $target } );
}
return this;
},
addItem: function( event ) {
var self = event.data.self,
$list = $( this ).prev( self.repeaterListClass ),
index = $list.data( 'index' ),
tmplName = $list.data( 'name' ),
rowTemplate = wp.template( tmplName ),
widgetId = $list.data( 'widget-id' ),
data = { index: index };
widgetId = '__i__' !== widgetId ? widgetId : $list.attr( 'id' ) ;
if ( widgetId ) {
data.widgetId = widgetId;
}
$list.append( rowTemplate( data ) );
index++;
$list.data( 'index', index );
self
.triggers( $( self.repeaterItemClass + ':last', $list ) )
.stopDefaultEvent( event );
},
removeItem: function( event ) {
var self = event.data.self,
$list = $( this ).closest( self.repeaterListClass );
self.applyChanges( $list );
$( this ).closest( self.repeaterItemClass ).remove();
self
.triggers()
.stopDefaultEvent( event );
},
toggleItem: function( event ) {
var self = event.data.self,
$container = $( this ).closest( self.repeaterItemClass );
$container.toggleClass( self.minItemClass );
self.stopDefaultEvent( event );
},
sortableItem: function( event ) {
var self = event.data.self,
$list = $( self.repeaterListClass ),
$this,
initFlag;
$list.each( function( indx, element ) {
$this = $( element );
initFlag = $( element ).data( 'sortable-init' );
if ( ! initFlag ) {
$this.sortable( {
items: self.repeaterItemClass,
handle: self.repeaterItemHandleClass,
cursor: 'move',
scrollSensitivity: 40,
forcePlaceholderSize: true,
forceHelperSize: false,
distance: 2,
tolerance: 'pointer',
helper: function( event, element ) {
return element.clone()
.find( ':input' )
.attr( 'name', function( i, currentName ) {
return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
} )
.end();
},
opacity: 0.65,
placeholder: self.sortablePlaceholderClass,
create: function() {
$this.data( 'sortable-init', true );
},
update: function( event ) {
var target = $( event.target );
self.applyChanges( target );
}
} );
} else {
$this.sortable( 'refresh' );
}
} );
},
changeWrapperLable: function( event ) {
var self = event.data.self,
$list = $( self.repeaterListClass ),
titleFilds = $list.data( 'title-field' ),
$this = $( this ),
value,
parentItem;
if ( titleFilds && $this.closest( '.' + titleFilds + '-wrap' )[0] ) {
value = $this.val(),
parentItem = $this.closest( self.repeaterItemClass );
$( self.repeaterTitleClass, parentItem ).html( value );
}
self.stopDefaultEvent( event );
},
applyChanges: function( target ) {
if ( undefined !== wp.customize ) {
$( 'input[name]:first, select[name]:first', target ).change();
}
return this;
},
stopDefaultEvent: function( event ) {
event.preventDefault();
event.stopImmediatePropagation();
event.stopPropagation();
return this;
}
};
CherryJsCore.ui_elements.repeater.init();
}( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,143 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
.cherry-ui-repeater-container {
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
}
.cherry-ui-repeater {
&-add {
@include link();
@include link_icon_before( '\f132' );
}
&-item {
padding: 10px 10px 10px 30px;
position: relative;
}
&-remove {
position: absolute;
width: 20px;
height: 20px;
right: 18px;
top: 13px;
border-radius: 50%;
border: 1px solid currentColor;
color: red;
font-size: 18px;
line-height: 20px;
text-align: center;
cursor: pointer;
&:before {
content: "\00D7";
}
&:hover {
color: black;
}
}
}
.cherry-ui-kit {
&.cherry-ui-repeater-container {
@include container();
}
> label.cherry-label {
@include container_heading();
}
.cherry-ui-repeater {
&-item {
@include box();
}
&-actions-box {
@include box_heading();
padding: 15px 20px;
cursor: move;
position: relative;
text-align: center;
min-height: 18px;
}
&-toggle {
position: absolute;
color: $grey_color_4;
width: 20px;
height: 20px;
font-size: 22px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
box-shadow: none;
outline: none;
top: 13px;
left: 18px;
&:before {
content: "\f142";
transition: all 200ms linear;
font-family: dashicons;
vertical-align: middle;
}
&:hover {
color: $dark_color_1;
}
}
&-remove {
position: absolute;
border: none;
color: $grey_color_4;
font-size: 20px;
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
text-decoration: none;
box-shadow: none;
outline: none;
top: 13px;
right: 18px;
&:before {
content: "\f158";
transition: all 200ms linear;
font-family: dashicons;
vertical-align: middle;
}
&:hover {
color: $dark_color_1;
}
}
&-title{
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
font-size: 14px;
}
&-add {
&:focus {
outline: none;
box-shadow: none;
}
}
}
.cherry-ui-repeater-min {
padding-bottom: 0;
> .cheryr-ui-repeater-content-box {
display: none;
}
> .cherry-ui-repeater-actions-box {
margin-bottom: 0;
border-bottom: none;
background: none;
.cherry-ui-repeater-toggle {
&:before {
content: "\f140";
}
}
}
}
}

View File

@@ -0,0 +1,358 @@
<?php
/**
* Class for the building ui-repeater elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Repeater' ) ) {
/**
* Class for the building ui-repeater elements.
*/
class UI_Repeater extends UI_Element implements I_UI {
/**
* Default settings
*
* @var array
*/
private $defaults_settings = array(
'type' => 'repeater',
'id' => 'cherry-ui-repeater-id',
'name' => 'cherry-ui-repeater-name',
'value' => array(),
'fields' => array(),
'label' => '',
'add_label' => 'Add Item',
'class' => '',
'master' => '',
'ui_kit' => true,
'required' => false,
'title_field' => '',
);
/**
* Stored data to process it while renderinr row
*
* @var array
*/
public $data = array();
/**
* Repeater instances counter
*
* @var integer
*/
public static $instance_id = 0;
/**
* Current onstance TMPL name
*
* @var string
*/
public $tmpl_name = '';
/**
* Holder for templates to print it in bottom of customizer page
*
* @var string
*/
public static $customizer_tmpl_to_print = null;
/**
* Is tmpl scripts already printed in customizer
*
* @var boolean
*/
public static $customizer_tmpl_printed = false;
/**
* Constructor method for the UI_Repeater class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-input-text-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->set_tmpl_data();
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
add_action( 'admin_footer', array( $this, 'print_js_template' ), 0 );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'fix_customizer_tmpl' ), 9999 );
}
/**
* Get required attribute.
*
* @return string required attribute
*/
public function get_required() {
if ( $this->settings['required'] ) {
return 'required="required"';
}
return '';
}
/**
* Render html UI_Repeater.
*
* @since 1.0.1
*/
public function render() {
$html = '';
$class = $this->settings['class'] . ' ' . $this->settings['master'];
$ui_kit = ! empty( $this->settings['ui_kit'] ) ? 'cherry-ui-kit' : '';
$value = ! empty( $this->settings['value'] ) ? count( $this->settings['value'] ) : 0 ;
$title_field = ! empty( $this->settings['title_field'] ) ? 'data-title-field="' . $this->settings['title_field'] . '"' : '' ;
add_filter( 'cherry_ui_is_repeater', '__return_true' );
$html .= sprintf( '<div class="cherry-ui-repeater-container cherry-ui-container %1$s %2$s">',
$ui_kit,
esc_attr( $class )
);
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= sprintf(
'<div class="cherry-ui-repeater-list" data-name="%1$s" data-index="%2$s" data-widget-id="__i__" %3$s id="%4$s">',
$this->get_tmpl_name(),
$value,
$title_field,
esc_attr( $this->settings['id'] )
);
if ( is_array( $this->settings['value'] ) ) {
$index = 0;
foreach ( $this->settings['value'] as $data ) {
$html .= $this->render_row( $index, false, $data );
$index++;
}
}
$html .= '</div>';
$html .= sprintf(
'<a href="#" class="cherry-ui-repeater-add">%1$s</a>',
esc_html( $this->settings['add_label'] )
);
$html .= '</div>';
/**
* Maybe add js repeater template to response
*
* @var bool
*/
$add_js_to_response = apply_filters( 'cherry_ui_add_data_to_element', false );
if ( $add_js_to_response ) {
$html .= $this->get_js_template();
}
$html .= $this->get_additional_data();
remove_all_filters( 'cherry_ui_is_repeater' );
return $html;
}
/**
* Get additional data to return
* @return [type] [description]
*/
public function get_additional_data() {
$data = apply_filters( 'cherry_ui_add_repater_data', array() );
if ( ! empty( $data ) ) {
return implode( ' ', $data );
}
}
/**
* Render single row for repeater
*
* @param string $index Current row index.
* @param number $widget_index It contains widget index.
* @param array $data Values to paste.
* @since 1.0.1
*/
public function render_row( $index, $widget_index, $data ) {
$this->data = $data;
$html = '<div class="cherry-ui-repeater-item" >';
$html .= '<div class="cherry-ui-repeater-actions-box">';
$html .= '<a href="#" class="cherry-ui-repeater-remove"></a>';
$html .= '<span class="cherry-ui-repeater-title">' . $this->get_row_title() . '</span>';
$html .= '<a href="#" class="cherry-ui-repeater-toggle"></a>';
$html .= '</div>';
$html .= '<div class="cheryr-ui-repeater-content-box">';
foreach ( $this->settings['fields'] as $field ) {
$html .= '<div class="' . $field['id'] . '-wrap">';
$html .= $this->render_field( $index, $widget_index, $field );
$html .= '</div>';
}
$html .= '</div>';
$html .= '</div>';
$this->data = array();
return $html;
}
/**
* Get repeater item title
*
* @return string
* @since 1.0.1
*/
public function get_row_title() {
if ( empty( $this->settings['title_field'] ) ) {
return '';
}
if ( ! empty( $this->data[ $this->settings['title_field'] ] ) ) {
return $this->data[ $this->settings['title_field'] ];
}
return '';
}
/**
* Render single repeater field
*
* @param string $index Current row index.
* @param number $widget_index It contains widget index.
* @param array $field Values to paste.
* @return string
*/
public function render_field( $index, $widget_index, $field ) {
if ( empty( $field['type'] ) || empty( $field['name'] ) ) {
return '"type" and "name" are required fields for UI_Repeater items';
}
$field = wp_parse_args( $field, array(
'value' => '',
) );
$parent_name = str_replace( '__i__', $widget_index, $this->settings['name'] );
$field['id'] = sprintf( '%s-%s', $field['id'], $index );
$field['value'] = isset( $this->data[ $field['name'] ] ) ? $this->data[ $field['name'] ] : $field['value'];
$field['name'] = sprintf( '%1$s[item-%2$s][%3$s]', $parent_name, $index, $field['name'] );
$ui_class_name = 'UI_' . ucwords( $field['type'] );
if ( ! class_exists( $ui_class_name ) ) {
return '<p>Class <b>' . $ui_class_name . '</b> not exist!</p>';
}
$ui_item = new $ui_class_name( $field );
return $ui_item->render();
}
/**
* Enqueue javascript and stylesheet UI_Repeater.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-repeater',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-repeater/assets/min/ui-repeater.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
wp_enqueue_script(
'ui-repeater',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-repeater/assets/min/ui-repeater.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'wp-util', 'jquery-ui-sortable' ),
Cherry_UI_Elements::$core_version,
true
);
}
/**
* Get TMPL name for current repeater instance.
*
* @return string
*/
public function get_tmpl_name() {
return $this->tmpl_name;
}
/**
* Set current repeater instance ID
*
* @return void
*/
public function set_tmpl_data() {
self::$instance_id++;
$this->tmpl_name = sprintf( 'repeater-template-%s', self::$instance_id );
global $wp_customize;
if ( isset( $wp_customize ) ) {
self::$customizer_tmpl_to_print .= $this->get_js_template();
}
}
/**
* Print JS template for current repeater instance
*
* @return void
*/
public function print_js_template() {
echo $this->get_js_template();
}
/**
* Get JS template to print
*
* @return string
*/
public function get_js_template() {
return sprintf(
'<script type="text/html" id="tmpl-%1$s">%2$s</script>',
$this->get_tmpl_name(),
$this->render_row( '{{{data.index}}}', '{{{data.widgetId}}}', array() )
);
}
/**
* Outputs JS templates on customizer page
*
* @return void
*/
public function fix_customizer_tmpl() {
if ( true === self::$customizer_tmpl_printed ) {
return;
}
self::$customizer_tmpl_printed = true;
echo self::$customizer_tmpl_to_print;
}
}
}

View File

@@ -0,0 +1,103 @@
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}
.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}
.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select2-container .select2-selection--single .select2-selection__clear{position:relative}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}
.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}
.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}
.select2-container .select2-search--inline{float:left}
.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}
.select2-dropdown{background-color:#fff;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}
.select2-results{display:block}
.select2-results__options{list-style:none;margin:0;padding:0}
.select2-results__option{padding:6px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}
.select2-results__option[aria-selected]{cursor:pointer}
.select2-container--open .select2-dropdown{left:0}
.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}
.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}
.select2-search--dropdown{display:block;padding:4px}
.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}
.select2-search--dropdown.select2-search--hide{display:none}
.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}
.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}
.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}
.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent;border-style:solid;border-width:5px 4px 0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}
.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888;border-width:0 4px 5px}
.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left}
.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}
.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}
.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}
.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}
.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}
.select2-container--default .select2-results__option[role=group]{padding:0}
.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}
.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}
.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:#fff}
.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}
.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}
.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}
.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}
.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}
.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}
.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}
.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent;border-style:solid;border-width:5px 4px 0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}
.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888;border-width:0 4px 5px}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top,#fff 0,#eee 50%);background-image:-webkit-linear-gradient(top, #fff 0, #eee 50%);background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}
.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}
.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}
.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}
.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}
.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}
.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}
.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}
.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}
.select2-container--classic .select2-dropdown--above{border-bottom:none}
.select2-container--classic .select2-dropdown--below{border-top:none}
.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}
.select2-container--classic .select2-results__option[role=group]{padding:0}
.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}
.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}
.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}
.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

View File

@@ -0,0 +1 @@
!function(e,t){"use strict";t.utilites.namespace("ui_elements.select"),t.ui_elements.select={selectClass:'.cherry-ui-select[data-filter="true"]:not([name*="__i__"]), .cherry-ui-select[multiple]:not([name*="__i__"])',wrapperClass:".widget, .postbox, .cherry-form, .cherry-ui-repeater-item",init:function(){e(document).on("ready.cherry-ui-elements-init",this.render.bind(this)).on("cherry-ui-elements-init",this.render.bind(this))},render:function(t){var i=t._target?t._target:e("body");e(this.selectClass,i).each(this.select2Init.bind(this))},select2Init:function(t,i){var r=e(i),s={placeholder:r.data("placeholder")};r.select2(s).on("change.cherrySelect2",this.changeEvent.bind(this)).trigger("change.cherrySelect2")},changeEvent:function(e){this.switchState(e.currentTarget)},switchState:function(t){for(var i,r,s,n=e(t),c=n[0].length;c>=0;c--)i=e(n[0][c]),r=i.data(),s=e(n[0]).closest(this.wrapperClass),jQuery.isEmptyObject(r)||e("."+r.slave,s)[i[0].selected?"removeClass":"addClass"]("hide")}},t.ui_elements.select.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,484 @@
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle; }
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-selection--single .select2-selection__clear {
position: relative; }
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px; }
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-search--inline {
float: left; }
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0; }
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051; }
.select2-results {
display: block; }
.select2-results__options {
list-style: none;
margin: 0;
padding: 0; }
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-results__option[aria-selected] {
cursor: pointer; }
.select2-container--open .select2-dropdown {
left: 0; }
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-search--dropdown {
display: block;
padding: 4px; }
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box; }
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-search--dropdown.select2-search--hide {
display: none; }
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0); }
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto; }
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default; }
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none; }
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left; }
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
float: right; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0; }
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default; }
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none; }
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa; }
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield; }
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--default .select2-results__option[role=group] {
padding: 0; }
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999; }
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd; }
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white; }
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px; }
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto; }
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0; }
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none; }
.select2-container--classic .select2-dropdown {
background-color: white;
border: 1px solid transparent; }
.select2-container--classic .select2-dropdown--above {
border-bottom: none; }
.select2-container--classic .select2-dropdown--below {
border-top: none; }
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--classic .select2-results__option[role=group] {
padding: 0; }
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey; }
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white; }
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb; }

View File

@@ -0,0 +1,14 @@
@mixin input() {
font-size: 12px;
line-height: 16px;
border-radius: $border_radius_extra_small;
padding: 3px 5px;
min-height: 28px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: darken( $border_color, 20% );
box-shadow: none;
}
}

View File

@@ -0,0 +1,11 @@
$light_color: #ffffff;
$dark_color: #dddddd;
$bg_color: #f1f1f1;
$bg_color_2: #e5e5e5;
$border_color: #d5dadf;
$remove_color: #f6121c;
$primary_color: #48c569;
$border_radius_extra_small: 3px;

View File

@@ -0,0 +1,61 @@
/**
* Select
*/
( function( $, CherryJsCore ){
'use strict';
CherryJsCore.utilites.namespace('ui_elements.select');
CherryJsCore.ui_elements.select = {
selectClass: '.cherry-ui-select[data-filter="true"]:not([name*="__i__"]), .cherry-ui-select[multiple]:not([name*="__i__"])',
wrapperClass: '.widget, .postbox, .cherry-form, .cherry-ui-repeater-item',
init: function () {
$( document )
.on( 'ready.cherry-ui-elements-init', this.render.bind( this ) )
.on( 'cherry-ui-elements-init', this.render.bind( this ) );
},
render: function ( event ) {
var target = ( event._target ) ? event._target : $( 'body' );
// init filter-select
$( this.selectClass , target ).each( this.select2Init.bind( this ) );
},
select2Init: function ( index, element ) {
var $this = $( element ),
options = {
placeholder: $this.data('placeholder')
};
$this
.select2( options )
.on('change.cherrySelect2', this.changeEvent.bind( this ) )
.trigger('change.cherrySelect2');
},
changeEvent: function ( event ) {
this.switchState( event.currentTarget );
},
switchState: function ( item ) {
var items = $( item ),
i = items[0].length,
option,
data,
wrapper;
for (; i >= 0; i--) {
option = $( items[0][ i ] );
data = option.data();
wrapper = $( items[0] ).closest( this.wrapperClass );
if ( jQuery.isEmptyObject( data ) ) {
continue;
} else {
$( '.' + data.slave, wrapper )[ ( option[ 0 ].selected ) ? 'removeClass' : 'addClass' ]( 'hide' );
}
}
}
};
CherryJsCore.ui_elements.select.init();
}( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,148 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.hide{
display: none !important;
}
select.cherry-ui-select{
width: 100%;
outline: 0 none;
@include input();
&:focus{
box-shadow: none;
}
}
select.select2-hidden-accessible{
display: none;
}
.cherry-ui-select-wrapper {
.select2{
color: $dark_color;
background-color: white;
border-radius: $border_radius_extra_small;
border: 1px solid $border_color;
.selection{
.select2-selection{
&.select2-selection--single{
background-color: transparent;
border: none;
border-radius: $border_radius_extra_small;
height: 28px;
.select2-selection__rendered{
padding: 5px;
font-size: 12px;
line-height: 18px;
}
.select2-selection__arrow{
height: 24px;
}
}
&.select2-selection--multiple{
background-color: transparent;
border: none;
border-radius: $border_radius_extra_small;
min-height: 26px;
.select2-selection__rendered{
font-size: 12px;
line-height: 14px;
padding: 0;
display: block;
&:focus {
outline: none;
}
.select2-selection__choice{
line-height: 14px;
margin: 2px;
border: none;
background-color: #e4e4e4;
border-radius: $border_radius_extra_small;
color: darken( $dark_color, 50% );
padding: 4px;
.select2-selection__choice__remove{
color: $remove_color;
margin-right: 5px;
font-size: 14px;
}
}
.select2-selection__clear{
}
.select2-search{
margin: 0;
.select2-search__field{
padding: 0;
border: none;
box-shadow: none;
line-height: 20px;
}
}
}
}
}
}
}
.select2-container{
.select2-dropdown{
background-color: white;
border: 1px solid $border_color;
border-radius: $border_radius_extra_small;
box-shadow: 0px 5px 21px rgba(0,0,0,0.1);
margin-top: 1px;
z-index: 500001;
.select2-search__field{
border: 1px solid $border_color;
box-shadow: none;
border-radius: $border_radius_extra_small;
margin: 0;
height: 25px;
&:focus{
outline: none;
}
}
.select2-results {
.select2-results__options{
.select2-results__option{
&[aria-selected=true]{
color: darken( $dark_color, 50% );
background-color: $dark_color;
}
&--highlighted{
color: #fff;
background-color: $primary_color;
}
}
.li[aria-disabled=true]{
display: none;
}
}
}
}
}
}

View File

@@ -0,0 +1,214 @@
<?php
/**
* Class for the building ui-select elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Select' ) ) {
/**
* Class for the building UI_Select elements.
*/
class UI_Select extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-select-id',
'name' => 'cherry-ui-select-name',
'multiple' => false,
'filter' => false,
'size' => 1,
'inline_style' => 'width: 100%',
'value' => 'select-8',
'placeholder' => null,
'lock' => false,
'options' => array(
'select-1' => 'select 1',
'select-2' => 'select 2',
'select-3' => 'select 3',
'select-4' => 'select 4',
'select-5' => array(
'label' => 'Group 1',
'slave' => 'slave',
),
'optgroup-1' => array(
'label' => 'Group 1',
'group_options' => array(
'select-6' => 'select 6',
'select-7' => 'select 7',
'select-8' => 'select 8',
),
),
'optgroup-2' => array(
'label' => 'Group 2',
'group_options' => array(
'select-9' => 'select 9',
'select-10' => 'select 10',
'select-11' => 'select 11',
),
),
),
'label' => '',
'class' => '',
'master' => '',
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Select class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-select-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Select.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
$html .= '<div class="cherry-ui-select-wrapper' . $this->lock_element->get_class() .'">';
( $this->settings['filter'] ) ? $filter_state = 'data-filter="true"' : $filter_state = 'data-filter="false"' ;
( $this->settings['multiple'] ) ? $multi_state = 'multiple="multiple"' : $multi_state = '' ;
( $this->settings['multiple'] ) ? $name = $this->settings['name'] . '[]' : $name = $this->settings['name'] ;
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . $this->settings['label'] . '</label> ';
}
$inline_style = $this->settings['inline_style'] ? 'style="' . esc_attr( $this->settings['inline_style'] ) . '"' : '' ;
$html .= '<select id="' . esc_attr( $this->settings['id'] ) . '" class="cherry-ui-select" name="' . esc_attr( $name ) . '" size="' . esc_attr( $this->settings['size'] ) . '" ' . $multi_state . ' ' . $filter_state . ' data-placeholder="' . esc_attr( $this->settings['placeholder'] ) . '" ' . $inline_style . $this->lock_element->get_disabled_attr(). '>';
if ( $this->settings['options'] && ! empty( $this->settings['options'] ) && is_array( $this->settings['options'] ) ) {
foreach ( $this->settings['options'] as $option => $option_value ) {
$lock_element = new Cherry5_Lock_Element( $option_value );
if ( ! is_array( $this->settings['value'] ) ) {
$this->settings['value'] = array( $this->settings['value'] );
}
if ( false === strpos( $option, 'optgroup' ) ) {
$selected_state = '';
if ( $this->settings['value'] && ! empty( $this->settings['value'] ) ) {
foreach ( $this->settings['value'] as $key => $value ) {
$selected_state = selected( $value, $option, false );
if ( " selected='selected'" == $selected_state ) {
break;
}
}
}
if ( is_array( $option_value ) ) {
$lable = $option_value['label'];
$data = !empty( $option_value['slave'] ) ? 'data-slave="' . $option_value['slave'] . '"' : '' ;
} else {
$lable = $option_value;
$data = '';
}
$html .= '<option value="' . esc_attr( $option ) . '" ' . $selected_state . ' ' . $data . ' ' . $lock_element->get_disabled_attr() . '>' . esc_html( $lable ) . '</option>';
} else {
$html .= '<optgroup label="' . esc_attr( $option_value['label'] ) . '">';
$selected_state = '';
foreach ( $option_value['group_options'] as $group_item => $group_value ) {
foreach ( $this->settings['value'] as $key => $value ) {
$selected_state = selected( $value, $group_item, false );
if ( " selected='selected'" == $selected_state ) {
break;
}
}
$html .= '<option value="' . esc_attr( $group_item ) . '" ' . $selected_state . ' ' . $lock_element->get_disabled_attr() . '>' . esc_html( $group_value ) . '</option>';
}
$html .= '</optgroup>';
}
}
}
$html .= '</select>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Select
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_script(
'ui-select-select2',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-select/assets/min/select2.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
'4.0.3',
true
);
wp_enqueue_script(
'ui-select',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-select/assets/min/ui-select.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-select-select2',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-select/assets/min/select2.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
'4.0.3',
'all'
);
wp_enqueue_style(
'ui-select',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-select/assets/min/ui-select.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}.cherry-ui-container .cherry-ui-container{margin:0}label.cherry-label{margin:0 0 5px 0;display:block}.cherry-slider-wrap{display:flex;flex-wrap:wrap}.cherry-slider-wrap .cherry-slider-input{flex:0 1 10%;min-width:100px;max-width:200px}.cherry-slider-wrap .cherry-slider-holder{flex:0 1 90%;min-width:200px;max-width:300px;margin-right:10px}.cherry-slider-wrap .cherry-slider-holder input[type=range]{-webkit-appearance:none;width:100%;margin:10px 0}.cherry-slider-wrap .cherry-slider-holder input[type=range]:focus{outline:none}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;box-shadow:none;background:#a4afb7;border-radius:25px;border:none}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 6px rgba(0,0,0,0.3);height:16px;width:16px;margin-top:-6px;border-radius:15px;background:white;cursor:pointer;-webkit-appearance:none;transition:all 250ms cubic-bezier(0.645, 0.045, 0.355, 1)}.cherry-slider-wrap .cherry-slider-holder input[type=range]:focus::-webkit-slider-runnable-track{background:#a4afb7}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-moz-range-track{width:100%;height:5px;cursor:pointer;box-shadow:none;background:#a4afb7;border-radius:25px;border:none}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-moz-range-thumb{box-shadow:none;border:none;height:16px;width:16px;border-radius:15px;background:#a4afb7;cursor:pointer}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;background:#f1f1f1;border-color:transparent;color:transparent}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-ms-fill-lower{background:#f1f1f1;border:none;border-radius:50px;box-shadow:none}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-ms-fill-upper{background:#48c569;border:none;border-radius:50px;box-shadow:none}.cherry-slider-wrap .cherry-slider-holder input[type=range]::-ms-thumb{box-shadow:none;border:none;height:10px;width:10px;border-radius:15px;background:#495159;cursor:pointer}.cherry-slider-wrap .cherry-slider-holder input[type=range]:focus::-ms-fill-lower{background:#f1f1f1}.cherry-slider-wrap .cherry-slider-holder input[type=range]:focus::-ms-fill-upper{background:#48c569}.cherry-slider-wrap .cherry-input{margin:0;width:100%}

View File

@@ -0,0 +1 @@
!function(e,i){"use strict";i.utilites.namespace("ui_elements.slider"),i.ui_elements.slider={init:function(){e(document).on("ready.cherry-ui-elements-init",this.render.bind(this))},render:function(){e("body").on("input.cherry-ui-elements-init change.cherry-ui-elements-init",".cherry-slider-unit, .cherry-ui-stepper-input",this.changeHandler)},changeHandler:function(){var i=e(this),r=i.hasClass("cherry-slider-unit")?".cherry-ui-stepper-input":".cherry-slider-unit",n=i.closest(".cherry-slider-wrap");e(r,n).val(i.val())}},i.ui_elements.slider.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,184 @@
@mixin button_base() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
border-radius: $border_radius_small;
transition: all 200ms linear;
box-shadow: $box_shadow;
&:hover {
color: #fff;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: #fff;
}
}
@mixin button_normal() {
background: $dark_color_2;
&:hover {
background: $dark_color_2_h;
}
}
@mixin button_primary() {
background: $blue_color;
&:hover {
background: $blue_color_h;
}
}
@mixin button_success() {
background: $green_color;
&:hover {
background: $green_color_h;
}
}
@mixin button_danger() {
background: $red_color;
&:hover {
background: $red_color_h;
}
}
@mixin button_warning() {
background: $orange_color;
&:hover {
background: $orange_color_h;
}
}
@mixin input() {
font-size: 14px;
line-height: 20px;
color: $dark_color_1;
background-color: $grey_color_3;
border-radius: $border_radius_extra_small;
padding: 10px 20px;
min-height: 50px;
border: 1px solid $grey_color_3;
box-shadow: none;
&:focus{
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
}
}
@mixin button_icon( $icon ) {
content: $icon;
display: inline-block;
font-family: dashicons;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: inherit;
transition: all 200ms linear;
vertical-align: middle;
}
@mixin button_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
}
}
@mixin button_icon_after( $icon ) {
&:after {
@include button_icon( $icon );
padding: 0 0 0 5px;
}
}
@mixin button_icon_middle( $icon ) {
&:before {
@include button_icon( $icon );
margin: 0 -5px;
}
}
@mixin link() {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: $blue_color;
text-transform: uppercase;
transition: all 200ms linear;
&:hover {
color: $dark_color_1;
box-shadow: none;
}
&:focus,
&:active {
outline: none;
border-color: rgba(41, 143, 252, .6);
box-shadow: 0 0 2px rgba(41, 143, 252, .6);
color: $blue_color;
}
}
@mixin link_icon_before( $icon ) {
&:before {
@include button_icon( $icon );
padding: 0 5px 0 0;
color: $grey_color_4;
}
&:hover {
&:before {
color: $blue_color;
}
}
}
@mixin container() {
padding: 30px;
border: 2px solid $grey_color_2;
background: $grey_color_3;
border-radius: $border_radius_large;
}
@mixin container_heading() {
margin: -30px -30px 30px -30px;
border-radius: $border_radius_large $border_radius_large 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-align: center;
background: #fff;
}
@mixin box() {
margin: 0 0 30px;
padding: 20px;
background: #fff;
box-shadow: $box_shadow_box;
border-radius: $border_radius;
}
@mixin box_heading() {
margin: -20px -20px 20px -20px;
border-radius: $border_radius_small $border_radius_small 0 0;
border-bottom: 1px solid $grey_color_2;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background: #fff;
}

View File

@@ -0,0 +1,23 @@
$dark_color_1: #23282d;
$dark_color_2: #495159;
$dark_color_2_h: #393f45;
$grey_color_1: #96989a;
$grey_color_2: #e5e5e5;
$grey_color_3: #f1f1f1;
$grey_color_4: #b4b7ba;
$blue_color: #298ffc;
$blue_color_h: #206ff4;
$green_color: #48c569;
$green_color_h: #3ba956;
$red_color: #e54343;
$red_color_h: #c73434;
$orange_color: #faa730;
$orange_color_h: #ee8425;
$border_radius_extra_small: 2px;
$border_radius_small: 4px;
$border_radius_medium: 6px;
$border_radius_large: 8px;
$box_shadow: 0 5px 13px rgba(0,0,0,.18);
$box_shadow_box: 0 8px 21px rgba(0,0,0,.1);

View File

@@ -0,0 +1,25 @@
/**
* Slider
*/
( function( $, CherryJsCore ) {
'use strict';
CherryJsCore.utilites.namespace('ui_elements.slider');
CherryJsCore.ui_elements.slider = {
init: function () {
$( document ).on( 'ready.cherry-ui-elements-init', this.render.bind( this ) );
},
render: function () {
$( 'body' ).on( 'input.cherry-ui-elements-init change.cherry-ui-elements-init', '.cherry-slider-unit, .cherry-ui-stepper-input', this.changeHandler );
},
changeHandler: function () {
var $this = $( this ),
targetClass = ( ! $this.hasClass('cherry-slider-unit') ) ? '.cherry-slider-unit' : '.cherry-ui-stepper-input' ,
$sliderWrapper = $this.closest('.cherry-slider-wrap');
$( targetClass, $sliderWrapper ).val( $this.val() );
}
};
CherryJsCore.ui_elements.slider.init();
}( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,126 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container{
margin: 10px 0 20px 0;
.cherry-ui-container{
margin: 0;
}
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.cherry-slider-wrap{
display: flex;
flex-wrap: wrap;
.cherry-slider-input{
flex: 0 1 10%;
min-width: 100px;
max-width: 200px;
}
.cherry-slider-holder{
flex: 0 1 90%;
min-width: 200px;
max-width: 300px;
margin-right: 10px;
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
height: 16px;
width: 16px;
margin-top: -6px;
border-radius: 15px;
background: white;
cursor: pointer;
-webkit-appearance: none;
transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a4afb7;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: none;
border: none;
height: 16px;
width: 16px;
border-radius: 15px;
background: #a4afb7;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: $grey_color_3;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: $grey_color_3;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-fill-upper {
background: $green_color;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-thumb {
box-shadow: none;
border: none;
height: 10px;
width: 10px;
border-radius: 15px;
background: #495159;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: $grey_color_3;
}
input[type=range]:focus::-ms-fill-upper {
background: $green_color;
}
}
.cherry-input{
margin: 0;
width: 100%;
}
}

View File

@@ -0,0 +1,135 @@
<?php
/**
* Class for the building ui slider elements .
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Slider' ) ) {
/**
* Class for the building UI_Slider elements.
*/
class UI_Slider extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-slider-id',
'name' => 'cherry-ui-slider-name',
'max_value' => 100,
'min_value' => 0,
'value' => 50,
'step_value' => 1,
'label' => '',
'class' => '',
'master' => '',
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Slider class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-slider-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Slider.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class(),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
$ui_stepper = new UI_Stepper(
array(
'id' => $this->settings['id'] . '-stepper',
'name' => $this->settings['name'],
'max_value' => $this->settings['max_value'],
'min_value' => $this->settings['min_value'],
'value' => $this->settings['value'],
'step_value' => $this->settings['step_value'],
)
);
$ui_stepper_html = $ui_stepper->render();
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= '<div class="cherry-slider-wrap">';
$html .= '<div class="cherry-slider-holder">';
$html .= '<input type="range" class="cherry-slider-unit" step="' . esc_attr( $this->settings['step_value'] ) . '" min="' . esc_attr( $this->settings['min_value'] ) . '" max="' . esc_attr( $this->settings['max_value'] ) . '" value="' . esc_attr( $this->settings['value'] ) . '"' . $this->lock_element->get_disabled_attr() . '>';
$html .= '</div>';
$html .= '<div class="cherry-slider-input">';
$html .= $ui_stepper_html;
$html .= '</div>';
$html .= '</div>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Slider.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_script(
'ui-slider',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-slider/assets/min/ui-slider.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-slider',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-slider/assets/min/ui-slider.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.cherry-ui-stepper{position:relative;max-width:100px}.cherry-ui-stepper input[type=number]{font-size:12px;line-height:16px;color:#495157;background-color:#fff;border-radius:3px;padding:5px;min-height:28px;border:1px solid #d5dadf;box-shadow:none}.cherry-ui-stepper input[type=number]:focus{border-color:#9ba7b3;box-shadow:none}.cherry-ui-stepper-input{min-width:70px;max-width:70px;text-align:left}

View File

@@ -0,0 +1,16 @@
@mixin input() {
font-size: 12px;
line-height: 16px;
color: $dark_color;
background-color: $bg_color;
border-radius: $border_radius_extra_small;
padding: 5px;
min-height: 28px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: darken( $border_color, 20% );
box-shadow: none;
}
}

View File

@@ -0,0 +1,7 @@
$light_color: #ffffff;
$dark_color: #495157;
$bg_color: white;
$border_color: #d5dadf;
$border_radius_extra_small: 3px;

View File

@@ -0,0 +1,30 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.cherry-ui-stepper{
position: relative;
max-width: 100px;
input[type=number]{
@include input();
}
}
.cherry-ui-stepper-input{
min-width: 70px;
max-width: 70px;
text-align: left;
}

View File

@@ -0,0 +1,114 @@
<?php
/**
* Class for the building ui stepper elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Stepper' ) ) {
/**
* Class for the building UI_Stepper elements.
*/
class UI_Stepper extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-stepper-id',
'name' => 'cherry-ui-stepper-name',
'value' => '0',
'max_value' => '100',
'min_value' => '0',
'step_value' => '1',
'label' => '',
'class' => '',
'master' => '',
'placeholder' => '',
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Stepper class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-stepper-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Stepper.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$input_lock = ( ! empty( $this->settings['lock'] ) ) ? 'disabled' : '' ;
$lock_lable = ! empty( $this->settings['lock']['label'] )? sprintf('<div class="cherry-lock-label">%1$s</div>', $this->settings['lock']['label'] ) : '' ;
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= '<div class="cherry-ui-stepper">';
$html .= '<input type="number" id="' . esc_attr( $this->settings['id'] ) . '" class="cherry-ui-stepper-input" pattern="[0-5]+([\.,][0-5]+)?" name="' . esc_attr( $this->settings['name'] ) . '" value="' . esc_html( $this->settings['value'] ) . '" min="' . esc_html( $this->settings['min_value'] ) . '" max="' . esc_html( $this->settings['max_value'] ) . '" step="' . esc_html( $this->settings['step_value'] ) . '" placeholder="' . esc_attr( $this->settings['placeholder'] ) . $this->lock_element->get_disabled_attr() . '">';
$html .= '</div>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Stepper.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-stepper',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-stepper/assets/min/ui-stepper.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}.hide{display:none !important}.cherry-switcher-wrap{height:20px;border-radius:25px;display:inline-block;overflow:hidden;position:relative;cursor:pointer;user-select:none;background-color:white}.cherry-switcher-wrap:after{display:block;position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.15);pointer-events:none;border-radius:25px;content:''}.cherry-switcher-wrap label{display:block;float:left;background-color:#eceeef;transition:all 0.4s ease}.cherry-switcher-wrap label span{font-size:7px;line-height:12px;text-transform:uppercase;color:#a4afb7;text-align:center;display:block;opacity:1;transition:all 0.4s ease}.cherry-switcher-wrap .sw-enable{padding:4px 4px 4px 12px}.cherry-switcher-wrap .sw-enable span{opacity:0}.cherry-switcher-wrap .sw-disable{padding:4px 12px 4px 4px}.cherry-switcher-wrap .sw-disable span{opacity:1}.cherry-switcher-wrap .state-marker{background-color:white;display:block;position:absolute;width:18px;height:18px;margin:1px;top:0;left:0;border-radius:50%;transition:all 0.4s cubic-bezier(0.77, 0, 0.175, 1);box-sizing:border-box}.cherry-switcher-wrap .cherry-input-switcher{display:none}.cherry-switcher-wrap .cherry-input-switcher-true:checked ~ .sw-enable{background-color:#49c66a}.cherry-switcher-wrap .cherry-input-switcher-true:checked ~ .sw-enable span{opacity:1;color:white;text-shadow:0 1px rgba(0,0,0,0.2)}.cherry-switcher-wrap .cherry-input-switcher-true:checked ~ .sw-disable{background-color:#49c66a}.cherry-switcher-wrap .cherry-input-switcher-true:checked ~ .sw-disable span{opacity:0}.cherry-switcher-wrap .cherry-input-switcher-true:checked ~ .state-marker{left:100%;margin-left:-19px}

View File

@@ -0,0 +1 @@
!function(t,e){"use strict";e.utilites.namespace("ui_elements.switcher"),e.ui_elements.switcher={switcherClass:".cherry-switcher-wrap",inputTrueClass:".cherry-input-switcher-true",inputFalseClass:".cherry-input-switcher-false",containerClass:".cherry-ui-container",wrapperClass:".widget, .postbox, .cherry-form, .cherry-ui-repeater-item",init:function(){t(document).on("ready.cherry-ui-elements-init",this.addEvent.bind(this)).on("cherry-ui-elements-init",this.initState.bind(this))},addEvent:function(){t("body").on("click",this.switcherClass,this.switchState.bind(this)),this.initState()},initState:function(){for(var e,i=t(this.switcherClass),s=i.length-1;s>=0;s--)e=t(i[s]),this.switchState({currentTarget:e,initState:!0})},switchState:function(e){var i,s=t(e.currentTarget),r=t(this.inputTrueClass,s),a=t(this.inputFalseClass,s),n=r.data(),c=a.data(),h=s.closest(this.wrapperClass);e.initState||this.checkedRadio(r,a,r[0].checked),i=r[0].checked,jQuery.isEmptyObject(n)||t("."+n.slave,h)[i?"removeClass":"addClass"]("hide"),jQuery.isEmptyObject(c)||t("."+c.slave,h)[i?"addClass":"removeClass"]("hide")},checkedRadio:function(t,e,i){t.attr("checked",i?!1:!0),e.attr("checked",i?!0:!1).trigger("change")}},e.ui_elements.switcher.init()}(jQuery,window.CherryJsCore);

View File

@@ -0,0 +1,15 @@
$light_color: #ffffff;
$dark_color: #23282d;
$switcher_bg_color: #f1f1f1;
$switcher_border_color: #dcdcdc;
$true_state_gradint_1: #71e18f;
$true_state_gradint_2: #49c66a;
$true_state_outset_1: #43b05f;
$true_state_outset_2: #3b9b54;
$false_state_gradint_1: #f98888;
$false_state_gradint_2: #e64545;
$false_state_outset_1: #e54545;
$false_state_outset_2: #c13b3b;

View File

@@ -0,0 +1,67 @@
/**
* Switcher
*/
( function( $, CherryJsCore ){
'use strict';
CherryJsCore.utilites.namespace('ui_elements.switcher');
CherryJsCore.ui_elements.switcher = {
switcherClass: '.cherry-switcher-wrap',
inputTrueClass: '.cherry-input-switcher-true',
inputFalseClass: '.cherry-input-switcher-false',
containerClass: '.cherry-ui-container',
wrapperClass: '.widget, .postbox, .cherry-form, .cherry-ui-repeater-item',
init: function () {
$( document )
.on( 'ready.cherry-ui-elements-init', this.addEvent.bind( this ) )
.on( 'cherry-ui-elements-init', this.initState.bind( this ) );
},
addEvent: function () {
$( 'body' ).on( 'click', this.switcherClass, this.switchState.bind( this ) );
this.initState();
},
initState: function(){
var switchers = $( this.switcherClass ),
i = switchers.length - 1,
switcher;
for (; i >= 0; i--) {
switcher = $( switchers[ i ] );
this.switchState( { currentTarget: switcher, initState: true } );
}
},
switchState: function ( event ) {
var switcher = $( event.currentTarget ),
inputTrue = $( this.inputTrueClass, switcher ),
inputFalse = $( this.inputFalseClass, switcher ),
dataTrue = inputTrue.data(),
dataFalse = inputFalse.data(),
flag,
wrapper = switcher.closest( this.wrapperClass );
if( ! event.initState ){
this.checkedRadio( inputTrue, inputFalse, inputTrue[ 0 ].checked );
}
flag = inputTrue[ 0 ].checked;
if ( ! jQuery.isEmptyObject( dataTrue ) ) {
$( '.' + dataTrue.slave, wrapper )[ ( flag ) ? 'removeClass' : 'addClass' ]( 'hide' );
}
if ( ! jQuery.isEmptyObject( dataFalse ) ) {
$( '.' + dataFalse.slave, wrapper )[ ( ! flag ) ? 'removeClass' : 'addClass' ]( 'hide' );
}
},
checkedRadio:function( inputTrue, inputFalse, flag ){
inputTrue.attr( 'checked', ( flag ) ? false : true );
inputFalse
.attr( 'checked', ( ! flag ) ? false : true )
.trigger('change');
}
};
CherryJsCore.ui_elements.switcher.init();
}( jQuery, window.CherryJsCore ) );

View File

@@ -0,0 +1,109 @@
@import "ui-kit/variables";
@import "../../../../assets/sass/lock";
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
.hide{
display: none !important;
}
.cherry-switcher-wrap{
height: 20px;
border-radius: 25px;
display: inline-block;
overflow: hidden;
position: relative;
cursor: pointer;
user-select: none;
background-color: white;
&:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
pointer-events: none;
border-radius: 25px;
content: '';
}
label{
display: block;
float: left;
background-color: #eceeef;
transition: all 0.4s ease;
span{
font-size: 7px;
line-height: 12px;
text-transform: uppercase;
color: #a4afb7;
text-align: center;
display: block;
opacity: 1;
transition: all 0.4s ease;
}
}
.sw-enable{
padding: 4px 4px 4px 12px;
span{
opacity: 0;
}
}
.sw-disable{
padding: 4px 12px 4px 4px;
span{
opacity: 1;
}
}
.state-marker{
background-color: white;
display: block;
position: absolute;
width: 18px;
height: 18px;
margin: 1px;
top: 0;
left: 0;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
box-sizing: border-box;
}
.cherry-input-switcher{
display: none;
}
.cherry-input-switcher-true:checked{
~ .sw-enable{
background-color: #49c66a;
span{
opacity: 1;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
}
~ .sw-disable{
background-color: #49c66a;
span{
opacity: 0;
}
}
~ .state-marker{
left: 100%;
margin-left: -19px;
}
}
}

View File

@@ -0,0 +1,133 @@
<?php
/**
* Class for the building ui swither elements .
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Switcher' ) ) {
/**
* Class for the building UI_Switcher elements.
*/
class UI_Switcher extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-swither-id',
'name' => 'cherry-ui-swither-name',
'value' => 'true',
'toggle' => array(
'true_toggle' => 'On',
'false_toggle' => 'Off',
'true_slave' => '',
'false_slave' => '',
),
'style' => 'normal',
'label' => '',
'class' => '',
'master' => '',
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Switcher class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-swither-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Switcher.
*
* @since 1.0.0
*/
public function render() {
$data_slave_true = ( ! empty( $this->settings['toggle']['true_slave'] ) ) ? 'data-slave="' . $this->settings['toggle']['true_slave'] . '" ' : '';
$data_slave_false = ( ! empty( $this->settings['toggle']['false_slave'] ) ) ? 'data-slave="' . $this->settings['toggle']['false_slave'] . '" ' : '';
$master_true = $data_slave_true || $data_slave_false ? 'data-master="true"' : '' ;
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class( 'inline-block' ),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$value = filter_var( $this->settings['value'], FILTER_VALIDATE_BOOLEAN );
$html .= '<div class="cherry-switcher-wrap size-' . esc_attr( $this->settings['style'] ) . '" ' . $master_true . '>';
$html .= '<input type="radio" id="' . esc_attr( $this->settings['id'] ) . '-true" class="cherry-input-switcher cherry-input-switcher-true" name="' . esc_attr( $this->settings['name'] ) . '" ' . checked( true, $value, false ) . ' value="true" ' . $data_slave_true . ' ' . $this->lock_element->get_disabled_attr() . '>';
$html .= '<input type="radio" id="' . esc_attr( $this->settings['id'] ) . '-false" class="cherry-input-switcher cherry-input-switcher-false" name="' . esc_attr( $this->settings['name'] ) . '" ' . checked( false, $value, false ) . ' value="false" ' . $data_slave_false . ' ' . $this->lock_element->get_disabled_attr() . '>';
//$html .= '<span class="cherry-lable-content">';
$html .= '<label class="sw-enable"><span>' . esc_html( $this->settings['toggle']['true_toggle'] ) . '</span></label>';
$html .= '<label class="sw-disable"><span>' . esc_html( $this->settings['toggle']['false_toggle'] ) . '</span></label>';
$html .= '<span class="state-marker"></span>';
// $html .= '</span>';
$html .= '</div>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Switcher.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_script(
'ui-switcher',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-switcher/assets/min/ui-switcher.min.js', Cherry_UI_Elements::$module_path ) ),
array( 'jquery' ),
Cherry_UI_Elements::$core_version,
true
);
wp_enqueue_style(
'ui-switcher',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-switcher/assets/min/ui-switcher.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:no-drop;position:relative;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{-webkit-animation-name:lock_show;animation-name:lock_show;-webkit-animation-duration:450ms;animation-duration:450ms;-webkit-animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;-webkit-box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;-webkit-animation-name:lock_hide;animation-name:lock_hide;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-transform-origin:0% 0%;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@-webkit-keyframes lock_show{0%{opacity:0;-webkit-filter:blur(5px);filter:blur(5px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;-webkit-transform:scale(1.1) translate(-50%, -130%);transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_show{0%{opacity:0;-webkit-filter:blur(5px);filter:blur(5px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;-webkit-transform:scale(1.1) translate(-50%, -130%);transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}}@-webkit-keyframes lock_hide{0%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;-webkit-filter:blur(3px);filter:blur(3px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}}@keyframes lock_hide{0%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px);-webkit-transform:scale(1) translate(-50%, -100%);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;-webkit-filter:blur(3px);filter:blur(3px);-webkit-transform:scale(0) translate(-50%, 200%);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}input.cherry-ui-text{font-size:12px;line-height:16px;color:#495157;background-color:#fff;border-radius:3px;padding:5px;min-height:28px;border:1px solid #d5dadf;-webkit-box-shadow:none;box-shadow:none}input.cherry-ui-text:focus{border-color:#9ba7b3;-webkit-box-shadow:none;box-shadow:none}

View File

@@ -0,0 +1,16 @@
@mixin input() {
font-size: 12px;
line-height: 16px;
color: $dark_color;
background-color: $bg_color;
border-radius: $border_radius_extra_small;
padding: 5px;
min-height: 28px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: darken( $border_color, 20% );
box-shadow: none;
}
}

View File

@@ -0,0 +1,7 @@
$light_color: #ffffff;
$dark_color: #495157;
$bg_color: white;
$border_color: #d5dadf;
$border_radius_extra_small: 3px;

View File

@@ -0,0 +1,20 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
input.cherry-ui-text{
@include input();
}

View File

@@ -0,0 +1,121 @@
<?php
/**
* Class for the building ui-text elements.
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Text' ) ) {
/**
* Class for the building ui-text elements.
*/
class UI_Text extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'type' => 'text',
'id' => 'cherry-ui-input-id',
'name' => 'cherry-ui-input-name',
'value' => '',
'placeholder' => '',
'label' => '',
'class' => '',
'master' => '',
'required' => false,
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Text class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-input-text-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Get required attribute.
*
* @since 1.0.0
* @return string
*/
public function get_required() {
if ( $this->settings['required'] ) {
return 'required="required"';
}
return '';
}
/**
* Render html UI_Text.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class(),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . esc_html( $this->settings['label'] ) . '</label> ';
}
$html .= '<input type="' . esc_attr( $this->settings['type'] ) . '" id="' . esc_attr( $this->settings['id'] ) . '" class="widefat cherry-ui-text" name="' . esc_attr( $this->settings['name'] ) . '" value="' . esc_html( $this->settings['value'] ) . '" placeholder="' . esc_attr( $this->settings['placeholder'] ) . '" ' . $this->get_required() . $this->lock_element->get_disabled_attr() . '>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Text.
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-text',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-text/assets/min/ui-text.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}

View File

@@ -0,0 +1 @@
.cherry-lock-element{user-select:none;cursor:no-drop;position:relative;filter:grayscale(100%)}.cherry-lock-element.inline-block{display:inline-block}.cherry-lock-element label{position:relative}.cherry-lock-element .cherry-lable-content,.cherry-lock-element .cherry-checkbox-item,.cherry-lock-element .select2-container,.cherry-lock-element>*:first-child{opacity:0.5;pointer-events:none}.cherry-lock-element a.cherry-lock-element__area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;cursor:no-drop}.cherry-lock-element a.cherry-lock-element__area:focus{outline:none;box-shadow:none}.cherry-lock-element a.cherry-lock-element__area:hover .cherry-lock-element__label{animation-name:lock_show;animation-duration:450ms;animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)}.cherry-lock-element__label{opacity:0;display:inline-block;background-color:rgba(0,0,0,0.9);border-radius:5px;color:#fff;padding:8px 10px;position:absolute;white-space:nowrap;top:-10px;left:50%;box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);will-change:auto;pointer-events:none;font-size:14px;line-height:16px;animation-name:lock_hide;animation-duration:200ms;animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-fill-mode:both;transform-origin:0% 0%}.cherry-lock-element__label *+*{margin-right:5px}.cherry-lock-element__label:after{border:solid;border-color:rgba(0,0,0,0.9) transparent;border-width:6px 6px 0 6px;bottom:-5px;margin-left:-6px;content:"";left:50%;position:absolute}@keyframes lock_show{0%{opacity:0;filter:blur(5px);transform:scale(0) translate(-50%, 200%)}60%{opacity:0.8;transform:scale(1.1) translate(-50%, -130%)}100%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}}@keyframes lock_hide{0%{opacity:1;filter:blur(0px);transform:scale(1) translate(-50%, -100%)}100%{opacity:0;filter:blur(3px);transform:scale(0) translate(-50%, 200%)}}.cherry-ui-elements-lock{opacity:0.5;cursor:no-drop;pointer-events:none;filter:grayscale(100%)}.cherry-ui-container{margin:10px 0 20px 0}label.cherry-label{margin:0 0 5px 0;display:block}textarea.cherry-ui-textarea{width:100%;font-size:12px;line-height:16px;color:#495157;background-color:#fff;border-radius:3px;padding:5px;min-height:28px;border:1px solid #d5dadf;box-shadow:none;height:100px}textarea.cherry-ui-textarea:focus{border-color:#9ba7b3;box-shadow:none}

View File

@@ -0,0 +1,16 @@
@mixin input() {
font-size: 12px;
line-height: 16px;
color: $dark_color;
background-color: $bg_color;
border-radius: $border_radius_extra_small;
padding: 5px;
min-height: 28px;
border: 1px solid $border_color;
box-shadow: none;
&:focus{
border-color: darken( $border_color, 20% );
box-shadow: none;
}
}

View File

@@ -0,0 +1,7 @@
$light_color: #ffffff;
$dark_color: #495157;
$bg_color: white;
$border_color: #d5dadf;
$border_radius_extra_small: 3px;

View File

@@ -0,0 +1,22 @@
@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";
.cherry-ui-elements-lock{
opacity: 0.5;
cursor: no-drop;
pointer-events: none;
filter: grayscale( 100% );
}
.cherry-ui-container{
margin: 10px 0 20px 0;
}
label.cherry-label{
margin: 0 0 5px 0;
display: block;
}
textarea.cherry-ui-textarea{
width: 100%;
@include input();
height: 100px;
}

View File

@@ -0,0 +1,108 @@
<?php
/**
* Class for the building ui-textarea elements
*
* @package Cherry_Framework
* @subpackage Class
* @author Cherry Team <support@cherryframework.com>
* @copyright Copyright (c) 2012 - 2015, Cherry Team
* @link http://www.cherryframework.com/
* @license http://www.gnu.org/licenses/gpl-3.0.en.html
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
if ( ! class_exists( 'UI_Textarea' ) ) {
/**
* Class for the building UI_Textarea elements.
*/
class UI_Textarea extends UI_Element implements I_UI {
/**
* Default settings.
*
* @since 1.0.0
* @var array
*/
private $defaults_settings = array(
'id' => 'cherry-ui-textarea-id',
'name' => 'cherry-ui-textarea-name',
'value' => '',
'placeholder' => '',
'rows' => '10',
'cols' => '20',
'label' => '',
'class' => '',
'master' => '',
'lock' => false,
);
/**
* Instance of this Cherry5_Lock_Element class.
*
* @since 1.0.0
* @var object
* @access private
*/
private $lock_element = null;
/**
* Constructor method for the UI_Textarea class.
*
* @since 1.0.0
*/
function __construct( $args = array() ) {
$this->defaults_settings['id'] = 'cherry-ui-textarea-' . uniqid();
$this->settings = wp_parse_args( $args, $this->defaults_settings );
$this->lock_element = new Cherry5_Lock_Element( $this->settings );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ) );
}
/**
* Render html UI_Textarea.
*
* @since 1.0.0
*/
public function render() {
$html = '';
$class = implode( ' ',
array(
$this->settings['class'],
$this->settings['master'],
$this->lock_element->get_class(),
)
);
$html .= '<div class="cherry-ui-container ' . esc_attr( $class ) . '">';
if ( '' !== $this->settings['label'] ) {
$html .= '<label class="cherry-label" for="' . esc_attr( $this->settings['id'] ) . '">' . $this->settings['label'] . '</label> ';
}
$html .= '<textarea id="' . esc_attr( $this->settings['id'] ) . '" class="cherry-ui-textarea" name="' . esc_attr( $this->settings['name'] ) . '" rows="' . esc_attr( $this->settings['rows'] ) . '" cols="' . esc_attr( $this->settings['cols'] ) . '" placeholder="' . esc_attr( $this->settings['placeholder'] ) . '" ' . $this->lock_element->get_disabled_attr() . '>' . esc_html( $this->settings['value'] ) . '</textarea>';
$html .= $this->lock_element->get_html();
$html .= '</div>';
return $html;
}
/**
* Enqueue javascript and stylesheet UI_Textarea
*
* @since 1.0.0
*/
public static function enqueue_assets() {
wp_enqueue_style(
'ui-textarea',
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-textarea/assets/min/ui-textarea.min.css', Cherry_UI_Elements::$module_path ) ),
array(),
Cherry_UI_Elements::$core_version,
'all'
);
}
}
}