first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,27 @@
|
||||
@font-face {
|
||||
font-family: 'simple-line-icons';
|
||||
src: url('../../fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0');
|
||||
src: url('../../fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'), url('../../fonts/simple-line-icons/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'), url('../../fonts/simple-line-icons/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'), url('../../fonts/simple-line-icons/Simple-Line-Icons.woff?v=2.4.0') format('woff'), url('../../fonts/simple-line-icons/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon-basket,
|
||||
.icon-handbag {
|
||||
font-family: 'simple-line-icons';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.icon-basket:before {
|
||||
content: "\e04e";
|
||||
}
|
||||
.icon-handbag:before {
|
||||
content: "\e035";
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
@font-face{font-family:simple-line-icons;src:url(../../fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0);src:url(../../fonts/simple-line-icons/Simple-Line-Icons.eot?v=2.4.0#iefix) format('embedded-opentype'),url(../../fonts/simple-line-icons/Simple-Line-Icons.woff2?v=2.4.0) format('woff2'),url(../../fonts/simple-line-icons/Simple-Line-Icons.ttf?v=2.4.0) format('truetype'),url(../../fonts/simple-line-icons/Simple-Line-Icons.woff?v=2.4.0) format('woff'),url(../../fonts/simple-line-icons/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons) format('svg');font-weight:400;font-style:normal}.icon-basket,.icon-handbag{font-family:simple-line-icons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-basket:before{content:"\e04e"}.icon-handbag:before{content:"\e035"}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 108 B |
Binary file not shown.
|
After Width: | Height: | Size: 107 B |
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
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-buttonset .buttonset{display:inline-block;border:1px solid #ccc}.customize-control-oceanwp-buttonset .buttonset .switch-label{float:left;background-color:#f5f5f5;color:#555;border-right:1px solid rgba(0,0,0,.2);padding:12px 18px;margin:0;font-size:12px;font-weight:600;line-height:1;letter-spacing:1px;text-transform:uppercase}.customize-control-oceanwp-buttonset .buttonset .switch-label:last-child{border-right:none}.customize-control-oceanwp-buttonset .buttonset .switch-input{display:none}.customize-control-oceanwp-buttonset .buttonset .switch-input:checked+.switch-label{background-color:#3498db;color:#fff}
|
||||
@@ -0,0 +1 @@
|
||||
body.wp-customizer .wp-picker-container .wp-color-result.button{width:100%;box-sizing:border-box;padding:0 0 0 40px;box-shadow:inset 0 0 1px rgba(0,0,0,.5)!important;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.5)!important;border:none;height:30px;border-radius:4px;margin:0}body.wp-customizer .wp-color-result-text{background-color:rgba(0,0,0,.2);color:#fff;height:30px;line-height:30px;border:none;box-shadow:none;font-size:12px;border-radius:0 4px 4px 0;padding:0 15px}body.wp-customizer .wp-picker-container{max-width:255px}body.wp-customizer .wp-picker-container .iris-picker{margin:15px 0 0 0;border-bottom:none}body.wp-customizer .wp-picker-container,body.wp-customizer .wp-picker-input-wrap{width:100%;border-radius:4px;overflow:hidden}body.wp-customizer .wp-picker-open+.wp-picker-input-wrap{width:100%}body.wp-customizer .wp-picker-container .wp-picker-input-wrap>label,body.wp-customizer.wp-core-ui .wp-picker-clear,body.wp-customizer.wp-core-ui .wp-picker-default{width:48%;vertical-align:bottom;margin-top:10px}body.wp-customizer.wp-core-ui .wp-picker-clear,body.wp-customizer.wp-core-ui .wp-picker-default{margin-left:10%}body.wp-customizer .wp-picker-input-wrap input[type=text].wp-color-picker.alpha-color-control{float:left;width:100%}body.wp-customizer .wp-picker-input-wrap .button{margin-left:0;float:right}body.wp-customizer .wp-picker-container .wp-picker-open~.wp-picker-holder .alpha-color-picker-container{display:block}body.wp-customizer .alpha-color-picker-container{border:1px solid #dfdfdf;border-top:none;display:none;background:#fff;padding:0 11px 10px;position:relative}body.wp-customizer .alpha-color-picker-container .ui-widget-content,body.wp-customizer .alpha-color-picker-container .ui-widget-header,body.wp-customizer .alpha-color-picker-wrap .ui-state-focus{background:0 0;border:none}body.wp-customizer .alpha-color-picker-wrap a.iris-square-value:focus{-webkit-box-shadow:none;box-shadow:none}body.wp-customizer .alpha-color-picker-container .ui-slider{position:relative;z-index:1;height:24px;text-align:center;margin:0 auto;width:88%;width:calc(100% - 28px)}body.wp-customizer .alpha-color-picker-container .ui-slider-handle,body.wp-customizer .alpha-color-picker-container .ui-widget-content .ui-state-default{color:#777;background-color:#fff;text-shadow:0 1px 0 #fff;text-decoration:none;position:absolute;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.2);border:1px solid #aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin-top:-2px;top:0;height:26px;width:26px;cursor:ew-resize;font-size:0;padding:0;line-height:27px;margin-left:-14px}body.wp-customizer .alpha-color-picker-container .ui-slider-handle.show-opacity{font-size:12px}body.wp-customizer .alpha-color-picker-container .click-zone{width:14px;height:24px;display:block;position:absolute;left:10px}body.wp-customizer .alpha-color-picker-container .max-click-zone{right:10px;left:auto}body.wp-customizer .alpha-color-picker-container .transparency{height:24px;width:100%;background-color:#fff;background-image:url(../../../controls/color/transparency-grid.png);box-shadow:0 0 5px rgba(0,0,0,.4) inset;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:0;margin-top:-24px}@media only screen and (max-width:640px){body.wp-customizer .wp-picker-input-wrap input[type=text].wp-color-picker.alpha-color-control{height:33px}}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-dimensions>ul{display:inline-block;width:100%}.customize-control-oceanwp-dimensions .dimension-wrap{float:left;width:20%;margin:0}.customize-control-oceanwp-dimensions .dimension-wrap button,.customize-control-oceanwp-dimensions .dimension-wrap input{display:block;font-size:12px;padding:4px 0;width:100%;height:28px;border:1px solid;border-color:#a4afb7;border-left-width:0;border-radius:0;text-align:center}.customize-control-oceanwp-dimensions .dimension-wrap:first-child input{border-left-width:1px;border-radius:3px 0 0 3px}.customize-control-oceanwp-dimensions .dimension-wrap .dimension-label{display:block;color:#949698;font-size:10px;padding-top:5px;font-style:normal;text-transform:uppercase;text-align:center}.customize-control-oceanwp-dimensions .dimension-wrap input:focus+.dimension-label{color:#42474a}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions{background-color:#fff;border:1px solid #a4afb7;border-left-width:0;padding:0;outline:0;border-radius:0 3px 3px 0;cursor:pointer}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions span{display:block;width:100%;height:26px;line-height:26px;font-size:16px}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions .oceanwp-linked{background-color:#a4afb7;color:#fff}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions.unlinked .oceanwp-unlinked{display:none}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions.unlinked .oceanwp-linked{display:block}.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions .oceanwp-linked{display:none}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-heading{margin-top:30px}.oceanwp-customizer-heading{display:block;margin:0 -12px;padding:13px 12px;background-color:#fff;color:#555;border:1px solid #ddd;border-left:0;border-right:0;font-size:11px;font-weight:600;letter-spacing:2px;line-height:1;text-transform:uppercase}.customize-control-oceanwp-heading .description{margin-top:10px}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-icon .icon-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;border:1px solid #ddd;max-height:216px}.customize-control-oceanwp-icon .icon-select label{display:-webkit-box;display:-ms-flexbox;display:flex;width:20%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.customize-control-oceanwp-icon .icon-select .icon-select-input{display:none}.customize-control-oceanwp-icon .icon-select .icon-select-label{display:block;width:100%;background-color:#f5f5f5;color:#555;border:1px solid #ddd;margin:0;font-size:16px;height:53px;line-height:53px;text-align:center;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease}.customize-control-oceanwp-icon .icon-select .icon-select-input:checked+.icon-select-label,.customize-control-oceanwp-icon .icon-select .icon-select-label:hover{background-color:#3498db;color:#fff;border-color:#3498db}
|
||||
+1
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple{border:1px solid rgba(0,0,0,.05);padding:1px 0 0;border-radius:0;line-height:1}.customize-control-oceanwp-multiple-select .select2-container--default.select2-container--focus .select2-selection--multiple{border-color:rgba(0,0,0,.08)}.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__rendered{padding:0}.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#f1f1f1;color:#666;border:rgba(0,0,0,.06);line-height:1.5;padding:0 6px;border-radius:0;margin:7px 0 0 6px}.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-search{line-height:1.5;margin:0 0 0 6px}.customize-control-oceanwp-multiple-select .select2-container--default .select2-search--inline .select2-search__field{margin:0}body.rtl .customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__choice{margin:5px 6px 0 0}body.rtl .customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-search{margin:0 6px 0 0}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-radio-image label{position:relative;display:inline-block;width:30%;line-height:1;margin-right:3%;margin-bottom:2%}.customize-control-oceanwp-radio-image label:nth-child(3n){margin-right:0}.customize-control-oceanwp-radio-image input{display:none}.customize-control-oceanwp-radio-image label img{border:2px solid transparent}.customize-control-oceanwp-radio-image input:checked+label img{border-color:#3498db}.customize-control-oceanwp-radio-image input+label .image-clickable{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%}.customize-control-oceanwp-radio-image .radio-label{display:block;font-size:9px;font-weight:600;margin-top:5px;text-transform:uppercase;letter-spacing:.4px;text-align:center}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-range .control-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.customize-control-oceanwp-range input[type=range]{background-color:rgba(0,0,0,.1);height:5px;width:69%;padding:0;cursor:pointer;-webkit-transition:background .5s;-moz-transition:background .5s;transition:background .5s;-webkit-appearance:none}.customize-control-oceanwp-range input[type=range]:focus{box-shadow:none!important;outline:0!important}.customize-control-oceanwp-range input[type=range]:hover{background-color:rgba(0,0,0,.15)}.customize-control-oceanwp-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#2e86b9;width:15px;height:15px;border-radius:15px;-webkit-border-radius:15px}.customize-control-oceanwp-range input[type=range]::-moz-range-track{border:inherit;background-color:transparent}.customize-control-oceanwp-range input[type=range]::-ms-track{border:inherit;color:transparent;background-color:transparent}.customize-control-oceanwp-range input[type=range]::-ms-fill-lower,.customize-control-oceanwp-range input[type=range]::-ms-fill-upper{background-color:transparent}.customize-control-oceanwp-range input[type=range]::-ms-tooltip{display:none}.customize-control-oceanwp-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border:none;border-radius:15px;background-color:#2e86b9}.customize-control-oceanwp-range input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:15px;background-color:#2e86b9}.customize-control-oceanwp-range input[type=range]::-ms-thumb{width:15px;height:15px;border-radius:15px;border:0;background-color:#2e86b9}.customize-control-oceanwp-range input.oceanwp-range-input{width:21%;height:28px;text-align:center;margin-left:2%;border-radius:4px;padding:3px;font-size:12px;font-weight:600;color:#555;-moz-appearance:textfield}.customize-control-oceanwp-range input.oceanwp-range-input::-webkit-inner-spin-button,.customize-control-oceanwp-range input.oceanwp-range-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.customize-control-oceanwp-range span.oceanwp-reset-slider{display:inline-block;position:relative;width:6%;margin-left:2%;line-height:1;color:rgba(0,0,0,.2);cursor:pointer;text-align:center;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease}.customize-control-oceanwp-range span.oceanwp-reset-slider:hover{color:#fe5252}.customize-control-oceanwp-range span.oceanwp-reset-slider span{width:16px;height:16px;font-size:16px;line-height:1}
|
||||
@@ -0,0 +1 @@
|
||||
body.rtl .customize-control-checkbox input[type=checkbox]{margin:0 0 0 6px}body.rtl .customize-control-checkbox input[type=checkbox]:checked:before,body.rtl .customize-control-ocean-multi-check input[type=checkbox]:checked:before{right:0;left:auto}body.rtl .customize-control .responsive-switchers,body.rtl .customize-control .responsive-switchers li button{margin-right:5px;margin-left:0}body.rtl .customize-control .responsive-switchers li{float:right}body.rtl .customize-control-oceanwp-buttonset .buttonset .switch-label{float:right;border-left:1px solid rgba(0,0,0,.2);border-right:0}body.rtl .customize-control-oceanwp-buttonset .buttonset .switch-label:last-child{border-left:none}.wp-core-ui .wp-picker-clear,body.rtl .wp-core-ui .wp-picker-default{margin-right:10%;margin-left:0}body.rtl .wp-picker-input-wrap input[type=text].wp-color-picker.alpha-color-control{float:right}body.rtl .wp-picker-input-wrap .button{margin-right:0;float:left}body.rtl .alpha-color-picker-container .ui-widget-content .ui-state-default{margin-right:-14px;margin-left:0}body.rtl .alpha-color-picker-container .click-zone{right:10px;left:auto}body.rtl .alpha-color-picker-container .max-click-zone{left:10px;right:auto}body.rtl .customize-control-oceanwp-dimensions .dimension-wrap{float:right}body.rtl .customize-control-oceanwp-dimensions .dimension-wrap button,body.rtl .customize-control-oceanwp-dimensions .dimension-wrap input{border-left-width:1px;border-right-width:0}body.rtl .customize-control-oceanwp-dimensions .dimension-wrap:first-child input{border-right-width:1px;border-radius:3px 3px 0 0}body.rtl .customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions{border-left-width:1px;border-right-width:0;border-radius:0 0 3px 3px}body.rtl .customize-control-oceanwp-icon .icon-select label{float:right}body.rtl .customize-control-oceanwp-radio-image label{margin-left:3%;margin-right:0}body.rtl .customize-control-oceanwp-radio-image label:nth-child(3n){margin-left:0}body.rtl .customize-control-oceanwp-range input.oceanwp-range-input{margin-right:8px;margin-left:0}body.rtl .customize-control-oceanwp-range span.oceanwp-reset-slider{margin-right:5px;margin-left:0}body.rtl .customize-control-oceanwp-sortable ul li .dashicons.dashicons-menu{float:left}body.rtl .customize-control-oceanwp-sortable ul li .dashicons.visibility{margin-left:10px;margin-right:0}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-slider .control-wrap{display:inline-block;width:100%}.customize-control-oceanwp-slider .oceanwp-slider{display:inline-block;position:relative;width:67%;height:4px;margin-top:12px;background-color:rgba(0,0,0,.15);border-radius:5px;cursor:pointer;-webkit-transition:background .5s;-moz-transition:background .5s;transition:background .5s}.customize-control-oceanwp-slider .oceanwp-slider:hover{background-color:rgba(0,0,0,.2)}.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-range{display:inline-block;position:absolute;top:0;height:100%;background-color:#13a1dc}.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-handle{height:16px;width:16px;background-color:#fff;display:inline-block;position:absolute;top:50%;-webkit-transform:translateY(-50%) translateX(-4px);transform:translateY(-50%) translateX(-4px);box-shadow:1px 1px 3px rgba(0,0,0,.3);border-radius:50%;cursor:pointer}.customize-control-oceanwp-slider .oceanwp-slider-input{float:right;width:33%}.customize-control-oceanwp-slider input.slider-input{float:right;width:80%;height:28px;text-align:center;border-radius:4px;padding:3px;font-size:12px;font-weight:600;color:#555}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-sortable ul li{padding:8px 10px;line-height:20px;border:1px solid #ccc;background:#fff}.customize-control-oceanwp-sortable ul li .dashicons.dashicons-menu{float:right}.customize-control-oceanwp-sortable ul li .dashicons.visibility{color:#49aed8;margin-right:10px}.customize-control-oceanwp-sortable ul li.invisible{color:#aaa;border:1px dashed #aaa}.customize-control-oceanwp-sortable ul li.invisible .dashicons.visibility{color:#aaa}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-textarea textarea{width:100%;min-height:150px}.customize-control-oceanwp-textarea span.description{margin:6px 0 0}
|
||||
@@ -0,0 +1 @@
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li{width:50%;padding:0 10px;margin:0 0 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li.typography-font-family{width:100%}.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li span.label{display:block;margin:0 0 6px}@media only screen and (max-width:480px){.customize-control-oceanwp-typo ul.oceanwp-typo-wrap{margin:0}.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li{width:100%;padding:0}}
|
||||
@@ -0,0 +1 @@
|
||||
body .select2-container{z-index:99999999}body .customize-control .select2-container{z-index:1}body .select2-container .select2-selection--single{height:33px}body .select2-container--default .select2-selection--single{height:33px;border-color:#ddd;border-radius:0}body .select2-container--default .select2-selection--single .select2-selection__rendered{color:#32373c;line-height:33px}body .select2-container--default .select2-selection--single .select2-selection__arrow{height:30px}
|
||||
@@ -0,0 +1 @@
|
||||
#customize-theme-controls #accordion-section-oceanwp_upsell_section{display:block!important;border-top:1px solid #5277fe;border-bottom:1px solid #5277fe}#accordion-section-oceanwp_upsell_section h3{background-color:#5277fe;padding:0;margin:0;border-left:4px solid #5277fe;transition:.15s background-color ease-in-out,.15s border-color ease-in-out;outline:0}#accordion-section-oceanwp_upsell_section h3:hover{background-color:#3d5ac3;border-left-color:#000c65}#accordion-section-oceanwp_upsell_section h3 a{display:block;position:relative;color:#fff;padding:10px 10px 11px 14px;line-height:21px;text-decoration:none;box-shadow:none!important}#accordion-section-oceanwp_upsell_section h3 a:after{content:'\f345';color:#fff;position:absolute;top:12px;right:10px;z-index:1;font:400 20px/1 dashicons;speak:none;display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none!important}.rtl #accordion-section-oceanwp_upsell_section h3{border-left:none;border-right:4px solid #5277fe}.rtl #accordion-section-oceanwp_upsell_section h3:hover{border-right-color:#000c65}.rtl #accordion-section-oceanwp_upsell_section h3 a:after{content:'\f341';right:auto;left:10px}
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-buttonset"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;this.container.on("click","input",function(){t.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
function acp_get_alpha_value_from_color(a){var o;return o=(a=a.replace(/ /g,"")).match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)?(o=100*parseFloat(a.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1]).toFixed(2),parseInt(o)):100}function acp_update_alpha_value_on_color_control(a,o,l,e){var t,r=o.data("a8cIris"),c=o.data("wpWpColorPicker");r._color._alpha=a,t=r._color.toString(),o.val(t),c.toggler.css({"background-color":t}),e&&acp_update_alpha_value_on_alpha_slider(a,l),o.wpColorPicker("color",t)}function acp_update_alpha_value_on_alpha_slider(a,o){o.slider("value",a),o.find(".ui-slider-handle").text(a.toString())}Color.prototype.toString=function(a){if("no-alpha"==a)return this.toCSS("rgba","1").replace(/\s+/g,"");if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var o=parseInt(this._color,10).toString(16);if(this.error)return"";if(o.length<6)for(var l=6-o.length-1;0<=l;l--)o="0"+o;return"#"+o},jQuery(document).ready(function(t){t(".alpha-color-control").each(function(){var r,c,a,i=t(this),e=i.val().replace(/\s+/g,""),o=i.attr("data-show-opacity"),n=i.attr("data-default-color"),l={change:function(a,o){var l,e=i.attr("data-customize-setting-link"),t=i.wpColorPicker("color");n==t&&(l=acp_get_alpha_value_from_color(t),c.find(".ui-slider-handle").text(l)),wp.customize(e,function(a){a.set(t)}),r.find(".transparency").css("background-color",o.color.toString("no-alpha"))},palettes:oceanwpLocalize.colorPalettes};i.wpColorPicker(l),r=i.parents(".wp-picker-container:first"),t('<div class="alpha-color-picker-container"><div class="min-click-zone click-zone"></div><div class="max-click-zone click-zone"></div><div class="alpha-slider"></div><div class="transparency"></div></div>').appendTo(r.find(".wp-picker-holder")),c=r.find(".alpha-slider"),a={create:function(a,o){var l=t(this).slider("value");t(this).find(".ui-slider-handle").text(l),t(this).siblings(".transparency ").css("background-color",e)},value:acp_get_alpha_value_from_color(e),range:"max",step:1,min:0,max:100,animate:300},c.slider(a),"true"==o&&c.find(".ui-slider-handle").addClass("show-opacity"),r.find(".min-click-zone").on("click",function(){acp_update_alpha_value_on_color_control(0,i,c,!0)}),r.find(".max-click-zone").on("click",function(){acp_update_alpha_value_on_color_control(100,i,c,!0)}),r.find(".iris-palette").on("click",function(a){var o,l;a.preventDefault(),acp_update_alpha_value_on_alpha_slider(l=acp_get_alpha_value_from_color(o=t(this).css("background-color")),c),100!=l&&(o=o.replace(/[^,]+(?=\))/,(l/100).toFixed(2))),i.wpColorPicker("color",o)}),r.find(".button.wp-picker-clear").on("click",function(a){a.preventDefault();var o=i.attr("data-customize-setting-link");i.wpColorPicker("color","#ffffff"),wp.customize(o,function(a){a.set("")}),acp_update_alpha_value_on_alpha_slider(100,c)}),r.find(".button.wp-picker-default").on("click",function(a){a.preventDefault(),acp_update_alpha_value_on_alpha_slider(acp_get_alpha_value_from_color(n),c)}),i.on("input",function(a){a.preventDefault(),acp_update_alpha_value_on_alpha_slider(acp_get_alpha_value_from_color(t(this).val()),c)}),c.slider().on("slide",function(a,o){acp_update_alpha_value_on_color_control(parseFloat(o.value)/100,i,c,!1),t(this).find(".ui-slider-handle").text(o.value)}),t(".iris-picker, .alpha-color-control").on("click",function(a){a.preventDefault()})})});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-dimensions"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;t.container.on("change keyup paste",".dimension-desktop_top",function(){t.settings.desktop_top.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-desktop_right",function(){t.settings.desktop_right.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-desktop_bottom",function(){t.settings.desktop_bottom.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-desktop_left",function(){t.settings.desktop_left.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-tablet_top",function(){t.settings.tablet_top.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-tablet_right",function(){t.settings.tablet_right.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-tablet_bottom",function(){t.settings.tablet_bottom.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-tablet_left",function(){t.settings.tablet_left.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-mobile_top",function(){t.settings.mobile_top.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-mobile_right",function(){t.settings.mobile_right.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-mobile_bottom",function(){t.settings.mobile_bottom.set(jQuery(this).val())}),t.container.on("change keyup paste",".dimension-mobile_left",function(){t.settings.mobile_left.set(jQuery(this).val())})}}),jQuery(document).ready(function(i){i(".oceanwp-linked").on("click",function(){var t=i(this);t.parent().parent(".dimension-wrap").prevAll().slice(0,4).find("input").removeClass("linked").attr("data-element",""),t.parent(".link-dimensions").removeClass("unlinked")}),i(".oceanwp-unlinked").on("click",function(){var t=i(this),e=t.data("element");t.parent().parent(".dimension-wrap").prevAll().slice(0,4).find("input").addClass("linked").attr("data-element",e),t.parent(".link-dimensions").addClass("unlinked")}),i(".dimension-wrap").on("input",".linked",function(){var t=i(this).attr("data-element"),n=i(this).val();i('.linked[ data-element="'+t+'" ]').each(function(t,e){i(this).val(n).change()})})});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-dropdown-pages"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;t.container.on("change","select",function(){t.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
jQuery(document).ready(function(c){c(".customize-control .responsive-switchers button").on("click",function(e){var s=c(this),t=c(".responsive-switchers"),o=c(e.currentTarget).data("device"),r=c(".customize-control.has-switchers"),i=c(".wp-full-overlay"),a=c(".wp-full-overlay-footer .devices");t.find("button").removeClass("active"),t.find("button.preview-"+o).addClass("active"),r.find(".control-wrap").removeClass("active"),r.find(".control-wrap."+o).addClass("active"),r.removeClass("control-device-desktop control-device-tablet control-device-mobile").addClass("control-device-"+o),i.removeClass("preview-desktop preview-tablet preview-mobile").addClass("preview-"+o),a.find("button").removeClass("active").attr("aria-pressed",!1),a.find("button.preview-"+o).addClass("active").attr("aria-pressed",!0),s.hasClass("preview-desktop")&&r.toggleClass("responsive-switchers-open")}),c(".wp-full-overlay-footer .devices button").on("click",function(e){var s=c(this),t=c(".customize-control.has-switchers .responsive-switchers"),o=c(e.currentTarget).data("device"),r=c(".customize-control.has-switchers");t.find("button").removeClass("active"),t.find("button.preview-"+o).addClass("active"),r.find(".control-wrap").removeClass("active"),r.find(".control-wrap."+o).addClass("active"),r.removeClass("control-device-desktop control-device-tablet control-device-mobile").addClass("control-device-"+o),s.hasClass("preview-desktop")?r.removeClass("responsive-switchers-open"):r.addClass("responsive-switchers-open")})});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-icon"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;this.container.on("change","input",function(){t.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-multi-check"]=wp.customize.Control.extend({ready:function(){"use strict";var i=this;i.container.on("change","input",function(){var c=[],e=0;jQuery.each(i.params.choices,function(n,t){i.container.find('input[value="'+n+'"]').is(":checked")&&(c[e]=n,e++)}),i.setting.set(c)})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-multiple-select"]=wp.customize.Control.extend({ready:function(){"use strict";var t,e=this,n=this.container.find("select");jQuery(n).select2({escapeMarkup:function(t){return t}}).on("change",function(){t=jQuery(this).val(),e.setting.set(t),null===t?e.setting.set(""):e.setting.set(t)})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-radio-image"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;this.container.on("click","input",function(){t.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-range"]=wp.customize.Control.extend({ready:function(){"use strict";var t,e,a,n,r,o,c,i=this;function u(t,e){var a=t,n=a.parent().find('input[type="range"]'),r=parseFloat(a.val()),o=parseFloat(n.attr("data-reset_value")),i=parseFloat(a.attr("step")),u=parseFloat(a.attr("min")),s=parseFloat(a.attr("max"));clearTimeout(c),c=setTimeout(function(){return isNaN(r)?(a.val(o),void n.val(o).trigger("change")):(1<=i&&r%1!=0&&(r=Math.round(r),a.val(r),n.val(r)),s<r&&(a.val(s),n.val(s).trigger("change")),void(r<u&&(a.val(u),n.val(u).trigger("change"))))},e),n.val(r).trigger("change")}jQuery("input[type=range]").on("mousedown",function(){t=jQuery(this),e=t.parent().children(".oceanwp-range-input"),a=t.attr("value"),e.val(a),t.mousemove(function(){a=t.attr("value"),e.val(a)})}),jQuery("input.oceanwp-range-input").on("change keyup",function(){u(jQuery(this),1e3)}).on("focusout",function(){u(jQuery(this),0)}),jQuery(".oceanwp-reset-slider").on("click",function(){n=jQuery(this).closest("label").find("input"),r=n.data("reset_value"),n.val(r),n.change()}),o="postMessage"===i.setting.transport?"mousemove change":"change",this.container.on(o,"input",function(){i.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-slider"]=wp.customize.Control.extend({ready:function(){"use strict";var e,t,n=this,i=n.container.find(".oceanwp-slider.desktop-slider"),a=i.next(".oceanwp-slider-input").find("input.desktop-input"),s=n.container.find(".oceanwp-slider.tablet-slider"),l=s.next(".oceanwp-slider-input").find("input.tablet-input"),u=n.container.find(".oceanwp-slider.mobile-slider"),p=u.next(".oceanwp-slider-input").find("input.mobile-input");i.slider({range:"min",value:a.val(),min:+a.attr("min"),max:+a.attr("max"),step:+a.attr("step"),slide:function(e,t){a.val(t.value).keyup()},change:function(e,t){n.settings.desktop.set(t.value)}}),s.slider({range:"min",value:l.val(),min:+l.attr("min"),max:+l.attr("max"),step:+a.attr("step"),slide:function(e,t){l.val(t.value).keyup()},change:function(e,t){n.settings.tablet.set(t.value)}}),u.slider({range:"min",value:p.val(),min:+p.attr("min"),max:+p.attr("max"),step:+a.attr("step"),slide:function(e,t){p.val(t.value).keyup()},change:function(e,t){n.settings.mobile.set(t.value)}}),jQuery("input.desktop-input").on("change keyup paste",function(){e=jQuery(this),t=e.val(),e.parent().prev(".oceanwp-slider.desktop-slider").slider("value",t)}),jQuery("input.tablet-input").on("change keyup paste",function(){e=jQuery(this),t=e.val(),e.parent().prev(".oceanwp-slider.tablet-slider").slider("value",t)}),jQuery("input.mobile-input").on("change keyup paste",function(){e=jQuery(this),t=e.val(),e.parent().prev(".oceanwp-slider.mobile-slider").slider("value",t)}),n.container.on("change keyup paste",".desktop input",function(){n.settings.desktop.set(jQuery(this).val())}),n.container.on("change keyup paste",".tablet input",function(){n.settings.tablet.set(jQuery(this).val())}),n.container.on("change keyup paste",".mobile input",function(){n.settings.mobile.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-sortable"]=wp.customize.Control.extend({ready:function(){"use strict";var i=this;i.sortableContainer=i.container.find("ul.sortable").first(),i.sortableContainer.sortable({stop:function(){i.updateValue()}}).disableSelection().find("li").each(function(){jQuery(this).find("i.visibility").click(function(){jQuery(this).toggleClass("dashicons-visibility-faint").parents("li:eq(0)").toggleClass("invisible")})}).click(function(){i.updateValue()})},updateValue:function(){"use strict";var i=[];this.sortableContainer.find("li").each(function(){jQuery(this).is(".invisible")||i.push(jQuery(this).data("value"))}),this.setting.set(i)}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-text"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;t.container.on("change keyup paste",".desktop input",function(){t.settings.desktop.set(jQuery(this).val())}),t.container.on("change keyup paste",".tablet input",function(){t.settings.tablet.set(jQuery(this).val())}),t.container.on("change keyup paste",".mobile input",function(){t.settings.mobile.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-textarea"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this;this.container.find("textarea");this.container.on("change keyup paste","textarea",function(){t.setting.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
wp.customize.controlConstructor["oceanwp-typo"]=wp.customize.Control.extend({ready:function(){"use strict";var t=this,n=this.container.find("select");jQuery(n).select2({minimumResultsForSearch:10,dropdownCssClass:"oceanwp-select2",width:"100%"}),t.container.on("change",".typography-font-family select",function(){t.settings.family.set(jQuery(this).val())}),t.container.on("change",".typography-font-size input",function(){t.settings.size.set(jQuery(this).val())}),t.container.on("change",".typography-font-weight select",function(){t.settings.weight.set(jQuery(this).val())}),t.container.on("change",".typography-font-style select",function(){t.settings.style.set(jQuery(this).val())}),t.container.on("change",".typography-text-transform select",function(){t.settings.transform.set(jQuery(this).val())}),t.container.on("change",".typography-line-height input",function(){t.settings.line_height.set(jQuery(this).val())}),t.container.on("change",".typography-letter-spacing input",function(){t.settings.spacing.set(jQuery(this).val())})}});
|
||||
@@ -0,0 +1 @@
|
||||
!function(e){e(document).ready(function(){e(".oceanwp-typography-select").select2()})}(jQuery);
|
||||
@@ -0,0 +1 @@
|
||||
!function(t){t.sectionConstructor["oceanwp-upsell"]=t.Section.extend({attachEvents:function(){},isContextuallyActive:function(){return!0}})}((jQuery,wp.customize));
|
||||
@@ -0,0 +1,5 @@
|
||||
.customize-control-oceanwp-buttonset .buttonset { display: inline-block; border: 1px solid #ccc; }
|
||||
.customize-control-oceanwp-buttonset .buttonset .switch-label { float: left; background-color: #f5f5f5; color: #555; border-right: 1px solid rgba(0, 0, 0, 0.2); padding: 12px 18px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 1px; text-transform: uppercase;}
|
||||
.customize-control-oceanwp-buttonset .buttonset .switch-label:last-child { border-right: none; }
|
||||
.customize-control-oceanwp-buttonset .buttonset .switch-input { display: none; }
|
||||
.customize-control-oceanwp-buttonset .buttonset .switch-input:checked + .switch-label { background-color: #3498DB; color: #fff; }
|
||||
@@ -0,0 +1,15 @@
|
||||
wp.customize.controlConstructor['oceanwp-buttonset'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Change the value
|
||||
this.container.on( 'click', 'input', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-buttonset.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttonset control
|
||||
*/
|
||||
class OceanWP_Customizer_Buttonset_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-buttonset';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-buttonset', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/buttonset.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-buttonset', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/buttonset.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div id="input_{{ data.id }}" class="buttonset">
|
||||
<# for ( key in data.choices ) { #>
|
||||
<input {{{ data.inputAttrs }}} class="switch-input" type="radio" value="{{ key }}" name="_customize-radio-{{{ data.id }}}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( key === data.value ) { #> checked="checked" <# } #>>
|
||||
<label class="switch-label switch-label-<# if ( key === data.value ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}{{ key }}">
|
||||
{{ data.choices[ key ] }}
|
||||
</label>
|
||||
</input>
|
||||
<# } #>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-color.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/BraadMartin/components
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Color control
|
||||
*/
|
||||
class OceanWP_Customizer_Color_Control extends WP_Customize_Control {
|
||||
|
||||
public $type = 'alpha-color';
|
||||
|
||||
/**
|
||||
* Add support for palettes to be passed in.
|
||||
*
|
||||
* Supported palette values are true, false, or an array of RGBa and Hex colors.
|
||||
*/
|
||||
public $palette;
|
||||
|
||||
/**
|
||||
* Add support for showing the opacity value on the slider handle.
|
||||
*/
|
||||
public $show_opacity;
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'wp-color-picker' );
|
||||
wp_enqueue_script( 'oceanwp-color', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/color.min.js', array( 'jquery', 'customize-base', 'wp-color-picker' ), false, true );
|
||||
wp_enqueue_style( 'wp-color-picker' );
|
||||
wp_enqueue_style( 'oceanwp-color', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/color.min.css', array( 'wp-color-picker' ), '1.0.0' );
|
||||
wp_localize_script( 'oceanwp-color', 'oceanwpLocalize', array( 'colorPalettes' => oceanwp_default_color_palettes() ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['default'] = $this->setting->default;
|
||||
$this->json['show_opacity'] = ( false === $this->show_opacity || 'false' === $this->show_opacity ) ? 'false' : 'true';
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() { ?>
|
||||
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div>
|
||||
<input class="alpha-color-control" type="text" value="{{ data.value }}" data-show-opacity="{{ data.show_opacity }}" data-default-color="{{ data.default }}" {{{ data.link }}} />
|
||||
</div>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
body.wp-customizer .wp-picker-container .wp-color-result.button { width: 100%; box-sizing: border-box; padding: 0 0 0 40px; box-shadow: inset 0 0 1px rgba(0,0,0,.5) !important; -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5) !important; border: none; height: 30px; border-radius: 4px; margin: 0; }
|
||||
body.wp-customizer .wp-color-result-text { background-color: rgba(0,0,0,.2); color: #fff; height: 30px; line-height: 30px; border: none; box-shadow: none; font-size: 12px; border-radius: 0 4px 4px 0; padding: 0 15px; }
|
||||
body.wp-customizer .wp-picker-container { max-width: 255px; }
|
||||
body.wp-customizer .wp-picker-container .iris-picker { margin: 15px 0 0 0; border-bottom:none; }
|
||||
body.wp-customizer .wp-picker-container,
|
||||
body.wp-customizer .wp-picker-input-wrap { width: 100%; border-radius: 4px; overflow: hidden; }
|
||||
body.wp-customizer .wp-picker-open + .wp-picker-input-wrap { width: 100%; }
|
||||
body.wp-customizer .wp-picker-container .wp-picker-input-wrap > label,
|
||||
body.wp-customizer.wp-core-ui .wp-picker-default,
|
||||
body.wp-customizer.wp-core-ui .wp-picker-clear { width: 48%; vertical-align: bottom; margin-top: 10px; }
|
||||
body.wp-customizer.wp-core-ui .wp-picker-default,
|
||||
body.wp-customizer.wp-core-ui .wp-picker-clear { margin-left: 10%; }
|
||||
body.wp-customizer .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { float: left; width: 100%; }
|
||||
body.wp-customizer .wp-picker-input-wrap .button { margin-left: 0; float: right; }
|
||||
body.wp-customizer .wp-picker-container .wp-picker-open ~ .wp-picker-holder .alpha-color-picker-container { display: block; }
|
||||
body.wp-customizer .alpha-color-picker-container { border: 1px solid #dfdfdf; border-top: none; display: none; background: #fff; padding: 0 11px 10px; position: relative; }
|
||||
body.wp-customizer .alpha-color-picker-container .ui-widget-content,
|
||||
body.wp-customizer .alpha-color-picker-container .ui-widget-header,
|
||||
body.wp-customizer .alpha-color-picker-wrap .ui-state-focus { background: transparent; border: none; }
|
||||
body.wp-customizer .alpha-color-picker-wrap a.iris-square-value:focus { -webkit-box-shadow: none; box-shadow: none; }
|
||||
body.wp-customizer .alpha-color-picker-container .ui-slider { position: relative; z-index: 1; height: 24px; text-align: center; margin: 0 auto; width: 88%; width: calc( 100% - 28px ); }
|
||||
body.wp-customizer .alpha-color-picker-container .ui-slider-handle,
|
||||
body.wp-customizer .alpha-color-picker-container .ui-widget-content .ui-state-default { color: #777; background-color: #fff; text-shadow: 0 1px 0 #fff; text-decoration: none; position: absolute; z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,0.2); border: 1px solid #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-top: -2px; top: 0; height: 26px; width: 26px; cursor: ew-resize; font-size: 0; padding: 0; line-height: 27px; margin-left: -14px; }
|
||||
body.wp-customizer .alpha-color-picker-container .ui-slider-handle.show-opacity { font-size: 12px; }
|
||||
body.wp-customizer .alpha-color-picker-container .click-zone { width: 14px; height: 24px; display: block; position: absolute; left: 10px; }
|
||||
body.wp-customizer .alpha-color-picker-container .max-click-zone { right: 10px; left: auto; }
|
||||
body.wp-customizer .alpha-color-picker-container .transparency { height: 24px; width: 100%; background-color: #fff; background-image: url(../../../controls/color/transparency-grid.png); box-shadow: 0 0 5px rgba(0,0,0,0.4) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 0; margin-top: -24px; }
|
||||
|
||||
/* Responsive */
|
||||
@media only screen and (max-width: 640px) {
|
||||
body.wp-customizer .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { height: 33px; }
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/**
|
||||
* Alpha Color Picker JS
|
||||
*
|
||||
* This file includes several helper functions and the core control JS.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Override the stock color.js toString() method to add support for
|
||||
* outputting RGBa or Hex.
|
||||
*/
|
||||
Color.prototype.toString = function( flag ) {
|
||||
|
||||
// If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
|
||||
// This is used to set the background color on the opacity slider during color changes.
|
||||
if ( 'no-alpha' == flag ) {
|
||||
return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// If we have a proper opacity value, output RGBa.
|
||||
if ( 1 > this._alpha ) {
|
||||
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
|
||||
}
|
||||
|
||||
// Proceed with stock color.js hex output.
|
||||
var hex = parseInt( this._color, 10 ).toString( 16 );
|
||||
if ( this.error ) { return ''; }
|
||||
if ( hex.length < 6 ) {
|
||||
for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
|
||||
hex = '0' + hex;
|
||||
}
|
||||
}
|
||||
|
||||
return '#' + hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Given an RGBa, RGB, or hex color value, return the alpha channel value.
|
||||
*/
|
||||
function acp_get_alpha_value_from_color( value ) {
|
||||
var alphaVal;
|
||||
|
||||
// Remove all spaces from the passed in value to help our RGBa regex.
|
||||
value = value.replace( / /g, '' );
|
||||
|
||||
if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
|
||||
alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
|
||||
alphaVal = parseInt( alphaVal );
|
||||
} else {
|
||||
alphaVal = 100;
|
||||
}
|
||||
|
||||
return alphaVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force update the alpha value of the color picker object and maybe the alpha slider.
|
||||
*/
|
||||
function acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) {
|
||||
var iris, colorPicker, color;
|
||||
|
||||
iris = $control.data( 'a8cIris' );
|
||||
colorPicker = $control.data( 'wpWpColorPicker' );
|
||||
|
||||
// Set the alpha value on the Iris object.
|
||||
iris._color._alpha = alpha;
|
||||
|
||||
// Store the new color value.
|
||||
color = iris._color.toString();
|
||||
|
||||
// Set the value of the input.
|
||||
$control.val( color );
|
||||
|
||||
// Update the background color of the color picker.
|
||||
colorPicker.toggler.css({
|
||||
'background-color': color
|
||||
});
|
||||
|
||||
// Maybe update the alpha slider itself.
|
||||
if ( update_slider ) {
|
||||
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
}
|
||||
|
||||
// Update the color value of the color picker object.
|
||||
$control.wpColorPicker( 'color', color );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the slider handle position and label.
|
||||
*/
|
||||
function acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) {
|
||||
$alphaSlider.slider( 'value', alpha );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization trigger.
|
||||
*/
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
|
||||
// Loop over each control and transform it into our color picker.
|
||||
$( '.alpha-color-control' ).each( function() {
|
||||
|
||||
// Scope the vars.
|
||||
var $control, startingColor, showOpacity, defaultColor, colorPickerOptions,
|
||||
$container, $alphaSlider, alphaVal, sliderOptions;
|
||||
|
||||
// Store the control instance.
|
||||
$control = $( this );
|
||||
|
||||
// Get a clean starting value for the option.
|
||||
startingColor = $control.val().replace( /\s+/g, '' );
|
||||
|
||||
// Get some data off the control.
|
||||
showOpacity = $control.attr( 'data-show-opacity' );
|
||||
defaultColor = $control.attr( 'data-default-color' );
|
||||
|
||||
// Set up the options that we'll pass to wpColorPicker().
|
||||
colorPickerOptions = {
|
||||
change: function( event, ui ) {
|
||||
var key, value, alpha, $transparency;
|
||||
|
||||
key = $control.attr( 'data-customize-setting-link' );
|
||||
value = $control.wpColorPicker( 'color' );
|
||||
|
||||
// Set the opacity value on the slider handle when the default color button is clicked.
|
||||
if ( defaultColor == value ) {
|
||||
alpha = acp_get_alpha_value_from_color( value );
|
||||
$alphaSlider.find( '.ui-slider-handle' ).text( alpha );
|
||||
}
|
||||
|
||||
// Send ajax request to wp.customize to trigger the Save action.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( value );
|
||||
});
|
||||
|
||||
$transparency = $container.find( '.transparency' );
|
||||
|
||||
// Always show the background color of the opacity slider at 100% opacity.
|
||||
$transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
|
||||
},
|
||||
palettes: oceanwpLocalize.colorPalettes // Use the passed in palette.
|
||||
};
|
||||
|
||||
// Create the colorpicker.
|
||||
$control.wpColorPicker( colorPickerOptions );
|
||||
|
||||
$container = $control.parents( '.wp-picker-container:first' );
|
||||
|
||||
// Insert our opacity slider.
|
||||
$( '<div class="alpha-color-picker-container">' +
|
||||
'<div class="min-click-zone click-zone"></div>' +
|
||||
'<div class="max-click-zone click-zone"></div>' +
|
||||
'<div class="alpha-slider"></div>' +
|
||||
'<div class="transparency"></div>' +
|
||||
'</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
|
||||
|
||||
$alphaSlider = $container.find( '.alpha-slider' );
|
||||
|
||||
// If starting value is in format RGBa, grab the alpha channel.
|
||||
alphaVal = acp_get_alpha_value_from_color( startingColor );
|
||||
|
||||
// Set up jQuery UI slider() options.
|
||||
sliderOptions = {
|
||||
create: function( event, ui ) {
|
||||
var value = $( this ).slider( 'value' );
|
||||
|
||||
// Set up initial values.
|
||||
$( this ).find( '.ui-slider-handle' ).text( value );
|
||||
$( this ).siblings( '.transparency ').css( 'background-color', startingColor );
|
||||
},
|
||||
value: alphaVal,
|
||||
range: 'max',
|
||||
step: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
animate: 300
|
||||
};
|
||||
|
||||
// Initialize jQuery UI slider with our options.
|
||||
$alphaSlider.slider( sliderOptions );
|
||||
|
||||
// Maybe show the opacity on the handle.
|
||||
if ( 'true' == showOpacity ) {
|
||||
$alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
|
||||
}
|
||||
|
||||
// Bind event handlers for the click zones.
|
||||
$container.find( '.min-click-zone' ).on( 'click', function() {
|
||||
acp_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true );
|
||||
});
|
||||
$container.find( '.max-click-zone' ).on( 'click', function() {
|
||||
acp_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on a palette color.
|
||||
$container.find( '.iris-palette' ).on( 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var color, alpha;
|
||||
|
||||
color = $( this ).css( 'background-color' );
|
||||
alpha = acp_get_alpha_value_from_color( color );
|
||||
|
||||
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
|
||||
// Sometimes Iris doesn't set a perfect background-color on the palette,
|
||||
// for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
|
||||
// To compensante for this we round the opacity value on RGBa colors here
|
||||
// and save it a second time to the color picker object.
|
||||
if ( alpha != 100 ) {
|
||||
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
|
||||
}
|
||||
|
||||
$control.wpColorPicker( 'color', color );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Clear' button.
|
||||
$container.find( '.button.wp-picker-clear' ).on( 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var key = $control.attr( 'data-customize-setting-link' );
|
||||
|
||||
// The #fff color is delibrate here. This sets the color picker to white instead of the
|
||||
// defult black, which puts the color picker in a better place to visually represent empty.
|
||||
$control.wpColorPicker( 'color', '#ffffff' );
|
||||
|
||||
// Set the actual option value to empty string.
|
||||
wp.customize( key, function( obj ) {
|
||||
obj.set( '' );
|
||||
});
|
||||
|
||||
acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for clicking on the 'Default' button.
|
||||
$container.find( '.button.wp-picker-default' ).on( 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var alpha = acp_get_alpha_value_from_color( defaultColor );
|
||||
|
||||
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Bind event handler for typing or pasting into the input.
|
||||
$control.on( 'input', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var value = $( this ).val();
|
||||
var alpha = acp_get_alpha_value_from_color( value );
|
||||
|
||||
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
||||
});
|
||||
|
||||
// Update all the things when the slider is interacted with.
|
||||
$alphaSlider.slider().on( 'slide', function( event, ui ) {
|
||||
var alpha = parseFloat( ui.value ) / 100.0;
|
||||
|
||||
acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false );
|
||||
|
||||
// Change value shown on slider handle.
|
||||
$( this ).find( '.ui-slider-handle' ).text( ui.value );
|
||||
});
|
||||
|
||||
// Fix Safari issue on input click
|
||||
$( '.iris-picker, .alpha-color-control' ).on( 'click', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
+208
@@ -0,0 +1,208 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-dimensions.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttonset control
|
||||
*/
|
||||
class OceanWP_Customizer_Dimensions_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-dimensions';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-dimensions', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/dimensions.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_localize_script( 'oceanwp-dimensions', 'oceanwpL10n', $this->l10n() );
|
||||
wp_enqueue_style( 'oceanwp-dimensions', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/dimensions.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the control wrapper and calls $this->render_content() for the internals.
|
||||
*
|
||||
* @see WP_Customize_Control::render()
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control has-switchers customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
<?php $this->render_content(); ?>
|
||||
</li><?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['id'] = $this->id;
|
||||
$this->json['l10n'] = $this->l10n();
|
||||
$this->json['title'] = esc_html__( 'Link values together', 'oceanwp' );
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
$this->json['desktop'] = array();
|
||||
$this->json['tablet'] = array();
|
||||
$this->json['mobile'] = array();
|
||||
|
||||
foreach ( $this->settings as $setting_key => $setting ) {
|
||||
|
||||
list( $_key ) = explode( '_', $setting_key );
|
||||
|
||||
$this->json[ $_key ][ $setting_key ] = array(
|
||||
'id' => $setting->id,
|
||||
'link' => $this->get_link( $setting_key ),
|
||||
'value' => $this->value( $setting_key ),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">
|
||||
<span>{{{ data.label }}}</span>
|
||||
|
||||
<ul class="responsive-switchers">
|
||||
<li class="desktop">
|
||||
<button type="button" class="preview-desktop active" data-device="desktop">
|
||||
<i class="dashicons dashicons-desktop"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="tablet">
|
||||
<button type="button" class="preview-tablet" data-device="tablet">
|
||||
<i class="dashicons dashicons-tablet"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="mobile">
|
||||
<button type="button" class="preview-mobile" data-device="mobile">
|
||||
<i class="dashicons dashicons-smartphone"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<ul class="desktop control-wrap active">
|
||||
<# _.each( data.desktop, function( args, key ) { #>
|
||||
<li class="dimension-wrap {{ key }}">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="dimension-{{ key }}" {{{ args.link }}} value="{{{ args.value }}}" />
|
||||
<span class="dimension-label">{{ data.l10n[ key ] }}</span>
|
||||
</li>
|
||||
<# } ); #>
|
||||
|
||||
<li class="dimension-wrap">
|
||||
<div class="link-dimensions">
|
||||
<span class="dashicons dashicons-admin-links oceanwp-linked" data-element="{{ data.id }}" title="{{ data.title }}"></span>
|
||||
<span class="dashicons dashicons-editor-unlink oceanwp-unlinked" data-element="{{ data.id }}" title="{{ data.title }}"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tablet control-wrap">
|
||||
<# _.each( data.tablet, function( args, key ) { #>
|
||||
<li class="dimension-wrap {{ key }}">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="dimension-{{ key }}" {{{ args.link }}} value="{{{ args.value }}}" />
|
||||
<span class="dimension-label">{{ data.l10n[ key ] }}</span>
|
||||
</li>
|
||||
<# } ); #>
|
||||
|
||||
<li class="dimension-wrap">
|
||||
<div class="link-dimensions">
|
||||
<span class="dashicons dashicons-admin-links oceanwp-linked" data-element="{{ data.id }}_tablet" title="{{ data.title }}"></span>
|
||||
<span class="dashicons dashicons-editor-unlink oceanwp-unlinked" data-element="{{ data.id }}_tablet" title="{{ data.title }}"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="mobile control-wrap">
|
||||
<# _.each( data.mobile, function( args, key ) { #>
|
||||
<li class="dimension-wrap {{ key }}">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="dimension-{{ key }}" {{{ args.link }}} value="{{{ args.value }}}" />
|
||||
<span class="dimension-label">{{ data.l10n[ key ] }}</span>
|
||||
</li>
|
||||
<# } ); #>
|
||||
|
||||
<li class="dimension-wrap">
|
||||
<div class="link-dimensions">
|
||||
<span class="dashicons dashicons-admin-links oceanwp-linked" data-element="{{ data.id }}_mobile" title="{{ data.title }}"></span>
|
||||
<span class="dashicons dashicons-editor-unlink oceanwp-unlinked" data-element="{{ data.id }}_mobile" title="{{ data.title }}"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of translation strings.
|
||||
*
|
||||
* @access protected
|
||||
* @param string|false $id The string-ID.
|
||||
* @return string
|
||||
*/
|
||||
protected function l10n( $id = false ) {
|
||||
$translation_strings = array(
|
||||
'desktop_top' => esc_attr__( 'Top', 'oceanwp' ),
|
||||
'desktop_right' => esc_attr__( 'Right', 'oceanwp' ),
|
||||
'desktop_bottom' => esc_attr__( 'Bottom', 'oceanwp' ),
|
||||
'desktop_left' => esc_attr__( 'Left', 'oceanwp' ),
|
||||
'tablet_top' => esc_attr__( 'Top', 'oceanwp' ),
|
||||
'tablet_right' => esc_attr__( 'Right', 'oceanwp' ),
|
||||
'tablet_bottom' => esc_attr__( 'Bottom', 'oceanwp' ),
|
||||
'tablet_left' => esc_attr__( 'Left', 'oceanwp' ),
|
||||
'mobile_top' => esc_attr__( 'Top', 'oceanwp' ),
|
||||
'mobile_right' => esc_attr__( 'Right', 'oceanwp' ),
|
||||
'mobile_bottom' => esc_attr__( 'Bottom', 'oceanwp' ),
|
||||
'mobile_left' => esc_attr__( 'Left', 'oceanwp' ),
|
||||
);
|
||||
if ( false === $id ) {
|
||||
return $translation_strings;
|
||||
}
|
||||
return $translation_strings[ $id ];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.customize-control-oceanwp-dimensions > ul { display: inline-block; width: 100%; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap { float: left; width: 20%; margin: 0; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap input,
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap button { display: block; font-size: 12px; padding: 4px 0; width: 100%; height: 28px; border: 1px solid; border-color: #a4afb7; border-left-width: 0; border-radius: 0; text-align: center; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap:first-child input { border-left-width: 1px; border-radius: 3px 0 0 3px; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .dimension-label { display: block; color: #949698; font-size: 10px; padding-top: 5px; font-style: normal; text-transform: uppercase; text-align: center; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap input:focus + .dimension-label { color: #42474a; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions { background-color: #fff; border: 1px solid #a4afb7; border-left-width: 0; padding: 0; outline: none; border-radius: 0 3px 3px 0; cursor: pointer; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions span { display: block; width: 100%; height: 26px; line-height: 26px; font-size: 16px; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions .oceanwp-linked { background-color: #a4afb7; color: #fff; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions.unlinked .oceanwp-unlinked { display: none; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions.unlinked .oceanwp-linked { display: block; }
|
||||
.customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions .oceanwp-linked { display: none; }
|
||||
@@ -0,0 +1,103 @@
|
||||
wp.customize.controlConstructor['oceanwp-dimensions'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-desktop_top', function() {
|
||||
control.settings['desktop_top'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-desktop_right', function() {
|
||||
control.settings['desktop_right'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-desktop_bottom', function() {
|
||||
control.settings['desktop_bottom'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-desktop_left', function() {
|
||||
control.settings['desktop_left'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-tablet_top', function() {
|
||||
control.settings['tablet_top'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-tablet_right', function() {
|
||||
control.settings['tablet_right'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-tablet_bottom', function() {
|
||||
control.settings['tablet_bottom'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-tablet_left', function() {
|
||||
control.settings['tablet_left'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-mobile_top', function() {
|
||||
control.settings['mobile_top'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-mobile_right', function() {
|
||||
control.settings['mobile_right'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-mobile_bottom', function() {
|
||||
control.settings['mobile_bottom'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.dimension-mobile_left', function() {
|
||||
control.settings['mobile_left'].set( jQuery( this ).val() );
|
||||
} );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
jQuery( document ).ready( function($) {
|
||||
|
||||
// Linked button
|
||||
$( '.oceanwp-linked' ).on( 'click', function() {
|
||||
|
||||
// Set up variables
|
||||
var $this = $( this );
|
||||
|
||||
// Remove linked class
|
||||
$this.parent().parent( '.dimension-wrap' ).prevAll().slice(0,4).find( 'input' ).removeClass( 'linked' ).attr( 'data-element', '' );
|
||||
|
||||
// Remove class
|
||||
$this.parent( '.link-dimensions' ).removeClass( 'unlinked' );
|
||||
|
||||
} );
|
||||
|
||||
// Unlinked button
|
||||
$( '.oceanwp-unlinked' ).on( 'click', function() {
|
||||
|
||||
// Set up variables
|
||||
var $this = $( this ),
|
||||
$element = $this.data( 'element' );
|
||||
|
||||
// Add linked class
|
||||
$this.parent().parent( '.dimension-wrap' ).prevAll().slice(0,4).find( 'input' ).addClass( 'linked' ).attr( 'data-element', $element );
|
||||
|
||||
// Add class
|
||||
$this.parent( '.link-dimensions' ).addClass( 'unlinked' );
|
||||
|
||||
} );
|
||||
|
||||
// Values linked inputs
|
||||
$( '.dimension-wrap' ).on( 'input', '.linked', function() {
|
||||
|
||||
var $data = $( this ).attr( 'data-element' ),
|
||||
$val = $( this ).val();
|
||||
|
||||
$( '.linked[ data-element="' + $data + '" ]' ).each( function( key, value ) {
|
||||
$( this ).val( $val ).change();
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-dropdown-pages.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown pages control
|
||||
*/
|
||||
class OceanWP_Customizer_Dropdown_Pages extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-dropdown-pages';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-dropdown-pages', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/dropdown-pages.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$dropdown = wp_dropdown_pages(
|
||||
array(
|
||||
'name' => '_customize-dropdown-pages-' . esc_attr( $this->id ),
|
||||
'echo' => 0,
|
||||
'show_option_none' => '— '. esc_html__( 'Select', 'oceanwp' ) .' —',
|
||||
'option_none_value' => '',
|
||||
'selected' => esc_attr( $this->value() ),
|
||||
)
|
||||
);
|
||||
|
||||
// Hackily add in the data link parameter.
|
||||
$dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
|
||||
|
||||
$this->json['dropdown'] = $dropdown;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div class="customize-control-content">{{{ data.dropdown }}}</div>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
wp.customize.controlConstructor['oceanwp-dropdown-pages'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
control.container.on( 'change', 'select', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
/*!
|
||||
* Project : OceanWP WordPress Theme
|
||||
* Purpose : Customizer Tweaks
|
||||
* Author : Nick
|
||||
*/
|
||||
|
||||
/* Margin checkbox */
|
||||
#customize-control-ocean_top_bar,
|
||||
#customize-control-ocean_top_bar_full_width,
|
||||
#customize-control-ocean_top_bar_social,
|
||||
#customize-control-ocean_has_header_border_bottom,
|
||||
#customize-control-ocean_medium_header_hidden_menu,
|
||||
#customize-control-ocean_medium_header_stick_menu,
|
||||
#customize-control-ocean_vertical_header_shadow,
|
||||
#customize-control-ocean_vertical_header_closed,
|
||||
#customize-control-ocean_menu_arrow_side,
|
||||
#customize-control-ocean_menu_dropdown_top_border,
|
||||
#customize-control-ocean_menu_social,
|
||||
#customize-control-ocean_mobile_menu_close_btn,
|
||||
#customize-control-ocean_footer_bottom,
|
||||
#customize-control-ocean_footer_widgets,
|
||||
#customize-control-ocean_scroll_top,
|
||||
#customize-control-ocean_woo_menu_icon_hide_if_empty,
|
||||
#customize-control-ocean_woo_shop_result_count,
|
||||
#customize-control-ocean_woo_product_ajax_add_to_cart,
|
||||
#customize-control-ocean_woo_add_mobile_mini_cart,
|
||||
#customize-control-ocean_woo_multi_step_checkout,
|
||||
#customize-control-osh_has_sticky_mobile,
|
||||
#customize-control-osh_has_full_width_header,
|
||||
#customize-control-osh_no_shadow,
|
||||
#customize-control-osh_sticky_choose .customize-control-title,
|
||||
#customize-control-osp_side_panel_displace,
|
||||
#customize-control-osp_side_panel_overlay,
|
||||
#customize-control-ocean_breadcrumb_show_title { margin-top: 0; }
|
||||
|
||||
/* General tweaks */
|
||||
.wp-full-overlay-sidebar-content::-webkit-scrollbar, .accordion-section-content::-webkit-scrollbar { width: 5px !important; }
|
||||
.wp-full-overlay-sidebar-content::-webkit-scrollbar-track, .accordion-section-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.3) !important; width: 20px !important; }
|
||||
.wp-full-overlay-sidebar-content::-webkit-scrollbar-thumb, .accordion-section-content::-webkit-scrollbar-thumb { -webkit-border-radius: 0 !important; border-radius: 0 !important; background-color: #d8d8d8 !important; }
|
||||
.wp-full-overlay-sidebar-content::-webkit-thumb:window-inactive, .accordion-section-content::-webkit-scrollbar-thumb:window-inactive { background-color: #fff !important; }
|
||||
.clr:after { content: ''; display: block; visibility: hidden; clear: both; zoom: 1; height: 0; }
|
||||
.customize-control { margin-bottom: 0; }
|
||||
.customize-control-title { margin-top: 15px; }
|
||||
.customize-control-select select { min-width: 100% }
|
||||
.customize-control .thumbnail-image img { width: auto; }
|
||||
|
||||
/* Social widgets */
|
||||
.oceanwp-social-widget-services-list { padding-top: 10px; }
|
||||
.oceanwp-social-widget-services-list li { background-color: #fafafa; padding: 10px; border: 1px solid #e5e5e5; margin-bottom: 10px; }
|
||||
.oceanwp-social-widget-services-list li p { margin: 0 }
|
||||
.oceanwp-social-widget-services-list li label { margin-bottom: 3px; display: block; color: #222; }
|
||||
.oceanwp-social-widget-services-list li label span.fa { margin-right: 10px }
|
||||
|
||||
/* Inputs */
|
||||
.customize-control input[type=tel], .customize-control input[type=url], .customize-control input[type=text],
|
||||
.customize-control input[type=password], .customize-control input[type=email], .customize-control input[type=number],
|
||||
.customize-control input[type=search] { width: 100%; height: 33px; }
|
||||
.wp-picker-container input[type=text].wp-color-picker { height: auto; padding: 3px 5px; }
|
||||
input[type=number] { height: 33px; }
|
||||
input[type=text], input[type=search], input[type=radio], input[type=tel], input[type=time], input[type=url],
|
||||
input[type=week], input[type=password], input[type=checkbox], input[type=color], input[type=date], input[type=datetime],
|
||||
input[type=datetime-local], input[type=email], input[type=month], input[type=number], select, textarea, input[type=text]:focus,
|
||||
input[type=search]:focus, input[type=radio]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus,
|
||||
input[type=week]:focus, input[type=password]:focus, input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus,
|
||||
input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus,
|
||||
input[type=number]:focus, select:focus, textarea:focus { -webkit-box-shadow: none; box-shadow: none; }
|
||||
input, select { margin: 0; padding: 5px 10px; }
|
||||
.customize-control select { height: 33px; line-height: 1; }
|
||||
|
||||
/* Checkbox */
|
||||
.customize-control.customize-control-checkbox .customize-inside-control-row { margin-left: 0; padding-top: 0; padding-bottom: 0; }
|
||||
.customize-control-checkbox { position: relative; border: 1px solid #ccc; font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 8px 10px; border-radius: 2px; margin-top: 20px; margin-bottom: -1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
.customize-control-checkbox label { padding: 0; margin: 0; }
|
||||
.customize-control-checkbox input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 6px 0 0; vertical-align: top; }
|
||||
.customize-control-ocean-multi-check input[type="checkbox"] { position: relative; margin: 0 5px 4px 0; border-color: #c8c8c8; width: 18px; height: 18px; cursor: pointer; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none !important; box-shadow: none !important; }
|
||||
.customize-control-checkbox input[type="checkbox"]:before,
|
||||
.customize-control-ocean-multi-check input[type="checkbox"]:before { content: ''; position: absolute; left: 0; z-index: 1; width: 100%; height: 100%; margin: -4px 0 0 -3px; border: none; }
|
||||
.customize-control-checkbox input[type="checkbox"]:checked:before,
|
||||
.customize-control-ocean-multi-check input[type="checkbox"]:checked:before { content: '\f147'; font-family: dashicons; font-size: 20px; line-height: 1; left: 0; top: 2px; }
|
||||
.customize-control-checkbox input[type=checkbox]:checked:before { font-size: 22px; }
|
||||
|
||||
/* Select */
|
||||
.select2-container { z-index: 999999; }
|
||||
|
||||
/* Responsive buttons switchers */
|
||||
.customize-control.has-switchers .customize-control-title { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-top: 20px; margin-bottom: 10px; }
|
||||
.customize-control.has-switchers .customize-control-title span { line-height: 20px; }
|
||||
|
||||
.customize-control .responsive-switchers { margin-left: 5px; width: auto; }
|
||||
.customize-control .responsive-switchers li:not(.desktop) { display: none; }
|
||||
.customize-control.responsive-switchers-open .responsive-switchers li { display: block; }
|
||||
.customize-control .responsive-switchers li { float: left; margin: 0; }
|
||||
.customize-control .responsive-switchers li button { display: inline-block; height: 20px; width: 20px; background-color: #a4afb7; cursor: pointer; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: none; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer; }
|
||||
.customize-control .responsive-switchers li button:hover { background-color: #c2cbd2; }
|
||||
.customize-control .responsive-switchers li:not(.desktop) button.active { background-color: #13aff0; }
|
||||
.customize-control .responsive-switchers li button i { width: auto; height: auto; font-size: inherit; line-height: 18px; }
|
||||
|
||||
.customize-control.has-switchers > .control-wrap:not(.active) { display: none; width: 100%; }
|
||||
|
||||
/* Height Custom CSS textarea */
|
||||
.customize-control-code_editor .CodeMirror { height: calc(100vh - 185px); }
|
||||
|
||||
/* RTL */
|
||||
body.rtl .customize-control-checkbox input[type=checkbox] { margin: 0 0 0 6px; }
|
||||
body.rtl .customize-control-checkbox input[type="checkbox"]:checked:before,
|
||||
body.rtl .customize-control-ocean-multi-check input[type="checkbox"]:checked:before { right: 0; left: auto; }
|
||||
body.rtl .customize-control .responsive-switchers,
|
||||
body.rtl .customize-control .responsive-switchers li button { margin-right: 5px; margin-left: 0; }
|
||||
body.rtl .customize-control .responsive-switchers li { float: right; }
|
||||
|
||||
/* Responsive */
|
||||
@media screen and ( max-width: 768px ) {
|
||||
body .customize-control .responsive-switchers { display: none; }
|
||||
body .customize-control.has-switchers > .control-wrap:not(.active) { display: inline-block; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||||
body .customize-control.has-switchers > .control-wrap { display: inline-block; }
|
||||
body .customize-control.has-switchers > .control-wrap:not(.tablet) { display: none; }
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 480px ) {
|
||||
body .customize-control.has-switchers > .control-wrap { display: inline-block; }
|
||||
body .customize-control.has-switchers > .control-wrap:not(.mobile) { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
jQuery( document ).ready( function($) {
|
||||
|
||||
// Responsive switchers
|
||||
$( '.customize-control .responsive-switchers button' ).on( 'click', function( event ) {
|
||||
|
||||
// Set up variables
|
||||
var $this = $( this ),
|
||||
$devices = $( '.responsive-switchers' ),
|
||||
$device = $( event.currentTarget ).data( 'device' ),
|
||||
$control = $( '.customize-control.has-switchers' ),
|
||||
$body = $( '.wp-full-overlay' ),
|
||||
$footer_devices = $( '.wp-full-overlay-footer .devices' );
|
||||
|
||||
// Button class
|
||||
$devices.find( 'button' ).removeClass( 'active' );
|
||||
$devices.find( 'button.preview-' + $device ).addClass( 'active' );
|
||||
|
||||
// Control class
|
||||
$control.find( '.control-wrap' ).removeClass( 'active' );
|
||||
$control.find( '.control-wrap.' + $device ).addClass( 'active' );
|
||||
$control.removeClass( 'control-device-desktop control-device-tablet control-device-mobile' ).addClass( 'control-device-' + $device );
|
||||
|
||||
// Wrapper class
|
||||
$body.removeClass( 'preview-desktop preview-tablet preview-mobile' ).addClass( 'preview-' + $device );
|
||||
|
||||
// Panel footer buttons
|
||||
$footer_devices.find( 'button' ).removeClass( 'active' ).attr( 'aria-pressed', false );
|
||||
$footer_devices.find( 'button.preview-' + $device ).addClass( 'active' ).attr( 'aria-pressed', true );
|
||||
|
||||
// Open switchers
|
||||
if ( $this.hasClass( 'preview-desktop' ) ) {
|
||||
$control.toggleClass( 'responsive-switchers-open' );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// If panel footer buttons clicked
|
||||
$( '.wp-full-overlay-footer .devices button' ).on( 'click', function( event ) {
|
||||
|
||||
// Set up variables
|
||||
var $this = $( this ),
|
||||
$devices = $( '.customize-control.has-switchers .responsive-switchers' ),
|
||||
$device = $( event.currentTarget ).data( 'device' ),
|
||||
$control = $( '.customize-control.has-switchers' );
|
||||
|
||||
// Button class
|
||||
$devices.find( 'button' ).removeClass( 'active' );
|
||||
$devices.find( 'button.preview-' + $device ).addClass( 'active' );
|
||||
|
||||
// Control class
|
||||
$control.find( '.control-wrap' ).removeClass( 'active' );
|
||||
$control.find( '.control-wrap.' + $device ).addClass( 'active' );
|
||||
$control.removeClass( 'control-device-desktop control-device-tablet control-device-mobile' ).addClass( 'control-device-' + $device );
|
||||
|
||||
// Open switchers
|
||||
if ( ! $this.hasClass( 'preview-desktop' ) ) {
|
||||
$control.addClass( 'responsive-switchers-open' );
|
||||
} else {
|
||||
$control.removeClass( 'responsive-switchers-open' );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
@@ -0,0 +1,53 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-heading.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Range control
|
||||
*/
|
||||
class OceanWP_Customizer_Heading_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-heading';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_style( 'oceanwp-heading', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/heading.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<h4 class="oceanwp-customizer-heading">{{{ data.label }}}</h4>
|
||||
<div class="description">{{{ data.description }}}</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.customize-control-oceanwp-heading { margin-top: 30px; }
|
||||
.oceanwp-customizer-heading { display: block; margin: 0 -12px; padding: 13px 12px; background-color: #fff; color: #555; border: 1px solid #ddd; border-left: 0; border-right: 0; font-size: 11px; font-weight: 600; letter-spacing: 2px; line-height: 1; text-transform: uppercase; }
|
||||
.customize-control-oceanwp-heading .description { margin-top: 10px; }
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-icon.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Range control
|
||||
*/
|
||||
class OceanWP_Customizer_Icon_Select_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-icon';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-icon-select', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/icon-select.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-icon-select', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/icon-select.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<label class="customizer-text">
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
</label>
|
||||
<div id="input_{{ data.id }}" class="icon-select clr">
|
||||
<# for ( key in data.choices ) { #>
|
||||
<label>
|
||||
<input class="icon-select-input" type="radio" value="{{ key }}" name="_customize-icon-select-{{ data.id }}" {{{ data.link }}}<# if ( data.value === key ) { #> checked<# } #> />
|
||||
<span class="icon-select-label"><i class="{{ key }}"></i></span>
|
||||
</label>
|
||||
<# } #>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.customize-control-oceanwp-icon .icon-select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: 1px solid #ddd; max-height: 216px; }
|
||||
.customize-control-oceanwp-icon .icon-select label { display: -webkit-box; display: -ms-flexbox; display: flex; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
.customize-control-oceanwp-icon .icon-select .icon-select-input { display: none; }
|
||||
.customize-control-oceanwp-icon .icon-select .icon-select-label { display: block; width: 100%; background-color: #f5f5f5; color: #555; border: 1px solid #ddd; margin: 0; font-size: 16px; height: 53px; line-height: 53px; text-align: center; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }
|
||||
.customize-control-oceanwp-icon .icon-select .icon-select-label:hover,
|
||||
.customize-control-oceanwp-icon .icon-select .icon-select-input:checked + .icon-select-label { background-color: #3498DB; color: #fff; border-color: #3498DB; }
|
||||
@@ -0,0 +1,16 @@
|
||||
wp.customize.controlConstructor['oceanwp-icon'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Change the value
|
||||
this.container.on( 'change', 'input', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-multi-check.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Multi check control
|
||||
*/
|
||||
class OceanWP_Customize_Multicheck_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-multi-check';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-multicheck', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/multicheck.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( ! data.choices ) { return; } #>
|
||||
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{ data.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<ul>
|
||||
<# for ( key in data.choices ) { #>
|
||||
<li>
|
||||
<label>
|
||||
<input {{{ data.inputAttrs }}} type="checkbox" value="{{ key }}"<# if ( _.contains( data.value, key ) ) { #> checked<# } #> />
|
||||
{{ data.choices[ key ] }}
|
||||
</label>
|
||||
</li>
|
||||
<# } #>
|
||||
</ul>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
wp.customize.controlConstructor['oceanwp-multi-check'] = wp.customize.Control.extend({
|
||||
|
||||
// When we're finished loading continue processing.
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Save the value
|
||||
control.container.on( 'change', 'input', function() {
|
||||
var value = [],
|
||||
i = 0;
|
||||
|
||||
// Build the value as an object using the sub-values from individual checkboxes.
|
||||
jQuery.each( control.params.choices, function( key, subValue ) {
|
||||
if ( control.container.find( 'input[value="' + key + '"]' ).is( ':checked' ) ) {
|
||||
value[ i ] = key;
|
||||
i++;
|
||||
}
|
||||
});
|
||||
|
||||
// Update the value in the customizer.
|
||||
control.setting.set( value );
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-multiple-select.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Multi select control
|
||||
*/
|
||||
class OceanWP_Customize_Multiple_Select_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-multiple-select';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.js', array( 'jquery' ), false, true );
|
||||
wp_enqueue_style( 'select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.css', null );
|
||||
wp_enqueue_script( 'oceanwp-multiple-select', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/multiple-select.min.js', array( 'jquery', 'customize-base', 'select2' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-multiple-select', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/multiple-select.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = (array) $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( ! data.choices ) { return; } #>
|
||||
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{ data.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<select {{{ data.inputAttrs }}} multiple="multiple" {{{ data.link }}}>
|
||||
|
||||
<# _.each( data.choices, function( label, choice ) { #>
|
||||
|
||||
<option value="{{ choice }}" <# if ( -1 !== data.value.indexOf( choice ) ) { #> selected="selected" <# } #>>{{ label }}</option>
|
||||
|
||||
<# } ) #>
|
||||
|
||||
</select>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple { border: 1px solid rgba(0,0,0,.05); padding: 1px 0 0; border-radius: 0; line-height: 1; }
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: rgba(0,0,0,0.08); }
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; }
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #f1f1f1; color: #666; border: rgba(0,0,0,0.06); line-height: 1.5; padding: 0 6px; border-radius: 0; margin: 7px 0 0 6px; }
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-search { line-height: 1.5; margin: 0 0 0 6px; }
|
||||
.customize-control-oceanwp-multiple-select .select2-container--default .select2-search--inline .select2-search__field { margin: 0; }
|
||||
|
||||
/* RTL */
|
||||
body.rtl .customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 5px 6px 0 0; }
|
||||
body.rtl .customize-control-oceanwp-multiple-select .select2-container--default .select2-selection--multiple .select2-search { margin: 0 6px 0 0; }
|
||||
@@ -0,0 +1,29 @@
|
||||
wp.customize.controlConstructor['oceanwp-multiple-select'] = wp.customize.Control.extend({
|
||||
|
||||
// When we're finished loading continue processing.
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
element = this.container.find( 'select' ),
|
||||
selectValue,
|
||||
select2Options = {
|
||||
escapeMarkup: function( markup ) {
|
||||
return markup;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery( element ).select2( select2Options ).on( 'change', function() {
|
||||
selectValue = jQuery( this ).val();
|
||||
control.setting.set( selectValue );
|
||||
if ( null === selectValue ) {
|
||||
control.setting.set( '' );
|
||||
} else {
|
||||
control.setting.set( selectValue );
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-radio-image.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Radio image control
|
||||
*/
|
||||
class OceanWP_Customizer_Radio_Image_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-radio-image';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-radio-image', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/radio-image.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_localize_script( 'oceanwp-radio-image', 'oceanwpL10n', $this->l10n() );
|
||||
wp_enqueue_style( 'oceanwp-radio-image', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/radio-image.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
$this->json['l10n'] = $this->l10n();
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div id="input_{{ data.id }}" class="image">
|
||||
<# for ( key in data.choices ) { #>
|
||||
<input {{{ data.inputAttrs }}} class="image-select" type="radio" value="{{ key }}" name="_customize-radio-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value === key ) { #> checked="checked"<# } #>>
|
||||
<label for="{{ data.id }}{{ key }}" title="{{ data.l10n[ key ] }}">
|
||||
<img src="{{ data.choices[ key ] }}">
|
||||
<span class="image-clickable"></span>
|
||||
<span class="radio-label">{{ data.l10n[ key ] }}</span>
|
||||
</label>
|
||||
</input>
|
||||
<# } #>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of translation strings.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param string|false $id The string-ID.
|
||||
* @return string
|
||||
*/
|
||||
protected function l10n( $id = false ) {
|
||||
$translation_strings = array(
|
||||
'right-sidebar' => esc_attr__( 'Right Sidebar', 'oceanwp' ),
|
||||
'left-sidebar' => esc_attr__( 'Left Sidebar', 'oceanwp' ),
|
||||
'full-width' => esc_attr__( 'Full Width', 'oceanwp' ),
|
||||
'full-screen' => esc_attr__( '100% Full Width', 'oceanwp' ),
|
||||
'both-sidebars' => esc_attr__( 'Both Sidebars', 'oceanwp' ),
|
||||
);
|
||||
if ( false === $id ) {
|
||||
return $translation_strings;
|
||||
}
|
||||
return $translation_strings[ $id ];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.customize-control-oceanwp-radio-image label { position: relative; display: inline-block; width: 30%; line-height: 1; margin-right: 3%; margin-bottom: 2%; }
|
||||
.customize-control-oceanwp-radio-image label:nth-child(3n) { margin-right: 0; }
|
||||
.customize-control-oceanwp-radio-image input { display: none; }
|
||||
.customize-control-oceanwp-radio-image label img { border: 2px solid transparent; }
|
||||
.customize-control-oceanwp-radio-image input:checked + label img { border-color: #3498DB; }
|
||||
.customize-control-oceanwp-radio-image input + label .image-clickable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }
|
||||
.customize-control-oceanwp-radio-image .radio-label { display: block; font-size: 9px; font-weight: 600; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; }
|
||||
@@ -0,0 +1,15 @@
|
||||
wp.customize.controlConstructor['oceanwp-radio-image'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Change the value
|
||||
this.container.on( 'click', 'input', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-range.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Range control
|
||||
*/
|
||||
class OceanWP_Customizer_Range_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-range';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-range', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/range.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-range', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/range.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div class="control-wrap">
|
||||
<input type="range" {{{ data.inputAttrs }}} value="{{ data.value }}" {{{ data.link }}} data-reset_value="{{ data.default }}" />
|
||||
<input type="number" {{{ data.inputAttrs }}} class="oceanwp-range-input" value="{{ data.value }}" />
|
||||
<span class="oceanwp-reset-slider"><span class="dashicons dashicons-image-rotate"></span></span>
|
||||
</div>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.customize-control-oceanwp-range .control-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
.customize-control-oceanwp-range input[type=range] { background-color: rgba(0, 0, 0, 0.1); height: 5px; width: 69%; padding: 0; cursor: pointer; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; -webkit-appearance: none; }
|
||||
.customize-control-oceanwp-range input[type="range"]:focus { box-shadow: none !important; outline: none !important; }
|
||||
.customize-control-oceanwp-range input[type="range"]:hover { background-color: rgba(0, 0, 0, 0.15); }
|
||||
.customize-control-oceanwp-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #2e86b9; width: 15px; height: 15px; border-radius: 15px; -webkit-border-radius: 15px; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-moz-range-track { border: inherit; background-color: transparent; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-ms-track { border: inherit; color: transparent; background-color: transparent; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-ms-fill-lower,
|
||||
.customize-control-oceanwp-range input[type="range"]::-ms-fill-upper { background-color: transparent; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-ms-tooltip { display: none; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border: none; border-radius: 15px; background-color: #2e86b9; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 15px; background-color: #2e86b9; }
|
||||
.customize-control-oceanwp-range input[type="range"]::-ms-thumb { width: 15px; height: 15px; border-radius: 15px; border: 0; background-color: #2e86b9; }
|
||||
.customize-control-oceanwp-range input.oceanwp-range-input { width: 21%; height: 28px; text-align: center; margin-left: 2%; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; -moz-appearance: textfield; }
|
||||
.customize-control-oceanwp-range input.oceanwp-range-input::-webkit-outer-spin-button,
|
||||
.customize-control-oceanwp-range input.oceanwp-range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
.customize-control-oceanwp-range span.oceanwp-reset-slider { display: inline-block; position: relative; width: 6%; margin-left: 2%; line-height: 1; color: rgba(0, 0, 0, 0.2); cursor: pointer; text-align: center; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }
|
||||
.customize-control-oceanwp-range span.oceanwp-reset-slider:hover { color: #fe5252; }
|
||||
.customize-control-oceanwp-range span.oceanwp-reset-slider span { width: 16px; height: 16px; font-size: 16px; line-height: 1; }
|
||||
@@ -0,0 +1,109 @@
|
||||
wp.customize.controlConstructor['oceanwp-range'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
range,
|
||||
range_input,
|
||||
value,
|
||||
this_input,
|
||||
input_default,
|
||||
changeAction,
|
||||
oceanwp_range_input_number_timeout;
|
||||
|
||||
// Update the text value
|
||||
jQuery( 'input[type=range]' ).on( 'mousedown', function() {
|
||||
|
||||
range = jQuery( this );
|
||||
range_input = range.parent().children( '.oceanwp-range-input' );
|
||||
value = range.attr( 'value' );
|
||||
|
||||
range_input.val( value );
|
||||
|
||||
range.mousemove( function() {
|
||||
value = range.attr( 'value' );
|
||||
range_input.val( value );
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
// Auto correct the number input
|
||||
function oceanwp_autocorrect_range_input_number( input_number, timeout ) {
|
||||
|
||||
var range_input = input_number,
|
||||
range = range_input.parent().find( 'input[type="range"]' ),
|
||||
value = parseFloat( range_input.val() ),
|
||||
reset = parseFloat( range.attr( 'data-reset_value' ) ),
|
||||
step = parseFloat( range_input.attr( 'step' ) ),
|
||||
min = parseFloat( range_input.attr( 'min') ),
|
||||
max = parseFloat( range_input.attr( 'max') );
|
||||
|
||||
clearTimeout( oceanwp_range_input_number_timeout );
|
||||
|
||||
oceanwp_range_input_number_timeout = setTimeout( function() {
|
||||
|
||||
if ( isNaN( value ) ) {
|
||||
range_input.val( reset );
|
||||
range.val( reset ).trigger( 'change' );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( step >= 1 && value % 1 !== 0 ) {
|
||||
value = Math.round( value );
|
||||
range_input.val( value );
|
||||
range.val( value );
|
||||
}
|
||||
|
||||
if ( value > max ) {
|
||||
range_input.val( max );
|
||||
range.val( max ).trigger( 'change' );
|
||||
}
|
||||
|
||||
if ( value < min ) {
|
||||
range_input.val( min );
|
||||
range.val( min ).trigger( 'change' );
|
||||
}
|
||||
|
||||
}, timeout );
|
||||
|
||||
range.val( value ).trigger( 'change' );
|
||||
|
||||
}
|
||||
|
||||
// Change the text value
|
||||
jQuery( 'input.oceanwp-range-input' ).on( 'change keyup', function() {
|
||||
|
||||
oceanwp_autocorrect_range_input_number( jQuery( this ), 1000);
|
||||
|
||||
} ).on( 'focusout', function() {
|
||||
|
||||
oceanwp_autocorrect_range_input_number( jQuery( this ), 0);
|
||||
|
||||
} );
|
||||
|
||||
// Handle the reset button
|
||||
jQuery( '.oceanwp-reset-slider' ).on('click', function() {
|
||||
|
||||
this_input = jQuery( this ).closest( 'label' ).find( 'input' );
|
||||
input_default = this_input.data( 'reset_value' );
|
||||
|
||||
this_input.val( input_default );
|
||||
this_input.change();
|
||||
|
||||
} );
|
||||
|
||||
if ( 'postMessage' === control.setting.transport ) {
|
||||
changeAction = 'mousemove change';
|
||||
} else {
|
||||
changeAction = 'change';
|
||||
}
|
||||
|
||||
// Change the value
|
||||
this.container.on( changeAction, 'input', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
/* General */
|
||||
body.rtl .customize-control-checkbox input[type=checkbox] { margin: 0 0 0 6px; }
|
||||
body.rtl .customize-control-checkbox input[type="checkbox"]:checked:before,
|
||||
body.rtl .customize-control-ocean-multi-check input[type="checkbox"]:checked:before { right: 0; left: auto; }
|
||||
body.rtl .customize-control .responsive-switchers,
|
||||
body.rtl .customize-control .responsive-switchers li button { margin-right: 5px; margin-left: 0; }
|
||||
body.rtl .customize-control .responsive-switchers li { float: right; }
|
||||
|
||||
/* Buttonset */
|
||||
body.rtl .customize-control-oceanwp-buttonset .buttonset .switch-label { float: right; border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 0; }
|
||||
body.rtl .customize-control-oceanwp-buttonset .buttonset .switch-label:last-child { border-left: none; }
|
||||
|
||||
/* Color */
|
||||
body.rtl .wp-core-ui .wp-picker-default, .wp-core-ui .wp-picker-clear { margin-right: 10%; margin-left: 0; }
|
||||
body.rtl .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { float: right; }
|
||||
body.rtl .wp-picker-input-wrap .button { margin-right: 0; float: left; }
|
||||
body.rtl .alpha-color-picker-container .ui-widget-content .ui-state-default { margin-right: -14px; margin-left: 0; }
|
||||
body.rtl .alpha-color-picker-container .click-zone { right: 10px; left: auto; }
|
||||
body.rtl .alpha-color-picker-container .max-click-zone { left: 10px; right: auto; }
|
||||
|
||||
/* Dimensions */
|
||||
body.rtl .customize-control-oceanwp-dimensions .dimension-wrap { float: right; }
|
||||
body.rtl .customize-control-oceanwp-dimensions .dimension-wrap input,
|
||||
body.rtl .customize-control-oceanwp-dimensions .dimension-wrap button { border-left-width: 1px; border-right-width: 0; }
|
||||
body.rtl .customize-control-oceanwp-dimensions .dimension-wrap:first-child input { border-right-width: 1px; border-radius: 3px 3px 0 0; }
|
||||
body.rtl .customize-control-oceanwp-dimensions .dimension-wrap .link-dimensions { border-left-width: 1px; border-right-width: 0; border-radius: 0 0 3px 3px; }
|
||||
|
||||
/* Icon Select */
|
||||
body.rtl .customize-control-oceanwp-icon .icon-select label { float: right; }
|
||||
|
||||
/* Radio Image */
|
||||
body.rtl .customize-control-oceanwp-radio-image label { margin-left: 3%; margin-right: 0; }
|
||||
body.rtl .customize-control-oceanwp-radio-image label:nth-child(3n) { margin-left: 0; }
|
||||
|
||||
/* Range */
|
||||
body.rtl .customize-control-oceanwp-range input.oceanwp-range-input { margin-right: 8px; margin-left: 0; }
|
||||
body.rtl .customize-control-oceanwp-range span.oceanwp-reset-slider { margin-right: 5px; margin-left: 0; }
|
||||
|
||||
/* Sortable */
|
||||
body.rtl .customize-control-oceanwp-sortable ul li .dashicons.dashicons-menu { float: left; }
|
||||
body.rtl .customize-control-oceanwp-sortable ul li .dashicons.visibility { margin-left: 10px; margin-right: 0; }
|
||||
@@ -0,0 +1,484 @@
|
||||
.select2-container {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
.select2-container .select2-selection--single {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 28px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
padding-right: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.select2-container .select2-selection--single .select2-selection__clear {
|
||||
position: relative; }
|
||||
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
||||
padding-right: 8px;
|
||||
padding-left: 20px; }
|
||||
.select2-container .select2-selection--multiple {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.select2-container .select2-selection--multiple .select2-selection__rendered {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.select2-container .select2-search--inline {
|
||||
float: left; }
|
||||
.select2-container .select2-search--inline .select2-search__field {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
padding: 0; }
|
||||
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
.select2-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
width: 100%;
|
||||
z-index: 1051; }
|
||||
|
||||
.select2-results {
|
||||
display: block; }
|
||||
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.select2-results__option[aria-selected] {
|
||||
cursor: pointer; }
|
||||
|
||||
.select2-container--open .select2-dropdown {
|
||||
left: 0; }
|
||||
|
||||
.select2-container--open .select2-dropdown--above {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.select2-container--open .select2-dropdown--below {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
padding: 4px; }
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; }
|
||||
.select2-search--dropdown.select2-search--hide {
|
||||
display: none; }
|
||||
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
filter: alpha(opacity=0); }
|
||||
|
||||
.select2-hidden-accessible {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important; }
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
||||
color: #999; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: #888 transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0 4px;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0; }
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||
float: left; }
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||
left: 1px;
|
||||
right: auto; }
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection--single {
|
||||
background-color: #eee;
|
||||
cursor: default; }
|
||||
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
|
||||
display: none; }
|
||||
|
||||
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px; }
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
width: 100%; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
|
||||
list-style: none; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
float: left; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||
color: #333; }
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
|
||||
float: right; }
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto; }
|
||||
|
||||
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto; }
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border: solid black 1px;
|
||||
outline: 0; }
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection--multiple {
|
||||
background-color: #eee;
|
||||
cursor: default; }
|
||||
|
||||
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
|
||||
display: none; }
|
||||
|
||||
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #aaa; }
|
||||
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: textfield; }
|
||||
|
||||
.select2-container--default .select2-results > .select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
|
||||
.select2-container--default .select2-results__option[role=group] {
|
||||
padding: 0; }
|
||||
|
||||
.select2-container--default .select2-results__option[aria-disabled=true] {
|
||||
color: #999; }
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true] {
|
||||
background-color: #ddd; }
|
||||
|
||||
.select2-container--default .select2-results__option .select2-results__option {
|
||||
padding-left: 1em; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
|
||||
padding-left: 0; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -1em;
|
||||
padding-left: 2em; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -2em;
|
||||
padding-left: 3em; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -3em;
|
||||
padding-left: 4em; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -4em;
|
||||
padding-left: 5em; }
|
||||
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||
margin-left: -5em;
|
||||
padding-left: 6em; }
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #5897fb;
|
||||
color: white; }
|
||||
|
||||
.select2-container--default .select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
|
||||
.select2-container--classic .select2-selection--single {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
|
||||
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
|
||||
.select2-container--classic .select2-selection--single:focus {
|
||||
border: 1px solid #5897fb; }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__rendered {
|
||||
color: #444;
|
||||
line-height: 28px; }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-right: 10px; }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
|
||||
color: #999; }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__arrow {
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
border-left: 1px solid #aaa;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: #888 transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0 4px;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0; }
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||
float: left; }
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||
border: none;
|
||||
border-right: 1px solid #aaa;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
left: 1px;
|
||||
right: auto; }
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--single {
|
||||
border: 1px solid #5897fb; }
|
||||
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
|
||||
background: transparent;
|
||||
border: none; }
|
||||
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px; }
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
|
||||
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
|
||||
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
|
||||
|
||||
.select2-container--classic .select2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text;
|
||||
outline: 0; }
|
||||
.select2-container--classic .select2-selection--multiple:focus {
|
||||
border: 1px solid #5897fb; }
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px; }
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
|
||||
display: none; }
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
|
||||
background-color: #e4e4e4;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px; }
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||
color: #555; }
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||
float: right; }
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto; }
|
||||
|
||||
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto; }
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-selection--multiple {
|
||||
border: 1px solid #5897fb; }
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.select2-container--classic .select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #aaa;
|
||||
outline: 0; }
|
||||
|
||||
.select2-container--classic .select2-search--inline .select2-search__field {
|
||||
outline: 0;
|
||||
box-shadow: none; }
|
||||
|
||||
.select2-container--classic .select2-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.select2-container--classic .select2-dropdown--above {
|
||||
border-bottom: none; }
|
||||
|
||||
.select2-container--classic .select2-dropdown--below {
|
||||
border-top: none; }
|
||||
|
||||
.select2-container--classic .select2-results > .select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
|
||||
.select2-container--classic .select2-results__option[role=group] {
|
||||
padding: 0; }
|
||||
|
||||
.select2-container--classic .select2-results__option[aria-disabled=true] {
|
||||
color: grey; }
|
||||
|
||||
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #3875d7;
|
||||
color: white; }
|
||||
|
||||
.select2-container--classic .select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
|
||||
.select2-container--classic.select2-container--open .select2-dropdown {
|
||||
border-color: #5897fb; }
|
||||
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 one or more lines are too long
@@ -0,0 +1,154 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-slider.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttonset control
|
||||
*/
|
||||
class OceanWP_Customizer_Slider_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-slider';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-slider', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/slider.min.js', array( 'jquery', 'customize-base', 'jquery-ui-slider' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-slider', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/slider.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the control wrapper and calls $this->render_content() for the internals.
|
||||
*
|
||||
* @see WP_Customize_Control::render()
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control has-switchers customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
<?php $this->render_content(); ?>
|
||||
</li><?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
$this->json['desktop'] = array();
|
||||
$this->json['tablet'] = array();
|
||||
$this->json['mobile'] = array();
|
||||
|
||||
foreach ( $this->settings as $setting_key => $setting ) {
|
||||
$this->json[ $setting_key ] = array(
|
||||
'id' => $setting->id,
|
||||
'default' => $setting->default,
|
||||
'link' => $this->get_link( $setting_key ),
|
||||
'value' => $this->value( $setting_key ),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">
|
||||
<span>{{{ data.label }}}</span>
|
||||
|
||||
<ul class="responsive-switchers">
|
||||
<li class="desktop">
|
||||
<button type="button" class="preview-desktop active" data-device="desktop">
|
||||
<i class="dashicons dashicons-desktop"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="tablet">
|
||||
<button type="button" class="preview-tablet" data-device="tablet">
|
||||
<i class="dashicons dashicons-tablet"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="mobile">
|
||||
<button type="button" class="preview-mobile" data-device="mobile">
|
||||
<i class="dashicons dashicons-smartphone"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.desktop ) { #>
|
||||
<div class="desktop control-wrap active">
|
||||
<div class="oceanwp-slider desktop-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input desktop-input" value="{{ data.desktop.value }}" {{{ data.desktop.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.tablet ) { #>
|
||||
<div class="tablet control-wrap">
|
||||
<div class="oceanwp-slider tablet-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input tablet-input" value="{{ data.tablet.value }}" {{{ data.tablet.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.mobile ) { #>
|
||||
<div class="mobile control-wrap">
|
||||
<div class="oceanwp-slider mobile-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input mobile-input" value="{{ data.mobile.value }}" {{{ data.mobile.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.customize-control-oceanwp-slider .control-wrap { display: inline-block; width: 100%; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider { display: inline-block; position: relative; width: 67%; height: 4px; margin-top: 12px; background-color: rgba(0,0,0,.15); border-radius: 5px; cursor: pointer; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider:hover { background-color: rgba(0,0,0,.2); }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-range { display: inline-block; position: absolute; top: 0; height: 100%; background-color: #13a1dc; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-handle { height: 16px; width: 16px; background-color: #fff; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateX(-4px); transform: translateY(-50%) translateX(-4px); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); border-radius: 50%; cursor: pointer; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider-input { float: right; width: 33%; }
|
||||
.customize-control-oceanwp-slider input.slider-input { float: right; width: 80%; height: 28px; text-align: center; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; }
|
||||
@@ -0,0 +1,103 @@
|
||||
wp.customize.controlConstructor['oceanwp-slider'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
desktop_slider = control.container.find( '.oceanwp-slider.desktop-slider' ),
|
||||
desktop_slider_input = desktop_slider.next( '.oceanwp-slider-input' ).find( 'input.desktop-input' ),
|
||||
tablet_slider = control.container.find( '.oceanwp-slider.tablet-slider' ),
|
||||
tablet_slider_input = tablet_slider.next( '.oceanwp-slider-input' ).find( 'input.tablet-input' ),
|
||||
mobile_slider = control.container.find( '.oceanwp-slider.mobile-slider' ),
|
||||
mobile_slider_input = mobile_slider.next( '.oceanwp-slider-input' ).find( 'input.mobile-input' ),
|
||||
slider_input,
|
||||
$this,
|
||||
val;
|
||||
|
||||
// Desktop slider
|
||||
desktop_slider.slider( {
|
||||
range: 'min',
|
||||
value: desktop_slider_input.val(),
|
||||
min: +desktop_slider_input.attr( 'min' ),
|
||||
max: +desktop_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
desktop_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['desktop'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Tablet slider
|
||||
tablet_slider.slider( {
|
||||
range: 'min',
|
||||
value: tablet_slider_input.val(),
|
||||
min: +tablet_slider_input.attr( 'min' ),
|
||||
max: +tablet_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
tablet_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['tablet'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Mobile slider
|
||||
mobile_slider.slider( {
|
||||
range: 'min',
|
||||
value: mobile_slider_input.val(),
|
||||
min: +mobile_slider_input.attr( 'min' ),
|
||||
max: +mobile_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
mobile_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['mobile'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Update the slider when the number value change
|
||||
jQuery( 'input.desktop-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.desktop-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
jQuery( 'input.tablet-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.tablet-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
jQuery( 'input.mobile-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.mobile-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
// Save the values
|
||||
control.container.on( 'change keyup paste', '.desktop input', function() {
|
||||
control.settings['desktop'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.tablet input', function() {
|
||||
control.settings['tablet'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.mobile input', function() {
|
||||
control.settings['mobile'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-sortable.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sortable control
|
||||
*/
|
||||
class OceanWP_Customizer_Sortable_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-sortable';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-sortable', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/sortable.min.js', array( 'jquery', 'customize-base', 'jquery-ui-core', 'jquery-ui-sortable' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-sortable', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/sortable.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['default'] = $this->setting->default;
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
}
|
||||
$this->json['value'] = maybe_unserialize( $this->value() );
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
$this->json['inputAttrs'] = maybe_serialize( $this->input_attrs() );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<label class='oceanwp-sortable'>
|
||||
<span class="customize-control-title">
|
||||
{{{ data.label }}}
|
||||
</span>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<ul class="sortable">
|
||||
<# _.each( data.value, function( choiceID ) { #>
|
||||
<li {{{ data.inputAttrs }}} class='oceanwp-sortable-item' data-value='{{ choiceID }}'>
|
||||
<i class='dashicons dashicons-menu'></i>
|
||||
<i class="dashicons dashicons-visibility visibility"></i>
|
||||
{{{ data.choices[ choiceID ] }}}
|
||||
</li>
|
||||
<# }); #>
|
||||
<# _.each( data.choices, function( choiceLabel, choiceID ) { #>
|
||||
<# if ( Array.isArray(data.value) && -1 === data.value.indexOf( choiceID ) ) { #>
|
||||
<li {{{ data.inputAttrs }}} class='oceanwp-sortable-item invisible' data-value='{{ choiceID }}'>
|
||||
<i class='dashicons dashicons-menu'></i>
|
||||
<i class="dashicons dashicons-visibility visibility"></i>
|
||||
{{{ data.choices[ choiceID ] }}}
|
||||
</li>
|
||||
<# } #>
|
||||
<# }); #>
|
||||
</ul>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the control's content.
|
||||
*
|
||||
* @see WP_Customize_Control::render_content()
|
||||
*/
|
||||
protected function render_content() {}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.customize-control-oceanwp-sortable ul li { padding: 8px 10px; line-height: 20px; border: 1px solid #ccc; background: #fff; }
|
||||
.customize-control-oceanwp-sortable ul li .dashicons.dashicons-menu { float: right; }
|
||||
.customize-control-oceanwp-sortable ul li .dashicons.visibility { color: #49aed8; margin-right: 10px; }
|
||||
.customize-control-oceanwp-sortable ul li.invisible { color: #aaa; border: 1px dashed #aaa; }
|
||||
.customize-control-oceanwp-sortable ul li.invisible .dashicons.visibility { color: #aaa; }
|
||||
@@ -0,0 +1,50 @@
|
||||
wp.customize.controlConstructor['oceanwp-sortable'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Set the sortable container.
|
||||
control.sortableContainer = control.container.find( 'ul.sortable' ).first();
|
||||
|
||||
// Init sortable.
|
||||
control.sortableContainer.sortable({
|
||||
|
||||
// Update value when we stop sorting.
|
||||
stop: function() {
|
||||
control.updateValue();
|
||||
}
|
||||
}).disableSelection().find( 'li' ).each( function() {
|
||||
|
||||
// Enable/disable options when we click on the eye of Thundera.
|
||||
jQuery( this ).find( 'i.visibility' ).click( function() {
|
||||
jQuery( this ).toggleClass( 'dashicons-visibility-faint' ).parents( 'li:eq(0)' ).toggleClass( 'invisible' );
|
||||
});
|
||||
}).click( function() {
|
||||
|
||||
// Update value on click.
|
||||
control.updateValue();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the sorting list
|
||||
*/
|
||||
updateValue: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
newValue = [];
|
||||
|
||||
this.sortableContainer.find( 'li' ).each( function() {
|
||||
if ( ! jQuery( this ).is( '.invisible' ) ) {
|
||||
newValue.push( jQuery( this ).data( 'value' ) );
|
||||
}
|
||||
});
|
||||
|
||||
control.setting.set( newValue );
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-text.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography control
|
||||
*/
|
||||
class OceanWP_Customizer_Text_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-text';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-text-js', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/text.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the control wrapper and calls $this->render_content() for the internals.
|
||||
*
|
||||
* @see WP_Customize_Control::render()
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control has-switchers customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
<?php $this->render_content(); ?>
|
||||
</li><?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['desktop'] = array();
|
||||
$this->json['tablet'] = array();
|
||||
$this->json['mobile'] = array();
|
||||
|
||||
foreach ( $this->settings as $setting_key => $setting ) {
|
||||
$this->json[ $setting_key ] = array(
|
||||
'id' => $setting->id,
|
||||
'default' => $setting->default,
|
||||
'link' => $this->get_link( $setting_key ),
|
||||
'value' => $this->value( $setting_key ),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() { ?>
|
||||
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">
|
||||
<span>{{{ data.label }}}</span>
|
||||
|
||||
<ul class="responsive-switchers">
|
||||
<li class="desktop">
|
||||
<button type="button" class="preview-desktop active" data-device="desktop">
|
||||
<i class="dashicons dashicons-desktop"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="tablet">
|
||||
<button type="button" class="preview-tablet" data-device="tablet">
|
||||
<i class="dashicons dashicons-tablet"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="mobile">
|
||||
<button type="button" class="preview-mobile" data-device="mobile">
|
||||
<i class="dashicons dashicons-smartphone"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.desktop ) { #>
|
||||
<div class="desktop control-wrap active">
|
||||
<input type="text" value="{{ data.desktop.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" {{{ data.desktop.link }}} />
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.tablet ) { #>
|
||||
<div class="tablet control-wrap">
|
||||
<input type="text" value="{{ data.tablet.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" {{{ data.tablet.link }}} />
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.mobile ) { #>
|
||||
<div class="mobile control-wrap">
|
||||
<input type="text" value="{{ data.mobile.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" {{{ data.mobile.link }}} />
|
||||
</div>
|
||||
<# } #>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
wp.customize.controlConstructor['oceanwp-text'] = wp.customize.Control.extend({
|
||||
|
||||
// When we're finished loading continue processing.
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this;
|
||||
|
||||
// Save the values
|
||||
control.container.on( 'change keyup paste', '.desktop input', function() {
|
||||
control.settings['desktop'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.tablet input', function() {
|
||||
control.settings['tablet'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.mobile input', function() {
|
||||
control.settings['mobile'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-textarea.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Range control
|
||||
*/
|
||||
class OceanWP_Customizer_Textarea_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-textarea';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-textarea', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/textarea.min.js', array( 'jquery', 'customize-base' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-textarea', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/textarea.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
if ( isset( $this->default ) ) {
|
||||
$this->json['default'] = $this->default;
|
||||
} else {
|
||||
$this->json['default'] = $this->setting->default;
|
||||
}
|
||||
$this->json['value'] = $this->value();
|
||||
$this->json['choices'] = $this->choices;
|
||||
$this->json['link'] = $this->get_link();
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<textarea rows="5" {{{ data.inputAttrs }}} {{{ data.link }}}>{{ data.value }}</textarea>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
.customize-control-oceanwp-textarea textarea { width: 100%; min-height: 150px; }
|
||||
.customize-control-oceanwp-textarea span.description { margin: 6px 0 0; }
|
||||
@@ -0,0 +1,17 @@
|
||||
wp.customize.controlConstructor['oceanwp-textarea'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
element = this.container.find( 'textarea' );
|
||||
|
||||
// On change
|
||||
this.container.on( 'change keyup paste', 'textarea', function() {
|
||||
control.setting.set( jQuery( this ).val() );
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,341 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-typo.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography control
|
||||
*/
|
||||
class OceanWP_Customizer_Typo_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-typo';
|
||||
|
||||
/**
|
||||
* Array
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $l10n = array();
|
||||
|
||||
/**
|
||||
* Set up our control.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param object $manager
|
||||
* @param string $id
|
||||
* @param array $args
|
||||
* @return void
|
||||
*/
|
||||
public function __construct( $manager, $id, $args = array() ) {
|
||||
|
||||
// Let the parent class do its thing.
|
||||
parent::__construct( $manager, $id, $args );
|
||||
|
||||
// Make sure we have labels.
|
||||
$this->l10n = wp_parse_args(
|
||||
$this->l10n,
|
||||
array(
|
||||
'family' => esc_html__( 'Font Family', 'oceanwp' ),
|
||||
'size' => esc_html__( 'Font Size', 'oceanwp' ),
|
||||
'weight' => esc_html__( 'Font Weight', 'oceanwp' ),
|
||||
'style' => esc_html__( 'Font Style', 'oceanwp' ),
|
||||
'transform' => esc_html__( 'Text Transform', 'oceanwp' ),
|
||||
'line_height' => esc_html__( 'Line Height', 'oceanwp' ),
|
||||
'spacing' => esc_html__( 'Letter Spacing', 'oceanwp' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.js', array( 'jquery' ), false, true );
|
||||
wp_enqueue_style( 'select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.css', null );
|
||||
wp_enqueue_script( 'oceanwp-typo-js', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/typo.min.js', array( 'jquery', 'customize-base', 'select2' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-typo', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/typo.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
// Loop through each of the settings and set up the data for it.
|
||||
foreach ( $this->settings as $setting_key => $setting_id ) {
|
||||
|
||||
$this->json[ $setting_key ] = array(
|
||||
'link' => $this->get_link( $setting_key ),
|
||||
'value' => $this->value( $setting_key ),
|
||||
'label' => isset( $this->l10n[ $setting_key ] ) ? $this->l10n[ $setting_key ] : ''
|
||||
);
|
||||
|
||||
if ( 'family' === $setting_key )
|
||||
$this->json[ $setting_key ]['choices'] = $this->get_font_families();
|
||||
|
||||
elseif ( 'weight' === $setting_key )
|
||||
$this->json[ $setting_key ]['choices'] = $this->get_font_weight_choices();
|
||||
|
||||
elseif ( 'style' === $setting_key )
|
||||
$this->json[ $setting_key ]['choices'] = $this->get_font_style_choices();
|
||||
|
||||
elseif ( 'transform' === $setting_key )
|
||||
$this->json[ $setting_key ]['choices'] = $this->get_text_transform_choices();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function content_template() { ?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{ data.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<ul class="oceanwp-typo-wrap">
|
||||
|
||||
<# if ( data.family && data.family.choices ) { #>
|
||||
<li class="typography-font-family">
|
||||
|
||||
<# if ( data.family.label ) { #>
|
||||
<span class="label">{{ data.family.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<select {{{ data.family.link }}}>
|
||||
|
||||
<# _.each( data.family.choices, function( label, choice ) { #>
|
||||
<option value="{{ choice }}" <# if ( choice === data.family.value ) { #> selected="selected" <# } #>>{{ label }}</option>
|
||||
<# } ) #>
|
||||
|
||||
</select>
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.size ) { #>
|
||||
<li class="typography-font-size">
|
||||
|
||||
<# if ( data.size.label ) { #>
|
||||
<span class="label">{{ data.size.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<input type="text" name="{{ data.size.name }}" value="{{ data.size.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" />
|
||||
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.weight && data.weight.choices ) { #>
|
||||
<li class="typography-font-weight">
|
||||
|
||||
<# if ( data.weight.label ) { #>
|
||||
<span class="label">{{ data.weight.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<select {{{ data.weight.link }}}>
|
||||
|
||||
<# _.each( data.weight.choices, function( label, choice ) { #>
|
||||
|
||||
<option value="{{ choice }}" <# if ( choice === data.weight.value ) { #> selected="selected" <# } #>>{{ label }}</option>
|
||||
|
||||
<# } ) #>
|
||||
|
||||
</select>
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.style && data.style.choices ) { #>
|
||||
<li class="typography-font-style">
|
||||
|
||||
<# if ( data.style.label ) { #>
|
||||
<span class="label">{{ data.style.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<select {{{ data.style.link }}}>
|
||||
|
||||
<# _.each( data.style.choices, function( label, choice ) { #>
|
||||
|
||||
<option value="{{ choice }}" <# if ( choice === data.style.value ) { #> selected="selected" <# } #>>{{ label }}</option>
|
||||
|
||||
<# } ) #>
|
||||
|
||||
</select>
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.transform && data.transform.choices ) { #>
|
||||
<li class="typography-text-transform">
|
||||
|
||||
<# if ( data.transform.label ) { #>
|
||||
<span class="label">{{ data.transform.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<select {{{ data.transform.link }}}>
|
||||
|
||||
<# _.each( data.transform.choices, function( label, choice ) { #>
|
||||
|
||||
<option value="{{ choice }}" <# if ( choice === data.transform.value ) { #> selected="selected" <# } #>>{{ label }}</option>
|
||||
|
||||
<# } ) #>
|
||||
|
||||
</select>
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.line_height ) { #>
|
||||
<li class="typography-line-height">
|
||||
|
||||
<# if ( data.line_height.label ) { #>
|
||||
<span class="label">{{ data.line_height.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<input type="text" name="{{ data.line_height.name }}" value="{{ data.line_height.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" />
|
||||
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.spacing ) { #>
|
||||
<li class="typography-letter-spacing">
|
||||
|
||||
<# if ( data.spacing.label ) { #>
|
||||
<span class="label">{{ data.spacing.label }}</span>
|
||||
<# } #>
|
||||
|
||||
<input type="text" name="{{ data.spacing.name }}" value="{{ data.spacing.value }}" placeholder="<?php esc_attr_e( 'px - em - rem', 'oceanwp' ); ?>" />
|
||||
|
||||
</li>
|
||||
<# } #>
|
||||
|
||||
</ul>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the available font families.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @return array
|
||||
*/
|
||||
public function get_font_families() {
|
||||
|
||||
$fonts = array( '' => esc_html__( 'Default', 'oceanwp' ) );
|
||||
$id = '';
|
||||
|
||||
// Add custom fonts from child themes
|
||||
if ( function_exists( 'ocean_add_custom_fonts' ) ) {
|
||||
$get_fonts = ocean_add_custom_fonts();
|
||||
if ( $get_fonts && is_array( $get_fonts ) ) {
|
||||
foreach ( $get_fonts as $font ) {
|
||||
$fonts[$font] = $font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get Standard font options
|
||||
if ( $std_fonts = oceanwp_standard_fonts() ) {
|
||||
foreach ( $std_fonts as $font ) {
|
||||
$fonts[$font] = $font;
|
||||
}
|
||||
}
|
||||
|
||||
// Google font options
|
||||
if ( $google_fonts = oceanwp_google_fonts_array() ) {
|
||||
foreach ( $google_fonts as $font ) {
|
||||
$fonts[$font] = $font;
|
||||
}
|
||||
}
|
||||
|
||||
return $fonts;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the available font weights.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @return array
|
||||
*/
|
||||
public function get_font_weight_choices() {
|
||||
|
||||
return array(
|
||||
'' => esc_html__( 'Default', 'oceanwp' ),
|
||||
'100' => esc_html__( 'Thin: 100', 'oceanwp' ),
|
||||
'200' => esc_html__( 'Light: 200', 'oceanwp' ),
|
||||
'300' => esc_html__( 'Book: 300', 'oceanwp' ),
|
||||
'400' => esc_html__( 'Normal: 400', 'oceanwp' ),
|
||||
'500' => esc_html__( 'Medium: 500', 'oceanwp' ),
|
||||
'600' => esc_html__( 'Semibold: 600', 'oceanwp' ),
|
||||
'700' => esc_html__( 'Bold: 700', 'oceanwp' ),
|
||||
'800' => esc_html__( 'Extra Bold: 800', 'oceanwp' ),
|
||||
'900' => esc_html__( 'Black: 900', 'oceanwp' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the available font styles.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @return array
|
||||
*/
|
||||
public function get_font_style_choices() {
|
||||
|
||||
return array(
|
||||
'' => esc_html__( 'Default', 'oceanwp' ),
|
||||
'normal' => esc_html__( 'Normal', 'oceanwp' ),
|
||||
'italic' => esc_html__( 'Italic', 'oceanwp' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the available text transform.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @return array
|
||||
*/
|
||||
public function get_text_transform_choices() {
|
||||
|
||||
return array(
|
||||
'' => esc_html__( 'Default', 'oceanwp' ),
|
||||
'capitalize' => esc_html__( 'Capitalize', 'oceanwp' ),
|
||||
'lowercase' => esc_html__( 'Lowercase', 'oceanwp' ),
|
||||
'uppercase' => esc_html__( 'Uppercase', 'oceanwp' )
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li { width: 50%; padding: 0 10px; margin: 0 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li.typography-font-family { width: 100%; }
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li span.label { display: block; margin: 0 0 6px; }
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap { margin: 0; }
|
||||
.customize-control-oceanwp-typo ul.oceanwp-typo-wrap li { width: 100%; padding: 0; }
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
wp.customize.controlConstructor['oceanwp-typo'] = wp.customize.Control.extend({
|
||||
|
||||
// When we're finished loading continue processing.
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
element = this.container.find( 'select' );
|
||||
|
||||
jQuery( element ).select2( {
|
||||
minimumResultsForSearch: 10,
|
||||
dropdownCssClass: 'oceanwp-select2',
|
||||
width: '100%'
|
||||
} );
|
||||
|
||||
control.container.on( 'change', '.typography-font-family select',
|
||||
function() {
|
||||
control.settings['family'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-font-size input',
|
||||
function() {
|
||||
control.settings['size'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-font-weight select',
|
||||
function() {
|
||||
control.settings['weight'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-font-style select',
|
||||
function() {
|
||||
control.settings['style'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-text-transform select',
|
||||
function() {
|
||||
control.settings['transform'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-line-height input',
|
||||
function() {
|
||||
control.settings['line_height'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.typography-letter-spacing input',
|
||||
function() {
|
||||
control.settings['spacing'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-typography.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography control
|
||||
*/
|
||||
class OceanWP_Customizer_Typography_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-typography';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
// Don't call is The Event Calendar active to avoid conflict
|
||||
if ( ! class_exists( 'Tribe__Events__Main' ) || ! class_exists( 'LearnPress' ) || ! defined( 'TUTOR_VERSION' ) || ! defined( 'LEARNDASH_VERSION' ) ) {
|
||||
wp_enqueue_script( 'oceanwp-select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.js', array( 'jquery' ), false, true );
|
||||
wp_enqueue_style( 'select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.css', null );
|
||||
wp_enqueue_script( 'oceanwp-typography-js', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/typography.min.js', array( 'jquery', 'select2' ), false, true );
|
||||
}
|
||||
wp_enqueue_style( 'oceanwp-typography', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/typography.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the control's content.
|
||||
* Allows the content to be overriden without having to rewrite the wrapper in $this->render().
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function render_content() {
|
||||
$this_val = $this->value(); ?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo wp_kses_post( $this->description ); ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<select class="oceanwp-typography-select" <?php $this->link(); ?>>
|
||||
<option value="" <?php if ( ! $this_val ) echo 'selected="selected"'; ?>><?php esc_html_e( 'Default', 'oceanwp' ); ?></option>
|
||||
<?php
|
||||
// Add custom fonts from child themes
|
||||
if ( function_exists( 'ocean_add_custom_fonts' ) ) {
|
||||
$fonts = ocean_add_custom_fonts();
|
||||
if ( $fonts && is_array( $fonts ) ) { ?>
|
||||
<optgroup label="<?php esc_attr_e( 'Custom Fonts', 'oceanwp' ); ?>">
|
||||
<?php foreach ( $fonts as $font ) { ?>
|
||||
<option value="<?php echo esc_attr( $font ); ?>" <?php if ( $font == $this_val ) echo 'selected="selected"'; ?>><?php echo esc_html( $font ); ?></option>
|
||||
<?php } ?>
|
||||
</optgroup>
|
||||
<?php }
|
||||
}
|
||||
|
||||
// Get Standard font options
|
||||
if ( $std_fonts = oceanwp_standard_fonts() ) { ?>
|
||||
<optgroup label="<?php esc_attr_e( 'Standard Fonts', 'oceanwp' ); ?>">
|
||||
<?php
|
||||
// Loop through font options and add to select
|
||||
foreach ( $std_fonts as $font ) { ?>
|
||||
<option value="<?php echo esc_attr( $font ); ?>" <?php selected( $font, $this_val ); ?>><?php echo esc_html( $font ); ?></option>
|
||||
<?php } ?>
|
||||
</optgroup>
|
||||
<?php }
|
||||
|
||||
// Google font options
|
||||
if ( $google_fonts = oceanwp_google_fonts_array() ) { ?>
|
||||
<optgroup label="<?php esc_attr_e( 'Google Fonts', 'oceanwp' ); ?>">
|
||||
<?php
|
||||
// Loop through font options and add to select
|
||||
foreach ( $google_fonts as $font ) { ?>
|
||||
<option value="<?php echo esc_attr( $font ); ?>" <?php selected( $font, $this_val ); ?>><?php echo esc_html( $font ); ?></option>
|
||||
<?php } ?>
|
||||
</optgroup>
|
||||
<?php } ?>
|
||||
</select>
|
||||
|
||||
</label>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* Fix Select2 */
|
||||
body .select2-container { z-index: 99999999; }
|
||||
body .customize-control .select2-container { z-index: 1; }
|
||||
body .select2-container .select2-selection--single { height: 33px; }
|
||||
body .select2-container--default .select2-selection--single { height: 33px; border-color: #ddd; border-radius: 0; }
|
||||
body .select2-container--default .select2-selection--single .select2-selection__rendered { color: #32373c; line-height: 33px; }
|
||||
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }
|
||||
@@ -0,0 +1,9 @@
|
||||
( function($) {
|
||||
|
||||
$( document ).ready(function () {
|
||||
|
||||
$( '.oceanwp-typography-select' ).select2();
|
||||
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,65 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-upsell.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upsell control
|
||||
*/
|
||||
class OceanWP_Customizer_Upsell_Section_Control extends WP_Customize_Section {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-upsell';
|
||||
public $url = '';
|
||||
public $id = '';
|
||||
|
||||
/**
|
||||
* JSON.
|
||||
*/
|
||||
public function json() {
|
||||
$json = parent::json();
|
||||
$json['url'] = esc_url( $this->url );
|
||||
$json['id'] = $this->id;
|
||||
return $json;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render template
|
||||
*
|
||||
* @access protected
|
||||
*/
|
||||
protected function render_template() {
|
||||
?>
|
||||
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }} cannot-expand">
|
||||
<h3>
|
||||
<a href="{{{ data.url }}}" target="_blank">{{ data.title }}</a>
|
||||
</h3>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
function oceanwp_upsell_enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-upsell', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/upsell.min.js', array( 'customize-controls' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-upsell', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/upsell.min.css', null );
|
||||
}
|
||||
add_action( 'customize_controls_enqueue_scripts', 'oceanwp_upsell_enqueue' );
|
||||
@@ -0,0 +1,59 @@
|
||||
#customize-theme-controls #accordion-section-oceanwp_upsell_section {
|
||||
display: block !important;
|
||||
border-top: 1px solid #5277fe;
|
||||
border-bottom: 1px solid #5277fe;
|
||||
}
|
||||
|
||||
#accordion-section-oceanwp_upsell_section h3 {
|
||||
background-color: #5277fe;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-left: 4px solid #5277fe;
|
||||
transition: .15s background-color ease-in-out,.15s border-color ease-in-out;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#accordion-section-oceanwp_upsell_section h3:hover {
|
||||
background-color: #3d5ac3;
|
||||
border-left-color: #000c65;
|
||||
}
|
||||
|
||||
#accordion-section-oceanwp_upsell_section h3 a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 10px 10px 11px 14px;
|
||||
line-height: 21px;
|
||||
text-decoration: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#accordion-section-oceanwp_upsell_section h3 a:after {
|
||||
content: '\f345';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
font: 400 20px/1 dashicons;
|
||||
speak: none;
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.rtl #accordion-section-oceanwp_upsell_section h3 {
|
||||
border-left: none;
|
||||
border-right: 4px solid #5277fe;
|
||||
}
|
||||
|
||||
.rtl #accordion-section-oceanwp_upsell_section h3:hover {
|
||||
border-right-color: #000c65;
|
||||
}
|
||||
|
||||
.rtl #accordion-section-oceanwp_upsell_section h3 a:after {
|
||||
content: '\f341';
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
( function( $, api ) {
|
||||
api.sectionConstructor['oceanwp-upsell'] = api.Section.extend( {
|
||||
|
||||
// No events for this type of section.
|
||||
attachEvents: function () {},
|
||||
|
||||
// Always make the section active.
|
||||
isContextuallyActive: function () {
|
||||
return true;
|
||||
}
|
||||
} );
|
||||
} )( jQuery, wp.customize );
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user