first commit
This commit is contained in:
CHIEFSOFT\ameye
File diff suppressed because one or more lines are too long
@@ -0,0 +1,591 @@
|
||||
/* UPDATE NOTICE */
|
||||
.czr-update-notice h3, .czr-update-notice h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.czr-update-notice .button {
|
||||
font-weight: normal;
|
||||
}
|
||||
.czr-update-notice .button.upgrade-to-pro {
|
||||
height: 40px;
|
||||
font-size: 1.2em;
|
||||
padding: 5px 22px;
|
||||
display: inline-block;
|
||||
color: #de8200;
|
||||
color: #fff;
|
||||
background: #eea236;
|
||||
border: 1px solid #eea236;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-moz-transition: all .2s ease-in-out;
|
||||
-o-transition: all .2s ease-in-out;
|
||||
-ms-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-top: -4px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
text-shadow: none;
|
||||
}
|
||||
.czr-update-notice .button.upgrade-to-pro:hover {
|
||||
color: #fff;
|
||||
background: #ed9c28;
|
||||
border-color: #d58512;
|
||||
}
|
||||
/*a.czr-rating-link {
|
||||
color: #eea236;
|
||||
}*/
|
||||
a.czr-rating-link:hover {
|
||||
color: #eea236;
|
||||
}
|
||||
|
||||
/* FEEDBACK NOTICE */
|
||||
.nimble-logo-feedback-notice {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* -webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between; */
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from, 20%, 53%, 80%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
40%, 43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
transform: translate3d(0, -12px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
transform: translate3d(0, -6px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0,-1px,0);
|
||||
}
|
||||
}
|
||||
|
||||
.nimble-logo-feedback-notice .nimble-logo {
|
||||
width: 50px;
|
||||
-webkit-animation: bounce .7s 2;
|
||||
animation: bounce .7s 2;
|
||||
-webkit-transform-origin: center bottom;
|
||||
-ms-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
.nimble-logo-feedback-notice .nimble-feedback {
|
||||
padding: 0 10px;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nimble-logo-feedback-notice .nimble-feedback a { text-decoration: underline;}
|
||||
.nimble-logo-feedback-notice .nimble-feedback p { font-size: 14px;font-weight:600;}
|
||||
/* style copied from wp core .update-plugins */
|
||||
.nb-wp-menu-notif {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0 -1px 2px;
|
||||
padding: 0 5px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #00a32a;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
z-index: 26;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Nimble btn in admin top bar */
|
||||
#wpadminbar .sek-nimble-icon {
|
||||
/*padding-left: 15px;*/
|
||||
display: inline-block;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon img {
|
||||
width:28px;
|
||||
position:absolute;
|
||||
top: 2px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: gray;
|
||||
filter: gray;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon:hover img {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon .sek-nimble-admin-bar-title{
|
||||
padding-left:30px
|
||||
}
|
||||
|
||||
/* Style for the edit button with classical editor */
|
||||
#post-body-content .sek-nimble-icon .sek-nimble-mobile-admin-bar-title { display: none; }
|
||||
@media (max-width: 960px) {
|
||||
#post-body-content .sek-nimble-icon .sek-nimble-admin-bar-title{ display: none;}
|
||||
#post-body-content .sek-nimble-icon .sek-nimble-mobile-admin-bar-title{ display: inline-block;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#presscustomizr-dashboard .dashicons {
|
||||
vertical-align: middle;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#presscustomizr-dashboard .nimble-db-header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
|
||||
margin: 0 -12px 8px;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-logo-version {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-db-header .button-hero {
|
||||
/*
|
||||
commented since wp v5.3, nov 2019
|
||||
height: 34px;
|
||||
line-height: 33px;*/
|
||||
padding: 0 15px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-logo {
|
||||
width: 30px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-version {
|
||||
padding: 0 10px;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#presscustomizr-dashboard .nimble-single-post {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-single-post-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#presscustomizr-dashboard .nimble-post-list {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-post-list .nimble-single-post-link {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-post-list .nimble-post-list-title {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0 -12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
|
||||
#presscustomizr-dashboard .nimble-db-footer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0 -12px -12px;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-db-footer > [class*=nimble-footer-link-] {
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-db-footer > [class*=nimble-footer-link-] a {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
#presscustomizr-dashboard .nimble-db-footer [class*=nimble-footer-link-]:first-child {
|
||||
padding-left: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* GO PRO BTN */
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
height: 30px;
|
||||
padding: 1px 10px;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background: #e99723;
|
||||
border: 1px solid #eea236;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn:hover,
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn:focus {
|
||||
color: #fff;
|
||||
background: #ed9c28;
|
||||
border-color: #d58512;
|
||||
text-shadow:none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn.no-bg-btn {
|
||||
color: #d58512;
|
||||
background: #fff;
|
||||
}
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn.no-bg-btn:hover,
|
||||
.wp-core-ui #presscustomizr-dashboard .hu-go-pro-btn.no-bg-btn:focus {
|
||||
color: #fff;
|
||||
background: #e99723;
|
||||
}
|
||||
|
||||
|
||||
/* BUTTON "EDIT WITH NIMBLE" when editing posts and pages
|
||||
Introduced for https://github.com/presscustomizr/nimble-builder/issues/449
|
||||
*/
|
||||
/* Gutenberg editor style */
|
||||
body .block-editor #sek-edit-with-nimble {
|
||||
margin: 2px;
|
||||
height: 33px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
}
|
||||
body .block-editor #sek-edit-with-nimble .sek-nimble-icon img {
|
||||
width: 24px;
|
||||
top: 3px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
body .block-editor .sek-nimble-admin-bar-title, body .block-editor .sek-nimble-mobile-admin-bar-title {
|
||||
padding-left: 22px;
|
||||
}
|
||||
body .block-editor .sek-nimble-mobile-admin-bar-title { display: none; }
|
||||
@media (max-width: 960px) {
|
||||
body .block-editor .sek-nimble-admin-bar-title{ display: none;}
|
||||
body .block-editor .sek-nimble-mobile-admin-bar-title{ display: inline-block;}
|
||||
}
|
||||
|
||||
/* Classic editor style */
|
||||
#sek-edit-with-nimble .sek-nimble-icon img {
|
||||
width: 24px;
|
||||
top: 3px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
#sek-edit-with-nimble.classic-ed {
|
||||
margin: 2px;
|
||||
height: 33px;
|
||||
min-height: 33px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
padding: 0 15px!important;
|
||||
margin: 10px 0!important;
|
||||
}
|
||||
#sek-edit-with-nimble.classic-ed .sek-nimble-mobile-admin-bar-title, #sek-edit-with-nimble.classic-ed .sek-nimble-admin-bar-title {
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
/* loading icon introduced for https://github.com/presscustomizr/nimble-builder/issues/509 */
|
||||
#sek-edit-with-nimble .sek-spinner {
|
||||
transition: .18s margin ease-in-out;
|
||||
display: none;
|
||||
}
|
||||
#sek-edit-with-nimble .sek-spinner {
|
||||
background: url(../img/spinner.gif) no-repeat;
|
||||
background-size: 20px 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#sek-edit-with-nimble.sek-loading-customizer .sek-spinner {
|
||||
display: block;
|
||||
/* display: inline-block;*/
|
||||
}
|
||||
#sek-edit-with-nimble.sek-loading-customizer .sek-nimble-icon img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* WELCOME NOTICE */
|
||||
.wrap .nimble-welcome-notice {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
/* flex-wrap: wrap; */
|
||||
}
|
||||
.wrap .nimble-welcome-content {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
.nimble-welcome-notice p, .nimble-welcome-content p {
|
||||
font-weight: bold;
|
||||
}
|
||||
.nimble-welcome-notice .dashicons, .nimble-welcome-content .dashicons {
|
||||
line-height: 44px;
|
||||
}
|
||||
.nimble-welcome-icon-holder {
|
||||
/* width: 500px;
|
||||
height: 200px; */
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
margin: 0 38px 38px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.nimble-welcome-icon-holder, .wrap .nimble-welcome-content {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrap .nimble-welcome-notice {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.nimble-welcome-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.nimble-welcome-notice h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.nimble-welcome-notice h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nimble-link-to-doc {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 46px;
|
||||
}
|
||||
.nimble-link-to-doc .nimble-doc-link-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* WP OVERRIDE FOR ADMIN TABS */
|
||||
#nimble-options .nav-tab {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* OPTIONS PAGE */
|
||||
#nimble-options .nb-option-page-title {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
[dir="rtl"] .nb-option-page-title {
|
||||
padding-right: 40px;
|
||||
padding-left:0;
|
||||
}
|
||||
.sek-nimble-title-icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
}
|
||||
[dir="rtl"] .sek-nimble-title-icon {
|
||||
right:0;
|
||||
left:initial;
|
||||
}
|
||||
.sek-pro-icon {
|
||||
width: 23px;
|
||||
height: 27px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
span.sek-title-after-icon {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.tab-content-wrapper {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.sek-pro-link {
|
||||
color: #f07829;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: 19px;
|
||||
}
|
||||
.sek-pro-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #f07829;
|
||||
}
|
||||
.sek-pro-link .dashicons {
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
.sek-pro-link-in-plugins, .sek-pro-link-in-dashboard {
|
||||
color: #f07829;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
/* font-size: 19px; */
|
||||
}
|
||||
.sek-pro-link-in-dashboard { font-size: 16px;min-width: 80px;}
|
||||
.sek-pro-link-in-plugins:hover, .sek-pro-link-in-dashboard:hover {
|
||||
text-decoration: underline;
|
||||
color: #f07829;
|
||||
}
|
||||
.sek-pro-link-in-plugins .dashicons {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
#presscustomizr-dashboard .sek-pro-link-in-dashboard .dashicons {
|
||||
font-size: 20px;
|
||||
bottom: 3px;
|
||||
position: relative;
|
||||
}
|
||||
/* DOC PAGE */
|
||||
.nimble-doc-img {
|
||||
max-width: 60%;
|
||||
}
|
||||
.nimle-doc-img img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.nimble-doc ul {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.nimble-doc ul li {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.nimble-doc .dashicons {
|
||||
line-height: 44px;
|
||||
}
|
||||
#nimble-options .nimble-doc .button-hero {
|
||||
margin: 20px;
|
||||
}
|
||||
.nb-clean-traces-confirm {
|
||||
border: 1px solid rgba(248,81,73,0.4);
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#nimble-options .nb-clean-traces-confirm .nb-permanent-removal-btn {
|
||||
color: #da3633;
|
||||
border-color: #da3633;
|
||||
}
|
||||
|
||||
/* May 2020 Nimble setting menu icon */
|
||||
#menu-settings [href="options-general.php?page=nb-options"]:before{
|
||||
content:'';
|
||||
background-image:url('../../img/nimble/nimble_icon.svg?ver=2.0.19');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 20px;
|
||||
vertical-align: top;
|
||||
margin-left: -5px;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: gray;
|
||||
}
|
||||
#menu-settings li [href="options-general.php?page=nb-options"]:hover:before{
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
.rtl #menu-settings [href="options-general.php?page=nb-options"]:before{
|
||||
margin-right: -5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,95 @@
|
||||
// global nimbleAdminLocalized
|
||||
// Introduced for https://github.com/presscustomizr/nimble-builder/issues/449
|
||||
(function ($) {
|
||||
var button_printed = false,
|
||||
// the callback is ran until unsuscribed when headerToolBar element has been detected and the btn printed
|
||||
_callback = function () {
|
||||
if ( button_printed )
|
||||
return;
|
||||
|
||||
var $headerToolBar = $('#editor').find('.edit-post-header__toolbar');
|
||||
var _printBtn = function() {
|
||||
var html = $($('#sek-edit-with-nb').html());
|
||||
setTimeout( function() {
|
||||
$headerToolBar.append( html );
|
||||
}, 300 );// <= May 2020 : introduce a delay to make sure NB edit btn is printed after all gutenberg menu items. @todo find the relevant event to do that instead.
|
||||
button_printed = true;
|
||||
// unsubscribe the listener
|
||||
// documented here : https://developer.wordpress.org/block-editor/packages/packages-data/#subscribe
|
||||
wp.data.subscribe(_callback)();
|
||||
};
|
||||
|
||||
if ( $headerToolBar.length > 0 ) {
|
||||
_printBtn();
|
||||
} else {
|
||||
// Nov 2020 => retro compat with WP version < 5.6
|
||||
$headerToolBar = $('#editor').find('.edit-post-header-toolbar');
|
||||
if ( $headerToolBar.length > 0 ) {
|
||||
_printBtn();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// PRINT THE BUTTON WHEN element .edit-post-header-toolbar has been rendered
|
||||
// wp.data.subscribe() documented here : https://developer.wordpress.org/block-editor/packages/packages-data/#subscribe
|
||||
// Given a listener function, the function will be called any time the state value
|
||||
// of one of the registered stores has changed. This function returns a unsubscribe
|
||||
// function used to stop the subscription.
|
||||
wp.data.subscribe(_callback);
|
||||
|
||||
// ATTACH EVENT LISTENER
|
||||
// with delegation
|
||||
// When editing an existing post, the customizer url is rendered server side in the data-cust-url='' attribute
|
||||
// @see inc/admin/nimble-admin.php => sek_print_nb_btn_edit_with()
|
||||
//
|
||||
// When creating a new post, the customizer url is generated with an ajax call
|
||||
$('body').on( 'click', '#sek-edit-with-nimble', function(evt) {
|
||||
evt.preventDefault();
|
||||
var $clickedEl = $(this),
|
||||
_url = $clickedEl.data('cust-url'),
|
||||
attempts = 0,
|
||||
_openCustomizer = function( customizer_url ) {
|
||||
// We don't want to enter in an infinite loop, that's why the number of attempts is limited to 5 if isSavingPost()
|
||||
if ( wp.data.select('core/editor').isSavingPost() && attempts < 5 ) {
|
||||
_.delay(function () {
|
||||
self._openCustomizer();
|
||||
attempts++;
|
||||
}, 300 );
|
||||
} else {
|
||||
location.href = customizer_url;
|
||||
}
|
||||
//$clickedEl.removeClass('sek-loading-customizer');
|
||||
};
|
||||
|
||||
if ( _.isEmpty( _url ) ) {
|
||||
// for new post, the url is empty, let's generate it server side with an ajax call
|
||||
var post_id = wp.data.select('core/editor').getCurrentPostId();
|
||||
|
||||
// introduced for https://github.com/presscustomizr/nimble-builder/issues/509
|
||||
$clickedEl.addClass('sek-loading-customizer').removeClass('button-primary');
|
||||
|
||||
wp.ajax.post( 'sek_get_customize_url_for_nimble_edit_button', {
|
||||
nimble_edit_post_id : post_id
|
||||
}).done( function( resp ) {
|
||||
_openCustomizer( resp );
|
||||
}).fail( function( resp ) {
|
||||
$clickedEl.removeClass('sek-loading-customizer').addClass('button-primary');
|
||||
|
||||
// If the ajax request fails, let's save the draft with a Nimble Builder title, and refresh the page, so the url is generated server side on next load.
|
||||
var post_title = wp.data.select('core/editor').getEditedPostAttribute('title');
|
||||
if ( !post_title ) {
|
||||
wp.data.dispatch('core/editor').editPost({ title: 'Nimble Builder #' + post_id });
|
||||
}
|
||||
wp.data.dispatch('core/editor').savePost();
|
||||
_.delay(function () {
|
||||
// off the javascript pop up warning if post not saved yet
|
||||
$( window ).off( 'beforeunload' );
|
||||
location.href = location.href;
|
||||
}, 300 );
|
||||
});
|
||||
} else {
|
||||
_openCustomizer( _url );
|
||||
}
|
||||
});//.on( 'click'
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Rank Math SEO Integration
|
||||
* Nov 2020 Add Nimble Builder content to RM analyzer
|
||||
* doc https://rankmath.com/kb/content-analysis-api/
|
||||
*/
|
||||
;( function( $ ) {
|
||||
jQuery(function($){
|
||||
var nimblePluginForRankMath = function( skope_id ) {
|
||||
wp.ajax.post( 'sek_get_nimble_content_for_seo_plugins', {
|
||||
skope_id : skope_id
|
||||
}).done( function( nimbleContent ) {
|
||||
wp.hooks.addFilter( 'rank_math_content', 'nimblePlugin', function( originalContent ) {
|
||||
return originalContent + nimbleContent;
|
||||
});
|
||||
rankMathEditor.refresh( 'content' );
|
||||
}).fail( function( er ) {
|
||||
console.log('NimblePlugin for Rank Math => error when fetching Nimble content.');
|
||||
});
|
||||
};
|
||||
if ( window.nb_skope_id_for_rank_math_seo ) {
|
||||
nimblePluginForRankMath( window.nb_skope_id_for_rank_math_seo );
|
||||
} else {
|
||||
$(document).on('nb-skope-id-ready.rank-math', function( evt, params ) {
|
||||
if ( params && params.skope_id ) {
|
||||
nimblePluginForRankMath( params.skope_id );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})( jQuery );
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
Binary file not shown.
|
After Width: | Height: | Size: 306 B |
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
// Silence is golden.
|
||||
@@ -0,0 +1,482 @@
|
||||
.czrSelect2-container {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
.czrSelect2-container .czrSelect2-selection--single {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 28px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.czrSelect2-container .czrSelect2-selection--single .czrSelect2-selection__rendered {
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
padding-right: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.czrSelect2-container .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
position: relative; }
|
||||
.czrSelect2-container[dir="rtl"] .czrSelect2-selection--single .czrSelect2-selection__rendered {
|
||||
padding-right: 8px;
|
||||
padding-left: 20px; }
|
||||
.czrSelect2-container .czrSelect2-selection--multiple {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.czrSelect2-container .czrSelect2-selection--multiple .czrSelect2-selection__rendered {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.czrSelect2-container .czrSelect2-search--inline {
|
||||
float: left; }
|
||||
.czrSelect2-container .czrSelect2-search--inline .czrSelect2-search__field {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
padding: 0; }
|
||||
.czrSelect2-container .czrSelect2-search--inline .czrSelect2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
.czrSelect2-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; }
|
||||
|
||||
.czrSelect2-results {
|
||||
display: block; }
|
||||
|
||||
.czrSelect2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
.czrSelect2-results__option {
|
||||
padding: 6px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.czrSelect2-results__option[aria-selected] {
|
||||
cursor: pointer; }
|
||||
|
||||
.czrSelect2-container--open .czrSelect2-dropdown {
|
||||
left: 0; }
|
||||
|
||||
.czrSelect2-container--open .czrSelect2-dropdown--above {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.czrSelect2-container--open .czrSelect2-dropdown--below {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.czrSelect2-search--dropdown {
|
||||
display: block;
|
||||
padding: 4px; }
|
||||
.czrSelect2-search--dropdown .czrSelect2-search__field {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.czrSelect2-search--dropdown .czrSelect2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; }
|
||||
.czrSelect2-search--dropdown.czrSelect2-search--hide {
|
||||
display: none; }
|
||||
|
||||
.czrSelect2-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); }
|
||||
|
||||
.czrSelect2-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; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-selection--single {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__placeholder {
|
||||
color: #999; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__arrow {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-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; }
|
||||
|
||||
.czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
float: left; }
|
||||
|
||||
.czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--single .czrSelect2-selection__arrow {
|
||||
left: 1px;
|
||||
right: auto; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--disabled .czrSelect2-selection--single {
|
||||
background-color: #eee;
|
||||
cursor: default; }
|
||||
.czrSelect2-container--default.czrSelect2-container--disabled .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
display: none; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--open .czrSelect2-selection--single .czrSelect2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__rendered {
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
width: 100%; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__placeholder {
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
float: left; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-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; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove:hover {
|
||||
color: #333; }
|
||||
|
||||
.czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice, .czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__placeholder, .czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-search--inline {
|
||||
float: right; }
|
||||
|
||||
.czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto; }
|
||||
|
||||
.czrSelect2-container--default[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--focus .czrSelect2-selection--multiple {
|
||||
border: solid black 1px;
|
||||
outline: 0; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--disabled .czrSelect2-selection--multiple {
|
||||
background-color: #eee;
|
||||
cursor: default; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--disabled .czrSelect2-selection__choice__remove {
|
||||
display: none; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--open.czrSelect2-container--above .czrSelect2-selection--single, .czrSelect2-container--default.czrSelect2-container--open.czrSelect2-container--above .czrSelect2-selection--multiple {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.czrSelect2-container--default.czrSelect2-container--open.czrSelect2-container--below .czrSelect2-selection--single, .czrSelect2-container--default.czrSelect2-container--open.czrSelect2-container--below .czrSelect2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-search--dropdown .czrSelect2-search__field {
|
||||
border: 1px solid #aaa; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-search--inline .czrSelect2-search__field {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: textfield; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results > .czrSelect2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__option[role=group] {
|
||||
padding: 0; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__option[aria-disabled=true] {
|
||||
color: #999; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__option[aria-selected=true] {
|
||||
background-color: #ddd; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option {
|
||||
padding-left: 1em; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__group {
|
||||
padding-left: 0; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option {
|
||||
margin-left: -1em;
|
||||
padding-left: 2em; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option {
|
||||
margin-left: -2em;
|
||||
padding-left: 3em; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option {
|
||||
margin-left: -3em;
|
||||
padding-left: 4em; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option {
|
||||
margin-left: -4em;
|
||||
padding-left: 5em; }
|
||||
.czrSelect2-container--default .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option .czrSelect2-results__option {
|
||||
margin-left: -5em;
|
||||
padding-left: 6em; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__option--highlighted[aria-selected] {
|
||||
background-color: #5897fb;
|
||||
color: white; }
|
||||
|
||||
.czrSelect2-container--default .czrSelect2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-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); }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single:focus {
|
||||
border: 1px solid #5897fb; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single .czrSelect2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-right: 10px; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single .czrSelect2-selection__placeholder {
|
||||
color: #999; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single .czrSelect2-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); }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--single .czrSelect2-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; }
|
||||
|
||||
.czrSelect2-container--classic[dir="rtl"] .czrSelect2-selection--single .czrSelect2-selection__clear {
|
||||
float: left; }
|
||||
|
||||
.czrSelect2-container--classic[dir="rtl"] .czrSelect2-selection--single .czrSelect2-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; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open .czrSelect2-selection--single {
|
||||
border: 1px solid #5897fb; }
|
||||
.czrSelect2-container--classic.czrSelect2-container--open .czrSelect2-selection--single .czrSelect2-selection__arrow {
|
||||
background: transparent;
|
||||
border: none; }
|
||||
.czrSelect2-container--classic.czrSelect2-container--open .czrSelect2-selection--single .czrSelect2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open.czrSelect2-container--above .czrSelect2-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); }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open.czrSelect2-container--below .czrSelect2-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); }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text;
|
||||
outline: 0; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple:focus {
|
||||
border: 1px solid #5897fb; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple .czrSelect2-selection__rendered {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple .czrSelect2-selection__clear {
|
||||
display: none; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple .czrSelect2-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; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove {
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.czrSelect2-container--classic .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove:hover {
|
||||
color: #555; }
|
||||
|
||||
.czrSelect2-container--classic[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice {
|
||||
float: right; }
|
||||
|
||||
.czrSelect2-container--classic[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto; }
|
||||
|
||||
.czrSelect2-container--classic[dir="rtl"] .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open .czrSelect2-selection--multiple {
|
||||
border: 1px solid #5897fb; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open.czrSelect2-container--above .czrSelect2-selection--multiple {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open.czrSelect2-container--below .czrSelect2-selection--multiple {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-search--dropdown .czrSelect2-search__field {
|
||||
border: 1px solid #aaa;
|
||||
outline: 0; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-search--inline .czrSelect2-search__field {
|
||||
outline: 0;
|
||||
box-shadow: none; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-dropdown--above {
|
||||
border-bottom: none; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-dropdown--below {
|
||||
border-top: none; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-results > .czrSelect2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-results__option[role=group] {
|
||||
padding: 0; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-results__option[aria-disabled=true] {
|
||||
color: grey; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-results__option--highlighted[aria-selected] {
|
||||
background-color: #3875d7;
|
||||
color: white; }
|
||||
|
||||
.czrSelect2-container--classic .czrSelect2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
|
||||
.czrSelect2-container--classic.czrSelect2-container--open .czrSelect2-dropdown {
|
||||
border-color: #5897fb; }
|
||||
File diff suppressed because one or more lines are too long
+696
@@ -0,0 +1,696 @@
|
||||
/* WP SAVE BUTTON */
|
||||
/*.czr-api-dirty input#save {
|
||||
background-color: #FFBD2E;
|
||||
border-color: #d99400;
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-transition: background-color .2s ease-in-out;
|
||||
-moz-transition: background-color .2s ease-in-out;
|
||||
-ms-transition: background-color .2s ease-in-out;
|
||||
-o-transition: background-color .2s ease-in-out;
|
||||
transition: background-color .2s ease-in-out;
|
||||
}
|
||||
.czr-api-dirty input#save:hover {
|
||||
background-color: #fcad06;
|
||||
}*/
|
||||
|
||||
/* FIX CUSTOMIZE INFO OVERLAPPING SKOPE SWITCHER */
|
||||
.czr-skop-on #customize-controls .customize-info.is-in-view, #customize-controls .customize-section-title.is-in-view {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* HEADER AND SCOPE SWITCHER */
|
||||
.czr-skop-on .wp-full-overlay-sidebar .wp-full-overlay-header {
|
||||
height: 185px;
|
||||
}
|
||||
.czr-skop-on .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
|
||||
top: 185px!important;
|
||||
}
|
||||
.wp-customizer .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.customize-controls-close {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
/*
|
||||
* when skope is on, the z-index of the #customize-notifications-area has to be increased
|
||||
* this #customize-notifications-area block has been introduced in WP 4.9
|
||||
*/
|
||||
.czr-skop-on #customize-controls #customize-notifications-area {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.wp-customizer #customize-header-actions {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.czr-scope-switcher {
|
||||
width: 100%;
|
||||
float: right;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.czr-scope-switcher .czr-skp-permanent-title {
|
||||
position: relative;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
#customize-header-actions .czr-scope-switcher .spinner {
|
||||
float: none;
|
||||
display: none;
|
||||
margin: 0px;
|
||||
left: -26px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
}
|
||||
h2.czr-current-skope-title {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
margin: 6px 0 4px;
|
||||
text-align: center;
|
||||
height: 63px;
|
||||
font-weight:normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.czr-main-title {
|
||||
max-height: 24px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 95%;
|
||||
}
|
||||
.czr-skope-title {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
font-style: italic;
|
||||
line-height: 25px;
|
||||
}
|
||||
.czr-toggle-title-notice {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
}
|
||||
.czr-skope-inherits-from {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
width: 90%;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #0029ff;
|
||||
top: -6px;
|
||||
position: relative;
|
||||
}
|
||||
.notice-visible .czr-toggle-title-notice {
|
||||
color: #0029ff;
|
||||
}
|
||||
.notice-visible .czr-skope-inherits-from {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .3s ease-in-out;
|
||||
-moz-transition: opacity .3s ease-in-out;
|
||||
-ms-transition: opacity .3s ease-in-out;
|
||||
-o-transition: opacity .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
.czr-scope-switcher .button {
|
||||
float: left;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
margin: 0 2%;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity .3s ease-in-out;
|
||||
-moz-transition: opacity .3s ease-in-out;
|
||||
-ms-transition: opacity .3s ease-in-out;
|
||||
-o-transition: opacity .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
.czr-scope-switcher .button.active {
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
.czr-scope-switcher .active, .czr-scope-switcher .czr-scope:hover {
|
||||
opacity: 1;
|
||||
/*border-bottom: 2px solid #59b15c;*/
|
||||
}
|
||||
.czr-skopes-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.czr-scope.active:before {
|
||||
height: 101%;
|
||||
float: left;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
-webkit-box-shadow : -4px 0px 15px 0px rgba(119, 119, 119, 0.58);
|
||||
box-shadow: -4px 0px 15px 0px rgba(119, 119, 119, 0.58);
|
||||
top: 0;
|
||||
}
|
||||
.czr-scope-switcher .active:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-box-shadow : 4px 0px 15px 0px rgba(119, 119, 119, 0.58);
|
||||
box-shadow: 4px 0px 15px 0px rgba(119, 119, 119, 0.58);
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.czr-skopes-wrapper .active-collection.local:after {
|
||||
right:0;
|
||||
}
|
||||
.czr-scope-switcher .czr-scope:last-child:after {
|
||||
-webkit-box-shadow :none;
|
||||
box-shadow: none;
|
||||
right: 0;
|
||||
}
|
||||
.czr-scope-switcher .czr-scope:first-child:after {
|
||||
left: 0;
|
||||
}
|
||||
.czr-scope {
|
||||
float: left;
|
||||
width: 30.5%;
|
||||
/*margin-left: 1.5%;*/
|
||||
background: #fff;
|
||||
/*border-bottom: 2px solid #cccccc;*/
|
||||
border-top: 1px solid #cccccc;
|
||||
/*-webkit-border-radius: 3px;
|
||||
border-radius: 3px;*/
|
||||
overflow: hidden;
|
||||
opacity: 0.65;
|
||||
-webkit-transition: opacity .3s ease-in-out;
|
||||
-moz-transition: opacity .3s ease-in-out;
|
||||
-ms-transition: opacity .3s ease-in-out;
|
||||
-o-transition: opacity .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
|
||||
/* LAYOUTS */
|
||||
.czr-scope-switcher .width-100, .czr-scope.width-100.active:before, .czr-scope.width-100.active:after { width: 100%; }
|
||||
.czr-scope-switcher .width-50, .czr-scope.width-50.active:before, .czr-scope.width-50.active:after { width: 50%; }
|
||||
.czr-scope-switcher .width-33, .czr-scope.width-33.active:before, .czr-scope.width-33.active:after { width: 33.33%; }
|
||||
.czr-scope-switcher .width-25, .czr-scope.width-25.active:before, .czr-scope.width-25.active:after { width: 25%; }
|
||||
|
||||
.czr-scope-header, .czr-scope-footer {
|
||||
width: 100%;
|
||||
min-height: 16px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
.inactive .czr-scope-footer:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
bottom: -7px;
|
||||
left: 0;
|
||||
-webkit-box-shadow : 0px 0px 13px 4px rgba(119, 119, 119, 0.85);
|
||||
box-shadow: 0px 0px 13px 4px rgba(119, 119, 119, 0.85);
|
||||
}
|
||||
.czr-scope-content {
|
||||
height: 35px;
|
||||
padding: 0 3%;
|
||||
width: 94%;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.czr-scope-content h4 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
text-shadow: 1px 1px 0px #dedede;
|
||||
}
|
||||
.czr-scope .fab,
|
||||
.czr-scope .far,
|
||||
.czr-scope .fas {
|
||||
font-size: 10px;
|
||||
padding: 2%;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
-webkit-transition: opacity .3s ease-in-out;
|
||||
-moz-transition: opacity .3s ease-in-out;
|
||||
-ms-transition: opacity .3s ease-in-out;
|
||||
-o-transition: opacity .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
.czr-scope .czr-scope-footer .info {
|
||||
cursor: inherit;
|
||||
}
|
||||
.czr-scope-header .czr-scope-switch {
|
||||
font-size: 22px;
|
||||
padding: 0 2px 0 0;
|
||||
text-shadow: 1px 1px 2px white;
|
||||
}
|
||||
.czr-skp-switch-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.czr-skp-switch-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.czr-pull-left {
|
||||
float: left;
|
||||
}
|
||||
.czr-pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* DIALOG BOX REACTIONS */
|
||||
.active .czr-scope-switch {
|
||||
color: #59b15c;
|
||||
cursor:inherit;
|
||||
}
|
||||
|
||||
.czr-scope .czr-scope-reset {
|
||||
/*opacity: 0;*/
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
text-shadow: 1px 1px 0px #dedede;
|
||||
|
||||
}
|
||||
.has-db-val .czr-scope-reset {
|
||||
color: #00a0d2;
|
||||
}
|
||||
.dirty .czr-scope-reset {
|
||||
color: #FFBD2E!important;
|
||||
}
|
||||
|
||||
.is_winner .czr-scope-winner {
|
||||
color: #59b15c;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.czr-scope-force {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Underline skope switch text in control notices and in the main skope switcher title */
|
||||
.czr-skope-switch {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**************************************
|
||||
******* RESET */
|
||||
/* RESET COMMONS */
|
||||
.czr-spinner-wrapper {
|
||||
visibility: hidden;
|
||||
}
|
||||
.czr-reset-success, .czr-reset-fail {
|
||||
display: none;
|
||||
}
|
||||
.czr-spinner {
|
||||
background: url(img/czr-spinner.gif) no-repeat;
|
||||
-webkit-background-size: 32px 32px;
|
||||
background-size: 32px 32px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity=70);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 4px 10px 0;
|
||||
}
|
||||
|
||||
|
||||
/* SINGLE CONTROL RESET */
|
||||
.customize-control span.customize-control-title:first-child {
|
||||
padding-left: 16px;
|
||||
-webkit-transition: left, right, 0.15s ease-in-out;
|
||||
-moz-transition: left, right, 0.15s ease-in-out;
|
||||
-ms-transition: left, right, 0.15s ease-in-out;
|
||||
-o-transition: left, right, 0.15s ease-in-out;
|
||||
transition: left, right, 0.15s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-customizer .customize-control.czr-not-skoped .customize-control-title {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.czr-setting-reset {
|
||||
color: #eee;
|
||||
-webkit-transition: color 0.4s;
|
||||
transition: color 0.4s;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
text-shadow: 1px 1px 0px #a0a0a0;
|
||||
}
|
||||
.czr-global-skope-level .is-wp-authorized-setting.has-db-val .czr-setting-reset {
|
||||
color: #eee;
|
||||
}
|
||||
.has-db-val .czr-setting-reset {
|
||||
color: #00a0d2;
|
||||
}
|
||||
.is-dirty .czr-setting-reset {
|
||||
color: #FFBD2E!important;
|
||||
}
|
||||
.czr-ctrl-reset-warning .czr-spinner {
|
||||
display: none;
|
||||
}
|
||||
.czr-resetting-control .czr-ctrl-reset-warning .czr-spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* RESET ALERTS */
|
||||
.is-dirty .czr-remove-alert-wrapper {
|
||||
background-color: rgba(255, 189, 46, 0.54)!important;
|
||||
border: 1px solid #FFBD2E!important;
|
||||
text-shadow:none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.has-db-val .czr-remove-alert-wrapper {
|
||||
background-color: rgba(0, 160, 210, 0.45);
|
||||
border: 1px solid #00a0d2;
|
||||
text-shadow:none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.czr-resetting-control .czr-remove-alert-wrapper {
|
||||
-webkit-transition: all, 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all, 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* SKOPE LOADING */
|
||||
body.czr-skop-loading #czr-skope-pane {
|
||||
top : 0;
|
||||
}
|
||||
body.czr-skop-loading #customize-preview {
|
||||
/*opacity: 0!important;*/
|
||||
filter: blur(3px);
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
|
||||
/* Pure CSS loader */
|
||||
@-webkit-keyframes czr-mr-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 1; }
|
||||
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0.7; }
|
||||
|
||||
100% {
|
||||
opacity: 0.0; }
|
||||
}
|
||||
|
||||
@keyframes czr-mr-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 1; }
|
||||
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0.7; }
|
||||
|
||||
100% {
|
||||
opacity: 0.0; }
|
||||
}
|
||||
/*.czr-css-loader {
|
||||
display: none;
|
||||
}*/
|
||||
.czr-css-loader {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
}
|
||||
.czr-mr-loader > div:nth-child(0) {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.czr-mr-loader > div:nth-child(1) {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
.czr-mr-loader > div:nth-child(2) {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.czr-mr-loader > div:nth-child(3) {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
.czr-mr-loader > div {
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
position: absolute;
|
||||
top: -4%;
|
||||
left: -4%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #fff;
|
||||
-webkit-animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
|
||||
animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* PREVIEW NOTIFICATIONS BLOCKS ( for Welcome, etc ) */
|
||||
/* COMMONS */
|
||||
#czr-top-note, #czr-bottom-infos {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
}
|
||||
.czr-preview-notification a, .czr-preview-notification h2 {color: #fff; margin: 1em 0;}
|
||||
|
||||
.czr-preview-notification .czr-preview-note-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
font-size: 31px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.czr-preview-notification .fa-arrow-left {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 25px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.czr-preview-notification .czr-note-content {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
.czr-preview-notification .czr-note-message {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
/* TOP NOTE */
|
||||
#czr-top-note { top : -100%; background: rgba(0, 0, 0, 0.80); padding: 2%;}
|
||||
#czr-top-note h2 {font-size: 25px; }
|
||||
|
||||
body.czr-top-note-open #czr-top-note {
|
||||
top: 0;
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
/* BOTTOM SKOPE INFOS */
|
||||
#czr-bottom-infos { bottom : -100%; background-color: rgba(0, 0, 0, 0.85);padding: 1px;}
|
||||
body.czr-bottom-infos-open #czr-bottom-infos {
|
||||
bottom: 0;
|
||||
visibility: inherit;
|
||||
}
|
||||
#czr-bottom-infos .czr-note-content .czr-note-message {
|
||||
font-size: 13px;
|
||||
}
|
||||
#czr-bottom-infos .action-links-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
#czr-bottom-infos .action-link {
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
}
|
||||
#czr-bottom-infos .action-link a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.czr-disable-bottom-infos {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SKOPE PANE */
|
||||
/* WP TEXT EDITOR */
|
||||
#czr-skope-pane {
|
||||
position: absolute;
|
||||
min-height: 100%;
|
||||
text-align: center;
|
||||
padding: 2%;
|
||||
top : -100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* RESET */
|
||||
#czr-skope-pane.dirty-reset {
|
||||
background: rgba(252, 173, 6, 0.23);
|
||||
}
|
||||
#czr-skope-pane.db-reset {
|
||||
background: rgba(0, 160, 210, 0.3);
|
||||
}
|
||||
.czr-reset-content {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 80%;
|
||||
padding: 5%;
|
||||
background: rgba(0, 0, 0, 0.63);
|
||||
}
|
||||
|
||||
#czr-skope-pane h2 {
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
body.czr-skope-pane-open #czr-skope-pane {
|
||||
top: 0;
|
||||
visibility: inherit;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body.czr-skope-pane-open #customize-preview, body.czr-skope-pane-open .wp-full-overlay-sidebar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
body.czr-resetting-skope #czr-skope-pane .czr-spinner-wrapper {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.czr-skope-pane-open .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
z-index: 30;
|
||||
}
|
||||
.czr-skope-pane-open .wp-full-overlay.expanded .collapse-sidebar {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* CONTROL INFOS */
|
||||
.customize-control .czr-skope-notice {
|
||||
color: #3a3a3a;
|
||||
font-family: Verdana, 'DejaVu Sans', 'Bitstream Vera Sans', 'Geneva', sans-serif;
|
||||
font-size: 10px;
|
||||
line-height: 1.5em;
|
||||
font-style: normal;
|
||||
border-left: 3px solid rgba(99, 99, 99, 0.36);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.czr-toggle-notice {
|
||||
color: #95a5a6;
|
||||
text-shadow: 1px 1px 0px white;
|
||||
-webkit-transition: color 0.4s;
|
||||
transition: color 0.4s;
|
||||
position: absolute;
|
||||
padding-left: 3px;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
}
|
||||
.czr-notice-visible .czr-toggle-notice, .czr-toggle-notice:hover {
|
||||
color: rgba(0, 0, 0, 0.67);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Error Notification */
|
||||
.wp-full-overlay-header, .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
|
||||
-webkit-transition: height, top, .4s ease-in-out;
|
||||
-moz-transition: height, top, .4s ease-in-out;
|
||||
-ms-transition: height, top, .4s ease-in-out;
|
||||
-o-transition: height, top, .4s ease-in-out;
|
||||
transition: height, top, .4s ease-in-out;
|
||||
}
|
||||
.czr-server-notice {
|
||||
width: calc(96% - 2px);
|
||||
bottom: 75px;
|
||||
text-align: center;
|
||||
background: rgba(0, 156, 0, 0.18);
|
||||
color: #000;
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
padding: 2%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.czr-server-notice.czr-server-error {
|
||||
color: #000;
|
||||
background: rgba(255, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.czr-dismiss-notification {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*ickeck specifics */
|
||||
.wp-customizer .icheckbox_flat-grey, .wp-customizer .iradio_flat-grey {
|
||||
border: 1px solid white;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
/* SKOPE PAINTING */
|
||||
.czr-painted {
|
||||
-webkit-transition: background .3s ease-in-out!important;
|
||||
-moz-transition: background .3s ease-in-out!important;
|
||||
-ms-transition: background .3s ease-in-out!important;
|
||||
-o-transition: background .3s ease-in-out!important;
|
||||
transition: background .3s ease-in-out!important;
|
||||
}
|
||||
@@ -0,0 +1,984 @@
|
||||
/* OVERRIDE WP CUSTOMIZER */
|
||||
/* LINKS */
|
||||
.wp-customizer a {
|
||||
color: #000;
|
||||
}
|
||||
.wp-customizer a:hover, .wp-customizer a:focus {
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-left: 440px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 440px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-left: -440px;
|
||||
}
|
||||
/*.in-sub-panel #customize-info,
|
||||
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
left: -440px;
|
||||
width: 440px;
|
||||
}*/
|
||||
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
left: -440px;
|
||||
}
|
||||
.accordion-sub-container.control-panel-content {
|
||||
left: 440px;
|
||||
}
|
||||
|
||||
|
||||
/* RTL*/
|
||||
.rtl.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-right: 440px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 440px;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-right: -440px;
|
||||
margin-left: 0;
|
||||
}
|
||||
/*.rtl .in-sub-panel #customize-info,
|
||||
.rtl .in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
right: -440px;
|
||||
width: 440px;
|
||||
}*/
|
||||
.rtl #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
right: -440px;
|
||||
}
|
||||
.rtl .accordion-sub-container.control-panel-content {
|
||||
right: 440px;
|
||||
}
|
||||
|
||||
/* CUSTOM CSS ( since wp 4.7 ) */
|
||||
.customize-section-description-container + #customize-control-custom_css:last-child {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
li#customize-control-custom_css textarea {
|
||||
font-size: 13px;
|
||||
background: #394143;
|
||||
color: #95ff0c;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-left: 380px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 380px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-left: -380px;
|
||||
}
|
||||
/* .in-sub-panel #customize-info,
|
||||
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
left: -380px;
|
||||
width: 380px;
|
||||
}*/
|
||||
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
left: -380px;
|
||||
}
|
||||
.accordion-sub-container.control-panel-content {
|
||||
left: 380px;
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
.rtl.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-right: 380px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 380px;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-right: -380px;
|
||||
margin-left: 0;
|
||||
}
|
||||
/* .rtl .in-sub-panel #customize-info,
|
||||
.rtl .in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
right: -380px;
|
||||
width: 380px;
|
||||
}*/
|
||||
.rtl #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
right: -380px;
|
||||
}
|
||||
.rtl .accordion-sub-container.control-panel-content {
|
||||
right: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 979px) {
|
||||
.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-left: 300px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-left: -300px;
|
||||
}
|
||||
/* .in-sub-panel #customize-info,
|
||||
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
left: -300px;
|
||||
width: 300px;
|
||||
}*/
|
||||
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
left: -300px;
|
||||
}
|
||||
.accordion-sub-container.control-panel-content {
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
.rtl.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-right: 300px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay-sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
.rtl.wp-customizer .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
margin-right: -300px;
|
||||
margin-left: 0;
|
||||
}
|
||||
/* .rtl .in-sub-panel #customize-info,
|
||||
.rtl .in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
}*/
|
||||
.rtl #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
right: -300px;
|
||||
}
|
||||
.rtl .accordion-sub-container.control-panel-content {
|
||||
right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* at max-width 640px the wp-full-overlay-sidebar becomes 100% */
|
||||
@media screen and (max-width: 640px) {
|
||||
.wp-customizer .customize-controls-preview-toggle {
|
||||
height: 46px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
left: 87px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* .in-sub-panel #customize-info,
|
||||
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
}*/
|
||||
|
||||
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
left: -100%;
|
||||
}
|
||||
.accordion-sub-container.control-panel-content {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
.rtl.wp-customizer .wp-full-overlay.expanded {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* .rtl .in-sub-panel #customize-info,
|
||||
.rtl .in-sub-panel #customize-theme-controls > ul > .accordion-section {
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
left: auto;
|
||||
}*/
|
||||
.rtl .in-sub-panel #czr-donate-customizer,
|
||||
.rtl .in-sub-panel .czr-cta-wrap,
|
||||
.rtl #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
|
||||
right: -100%;
|
||||
left: auto;
|
||||
}
|
||||
.rtl .accordion-sub-container.control-panel-content {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* PANELS, SECTIONS and CONTROLS TITLES */
|
||||
.wp-customizer .control-section.control-panel .accordion-section-title .panel-title {
|
||||
font-size: 24px;
|
||||
font-weight: inherit;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.wp-core-ui h3 {
|
||||
color: #555;
|
||||
}
|
||||
.accordion-section-content {
|
||||
padding: 10px 10px 15px 20px;
|
||||
}
|
||||
.widget-action, .handlediv, .item-edit, .sidebar-name-arrow, .accordion-section-title:after {
|
||||
color: #00a0d2;
|
||||
}
|
||||
.control-section.control-panel > .accordion-section-title:after {
|
||||
color: #00a0d2;
|
||||
}
|
||||
.customize-control-title {
|
||||
line-height: 1.5em;
|
||||
/* font-size: 13px; */
|
||||
font-family: Roboto;
|
||||
font-weight: normal;
|
||||
}
|
||||
.customize-control span.customize-control-title:first-child {
|
||||
position: relative;
|
||||
padding: 10px 0px 5px;
|
||||
/*margin-left: 14px;*/
|
||||
}
|
||||
|
||||
/* since v4.3 */
|
||||
.wp-customizer #customize-theme-controls .accordion-section-content {
|
||||
background: #fff;
|
||||
}
|
||||
/*.wp-customizer .customize-panel-back {
|
||||
height: 60px;
|
||||
}*/
|
||||
.wp-customizer #customize-controls .customize-info .customize-help-toggle:hover, .wp-customizer #customize-controls .customize-info.open .customize-help-toggle, .wp-customizer #customize-controls .customize-info .customize-help-toggle:focus {
|
||||
color:#00a0d2;
|
||||
}
|
||||
.wp-customizer .customize-screen-options-toggle:focus:before, .wp-customizer #customize-controls .customize-info .customize-help-toggle:focus:before {
|
||||
-webkit-box-shadow: 0 0 0 1px #00a0d2;
|
||||
box-shadow: 0 0 0 1px #00a0d2;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.wp-customizer .menu-item-handle:hover .item-type, .wp-customizer .menu-item-handle:hover .item-edit, .wp-customizer #available-menu-items .menu-item-handle:hover .item-add, .wp-customizer .menu-item-handle:hover{
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.customize-screen-options-toggle:hover, .customize-screen-options-toggle:active, .customize-screen-options-toggle:focus, .active-menu-screen-options .customize-screen-options-toggle, #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
|
||||
color: #00a0d2!important;
|
||||
}
|
||||
|
||||
.customize-control input[type="text"] {
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
/*<@4.9compat>*/
|
||||
/* outer section introduced in v4.9 needs to keep its original width */
|
||||
#customize-outer-theme-controls li[id*="customize-control-"] {
|
||||
width: 100%;
|
||||
}
|
||||
#customize-outer-theme-controls input[type=checkbox], #customize-outer-theme-controls input[type=radio] {
|
||||
float: none;
|
||||
min-height: inherit;
|
||||
}
|
||||
/*</@4.9compat>*/
|
||||
|
||||
/* GENERAL STYLE */
|
||||
.control-section .accordion-section-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wp-customizer .control-section h3.accordion-section-title {
|
||||
padding: 10px 25px 11px 14px;
|
||||
|
||||
}
|
||||
.wp-customizer #customize-controls h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.control-section .accordion-section-title:after {
|
||||
top: 7px;
|
||||
}
|
||||
.control-section.control-panel .accordion-section-title:after {
|
||||
top: 11px;
|
||||
-webkit-transition: right .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-moz-transition: right .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-ms-transition: right .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-o-transition: right .3s ease-in-out, opacity .3s ease-in-out;
|
||||
transition: right .3s ease-in-out, opacity .3s ease-in-out;
|
||||
right: 10px;
|
||||
opacity:0.7;
|
||||
}
|
||||
.rtl .control-section.control-panel .accordion-section-title:after {
|
||||
-webkit-transition: left .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-moz-transition: left .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-ms-transition: left .3s ease-in-out, opacity .3s ease-in-out;
|
||||
-o-transition: left .3s ease-in-out, opacity .3s ease-in-out;
|
||||
transition: left .3s ease-in-out, opacity .3s ease-in-out;
|
||||
left: 10px;
|
||||
right: initial;
|
||||
}
|
||||
#customize-theme-controls .control-section.control-panel h3.accordion-section-title:hover:after , #customize-theme-controls .control-section.control-panel h3.accordion-section-title:focus:after {
|
||||
right: 8px;
|
||||
opacity:1;
|
||||
color: #666!important;
|
||||
}
|
||||
|
||||
.rtl #customize-theme-controls .control-section.control-panel h3.accordion-section-title:hover:after , .rtl #customize-theme-controls .control-section.control-panel h3.accordion-section-title:focus:after {
|
||||
left: 6px;
|
||||
right: initial;
|
||||
}
|
||||
/* Overrides WP built in style : hack for nested section arrow */
|
||||
#customize-theme-controls .control-section.control-panel>h3.accordion-section-title:focus:after, #customize-theme-controls .control-section.control-panel>h3.accordion-section-title:hover:after, .control-section.control-panel>.accordion-section-title:after {
|
||||
background: none!important;
|
||||
border: none!important;
|
||||
}
|
||||
|
||||
#customize-theme-controls h3.accordion-section-title {
|
||||
/*font-family: "Open Sans", sans-serif;*/
|
||||
-webkit-transition: background .1s ease-in-out;
|
||||
-moz-transition: background .1s ease-in-out;
|
||||
-ms-transition: background .1s ease-in-out;
|
||||
-o-transition: background .1s ease-in-out;
|
||||
transition: background .1s ease-in-out;
|
||||
}
|
||||
|
||||
/*#customize-theme-controls > .control-section:hover .accordion-section-title::after, #customize-theme-controls .control-section .accordion-section-title:hover::after, #customize-theme-controls .control-section.open .accordion-section-title::after, #customize-theme-controls .control-section .accordion-section-title:focus::after {
|
||||
color: #FFF;
|
||||
}*/
|
||||
|
||||
|
||||
.customize-control-checkbox label, .customize-control-nav_menu_auto_add label, .customize-control-radio label {
|
||||
line-height: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Placeholders Styling for inputs */
|
||||
input::-webkit-input-placeholder {
|
||||
color:#9A9A9A;
|
||||
font-style: italic;
|
||||
}
|
||||
input:-moz-placeholder { /* Firefox 18- */
|
||||
color: #9A9A9A;
|
||||
font-style: italic;
|
||||
}
|
||||
input::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #9A9A9A;
|
||||
font-style: italic;
|
||||
}
|
||||
input:-ms-input-placeholder {
|
||||
color: #9A9A9A;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
.customize-control select {
|
||||
cursor: pointer;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
/* Nov-dec 2019 => adapt for WP 5.3 */
|
||||
.czr-input .wp-picker-container .wp-color-result.button, .customize-control .wp-color-result.button {
|
||||
border-color: #ccc;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
.czr-input .wp-color-result-text, .customize-control .wp-color-result-text {
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Sept 2020 => fix alpha color picker style broken */
|
||||
.wp-picker-container .iris-alpha-slider {
|
||||
margin-left:5px!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.czr-customizr-title {
|
||||
/* color: #555; */
|
||||
text-transform: uppercase;
|
||||
/* text-shadow: 0 1px 0 #FFF; */
|
||||
margin: 1em 0em 5px 0em;
|
||||
font-size: 15px!important;
|
||||
border-bottom: 1px dotted #555;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
h3.czr-customizr-title::before {
|
||||
content: '\00b7';
|
||||
padding-right: 3px;
|
||||
}
|
||||
h3.czr-customizr-title::after {
|
||||
content: '\00b7';
|
||||
padding-left: 3px;
|
||||
}
|
||||
.czr-after-button {
|
||||
border-color: white;
|
||||
margin-top:15px;
|
||||
}
|
||||
.czr-emphasize {
|
||||
line-height: 1.2em;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
i.czr-notice {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
span.czr-notice {
|
||||
color: #313131;
|
||||
font-size:12px;
|
||||
font-style: italic;
|
||||
clear: both;
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.czr-html-before hr, .czr-html-after hr {
|
||||
border-top: 1px solid #c5c5c5;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
margin: 25px 0;
|
||||
}
|
||||
.czr-html-after {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.czr-customizer-separator-invisible {
|
||||
border:none;
|
||||
margin-top:15px;
|
||||
}
|
||||
.czr-skin-gen-label {
|
||||
float: left;
|
||||
}
|
||||
.czr-skin-gen-color-picker {
|
||||
float: right;
|
||||
}
|
||||
.czr-number-label {
|
||||
float: left;
|
||||
}
|
||||
.czr-number-input {
|
||||
float: right;
|
||||
}
|
||||
.czr-check-label {
|
||||
float: left;
|
||||
max-width: 85%;
|
||||
}
|
||||
/* RTL position fix */
|
||||
.rtl .czr-check-label {
|
||||
float: right;
|
||||
}
|
||||
input[type=checkbox], input[type=radio] {
|
||||
float: right;
|
||||
min-height: 18px;
|
||||
}
|
||||
.czr-font-select {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* CUSTOM CSS TEXT AREA */
|
||||
li#customize-control-tc_theme_options-tc_custom_css textarea {
|
||||
font-size: 14px;
|
||||
background: #394143;
|
||||
color: #E2E728;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.customize-control .czr-navigate-to-post-list {
|
||||
color: #00a0d2;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.czr-sub-control {
|
||||
padding-left: 13%;
|
||||
max-width: 87%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.czr-sub-control:before {
|
||||
content: '';
|
||||
height: 116%;
|
||||
background: #00a0d2;
|
||||
width: 2%;
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
/* Cropped Image style */
|
||||
/* Unified with the default cropped_image CSS */
|
||||
.customize-control-tc_cropped_image .upload-button {
|
||||
float: right;
|
||||
}
|
||||
.customize-control-tc_cropped_image .remove-button {
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.customize-control-tc_cropped_image .actions {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.customize-control-tc_cropped_image .current {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.customize-control-tc_cropped_image .upload-button,
|
||||
.customize-control-tc_cropped_image .remove-button {
|
||||
white-space: normal;
|
||||
width: 48%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.customize-control-tc_cropped_image .current .container {
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #eee;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.customize-control-tc_cropped_image img {
|
||||
width: 100%;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.customize-control-tc_cropped_image .inner {
|
||||
line-height: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
/* rtl */
|
||||
/* end tc cropped image */
|
||||
.rtl .customize-control-tc_cropped_image .upload-button {
|
||||
float: left;
|
||||
}
|
||||
.rtl .customize-control-tc_cropped_image .remove-button {
|
||||
float: right;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* LAYOUT SELECTION SPECIFICS */
|
||||
.czr-layout-img {
|
||||
height: 22px;
|
||||
margin-top: 2px;
|
||||
outline: 1px solid #FFF;
|
||||
}
|
||||
.czr-layout-title {
|
||||
padding: 0 0px 18px 12px;
|
||||
display: inline-block;
|
||||
line-height: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* MULTI INPUT */
|
||||
.customize-control-czr_multi_input {
|
||||
width: 96%;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2%;
|
||||
}
|
||||
.czr-multi-input-wrapper {
|
||||
width: 95%;
|
||||
padding: 0px 0% 0 5%;
|
||||
}
|
||||
.czr-multi-input-wrapper [data-input-type="color"] .czr-input {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SPECIFIC PANELS AND SECTIONS MARGIN */
|
||||
#customize-theme-controls #accordion-panel-czr-footer-panel {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#customize-theme-controls .control-panel-widgets,
|
||||
#customize-theme-controls #accordion-panel-nav_menus,
|
||||
#customize-theme-controls #accordion-panel-hu-advanced-panel {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#customize-theme-controls #accordion-panel-hu-header-panel,
|
||||
#customize-theme-controls .control-panel-widgets,
|
||||
#customize-theme-controls #accordion-panel-nav_menus,
|
||||
#customize-theme-controls #accordion-panel-hu-advanced-panel {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
#customize-theme-controls #accordion-panel-hu-general-panel,
|
||||
#customize-theme-controls #accordion-panel-tc-global-panel {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#customize-theme-controls #accordion-section-static_front_page,
|
||||
#customize-theme-controls #accordion-section-frontpage_sec {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* FPU */
|
||||
#customize-theme-controls #accordion-section-tc_fpu {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* WFC */
|
||||
#customize-theme-controls #accordion-section-tc_font_customizer_settings {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* NIMBLE */
|
||||
#customize-theme-controls #accordion-panel-__sektions__ {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* HEADER => HOME AND ADD MODULE BUTTON */
|
||||
.czr-has-home-btn #customize-header-actions .customize-controls-close {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.czr-has-home-btn .customize-controls-home-or-add, .customize-controls-close {
|
||||
top: -1px;
|
||||
}
|
||||
.czr-has-home-btn .customize-controls-home-or-add {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 45px;
|
||||
height: 41px;
|
||||
padding: 0 2px 0 0;
|
||||
background: #eee;
|
||||
border: none;
|
||||
border-top: 4px solid #eee;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #444;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .15s ease-in-out, border-color .15s ease-in-out, background .15s ease-in-out;
|
||||
transition: color .1s ease-in-out, border-color .15s ease-in-out, background .15s ease-in-out;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
/* for the Nimble button */
|
||||
.czr-has-home-btn .customize-controls-home-or-add > .material-icons {
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.czr-has-home-btn .customize-controls-home-or-add:before {
|
||||
font-size: 17px;
|
||||
line-height:45px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
left: 15px;
|
||||
}
|
||||
.czr-has-home-btn .customize-controls-home-or-add:hover {
|
||||
background: #fff;
|
||||
color: #0073aa;
|
||||
border-top-color: #0073aa;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* rtl: home button */
|
||||
.czr-has-home-btn .rtl.wp-customizer #customize-header-actions .customize-controls-close {
|
||||
right: 45px;
|
||||
left: auto;
|
||||
}
|
||||
.czr-has-home-btn .rtl.wp-customizer .customize-controls-home-or-add {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-right: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* HEADER MENU NOTICE */
|
||||
.control-panel-content .hu-menu-notice {
|
||||
margin-left: 3%;
|
||||
|
||||
}
|
||||
|
||||
/* PANEL SUBTITLE */
|
||||
span.czr-panel-subtitle {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* PRO BLOCK BEFORE SECTIONS AND PANELS TITLE */
|
||||
.pro-title-block {
|
||||
border: 1px solid #eea236;
|
||||
padding: 0px 6px;
|
||||
font-size: 0.7em;
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
bottom: 2px;
|
||||
position: relative;
|
||||
color: #f0ad4e;
|
||||
webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* GOPRO SECTION STYLE */
|
||||
/* for both hueman and customizr */
|
||||
|
||||
#customize-controls .control-section-czr-customize-section-pro .accordion-section-title:hover,
|
||||
#customize-controls .control-section-czr-customize-section-pro .accordion-section-title:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
#customize-theme-controls .control-section-czr-customize-section-pro .accordion-section-title:after {
|
||||
content: none;
|
||||
}
|
||||
#accordion-section-go_pro_sec .accordion-section-title{
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.control-section-czr-customize-section-pro .accordion-section-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.control-section-czr-customize-section-pro .accordion-section-title .button {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
height: 30px;
|
||||
padding: 1px 20px;
|
||||
display: inline-block;
|
||||
color: #f59000;
|
||||
background: #fff;
|
||||
border: 1px solid #eea236;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-top: -4px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
|
||||
}
|
||||
.control-section-czr-customize-section-pro .accordion-section-title .button:hover {
|
||||
color: #fff;
|
||||
background: #ed9c28;
|
||||
border-color: #d58512;
|
||||
}
|
||||
.rtl .control-section-czr-customize-section-pro .accordion-section-title .button {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* END GO PRO SECTION STYLE */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* <CSS LOADER> */
|
||||
@-webkit-keyframes czr-mr-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes czr-mr-loader {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1);
|
||||
transform: scale(0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
.czr-css-loader {
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* background-color: #333;*/
|
||||
position: absolute;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.csstransforms3d .czr-css-loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.czr-mr-loader > div:nth-child(0) {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
.czr-mr-loader > div:nth-child(1) {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
|
||||
.czr-mr-loader > div:nth-child(2) {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
.czr-mr-loader > div:nth-child(3) {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
.czr-mr-loader > div {
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
position: absolute;
|
||||
/*top: -4%;
|
||||
left: -4%;*/
|
||||
top: -0%;
|
||||
left: -0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #777;
|
||||
-webkit-animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
|
||||
animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
|
||||
}
|
||||
/* </CSS LOADER> */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* <OLD DONATE LINK> */
|
||||
.in-sub-panel #czr-donate-customizer,
|
||||
.in-sub-panel .czr-cta-wrap {
|
||||
left: -450px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
.rtl .in-sub-panel #czr-donate-customizer,
|
||||
.rtl .in-sub-panel .czr-cta-wrap {
|
||||
right: -450px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
|
||||
.in-sub-panel #czr-donate-customizer,
|
||||
.in-sub-panel .czr-cta-wrap {
|
||||
left: -380px;
|
||||
}
|
||||
|
||||
.rtl .in-sub-panel #czr-donate-customizer,
|
||||
.rtl .in-sub-panel .czr-cta-wrap {
|
||||
right: -380px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 979px) {
|
||||
|
||||
|
||||
.in-sub-panel #czr-donate-customizer,
|
||||
.in-sub-panel .czr-cta-wrap {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
.rtl .in-sub-panel #czr-donate-customizer,
|
||||
.rtl .in-sub-panel .czr-cta-wrap {
|
||||
right: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* at max-width 640px the wp-full-overlay-sidebar becomes 100% */
|
||||
@media screen and (max-width: 640px) {
|
||||
.in-sub-panel .czr-cta-wrap,
|
||||
.in-sub-panel #czr-donate-customizer {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.rtl .in-sub-panel #czr-donate-customizer,
|
||||
.rtl .in-sub-panel .czr-cta-wrap {
|
||||
right: -100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
.wp-customizer .expanded #customize-footer-actions {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1401px) {
|
||||
.wp-customizer .expanded #customize-footer-actions {
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
/* </OLD DONATE LINK> */
|
||||
+900
@@ -0,0 +1,900 @@
|
||||
/*
|
||||
* Selecter v3.1.9 - 2014-09-02
|
||||
* A jQuery plugin for replacing default select elements. Part of the Formstone Library.
|
||||
* http://formstone.it/selecter/
|
||||
*
|
||||
* Copyright 2014 Ben Plum; MIT Licensed
|
||||
*/
|
||||
.selecter-element { *left: -999999px; position: absolute; opacity: 0; }
|
||||
.selecter { display: block;float: right;margin: 2px 0;position: relative;width: 100%;z-index: 100; }
|
||||
.selecter .selecter-selected { background: #F9F9F9 url(img/jquery.fs.selecter-arrow.png) no-repeat right center; border: 1px solid #ccc; border-radius: 3px; color: #333; cursor: pointer; display: block; font-size: 13px; margin: 0; overflow: hidden; padding: 4px 4%; position: relative; text-overflow: clip; z-index: 49; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);height: auto;line-height: 18px;width: 90%; }
|
||||
|
||||
.selecter .selecter-options { border: 1px solid #ccc; border-width: 0 1px 1px; background-color: #fefefe; border-radius: 0 0 3px 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); display: none; left: 0; margin: 0; max-height: 260px; overflow: auto; overflow-x: hidden; padding: 0; position: relative; top: 100%; width: 99%; *width: auto; z-index: 50; }
|
||||
.selecter .selecter-group { background: #F9F9F9; border-bottom: 1px solid #e3e3e3; color: #999; display: block; font-size: 11px; padding: 5px 6px 4px; text-transform: uppercase; }
|
||||
.selecter .selecter-item { background: #fff; border-bottom: 1px solid #e3e3e3; color: #333; cursor: pointer; display: block; font-size: 13px; margin: 0; overflow: hidden; padding: 8px 10px; text-overflow: ellipsis; width: 86%;height: auto;line-height: 14px;padding: 8px 24px 8px 10px;}
|
||||
.selecter .selecter-item.selected { background: #F9F9F9; }
|
||||
.selecter .selecter-item.disabled { color: #999; cursor: default; }
|
||||
.selecter .selecter-item:first-child { border-radius: 0; }
|
||||
.selecter .selecter-item:last-child { border-radius: 0 0 2px 2px; border-bottom: 0; }
|
||||
|
||||
/* CUSTOM FOR CUSTOMIZR */
|
||||
.rtl .selecter .selecter-selected {
|
||||
background: #F9F9F9 url(img/jquery.fs.selecter-arrow.png) no-repeat 4% center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
.selecter .selecter-item:hover,
|
||||
.selecter .selecter-item.selected:hover { background-color: #f3f3f3; }
|
||||
.selecter .selecter-item.disabled:hover { background-color: #fff; }
|
||||
|
||||
.selecter:hover .selecter-selected { background-color: #fff; }
|
||||
|
||||
.selecter.disabled .selecter-item:hover { background: #fff; }
|
||||
}
|
||||
|
||||
/* Open */
|
||||
.selecter.open { z-index: 101; }
|
||||
.selecter.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 51; }
|
||||
|
||||
.selecter.open .selecter-selected,
|
||||
.selecter.focus .selecter-selected { background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* 'Cover' Positioning */
|
||||
.selecter.cover .selecter-options { border-radius: 3px; border-width: 1px; top: 0; }
|
||||
.selecter.cover .selecter-options .selecter-item.first { border-radius: 3px 3px 0 0; }
|
||||
.selecter.cover.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 49; }
|
||||
|
||||
/* 'Bottom' Positioning */
|
||||
.selecter.bottom .selecter-options { border-width: 1px 1px 0; bottom: 100%; top: auto; }
|
||||
.selecter.bottom .selecter-item:last-child { border: none; }
|
||||
.selecter.bottom.open .selecter-selected { border-radius: 0 0 3px 3px; }
|
||||
.selecter.bottom.open .selecter-options { border-radius: 3px 3px 0 0; }
|
||||
|
||||
/* 'Bottom' + 'Cover' Positioning */
|
||||
.selecter.bottom.cover .selecter-options { bottom: 0; top: auto; }
|
||||
.selecter.bottom.cover.open .selecter-selected { border-radius: 3px; }
|
||||
.selecter.bottom.cover.open .selecter-options { border-radius: 3px; }
|
||||
|
||||
/* Multiple Select */
|
||||
.selecter.multiple .selecter-options { border-radius: 3px; border-width: 1px; box-shadow: none; display: block; position: static; width: 100%; }
|
||||
|
||||
/* 'Disabled' State */
|
||||
.selecter.disabled .selecter-selected { background: #fff; border-color: #eee; color: #ccc; cursor: default; }
|
||||
.selecter.disabled .selecter-options { background: #fff; border-color: #eee; }
|
||||
.selecter.disabled .selecter-group,
|
||||
.selecter.disabled .selecter-item { border-color: #eee; color: #ccc; cursor: default; }
|
||||
.selecter.disabled .selecter-item.selected { background: #fafafa; }
|
||||
|
||||
/* Scroller Support */
|
||||
.selecter .selecter-options.scroller { overflow: hidden; }
|
||||
.selecter .selecter-options.scroller .scroller-content { max-height: 260px; padding: 0; }
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 740px) {
|
||||
.selecter { max-width: 100%; }
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.selecter { max-width: 100%; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Stepper v3.0.7 - 2014-05-07
|
||||
* A jQuery plugin for cross browser number inputs. Part of the Formstone Library.
|
||||
* http://formstone.it/stepper/
|
||||
*
|
||||
* Copyright 2014 Ben Plum; MIT Licensed
|
||||
*/
|
||||
.stepper { border-radius: 3px; margin: 0 0 10px 0; overflow: hidden; position: relative; width: 35%;float: left; clear: both;}
|
||||
.stepper .stepper-input { background: #F9F9F9; border: 1px solid #ccc; border-radius: 3px; color: #333; font-size: 13px; line-height: 1.2; margin: 0; overflow: hidden; padding: 5px 10px 5px!important; width: 100%!important; z-index: 49; -moz-appearance: textfield;max-width: none!important;
|
||||
}
|
||||
|
||||
.stepper .stepper-input::-webkit-inner-spin-button,
|
||||
.stepper .stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
|
||||
.stepper .stepper-input:focus { background-color: #fff; }
|
||||
.stepper .stepper-arrow { background: #eee url(img/jquery.fs.stepper-arrows.png) no-repeat; border: 1px solid #ccc; cursor: pointer; display: block; height: 46%; position: absolute; right: 0; text-indent: -99999px; width: 20px; z-index: 50; }
|
||||
.stepper .stepper-arrow.up { background-position: center top; border-bottom: none; top: 0; }
|
||||
.stepper .stepper-arrow.down { background-position: center bottom; bottom: 0; }
|
||||
|
||||
/* CUSTOM FOR CUSTOMIZR */
|
||||
.rtl .stepper .stepper-input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 740px) {
|
||||
.stepper:hover .stepper-input { background-color: #fff; }
|
||||
|
||||
.stepper .stepper-step:hover { background-color: #F9F9F9; }
|
||||
|
||||
.stepper.disabled .stepper-arrow { background: #fff; border-color: #eee; cursor: default; }
|
||||
}
|
||||
|
||||
.stepper.disabled .stepper-input { background: #fff; border-color: #eee; color: #ccc; }
|
||||
.stepper.disabled .stepper-arrow { background: #fff; border-color: #eee; cursor: default; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* iCheck plugin Flat skin, green
|
||||
----------------------------------- */
|
||||
.icheckbox_flat-green,
|
||||
.iradio_flat-green {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(img/green.png) no-repeat;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
top: 4px;
|
||||
float: right;
|
||||
}
|
||||
/* RTL fix of check box position */
|
||||
.rtl [class*=icheckbox_flat-] {
|
||||
float: left;
|
||||
}
|
||||
.icheckbox_flat-green {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icheckbox_flat-green.checked {
|
||||
background-position: -22px 0;
|
||||
}
|
||||
.icheckbox_flat-green.disabled {
|
||||
background-position: -44px 0;
|
||||
cursor: default;
|
||||
}
|
||||
.icheckbox_flat-green.checked.disabled {
|
||||
background-position: -66px 0;
|
||||
}
|
||||
|
||||
.iradio_flat-green {
|
||||
background-position: -88px 0;
|
||||
}
|
||||
.iradio_flat-green.checked {
|
||||
background-position: -110px 0;
|
||||
}
|
||||
.iradio_flat-green.disabled {
|
||||
background-position: -132px 0;
|
||||
cursor: default;
|
||||
}
|
||||
.iradio_flat-green.checked.disabled {
|
||||
background-position: -154px 0;
|
||||
}
|
||||
|
||||
/* Retina support */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-moz-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-o-min-device-pixel-ratio: 3/2),
|
||||
only screen and (min-device-pixel-ratio: 1.5) {
|
||||
.icheckbox_flat-green,
|
||||
.iradio_flat-green {
|
||||
background-image: url(img/green@2x.png);
|
||||
-webkit-background-size: 176px 22px;
|
||||
background-size: 176px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iCheck plugin Flat skin, grey
|
||||
----------------------------------- */
|
||||
.icheckbox_flat-grey,
|
||||
.iradio_flat-grey {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(img/grey.png) no-repeat;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
top: 4px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.icheckbox_flat-grey {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.icheckbox_flat-grey.checked {
|
||||
background-position: -22px 0;
|
||||
}
|
||||
.icheckbox_flat-grey.disabled {
|
||||
background-position: -44px 0;
|
||||
cursor: default;
|
||||
}
|
||||
.icheckbox_flat-grey.checked.disabled {
|
||||
background-position: -66px 0;
|
||||
}
|
||||
|
||||
.iradio_flat-grey {
|
||||
background-position: -88px 0;
|
||||
}
|
||||
.iradio_flat-grey.checked {
|
||||
background-position: -110px 0;
|
||||
}
|
||||
.iradio_flat-grey.disabled {
|
||||
background-position: -132px 0;
|
||||
cursor: default;
|
||||
}
|
||||
.iradio_flat-grey.checked.disabled {
|
||||
background-position: -154px 0;
|
||||
}
|
||||
|
||||
/* Retina support */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-moz-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-o-min-device-pixel-ratio: 3/2),
|
||||
only screen and (min-device-pixel-ratio: 1.5) {
|
||||
.icheckbox_flat-grey,
|
||||
.iradio_flat-grey {
|
||||
background-image: url(img/grey@2x.png);
|
||||
-webkit-background-size: 176px 22px;
|
||||
background-size: 176px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.czr-sub-set .icheckbox_flat-green, .iradio_flat-green {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* SELECT 2 SPECIFICS */
|
||||
body .czrSelect2-container {
|
||||
z-index: 1000000;
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.customize-control-czr_layouts .czrSelect2-selection--single {
|
||||
height: 33px;
|
||||
}
|
||||
.customize-control-czr_layouts .czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__arrow {
|
||||
height: 30px;
|
||||
}
|
||||
.czrSelect2-selection__rendered:focus, .customize-control-czr_layouts .czrSelect2-selection--single:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Old SELECT2
|
||||
* https://github.com/presscustomizr/themes-customizer-fmk/issues/30
|
||||
*/
|
||||
body .czrSelect2-drop {
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
|
||||
/* SPECIFIC INPUT STYLE */
|
||||
span.czrSelect2-results, body .czrSelect2-container {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* for multipe picker */
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple {
|
||||
-webkit-border-radius: 0px;
|
||||
-moz-border-radius: 0px;
|
||||
border-radius: 0;
|
||||
width: 99%;
|
||||
min-height: 36px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
|
||||
box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
|
||||
}
|
||||
.czrSelect2-container--default.czrSelect2-container--focus .czrSelect2-selection--multiple {
|
||||
border-color: #00a0d2!important;
|
||||
-webkit-box-shadow: 0 0 2px rgba(26, 188, 156, 0.8)!important;
|
||||
box-shadow: 0 0 2px rgba(26, 188, 156, 0.8)!important;
|
||||
}
|
||||
.czrSelect2-results__options li {
|
||||
margin-bottom: 0
|
||||
}
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__choice {
|
||||
padding: 2px;
|
||||
font-size: 13px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.czrSelect2-container--default .czrSelect2-results__option--highlighted[aria-selected] {
|
||||
background-color: #00a0d2;
|
||||
}
|
||||
.czrSelect2-container--default .czrSelect2-selection--multiple .czrSelect2-selection__choice__remove {
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
/* Socials Specifics */
|
||||
.customize-control-czr_socials .czrSelect2-container--default .czrSelect2-selection--single .czrSelect2-selection__rendered {
|
||||
padding: 5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* WP TEXT EDITOR */
|
||||
/* This CSS Code is inpired from the plugin customize-posts, GPLv2 or later licensed
|
||||
Mostly class names have been modified.
|
||||
Credits : xwp, westonruter, valendesigns, sayedwp, utkarshpatel.
|
||||
Date of original code modification : July 2018
|
||||
*/
|
||||
#czr-customize-content_editor-pane {
|
||||
border-top: solid 1px #ddd;
|
||||
position: absolute;
|
||||
height: 300px;
|
||||
bottom: -301px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
background: #f1f1f1;
|
||||
display: block;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
visibility: hidden;
|
||||
}
|
||||
.czr-close-editor {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 20px;
|
||||
top: -33px;
|
||||
color: #444;
|
||||
background: #eee;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
height: 20px;
|
||||
margin: 5px 0 0 5px;
|
||||
padding: 3px 8px 4px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-bottom: none;
|
||||
}
|
||||
body.czr-customize-content_editor-pane-resize #customize-preview,
|
||||
body.czr-customize-content_editor-pane-resize #czr-customize-content_editor-pane {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
body.mce-fullscreen.czr-customize-content_editor-pane-open #czr-customize-content_editor-pane {
|
||||
top: 0;
|
||||
}
|
||||
body.czr-customize-content_editor-pane-open #czr-customize-content_editor-pane {
|
||||
bottom: 40px;
|
||||
visibility: inherit;
|
||||
}
|
||||
#czr-customize-content_editor-pane .wp-editor-tools {
|
||||
padding-top: 5px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#czr-customize-content_editor-pane .wp-media-buttons {
|
||||
padding-left: 5px;
|
||||
}
|
||||
#customize-preview {
|
||||
height: auto;
|
||||
}
|
||||
body.czr-customize-content_editor-pane-open #customize-preview {
|
||||
bottom: 300px;
|
||||
}
|
||||
body.mce-fullscreen #customize-preview {
|
||||
bottom: 0;
|
||||
}
|
||||
body.mce-fullscreen.czr-customize-content_editor-pane-open div.mce-fullscreen {
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
#wp-czr-customize-content_editor-container {
|
||||
border-left: 0;
|
||||
}
|
||||
/* vertical resize bar */
|
||||
#czr-customize-content_editor-dragbar {
|
||||
top: 0;
|
||||
cursor: row-resize;
|
||||
display: block;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 21;
|
||||
/* the following makes sure that the icon .czr-resize-handle is centered */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
body.czr-customize-content_editor-pane-resize #customize-preview:before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
/* @todo Mobile support for rich text editor */
|
||||
.wp-customizer .ui-autocomplete.wplink-autocomplete {
|
||||
z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
|
||||
}
|
||||
.wp-customizer #wp-link-wrap {
|
||||
z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
|
||||
}
|
||||
.wp-customizer #wp_editbtns,
|
||||
.wp-customizer #wp_gallerybtns {
|
||||
z-index: 500020; /* originally 100020, but z-index of .wp-full-overlay is 500000 */
|
||||
}
|
||||
.wp-customizer #TB_overlay,
|
||||
.wp-customizer #TB_window {
|
||||
z-index: 500050;
|
||||
}
|
||||
.wp-customizer .mce-panel,
|
||||
.wp-customizer .mce-tooltip {
|
||||
z-index: 500100 !important; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
|
||||
}
|
||||
.czr-customize-content_editor-pane-open .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
||||
z-index: 30;
|
||||
}
|
||||
.czr-customize-content_editor-pane-open .wp-full-overlay.collapsed .collapse-sidebar {
|
||||
bottom: 308px;
|
||||
}
|
||||
.czr-customize-content_editor-pane-open .wp-full-overlay.expanded .collapse-sidebar {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.czr-customize-content_editor-pane-resize .wp-full-overlay.collapsed .collapse-sidebar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
.czr-customize-content_editor-pane-open.mce-fullscreen .wp-full-overlay.collapsed .collapse-sidebar {
|
||||
bottom: 8px !important;
|
||||
}
|
||||
.czr-resize-handle {
|
||||
color: #33b3db;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENT PICKER */
|
||||
.czr-sub-set[data-input-type="content_picker"] .customize-control-title {
|
||||
width: 100%;
|
||||
}
|
||||
.czr-sub-set[data-input-type="content_picker"] .czr-input {
|
||||
width: 100%;
|
||||
}
|
||||
.content-picker-item {
|
||||
height: 2em;
|
||||
}
|
||||
.content-picker-item .czr-picker-item-type {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
.content-item-bar {
|
||||
line-height: 1.2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.content-item-bar .czr-picker-item-title {
|
||||
display: block;
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.czr-sub-set[data-input-type="content_picker"] span.czr-picker-item-title {
|
||||
display: block;
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 2em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.czr-sub-set[data-input-type="content_picker"] span.czr-picker-item-type {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
padding-right: 10px;
|
||||
float: right;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* RANGE SLIDER rangeslider.js - v2.3.0 - https://github.com/andreruffert/rangeslider.js */
|
||||
.czr-sub-set[data-input-type="range_slider"] {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.rangeslider,
|
||||
.rangeslider__fill {
|
||||
display: block;
|
||||
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.rangeslider {
|
||||
background: #e6e6e6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rangeslider--horizontal {
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rangeslider--vertical {
|
||||
width: 12px;
|
||||
min-height: 150px;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.rangeslider--disabled {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.rangeslider__fill {
|
||||
background: #3b8dbd;
|
||||
position: absolute;
|
||||
}
|
||||
.rangeslider--horizontal .rangeslider__fill {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.rangeslider--vertical .rangeslider__fill {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rangeslider__handle {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
|
||||
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rangeslider__handle:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
|
||||
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
|
||||
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
|
||||
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
.rangeslider--horizontal .rangeslider__handle {
|
||||
top: -13px;
|
||||
touch-action: pan-y;
|
||||
-ms-touch-action: pan-y;
|
||||
}
|
||||
.rangeslider--vertical .rangeslider__handle {
|
||||
left: -13px;
|
||||
touch-action: pan-x;
|
||||
-ms-touch-action: pan-x;
|
||||
}
|
||||
|
||||
input[type="range"]:focus + .rangeslider .rangeslider__handle {
|
||||
-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
|
||||
-webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
|
||||
box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
|
||||
}
|
||||
|
||||
|
||||
/* IMAGE UPLOADER */
|
||||
.attachment-media-view button {
|
||||
color: #000;
|
||||
padding: 5px 7px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* NIMBLECHECK */
|
||||
/* ALIGNEMENT IN MODULES */
|
||||
.czr-sub-set[data-input-type="nimblecheck"] {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
.czr-sub-set[data-input-type="nimblecheck"] .czr-notice, .czr-sub-set[data-input-type="nimblecheck"] .czr-html-before {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
/* ALIGNEMENT IN REGULAR CONTROLS */
|
||||
.czr-control-nimblecheck {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
/* flex-direction: column; */
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* COMMON RULES TO MODULES AND CONTROLS */
|
||||
.nimblecheck-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-input:focus + label {
|
||||
box-shadow: 0 0 0 1px #33b3db;
|
||||
}
|
||||
/* Hide the checkbox input (only needed for `:checked` property) */
|
||||
.nimblecheck-wrap .nimblecheck-input {
|
||||
/* display: none; <= May 2021 : display none breaks accessibility*/
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
/* Switch */
|
||||
.nimblecheck-wrap .nimblecheck-label {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
text-indent: -150%;
|
||||
clip: rect(0 0 0 0);
|
||||
color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* Switch Rail & Knob */
|
||||
/* Switch Rail */
|
||||
/* Switch Knob */
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-label:before,
|
||||
.nimblecheck-wrap .nimblecheck-label:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-label:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #999;
|
||||
border-radius: 9999em;
|
||||
-webkit-transition: background-color 0.35s ease;
|
||||
-o-transition: background-color 0.35s ease;
|
||||
transition: background-color 0.35s ease;
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-label:after {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
|
||||
-webkit-transition: left 0.15s ease;
|
||||
-o-transition: left 0.15s ease;
|
||||
transition: left 0.15s ease;
|
||||
}
|
||||
/* When input is checked */
|
||||
.nimblecheck-wrap .nimblecheck-input:checked + .nimblecheck-label {
|
||||
/* Switch Rail */
|
||||
/* Switch Knob */
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-input:checked + .nimblecheck-label:before {
|
||||
background-color: #33b3db;
|
||||
}
|
||||
.nimblecheck-wrap .nimblecheck-input:checked + .nimblecheck-label:after {
|
||||
left: 16px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* DEPRECATED since april 2nd 2019 */
|
||||
/* GUTENCHECK */
|
||||
/* This custom checkbox input is inspired from the one used in the Gutenberg plugin ( https://github.com/WordPress/gutenberg ), released under GNU General Public License
|
||||
credits : Gutenberg team @wordpress */
|
||||
/*.czr-toggle-check {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
.czr-toggle-check__input[type=checkbox] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.czr-toggle-check__input[type="checkbox"]:checked:before {
|
||||
content: "\f147";
|
||||
margin: -3px 0 0 -4px;
|
||||
color: #1e8cbe;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
font: normal 21px/1 dashicons;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.czr-toggle-check .czr-toggle-check__track {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border: 2px solid #6c7781;
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
transition: background .2s ease;
|
||||
}
|
||||
.czr-toggle-check.is-checked .czr-toggle-check__track {
|
||||
background-color: #33b3db;
|
||||
border: 2px solid #33b3db;
|
||||
border: 9px solid transparent;
|
||||
}
|
||||
.czr-toggle-check .czr-toggle-check__thumb {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
transition: transform .1s ease;
|
||||
background-color: #6c7781;
|
||||
border: 5px solid #6c7781;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.czr-toggle-check.is-checked .czr-toggle-check__thumb {
|
||||
background-color: #fff;
|
||||
border-width: 0;
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.czr-toggle-check .czr-toggle-check__off {
|
||||
color: #6c7781;
|
||||
fill: currentColor;
|
||||
right: 6px;
|
||||
}
|
||||
.czr-toggle-check .czr-toggle-check__on {
|
||||
left: 8px;
|
||||
-webkit-filter: invert(100%) contrast(500%);
|
||||
filter: invert(100%) contrast(500%);
|
||||
outline: 1px solid transparent;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.czr-toggle-check .czr-toggle-check__off, .czr-toggle-check .czr-toggle-check__on {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}*/
|
||||
@@ -0,0 +1,863 @@
|
||||
/*******************************************************************
|
||||
* DYNAMIC CONTROLS : sidebars, socials, ...
|
||||
********************************************************************/
|
||||
li.customize-control[data-module] li {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
li.customize-control[data-module] [class*="czr-"] {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
li.customize-control[data-module] [class*="czr-"] .hidden {
|
||||
display: none;
|
||||
}
|
||||
li.customize-control[data-module] .czr-notice {
|
||||
font-size: 12px!important;
|
||||
}
|
||||
.czr-open-pre-add-new {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 2% 2% 0%;
|
||||
width: 98%;
|
||||
padding: 2%;
|
||||
background: #fff;
|
||||
/* color: #fff;*/
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: opacity 1s ease-in-out;
|
||||
-moz-transition: opacity 1s ease-in-out;
|
||||
-ms-transition: opacity 1s ease-in-out;
|
||||
-o-transition: opacity 1s ease-in-out;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
.czr-open-pre-add-new.active {
|
||||
background: #646464;
|
||||
color: black;
|
||||
opacity: 0.8;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.czr-single-item {
|
||||
padding: 0%;
|
||||
/*border: 1px solid #ccc;*/
|
||||
margin: 1% 0 0 2%;
|
||||
float: left;
|
||||
width: 98%;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: opacity 1s ease-in-out;
|
||||
-moz-transition: opacity 1s ease-in-out;
|
||||
-ms-transition: opacity 1s ease-in-out;
|
||||
-o-transition: opacity 1s ease-in-out;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
/* Display a thin outline around opened item, for multi-items modules */
|
||||
#customize-theme-controls .czr-single-item.open {
|
||||
/*border: 1px solid #dedede;*/
|
||||
outline: 1px solid #22a0d2;
|
||||
}
|
||||
/* Keep the normal border for single module, mono items controls */
|
||||
#customize-theme-controls .mono-item-mod .czr-single-item {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.czr-single-item .czr-item-header, .czr-single-item .czr-item-content {
|
||||
padding: 1%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.czr-items-wrapper .czr-single-item .czr-builtin-model {
|
||||
background: #E1DFDF;
|
||||
color: #555
|
||||
}
|
||||
|
||||
.czr-items-wrapper .inactive {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.czr-item-sort-handle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.czr-single-item .czr-item-header {
|
||||
position: relative;
|
||||
background: #ededed;
|
||||
color: white;
|
||||
float: left;
|
||||
width: 98%;
|
||||
-webkit-transition: background .1s ease-in-out;
|
||||
-moz-transition: background .1s ease-in-out;
|
||||
-ms-transition: background .1s ease-in-out;
|
||||
-o-transition: background .1s ease-in-out;
|
||||
transition: background .1s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
/* sidebar specifics */
|
||||
.czr_widget_areas_module .czr-single-item .czr-custom-model {
|
||||
background: #3b8dbd;
|
||||
}
|
||||
. .czr-single-item .czr-custom-model:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
.czr-single-item .czr-item-header:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
/* sidebar specifics */
|
||||
/*.czr-builtin-model .czr-single-item .czr-item-header {
|
||||
background:#3b8dbd;
|
||||
}*/
|
||||
.czr-items-wrapper .czr-single-item .czr-builtin-model:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.czr-move-icon {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
.czr-item-title {
|
||||
float: left;
|
||||
font-size: 17px;
|
||||
color: #000;
|
||||
padding: 4px;
|
||||
width: 67%;
|
||||
}
|
||||
|
||||
.czr-inactive-alert {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
/* sidebar specifics */
|
||||
.czr_widget_areas_module .czr-item-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.czr-builtin-model .czr-item-title {
|
||||
color: #23282d;
|
||||
}
|
||||
.czr-item-title h4 {
|
||||
margin: 0;
|
||||
}
|
||||
.czr-item-title .fab::before,
|
||||
.czr-item-title .fas::before,
|
||||
.czr-item-title .far::before {
|
||||
padding-right: 2px;
|
||||
}
|
||||
.czr-item-btns {
|
||||
float: right;
|
||||
}
|
||||
.czr-item-btns a {
|
||||
font-size: 17px;
|
||||
padding: 7px 5px;
|
||||
color: #9e9e9e;
|
||||
-webkit-transition: color .25s ease-in-out;
|
||||
-moz-transition: color .25s ease-in-out;
|
||||
-ms-transition: color .25s ease-in-out;
|
||||
-o-transition: color .25s ease-in-out;
|
||||
transition: color .25s ease-in-ou
|
||||
}
|
||||
.czr-item-btns a:active, .czr-item-btns a:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.czr-item-btns a:hover, .czr-item-btns a.active {
|
||||
color: #23282d;
|
||||
}
|
||||
/* sidebar specifics */
|
||||
.czr_widget_areas_module .czr-item-btns a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.czr-builtin-model .czr-item-btns a {
|
||||
color: #555
|
||||
}
|
||||
|
||||
.czr-builtin-model .czr-item-btns .czr-edit-view:hover, .czr-builtin-model .czr-item-btns .czr-edit-view.active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.czr-item-btns .czr-edit-view:hover, .czr-item-btns .czr-edit-view.active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
/* sidebar specifics */
|
||||
.czr_widget_areas_module .czr-edit-view:hover, .czr_widget_areas_module .czr-item-btns .czr-edit-view.active {
|
||||
color: #000000;
|
||||
}
|
||||
.czr_widget_areas_module .czr-builtin-model .czr-edit-view:hover, .czr_widget_areas_module .czr-builtin-model .czr-edit-view.active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.czr-item-btns .czr-display-alert:hover, .czr-item-btns .czr-display-alert.active {
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
|
||||
.czr-single-item .czr-item-content {
|
||||
float: left;
|
||||
display: none;
|
||||
/*background: rgba(238, 238, 238, 0.5);*/
|
||||
clear: both;
|
||||
width: 96%;
|
||||
padding: 2%;
|
||||
}
|
||||
.czr-single-item .czr-item-content input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.czr-sub-set {
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 1% 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.czr-sub-set .czr-input {
|
||||
float: right;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.width-100 .czr-input,
|
||||
.czr-sub-set .customize-control-title.width-100,
|
||||
.width-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.czr-sub-set .customize-control-title {
|
||||
float: left;
|
||||
width: 40%;
|
||||
padding: 1px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.customize-control-title.width-80 {
|
||||
width: 80%!important;
|
||||
}
|
||||
.czr-input.width-20 {
|
||||
width: 20%!important;
|
||||
}
|
||||
|
||||
/* rtl */
|
||||
.rtl.wp-customizer .czr-sub-set .customize-control-title {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* DISABLED STATE */
|
||||
.disabled .customize-control-title, .disabled .czr-input {
|
||||
opacity: 0.6;
|
||||
filter: blur(1px);
|
||||
-webkit-filter: blur(1px);
|
||||
}
|
||||
|
||||
.czr-item-title .far,
|
||||
.czr-item-title .fab,
|
||||
.czr-item-title .fas {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Remove alert block */
|
||||
.czr-remove-alert-wrapper {
|
||||
display: none;
|
||||
clear: both;
|
||||
float: left;
|
||||
padding: 2%;
|
||||
width: 95%;
|
||||
margin: 10px 0;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
background-color: #EEE;
|
||||
color: #000;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.czr-remove-alert-wrapper p {
|
||||
padding: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/* pre add dialog */
|
||||
.czr-pre-add-wrapper {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.czr-adding-new .czr-items-wrapper {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.czr-pre-add-view-content {
|
||||
display: none;
|
||||
padding: 3%;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
border-top: none;
|
||||
margin: 0 0 0 2%;
|
||||
float: left;
|
||||
width: 92%;
|
||||
-webkit-border-radius: 0px 0px 3px 3px;
|
||||
-moz-border-radius: 0px 0px 3px 3px;
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
-ms-transition: opacity .2s linear;
|
||||
-o-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
}
|
||||
|
||||
.czr-model-added .czr-pre-add-view-content {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.czr-pre-add-wrapper .czr-add-new {
|
||||
background: #3b8dbd;
|
||||
color: #fff;
|
||||
-webkit-transition: background .5s linear;
|
||||
-moz-transition: background .5s linear;
|
||||
-ms-transition: background .5s linear;
|
||||
-o-transition: background .5s linear;
|
||||
transition: background .5s linear;
|
||||
float: right;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.czr-add-success {
|
||||
width: 100%;
|
||||
margin: 0 0 0 2%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .1s linear;
|
||||
-moz-transition: opacity .1s linear;
|
||||
-ms-transition: opacity .1s linear;
|
||||
-o-transition: opacity .1s linear;
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
.czr-model-added .czr-add-success {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.czr-add-success p {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
line-height: 35px;
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
color: #82b965;
|
||||
padding: 0 3%;
|
||||
}
|
||||
|
||||
|
||||
/* WIDGETS ZONE SPECIFICS */
|
||||
.control-section-widget_zones_management {
|
||||
margin: 10px 0;
|
||||
z-index: 1;
|
||||
}
|
||||
/*#customize-theme-controls .control-section-widget_zones_management .accordion-section-content {
|
||||
display: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
}*/
|
||||
|
||||
.czr-zone-infos {
|
||||
width: 96%;
|
||||
padding: 0 2%;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*#customize-theme-controls .control-section-widget_zones_management .accordion-section-title:after {
|
||||
content: "\f078";
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#customize-theme-controls .control-section-widget_zones_management.open .accordion-section-title:after {
|
||||
content: "\f077";
|
||||
}*/
|
||||
.czr-unavailable-location {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.czr-location-alert {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 1% 0;
|
||||
margin: 1% 0;
|
||||
text-align: center;
|
||||
border: 1px solid orange;
|
||||
background: #FEE5B6;
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* MODULE OPTIONS ICON AND PANEL*/
|
||||
.czr-toggle-modopt {
|
||||
color: #495050;
|
||||
text-shadow: 1px 1px 0px white;
|
||||
-webkit-transition: color 0.4s;
|
||||
transition: color 0.4s;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-left: 3px;
|
||||
font-size: 25px;
|
||||
line-height: 24px;
|
||||
}
|
||||
/* rtl */
|
||||
.rtl.wp-customizer .czr-toggle-modopt {
|
||||
left: 0;
|
||||
right: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.czr-modopt-visible .czr-toggle-modopt, .czr-toggle-modopt:hover {
|
||||
color: #3b8dbd;
|
||||
}
|
||||
|
||||
body.czr-editing-modopt #customize-preview {
|
||||
opacity: 0.7;
|
||||
}
|
||||
body #customize-controls {
|
||||
-webkit-transition: opacity .4s ease-in-out;
|
||||
-moz-transition: opacity .4s ease-in-out;
|
||||
-ms-transition: opacity .4s ease-in-out;
|
||||
-o-transition: opacity .4s ease-in-out;
|
||||
transition: opacity .4s ease-in-out;
|
||||
}
|
||||
body.czr-editing-modopt #customize-controls {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.czr-mod-opt-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -301px;
|
||||
/*visibility: hidden;*/
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
z-index: 999999;/* has to be greater than the Nimble top bar so we can click on the close "x" */
|
||||
width: 60%;
|
||||
min-width: 300px;
|
||||
padding: 1% 2%;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
-webkit-transition: all .18s ease-in-out;
|
||||
-moz-transition: all .18s ease-in-out;
|
||||
-ms-transition: all .18s ease-in-out;
|
||||
-o-transition: all .18s ease-in-out;
|
||||
transition: all .18s ease-in-out;
|
||||
border-right: 1px solid #4c4c4c;
|
||||
}
|
||||
|
||||
body.czr-editing-modopt .czr-mod-opt-wrapper {
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.czr-close-modopt {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
font-size: 31px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OPTIONS STYLE */
|
||||
body .czr-mod-opt-wrapper .czr-sub-set {
|
||||
/*border: 1px dotted #ccc;*/
|
||||
background: rgba(238, 238, 238, 0.13);
|
||||
padding: 3% 2%;
|
||||
width: 96%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.czr-mod-opt-wrapper .czr-notice {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.czr-mod-opt-wrapper .mod-opt-title {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 5% 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**************************************
|
||||
/* MODULE OPTIONS : TABS NAVIGATION */
|
||||
/*************************************/
|
||||
.tabs {
|
||||
position: relative;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
font-weight: 300;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.tabs nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabs nav ul {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flex;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
max-width: 1200px;
|
||||
list-style: none;
|
||||
-ms-box-orient: horizontal;
|
||||
-ms-box-pack: center;
|
||||
-webkit-flex-flow: row wrap;
|
||||
-moz-flex-flow: row wrap;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-justify-content: center;
|
||||
-moz-justify-content: center;
|
||||
-ms-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tabs nav ul li {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* colums layouts */
|
||||
.tabs nav ul li.cols-4 {
|
||||
width: 25%
|
||||
}
|
||||
.tabs nav ul li.cols-3 {
|
||||
width: 33%
|
||||
}
|
||||
.tabs nav ul li.cols-2 {
|
||||
width: 50%
|
||||
}
|
||||
.tabs nav ul li.cols-1 {
|
||||
width: 100%
|
||||
}
|
||||
.tabs nav a {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.tabs nav a span {
|
||||
vertical-align: middle;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.tabs nav li.tab-current a {
|
||||
color: #74777b;
|
||||
}
|
||||
|
||||
.tabs nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
li.tab-current::after, li.tab-current::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-box-shadow: 4px 0px 15px 0px rgba(37, 37, 37, 0.63);
|
||||
box-shadow: 4px 0px 15px 0px rgba(37, 37, 37, 0.63);
|
||||
top: 0;
|
||||
width: 0px;
|
||||
right: 0px;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li.tab-current::before{
|
||||
left: 0;
|
||||
-webkit-box-shadow: 0px 0px 15px 4px rgba(37, 37, 37, 0.63);
|
||||
box-shadow: 0px 0px 15px 4px rgba(37, 37, 37, 0.63);
|
||||
}
|
||||
|
||||
li.tab-inactive::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
bottom: -7px;
|
||||
left: 0;
|
||||
-webkit-box-shadow: 4px 0px 15px 0px rgba(119, 119, 119, 0.58);;
|
||||
box-shadow: 4px 0px 15px 0px rgba(0, 0, 0, 0.86);;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.content-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-wrap section {
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
/*padding-top: 10px; commented for https://github.com/presscustomizr/hueman-pro-addons/issues/200 */
|
||||
}
|
||||
|
||||
section .czr-sub-set:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content-wrap section.content-current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-flexbox nav ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-flexbox nav ul li {
|
||||
min-width: 15%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*****************************/
|
||||
/* Top Line */
|
||||
/*****************************/
|
||||
|
||||
.tabs-style-topline {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.tabs-style-topline nav li {
|
||||
border: 1px solid rgba(40,44,42,0.1);
|
||||
}
|
||||
|
||||
.czr-items-wrapper .tabs-style-topline nav li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tabs-style-topline nav li:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tabs-style-topline nav li.tab-current {
|
||||
border-top-color: #ffffff;
|
||||
border-bottom: none;
|
||||
background: rgba(238, 238, 238, 0.13);
|
||||
}
|
||||
|
||||
.tabs-style-topline nav a {
|
||||
padding: 0.65em 0.5em;
|
||||
background: rgba(40,44,42,0.05);
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
-webkit-transition: color 0.2s;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.czr-items-wrapper .tabs-style-topline nav a {
|
||||
background: rgba(40, 44, 42, 0.45);
|
||||
}
|
||||
|
||||
.tabs-style-topline nav a:hover,
|
||||
.tabs-style-topline nav a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tabs-style-topline nav li.tab-current a {
|
||||
background: none;
|
||||
box-shadow: inset 0 3px 0 #ffffff;
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.czr-items-wrapper .tabs-style-topline nav li.tab-current a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabs-style-topline .icon::before {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabs-style-topline nav a span {
|
||||
text-transform: uppercase;
|
||||
/*letter-spacing: 1px;*/
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 58em) {
|
||||
.tabs nav a.icon span {
|
||||
display: none;
|
||||
}
|
||||
.tabs nav a:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* SLIDER MODULE SPECIFICS */
|
||||
.czr_slide_module .czr-item-title {
|
||||
padding: 0px 7px;
|
||||
height: 32px;
|
||||
}
|
||||
.czr_slide_module .slide-title, .czr_slide_module .slide-thumb {
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
}
|
||||
.czr_slide_module .slide-title {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* styled like the wp api.notifications, info type */
|
||||
.slide-mod-skope-notice {
|
||||
padding: 3%;
|
||||
background: #fff;
|
||||
border-left: 4px solid #00a0d2;
|
||||
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
/* Underline skope switch text in control notices and in the main skope switcher title */
|
||||
.slide-mod-skope-notice .czr-skope-switch {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.modopts-top-buttons {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 4%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-bottom-buttons {
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 1% 0;
|
||||
}
|
||||
.item-bottom-btn {
|
||||
|
||||
}
|
||||
.item-bottom-btn, .modopt-top-btn {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
.item-bottom-btn {
|
||||
background: #868686;
|
||||
width: 47%;
|
||||
margin-right: 2%;
|
||||
padding: 1% 0;
|
||||
}
|
||||
.modopt-top-btn {
|
||||
background: rgba(171, 171, 171, 0.5);
|
||||
width: 170px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.item-bottom-btn:hover {
|
||||
background: #5d5d5d;
|
||||
}
|
||||
.modopt-top-btn:hover {
|
||||
background:rgba(41, 41, 41, 0.53);
|
||||
}
|
||||
|
||||
.item-bottom-btn[disabled], .modopt-top-btn[disabled], .item-bottom-btn[disabled]:hover, .modopt-top-btn[disabled]:hover {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
/*border: none!important;*/
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* NOTICES */
|
||||
.czr-notice {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
|
||||
(function ( api, $, _ ) {
|
||||
//provides a description of each module
|
||||
//=> will determine :
|
||||
//1) how to initialize the module model. If not crud, then the initial item(s) model shall be provided
|
||||
//2) which js template(s) to use : if crud, the module template shall include the add new and pre-item elements.
|
||||
// , if crud, the item shall be removable
|
||||
//3) how to render : if multi item, the item content is rendered when user click on edit button.
|
||||
// If not multi item, the single item content is rendered as soon as the item wrapper is rendered.
|
||||
//4) some DOM behaviour. For example, a multi item shall be sortable.
|
||||
api.czrModuleMap = api.czrModuleMap || {};
|
||||
$.extend( api.czrModuleMap, {
|
||||
// czr_sektion_module : {
|
||||
// mthds : CZRSektionMths,
|
||||
// crud : true,
|
||||
// name : 'Sections'
|
||||
// },
|
||||
// czr_fp_module : {
|
||||
// mthds : CZRFeaturedPageModuleMths,
|
||||
// crud : true,
|
||||
// name : 'Featured Pages'
|
||||
// },
|
||||
// czr_slide_module : {
|
||||
// mthds : CZRSlideModuleMths,
|
||||
// crud : true,
|
||||
// name : 'Slider',
|
||||
// has_mod_opt : true
|
||||
// },
|
||||
// czr_related_posts_module : {
|
||||
// mthds : CZRRelatedPostsModMths,
|
||||
// crud : false,
|
||||
// multi_item : false,
|
||||
// name : 'Related Posts',
|
||||
// has_mod_opt : false
|
||||
// },
|
||||
// czr_text_module : {
|
||||
// mthds : CZRTextModuleMths,
|
||||
// crud : false,
|
||||
// multi_item : false,
|
||||
// name : 'Simple Text'
|
||||
// },
|
||||
// czr_text_editor_module : {
|
||||
// mthds : CZRTextEditorModuleMths,
|
||||
// crud : false,
|
||||
// multi_item : false,
|
||||
// name : 'WP Text Editor'
|
||||
// }
|
||||
});
|
||||
})( wp.customize, jQuery, _ );
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
|
||||
(function ( api, $, _ ) {
|
||||
//provides a description of each module
|
||||
//=> will determine :
|
||||
//1) how to initialize the module model. If not crud, then the initial item(s) model shall be provided
|
||||
//2) which js template(s) to use : if crud, the module template shall include the add new and pre-item elements.
|
||||
// , if crud, the item shall be removable
|
||||
//3) how to render : if multi item, the item content is rendered when user click on edit button.
|
||||
// If not multi item, the single item content is rendered as soon as the item wrapper is rendered.
|
||||
//4) some DOM behaviour. For example, a multi item shall be sortable.
|
||||
api.czrModuleMap = api.czrModuleMap || {};
|
||||
$.extend( api.czrModuleMap, {
|
||||
czr_widget_areas_module : {
|
||||
mthds : CZRWidgetAreaModuleMths,
|
||||
crud : true,
|
||||
sektion_allowed : false,
|
||||
name : 'Widget Areas'
|
||||
},
|
||||
czr_background : {
|
||||
mthds : CZRBodyBgModuleMths,
|
||||
crud : false,
|
||||
multi_item : false,
|
||||
name : 'Slider'
|
||||
}
|
||||
});
|
||||
})( wp.customize, jQuery, _ );
|
||||
+1009
File diff suppressed because it is too large
Load Diff
+117
@@ -0,0 +1,117 @@
|
||||
|
||||
//extends api.CZRModule
|
||||
var CZRBodyBgModuleMths = CZRBodyBgModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRBodyBgModuleMths, {
|
||||
initialize: function( id, options ) {
|
||||
var module = this;
|
||||
//run the parent initialize
|
||||
api.CZRModule.prototype.initialize.call( module, id, options );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
$.extend( module, {
|
||||
itemInputList : 'czr-module-bodybg-item-content'
|
||||
} );
|
||||
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR INPUT
|
||||
module.inputConstructor = api.CZRInput.extend( module.CZRBodyBgInputMths || {} );
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR MONOMODEL
|
||||
module.itemConstructor = api.CZRItem.extend( module.CZBodyBgItemMths || {} );
|
||||
|
||||
//declares a default model
|
||||
module.defaultItemModel = {
|
||||
'background-color' : '#eaeaea',
|
||||
'background-image' : '',
|
||||
'background-repeat' : 'no-repeat',
|
||||
'background-attachment' : 'fixed',
|
||||
'background-position' : 'center center',
|
||||
'background-size' : 'cover'
|
||||
};
|
||||
|
||||
//fired ready :
|
||||
//1) on section expansion
|
||||
//2) or in the case of a module embedded in a regular control, if the module section is alreay opened => typically when skope is enabled
|
||||
if ( _.has( api, 'czr_activeSectionId' ) && module.control.section() == api.czr_activeSectionId() && 'resolved' != module.isReady.state() ) {
|
||||
module.ready();
|
||||
}
|
||||
api.section( module.control.section() ).expanded.bind(function(to) {
|
||||
if ( 'resolved' == module.isReady.state() )
|
||||
return;
|
||||
module.ready();
|
||||
});
|
||||
},//initialize
|
||||
|
||||
|
||||
|
||||
CZRBodyBgInputMths : {
|
||||
//////////////////////////////////////////////////
|
||||
///SETUP SELECTS
|
||||
//////////////////////////////////////////////////
|
||||
//setup select on view_rendered|item_content_event_map
|
||||
setupSelect : function() {
|
||||
var input = this,
|
||||
_id_param_map = {
|
||||
'background-repeat' : 'bg_repeat_options',
|
||||
'background-attachment' : 'bg_attachment_options',
|
||||
'background-position' : 'bg_position_options'
|
||||
},
|
||||
item = input.input_parent,
|
||||
serverParams = serverControlParams.body_bg_module_params,
|
||||
options = {},
|
||||
module = input.module;
|
||||
|
||||
if ( ! _.has( _id_param_map, input.id ) )
|
||||
return;
|
||||
|
||||
if ( _.isUndefined( serverParams ) || _.isUndefined( serverParams[ _id_param_map[input.id] ] ) )
|
||||
return;
|
||||
options = serverParams[ _id_param_map[input.id] ];
|
||||
if ( _.isEmpty(options) )
|
||||
return;
|
||||
//generates the options
|
||||
_.each( options, function( title, key ) {
|
||||
var _attributes = {
|
||||
value : key,
|
||||
html: title
|
||||
};
|
||||
if ( key == input() || _.contains( input(), key ) )
|
||||
$.extend( _attributes, { selected : "selected" } );
|
||||
|
||||
$( 'select[data-czrtype]', input.container ).append( $('<option>', _attributes) );
|
||||
});
|
||||
//fire czrSelect2
|
||||
$( 'select[data-czrtype]', input.container ).czrSelect2();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
CZBodyBgItemMths : {
|
||||
//Fired if the item has been instantiated
|
||||
//The item.callbacks are declared.
|
||||
ready : function() {
|
||||
var item = this;
|
||||
api.CZRItem.prototype.ready.call( item );
|
||||
|
||||
item.inputCollection.bind( function( _col_ ) {
|
||||
if ( ! _.isEmpty( _col ) && item.czr_Input && item.czr_Input.has( 'background-image' ) ) {
|
||||
item.czr_Input('background-image').isReady.done( function( input_instance ) {
|
||||
var set_visibilities = function( bg_val ) {
|
||||
var is_bg_img_set = ! _.isEmpty( bg_val ) ||_.isNumber( bg_val);
|
||||
_.each( ['background-repeat', 'background-attachment', 'background-position', 'background-size'], function( dep ) {
|
||||
item.czr_Input(dep).container.toggle( is_bg_img_set || false );
|
||||
});
|
||||
};
|
||||
set_visibilities( input_instance() );
|
||||
//update the item model on 'background-image' change
|
||||
item.bind('background-image:changed', function(){
|
||||
set_visibilities( item.czr_Input('background-image')() );
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+272
@@ -0,0 +1,272 @@
|
||||
//extends api.CZRDynModule
|
||||
|
||||
var CZRFeaturedPageModuleMths = CZRFeaturedPageModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRFeaturedPageModuleMths, {
|
||||
initialize: function( id, options ) {
|
||||
var module = this;
|
||||
//run the parent initialize
|
||||
api.CZRDynModule.prototype.initialize.call( module, id, options );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
$.extend( module, {
|
||||
itemPreAddEl : 'czr-module-fp-pre-add-view-content',
|
||||
itemInputList : 'czr-module-fp-view-content'
|
||||
} );
|
||||
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR INPUT
|
||||
module.inputConstructor = api.CZRInput.extend( module.CZRFeaturedPagesInputMths || {} );
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR MONOMODEL
|
||||
module.itemConstructor = api.CZRItem.extend( module.CZRFeaturedPagesItem || {} );
|
||||
|
||||
//declares a default model
|
||||
this.defaultItemModel = {
|
||||
id : '',
|
||||
title : '' ,
|
||||
'fp-post' : '',
|
||||
'fp-title' : '',
|
||||
'fp-text' : '',
|
||||
'fp-image' : '',
|
||||
};
|
||||
|
||||
//overrides the default success message
|
||||
this.itemAddedMessage = serverControlParams.i18n.featuredPageAdded;
|
||||
api.section( module.control.section() ).expanded.bind(function(to) {
|
||||
if ( 'resolved' == module.isReady.state() )
|
||||
return;
|
||||
module.ready();
|
||||
});
|
||||
},//initialize
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//@override
|
||||
// wait for the ajax result!
|
||||
//the item is manually added.
|
||||
//We should have a pre Item
|
||||
addItem : function(obj) {
|
||||
var module = this,
|
||||
item = module.preItem,
|
||||
item_model = item();
|
||||
|
||||
if ( _.isEmpty(item_model) || ! _.isObject(item_model) ) {
|
||||
throw new Error('addItem : an item should be an object and not empty. In : ' + module.id +'. Aborted.' );
|
||||
}
|
||||
|
||||
var _fp_post = item_model['fp-post'];
|
||||
if ( typeof _fp_post == "undefined" )
|
||||
return;
|
||||
|
||||
_fp_post = _fp_post[0];
|
||||
|
||||
//AJAX ACTIONS ON ADD ITEM
|
||||
//when a new featured page is added, update the model (text, featured image ) base on the selected post
|
||||
//The parent method is called on ajaxrequest.done()
|
||||
var done_callback = function( _to_update ) {
|
||||
item.set( $.extend( item_model, _to_update) );
|
||||
api.CZRDynModule.prototype.addItem.call( module, obj );
|
||||
};
|
||||
|
||||
var request = module.CZRFeaturedPagesItem.setContentAjaxInfo( _fp_post.id, {}, done_callback );
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
CZRFeaturedPagesInputMths : {
|
||||
ready : function() {
|
||||
var input = this;
|
||||
//update the item model on fp-post change
|
||||
input.bind( 'fp-post:changed', function(){
|
||||
input.updateItemModel();
|
||||
});
|
||||
//update the item title on fp-title change
|
||||
input.bind( 'fp-title:changed', function(){
|
||||
input.updateItemTitle();
|
||||
});
|
||||
|
||||
api.CZRInput.prototype.ready.call( input );
|
||||
},
|
||||
//override czr img uploader input constructor
|
||||
//we need this otherwise we cannot add the buttons to the input container
|
||||
//when the input model is not, as the template will be rendered before the ready
|
||||
//method is called
|
||||
setupImageUploader: function(){
|
||||
var input = this;
|
||||
//temporary
|
||||
input.container.bind( 'fp-image:content_rendered', function(){
|
||||
input.addResetDefaultButton();
|
||||
});
|
||||
|
||||
//see add a reset to default image button
|
||||
input.container.on('click keydown', '.default-fpimage-button', function(){
|
||||
input.setThumbnailAjax();
|
||||
});
|
||||
|
||||
api.CZRInput.prototype.setupImageUploader.call( input );
|
||||
},
|
||||
//ACTIONS ON fp-title change
|
||||
//Fired on 'fp-title:changed'
|
||||
//Don't fire in pre item case
|
||||
updateItemModel : function( _new_val ) {
|
||||
|
||||
var input = this,
|
||||
item = this.input_parent,
|
||||
is_preItemInput = _.has( input, 'is_preItemInput' ) && input.is_preItemInput;
|
||||
|
||||
//check if we are in the pre Item case => if so, the fp-post might be empty
|
||||
if ( ! _.has( item(), 'fp-post') || _.isEmpty( item()['fp-post'] ) )
|
||||
return;
|
||||
|
||||
var _new_model = _.clone( item() ),
|
||||
_fp_post = _new_model['fp-post'][0],
|
||||
_new_title = _fp_post.title,
|
||||
inputCollection = is_preItemInput ? input.module.preItemInput : item.czr_Input;
|
||||
|
||||
if ( is_preItemInput ) {
|
||||
$.extend( _new_model, { title : _new_title, 'fp-title' : _new_title } );
|
||||
item.set( _new_model );
|
||||
} else {
|
||||
|
||||
var done_callback = function( _to_update ) {
|
||||
_.each( _to_update, function( value, id ){
|
||||
item.czr_Input( id ).set( value );
|
||||
});
|
||||
};
|
||||
//pass the fp-title so it gets updated after the ajax callback
|
||||
var request = item.setContentAjaxInfo( _fp_post.id, {'fp-title' : _new_title}, done_callback );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
updateItemTitle : function( _new_val ) {
|
||||
var input = this,
|
||||
item = this.input_parent,
|
||||
is_preItemInput = _.has( input, 'is_preItemInput' ) && input.is_preItemInput;
|
||||
|
||||
if ( is_preItemInput )
|
||||
return;
|
||||
var _new_model = _.clone( item() ),
|
||||
_new_title = "undefined" !== typeof _new_model['fp-title'] ? _new_model['fp-title'] : '';
|
||||
|
||||
$.extend( _new_model, { title : _new_title} );
|
||||
item.set( _new_model );
|
||||
},
|
||||
|
||||
|
||||
setThumbnailAjax : function() {
|
||||
var item = this.input_parent,
|
||||
_fp_post = item.czr_Input('fp-post')(),
|
||||
_post_id;
|
||||
|
||||
if ( typeof _fp_post == "undefined" )
|
||||
return;
|
||||
|
||||
_fp_post = _fp_post[0];
|
||||
_post_id = _fp_post.id;
|
||||
|
||||
$('.fpimage-reset-messages p').hide();
|
||||
|
||||
//AJAX STUFF
|
||||
//retrieve some ajax info
|
||||
request = wp.ajax.post( 'get-fp-post-tb', {
|
||||
'wp_customize': 'on',
|
||||
'id' : _post_id,
|
||||
'CZRFPNonce' : serverControlParams.CZRFPNonce
|
||||
//nonce needed USE 1 for everything?
|
||||
});
|
||||
|
||||
|
||||
request.done( function( data ){
|
||||
var thumbnail = data,
|
||||
input = item.czr_Input('fp-image');
|
||||
|
||||
if ( 0 !== thumbnail.length ) {
|
||||
$('.fpimage-reset-messages .success', input.container ).show('fast').fadeOut();
|
||||
input.set( thumbnail );
|
||||
}else {
|
||||
$('.fpimage-reset-messages .warning', input.container ).show('fast').delay(2000).fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
request.fail(function( data ) {
|
||||
if ( typeof console !== 'undefined' && console.error ) {
|
||||
console.error( data );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addResetDefaultButton : function( $_template_params ) {
|
||||
var input = this,
|
||||
item = input.input_parent,
|
||||
buttonLabel = serverControlParams.i18n.featuredPageImgReset,
|
||||
successMess = serverControlParams.i18n.featuredPageResetSucc,
|
||||
errMess = serverControlParams.i18n.featuredPageResetErr,
|
||||
messages = '<div class="fpimage-reset-messages" style="clear:both"><p class="success" style="display:none">'+successMess+'</p><p class="warning" style="display:none">'+errMess+'</p></div>';
|
||||
|
||||
$('.actions', input.container)
|
||||
.append('<button type="button" class="button default-fpimage-button">'+ buttonLabel +'</button>');
|
||||
$('.fpimage-reset-messages', input.container ).detach();
|
||||
$(input.container).append( messages );
|
||||
}
|
||||
},//CZRFeaturedPagesInputMths
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
CZRFeaturedPagesItem : {
|
||||
setContentAjaxInfo : function( _post_id, _additional_inputs, done_callback ) {
|
||||
//called be called from the input and from the item
|
||||
var _to_update = _additional_inputs || {};
|
||||
|
||||
//AJAX STUFF
|
||||
//retrieve some ajax info
|
||||
request = wp.ajax.post( 'get-fp-post', {
|
||||
'wp_customize': 'on',
|
||||
'id' : _post_id,
|
||||
'CZRFPNonce' : serverControlParams.CZRFPNonce
|
||||
//nonce needed USE 1 for everything?
|
||||
});
|
||||
|
||||
request.done( function( data ){
|
||||
var _post_info = data.post_info;
|
||||
|
||||
if ( 0 !== _post_info.length ) {
|
||||
$.extend( _to_update, { 'fp-image' : _post_info.thumbnail, 'fp-text' : _post_info.excerpt } );
|
||||
if ( "function" === typeof done_callback )
|
||||
done_callback( _to_update );
|
||||
}
|
||||
});
|
||||
|
||||
request.fail(function( data ) {
|
||||
if ( typeof console !== 'undefined' && console.error ) {
|
||||
console.error( data );
|
||||
}
|
||||
});
|
||||
|
||||
return request;
|
||||
},
|
||||
|
||||
//overrides the default parent method by a custom one
|
||||
//at this stage, the model passed in the obj is up to date
|
||||
writeItemViewTitle : function( model ) {
|
||||
var item = this,
|
||||
module = item.module,
|
||||
_model = model || item(),
|
||||
_title = _model.title ? _model.title : serverControlParams.i18n.featuredPageTitle;
|
||||
|
||||
_title = api.CZR_Helpers.truncate(_title, 25);
|
||||
$( '.' + module.control.css_attr.item_title , item.container ).html( _title );
|
||||
}
|
||||
}
|
||||
});//extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
|
||||
//extends api.CZRModule
|
||||
var CZRTextModuleMths = CZRTextModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRTextModuleMths, {
|
||||
initialize: function( id, options ) {
|
||||
var module = this;
|
||||
//run the parent initialize
|
||||
api.CZRModule.prototype.initialize.call( module, id, options );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
$.extend( module, {
|
||||
itemInputList : 'czr-module-text-view-content',
|
||||
} );
|
||||
|
||||
//declares a default model
|
||||
module.defaultItemModel = {
|
||||
id : '',
|
||||
text : ''
|
||||
};
|
||||
}//initialize
|
||||
});
|
||||
})( wp.customize , jQuery, _ );
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
//extends api.CZRDynModule
|
||||
|
||||
var CZRTextEditorModuleMths = CZRTextEditorModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRTextEditorModuleMths, {
|
||||
initialize: function( id, options ) {
|
||||
var module = this;
|
||||
//run the parent initialize
|
||||
api.CZRModule.prototype.initialize.call( module, id, options );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
$.extend( module, {
|
||||
itemInputList : 'czr-module-text_editor-item-content'
|
||||
} );
|
||||
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR INPUT
|
||||
module.inputConstructor = api.CZRInput.extend( module.CZRTextEditorInputMths || {} );
|
||||
//EXTEND THE DEFAULT CONSTRUCTORS FOR MONOMODEL
|
||||
module.itemConstructor = api.CZRItem.extend( module.CZRTextEditorItem || {} );
|
||||
|
||||
//declares a default model
|
||||
this.defaultItemModel = {
|
||||
id : '',
|
||||
text: ''
|
||||
};
|
||||
|
||||
// api.section( module.control.section() ).expanded.bind(function(to) {
|
||||
|
||||
// // if ( false !== module.container.length ) {
|
||||
// // //say it*/
|
||||
// // module.container.append( $_module_el );
|
||||
// // module.embedded.resolve();
|
||||
// // }
|
||||
|
||||
// if ( 'resolved' == module.isReady.state() )
|
||||
// return;
|
||||
|
||||
// module.ready();
|
||||
// });
|
||||
},//initialize
|
||||
|
||||
|
||||
|
||||
|
||||
CZRTextEditorInputMths : {
|
||||
},//CZRTextEditorsInputMths
|
||||
|
||||
|
||||
|
||||
CZRTextEditorItem : {
|
||||
|
||||
},
|
||||
});//extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/*****************************************************************************
|
||||
* A "CONTEXT AWARE" SET METHD
|
||||
*****************************************************************************/
|
||||
/**
|
||||
* OVERRIDES BASE api.Value set method
|
||||
* => adds the o {} param, allowing to pass additional contextual informations.
|
||||
*
|
||||
* Set the value and trigger all bound callbacks.
|
||||
*
|
||||
* @param {object} to New value.
|
||||
*/
|
||||
|
||||
// set: function( to ) {
|
||||
// var from = this._value;
|
||||
|
||||
// to = this._setter.apply( this, arguments );
|
||||
// to = this.validate( to );
|
||||
|
||||
// // Bail if the sanitized value is null or unchanged.
|
||||
// if ( null === to || _.isEqual( from, to ) ) {
|
||||
// return this;
|
||||
// }
|
||||
|
||||
// this._value = to;
|
||||
// this._dirty = true;
|
||||
|
||||
// this.callbacks.fireWith( this, [ to, from ] );
|
||||
|
||||
// return this;
|
||||
// },
|
||||
api.Value.prototype.set = function( to, o ) {
|
||||
var from = this._value, dfd = $.Deferred(), self = this, _promises = [];
|
||||
|
||||
to = this._setter.apply( this, arguments );
|
||||
to = this.validate( to );
|
||||
args = _.extend( { silent : false }, _.isObject( o ) ? o : {} );
|
||||
|
||||
// Bail if the sanitized value is null or unchanged.
|
||||
if ( null === to || _.isEqual( from, to ) ) {
|
||||
return dfd.resolveWith( self, [ to, from, o ] ).promise();
|
||||
}
|
||||
|
||||
this._value = to;
|
||||
this._dirty = true;
|
||||
if ( true === args.silent ) {
|
||||
return dfd.resolveWith( self, [ to, from, o ] ).promise();
|
||||
}
|
||||
|
||||
if ( this._deferreds ) {
|
||||
_.each( self._deferreds, function( _prom ) {
|
||||
_promises.push( _prom.apply( null, [ to, from, o ] ) );
|
||||
});
|
||||
|
||||
$.when.apply( null, _promises )
|
||||
.fail( function() { api.errorLog( 'A deferred callback failed in api.Value::set()'); })
|
||||
.then( function() {
|
||||
self.callbacks.fireWith( self, [ to, from, o ] );
|
||||
dfd.resolveWith( self, [ to, from, o ] );
|
||||
});
|
||||
} else {
|
||||
this.callbacks.fireWith( this, [ to, from, o ] );
|
||||
return dfd.resolveWith( self, [ to, from, o ] ).promise( self );
|
||||
}
|
||||
return dfd.promise( self );
|
||||
};
|
||||
|
||||
//allows us to specify a list of callbacks + a { deferred : true } param
|
||||
//if deferred is found and true, then the callback(s) are added in a list of deferred
|
||||
//@see how this deferred list is used in api.Value.prototype.set()
|
||||
api.Value.prototype.bind = function() {
|
||||
//find an object in the argument
|
||||
var self = this,
|
||||
_isDeferred = false,
|
||||
_cbs = [];
|
||||
|
||||
$.each( arguments, function( _key, _arg ) {
|
||||
if ( ! _isDeferred )
|
||||
_isDeferred = _.isObject( _arg ) && _arg.deferred;
|
||||
if ( _.isFunction( _arg ) )
|
||||
_cbs.push( _arg );
|
||||
});
|
||||
|
||||
if ( _isDeferred ) {
|
||||
self._deferreds = self._deferreds || [];
|
||||
_.each( _cbs, function( _cb ) {
|
||||
if ( ! _.contains( _cb, self._deferreds ) )
|
||||
self._deferreds.push( _cb );
|
||||
});
|
||||
} else {
|
||||
//original method
|
||||
self.callbacks.add.apply( self.callbacks, arguments );
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/*****************************************************************************
|
||||
* A SILENT SET METHOD :
|
||||
* => keep the dirtyness param unchanged
|
||||
* => stores the api state before callback calls, and reset it after
|
||||
* => add an object param to the callback to inform that this is a silent process
|
||||
* , this is typically used in the overridden api.Setting.preview method
|
||||
*****************************************************************************/
|
||||
//@param to : the new value to set
|
||||
//@param dirtyness : the current dirtyness status of this setting
|
||||
//
|
||||
api.Setting.prototype.silent_set =function( to, dirtyness ) {
|
||||
var from = this._value,
|
||||
_save_state = api.state('saved')();
|
||||
|
||||
to = this._setter.apply( this, arguments );
|
||||
to = this.validate( to );
|
||||
|
||||
// Bail if the sanitized value is null or unchanged.
|
||||
if ( null === to || _.isEqual( from, to ) ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this._value = to;
|
||||
this._dirty = ( _.isUndefined( dirtyness ) || ! _.isBoolean( dirtyness ) ) ? this._dirty : dirtyness;
|
||||
|
||||
this.callbacks.fireWith( this, [ to, from, { silent : true } ] );
|
||||
//reset the api state to its value before the callback call
|
||||
api.state('saved')( _save_state );
|
||||
return this;
|
||||
};
|
||||
})( wp.customize , jQuery, _ );
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
//PREPARE THE SKOPE AWARE PREVIEWER
|
||||
|
||||
//@return void()
|
||||
//Changed the core to specify that the setting preview is actually a deferred callback
|
||||
//=> allows us to use syntax like :
|
||||
//api( setId ).set( new_value ).done( function() { execute actions when all the setting callbacks have been done })
|
||||
// api.Setting.prototype.initialize = function( id, value, options ) {
|
||||
// var setting = this;
|
||||
// api.Value.prototype.initialize.call( setting, value, options );
|
||||
|
||||
// setting.id = id;
|
||||
// setting.transport = setting.transport || 'refresh';
|
||||
// setting._dirty = options.dirty || false;
|
||||
// setting.notifications = new api.Values({ defaultConstructor: api.Notification });
|
||||
|
||||
// // Whenever the setting's value changes, refresh the preview.
|
||||
// setting.bind( setting.preview );
|
||||
|
||||
// // the deferred can be used in moduleCollectionReact to execute actions after the module has been set.
|
||||
// // setting.bind( function( to, from , data ) {
|
||||
// // return setting.preview( to, from , data );
|
||||
// // }, { deferred : true } );
|
||||
// };
|
||||
|
||||
|
||||
//var _old_preview = api.Setting.prototype.preview;
|
||||
//@return a deferred promise
|
||||
api.Setting.prototype.preview = function( to, from , data ) {
|
||||
var setting = this, transport, dfd = $.Deferred();
|
||||
|
||||
transport = setting.transport;
|
||||
|
||||
//as soon as the previewer is setup, let's behave as usual
|
||||
//=> but don't refresh when silently updating
|
||||
|
||||
//Each input instantiated in an item or a modOpt can have a specific transport set.
|
||||
//the input transport is hard coded in the module js template, with the attribute : data-transport="postMessage" or "refresh"
|
||||
//=> this is optional, if not set, then the transport will be inherited from the the module, which inherits from the control.
|
||||
//
|
||||
//If the input transport is specifically set to postMessage, then we don't want to send the 'setting' event to the preview
|
||||
//=> this will prevent any partial refresh to be triggered if the input control parent is defined has a partial refresh one.
|
||||
//=> the input will be sent to preview with api.previewer.send( 'czr_input', {...} )
|
||||
//
|
||||
//One exception : if the input transport is set to postMessage but the setting has not been set yet in the api (from is undefined, null, or empty) , we usually need to make an initial refresh
|
||||
//=> typically, the initial refresh can be needed to set the relevant module css id selector that will be used afterwards for the postMessage input preview
|
||||
|
||||
//If we are in an input postMessage situation, the not_preview_sent param has been set in the czr_Input.inputReact method
|
||||
//=> 1) We bail here
|
||||
//=> 2) and we will send a custom event to the preview looking like :
|
||||
//api.previewer.send( 'czr_input', {
|
||||
// set_id : module.control.id,
|
||||
// module : { items : $.extend( true, {}, module().items) , modOpt : module.hasModOpt() ? $.extend( true, {}, module().modOpt ): {} },
|
||||
// module_id : module.id,//<= will allow us to target the right dom element on front end
|
||||
// input_id : input.id,
|
||||
// input_parent_id : input.input_parent.id,//<= can be the mod opt or the item
|
||||
// value : to
|
||||
// });
|
||||
|
||||
//=> if no from (setting not set yet => fall back on defaut transport)
|
||||
if ( ! _.isUndefined( from ) && ! _.isEmpty( from ) && ! _.isNull( from ) ) {
|
||||
if ( _.isObject( data ) && true === data.not_preview_sent ) {
|
||||
return dfd.resolve( arguments ).promise();
|
||||
}
|
||||
}
|
||||
|
||||
//Don't do anything id we are silent
|
||||
if ( _.has( data, 'silent' ) && false !== data.silent )
|
||||
return dfd.resolve( arguments ).promise();
|
||||
|
||||
|
||||
//CORE PREVIEW AS OF WP 4.7+
|
||||
if ( 'postMessage' === transport && ! api.state( 'previewerAlive' ).get() ) {
|
||||
transport = 'refresh';
|
||||
}
|
||||
|
||||
if ( 'postMessage' === transport ) {
|
||||
//Pre setting event with a richer object passed
|
||||
//=> can be used in a partial refresh scenario to execute actions prior to the actual selective refresh which is triggered on 'setting', just after
|
||||
setting.previewer.send( 'pre_setting', {
|
||||
set_id : setting.id,
|
||||
data : data,//<= { module_id : 'string', module : {} } which typically includes the module_id and the module model ( items, mod options )
|
||||
value : to
|
||||
});
|
||||
|
||||
//WP Default
|
||||
//=> the 'setting' event is used for normal and partial refresh post message actions
|
||||
//=> the partial refresh is fired on the preview if a partial has been registered for this setting in the php customize API
|
||||
//=> When a partial has been registered, the "normal" ( => the not partial refresh ones ) postMessage callbacks will be fired before the ajax ones
|
||||
|
||||
// Nimble Builder => the 'setting' event triggers a refresh of the previewer dirty values
|
||||
// The dirties are then used to populate $_POST['customized'] params via $.ajaxPrefilter()
|
||||
// @see core customize-preview.js
|
||||
// This is how NB can :
|
||||
// - dynamically register settings server side in PHP customize manager while doing ajax actions
|
||||
// - get the customized sektion collection. @see sek_get_skoped_seks() and Nimble_Collection_Setting::filter_previewed_sek_get_skoped_seks
|
||||
setting.previewer.send( 'setting', [ setting.id, setting() ] );
|
||||
|
||||
dfd.resolve( arguments );
|
||||
|
||||
} else if ( 'refresh' === transport ) {
|
||||
setting.previewer.refresh();
|
||||
dfd.resolve( arguments );
|
||||
}
|
||||
|
||||
return dfd.promise();
|
||||
};//api.Setting.prototype.preview
|
||||
})( wp.customize , jQuery, _ );
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/* monkey patch for the content height set */
|
||||
//wp.customize.Section is not available before wp 4.1
|
||||
if ( 'function' == typeof api.Section ) {
|
||||
// backup the original function
|
||||
var _original_section_initialize = api.Section.prototype.initialize;
|
||||
api.Section.prototype.initialize = function( id, options ) {
|
||||
//call the original constructor
|
||||
_original_section_initialize.apply( this, [id, options] );
|
||||
var section = this;
|
||||
|
||||
this.expanded.callbacks.add( function( _expanded ) {
|
||||
if ( ! _expanded )
|
||||
return;
|
||||
|
||||
var container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
|
||||
content = section.container.find( '.accordion-section-content' );
|
||||
//content resizing to the container height
|
||||
_resizeContentHeight = function() {
|
||||
content.css( 'height', container.innerHeight() );
|
||||
};
|
||||
_resizeContentHeight();
|
||||
//this is set to off in the original expand callback if 'expanded' is false
|
||||
$( window ).on( 'resize.customizer-section', _.debounce( _resizeContentHeight, 110 ) );
|
||||
});
|
||||
};
|
||||
}
|
||||
})( wp.customize , jQuery, _ );
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
api.CZR_Helpers = api.CZR_Helpers || {};
|
||||
//////////////////////////////////////////////////
|
||||
/// ACTIONS AND DOM LISTENERS
|
||||
//////////////////////////////////////////////////
|
||||
//adds action to an existing event map
|
||||
//@event map = [ {event1}, {event2}, ... ]
|
||||
//@new_event = { trigger : event name , actions : [ 'cb1', 'cb2', ... ] }
|
||||
api.CZR_Helpers = $.extend( api.CZR_Helpers, {
|
||||
//This method is now statically accessed by item and modopt instances because it does the same job for both.
|
||||
//=> It instantiates the inputs based on what it finds in the DOM ( item or mod opt js templates )
|
||||
//
|
||||
//Fired on 'contentRendered' for items and on user click for module options (mod opt)
|
||||
//creates the inputs based on the rendered parent item or mod option
|
||||
//inputParentInst can be an item instance or a module option instance
|
||||
setupInputCollectionFromDOM : function() {
|
||||
var inputParentInst = this;//<= because fired with .call( inputParentInst )
|
||||
if ( ! _.isFunction( inputParentInst ) ) {
|
||||
throw new Error( 'setupInputCollectionFromDOM => inputParentInst is not valid.' );
|
||||
}
|
||||
var module = inputParentInst.module,
|
||||
is_mod_opt = _.has( inputParentInst() , 'is_mod_opt' );
|
||||
|
||||
//bail if already done
|
||||
//_.has( inputParentInst, 'czr_Input')
|
||||
if ( ! _.isEmpty( inputParentInst.inputCollection() ) )
|
||||
return;
|
||||
|
||||
//INPUTS => Setup as soon as the view content is rendered
|
||||
//the inputParentInst is a collection of inputs, each one has its own view module.
|
||||
inputParentInst.czr_Input = inputParentInst.czr_Input || new api.Values();
|
||||
|
||||
//IS THE PARENT AN ITEM OR A MODULE OPTION ?
|
||||
//those default constructors (declared in the module init ) can be overridden by extended item or mod opt constructors inside the modules
|
||||
inputParentInst.inputConstructor = is_mod_opt ? module.inputModOptConstructor : module.inputConstructor;
|
||||
|
||||
var _defaultInputParentModel = is_mod_opt ? inputParentInst.defaultModOptModel : inputParentInst.defaultItemModel;
|
||||
|
||||
if ( _.isEmpty( _defaultInputParentModel ) || _.isUndefined( _defaultInputParentModel ) ) {
|
||||
throw new Error( 'setupInputCollectionFromDOM => No default model found in item or mod opt ' + inputParentInst.id + '.' );
|
||||
}
|
||||
|
||||
//prepare and sets the inputParentInst value on api ready
|
||||
//=> triggers the module rendering + DOM LISTENERS
|
||||
var inputParentInst_model = $.extend( true, {}, inputParentInst() );
|
||||
|
||||
if ( ! _.isObject( inputParentInst_model ) ) {
|
||||
inputParentInst_model = _defaultInputParentModel;
|
||||
} else {
|
||||
inputParentInst_model = $.extend( _defaultInputParentModel, inputParentInst_model );
|
||||
}
|
||||
|
||||
var dom_inputParentInst_model = {};
|
||||
|
||||
if ( $( '.' + module.control.css_attr.sub_set_wrapper, inputParentInst.container).length < 1 ) {
|
||||
api.errare( 'setupInputCollectionFromDOM => no input elements found in the DOM' );
|
||||
}
|
||||
|
||||
//creates the inputs based on the rendered item or mod opt
|
||||
$( '.' + module.control.css_attr.sub_set_wrapper, inputParentInst.container).each( function( _index ) {
|
||||
var _id = $(this).find('[data-czrtype]').attr( 'data-czrtype' ),
|
||||
_value = _.has( inputParentInst_model, _id ) ? inputParentInst_model[ _id ] : '';
|
||||
|
||||
//console.log('/// ID /// => ', _id );
|
||||
//skip if no valid input data-czrtype is found in this node
|
||||
if ( _.isUndefined( _id ) || _.isEmpty( _id ) ) {
|
||||
api.errare( 'setupInputCollectionFromDOM => missing data-czrtype id for input type ' + $(this).data( 'input-type' ) + ' in module ' + module.id + '. Check that the server input template is properly declared.' );
|
||||
return;
|
||||
}
|
||||
//check if this property exists in the current inputParentInst model
|
||||
if ( ! _.has( inputParentInst_model, _id ) ) {
|
||||
throw new Error('setupInputCollectionFromDOM => The item or mod opt property : ' + _id + ' has been found in the DOM but not in the item or mod opt model : '+ inputParentInst.id + '. The input can not be instantiated.');
|
||||
}
|
||||
|
||||
//Do we have a specific set of options defined in the parent module for this inputConstructor ?
|
||||
var _inputType = $(this).data( 'input-type' ),
|
||||
_inputTransport = $(this).data( 'transport' ) || 'inherit',//<= if no specific transport ( refresh or postMessage ) has been defined in the template, inherits the control transport
|
||||
_inputOptions = _.has( module.inputOptions, _inputType ) ? module.inputOptions[ _inputType ] : {},
|
||||
_inputArgs = {
|
||||
id : _id,
|
||||
type : _inputType,
|
||||
transport : _inputTransport,
|
||||
input_value : _value,
|
||||
input_options : _inputOptions,//<= a module can define a specific set of option
|
||||
container : $(this),
|
||||
input_parent : inputParentInst,
|
||||
is_mod_opt : is_mod_opt,
|
||||
module : module
|
||||
};
|
||||
|
||||
// ALLOW PLUGINS TO FILTER THE INPUT ARGS BEFORE INSTANTIATION
|
||||
api.trigger( 'input-args-before-instantiation', _inputArgs );
|
||||
|
||||
// INSTANTIATE THE INPUT
|
||||
inputParentInst.czr_Input.add( _id, new inputParentInst.inputConstructor( _id, _inputArgs ) );
|
||||
|
||||
// FIRE THE INPUT
|
||||
// fires ready once the input Value() instance is initialized
|
||||
inputParentInst.czr_Input( _id ).ready();
|
||||
|
||||
// POPULATES THE PARENT INPUT COLLECTION
|
||||
dom_inputParentInst_model[ _id ] = _value;
|
||||
// shall we trigger a specific event when the input collection from DOM has been populated ?
|
||||
});//each
|
||||
|
||||
//stores the collection
|
||||
inputParentInst.inputCollection( dom_inputParentInst_model );
|
||||
|
||||
//chain
|
||||
return inputParentInst;
|
||||
}
|
||||
});//$.extend
|
||||
// $( window ).on( 'message', function( e, o) {
|
||||
// api.consoleLog('WHAT ARE WE LISTENING TO?', e, o );
|
||||
// });
|
||||
})( wp.customize , jQuery, _);
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
api.CZR_Helpers = api.CZR_Helpers || {};
|
||||
//////////////////////////////////////////////////
|
||||
/// ACTIONS AND DOM LISTENERS
|
||||
//////////////////////////////////////////////////
|
||||
//adds action to an existing event map
|
||||
//@event map = [ {event1}, {event2}, ... ]
|
||||
//@new_event = { trigger : event name , actions : [ 'cb1', 'cb2', ... ] }
|
||||
api.CZR_Helpers = $.extend( api.CZR_Helpers, {
|
||||
|
||||
// Fetches a module tmpl from the server if not yet cached
|
||||
// {
|
||||
// tmpl : 'item-inputs',
|
||||
// module_type: module.module_type || 'all_modules',
|
||||
// module_id : ''
|
||||
// ... <= other custom args can be added dynamically here. Like the item_model when fetching the item content template
|
||||
// }
|
||||
// @return a promise()
|
||||
getModuleTmpl : function( args ) {
|
||||
var dfd = $.Deferred();
|
||||
args = _.extend( {
|
||||
tmpl : '',
|
||||
module_type: '',
|
||||
module_id : '',
|
||||
cache : true,//<= shall we cache the tmpl or not. Should be true in almost all cases.
|
||||
nonce: api.settings.nonce.save//<= do we need to set a specific nonce to fetch the tmpls ?
|
||||
}, args );
|
||||
|
||||
// are we good to go ?
|
||||
if ( _.isEmpty( args.tmpl ) || _.isEmpty( args.module_type ) ) {
|
||||
dfd.reject( 'api.CZR_Helpers.getModuleTmpl => missing tmpl or module_type param' );
|
||||
}
|
||||
|
||||
// This will be used to store the previously fetched template
|
||||
// 1) the generic templates used for all_modules
|
||||
// 2) each module templates : pre-item inputs, item inputs and mod options
|
||||
api.CZR_Helpers.czr_cachedTmpl = api.CZR_Helpers.czr_cachedTmpl || {};
|
||||
api.CZR_Helpers.czr_cachedTmpl[ args.module_type ] = api.CZR_Helpers.czr_cachedTmpl[ args.module_type ] || {};
|
||||
|
||||
// when cache is on, use the cached template
|
||||
// Example of cache set to off => the skoped items templates are all different because based on the control type => we can't cache them
|
||||
if ( true === args.cache && ! _.isEmpty( api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] ) && _.isString( api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] ) ) {
|
||||
//console.log('Cached => ', args.tmpl );
|
||||
dfd.resolve( api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] );
|
||||
} else {
|
||||
// if the tmpl is currently being fetched, return the temporary promise()
|
||||
// this can occurs when rendering a multi-item module for the first time
|
||||
// assigning the tmpl ajax request to the future cache entry allows us to fetch only once
|
||||
if ( _.isObject( api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] ) && 'pending' == api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ].state() ) {
|
||||
return api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ];//<= this is a $.promise()
|
||||
} else {
|
||||
//console.log('Needs to be fetched => ', args.tmpl );
|
||||
// First time fetch
|
||||
api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] = wp.ajax.post( 'ac_get_template', args )
|
||||
.done( function( _serverTmpl_ ) {
|
||||
// resolve and cache
|
||||
dfd.resolve( _serverTmpl_ );
|
||||
api.CZR_Helpers.czr_cachedTmpl[ args.module_type ][ args.tmpl ] = _serverTmpl_;
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'api.CZR_Helpers.getModuleTmpl => ', _r_ );
|
||||
api.errare( 'api.CZR_Helpers.getModuleTmpl => Problem when fetching the ' + args.tmpl + ' tmpl from server for module : ' + args.module_id + ' ' + args.module_type, _r_);
|
||||
dfd.reject( _r_ );
|
||||
// Nimble => display an error notification when
|
||||
// - session has expired
|
||||
// - when statusText is "Bad Request"
|
||||
if ( _.isObject( _r_ ) ) {
|
||||
if ( 'invalid_nonce' === _r_.code || 'Bad Request' === _r_.statusText ) {
|
||||
if ( window.sektionsLocalizedData && sektionsLocalizedData.i18n ) {
|
||||
api.previewer.trigger( 'sek-notify', { type : 'error', duration : 30000, message : sektionsLocalizedData.i18n['Something went wrong, please refresh this page.'] });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dfd.promise();
|
||||
}
|
||||
|
||||
});//$.extend
|
||||
// $( window ).on( 'message', function( e, o) {
|
||||
// api.consoleLog('WHAT ARE WE LISTENING TO?', e, o );
|
||||
// });
|
||||
})( wp.customize , jQuery, _);
|
||||
+196
@@ -0,0 +1,196 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
api.CZR_Helpers = api.CZR_Helpers || {};
|
||||
api.CZR_Helpers = $.extend( api.CZR_Helpers, {
|
||||
// @params {}. Example :
|
||||
// origin : 'nimble',
|
||||
// what : 'section',
|
||||
// id : params.id,
|
||||
// title: sektionsLocalizedData.i18n['Content for'] + ' ' + moduleName,
|
||||
// panel : sektionsLocalizedData.sektionsPanelId,
|
||||
// priority : 1000,
|
||||
// track : false//don't register in the self.registered()
|
||||
// constructWith : MainSectionConstructor,
|
||||
register : function( params ) {
|
||||
if ( ! _.has( params, 'id' ) ) {
|
||||
api.errare( 'register => missing id ', params );
|
||||
return;
|
||||
}
|
||||
// For the UI elements that we want to track, a level property is needed
|
||||
// if ( false !== params.track && ! _.has( params, 'level' ) ){
|
||||
// api.errare( 'register => missing trackable level ', params );
|
||||
// return;
|
||||
// }
|
||||
|
||||
var __element__ = {}, defaults;
|
||||
|
||||
switch ( params.what ) {
|
||||
// Register only if not registered already
|
||||
// For example, when saved as draft in a changeset, the setting is already dynamically registered server side
|
||||
// => in this case, we only need to register the associated control
|
||||
// @params args { id : , value : , transport : , type : }
|
||||
case 'setting' :
|
||||
if ( api.has( params.id ) ) {
|
||||
//api.consoleLog( 'registerSetting => setting Id already registered : ' + params.id );
|
||||
break;
|
||||
}
|
||||
defaults = $.extend( true, {}, api.Setting.prototype.defaults );
|
||||
var settingArgs = _.extend(
|
||||
defaults ,
|
||||
{
|
||||
dirty : ! _.isUndefined( params.dirty ) ? params.dirty : false,
|
||||
value : _.isUndefined( params.value ) ? null : params.value,
|
||||
transport : params.transport || 'refresh',
|
||||
type : params.type || 'option'
|
||||
}
|
||||
);
|
||||
// assign the value sent from the server
|
||||
|
||||
var SettingConstructor = api.settingConstructor[ settingArgs.type ] || api.Setting;
|
||||
|
||||
// extend with specific additional options provided on registration
|
||||
if ( _.isObject( params.options ) ) {
|
||||
settingArgs = _.extend( settingArgs , params.options );
|
||||
}
|
||||
|
||||
try { api.add( new SettingConstructor( params.id, settingArgs.value, settingArgs ) ); } catch ( er ) {
|
||||
api.errare( 'api.CZR_Helpers::register => problem when adding a setting to the api', er );
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case 'panel' :
|
||||
// Check if we have a correct section
|
||||
if ( ! _.has( params, 'id' ) ){
|
||||
throw new Error( 'registerPanel => missing panel id ');
|
||||
}
|
||||
|
||||
if ( api.panel.has( params.id ) ) {
|
||||
//api.errare( 'registerPanel => ' + params.id + ' is already registered');
|
||||
break;
|
||||
}
|
||||
|
||||
defaults = $.extend( true, {}, api.Panel.prototype.defaults );
|
||||
var panelParams = _.extend(
|
||||
defaults , {
|
||||
id: params.id,
|
||||
title: params.title || params.id,
|
||||
priority: _.has( params, 'priority' ) ? params.priority : 0
|
||||
}
|
||||
);
|
||||
|
||||
var PanelConstructor = _.isObject( params.constructWith ) ? params.constructWith : api.Panel;
|
||||
|
||||
// extend with specific additional options provided on registration
|
||||
if ( _.isObject( params.options ) ) {
|
||||
panelParams = _.extend( panelParams , params.options );
|
||||
}
|
||||
panelParams = _.extend( { params: panelParams }, panelParams ); // Inclusion of params alias is for back-compat for custom panels that expect to augment this property.
|
||||
|
||||
try { __element__ = api.panel.add( new PanelConstructor( params.id, panelParams ) ); } catch ( er ) {
|
||||
api.errare( 'api.CZR_Helpers::register => problem when adding a panel to the api', er );
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case 'section' :
|
||||
// MAYBE REGISTER THE SECTION
|
||||
// Check if we have a correct section
|
||||
if ( ! _.has( params, 'id' ) ){
|
||||
throw new Error( 'registerSection => missing section id ');
|
||||
}
|
||||
|
||||
if ( api.section.has( params.id ) ) {
|
||||
//api.infoLog( 'registerSection => ' + params.id + ' is already registered');
|
||||
break;
|
||||
}
|
||||
|
||||
defaults = $.extend( true, {}, api.Section.prototype.defaults );
|
||||
var sectionParams = _.extend(
|
||||
defaults, {
|
||||
content : '',
|
||||
id: params.id,
|
||||
title: params.title,
|
||||
panel: params.panel,
|
||||
priority: params.priority,
|
||||
description_hidden : false,
|
||||
customizeAction: serverControlParams.i18n['Customizing']
|
||||
}
|
||||
);
|
||||
|
||||
var SectionConstructor = api.Section;
|
||||
if ( ! _.isUndefined( params.constructWith ) ) {
|
||||
SectionConstructor = params.constructWith;
|
||||
} else if ( ! _.isEmpty( params.type ) && api.sectionConstructor[ params.type ] ) {
|
||||
SectionConstructor = api.sectionConstructor[ params.type ];
|
||||
}
|
||||
|
||||
// extend with specific additional options provided on registration
|
||||
if ( _.isObject( params.options ) ) {
|
||||
sectionParams = _.extend( sectionParams , params.options );
|
||||
}
|
||||
|
||||
sectionParams = _.extend( { params: sectionParams }, sectionParams ); // Inclusion of params alias is for back-compat for custom panels that expect to augment this property.
|
||||
try { __element__ = api.section.add( new SectionConstructor( params.id, sectionParams ) ); } catch ( er ) {
|
||||
api.errare( 'api.CZR_Helpers::register => problem when adding a section to the api', er );
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case 'control' :
|
||||
if ( api.control.has( params.id ) ) {
|
||||
//api.errorLog( 'registerControl => ' + params.id + ' is already registered');
|
||||
break;
|
||||
}
|
||||
|
||||
//@see api.settings.controls,
|
||||
defaults = $.extend( true, {}, api.Control.prototype.defaults );
|
||||
var controlArgs = _.extend(
|
||||
defaults,
|
||||
{
|
||||
content : '',
|
||||
label : params.label || params.id,
|
||||
priority : params.priority,
|
||||
section : params.section,
|
||||
settings: params.settings,
|
||||
type : params.type, //'czr_module',
|
||||
module_type : params.module_type,
|
||||
input_attrs : params.input_attrs,//<= can be used with the builtin "button" type control
|
||||
sek_registration_params : params// <= used when refreshing a level for example
|
||||
}
|
||||
),
|
||||
ControlConstructor = api.controlConstructor[ controlArgs.type ] || api.Control,
|
||||
options;
|
||||
|
||||
// extend with specific additional options provided on registration
|
||||
if ( _.isObject( params.options ) ) {
|
||||
controlArgs = _.extend( controlArgs, params.options );
|
||||
}
|
||||
|
||||
options = _.extend( { params: controlArgs }, controlArgs ); // Inclusion of params alias is for back-compat for custom controls that expect to augment this property.
|
||||
|
||||
try { __element__ = api.control.add( new ControlConstructor( params.id, options ) ); } catch ( er ) {
|
||||
api.errare( 'api.CZR_Helpers::register => problem when adding a control to the api', er );
|
||||
}
|
||||
break;
|
||||
default :
|
||||
api.errorLog('invalid "what" when invoking the register() method');
|
||||
break;
|
||||
|
||||
}//switch
|
||||
__element__ = ! _.isEmpty( __element__ ) ? __element__ : { deferred : { embedded : $.Deferred( function() { this.resolve(); }) } };
|
||||
|
||||
// this is where we populate the registered collection
|
||||
// if the registered element is "tracked", we inform the api about its registration
|
||||
// @see Nimble or Contextualizer for tracking usage => ui re-rendering, etc...
|
||||
if ( false !== params.track ) {
|
||||
api.trigger( 'czr-new-registered', params );
|
||||
}
|
||||
|
||||
return 'setting' == params.what ? params : __element__.deferred.embedded;
|
||||
}
|
||||
});//$.extend
|
||||
// $( window ).on( 'message', function( e, o) {
|
||||
// api.consoleLog('WHAT ARE WE LISTENING TO?', e, o );
|
||||
// });
|
||||
})( wp.customize , jQuery, _);
|
||||
+320
@@ -0,0 +1,320 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
api.CZR_Helpers = api.CZR_Helpers || {};
|
||||
//////////////////////////////////////////////////
|
||||
/// ACTIONS AND DOM LISTENERS
|
||||
//////////////////////////////////////////////////
|
||||
//adds action to an existing event map
|
||||
//@event map = [ {event1}, {event2}, ... ]
|
||||
//@new_event = { trigger : event name , actions : [ 'cb1', 'cb2', ... ] }
|
||||
api.CZR_Helpers = $.extend( api.CZR_Helpers, {
|
||||
css_loader_html : '<div class="czr-css-loader czr-mr-loader" style="display:none"><div></div><div></div><div></div></div>',
|
||||
|
||||
//While a control should always have a default setting,
|
||||
//It can have additional setting assigned
|
||||
//This method returns the default setting or the specified type if requested
|
||||
//Example : header_image has default and data
|
||||
getControlSettingId : function( control_id, setting_type ) {
|
||||
setting_type = 'default' || setting_type;
|
||||
if ( ! api.control.has( control_id ) ) {
|
||||
// api.consoleLog( 'getControlSettingId : The requested control_id is not registered in the api yet : ' + control_id );
|
||||
return control_id;
|
||||
}
|
||||
if ( ! _.has( api.control( control_id ), 'settings' ) || _.isEmpty( api.control( control_id ).settings ) )
|
||||
return control_id;
|
||||
|
||||
if ( ! _.has( api.control( control_id ).settings, setting_type ) ) {
|
||||
api.consoleLog( 'getControlSettingId : The requested control_id does not have the requested setting type : ' + control_id + ' , ' + setting_type );
|
||||
return control_id;
|
||||
}
|
||||
if ( _.isUndefined( api.control( control_id ).settings[setting_type].id ) ) {
|
||||
api.consoleLog( 'getControlSettingId : The requested control_id has no setting id assigned : ' + control_id );
|
||||
return control_id;
|
||||
}
|
||||
return api.control( control_id ).settings[setting_type].id;
|
||||
},
|
||||
|
||||
|
||||
|
||||
getDocSearchLink : function( text ) {
|
||||
text = ! _.isString(text) ? '' : text;
|
||||
var _searchtext = text.replace( / /g, '+'),
|
||||
_url = [ serverControlParams.docURL, 'search?query=', _searchtext ].join('');
|
||||
return [
|
||||
'<a href="' + _url + '" title="' + serverControlParams.i18n.readDocumentation + '" target="_blank">',
|
||||
' ',
|
||||
'<span class="far fa-question-circle-o"></span>'
|
||||
].join('');
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
* @return string
|
||||
* simple helper to build the setting wp api ready id
|
||||
*/
|
||||
build_setId : function ( setId ) {
|
||||
if ( _.isUndefined( window.themeServerControlParams ) || ! _.isArray( themeServerControlParams.wpBuiltinSettings ) ) {
|
||||
//api.errorLog( 'build_setId => missing themeServerControlParams !');
|
||||
return setId;
|
||||
}
|
||||
//exclude the WP built-in settings like blogdescription, show_on_front, etc
|
||||
if ( _.contains( themeServerControlParams.wpBuiltinSettings, setId ) )
|
||||
return setId;
|
||||
|
||||
// //extract the setting id for theme mods
|
||||
// var _pattern;
|
||||
|
||||
//exclude the WP built-in settings like sidebars_widgets*, nav_menu_*, widget_*, custom_css
|
||||
// var _patterns = [ 'widget_', 'nav_menu', 'sidebars_', 'custom_css' ],
|
||||
// _isExcld = false;
|
||||
// _.each( _patterns, function( _ptrn ) {
|
||||
// if ( _isExcld )
|
||||
// return;
|
||||
// _isExcld = _ptrn == setId.substring( 0, _ptrn.length );
|
||||
// });
|
||||
// if ( _isExcld )
|
||||
// return setId;
|
||||
if ( ! _.contains( themeServerControlParams.themeSettingList, setId ) )
|
||||
return setId;
|
||||
|
||||
return -1 == setId.indexOf( themeServerControlParams.themeOptions ) ? [ themeServerControlParams.themeOptions +'[' , setId , ']' ].join('') : setId;
|
||||
},
|
||||
|
||||
/*
|
||||
* @return string
|
||||
* simple helper to extract the option name from a setting id
|
||||
*/
|
||||
getOptionName : function( name ) {
|
||||
if ( _.isEmpty( window.themeServerControlParams ) || _.isEmpty( themeServerControlParams.themeOptions ) ) {
|
||||
//api.errorLog( 'getOptionName => missing themeServerControlParams !');
|
||||
return name;
|
||||
}
|
||||
var self = this;
|
||||
//targets only the options of the theme
|
||||
if ( -1 == name.indexOf( themeServerControlParams.themeOptions) )
|
||||
return name;
|
||||
return name.replace(/\[|\]/g, '').replace( themeServerControlParams.themeOptions, '');
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@return bool
|
||||
//@uses api.czr_partials
|
||||
hasPartRefresh : function( setId ) {
|
||||
if ( ! _.has( api, 'czr_partials') )
|
||||
return;
|
||||
return _.contains( _.map( api.czr_partials(), function( partial, key ) {
|
||||
return _.contains( partial.settings, setId );
|
||||
}), true );
|
||||
},
|
||||
|
||||
//@return the array of controls in a given section_id
|
||||
getSectionControlIds : function( section_id ) {
|
||||
section_id = section_id || api.czr_activeSectionId();
|
||||
return ! api.section.has( section_id ) ?
|
||||
[] :
|
||||
_.map( api.section( section_id ).controls(), function( _ctrl ) {
|
||||
return _ctrl.id;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
//1) get the control of a given section
|
||||
//2) for each control get the associated setting(s)
|
||||
//=> important, a control might have several associated settings. Typical example : header_image.
|
||||
//@return [] of setting ids for a given czr section
|
||||
getSectionSettingIds : function( section_id ) {
|
||||
section_id = section_id || api.czr_activeSectionId();
|
||||
if ( ! api.section.has( section_id) )
|
||||
return;
|
||||
var self = this,
|
||||
_sec_settings = [],
|
||||
_sec_controls = self.getSectionControlIds( section_id );
|
||||
|
||||
_.each( _sec_controls, function( ctrlId ) {
|
||||
_.each( api.control(ctrlId).settings, function( _instance, _k ) {
|
||||
_sec_settings.push( _instance.id );
|
||||
});
|
||||
});
|
||||
return _sec_settings;
|
||||
},
|
||||
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
/// STRINGS HELPERS
|
||||
//////////////////////////////////////////////////
|
||||
capitalize : function( string ) {
|
||||
if( ! _.isString(string) )
|
||||
return string;
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
|
||||
truncate : function( string, n, useWordBoundary ){
|
||||
if ( ! _.isString( string ) )
|
||||
return '';
|
||||
n = n || 20;
|
||||
var isTooLong = string.length > n,
|
||||
s_ = isTooLong ? string.substr(0,n-1) : string;
|
||||
s_ = (useWordBoundary && isTooLong) ? s_.substr(0,s_.lastIndexOf(' ')) : s_;
|
||||
return isTooLong ? s_ + '...' : s_;
|
||||
},
|
||||
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
/// STRINGS HELPERS
|
||||
//////////////////////////////////////////////////
|
||||
//is a module multi item ?
|
||||
//@return bool
|
||||
isMultiItemModule : function( module_type, moduleInst ) {
|
||||
if ( _.isUndefined( module_type ) && ! _.isObject( moduleInst ) )
|
||||
return;
|
||||
if ( _.isObject( moduleInst ) && _.has( moduleInst, 'module_type' ) )
|
||||
module_type = moduleInst.module_type;
|
||||
else if ( _.isUndefined( module_type ) || _.isNull( module_type ) )
|
||||
return;
|
||||
if ( ! _.has( api.czrModuleMap, module_type ) )
|
||||
return;
|
||||
|
||||
return api.czrModuleMap[module_type].crud || api.czrModuleMap[module_type].multi_item || false;
|
||||
},
|
||||
|
||||
//is a module crud ?
|
||||
//@return bool
|
||||
isCrudModule : function( module_type, moduleInst ) {
|
||||
if ( _.isUndefined( module_type ) && ! _.isObject( moduleInst ) )
|
||||
return;
|
||||
if ( _.isObject( moduleInst ) && _.has( moduleInst, 'module_type' ) )
|
||||
module_type = moduleInst.module_type;
|
||||
else if ( _.isUndefined( module_type ) || _.isNull( module_type ) )
|
||||
return;
|
||||
if ( ! _.has( api.czrModuleMap, module_type ) )
|
||||
return;
|
||||
|
||||
return api.czrModuleMap[module_type].crud || false;
|
||||
},
|
||||
|
||||
//is a module crud ?
|
||||
//@return bool
|
||||
hasModuleModOpt : function( module_type, moduleInst ) {
|
||||
if ( _.isUndefined( module_type ) && ! _.isObject( moduleInst ) )
|
||||
return;
|
||||
if ( _.isObject( moduleInst ) && _.has( moduleInst, 'module_type' ) )
|
||||
module_type = moduleInst.module_type;
|
||||
else if ( _.isUndefined( module_type ) || _.isNull( module_type ) )
|
||||
return;
|
||||
if ( ! _.has( api.czrModuleMap, module_type ) )
|
||||
return;
|
||||
|
||||
return api.czrModuleMap[module_type].has_mod_opt || false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@self explanatory: removes a collection of input from a parent item or modOpt instance
|
||||
//Triggered by : user actions usually when an item is collapsed or when the modOpt panel is closed
|
||||
removeInputCollection : function() {
|
||||
var inputParentInst = this;//<= because fired with .call( inputParentInst )
|
||||
if ( ! _.isFunction( inputParentInst ) ) {
|
||||
throw new Error( 'removeInputCollection : inputParentInst is not valid.' );
|
||||
}
|
||||
if ( ! _.has( inputParentInst, 'czr_Input') )
|
||||
return;
|
||||
//remove each input api.Value() instance
|
||||
inputParentInst.czr_Input.each( function( _input ) {
|
||||
inputParentInst.czr_Input.remove( _input.id );
|
||||
});
|
||||
//reset the input collection property
|
||||
inputParentInst.inputCollection({});
|
||||
},
|
||||
|
||||
//Re-instantiate a module control based on its id
|
||||
//@param wpSetId : the api id of the control to refresh
|
||||
refreshModuleControl : function( wpSetId ) {
|
||||
var _constructor = api.controlConstructor.czr_module,
|
||||
_control_type = api.control( wpSetId ).params.type,
|
||||
_control_data = api.settings.controls[wpSetId];
|
||||
|
||||
//remove the container and its control
|
||||
$.when( api.control( wpSetId ).container.remove() ).done( function() {
|
||||
//remove the control from the api control collection
|
||||
api.control.remove( wpSetId );
|
||||
|
||||
//re-instantiate the control with the updated _control_data
|
||||
api.control.add( wpSetId, new _constructor( wpSetId, { params : _control_data, previewer : api.previewer }) );
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
// BOOLEAN CHECK
|
||||
// @return bool
|
||||
isChecked : function( v ) {
|
||||
if ( _.isBoolean( v ) ) {
|
||||
return v;
|
||||
} else if ( _.isNumber( v ) ) {
|
||||
return v > 0;
|
||||
} else if ( _.isString( v ) ) {
|
||||
return '0' !== v && '' !== v && 'off' !== v;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
// COLORS
|
||||
hexToRgb : function( hex ) {
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
try {
|
||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
});
|
||||
} catch( er ) {
|
||||
api.errorLog( 'Error in Helpers::hexToRgb : ' + er );
|
||||
return hex;
|
||||
}
|
||||
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
|
||||
result = result ? [
|
||||
parseInt(result[1], 16),//r
|
||||
parseInt(result[2], 16),//g
|
||||
parseInt(result[3], 16)//b
|
||||
] : [];
|
||||
return 'rgb(' + result.join(',') + ')';
|
||||
},
|
||||
|
||||
rgbToHex : function ( r, g, b ) {
|
||||
var componentToHex = function(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
};
|
||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
},
|
||||
|
||||
|
||||
|
||||
// inspired from wp.template in wp-includes/js/wp-util.js
|
||||
parseTemplate : _.memoize(function ( html ) {
|
||||
var compiled,
|
||||
/*
|
||||
* Underscore's default ERB-style templates are incompatible with PHP
|
||||
* when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
|
||||
*
|
||||
* @see trac ticket #22344.
|
||||
*/
|
||||
options = {
|
||||
evaluate: /<#([\s\S]+?)#>/g,
|
||||
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
|
||||
escape: /\{\{([^\}]+?)\}\}(?!\})/g,
|
||||
variable: 'data'
|
||||
};
|
||||
|
||||
return function ( data ) {
|
||||
compiled = compiled || _.template( html, options );
|
||||
return compiled( data );
|
||||
};
|
||||
})
|
||||
});//$.extend
|
||||
// $( window ).on( 'message', function( e, o) {
|
||||
// api.consoleLog('WHAT ARE WE LISTENING TO?', e, o );
|
||||
// });
|
||||
})( wp.customize , jQuery, _);
|
||||
+223
@@ -0,0 +1,223 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
api.CZR_Helpers = api.CZR_Helpers || {};
|
||||
//////////////////////////////////////////////////
|
||||
/// ACTIONS AND DOM LISTENERS
|
||||
//////////////////////////////////////////////////
|
||||
//adds action to an existing event map
|
||||
//@event map = [ {event1}, {event2}, ... ]
|
||||
//@new_event = { trigger : event name , actions : [ 'cb1', 'cb2', ... ] }
|
||||
api.CZR_Helpers = $.extend( api.CZR_Helpers, {
|
||||
addActions : function( event_map, new_events, instance ) {
|
||||
var control = this;
|
||||
instance = instance || control;
|
||||
instance[event_map] = instance[event_map] || [];
|
||||
new_event_map = _.clone( instance[event_map] );
|
||||
instance[event_map] = _.union( new_event_map, ! _.isArray(new_events) ? [new_events] : new_events );
|
||||
},
|
||||
|
||||
doActions : function( action, $dom_el, obj ) {
|
||||
$dom_el.trigger( action, obj );
|
||||
},
|
||||
|
||||
|
||||
//@args = {model : model, dom_el : $_view_el, refreshed : _refreshed }
|
||||
setupDOMListeners : function( event_map , args, instance ) {
|
||||
var control = this,
|
||||
_defaultArgs = {
|
||||
model : {},
|
||||
dom_el : {}
|
||||
};
|
||||
|
||||
instance = instance || control;
|
||||
//event_map : are we good ?
|
||||
if ( ! _.isArray( event_map ) ) {
|
||||
api.errare( 'setupDomListeners : event_map should be an array', args );
|
||||
return;
|
||||
}
|
||||
|
||||
//args : are we good ?
|
||||
if ( ! _.isObject( args ) ) {
|
||||
api.errare( 'setupDomListeners : args should be an object', event_map );
|
||||
return;
|
||||
}
|
||||
|
||||
args = _.extend( _defaultArgs, args );
|
||||
|
||||
// => we need a dom_el as an existing jQuery object
|
||||
if ( ! ( args.dom_el instanceof jQuery ) || 1 > args.dom_el.length ) {
|
||||
api.errare( 'setupDomListeners : dom element should be an existing dom element', args );
|
||||
return;
|
||||
}
|
||||
|
||||
//loop on the event map and map the relevant callbacks by event name
|
||||
// @param _event :
|
||||
//{
|
||||
// trigger : '',
|
||||
// selector : '',
|
||||
// name : '',
|
||||
// actions : ''
|
||||
// },
|
||||
_.map( event_map , function( _event ) {
|
||||
if ( ! _.isString( _event.selector ) || _.isEmpty( _event.selector ) ) {
|
||||
api.errare( 'setupDOMListeners : selector must be a string not empty. Aborting setup of action(s) : ' + _event.actions.join(',') );
|
||||
return;
|
||||
}
|
||||
|
||||
//Are we good ?
|
||||
if ( ! _.isString( _event.selector ) || _.isEmpty( _event.selector ) ) {
|
||||
api.errare( 'setupDOMListeners : selector must be a string not empty. Aborting setup of action(s) : ' + _event.actions.join(',') );
|
||||
return;
|
||||
}
|
||||
|
||||
// if ( ! _event.name && ! _.isEmpty( _event.name ) ) {
|
||||
// api.errare('in setupDOMListeners : missing name', _event );
|
||||
// }
|
||||
|
||||
// DON'T CREATE THE SAME LISTENERS MULTIPLE TIMES
|
||||
//Make sure that we add this listener only once to a particular dom element
|
||||
//A listener id is a combination of event name + selector
|
||||
//if not set, the name is a concatenation of trigger + selector
|
||||
var _name = ( _event.name && ! _.isEmpty( _event.name ) ) ? _event.name : [ _event.trigger, _event.selector ].join('');
|
||||
|
||||
var _currentListenerCollection = args.dom_el.data( 'czr-listener-collection' );
|
||||
if ( ! _currentListenerCollection || ! _.isArray( _currentListenerCollection ) ) {
|
||||
_currentListenerCollection = [ _name ];
|
||||
} else {
|
||||
_currentListenerCollection = _.isArray( _currentListenerCollection ) ? _currentListenerCollection : [];
|
||||
if ( ! _.contains( _currentListenerCollection, _name ) ) {
|
||||
_currentListenerCollection.push( _name );
|
||||
} else {
|
||||
api.errare('setupDOMListeners : aborting because listener already created for event : ' + _name );
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
// add this listener to the collection
|
||||
args.dom_el.data( 'czr-listener-collection' , _currentListenerCollection );
|
||||
|
||||
//LISTEN TO THE DOM => USES EVENT DELEGATION
|
||||
args.dom_el.on( _event.trigger , _event.selector, function( e, event_params ) {
|
||||
//stop propagation to ancestors modules, typically a sektion
|
||||
e.stopPropagation();
|
||||
//particular treatment
|
||||
if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault(); // Keep this AFTER the key filter above
|
||||
|
||||
//It is important to deconnect the original object from its source
|
||||
//=> because we will extend it when used as params for the action chain execution
|
||||
var actionsParams = $.extend( true, {}, args );
|
||||
|
||||
//always get the latest model from the collection
|
||||
if ( _.has( actionsParams, 'model') && _.has( actionsParams.model, 'id') ) {
|
||||
if ( _.has( instance, 'get' ) )
|
||||
actionsParams.model = instance();
|
||||
else
|
||||
actionsParams.model = instance.getModel( actionsParams.model.id );
|
||||
}
|
||||
|
||||
//always add the event obj to the passed args
|
||||
//+ the dom event
|
||||
$.extend( actionsParams, { event : _event, dom_event : e } );
|
||||
|
||||
//add the event param => useful for triggered event
|
||||
$.extend( actionsParams, event_params );
|
||||
|
||||
//SETUP THE EMITTERS
|
||||
//inform the container that something has happened
|
||||
//pass the model and the current dom_el
|
||||
//the model is always passed as parameter
|
||||
if ( ! _.has( actionsParams, 'event' ) || ! _.has( actionsParams.event, 'actions' ) ) {
|
||||
api.errare( 'executeEventActionChain : missing obj.event or obj.event.actions' );
|
||||
return;
|
||||
}
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
control.executeEventActionChain( actionsParams, instance );
|
||||
} else {
|
||||
try { control.executeEventActionChain( actionsParams, instance ); } catch( er ) {
|
||||
api.errare( 'In setupDOMListeners : problem when trying to fire actions : ' + actionsParams.event.actions , er );
|
||||
}
|
||||
}
|
||||
});//.on()
|
||||
});//_.map()
|
||||
},//setupDomListeners
|
||||
|
||||
|
||||
|
||||
//GENERIC METHOD TO SETUP EVENT LISTENER
|
||||
//NOTE : the args.event must alway be defined
|
||||
//Example of args :
|
||||
// {
|
||||
// trigger : 'click keydown',
|
||||
// selector : [ '.' + module.control.css_attr.open_pre_add_btn, '.' + module.control.css_attr.cancel_pre_add_btn ].join(','),
|
||||
// name : 'pre_add_item',
|
||||
// actions : [
|
||||
// 'closeAllItems',
|
||||
// 'closeRemoveDialogs',
|
||||
// function(obj) {
|
||||
// var module = this;
|
||||
// module.preItemExpanded.set( ! module.preItemExpanded() );
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
executeEventActionChain : function( args, instance ) {
|
||||
var control = this;
|
||||
|
||||
//if the actions param is not an array but is an anonymous function, fire it and stop there
|
||||
if ( 'function' === typeof( args.event.actions ) )
|
||||
return args.event.actions.call( instance, args );
|
||||
|
||||
//execute the various actions required
|
||||
//first normalizes the provided actions into an array of callback methods
|
||||
//then loop on the array and fire each cb if exists
|
||||
if ( ! _.isArray( args.event.actions ) )
|
||||
args.event.actions = [ args.event.actions ];
|
||||
|
||||
//if one of the callbacks returns false, then we break the loop
|
||||
//=> allows us to stop a chain of callbacks if a condition is not met
|
||||
var _break = false;
|
||||
_.map( args.event.actions, function( _cb ) {
|
||||
if ( _break )
|
||||
return;
|
||||
|
||||
var _cbCandidate = function() {};
|
||||
|
||||
// is the _cb an anonymous function ?
|
||||
// if not, we expect the method to exist in the provided object instance
|
||||
if ( 'function' === typeof( _cb ) ) {
|
||||
_cbCandidate = _cb;
|
||||
} else {
|
||||
if ( 'function' != typeof( instance[ _cb ] ) ) {
|
||||
throw new Error( 'executeEventActionChain : the action : ' + _cb + ' has not been found when firing event : ' + args.event.selector );
|
||||
} else {
|
||||
_cbCandidate = instance[ _cb ];
|
||||
}
|
||||
}
|
||||
|
||||
// Allow other actions to be bound before action and after
|
||||
//
|
||||
// => we don't want the event in the object here => we use the one in the event map if set
|
||||
// => otherwise will loop infinitely because triggering always the same cb from args.event.actions[_cb]
|
||||
// => the dom element shall be get from the passed args and fall back to the controler container.
|
||||
var $_dom_el = ( _.has(args, 'dom_el') && -1 != args.dom_el.length ) ? args.dom_el : control.container;
|
||||
|
||||
if ( 'string' === typeof( _cb ) ) {
|
||||
$_dom_el.trigger( 'before_' + _cb, _.omit( args, 'event' ) );
|
||||
}
|
||||
|
||||
//executes the _cb and stores the result in a local var
|
||||
var _cb_return = _cbCandidate.call( instance, args );
|
||||
//shall we stop the action chain here ?
|
||||
if ( false === _cb_return )
|
||||
_break = true;
|
||||
|
||||
if ( 'string' === typeof( _cb ) ) {
|
||||
//allow other actions to be bound after
|
||||
$_dom_el.trigger( 'after_' + _cb, _.omit( args, 'event' ) );
|
||||
}
|
||||
});//_.map
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _);
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
|
||||
(function (api, $, _) {
|
||||
/*****************************************************************************
|
||||
* CAPTURE PREVIEW INFORMATIONS ON REFRESH + REACT TO THEM
|
||||
*****************************************************************************/
|
||||
//This promise will let us know when we have the first set of preview query ready to use
|
||||
//This is needed for modules contextually dependant
|
||||
//For example, the slider module will initialize the module model based on the contextual informations, if no items have been set yet.
|
||||
api.czr_wpQueryDataReady = api.czr_wpQueryDataReady || $.Deferred();
|
||||
api.czr_wpQueryInfos = api.czr_wpQueryInfos || new api.Value();
|
||||
|
||||
//Data are sent by the preview frame when the panel has sent the 'sync' or even better 'active' event
|
||||
api.bind( 'ready', function() {
|
||||
/* WP CONDITIONAL TAGS => stores and observes the WP conditional tags sent by the preview */
|
||||
api.previewer.bind( 'czr-query-data-ready', function( data ) {
|
||||
|
||||
api.czr_wpQueryInfos( data );
|
||||
|
||||
if ( 'pending' == api.czr_wpQueryDataReady.state() ) {
|
||||
api.czr_wpQueryDataReady.resolve( data );
|
||||
}
|
||||
});
|
||||
|
||||
//PARTIAL REFRESHS => stores and observes the partials data sent by the preview
|
||||
//=> this is used in api.CZR_Helpers.hasPartRefresh( control_id )
|
||||
//=> as of WP4.7.5, there's no way to get the list of control with partial refresh in the customize-control api
|
||||
api.previewer.bind( 'czr-partial-refresh-data', function( data ) {
|
||||
api.czr_partials = api.czr_partials || new api.Value();
|
||||
api.czr_partials.set( data );
|
||||
});
|
||||
|
||||
//PARTIAL REFRESHS : React on partial refresh done
|
||||
// @data : { set_id : api setting id }
|
||||
api.previewer.bind( 'czr-partial-refresh-done', function( data ) {
|
||||
if ( ! _.has( data, 'set_id' ) )
|
||||
return;
|
||||
var setId = api.CZR_Helpers.build_setId( data.set_id );
|
||||
if ( ! api.has( setId ) )
|
||||
return;
|
||||
//inform the control
|
||||
var ctrlId = api.CZR_Helpers.getControlSettingId( setId );
|
||||
if ( ! api.control.has( ctrlId ) )
|
||||
return;
|
||||
api.control( ctrlId ).trigger( 'czr-partial-refresh-done' );
|
||||
});
|
||||
});//api.bind('ready')
|
||||
})( wp.customize , jQuery, _ );
|
||||
+413
@@ -0,0 +1,413 @@
|
||||
var CZRInputMths = CZRInputMths || {};
|
||||
|
||||
//extends api.Value
|
||||
//an input is instanciated with the typical set of options :
|
||||
// container : $(this),
|
||||
// id : _id,
|
||||
// input_options : {} <= a set of options that are used when setting up the input type
|
||||
// input_parent : {} can be an item instance or a modOpt instance (Value instance, has a parent module)
|
||||
// input_value : $(this).find('[data-czrtype]').val(),
|
||||
// module : module,
|
||||
// transport : inherit or specified in the template with data-transport="postMessage" or "refresh".
|
||||
// type : $(this).attr('data-input-type'),
|
||||
// is_mod_opt : bool,
|
||||
// is_preItemInput : bool
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRInputMths , {
|
||||
initialize: function( name, options ) {
|
||||
if ( _.isUndefined( options.input_parent ) || _.isEmpty(options.input_parent) ) {
|
||||
throw new Error('No input_parent assigned to input ' + options.id + '. Aborting');
|
||||
}
|
||||
if ( _.isUndefined(options.module ) ) {
|
||||
throw new Error('No module assigned to input ' + options.id + '. Aborting');
|
||||
}
|
||||
|
||||
api.Value.prototype.initialize.call( this, null, options );
|
||||
|
||||
var input = this;
|
||||
//input.options = options;
|
||||
//write the options as properties, name is included
|
||||
$.extend( input, options || {} );
|
||||
|
||||
// store the constructor options
|
||||
input.constructorOptions = $.extend( true, {}, options );
|
||||
|
||||
//DEFERRED STATES
|
||||
//store the state of ready.
|
||||
input.isReady = $.Deferred();
|
||||
|
||||
//initialize to the provided value if any
|
||||
if ( ! _.isUndefined( options.input_value ) ) {
|
||||
input.set( options.input_value );
|
||||
}
|
||||
|
||||
|
||||
// Setup a default user event map
|
||||
// can be overriden when setting up the input
|
||||
var trigger_map = {
|
||||
text : 'keyup',
|
||||
textarea : 'keyup',
|
||||
password : 'keyup',
|
||||
color : 'colorpickerchange',
|
||||
range : 'input propertychange'
|
||||
};
|
||||
|
||||
// Default Input Event Map
|
||||
input.input_event_map = [
|
||||
//set input value
|
||||
{
|
||||
trigger : ['change', trigger_map[input.type] || '' ].join(' ').trim(),//was 'propertychange change click keyup input',//colorpickerchange is a custom colorpicker event @see method setupColorPicker => otherwise we don't
|
||||
selector : 'input[data-czrtype], select[data-czrtype], textarea[data-czrtype]',
|
||||
name : 'set_input_value',
|
||||
actions : function( obj ) {
|
||||
if ( ! _.has( input.input_parent, 'syncElements') || ! _.has( input.input_parent.syncElements, input.id ) ) {
|
||||
throw new Error('WARNING : THE INPUT ' + input.id + ' HAS NO SYNCED ELEMENT.');
|
||||
}
|
||||
}//was 'updateInput'
|
||||
}
|
||||
];
|
||||
|
||||
// 1) Check the input instance to see if the default callback has been overriden in an extended Constructor
|
||||
// ( @see column width module in Nimble Builder to see how the overrides works )
|
||||
// 2) if not, try to find a match with the provided constructor type
|
||||
// => fire the relevant callback with the provided input_options
|
||||
// input.type_map is declared in extend_api_base
|
||||
if ( input[input.type] && _.isFunction( input[input.type]) ) {
|
||||
try { input[input.type]( options.input_options || null ); } catch( er ) {
|
||||
api.errare( 'Error in overriden callback method in input init => for input id :' + input.id + ' in module type : ' + input.module.module_type, er );
|
||||
}
|
||||
} else if ( api.czrInputMap && _.has( api.czrInputMap, input.type ) ) {
|
||||
var _meth = api.czrInputMap[ input.type ];
|
||||
if ( _.isFunction( input[_meth]) ) {
|
||||
try { input[_meth]( options.input_options || null ); } catch( er ) {
|
||||
api.errare( 'Error in input init => for input id :' + input.id + ' in module type : ' + input.module.module_type, er );
|
||||
}
|
||||
} else if ( _.isFunction( api.czrInputMap[ input.type ] ) ) {
|
||||
try { api.czrInputMap[ input.type ].apply( input, [ options.input_options || null ] ); } catch( er ) {
|
||||
api.errare( 'Error in input init => for input id :' + input.id + ' in module type : ' + input.module.module_type, er );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
api.errare('Warning the input : ' + input.id + ' with type ' + input.type + ' has no corresponding method defined in api.czrInputMap.');
|
||||
}
|
||||
|
||||
|
||||
// Visibility => typically used when implementing the input dependencies
|
||||
// true by default
|
||||
input.visible = new api.Value( true );
|
||||
input.isReady.done( function() {
|
||||
input.visible.bind( function( visible ) {
|
||||
if ( visible ) {
|
||||
input.container.stop( true, true ).slideDown( 200 );
|
||||
} else {
|
||||
input.container.stop( true, true ).slideUp( 200 );
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Enabled status => control the toggling of a "disabled" css class => blur + decrease opacity
|
||||
// used for the hueman pro slide module
|
||||
input.enabled = new api.Value( true );
|
||||
input.isReady.done( function() {
|
||||
input.enabled.bind( function( enabled ) {
|
||||
input.container.toggleClass( 'disabled', ! enabled );
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// this method is not fired automatically
|
||||
// It has to be invoked once the input has been instantiated
|
||||
// input instantiation is performed from what is found in the DOM
|
||||
// @see api.CZR_Helpers.setupInputCollectionFromDOM
|
||||
ready : function() {
|
||||
var input = this;
|
||||
input.setupDOMListeners( input.input_event_map , { dom_el : input.container }, input );
|
||||
//Setup individual input listener
|
||||
input.callbacks.add( function() { return input.inputReact.apply( input, arguments ); } );
|
||||
//synchronizer setup
|
||||
//the input instance must be initialized. => initialize method has been done.
|
||||
$.when( input.setupSynchronizer() ).done( function() {
|
||||
input.isReady.resolve( input );
|
||||
} );
|
||||
|
||||
},
|
||||
|
||||
|
||||
//fired when input is intanciated and ready.
|
||||
//=> we must have an input instance to synchronize,
|
||||
//invoking this method in the initialize() method is too early, instance not ready
|
||||
setupSynchronizer: function() {
|
||||
var input = this,
|
||||
input_parent = input.input_parent,
|
||||
$_input_el = input.container.find('[data-czrtype]'),
|
||||
is_textarea = input.container.find('[data-czrtype]').is('textarea');
|
||||
|
||||
//@hack => todo
|
||||
//for text area inputs, the synchronizer is buggy
|
||||
// if ( is_textarea ) {
|
||||
// api.errorLog('TO DO : THE TEXTAREA INPUT ARE NOT IMPLEMENTED YET IN THE SYNCHRONIZER!');
|
||||
// }
|
||||
|
||||
var syncElement = new api.Element( $_input_el );
|
||||
input_parent.syncElements = input_parent.syncElements || {};
|
||||
input_parent.syncElements[input.id] = syncElement;//adds the input syncElement to the collection
|
||||
syncElement.sync( input );//sync with the input instance
|
||||
syncElement.set( input() );
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@return void()
|
||||
//react to a single input change
|
||||
//update the collection of input
|
||||
//cb of input.callbacks.add
|
||||
inputReact : function( to, from, data ) {
|
||||
var input = this,
|
||||
_current_input_parent = input.input_parent(),
|
||||
_new_model = _.clone( _current_input_parent ),//initialize it to the current value
|
||||
_isPreItemInput = input.is_preItemInput;
|
||||
|
||||
//is this input currently enabled ?
|
||||
if ( ! input.enabled() )
|
||||
return;
|
||||
|
||||
// September 2020 => introduced an "inactive" input type in order to display pro info for Nimble
|
||||
// this input should be "hidden" type, and should not trigger an API change.
|
||||
if ( 'inactive' === input.type )
|
||||
return;
|
||||
|
||||
//make sure the _new_model is an object and is not empty
|
||||
_new_model = ( ! _.isObject(_new_model) || _.isEmpty(_new_model) ) ? {} : _new_model;
|
||||
//set the new val to the changed property
|
||||
_new_model[ input.id ] = to;
|
||||
|
||||
//inform the input_parent : item or modOpt
|
||||
input.input_parent.set( _new_model, {
|
||||
input_changed : input.id,
|
||||
input_value : input(),
|
||||
input_transport : input.transport,
|
||||
not_preview_sent : 'postMessage' === input.transport,//<= this parameter set to true will prevent the setting to be sent to the preview ( @see api.Setting.prototype.preview override ). This is useful to decide if a specific input should refresh or not the preview.
|
||||
inputRegistrationParams : input.constructorOptions
|
||||
} );
|
||||
|
||||
//Trigger and send specific events when changing a published input item
|
||||
if ( ! _isPreItemInput ) {
|
||||
//inform the input_parent that an input has changed
|
||||
//=> useful to handle dependant reactions between different inputs
|
||||
input.input_parent.trigger( input.id + ':changed', to );
|
||||
|
||||
//Each input instantiated in an item or a modOpt can have a specific transport set.
|
||||
//the input transport is hard coded in the module js template, with the attribute : data-transport="postMessage" or "refresh"
|
||||
//=> this is optional, if not set, then the transport will be inherited from the one of the module, which is inherited from the control.
|
||||
//send input to the preview. On update only, not on creation.
|
||||
if ( ! _.isEmpty( from ) || ! _.isUndefined( from ) && 'postMessage' === input.transport ) {
|
||||
input.module.sendInputToPreview( {
|
||||
input_id : input.id,
|
||||
input_parent_id : input.input_parent.id,
|
||||
to : to,
|
||||
from : from
|
||||
} );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/*-----------------------------------------
|
||||
SOME DEFAULT CALLBACKS
|
||||
------------------------------------------*/
|
||||
setupColorPicker : function() {
|
||||
var input = this;
|
||||
|
||||
input.container.find('input').iris( {
|
||||
palettes: true,
|
||||
hide:false,
|
||||
change : function( e, o ) {
|
||||
//if the input val is not updated here, it's not detected right away.
|
||||
//weird
|
||||
//is there a "change complete" kind of event for iris ?
|
||||
//$(this).val($(this).wpColorPicker('color'));
|
||||
//input.container.find('[data-czrtype]').trigger('colorpickerchange');
|
||||
|
||||
//synchronizes with the original input
|
||||
//OLD => $(this).val( $(this).wpColorPicker('color') ).trigger('colorpickerchange').trigger('change');
|
||||
$(this).val( o.color.toString() ).trigger('colorpickerchange').trigger('change');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setupColorPickerAlpha : function() {
|
||||
var input = this;
|
||||
|
||||
input.container.find('input').wpColorPicker({
|
||||
palettes: true,
|
||||
//hide:false,
|
||||
width: window.innerWidth >= 1440 ? 271 : 251,
|
||||
change : function( e, o ) {
|
||||
//if the input val is not updated here, it's not detected right away.
|
||||
//weird
|
||||
//is there a "change complete" kind of event for iris ?
|
||||
//$(this).val($(this).wpColorPicker('color'));
|
||||
//input.container.find('[data-czrtype]').trigger('colorpickerchange');
|
||||
|
||||
//synchronizes with the original input
|
||||
//OLD => $(this).val( $(this).wpColorPicker('color') ).trigger('colorpickerchange').trigger('change');
|
||||
$(this).val( o.color.toString() ).trigger('colorpickerchange').trigger('change');
|
||||
},
|
||||
clear : function( e, o ) {
|
||||
//$(this).val('').trigger('colorpickerchange').trigger('change');
|
||||
input('');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setupSelect : function() {
|
||||
var input = this;
|
||||
$('select', input.container ).not('.no-selecter-js')
|
||||
.each( function() {
|
||||
$(this).selecter({
|
||||
//triggers a change event on the view, passing the newly selected value + index as parameters.
|
||||
// callback : function(value, index) {
|
||||
// self.triggerSettingChange( window.event || {} , value, index); // first param is a null event.
|
||||
// }
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setupIcheck : function( obj ) {
|
||||
var input = this;
|
||||
|
||||
$( 'input[type=checkbox]', input.container ).each( function(e) {
|
||||
if ( 0 !== $(this).closest('div[class^="icheckbox"]').length )
|
||||
return;
|
||||
|
||||
$(this).iCheck({
|
||||
checkboxClass: 'icheckbox_flat-grey',
|
||||
checkedClass: 'checked',
|
||||
radioClass: 'iradio_flat-grey',
|
||||
})
|
||||
.on( 'ifChanged', function(e){
|
||||
$(this).val( false === $(this).is(':checked') ? 0 : 1 );
|
||||
$(e.currentTarget).trigger('change');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// DEPRECATED since april 2nd 2019
|
||||
// setupGutenCheck : function( params ) {
|
||||
// var input = this;
|
||||
// var $input = input.container.find('input[type=checkbox]'),
|
||||
// $checkWrapper = $( '.czr-toggle-check', input.container );
|
||||
// var _do_ = function() {
|
||||
// $input.closest('.czr-toggle-check').toggleClass( 'is-checked', $input.is(':checked') );
|
||||
// $checkWrapper.find('svg').remove();
|
||||
// $checkWrapper.append(
|
||||
// ! $input.is(':checked') ? '<svg class="czr-toggle-check__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path></svg>' : '<svg class="czr-toggle-check__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z"></path></svg>'
|
||||
// );
|
||||
// };
|
||||
// $input.on( 'change', _do_ );
|
||||
// _do_();
|
||||
// },
|
||||
|
||||
// when input and label are tied by an id - for relationship
|
||||
// clicking on any of them changes the input
|
||||
// => We need a unique ID here so that input and label are tied by a unique link
|
||||
// The unique ID is generated server side as a GUID
|
||||
// @see https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
|
||||
// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox
|
||||
setupNimbleCheck : function( params ) {
|
||||
var input = this;
|
||||
var $input = input.container.find('input[type=checkbox]'),
|
||||
$checkWrapper = $( '.czr-toggle-check', input.container );
|
||||
var _do_ = function() {};
|
||||
// $input.on( 'change', _do_ );
|
||||
// _do_();
|
||||
},
|
||||
|
||||
setupRadio : function( obj ) {
|
||||
var input = this;
|
||||
$( 'input[type=radio]', input.container ).each( function(e) {
|
||||
if ( 0 !== $(this).closest('div[class^="icheckbox"]').length )
|
||||
return;
|
||||
|
||||
$(this).iCheck({
|
||||
checkboxClass: 'icheckbox_flat-grey',
|
||||
checkedClass: 'checked',
|
||||
radioClass: 'iradio_flat-grey',
|
||||
})
|
||||
.on( 'ifChanged', function(e){
|
||||
$(e.currentTarget).trigger('change');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setupStepper : function( obj ) {
|
||||
var input = this;
|
||||
$('input[type="number"]',input.container ).each( function( e ) {
|
||||
$(this).stepper();
|
||||
});
|
||||
},
|
||||
|
||||
// Empty for the moment, to be overriden
|
||||
setupSimpleRange : function() {},
|
||||
|
||||
//@use rangeslider https://github.com/andreruffert/rangeslider.js
|
||||
setupRangeSlider : function( options ) {
|
||||
var input = this,
|
||||
$handle,
|
||||
_updateHandle = function(el, val) {
|
||||
var _unit = input.container.find('input').data( 'unit' );
|
||||
el.textContent = val + ( _.isEmpty( input.container.find('input').data( 'unit' ) ) ? '' : _unit );
|
||||
};
|
||||
|
||||
$( input.container ).find('input').rangeslider( {
|
||||
// Feature detection the default is `true`.
|
||||
// Set this to `false` if you want to use
|
||||
// the polyfill also in Browsers which support
|
||||
// the native <input type="range"> element.
|
||||
polyfill: false,
|
||||
|
||||
// Default CSS classes
|
||||
rangeClass: 'rangeslider',
|
||||
disabledClass: 'rangeslider--disabled',
|
||||
horizontalClass: 'rangeslider--horizontal',
|
||||
verticalClass: 'rangeslider--vertical',
|
||||
fillClass: 'rangeslider__fill',
|
||||
handleClass: 'rangeslider__handle',
|
||||
|
||||
// Callback function
|
||||
onInit: function() {
|
||||
$handle = $('.rangeslider__handle', this.$range);
|
||||
$('.rangeslider__handle', this.$range);
|
||||
_updateHandle( $handle[0], this.value );
|
||||
},
|
||||
// Callback function
|
||||
onSlide: function(position, value) {
|
||||
_updateHandle( $handle[0], value );
|
||||
},
|
||||
// Callback function
|
||||
//onSlideEnd: function(position, value) {}
|
||||
} );
|
||||
// .on('input', function() {
|
||||
// _updateHandle( $handle[0], this.value );
|
||||
// });
|
||||
},
|
||||
|
||||
// for h_alignment and h_text_alignment types
|
||||
setupHAlignement : function( input_options ) {
|
||||
var input = this,
|
||||
$wrapper = $('.sek-h-align-wrapper', input.container );
|
||||
// on init
|
||||
$wrapper.find( 'div[data-sek-align="' + input() +'"]' ).addClass('selected');
|
||||
|
||||
// on click
|
||||
$wrapper.on( 'click', '[data-sek-align]', function(evt) {
|
||||
evt.preventDefault();
|
||||
$wrapper.find('.selected').removeClass('selected');
|
||||
$.when( $(this).addClass('selected') ).done( function() {
|
||||
input( $(this).data('sek-align') );
|
||||
});
|
||||
});
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
var CZRInputMths = CZRInputMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRInputMths , {
|
||||
// callback for data-input-type="upload"
|
||||
setupImageUploaderSaveAsId : function() {
|
||||
this.setupImageUploader();
|
||||
},
|
||||
|
||||
// callback for data-input-type="upload_url"
|
||||
setupImageUploaderSaveAsUrl : function() {
|
||||
this.setupImageUploader( { save_as_url : true } );
|
||||
},
|
||||
|
||||
//@param args { save_as_url : false }
|
||||
setupImageUploader : function( args ) {
|
||||
var input = this,
|
||||
_model = input();
|
||||
|
||||
args = _.extend( { save_as_url : false }, args || {} );
|
||||
input.save_as_url = args.save_as_url;
|
||||
|
||||
//an instance field where we'll store the current attachment
|
||||
input.attachment = {};
|
||||
|
||||
//do we have an html template and a input container?
|
||||
if ( ! input.container )
|
||||
return this;
|
||||
|
||||
input.tmplRendered = $.Deferred();
|
||||
input.setupContentRendering( _model, {} );
|
||||
|
||||
//valid just in the init
|
||||
input.tmplRendered
|
||||
.done( function(){
|
||||
input.czrImgUploaderBinding();
|
||||
})
|
||||
.fail( function() {
|
||||
api.errorLog( 'setupImageUploader => failed to fetch the template.');
|
||||
});
|
||||
},
|
||||
|
||||
setupContentRendering : function( to, from ) {
|
||||
var input = this, _attachment;
|
||||
//retrieve new image if 'to' is different from the saved one
|
||||
//NEED A BETTER WAY?
|
||||
if ( ( input.attachment.id != to ) && from !== to ) {
|
||||
if ( _.isEmpty( to ) ) {
|
||||
input.attachment = {};
|
||||
input.renderImageUploaderTemplate();
|
||||
// handles the case when a url is provided
|
||||
// Occurs for example when contextualizing the header_image with skope
|
||||
} else if ( ! _.isNumber( to ) ) {
|
||||
input.renderImageUploaderTemplate( { fromUrl : true, url : to });
|
||||
}
|
||||
//Has this image already been fetched ?
|
||||
_attachment = wp.media.attachment( to );
|
||||
if ( _.isObject( _attachment ) && _.has( _attachment, 'attributes' ) && _.has( _attachment.attributes, 'sizes' ) ) {
|
||||
input.attachment = _attachment.attributes;
|
||||
input.renderImageUploaderTemplate();
|
||||
}
|
||||
// If not, try to fetch it but only if the candidate "to" is a number
|
||||
else {
|
||||
if ( _.isNumber( to ) ) {
|
||||
wp.media.attachment( to ).fetch().done( function() {
|
||||
input.attachment = this.attributes;
|
||||
input.renderImageUploaderTemplate();
|
||||
}).fail( function() {
|
||||
api.errorLog('renderImageUploaderTemplate => failed attempt to fetch an img with id : ' + to );
|
||||
// input.attachment = {};
|
||||
// input.renderImageUploaderTemplate();
|
||||
});
|
||||
}
|
||||
}
|
||||
}//Standard reaction, the image has been updated by the user or init
|
||||
else if ( ! input.attachment.id || input.attachment.id === to ) {
|
||||
input.renderImageUploaderTemplate();
|
||||
}
|
||||
},
|
||||
|
||||
czrImgUploaderBinding : function() {
|
||||
var input = this;
|
||||
//Bind events
|
||||
// Shortcut so that we don't have to use _.bind every time we add a callback.
|
||||
_.bindAll( input, 'czrImgUploadRemoveFile', 'czrImgUploadOpenFrame', 'czrImgUploadSelect');
|
||||
|
||||
// Bind events, with delegation to facilitate re-rendering.
|
||||
input.container.on( 'click keydown', '.upload-button', input.czrImgUploadOpenFrame );
|
||||
input.container.on( 'click keydown', '.thumbnail-image img', input.czrImgUploadOpenFrame );
|
||||
input.container.on( 'click keydown', '.remove-button', input.czrImgUploadRemoveFile );
|
||||
|
||||
input.bind( input.id + ':changed', function( to, from ){
|
||||
input.tmplRendered = $.Deferred();
|
||||
input.setupContentRendering( to, from );
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Open the media modal.
|
||||
*/
|
||||
czrImgUploadOpenFrame: function( event ) {
|
||||
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if ( ! this.frame ) {
|
||||
this.czrImgUploadInitFrame();
|
||||
}
|
||||
|
||||
this.frame.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a media modal select frame, and store it so the instance can be reused when needed.
|
||||
*/
|
||||
czrImgUploadInitFrame: function() {
|
||||
var input = this,
|
||||
button_labels = this.getUploaderLabels();
|
||||
|
||||
input.frame = wp.media({
|
||||
button: {
|
||||
text: button_labels.frame_button
|
||||
},
|
||||
states: [
|
||||
new wp.media.controller.Library({
|
||||
title: button_labels.frame_title,
|
||||
library: wp.media.query({ type: 'image' }),
|
||||
multiple: false,
|
||||
date: false
|
||||
})
|
||||
]
|
||||
});
|
||||
// When a file is selected, run a callback.
|
||||
input.frame.on( 'select', input.czrImgUploadSelect );
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the "Remove" link is clicked. Empties the setting.
|
||||
*
|
||||
* @param {object} event jQuery Event object
|
||||
*/
|
||||
czrImgUploadRemoveFile: function( event ) {
|
||||
var input = this;
|
||||
|
||||
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
//reset the attachment class field
|
||||
input.attachment = {};
|
||||
//set the model
|
||||
input.set('');
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Callback handler for when an attachment is selected in the media modal.
|
||||
* Gets the selected image information, and sets it within the input.
|
||||
*/
|
||||
czrImgUploadSelect: function() {
|
||||
var node,
|
||||
input = this,
|
||||
attachment = input.frame.state().get( 'selection' ).first().toJSON(), // Get the attachment from the modal frame.
|
||||
mejsSettings = window._wpmejsSettings || {};
|
||||
//save the attachment in a class field
|
||||
input.attachment = attachment;
|
||||
//set the model
|
||||
input.set( input.save_as_url ? attachment.url : attachment.id );
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
/// HELPERS
|
||||
//////////////////////////////////////////////////
|
||||
// @param args = { fromUrl : true, url : to } || null
|
||||
renderImageUploaderTemplate: function( args ) {
|
||||
var input = this;
|
||||
args = _.extend( { fromUrl : false, url : '' }, args || {} );
|
||||
|
||||
// //do we have view template script?
|
||||
// if ( 0 === $( '#tmpl-czr-input-img-uploader-view-content' ).length ) {
|
||||
// throw new Error('renderImageUploaderTemplate => Missing template for input ' + input.id );
|
||||
// }
|
||||
|
||||
|
||||
// var view_template = wp.template('czr-input-img-uploader-view-content');
|
||||
|
||||
// // do we have an html template and a module container?
|
||||
// if ( ! view_template || ! input.container )
|
||||
// return;
|
||||
|
||||
var $_view_el = input.container.find('.' + input.module.control.css_attr.img_upload_container );
|
||||
|
||||
if ( ! $_view_el.length || 1 > input.container.length )
|
||||
return;
|
||||
|
||||
var _template_params = {
|
||||
button_labels : input.getUploaderLabels(),
|
||||
settings : input.id,
|
||||
attachment : input.attachment,
|
||||
fromUrl : args.url,
|
||||
canUpload : true
|
||||
};
|
||||
|
||||
if ( $('#tmpl-czr-img-uploader').length > 0 ) {
|
||||
$_view_el.html( wp.template( 'czr-img-uploader' )( _template_params ) );
|
||||
input.tmplRendered.resolve();
|
||||
input.container.trigger( input.id + ':content_rendered' );
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( {
|
||||
tmpl : 'img-uploader',
|
||||
module_type: 'all_modules',
|
||||
module_id : input.module.id
|
||||
} ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'renderModuleParts => success response =>', input.module.id, _serverTmpl_);
|
||||
$_view_el.html( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( _template_params ) );
|
||||
input.tmplRendered.resolve();
|
||||
input.container.trigger( input.id + ':content_rendered' );
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'renderModuleParts => fail response =>', _r_);
|
||||
input.tmplRendered.reject( 'renderImageUploaderTemplate => Problem when fetching the tmpl from server for module : '+ input.module.id );
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
getUploaderLabels : function() {
|
||||
var _ts = serverControlParams.i18n,
|
||||
input = this,
|
||||
_map = {
|
||||
'select' : _ts.select_image,
|
||||
'change' : _ts.change_image,
|
||||
'remove' : _ts.remove_image,
|
||||
'default' : _ts.default_image,
|
||||
'placeholder' : _ts.placeholder_image,
|
||||
'frame_title' : _ts.frame_title_image,
|
||||
'frame_button': _ts.frame_button_image
|
||||
};
|
||||
|
||||
//are we fine ?
|
||||
var _fallbackmap = {};
|
||||
_.each( _map, function( ts_string, key ) {
|
||||
if ( _.isEmpty( ts_string ) ) {
|
||||
api.errorLog( 'A translated string is missing ( ' + key + ' ) for the image uploader input in module : ' + input.module.id );
|
||||
_fallbackmap[ key ] = key;
|
||||
return;
|
||||
} else {
|
||||
_fallbackmap[ key ] = ts_string;
|
||||
}
|
||||
});
|
||||
|
||||
return _fallbackmap;
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+270
@@ -0,0 +1,270 @@
|
||||
/* Fix caching, czrSelect2 default one seems to not correctly work, or it doesn't what I think it should */
|
||||
// the content_picker options are set in the module with :
|
||||
// $.extend( module.inputOptions, {
|
||||
// 'content_picker' : {
|
||||
// post : '',//<= all post types
|
||||
// taxonomy : ''//<= all taxonomy types
|
||||
// }
|
||||
// });
|
||||
// To narrow down the post or taxonomy types, the option can be set this way :
|
||||
// $.extend( module.inputOptions, {
|
||||
// 'content_picker' : {
|
||||
// post : [ 'page', 'cpt1', ...]
|
||||
// taxonomy : [ 'category', 'tag', 'Custom_Tax_1', ... ]
|
||||
// }
|
||||
// });
|
||||
// To disable all posts or taxonomy, use '_none_'
|
||||
// $.extend( module.inputOptions, {
|
||||
// 'content_picker' : {
|
||||
// post : [ 'page', 'cpt1', ...]
|
||||
// taxonomy : '_none_' //<= won't load or search in taxonomies when requesting wp in ajax
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// input is an object structured this way
|
||||
// {
|
||||
// id:"2838"
|
||||
// object_type:"post"
|
||||
// title:"The Importance of Water and Drinking Lots Of It"
|
||||
// type_label:"Post"
|
||||
// url:"http://customizr-dev.dev/?p=2838"
|
||||
// }
|
||||
var CZRInputMths = CZRInputMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRInputMths , {
|
||||
// fired in the input::initialize()
|
||||
setupContentPicker: function( wpObjectTypes ) {
|
||||
var input = this,
|
||||
_event_map = [];
|
||||
|
||||
/* Dummy for the prototype purpose */
|
||||
//input.object = ['post']; //this.control.params.object_types - array('page', 'post')
|
||||
$.extend( _.isObject( wpObjectTypes ) ? wpObjectTypes : {}, {
|
||||
post : '',
|
||||
taxonomy : ''
|
||||
} );
|
||||
|
||||
input.wpObjectTypes = wpObjectTypes;
|
||||
|
||||
/* Methodize this or use a template */
|
||||
input.container.find('.czr-input').append('<select data-select-type="content-picker-select" class="js-example-basic-simple"></select>');
|
||||
|
||||
// Overrides the default input_event_map declared in ::initialize()
|
||||
input.input_event_map = [
|
||||
//set input value
|
||||
{
|
||||
trigger : 'change',
|
||||
selector : 'select[data-select-type]',
|
||||
name : 'set_input_value',
|
||||
actions : function( obj ){
|
||||
var $_changed_input = $( obj.dom_event.currentTarget, obj.dom_el ),
|
||||
_raw_val = $( $_changed_input, obj.dom_el ).czrSelect2( 'data' ),
|
||||
_val_candidate = {},
|
||||
_default = {
|
||||
id : '',
|
||||
type_label : '',
|
||||
title : '',
|
||||
object_type : '',
|
||||
url : ''
|
||||
};
|
||||
|
||||
_raw_val = _.isArray( _raw_val ) ? _raw_val[0] : _raw_val;
|
||||
if ( ! _.isObject( _raw_val ) || _.isEmpty( _raw_val ) ) {
|
||||
api.errare( 'Content Picker Input : the picked value should be an object not empty.');
|
||||
return;
|
||||
}
|
||||
|
||||
//normalize and purge useless czrSelect2 fields
|
||||
//=> skip a possible _custom_ id, used for example in the slider module to set a custom url
|
||||
_.each( _default, function( val, k ){
|
||||
if ( '_custom_' !== _raw_val.id ) {
|
||||
if ( ! _.has( _raw_val, k ) || _.isEmpty( _raw_val[ k ] ) ) {
|
||||
api.errare( 'content_picker : missing input param : ' + k );
|
||||
return;
|
||||
}
|
||||
}
|
||||
_val_candidate[ k ] = _raw_val[ k ];
|
||||
} );
|
||||
//set the value now
|
||||
input.set( _val_candidate );
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
//input.setupDOMListeners( _event_map , { dom_el : input.container }, input );
|
||||
//setup when ready.
|
||||
input.isReady.done( function() {
|
||||
input.setupContentSelecter();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
// input is an object structured this way
|
||||
// {
|
||||
// id:"2838"
|
||||
// object_type:"post"
|
||||
// title:"The Importance of Water and Drinking Lots Of It"
|
||||
// type_label:"Post"
|
||||
// url:"http://customizr-dev.dev/?p=2838"
|
||||
// }
|
||||
setupContentSelecter : function() {
|
||||
var input = this;
|
||||
//set the previously selected value
|
||||
if ( ! _.isEmpty( input() ) ) {
|
||||
var _attributes = {
|
||||
value : input().id || '',
|
||||
title : input().title || '',
|
||||
selected : "selected"
|
||||
};
|
||||
//input.container.find('select')
|
||||
input.container.find('select').append( $( '<option>', _attributes ) );
|
||||
}
|
||||
|
||||
// Stores the current ajax action
|
||||
input.currentAjaxAction = input.currentAjaxAction || new api.Value();
|
||||
|
||||
// When the ajax action changes, reset the rendering status of the defaultContentPickerOption
|
||||
// fixes "Set Custom Url" being printed multiple times, @see https://github.com/presscustomizr/nimble-builder/issues/207
|
||||
input.currentAjaxAction.bind( function( ajaxAction ) {
|
||||
input.defaultValueHasBeenPushed = false;
|
||||
});
|
||||
|
||||
// reset the rendering status of the defaultContentPickerOption
|
||||
// fixes "Set Custom Url" being printed multiple times, @see https://github.com/presscustomizr/nimble-builder/issues/207
|
||||
input.container.find( 'select' ).on('czrSelect2:select czrSelect2:unselect czrSelect2:close czrSelect2:open', function (e) {
|
||||
input.defaultValueHasBeenPushed = false;
|
||||
});
|
||||
|
||||
input.container.find( 'select' ).czrSelect2( {
|
||||
placeholder: {
|
||||
id: '-1', // the value of the option
|
||||
title: 'Select'
|
||||
},
|
||||
data : input.setupSelectedContents(),
|
||||
// allowClear: true,
|
||||
ajax: {
|
||||
url: wp.ajax.settings.url,// was serverControlParams.AjaxUrl,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
debug: true,
|
||||
data: function ( params ) {
|
||||
//for some reason I'm not getting at the moment the params.page returned when searching is different
|
||||
var page = params.page ? params.page : 0;
|
||||
page = params.term ? params.page : page;
|
||||
|
||||
// Set the current ajax action now
|
||||
input.currentAjaxAction( params.term ? "search-available-content-items-customizer" : "load-available-content-items-customizer" );
|
||||
|
||||
return {
|
||||
action : input.currentAjaxAction(),
|
||||
search : params.term,
|
||||
wp_customize : 'on',
|
||||
page : page,
|
||||
wp_object_types : JSON.stringify( input.wpObjectTypes ),
|
||||
nonce : api.settings.nonce.save
|
||||
};
|
||||
},
|
||||
// transport: function (params, success, failure) {
|
||||
// console.log('params', params );
|
||||
// console.log('success', success );
|
||||
// console.log('failure', failure );
|
||||
// var $request = $.ajax(params);
|
||||
|
||||
// $request.then(success);
|
||||
// $request.fail(failure);
|
||||
|
||||
// return $request;
|
||||
// },
|
||||
processResults: function ( data, params ) {
|
||||
//allows us to remotely set a default option like custom link when initializing the content picker input.
|
||||
var defaultContentPickerOption = { defaultOption : {
|
||||
id : '',
|
||||
title : '',
|
||||
type_label : '',
|
||||
object_type : '',
|
||||
url : ''
|
||||
}
|
||||
};
|
||||
if ( input.input_parent && input.input_parent.module ) {
|
||||
input.input_parent.module.trigger( 'set_default_content_picker_options', { defaultContentPickerOption : defaultContentPickerOption } );
|
||||
} else {
|
||||
api.infoLog(' content_picker input => ::processResults => event "set_default_content_picker_option" not triggered when in pre-item');
|
||||
}
|
||||
|
||||
if ( ! data.success ) {
|
||||
api.errare('request failure in setupContentPicker => processResults', data );
|
||||
return { results: defaultContentPickerOption.defaultOption };
|
||||
}
|
||||
|
||||
var items = data.data.items,
|
||||
_results = [];
|
||||
|
||||
// cast items to an array
|
||||
items = !_.isArray( items ) ? [] : items;
|
||||
|
||||
input.defaultValueHasBeenPushed = input.defaultValueHasBeenPushed || false;
|
||||
|
||||
if ( 'load-available-content-items-customizer' === input.currentAjaxAction() && ! _.isEmpty( defaultContentPickerOption.defaultOption ) ) {
|
||||
if ( defaultContentPickerOption.defaultOption.id && ! input.defaultValueHasBeenPushed ) {
|
||||
_results.push( defaultContentPickerOption.defaultOption );
|
||||
input.defaultValueHasBeenPushed = true;
|
||||
}
|
||||
}
|
||||
|
||||
_.each( items, function( item ) {
|
||||
_results.push({
|
||||
id : item.id,
|
||||
title : item.title,
|
||||
type_label : item.type_label,
|
||||
object_type : item.object,
|
||||
url : item.url
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
results: _results,
|
||||
//The pagination param will trigger the infinite load
|
||||
//@to be improved
|
||||
pagination: { more: items.length >= 1 }//<= the pagination boolean param can be tricky => here set to >= 10 because we query 10 + add a custom link item on the first query
|
||||
};
|
||||
},
|
||||
},//ajax
|
||||
templateSelection: input.czrFormatContentSelected,
|
||||
templateResult: input.czrFormatContentSelected,
|
||||
escapeMarkup: function ( markup ) { return markup; },
|
||||
});//czrSelect2 setup
|
||||
},
|
||||
|
||||
// item is structured this way :
|
||||
// {
|
||||
// id : item.id,
|
||||
// title : item.title,
|
||||
// type_label : item.type_label,
|
||||
// object_type : item.object,
|
||||
// url : item.url
|
||||
// }
|
||||
czrFormatContentSelected: function ( item ) {
|
||||
if ( item.loading ) return item.text;
|
||||
var markup = "<div class='content-picker-item'>" +
|
||||
"<div class='content-item-bar'>" +
|
||||
"<span class='czr-picker-item-title'>" + item.title + "</span>";
|
||||
|
||||
if ( item.type_label ) {
|
||||
markup += "<span class='czr-picker-item-type'>" + item.type_label + "</span>";
|
||||
}
|
||||
|
||||
markup += "</div></div>";
|
||||
|
||||
return markup;
|
||||
},
|
||||
|
||||
setupSelectedContents : function() {
|
||||
var input = this,
|
||||
_model = input();
|
||||
|
||||
return _model;
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
//extends api.Value
|
||||
//options:
|
||||
// id : item.id,
|
||||
// initial_item_model : item,
|
||||
// defaultItemModel : module.defaultItemModel,
|
||||
// module : module,
|
||||
// is_added_by_user : is_added_by_user || false
|
||||
|
||||
var CZRItemMths = CZRItemMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRItemMths , {
|
||||
initialize: function( id, options ) {
|
||||
if ( _.isUndefined(options.module) || _.isEmpty(options.module) ) {
|
||||
throw new Error('No module assigned to item ' + id + '. Aborting');
|
||||
}
|
||||
|
||||
var item = this;
|
||||
api.Value.prototype.initialize.call( item, null, options );
|
||||
|
||||
//DEFERRED STATES
|
||||
//store the state of ready.
|
||||
//=> we don't want the ready method to be fired several times
|
||||
item.isReady = $.Deferred();
|
||||
//will store the embedded and content rendered state
|
||||
item.embedded = $.Deferred();
|
||||
item.container = null;//will store the item $ dom element
|
||||
item.contentContainer = null;//will store the item content $ dom element
|
||||
|
||||
// this collection will be populated based on the DOM rendered input candidates
|
||||
// will allows us to set and get any individual input : item.czr_Input('font-family')()
|
||||
// declaring the collection Values here allows us to schedule actions for not yet registered inputs
|
||||
// like for example :
|
||||
// => when the font-family input is registered, then listen to it
|
||||
// item.czr_Input.when( 'font-family', function( _input_ ) {
|
||||
// _input_.bind( function( to, from ) {
|
||||
// console.log('font-family input changed ', to ,from );
|
||||
// });
|
||||
// });
|
||||
item.czr_Input = new api.Values();
|
||||
|
||||
// the item.inputCollection stores all instantiated input from DOM at the end of api.CZR_Helpers.setupInputCollectionFromDOM.call( item );
|
||||
// the collection of each individual input object is stored in item.czr_Input()
|
||||
// this inputCollection is designed to be listened to, in order to fire action when the collection has been populated.
|
||||
item.inputCollection = new api.Value({});
|
||||
|
||||
//VIEW STATES FOR ITEM AND REMOVE DIALOG
|
||||
//viewState stores the current expansion status of a given view => one value by created by item.id
|
||||
//viewState can take 3 values : expanded, expanded_noscroll (=> used on view creation), closed
|
||||
item.viewState = new api.Value( 'closed' );
|
||||
item.removeDialogVisible = new api.Value( false );
|
||||
|
||||
//input.options = options;
|
||||
//write the options as properties, name is included
|
||||
$.extend( item, options || {} );
|
||||
|
||||
//declares a default model
|
||||
item.defaultItemModel = _.clone( options.defaultItemModel ) || { id : '', title : '' };
|
||||
|
||||
//set initial values
|
||||
var _initial_model = $.extend( item.defaultItemModel, options.initial_item_model );
|
||||
|
||||
// Check initial model here : to be overriden in each module
|
||||
_initial_model = item.validateItemModelOnInitialize( _initial_model );
|
||||
|
||||
//this won't be listened to at this stage
|
||||
item.set( _initial_model );
|
||||
|
||||
//USER EVENT MAP
|
||||
item.userEventMap = new api.Value( [
|
||||
//toggles remove view alert
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : [ '.' + item.module.control.css_attr.display_alert_btn, '.' + item.module.control.css_attr.cancel_alert_btn ].join(','),
|
||||
name : 'toggle_remove_alert',
|
||||
actions : ['toggleRemoveAlert']
|
||||
},
|
||||
//removes item and destroys its view
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.' + item.module.control.css_attr.remove_view_btn,
|
||||
name : 'remove_item',
|
||||
actions : ['removeItem']
|
||||
},
|
||||
//edit view
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : [ '.' + item.module.control.css_attr.edit_view_btn, '.' + item.module.control.css_attr.item_title ].join(','),
|
||||
name : 'edit_view',
|
||||
actions : [ 'setViewVisibility' ]
|
||||
},
|
||||
//clone view
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.czr-clone-item',
|
||||
name : 'clone_view',
|
||||
actions : function( args ) {
|
||||
args = args || {};
|
||||
var _cloned_item_model = $.extend( {}, true, item() );
|
||||
_cloned_item_model.id = '';
|
||||
this.module.addItem( args, _cloned_item_model ).done( function() {
|
||||
// Nimble Builder => make sure the dynamic stylesheet is refreshed
|
||||
if ( window.sektionsLocalizedData && api.czr_skopeBase ) {
|
||||
api.previewer.trigger( 'sek-refresh-stylesheet', {
|
||||
local_skope_id : api.czr_skopeBase.getSkopeProperty( 'skope_id' ),
|
||||
location_skope_id : sektionsLocalizedData.globalSkopeId
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//tabs navigation
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.tabs nav li',
|
||||
name : 'tab_nav',
|
||||
actions : function( args ) {
|
||||
//toggleTabVisibility is declared in the module ctor and its "this" is the item or the modOpt
|
||||
var tabIdSwitchedTo = $( args.dom_event.currentTarget, args.dom_el ).data('tab-id');
|
||||
this.module.toggleTabVisibility.call( this, tabIdSwitchedTo );
|
||||
this.trigger( 'tab-switch', { id : tabIdSwitchedTo } );
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
//ITEM IS READY
|
||||
//1) push it to the module item collection
|
||||
//2) observe its changes
|
||||
item.isReady.done( function() {
|
||||
//push it to the collection
|
||||
item.module.updateItemsCollection( { item : item() } );
|
||||
//listen to each single item change
|
||||
item.callbacks.add( function() { return item.itemReact.apply(item, arguments ); } );
|
||||
|
||||
//SCHEDULE INPUTS SETUP
|
||||
//=> when the item content has been rendered. Typically on item expansion for a multi-items module.
|
||||
// => or for mono item, right on item.renderItemWrapper()
|
||||
item.bind( 'contentRendered', function() {
|
||||
//create the collection of inputs if needed
|
||||
//first time or after a removal
|
||||
// previous condition included : ! _.has( item, 'czr_Input' )
|
||||
if ( _.isEmpty( item.inputCollection() ) ) {
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
api.CZR_Helpers.setupInputCollectionFromDOM.call( item );
|
||||
//the item.container is now available
|
||||
//Setup the tabs navigation
|
||||
//setupTabNav is defined in the module ctor and its this is the item or the modOpt
|
||||
item.module.setupTabNav.call( item );
|
||||
} else {
|
||||
try {
|
||||
api.CZR_Helpers.setupInputCollectionFromDOM.call( item );
|
||||
//the item.container is now available
|
||||
//Setup the tabs navigation
|
||||
//setupTabNav is defined in the module ctor and its this is the item or the modOpt
|
||||
item.module.setupTabNav.call( item );
|
||||
} catch( er ) {
|
||||
api.errorLog( 'In item.isReady.done : ' + er );
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//SCHEDULE INPUTS DESTROY
|
||||
item.bind( 'contentRemoved', function() {
|
||||
if ( _.has( item, 'czr_Input' ) )
|
||||
api.CZR_Helpers.removeInputCollection.call( item );
|
||||
});
|
||||
|
||||
//When shall we render the item ?
|
||||
//If the module is part of a simple control, the item can be render now,
|
||||
if ( item.canBeRendered() ) {
|
||||
item.mayBeRenderItemWrapper();
|
||||
}
|
||||
|
||||
//ITEM WRAPPER VIEW SETUP
|
||||
//defer actions on item view embedded
|
||||
item.embedded.done( function() {
|
||||
//define the item view DOM event map
|
||||
//bind actions when the item is embedded : item title, etc.
|
||||
item.itemWrapperViewSetup( _initial_model );
|
||||
});
|
||||
});//item.isReady.done()
|
||||
|
||||
//if an item is manually added : open it
|
||||
// if ( item.is_added_by_user ) {
|
||||
// item.setViewVisibility( {}, true );//empty obj because this method can be fired by the dom chain actions, always passing an object. true for added_by_user
|
||||
// }
|
||||
//item.setViewVisibility( {}, item.is_added_by_user );
|
||||
|
||||
},//initialize
|
||||
|
||||
//overridable method
|
||||
//Fired if the item has been instantiated
|
||||
//The item.callbacks are declared.
|
||||
ready : function() {
|
||||
// July 2021 introduced so we can remotely add visibility functions
|
||||
api.trigger('czr_module_item_is_ready', {
|
||||
module_type : this.module.module_type,
|
||||
item : this
|
||||
});
|
||||
this.isReady.resolve();
|
||||
},
|
||||
|
||||
// overridable method introduced with the flat skope
|
||||
// problem to solve => an instantiated item, doesn't necessary have to be rendered in a given context.
|
||||
canBeRendered : function() {
|
||||
return true;
|
||||
},
|
||||
|
||||
// @return validated model object
|
||||
// To be overriden in each module
|
||||
validateItemModelOnInitialize : function( item_model_candidate ) {
|
||||
return item_model_candidate;
|
||||
},
|
||||
|
||||
// React to a single item change
|
||||
// cb of module.czr_Item( item.id ).callbacks
|
||||
// the params can typically hold informations passed by the input that has been changed and its specific preview transport (can be PostMessage )
|
||||
// params looks like :
|
||||
// {
|
||||
// module : {}
|
||||
// input_changed : string input.id
|
||||
// input_transport : 'postMessage' or '',
|
||||
// not_preview_sent : bool
|
||||
// }
|
||||
itemReact : function( to, from, params ) {
|
||||
var item = this,
|
||||
module = item.module;
|
||||
|
||||
params = params || {};
|
||||
|
||||
//update the collection
|
||||
module.updateItemsCollection( { item : to, params : params } ).done( function() {
|
||||
//Always update the view title when the item collection has been updated
|
||||
item.writeItemViewTitle( to, params );
|
||||
});
|
||||
|
||||
//send item to the preview. On update only, not on creation.
|
||||
// if ( ! _.isEmpty(from) || ! _.isUndefined(from) ) {
|
||||
// api.consoleLog('DO WE REALLY NEED TO SEND THIS TO THE PREVIEW WITH _sendItem(to, from) ?');
|
||||
// item._sendItem(to, from);
|
||||
// }
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
//extends api.CZRBaseControl
|
||||
|
||||
var CZRItemMths = CZRItemMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRItemMths , {
|
||||
//The idea is to send only the currently modified item instead of the entire collection
|
||||
//the entire collection is sent anyway on api(setId).set( value ), and accessible in the preview via api(setId).bind( fn( to) )
|
||||
_sendItem : function( to, from ) {
|
||||
var item = this,
|
||||
module = item.module,
|
||||
_changed_props = [];
|
||||
|
||||
//which property(ies) has(ve) changed ?
|
||||
_.each( from, function( _val, _key ) {
|
||||
if ( _val != to[_key] )
|
||||
_changed_props.push(_key);
|
||||
});
|
||||
|
||||
_.each( _changed_props, function( _prop ) {
|
||||
api.previewer.send( 'sub_setting', {
|
||||
set_id : module.control.id,
|
||||
id : to.id,
|
||||
changed_prop : _prop,
|
||||
value : to[_prop]
|
||||
});
|
||||
|
||||
//add a hook here
|
||||
module.trigger('item_sent', { item : to , dom_el: item.container, changed_prop : _prop } );
|
||||
});
|
||||
},
|
||||
|
||||
// fired on click event
|
||||
// @see initialize()
|
||||
toggleRemoveAlert : function() {
|
||||
var _isVisible = this.removeDialogVisible();
|
||||
this.module.closeRemoveDialogs();
|
||||
this.removeDialogVisible( ! _isVisible );
|
||||
},
|
||||
|
||||
//fired on click dom event
|
||||
//for dynamic multi input modules
|
||||
//@return void()
|
||||
//@param params : { dom_el : {}, dom_event : {}, event : {}, model {} }
|
||||
removeItem : function( params ) {
|
||||
params = params || {};
|
||||
var item = this,
|
||||
module = this.module,
|
||||
_new_collection = _.clone( module.itemCollection() );
|
||||
|
||||
//hook here
|
||||
module.trigger('pre_item_dom_remove', item() );
|
||||
|
||||
//destroy the Item DOM el
|
||||
item._destroyView();
|
||||
|
||||
//new collection
|
||||
//say it
|
||||
_new_collection = _.without( _new_collection, _.findWhere( _new_collection, {id: item.id }) );
|
||||
module.itemCollection.set( _new_collection );
|
||||
//hook here
|
||||
module.trigger('pre_item_api_remove', item() );
|
||||
|
||||
var _item_ = $.extend( true, {}, item() );
|
||||
|
||||
// <REMOVE THE ITEM FROM THE COLLECTION>
|
||||
module.czr_Item.remove( item.id );
|
||||
// </REMOVE THE ITEM FROM THE COLLECTION>
|
||||
|
||||
//refresh the preview frame (only needed if transport is postMessage && has no partial refresh set )
|
||||
//must be a dom event not triggered
|
||||
//otherwise we are in the init collection case where the items are fetched and added from the setting in initialize
|
||||
if ( 'postMessage' == api(module.control.id).transport && _.has( params, 'dom_event') && ! _.has( params.dom_event, 'isTrigger' ) && ! api.CZR_Helpers.hasPartRefresh( module.control.id ) ) {
|
||||
// api.previewer.refresh().done( function() {
|
||||
// _dfd_.resolve();
|
||||
// });
|
||||
// It would be better to wait for the refresh promise
|
||||
// The following approach to bind and unbind when refreshing the preview is similar to the one coded in module::addItem()
|
||||
var triggerEventWhenPreviewerReady = function() {
|
||||
api.previewer.unbind( 'ready', triggerEventWhenPreviewerReady );
|
||||
module.trigger( 'item-removed', _item_ );
|
||||
};
|
||||
api.previewer.bind( 'ready', triggerEventWhenPreviewerReady );
|
||||
api.previewer.refresh();
|
||||
} else {
|
||||
module.trigger( 'item-removed', _item_ );
|
||||
module.control.trigger( 'item-removed', _item_ );
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//@return the item {...} from the collection
|
||||
//takes a item unique id as param
|
||||
getModel : function(id) {
|
||||
return this();
|
||||
}
|
||||
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+500
@@ -0,0 +1,500 @@
|
||||
|
||||
//extends api.CZRBaseControl
|
||||
var CZRItemMths = CZRItemMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRItemMths , {
|
||||
//fired on initialize for items in module embedded in a regular control
|
||||
mayBeRenderItemWrapper : function() {
|
||||
var item = this;
|
||||
|
||||
if ( 'pending' != item.embedded.state() )
|
||||
return;
|
||||
// Make sure we don't print twice
|
||||
if ( ! _.isEmpty( item.container ) && item.container.length > 0 )
|
||||
return;
|
||||
|
||||
$.when( item.renderItemWrapper() ).done( function( $_container ) {
|
||||
item.container = $_container;
|
||||
if ( _.isUndefined( item.container ) || ! item.container.length ) {
|
||||
throw new Error( 'In mayBeRenderItemWrapper the Item view has not been rendered : ' + item.id );
|
||||
} else {
|
||||
//say it
|
||||
item.embedded.resolve();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//the view wrapper has been rendered by WP
|
||||
//the content ( the various inputs ) is rendered by the following methods
|
||||
//an event is triggered on the control.container when content is rendered
|
||||
renderItemWrapper : function( _item_model_ ) {
|
||||
//=> an array of objects
|
||||
var item = this,
|
||||
module = item.module,
|
||||
dfd = $.Deferred(),
|
||||
$_view_el;
|
||||
|
||||
// Create a deep copy of the item, so we can inject custom properties before parsing the template, without affecting the original item
|
||||
var item_model_for_template_injection = $.extend( true, {}, _item_model_ || item() );
|
||||
|
||||
var appendAndResolve = function( _tmpl_ ) {
|
||||
//if module is multi item, then render the item crud header part
|
||||
//Note : for the widget module, the getTemplateSelectorPart method is overridden
|
||||
if ( module.isMultiItem() ) {
|
||||
//do we have an html template ?
|
||||
if ( _.isEmpty( _tmpl_ ) ) {
|
||||
dfd.reject( 'renderItemWrapper => Missing html template for module : '+ module.id );
|
||||
}
|
||||
$_view_el.append( _tmpl_ );
|
||||
}
|
||||
|
||||
//then, append the item content wrapper
|
||||
$_view_el.append( $( '<div/>', { class: module.control.css_attr.item_content } ) );
|
||||
|
||||
dfd.resolve( $_view_el );
|
||||
};//appendAndResolve
|
||||
|
||||
|
||||
// allow plugin to alter the item_model before template injection
|
||||
item.trigger( 'item-model-before-item-wrapper-template-injection', item_model_for_template_injection );
|
||||
|
||||
//render the item wrapper
|
||||
$_view_el = $('<li>', { class : module.control.css_attr.single_item, 'data-id' : item_model_for_template_injection.id, id : item_model_for_template_injection.id } );
|
||||
|
||||
//append the item view to the first module view wrapper
|
||||
//!!note : => there could be additional sub view wrapper inside !!
|
||||
//$( '.' + module.control.css_attr.items_wrapper , module.container).first().append( $_view_el );
|
||||
// module.itemsWrapper has been stored as a $ var in module initialize() when the tmpl has been embedded
|
||||
module.itemsWrapper.append( $_view_el );
|
||||
|
||||
if ( module.isMultiItem() ) {
|
||||
var _template_selector;
|
||||
// Do we have view content template script?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.rudItemPart ) ) {
|
||||
_template_selector = module.getTemplateSelectorPart( 'rudItemPart', item_model_for_template_injection );
|
||||
//do we have view template script?
|
||||
if ( 1 > $( '#tmpl-' + _template_selector ).length ) {
|
||||
dfd.reject( 'Missing template for item ' + item.id + '. The provided template script has no been found : #tmpl-' + _template_selector );
|
||||
}
|
||||
var items_are_clonable = api.czrModuleMap[module.module_type] && api.czrModuleMap[module.module_type].items_are_clonable;
|
||||
appendAndResolve( wp.template( _template_selector )( $.extend( item_model_for_template_injection, { is_sortable : module.sortable, items_are_clonable : items_are_clonable } ) ) );
|
||||
} else {
|
||||
|
||||
// allow plugin to alter the ajax params before fetching
|
||||
var requestParams = {
|
||||
tmpl : 'rud-item-part',
|
||||
module_type: 'all_modules',
|
||||
module_id : module.id,
|
||||
control_id : module.control.id
|
||||
};
|
||||
item.trigger( 'item-wrapper-tmpl-params-before-fetching', requestParams );
|
||||
|
||||
// Let's check if the filtered requested params can find a match of a printed tmpl of the module
|
||||
// this filter 'item-wrapper-tmpl-params-before-fetching', is used in the widget zone module of the Hueman theme (june 2018 )
|
||||
// it allows us to assign a specific template for the built-in widget zones
|
||||
if ( ! _.isEmpty( module[ requestParams.tmpl ] ) ) {
|
||||
_template_selector = module.getTemplateSelectorPart( requestParams.tmpl, item_model_for_template_injection );
|
||||
//do we have view template script?
|
||||
if ( 1 > $( '#tmpl-' + _template_selector ).length ) {
|
||||
dfd.reject( 'Missing template for item ' + item.id + '. The provided template script has no been found : #tmpl-' + _template_selector );
|
||||
}
|
||||
appendAndResolve( wp.template( _template_selector )( item_model_for_template_injection ) );
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( requestParams ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'renderItemWrapper => success response =>', module.id, _serverTmpl_);
|
||||
appendAndResolve( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( $.extend( item_model_for_template_injection, { is_sortable : module.sortable } ) ) );
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'renderItemWrapper => fail response =>', _r_);
|
||||
dfd.reject( 'renderItemWrapper => Problem when fetching the rud-item-part tmpl from server for module : '+ module.id );
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {//if ( module.isMultiItem() ) {}
|
||||
appendAndResolve();
|
||||
}
|
||||
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
// fired when item is ready and embedded
|
||||
// define the item view DOM event map
|
||||
// bind actions when the item is embedded
|
||||
itemWrapperViewSetup : function( _item_model_ ) {
|
||||
var item = this,
|
||||
module = this.module;
|
||||
|
||||
// _item_model_ = item() || item.initial_item_model;//could not be set yet
|
||||
|
||||
// Let's create a deep copy now
|
||||
item_model = item() || item.initial_item_model;//$.extend( true, {}, _item_model_ );
|
||||
|
||||
// always write the title
|
||||
item.writeItemViewTitle();
|
||||
|
||||
|
||||
// When do we render the item content ?
|
||||
// If this is a multi-item module, let's render each item content when they are expanded.
|
||||
// In the case of a single item module, we can render the item content now.
|
||||
var _updateItemContentDeferred = function( $_item_content, to, from ) {
|
||||
//update the $.Deferred state
|
||||
if ( ! _.isUndefined( $_item_content ) && false !== $_item_content.length ) {
|
||||
item.contentContainer = $_item_content;
|
||||
// The 'contentRendered' event triggers the api.CZR_Helpers.setupInputCollectionFromDOM.call( item );
|
||||
item.trigger( 'contentRendered', { item_content : $_item_content } );
|
||||
item.toggleItemExpansion( to, item.module.isMultiItem() ? 150 : 0 );//the second param is the duration
|
||||
item.cleanLoader();
|
||||
|
||||
}
|
||||
else {
|
||||
throw new Error( 'Module : ' + item.module.id + ', the item content has not been rendered for ' + item.id );
|
||||
}
|
||||
};
|
||||
|
||||
// MULTI-ITEM MODULE
|
||||
if ( item.module.isMultiItem() ) {
|
||||
item.viewState.callbacks.add( function( to, from ) {
|
||||
//viewState can take 3 states : expanded, expanded_noscroll, closed
|
||||
var _isExpanded = -1 !== to.indexOf( 'expanded' );
|
||||
|
||||
//If this module has mod Opt, always close the opt pane on view state change
|
||||
if ( module.hasModOpt() && _isExpanded ) {
|
||||
api.czr_ModOptVisible( false, {
|
||||
module : module,//the current module for which the modOpt is being expanded
|
||||
focus : false//the id of the tab we want to focus on
|
||||
});
|
||||
}
|
||||
|
||||
if ( _isExpanded ) {
|
||||
//item already rendered ?
|
||||
if ( _.isObject( item.contentContainer ) && false !== item.contentContainer.length ) {
|
||||
//toggle on view state change
|
||||
item.toggleItemExpansion(to);
|
||||
} else {
|
||||
item.printLoader();
|
||||
item.renderItemContent( item() || item.initial_item_model )
|
||||
.done( function( $_item_content ) {
|
||||
//introduce a small delay to give some times to the modules to be printed.
|
||||
//@todo : needed ?
|
||||
//_updateItemContentDeferred = _.debounce(_updateItemContentDeferred, 50 );
|
||||
_updateItemContentDeferred( $_item_content, to, from );
|
||||
})
|
||||
.fail( function( _r_ ) {
|
||||
api.errorLog( "multi-item module => failed item.renderItemContent for module : " + module.id, _r_ );
|
||||
});
|
||||
}
|
||||
} else {
|
||||
//toggle on view state change
|
||||
item.toggleItemExpansion( to ).done( function() {
|
||||
if ( _.isObject( item.contentContainer ) && false !== item.contentContainer.length ) {
|
||||
item.trigger( 'beforeContenRemoved' );
|
||||
//Removes DOM input nodes
|
||||
$( '.' + module.control.css_attr.item_content, item.container ).children().each( function() {
|
||||
$(this).remove();
|
||||
});
|
||||
//clean any other content like a commented html markup
|
||||
$( '.' + module.control.css_attr.item_content, item.container ).html('');
|
||||
//reset the contentContainer property
|
||||
item.contentContainer = null;
|
||||
//will remove the input collection values
|
||||
item.trigger( 'contentRemoved' );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// SINGLE ITEM MODULE
|
||||
else {
|
||||
//react to the item state changes
|
||||
item.viewState.callbacks.add( function( to, from ) {
|
||||
//toggle on view state change
|
||||
item.toggleItemExpansion.apply( item, [ to, 0 ] );
|
||||
});
|
||||
item.printLoader();
|
||||
//renderview content now for a single item module
|
||||
item.renderItemContent( item_model )
|
||||
.done( function( $_item_content ) {
|
||||
_updateItemContentDeferred( $_item_content, true );
|
||||
//item.viewState.set('expanded');
|
||||
})
|
||||
.fail( function( _r_ ) {
|
||||
api.errare( "mono-item module => failed item.renderItemContent for module : " + module.id, _r_ );
|
||||
});
|
||||
}
|
||||
|
||||
//DOM listeners for the user action in item view wrapper
|
||||
api.CZR_Helpers.setupDOMListeners(
|
||||
item.userEventMap(),//actions to execute
|
||||
{ model:item_model, dom_el:item.container },//model + dom scope
|
||||
item //instance where to look for the cb methods
|
||||
);
|
||||
|
||||
//Listen to the remove dialog state
|
||||
item.removeDialogVisible.bind( function( visible ) {
|
||||
var module = item.module,
|
||||
$_alert_el = $( '.' + module.control.css_attr.remove_alert_wrapper, item.container ).first();
|
||||
|
||||
//first close all open items views and dialogs
|
||||
if ( visible )
|
||||
module.closeAllItems();
|
||||
|
||||
//Close Mod opts if any
|
||||
if ( visible && module.hasModOpt() ) {
|
||||
api.czr_ModOptVisible( false, {
|
||||
module : module,//the current module for which the modOpt is being expanded
|
||||
focus : false//the id of the tab we want to focus on
|
||||
});
|
||||
}
|
||||
|
||||
//Close Pre item dialog
|
||||
if ( visible && _.has( module, 'preItem' ) ) {
|
||||
module.preItemExpanded(false);
|
||||
}
|
||||
|
||||
//then close any other open remove dialog in the item container
|
||||
$('.' + module.control.css_attr.remove_alert_wrapper, item.container ).not( $_alert_el ).each( function() {
|
||||
if ( $(this).hasClass( 'open' ) ) {
|
||||
$(this).slideToggle( {
|
||||
duration : 200,
|
||||
done : function() {
|
||||
$(this).toggleClass('open' , false );
|
||||
//deactivate the icons
|
||||
$(this).siblings().find('.' + module.control.css_attr.display_alert_btn).toggleClass( 'active' , false );
|
||||
}
|
||||
} );
|
||||
}
|
||||
});
|
||||
|
||||
//print the html if dialod is expanded
|
||||
if ( visible ) {
|
||||
// Do we have view content template script?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.alertPart ) ) {
|
||||
if ( 1 > $( '#tmpl-' + module.alertPart ).length || _.isEmpty( item.container ) ) {
|
||||
api.errare( 'No removal alert template available for items in module :' + module.id );
|
||||
return;
|
||||
}
|
||||
$_alert_el.html( wp.template( module.alertPart )( { title : ( item().title || item.id ) } ) );
|
||||
item.trigger( 'remove-dialog-rendered');
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( {
|
||||
tmpl : 'rud-item-alert-part',
|
||||
module_type: 'all_modules',
|
||||
module_id : module.id,
|
||||
control_id : module.control.id
|
||||
} ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'item.removeDialogVisible => success response =>', module.id, _serverTmpl_);
|
||||
$_alert_el.html( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( { title : ( item().title || item.id ) } ) );
|
||||
item.trigger( 'remove-dialog-rendered');
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'item.removeDialogVisible => fail response =>', _r_);
|
||||
api.errare( 'item.removeDialogVisible => Problem when fetching the tmpl from server for module : '+ module.id, _r_ );
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Slide it
|
||||
var _slideComplete = function( visible ) {
|
||||
$_alert_el.toggleClass( 'open' , visible );
|
||||
//set the active class of the clicked icon
|
||||
item.container.find('.' + module.control.css_attr.display_alert_btn ).toggleClass( 'active', visible );
|
||||
//adjust scrolling to display the entire dialog block
|
||||
if ( visible )
|
||||
module._adjustScrollExpandedBlock( item.container );
|
||||
};
|
||||
if ( visible ) {
|
||||
$_alert_el.stop( true, true ).slideDown( 200, function() { _slideComplete( visible ); } );
|
||||
} else {
|
||||
$_alert_el.stop( true, true ).slideUp( 200, function() { _slideComplete( visible ); } );
|
||||
}
|
||||
});//item.removeDialogVisible.bind()
|
||||
},//itemWrapperViewSetup
|
||||
|
||||
|
||||
|
||||
//renders saved items views and attach event handlers
|
||||
//the saved item look like :
|
||||
//array[ { id : 'sidebar-one', title : 'A Title One' }, {id : 'sidebar-two', title : 'A Title Two' }]
|
||||
renderItemContent : function( _item_model_ ) {
|
||||
//=> an array of objects
|
||||
var item = this,
|
||||
module = this.module,
|
||||
dfd = $.Deferred();
|
||||
|
||||
// Create a deep copy of the item, so we can inject custom properties before parsing the template, without affecting the original item
|
||||
var item_model_for_template_injection = $.extend( true, {}, _item_model_ || item() );
|
||||
|
||||
// allow plugin to alter the item_model before template injection
|
||||
item.trigger( 'item-model-before-item-content-template-injection', item_model_for_template_injection );
|
||||
|
||||
var appendAndResolve = function( _tmpl_ ) {
|
||||
//do we have an html template ?
|
||||
if ( _.isEmpty( _tmpl_ ) ) {
|
||||
dfd.reject( 'renderItemContent => Missing html template for module : '+ module.id );
|
||||
}
|
||||
var $itemContentWrapper = $( '.' + module.control.css_attr.item_content, item.container );
|
||||
// append the view content
|
||||
$( _tmpl_ ).appendTo( $itemContentWrapper );
|
||||
dfd.resolve( $itemContentWrapper );
|
||||
};//appendAndResolve
|
||||
|
||||
// Do we have view content template script?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.itemInputList ) || _.isFunction( module.itemInputList ) ) {
|
||||
var tmplSelectorSuffix = module.getTemplateSelectorPart( 'itemInputList', item_model_for_template_injection );
|
||||
if ( 1 > $( '#tmpl-' + tmplSelectorSuffix ).length ) {
|
||||
dfd.reject( 'renderItemContent => No itemInputList content template defined for module ' + module.id + '. The template script id should be : #tmpl-' + tmplSelectorSuffix );
|
||||
} else {
|
||||
appendAndResolve( wp.template( tmplSelectorSuffix )( $.extend( item_model_for_template_injection, { control_id : module.control.id } ) ) );
|
||||
}
|
||||
|
||||
} else {
|
||||
var requestParams = {
|
||||
tmpl : 'item-inputs',
|
||||
module_type: module.module_type,
|
||||
module_id : module.id,
|
||||
control_id : module.control.id,
|
||||
item_model : item_model_for_template_injection
|
||||
};
|
||||
// allow plugins to filter the query param before fetching the template for item content
|
||||
module.trigger( 'filter-request-params-before-fetching-for-item-content-tmpl', requestParams );
|
||||
|
||||
api.CZR_Helpers.getModuleTmpl( requestParams ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'renderItemContent => success response =>', _serverTmpl_);
|
||||
appendAndResolve( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( $.extend( item_model_for_template_injection, { control_id : module.control.id } ) ) );
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'renderItemContent => fail response =>', _r_);
|
||||
dfd.reject( _r_ );
|
||||
});
|
||||
}
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//fired in setupItemListeners
|
||||
writeItemViewTitle : function( item_model ) {
|
||||
var item = this,
|
||||
module = item.module,
|
||||
_model = item_model || item(),
|
||||
//Let's fall back on the id if the title is not set or empty
|
||||
_title = ( _.has( _model, 'title') && ! _.isEmpty( _model.title ) ) ? api.CZR_Helpers.capitalize( _model.title ) : _model.id;
|
||||
|
||||
_title = api.CZR_Helpers.truncate( _title, 20 );
|
||||
$( '.' + module.control.css_attr.item_title , item.container ).text( _title );
|
||||
//add a hook here
|
||||
api.CZR_Helpers.doActions('after_writeViewTitle', item.container , _model, item );
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@param : obj = { event : {}, model : {}, view : ${} }
|
||||
//Fired on view_rendered:new when a new model has been added
|
||||
//Fired on click on edit_view_btn
|
||||
setViewVisibility : function( obj, is_added_by_user ) {
|
||||
var item = this,
|
||||
module = this.module;
|
||||
if ( is_added_by_user ) {
|
||||
item.viewState.set( 'expanded_noscroll' );
|
||||
} else {
|
||||
module.closeAllItems( item.id );
|
||||
if ( _.has(module, 'preItem') ) {
|
||||
module.preItemExpanded.set(false);
|
||||
}
|
||||
item.viewState.set( 'expanded' == item._getViewState() ? 'closed' : 'expanded' );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
_getViewState : function() {
|
||||
return -1 == this.viewState().indexOf('expanded') ? 'closed' : 'expanded';
|
||||
},
|
||||
|
||||
|
||||
// callback of item.viewState.callbacks
|
||||
// viewState can take 3 states : expanded, expanded_noscroll, closed
|
||||
toggleItemExpansion : function( status, duration ) {
|
||||
var visible = 'closed' != status,
|
||||
item = this,
|
||||
module = this.module,
|
||||
$el = $( '.' + module.control.css_attr.item_content , item.container ).first(),
|
||||
dfd = $.Deferred(),
|
||||
_slideComplete = function( visible ) {
|
||||
item.container.toggleClass( 'open' , visible );
|
||||
//close all remove dialogs
|
||||
if ( visible )
|
||||
module.closeRemoveDialogs();
|
||||
|
||||
//toggle the icon activate class depending on the status
|
||||
//switch icon
|
||||
var $_edit_icon = $el.siblings().find('.' + module.control.css_attr.edit_view_btn );
|
||||
|
||||
$_edit_icon.toggleClass('active' , visible );
|
||||
if ( visible )
|
||||
$_edit_icon.removeClass('fa-pencil-alt').addClass('fa-minus-square').attr('title', serverControlParams.i18n.close );
|
||||
else
|
||||
$_edit_icon.removeClass('fa-minus-square').addClass('fa-pencil-alt').attr('title', serverControlParams.i18n.edit );
|
||||
|
||||
//scroll to the currently expanded view
|
||||
if ( 'expanded' == status ) {
|
||||
module._adjustScrollExpandedBlock( item.container );
|
||||
}
|
||||
|
||||
dfd.resolve();
|
||||
};
|
||||
duration = _.isUndefined( duration ) ? 150 : duration;
|
||||
if ( visible ) {
|
||||
$el.stop( true, true ).slideDown( duration, function() { _slideComplete( visible ); } );
|
||||
} else {
|
||||
$el.stop( true, true ).slideUp( 0, function() { _slideComplete( visible ); } );
|
||||
}
|
||||
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
//removes the view dom module
|
||||
_destroyView : function ( duration ) {
|
||||
this.container.fadeOut( {
|
||||
duration : duration ||400,
|
||||
done : function() {
|
||||
$(this).remove();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// LOADER HELPERS
|
||||
// @return void()
|
||||
// print a loader between the moment the item container is appended, and the item content is fetched from the server
|
||||
printLoader : function() {
|
||||
var item = this;
|
||||
item.container
|
||||
.css({'position' :'relative'})
|
||||
.append( api.CZR_Helpers.css_loader_html ).find('.czr-css-loader').fadeIn( 'fast' );
|
||||
|
||||
// Start the countdown for auto-cleaning
|
||||
clearTimeout( $.data( this, '_czr_loader_active_timer_') );
|
||||
$.data( this, '_czr_loader_active_timer_', setTimeout(function() {
|
||||
item.cleanLoader();
|
||||
}, 5000 ) );
|
||||
},
|
||||
|
||||
// @return void()
|
||||
cleanLoader : function() {
|
||||
this.container
|
||||
.css({'min-height' : ''})
|
||||
.find('.czr-css-loader').remove();
|
||||
},
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
//extends api.Value
|
||||
//options:
|
||||
// module : module,
|
||||
// initial_modOpt_model : modOpt, can contains the already db saved values
|
||||
// defaultModOptModel : module.defaultModOptModel
|
||||
// control : control instance
|
||||
|
||||
var CZRModOptMths = CZRModOptMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModOptMths , {
|
||||
initialize: function( options ) {
|
||||
if ( _.isUndefined(options.module) || _.isEmpty(options.module) ) {
|
||||
throw new Error('No module assigned to modOpt.');
|
||||
}
|
||||
|
||||
var modOpt = this;
|
||||
api.Value.prototype.initialize.call( modOpt, null, options );
|
||||
|
||||
//DEFERRED STATES
|
||||
//store the state of ready.
|
||||
//=> we don't want the ready method to be fired several times
|
||||
modOpt.isReady = $.Deferred();
|
||||
|
||||
//VARIOUS DEFINITIONS
|
||||
modOpt.container = null;//will store the modOpt $ dom element
|
||||
modOpt.inputCollection = new api.Value({});
|
||||
|
||||
//input.options = options;
|
||||
//write the options as properties, name is included
|
||||
$.extend( modOpt, options || {} );
|
||||
|
||||
//declares a default modOpt model
|
||||
modOpt.defaultModOptModel = _.clone( options.defaultModOptModel ) || { is_mod_opt : true };
|
||||
|
||||
//set initial values
|
||||
var _initial_model = $.extend( modOpt.defaultModOptModel, options.initial_modOpt_model );
|
||||
var ctrl = modOpt.module.control;
|
||||
//this won't be listened to at this stage
|
||||
modOpt.set( _initial_model );
|
||||
|
||||
//OPTIONS IS READY
|
||||
//observe its changes when ready
|
||||
modOpt.isReady.done( function() {
|
||||
//listen to any modOpt change
|
||||
//=> done in the module
|
||||
//modOpt.callbacks.add( function() { return modOpt.modOptReact.apply(modOpt, arguments ); } );
|
||||
|
||||
//When shall we render the modOpt ?
|
||||
//If the module is part of a simple control, the modOpt can be render now,
|
||||
//modOpt.mayBeRenderModOptWrapper();
|
||||
|
||||
//RENDER THE CONTROL TITLE GEAR ICON
|
||||
if( ! $( '.' + ctrl.css_attr.edit_modopt_icon, ctrl.container ).length ) {
|
||||
$.when( ctrl.container
|
||||
.find('.customize-control-title').first()//was.find('.customize-control-title')
|
||||
.append( $( '<span/>', {
|
||||
class : [ ctrl.css_attr.edit_modopt_icon, 'fas fa-cog' ].join(' '),
|
||||
title : serverControlParams.i18n['Settings']
|
||||
} ) ) )
|
||||
.done( function(){
|
||||
$( '.' + ctrl.css_attr.edit_modopt_icon, ctrl.container ).fadeIn( 400 );
|
||||
});
|
||||
}
|
||||
|
||||
//LISTEN TO USER ACTIONS ON CONTROL EL
|
||||
api.CZR_Helpers.setupDOMListeners(
|
||||
[
|
||||
//toggle mod options
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.' + ctrl.css_attr.edit_modopt_icon,
|
||||
name : 'toggle_mod_option',
|
||||
actions : function() {
|
||||
// @see : moduleCtor::maybeAwakeAndBindSharedModOpt => api.czr_ModOptVisible.bind()
|
||||
api.czr_ModOptVisible( ! api.czr_ModOptVisible(), {
|
||||
module : modOpt.module,//the current module for which the modOpt is being expanded
|
||||
focus : false//the id of the tab we want to focus on
|
||||
});
|
||||
}
|
||||
}
|
||||
],//actions to execute
|
||||
{ dom_el: ctrl.container },//dom scope
|
||||
modOpt //instance where to look for the cb methods
|
||||
);
|
||||
//modOpt.userEventMap = new api.Value( [] );
|
||||
});//modOpt.isReady.done()
|
||||
|
||||
},//initialize
|
||||
|
||||
//overridable method
|
||||
//Fired if the modOpt has been instantiated
|
||||
//The modOpt.callbacks are declared.
|
||||
ready : function() {
|
||||
this.isReady.resolve();
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
//extends api.CZRBaseControl
|
||||
|
||||
var CZRModOptMths = CZRModOptMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModOptMths , {
|
||||
//fired when modOpt is ready and embedded
|
||||
//define the modOpt view DOM event map
|
||||
//bind actions when the modOpt is embedded
|
||||
modOptWrapperViewSetup : function( modOpt_model ) {
|
||||
var modOpt = this,
|
||||
module = this.module,
|
||||
dfd = $.Deferred(),
|
||||
_setupDOMListeners = function( $_container ) {
|
||||
//DOM listeners for the user action in modOpt view wrapper
|
||||
api.CZR_Helpers.setupDOMListeners(
|
||||
[
|
||||
//toggle mod options
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.' + module.control.css_attr.close_modopt_icon,
|
||||
name : 'close_mod_option',
|
||||
actions : function() {
|
||||
// @see : moduleCtor::maybeAwakeAndBindSharedModOpt => api.czr_ModOptVisible.bind()
|
||||
api.czr_ModOptVisible( false, {
|
||||
module : module,//the current module for which the modOpt is being expanded
|
||||
focus : false//the id of the tab we want to focus on
|
||||
});
|
||||
}
|
||||
},
|
||||
//tabs navigation
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.tabs nav li',
|
||||
name : 'tab_nav',
|
||||
actions : function( args ) {
|
||||
//toggleTabVisibility is declared in the module ctor and its "this" is the item or the modOpt
|
||||
var tabIdSwitchedTo = $( args.dom_event.currentTarget, args.dom_el ).data('tab-id');
|
||||
this.module.toggleTabVisibility.call( this, tabIdSwitchedTo );
|
||||
this.trigger( 'tab-switch', { id : tabIdSwitchedTo } );
|
||||
}
|
||||
}
|
||||
],//actions to execute
|
||||
{ dom_el: $_container },//model + dom scope
|
||||
modOpt //instance where to look for the cb methods
|
||||
);
|
||||
};
|
||||
|
||||
modOpt_model = modOpt() || modOpt.initial_modOpt_model;//could not be set yet
|
||||
|
||||
//renderview content now
|
||||
modOpt.renderModOptContent( modOpt_model )
|
||||
.done( function( $_container ) {
|
||||
//update the $.Deferred state
|
||||
if ( ! _.isEmpty( $_container ) && 0 < $_container.length ) {
|
||||
_setupDOMListeners( $_container );
|
||||
dfd.resolve( $_container );
|
||||
}
|
||||
else {
|
||||
throw new Error( 'Module : ' + modOpt.module.id + ', the modOpt content has not been rendered' );
|
||||
}
|
||||
})
|
||||
.fail( function( _r_ ) {
|
||||
api.errorLog( "failed modOpt.renderModOptContent for module : " + module.id, _r_ );
|
||||
})
|
||||
.then( function() {
|
||||
//the modOpt.container is now available
|
||||
//Setup the tabs navigation
|
||||
//setupTabNav is defined in the module ctor and its this is the item or the modOpt
|
||||
modOpt.module.setupTabNav.call( modOpt );
|
||||
});
|
||||
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
//renders saved modOpt views
|
||||
//returns a promise( $container )
|
||||
//the saved modOpt look like :
|
||||
//array[ { id : 'sidebar-one', title : 'A Title One' }, {id : 'sidebar-two', title : 'A Title Two' }]
|
||||
renderModOptContent : function( modOpt_model ) {
|
||||
//=> an array of objects
|
||||
var modOpt = this,
|
||||
module = this.module,
|
||||
dfd = $.Deferred();
|
||||
|
||||
modOpt_model = modOpt_model || modOpt();
|
||||
|
||||
var appendAndResolve = function( _tmpl_ ) {
|
||||
//do we have an html template ?
|
||||
if ( _.isEmpty( _tmpl_ ) ) {
|
||||
dfd.reject( 'renderModOptContent => Missing html template for module : '+ module.id );
|
||||
}
|
||||
|
||||
var _ctrlLabel = '';
|
||||
try {
|
||||
_ctrlLabel = [ serverControlParams.i18n['Options for'], module.control.params.label ].join(' ');
|
||||
} catch( er ) {
|
||||
api.errorLog( 'renderItemContent => Problem with ctrl label => ' + er );
|
||||
_ctrlLabel = serverControlParams.i18n['Settings'];
|
||||
}
|
||||
|
||||
$('#widgets-left').after( $( '<div/>', {
|
||||
class : module.control.css_attr.mod_opt_wrapper,
|
||||
html : [
|
||||
[ '<h2 class="mod-opt-title">', _ctrlLabel , '</h2>' ].join(''),
|
||||
'<span class="fas fa-times ' + module.control.css_attr.close_modopt_icon + '" title="close"></span>'
|
||||
].join('')
|
||||
} ) );
|
||||
|
||||
//render the mod opt content for this module
|
||||
$( '.' + module.control.css_attr.mod_opt_wrapper ).append( _tmpl_ );
|
||||
|
||||
dfd.resolve( $( '.' + module.control.css_attr.mod_opt_wrapper ) );
|
||||
};//appendAndResolve
|
||||
|
||||
// Do we have view content template script?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.itemPreAddEl ) ) {
|
||||
var tmplSelectorSuffix = module.getTemplateSelectorPart( 'modOptInputList', modOpt_model );
|
||||
if ( 1 > $( '#tmpl-' + tmplSelectorSuffix ).length ) {
|
||||
dfd.reject( 'renderModOptContent => No modOpt content template defined for module ' + module.id + '. The template script id should be : #tmpl-' + tmplSelectorSuffix );
|
||||
}
|
||||
appendAndResolve( wp.template( tmplSelectorSuffix )( modOpt_model ) );
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( {
|
||||
tmpl : 'mod-opt',
|
||||
module_type: module.module_type,
|
||||
module_id : module.id,
|
||||
control_id : module.control.id
|
||||
} ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'renderModOptContent => success response =>', _serverTmpl_);
|
||||
appendAndResolve( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( modOpt_model ) );
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'renderModOptContent => fail response =>', _r_);
|
||||
dfd.reject( 'renderPreItemView => Problem when fetching the mod-opt tmpl from server for module : '+ module.id );
|
||||
});
|
||||
}
|
||||
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
|
||||
toggleModPanelView : function( visible ) {
|
||||
var modOpt = this,
|
||||
module = this.module,
|
||||
ctrl = module.control,
|
||||
dfd = $.Deferred();
|
||||
|
||||
module.control.container.toggleClass( 'czr-modopt-visible', visible );
|
||||
$('body').toggleClass('czr-editing-modopt', visible );
|
||||
//Let the panel slide ( -webkit-transition: left .18s ease-in-out )
|
||||
_.delay( function() {
|
||||
dfd.resolve();
|
||||
}, 200 );
|
||||
return dfd.promise();
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+575
@@ -0,0 +1,575 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.Value
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the control view
|
||||
//Listen to items collection changes and update the control setting
|
||||
//MODULE OPTIONS :
|
||||
// control : control,
|
||||
// crud : bool
|
||||
// id : '',
|
||||
// items : [], module.items,
|
||||
// modOpt : {}
|
||||
// module_type : module.module_type,
|
||||
// multi_item : bool
|
||||
// section : module.section,
|
||||
var CZRModuleMths = CZRModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModuleMths, {
|
||||
initialize: function( id, constructorOptions ) {
|
||||
if ( _.isUndefined(constructorOptions.control) || _.isEmpty(constructorOptions.control) ) {
|
||||
throw new Error('No control assigned to module ' + id );
|
||||
}
|
||||
var module = this;
|
||||
api.Value.prototype.initialize.call( this, null, constructorOptions );
|
||||
|
||||
//store the state of ready.
|
||||
//=> we don't want the ready method to be fired several times
|
||||
module.isReady = $.Deferred();
|
||||
|
||||
//write the module constructor options as properties
|
||||
// The default module model can be get with
|
||||
// and is formed this way :
|
||||
//@see getDefaultModuleApiModel : function() {
|
||||
//if embedded in a control, amend the common model with the section id
|
||||
// return {
|
||||
// id : '',//module.id,
|
||||
// module_type : '',//module.module_type,
|
||||
// modOpt : {},//the module modOpt property, typically high level properties that area applied to all items of the module
|
||||
// items : [],//$.extend( true, {}, module.items ),
|
||||
// crud : false,
|
||||
// hasPreItem : true,//a crud module has a pre item by default
|
||||
// refresh_on_add_item : true,// the preview is refreshed on item add
|
||||
// multi_item : false,
|
||||
// sortable : false,//<= a module can be multi-item but not necessarily sortable
|
||||
// control : {},//control,
|
||||
// section : ''
|
||||
// };
|
||||
// },
|
||||
|
||||
$.extend( module, constructorOptions || {} );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
//can have been overriden at this stage from a module constructor
|
||||
$.extend( module, {
|
||||
crudModulePart : module.crudModulePart || '', //'czr-crud-module-part',//create, read, update, delete
|
||||
rudItemPart : module.rudItemPart || '',// 'czr-rud-item-part',//read, update, delete
|
||||
ruItemPart : module.ruItemPart || '',// 'czr-ru-item-part',//read, update <= ONLY USED IN THE WIDGET MODULE
|
||||
alertPart : module.alertPart || '',// 'czr-rud-item-alert-part',//used both for items and modules removal
|
||||
itemInputList : module.itemInputList || '',//is specific for each crud module
|
||||
modOptInputList : module.modOptInputList || ''//is specific for each module
|
||||
} );
|
||||
|
||||
//embed : define a container, store the embed state, fire the render method
|
||||
module.embedded = $.Deferred();
|
||||
module.itemsWrapper = '';//will store the $ item container
|
||||
|
||||
//if a module is embedded in a control, its container == the control container.
|
||||
module.container = $( module.control.selector );
|
||||
|
||||
//render the item(s) wrapper
|
||||
//and resolve the module.embedded promise()
|
||||
module.renderModuleParts()
|
||||
.done( function( $_module_items_wrapper ){
|
||||
if ( false === $_module_items_wrapper.length ) {
|
||||
throw new Error( 'The items wrapper has not been rendered for module : ' + module.id );
|
||||
}
|
||||
//stores the items wrapper ( </ul> el ) as a jQuery var
|
||||
module.itemsWrapper = $_module_items_wrapper;
|
||||
module.embedded.resolve();
|
||||
})
|
||||
.fail( function( _r_ ) {
|
||||
throw new Error( [ "initialize module => failed module.renderModuleParts() for module : " , module.id , _r_ ].join(' '));
|
||||
});
|
||||
|
||||
/*-----------------------------------------------
|
||||
* MODULE OPTIONS
|
||||
------------------------------------------------*/
|
||||
//declares a default Mod options API model
|
||||
module.defaultAPImodOptModel = {
|
||||
initial_modOpt_model : {},
|
||||
defaultModOptModel : {},
|
||||
control : {},//control instance
|
||||
module : {}//module instance
|
||||
};
|
||||
|
||||
//declares a default modOpt model
|
||||
module.defaultModOptModel = {};
|
||||
|
||||
//define a default Constructors
|
||||
module.modOptConstructor = module.modOptConstructor || api.CZRModOpt;
|
||||
|
||||
/*-----------------------------------------------
|
||||
* ITEMS
|
||||
------------------------------------------------*/
|
||||
module.itemCollection = new api.Value( [] );
|
||||
|
||||
//declares a default Item API model
|
||||
module.defaultAPIitemModel = {
|
||||
id : '',
|
||||
initial_item_model : {},
|
||||
defaultItemModel : {},
|
||||
control : {},//control instance
|
||||
module : {},//module instance
|
||||
is_added_by_user : false
|
||||
};
|
||||
|
||||
// declares a default item model
|
||||
module.defaultItemModel = api.czrModuleMap[ module.module_type ].defaultItemModel || { id : '', title : '' };
|
||||
|
||||
// item constuctor : use the constructor already defined in a module, or fallback on the default one
|
||||
module.itemConstructor = module.itemConstructor || api.CZRItem;
|
||||
|
||||
// czr_model stores the each model value => one value by created by model.id
|
||||
module.czr_Item = new api.Values();
|
||||
|
||||
|
||||
/*-----------------------------------------------
|
||||
* SET THE DEFAULT INPUT CONSTRUCTOR AND INPUT OPTIONS
|
||||
------------------------------------------------*/
|
||||
// input constuctor : use the constructor already defined in a module, or fallback on the default one
|
||||
module.inputConstructor = module.inputConstructor || api.CZRInput;//constructor for the items input
|
||||
if ( module.hasModOpt() ) {
|
||||
//use the constructor already defined in a module, or fallback on the default one
|
||||
module.inputModOptConstructor = module.inputModOptConstructor || api.CZRInput;//constructor for the modOpt input
|
||||
}
|
||||
module.inputOptions = {};//<= can be set by each module specifically
|
||||
//For example, if I need specific options for the content_picker, this is where I will set them in the module extended object
|
||||
|
||||
|
||||
/*-----------------------------------------------
|
||||
* FIRE ON isReady
|
||||
------------------------------------------------*/
|
||||
//module.ready(); => fired by children
|
||||
module.isReady.done( function() {
|
||||
//store the module dirtyness, => no items set
|
||||
module.isDirty = new api.Value( constructorOptions.dirty || false );
|
||||
|
||||
//initialize the module api.Value()
|
||||
//constructorOptions has the same structure as the one described in prepareModuleforAPI
|
||||
//setting the module Value won't be listen to at this stage
|
||||
//api.infoLog('module.isReady.done() => constructorOptions', constructorOptions);
|
||||
module.initializeModuleModel( constructorOptions )
|
||||
.done( function( initialModuleValue ) {
|
||||
module.set( initialModuleValue );
|
||||
})
|
||||
.fail( function( response ){ api.errare( 'Module : ' + module.id + ' initialize module model failed : ', response ); })
|
||||
.always( function( initialModuleValue ) {
|
||||
//listen to each single module change
|
||||
module.callbacks.add( function() { return module.moduleReact.apply( module, arguments ); } );
|
||||
|
||||
//if the module is not registered yet (for example when the module is added by user),
|
||||
//=> push it to the collection of the module-collection control
|
||||
//=> updates the wp api setting
|
||||
if ( ! module.control.isModuleRegistered( module.id ) ) {
|
||||
module.control.updateModulesCollection( { module : constructorOptions, is_registered : false } );
|
||||
}
|
||||
|
||||
module.bind('items-collection-populated', function( collection ) {
|
||||
//listen to item Collection changes
|
||||
module.itemCollection.callbacks.add( function() { return module.itemCollectionReact.apply( module, arguments ); } );
|
||||
|
||||
// The sortable property is set on module registration
|
||||
// if not specified, the sortable will be set to true by default if the module is crud or multi-item
|
||||
if ( false !== module.sortable ) {
|
||||
module._makeItemsSortable();
|
||||
}
|
||||
|
||||
// this event is listened to by Nimble Builder to expand the module once all the items collection is populated
|
||||
module.control.container.trigger('items-collection-populated');
|
||||
});
|
||||
|
||||
//populate and instantiate the items now when a module is embedded in a regular control
|
||||
module.populateSavedItemCollection();
|
||||
|
||||
//When the module has modOpt :
|
||||
//=> Instantiate the modOpt and setup listener
|
||||
if ( module.hasModOpt() ) {
|
||||
module.instantiateModOpt();
|
||||
}
|
||||
});
|
||||
});//module.isReady.done()
|
||||
|
||||
|
||||
/*-----------------------------------------------
|
||||
* Maybe resolve isReady() on parent section expanded
|
||||
------------------------------------------------*/
|
||||
if ( true === api.czrModuleMap[ module.module_type ].ready_on_section_expanded ) {
|
||||
//fired ready :
|
||||
//1) on section expansion
|
||||
//2) or in the case of a module embedded in a regular control, if the module section is already opened => typically when skope is enabled
|
||||
if ( _.has( api, 'czr_activeSectionId' ) && module.control.section() == api.czr_activeSectionId() && 'resolved' != module.isReady.state() ) {
|
||||
module.embedded.then( function() {
|
||||
module.ready();
|
||||
});
|
||||
}
|
||||
|
||||
// defer the expanded callback when the section is instantiated
|
||||
api.section( module.control.section(), function( _section_ ) {
|
||||
_section_.expanded.bind(function(to) {
|
||||
//set module ready on section expansion
|
||||
if ( 'resolved' != module.isReady.state() ) {
|
||||
module.embedded.then( function() {
|
||||
module.ready();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
* Maybe resolve isReady() on custom control event
|
||||
// To be specified when registering the control
|
||||
// used in Nimble to delay the instantiation of the input when the control accordion is expanded with event 'sek-accordion-expanded'
|
||||
------------------------------------------------*/
|
||||
var _control_event = api.czrModuleMap[ module.module_type ].ready_on_control_event;
|
||||
if ( ! _.isUndefined( _control_event ) ) {
|
||||
// defer the expanded callback when the section is instantiated
|
||||
api.control( module.control.id, function( _control_ ) {
|
||||
_control_.container.on( _control_event, function(evt) {
|
||||
//set module ready on module accordion expansion
|
||||
if ( 'resolved' != module.isReady.state() ) {
|
||||
module.embedded.then( function() {
|
||||
module.ready();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Nov 2020 => in WP 5.6, this setup was made too late
|
||||
// That's why we need to introduce an event + a property informing Nimble that we're ready
|
||||
// @see Nimble ::scheduleModuleAccordion
|
||||
_control_.container.data('module_ready_on_custom_control_event_is_setup',true);
|
||||
_control_.container.trigger('module_ready_on_custom_control_event_is_setup');
|
||||
});
|
||||
}
|
||||
|
||||
// Maybe instantiate and bind the api.Value() controlling the module option panel, for the module using it ( has_mod_opt : true on registration )
|
||||
this.maybeAwakeAndBindSharedModOpt();
|
||||
},//initialize()
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
///READY
|
||||
//////////////////////////////////
|
||||
//When the control is embedded on the page, this method is fired in api.CZRBaseModuleControl:ready()
|
||||
//=> right after the module is instantiated.
|
||||
//If the module is a dynamic one (CRUD like), then this method is invoked by the child class
|
||||
ready : function() {
|
||||
var module = this;
|
||||
module.isReady.resolve();
|
||||
},
|
||||
|
||||
|
||||
|
||||
//fired when module is initialized, on module.isReady.done()
|
||||
//designed to be extended or overridden to add specific items or properties
|
||||
initializeModuleModel : function( constructorOptions ) {
|
||||
var module = this, dfd = $.Deferred();
|
||||
if ( ! module.isMultiItem() && ! module.isCrud() ) {
|
||||
//this is a static module. We only have one item
|
||||
//init module item if needed.
|
||||
if ( _.isEmpty( constructorOptions.items ) ) {
|
||||
var def = _.clone( module.defaultItemModel );
|
||||
constructorOptions.items = [ $.extend( def, { id : module.id } ) ];
|
||||
}
|
||||
}
|
||||
return dfd.resolve( constructorOptions ).promise();
|
||||
},
|
||||
|
||||
|
||||
//cb of : module.itemCollection.callbacks
|
||||
//the data can typically hold informations passed by the input that has been changed and its specific preview transport (can be PostMessage )
|
||||
//data looks like :
|
||||
//{
|
||||
// module : {}
|
||||
// input_changed : string input.id
|
||||
// input_transport : 'postMessage' or '',
|
||||
// not_preview_sent : bool
|
||||
//}
|
||||
itemCollectionReact : function( to, from, data ) {
|
||||
var module = this,
|
||||
_current_model = module(),
|
||||
_new_model = $.extend( true, {}, _current_model );
|
||||
_new_model.items = to;
|
||||
//update the dirtyness state
|
||||
module.isDirty.set(true);
|
||||
//set the the new items model
|
||||
module.set( _new_model, data || {} );
|
||||
},
|
||||
|
||||
//This method is fired from the control
|
||||
filterItemsBeforeCoreApiSettingValue : function( itemsToReturn ) {
|
||||
return itemsToReturn;
|
||||
},
|
||||
|
||||
//cb of module.callbacks
|
||||
//=> sets the setting value via the module collection !
|
||||
moduleReact : function( to, from, data ) {
|
||||
//cb of : module.callbacks
|
||||
var module = this,
|
||||
control = module.control,
|
||||
isItemUpdate = ( _.size( from.items ) == _.size( to.items ) ) && ! _.isEmpty( _.difference( to.items, from.items ) ),
|
||||
isColumnUpdate = to.column_id != from.column_id,
|
||||
refreshPreview = function() {
|
||||
api.previewer.refresh();
|
||||
};
|
||||
|
||||
//update the collection + pass data
|
||||
control.updateModulesCollection( {
|
||||
module : $.extend( true, {}, to ),
|
||||
data : data//useful to pass contextual info when a change happens
|
||||
} );
|
||||
|
||||
// //Always update the view title
|
||||
// module.writeViewTitle(to);
|
||||
|
||||
// //@todo : do we need that ?
|
||||
// //send module to the preview. On update only, not on creation.
|
||||
// if ( ! _.isEmpty(from) || ! _.isUndefined(from) ) {
|
||||
// module._sendModule(to, from);
|
||||
// }
|
||||
},
|
||||
|
||||
//@todo : create a smart helper to get either the wp api section or the czr api sektion, depending on the module context
|
||||
getModuleSection : function() {
|
||||
return this.section;
|
||||
},
|
||||
|
||||
//is this module multi item ?
|
||||
//@return bool
|
||||
isMultiItem : function() {
|
||||
return api.CZR_Helpers.isMultiItemModule( null, this );
|
||||
},
|
||||
|
||||
//is this module crud ?
|
||||
//@return bool
|
||||
isCrud : function() {
|
||||
return api.CZR_Helpers.isCrudModule( null, this );
|
||||
},
|
||||
|
||||
hasModOpt : function() {
|
||||
return api.CZR_Helpers.hasModuleModOpt( null, this );
|
||||
},
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
///MODULE OPTION :
|
||||
///1) PREPARE
|
||||
///2) INSTANTIATE
|
||||
///3) LISTEN TO AND SET PARENT MODULE ON CHANGE
|
||||
//////////////////////////////////
|
||||
//fired when module isReady
|
||||
instantiateModOpt : function() {
|
||||
var module = this;
|
||||
//Prepare the modOpt and instantiate it
|
||||
var modOpt_candidate = module.prepareModOptForAPI( module().modOpt || {} );
|
||||
module.czr_ModOpt = new module.modOptConstructor( modOpt_candidate );
|
||||
module.czr_ModOpt.ready();
|
||||
//update the module model on modOpt change
|
||||
module.czr_ModOpt.callbacks.add( function( to, from, data ) {
|
||||
var _current_model = module(),
|
||||
_new_model = $.extend( true, {}, _current_model );
|
||||
_new_model.modOpt = to;
|
||||
//update the dirtyness state
|
||||
module.isDirty(true);
|
||||
//set the the new items model
|
||||
//the data can typically hold informations passed by the input that has been changed and its specific preview transport (can be PostMessage )
|
||||
//data looks like :
|
||||
//{
|
||||
// module : {}
|
||||
// input_changed : string input.id
|
||||
// input_transport : 'postMessage' or '',
|
||||
// not_preview_sent : bool
|
||||
//}
|
||||
module( _new_model, data );
|
||||
});
|
||||
},
|
||||
|
||||
//@return an API ready modOpt object with the following properties
|
||||
// initial_modOpt_model : {},
|
||||
// defaultModOptModel : {},
|
||||
// control : {},//control instance
|
||||
// module : {},//module instance
|
||||
//@param modOpt_candidate is an object. Can contain the saved modOpt properties on init.
|
||||
prepareModOptForAPI : function( modOpt_candidate ) {
|
||||
var module = this,
|
||||
api_ready_modOpt = {};
|
||||
// if ( ! _.isObject( modOpt_candidate ) ) {
|
||||
// throw new Error('preparemodOptForAPI : a modOpt must be an object to be instantiated.');
|
||||
// }
|
||||
modOpt_candidate = _.isObject( modOpt_candidate ) ? modOpt_candidate : {};
|
||||
|
||||
_.each( module.defaultAPImodOptModel, function( _value, _key ) {
|
||||
var _candidate_val = modOpt_candidate[_key];
|
||||
switch( _key ) {
|
||||
case 'initial_modOpt_model' :
|
||||
//make sure that the provided modOpt has all the default properties set
|
||||
_.each( module.getDefaultModOptModel() , function( _value, _property ) {
|
||||
if ( ! _.has( modOpt_candidate, _property) )
|
||||
modOpt_candidate[_property] = _value;
|
||||
});
|
||||
api_ready_modOpt[_key] = modOpt_candidate;
|
||||
|
||||
break;
|
||||
case 'defaultModOptModel' :
|
||||
api_ready_modOpt[_key] = _.clone( module.defaultModOptModel );
|
||||
break;
|
||||
case 'control' :
|
||||
api_ready_modOpt[_key] = module.control;
|
||||
break;
|
||||
case 'module' :
|
||||
api_ready_modOpt[_key] = module;
|
||||
break;
|
||||
}//switch
|
||||
});
|
||||
return api_ready_modOpt;
|
||||
},
|
||||
|
||||
//Returns the default modOpt defined in initialize
|
||||
//Each chid class can override the default item and the following method
|
||||
getDefaultModOptModel : function( id ) {
|
||||
var module = this;
|
||||
return $.extend( _.clone( module.defaultModOptModel ), { is_mod_opt : true } );
|
||||
},
|
||||
|
||||
|
||||
//The idea is to send only the currently modified item instead of the entire collection
|
||||
//the entire collection is sent anyway on api(setId).set( value ), and accessible in the preview via api(setId).bind( fn( to) )
|
||||
//This method can be called on input change and on czr-partial-refresh-done
|
||||
//{
|
||||
// input_id :
|
||||
// input_parent_id :
|
||||
// is_mod_opt :
|
||||
// to :
|
||||
// from :
|
||||
// isPartialRefresh : bool//<= let us know if it is a full wrapper refresh or a single input update ( true when fired from sendModuleInputsToPreview )
|
||||
//}
|
||||
sendInputToPreview : function( args ) {
|
||||
var module = this;
|
||||
//normalizes the args
|
||||
args = _.extend(
|
||||
{
|
||||
input_id : '',
|
||||
input_parent_id : '',//<= can be the mod opt or an item
|
||||
to : null,
|
||||
from : null
|
||||
} , args );
|
||||
|
||||
if ( _.isEqual( args.to, args.from ) )
|
||||
return;
|
||||
|
||||
//This is listened to by the preview frame
|
||||
api.previewer.send( 'czr_input', {
|
||||
set_id : api.CZR_Helpers.getControlSettingId( module.control.id ),
|
||||
module_id : module.id,//<= will allow us to target the right dom element on front end
|
||||
module : { items : $.extend( true, {}, module().items ) , modOpt : module.hasModOpt() ? $.extend( true, {}, module().modOpt ): {} },
|
||||
input_parent_id : args.input_parent_id,//<= can be the mod opt or the item
|
||||
input_id : args.input_id,
|
||||
value : args.to,
|
||||
isPartialRefresh : args.isPartialRefresh//<= let us know if it is a full wrapper refresh or a single input update ( true when fired from sendModuleInputsToPreview )
|
||||
});
|
||||
|
||||
//add a hook here
|
||||
module.trigger( 'input_sent', { input : args.to , dom_el: module.container } );
|
||||
},
|
||||
|
||||
|
||||
//@return void()
|
||||
//Fired on partial refresh in base control initialize, only for module type controls
|
||||
//This method can be called when don't have input instances available
|
||||
//=> typically when reordering items, mod options and items are closed, therefore there's no input instances.
|
||||
//=> the input id are being retrieved from the input parent models : items and mod options.
|
||||
//@param args = { isPartialRefresh : bool }
|
||||
sendModuleInputsToPreview : function( args ) {
|
||||
var module = this,
|
||||
_sendInputData = function() {
|
||||
var inputParent = this,//this is the input parent : item or modOpt
|
||||
inputParentModel = $.extend( true, {}, inputParent() );
|
||||
//we don't need to send the id, which is never an input, but generated by the api.
|
||||
inputParentModel = _.omit( inputParentModel, 'id' );
|
||||
|
||||
_.each( inputParentModel, function( inputVal, inputId ) {
|
||||
module.sendInputToPreview( {
|
||||
input_id : inputId,
|
||||
input_parent_id : inputParent.id,
|
||||
to : inputVal,
|
||||
from : null,
|
||||
isPartialRefresh : args.isPartialRefresh
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
module.czr_Item.each( function( _itm_ ) {
|
||||
_sendInputData.call( _itm_ );
|
||||
});
|
||||
|
||||
if ( module.hasModOpt() ) {
|
||||
_sendInputData.call( module.czr_ModOpt );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Fired in ::initialize()
|
||||
// Maybe instantiate and bind the api.Value() controlling the visibility of the module option panel, for the module using it ( has_mod_opt : true on registration )
|
||||
maybeAwakeAndBindSharedModOpt : function() {
|
||||
if ( ! _.isUndefined( api.czr_ModOptVisible ) )
|
||||
return;
|
||||
|
||||
//MOD OPT PANEL SETTINGS
|
||||
api.czr_ModOptVisible = new api.Value( false );
|
||||
|
||||
//MOD OPT VISIBLE REACT
|
||||
// passing an optional args object allows us to expand the modopt panel and focus on a specific tab right after
|
||||
//@args : {
|
||||
// module : module,//the current module for which the modOpt is being expanded
|
||||
// focus : 'section-topline-2'//the id of the tab we want to focus on
|
||||
//}
|
||||
api.czr_ModOptVisible.bind( function( visible, from, args ) {
|
||||
args = args || {};
|
||||
if ( ! _.isFunction( args.module ) || ! _.isFunction( args.module.czr_ModOpt ) ) {
|
||||
api.errare( 'moduleCtor::maybeAwakeAndBindSharedModOpt => api.czr_ModOptVisible.bind() => incorrect arguments', args );
|
||||
return;
|
||||
}
|
||||
var modOpt = args.module.czr_ModOpt,
|
||||
module = args.module;
|
||||
|
||||
// Append content on expansion
|
||||
// Remove on collapse
|
||||
if ( visible ) {
|
||||
//first close all opened remove dialogs and opened items
|
||||
module.closeRemoveDialogs().closeAllItems();
|
||||
|
||||
modOpt.modOptWrapperViewSetup( modOpt() ).done( function( $_container ) {
|
||||
modOpt.container = $_container;
|
||||
try {
|
||||
api.CZR_Helpers.setupInputCollectionFromDOM.call( modOpt ).toggleModPanelView( visible );
|
||||
} catch(e) {
|
||||
api.consoleLog(e);
|
||||
}
|
||||
if ( module && args.focus ) {
|
||||
_.delay( function() {
|
||||
if ( _.isNull( modOpt.container ) || ! modOpt.container.find('[data-tab-id="' + args.focus + '"] a').length )
|
||||
return;
|
||||
modOpt.container.find('[data-tab-id="' + args.focus + '"] a').trigger('click');
|
||||
}, 200 );
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
modOpt.toggleModPanelView( visible ).done( function() {
|
||||
if ( modOpt.container && 0 < modOpt.container.length ) {
|
||||
$.when( modOpt.container.remove() ).done( function() {
|
||||
api.CZR_Helpers.removeInputCollection.call( modOpt );
|
||||
});
|
||||
} else {
|
||||
api.CZR_Helpers.removeInputCollection.call( modOpt );
|
||||
}
|
||||
modOpt.container = null;
|
||||
});
|
||||
}
|
||||
} );
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+416
@@ -0,0 +1,416 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the module view
|
||||
//Listen to items collection changes and update the control setting
|
||||
|
||||
var CZRModuleMths = CZRModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModuleMths, {
|
||||
//@fired in module ready on api('ready')
|
||||
//the module().items has been set in initialize
|
||||
//A collection of items can be supplied.
|
||||
populateSavedItemCollection : function( _itemCollection_ ) {
|
||||
var module = this,
|
||||
_deepCopyOfItemCollection;
|
||||
|
||||
if ( ! _.isArray( _itemCollection_ || module().items ) ) {
|
||||
api.errorLog( 'populateSavedItemCollection : The saved items collection must be an array in module :' + module.id );
|
||||
return;
|
||||
}
|
||||
_deepCopyOfItemCollection = $.extend( true, [], _itemCollection_ || module().items );
|
||||
|
||||
//populates the collection with the saved items
|
||||
//the modOpt must be skipped
|
||||
//the saved items + modOpt is an array looking like :
|
||||
////MODOPT IS THE FIRST ARRAY ELEMENT: A modOpt has no unique id and has the property is_mod_opt set to true
|
||||
//[
|
||||
// is_mod_opt : true //<= inform us that this is not an item but a modOpt
|
||||
//],
|
||||
////THEN COME THE ITEMS
|
||||
//[
|
||||
// id : "czr_slide_module_0"
|
||||
// slide-background : 21,
|
||||
// ....
|
||||
// ],
|
||||
// [
|
||||
// id : "czr_slide_module_1"
|
||||
// slide-background : 21,
|
||||
// ....
|
||||
// ]
|
||||
|
||||
// CHECK THAT WE DON'T HAVE ANY MODOPT AT THIS STAGE
|
||||
//=> the items and the modOpt should already be split at this stage, because it's done before module instantiation... this check is totally paranoid.
|
||||
_.each( _deepCopyOfItemCollection , function( item_candidate , key ) {
|
||||
if ( _.has( item_candidate, 'is_mod_opt' ) ) {
|
||||
throw new Error( 'populateSavedItemCollection => there should be no mod opt to instantiate here.');
|
||||
}
|
||||
});
|
||||
|
||||
// allow modules to hook here
|
||||
module.trigger( 'filterItemCandidatesBeforeInstantiation', _deepCopyOfItemCollection );
|
||||
|
||||
//INSTANTIATE THE ITEMS
|
||||
_.each( _deepCopyOfItemCollection, function( item_candidate , key ) {
|
||||
//instantiates and fires ready
|
||||
var _doInstantiate_ = function() {
|
||||
var _item_instance_ = module.instantiateItem( item_candidate );
|
||||
if ( _.isFunction( _item_instance_ ) ) {
|
||||
_item_instance_.ready();
|
||||
} else {
|
||||
api.errare( 'populateSavedItemCollection => Could not instantiate item in module ' + module.id , item_candidate );
|
||||
}
|
||||
};
|
||||
//adds it to the collection and fire item.ready()
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
_doInstantiate_();
|
||||
} else {
|
||||
try { _doInstantiate_(); } catch( er ) {
|
||||
api.errare( 'populateSavedItemCollection => ' + er );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//check if everything went well
|
||||
_.each( _deepCopyOfItemCollection, function( _item ) {
|
||||
if ( ! _.isObject( _item ) ) {
|
||||
return;
|
||||
}
|
||||
if ( _.isUndefined( _.findWhere( module.itemCollection(), _item.id ) ) ) {
|
||||
throw new Error( 'populateSavedItemCollection => The saved items have not been properly populated in module : ' + module.id );
|
||||
}
|
||||
});
|
||||
|
||||
module.trigger( 'items-collection-populated' );
|
||||
//do we need to chain this method ?
|
||||
//return this;
|
||||
},
|
||||
|
||||
|
||||
instantiateItem : function( item_candidate, is_added_by_user ) {
|
||||
var module = this;
|
||||
|
||||
// Cast to an object now.
|
||||
item_candidate = _.isObject( item_candidate ) ? item_candidate : {};
|
||||
|
||||
// FIRST VALIDATION
|
||||
//allow modules to validate the item_candidate before addition
|
||||
item_candidate = module.validateItemBeforeAddition( item_candidate, is_added_by_user );
|
||||
|
||||
// Abort here and display a simple console message if item is null or false, for example if validateItemBeforeAddition returned null or false
|
||||
if ( ! item_candidate || _.isNull( item_candidate ) ) {
|
||||
api.errare( 'CZRModule::instantiateItem() => item_candidate did not pass validation in module ' + module.id );
|
||||
return;
|
||||
}
|
||||
|
||||
// NORMALIZE
|
||||
//Prepare the item, make sure its id is set and unique
|
||||
item_candidate = module.prepareItemForAPI( item_candidate );
|
||||
|
||||
if ( ! _.isObject( item_candidate ) ) {
|
||||
api.errare( 'CZRModule::instantiateItem() => an item should be described by an object in module type : ' + module.module_type, 'module id : ' + module.id );
|
||||
return;
|
||||
}
|
||||
|
||||
// Display a simple console message if item is null or false, for example if validateItemBeforeInstantiation returned null or false
|
||||
if ( ! item_candidate || _.isNull( item_candidate ) ) {
|
||||
api.errare( 'CZRModule::instantiateItem() => item_candidate invalid in module ' + module.id );
|
||||
return;
|
||||
}
|
||||
|
||||
//ITEM ID CHECKS
|
||||
if ( ! _.has( item_candidate, 'id' ) ) {
|
||||
throw new Error('CZRModule::instantiateItem() => an item has no id and could not be added in the collection of : ' + this.id );
|
||||
}
|
||||
if ( module.czr_Item.has( item_candidate.id ) ) {
|
||||
throw new Error('CZRModule::instantiateItem() => the following item id ' + item_candidate.id + ' already exists in module.czr_Item() for module ' + this.id );
|
||||
}
|
||||
//instantiate the item with the item constructor, default one or provided by the module
|
||||
module.czr_Item.add( item_candidate.id, new module.itemConstructor( item_candidate.id, item_candidate ) );
|
||||
|
||||
if ( ! module.czr_Item.has( item_candidate.id ) ) {
|
||||
throw new Error('CZRModule::instantiateItem() => instantiation failed for item id ' + item_candidate.id + ' for module ' + this.id );
|
||||
}
|
||||
//the item is now ready and will listen to changes
|
||||
//return the instance
|
||||
return module.czr_Item( item_candidate.id );
|
||||
},
|
||||
|
||||
|
||||
// Designed to be overriden in modules
|
||||
validateItemBeforeAddition : function( item_candidate, is_added_by_user ) {
|
||||
return item_candidate;
|
||||
},
|
||||
|
||||
//@return an API ready item object with the following properties
|
||||
// id : '',
|
||||
// initial_item_model : {},
|
||||
// defaultItemModel : {},
|
||||
// control : {},//control instance
|
||||
// module : {},//module instance
|
||||
// is_added_by_user : false
|
||||
prepareItemForAPI : function( item_candidate ) {
|
||||
var module = this,
|
||||
api_ready_item = {};
|
||||
// if ( ! _.isObject( item_candidate ) ) {
|
||||
// throw new Error('prepareitemForAPI : a item must be an object to be instantiated.');
|
||||
// }
|
||||
item_candidate = _.isObject( item_candidate ) ? item_candidate : {};
|
||||
|
||||
_.each( module.defaultAPIitemModel, function( _value, _key ) {
|
||||
var _candidate_val = item_candidate[_key];
|
||||
switch( _key ) {
|
||||
case 'id' :
|
||||
// The id can be specified in a module ( ex: the pre defined item ids of the Font Customizer module )
|
||||
// => that's why we need to check here if the item id is not already registered here
|
||||
if ( _.isEmpty( _candidate_val ) ) {
|
||||
api_ready_item[_key] = module.generateItemId( module.module_type );
|
||||
} else {
|
||||
if ( module.isItemRegistered( _candidate_val ) ) {
|
||||
module.generateItemId( _candidate_val );
|
||||
} else {
|
||||
api_ready_item[_key] = _candidate_val;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'initial_item_model' :
|
||||
//make sure that the provided item has all the default properties set
|
||||
_.each( module.getDefaultItemModel() , function( _value, _property ) {
|
||||
if ( ! _.has( item_candidate, _property) )
|
||||
item_candidate[_property] = _value;
|
||||
});
|
||||
api_ready_item[_key] = item_candidate;
|
||||
|
||||
break;
|
||||
case 'defaultItemModel' :
|
||||
api_ready_item[_key] = _.clone( module.defaultItemModel );
|
||||
break;
|
||||
case 'control' :
|
||||
api_ready_item[_key] = module.control;
|
||||
break;
|
||||
case 'module' :
|
||||
api_ready_item[_key] = module;
|
||||
break;
|
||||
case 'is_added_by_user' :
|
||||
api_ready_item[_key] = _.isBoolean( _candidate_val ) ? _candidate_val : false;
|
||||
break;
|
||||
}//switch
|
||||
});
|
||||
|
||||
//if we don't have an id at this stage, let's generate it.
|
||||
if ( ! _.has( api_ready_item, 'id' ) ) {
|
||||
api_ready_item.id = module.generateItemId( module.module_type );
|
||||
}
|
||||
|
||||
//Now amend the initial_item_model with the generated id
|
||||
api_ready_item.initial_item_model.id = api_ready_item.id;
|
||||
|
||||
return module.validateItemBeforeInstantiation( api_ready_item );
|
||||
},
|
||||
|
||||
|
||||
// Designed to be overriden in modules
|
||||
validateItemBeforeInstantiation : function( api_ready_item ) {
|
||||
return api_ready_item;
|
||||
},
|
||||
|
||||
|
||||
// recursive
|
||||
// will generate a unique id with the provided prefix
|
||||
generateItemId : function( prefix, key, i ) {
|
||||
//prevent a potential infinite loop
|
||||
i = i || 1;
|
||||
if ( i > 100 ) {
|
||||
throw new Error( 'Infinite loop when generating of a module id.' );
|
||||
}
|
||||
var module = this;
|
||||
key = key || module._getNextItemKeyInCollection();
|
||||
var id_candidate = prefix + '_' + key;
|
||||
|
||||
//do we have a module collection value ?
|
||||
if ( ! _.has( module, 'itemCollection' ) || ! _.isArray( module.itemCollection() ) ) {
|
||||
throw new Error('The item collection does not exist or is not properly set in module : ' + module.id );
|
||||
}
|
||||
|
||||
//make sure the module is not already instantiated
|
||||
if ( module.isItemRegistered( id_candidate ) ) {
|
||||
key++; i++;
|
||||
return module.generateItemId( prefix, key, i );
|
||||
}
|
||||
return id_candidate;
|
||||
},
|
||||
|
||||
|
||||
//helper : return an int
|
||||
//=> the next available id of the item collection
|
||||
_getNextItemKeyInCollection : function() {
|
||||
var module = this,
|
||||
_maxItem = {},
|
||||
_next_key = 0;
|
||||
|
||||
//get the initial key
|
||||
//=> if we already have a collection, extract all keys, select the max and increment it.
|
||||
//else, key is 0
|
||||
if ( _.isEmpty( module.itemCollection() ) )
|
||||
return _next_key;
|
||||
if ( _.isArray( module.itemCollection() ) && 1 === _.size( module.itemCollection() ) ) {
|
||||
_maxItem = module.itemCollection()[0];
|
||||
} else {
|
||||
_maxItem = _.max( module.itemCollection(), function( _item ) {
|
||||
if ( ! _.isNumber( _item.id.replace(/[^\/\d]/g,'') ) )
|
||||
return 0;
|
||||
return parseInt( _item.id.replace( /[^\/\d]/g, '' ), 10 );
|
||||
});
|
||||
}
|
||||
|
||||
//For a single item collection, with an index free id, it might happen that the item is not parsable. Make sure it is. Otherwise, use the default key 0
|
||||
if ( ! _.isUndefined( _maxItem ) && _.isNumber( _maxItem.id.replace(/[^\/\d]/g,'') ) ) {
|
||||
_next_key = parseInt( _maxItem.id.replace(/[^\/\d]/g,''), 10 ) + 1;
|
||||
}
|
||||
return _next_key;
|
||||
},
|
||||
|
||||
|
||||
|
||||
//this helper allows to check if an item has been registered in the collection
|
||||
//no matter if it's not instantiated yet
|
||||
isItemRegistered : function( id_candidate ) {
|
||||
var module = this;
|
||||
return ! _.isUndefined( _.findWhere( module.itemCollection(), { id : id_candidate}) );
|
||||
},
|
||||
|
||||
|
||||
//Fired in module.czr_Item.itemReact
|
||||
//@param args can be
|
||||
//{
|
||||
// collection : [],
|
||||
// params : params {}
|
||||
//},
|
||||
//
|
||||
//or {
|
||||
// item : {}
|
||||
// params : params {}
|
||||
//}
|
||||
//if a collection is provided in the passed args then simply refresh the collection
|
||||
//=> typically used when reordering the collection item with sortable or when a item is removed
|
||||
//
|
||||
//the args.params can typically hold informations passed by the input that has been changed and its specific preview transport (can be PostMessage )
|
||||
//params looks like :
|
||||
//{
|
||||
// module : {}
|
||||
// input_changed : string input.id
|
||||
// input_transport : 'postMessage' or '',
|
||||
// not_preview_sent : bool
|
||||
//}
|
||||
//@return a deferred promise
|
||||
updateItemsCollection : function( args ) {
|
||||
var module = this,
|
||||
_current_collection = module.itemCollection(),
|
||||
_new_collection = _.clone(_current_collection),
|
||||
dfd = $.Deferred();
|
||||
|
||||
//if a collection is provided in the passed args then simply refresh the collection
|
||||
//=> typically used when reordering the collection item with sortable or when a item is removed
|
||||
if ( _.has( args, 'collection' ) ) {
|
||||
//reset the collection
|
||||
module.itemCollection.set( args.collection );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! _.has( args, 'item' ) ) {
|
||||
throw new Error('updateItemsCollection, no item provided ' + module.control.id + '. Aborting');
|
||||
}
|
||||
//normalizes with params
|
||||
args = _.extend( { params : {} }, args );
|
||||
|
||||
var item_candidate = _.clone( args.item ),
|
||||
hasMissingProperty = false;
|
||||
|
||||
// Is the item well formed ? Does it have all the properties of the default model ?
|
||||
// Each module has to declare a defaultItemModel which augments the default one : { id : '', title : '' };
|
||||
// Let's loop on the defaultItemModel property and check that none is missing in the candidate
|
||||
_.each( module.defaultItemModel, function( itemData, key ) {
|
||||
if ( ! _.has( item_candidate, key ) ) {
|
||||
throw new Error( 'CZRModuleMths => updateItemsCollection : Missing property "' + key + '" for item candidate' );
|
||||
}
|
||||
});
|
||||
|
||||
if ( hasMissingProperty )
|
||||
return;
|
||||
|
||||
//the item already exist in the collection
|
||||
if ( _.findWhere( _new_collection, { id : item_candidate.id } ) ) {
|
||||
_.each( _current_collection , function( _item, _ind ) {
|
||||
if ( _item.id != item_candidate.id )
|
||||
return;
|
||||
|
||||
//set the new val to the changed property
|
||||
_new_collection[_ind] = item_candidate;
|
||||
});
|
||||
}
|
||||
//the item has to be added
|
||||
else {
|
||||
_new_collection.push( item_candidate );
|
||||
}
|
||||
|
||||
//updates the collection value
|
||||
//=> is listened to by module.itemCollectionReact
|
||||
module.itemCollection.set( _new_collection, args.params );
|
||||
return dfd.resolve( { collection : _new_collection, params : args.params } ).promise();
|
||||
},
|
||||
|
||||
|
||||
|
||||
//fire on sortable() update callback
|
||||
//@returns a sorted collection as an array of item objects
|
||||
_getSortedDOMItemCollection : function( ) {
|
||||
var module = this,
|
||||
_old_collection = _.clone( module.itemCollection() ),
|
||||
_new_collection = [],
|
||||
dfd = $.Deferred();
|
||||
|
||||
//re-build the collection from the DOM
|
||||
$( '.' + module.control.css_attr.single_item, module.container ).each( function( _index ) {
|
||||
var _item = _.findWhere( _old_collection, {id: $(this).attr('data-id') });
|
||||
//do we have a match in the existing collection ?
|
||||
if ( ! _item )
|
||||
return;
|
||||
|
||||
_new_collection[_index] = _item;
|
||||
});
|
||||
|
||||
if ( _old_collection.length != _new_collection.length ) {
|
||||
throw new Error('There was a problem when re-building the item collection from the DOM in module : ' + module.id );
|
||||
}
|
||||
return dfd.resolve( _new_collection ).promise();
|
||||
},
|
||||
|
||||
|
||||
//This method should
|
||||
//1) remove the item views
|
||||
//2) remove the czr_items instances
|
||||
//3) remove the item collection
|
||||
//4) re-initialize items
|
||||
//5) re-setup the item collection
|
||||
//6) re-instantiate the items
|
||||
//7) re-render their views
|
||||
refreshItemCollection : function() {
|
||||
var module = this;
|
||||
//Remove item views and instances
|
||||
module.czr_Item.each( function( _itm ) {
|
||||
if ( module.czr_Item( _itm.id ).container && 0 < module.czr_Item( _itm.id ).container.length ) {
|
||||
$.when( module.czr_Item( _itm.id ).container.remove() ).done( function() {
|
||||
//Remove item instances
|
||||
module.czr_Item.remove( _itm.id );
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Reset the item collection
|
||||
// => the collection listeners will be setup after populate, on 'items-collection-populated'
|
||||
module.itemCollection = new api.Value( [] );
|
||||
module.populateSavedItemCollection();
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the module view
|
||||
//Listen to items collection changes and update the control setting
|
||||
|
||||
var CZRModuleMths = CZRModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModuleMths, {
|
||||
//Returns the default item defined in initialize
|
||||
//Each chid class can override the default item and the following method
|
||||
getDefaultItemModel : function( id ) {
|
||||
var module = this;
|
||||
return $.extend( _.clone( module.defaultItemModel ), { id : id || '' } );
|
||||
},
|
||||
|
||||
//////////////////////////////////
|
||||
///MODEL HELPERS
|
||||
//////////////////////////////////
|
||||
//the job of this function is to return a new item ready to be added to the collection
|
||||
//the new item shall have a unique id
|
||||
//!!recursive
|
||||
_initNewItem : function( _item , _next_key ) {
|
||||
var module = this,
|
||||
_new_item = { id : '' },
|
||||
_id;
|
||||
|
||||
//get the next available key of the collection
|
||||
_next_key = 'undefined' != typeof(_next_key) ? _next_key : _.size( module.itemCollection() );
|
||||
|
||||
if ( _.isNumber(_next_key) ) {
|
||||
_id = module.module_type + '_' + _next_key;
|
||||
}
|
||||
else {
|
||||
_id = _next_key;
|
||||
//reset next key to 0 in case a recursive loop is needed later
|
||||
_next_key = 0;
|
||||
}
|
||||
|
||||
if ( _item && ! _.isEmpty( _item) )
|
||||
_new_item = $.extend( _item, { id : _id } );
|
||||
else
|
||||
_new_item = this.getDefaultItemModel( _id );
|
||||
|
||||
//check the id existence, and its unicity
|
||||
if ( _.has(_new_item, 'id') && module._isItemIdPossible(_id) ) {
|
||||
//make sure that the provided item has all the default properties set
|
||||
_.map( module.getDefaultItemModel() , function( value, property ){
|
||||
if ( ! _.has(_new_item, property) )
|
||||
_new_item[property] = value;
|
||||
});
|
||||
|
||||
return _new_item;
|
||||
}
|
||||
|
||||
//if id already exists, then test a new one
|
||||
return module._initNewItem( _new_item, _next_key + 1);
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+292
@@ -0,0 +1,292 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the module view
|
||||
//Listen to items collection changes and update the control setting
|
||||
|
||||
var CZRModuleMths = CZRModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRModuleMths, {
|
||||
//fired on module.isReady.done()
|
||||
//the module.container is set.
|
||||
renderModuleParts : function() {
|
||||
var module = this,
|
||||
$_moduleContentEl = $( module.container ),
|
||||
dfd = $.Deferred();
|
||||
|
||||
var appendAndResolve = function( _tmpl_ ) {
|
||||
if ( module.isCrud() ) {
|
||||
//do we have an html template ?
|
||||
if ( _.isEmpty( _tmpl_ ) ) {
|
||||
dfd.reject( 'renderModuleParts => Missing html template for module : '+ module.id );
|
||||
}
|
||||
//append the module wrapper to the column
|
||||
$_moduleContentEl.append( _tmpl_ );
|
||||
}
|
||||
|
||||
// Always append this
|
||||
var $_module_items_wrapper = $(
|
||||
'<ul/>',
|
||||
{
|
||||
class : [
|
||||
module.control.css_attr.items_wrapper,
|
||||
module.module_type,
|
||||
module.isMultiItem() ? 'multi-item-mod' : 'mono-item-mod',
|
||||
module.isCrud() ? 'crud-mod' : 'not-crud-mod'
|
||||
].join(' ')
|
||||
}
|
||||
);
|
||||
|
||||
$_moduleContentEl.append( $_module_items_wrapper );
|
||||
|
||||
dfd.resolve( $( $_module_items_wrapper, $_moduleContentEl ) );
|
||||
};//appendAndResolve
|
||||
|
||||
//Crud modules => then let's add the crud module part tmpl
|
||||
if ( module.isCrud() ) {
|
||||
// Do we have view content template script?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.crudModulePart ) ) {
|
||||
if ( 1 > $( '#tmpl-' + module.crudModulePart ).length ) {
|
||||
dfd.reject( 'renderModuleParts => no crud Module Part template for module ' + module.id + '. The template script id should be : #tmpl-' + module.crudModulePart );
|
||||
}
|
||||
appendAndResolve( wp.template( module.crudModulePart )( {} ) );
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( {
|
||||
tmpl : 'crud-module-part',
|
||||
module_type: 'all_modules',
|
||||
module_id : module.id,
|
||||
control_id : module.control.id
|
||||
} ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'renderModuleParts => success response =>', module.id, _serverTmpl_);
|
||||
appendAndResolve( api.CZR_Helpers.parseTemplate( _serverTmpl_ )( {} ) );
|
||||
}).fail( function( _r_ ) {
|
||||
api.errare( 'renderModuleParts => fail response =>', _r_);
|
||||
dfd.reject( 'renderModuleParts => Problem when fetching the crud-module-part tmpl from server for module : '+ module.id );
|
||||
});
|
||||
}
|
||||
} else {
|
||||
appendAndResolve();
|
||||
}
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
//called before rendering a view. Fired in module::renderItemWrapper()
|
||||
//can be overridden to set a specific view template depending on the model properties
|
||||
//@return string
|
||||
//@type can be
|
||||
//Read Update Delete (rud...)
|
||||
//Read Update (ru)
|
||||
//...
|
||||
//@item_model is an object describing the current item model
|
||||
getTemplateSelectorPart : function( type, item_model ) {
|
||||
var module = this, _el;
|
||||
switch( type ) {
|
||||
case 'rudItemPart' :
|
||||
_el = module.rudItemPart;
|
||||
break;
|
||||
case 'ruItemPart' :
|
||||
_el = module.ruItemPart;
|
||||
break;
|
||||
case 'modOptInputList' :
|
||||
_el = module.modOptInputList;
|
||||
break;
|
||||
case 'itemInputList' :
|
||||
_el = _.isFunction( module.itemInputList ) ? module.itemInputList( item_model ) : module.itemInputList;
|
||||
break;
|
||||
}
|
||||
if ( _.isEmpty(_el) ) {
|
||||
throw new Error('No valid template has been found in getTemplateSelectorPart() ' + module.id + '. Aborting');
|
||||
} else {
|
||||
return _el;
|
||||
}
|
||||
},
|
||||
|
||||
//helper
|
||||
//get the $ view DOM el from the item id
|
||||
getViewEl : function( id ) {
|
||||
var module = this;
|
||||
return $( '[data-id = "' + id + '"]', module.container );
|
||||
},
|
||||
|
||||
|
||||
//fired on add_item
|
||||
//fired on views_sorted
|
||||
closeAllItems : function( id ) {
|
||||
var module = this,
|
||||
_current_collection = _.clone( module.itemCollection() ),
|
||||
_filtered_collection = _.filter( _current_collection , function( mod) { return mod.id != id; } );
|
||||
|
||||
_.each( _filtered_collection, function( _item ) {
|
||||
if ( module.czr_Item.has(_item.id) && 'expanded' == module.czr_Item(_item.id)._getViewState(_item.id) )
|
||||
module.czr_Item( _item.id ).viewState.set( 'closed' ); // => will fire the cb toggleItemExpansion
|
||||
} );
|
||||
|
||||
// 'czr-all-items-closed' has been introduced when coding the Simple Nimble slider module. @see https://github.com/presscustomizr/nimble-builder/issues/82
|
||||
// When using the text editor in the items of in a multi-item module
|
||||
// We need to clear the editor instances each time all items are closed, before opening a new one
|
||||
api.trigger('czr-all-items-closed', { module_id : module.id } );
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
//make sure a given jQuery block is fully visible
|
||||
//@param $(el)
|
||||
_adjustScrollExpandedBlock : function( $_block_el, adjust ) {
|
||||
if ( ! $_block_el.length || _.isUndefined( this.getModuleSection() ) )
|
||||
return;
|
||||
var module = this,
|
||||
$_moduleSection = $( '.accordion-section-content', module.section.container ),//was api.section( control.section() )
|
||||
_currentScrollTopVal = $_moduleSection.scrollTop(),
|
||||
_scrollDownVal,
|
||||
_adjust = adjust || 90;
|
||||
|
||||
setTimeout( function() {
|
||||
if ( ( $_block_el.offset().top + $_block_el.height() + _adjust ) > $(window.top).height() ) {
|
||||
_scrollDownVal = $_block_el.offset().top + $_block_el.height() + _adjust - $(window.top).height();
|
||||
if ( _scrollDownVal > 0 ) {
|
||||
$_moduleSection.animate({
|
||||
scrollTop: _currentScrollTopVal + _scrollDownVal
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
|
||||
|
||||
|
||||
//close alert wrapper
|
||||
//+ deactivate the icon
|
||||
closeRemoveDialogs : function() {
|
||||
var module = this;
|
||||
if ( ! _.isArray( module.itemCollection() ) )
|
||||
return;
|
||||
|
||||
module.czr_Item.each( function( _item_ ) {
|
||||
_item_.removeDialogVisible( false );
|
||||
});
|
||||
|
||||
// $('.' + module.control.css_attr.remove_alert_wrapper, module.container ).each( function() {
|
||||
// if ( $(this).hasClass('open') ) {
|
||||
// $(this).slideToggle( {
|
||||
// duration : 100,
|
||||
// done : function() {
|
||||
// $(this).toggleClass('open' , false );
|
||||
// //deactivate the icons
|
||||
// $(this).siblings().find('.' + module.control.css_attr.display_alert_btn).toggleClass('active' , false );
|
||||
// }
|
||||
// } );
|
||||
// }
|
||||
// });
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// fired when module.isReady.done
|
||||
// if sortable is 'true' on registration
|
||||
// default is false
|
||||
_makeItemsSortable : function(obj) {
|
||||
if ( wp.media.isTouchDevice || ! $.fn.sortable )
|
||||
return;
|
||||
var module = this;
|
||||
$( '.' + module.control.css_attr.items_wrapper, module.container ).sortable( {
|
||||
handle: '.' + module.control.css_attr.item_sort_handle,
|
||||
start: function() {},
|
||||
update: function( event, ui ) {
|
||||
var _sortedCollectionReact = function() {
|
||||
if ( _.has(module, 'preItem') ) {
|
||||
module.preItemExpanded.set(false);
|
||||
}
|
||||
|
||||
module.closeAllItems().closeRemoveDialogs();
|
||||
var refreshPreview = function() {
|
||||
api.previewer.refresh();
|
||||
};
|
||||
//refreshes the preview frame :
|
||||
//1) only needed if transport is postMessage, because is triggered by wp otherwise
|
||||
//2) only needed when : add, remove, sort item(s).
|
||||
//var isItemUpdate = ( _.size(from) == _.size(to) ) && ! _.isEmpty( _.difference(from, to) );
|
||||
if ( 'postMessage' == api(module.control.id).transport && ! api.CZR_Helpers.hasPartRefresh( module.control.id ) ) {
|
||||
refreshPreview = _.debounce( refreshPreview, 500 );//500ms are enough
|
||||
refreshPreview();
|
||||
}
|
||||
|
||||
module.trigger( 'item-collection-sorted' );
|
||||
};
|
||||
module._getSortedDOMItemCollection()
|
||||
.done( function( _collection_ ) {
|
||||
module.itemCollection.set( _collection_ );
|
||||
})
|
||||
.then( function() {
|
||||
_sortedCollectionReact();
|
||||
});
|
||||
//refreshes the preview frame, only if the associated setting is a postMessage transport one, with no partial refresh
|
||||
// if ( 'postMessage' == api( module.control.id ).transport && ! api.CZR_Helpers.hasPartRefresh( module.control.id ) ) {
|
||||
// _.delay( function() { api.previewer.refresh(); }, 100 );
|
||||
// }
|
||||
}//update
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------------------
|
||||
* TABS NAVIGATION IN ITEMS AND MODOPT
|
||||
------------------------------------------------*/
|
||||
//This method is fired on tab click
|
||||
// IMPORTANT : the this is the item or the modopt instance. NOT the module.
|
||||
// =>This method has been added to the module constructor to avoid repeating the code in two places because it is used both in items and modOpts
|
||||
// @return void()
|
||||
toggleTabVisibility : function( tabIdSwitchedTo ) {
|
||||
var inputParent = this,
|
||||
tabs = $( inputParent.container ).find('li'),
|
||||
content_items = $( inputParent.container ).find('section');
|
||||
//tabIdSwitchedTo = $( args.dom_event.currentTarget, args.dom_el ).attr('data-tab-id');
|
||||
|
||||
$( '.tabs nav li', inputParent.container ).each( function() {
|
||||
$(this).removeClass('tab-current').addClass('tab-inactive');
|
||||
});
|
||||
$( inputParent.container ).find('li[data-tab-id="' + tabIdSwitchedTo + '"]').addClass('tab-current').removeClass('tab-inactive');
|
||||
|
||||
$( 'section', inputParent.container ).each( function() {
|
||||
$(this).removeClass('content-current');
|
||||
});
|
||||
$( inputParent.container ).find('section[id="' + tabIdSwitchedTo + '"]').addClass('content-current');
|
||||
},
|
||||
|
||||
// @return void()
|
||||
// the inputParent.container (item or modOpt) is now available ar this stage
|
||||
// Setup the tabs navigation
|
||||
//=> Make sure the first tab is the current visible one
|
||||
setupTabNav : function() {
|
||||
var inputParent = this,
|
||||
preProcessTabs = function() {
|
||||
var dfd = $.Deferred(),
|
||||
$tabs = $( '.tabs nav li', inputParent.container );
|
||||
|
||||
$tabs.each( function() {
|
||||
$(this).removeClass('tab-current').addClass('tab-inactive');
|
||||
});
|
||||
$tabs.first().addClass( 'tab-current' ).removeClass('tab-inactive');
|
||||
$( 'section', inputParent.container ).first().addClass( 'content-current' );
|
||||
//set the layout class based on the number of tabs
|
||||
var _nb = $tabs.length;
|
||||
$tabs.each( function() {
|
||||
$(this).addClass( _nb > 0 ? 'cols-' + _nb : '' );
|
||||
});
|
||||
return dfd.resolve().promise();
|
||||
};
|
||||
setTimeout(
|
||||
function() {
|
||||
preProcessTabs().done( function() {
|
||||
$('.tabs', inputParent.container ).show();
|
||||
});
|
||||
},
|
||||
20//<= introducing a small delay to let jQuery do its preprocessing job
|
||||
);
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.CZRModule
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the module view
|
||||
//Listen to items collection changes and update the control setting
|
||||
|
||||
var CZRDynModuleMths = CZRDynModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRDynModuleMths, {
|
||||
initialize: function( id, options ) {
|
||||
var module = this;
|
||||
api.CZRModule.prototype.initialize.call( module, id, options );
|
||||
|
||||
//extend the module with new template Selectors
|
||||
$.extend( module, {
|
||||
itemPreAddEl : ''//is specific for each crud module
|
||||
} );
|
||||
|
||||
module.preItemsWrapper = '';//will store the pre items wrapper
|
||||
|
||||
//PRE MODEL VIEW STATE
|
||||
// => will control the rendering / destruction of the DOM view
|
||||
// => the instantiation / destruction of the input Value collection
|
||||
module.preItemExpanded = new api.Value( false );
|
||||
|
||||
//EXTENDS THE DEFAULT MONO MODEL CONSTRUCTOR WITH NEW METHODS
|
||||
//=> like remove item
|
||||
//module.itemConstructor = api.CZRItem.extend( module.CZRItemDynamicMths || {} );
|
||||
|
||||
//default success message when item added
|
||||
module.itemAddedMessage = serverControlParams.i18n.successMessage;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
/// MODULE DOM EVENT MAP
|
||||
////////////////////////////////////////////////////<
|
||||
// addItem utility
|
||||
// @return void()
|
||||
// @param params : { dom_el : {}, dom_event : {}, event : {}, model {} }
|
||||
var _doAddItem = function( params ) {
|
||||
module.addItem( params ).done( function( item_id ) {
|
||||
module.czr_Item( item_id , function( _item_ ) {
|
||||
_item_.embedded.then( function() {
|
||||
_item_.viewState( 'expanded' );
|
||||
});
|
||||
});
|
||||
})
|
||||
.fail( function( error ) {
|
||||
api.errare( 'module.addItem failed on add_item', error );
|
||||
});
|
||||
};
|
||||
|
||||
module.userEventMap = new api.Value( [
|
||||
//pre add new item : open the dialog box
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : [ '.' + module.control.css_attr.open_pre_add_btn, '.' + module.control.css_attr.cancel_pre_add_btn ].join(','),
|
||||
name : 'pre_add_item',
|
||||
actions : [
|
||||
'closeAllItems',
|
||||
'closeRemoveDialogs',
|
||||
// toggles the visibility of the Remove View Block
|
||||
// => will render or destroy the pre item view
|
||||
// @param : obj = { event : {}, item : {}, view : ${} }
|
||||
function( params ) {
|
||||
var module = this,
|
||||
canWe = { addTheItem : true };
|
||||
// allow remote filtering of the condition for addition
|
||||
module.trigger( 'is-item-addition-possible', canWe );
|
||||
|
||||
// if the module has a pre-item, let's expand it, otherwise, let's add the item right away
|
||||
if ( canWe.addTheItem && module.hasPreItem ) {
|
||||
module.preItemExpanded.set( ! module.preItemExpanded() );
|
||||
} else {
|
||||
_doAddItem( params );
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
//add new item
|
||||
{
|
||||
trigger : 'click keydown',
|
||||
selector : '.' + module.control.css_attr.add_new_btn, //'.czr-add-new',
|
||||
name : 'add_item',
|
||||
//@param params : { dom_el : {}, dom_event : {}, event : {}, model {} }
|
||||
actions : function( params ) {
|
||||
module.closeRemoveDialogs( params ).closeAllItems( params );
|
||||
_doAddItem( params );
|
||||
}
|
||||
}
|
||||
]);//module.userEventMap
|
||||
},//initialize()
|
||||
|
||||
|
||||
|
||||
//When the control is embedded on the page, this method is fired in api.CZRBaseModuleControl:ready()
|
||||
//=> right after the module is instantiated.
|
||||
ready : function() {
|
||||
var module = this;
|
||||
//Setup the module event listeners
|
||||
module.setupDOMListeners( module.userEventMap() , { dom_el : module.container } );
|
||||
|
||||
// Pre Item Value => used to store the preItem model
|
||||
module.preItem = new api.Value( module.getDefaultItemModel() );
|
||||
|
||||
// Action on pre Item expansion / collapsing
|
||||
module.preItemExpanded.callbacks.add( function( isExpanded ) {
|
||||
if ( isExpanded ) {
|
||||
module.renderPreItemView()
|
||||
.done( function( $preWrapper ) {
|
||||
module.preItemsWrapper = $preWrapper;
|
||||
//Re-initialize the pre item model
|
||||
module.preItem( module.getDefaultItemModel() );
|
||||
|
||||
module.trigger( 'before-pre-item-input-collection-setup' );
|
||||
// Setup the pre item input collection from dom
|
||||
module.setupPreItemInputCollection();
|
||||
|
||||
})
|
||||
.fail( function( message ) {
|
||||
api.errorLog( 'Pre-Item : ' + message );
|
||||
});
|
||||
} else {
|
||||
$.when( module.preItemsWrapper.remove() ).done( function() {
|
||||
module.preItem.czr_Input = {};
|
||||
module.preItemsWrapper = null;
|
||||
module.trigger( 'pre-item-input-collection-destroyed' );
|
||||
});
|
||||
}
|
||||
|
||||
// Expand / Collapse
|
||||
module._togglePreItemViewExpansion( isExpanded );
|
||||
});
|
||||
|
||||
api.CZRModule.prototype.ready.call( module );//fires the parent
|
||||
},//ready()
|
||||
|
||||
|
||||
|
||||
//PRE MODEL INPUTS
|
||||
//fired when preItem is embedded.done()
|
||||
setupPreItemInputCollection : function() {
|
||||
var module = this;
|
||||
|
||||
//Pre item input collection
|
||||
module.preItem.czr_Input = new api.Values();
|
||||
|
||||
//creates the inputs based on the rendered items
|
||||
$('.' + module.control.css_attr.pre_add_wrapper, module.container)
|
||||
.find( '.' + module.control.css_attr.sub_set_wrapper)
|
||||
.each( function( _index ) {
|
||||
var _id = $(this).find('[data-czrtype]').attr('data-czrtype') || 'sub_set_' + _index;
|
||||
//instantiate the input
|
||||
module.preItem.czr_Input.add( _id, new module.inputConstructor( _id, {//api.CZRInput;
|
||||
id : _id,
|
||||
type : $(this).attr('data-input-type'),
|
||||
container : $(this),
|
||||
input_parent : module.preItem,
|
||||
module : module,
|
||||
is_preItemInput : true
|
||||
} ) );
|
||||
|
||||
//fire ready once the input Value() instance is initialized
|
||||
module.preItem.czr_Input( _id ).ready();
|
||||
});//each
|
||||
|
||||
module.trigger( 'pre-item-input-collection-ready' );
|
||||
},
|
||||
|
||||
// Intended to be overriden in a module
|
||||
// introduced in July 2019 to make it simple for a multi-item module to set a default pre-item
|
||||
// typically, in the slider image, this is a way to have a default image when adding an item
|
||||
// @see https://github.com/presscustomizr/nimble-builder/issues/479
|
||||
getPreItem : function() {
|
||||
return this.preItem();
|
||||
},
|
||||
|
||||
|
||||
// overridable method introduced with the flat skope
|
||||
// problem to solve in skope => an item, can't always be instantiated in a given context.
|
||||
itemCanBeInstantiated : function() {
|
||||
return true;
|
||||
},
|
||||
|
||||
//Fired on user Dom action.
|
||||
//the item is manually added.
|
||||
//@return a promise() with the item_id as param
|
||||
//@param params : { dom_el : {}, dom_event : {}, event : {}, model {} }
|
||||
//@param _cloned_item_model = { id : '', title : '', ... }
|
||||
addItem : function( params, _cloned_item_model ) {
|
||||
var dfd = $.Deferred();
|
||||
if ( ! this.itemCanBeInstantiated() ) {
|
||||
return dfd.reject().promise();
|
||||
}
|
||||
var module = this,
|
||||
item_candidate = module.getPreItem(),
|
||||
collapsePreItem = function() {
|
||||
module.preItemExpanded.set( false );
|
||||
//module.toggleSuccessMessage('off');
|
||||
};
|
||||
// June 2021 => introduction of clone item
|
||||
if ( _cloned_item_model && _.has( _cloned_item_model, 'id' ) ) {
|
||||
item_candidate = _cloned_item_model;
|
||||
}
|
||||
if ( _.isEmpty( item_candidate ) || ! _.isObject( item_candidate ) ) {
|
||||
api.errorLog( 'addItem : an item_candidate should be an object and not empty. In : ' + module.id +'. Aborted.' );
|
||||
return dfd.reject().promise();
|
||||
}
|
||||
//display a sucess message if item_candidate is successfully instantiated
|
||||
collapsePreItem = _.debounce( collapsePreItem, 200 );
|
||||
|
||||
//instantiates and fires ready
|
||||
var _doInstantiate_ = function() {
|
||||
var _item_instance_ = module.instantiateItem( item_candidate, true );//true == Added by user
|
||||
if ( _.isFunction( _item_instance_ ) ) {
|
||||
_item_instance_.ready();
|
||||
} else {
|
||||
api.errare( 'populateSavedItemCollection => Could not instantiate item in module ' + module.id , item_candidate );
|
||||
}
|
||||
return _item_instance_;
|
||||
};
|
||||
//adds it to the collection and fire item.ready()
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
_doInstantiate_();
|
||||
} else {
|
||||
try { _doInstantiate_(); } catch( er ) {
|
||||
api.errare( 'populateSavedItemCollection : ' + er );
|
||||
return dfd.reject().promise();
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! module.czr_Item.has( item_candidate.id ) ) {
|
||||
return dfd.reject('populateSavedItemCollection : the item ' + item_candidate.id + ' has not been instantiated in module ' + module.id ).promise();
|
||||
}
|
||||
|
||||
//this iife job is to close the pre item and to maybe refresh the preview
|
||||
//then once done the item view is expanded to start editing it
|
||||
//@return a promise()
|
||||
$.Deferred( function() {
|
||||
var _dfd_ = this;
|
||||
module.czr_Item( item_candidate.id ).isReady.then( function() {
|
||||
//module.toggleSuccessMessage('on');
|
||||
collapsePreItem();
|
||||
|
||||
module.trigger('item-added', item_candidate );
|
||||
|
||||
var resolveWhenPreviewerReady = function() {
|
||||
api.previewer.unbind( 'ready', resolveWhenPreviewerReady );
|
||||
_dfd_.resolve();
|
||||
};
|
||||
//module.doActions( 'item_added_by_user' , module.container, { item : item_candidate , dom_event : params.dom_event } );
|
||||
|
||||
//refresh the preview frame (only needed if transport is postMessage && has no partial refresh set )
|
||||
//must be a dom event not triggered
|
||||
//otherwise we are in the init collection case where the items are fetched and added from the setting in initialize
|
||||
// The property "refresh_on_add_item" is declared when registrating the module to the api.czrModuleMap
|
||||
if ( module.refresh_on_add_item ) {
|
||||
if ( 'postMessage' == api(module.control.id).transport && _.has( params, 'dom_event') && ! _.has( params.dom_event, 'isTrigger' ) && ! api.CZR_Helpers.hasPartRefresh( module.control.id ) ) {
|
||||
// api.previewer.refresh().done( function() {
|
||||
// _dfd_.resolve();
|
||||
// });
|
||||
// It would be better to wait for the refresh promise
|
||||
api.previewer.bind( 'ready', resolveWhenPreviewerReady );
|
||||
api.previewer.refresh();
|
||||
} else {
|
||||
_dfd_.resolve();
|
||||
}
|
||||
} else {
|
||||
_dfd_.resolve();
|
||||
}
|
||||
});
|
||||
}).always( function() {
|
||||
dfd.resolve( item_candidate.id );
|
||||
});
|
||||
return dfd.promise();
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
//MULTI CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//
|
||||
//Setup the collection of items
|
||||
//renders the module view
|
||||
//Listen to items collection changes and update the module setting
|
||||
|
||||
var CZRDynModuleMths = CZRDynModuleMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRDynModuleMths, {
|
||||
//////////////////////////////////////////////////
|
||||
/// PRE ADD MODEL DIALOG AND VIEW
|
||||
//////////////////////////////////////////////////
|
||||
renderPreItemView : function( obj ) {
|
||||
var module = this,
|
||||
dfd = $.Deferred(),
|
||||
pre_add_template;
|
||||
|
||||
//is this view already rendered ?
|
||||
if ( _.isObject( module.preItemsWrapper ) && 0 < module.preItemsWrapper.length ) { //was ! _.isEmpty( module.czr_preItem('item_content')() ) )
|
||||
return dfd.resolve( module.preItemsWrapper ).promise();
|
||||
}
|
||||
|
||||
var appendAndResolve = function( _tmpl_ ){
|
||||
//console.log('pre_add_template', _tmpl_ );
|
||||
//do we have an html template and a module container?
|
||||
if ( _.isEmpty( _tmpl_ ) || ! module.container ) {
|
||||
dfd.reject( 'renderPreItemView => Missing html template for module : '+ module.id );
|
||||
}
|
||||
|
||||
var $_pre_add_el = $('.' + module.control.css_attr.pre_add_item_content, module.container );
|
||||
|
||||
$_pre_add_el.prepend( $('<div>', { class : 'pre-item-wrapper'} ) );
|
||||
$_pre_add_el.find('.pre-item-wrapper').append( _tmpl_ );
|
||||
|
||||
//say it
|
||||
dfd.resolve( $_pre_add_el.find('.pre-item-wrapper') ).promise();
|
||||
};
|
||||
|
||||
// do we have view template script ?
|
||||
// if yes, let's use it <= Old way
|
||||
// Otherwise let's fetch the html template from the server
|
||||
if ( ! _.isEmpty( module.itemPreAddEl ) ) {
|
||||
if ( 1 > $( '#tmpl-' + module.itemPreAddEl ).length ) {
|
||||
dfd.reject( 'renderPreItemView => Missing itemPreAddEl or template in module '+ module.id );
|
||||
}
|
||||
// parse the html
|
||||
appendAndResolve( wp.template( module.itemPreAddEl )() );
|
||||
} else {
|
||||
api.CZR_Helpers.getModuleTmpl( {
|
||||
tmpl : 'pre-item',
|
||||
module_type: module.module_type,
|
||||
module_id : module.id,
|
||||
control_id : module.control.id
|
||||
} ).done( function( _serverTmpl_ ) {
|
||||
//console.log( 'success response =>', _serverTmpl_);
|
||||
appendAndResolve( api.CZR_Helpers.parseTemplate( _serverTmpl_ )() );
|
||||
}).fail( function( _r_ ) {
|
||||
//console.log( 'fail response =>', _r_);
|
||||
dfd.reject( [ 'renderPreItemView for module : ', module.id , _r_ ].join(' ') );
|
||||
});
|
||||
}
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
//@return $ el of the pre Item view
|
||||
_getPreItemView : function() {
|
||||
var module = this;
|
||||
return $('.' + module.control.css_attr.pre_add_item_content, module.container );
|
||||
},
|
||||
|
||||
|
||||
//callback of module.preItemExpanded
|
||||
//@_is_expanded = boolean.
|
||||
_togglePreItemViewExpansion : function( _is_expanded ) {
|
||||
var module = this,
|
||||
$_pre_add_el = $( '.' + module.control.css_attr.pre_add_item_content, module.container );
|
||||
|
||||
//toggle it
|
||||
$_pre_add_el.slideToggle( {
|
||||
duration : 200,
|
||||
done : function() {
|
||||
var $_btn = $( '.' + module.control.css_attr.open_pre_add_btn, module.container );
|
||||
|
||||
$(this).toggleClass('open' , _is_expanded );
|
||||
//switch icons
|
||||
if ( _is_expanded )
|
||||
$_btn.find('.fas').removeClass('fa-plus-square').addClass('fa-minus-square');
|
||||
else
|
||||
$_btn.find('.fas').removeClass('fa-minus-square').addClass('fa-plus-square');
|
||||
|
||||
//set the active class to the btn
|
||||
$_btn.toggleClass( 'active', _is_expanded );
|
||||
|
||||
//set the adding_new class to the module container wrapper
|
||||
$( module.container ).toggleClass( module.control.css_attr.adding_new, _is_expanded );
|
||||
//make sure it's fully visible
|
||||
module._adjustScrollExpandedBlock( $(this), 120 );
|
||||
}//done
|
||||
} );
|
||||
},
|
||||
|
||||
|
||||
toggleSuccessMessage : function( status ) {
|
||||
var module = this,
|
||||
_message = module.itemAddedMessage,
|
||||
$_pre_add_wrapper = $('.' + module.control.css_attr.pre_add_wrapper, module.container );
|
||||
$_success_wrapper = $('.' + module.control.css_attr.pre_add_success, module.container );
|
||||
|
||||
if ( 'on' == status ) {
|
||||
//write message
|
||||
$_success_wrapper.find('p').text(_message);
|
||||
|
||||
//set various properties
|
||||
$_success_wrapper.css('z-index', 1000001 )
|
||||
.css('height', $_pre_add_wrapper.height() + 'px' )
|
||||
.css('line-height', $_pre_add_wrapper.height() + 'px');
|
||||
} else {
|
||||
$_success_wrapper.attr('style','');
|
||||
}
|
||||
module.container.toggleClass('czr-model-added', 'on' == status );
|
||||
return this;
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
//BASE CONTROL CLASS
|
||||
//extends api.Control
|
||||
//define a set of methods, mostly helpers, to extend the base WP control class
|
||||
//this will become our base constructor for main complex controls
|
||||
//EARLY SETUP
|
||||
|
||||
var CZRBaseControlMths = CZRBaseControlMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRBaseControlMths, {
|
||||
initialize: function( id, options ) {
|
||||
var control = this;
|
||||
//add a shortcut to the css properties declared in the php controls
|
||||
control.css_attr = _.has( serverControlParams , 'css_attr') ? serverControlParams.css_attr : {};
|
||||
api.Control.prototype.initialize.call( control, id, options );
|
||||
|
||||
//When a partial refresh is done we need to send back all postMessage input to the preview
|
||||
//=> makes sure that all post message inputs not yet saved in db are properly applied
|
||||
control.bind( 'czr-partial-refresh-done', function() {
|
||||
if ( _.has( control, 'czr_moduleCollection' ) ) {
|
||||
_.each( control.czr_moduleCollection(), function( _mod_ ) {
|
||||
if ( ! control.czr_Module( _mod_.id ) )
|
||||
return;
|
||||
|
||||
control.czr_Module( _mod_.id ).sendModuleInputsToPreview( { isPartialRefresh : true } );
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//@return void()
|
||||
refreshPreview : function( obj ) {
|
||||
this.previewer.refresh();
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+269
@@ -0,0 +1,269 @@
|
||||
|
||||
//BASE CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//define a set of methods, mostly helpers, to extend the base WP control class
|
||||
//this will become our base constructor for main complex controls
|
||||
//EARLY SETUP
|
||||
var CZRBaseModuleControlMths = CZRBaseModuleControlMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRBaseModuleControlMths, {
|
||||
initialize: function( id, options ) {
|
||||
var control = this;
|
||||
if ( ! api.has( id ) ) {
|
||||
throw new Error( 'Missing a registered setting for control : ' + id );
|
||||
}
|
||||
|
||||
|
||||
control.czr_Module = new api.Values();
|
||||
|
||||
//czr_collection stores the module collection
|
||||
control.czr_moduleCollection = new api.Value();
|
||||
control.czr_moduleCollection.set([]);
|
||||
|
||||
//let's store the state of the initial module collection
|
||||
control.moduleCollectionReady = $.Deferred();
|
||||
//and listen to changes when it's ready
|
||||
control.moduleCollectionReady.done( function( obj ) {
|
||||
//if the module is not registered yet for a single module control
|
||||
//=> push it to the collection now, before listening to the module collection changes
|
||||
// if ( ! control.isModuleRegistered( module.id ) ) {
|
||||
// control.updateModulesCollection( { module : constructorOptions } );
|
||||
// }
|
||||
|
||||
//LISTEN TO MODULE COLLECTION
|
||||
control.czr_moduleCollection.callbacks.add( function() { return control.moduleCollectionReact.apply( control, arguments ); } );
|
||||
|
||||
//control.removeModule( _mod );
|
||||
} );
|
||||
|
||||
api.CZRBaseControl.prototype.initialize.call( control, id, options );
|
||||
|
||||
//close any open item and dialog boxes on section expansion
|
||||
api.section( control.section(), function( _section_ ) {
|
||||
_section_.expanded.bind(function(to) {
|
||||
control.czr_Module.each( function( _mod ){
|
||||
_mod.closeAllItems().closeRemoveDialogs();
|
||||
if ( _.has( _mod, 'preItem' ) ) {
|
||||
_mod.preItemExpanded(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
///READY = CONTROL INSTANTIATED AND DOM ELEMENT EMBEDDED ON THE PAGE
|
||||
///FIRED BEFORE API READY ? still true ?
|
||||
//
|
||||
// WP CORE => After the control is embedded on the page, invoke the "ready" method.
|
||||
// control.deferred.embedded.done( function () {
|
||||
// control.linkElements(); // Link any additional elements after template is rendered by renderContent().
|
||||
// control.setupNotifications();
|
||||
// control.ready();
|
||||
// });
|
||||
//////////////////////////////////
|
||||
ready : function() {
|
||||
var control = this,
|
||||
single_module = {},
|
||||
savedModules;
|
||||
|
||||
// Get the saved module and its initial items, get from the db of when dynamically registrating the setting control.
|
||||
try { savedModules = control.getSavedModules(); } catch( er ) {
|
||||
api.errare( 'api.CZRBaseControl::ready() => error on control.getSavedModules()', er );
|
||||
control.moduleCollectionReady.reject();
|
||||
return;
|
||||
}
|
||||
|
||||
// inits the collection with the saved module => there's only one module to instantiate in this case.
|
||||
// populates the collection with the saved module
|
||||
_.each( control.getSavedModules() , function( _mod, _key ) {
|
||||
//stores it
|
||||
single_module = _mod;
|
||||
|
||||
//adds it to the collection
|
||||
//=> it will be fired ready usually when the control section is expanded
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
control.instantiateModule( _mod, {} );
|
||||
} else {
|
||||
try { control.instantiateModule( _mod, {} ); } catch( er ) {
|
||||
api.errare( 'api.CZRBaseControl::Failed to instantiate module ' + _mod.id , er );
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//adds the module name to the control container element
|
||||
control.container.attr('data-module', _mod.id );
|
||||
});
|
||||
//the module collection is ready
|
||||
control.moduleCollectionReady.resolve( single_module );
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
/// VARIOUS HELPERS
|
||||
//////////////////////////////////
|
||||
///
|
||||
//@return the default API model {} needed to instantiate a module
|
||||
getDefaultModuleApiModel : function() {
|
||||
//if embedded in a control, amend the common model with the section id
|
||||
return {
|
||||
id : '',//module.id,
|
||||
module_type : '',//module.module_type,
|
||||
modOpt : {},//the module modOpt property, typically high level properties that area applied to all items of the module
|
||||
items : [],//$.extend( true, {}, module.items ),
|
||||
crud : false,
|
||||
hasPreItem : true,//a crud module has a pre item by default
|
||||
refresh_on_add_item : true,// the preview is refreshed on item add
|
||||
multi_item : false,
|
||||
sortable : false,//<= a module can be multi-item but not necessarily sortable
|
||||
control : {},//control,
|
||||
section : ''
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
// @return the collection [] of saved module(s) to instantiate
|
||||
// This method does not make sure that the module model is ready for API.
|
||||
// => it just returns an array of saved module candidates to instantiate.
|
||||
//
|
||||
// Before instantiation, we will make sure that all required property are defined for the modules with the method control.prepareModuleForAPI()
|
||||
// control : control,
|
||||
// crud : bool
|
||||
// id : '',
|
||||
// items : [], module.items,
|
||||
// modOpt : {}
|
||||
// module_type : module.module_type,
|
||||
// multi_item : bool
|
||||
// section : module.section,
|
||||
getSavedModules : function() {
|
||||
var control = this,
|
||||
_savedModulesCandidates = [],
|
||||
_module_type = control.params.module_type,
|
||||
_raw_saved_module_val = [],
|
||||
_saved_items = [],
|
||||
_saved_modOpt = {};
|
||||
|
||||
// What is the current server saved value for this setting?
|
||||
// in a normal case, it should be an array of saved properties
|
||||
// But it might not be if coming from a previous option system.
|
||||
// => let's normalize it.
|
||||
//
|
||||
// First let's perform a quick check on the current saved db val.
|
||||
// If the module is not multi-item, the saved value should be an object or empty if not set yet
|
||||
if ( ! api.CZR_Helpers.isMultiItemModule( _module_type ) && ! _.isEmpty( api( control.id )() ) && ! _.isObject( api( control.id )() ) ) {
|
||||
api.errare('api.CZRBaseControl::getSavedModules => module Control Init for ' + control.id + ' : a mono item module control value should be an object if not empty.');
|
||||
}
|
||||
|
||||
//SPLIT ITEMS [] and MODOPT {}
|
||||
//In database, items and modOpt are saved in the same option array.
|
||||
//If the module has modOpt ( the slider module for example ), the modOpt are described by an object which is always unshifted at the beginning of the setting value.
|
||||
|
||||
//the raw DB setting value is an array : modOpt {} + the saved items :
|
||||
////META IS THE FIRST ARRAY ELEMENT: A modOpt has no unique id and has the property is_modOpt set to true
|
||||
//[
|
||||
// is_mod_opt : true //<= inform us that this is not an item but a modOpt
|
||||
//],
|
||||
////THEN COME THE ITEMS
|
||||
//[
|
||||
// id : "czr_slide_module_0"
|
||||
// slide-background : 21,
|
||||
// ....
|
||||
// ],
|
||||
// [
|
||||
// id : "czr_slide_module_1"
|
||||
// slide-background : 21,
|
||||
// ....
|
||||
// ]
|
||||
// [...]
|
||||
|
||||
// POPULATE THE ITEMS [] and the MODOPT {} FROM THE RAW DB SAVED SETTING VAL
|
||||
// OR with the value used when registrating the module
|
||||
//
|
||||
// Important note :
|
||||
// The items should be turned into a collection of items [].
|
||||
var settingId = api.CZR_Helpers.getControlSettingId( control.id ),
|
||||
settingVal = api( settingId )();
|
||||
|
||||
// TO FIX
|
||||
if ( _.isEmpty( settingVal ) ) {
|
||||
_raw_saved_module_val = [];
|
||||
} else {
|
||||
_raw_saved_module_val = _.isArray( settingVal ) ? settingVal : [ settingVal ];
|
||||
}
|
||||
|
||||
|
||||
_.each( _raw_saved_module_val, function( item_or_mod_opt_candidate , key ) {
|
||||
if ( ! _.isObject( item_or_mod_opt_candidate ) ) {
|
||||
api.errare( 'api.CZRBaseControl::::getSavedModules => an item must be an object in control ' + control.id + ' => module type => ' + control.params.module_type, _raw_saved_module_val );
|
||||
return;
|
||||
}
|
||||
|
||||
// An item or modOpt can be empty on init
|
||||
// But if not empty, it has to be an associative object, with keys that are string typed
|
||||
// Fixes the case where an item { null } was accepted
|
||||
// https://github.com/presscustomizr/themes-customizer-fmk/issues/46
|
||||
if ( ! _.isEmpty( item_or_mod_opt_candidate ) ) {
|
||||
_.each( item_or_mod_opt_candidate, function( prop, _key_ ) {
|
||||
if ( ! _.isString( _key_ ) ) {
|
||||
api.errare( 'api.CZRBaseControl::::getSavedModules => item not well formed in control : ' + control.id + ' => module type => ' + control.params.module_type, _raw_saved_module_val );
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Module options, if enabled, are always saved as first key
|
||||
if ( api.CZR_Helpers.hasModuleModOpt( _module_type ) && 0*0 === key ) {
|
||||
// a saved module mod_opt object should not have an id
|
||||
if ( _.has( item_or_mod_opt_candidate, 'id') ) {
|
||||
api.errare( 'api.CZRBaseControl::getSavedModules : the module ' + _module_type + ' in control ' + control.id + ' has no mod_opt defined while it should.' );
|
||||
} else {
|
||||
_saved_modOpt = item_or_mod_opt_candidate;
|
||||
}
|
||||
}
|
||||
// else {
|
||||
// _saved_items.push( item_or_mod_opt_candidate );
|
||||
// }
|
||||
//Until April 30th 2018, was :
|
||||
//A modOpt has the property is_modOpt set to true
|
||||
if ( ! _.has( item_or_mod_opt_candidate, 'is_mod_opt' ) ) {
|
||||
_saved_items.push( item_or_mod_opt_candidate );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// This is a collection with one module
|
||||
// Note : @todo : the fact that the module are saved as a collection is not relevant anymore
|
||||
// This was introduced back in 2016 when building the first version of the section plugin.
|
||||
// With Nimble, a control can have one module only.
|
||||
_savedModulesCandidates.push({
|
||||
id : api.CZR_Helpers.getOptionName( control.id ) + '_' + control.params.type,
|
||||
module_type : control.params.module_type,
|
||||
section : control.section(),
|
||||
modOpt : $.extend( true, {} , _saved_modOpt ),//disconnect with a deep cloning
|
||||
items : $.extend( true, [] , _saved_items )//disconnect with a deep cloning
|
||||
});
|
||||
|
||||
return _savedModulesCandidates;
|
||||
},
|
||||
|
||||
|
||||
//this helper allows to check if a module has been registered in the collection
|
||||
//no matter if it's not instantiated yet
|
||||
isModuleRegistered : function( id_candidate ) {
|
||||
var control = this;
|
||||
return ! _.isUndefined( _.findWhere( control.czr_moduleCollection(), { id : id_candidate}) );
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+269
@@ -0,0 +1,269 @@
|
||||
|
||||
//BASE CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//define a set of methods, mostly helpers, to extend the base WP control class
|
||||
//this will become our base constructor for main complex controls
|
||||
//EARLY SETUP
|
||||
var CZRBaseModuleControlMths = CZRBaseModuleControlMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRBaseModuleControlMths, {
|
||||
//@param : module {}
|
||||
//@param : constructor string
|
||||
instantiateModule : function( module, constructor ) {
|
||||
if ( ! _.has( module,'id') ) {
|
||||
throw new Error('CZRModule::instantiateModule() : a module has no id and could not be added in the collection of : ' + this.id +'. Aborted.' );
|
||||
}
|
||||
var control = this;
|
||||
//is a constructor provided ?
|
||||
//if not try to look in the module object if we an find one
|
||||
if ( _.isUndefined(constructor) || _.isEmpty(constructor) ) {
|
||||
constructor = control.getModuleConstructor( module );
|
||||
}
|
||||
//on init, the module collection is populated with module already having an id
|
||||
//For now, let's check if the id is empty and is not already part of the collection.
|
||||
//@todo : improve this.
|
||||
if ( ! _.isEmpty( module.id ) && control.czr_Module.has( module.id ) ) {
|
||||
throw new Error('The module id already exists in the collection in control : ' + control.id );
|
||||
}
|
||||
|
||||
var module_api_ready = control.prepareModuleForAPI( module );
|
||||
|
||||
//instanciate the module with the default constructor
|
||||
control.czr_Module.add( module_api_ready.id, new constructor( module_api_ready.id, module_api_ready ) );
|
||||
|
||||
if ( ! control.czr_Module.has( module_api_ready.id ) ) {
|
||||
throw new Error('instantiateModule() : instantiation failed for module id ' + module_api_ready.id + ' in control ' + control.id );
|
||||
}
|
||||
//return the module instance for chaining
|
||||
return control.czr_Module(module_api_ready.id);
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@return a module constructor object
|
||||
getModuleConstructor : function( module ) {
|
||||
var control = this,
|
||||
parentConstructor = {},
|
||||
constructor = {};
|
||||
|
||||
if ( ! _.has( module, 'module_type' ) ) {
|
||||
throw new Error('CZRModule::getModuleConstructor : no module type found for module ' + module.id );
|
||||
}
|
||||
if ( ! _.has( api.czrModuleMap, module.module_type ) ) {
|
||||
throw new Error('Module type ' + module.module_type + ' is not listed in the module map api.czrModuleMap.' );
|
||||
}
|
||||
|
||||
var _mthds = api.czrModuleMap[ module.module_type ].mthds || {},
|
||||
_is_crud = api.czrModuleMap[ module.module_type ].crud,
|
||||
_base_constructor = _is_crud ? api.CZRDynModule : api.CZRModule;
|
||||
|
||||
// June 2020 : introduced for https://github.com/presscustomizr/nimble-builder-pro/issues/6
|
||||
// so we can remotely extend the module constructor
|
||||
api.trigger('czr_setup_module_contructor', {
|
||||
module_type : module.module_type,
|
||||
methods : _mthds
|
||||
});
|
||||
|
||||
constructor = _base_constructor.extend( _mthds );
|
||||
|
||||
if ( _.isUndefined( constructor ) || _.isEmpty(constructor) || ! constructor ) {
|
||||
throw new Error('CZRModule::getModuleConstructor : no constructor found for module type : ' + module.module_type +'.' );
|
||||
}
|
||||
return constructor;
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//@return an API ready module object
|
||||
//To be instantiated in the API, the module model must have all the required properties defined in the defaultAPIModel properly set
|
||||
prepareModuleForAPI : function( module_candidate ) {
|
||||
if ( ! _.isObject( module_candidate ) ) {
|
||||
throw new Error('prepareModuleForAPI : a module must be an object to be instantiated.');
|
||||
}
|
||||
|
||||
var control = this,
|
||||
api_ready_module = {};
|
||||
|
||||
// Default module model
|
||||
//{
|
||||
// id : '',//module.id,
|
||||
// module_type : '',//module.module_type,
|
||||
// modOpt : {},//the module modOpt property, typically high level properties that area applied to all items of the module
|
||||
// items : [],//$.extend( true, {}, module.items ),
|
||||
// crud : false,
|
||||
// hasPreItem : true,//a crud module has a pre item by default
|
||||
// refresh_on_add_item : true,// the preview is refreshed on item add
|
||||
// multi_item : false,
|
||||
// sortable : false,//<= a module can be multi-item but not necessarily sortable
|
||||
// control : {},//control,
|
||||
// section : ''
|
||||
// };
|
||||
_.each( control.getDefaultModuleApiModel() , function( _defaultValue, _key ) {
|
||||
var _candidate_val = module_candidate[_key];
|
||||
switch( _key ) {
|
||||
//PROPERTIES COMMON TO ALL MODULES IN ALL CONTEXTS
|
||||
case 'id' :
|
||||
if ( _.isEmpty( _candidate_val ) ) {
|
||||
api_ready_module[_key] = control.generateModuleId( module_candidate.module_type );
|
||||
} else {
|
||||
api_ready_module[_key] = _candidate_val;
|
||||
}
|
||||
break;
|
||||
case 'module_type' :
|
||||
if ( ! _.isString( _candidate_val ) || _.isEmpty( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : a module type must a string not empty');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val;
|
||||
break;
|
||||
case 'items' :
|
||||
if ( ! _.isArray( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : a module item list must be an array');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val;
|
||||
break;
|
||||
case 'modOpt' :
|
||||
if ( ! _.isObject( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : a module modOpt property must be an object');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val;
|
||||
break;
|
||||
case 'crud' :
|
||||
//get the value from the czrModuleMap
|
||||
if ( _.has( api.czrModuleMap, module_candidate.module_type ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].crud;
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = _defaultValue;
|
||||
}
|
||||
} else if ( ! _.isUndefined( _candidate_val) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : the module param "crud" must be a boolean');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
case 'hasPreItem' :
|
||||
//get the value from the czrModuleMap
|
||||
if ( _.has( api.czrModuleMap, module_candidate.module_type ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].hasPreItem;
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = _defaultValue;
|
||||
}
|
||||
} else if ( ! _.isUndefined( _candidate_val) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : the module param "hasPreItem" must be a boolean');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
case 'refresh_on_add_item' :
|
||||
//get the value from the czrModuleMap
|
||||
if ( _.has( api.czrModuleMap, module_candidate.module_type ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].refresh_on_add_item;
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = _defaultValue;
|
||||
}
|
||||
} else if ( ! _.isUndefined( _candidate_val) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : the module param "refresh_on_add_item" must be a boolean');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
case 'multi_item' :
|
||||
// get the value from the czrModuleMap
|
||||
// fallback on "crud" param if set
|
||||
if ( _.has( api.czrModuleMap, module_candidate.module_type ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].multi_item;
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].crud;
|
||||
}
|
||||
} else if ( ! _.isUndefined( _candidate_val) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : the module param "multi_item" must be a boolean');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
//if the sortable property is not set, then check if crud or multi-item
|
||||
case 'sortable' :
|
||||
//get the value from the czrModuleMap
|
||||
if ( _.has( api.czrModuleMap, module_candidate.module_type ) ) {
|
||||
// if the sortable param is not specified, set it based on the "crud" and "multi_item" params
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].sortable;
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].crud;
|
||||
}
|
||||
if ( _.isUndefined( _candidate_val ) ) {
|
||||
_candidate_val = api.czrModuleMap[ module_candidate.module_type ].multi_item;
|
||||
}
|
||||
} else if ( ! _.isUndefined( _candidate_val) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : the module param "sortable" must be a boolean');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
case 'control' :
|
||||
api_ready_module[_key] = control;//this
|
||||
break;
|
||||
|
||||
|
||||
|
||||
//PROPERTIES FOR MODULE EMBEDDED IN A CONTROL
|
||||
case 'section' :
|
||||
if ( ! _.isString( _candidate_val ) || _.isEmpty( _candidate_val ) ) {
|
||||
throw new Error('prepareModuleForAPI : a module section must be a string not empty');
|
||||
}
|
||||
api_ready_module[_key] = _candidate_val;
|
||||
break;
|
||||
|
||||
|
||||
|
||||
//PROPERTIES FOR MODULE EMBEDDED IN A SEKTION
|
||||
case 'dirty' :
|
||||
api_ready_module[_key] = _candidate_val || false;
|
||||
break;
|
||||
}//switch
|
||||
});
|
||||
return api_ready_module;
|
||||
},
|
||||
|
||||
|
||||
//recursive
|
||||
generateModuleId : function( module_type, key, i ) {
|
||||
//prevent a potential infinite loop
|
||||
i = i || 1;
|
||||
if ( i > 100 ) {
|
||||
throw new Error('Infinite loop when generating of a module id.');
|
||||
}
|
||||
var control = this;
|
||||
key = key || control._getNextModuleKeyInCollection();
|
||||
var id_candidate = module_type + '_' + key;
|
||||
|
||||
//do we have a module collection value ?
|
||||
if ( ! _.has(control, 'czr_moduleCollection') || ! _.isArray( control.czr_moduleCollection() ) ) {
|
||||
throw new Error('The module collection does not exist or is not properly set in control : ' + control.id );
|
||||
}
|
||||
|
||||
//make sure the module is not already instantiated
|
||||
if ( control.isModuleRegistered( id_candidate ) ) {
|
||||
key++; i++;
|
||||
return control.generateModuleId( module_type, key, i );
|
||||
}
|
||||
|
||||
return id_candidate;
|
||||
},
|
||||
|
||||
|
||||
//helper : return an int
|
||||
//=> the next available id of the module collection
|
||||
_getNextModuleKeyInCollection : function() {
|
||||
var control = this,
|
||||
_max_mod_key = {},
|
||||
_next_key = 0;
|
||||
|
||||
//get the initial key
|
||||
//=> if we already have a collection, extract all keys, select the max and increment it.
|
||||
//else, key is 0
|
||||
if ( ! _.isEmpty( control.czr_moduleCollection() ) ) {
|
||||
_max_mod_key = _.max( control.czr_moduleCollection(), function( _mod ) {
|
||||
return parseInt( _mod.id.replace(/[^\/\d]/g,''), 10 );
|
||||
});
|
||||
_next_key = parseInt( _max_mod_key.id.replace(/[^\/\d]/g,''), 10 ) + 1;
|
||||
}
|
||||
return _next_key;
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+204
@@ -0,0 +1,204 @@
|
||||
|
||||
//BASE CONTROL CLASS
|
||||
//extends api.CZRBaseControl
|
||||
//define a set of methods, mostly helpers, to extend the base WP control class
|
||||
//this will become our base constructor for main complex controls
|
||||
//EARLY SETUP
|
||||
var CZRBaseModuleControlMths = CZRBaseModuleControlMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRBaseModuleControlMths, {
|
||||
//@return void()
|
||||
//@param obj can be { collection : []}, or { module : {} }
|
||||
//Can be called :
|
||||
//- for all modules, in module.isReady.done() if the module is not registered in the collection yet.
|
||||
//- for all modules on moduleReact ( module.callbacks )
|
||||
//
|
||||
//=> sets the setting value through the module collection !
|
||||
updateModulesCollection : function( obj ) {
|
||||
var control = this,
|
||||
_current_collection = control.czr_moduleCollection(),
|
||||
_new_collection = $.extend( true, [], _current_collection);
|
||||
|
||||
//if a collection is provided in the passed obj then simply refresh the collection
|
||||
//=> typically used when reordering the collection module with sortable or when a module is removed
|
||||
if ( _.has( obj, 'collection' ) ) {
|
||||
//reset the collection
|
||||
control.czr_moduleCollection.set( obj.collection, obj.data || {} );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! _.has(obj, 'module') ) {
|
||||
throw new Error('updateModulesCollection, no module provided ' + control.id + '. Aborting');
|
||||
}
|
||||
|
||||
//normalizes the module for the API
|
||||
var module_api_ready = control.prepareModuleForAPI( _.clone( obj.module ) );
|
||||
|
||||
//the module already exist in the collection
|
||||
if ( _.findWhere( _new_collection, { id : module_api_ready.id } ) ) {
|
||||
_.each( _current_collection , function( _elt, _ind ) {
|
||||
if ( _elt.id != module_api_ready.id )
|
||||
return;
|
||||
|
||||
//set the new val to the changed property
|
||||
_new_collection[_ind] = module_api_ready;
|
||||
});
|
||||
}
|
||||
//the module has to be added
|
||||
else {
|
||||
_new_collection.push( module_api_ready );
|
||||
}
|
||||
|
||||
//WHAT ARE THE PARAMS WE WANT TO PASS TO THE NEXT ACTIONS
|
||||
var _params = {};
|
||||
//if a data property has been passed,
|
||||
//amend the data property with the changed module
|
||||
if ( _.has( obj, 'data') ) {
|
||||
_params = $.extend( true, {}, obj.data );
|
||||
$.extend( _params, { module : module_api_ready } );
|
||||
}
|
||||
//Inform the collection
|
||||
control.czr_moduleCollection.set( _new_collection, _params );
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////// WHERE THE STREETS HAVE NO NAMES //////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// cb of control.czr_moduleCollection.callbacks
|
||||
// @params is an optional object. { silent : true }
|
||||
moduleCollectionReact : function( to, from, params ) {
|
||||
var control = this,
|
||||
is_module_added = _.size(to) > _.size(from),
|
||||
is_module_removed = _.size(from) > _.size(to),
|
||||
is_module_update = _.size(from) == _.size(to);
|
||||
is_collection_sorted = false;
|
||||
|
||||
// MODULE REMOVED
|
||||
// Remove the module instance if needed
|
||||
if ( is_module_removed ) {
|
||||
//find the module to remove
|
||||
var _to_remove = _.filter( from, function( _mod ){
|
||||
return _.isUndefined( _.findWhere( to, { id : _mod.id } ) );
|
||||
});
|
||||
_to_remove = _to_remove[0];
|
||||
control.czr_Module.remove( _to_remove.id );
|
||||
}
|
||||
|
||||
// is there a passed module param ?
|
||||
// if so prepare it for DB
|
||||
// if a module is provided, we also want to pass its id to the preview => can be used to target specific selectors in a partial refresh scenario
|
||||
if ( _.isObject( params ) && _.has( params, 'module' ) ) {
|
||||
params.module_id = params.module.id;
|
||||
params.moduleRegistrationParams = params.module;
|
||||
params.module = control.prepareModuleForDB( $.extend( true, {}, params.module ) );
|
||||
}
|
||||
|
||||
// Inform the the setting if the module is not being added to the collection for the first time,
|
||||
// We don't want to say it to the setting, because it might alter the setting dirtyness for nothing on init.
|
||||
if ( ! is_module_added ) {
|
||||
// control.filterModuleCollectionBeforeAjax( to ) returns an array of items
|
||||
// if the module has modOpt, the modOpt object is always added as the first element of the items array (unshifted)
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
api( this.id ).set( control.filterModuleCollectionBeforeAjax( to ), params );
|
||||
} else {
|
||||
try { api( this.id ).set( control.filterModuleCollectionBeforeAjax( to ), params ); } catch( er ) {
|
||||
api.errare( 'api.CZRBaseControl::moduleCollectionReact => error when firing control.filterModuleCollectionBeforeAjax( to )', er );
|
||||
}
|
||||
}
|
||||
//.done( function( to, from, o ) {});
|
||||
}
|
||||
},
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////// WHERE THE STREETS HAVE NO NAMES //////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//an overridable method to act on the collection just before it is ajaxed
|
||||
//@return the collection array
|
||||
filterModuleCollectionBeforeAjax : function( collection ) {
|
||||
var control = this,
|
||||
cloned_collection = $.extend( true, [], collection ),
|
||||
_filtered_collection = [],
|
||||
itemsToReturn;
|
||||
|
||||
_.each( cloned_collection , function( _mod, _key ) {
|
||||
var db_ready_mod = $.extend( true, {}, _mod );
|
||||
_filtered_collection[_key] = control.prepareModuleForDB( db_ready_mod );
|
||||
});
|
||||
|
||||
//=> in a control : we save
|
||||
//1) the collection of item(s)
|
||||
//2) the modOpt
|
||||
//at this point we should be in the case of a single module collection, typically use to populate a regular setting
|
||||
if ( _.size( cloned_collection ) > 1 ) {
|
||||
throw new Error('There should not be several modules in the collection of control : ' + control.id );
|
||||
}
|
||||
if ( ! _.isArray( cloned_collection ) || _.isEmpty( cloned_collection ) || ! _.has( cloned_collection[0], 'items' ) ) {
|
||||
throw new Error('The setting value could not be populated in control : ' + control.id );
|
||||
}
|
||||
var module_id = cloned_collection[0].id;
|
||||
|
||||
if ( ! control.czr_Module.has( module_id ) ) {
|
||||
throw new Error('The single module control (' + control.id + ') has no module registered with the id ' + module_id );
|
||||
}
|
||||
var module_instance = control.czr_Module( module_id );
|
||||
if ( ! _.isArray( module_instance().items ) ) {
|
||||
throw new Error('The module ' + module_id + ' should be an array in control : ' + control.id );
|
||||
}
|
||||
|
||||
// items
|
||||
// For a mono-item module, we save the first and unique item object
|
||||
// For example :
|
||||
// {
|
||||
// 'heading_text' : "this is a heading"
|
||||
// 'font_size' : '10px'
|
||||
// ...
|
||||
// }
|
||||
//
|
||||
// For a multi-item module, we save a collection of item objects, which may include a mod_opt item
|
||||
itemsToReturn = module_instance.isMultiItem() ? module_instance().items : ( module_instance().items[0] || [] );
|
||||
itemsToReturn = module_instance.filterItemsBeforeCoreApiSettingValue( itemsToReturn );
|
||||
|
||||
//Add the modOpt if any
|
||||
return module_instance.hasModOpt() ? _.union( [ module_instance().modOpt ] , itemsToReturn ) : itemsToReturn;
|
||||
},
|
||||
|
||||
|
||||
// fired before adding a module to the collection of DB candidates
|
||||
// the module must have the control.getDefaultModuleDBModel structure :
|
||||
prepareModuleForDB : function ( module_db_candidate ) {
|
||||
var control = this;
|
||||
if ( ! _.isObject( module_db_candidate ) ) {
|
||||
throw new Error('::prepareModuleForDB : a module must be an object.');
|
||||
}
|
||||
var db_ready_module = {};
|
||||
|
||||
// The items property should be a collection, even for mono-item modules
|
||||
if ( ! _.isArray( module_db_candidate['items'] ) ) {
|
||||
throw new Error('::prepareModuleForDB : a module item list must be an array');
|
||||
}
|
||||
|
||||
// Let's loop on the item(s) to check if they are well formed
|
||||
_.each( module_db_candidate['items'], function( itm ) {
|
||||
if ( ! _.isObject( itm ) ) {
|
||||
throw new Error('::prepareModuleForDB : a module item must be an object');
|
||||
}
|
||||
});
|
||||
|
||||
db_ready_module['items'] = module_db_candidate['items'];
|
||||
return db_ready_module;
|
||||
}
|
||||
});//$.extend//CZRBaseControlMths
|
||||
})( wp.customize , jQuery, _ );
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/*****************************************************************************
|
||||
* REACT TO PREVIEW DEVICE SWITCH => send device to preview
|
||||
*****************************************************************************/
|
||||
api.bind( 'ready' , function() {
|
||||
if ( api.previewedDevice ) {
|
||||
api.previewedDevice.bind( function( device ) {
|
||||
api.previewer.send( 'previewed-device', device );
|
||||
});
|
||||
}
|
||||
});
|
||||
})( wp.customize , jQuery, _);
|
||||
@@ -0,0 +1,85 @@
|
||||
//NOT USED YET
|
||||
// var czr_debug = {
|
||||
// log: function(o) {debug.queue.push(['log', arguments, debug.stack.slice(0)]); if (window.console && typeof window.console.log == 'function') {window.console.log(o);}},
|
||||
// error: function(o) {debug.queue.push(['error', arguments, debug.stack.slice(0)]); if (window.console && typeof window.console.error == 'function') {window.console.error(o);}},
|
||||
// queue: [],
|
||||
// stack: []
|
||||
// };
|
||||
//var api = api || wp.customize, $ = $ || jQuery;
|
||||
( function ( api, $, _ ) {
|
||||
//@return [] for console method
|
||||
//@bgCol @textCol are hex colors
|
||||
//@arguments : the original console arguments
|
||||
var _prettyPrintLog = function( args ) {
|
||||
var _defaults = {
|
||||
bgCol : '#5ed1f5',
|
||||
textCol : '#000',
|
||||
consoleArguments : []
|
||||
};
|
||||
args = _.extend( _defaults, args );
|
||||
|
||||
var _toArr = Array.from( args.consoleArguments ),
|
||||
_truncate = function( string ){
|
||||
if ( ! _.isString( string ) )
|
||||
return '';
|
||||
return string.length > 300 ? string.substr( 0, 299 ) + '...' : string;
|
||||
};
|
||||
|
||||
//if the array to print is not composed exclusively of strings, then let's stringify it
|
||||
//else join(' ')
|
||||
if ( ! _.isEmpty( _.filter( _toArr, function( it ) { return ! _.isString( it ); } ) ) ) {
|
||||
_toArr = JSON.stringify( _toArr.join(' ') );
|
||||
} else {
|
||||
_toArr = _toArr.join(' ');
|
||||
}
|
||||
return [
|
||||
'%c ' + _truncate( _toArr ),
|
||||
[ 'background:' + args.bgCol, 'color:' + args.textCol, 'display: block;' ].join(';')
|
||||
];
|
||||
};
|
||||
|
||||
var _wrapLogInsideTags = function( title, msg, bgColor ) {
|
||||
//fix for IE, because console is only defined when in F12 debugging mode in IE
|
||||
if ( ( _.isUndefined( console ) && typeof window.console.log != 'function' ) )
|
||||
return;
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
if ( _.isUndefined( msg ) ) {
|
||||
console.log.apply( console, _prettyPrintLog( { bgCol : bgColor, textCol : '#000', consoleArguments : [ '<' + title + '>' ] } ) );
|
||||
} else {
|
||||
console.log.apply( console, _prettyPrintLog( { bgCol : bgColor, textCol : '#000', consoleArguments : [ '<' + title + '>' ] } ) );
|
||||
console.log( msg );
|
||||
console.log.apply( console, _prettyPrintLog( { bgCol : bgColor, textCol : '#000', consoleArguments : [ '</' + title + '>' ] } ) );
|
||||
}
|
||||
} else {
|
||||
console.log.apply( console, _prettyPrintLog( { bgCol : bgColor, textCol : '#000', consoleArguments : [ title ] } ) );
|
||||
}
|
||||
};
|
||||
//Dev mode aware and IE compatible api.consoleLog()
|
||||
api.consoleLog = function() {
|
||||
if ( ! serverControlParams.isDevMode )
|
||||
return;
|
||||
//fix for IE, because console is only defined when in F12 debugging mode in IE
|
||||
if ( ( _.isUndefined( console ) && typeof window.console.log != 'function' ) )
|
||||
return;
|
||||
console.log.apply( console, _prettyPrintLog( { consoleArguments : arguments } ) );
|
||||
console.log( 'Unstyled console message : ', arguments );
|
||||
};
|
||||
|
||||
api.errorLog = function() {
|
||||
//fix for IE, because console is only defined when in F12 debugging mode in IE
|
||||
if ( ( _.isUndefined( console ) && typeof window.console.log != 'function' ) )
|
||||
return;
|
||||
|
||||
console.log.apply( console, _prettyPrintLog( { bgCol : '#ffd5a0', textCol : '#000', consoleArguments : arguments } ) );
|
||||
// if ( serverControlParams.isDevMode ) {
|
||||
// console.log( 'Unstyled error message : ', arguments );
|
||||
// }
|
||||
};
|
||||
|
||||
api.errare = function( title, msg ) { _wrapLogInsideTags( title, msg, '#ffd5a0' ); };
|
||||
api.infoLog = function( title, msg ) { _wrapLogInsideTags( title, msg, '#5ed1f5' ); };
|
||||
|
||||
api.czr_isChangeSetOn = function() {
|
||||
return serverControlParams.isChangeSetOn && true === true;//&& true === true is just there to hackily cast the returned value as boolean.
|
||||
};
|
||||
})( wp.customize , jQuery, _);
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
//SET THE ACTIVE STATE OF THE THEMES SECTION BASED ON WHAT THE SERVER SENT
|
||||
api.bind('ready', function() {
|
||||
var _do = function() {
|
||||
// the themeServerControlParams global is printed only with Customizr and Hueman
|
||||
if ( _.isUndefined( window.themeServerControlParams ) || _.isUndefined( themeServerControlParams.isThemeSwitchOn ) )
|
||||
return;
|
||||
|
||||
if ( ! themeServerControlParams.isThemeSwitchOn ) {
|
||||
//reset the callbacks
|
||||
api.panel('themes').active.callbacks = $.Callbacks();
|
||||
api.panel('themes').active( themeServerControlParams.isThemeSwitchOn );
|
||||
}
|
||||
};
|
||||
if ( api.panel.has( 'themes') ) {
|
||||
_do();
|
||||
} else {
|
||||
api.panel.when( 'themes', function( _s ) {
|
||||
_do();
|
||||
});
|
||||
}
|
||||
});
|
||||
})( wp.customize , jQuery, _);
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/*****************************************************************************
|
||||
* OBSERVE SECTIONS AND PANEL EXPANSION
|
||||
* /store the current expanded section and panel
|
||||
*****************************************************************************/
|
||||
api.czr_activeSectionId = api.czr_activeSectionId || new api.Value('');
|
||||
api.czr_activePanelId = api.czr_activePanelId || new api.Value('');
|
||||
|
||||
api.bind('ready', function() {
|
||||
if ( 'function' != typeof api.Section ) {
|
||||
throw new Error( 'Your current version of WordPress does not support the customizer sections needed for this theme. Please upgrade WordPress to the latest version.' );
|
||||
}
|
||||
|
||||
//STORE THE CURRENTLY ACTIVE SECTION AND PANELS IN AN OBSERVABLE VALUE
|
||||
//BIND EXISTING AND FUTURE SECTIONS AND PANELS
|
||||
|
||||
|
||||
var _storeCurrentSection = function( expanded, section_id ) {
|
||||
api.czr_activeSectionId( expanded ? section_id : '' );
|
||||
};
|
||||
api.section.each( function( _sec ) {
|
||||
//<@4.9compat>
|
||||
// Bail if is 'publish_setting' section
|
||||
if ( 'publish_settings' == _sec.id )
|
||||
return;
|
||||
//</@4.9compat>
|
||||
_sec.expanded.bind( function( expanded ) { _storeCurrentSection( expanded, _sec.id ); } );
|
||||
});
|
||||
api.section.bind( 'add', function( section_instance ) {
|
||||
//<@4.9compat>
|
||||
// Bail if is 'publish_setting' section
|
||||
if ( 'publish_settings' == section_instance.id )
|
||||
return;
|
||||
//</@4.9compat>
|
||||
// api.trigger('czr-paint', { active_panel_id : section_instance.panel() } ); <= Deprecated, was used in old skope
|
||||
section_instance.expanded.bind( function( expanded ) { _storeCurrentSection( expanded, section_instance.id ); } );
|
||||
});
|
||||
|
||||
var _storeCurrentPanel = function( expanded, panel_id ) {
|
||||
api.czr_activePanelId( expanded ? panel_id : '' );
|
||||
//if the expanded panel id becomes empty (typically when switching back to the root panel), make sure that no section is set as currently active
|
||||
//=> fixes the problem of add_menu section staying expanded when switching back to another panel
|
||||
if ( _.isEmpty( api.czr_activePanelId() ) ) {
|
||||
api.czr_activeSectionId( '' );
|
||||
}
|
||||
};
|
||||
api.panel.each( function( _panel ) {
|
||||
_panel.expanded.bind( function( expanded ) { _storeCurrentPanel( expanded, _panel.id ); } );
|
||||
});
|
||||
api.panel.bind( 'add', function( panel_instance ) {
|
||||
panel_instance.expanded.bind( function( expanded ) { _storeCurrentPanel( expanded, panel_instance.id ); } );
|
||||
});
|
||||
});
|
||||
})( wp.customize , jQuery, _);
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/*****************************************************************************
|
||||
*
|
||||
*****************************************************************************/
|
||||
api.bind('ready', function() {
|
||||
// do we have dynamic registration candidates
|
||||
var dynRegistrationCandidates = serverControlParams.paramsForDynamicRegistration || [];
|
||||
if ( ! _.isObject( serverControlParams.paramsForDynamicRegistration ) ) {
|
||||
api.errorLog( 'serverControlParams.paramsForDynamicRegistration should be an array');
|
||||
}
|
||||
|
||||
_.each( serverControlParams.paramsForDynamicRegistration, function( dynParams, setId ) {
|
||||
// The dynamic registration should be explicitely set
|
||||
if ( dynParams.module_registration_params && true === dynParams.module_registration_params.dynamic_registration ) {
|
||||
if ( serverControlParams.isDevMode ) {
|
||||
registerDynamicModuleSettingControl( dynParams );
|
||||
} else {
|
||||
try { registerDynamicModuleSettingControl( dynParams ); } catch( er ) {
|
||||
api.errorLog( er );
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});//api.bind('ready', function()
|
||||
|
||||
|
||||
// Register the relevant setting and control based on the current skope ids
|
||||
// @return the setting id
|
||||
var registerDynamicModuleSettingControl = function( args ) {
|
||||
args = _.extend( {
|
||||
'setting_id' : '',
|
||||
'module_type' : '',
|
||||
'option_value' : [],
|
||||
// 'setting' => array(
|
||||
// 'type' => 'option',
|
||||
// 'default' => array(),
|
||||
// 'transport' => 'refresh',
|
||||
// 'setting_class' => '',//array( 'path' => '', 'name' => '' )
|
||||
// 'sanitize_callback' => '',
|
||||
// 'validate_callback' => '',
|
||||
// ),
|
||||
'setting' : {},
|
||||
'section' : { id : '', title : '' },
|
||||
'control' : {},
|
||||
//'setting_type' : 'option'
|
||||
|
||||
}, args );
|
||||
|
||||
// we must have not empty setting_id, module_type
|
||||
if ( _.isEmpty( args.setting_id ) || _.isEmpty( args.module_type ) ) {
|
||||
api.errare( 'registerDynamicModuleSettingControl => args', args );
|
||||
throw new Error( 'registerDynamicModuleSettingControl => missing params when registrating a setting');
|
||||
}
|
||||
|
||||
// the option value must be an array
|
||||
if ( ! _.isArray( args.option_value ) && ! _.isObject( args.option_value ) ) {
|
||||
throw new Error( 'registerDynamicModuleSettingControl => the module values must be an array or an object');
|
||||
}
|
||||
|
||||
var settingId = args.setting_id,
|
||||
settingArgs = args.setting;
|
||||
|
||||
api.CZR_Helpers.register( {
|
||||
what : 'setting',
|
||||
id : settingId,
|
||||
dirty : ! _.isEmpty( args.option_value ),
|
||||
value : args.option_value,
|
||||
transport : settingArgs.transport || 'refresh',
|
||||
type : settingArgs.type || 'option',
|
||||
track : false// <= don't add it in any registered collection @see Nimble or Contextualizer
|
||||
});
|
||||
|
||||
// MAYBE REGISTER THE SECTION
|
||||
var sectionArgs = args.section;
|
||||
if ( ! _.isEmpty( sectionArgs ) ) {
|
||||
// Check if we have a correct section
|
||||
if ( ! _.has( sectionArgs, 'id' ) ){
|
||||
throw new Error( 'registerDynamicModuleSettingControl => missing section id for the section of setting : ' + settingId );
|
||||
}
|
||||
|
||||
api.CZR_Helpers.register({
|
||||
what : 'section',
|
||||
id : sectionArgs.id,
|
||||
title: sectionArgs.title || sectionArgs.id,
|
||||
panel : _.isEmpty( sectionArgs.panel ) ? '' : sectionArgs.panel,
|
||||
priority : sectionArgs.priority || 10,
|
||||
track : false// <= don't add it in any registered collection @see Nimble or Contextualizer => this will prevent this container to be removed when cleaning the registered
|
||||
});
|
||||
}
|
||||
|
||||
// REGISTER THE CONTROL
|
||||
var controlId = settingId,
|
||||
controlArgs = args.control,
|
||||
ctrlSectionId;
|
||||
|
||||
// Do we have a section ?
|
||||
if ( ! _.isEmpty( args.section ) ) {
|
||||
ctrlSectionId = args.section.id;
|
||||
} else {
|
||||
ctrlSectionId = controlArgs.section;
|
||||
}
|
||||
|
||||
if ( _.isEmpty( ctrlSectionId ) ) {
|
||||
api.errare( 'registerDynamicModuleSettingControl => missing section id for the control', args );
|
||||
throw new Error( 'registerDynamicModuleSettingControl => missing section id for the section of setting : ' + settingId );
|
||||
}
|
||||
api.CZR_Helpers.register({
|
||||
what : 'control',
|
||||
id : controlId,
|
||||
label : controlArgs.label || controlId,
|
||||
type : 'czr_module',
|
||||
module_type : args.module_type,//'czr_background',
|
||||
section : ctrlSectionId,//'contx_body_bg',
|
||||
priority : controlArgs.priority || 10,
|
||||
settings : { default : settingId },
|
||||
track : false// <= don't add it in any registered collection @see Nimble or Contextualizer => this will prevent this container to be removed when cleaning the registered
|
||||
});
|
||||
|
||||
// if the currently expanded section is the one of the dynamic control
|
||||
// Awake the module => fire ready
|
||||
if ( api.section.has( ctrlSectionId ) && api.section( ctrlSectionId ).expanded() ) {
|
||||
api.control( controlId ).trigger( 'set-module-ready' );
|
||||
}
|
||||
|
||||
return settingId;
|
||||
};//registerDynamicModuleSettingControl
|
||||
})( wp.customize , jQuery, _);
|
||||
@@ -0,0 +1,67 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
// BASE
|
||||
// BASE : Extends some constructors with the events manager
|
||||
$.extend( CZRBaseControlMths, api.Events );
|
||||
$.extend( api.Control.prototype, api.Events );//ensures that the default WP control constructor is extended as well
|
||||
$.extend( CZRModuleMths, api.Events );
|
||||
$.extend( CZRItemMths, api.Events );
|
||||
$.extend( CZRModOptMths, api.Events );
|
||||
|
||||
// BASE : Add the DOM helpers (addAction, ...) to the Control Base Class + Input Base Class
|
||||
$.extend( CZRBaseControlMths, api.CZR_Helpers );
|
||||
$.extend( CZRInputMths, api.CZR_Helpers );
|
||||
$.extend( CZRModuleMths, api.CZR_Helpers );
|
||||
|
||||
// BASE INPUTS => used as constructor when creating the collection of inputs
|
||||
api.CZRInput = api.Value.extend( CZRInputMths );
|
||||
// Declare all available input type as a map
|
||||
api.czrInputMap = api.czrInputMap || {};
|
||||
|
||||
// input_type => callback fn to fire in the Input constructor on initialize
|
||||
// the callback can receive specific params define in each module constructor
|
||||
// For example, a content picker can be given params to display only taxonomies
|
||||
// the default input_event_map can also be overriden in this callback
|
||||
$.extend( api.czrInputMap, {
|
||||
text : '',
|
||||
textarea : '',
|
||||
check : 'setupIcheck',
|
||||
checkbox : 'setupIcheck',
|
||||
//gutencheck : 'setupGutenCheck', // DEPRECATED since april 2nd 2019
|
||||
nimblecheck : '',//setupNimbleCheck',
|
||||
select : 'setupSelect',
|
||||
radio : 'setupRadio',
|
||||
number : 'setupStepper',
|
||||
upload : 'setupImageUploaderSaveAsId',
|
||||
upload_url : 'setupImageUploaderSaveAsUrl',
|
||||
color : 'setupColorPicker',
|
||||
wp_color_alpha : 'setupColorPickerAlpha',
|
||||
wp_color : 'setupWPColorPicker',//not used for the moment
|
||||
content_picker : 'setupContentPicker',
|
||||
password : '',
|
||||
range : 'setupSimpleRange',
|
||||
range_slider : 'setupRangeSlider',
|
||||
hidden : '',
|
||||
h_alignment : 'setupHAlignement',
|
||||
h_text_alignment : 'setupHAlignement',
|
||||
inactive : '' // introduced sept 2020 for https://github.com/presscustomizr/nimble-builder-pro/issues/67
|
||||
});
|
||||
|
||||
|
||||
|
||||
// BASE ITEMS => used as constructor when creating the collection of models
|
||||
api.CZRItem = api.Value.extend( CZRItemMths );
|
||||
|
||||
// BASE MODULE OPTIONS => used as constructor when creating module options
|
||||
api.CZRModOpt = api.Value.extend( CZRModOptMths );
|
||||
|
||||
// BASE MODULES => used as constructor when creating the collection of modules
|
||||
api.CZRModule = api.Value.extend( CZRModuleMths );
|
||||
api.CZRDynModule = api.CZRModule.extend( CZRDynModuleMths );
|
||||
|
||||
// BASE CONTROLS
|
||||
api.CZRBaseControl = api.Control.extend( CZRBaseControlMths );
|
||||
api.CZRBaseModuleControl = api.CZRBaseControl.extend( CZRBaseModuleControlMths );
|
||||
|
||||
$.extend( api.controlConstructor, { czr_module : api.CZRBaseModuleControl });
|
||||
})( wp.customize, jQuery, _ );
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
|
||||
//DOM READY :
|
||||
//1) FIRE SPECIFIC INPUT PLUGINS
|
||||
//2) ADD SOME COOL STUFFS
|
||||
//3) SPECIFIC CONTROLS ACTIONS
|
||||
( function ( wp, $ ) {
|
||||
$( function($) {
|
||||
var api = wp.customize || api;
|
||||
|
||||
//WHAT IS HAPPENING IN THE MESSENGER
|
||||
// $(window.parent).on( 'message', function(e, o) {
|
||||
// api.consoleLog('SENT STUFFS', JSON.parse( e.originalEvent.data), e );
|
||||
// });
|
||||
// $( window ).on( 'message', function(e, o) {
|
||||
// api.consoleLog('INCOMING MESSAGE', JSON.parse( e.originalEvent.data), e );
|
||||
// });
|
||||
// $(window.document).bind("ajaxSend", function(e, o){
|
||||
// api.consoleLog('AJAX SEND', e, arguments );
|
||||
// }).bind("ajaxComplete", function(e, o){
|
||||
// api.consoleLog('AJAX COMPLETE', e, o);
|
||||
// });
|
||||
|
||||
var fireHeaderButtons = function() {
|
||||
var $header_button;
|
||||
|
||||
// Deactivated for the moment.
|
||||
// The + button has been moved in the Nimble top bar
|
||||
// if ( api.czr_sektions ) {
|
||||
// var _title_ = ( window.sektionsLocalizedData && sektionsLocalizedData.i18n && sektionsLocalizedData.i18n['Drag and drop content'] ) ? sektionsLocalizedData.i18n['Drag and drop content'] : '';
|
||||
// $header_button = $('<span/>', {
|
||||
// class:'customize-controls-home-or-add',
|
||||
// html:'<span class="screen-reader-text">Home</span><span class="material-icons" title="' + _title_ +'">add_circle_outline</span>'
|
||||
// });
|
||||
// } else {
|
||||
// $header_button = $('<span/>', {
|
||||
// class:'customize-controls-home-or-add fas fa-home',
|
||||
// html:'<span class="screen-reader-text">Home</span>'
|
||||
// });
|
||||
// }
|
||||
|
||||
$header_button = $('<span/>', {
|
||||
class:'customize-controls-home-or-add fas fa-home',
|
||||
html:'<span class="screen-reader-text">Home</span>'
|
||||
});
|
||||
|
||||
$.when( $('#customize-header-actions').append( $header_button ) )
|
||||
.done( function() {
|
||||
$('body').addClass('czr-has-home-btn');
|
||||
$header_button
|
||||
.keydown( function( event ) {
|
||||
if ( 9 === event.which ) // tab
|
||||
return;
|
||||
if ( 13 === event.which ) // enter
|
||||
this.trigger('click');
|
||||
event.preventDefault();
|
||||
})
|
||||
.on( 'click.customize-controls-home-or-add', function() {
|
||||
// if ( api.czr_sektions ) {
|
||||
// api.previewer.trigger( 'sek-pick-content', {});
|
||||
// }
|
||||
//event.preventDefault();
|
||||
//close everything
|
||||
if ( api.section.has( api.czr_activeSectionId() ) ) {
|
||||
api.section( api.czr_activeSectionId() ).expanded( false );
|
||||
} else {
|
||||
api.section.each( function( _s ) {
|
||||
_s.expanded( false );
|
||||
});
|
||||
}
|
||||
api.panel.each( function( _p ) {
|
||||
_p.expanded( false );
|
||||
});
|
||||
});
|
||||
// animate on init
|
||||
// @use button-see-mee css class declared in core in /wp-admin/css/customize-controls.css
|
||||
_.delay( function() {
|
||||
if ( $header_button.hasClass( 'button-see-me') )
|
||||
return;
|
||||
var _seeMe = function() {
|
||||
return $.Deferred(function(){
|
||||
var dfd = this;
|
||||
$header_button.addClass('button-see-me');
|
||||
_.delay( function() {
|
||||
$header_button.removeClass('button-see-me');
|
||||
dfd.resolve();
|
||||
}, 800 );
|
||||
});
|
||||
},
|
||||
i = 0,
|
||||
_seeMeLoop = function() {
|
||||
_seeMe().done( function() {
|
||||
i--;
|
||||
if ( i >= 0 ) {
|
||||
_.delay( function() {
|
||||
_seeMeLoop();
|
||||
}, 50 );
|
||||
}
|
||||
});
|
||||
};
|
||||
_seeMeLoop();
|
||||
}, 2000 );
|
||||
});// done()
|
||||
};
|
||||
|
||||
// Nov 2020 => remove home button for users of blocksy theme
|
||||
// https://github.com/presscustomizr/themes-customizer-fmk/issues/53
|
||||
if ( !_.contains(['blocksy'], serverControlParams.activeTheme ) ) {
|
||||
fireHeaderButtons();
|
||||
}
|
||||
|
||||
});//end of $( function($) ) dom ready
|
||||
})( wp, jQuery );
|
||||
+570
@@ -0,0 +1,570 @@
|
||||
// Dependency : wp-color-picker
|
||||
// 1) Fixed : Error: cannot call methods on dialog prior to initialization; attempted to call method 'close' <= occuring when there are several pickers of the color picker at the same time, and some not fully instanciated yet
|
||||
//, the culprit line is $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
|
||||
// @see "nikeo addon" in the code
|
||||
// 2) augmented with https://github.com/kallookoo/wp-color-picker-alpha
|
||||
|
||||
|
||||
|
||||
|
||||
/*!
|
||||
* wp-color-picker-alpha
|
||||
*
|
||||
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
|
||||
* activated when data-alpha is true
|
||||
*
|
||||
* Version: v2.1.4
|
||||
* https://github.com/kallookoo/wp-color-picker-alpha
|
||||
* Licensed under the GPLv2 license.
|
||||
*/
|
||||
/*! wp-color-picker-alpha v2.1.4, https://github.com/kallookoo/wp-color-picker-alpha, GPLv2 Licensed */
|
||||
( 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 = ( nb_wpColorPickerL10n.current !== undefined );
|
||||
// Declare some global variables when is deprecated or not
|
||||
var _before;
|
||||
if ( _deprecated ) {
|
||||
_before = '<a tabindex="0" class="wp-color-result" />';
|
||||
} else {
|
||||
_before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>';
|
||||
var _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', nb_wpColorPickerL10n.pick )
|
||||
.attr( 'data-current', nb_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( nb_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( nb_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( nb_wpColorPickerL10n.defaultString );
|
||||
if ( ! _deprecated ) {
|
||||
self.button.attr( 'aria-label', nb_wpColorPickerL10n.defaultAriaLabel );
|
||||
}
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( nb_wpColorPickerL10n.clear );
|
||||
if ( ! _deprecated ) {
|
||||
self.button.attr( 'aria-label', nb_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 ( typeof self.options.change === "function" ) {
|
||||
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.trigger('click');
|
||||
}
|
||||
|
||||
// @nikeo addon
|
||||
el.on('czr-colorpicker-close', function() {
|
||||
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
|
||||
self.close();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @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.on('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 ( typeof self.options.clear === "function" )
|
||||
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 ( typeof self.options.clear === "function" )
|
||||
self.options.clear.call( this, event );
|
||||
|
||||
} else if ( $( this ).hasClass( 'wp-picker-default' ) ) {
|
||||
self.element.val( self.options.defaultColor ).trigger('change');
|
||||
}
|
||||
});
|
||||
},//_addListeners
|
||||
|
||||
/**
|
||||
* @summary Opens the color picker dialog.
|
||||
*
|
||||
* @since 3.5.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
open: function() {
|
||||
var self = this;
|
||||
// @nikeo addon => triggering the click can generate an error when triggered on an element for which iris is not fully instanciated yet
|
||||
// "Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'""
|
||||
//$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); <= original
|
||||
// Close any other opened iris instance
|
||||
$( 'body' ).find('.wp-color-picker').not( self.element ).each( function() {
|
||||
$(this).trigger('czr-colorpicker-close');
|
||||
});
|
||||
|
||||
this.element.iris( 'toggle' );
|
||||
this.inputWrapper.removeClass( 'hidden' );
|
||||
this.wrap.addClass( 'wp-picker-active' );
|
||||
this.toggler
|
||||
.addClass( 'wp-picker-open' )
|
||||
.attr( 'aria-expanded', 'true' );
|
||||
},
|
||||
/**
|
||||
* @summary Closes the color picker dialog.
|
||||
*
|
||||
* @since 3.5.0
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
close: function() {
|
||||
try { this.element.iris( 'toggle' ); } catch( er ) { console.log('color-picker => error on ::close()', er ); }
|
||||
this.inputWrapper.addClass( 'hidden' );
|
||||
this.wrap.removeClass( 'wp-picker-active' );
|
||||
this.toggler
|
||||
.removeClass( 'wp-picker-open' )
|
||||
.attr( 'aria-expanded', 'false' );
|
||||
//@nikeo addon
|
||||
//$( 'body' ).off( 'click.wpcolorpicker', this.close );
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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 ) );
|
||||
Vendored
+12
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+8
File diff suppressed because one or more lines are too long
+4
@@ -0,0 +1,4 @@
|
||||
/*! iCheck v1.0.1 by Damir Sultanov, http://git.io/arlzeA, MIT Licensed */
|
||||
if ( 'function' != typeof(jQuery.fn.iCheck) ) {
|
||||
!function(a){function b(a,b,e){var f=a[0],g=/er/.test(e)?p:/bl/.test(e)?n:l,h=e==q?{checked:f[l],disabled:f[n],indeterminate:"true"==a.attr(p)||"false"==a.attr(o)}:f[g];if(/^(ch|di|in)/.test(e)&&!h)c(a,g);else if(/^(un|en|de)/.test(e)&&h)d(a,g);else if(e==q)for(g in h)h[g]?c(a,g,!0):d(a,g,!0);else b&&"toggle"!=e||(b||a[u]("ifClicked"),h?f[r]!==k&&d(a,g):c(a,g))}function c(b,c,e){var q=b[0],u=b.parent(),v=c==l,x=c==p,y=c==n,z=x?o:v?m:"enabled",A=f(b,z+g(q[r])),B=f(b,c+g(q[r]));if(!0!==q[c]){if(!e&&c==l&&q[r]==k&&q.name){var C=b.closest("form"),D='input[name="'+q.name+'"]',D=C.length?C.find(D):a(D);D.each(function(){this!==q&&a(this).data(i)&&d(a(this),c)})}x?(q[c]=!0,q[l]&&d(b,l,"force")):(e||(q[c]=!0),v&&q[p]&&d(b,p,!1)),h(b,v,c,e)}q[n]&&f(b,w,!0)&&u.find("."+j).css(w,"default"),u[s](B||f(b,c)||""),y?u.attr("aria-disabled","true"):u.attr("aria-checked",x?"mixed":"true"),u[t](A||f(b,z)||"")}function d(a,b,c){var d=a[0],e=a.parent(),i=b==l,k=b==p,q=b==n,u=k?o:i?m:"enabled",v=f(a,u+g(d[r])),x=f(a,b+g(d[r]));!1!==d[b]&&((k||!c||"force"==c)&&(d[b]=!1),h(a,i,u,c)),!d[n]&&f(a,w,!0)&&e.find("."+j).css(w,"pointer"),e[t](x||f(a,b)||""),q?e.attr("aria-disabled","false"):e.attr("aria-checked","false"),e[s](v||f(a,u)||"")}function e(b,c){b.data(i)&&(b.parent().html(b.attr("style",b.data(i).s||"")),c&&b[u](c),b.off(".i").unwrap(),a(v+'[for="'+b[0].id+'"]').add(b.closest(v)).off(".i"))}function f(a,b,c){return a.data(i)?a.data(i).o[b+(c?"":"Class")]:void 0}function g(a){return a.charAt(0).toUpperCase()+a.slice(1)}function h(a,b,c,d){d||(b&&a[u]("ifToggled"),a[u]("ifChanged")[u]("if"+g(c)))}var i="iCheck",j=i+"-helper",k="radio",l="checked",m="un"+l,n="disabled",o="determinate",p="in"+o,q="update",r="type",s="addClass",t="removeClass",u="trigger",v="label",w="cursor",x=/ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);a.fn[i]=function(f,g){var h='input[type="checkbox"], input[type="'+k+'"]',m=a(),o=function(b){b.each(function(){var b=a(this);m=b.is(h)?m.add(b):m.add(b.find(h))})};if(/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(f))return f=f.toLowerCase(),o(this),m.each(function(){var c=a(this);"destroy"==f?e(c,"ifDestroyed"):b(c,!0,f),a.isFunction(g)&&g()});if("object"!=typeof f&&f)return this;var w=a.extend({checkedClass:l,disabledClass:n,indeterminateClass:p,labelHover:!0,aria:!1},f),y=w.handle,z=w.hoverClass||"hover",A=w.focusClass||"focus",B=w.activeClass||"active",C=!!w.labelHover,D=w.labelHoverClass||"hover",E=0|(""+w.increaseArea).replace("%","");return("checkbox"==y||y==k)&&(h='input[type="'+y+'"]'),-50>E&&(E=-50),o(this),m.each(function(){var f=a(this);e(f);var g=this,h=g.id,m=-E+"%",o=100+2*E+"%",o={position:"absolute",top:m,left:m,display:"block",width:o,height:o,margin:0,padding:0,background:"#fff",border:0,opacity:0},m=x?{position:"absolute",visibility:"hidden"}:E?o:{position:"absolute",opacity:0},p="checkbox"==g[r]?w.checkboxClass||"icheckbox":w.radioClass||"i"+k,y=a(v+'[for="'+h+'"]').add(f.closest(v)),F=!!w.aria,G=i+"-"+Math.random().toString(36).substr(2,6),H='<div class="'+p+'" '+(F?'role="'+g[r]+'" ':"");F&&y.each(function(){H+='aria-labelledby="',this.id?H+=this.id:(this.id=G,H+=G),H+='"'}),H=f.wrap(H+"/>")[u]("ifCreated").parent().append(w.insert),o=a('<ins class="'+j+'"/>').css(o).appendTo(H),f.data(i,{o:w,s:f.attr("style")}).css(m),w.inheritClass&&H[s](g.className||""),w.inheritID&&h&&H.attr("id",i+"-"+h),"static"==H.css("position")&&H.css("position","relative"),b(f,!0,q),y.length&&y.on("click.i mouseover.i mouseout.i touchbegin.i touchend.i",function(c){var d=c[r],e=a(this);if(!g[n]){if("click"==d){if(a(c.target).is("a"))return;b(f,!1,!0)}else C&&(/ut|nd/.test(d)?(H[t](z),e[t](D)):(H[s](z),e[s](D)));if(!x)return!1;c.stopPropagation()}}),f.on("click.i focus.i blur.i keyup.i keydown.i keypress.i",function(a){var b=a[r];return a=a.keyCode,"click"==b?!1:"keydown"==b&&32==a?(g[r]==k&&g[l]||(g[l]?d(f,l):c(f,l)),!1):("keyup"==b&&g[r]==k?!g[l]&&c(f,l):/us|ur/.test(b)&&H["blur"==b?t:s](A),void 0)}),o.on("click mousedown mouseup mouseover mouseout touchbegin.i touchend.i",function(a){var c=a[r],d=/wn|up/.test(c)?B:z;if(!g[n]){if("click"==c?b(f,!1,!0):(/wn|er|in/.test(c)?H[s](d):H[t](d+" "+B),y.length&&C&&d==z&&y[/ut|nd/.test(c)?t:s](D)),!x)return!1;a.stopPropagation()}})})}}(window.jQuery||window.Zepto);
|
||||
}
|
||||
+2
File diff suppressed because one or more lines are too long
+10
File diff suppressed because one or more lines are too long
+10
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Stepper v3.0.5 - 2014-02-06
|
||||
* A jQuery plugin for cross browser number inputs. Part of the Formstone Library.
|
||||
* http://formstone.it/stepper/
|
||||
*
|
||||
* Copyright 2014 Ben Plum; MIT Licensed
|
||||
*/
|
||||
if ( 'function' != typeof(jQuery.fn.stepper) ) {
|
||||
!function(a){"use strict";function b(b){b=a.extend({},k,b||{});for(var d=a(this),e=0,f=d.length;f>e;e++)c(d.eq(e),b);return d}function c(b,c){if(!b.hasClass("stepper-input")){c=a.extend({},c,b.data("stepper-options"));var e=parseFloat(b.attr("min")),f=parseFloat(b.attr("max")),g=parseFloat(b.attr("step"))||1;b.addClass("stepper-input").wrap('<div class="stepper '+c.customClass+'" />').after('<span class="stepper-arrow up">'+c.labels.up+'</span><span class="stepper-arrow down">'+c.labels.down+"</span>");var h=b.parent(".stepper"),j=a.extend({$stepper:h,$input:b,$arrow:h.find(".stepper-arrow"),min:void 0===typeof e||isNaN(e)?!1:e,max:void 0===typeof f||isNaN(f)?!1:f,step:void 0===typeof g||isNaN(g)?1:g,timer:null},c);j.digits=i(j.step),b.is(":disabled")&&h.addClass("disabled"),h.on("touchstart.stepper mousedown.stepper",".stepper-arrow",j,d).data("stepper",j)}}function d(b){b.preventDefault(),b.stopPropagation(),e(b);var c=b.data;if(!c.$input.is(":disabled")&&!c.$stepper.hasClass("disabled")){var d=a(b.target).hasClass("up")?c.step:-c.step;c.timer=g(c.timer,125,function(){f(c,d,!1)}),f(c,d),a("body").on("touchend.stepper mouseup.stepper",c,e)}}function e(b){b.preventDefault(),b.stopPropagation();var c=b.data;h(c.timer),a("body").off(".stepper")}function f(a,b){var c=parseFloat(a.$input.val()),d=b;void 0===typeof c||isNaN(c)?d=a.min!==!1?a.min:0:a.min!==!1&&c<a.min?d=a.min:d+=c;var e=(d-a.min)%a.step;0!==e&&(d-=e),a.min!==!1&&d<a.min&&(d=a.min),a.max!==!1&&d>a.max&&(d-=a.step),d!==c&&(d=j(d,a.digits),a.$input.val(d).trigger("change"))}function g(a,b,c){return h(a),setInterval(c,b)}function h(a){a&&(clearInterval(a),a=null)}function i(a){var b=String(a);return b.indexOf(".")>-1?b.length-b.indexOf(".")-1:0}function j(a,b){var c=Math.pow(10,b);return Math.round(a*c)/c}var k={customClass:"",labels:{up:"Up",down:"Down"}},l={defaults:function(b){return k=a.extend(k,b||{}),a(this)},destroy:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$stepper.off(".stepper").find(".stepper-arrow").remove(),b.$input.unwrap().removeClass("stepper-input"))})},disable:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$input.attr("disabled","disabled"),b.$stepper.addClass("disabled"))})},enable:function(){return a(this).each(function(){var b=a(this).data("stepper");b&&(b.$input.attr("disabled",null),b.$stepper.removeClass("disabled"))})}};a.fn.stepper=function(a){return l[a]?l[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?this:b.apply(this,arguments)},a.stepper=function(a){"defaults"===a&&l.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}(jQuery,this);
|
||||
}
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
/*****************************************************************************
|
||||
* OBSERVE UBIQUE CONTROL'S SECTIONS EXPANSION
|
||||
*****************************************************************************/
|
||||
if ( 'function' === typeof api.Section ) {
|
||||
//move controls back and forth in declared ubique sections
|
||||
//=> implemented in the customizr theme for the social links boolean visibility controls ( socials in header, sidebar, footer )
|
||||
api.control.bind( 'add', function( _ctrl ) {
|
||||
if ( _ctrl.params.ubq_section && _ctrl.params.ubq_section.section ) {
|
||||
//save original state
|
||||
_ctrl.params.original_priority = _ctrl.params.priority;
|
||||
_ctrl.params.original_section = _ctrl.params.section;
|
||||
|
||||
api.section.when( _ctrl.params.ubq_section.section, function( _section_instance ) {
|
||||
_section_instance.expanded.bind( function( expanded ) {
|
||||
if ( expanded ) {
|
||||
if ( _ctrl.params.ubq_section.priority ) {
|
||||
_ctrl.priority( _ctrl.params.ubq_section.priority );
|
||||
}
|
||||
_ctrl.section( _ctrl.params.ubq_section.section );
|
||||
}
|
||||
else {
|
||||
_ctrl.priority( _ctrl.params.original_priority );
|
||||
_ctrl.section( _ctrl.params.original_section );
|
||||
}
|
||||
});
|
||||
|
||||
} );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* OBSERVE UBIQUE CONTROL'S PANELS EXPANSION
|
||||
*****************************************************************************/
|
||||
if ( 'function' === typeof api.Panel ) {
|
||||
//move section back and forth in declared ubique panels
|
||||
api.section.bind( 'add', function( _sec ) {
|
||||
if ( _sec.params.ubq_panel && _sec.params.ubq_panel.panel ) {
|
||||
//save original state
|
||||
_sec.params.original_priority = _sec.params.priority;
|
||||
_sec.params.original_panel = _sec.params.panel;
|
||||
|
||||
api.panel.when( _sec.params.ubq_panel.panel, function( _panel_instance ) {
|
||||
_panel_instance.expanded.bind( function( expanded ) {
|
||||
if ( expanded ) {
|
||||
if ( _sec.params.ubq_panel.priority ) {
|
||||
_sec.priority( _sec.params.ubq_panel.priority );
|
||||
}
|
||||
_sec.panel( _sec.params.ubq_panel.panel );
|
||||
}
|
||||
else {
|
||||
_sec.priority( _sec.params.original_priority );
|
||||
_sec.panel( _sec.params.original_panel );
|
||||
}
|
||||
});
|
||||
|
||||
} );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* CLOSE THE MOD OPTION PANEL ( if exists ) ON : section change, panel change, skope switch
|
||||
*****************************************************************************/
|
||||
//@return void()
|
||||
var _closeModOpt = function() {
|
||||
if ( ! _.has( api, 'czr_ModOptVisible') )
|
||||
return;
|
||||
api.czr_ModOptVisible(false);
|
||||
};
|
||||
api.bind('ready', function() {
|
||||
api.czr_activeSectionId.bind( _closeModOpt );
|
||||
api.czr_activePanelId.bind( _closeModOpt );
|
||||
});
|
||||
})( wp.customize , jQuery, _);
|
||||
@@ -0,0 +1,77 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
|
||||
api.bind( 'ready', function() {
|
||||
/*****************************************************************************
|
||||
* ADD PRO BEFORE SPECIFIC SECTIONS AND PANELS
|
||||
*****************************************************************************/
|
||||
if ( window.themeServerControlParams && themeServerControlParams.isPro ) {
|
||||
_.each( [
|
||||
//WFC
|
||||
'tc_font_customizer_settings',
|
||||
|
||||
//hueman pro
|
||||
'contx_header_bg',
|
||||
'content_blog_sec',
|
||||
'static_front_page',
|
||||
'content_single_sec',
|
||||
|
||||
//customizr-pro
|
||||
'tc_fpu',
|
||||
'nav',
|
||||
'post_lists_sec',
|
||||
'galleries_sec',
|
||||
'footer_customizer_sec',
|
||||
'custom_scripts_sec',
|
||||
'contact_info_sec'
|
||||
|
||||
], function( _secId ) {
|
||||
_.delay( function() {
|
||||
api.section.when( _secId, function( _sec_ ) {
|
||||
if ( 1 >= _sec_.headContainer.length ) {
|
||||
_sec_.headContainer.find('.accordion-section-title').prepend( '<span class="pro-title-block">Pro</span>' );
|
||||
}
|
||||
});
|
||||
}, 1000 );
|
||||
});
|
||||
_.each( [
|
||||
//hueman pro
|
||||
//'hu-header-panel',
|
||||
//'hu-content-panel',
|
||||
|
||||
//customizr-pro
|
||||
//'tc-header-panel',
|
||||
//'tc-content-panel',
|
||||
//'tc-footer-panel',
|
||||
//'tc-advanced-panel'
|
||||
], function( _secId ) {
|
||||
api.panel.when( _secId, function( _sec_ ) {
|
||||
if ( 1 >= _sec_.headContainer.length ) {
|
||||
_sec_.headContainer.find('.accordion-section-title').prepend( '<span class="pro-title-block">Pro</span>' );
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* PRO SECTION OVERRIDE
|
||||
*****************************************************************************/
|
||||
if ( ! themeServerControlParams.isPro && _.isFunction( api.Section ) ) {
|
||||
proSectionInstance = api.section('go_pro_sec');
|
||||
if ( ! _.isObject( proSectionInstance ) )
|
||||
return;
|
||||
|
||||
// No events for this type of section.
|
||||
proSectionInstance.attachEvents = function () {};
|
||||
// Always make the section active.
|
||||
proSectionInstance.isContextuallyActive = function () {
|
||||
return this.active();
|
||||
};
|
||||
proSectionInstance._toggleActive = function(){ return true; };
|
||||
|
||||
proSectionInstance.active( true );
|
||||
}
|
||||
});
|
||||
|
||||
})( wp.customize , jQuery, _);
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
|
||||
//named czr_multiple_picker in the php setting map
|
||||
var CZRMultiplePickerMths = CZRMultiplePickerMths || {};
|
||||
/* Multiple Picker */
|
||||
/**
|
||||
* @constructor
|
||||
* @augments wp.customize.Control
|
||||
* @augments wp.customize.Class
|
||||
*/
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRMultiplePickerMths , {
|
||||
ready: function() {
|
||||
var control = this,
|
||||
_select = this.container.find('select');
|
||||
|
||||
|
||||
_select.czrSelect2({
|
||||
closeOnSelect: false,
|
||||
templateSelection: czrEscapeMarkup
|
||||
});
|
||||
|
||||
function czrEscapeMarkup(obj) {
|
||||
//trim dashes
|
||||
return obj.text.replace(/\u2013|\u2014/g, "");
|
||||
}
|
||||
|
||||
//handle case when all choices become unselected
|
||||
_select.on('change', function(e){
|
||||
if ( 0 === $(this).find("option:selected").length )
|
||||
control.setting.set([]);
|
||||
});
|
||||
}
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
|
||||
//named czr_cropped_image in the php setting map
|
||||
var CZRCroppedImageMths = CZRCroppedImageMths || {};
|
||||
|
||||
(function (api, $, _) {
|
||||
/* IMAGE UPLOADER CONTROL IN THE CUSTOMIZER */
|
||||
//CroppedImageControl is not available before wp 4.3
|
||||
if ( 'function' != typeof wp.media.controller.Cropper || 'function' != typeof api.CroppedImageControl )
|
||||
return;
|
||||
|
||||
|
||||
/* CZRCustomizeImage Cropper */
|
||||
/**
|
||||
* Custom version of:
|
||||
* wp.media.controller.CustomizeImageCropper (wp-includes/js/media-views.js)
|
||||
*
|
||||
* In order to use image destination sizes different than the suggested ones
|
||||
*
|
||||
* A state for cropping an image.
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.controller.Cropper
|
||||
* @augments wp.media.controller.State
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
wp.media.controller.CZRCustomizeImageCropper = wp.media.controller.Cropper.extend({
|
||||
doCrop: function( attachment ) {
|
||||
var cropDetails = attachment.get( 'cropDetails' ),
|
||||
control = this.get( 'control' );
|
||||
|
||||
cropDetails.dst_width = control.params.dst_width;
|
||||
cropDetails.dst_height = control.params.dst_height;
|
||||
|
||||
return wp.ajax.post( 'crop-image', {
|
||||
wp_customize: 'on',
|
||||
nonce: attachment.get( 'nonces' ).edit,
|
||||
id: attachment.get( 'id' ),
|
||||
context: control.id,
|
||||
cropDetails: cropDetails
|
||||
} );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* CZRCroppedImageControl */
|
||||
$.extend( CZRCroppedImageMths , {
|
||||
/**
|
||||
* Create a media modal select frame, and store it so the instance can be reused when needed.
|
||||
* CZR: We don't want to crop svg (cropping fails), gif (animated gifs become static )
|
||||
* @Override
|
||||
* We need to override this in order to use our ImageCropper custom extension of wp.media.controller.Cropper
|
||||
*
|
||||
* See api.CroppedImageControl:initFrame() ( wp-admin/js/customize-controls.js )
|
||||
*/
|
||||
initFrame: function() {
|
||||
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
this.frame = wp.media({
|
||||
button: {
|
||||
text: l10n.select,
|
||||
close: false
|
||||
},
|
||||
states: [
|
||||
new wp.media.controller.Library({
|
||||
title: this.params.button_labels.frame_title,
|
||||
library: wp.media.query({ type: 'image' }),
|
||||
multiple: false,
|
||||
date: false,
|
||||
priority: 20,
|
||||
suggestedWidth: this.params.width,
|
||||
suggestedHeight: this.params.height
|
||||
}),
|
||||
new wp.media.controller.CZRCustomizeImageCropper({
|
||||
imgSelectOptions: this.calculateImageSelectOptions,
|
||||
control: this
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
this.frame.on( 'select', this.onSelect, this );
|
||||
this.frame.on( 'cropped', this.onCropped, this );
|
||||
this.frame.on( 'skippedcrop', this.onSkippedCrop, this );
|
||||
},
|
||||
|
||||
/**
|
||||
* After an image is selected in the media modal, switch to the cropper
|
||||
* state if the image isn't the right size.
|
||||
*
|
||||
* CZR: We don't want to crop svg (cropping fails), gif (animated gifs become static )
|
||||
* @Override
|
||||
* See api.CroppedImageControl:onSelect() ( wp-admin/js/customize-controls.js )
|
||||
*/
|
||||
onSelect: function() {
|
||||
var attachment = this.frame.state().get( 'selection' ).first().toJSON();
|
||||
if ( ! ( attachment.mime && attachment.mime.indexOf("image") > -1 ) ){
|
||||
//Todo: better error handling, show some message?
|
||||
this.frame.trigger( 'content:error' );
|
||||
return;
|
||||
}
|
||||
if ( ( _.contains( ['image/svg+xml', 'image/gif'], attachment.mime ) ) || //do not crop gifs or svgs
|
||||
this.params.width === attachment.width && this.params.height === attachment.height && ! this.params.flex_width && ! this.params.flex_height ) {
|
||||
this.setImageFromAttachment( attachment );
|
||||
this.frame.close();
|
||||
} else {
|
||||
this.frame.setState( 'cropper' );
|
||||
}
|
||||
},
|
||||
});//extend
|
||||
})( wp.customize, jQuery, _);
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
//named czr_upload in the php setting map
|
||||
var CZRUploadMths = CZRUploadMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
/**
|
||||
* @constructor
|
||||
* @augments wp.customize.Control
|
||||
* @augments wp.customize.Class
|
||||
*/
|
||||
$.extend( CZRUploadMths, {
|
||||
ready: function() {
|
||||
var control = this;
|
||||
|
||||
this.params.removed = this.params.removed || '';
|
||||
|
||||
this.success = $.proxy( this.success, this );
|
||||
|
||||
this.uploader = $.extend({
|
||||
container: this.container,
|
||||
browser: this.container.find('.czr-upload'),
|
||||
//dropzone: this.container.find('.upload-dropzone'),
|
||||
success: this.success,
|
||||
plupload: {},
|
||||
params: {}
|
||||
}, this.uploader || {} );
|
||||
|
||||
if ( control.params.extensions ) {
|
||||
control.uploader.plupload.filters = [{
|
||||
title: api.l10n.allowedFiles,
|
||||
extensions: control.params.extensions
|
||||
}];
|
||||
}
|
||||
|
||||
if ( control.params.context )
|
||||
control.uploader.params['post_data[context]'] = this.params.context;
|
||||
|
||||
if ( api.settings.theme.stylesheet )
|
||||
control.uploader.params['post_data[theme]'] = api.settings.theme.stylesheet;
|
||||
|
||||
this.uploader = new wp.Uploader( this.uploader );
|
||||
|
||||
this.remover = this.container.find('.remove');
|
||||
this.remover.on( 'click keydown', function( event ) {
|
||||
if ( event.type === 'keydown' && 13 !== event.which ) // enter
|
||||
return;
|
||||
control.setting.set( control.params.removed );
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
this.removerVisibility = $.proxy( this.removerVisibility, this );
|
||||
this.setting.bind( this.removerVisibility );
|
||||
this.removerVisibility( this.setting() );
|
||||
},
|
||||
|
||||
|
||||
success: function( attachment ) {
|
||||
this.setting.set( attachment.get('id') );
|
||||
},
|
||||
removerVisibility: function( to ) {
|
||||
this.remover.toggle( to != this.params.removed );
|
||||
}
|
||||
});//extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
//named czr_layouts in the php setting map
|
||||
var CZRLayoutSelectMths = CZRLayoutSelectMths || {};
|
||||
( function ( api, $, _ ) {
|
||||
$.extend( CZRLayoutSelectMths , {
|
||||
ready: function() {
|
||||
this.setupSelect();
|
||||
},
|
||||
|
||||
setupSelect : function( obj ) {
|
||||
var control = this;
|
||||
$_select = this.container.find('select');
|
||||
|
||||
function addImg( state ) {
|
||||
if (! state.id) { return state.text; }
|
||||
if ( ! _.has( control.params.layouts, state.element.value ) )
|
||||
return;
|
||||
|
||||
var _layout_data = control.params.layouts[state.element.value],
|
||||
_src = _layout_data.src,
|
||||
_title = _layout_data.label,
|
||||
$state = $(
|
||||
'<img src="' + _src +'" class="czr-layout-img" title="' + _title + '" /><span class="czr-layout-title">' + _title + '</span>'
|
||||
);
|
||||
return $state;
|
||||
}
|
||||
|
||||
//destroy selected if set
|
||||
//$_select.selecter("destroy");
|
||||
|
||||
//fire czrSelect2
|
||||
$_select.czrSelect2( {
|
||||
templateResult: addImg,
|
||||
templateSelection: addImg,
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
},
|
||||
});//$.extend
|
||||
})( wp.customize , jQuery, _ );
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
|
||||
( function ( api, $, _ ) {
|
||||
//THEME CONTROLS
|
||||
//api.CZRBackgroundControl = api.CZRItemControl.extend( CZRBackgroundMths );
|
||||
|
||||
//api.CZRWidgetAreasControl = api.CZRDynModule.extend( CZRWidgetAreasMths );
|
||||
|
||||
api.CZRUploadControl = api.Control.extend( CZRUploadMths );
|
||||
api.CZRLayoutControl = api.Control.extend( CZRLayoutSelectMths );
|
||||
api.CZRMultiplePickerControl = api.Control.extend( CZRMultiplePickerMths );
|
||||
api.CZRColorAlpha = api.Control.extend({ready: api.ColorControl.prototype.ready});//api.CZRColorAlpha
|
||||
|
||||
$.extend( api.controlConstructor, {
|
||||
czr_upload : api.CZRUploadControl,
|
||||
//czr_sidebars : api.CZRWidgetAreasControl,
|
||||
//czr_socials : api.CZRSocialControl,
|
||||
czr_multiple_picker : api.CZRMultiplePickerControl,
|
||||
czr_layouts : api.CZRLayoutControl,
|
||||
wp_color_alpha : api.CZRColorAlpha,
|
||||
//czr_background : api.CZRBackgroundControl
|
||||
});
|
||||
|
||||
if ( 'function' == typeof api.CroppedImageControl ) {
|
||||
api.CZRCroppedImageControl = api.CroppedImageControl.extend( CZRCroppedImageMths );
|
||||
|
||||
$.extend( api.controlConstructor, {
|
||||
czr_cropped_image : api.CZRCroppedImageControl
|
||||
});
|
||||
}
|
||||
|
||||
if ( 'function' == typeof api.CodeEditorControl ) {
|
||||
$.extend( api.controlConstructor, {
|
||||
czr_code_editor : api.CodeEditorControl
|
||||
});
|
||||
}
|
||||
|
||||
})( wp.customize, jQuery, _ );
|
||||
+467
@@ -0,0 +1,467 @@
|
||||
|
||||
( function (api, $, _) {
|
||||
var $_nav_section_container,
|
||||
i18n = serverControlParams.i18n || {};
|
||||
|
||||
api.czr_CrtlDependenciesReady = $.Deferred();
|
||||
|
||||
api.bind( 'ready' , function() {
|
||||
if ( _.has( api, 'czr_ctrlDependencies') )
|
||||
return;
|
||||
|
||||
api.czr_ctrlDependencies = new api.CZR_ctrlDependencies();
|
||||
api.czr_CrtlDependenciesReady.resolve();
|
||||
} );
|
||||
|
||||
|
||||
api.CZR_ctrlDependencies = api.Class.extend( {
|
||||
dominiDeps : [],
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
|
||||
this.defaultDominusParams = {
|
||||
dominus : '',
|
||||
servi : [],
|
||||
visibility : null,
|
||||
actions : null,
|
||||
onSectionExpand : true
|
||||
};
|
||||
|
||||
//store the default control dependencies
|
||||
this.dominiDeps = _.extend( this.dominiDeps, this._getControlDeps() );
|
||||
if ( ! _.isArray( self.dominiDeps ) ) {
|
||||
throw new Error('Visibilities : the dominos dependency array is not an array.');
|
||||
}
|
||||
api.czr_activeSectionId.bind( function( section_id ) {
|
||||
if ( ! _.isEmpty( section_id ) && api.section.has( section_id ) ) {
|
||||
try {
|
||||
self.setServiDependencies( section_id );
|
||||
} catch( er ) {
|
||||
api.errorLog( 'In api.CZR_ctrlDependencies : ' + er );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//@param target_source is an object :
|
||||
// {
|
||||
// target : section_id to awake
|
||||
// source : section_id from which the request for awaking has been done
|
||||
// }
|
||||
api.bind( 'awaken-section', function( target_source ) {
|
||||
try {
|
||||
self.setServiDependencies( target_source.target, target_source.source );
|
||||
} catch( er ) {
|
||||
api.errorLog( 'On awaken-section, ctrl deps : ' + er );
|
||||
}
|
||||
});
|
||||
|
||||
//FAVICON SPECIFICS
|
||||
//@todo => move to the theme ?
|
||||
//favicon note on load and on change(since wp 4.3)
|
||||
this._handleFaviconNote();
|
||||
},
|
||||
|
||||
|
||||
//Process the visibility callbacks for the controls of a target targetSectionId
|
||||
//@param targetSectionId : string
|
||||
//@param sourceSectionId : string, the section from which the request has been done
|
||||
setServiDependencies : function( targetSectionId, sourceSectionId, refresh ) {
|
||||
var self = this, params, dfd = $.Deferred();
|
||||
|
||||
refresh = refresh || false;
|
||||
|
||||
if ( _.isUndefined( targetSectionId ) || ! api.section.has( targetSectionId ) ) {
|
||||
throw new Error( 'Control Dependencies : the targetSectionId is missing or not registered : ' + targetSectionId );
|
||||
}
|
||||
|
||||
//Assign a visibility state deferred to the target section
|
||||
api.section( targetSectionId ).czr_ctrlDependenciesReady = api.section( targetSectionId ).czr_ctrlDependenciesReady || $.Deferred();
|
||||
|
||||
//Bail here if this section has already been setup for ctrl dependencies
|
||||
if ( ! refresh && 'resolved' == api.section( targetSectionId ).czr_ctrlDependenciesReady.state() )
|
||||
return dfd.resolve().promise();
|
||||
|
||||
//FIND DOMINI IN THE TARGET SECTION
|
||||
//=> setup their callbacks
|
||||
_.each( self.dominiDeps , function( params ) {
|
||||
if ( ! _.has( params, 'dominus' ) || ! _.isString( params.dominus ) || _.isEmpty( params.dominus ) ) {
|
||||
throw new Error( 'Control Dependencies : a dominus control id must be a not empty string.');
|
||||
}
|
||||
|
||||
var wpDominusId = api.CZR_Helpers.build_setId( params.dominus );
|
||||
if ( ! api.control.has( wpDominusId ) )
|
||||
return;
|
||||
|
||||
if ( api.control( wpDominusId ).section() != targetSectionId )
|
||||
return;
|
||||
|
||||
//Attempt to normalize the params
|
||||
params = self._prepareDominusParams( params );
|
||||
if ( _.isEmpty(params) )
|
||||
return;
|
||||
|
||||
self._processDominusCallbacks( params.dominus, params, refresh )
|
||||
.fail( function() {
|
||||
api.consoleLog( 'self._processDominusCallbacks fail for section ' + targetSectionId );
|
||||
dfd.reject();
|
||||
})
|
||||
.done( function() {
|
||||
dfd.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//EXTERNAL DOMINI : AWAKE THE SECTIONS
|
||||
//check if any control of the current section is the servus of a dominus located in another section
|
||||
var _secCtrls = api.CZR_Helpers.getSectionControlIds( targetSectionId ),
|
||||
_getServusDomini = function( shortServudId ) {
|
||||
var _dominiIds = [];
|
||||
_.each( self.dominiDeps , function( params ) {
|
||||
if ( ! _.has( params, 'servi' ) || ! _.isArray( params.servi ) || ! _.has( params, 'dominus' ) || _.isEmpty( params.dominus ) ) {
|
||||
api.errorLog( 'Control Dependencies : wrong params in _getServusDomini.');
|
||||
return;
|
||||
}
|
||||
|
||||
if ( _.contains( params.servi , shortServudId ) && ! _.contains( _dominiIds , params.dominus ) ) {
|
||||
//Attempt to normalize the params
|
||||
params = self._prepareDominusParams( params );
|
||||
if ( _.isEmpty(params) )
|
||||
return;
|
||||
else
|
||||
_dominiIds.push( params.dominus );
|
||||
}
|
||||
});
|
||||
return ! _.isArray( _dominiIds ) ? [] : _dominiIds;
|
||||
},
|
||||
_servusDominiIds = [];
|
||||
|
||||
//Build the domini array
|
||||
_.each( _secCtrls, function( servusCandidateId ) {
|
||||
if ( _.isEmpty( _getServusDomini( servusCandidateId ) ) )
|
||||
return;
|
||||
|
||||
_servusDominiIds = _.union( _servusDominiIds, _getServusDomini( servusCandidateId ) );
|
||||
});
|
||||
|
||||
//let's loop on the domini ids and check if we need to "awake" an external section
|
||||
_.each( _servusDominiIds, function( shortDominusId ){
|
||||
|
||||
var wpDominusId = api.CZR_Helpers.build_setId( shortDominusId );
|
||||
//This dominus must be located in another section
|
||||
if ( api.control( wpDominusId ).section() == targetSectionId )
|
||||
return;
|
||||
//The dominus section can't be the current source if set. => otherwise potential infinite loop scenario.
|
||||
if ( sourceSectionId == api.control( wpDominusId ).section() )
|
||||
return;
|
||||
//inform the api that a section has to be awaken
|
||||
//=> first silently update the section controls if skope on
|
||||
//=> then fire the visibilities
|
||||
api.trigger( 'awaken-section', {
|
||||
target : api.control( wpDominusId ).section(),
|
||||
source : targetSectionId
|
||||
} );
|
||||
} );
|
||||
|
||||
//This section has been setup for ctrl dependencies
|
||||
dfd.always( function() {
|
||||
api.section( targetSectionId ).czr_ctrlDependenciesReady.resolve();
|
||||
});
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
//This method fires a callback when a control is registered in the api.
|
||||
//If the control is registered, then it fires the callback when it is embedded
|
||||
//If the control is embedeed, it fires the callback
|
||||
//=> typical use case : a control can be both removed from the API and the DOM, and then added back on skope switch
|
||||
//
|
||||
//@param wpCtrlId : string name of the control as registered in the WP API
|
||||
//@param callback : fn callback to fire
|
||||
//@param args : [] or callback arguments
|
||||
_deferCallbackForControl : function( wpCrtlId, callback, args ) {
|
||||
var dfd = $.Deferred();
|
||||
if ( _.isEmpty(wpCrtlId) || ! _.isString(wpCrtlId) ) {
|
||||
throw new Error( '_deferCallbackForControl : the control id is missing.' );
|
||||
}
|
||||
if ( ! _.isFunction( callback ) ) {
|
||||
throw new Error( '_deferCallbackForControl : callback must be a funtion.' );
|
||||
}
|
||||
args = ( _.isUndefined(args) || ! _.isArray( args ) ) ? [] : args;
|
||||
|
||||
if ( api.control.has( wpCrtlId ) ) {
|
||||
if ( 'resolved' == api.control(wpCrtlId ).deferred.embedded.state() ) {
|
||||
$.when( callback.apply( null, args ) )
|
||||
.fail( function() { dfd.reject(); })
|
||||
.done( function() { dfd.resolve(); });
|
||||
} else {
|
||||
api.control( wpCrtlId ).deferred.embedded.then( function() {
|
||||
$.when( callback.apply( null, args ) )
|
||||
.fail( function() { dfd.reject(); })
|
||||
.done( function() { dfd.resolve(); });
|
||||
});
|
||||
}
|
||||
} else {
|
||||
api.control.when( wpCrtlId, function() {
|
||||
api.control( wpCrtlId ).deferred.embedded.then( function() {
|
||||
$.when( callback.apply( null, args ) )
|
||||
.fail( function() { dfd.reject(); })
|
||||
.done( function() { dfd.resolve(); });
|
||||
});
|
||||
});
|
||||
}
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
* @return void
|
||||
* show or hide setting according to the dependency + callback pair
|
||||
* @params setId = the short setting id, whitout the theme option prefix OR the WP built-in setting
|
||||
* @params o = { controls [], callback fn, onSectionExpand bool }
|
||||
*/
|
||||
_processDominusCallbacks : function( shortDominusId, dominusParams, refresh ) {
|
||||
var self = this,
|
||||
wpDominusId = api.CZR_Helpers.build_setId( shortDominusId ),
|
||||
dominusSetInst = api( wpDominusId ),
|
||||
dfd = $.Deferred(),
|
||||
hasProcessed = false;
|
||||
|
||||
//loop on the dominus servi and apply + bind the visibility cb
|
||||
_.each( dominusParams.servi , function( servusShortSetId ) {
|
||||
if ( ! api.control.has( api.CZR_Helpers.build_setId( servusShortSetId ) ) ) {
|
||||
return;
|
||||
}
|
||||
//set visibility when control is embedded
|
||||
//or when control is added to the api
|
||||
//=> solves the problem of visibility callbacks lost when control are re-rendered
|
||||
var _fireDominusCallbacks = function( dominusSetVal, servusShortSetId, dominusParams, refresh ) {
|
||||
var _toFire = [],
|
||||
_args = arguments;
|
||||
_.each( dominusParams, function( _item, _key ) {
|
||||
switch( _key ) {
|
||||
case 'visibility' :
|
||||
self._setVisibility.apply( null, _args );
|
||||
break;
|
||||
case 'actions' :
|
||||
if ( _.isFunction( _item ) )
|
||||
_item.apply( null, _args );
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
_deferCallbacks = function( dominusSetVal ) {
|
||||
dominusSetVal = dominusSetVal || dominusSetInst();
|
||||
var wpServusSetId = api.CZR_Helpers.build_setId( servusShortSetId );
|
||||
self._deferCallbackForControl(
|
||||
wpServusSetId,
|
||||
_fireDominusCallbacks,
|
||||
[ dominusSetVal, servusShortSetId, dominusParams ]
|
||||
)
|
||||
.always( function() { hasProcessed = true; })
|
||||
.fail( function() { dfd.reject(); })
|
||||
.done( function() { dfd.resolve(); });
|
||||
};
|
||||
|
||||
|
||||
//APPLY THE DEPENDENCIES
|
||||
_deferCallbacks();
|
||||
|
||||
//BIND THE DOMINUS SETTING INSTANCE
|
||||
//store the visibility bound state
|
||||
if ( ! _.has( dominusSetInst, 'czr_visibilityServi' ) )
|
||||
dominusSetInst.czr_visibilityServi = new api.Value( [] );
|
||||
|
||||
//Maybe bind to react on setting _dirty change
|
||||
var _currentDependantBound = dominusSetInst.czr_visibilityServi();
|
||||
//Make sure a dependant visibility action is bound only once for a setting id to another setting control id
|
||||
if ( ! _.contains( _currentDependantBound, servusShortSetId ) ) {
|
||||
dominusSetInst.bind( function( dominusSetVal ) {
|
||||
_deferCallbacks( dominusSetVal );
|
||||
});
|
||||
dominusSetInst.czr_visibilityServi( _.union( _currentDependantBound, [ servusShortSetId ] ) );
|
||||
}
|
||||
} );//_.each
|
||||
if ( ! hasProcessed )
|
||||
return dfd.resolve().promise();
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
|
||||
|
||||
//@return void()
|
||||
_setVisibility : function ( dominusSetVal, servusShortSetId, dominusParams, refresh ) {
|
||||
var wpServusSetId = api.CZR_Helpers.build_setId( servusShortSetId ),
|
||||
visibility = dominusParams.visibility( dominusSetVal, servusShortSetId, dominusParams.dominus );
|
||||
|
||||
refresh = refresh || false;
|
||||
//Allows us to filter between visibility callbacks and other actions
|
||||
//a non visibility callback shall return null
|
||||
if ( ! _.isBoolean( visibility ) || ( 'unchanged' == visibility && ! refresh ) )
|
||||
return;
|
||||
|
||||
//when skope is enabled, we might be doing a silent update
|
||||
//=> this method should be bailed if so
|
||||
var _doVisibilitiesWhenPossible = function() {
|
||||
if ( api.state.has( 'silent-update-processing' ) && api.state( 'silent-update-processing' )() )
|
||||
return;
|
||||
api.control( wpServusSetId, function( _controlInst ) {
|
||||
var _args = {
|
||||
duration : 'fast',
|
||||
completeCallback : function() {},
|
||||
unchanged : false
|
||||
};
|
||||
|
||||
if ( _.has( _controlInst, 'active' ) )
|
||||
visibility = visibility && _controlInst.active();
|
||||
|
||||
if ( _.has( _controlInst, 'defaultActiveArguments' ) )
|
||||
_args = control.defaultActiveArguments;
|
||||
|
||||
_controlInst.onChangeActive( visibility , _controlInst.defaultActiveArguments );
|
||||
});
|
||||
if ( api.state.has( 'silent-update-processing' ) ) {
|
||||
api.state( 'silent-update-processing' ).unbind( _doVisibilitiesWhenPossible );
|
||||
}
|
||||
};
|
||||
|
||||
if ( api.state.has( 'silent-update-processing' ) && api.state( 'silent-update-processing' )() ) {
|
||||
api.state( 'silent-update-processing' ).bind( _doVisibilitiesWhenPossible );
|
||||
} else {
|
||||
_doVisibilitiesWhenPossible();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* HELPERS
|
||||
*****************************************************************************/
|
||||
/*
|
||||
* Abstract
|
||||
* Will be provided by the theme
|
||||
* @return main control dependencies object
|
||||
*/
|
||||
_getControlDeps : function() {
|
||||
return {};
|
||||
},
|
||||
|
||||
|
||||
//@return a visibility ready object of param describing the dependencies between a dominus and its servi.
|
||||
//this.defaultDominusParams = {
|
||||
// dominus : '',
|
||||
// servi : [],
|
||||
// visibility : fn() {},
|
||||
// actions : fn() {},
|
||||
// onSectionExpand : true
|
||||
// };
|
||||
_prepareDominusParams : function( params_candidate ) {
|
||||
var self = this,
|
||||
_ready_params = {};
|
||||
|
||||
//Check mandatory conditions
|
||||
if ( ! _.isObject( params_candidate ) ) {
|
||||
api.errorLog( 'Visibilities : a dominus param definition must be an object.');
|
||||
return _ready_params;
|
||||
}
|
||||
if ( ! _.has( params_candidate, 'visibility' ) && ! _.has( params_candidate, 'actions' ) ) {
|
||||
api.errorLog( 'Visibilities : a dominus definition must include a visibility or an actions callback.');
|
||||
return _ready_params;
|
||||
}
|
||||
if ( ! _.has( params_candidate, 'dominus' ) || ! _.isString( params_candidate.dominus ) || _.isEmpty( params_candidate.dominus ) ) {
|
||||
api.errorLog( 'Visibilities : a dominus control id must be a not empty string.');
|
||||
return _ready_params;
|
||||
}
|
||||
var wpDominusId = api.CZR_Helpers.build_setId( params_candidate.dominus );
|
||||
if ( ! api.control.has( wpDominusId ) ) {
|
||||
api.errorLog( 'Visibilities : a dominus control id is not registered : ' + wpDominusId );
|
||||
return _ready_params;
|
||||
}
|
||||
if ( ! _.has( params_candidate, 'servi' ) || _.isUndefined( params_candidate.servi ) || ! _.isArray( params_candidate.servi ) || _.isEmpty( params_candidate.servi ) ) {
|
||||
api.errorLog( 'Visibilities : servi must be set as an array not empty.');
|
||||
return _ready_params;
|
||||
}
|
||||
|
||||
_.each( self.defaultDominusParams , function( _value, _key ) {
|
||||
var _candidate_val = params_candidate[ _key ];
|
||||
|
||||
switch( _key ) {
|
||||
case 'visibility' :
|
||||
if ( ! _.isUndefined( _candidate_val ) && ! _.isEmpty( _candidate_val ) && ! _.isFunction( _candidate_val ) ) {
|
||||
throw new Error( 'Visibilities : a dominus visibility callback must be a function : ' + params_candidate.dominus );
|
||||
}
|
||||
break;
|
||||
case 'actions' :
|
||||
if ( ! _.isUndefined( _candidate_val ) && ! _.isEmpty( _candidate_val ) && ! _.isFunction( _candidate_val ) ) {
|
||||
throw new Error( 'Visibilities : a dominus actions callback must be a function : ' + params_candidate.dominus );
|
||||
}
|
||||
break;
|
||||
case 'onSectionExpand' :
|
||||
if ( ! _.isUndefined( _candidate_val ) && ! _.isEmpty( _candidate_val ) && ! _.isBoolean( _candidate_val ) ) {
|
||||
throw new Error( 'Visibilities : a dominus onSectionExpand param must be a boolean : ' + params_candidate.dominus );
|
||||
}
|
||||
break;
|
||||
}
|
||||
_ready_params[_key] = _candidate_val;
|
||||
});
|
||||
|
||||
return _ready_params;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* FAVICON SPECIFICS
|
||||
*****************************************************************************/
|
||||
/**
|
||||
* Fired on api ready
|
||||
* May change the site_icon description on load
|
||||
* May add a callback to site_icon
|
||||
* @return void()
|
||||
*/
|
||||
_handleFaviconNote : function() {
|
||||
var self = this,
|
||||
_fav_setId = api.CZR_Helpers.build_setId( serverControlParams.faviconOptionName );
|
||||
//do nothing if (||)
|
||||
//1) WP version < 4.3 where site icon has been introduced
|
||||
//2) User had not defined a favicon
|
||||
//3) User has already set WP site icon
|
||||
if ( ! api.has('site_icon') || ! api.control('site_icon') || ( api.has( _fav_setId ) && 0 === + api( _fav_setId )() ) || + api('site_icon')() > 0 )
|
||||
return;
|
||||
|
||||
var _oldDes = api.control('site_icon').params.description;
|
||||
_newDes = ['<strong>' , i18n.faviconNote || '' , '</strong><br/><br/>' ].join('') + _oldDes;
|
||||
|
||||
//on api ready
|
||||
self._printFaviconNote(_newDes );
|
||||
|
||||
//on site icon change
|
||||
api('site_icon').callbacks.add( function(to) {
|
||||
if ( +to > 0 ) {
|
||||
//reset the description to default
|
||||
api.control('site_icon').container.find('.description').text(_oldDes);
|
||||
//reset the previous favicon setting
|
||||
if ( api.has( _fav_setId ) )
|
||||
api( _fav_setId ).set("");
|
||||
}
|
||||
else {
|
||||
self._printFaviconNote(_newDes );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//Add a note to the WP control description if user has already defined a favicon
|
||||
_printFaviconNote : function( _newDes ) {
|
||||
api.control('site_icon').container.find('.description').html(_newDes);
|
||||
}
|
||||
}
|
||||
);//api.Class.extend() //api.CZR_ctrlDependencies
|
||||
})( wp.customize, jQuery, _);
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
|
||||
//DOM READY :
|
||||
//1) FIRE SPECIFIC INPUT PLUGINS
|
||||
//2) ADD SOME COOL STUFFS
|
||||
//3) SPECIFIC CONTROLS ACTIONS
|
||||
( function ( wp, $ ) {
|
||||
$( function($) {
|
||||
var api = wp.customize || api;
|
||||
|
||||
//WHAT IS HAPPENING IN THE MESSENGER
|
||||
// $(window.parent).on( 'message', function(e, o) {
|
||||
// api.consoleLog('SENT STUFFS', JSON.parse( e.originalEvent.data), e );
|
||||
// });
|
||||
// $( window ).on( 'message', function(e, o) {
|
||||
// api.consoleLog('INCOMING MESSAGE', JSON.parse( e.originalEvent.data), e );
|
||||
// });
|
||||
// $(window.document).bind("ajaxSend", function(e, o){
|
||||
// api.consoleLog('AJAX SEND', e, arguments );
|
||||
// }).bind("ajaxComplete", function(e, o){
|
||||
// api.consoleLog('AJAX COMPLETE', e, o);
|
||||
// });
|
||||
|
||||
/* RECENTER CURRENT SECTIONS */
|
||||
$('.accordion-section').not('.control-panel').on('click', function () {
|
||||
_recenter_current_section($(this));
|
||||
});
|
||||
|
||||
function _recenter_current_section( section ) {
|
||||
var $siblings = section.siblings( '.open' );
|
||||
//check if clicked element is above or below sibling with offset.top
|
||||
if ( 0 !== $siblings.length && $siblings.offset().top < 0 ) {
|
||||
$('.wp-full-overlay-sidebar-content').animate({
|
||||
scrollTop: - $('#customize-theme-controls').offset().top - $siblings.height() + section.offset().top + $('.wp-full-overlay-sidebar-content').offset().top
|
||||
}, 700);
|
||||
}
|
||||
}//end of fn
|
||||
|
||||
|
||||
/* CHECKBOXES */
|
||||
api.czrSetupCheckbox = function( controlId, refresh ) {
|
||||
var _ctrl = api.control( controlId );
|
||||
$('input[type=checkbox]:not(.nimblecheck-input)', _ctrl.container ).each( function() {
|
||||
//Exclude font customizer
|
||||
if ( 'tc_font_customizer_settings' == _ctrl.params.section )
|
||||
return;
|
||||
//first fix the checked / unchecked status
|
||||
if ( 0 === $(this).val() || '0' == $(this).val() || 'off' == $(this).val() || _.isEmpty($(this).val() ) ) {
|
||||
$(this).prop('checked', false);
|
||||
} else {
|
||||
$(this).prop('checked', true);
|
||||
}
|
||||
|
||||
//then render icheck if not done already
|
||||
if ( 0 !== $(this).closest('div[class^="icheckbox"]').length )
|
||||
return;
|
||||
|
||||
$(this).iCheck({
|
||||
checkboxClass: 'icheckbox_flat-grey',
|
||||
//checkedClass: 'checked',
|
||||
radioClass: 'iradio_flat-grey',
|
||||
})
|
||||
.on( 'ifChanged', function(e){
|
||||
$(this).val( false === $(this).is(':checked') ? 0 : 1 );
|
||||
$(e.currentTarget).trigger('change');
|
||||
});
|
||||
});
|
||||
};//api.czrSetupCheckbox()
|
||||
|
||||
/* SELECT INPUT */
|
||||
api.czrSetupSelect = function(controlId, refresh) {
|
||||
//Exclude no-selecter-js
|
||||
$('select[data-customize-setting-link]', api.control(controlId).container )
|
||||
.not('.no-selecter-js')
|
||||
.each( function() {
|
||||
$(this).selecter({
|
||||
//triggers a change event on the view, passing the newly selected value + index as parameters.
|
||||
// callback : function(value, index) {
|
||||
// self.triggerSettingChange( window.event || {} , value, index); // first param is a null event.
|
||||
// }
|
||||
});
|
||||
});
|
||||
};//api.czrSetupSelect()
|
||||
|
||||
|
||||
/* NUMBER INPUT */
|
||||
api.czrSetupStepper = function( controlId, refresh ) {
|
||||
var _ctrl = api.control( controlId );
|
||||
$('input[type="number"]', _ctrl.container ).each( function() { $(this).stepper(); });
|
||||
};//api.czrSetupStepper()
|
||||
|
||||
// LOOP ON EACH CONTROL REGISTERED AND INSTANTIATE THE PLUGINS
|
||||
// @todo => react on control added
|
||||
api.control.each( function( control ){
|
||||
if ( ! _.has( control, 'id' ) )
|
||||
return;
|
||||
//exclude widget controls and menu controls for checkboxes
|
||||
if ( 'widget_' != control.id.substring(0, 'widget_'.length ) && 'nav_menu' != control.id.substring( 0, 'nav_menu'.length ) ) {
|
||||
api.czrSetupCheckbox(control.id);
|
||||
}
|
||||
if ( 'nav_menu_locations' != control.id.substring( 0, 'nav_menu_locations'.length ) ) {
|
||||
api.czrSetupSelect(control.id);
|
||||
}
|
||||
|
||||
// Stepper : exclude controls from specific sections
|
||||
var _exclude = [
|
||||
'publish_settings', //<= the outer section introduced in v4.9 to publish / saved draft / schedule
|
||||
'tc_font_customizer_settings' //the font customizer plugin has its own way to instantiate the stepper, with custom attributes previously set to the input like step, min, etc...
|
||||
];
|
||||
|
||||
if ( 0 < control.container.find( 'input[type="number"]' ).length && control.params && control.params.section && ! _.contains( _exclude, control.params.section ) ) {
|
||||
api.czrSetupStepper(control.id);
|
||||
}
|
||||
});
|
||||
});//end of $( function($) ) dom ready
|
||||
})( wp, jQuery );
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
/* FEEDBACK UI */
|
||||
#nimble-feedback {
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #aaa!important;
|
||||
border-left: 4px solid #00a0d2;
|
||||
color: #222!important;
|
||||
font-size: 12px!important;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
z-index: 0;
|
||||
-webkit-transition: top 0.3s ease-in-out;
|
||||
-moz-transition: top, 0.3s ease-in-out;
|
||||
-ms-transition: top, 0.3s ease-in-out;
|
||||
-o-transition: top, 0.3s ease-in-out;
|
||||
transition: top 0.3s ease-in-out;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nimble-feedback-ui-visible #customize-preview iframe {
|
||||
top: 217px;
|
||||
height: calc(100vh - 217px);
|
||||
}
|
||||
|
||||
/*#nimble-feedback .sek-main-feedback-heading {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}*/
|
||||
#nimble-feedback .sek-main-feedback-heading p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#nimble-feedback .sek-feedback-step-three-thanks p { font-size: 17px;}
|
||||
|
||||
.sek-feedback-nimble-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.sek-feedback-nimble-icon.big {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn {
|
||||
margin: 0 6px;
|
||||
-webkit-transition: background 200ms linear, color 200ms linear;
|
||||
-ms-transition: background 200ms linear, color 200ms linear;
|
||||
transition: background 200ms linear, color 200ms linear;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-pos {
|
||||
border-color: #da791d !important;
|
||||
background: #f37656;
|
||||
color: #fff;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-pos:hover, .wp-core-ui #nimble-feedback .sek-feedback-btn.sek-pos:focus {
|
||||
border-color: #f37656 !important;
|
||||
background: transparent;
|
||||
color: #f37656;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-neg {
|
||||
border: 1px solid #f37656;
|
||||
color: #f37656;
|
||||
background: #ffffff;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-neg:hover, .wp-core-ui #nimble-feedback .sek-feedback-btn.sek-neg:focus {
|
||||
color: #ffffff;
|
||||
background: #f37656;
|
||||
border: 1px solid #f37656;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-already {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #00a0d2;
|
||||
font-weight:normal;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-close-feedback-ui {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
font-weight:normal;
|
||||
}
|
||||
.wp-core-ui #nimble-feedback .sek-feedback-btn.sek-close-feedback-ui:hover {
|
||||
color:#f37656;
|
||||
}
|
||||
|
||||
#nimble-feedback p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
font-style: normal;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
#nimble-feedback .sek-stars{color:#ffb900; cursor:pointer;font-size: 25px;}
|
||||
#nimble-feedback .sek-signature {
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
.sek-close-feedback-ui {
|
||||
position: fixed;
|
||||
top: 44px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.sek-feedback-step-two-enjoying, .sek-feedback-step-two-not-enjoying, .sek-feedback-step-three-thanks { display: none;}
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
/* @see https://github.com/google/material-design-icons/blob/master/iconfont/material-icons.css */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/material-icons/MaterialIcons-Regular.eot'); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url('../fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2'),
|
||||
url('../fonts/material-icons/MaterialIcons-Regular.woff') format('woff'),
|
||||
url('../fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype');
|
||||
}
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OVERRIDE WP CUSTOMIZER */
|
||||
|
||||
/* FOR LEVEL TREE AND TEMPLATE GALLERY */
|
||||
/* space for the Level Tree and template gallery */
|
||||
#customize-preview iframe, #nimble-level-tree {
|
||||
-webkit-transition: top 0.3s ease-in-out;
|
||||
-moz-transition: top, 0.3s ease-in-out;
|
||||
-ms-transition: top, 0.3s ease-in-out;
|
||||
-o-transition: top, 0.3s ease-in-out;
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
#customize-preview iframe {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul[id*="sub-accordion-section-__nimble__"] {
|
||||
background: #F2F2F2!important;
|
||||
}
|
||||
/* No sliding transition needed when switching from a section to another when generating the UI's */
|
||||
#customize-theme-controls .customize-pane-child[id*="__nimble__"] {
|
||||
-webkit-transition: unset;
|
||||
-o-transition: unset;
|
||||
transition: unset;
|
||||
}
|
||||
/* CONTROLS */
|
||||
li[id*="__nimble__"].customize-control {
|
||||
margin: 4px 0;
|
||||
padding: 2px;
|
||||
width: calc( 100% - 4px );
|
||||
border: 1px solid rgba(221, 221, 221, 0.43);
|
||||
box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2);
|
||||
background-color: #fff;
|
||||
}
|
||||
li[id*="__nimble__"].customize-control .customize-control-title {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
li[id*="__nimble__"].customize-control label {
|
||||
cursor: pointer;
|
||||
}
|
||||
li[id*="__nimble__"].customize-control span.customize-control-title:first-child {
|
||||
margin-left: 21px;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
/* nov 2019 => experimental fix for experimental fix for https://github.com/presscustomizr/nimble-builder/issues/539 */
|
||||
#customize-theme-controls ul[id*="sub-accordion-section-__nimble__"].open {
|
||||
top: 0!important;
|
||||
}
|
||||
|
||||
|
||||
/* VARIOUS HELPER CLASSES */
|
||||
.sek-float-right {float: right;}
|
||||
.sek-float-left { float: left;}
|
||||
.sek-flex-vertical-center {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* FRONT MODULE UI */
|
||||
li[id^="accordion-section-__nimble__"] {
|
||||
margin-top: 16px;
|
||||
}
|
||||
li[id^="accordion-section-__nimble__"] > h3 {
|
||||
border-top:1px solid #ddd;
|
||||
}
|
||||
|
||||
+321
@@ -0,0 +1,321 @@
|
||||
/* MODULE AND SECTION PICKER INPUT */
|
||||
[data-sek-content-type] {
|
||||
float: left;
|
||||
padding: 0%;
|
||||
margin: 1.8%;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
/*cursor: -webkit-grab;*/
|
||||
/*background: #eee;*/
|
||||
-webkit-transition: -webkit-box-shadow .2s ease;
|
||||
transition: -webkit-box-shadow .2s ease;
|
||||
-o-transition: box-shadow .2s ease;
|
||||
transition: box-shadow .2s ease;
|
||||
transition: box-shadow .2s ease, -webkit-box-shadow .2s ease;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.25);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
[data-sek-content-type="module"] {
|
||||
width: 29%;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
}
|
||||
.sek-is-pro {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
z-index: 10;
|
||||
right: 5px;
|
||||
height: 20px;
|
||||
width: 28px;
|
||||
}
|
||||
.sek-is-pro-template {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
}
|
||||
[data-sek-content-type="preset_section"]:hover .sek-is-pro img, [data-sek-tmpl-item-id]:hover .sek-is-pro img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* When sections are displayed in the module picker. Typically the columns sections */
|
||||
li[id*="sek_draggable_modules"] [data-sek-content-type="preset_section"] {
|
||||
width: 29%;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.sek-content-type-wrapper [data-sek-content-type="preset_section"] {
|
||||
width: 95%;
|
||||
height: 165px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* SEPT 2020 : LINK TO DEMO SECTION */
|
||||
.sek-demo-link {
|
||||
position: absolute;
|
||||
bottom: -22px;
|
||||
z-index: 20;
|
||||
height: 18px;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
background: #000000;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: bottom 0.2s ease-in-out;
|
||||
-moz-transition: bottom, 0.2s ease-in-out;
|
||||
-ms-transition: bottom, 0.2s ease-in-out;
|
||||
-o-transition: bottom, 0.2s ease-in-out;
|
||||
transition: bottom 0.2s ease-in-out;
|
||||
}
|
||||
.sek-demo-link i, .sek-demo-link a, .sek-demo-link a:focus, .sek-demo-link a:visited{color:#ffffff;}
|
||||
.sek-demo-link a {text-decoration: none;text-transform: uppercase;font-size: 12px;}
|
||||
.sek-demo-link a:hover {color:#ffffff;text-decoration: underline;}
|
||||
[data-sek-content-type="preset_section"]:hover .sek-demo-link {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
[data-sek-content-type="preset_section"] .sek-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .35s ease;
|
||||
transition: opacity .35s ease;
|
||||
-o-transition: opacity .35s ease;
|
||||
}
|
||||
[data-sek-content-type="preset_section"]:hover .sek-overlay {
|
||||
opacity: 0.15;
|
||||
}
|
||||
/* don't elevate inactive modules ( introduced but not yet implemented ) */
|
||||
[data-sek-content-type][draggable="true"]:hover {
|
||||
-webkit-box-shadow: 0 12px 20px rgba(0,0,0,.2);
|
||||
box-shadow: 0 12px 20px rgba(0,0,0,.2);
|
||||
}
|
||||
[data-sek-content-type][draggable="false"] {
|
||||
background: #eee;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* JUNE 2020 style for user sections */
|
||||
/* USER SECTIONS */
|
||||
.sek-user-section-wrapper {
|
||||
margin-bottom: 15px;
|
||||
float: left;
|
||||
width: 100%
|
||||
}
|
||||
.sek-user-section-wrapper [data-sek-content-type="preset_section"] .sek-overlay {
|
||||
opacity: 0.40;
|
||||
}
|
||||
.sek-user-section-wrapper [data-sek-content-type="preset_section"]:hover .sek-overlay {
|
||||
opacity: 0.50;
|
||||
}
|
||||
.sek-user-section-wrapper [data-sek-is-user-section="true"] {
|
||||
height: 165px;
|
||||
margin: 0;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.sek-user-section-wrapper .sek-sec-thumb {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.sek-user-section-wrapper .sek-sec-info {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
padding: 2%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
max-height: 138px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sek-sec-info .sec-title {
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.sek-sec-info .sec-date, .sek-sec-info .sec-desc {
|
||||
margin:0;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sek-sec-info .sec-date {
|
||||
font-size: italic;
|
||||
}
|
||||
|
||||
.sek-sec-info > .remove-user-sec, .sek-sec-info > .edit-user-sec {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #535353;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 30px;
|
||||
opacity: 0.3;
|
||||
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
-webkit-transition: all .20s ease;
|
||||
-o-transition: all .20s ease;
|
||||
transition: all .20s ease;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
}
|
||||
.sek-sec-info > .remove-user-sec {
|
||||
bottom: 0px;
|
||||
right: 5px;
|
||||
}
|
||||
.sek-sec-info > .edit-user-sec {
|
||||
bottom: 0px;
|
||||
left: 5px;
|
||||
}
|
||||
.sek-sec-info:hover > .remove-user-sec {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sek-sec-info:hover > .edit-user-sec {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sek-sec-info > .remove-user-sec:hover {
|
||||
opacity: 0.95;
|
||||
color: red;
|
||||
}
|
||||
.sek-sec-info > .edit-user-sec:hover {
|
||||
opacity: 0.95;
|
||||
color: #000000;
|
||||
}
|
||||
/* DRAGGING STUFFS */
|
||||
.sek-dragging [data-sek-content-type] {
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.25)!important;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.25)!important;
|
||||
}
|
||||
.sek-dragged {
|
||||
background: #33b3db3d;
|
||||
background: rgba(51, 179, 219, 0.24);
|
||||
}
|
||||
|
||||
[data-sek-content-type] .sek-module-icon {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
[data-sek-content-type] .sek-module-icon .nimble-module-icons {
|
||||
font-size: 3rem;
|
||||
max-width: 100%;/*60%!important;*/
|
||||
color: #878787;
|
||||
max-height: 86px;
|
||||
}
|
||||
|
||||
/* Specific for advanced list module */
|
||||
.sek-content-type-wrapper [data-sek-content-id="czr_advanced_list_module"] .sek-module-icon {
|
||||
height: 66%;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sek-content-type-wrapper [data-sek-content-id="czr_advanced_list_module"] .sek-module-icon img {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
/* when the module icon is a font icon */
|
||||
[data-sek-content-type] .sek-module-icon.is-font-icon {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
min-height: 70%;
|
||||
}
|
||||
[data-sek-content-type] .sek-module-icon.is-font-icon i {
|
||||
font-size: 35px;
|
||||
}
|
||||
[data-sek-content-type] .sek-module-title {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 6px 0px;
|
||||
font-size: 0.75rem;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -18px;
|
||||
}
|
||||
/*.sek-grabbing {
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
*/
|
||||
.sek-centered-module-title {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.sek-new-label {
|
||||
background: #ffff00;
|
||||
border: 1px solid yellow;
|
||||
color: #000000;
|
||||
padding: 3px 4px;
|
||||
line-height: 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
max-width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* inspired by WP core .button-see-me css class
|
||||
This button bounce twice
|
||||
*/
|
||||
.button-see-me-twice {
|
||||
-webkit-animation: bounce .7s 2;
|
||||
animation: bounce .7s 2;
|
||||
-webkit-transform-origin: center bottom;
|
||||
-ms-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
+723
@@ -0,0 +1,723 @@
|
||||
/* ACCORDION MODULE */
|
||||
.sek-accord-title {
|
||||
color: #4b4a4a;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 120px;
|
||||
height: 23px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* PADDING MARGIN SPACING INPUT */
|
||||
.sek-pad-marg-inner {
|
||||
font-size: 12px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 10px auto 10px auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-color: #e6e6e6;
|
||||
border: 1px solid #c5c5c5;
|
||||
height: 192px;
|
||||
width: 232px;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-transition: background-color 0.2s ease;
|
||||
-o-transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.sek-pm-top-bottom-wrap {
|
||||
height: 46px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sek-flex-center-stretch {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sek-pm-input {
|
||||
width: 35px;
|
||||
height: 15px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-family: Source Sans Pro;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #CED6D9;
|
||||
}
|
||||
.sek-pm-input-parent .sek-pm-input {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
margin: auto 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
min-width: 34px;
|
||||
min-height: 20px;
|
||||
color: #313131;
|
||||
}
|
||||
.sek-pm-middle-wrap {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sek-pm-margin-left, .sek-pm-margin-right {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.sek-pm-padding-wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
border: 1px solid #CED6D9;
|
||||
height: 100px;
|
||||
width: 140px;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
-webkit-transition: background-color 0.2s ease;
|
||||
-o-transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
}
|
||||
.sek-flex-justify-center {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sek-flex-space-between {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sek-pm-input-parent {
|
||||
/* width: 100%;*/
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.sek-pm-input-parent .sek-pm-input {
|
||||
min-height: 25px;
|
||||
min-width: 40px;
|
||||
background-color: white;
|
||||
}
|
||||
.sek-pm-input-parent .sek-pm-input {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
margin: auto 3px!important;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
min-width: 34px;
|
||||
min-height: 20px;
|
||||
color: #313131;
|
||||
width: 40px!important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.sek-pm-padding-wrapper label {
|
||||
margin: 0;
|
||||
}
|
||||
.sek-pad-marg-inner label {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0;
|
||||
flex: 0;
|
||||
}
|
||||
.reset-spacing-wrap {
|
||||
padding: 10px 0 0;
|
||||
font-size: 0.8em;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.reset-spacing-wrap:hover {
|
||||
color: #006799;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* BACKGROUND POSITION INPUT */
|
||||
.sek-bg-pos-wrapper {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.sek-bg-pos-wrapper {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.sek-bg-pos-wrapper .sek-bg-pos {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 3px;
|
||||
float: left;
|
||||
}
|
||||
.sek-bg-pos-wrapper input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
.sek-bg-pos-wrapper .sek-bg-pos span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background: #e6e6e6 no-repeat center;
|
||||
-webkit-transition: background-color 0.2s ease;
|
||||
-o-transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* hover*/
|
||||
.sek-bg-pos-wrapper .sek-bg-pos span:hover {
|
||||
background-color: #33b3db;
|
||||
}
|
||||
|
||||
.sek-bg-pos-wrapper .sek-bg-pos span:hover svg {
|
||||
visibility: visible;
|
||||
}
|
||||
/* checked */
|
||||
.sek-bg-pos-wrapper .sek-bg-pos input[type="radio"]:checked + span {
|
||||
background-color: #33b3db;
|
||||
}
|
||||
.sek-bg-pos-wrapper .sek-bg-pos input[type="radio"]:checked + span svg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.sek-bg-pos-wrapper .sek-bg-pos span svg {
|
||||
visibility: hidden;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
|
||||
.sek-bg-pos-wrapper .sek-svg-bg-pos {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* H and V ALIGNMENT INPUT */
|
||||
div[data-sek-align] {
|
||||
margin: 0 5px;
|
||||
padding: 4px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
top: -4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div[data-input-type="horizTextAlignmentWithDeviceSwitcher"] .czr-input {
|
||||
text-align: center;
|
||||
}
|
||||
div[data-input-type="horizTextAlignmentWithDeviceSwitcher"] .sek-h-align-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
div[data-input-type="horizAlignmentWithDeviceSwitcher"] .czr-input {
|
||||
text-align: center;
|
||||
}
|
||||
div[data-input-type="horizAlignmentWithDeviceSwitcher"] .sek-h-align-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
.sek-h-align-wrapper .sek-align-icons {
|
||||
float: right
|
||||
}
|
||||
|
||||
div[data-sek-align]:hover {
|
||||
-webkit-box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
|
||||
box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
|
||||
}
|
||||
div[data-sek-align].selected {
|
||||
outline: none;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: #555d66;
|
||||
}
|
||||
|
||||
/* POST GRID LAYOUT PICKER */
|
||||
div[data-sek-grid-layout] {
|
||||
margin: 0 5px;
|
||||
padding: 1px 3px 1px 1px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
/*width: 25px;
|
||||
height: 24px;*/
|
||||
/*top: -4px;*/
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div[data-sek-grid-layout] i {
|
||||
font-size: 50px;
|
||||
}
|
||||
div[data-input-type="grid_layout"] .czr-input {
|
||||
text-align: center;
|
||||
}
|
||||
div[data-input-type="grid_layout"] .sek-grid-layout-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
.sek-grid-layout-wrapper .sek-grid-icons {
|
||||
float: right
|
||||
}
|
||||
|
||||
div[data-sek-grid-layout]:hover {
|
||||
-webkit-box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
|
||||
box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
|
||||
}
|
||||
div[data-sek-grid-layout].selected {
|
||||
outline: none;
|
||||
color: #fff;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
/*background: #555d66;*/
|
||||
background: #33b3db;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CATEGORY PICKER */
|
||||
.customize-control select[data-czrtype="categories"] {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
|
||||
/* DEVICE SWITCHER */
|
||||
.sek-input-device-switcher .sek-switcher:before, .sek-mobile-device-icons .sek-switcher:before {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 20px/30px "dashicons";
|
||||
vertical-align: top;
|
||||
/* margin: 3px 0;
|
||||
padding: 4px 8px;*/
|
||||
color: #656a6f;
|
||||
position: relative;
|
||||
top: -5px
|
||||
}
|
||||
.sek-input-device-switcher .sek-switcher {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sek-input-device-switcher .sek-switcher, .sek-mobile-device-icons .sek-switcher {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 1px;
|
||||
margin: 0 0 0 -2px;
|
||||
box-shadow: none;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
-webkit-transition: .15s color ease-in-out,
|
||||
.15s background-color ease-in-out,
|
||||
.15s border-color ease-in-out;
|
||||
-o-transition: .15s color ease-in-out,
|
||||
.15s background-color ease-in-out,
|
||||
.15s border-color ease-in-out;
|
||||
transition: .15s color ease-in-out,
|
||||
.15s background-color ease-in-out,
|
||||
.15s border-color ease-in-out;
|
||||
}
|
||||
|
||||
/*.sek-input-device-switcher .sek-switcher.active {
|
||||
color: #0073aa;
|
||||
}*/
|
||||
|
||||
.sek-input-device-switcher .sek-switcher:hover,
|
||||
.sek-input-device-switcher .sek-switcher:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/*.sek-input-device-switcher .sek-switcher:focus,
|
||||
.sek-input-device-switcher .sek-switcher.active:hover {
|
||||
border-bottom-color: #0073aa;
|
||||
}*/
|
||||
|
||||
.sek-input-device-switcher .sek-switcher.active:before {
|
||||
color: #191e23;
|
||||
}
|
||||
|
||||
.sek-input-device-switcher .sek-switcher:hover:before,
|
||||
.sek-input-device-switcher .sek-switcher:focus:before {
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.sek-input-device-switcher .preview-desktop:before, .sek-mobile-device-icons .preview-desktop:before {
|
||||
content: "\f472";
|
||||
}
|
||||
|
||||
.sek-input-device-switcher .preview-tablet:before, .sek-mobile-device-icons .preview-tablet:before {
|
||||
content: "\f471";
|
||||
}
|
||||
|
||||
.sek-input-device-switcher .preview-mobile:before, .sek-mobile-device-icons .preview-mobile:before {
|
||||
content: "\f470";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* BORDERS AND BORDER RADIUS*/
|
||||
.sek-borders {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sek-borders > div {float: left;width: 100%}
|
||||
.sek-borders .sek-range-unit-wrapper > div {float: left;}
|
||||
.sek-borders .sek-border-type-wrapper {margin-bottom: 5px;}
|
||||
.sek-borders .sek-range-unit-wrapper {margin-bottom: 5px;}
|
||||
.sek-borders .sek-range-unit-wrapper .sek-unit-wrapper { float: right;}
|
||||
.sek-borders .sek-color-wrapper { width:100%;}
|
||||
.sek-borders .sek-color-wrapper .sek-color-picker{ width: 50%;float: left;}
|
||||
.sek-borders .sek-color-wrapper .sek-reset-button { width: 50%;float: right;}
|
||||
|
||||
[data-sek-radius-type="top_right"] > i.material-icons {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
[data-sek-radius-type="bottom_right"] > i.material-icons {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
[data-sek-radius-type="bottom_left"] > i.material-icons {
|
||||
-webkit-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* RANGE WITH UNIT PICKER */
|
||||
.sek-range-with-unit-picker-wrapper{
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sek-range-with-unit-picker-wrapper .sek-unit-wrapper{ float: right; }
|
||||
.sek-range-with-unit-picker-wrapper > div { float: left; }
|
||||
|
||||
|
||||
/* RANGE INPUT */
|
||||
/* This range slider is inspired from the one used in the Gutenberg plugin ( https://github.com/WordPress/gutenberg ), released under GNU General Public License
|
||||
credits : Gutenberg team @wordpress */
|
||||
.sek-range-wrapper {
|
||||
width: 44%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.sek-no-unit-picker .sek-range-wrapper {
|
||||
width: 70%;
|
||||
}
|
||||
.sek-number-wrapper, .sek-simple-number-wrapper {
|
||||
width: 60px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.sek-simple-number-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sek-range-input{
|
||||
flex:1;
|
||||
width:100%;
|
||||
padding:0;
|
||||
-webkit-appearance:none;
|
||||
background:transparent;
|
||||
height: 26px;
|
||||
}
|
||||
.sek-range-input::-webkit-slider-thumb{
|
||||
-webkit-appearance:none;
|
||||
height:20px;
|
||||
width:20px;
|
||||
border-radius:50%;
|
||||
cursor:pointer;
|
||||
background:#555d66;
|
||||
border:4px solid transparent;
|
||||
background-clip:padding-box;
|
||||
box-sizing:border-box;
|
||||
margin-top:-8px
|
||||
}
|
||||
.sek-range-input::-moz-range-thumb{
|
||||
height:20px;
|
||||
width:20px;
|
||||
border-radius:50%;
|
||||
cursor:pointer;
|
||||
background:#555d66;
|
||||
border:4px solid transparent;
|
||||
background-clip:padding-box;
|
||||
box-sizing:border-box;
|
||||
margin-top:-7px
|
||||
}
|
||||
.sek-range-input::-ms-thumb{
|
||||
height:20px;
|
||||
width:20px;
|
||||
border-radius:50%;
|
||||
cursor:pointer;
|
||||
background:#555d66;
|
||||
border:4px solid transparent;
|
||||
background-clip:padding-box;
|
||||
box-sizing:border-box;
|
||||
margin-top:-8px
|
||||
}
|
||||
/* margin-top:0;
|
||||
height:14px;
|
||||
width:14px;
|
||||
border:2px solid transparent*/
|
||||
/*}*/
|
||||
.sek-range-input:focus{
|
||||
outline:none
|
||||
}
|
||||
/*.sek-range-input:focus::-webkit-slider-thumb{
|
||||
background-color:#fff;
|
||||
color:#191e23;
|
||||
box-shadow:inset 0 0 0 1px #6c7781,inset 0 0 0 2px #fff;
|
||||
outline:2px solid transparent;
|
||||
outline-offset:-2px
|
||||
}
|
||||
.sek-range-input:focus::-moz-range-thumb{
|
||||
background-color:#fff;
|
||||
color:#191e23;
|
||||
box-shadow:inset 0 0 0 1px #6c7781,inset 0 0 0 2px #fff;
|
||||
outline:2px solid transparent;
|
||||
outline-offset:-2px
|
||||
}
|
||||
.sek-range-input:focus::-ms-thumb{
|
||||
background-color:#fff;
|
||||
color:#191e23;
|
||||
box-shadow:inset 0 0 0 1px #6c7781,inset 0 0 0 2px #fff;
|
||||
outline:2px solid transparent;
|
||||
outline-offset:-2px
|
||||
}*/
|
||||
.sek-range-input::-webkit-slider-runnable-track{
|
||||
height:3px;
|
||||
cursor:pointer;
|
||||
background:#e2e4e7;
|
||||
border-radius:1.5px;
|
||||
margin-top:-4px
|
||||
}
|
||||
.sek-range-input::-moz-range-track{
|
||||
height:3px;
|
||||
cursor:pointer;
|
||||
background:#e2e4e7;
|
||||
border-radius:1.5px
|
||||
}
|
||||
.sek-range-input::-ms-track{
|
||||
margin-top:-4px;
|
||||
background:transparent;
|
||||
border-color:transparent;
|
||||
color:transparent;
|
||||
height:3px;
|
||||
cursor:pointer;
|
||||
background:#e2e4e7;
|
||||
border-radius:1.5px
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* IMPORT / EXPORT */
|
||||
.sek-import-btn-wrap {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.sek-import-btn-wrap input.sek-import-file {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sek-export-btn-wrap {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.sek-import-file {
|
||||
background: #eeeeee;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sek-uploading {
|
||||
background: #eeeeee;
|
||||
display: none;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.czr-import-dialog {
|
||||
display: none;
|
||||
padding: 11px;
|
||||
}
|
||||
.czr-import-message {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.sek-import-btn-wrap .czr-import-dialog .czr-import-message {
|
||||
font-size: 12px!important;
|
||||
}
|
||||
.sek-import-btn-wrap .czr-import-dialog .button {
|
||||
margin: 4px 0;
|
||||
font-size: 12px!important;
|
||||
}
|
||||
|
||||
|
||||
/* SLIDE MODULE */
|
||||
.sek-slide-thumb {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
}
|
||||
.sek-slide-title {
|
||||
color: #4b4a4a;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.sek-pro-notice {
|
||||
position: relative;
|
||||
padding-left: 36px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sek-pro-notice a, .sek-pro-notice a:hover, .sek-pro-notice a:focus {
|
||||
color: #f07829;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sek-pro-notice a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sek-pro-icon {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
.sek-pro-notice .sek-pro-notice-icon-bef-text {
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.sek-pro-notice .sek-pro-notice-icon-bef-text img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
+274
@@ -0,0 +1,274 @@
|
||||
|
||||
/* DEFAULT UI BUTTONS STYLE, for unit picker, etc*/
|
||||
.sek-unit-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
.sek-ui-button-group {
|
||||
display: inline-block;
|
||||
}
|
||||
.sek-ui-button-group .sek-ui-button:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.sek-ui-button-group .sek-ui-button+.sek-ui-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.sek-ui-button-group .sek-ui-button:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.sek-ui-button {
|
||||
height: 28px;
|
||||
padding: 0 10px 2px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
background: none;
|
||||
color: #555;
|
||||
border-color: #ccc;
|
||||
background: #f7f7f7;
|
||||
box-shadow: inset 0 -1px 0 #ccc;
|
||||
vertical-align: top;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
-ms-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.sek-ui-button:hover {
|
||||
background: #fafafa;
|
||||
border-color: #999;
|
||||
box-shadow: inset 0 -1px 0 #999;
|
||||
color: #23282d;
|
||||
opacity: 1!important;
|
||||
}
|
||||
.sek-ui-button:active:not(:disabled) {
|
||||
background: #eee;
|
||||
border-color: #999;
|
||||
box-shadow: inset 0 1px 0 #999;
|
||||
}
|
||||
.sek-ui-button:focus:not(:disabled) {
|
||||
background: #fafafa;
|
||||
color: #23282d;
|
||||
border-color: #999;
|
||||
box-shadow: inset 0 -1px 0 #999, 0 0 0 2px #fbfbfb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sek-ui-button[aria-pressed="true"] {
|
||||
background: #555d66;
|
||||
border-color: #555d66;
|
||||
box-shadow: inset 0 -1px 0 #555d66;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sek-ui-button[aria-pressed="true"]:focus:not(:disabled), .sek-ui-button[aria-pressed="true"]:hover {
|
||||
background: #555d66;
|
||||
border-color: #4f4f4f;
|
||||
color: #fff;
|
||||
}
|
||||
.sek-ui-button[aria-pressed="true"]:focus:not(:disabled) {
|
||||
box-shadow: inset 0 -1px 0 #4f4f4f;
|
||||
}
|
||||
.sek-ui-button[aria-pressed="true"]:focus:not(:disabled) {
|
||||
/*box-shadow: inset 0 -1px 0 #00435d, 0 0 0 2px #bfe7f3;*/
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Button style for the content type switcher and template dialog */
|
||||
.sek-content-type-wrapper,
|
||||
.sek-save-tmpl-mode-switcher,
|
||||
.sek-save-tmpl-action,
|
||||
.sek-save-section-mode-switcher,
|
||||
.sek-save-section-action {
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.sek-content-type-wrapper .sek-ui-button-group,
|
||||
.sek-save-tmpl-mode-switcher .sek-ui-button-group,
|
||||
.sek-save-tmpl-action .sek-ui-button-group,
|
||||
.sek-save-section-mode-switcher .sek-ui-button-group,
|
||||
.sek-save-section-action .sek-ui-button-group,
|
||||
#nimble-tmpl-gallery .sek-ui-button-group {
|
||||
display: block;
|
||||
}
|
||||
.sek-content-type-wrapper .sek-ui-button,
|
||||
.sek-save-tmpl-mode-switcher .sek-ui-button,
|
||||
.sek-save-tmpl-action .sek-ui-button,
|
||||
.sek-save-section-mode-switcher .sek-ui-button,
|
||||
.sek-save-section-action .sek-ui-button,
|
||||
#nimble-tmpl-gallery .sek-ui-button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
height: auto;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sek-content-type-wrapper .sek-ui-button { width: 49%; }
|
||||
.sek-save-tmpl-mode-switcher .sek-ui-button,
|
||||
.sek-save-section-mode-switcher .sek-ui-button {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
/* APRIL 2020 added for https://github.com/presscustomizr/nimble-builder/issues/651 */
|
||||
.sek-content-type-wrapper [data-sek-content-type="template"] {
|
||||
width: 98%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Button style for the option type switcher */
|
||||
[data-input-type="module_option_switcher"] .sek-content-type-wrapper { margin-bottom: 0}
|
||||
[data-input-type="module_option_switcher"] [aria-pressed="false"] {
|
||||
opacity: 0.7;
|
||||
}
|
||||
[data-input-type="module_option_switcher"] [data-sek-option-type] {
|
||||
position: relative;
|
||||
}
|
||||
.sek-wrap-opt-switch-btn {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
[data-input-type="module_option_switcher"] [data-sek-option-type] .sek-wrap-opt-switch-btn > i {
|
||||
font-size: 21px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[data-input-type="module_option_switcher"] [data-sek-option-type] .sek-wrap-opt-switch-btn > span {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* RESET BUTTON */
|
||||
.wp-core-ui .button.sek-reset-button {
|
||||
font-size: 11px;
|
||||
padding: 0 5px 1px;
|
||||
line-height: 18px;
|
||||
height: 25px;
|
||||
min-height: 25px;
|
||||
color: #555;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* LEVEL UI CHEVRON ICON NEXT TO TITLE */
|
||||
.sek-animated-arrow {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
margin-left: 6px;
|
||||
top: 3px;
|
||||
font-size: 10px;
|
||||
color: #617379;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out;
|
||||
transition: -webkit-transform 0.2s ease-in-out;
|
||||
-o-transition: transform 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
[data-sek-expanded="true"] label > .customize-control-title .sek-animated-arrow {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
/* underline the control titles of the Nimble controls */
|
||||
[data-sek-expanded="true"] label > .customize-control-title .sek-ctrl-accordion-title, [data-sek-expanded] label > .customize-control-title .sek-ctrl-accordion-title:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-position: under;
|
||||
}
|
||||
|
||||
/* style the icon if there's one next to the title */
|
||||
.customize-control-title .sek-ctrl-accordion-title > i {
|
||||
font-size: 1.2em;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
/* STYLE FOR THE LEVEL ICON NEXT TO THE CONTROL TITLE */
|
||||
.sek-level-option-icon {
|
||||
padding-right: 5px;
|
||||
min-width: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sek-input-title-icon {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* STYLE FOR THE PRO ICON NEXT TO THE CONTROL TITLE */
|
||||
.sek-pro-icon-next-title {
|
||||
padding: 5px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* HIDE ADD NEW BUTTON IN MULTI-ITEM MODULES WHEN ACCORDION COLLAPSED */
|
||||
[data-sek-expanded="false"] > .czr-open-pre-add-new { display: none;}
|
||||
[data-sek-expanded="false"] > .czr-items-wrapper { display: none;}
|
||||
|
||||
/* Nimble Logo */
|
||||
/* this class is added to a .accordion-section-title selector */
|
||||
.sek-side-nimble-logo-wrapper {
|
||||
padding: 4px 25px 0 2px!important;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.sek-side-nimble-logo-wrapper .sek-nimble-logo {
|
||||
height: 45px;
|
||||
}
|
||||
.sek-side-nimble-logo-wrapper .sek-pro-pastil {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
[data-input-type="code_editor"] .czr-input {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
+205
@@ -0,0 +1,205 @@
|
||||
|
||||
|
||||
/* TOP BAR */
|
||||
/* space for the Nimble topbar */
|
||||
#customize-preview iframe {
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
#nimble-top-bar {
|
||||
max-height: 36px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
/*visibility: hidden;*/
|
||||
opacity: 0.3;
|
||||
top : 0%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 2px;
|
||||
z-index: 99999;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* fixes https://github.com/presscustomizr/nimble-builder/issues/340 */
|
||||
.themes-panel-expanded #nimble-top-bar, .outer-section-open #nimble-top-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.nimble-top-bar-visible #nimble-top-bar {
|
||||
/*visibility: inherit;*/
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nimble-top-bar:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#nimble-top-bar .nimble-top-bar-content {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#nimble-top-bar .sek-do-undo .icon:before {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 20px/30px "dashicons";
|
||||
vertical-align: top;
|
||||
/* margin: 3px 0;
|
||||
padding: 4px 8px;*/
|
||||
color: #fff;
|
||||
}
|
||||
/* April 2020 : tmpl-saving btn added for https://github.com/presscustomizr/nimble-builder/issues/655 */
|
||||
#nimble-top-bar .sek-settings, #nimble-top-bar .sek-tmpl-saving, .sek-add-content, .sek-do-undo, .sek-level-tree {
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* vertical separators between option groups */
|
||||
.sek-level-tree:before, .sek-do-undo:before, #nimble-top-bar .sek-tmpl-saving:before, #nimble-top-bar .sek-settings:before {
|
||||
content: '';
|
||||
border-left: 1px solid #aaa;
|
||||
width: 0px;
|
||||
padding: 10px 4px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#nimble-top-bar .sek-tmpl-saving:after {
|
||||
content: '';
|
||||
border-right: 1px solid #aaa;
|
||||
width: 0px;
|
||||
padding: 10px 5px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nimble-top-bar button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
/* opacity: 0.8;*/
|
||||
}
|
||||
#nimble-top-bar button[data-nimble-state="disabled"] {
|
||||
cursor: inherit;
|
||||
opacity: 0.4!important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#nimble-top-bar .sek-do-undo button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#nimble-top-bar .sek-do-undo button:focus {
|
||||
outline: none;
|
||||
}
|
||||
#nimble-top-bar .sek-do-undo .icon:before {
|
||||
/*top: -6px;*/
|
||||
position: relative;
|
||||
}
|
||||
#nimble-top-bar .sek-do-undo .icon.undo:before {
|
||||
content:"\f171";
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
#nimble-top-bar .sek-do-undo .icon.do:before {
|
||||
content:"\f172";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
#nimble-top-bar .sek-add-content {
|
||||
width: 34px;
|
||||
}
|
||||
#nimble-top-bar .sek-add-content button {
|
||||
padding-top: 1px;
|
||||
padding-left: 5px;
|
||||
margin: 0px 4px;
|
||||
font-size: 21px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #ffffff;
|
||||
background: #33b3db;
|
||||
border-radius: 30px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 3px;
|
||||
/* font-size: 28px; */
|
||||
}
|
||||
#nimble-top-bar .sek-nimble-doc {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
#nimble-top-bar .sek-nimble-doc .sek-pointer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.rtl #nimble-top-bar .sek-nimble-doc {
|
||||
left:10px;
|
||||
right: auto;
|
||||
}
|
||||
#nimble-top-bar .sek-nimble-doc img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: gray;
|
||||
filter: gray;
|
||||
}
|
||||
#nimble-top-bar .sek-nimble-doc:hover img {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
#nimble-top-bar .sek-notifications {
|
||||
max-width: 410px;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
#nimble-top-bar .sek-notifications.is-linked {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
#nimble-top-bar .sek-goto-site-tmpl-options {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* May 2020 : debug mode notification */
|
||||
#nimble-top-bar .sek-notifications .debug-mode-notif {
|
||||
color:#ff0000;
|
||||
line-height:1.5em;
|
||||
padding:3px;
|
||||
background:#ffffff;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
+260
@@ -0,0 +1,260 @@
|
||||
|
||||
/* TOP SAVE TMPL UI
|
||||
* introduced april 2020 for https://github.com/presscustomizr/nimble-builder/issues/655
|
||||
* and TOP SAVE SECTION UI
|
||||
* introduced June 2020 for for https://github.com/presscustomizr/nimble-builder/issues/520
|
||||
*/
|
||||
#nimble-top-tmpl-save-ui,
|
||||
#nimble-top-section-save-ui {
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
top: -300px;
|
||||
/*text-align: center;*/
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
/*visibility: hidden;*/
|
||||
opacity: 0.3;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999;
|
||||
/*display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
flex: 0 0 100%;*/
|
||||
max-width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#nimble-top-tmpl-save-ui .nb-tmpl-save-inner,
|
||||
#nimble-top-section-save-ui .nb-section-save-inner {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/*#nimble-top-tmpl-save-ui > div {
|
||||
width: 100%;
|
||||
}*/
|
||||
|
||||
body.sek-save-tmpl-ui-visible #nimble-top-tmpl-save-ui,
|
||||
body.sek-save-section-ui-visible #nimble-top-section-save-ui {
|
||||
/*visibility: inherit;*/
|
||||
opacity: 1;
|
||||
top:36px;
|
||||
}
|
||||
|
||||
#nimble-top-tmpl-save-ui .sek-close-dialog,
|
||||
#nimble-top-section-save-ui .sek-close-dialog {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 3px!important;
|
||||
}
|
||||
|
||||
#nimble-top-tmpl-save-ui #sek-saved-tmpl-title.error,
|
||||
#nimble-top-section-save-ui #sek-saved-section-title.error {
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT STYLE */
|
||||
.sek-tmpl-title,
|
||||
.sek-tmpl-description,
|
||||
select.sek-saved-tmpl-picker,
|
||||
.sek-section-title,
|
||||
.sek-section-description,
|
||||
select.sek-saved-section-picker {
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sek-tmpl-description textarea,
|
||||
input#sek-saved-tmpl-title,
|
||||
select.sek-saved-tmpl-picker,
|
||||
.sek-section-description textarea,
|
||||
input#sek-saved-section-title,
|
||||
select.sek-saved-section-picker {
|
||||
width: 97%;
|
||||
max-width: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sek-tmpl-description textarea,
|
||||
.sek-section-description textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
.sek-saved-tmpl-picker,
|
||||
.sek-tmpl-title,
|
||||
.sek-tmpl-description,
|
||||
.sek-save-tmpl-action .sek-do-save-tmpl,
|
||||
.sek-save-tmpl-action .sek-do-update-tmpl,
|
||||
.sek-save-tmpl-action .sek-open-remove-confirmation,
|
||||
.sek-saved-section-picker,
|
||||
.sek-section-title,
|
||||
.sek-section-description,
|
||||
.sek-save-section-action .sek-do-save-section,
|
||||
.sek-save-section-action .sek-do-update-section,
|
||||
.sek-save-section-action .sek-open-remove-confirmation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* the template picker is visible when template collection has been ajaxily fetched */
|
||||
.tmpl-collection-populated .sek-saved-tmpl-picker,
|
||||
.section-collection-populated .sek-saved-section-picker {
|
||||
display:block
|
||||
}
|
||||
|
||||
.sek-tmpl-remove-dialog,
|
||||
.sek-section-remove-dialog {
|
||||
display: none;
|
||||
color: red;
|
||||
background: #ffffff;
|
||||
padding: 5px;
|
||||
text-transform: uppercase;
|
||||
float: left;
|
||||
width: 96%;
|
||||
}
|
||||
.sek-tmpl-remove-dialog .sek-do-remove-tmpl,
|
||||
.sek-section-remove-dialog .sek-do-remove-section {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* TMPL UI VISIBILITY = f(mode) */
|
||||
[data-sek-tmpl-dialog-mode="save"] [data-tmpl-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="save"] .sek-saved-tmpl-picker {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="save"] .sek-tmpl-title {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="save"] .sek-tmpl-description {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="save"] .sek-do-save-tmpl {display: block;border-color: #ffff00;background: #f9f9b6f7;border-radius: 3px!important;}
|
||||
|
||||
[data-sek-tmpl-dialog-mode="update"] [data-tmpl-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="update"].sek-tmpl-update-selected .sek-tmpl-title {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="update"].sek-tmpl-update-selected .sek-tmpl-description {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="update"].sek-tmpl-update-selected .sek-do-update-tmpl {display: block;}
|
||||
|
||||
.sek-save-tmpl-mode-switcher .sek-ui-button[data-tmpl-mode-switcher="edit"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] [data-tmpl-mode-switcher="edit"] {display: inline-block!important;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] [data-tmpl-mode-switcher="update"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] [data-tmpl-mode-switcher="save"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] [data-tmpl-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] .sek-saved-tmpl-picker {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] .sek-tmpl-title {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] .sek-tmpl-description {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="edit"] .sek-do-update-tmpl {display: block;}
|
||||
|
||||
[data-sek-tmpl-dialog-mode="remove"] [data-tmpl-mode-switcher="update"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="remove"] [data-tmpl-mode-switcher="save"] {display: none;}
|
||||
[data-sek-tmpl-dialog-mode="remove"].sek-tmpl-remove-selected .sek-open-remove-confirmation {display: block;}
|
||||
[data-sek-tmpl-dialog-mode="remove"].sek-removal-confirmation-opened .sek-open-remove-confirmation {display: none!important;}
|
||||
[data-sek-tmpl-dialog-mode="remove"].sek-removal-confirmation-opened .sek-tmpl-remove-dialog { display: block;}
|
||||
|
||||
/* SECTION UI VISIBILITY = f(mode) */
|
||||
[data-sek-section-dialog-mode="save"] [data-section-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-section-dialog-mode="save"] .sek-saved-section-picker {display: none;}
|
||||
[data-sek-section-dialog-mode="save"] .sek-section-title {display: block;}
|
||||
[data-sek-section-dialog-mode="save"] .sek-section-description {display: block;}
|
||||
[data-sek-section-dialog-mode="save"] .sek-do-save-section {display: block;border-color: #ffff00;background: #f9f9b6f7;border-radius: 3px!important;}
|
||||
|
||||
[data-sek-section-dialog-mode="update"] [data-section-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-section-dialog-mode="update"].sek-section-update-selected .sek-section-title {display: block;}
|
||||
[data-sek-section-dialog-mode="update"].sek-section-update-selected .sek-section-description {display: block;}
|
||||
[data-sek-section-dialog-mode="update"].sek-section-update-selected .sek-do-update-section {display: block;}
|
||||
|
||||
.sek-save-section-mode-switcher .sek-ui-button[data-section-mode-switcher="edit"] {display: none;}
|
||||
[data-sek-section-dialog-mode="edit"] [data-section-mode-switcher="edit"] {display: inline-block!important;}
|
||||
[data-sek-section-dialog-mode="edit"] [data-section-mode-switcher="update"] {display: none;}
|
||||
[data-sek-section-dialog-mode="edit"] [data-section-mode-switcher="save"] {display: none;}
|
||||
[data-sek-section-dialog-mode="edit"] [data-section-mode-switcher="remove"] {display: none;}
|
||||
[data-sek-section-dialog-mode="edit"] .sek-saved-section-picker {display: block;}
|
||||
[data-sek-section-dialog-mode="edit"] .sek-section-title {display: block;}
|
||||
[data-sek-section-dialog-mode="edit"] .sek-section-description {display: block;}
|
||||
[data-sek-section-dialog-mode="edit"] .sek-do-update-section {display: block;}
|
||||
|
||||
[data-sek-section-dialog-mode="remove"].sek-section-remove-selected .sek-open-remove-confirmation {display: block;}
|
||||
[data-sek-section-dialog-mode="remove"].sek-removal-confirmation-opened .sek-open-remove-confirmation {display: none!important;}
|
||||
[data-sek-section-dialog-mode="remove"].sek-removal-confirmation-opened .sek-section-remove-dialog { display: block;}
|
||||
[data-sek-section-dialog-mode="remove"].sek-is-removal-only [data-section-mode-switcher="save"], [data-sek-section-dialog-mode="remove"].sek-is-removal-only [data-section-mode-switcher="update"] { display: none;}
|
||||
|
||||
|
||||
#nimble-top-tmpl-save-ui .spinner,
|
||||
#nimble-top-section-save-ui .spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nimble-top-tmpl-save-ui.nimble-tmpl-processing-ajax .spinner,
|
||||
#nimble-top-section-save-ui.nimble-section-processing-ajax .spinner {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* OLD TOP SAVE SECTION UI */
|
||||
/* #nimble-top-section-save-ui {
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
top: -300px;
|
||||
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
opacity: 0.3;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99999;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#nimble-top-section-save-ui > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.sek-save-section-ui-visible #nimble-top-section-save-ui {
|
||||
|
||||
opacity: 1;
|
||||
top:36px;
|
||||
}
|
||||
|
||||
#nimble-top-section-save-ui .sek-close-dialog {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#nimble-top-section-save-ui #sek-saved-section-title.error {
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
*/
|
||||
+434
@@ -0,0 +1,434 @@
|
||||
|
||||
/* TEMPLATE GALLERY */
|
||||
#nimble-tmpl-gallery, #nimble-tmpl-gallery .sek-tmpl-gal-inject-dialog {
|
||||
-webkit-transition: top 0.3s ease-in-out;
|
||||
-moz-transition: top, 0.3s ease-in-out;
|
||||
-ms-transition: top, 0.3s ease-in-out;
|
||||
-o-transition: top, 0.3s ease-in-out;
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#nimble-tmpl-gallery {
|
||||
background: rgba(240, 240, 240, 0.89)!important;
|
||||
border-bottom: 1px solid #aaa!important;
|
||||
color: #222!important;
|
||||
font-size: 12px!important;
|
||||
position: absolute;
|
||||
top: -100vh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: calc(100vh - 36px);
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sek-template-gallery-expanded #nimble-tmpl-gallery {
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
|
||||
/* IMPORT DIALOG BOX */
|
||||
#nimble-tmpl-gallery .sek-tmpl-gal-inject-dialog {
|
||||
background: rgba(240, 240, 240, 0.89)!important;
|
||||
border-bottom: 1px solid #aaa!important;
|
||||
color: #222!important;
|
||||
font-size: 12px!important;
|
||||
position: absolute;
|
||||
top: -100vh;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: calc(100vh - 36px);
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
z-index: 1001;
|
||||
}
|
||||
.sek-tmpl-dialog-expanded #nimble-tmpl-gallery .sek-tmpl-gal-inject-dialog {
|
||||
top: 0px;
|
||||
}
|
||||
/* Hide template gallery while dialog is open. Otherwise the dialog might not be visible if a template has been clicked too low in the page */
|
||||
.sek-tmpl-dialog-expanded #nimble-tmpl-gallery .sek-tmpl-gallery-inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#nimble-tmpl-gallery .sek-tmpl-gallery-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#nimble-tmpl-gallery .sek-tmpl-gallery-inner *, #nimble-tmpl-gallery .sek-tmpl-gallery-inner *:after, #nimble-tmpl-gallery .sek-tmpl-gallery-inner *:before{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* TMPL ITEM */
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-item {
|
||||
-ms-flex: 0 0 calc(25% - 24px);
|
||||
flex: 0 0 calc(25% - 24px);
|
||||
max-width: calc(25% - 24px);
|
||||
padding: 0px;
|
||||
margin: 12px;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
/* cursor: pointer; */
|
||||
-webkit-box-shadow: rgb(0 0 0 / 25%) 0px 3px 11px 0px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
box-shadow: rgb(0 0 0 / 25%) 0px 3px 11px 0;
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-item {
|
||||
-ms-flex: 0 0 calc(33.333% - 24px);
|
||||
flex: 0 0 calc(33.333% - 24px);
|
||||
max-width: calc(33.333% - 24px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-item {
|
||||
-ms-flex: 0 0 calc(50% - 24px);
|
||||
flex: 0 0 calc(50% - 24px);
|
||||
max-width: calc(50% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.tmpl-top-title {
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
}
|
||||
.tmpl-top-title h3 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tmpl-thumb-and-info-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sek-tmpl-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sek-tmpl-info > p {
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* .sek-tmpl-info > .tmpl-title {
|
||||
font-size: 15px;
|
||||
margin: 0.5em 0;
|
||||
} */
|
||||
.sek-tmpl-info > p {
|
||||
font-size: 13px;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.sek-tmpl-info > p.tmpl-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* USE TMPL BUTTON */
|
||||
.sek-tmpl-info > .use-tmpl {
|
||||
cursor: pointer;
|
||||
font-size: 21px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
background: #33b3db;
|
||||
border-radius: 30px;
|
||||
opacity: 0.2;
|
||||
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
-webkit-transition: all .20s ease;
|
||||
-o-transition: all .20s ease;
|
||||
transition: all .20s ease;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: calc(50% - 25px);
|
||||
left: calc(50% - 25px);
|
||||
}
|
||||
.sek-tmpl-info:hover > .use-tmpl {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.sek-tmpl-info > .use-tmpl:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* REMOVE TMPL BUTTON */
|
||||
.sek-tmpl-info > .remove-tmpl, .sek-tmpl-info > .edit-tmpl {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #535353;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 30px;
|
||||
opacity: 0.4;
|
||||
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.2);
|
||||
-webkit-transition: all .20s ease;
|
||||
-o-transition: all .20s ease;
|
||||
transition: all .20s ease;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
}
|
||||
.sek-tmpl-info > .remove-tmpl {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.sek-tmpl-info > .edit-tmpl {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.sek-tmpl-info:hover > .remove-tmpl, .sek-tmpl-info:hover > .edit-tmpl {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sek-tmpl-info > .remove-tmpl:hover{
|
||||
opacity: 0.95;
|
||||
color: red;
|
||||
}
|
||||
.sek-tmpl-info > .edit-tmpl:hover {
|
||||
opacity: 0.95;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sek-tmpl-demo-link {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
}
|
||||
.sek-tmpl-demo-link a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.sek-tmpl-demo-link a:hover, .sek-tmpl-demo-link a:visited {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sek-is-site-template {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
line-height: 1.5em;
|
||||
background: #33b3db;
|
||||
color: #ffffff;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
|
||||
/*.sek-tmpl-gallery-inner .sek-tmpl-item:after, .sek-tmpl-gallery-inner .sek-tmpl-item:before {
|
||||
box-sizing: inherit;
|
||||
}*/
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-thumb {
|
||||
/* cursor: pointer; */
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position:top;
|
||||
}
|
||||
.sek-tmpl-thumb img { max-width: 100%; }
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-thumb::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000;
|
||||
opacity: 0.40;
|
||||
-webkit-transition: opacity 0.3s ease-in-out;
|
||||
-moz-transition: opacity 0.3s ease-in-out;
|
||||
-ms-transition: opacity 0.3s ease-in-out;
|
||||
-o-transition: opacity 0.3s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.sek-tmpl-gallery-inner .sek-tmpl-item:hover .sek-tmpl-thumb::after {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* FILTER AND CLOSE BUTTON*/
|
||||
#sek-gal-top-bar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.sek-close-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.sek-tmpl-filter-wrapper {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
input.sek-filter-tmpl {
|
||||
width: 60%;
|
||||
}
|
||||
#sek-gal-top-bar .sek-ui-button-group {
|
||||
width: 37%;
|
||||
text-align: right;
|
||||
}
|
||||
.search-active .sek-tmpl-item {
|
||||
display: none;
|
||||
}
|
||||
.search-active .sek-tmpl-item.search-match {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* TMPL SOURCE SWITCHER */
|
||||
#sek-tmpl-source-switcher{
|
||||
display: none;/* <= rendered only if we could access NB api */
|
||||
width:100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
#sek-tmpl-source-switcher .sek-ui-button-group {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* flex-direction: column; */
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#sek-tmpl-source-switcher .sek-ui-button[aria-pressed="true"] {
|
||||
background: #33b3db;
|
||||
border-color: #33b3db;
|
||||
box-shadow: inset 0 -1px 0 #2271b1;
|
||||
}
|
||||
|
||||
[data-sek-tmpl-item-source="api_tmpl"] .sek-tmpl-info .tmpl-api-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
.sek-tmpl-gallery-inner [data-sek-tmpl-item-source="api_tmpl"]:hover .sek-tmpl-info .tmpl-api-hide{
|
||||
opacity: 1;
|
||||
}
|
||||
.sek-tmpl-gallery-inner [data-sek-tmpl-item-source="api_tmpl"] .sek-tmpl-thumb::after {
|
||||
opacity: 0.10;
|
||||
}
|
||||
.sek-tmpl-coming-soon p {
|
||||
text-transform: uppercase;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
/* TMPL PICKING */
|
||||
[data-input-type="site_tmpl_picker"] {
|
||||
margin-bottom: 20px;;
|
||||
}
|
||||
[data-input-type="site_tmpl_picker"] > .customize-control-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sek-current-site-tmpl {
|
||||
width: calc(100% - 16px);
|
||||
float: left;
|
||||
padding: 10px 8px;
|
||||
margin: 5px 0;
|
||||
border-color: #ccc;
|
||||
background: #f7f7f7;
|
||||
box-shadow: inset 0 0px 6px #ccc;
|
||||
-webkit-box-shadow:inset 0 0px 6px #ccc;
|
||||
vertical-align: top;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.sek-has-site-tmpl .sek-current-site-tmpl {
|
||||
background: #33b3db;
|
||||
border-color: #33b3db;
|
||||
-webkit-box-shadow: inset 1px 0px 6px #2c72ab;
|
||||
box-shadow: inset 1px 0px 6px #2c72ab;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.sek-site-tmpl-not-found .sek-current-site-tmpl {
|
||||
background: #f49907;
|
||||
border-color: #f49907;
|
||||
-webkit-box-shadow: inset 1px 0px 6px #b26e01;
|
||||
box-shadow: inset 1px 0px 6px #b26e01;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sek-site-tmpl-picking-active .sek-ui-button-group .sek-pick-site-tmpl,
|
||||
.sek-site-tmpl-picking-active .sek-ui-button-group .sek-pick-site-tmpl:focus,
|
||||
.sek-pick-site-tmpl:hover {
|
||||
background: #33b3db;
|
||||
border-color: #33b3db;
|
||||
box-shadow: inset 0 -1px 0 #2271b1;
|
||||
color: #ffffff;
|
||||
}
|
||||
.sek-pick-site-tmpl {
|
||||
font-weight: bold;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Site template picking mode */
|
||||
.sek-is-site-tmpl-mode [data-sek-api-site-tmpl="false"] {
|
||||
display: none!important;
|
||||
}
|
||||
#nimble-tmpl-gallery .sek-tmpl-gallery-inner [data-sek-api-site-tmpl="true"] {display: none;}
|
||||
.sek-is-site-tmpl-mode .sek-tmpl-gallery-inner [data-sek-api-site-tmpl="true"] {
|
||||
display: -webkit-box!important;
|
||||
display: -ms-flexbox!important;
|
||||
display: flex!important;
|
||||
}
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
/* LEVEL TREE */
|
||||
#nimble-level-tree {
|
||||
-webkit-transition: top 0.3s ease-in-out;
|
||||
-moz-transition: top, 0.3s ease-in-out;
|
||||
-ms-transition: top, 0.3s ease-in-out;
|
||||
-o-transition: top, 0.3s ease-in-out;
|
||||
transition: top 0.3s ease-in-out;
|
||||
}
|
||||
.sek-level-tree-expanded #customize-preview iframe {
|
||||
top: 366px;
|
||||
height: calc(100vh - 366px);
|
||||
}
|
||||
/* highlight icon */
|
||||
.sek-level-tree-expanded #nimble-top-bar .sek-level-tree button {
|
||||
color: #44b9e2;
|
||||
}
|
||||
#nimble-level-tree {
|
||||
background: #f0f0f0!important;
|
||||
border-bottom: 1px solid #aaa!important;
|
||||
color: #222!important;
|
||||
font-size: 12px!important;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 299px;
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
z-index: 0;
|
||||
}
|
||||
/*.sek-level-tree-expanded #nimble-level-tree {
|
||||
top: 36px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}*/
|
||||
#nimble-level-tree ul li {
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#nimble-level-tree ul li .sek-remove-level {
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
#nimble-level-tree ul li .sek-remove-level:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
#nimble-level-tree ul li .sek-level-infos {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding-left: 33px;
|
||||
position: relative;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
.sek-level-infos .sek-inner-level-infos {
|
||||
background: inherit;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
padding-left: 4px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-transition: background .20s ease;
|
||||
transition: background .20s ease;
|
||||
-o-transition: background .20s ease;
|
||||
}
|
||||
|
||||
.sek-inner-level-infos:hover {
|
||||
color: #000;
|
||||
background: white;
|
||||
}
|
||||
.sek-close-level-tree {
|
||||
position: fixed;
|
||||
top: 44px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
img.sek-svg-mod-icon {
|
||||
max-width: 45px;
|
||||
}
|
||||
|
||||
/* TREE */
|
||||
.sek-level-infos::before {
|
||||
position: absolute;
|
||||
left: -31px;
|
||||
background: #a2aab2;
|
||||
width: 63px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
top: calc(50% - 1px);
|
||||
}
|
||||
#nimble-level-tree ul > li:first-child::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #a2aab2;
|
||||
top: -15px;
|
||||
height: 16px;
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
width: 2px;
|
||||
}
|
||||
#nimble-level-tree ul > li:last-child::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #f0f0f0;
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
width: 2px;
|
||||
}
|
||||
#nimble-level-tree ul {
|
||||
border-left: 2px solid #a2aab2;
|
||||
position:relative;
|
||||
}
|
||||
#nimble-level-tree ul > li:last-child {
|
||||
position: relative;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
This stylesheet is loaded when instantiating the tinymce editor
|
||||
its url is added to the list of default stylesheet urls
|
||||
@see : api.czrInputMap.nimble_tinymce_editor
|
||||
wp.editor.initialize( _id, {
|
||||
//tinymce: nimbleTinyMCEPreInit.mceInit["czr-customize-content_editor"],
|
||||
tinymce: {
|
||||
//plugins:"charmap,colorpicker,hr,lists,media,paste,tabfocus,textcolor,wordpress,wpeditimage,wpemoji,wpgallery,wplink,wpdialogs,wptextpattern,wpview",
|
||||
toolbar1:getToolbarBtns(),
|
||||
content_css:( function() {
|
||||
var default_settings = wp.editor.getDefaultSettings(),
|
||||
stylesheets = [ sektionsLocalizedData.tinyMceNimbleEditorStylesheetUrl ];
|
||||
if ( default_settings && default_settings.tinymce && default_settings.tinymce.content_css ) {
|
||||
stylesheets = _.union( default_settings.tinymce.content_css.split(','), stylesheets );
|
||||
}
|
||||
|
||||
return stylesheets.join(',');
|
||||
})()
|
||||
//toolbar2:""
|
||||
},
|
||||
quicktags : defaultQuickTagBtns,
|
||||
mediaButtons: ( inputRegistrationParams.editor_params && false === inputRegistrationParams.editor_params.media_button ) ? false : true
|
||||
});
|
||||
*/
|
||||
body#tinymce{
|
||||
font-size: 14px;
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
body#tinymce{font-size:14px}
|
||||
BIN
Binary file not shown.
BIN
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user