updated plugin GP Premium
version 1.11.2
This commit is contained in:
@ -11,10 +11,6 @@ button[data-balloon] {
|
||||
-khtml-opacity: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: all 0.18s ease-out 0.18s;
|
||||
-moz-transition: all 0.18s ease-out 0.18s;
|
||||
-ms-transition: all 0.18s ease-out 0.18s;
|
||||
-o-transition: all 0.18s ease-out 0.18s;
|
||||
transition: all 0.18s ease-out 0.18s;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
@ -39,10 +35,6 @@ button[data-balloon] {
|
||||
-khtml-opacity: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: all 0.18s ease-out 0.18s;
|
||||
-moz-transition: all 0.18s ease-out 0.18s;
|
||||
-ms-transition: all 0.18s ease-out 0.18s;
|
||||
-o-transition: all 0.18s ease-out 0.18s;
|
||||
transition: all 0.18s ease-out 0.18s;
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -59,120 +51,59 @@ button[data-balloon] {
|
||||
[data-balloon][data-balloon-break]:after {
|
||||
white-space: pre; }
|
||||
[data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none; }
|
||||
[data-balloon][data-balloon-pos="up"]:after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-bottom: 11px;
|
||||
-webkit-transform: translate(-50%, 10px);
|
||||
-moz-transform: translate(-50%, 10px);
|
||||
-ms-transform: translate(-50%, 10px);
|
||||
transform: translate(-50%, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up"]:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-bottom: 5px;
|
||||
-webkit-transform: translate(-50%, 10px);
|
||||
-moz-transform: translate(-50%, 10px);
|
||||
-ms-transform: translate(-50%, 10px);
|
||||
transform: translate(-50%, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-moz-transform: translate(-50%, 0);
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0); }
|
||||
[data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-moz-transform: translate(-50%, 0);
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0); }
|
||||
[data-balloon][data-balloon-pos="up-left"]:after {
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
margin-bottom: 11px;
|
||||
-webkit-transform: translate(0, 10px);
|
||||
-moz-transform: translate(0, 10px);
|
||||
-ms-transform: translate(0, 10px);
|
||||
transform: translate(0, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up-left"]:before {
|
||||
bottom: 100%;
|
||||
left: 5px;
|
||||
margin-bottom: 5px;
|
||||
-webkit-transform: translate(0, 10px);
|
||||
-moz-transform: translate(0, 10px);
|
||||
-ms-transform: translate(0, 10px);
|
||||
transform: translate(0, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos="up-right"]:after {
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-bottom: 11px;
|
||||
-webkit-transform: translate(0, 10px);
|
||||
-moz-transform: translate(0, 10px);
|
||||
-ms-transform: translate(0, 10px);
|
||||
transform: translate(0, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up-right"]:before {
|
||||
bottom: 100%;
|
||||
right: 5px;
|
||||
margin-bottom: 5px;
|
||||
-webkit-transform: translate(0, 10px);
|
||||
-moz-transform: translate(0, 10px);
|
||||
-ms-transform: translate(0, 10px);
|
||||
transform: translate(0, 10px);
|
||||
-webkit-transform-origin: top;
|
||||
-moz-transform-origin: top;
|
||||
-ms-transform-origin: top;
|
||||
transform-origin: top; }
|
||||
[data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos='down']:after {
|
||||
left: 50%;
|
||||
margin-top: 11px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(-50%, -10px);
|
||||
-moz-transform: translate(-50%, -10px);
|
||||
-ms-transform: translate(-50%, -10px);
|
||||
transform: translate(-50%, -10px); }
|
||||
[data-balloon][data-balloon-pos='down']:before {
|
||||
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
|
||||
@ -182,27 +113,15 @@ button[data-balloon] {
|
||||
left: 50%;
|
||||
margin-top: 5px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(-50%, -10px);
|
||||
-moz-transform: translate(-50%, -10px);
|
||||
-ms-transform: translate(-50%, -10px);
|
||||
transform: translate(-50%, -10px); }
|
||||
[data-balloon][data-balloon-pos='down']:hover:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-moz-transform: translate(-50%, 0);
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0); }
|
||||
[data-balloon][data-balloon-pos='down']:hover:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-moz-transform: translate(-50%, 0);
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0); }
|
||||
[data-balloon][data-balloon-pos='down-left']:after {
|
||||
left: 0;
|
||||
margin-top: 11px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(0, -10px);
|
||||
-moz-transform: translate(0, -10px);
|
||||
-ms-transform: translate(0, -10px);
|
||||
transform: translate(0, -10px); }
|
||||
[data-balloon][data-balloon-pos='down-left']:before {
|
||||
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
|
||||
@ -212,27 +131,15 @@ button[data-balloon] {
|
||||
left: 5px;
|
||||
margin-top: 5px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(0, -10px);
|
||||
-moz-transform: translate(0, -10px);
|
||||
-ms-transform: translate(0, -10px);
|
||||
transform: translate(0, -10px); }
|
||||
[data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos='down-right']:after {
|
||||
right: 0;
|
||||
margin-top: 11px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(0, -10px);
|
||||
-moz-transform: translate(0, -10px);
|
||||
-ms-transform: translate(0, -10px);
|
||||
transform: translate(0, -10px); }
|
||||
[data-balloon][data-balloon-pos='down-right']:before {
|
||||
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
|
||||
@ -242,27 +149,15 @@ button[data-balloon] {
|
||||
right: 5px;
|
||||
margin-top: 5px;
|
||||
top: 100%;
|
||||
-webkit-transform: translate(0, -10px);
|
||||
-moz-transform: translate(0, -10px);
|
||||
-ms-transform: translate(0, -10px);
|
||||
transform: translate(0, -10px); }
|
||||
[data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
[data-balloon][data-balloon-pos='left']:after {
|
||||
margin-right: 11px;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(10px, -50%);
|
||||
-moz-transform: translate(10px, -50%);
|
||||
-ms-transform: translate(10px, -50%);
|
||||
transform: translate(10px, -50%); }
|
||||
[data-balloon][data-balloon-pos='left']:before {
|
||||
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
|
||||
@ -272,27 +167,15 @@ button[data-balloon] {
|
||||
margin-right: 5px;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(10px, -50%);
|
||||
-moz-transform: translate(10px, -50%);
|
||||
-ms-transform: translate(10px, -50%);
|
||||
transform: translate(10px, -50%); }
|
||||
[data-balloon][data-balloon-pos='left']:hover:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-moz-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%); }
|
||||
[data-balloon][data-balloon-pos='left']:hover:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-moz-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%); }
|
||||
[data-balloon][data-balloon-pos='right']:after {
|
||||
left: 100%;
|
||||
margin-left: 11px;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-10px, -50%);
|
||||
-moz-transform: translate(-10px, -50%);
|
||||
-ms-transform: translate(-10px, -50%);
|
||||
transform: translate(-10px, -50%); }
|
||||
[data-balloon][data-balloon-pos='right']:before {
|
||||
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
|
||||
@ -302,19 +185,10 @@ button[data-balloon] {
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-10px, -50%);
|
||||
-moz-transform: translate(-10px, -50%);
|
||||
-ms-transform: translate(-10px, -50%);
|
||||
transform: translate(-10px, -50%); }
|
||||
[data-balloon][data-balloon-pos='right']:hover:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-moz-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%); }
|
||||
[data-balloon][data-balloon-pos='right']:hover:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-moz-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%); }
|
||||
[data-balloon][data-balloon-length='small']:after {
|
||||
white-space: normal;
|
||||
|
@ -0,0 +1,82 @@
|
||||
.choose-element-type-parent:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 9991;
|
||||
}
|
||||
|
||||
.choose-element-type {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
background: #fff;
|
||||
left: 50%;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
border: 1px solid #ddd;
|
||||
z-index: 9992;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.choose-element-type h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
select.select-type {
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select.select-type:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.dark-mode select.select-type:hover {
|
||||
background-color: #23282d;
|
||||
}
|
||||
|
||||
.choose-element-type button.button {
|
||||
font-size: 17px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.select-type-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button.close-choose-element-type {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button.close-choose-element-type svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.hook-location {
|
||||
background: #efefef;
|
||||
padding: 2px 5px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
}
|
@ -0,0 +1,13 @@
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
$( '.post-type-gp_elements .page-title-action' ).on( 'click', function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
$( '.choose-element-type-parent' ).show();
|
||||
} );
|
||||
|
||||
$( '.close-choose-element-type' ).on( 'click', function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
$( '.choose-element-type-parent' ).hide();
|
||||
} );
|
||||
} );
|
@ -1,16 +1,3 @@
|
||||
.no-element-type #titlediv,
|
||||
.no-element-type h1.wp-heading-inline,
|
||||
.no-element-type h1.wp-heading-inline + .page-title-action,
|
||||
.no-element-type #submitdiv,
|
||||
.no-element-type .postbox:not(#generate_premium_elements),
|
||||
.no-element-type .notice,
|
||||
.no-element-type .error,
|
||||
.element-settings.no-element-type {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#generate_premium_elements {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -60,7 +47,8 @@ td.generate-element-row-content {
|
||||
}
|
||||
|
||||
#generate_premium_elements .handlediv,
|
||||
#generate_premium_elements .hndle {
|
||||
#generate_premium_elements .hndle,
|
||||
#generate_premium_elements .postbox-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -90,16 +78,12 @@ td.generate-element-row-content {
|
||||
}
|
||||
|
||||
#generate_premium_elements .condition {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#generate_premium_elements .condition .select2 {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button.remove-condition {
|
||||
@ -151,7 +135,6 @@ ul.element-metabox-tabs {
|
||||
margin: 0 0 20px;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -159,7 +142,6 @@ ul.element-metabox-tabs {
|
||||
|
||||
ul.element-metabox-tabs li {
|
||||
width: auto;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-top: none;
|
||||
@ -194,27 +176,6 @@ ul.element-metabox-tabs li.is-selected a {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
select.select-type {
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select.select-type:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.dark-mode select.select-type:hover {
|
||||
background-color: #23282d;
|
||||
}
|
||||
|
||||
.element-metabox-tabs li:not([data-tab="display-rules"]):not([data-tab="internal-notes"]),
|
||||
.generate-elements-settings:not([data-tab="display-rules"]):not([data-tab="internal-notes"]) {
|
||||
display: none;
|
||||
@ -222,23 +183,24 @@ select.select-type:hover {
|
||||
|
||||
.element-settings.header .element-metabox-tabs li[data-type="header"],
|
||||
.element-settings.hook .element-metabox-tabs li[data-type="hook"],
|
||||
.element-settings.block .element-metabox-tabs li[data-type="hook"],
|
||||
.element-settings.layout .element-metabox-tabs li[data-type="layout"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.element-settings.header table[data-tab="hero"],
|
||||
.element-settings.hook table[data-tab="hook-settings"],
|
||||
.element-settings.block table[data-tab="hook-settings"],
|
||||
.element-settings.layout table[data-tab="sidebars"] {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.element-settings.layout #generate-element-content {
|
||||
.element-settings.layout #generate-element-content,
|
||||
.element-settings.block #generate-element-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.padding-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -252,6 +214,10 @@ select.select-type:hover {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.padding-element-options {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.padding-element span.unit {
|
||||
border: 1px solid #ddd;
|
||||
display: inline-block;
|
||||
@ -270,7 +236,6 @@ select.select-type:hover {
|
||||
.padding-element select {
|
||||
width: auto !important;
|
||||
position: relative;
|
||||
top: -2.5px;
|
||||
left: -5px;
|
||||
min-height: 30px;
|
||||
}
|
||||
@ -278,7 +243,7 @@ select.select-type:hover {
|
||||
.padding-element span {
|
||||
display: block;
|
||||
font-size: 90%;
|
||||
opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.generate-element-row-content .responsive-controls.single-responsive-value {
|
||||
@ -311,12 +276,8 @@ select.select-type:hover {
|
||||
.media-container,
|
||||
.change-featured-image,
|
||||
.set-featured-image {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.media-container > input,
|
||||
@ -355,35 +316,6 @@ select.select-type:hover {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.choose-element-type-parent:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.choose-element-type {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
background: #fff;
|
||||
left: calc(50% - 250px);
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
border: 1px solid #ddd;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
#poststuff .choose-element-type h2 {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.layout-radio-item {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
@ -441,6 +373,16 @@ body .select2-container--default .select2-selection--single {
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.generate-element-row-content .color-alpha {
|
||||
height: 100% !important;
|
||||
.hide-hook-row,
|
||||
.sidebar-notice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-notice {
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.element-settings.block .generate-elements-settings[data-type="hook"] tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
@ -7,40 +7,27 @@ jQuery(document).ready(function( $ ) {
|
||||
} );
|
||||
}
|
||||
|
||||
if ( $( '.choose-element-type-parent' ).is( ':visible' ) ) {
|
||||
$( '.select-type' ).focus();
|
||||
}
|
||||
$( '#_generate_block_type' ).on( 'change', function() {
|
||||
var _this = $( this ).val();
|
||||
|
||||
$( 'select[name="_generate_element_type"]' ).on( 'change', function() {
|
||||
var _this = $( this ),
|
||||
element = _this.val();
|
||||
|
||||
if ( '' == element ) {
|
||||
return;
|
||||
if ( 'hook' === _this ) {
|
||||
$( '.hook-row' ).removeClass( 'hide-hook-row' );
|
||||
} else {
|
||||
$( '.hook-row' ).addClass( 'hide-hook-row' );
|
||||
}
|
||||
|
||||
$( '.element-settings' ).addClass( element ).removeClass( 'no-element-type' ).css( 'opacity', '' );
|
||||
$( 'body' ).removeClass( 'no-element-type' );
|
||||
$( 'body' ).removeClass( 'right-sidebar-block-type' );
|
||||
$( 'body' ).removeClass( 'left-sidebar-block-type' );
|
||||
$( 'body' ).removeClass( 'header-block-type' );
|
||||
$( 'body' ).removeClass( 'footer-block-type' );
|
||||
|
||||
var active_tab = $( '.element-metabox-tabs' ).find( 'li:visible:first' );
|
||||
active_tab.addClass( 'is-selected' );
|
||||
$( '.generate-elements-settings[data-tab="' + active_tab.attr( 'data-tab' ) + '"]' ).show();
|
||||
$( 'body' ).addClass( _this + '-block-type' );
|
||||
|
||||
if ( 'layout' === element ) {
|
||||
$( '#generate-element-content' ).hide();
|
||||
if ( 'left-sidebar' === _this || 'right-sidebar' === _this ) {
|
||||
$( '.sidebar-notice' ).show();
|
||||
} else {
|
||||
$( '.sidebar-notice' ).hide();
|
||||
}
|
||||
|
||||
if ( 'header' === element ) {
|
||||
$( 'body' ).addClass( 'header-element-type' );
|
||||
}
|
||||
|
||||
if ( elements.settings && 'layout' !== element ) {
|
||||
$( function() {
|
||||
wp.codeEditor.initialize( "generate-element-content", elements.settings );
|
||||
} );
|
||||
}
|
||||
|
||||
_this.closest( '.choose-element-type-parent' ).hide();
|
||||
} );
|
||||
|
||||
$( '#_generate_hook' ).on( 'change', function() {
|
||||
@ -76,6 +63,10 @@ jQuery(document).ready(function( $ ) {
|
||||
$( '.generate-elements-settings' ).hide();
|
||||
$( '.generate-elements-settings[data-tab="' + tab + '"]' ).show();
|
||||
|
||||
if ( $( '.element-settings' ).hasClass( 'block' ) & 'hook-settings' === tab ) {
|
||||
$( '.generate-elements-settings[data-tab="display-rules"]' ).show();
|
||||
}
|
||||
|
||||
if ( $( '.element-settings' ).hasClass( 'header' ) ) {
|
||||
if ( 'hero' !== tab ) {
|
||||
$( '#generate-element-content' ).next( '.CodeMirror' ).hide();
|
||||
@ -208,6 +199,8 @@ jQuery(document).ready(function( $ ) {
|
||||
|
||||
$( '.condition select.condition-select' ).on( 'change', function() {
|
||||
get_location_objects( $( this ) );
|
||||
|
||||
$( '.elements-no-location-error' ).hide();
|
||||
} );
|
||||
|
||||
$( '.generate-elements-rule-objects-visible' ).each( function() {
|
||||
|
@ -0,0 +1,498 @@
|
||||
/**!
|
||||
* 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.4
|
||||
* https://github.com/kallookoo/wp-color-picker-alpha
|
||||
* Licensed under the GPLv2 license or later.
|
||||
*/
|
||||
( function( $ ) {
|
||||
// Prevent double-init.
|
||||
if ( $.wp.wpColorPicker.prototype._hasAlpha ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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, {
|
||||
_hasAlpha: true,
|
||||
/**
|
||||
* @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' : '100%',
|
||||
'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 );
|
||||
|
||||
self.element.trigger( 'change' );
|
||||
} 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();
|
||||
} );
|
||||
}
|
||||
el.trigger( '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();
|
||||
} );
|
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user