Initial Commit
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link http://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout h3 span {
|
||||
|
||||
border-radius: 50%;
|
||||
border: 2px solid #22a2ad;
|
||||
color: #FFF;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 37px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
background: #22a2ad;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout h3 {
|
||||
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout .featuretext {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout .documentation {
|
||||
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout .documentation a {
|
||||
|
||||
display: inline-block;
|
||||
background: #22a2ad;
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
line-height: 40px;
|
||||
transition: opacity 0.2s ease-out;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout .documentation a:hover {
|
||||
|
||||
opacity: 0.75;
|
||||
|
||||
}
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout img {
|
||||
|
||||
box-shadow: 0 0 0 5px #FFF;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,567 @@
|
||||
/*
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link http://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
#rs-addon-trigger-beforeafter,
|
||||
#rs-addon-settings-trigger-beforeafter {
|
||||
|
||||
border-radius: 0px;
|
||||
padding: 0px;
|
||||
color: transparent;
|
||||
background: url(../images/addon_beforeafter.png);
|
||||
background-size: 194px 54px;
|
||||
background-position: top center;
|
||||
width: 194px;
|
||||
height: 27px;
|
||||
|
||||
}
|
||||
|
||||
#rs-addon-settings-trigger-beforeafter.selected,
|
||||
#rs-addon-settings-trigger-beforeafter:hover,
|
||||
#rs-addon-trigger-beforeafter.selected,
|
||||
#rs-addon-trigger-beforeafter:hover {
|
||||
|
||||
background-position: bottom center;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled li[data-content="#mainbg-sub-source"]:after,
|
||||
.before-after-enabled li[data-content="#mainbg-sub-setting"]:after {
|
||||
|
||||
content: ' "Before"';
|
||||
|
||||
}
|
||||
|
||||
body:not(.before-after-enabled) #rs-addon-trigger-beforeafter:after {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
z-index: 99;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-settings-wrap {
|
||||
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #quick-layer-selector-container,
|
||||
.before-after-enabled .current-active-main-toolbar {
|
||||
|
||||
width: auto !important;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #quick-layer-selector-container {
|
||||
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #rs-edit-layers-on-btn {
|
||||
|
||||
margin-left: 308px;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #rs-set-style-on-devices {
|
||||
|
||||
margin-left: 445px;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #quick-layers .ps-scrollbar-y-rail {
|
||||
|
||||
left: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-visibility {
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
margin: 10px 0 0 15px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled .beforeafter-visibility {
|
||||
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-visibility-before {
|
||||
|
||||
margin-left: 15px;
|
||||
background-color: #e74c3c;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-visibility-after {
|
||||
|
||||
margin-left: 7px;
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
#beforeafter-visibility-all {
|
||||
|
||||
margin-left: 7px;
|
||||
background-color: #f1c40f;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-visibility-all.selected {
|
||||
|
||||
border-color: #f1c40f;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-visibility-before.selected {
|
||||
|
||||
border-color: #e74c3c;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-visibility-after.selected {
|
||||
|
||||
border-color: #2ecc71;
|
||||
|
||||
}
|
||||
|
||||
.quicksortlayer.beforeafter-after:before {
|
||||
|
||||
background-color: #2ecc71;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap input[type="text"] {
|
||||
|
||||
width: 55px !important;
|
||||
min-width: 55px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap .rs-layer-toolbar-box > span {
|
||||
|
||||
margin-left: 15px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap .rs-layer-toolbar-box > span:first-child {
|
||||
|
||||
margin-left: 0;
|
||||
|
||||
}
|
||||
|
||||
.before-after-section {
|
||||
|
||||
min-height: 30px;
|
||||
|
||||
}
|
||||
|
||||
.before-after-row {
|
||||
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
}
|
||||
|
||||
.before-after-vertical > * {
|
||||
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap .rs-layer-toolbar-box {
|
||||
|
||||
vertical-align: top;
|
||||
height: 30px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-layer-settings {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-device-desktop {
|
||||
|
||||
background-image: url(../images/icon-mode-desktop-dark.png);
|
||||
background-size: 18px 18px;
|
||||
min-width: 18px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-device-notebook {
|
||||
|
||||
background-image: url(../images/icon-mode-laptop-dark.png);
|
||||
background-size: 20px 16px;
|
||||
min-width: 18px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-device-tablet {
|
||||
|
||||
background-image: url(../images/icon-mode-tablet-dark.png);
|
||||
background-size: 17px 20px;
|
||||
min-width: 17px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-device-phone {
|
||||
|
||||
background-image: url(../images/icon-mode-phone-dark.png);
|
||||
background-size: 12px 20px;
|
||||
min-width: 12px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap .inp-deep-list {
|
||||
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap .fa-icon-arrows {
|
||||
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-addon-wrap select {
|
||||
|
||||
min-height: 26px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-icon {
|
||||
|
||||
margin-right: 6px;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter {
|
||||
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.quicksortlayer.beforeafter:before {
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -15px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background-color: #e74c3c;
|
||||
visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
.quicksortlayer.beforeafter-after:before {
|
||||
|
||||
background-color: #2ecc71;
|
||||
|
||||
}
|
||||
|
||||
.mastertimer-timeline-zindex-row.beforeafter:before {
|
||||
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #e74c3c;
|
||||
transform: rotate(-45deg);
|
||||
visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
.mastertimer-timeline-zindex-row.beforeafter-after:before {
|
||||
|
||||
border-bottom-color: #2ecc71;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled .mastertimer-timeline-zindex-row.beforeafter:before,
|
||||
.before-after-enabled .quicksortlayer.beforeafter:before {
|
||||
|
||||
visibility: visible;
|
||||
|
||||
}
|
||||
|
||||
body:not(.before-after-enabled) #rs-addon-trigger-beforeafter-settings {
|
||||
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
body:not(.before-after-enabled) #rs-addon-trigger-beforeafter {
|
||||
|
||||
background-position: top center !important;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-bgsource-menu {
|
||||
|
||||
display: inline-block !important;
|
||||
|
||||
}
|
||||
|
||||
body:not(.before-after-enabled) .beforeafter-bgsource-menu {
|
||||
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-source-settings.hide-beforeafter-itm {
|
||||
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
#mainbg-sub-source-after i {
|
||||
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
#button_change_image_beforeafter,
|
||||
#button_change_image_objlib_beforeafter,
|
||||
.before-after-enabled .vidsrcchanger-div a {
|
||||
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
#tp-bgcolorsrc_beforeafter {
|
||||
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
z-index: 3100;
|
||||
|
||||
}
|
||||
|
||||
#tp-bgcolorsrc_beforeafter .rev-colorpickerspan {
|
||||
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-bg-preview {
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
clip: rect(0, 160px, 84px, 80px);
|
||||
background-position: top left !important;
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
body:not(.before-after-enabled) #beforeafter-bg-preview {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled .mini-transparent {
|
||||
|
||||
background-position: top left !important;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
.before-after-preview .slide-media-container {
|
||||
|
||||
clip-path: inset(0% 50% 0% 0%);
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
body:not(.before-after-enabled) .before-after-preview .beforeafter-default-img {
|
||||
|
||||
clip-path: none;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-bg-preview.beforeafter-image {
|
||||
|
||||
background-size: cover !important;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-bg-preview.beforeafter-video {
|
||||
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-bg-preview.beforeafter-transparent {
|
||||
|
||||
background: url(../images/trans_tile.png);
|
||||
|
||||
}
|
||||
|
||||
#beforeafter-editor-bg {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
#mainbg-sub-source-after,
|
||||
#mainbg-sub-setting-after {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
#mainbg-sub-source-after .bg-settings-block,
|
||||
#mainbg-sub-setting-after .bg-settings-block {
|
||||
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
#mainbg-sub-setting-after {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.bgsrcchanger-div-beforeafter {
|
||||
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-small-input {
|
||||
|
||||
min-width: 54px !important;
|
||||
width: 60px !important;
|
||||
margin-right: 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.before-after-enabled #ken_burn_example_wrapper:after {
|
||||
|
||||
position: absolute;
|
||||
left: 127px;
|
||||
top: -28px;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #c0392b;
|
||||
white-space: nowrap;
|
||||
content: 'NOTICE: Ken Burns will only be applied to the "Before" source';
|
||||
|
||||
}
|
||||
|
||||
#tp-bghtml5src_beforeafter,
|
||||
#beforeafter-bounce-options,
|
||||
#beforeafter-shift-options {
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
#tp-bghtml5src_beforeafter label {
|
||||
|
||||
min-width: 180px;
|
||||
|
||||
}
|
||||
|
||||
.button_change_video_beforeafter {
|
||||
|
||||
margin-left: 20px !important;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
#mainbg-sub-setting-after .description {
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
#the_image_source_url_beforeafter {
|
||||
|
||||
line-height: 30px;
|
||||
background: #ddd;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
.beforeafter-video-param {
|
||||
|
||||
width: 350px !important;
|
||||
|
||||
}
|
||||
|
||||
#viewWrapper #tp-bgyoutubesrc_beforeafter,
|
||||
#viewWrapper #tp-bgvimeosrc_beforeafter {
|
||||
|
||||
-webkit-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
.before-after-enabled #mainbg-sub-source *:nth-child(n+14) {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link http://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
;(function($) {
|
||||
|
||||
if(!$) {
|
||||
|
||||
console.log('core jQuery library not loading correctly');
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
if(typeof punchgs === 'undefined') {
|
||||
|
||||
console.log('punchgs not available');
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
var win,
|
||||
timer,
|
||||
display,
|
||||
scrollable;
|
||||
|
||||
|
||||
function openPanel() {
|
||||
|
||||
clearTimeout(timer);
|
||||
|
||||
punchgs.TweenLite.to(jQuery('.rs-sbs-slideout-wrapper').not(display), 0.4, {xPercent: '+100%', autoAlpha: 0, display: 'none', overwrite: 'auto', ease: punchgs.Power3.easeInOut});
|
||||
punchgs.TweenLite.to(display, 0.4, {xPercent: '0%', autoAlpha: 1, display: 'block', overwrite: 'auto', ease: punchgs.Power3.easeOut});
|
||||
|
||||
scrollable.css('max-height', win.height() - 300);
|
||||
timer = setTimeout(updateScroll, 400);
|
||||
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
|
||||
punchgs.TweenLite.to(display, 0.4, {xPercent: '+100%', autoAlpha: 0, display: 'none', overwrite: 'auto', ease: punchgs.Power3.easeInOut});
|
||||
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
|
||||
scrollable.css('max-height', win.height() - 300).perfectScrollbar('update');
|
||||
|
||||
}
|
||||
|
||||
function updateScroll() {
|
||||
|
||||
scrollable.perfectScrollbar('update');
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(function() {
|
||||
|
||||
display = jQuery('#rev_addon_beforeafter_settings_slideout');
|
||||
scrollable = display.children('.rs-sbs-slideout-inner');
|
||||
win = $(window).on('resize', onResize);
|
||||
|
||||
$('body').on(
|
||||
|
||||
'click',
|
||||
'#rs-dash-addons-slide-out-trigger_revslider-beforeafter-addon',
|
||||
openPanel
|
||||
|
||||
).on('click', '#rev_addon_beforeafter_settings_slideout .rs-sbs-close', closePanel);
|
||||
|
||||
punchgs.TweenLite.set(display, {xPercent: '+100%', autoAlpha: 0, display: 'none'});
|
||||
scrollable.perfectScrollbar({wheelPropagation: true, suppressScrollX: true});
|
||||
|
||||
});
|
||||
|
||||
|
||||
})(typeof jQuery !== 'undefined' ? jQuery : false);
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
32
web/revslider/plugins/revslider-beforeafter-addon/admin/assets/js/beforeafter-slide-admin.min.js
vendored
Normal file
32
web/revslider/plugins/revslider-beforeafter-addon/admin/assets/js/beforeafter-slide-admin.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,134 @@
|
||||
<?php
|
||||
/**
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link https://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
if( !defined( 'ABSPATH') ) exit();
|
||||
|
||||
require_once(RS_BEFOREAFTER_PLUGIN_PATH . 'framework/slide.layers.admin.class.php');
|
||||
|
||||
class RsBeforeAfterSlideLayersAdmin extends RsAddonBeforeAfterSlideLayersAdmin {
|
||||
|
||||
protected static $_Path,
|
||||
$_Title,
|
||||
$_Markup,
|
||||
$_JavaScript;
|
||||
|
||||
public function __construct($_title, $_path) {
|
||||
|
||||
static::$_Title = $_title;
|
||||
static::$_Path = $_path;
|
||||
parent::init();
|
||||
|
||||
}
|
||||
|
||||
protected static function _init($_slider, $_slide) {
|
||||
|
||||
$_def_moveto = $_slider->getParam('beforeafter_def_moveto', '50%|50%|50%|50%');
|
||||
$_moveto = $_slide->getParam('beforeafter_moveto', $_def_moveto);
|
||||
|
||||
$_notebook_view = $_slider->getParam('enable_custom_size_notebook', 'off') === 'on' ? 'inline-block' : 'none';
|
||||
$_tablet_view = $_slider->getParam('enable_custom_size_tablet', 'off') === 'on' ? 'inline-block' : 'none';
|
||||
$_phone_view = $_slider->getParam('enable_custom_size_iphone', 'off') === 'on' ? 'inline-block' : 'none';
|
||||
|
||||
$_viewports = array('Desktop' => 'inline-block', 'Notebook' => $_notebook_view, 'Tablet' => $_tablet_view, 'Phone' => $_phone_view);
|
||||
$_views = array('all', 'before', 'after');
|
||||
$_moves = explode('|', $_moveto);
|
||||
$_textDomain = 'rs_' . static::$_Title;
|
||||
|
||||
$_markup = '<div id="beforeafter-addon-wrap">
|
||||
|
||||
<div id="beforeafter-global-settings" class="before-after-section beforeafter-globals">
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical" style="border-left: none; min-width:110px">
|
||||
<span>' . __('Global Settings:', $_textDomain) . '</span>
|
||||
</span>
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical">';
|
||||
|
||||
$_i = 0;
|
||||
foreach($_viewports as $_key => $_val) {
|
||||
|
||||
$_value = isset($_moves[$_i]) ? $_moves[$_i] : '50%';
|
||||
$_markup .= '<span style="display: ' . $_val . '">
|
||||
|
||||
<i class="rs-mini-layer-icon beforeafter-device-' . strtolower($_key) . ' rs-toolbar-icon tipsy_enabled_top" original-title="' . $_key . __(' Reveal Point', $_textDomain) . '"></i>
|
||||
<input
|
||||
|
||||
type="text"
|
||||
id="beforeafter_moveto_' . $_i . '"
|
||||
class="textbox-caption input-deepselects rs-layer-input-field tipsy_enabled_top beforeafter-moveto beforeafter-pos"
|
||||
original-title="' . $_key . __(' Reveal Point', $_textDomain) . '"
|
||||
value="' . $_value . '"
|
||||
data-beforeafter-value="' . $_value . '"
|
||||
data-selects="Custom||25%||50%||75%||100%"
|
||||
data-svalues ="500px||25%||50%||75%||100%"
|
||||
data-icons="wrench||filter||filter||filter||filter"
|
||||
|
||||
/></span>';
|
||||
$_i++;
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '<input id="beforeafter_moveto" type="hidden" name="beforeafter_moveto" data-beforeafter-value="' . $_moveto . '" value="' . $_moveto . '" />
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-view-settings" class="before-after-section before-after-row">
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical" style="border-left: none; min-width:110px">
|
||||
<span>' . __('Admin BG View:', $_textDomain) . '</span>
|
||||
</span>
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical">
|
||||
|
||||
<i id="beforeafter-view-icon" class="rs-mini-layer-icon fa-icon-adjust rs-toolbar-icon tipsy_enabled_top beforeafter-icon" original-title="' . __('Toggle Before/After Slide BG', $_textDomain) . '"></i>
|
||||
<select value="" id="beforeafter_bg_view" class="rs-layer-input-field tipsy_enabled_top" original-title="' . __('Toggle Before/After Slide BG', $_textDomain) . '">
|
||||
<option value="before"> ' . __('Before', $_textDomain) . '</option>
|
||||
<option value="after"> ' . __('After', $_textDomain) . '</option>
|
||||
</select>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-layer-settings" class="before-after-section before-after-row">
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical" style="border-left: none; min-width:110px">
|
||||
<span>' . __('Layer Settings:', $_textDomain) . '</span>
|
||||
</span>
|
||||
|
||||
<span class="rs-layer-toolbar-box before-after-vertical">
|
||||
|
||||
<i id="beforeafter-icon" class="rs-mini-layer-icon fa-icon-adjust rs-toolbar-icon tipsy_enabled_top beforeafter-icon" original-title="' . __('Before/After Position for the Selected Layer', $_textDomain) . '"></i>
|
||||
<select value="" id="beforeafter_position" name="beforeafter_position" class="rs-layer-input-field tipsy_enabled_top" original-title="' . __('Before/After Position for the Selected Layer', $_textDomain) . '">
|
||||
<option value="before"> ' . __('Before', $_textDomain) . '</option>
|
||||
<option value="after"> ' . __('After', $_textDomain) . '</option>
|
||||
</select>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>';
|
||||
|
||||
static::$_Markup = $_markup;
|
||||
static::$_JavaScript = '
|
||||
|
||||
var RsAddonBeforeAfter = {
|
||||
|
||||
lang: {
|
||||
"before": "' . __('Show BEFORE Layers', $_textDomain) . '",
|
||||
"after": "' . __('Show AFTER Layers', $_textDomain) . '",
|
||||
"all": "' . __('Show ALL Layers', $_textDomain) . '"
|
||||
},
|
||||
layers: {"position": "before"},
|
||||
globals: {"moveto": "' . $_moveto . '"}
|
||||
|
||||
};';
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,428 @@
|
||||
<?php
|
||||
/**
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link https://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
if( !defined( 'ABSPATH') ) exit();
|
||||
|
||||
require_once(RS_BEFOREAFTER_PLUGIN_PATH . 'framework/slide.settings.admin.class.php');
|
||||
|
||||
class RsBeforeAfterSlideSettingsAdmin extends RsAddonBeforeAfterSlideSettingsAdmin {
|
||||
|
||||
protected static $_Path,
|
||||
$_Title,
|
||||
$_Markup,
|
||||
$_JavaScript;
|
||||
|
||||
public function __construct($_title, $_path) {
|
||||
|
||||
static::$_Title = $_title;
|
||||
static::$_Path = $_path;
|
||||
parent::init();
|
||||
|
||||
}
|
||||
|
||||
protected static function _init($_slider, $_slide) {
|
||||
|
||||
$_def_direction = $_slider->getParam('beforeafter_def_direction', 'horizontal');
|
||||
$_def_delay = $_slider->getParam('beforeafter_def_delay', '500');
|
||||
$_def_time = $_slider->getParam('beforeafter_def_time', '750');
|
||||
$_def_easing = $_slider->getParam('beforeafter_def_easing', 'Power2.easeInOut');
|
||||
$_def_animateout = $_slider->getParam('beforeafter_def_animateout', 'fade');
|
||||
$_def_bouncearrows = $_slider->getParam('beforeafter_def_bouncearrows', 'none');
|
||||
$_def_bouncetype = $_slider->getParam('beforeafter_def_bouncetype', 'repel');
|
||||
$_def_bounceamount = $_slider->getParam('beforeafter_def_bounceamount', '5');
|
||||
$_def_bouncespeed = $_slider->getParam('beforeafter_def_bouncespeed', '1500');
|
||||
$_def_bounceeasing = $_slider->getParam('beforeafter_def_bounceeasing', 'ease-in-out');
|
||||
$_def_bouncedelay = $_slider->getParam('beforeafter_def_bouncedelay', '0');
|
||||
$_def_shiftarrows = $_slider->getParam('beforeafter_def_shiftarrows', false);
|
||||
$_def_shiftoffset = $_slider->getParam('beforeafter_def_shiftoffset', '10');
|
||||
$_def_shifttiming = $_slider->getParam('beforeafter_def_shifttiming', '300');
|
||||
$_def_shifteasing = $_slider->getParam('beforeafter_def_shifteasing', 'ease');
|
||||
$_def_shiftdelay = $_slider->getParam('beforeafter_def_shiftdelay', '0');
|
||||
|
||||
$_enabled = $_slide->getParam('beforeafter_enabled', false) == 'true' ? ' checked' : '';
|
||||
$_direction = $_slide->getParam('beforeafter_direction', $_def_direction);
|
||||
$_delay = $_slide->getParam('beforeafter_delay', $_def_delay);
|
||||
$_time = $_slide->getParam('beforeafter_time', $_def_time);
|
||||
$_easing = $_slide->getParam('beforeafter_easing', $_def_easing);
|
||||
$_animateout = $_slide->getParam('beforeafter_animateout', $_def_animateout);
|
||||
|
||||
$_bounceArrows = $_slide->getParam('beforeafter_bouncearrows', $_def_bouncearrows);
|
||||
$_bounceType = $_slide->getParam('beforeafter_bouncetype', $_def_bouncetype);
|
||||
$_bounceAmount = $_slide->getParam('beforeafter_bounceamount', $_def_bounceamount);
|
||||
$_bounceSpeed = $_slide->getParam('beforeafter_bouncespeed', $_def_bouncespeed);
|
||||
$_bounceEasing = $_slide->getParam('beforeafter_bounceeasing', $_def_bounceeasing);
|
||||
$_bounceDelay = $_slide->getParam('beforeafter_bouncedelay', $_def_bouncedelay);
|
||||
|
||||
$_shiftArrows = $_slide->getParam('beforeafter_shiftarrows', $_def_shiftarrows) == 'true' ? ' checked' : '';
|
||||
$_shiftOffset = $_slide->getParam('beforeafter_shiftoffset', $_def_shiftoffset);
|
||||
$_shiftTiming = $_slide->getParam('beforeafter_shifttiming', $_def_shifttiming);
|
||||
$_shiftEasing = $_slide->getParam('beforeafter_shifteasing', $_def_shifteasing);
|
||||
$_shiftDelay = $_slide->getParam('beforeafter_shiftdelay', $_def_shiftdelay);
|
||||
|
||||
$_bgSource = $_slide->getParam('background_type_beforeafter', 'trans');
|
||||
$_bgColor = $_slide->getParam('bg_color_beforeafter', '#e7e7e7');
|
||||
$_bgImageUrl = $_slide->getParam('image_url_beforeafter', '');
|
||||
$_bgImageID = $_slide->getParam('image_id_beforeafter', '');
|
||||
$_bgExternal = $_slide->getParam('bg_external_beforeafter', '');
|
||||
$_bgYoutube = $_slide->getParam('bg_youtube_beforeafter', '');
|
||||
$_bgVimeo = $_slide->getParam('bg_vimeo_beforeafter', '');
|
||||
$_bgMpeg = $_slide->getParam('bg_mpeg_beforeafter', '');
|
||||
$_bgWebm = $_slide->getParam('bg_webm_beforeafter', '');
|
||||
$_bgOgv = $_slide->getParam('bg_ogv_beforeafter', '');
|
||||
|
||||
$_bgSize = $_slide->getParam('image_source_type_beforeafter', '');
|
||||
$_bgFit = $_slide->getParam('bg_fit_beforeafter', 'cover');
|
||||
$_bgFitX = $_slide->getParam('bg_fit_x_beforeafter', '100');
|
||||
$_bgFitY = $_slide->getParam('bg_fit_y_beforeafter', '100');
|
||||
$_bgPos = $_slide->getParam('bg_position_beforeafter', 'center center');
|
||||
$_bgPosX = $_slide->getParam('bg_position_x_beforeafter', '0');
|
||||
$_bgPosY = $_slide->getParam('bg_position_y_beforeafter', '0');
|
||||
$_bgRepeat = $_slide->getParam('bg_repeat_beforeafter', 'no-repeat');
|
||||
|
||||
$_overlay = $_slide->getParam('video_dotted_overlay_beforeafter', 'none');
|
||||
$_aspect = $_slide->getParam('video_ratio_beforeafter', '16:9');
|
||||
$_startAt = $_slide->getParam('video_start_at_beforeafter', '');
|
||||
$_endAt = $_slide->getParam('video_end_at_beforeafter', '');
|
||||
$_loopVideo = $_slide->getParam('video_loop_beforeafter', 'none');
|
||||
$_videoVolume = $_slide->getParam('video_volume_beforeafter', '');
|
||||
$_videoSpeed = $_slide->getParam('video_speed_beforeafter', '1');
|
||||
$_youtubeParams = $_slide->getParam('video_arguments_beforeafter', 'hd=1&wmode=opaque&showinfo=0&rel=0;');
|
||||
$_vimeoParams = $_slide->getParam('video_arguments_vim_beforeafter', 'title=0&byline=0&portrait=0&api=1');
|
||||
|
||||
$_forceCover = $_slide->getParam('video_force_cover_beforeafter', true) == 'true' ? ' checked' : '';
|
||||
$_rewind = $_slide->getParam('video_force_rewind_beforeafter', true) == 'true' ? ' checked' : '';
|
||||
$_muteVideo = $_slide->getParam('video_mute_beforeafter', true) == 'true' ? ' checked' : '';
|
||||
$_nextSlide = $_slide->getParam('video_nextslide_beforeafter', false) == 'true' ? ' checked' : '';
|
||||
|
||||
$_textDomain = 'rs_' . static::$_Title;
|
||||
$_show_settings = !empty($_enabled) ? 'block' : 'none';
|
||||
$_shiftOptions = !empty($_shiftArrows) ? 'block' : 'none';
|
||||
$_bounceOptions = $_bounceArrows !== 'none' ? 'block' : 'none';
|
||||
|
||||
$_bounces = array('none' => 'None', 'initial' => 'On Initial Reveal', 'infinite' => 'Infinite Loop', 'once' => 'Until First Grab');
|
||||
$_eases = array('linear', 'ease', 'ease-out', 'ease-in', 'ease-in-out');
|
||||
$_directions = array('horizontal', 'vertical');
|
||||
$_bounceTypes = array('repel', 'attract');
|
||||
$_outs = array('fade', 'collapse');
|
||||
$_easings = array(
|
||||
|
||||
'Linear.easeNone',
|
||||
'Power0.easeIn',
|
||||
'Power0.easeInOut',
|
||||
'Power0.easeOut',
|
||||
'Power1.easeIn',
|
||||
'Power1.easeInOut',
|
||||
'Power1.easeOut',
|
||||
'Power2.easeIn',
|
||||
'Power2.easeInOut',
|
||||
'Power2.easeOut',
|
||||
'Power3.easeIn',
|
||||
'Power3.easeInOut',
|
||||
'Power3.easeOut',
|
||||
'Power4.easeIn',
|
||||
'Power4.easeInOut',
|
||||
'Power4.easeOut',
|
||||
'Back.easeIn',
|
||||
'Back.easeInOut',
|
||||
'Back.easeOut',
|
||||
'Bounce.easeIn',
|
||||
'Bounce.easeInOut',
|
||||
'Bounce.easeOut',
|
||||
'Circ.easeIn',
|
||||
'Circ.easeInOut',
|
||||
'Circ.easeOut',
|
||||
'Elastic.easeIn',
|
||||
'Elastic.easeInOut',
|
||||
'Elastic.easeOut',
|
||||
'Expo.easeIn',
|
||||
'Expo.easeInOut',
|
||||
'Expo.easeOut',
|
||||
'Sine.easeIn',
|
||||
'Sine.easeInOut',
|
||||
'Sine.easeOut',
|
||||
'SlowMo.ease'
|
||||
|
||||
);
|
||||
|
||||
$_slides = $_slider->getSlides();
|
||||
$_bgs = array();
|
||||
|
||||
foreach($_slides as $_slide) {
|
||||
|
||||
$_active = $_slide->getParam('beforeafter_enabled', false) == 'true';
|
||||
$_type = $_slide->getParam('background_type_beforeafter', 'trans');
|
||||
$_bg = 'transparent';
|
||||
|
||||
switch($_type) {
|
||||
|
||||
case 'image':
|
||||
|
||||
$_id = $_slide->getParam('image_id_beforeafter', false);
|
||||
if(!empty($_id)) {
|
||||
|
||||
$_bg = wp_get_attachment_image_src($_id);
|
||||
if(!empty($_bg)) $_bg = $_slide->getParam('image_url_beforeafter', '');
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
if(!empty($_bg)) $_bg = $_slide->getParam('image_url_beforeafter', '');
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'solid':
|
||||
|
||||
$_bg = $_slide->getParam('bg_color_beforeafter', 'transparent');
|
||||
|
||||
break;
|
||||
|
||||
case 'trans':
|
||||
|
||||
$_bg = 'transparent';
|
||||
|
||||
break;
|
||||
|
||||
case 'external':
|
||||
|
||||
$_bg = $_slide->getParam('bg_external_beforeafter', '');
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
$_bgs[] = array('active' => $_active, 'type' => $_type, 'source' => $_bg);
|
||||
|
||||
}
|
||||
|
||||
$_markup = '<div id="beforeafter-addon-settings-wrap">
|
||||
|
||||
<p>
|
||||
<label>Enable/Disable:</label>
|
||||
<input type="checkbox" id="beforeafter_enabled" name="beforeafter_enabled" class="tp-moderncheckbox"' . $_enabled . ' onchange="document.getElementById(\'beforeafter-settings\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<span class="description" style="margin-left: 20px">' . __('Activate the Before/After Add-On for this Slide', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<div id="beforeafter-settings" style="display: ' . $_show_settings . '">
|
||||
|
||||
<p>
|
||||
<label>' . __('Reveal Direction:', $_textDomain) . '</label>
|
||||
<select class="rs-layer-input-field" id="beforeafter_direction" name="beforeafter_direction" value="' . $_direction . '">';
|
||||
|
||||
foreach($_directions as $_direct) {
|
||||
|
||||
$_selected = $_direct === $_direction ? ' selected' : '';
|
||||
$_markup .= '<option value="' . $_direct . '"' . $_selected . '>' . __(ucfirst($_direct), $_textDomain) . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('Reveal content from left to right or top to bottom', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Animation Delay:', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_delay" name="beforeafter_delay" value="' . $_delay . '" data-default-value="' . $_delay . '">
|
||||
<span class="description">' . __('Optional delay in milliseconds for the initial reveal', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Animation Duration:', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_time" name="beforeafter_time" value="' . $_time . '" data-default-value="' . $_time . '">
|
||||
<span class="description">' . __('The initial reveal\'s animation time', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Animation Easing:', $_textDomain) . '</label>
|
||||
<select value="' . $_easing . '" id="beforeafter_easing" name="beforeafter_easing">';
|
||||
|
||||
foreach($_easings as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_easing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('The initial reveal animation\'s transition type', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Animation Out:', $_textDomain) . '</label>
|
||||
<select value="' . $_animateout . '" id="beforeafter_animateout" name="beforeafter_animateout">';
|
||||
|
||||
foreach($_outs as $_out) {
|
||||
|
||||
$_selected = $_out !== $_animateout ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_out . '"' . $_selected . '>' . ucfirst($_out) . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('Choose how the "After" content should animate out when the slide changes', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Arrows Teaser:', $_textDomain) . '</label>
|
||||
<select value="' . $_bounceArrows . '" id="beforeafter_bouncearrows" name="beforeafter_bouncearrows">';
|
||||
|
||||
foreach($_bounces as $_key => $_value) {
|
||||
|
||||
$_selected = $_key !== $_bounceArrows ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_key . '"' . $_selected . '>' . $_value . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('Teaser animation for the drag arrows', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<div id="beforeafter-bounce-options" style="display: ' . $_bounceOptions . '">
|
||||
|
||||
<p>
|
||||
<label>' . __('Bounce Type:', $_textDomain) . '</label>
|
||||
<select value="' . $_bounceType . '" id="beforeafter_bouncetype" name="beforeafter_bouncetype">';
|
||||
|
||||
foreach($_bounceTypes as $_bounce) {
|
||||
|
||||
$_selected = $_bounce !== $_bounceType ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_bounce . '"' . $_selected . '>' . ucfirst($_bounce) . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('If arrows should move away or toward each other', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Bounce Amount (px)', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_bounceamount" name="beforeafter_bounceamount" value="' . $_bounceAmount . '" data-default-value="' . $_bounceAmount . '">
|
||||
<span class="description">' . __('The distance in pixels the arrows should bounce', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Bounce Speed (ms)', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_bouncespeed" name="beforeafter_bouncespeed" value="' . $_bounceSpeed . '" data-default-value="' . $_bounceSpeed . '">
|
||||
<span class="description">' . __('The animation time in milliseconds for each bounce sequence', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Bounce Easing:', $_textDomain) . '</label>
|
||||
<select value="' . $_bounceEasing . '" id="beforeafter_bounceeasing" name="beforeafter_bounceeasing">';
|
||||
|
||||
foreach($_eases as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_bounceEasing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('The bounce animation\'s transition type', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Start Delay', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_bouncedelay" name="beforeafter_bouncedelay" value="' . $_bounceDelay . '" data-default-value="' . $_bounceDelay . '">
|
||||
<span class="description">' . __('Optional delay in milliseconds before the arrows start to bounce', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<label>Arrows Transition:</label>
|
||||
<input type="checkbox" id="beforeafter_shiftarrows" name="beforeafter_shiftarrows" class="tp-moderncheckbox"' . $_shiftArrows . ' onchange="document.getElementById(\'beforeafter-shift-options\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<span class="description" style="margin-left: 20px">' . __('Animate the arrows into place after the initial reveal', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<div id="beforeafter-shift-options" style="display: ' . $_shiftOptions . '">
|
||||
|
||||
<p>
|
||||
<label>' . __('Initial Offset (px)', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_shiftoffset" name="beforeafter_shiftoffset" value="' . $_shiftOffset . '" data-default-value="' . $_shiftOffset . '">
|
||||
<span class="description">' . __('The initial offset for the arrows', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Speed (ms)', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_shifttiming" name="beforeafter_shifttiming" value="' . $_shiftTiming . '" data-default-value="' . $_shiftTiming . '">
|
||||
<span class="description">' . __('The transition time in milliseconds', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Easing:', $_textDomain) . '</label>
|
||||
<select value="' . $_shiftEasing . '" id="beforeafter_shifteasing" name="beforeafter_shifteasing">';
|
||||
|
||||
foreach($_eases as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_shiftEasing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<span class="description">' . __('The animation\'s transition type', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label>' . __('Delay (ms)', $_textDomain) . '</label>
|
||||
<input type="text" class="small-text before-after-input" id="beforeafter_shiftdelay" name="beforeafter_shiftdelay" value="' . $_shiftDelay . '" data-default-value="' . $_shiftDelay . '">
|
||||
<span class="description">' . __('Optional delay in milliseconds for the transition', $_textDomain) . '</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="checkbox" class="tp-moderncheckbox beforeafter-settings-onoff" data-placement="beforeafter_video_force_cover" id="video_force_cover_beforeafter" name="video_force_cover_beforeafter"' . $_forceCover . '>
|
||||
<input type="checkbox" class="tp-moderncheckbox beforeafter-settings-onoff" data-placement="beforeafter_video_nextslide" id="video_nextslide_beforeafter" name="video_nextslide_beforeafter"' . $_nextSlide . '>
|
||||
<input type="checkbox" class="tp-moderncheckbox beforeafter-settings-onoff" data-placement="beforeafter_video_force_rewind" id="video_force_rewind_beforeafter" name="video_force_rewind_beforeafter"' . $_rewind . '>
|
||||
<input type="checkbox" class="tp-moderncheckbox beforeafter-settings-onoff" data-placement="beforeafter_video_mute" id="video_mute_beforeafter" name="video_mute_beforeafter"' . $_muteVideo . '>
|
||||
|
||||
</div>
|
||||
|
||||
</div>';
|
||||
|
||||
static::$_Markup = $_markup;
|
||||
static::$_JavaScript = "var RsAddonBeforeAfterBgSources = {
|
||||
|
||||
slideBgs: '" . json_encode($_bgs) . "',
|
||||
bgType: '" . $_bgSource . "',
|
||||
image: '" . $_bgImageUrl . "',
|
||||
id: '" . $_bgImageID . "',
|
||||
color: '" . $_bgColor . "',
|
||||
external: '" . $_bgExternal . "',
|
||||
youtube: '" . $_bgYoutube . "',
|
||||
vimeo: '" . $_bgVimeo . "',
|
||||
mpeg: '" . $_bgMpeg . "',
|
||||
webm: '" . $_bgWebm . "',
|
||||
ogv: '" . $_bgOgv . "',
|
||||
imageSize: '" . $_bgSize . "',
|
||||
bgFit: '" . $_bgFit . "',
|
||||
bgPos: '" . $_bgPos . "',
|
||||
bgfitx: '" . $_bgFitX . "',
|
||||
bgfity: '" . $_bgFitY . "',
|
||||
bgposx: '" . $_bgPosX . "',
|
||||
bgposy: '" . $_bgPosY . "',
|
||||
bgRepeat: '" . $_bgRepeat . "',
|
||||
overlay: '" . $_overlay . "',
|
||||
aspect: '" . $_aspect . "',
|
||||
startat: '" . $_startAt . "',
|
||||
endat: '" . $_endAt . "',
|
||||
loopvideo: '" . $_loopVideo . "',
|
||||
videovolume: '" . $_videoVolume . "',
|
||||
videoSpeed: '" . $_videoSpeed . "',
|
||||
youtubeparams: '" . $_youtubeParams . "',
|
||||
vimeoparams: '" . $_vimeoParams . "',
|
||||
lang: {
|
||||
select_after_image: '" . __('Select "After" Image', $_textDomain) . "',
|
||||
select_after_video: '" . __('Select "After" Video', $_textDomain) . "'
|
||||
}
|
||||
|
||||
}";
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,824 @@
|
||||
<?php
|
||||
/*
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link https://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
if( !defined( 'ABSPATH') ) exit();
|
||||
|
||||
require_once(RS_BEFOREAFTER_PLUGIN_PATH . 'framework/slider.admin.class.php');
|
||||
|
||||
class RsBeforeAfterSliderAdmin extends RsAddonBeforeAfterSliderAdmin {
|
||||
|
||||
protected static $_Icon,
|
||||
$_Title,
|
||||
$_Markup,
|
||||
$_Version,
|
||||
$_JavaScript;
|
||||
|
||||
public function __construct($_title, $_version) {
|
||||
|
||||
static::$_Title = $_title;
|
||||
static::$_Version = $_version;
|
||||
parent::init();
|
||||
|
||||
}
|
||||
|
||||
protected static function _init($_slider) {
|
||||
|
||||
$_enabled = RevSliderFunctions::getVal($_slider, 'beforeafter_enabled', false) == 'true' ? ' checked' : '';
|
||||
$_moveTo = RevSliderFunctions::getVal($_slider, 'beforeafter_def_moveto', '50%|50%|50%|50%');
|
||||
$_direction = RevSliderFunctions::getVal($_slider, 'beforeafter_def_direction', 'horizontal');
|
||||
$_time = RevSliderFunctions::getVal($_slider, 'beforeafter_def_time', '750');
|
||||
$_delay = RevSliderFunctions::getVal($_slider, 'beforeafter_def_delay', '500');
|
||||
$_easing = RevSliderFunctions::getVal($_slider, 'beforeafter_def_easing', 'Power2.easeInOut');
|
||||
$_animateOut = RevSliderFunctions::getVal($_slider, 'beforeafter_def_animateout', 'fade');
|
||||
|
||||
$_arrowLeft = RevSliderFunctions::getVal($_slider, 'beforeafter_left_arrow', 'fa-icon-caret-left');
|
||||
$_arrowRight = RevSliderFunctions::getVal($_slider, 'beforeafter_right_arrow', 'fa-icon-caret-right');
|
||||
$_arrowTop = RevSliderFunctions::getVal($_slider, 'beforeafter_top_arrow', 'fa-icon-caret-up');
|
||||
$_arrowBottom = RevSliderFunctions::getVal($_slider, 'beforeafter_bottom_arrow', 'fa-icon-caret-down');
|
||||
|
||||
$_arrowColor = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_color', '#ffffff');
|
||||
$_arrowSize = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_size', '32');
|
||||
$_arrowSpacing = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_spacing', '5');
|
||||
$_arrowPadding = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_padding', '0');
|
||||
$_arrowRadius = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_radius', '0');
|
||||
$_arrowBgColor = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_bg_color', 'transparent');
|
||||
|
||||
$_arrowShadow = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_shadow', false) == 'true' ? ' checked' : '';
|
||||
$_arrowShadowBlur = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_shadow_blur', '10');
|
||||
$_arrowShadowColor = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_shadow_color', 'rgba(0, 0, 0, 0.35)');
|
||||
|
||||
$_arrowBorder = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_border', false) == 'true' ? ' checked' : '';
|
||||
$_arrowBorderSize = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_border_size', '1');
|
||||
$_arrowBorderColor = RevSliderFunctions::getVal($_slider, 'beforeafter_arrow_border_color', '#000000');
|
||||
|
||||
$_boxShadow = RevSliderFunctions::getVal($_slider, 'beforeafter_box_shadow', false) == 'true' ? ' checked' : '';
|
||||
$_boxShadowBlur = RevSliderFunctions::getVal($_slider, 'beforeafter_box_shadow_blur', '10');
|
||||
$_boxShadowStrength = RevSliderFunctions::getVal($_slider, 'beforeafter_box_shadow_strength', '3');
|
||||
$_boxShadowColor = RevSliderFunctions::getVal($_slider, 'beforeafter_box_shadow_color', 'rgba(0, 0, 0, 0.35)');
|
||||
|
||||
$_dividerSize = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_size', '1');
|
||||
$_dividerColor = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_color', '#ffffff');
|
||||
$_dividerShadow = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_shadow', false) == 'true' ? ' checked' : '';
|
||||
$_dividerShadowBlur = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_shadow_blur', '10');
|
||||
$_dividerShadowStrength = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_shadow_strength', '3');
|
||||
$_dividerShadowColor = RevSliderFunctions::getVal($_slider, 'beforeafter_divider_shadow_color', 'rgba(0, 0, 0, 0.35)');
|
||||
|
||||
$_onClick = RevSliderFunctions::getVal($_slider, 'beforeafter_onclick', true) == 'true' ? ' checked' : '';
|
||||
$_clickTime = RevSliderFunctions::getVal($_slider, 'beforeafter_click_time', '500');
|
||||
$_clickEasing = RevSliderFunctions::getVal($_slider, 'beforeafter_click_easing', 'Power2.easeOut');
|
||||
$_cursor = RevSliderFunctions::getVal($_slider, 'beforeafter_cursor', 'pointer');
|
||||
|
||||
$_bounceArrows = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bouncearrows', 'none');
|
||||
$_bounceAmount = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bounceamount', '5');
|
||||
$_bounceSpeed = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bouncespeed', '1500');
|
||||
$_bounceType = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bouncetype', 'repel');
|
||||
$_bounceEasing = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bounceeasing', 'ease-in-out');
|
||||
$_bounceDelay = RevSliderFunctions::getVal($_slider, 'beforeafter_def_bouncedelay', '0');
|
||||
|
||||
$_shiftArrows = RevSliderFunctions::getVal($_slider, 'beforeafter_def_shiftarrows', false) == 'true' ? ' checked' : '';
|
||||
$_shiftOffset = RevSliderFunctions::getVal($_slider, 'beforeafter_def_shiftoffset', '10');
|
||||
$_shiftTiming = RevSliderFunctions::getVal($_slider, 'beforeafter_def_shifttiming', '300');
|
||||
$_shiftEasing = RevSliderFunctions::getVal($_slider, 'beforeafter_def_shifteasing', 'ease');
|
||||
$_shiftDelay = RevSliderFunctions::getVal($_slider, 'beforeafter_def_shiftdelay', '0');
|
||||
|
||||
$_textDomain = 'rs_' . static::$_Title;
|
||||
$_outs = array('fade', 'collapse');
|
||||
$_bounceTypes = array('repel', 'attract');
|
||||
$_viewports = array('Desktop', 'Notebook', 'Tablet', 'Phone');
|
||||
$_eases = array('linear', 'ease', 'ease-out', 'ease-in', 'ease-in-out');
|
||||
$_bounces = array('none' => 'None', 'initial' => 'On Initial Reveal', 'infinite' => 'Infinite Loop', 'once' => 'Until First Grab');
|
||||
$_cursors = array('pointer', 'default', 'none', 'cell', 'crosshair', 'move', 'all-scroll', 'col-resize', 'row-resize', 'ew-resize', 'ns-resize');
|
||||
$_moves = explode('|', $_moveTo);
|
||||
|
||||
$_showSettings = !empty($_enabled) ? 'block' : 'none';
|
||||
$_clickActive = !empty($_onClick) ? 'block' : 'none';
|
||||
$_arrowShadowActive = !empty($_arrowShadow) ? 'block' : 'none';
|
||||
$_dividerShadowActive = !empty($_dividerShadow) ? 'block' : 'none';
|
||||
$_arrowBorderActive = !empty($_arrowBorder) ? 'block' : 'none';
|
||||
$_boxShadowActive = !empty($_boxShadow) ? 'block' : 'none';
|
||||
$_shiftOptions = !empty($_shiftArrows) ? 'block' : 'none';
|
||||
$_bounceOptions = $_bounceArrows !== 'none' ? 'block' : 'none';
|
||||
|
||||
$_icons = array(
|
||||
|
||||
'fa-icon-chevron-left',
|
||||
'fa-icon-chevron-right',
|
||||
'fa-icon-caret-left',
|
||||
'fa-icon-caret-right',
|
||||
'fa-icon-arrow-left',
|
||||
'fa-icon-arrow-right',
|
||||
'fa-icon-backward',
|
||||
'fa-icon-forward',
|
||||
'fa-icon-angle-double-left',
|
||||
'fa-icon-angle-double-right',
|
||||
'fa-icon-angle-double-up',
|
||||
'fa-icon-angle-double-down',
|
||||
'fa-icon-angle-left',
|
||||
'fa-icon-angle-right',
|
||||
'fa-icon-angle-up',
|
||||
'fa-icon-angle-down',
|
||||
'fa-icon-long-arrow-left',
|
||||
'fa-icon-long-arrow-right',
|
||||
'fa-icon-long-arrow-up',
|
||||
'fa-icon-long-arrow-down',
|
||||
'fa-icon-arrow-up',
|
||||
'fa-icon-arrow-down',
|
||||
'fa-icon-caret-up',
|
||||
'fa-icon-caret-down'
|
||||
|
||||
);
|
||||
|
||||
$_easings = array(
|
||||
|
||||
'Linear.easeNone',
|
||||
'Power0.easeIn',
|
||||
'Power0.easeInOut',
|
||||
'Power0.easeOut',
|
||||
'Power1.easeIn',
|
||||
'Power1.easeInOut',
|
||||
'Power1.easeOut',
|
||||
'Power2.easeIn',
|
||||
'Power2.easeInOut',
|
||||
'Power2.easeOut',
|
||||
'Power3.easeIn',
|
||||
'Power3.easeInOut',
|
||||
'Power3.easeOut',
|
||||
'Power4.easeIn',
|
||||
'Power4.easeInOut',
|
||||
'Power4.easeOut',
|
||||
'Back.easeIn',
|
||||
'Back.easeInOut',
|
||||
'Back.easeOut',
|
||||
'Bounce.easeIn',
|
||||
'Bounce.easeInOut',
|
||||
'Bounce.easeOut',
|
||||
'Circ.easeIn',
|
||||
'Circ.easeInOut',
|
||||
'Circ.easeOut',
|
||||
'Elastic.easeIn',
|
||||
'Elastic.easeInOut',
|
||||
'Elastic.easeOut',
|
||||
'Expo.easeIn',
|
||||
'Expo.easeInOut',
|
||||
'Expo.easeOut',
|
||||
'Sine.easeIn',
|
||||
'Sine.easeInOut',
|
||||
'Sine.easeOut',
|
||||
'SlowMo.ease'
|
||||
|
||||
);
|
||||
|
||||
$_markup = '<div id="beforeafter-addon-settings">
|
||||
|
||||
<span class="label" id="label_beforeafter_enabled" origtitle="' . __("Enable/Disable the Before/After Add-On for the Slider.<br><br>", $_textDomain) . '">' . __('Enable Addon for this Slider', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_enabled" name="beforeafter_enabled"' . $_enabled . ' onchange="document.getElementById(\'beforeafter-settings\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
|
||||
<div id="beforeafter-settings" style="display: ' . $_showSettings . '">
|
||||
|
||||
<br>
|
||||
<ul class="main-options-small-tabs" style="display:inline-block">
|
||||
<li id="beforeafter_1" data-content="#beforeafter-arrow-styles" class="selected">Arrows</li>
|
||||
<li id="beforeafter_2" data-content="#beforeafter-drag-container">Drag Container</li>
|
||||
<li id="beforeafter_3" data-content="#beforeafter-line-styles">Divider Line</li>
|
||||
<li id="beforeafter_4" data-content="#beforeafter-defaults">Defaults</li>
|
||||
<li id="beforeafter_5" data-content="#beforeafter-misc">Misc.</li>
|
||||
</ul>
|
||||
|
||||
<div id="beforeafter-arrow-styles">
|
||||
|
||||
<span class="label" id="label_beforeafter_left_arrow" origtitle="' . __("Select arrows for horizontal direction mode<br><br>", $_textDomain) . '">' . __('Horizontal Arrows', $_textDomain) . '</span>
|
||||
<input type="hidden" id="beforeafter_left_arrow" name="beforeafter_left_arrow" value="' . $_arrowLeft . '" />
|
||||
<input type="hidden" id="beforeafter_right_arrow" name="beforeafter_right_arrow" value="' . $_arrowRight . '" />
|
||||
<span class="before-after-icon-option beforeafter-icon" data-arrow="left" data-icon="' . $_arrowLeft . '"><i id="before-after-icon-left" class="' . $_arrowLeft . '"></i></span
|
||||
><span class="before-after-icon-option beforeafter-icon" data-arrow="right" data-icon="' . $_arrowRight . '"><i id="before-after-icon-right" class="' . $_arrowRight . '"></i></span>
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_top_arrow" origtitle="' . __("Select arrows for vertical direction mode<br><br>", $_textDomain) . '">' . __('Vertical Arrows', $_textDomain) . '</span>
|
||||
<input type="hidden" id="beforeafter_top_arrow" name="beforeafter_top_arrow" value="' . $_arrowTop . '" />
|
||||
<input type="hidden" id="beforeafter_bottom_arrow" name="beforeafter_bottom_arrow" value="' . $_arrowBottom . '" />
|
||||
<span class="before-after-icon-option beforeafter-icon" data-arrow="top" data-icon="' . $_arrowTop . '"><i id="before-after-icon-top" class="' . $_arrowTop . '"></i></span
|
||||
><span class="before-after-icon-option beforeafter-icon" data-arrow="bottom" data-icon="' . $_arrowBottom . '"><i id="before-after-icon-bottom" class="' . $_arrowBottom . '"></i></span>
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_size" origtitle="' . __("The CSS font-size for the arrow icons<br><br>", $_textDomain) . '">' . __('Icon Size', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_arrowSize . '" data-min="0" data-max="128" id="beforeafter_arrow_size" name="beforeafter_arrow_size" value="' . $_arrowSize . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_spacing" origtitle="' . __("Spacing in pixels between the arrow icons<br><br>", $_textDomain) . '">' . __('Icon Spacing', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_arrowSpacing . '" data-min="-50" data-max="500" id="beforeafter_arrow_spacing" name="beforeafter_arrow_spacing" value="' . $_arrowSpacing . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_color" origtitle="' . __("Select a color for the arrow icons<br><br>", $_textDomain) . '">' . __('Icon Color', $_textDomain) . '</span>
|
||||
<input type="hidden" name="beforeafter_arrow_color" class="rs-layer-input-field before-after-color" data-editing="Arrows Icon Color" value="' . $_arrowColor . '" />
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_shadow" origtitle="' . __("Apply a CSS text-shadow to the arrow icons<br><br>", $_textDomain) . '">' . __('Icon Shadow', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_arrow_shadow" name="beforeafter_arrow_shadow"' . $_arrowShadow . '
|
||||
onchange="document.getElementById(\'beforeafter-arrow-shadow-settings\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<br>
|
||||
|
||||
<div id="beforeafter-arrow-shadow-settings" class="withsublabels" style="display: ' . $_arrowShadowActive . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_shadow_blur" origtitle="' . __("The blur strength for the CSS text-shadow for the arrow icons.<br><br>", $_textDomain) . '">' . __('Shadow Blur', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_arrowShadowBlur . '" data-min="0" data-max="999" id="beforeafter_arrow_shadow_blur" name="beforeafter_arrow_shadow_blur" value="' . $_arrowShadowBlur . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_shadow_color" origtitle="' . __("CSS text-shadow color for the arrow icons<br><br>", $_textDomain) . '">' . __('Shadow Color', $_textDomain) . '</span>
|
||||
<input type="hidden" name="beforeafter_arrow_shadow_color" class="rs-layer-input-field before-after-color" data-editing="Icon Shadow Color" value="' . $_arrowShadowColor . '" />
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-drag-container" style="display: none">
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_padding" origtitle="' . __("Padding in pixels for the arrow icons container<br><br>", $_textDomain) . '">' . __('Padding', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_arrowPadding . '" data-min="0" data-max="500" id="beforeafter_arrow_padding" name="beforeafter_arrow_padding" value="' . $_arrowPadding . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_radius" origtitle="' . __("CSS border-radius for the arrows container. Accepts percetages or pixels.<br><br>", $_textDomain) . '">' . __('Border Radius', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel" id="beforeafter_arrow_radius" name="beforeafter_arrow_radius" value="' . $_arrowRadius . '" />
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_bg_color" origtitle="' . __("Background color for the arrow icons container<br><br>", $_textDomain) . '">' . __('BG Color', $_textDomain) . '</span>
|
||||
<input type="hidden" name="beforeafter_arrow_bg_color" class="rs-layer-input-field before-after-color" data-editing="Arrows BG Color" value="' . $_arrowBgColor . '" />
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_border" origtitle="' . __("Enable a CSS border for the arrow icons container<br><br>", $_textDomain) . '">' . __('Border', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_arrow_border" name="beforeafter_arrow_border"' . $_arrowBorder . ' onchange="document.getElementById(\'beforeafter-arrow-border\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<br>
|
||||
|
||||
<div id="beforeafter-arrow-border" class="withsublabels" style="display: ' . $_arrowBorderActive . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_border_size" origtitle="' . __("CSS border-width for the arrows icon container<br><br>", $_textDomain) . '">' . __('Border Size', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_arrowBorderSize . '"data-min="0" data-max="250" id="beforeafter_arrow_border_size" name="beforeafter_arrow_border_size" value="' . $_arrowBorderSize . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_arrow_border_color" origtitle="' . __("border-color for the arrows icon container<br><br>", $_textDomain) . '">' . __('Border Color', $_textDomain) . '</span>
|
||||
<input type="hidden" name="beforeafter_arrow_border_color" class="rs-layer-input-field before-after-color" data-editing="Arrows Border Color" value="' . $_arrowBorderColor . '" />
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="label" id="label_beforeafter_box_shadow" origtitle="' . __("Enable a CSS box-shadow for the arrow icons container.<br><br>", $_textDomain) . '">' . __('Box Shadow', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_box_shadow" name="beforeafter_box_shadow"' . $_boxShadow . ' onchange="document.getElementById(\'beforeafter-arrow-box-shadow\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<br>
|
||||
|
||||
<div id="beforeafter-arrow-box-shadow" class="withsublabels" style="display: ' . $_boxShadowActive . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_box_shadow_blur" origtitle="' . __("The box-shadow blur spread for the arrow icons container.<br><br>", $_textDomain) . '">' . __('Shadow Blur', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_boxShadowBlur . '"data-min="0" data-max="999" id="beforeafter_box_shadow_blur" name="beforeafter_box_shadow_blur" value="' . $_boxShadowBlur . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_box_shadow_strength" origtitle="' . __("The box-shadow blur strength for the arrow icons container.<br><br>", $_textDomain) . '">' . __('Shadow Strength', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_boxShadowStrength . '" data-min="0" data-max="999" id="beforeafter_box_shadow_strength" name="beforeafter_box_shadow_strength" value="' . $_boxShadowStrength . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_box_shadow_color" origtitle="' . __("The box-shadow color for the arrow icons container<br><br>", $_textDomain) . '">' . __('Shadow Color', $_textDomain) . '</span>
|
||||
<input type="hidden" name="beforeafter_box_shadow_color" class="rs-layer-input-field before-after-color" data-editing="Arrows Box Shadow Color" value="' . $_boxShadowColor . '" />
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-line-styles" style="display: none">
|
||||
|
||||
<span class="label" id="label_beforeafter_divider_size" origtitle="' . __("The size of the divider line in pixels. For no line enter the number 0.<br><br>", $_textDomain) . '">' . __('Line Size', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_dividerSize . '" data-min="0" data-max="500" id="beforeafter_divider_size" name="beforeafter_divider_size" value="' . $_dividerSize . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_divider_color" origtitle="' . __("The color for the divider line<br><br>", $_textDomain) . '">' . __('Line Color', $_textDomain) . '</span>
|
||||
<input type="hidden" id="beforeafter_divider_color" name="beforeafter_divider_color" class="rs-layer-input-field before-after-color" data-editing="Divider Color" value="' . $_dividerColor . '" />
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_shadow" origtitle="' . __("Enable a CSS box-shadow for the divider line<br><br>", $_textDomain) . '">' . __('Line Shadow', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_shadow" name="beforeafter_divider_shadow"' . $_dividerShadow . '
|
||||
onchange="document.getElementById(\'beforeafter-line-shadow-settings\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<br>
|
||||
|
||||
<div id="beforeafter-line-shadow-settings" class="withsublabels" style="display: ' . $_dividerShadowActive . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_divider_shadow_blur" origtitle="' . __("The box-shadow blur spread for the divider line<br><br>", $_textDomain) . '">' . __('Shadow Blur', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_dividerShadowBlur . '" data-min="0" data-max="999" id="beforeafter_divider_shadow_blur" name="beforeafter_divider_shadow_blur" value="' . $_dividerShadowBlur . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_divider_shadow_strength" origtitle="' . __("The box-shadow blur strength for the divider line.<br><br>", $_textDomain) . '">' . __('Shadow Strength', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_dividerShadowStrength . '" data-min="0" data-max="999" id="beforeafter_divider_shadow_strength" name="beforeafter_divider_shadow_strength" value="' . $_dividerShadowStrength . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_divider_shadow_color" origtitle="' . __("The box-shadow color for the divider line<br><br>", $_textDomain) . '">' . __('Shadow Color', $_textDomain) . '</span>
|
||||
<input type="hidden" id="beforeafter_divider_shadow_color" name="beforeafter_divider_shadow_color" class="rs-layer-input-field before-after-color" data-editing="Line Shadow Color" value="' . $_dividerShadowColor . '" />
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-defaults" style="display: none">
|
||||
|
||||
<span class="label" id="label_beforeafter_def_direction" origtitle="' . __("Select which way the before/after should reveal<br><br>", $_textDomain) . '">' . __('Reveal Direction', $_textDomain) . '</span>
|
||||
<select id="beforeafter_def_direction" class="withlabel" name="beforeafter_def_direction" value="' . $_direction . '">
|
||||
<option value="horizontal">' . __('Horizontal', $_textDomain) . '</option>
|
||||
<option value="vertical">' . __('Vertical', $_textDomain) . '</option>
|
||||
</select>
|
||||
<br>';
|
||||
|
||||
$_i = 0;
|
||||
foreach($_viewports as $_viewport) {
|
||||
|
||||
$_value = isset($_moves[$_i]) ? $_moves[$_i] : '50%';
|
||||
$_markup .= '
|
||||
|
||||
<span class="label" id="label_beforeafter_moveto_' . $_i . '" origtitle="' . __("Accepts both pixels and percentages<br><br>", $_textDomain) . '">' . $_viewport . __(' Reveal Point', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-def-moveto" id="beforeafter_moveto_' . $_i . '" value="' . $_value . '" />
|
||||
<br>';
|
||||
$_i++;
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '<input id="beforeafter_def_moveto" type="hidden" name="beforeafter_def_moveto" value="' . $_moveTo . '" />
|
||||
|
||||
<span class="label" id="label_beforeafter_def_delay" origtitle="' . __("An optional delay in milliseconds before the reveal occurs.<br><br>", $_textDomain) . '">' . __('Reveal Start Delay', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_delay . '" data-min="0" data-max="10000" id="beforeafter_def_delay" name="beforeafter_def_delay" value="' . $_delay . '" /> ms
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_time" origtitle="' . __("The duration of the animation as it occurs (in milliseconds).<br><br>", $_textDomain) . '">' . __('Animation Duration', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_time . '" data-min="100" data-max="10000" id="beforeafter_def_time" name="beforeafter_def_time" value="' . $_time . '" /> ms
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_easing" origtitle="' . __("The animation timing equation<br><br>", $_textDomain) . '">' . __('Animation Easing', $_textDomain) . '</span>
|
||||
<select value="' . $_easing . '" id="beforeafter_def_easing" name="beforeafter_def_easing" class="withlabel">';
|
||||
|
||||
foreach($_easings as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_easing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_animateout" origtitle="' . __('Choose how the current <em>After</em> content should animate out when the slide changes.<br><br>', $_textDomain) . '">' . __('Animate Out', $_textDomain) . '</span>
|
||||
<select value="' . $_animateOut . '" id="beforeafter_def_animateout" name="beforeafter_def_animateout" class="withlabel">';
|
||||
|
||||
foreach($_outs as $_out) {
|
||||
|
||||
$_selected = $_out !== $_animateOut ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_out . '"' . $_selected . '>' . ucfirst($_out) . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bouncearrows" origtitle="' . __('Teaser animation for the drag arrows<br><br>', $_textDomain) . '">' . __('Arrows Teaser', $_textDomain) . '</span>
|
||||
<select value="' . $_bounceArrows . '" id="beforeafter_def_bouncearrows" name="beforeafter_def_bouncearrows" class="withlabel">';
|
||||
|
||||
foreach($_bounces as $_key => $_value) {
|
||||
|
||||
$_selected = $_key !== $_bounceArrows ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_key . '"' . $_selected . '>' . $_value . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
|
||||
<div id="beforeafter-bounce-options" class="withsublabels" style="display: ' . $_bounceOptions . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bouncetype" origtitle="' . __("The direction the arrows should bounce toward<br><br>", $_textDomain) . '">' . __('Bounce Type', $_textDomain) . '</span>
|
||||
<select value="' . $_bounceType . '" id="beforeafter_def_bouncetype" name="beforeafter_def_bouncetype" class="withlabel">';
|
||||
|
||||
foreach($_bounceTypes as $_bounce) {
|
||||
|
||||
$_selected = $_bounce !== $_bounceType ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_bounce . '"' . $_selected . '>' . ucfirst($_bounce) . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bounceamount" origtitle="' . __("The distance in pixels the arrows should bounce.<br><br>", $_textDomain) . '">' . __('Bounce Amount', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_bounceAmount . '" data-min="0" data-max="1000" id="beforeafter_def_bounceamount" name="beforeafter_def_bounceamount" value="' . $_bounceAmount . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bouncespeed" origtitle="' . __("The animation time for each bounce sequence<br><br>", $_textDomain) . '">' . __('Bounce Speed', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_bounceSpeed . '" data-min="100" data-max="5000" id="beforeafter_def_bouncespeed" name="beforeafter_def_bouncespeed" value="' . $_bounceSpeed . '" /> ms
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bounceeasing" origtitle="' . __("The bounce animations transition type<br><br>", $_textDomain) . '">' . __('Bounce Easing', $_textDomain) . '</span>
|
||||
<select value="' . $_bounceEasing . '" id="beforeafter_def_bounceeasing" name="beforeafter_def_bounceeasing" class="withlabel">';
|
||||
|
||||
foreach($_eases as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_bounceEasing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_bouncedelay" origtitle="' . __("Optional delay in milliseconds before the arrows start to bounce.<br><br>", $_textDomain) . '">' . __('Start Delay', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_bounceDelay . '" data-min="0" data-max="10000" id="beforeafter_def_bouncedelay" name="beforeafter_def_bouncedelay" value="' . $_bounceDelay . '" /> ms
|
||||
<br>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_shiftarrows" origtitle="' . __("Animate the arrows into place after the initial reveal.<br><br>", $_textDomain) . '">' . __('Arrows Transition', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_def_shiftarrows" name="beforeafter_def_shiftarrows"' . $_shiftArrows . ' onchange="document.getElementById(\'beforeafter-shift-options\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
|
||||
<div id="beforeafter-shift-options" class="withsublabels" style="display: ' . $_shiftOptions . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_def_shiftoffset" origtitle="' . __("The initial offset for the arrows<br><br>", $_textDomain) . '">' . __('Initial Offset', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_shiftOffset . '" data-min="0" data-max="10000" id="beforeafter_def_shiftoffset" name="beforeafter_def_shiftoffset" value="' . $_shiftOffset . '" /> px
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_shifttiming" origtitle="' . __("The transition time in milliseconds<br><br>", $_textDomain) . '">' . __('Speed', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_shiftTiming . '" data-min="0" data-max="5000" id="beforeafter_def_shifttiming" name="beforeafter_def_shifttiming" value="' . $_shiftTiming . '" /> ms
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_shifteasing" origtitle="' . __("The transition type for the animation<br><br>", $_textDomain) . '">' . __('Easing', $_textDomain) . '</span>
|
||||
<select value="' . $_shiftEasing . '" id="beforeafter_def_shifteasing" name="beforeafter_def_shifteasing" class="withlabel">';
|
||||
|
||||
foreach($_eases as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_shiftEasing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_def_shiftdelay" origtitle="' . __("Optional delay in milliseconds for the transition.<br><br>", $_textDomain) . '">' . __('Delay', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_shiftDelay . '" data-min="0" data-max="10000" id="beforeafter_def_shiftdelay" name="beforeafter_def_shiftdelay" value="' . $_shiftDelay . '" /> ms
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="beforeafter-misc" style="display: none">
|
||||
|
||||
<span class="label" id="label_beforeafter_onclick" origtitle="' . __("Clicking a point on the slider will move the reveal line automatically to that point.<br><br>", $_textDomain) . '">' . __('Animate on Stage Click', $_textDomain) . '</span>
|
||||
<input type="checkbox" class="tp-moderncheckbox withlabel" id="beforeafter_onclick" name="beforeafter_onclick"' . $_onClick . ' onchange="document.getElementById(\'beforeafter-onclick\').style.display=this.checked ? \'block\' : \'none\'" />
|
||||
<br>
|
||||
|
||||
<div id="beforeafter-onclick" class="withsublabels" style="display: ' . $_clickActive . '">
|
||||
|
||||
<span class="label" id="label_beforeafter_click_time" origtitle="' . __("The duration of the animation as it occurs (in milliseconds).<br><br>", $_textDomain) . '">' . __('Duration', $_textDomain) . '</span>
|
||||
<input type="text" class="text-sidebar withlabel beforeafter-min-max" data-default-value="' . $_clickTime . '" data-min="100" data-max="10000" id="beforeafter_click_time" name="beforeafter_click_time" value="' . $_clickTime . '" /> ms
|
||||
<br>
|
||||
|
||||
<span class="label" id="label_beforeafter_click_easing" origtitle="' . __("The animation timing equation<br><br>", $_textDomain) . '">' . __('Easing', $_textDomain) . '</span>
|
||||
<select value="' . $_clickEasing . '" id="beforeafter_click_easing" name="beforeafter_click_easing" class="withlabel">';
|
||||
|
||||
foreach($_easings as $_ease) {
|
||||
|
||||
$_selected = $_ease !== $_clickEasing ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_ease . '"' . $_selected . '>' . $_ease . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="label" id="label_beforeafter_cursor" origtitle="' . __("The CSS mouse cursor to be displayed when the mouse hovers over the arrow icon container.<br><br>", $_textDomain) . '">' . __('Mouse Cursor', $_textDomain) . '</span>
|
||||
<select value="' . $_cursor . '" id="beforeafter_cursor" name="beforeafter_cursor" class="withlabel">';
|
||||
|
||||
foreach($_cursors as $_cur) {
|
||||
|
||||
$_selected = $_cur !== $_cursor ? '' : ' selected';
|
||||
$_markup .= '<option value="' . $_cur . '"' . $_selected . '>' . $_cur . '</option>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="before-after-icon-selector"><div>';
|
||||
foreach($_icons as $_icon) {
|
||||
|
||||
$_markup .= '<span class="before-after-icon-option before-after-icon-select" data-icon="' . $_icon . '"><i class="' . $_icon . '"></i></span>';
|
||||
|
||||
}
|
||||
|
||||
$_markup .= '</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.setting_box .fa-icon-adjust {width: 17px; margin-left: 3px}
|
||||
.setting_box .fa-icon-adjust:before {position: relative; top: 3px}
|
||||
.beforeafter_color_wrap {position: relative; top: 8px}
|
||||
|
||||
#before-after-icon-selector {
|
||||
width: 375px;
|
||||
top: 120px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 120000;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
/*border: 10px solid #fff;*/
|
||||
/*box-shadow: 0px 20px 20px rgba(0,0,0,0.15);*/
|
||||
}
|
||||
|
||||
#before-after-icon-selector > div {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.before-after-icon-option {
|
||||
margin: 0px 2px 2px 0px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #F1F1F1;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
line-height: 31px !important;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#before-after-icon-selector .before-after-icon-option {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.before-after-icon-option:hover {
|
||||
background: #3498DB;
|
||||
border-color: #3498DB !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.before-after-icon-select.selected {
|
||||
border-color: #000 ;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</div>';
|
||||
|
||||
static::$_Markup = $_markup;
|
||||
static::$_Icon = 'fa-icon-adjust';
|
||||
static::$_JavaScript = '
|
||||
|
||||
jQuery(function() {
|
||||
|
||||
var iconSelector,
|
||||
selectedIcon,
|
||||
arrowDirection;
|
||||
|
||||
function setId() {
|
||||
|
||||
var $this = jQuery(this);
|
||||
$this.attr("id", $this.find(".before-after-color").attr("name"));
|
||||
|
||||
}
|
||||
|
||||
if(jQuery.fn.tpColorPicker) {
|
||||
|
||||
jQuery(".before-after-color").each(function() {
|
||||
|
||||
jQuery(this).tpColorPicker({mode: "single", wrapClasses: "beforeafter_color_wrap withlabel", init: function() {
|
||||
|
||||
jQuery(".beforeafter_color_wrap").each(setId);
|
||||
|
||||
}});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
jQuery(".before-after-color").wpColorPicker({palettes: false, height: 250, border: false, change: function(evt, ui) {
|
||||
this.value = ui.color.toString();
|
||||
}});
|
||||
|
||||
}
|
||||
|
||||
jQuery(".beforeafter-min-max").on("change", function() {
|
||||
|
||||
var val = this.value;
|
||||
if(val === "") val = 0;
|
||||
|
||||
val = Math.max(parseFloat(this.getAttribute("data-min")),
|
||||
Math.min(parseFloat(this.getAttribute("data-max")), parseFloat(val)));
|
||||
|
||||
if(!isNaN(val)) this.value = val;
|
||||
else this.value = this.getAttribute("data-default-value");
|
||||
|
||||
});
|
||||
|
||||
jQuery("#beforeafter_arrow_radius").on("focusout", function() {
|
||||
|
||||
var val = this.value,
|
||||
perc;
|
||||
|
||||
if(val.search("%") !== -1) {
|
||||
|
||||
perc = "%";
|
||||
val = val.replace("%", "");
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
perc = /[0-9]*\.?[0-9]+(px)?/.test(val) ? "px" : "";
|
||||
|
||||
}
|
||||
|
||||
val = parseInt(val, 10);
|
||||
|
||||
if(isNaN(val)) val = "0";
|
||||
else val = Math.min(Math.max(0, val), 100);
|
||||
|
||||
this.value = val + perc;
|
||||
|
||||
});
|
||||
|
||||
jQuery(".beforeafter-icon").on("click", function() {
|
||||
|
||||
if(!iconSelector) iconSelector = jQuery("#before-after-icon-selector");
|
||||
|
||||
selectedIcon = this;
|
||||
arrowDirection = this.getAttribute("data-arrow");
|
||||
|
||||
iconSelector.find(".selected").removeClass("selected");
|
||||
iconSelector.find(".before-after-icon-select[data-icon=" + this.getAttribute("data-icon") + "]").addClass("selected");
|
||||
iconSelector.show();
|
||||
|
||||
});
|
||||
|
||||
jQuery(".before-after-icon-select").on("click", function() {
|
||||
|
||||
var icon = this.getAttribute("data-icon");
|
||||
selectedIcon.setAttribute("data-icon", icon);
|
||||
|
||||
document.getElementById("beforeafter_" + arrowDirection + "_arrow").value = icon;
|
||||
document.getElementById("before-after-icon-" + arrowDirection).className = icon;
|
||||
|
||||
iconSelector.hide();
|
||||
|
||||
});
|
||||
|
||||
document.getElementById("beforeafter_def_bouncearrows").addEventListener("change", function() {
|
||||
|
||||
var display = this.value !== "none" ? "block" : "none";
|
||||
document.getElementById("beforeafter-bounce-options").style.display = display;
|
||||
|
||||
});
|
||||
|
||||
var speeds,
|
||||
times,
|
||||
timings = jQuery("#beforeafter_def_moveto");
|
||||
|
||||
function timeEach(i) {
|
||||
|
||||
var $this = jQuery(this),
|
||||
val = $this.val(),
|
||||
perc = "";
|
||||
|
||||
if(!val) {
|
||||
|
||||
val = "50%";
|
||||
$this.val("50%");
|
||||
|
||||
}
|
||||
|
||||
if(val.search("%") !== -1) {
|
||||
|
||||
perc = "%";
|
||||
val = val.replace("%", "");
|
||||
|
||||
if(isNaN(val)) val = "50";
|
||||
else val = Math.min(Math.max(0, val), 100);
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
perc = /[0-9]*\.?[0-9]+(px)?/.test(val) ? "px" : "";
|
||||
|
||||
}
|
||||
|
||||
val = parseInt(val, 10);
|
||||
if(isNaN(val)) {
|
||||
|
||||
val = 50;
|
||||
perc = "%";
|
||||
|
||||
}
|
||||
|
||||
val += perc;
|
||||
$this.val(val);
|
||||
|
||||
if(i !== 0) speeds += "|";
|
||||
speeds += val;
|
||||
|
||||
}
|
||||
|
||||
times = jQuery(".beforeafter-def-moveto").on("focusout", function() {
|
||||
|
||||
speeds = "";
|
||||
times.each(timeEach);
|
||||
timings.val(speeds);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
';
|
||||
|
||||
}
|
||||
|
||||
public function export_slider($_data, $_slides, $_sliderParams, $_useDummy) {
|
||||
|
||||
foreach($_slides as $_slide) {
|
||||
|
||||
// do slide params exist?
|
||||
if(!isset($_slide['params'])) continue;
|
||||
|
||||
// does the slide have before/after data?
|
||||
if(!isset($_slide['params']['background_type_beforeafter'])) continue;
|
||||
|
||||
// is the "after" bg source type an image?
|
||||
$_type = $_slide['params']['background_type_beforeafter'];
|
||||
if($_type !== 'image') continue;
|
||||
|
||||
// is the "after" bg image set?
|
||||
if(!isset($_slide['params']['image_url_beforeafter'])) continue;
|
||||
|
||||
// does the "after" image url exist? If so, add it to the export image list
|
||||
$_image = $_slide['params']['image_url_beforeafter'];
|
||||
if(!empty($_image)) $_data['usedImages'][$_image] = true;
|
||||
|
||||
}
|
||||
|
||||
return $_data;
|
||||
|
||||
}
|
||||
|
||||
public function import_slider($_data, $_slide_type, $_image_path) {
|
||||
|
||||
// do the slide params exist and does the slide have before/after data?
|
||||
if(isset($_data['params'])) {
|
||||
|
||||
if(isset($_data['params']['background_type_beforeafter'])) {
|
||||
|
||||
// reset image id data in case it can't be retrieved upon import
|
||||
$_imageId = '';
|
||||
|
||||
// is the "after" bg source set to "image" and is the image url set?
|
||||
$_type = $_data['params']['background_type_beforeafter'];
|
||||
if($_type === 'image' && isset($_data['params']['image_url_beforeafter'])) {
|
||||
|
||||
// does the image url exist?
|
||||
$_image = $_data['params']['image_url_beforeafter'];
|
||||
if(!empty($_image)) {
|
||||
|
||||
// convert the image url (domain paths get replaced)
|
||||
$_url = RevSliderBase::check_file_in_zip($_image_path, $_image, $_data['sliderParams']['alias'], $_data['alreadyImported']);
|
||||
$_url = RevSliderFunctionsWP::getImageUrlFromPath($_url);
|
||||
|
||||
// if the url converted ok
|
||||
if(!empty($_url)) {
|
||||
|
||||
// update the before/after data with the converted image url
|
||||
$_data['params']['image_url_beforeafter'] = $_url;
|
||||
|
||||
// attempt to get the image's new ID and update the before/after data
|
||||
$_id = RevSliderFunctionsWP::get_image_id_by_url($_url);
|
||||
if(!empty($_id)) $_imageId = $_id;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// set the image ID to the new ID or to an empty string
|
||||
// this will prevent a "faulty" image ID from possibly existing when the frontend output runs
|
||||
$_data['params']['image_id_beforeafter'] = $_imageId;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return $_data;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
<?php
|
||||
/**
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link https://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
if( !defined( 'ABSPATH') ) exit();
|
||||
|
||||
class RevAddOnBeforeAfterUpdate {
|
||||
private $plugin_url = 'https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380';
|
||||
private $remote_url = 'https://updates.themepunch.tools/check_for_updates.php';
|
||||
private $remote_url_info = 'https://updates.themepunch.tools/addons/revslider-beforeafter-addon/revslider-beforeafter-addon.php';
|
||||
private $plugin_slug = 'revslider-beforeafter-addon';
|
||||
private $plugin_path = 'revslider-beforeafter-addon/revslider-beforeafter-addon.php';
|
||||
private $version;
|
||||
private $plugins;
|
||||
private $option;
|
||||
|
||||
|
||||
public function __construct($version) {
|
||||
$this->option = $this->plugin_slug . '_update_info';
|
||||
$this->version = $version;
|
||||
$this->_retrieve_version_info();
|
||||
}
|
||||
|
||||
public function delete_update_transients() {
|
||||
delete_transient( 'update_themes' );
|
||||
delete_transient( 'update_plugins' );
|
||||
delete_site_transient( 'update_plugins' );
|
||||
delete_site_transient( 'update_themes' );
|
||||
}
|
||||
|
||||
|
||||
public function add_update_checks(){
|
||||
|
||||
add_filter('pre_set_site_transient_update_plugins', array(&$this, 'set_update_transient'));
|
||||
add_filter('plugins_api', array(&$this, 'set_updates_api_results'), 10, 3);
|
||||
|
||||
}
|
||||
|
||||
|
||||
public function set_update_transient($transient) {
|
||||
|
||||
$this->_check_updates();
|
||||
|
||||
if(isset($transient) && !isset($transient->response)) {
|
||||
$transient->response = array();
|
||||
}
|
||||
|
||||
if(!empty($this->data->basic) && is_object($this->data->basic)) {
|
||||
if(version_compare($this->version, $this->data->basic->version, '<')) {
|
||||
|
||||
$this->data->basic->new_version = $this->data->basic->version;
|
||||
$transient->response[$this->plugin_path] = $this->data->basic;
|
||||
}
|
||||
}
|
||||
|
||||
return $transient;
|
||||
}
|
||||
|
||||
|
||||
public function set_updates_api_results($result, $action, $args) {
|
||||
|
||||
$this->_check_updates();
|
||||
|
||||
if(isset($args->slug) && $args->slug == $this->plugin_slug && $action == 'plugin_information') {
|
||||
if(is_object($this->data->full) && !empty($this->data->full)) {
|
||||
$result = $this->data->full;
|
||||
}
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
|
||||
protected function _check_updates() {
|
||||
//reset saved options
|
||||
//update_option($this->option, false);
|
||||
|
||||
$force_check = false;
|
||||
|
||||
if( (isset($_GET['checkforupdates']) && $_GET['checkforupdates'] == 'true') || isset($_GET["force-check"])) $force_check = true;
|
||||
|
||||
|
||||
// Get data
|
||||
if(empty($this->data)) {
|
||||
$data = get_option($this->option, false);
|
||||
$data = $data ? $data : new stdClass;
|
||||
|
||||
$this->data = is_object($data) ? $data : maybe_unserialize($data);
|
||||
}
|
||||
|
||||
$last_check = get_option('revslider_beforeafter_addon-update-check');
|
||||
|
||||
|
||||
if($last_check == false){ //first time called
|
||||
$last_check = time();
|
||||
update_option('revslider_beforeafter_addon-update-check', $last_check);
|
||||
}
|
||||
|
||||
// Check for updates
|
||||
if(time() - $last_check > 172800 || $force_check == true){
|
||||
|
||||
$data = $this->_retrieve_update_info();
|
||||
|
||||
if(isset($data->basic)) {
|
||||
update_option('revslider_beforeafter_addon-update-check', time());
|
||||
|
||||
$this->data->checked = time();
|
||||
$this->data->basic = $data->basic;
|
||||
$this->data->full = $data->full;
|
||||
|
||||
//update_option('revslider_beforeafter_addon-stable-version', $data->full->stable);
|
||||
update_option('revslider_beforeafter_addon-latest-version', $data->full->version);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Save results
|
||||
update_option($this->option, $this->data);
|
||||
}
|
||||
|
||||
|
||||
public function _retrieve_update_info() {
|
||||
|
||||
global $wp_version;
|
||||
$data = new stdClass;
|
||||
|
||||
// Build request
|
||||
|
||||
$validated = get_option('revslider_beforeafter_addon-valid', 'false');
|
||||
$purchase = (get_option('revslider-valid', 'false') == 'true') ? get_option('revslider-code', '') : '';
|
||||
$rattr = array(
|
||||
'code' => urlencode($purchase),
|
||||
'version' => urlencode($this->version)
|
||||
);
|
||||
|
||||
$request = wp_remote_post($this->remote_url_info, array(
|
||||
'body' => $rattr
|
||||
));
|
||||
|
||||
if(!is_wp_error($request)) {
|
||||
if($response = maybe_unserialize($request['body'])) {
|
||||
if(is_object($response)) {
|
||||
$data = $response;
|
||||
|
||||
$data->basic->url = $this->plugin_url;
|
||||
$data->full->url = $this->plugin_url;
|
||||
$data->full->external = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
public function _retrieve_version_info($force_check = false) {
|
||||
global $wp_version;
|
||||
|
||||
$last_check = get_option('revslider-beforeafter-addon-update-check-short');
|
||||
if($last_check == false){ //first time called
|
||||
$last_check = time();
|
||||
update_option('revslider-beforeafter-addon-update-check-short', $last_check);
|
||||
}
|
||||
|
||||
// Check for updates
|
||||
if(time() - $last_check > 172800 || $force_check == true){
|
||||
|
||||
|
||||
update_option('revslider-beforeafter-addon-update-check-short', time());
|
||||
|
||||
$purchase = (get_option('revslider-valid', 'false') == 'true') ? get_option('revslider-code', '') : '';
|
||||
|
||||
|
||||
$response = wp_remote_post($this->remote_url, array(
|
||||
'body' => array(
|
||||
'item' => urlencode('revslider-beforeafter-addon'),
|
||||
'version' => urlencode($this->version),
|
||||
'code' => urlencode($purchase)
|
||||
)
|
||||
));
|
||||
|
||||
$response_code = wp_remote_retrieve_response_code( $response );
|
||||
$version_info = wp_remote_retrieve_body( $response );
|
||||
|
||||
if ( $response_code != 200 || is_wp_error( $version_info ) ) {
|
||||
update_option('revslider_beforeafter_addon-connection', false);
|
||||
return false;
|
||||
}else{
|
||||
update_option('revslider_beforeafter_addon-connection', true);
|
||||
}
|
||||
|
||||
/*
|
||||
$version_info = json_decode($version_info);
|
||||
if(isset($version_info->version)){
|
||||
update_option('revslider_beforeafter_addon-latest-version', $version_info->version);
|
||||
}
|
||||
|
||||
if(isset($version_info->notices)){
|
||||
update_option('revslider_beforeafter_addon-notices', $version_info->notices);
|
||||
}
|
||||
|
||||
if(isset($version_info->dashboard)){
|
||||
update_option('revslider_beforeafter_addon-dashboard', $version_info->dashboard);
|
||||
}
|
||||
|
||||
if(isset($version_info->deactivated) && $version_info->deactivated === true){
|
||||
if(get_option('revslider_beforeafter_addon-valid', 'false') == 'true'){
|
||||
//remove validation, add notice
|
||||
update_option('revslider_beforeafter_addon-valid', 'false');
|
||||
update_option('revslider_beforeafter_addon-deact-notice', true);
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
if($force_check == true){ //force that the update will be directly searched
|
||||
update_option('revslider-beforeafter-addon-update-check', '');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
<?php
|
||||
/*
|
||||
* @author ThemePunch <info@themepunch.com>
|
||||
* @link https://www.themepunch.com/
|
||||
* @copyright 2017 ThemePunch
|
||||
*/
|
||||
|
||||
/*
|
||||
|
||||
test widget
|
||||
http://pastebin.com/J0wB676U
|
||||
|
||||
*/
|
||||
|
||||
if(!defined('ABSPATH')) exit();
|
||||
|
||||
?>
|
||||
|
||||
<div id="rev_addon_beforeafter_settings_slideout" class="rs-sbs-slideout-wrapper" style="display:none">
|
||||
|
||||
<div class="rs-sbs-header">
|
||||
<div class="rs-sbs-step"><i class="eg-icon-cog"></i></div>
|
||||
<div class="rs-sbs-title"><?php _e('Setting up the BeforeAfter Add-On', 'rs_beforeafter'); ?></div>
|
||||
<div class="rs-sbs-close"><i class="eg-icon-cancel"></i></div>
|
||||
</div>
|
||||
|
||||
<div class="tp-clearfix"></div>
|
||||
|
||||
<div class="rs-sbs-slideout-inner">
|
||||
|
||||
<h3><span>1</span> Enable the Before/After Add-On from the <a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/slider-settings-button.jpg" target="_blank">Slider Settings</a></h3>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial0.jpg" />
|
||||
|
||||
<h3><span>2</span> Enable the Before/After feature for an individual Slide from the <a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/slide_settings.jpg" target="_blank">Slide Settings</a></h3>
|
||||
<a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/slide_settings.jpg" target="_blank">
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial1.jpg" />
|
||||
</a>
|
||||
<br><br>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial2.jpg" />
|
||||
|
||||
<h3><span>3</span> Add a background for the "After" view</h3>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial3.jpg" />
|
||||
|
||||
<h3><span>4</span> <a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/add-new-layer-1.jpg" target="_blank">Add a Layer</a> and designate it for the <a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/layer_settings.jpg" target="_blank">"Before" or "After" view</a></h3>
|
||||
<a href="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/layer_settings.jpg" target="_blank">
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial4.jpg" />
|
||||
</a>
|
||||
<br><br>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial5.jpg" />
|
||||
|
||||
<h3><span>5</span> Toggle the Layers visibility between the "Before" & "After" views</h3>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial6.jpg" />
|
||||
|
||||
<h3><span>6</span> Red represents a "Before" Layer, and Green is used for "After" Layers</h3>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial7.jpg" />
|
||||
<br><br>
|
||||
<img src="<?php echo RS_BEFOREAFTER_PLUGIN_URL; ?>admin/assets/images/tutorial8.jpg" />
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#rev_addon_beforeafter_settings_slideout a img {transition: opacity 0.2s ease}
|
||||
#rev_addon_beforeafter_settings_slideout a:hover img {opacity: 0.65}
|
||||
|
||||
</style>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user