File: /var/www/html/tmpr/../tmpr/..//tmpr/../tmpr/../easyEdit4/design2.php
<?php
include("../includes/limittext.php");
include('../Connections/videoondemand.php');
require("../DbSql2.inc.php");
require("../NewsSql2.inc.php");
$db = new NewsSQL;
include("../protect.php");
session_start();
$userid=$_SESSION['euserid'];
if (empty ($userid) )
{
header("Location: $siteaddress2/m/auth/login");
}
if(empty($_GET['themeid']))
{
header("Location: $siteaddress2/m/auth/login");
exit();
}
else
{
$themeid = $_GET['themeid'];
$themeid = $db->base64url_decode($themeid);
}
?>
<style>
#editor-container {
width: 100%;
height: 100vh; /* For 100% screen height */
padding: 0;
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.bgrotate {
background-color: #ffffff;
background-image: url("../../easyEdit4/assets/images/rotate.png");
background-position: center;
}
.bg-controls2 {
background-color: #ffffff;
opacity: 100%;
color: #000000;
font-size: 16px;
}
.-bottom-20 {
background-color: #800000;
opacity: 100%;
color: #666666;
}
#dialog-background{
background: none repeat scroll 0 0 rgba(255, 255,255);
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999999999;
display:block;
opacity: 70%;
/*background-color:#b92861;*/
}
#dialog-loading-wrapper {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
height: 116px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: fixed;
top: 50%;
width: 116px;
z-index: 9999999;
}
#dialog-loading-icon {
/* background-color: #b92861 !important;*/
border-radius: 50px;
background-repeat:no-repeat;
display: block;
background-position:center;
background-image: url("../../easyEdit4/assets/images/loading.png");
background-position: center;
height: 100px;
line-height:100px;
margin: 0;
padding: 0px;
text-align: center;
background-color:#00bff3;
color: #fff;
width: 100px;
}
#editor-container { }
</style>
<!--<a href="#" class="sidebar-toggle" data-toggle="push-menu">
<i class="fa fa-bars"></i> <span>Hide Menu</span>
</a>-->
<div id="dialog-background" >
<div id="dialog-loading-wrapper">
<div id="dialog-loading-icon" >
</div>
</div>
</div>
<div id="editor-container"></div>
<script src="<?php echo $siteaddress; ?>easyEdit4/dist/pixie.umd.js"></script>
<script>
const pixie = new Pixie({
selector: "#editor-container",
baseUrl: '../../easyEdit4/assets',
state: "<?php echo $siteaddress; ?>easyEdit/myjson<?php echo $themeid; ?>.json",
objectDefaults: {
transparentCorners: false,
borderOpacityWhenMoving: 1,
cornerStyle: 'circle', //rect or circle
cornerColor: '#101994',
cornerStrokeColor: '#f31419',
cornerSize: 16,
strokeWidth: 0.05,
lockUniScaling: true, //preserver aspect ratio when resizing via handle
},
ui: {
openImageDialog: {
show: true
},
activeTheme: 'light',
nav: {
position: 'bottom',
replaceDefault: false,
items: [
{ type: "button", label: 'Save', icon: "../../easyEdit4/assets/images/upload2.png", text: "Akdd", action: function () {
//console.log('custom action!');
pixie.tools.import.uploadAndAddImage().then(function(obj) {
});
//pixie.tools.filter.apply(filterTool.getByName('grayscale'));
},},
],
},
menubar: {
replaceDefault: false,
items: [
{
type: 'button',
icon: "../../easyEdit4/assets/images/upload2.png",
action: function () {
//console.log('custom action!');
pixie.tools.import.uploadAndAddImage().then(function(obj) {
});
//pixie.tools.filter.apply(filterTool.getByName('grayscale'));
}
},
{
type: 'button',
icon: "../../easyEdit4/assets/images/download.png",
align: 'right',
label: 'Download',
action: function () {
//console.log('custom action!');
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'block';
spinner.style.visibility = 'visible';
pixie.tools.export.save2('My Image', 'png', 0.8);
//pixie.tools.filter.apply(filterTool.getByName('grayscale'));
window.location = "<?php echo $siteaddress; ?>i/account/design_content?themeid=<?php echo $_GET['themeid']; ?>";
}
},
{
type: 'button',
icon: "../../easyEdit4/assets/images/text.png",
action: function () {
pixie.tools.text.add('my text');
}
},
{
type: 'button',
icon: "../../easyEdit4/assets/images/dark.png",
align: 'center',
action: function () {
pixie.setConfig({ui: {activeTheme: 'dark'}});
}
},
{
type: 'button',
icon: "../../easyEdit4/assets/images/light.png",
align: 'center',
action: function () {
pixie.setConfig({ui: {activeTheme: 'light'}});
}
},
/* {
type: "button",
icon: "file-download",
text: "Download",
action: "exportImage",
showInCompactMode: !0,
},*/
]
},
},
tools: {
export: {
defaultFormat: 'png', //png, jpeg or json
defaultName: 'image', //default name for downloaded photo file
defaultQuality: 0.8, //works with jpeg only, 0 to 1
},
text: {
replaceDefault: false,
defaultCategory: 'handwriting',
items: [
{
family: 'Roboto',
src: 'fonts/open-sans-v27-latin-ext_latin-regular.woff2',
},
{
family: 'Fuzzy Bubbles',
src: 'fonts/fuzzy-bubbles-v3-latin-700.woff2',
descriptors: {weight: '700'},
}
]
}
},
onSave: async function(data) {
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'block';
spinner.style.visibility = 'visible';
const state = pixie.getState();
const response = await fetch('<?php echo $siteaddress; ?>TheBrandX/mode.php?mode=saveDesignNewInterface&themeid=<?php echo $themeid; ?>&nani=<?php echo $userid; ?>', {
method: 'POST',
body: state,
data: state
});
//console.log(state);
//console.log(state);
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
//console.log(data);
window.location = "<?php echo $siteaddress; ?>i/account/design_content?themeid=<?php echo $_GET['themeid']; ?>";
},
onLoad: function() {
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
pixie.tools.frame.add('grunge');
//can be called at any time to change editor theme
pixie.setConfig({ui: {activeTheme: 'light'}});
document.querySelector('.dark-button').addEventListener('click', function(e) {
pixie.setConfig({ui: {activeTheme: 'dark'}});
});
document.querySelector('.light-button').addEventListener('click', function(e) {
pixie.setConfig({ui: {activeTheme: 'light'}});
});
pixie.setConfig({ui: {activeTheme: 'light'}});
//pixie.setConfig({ui: {mode: 'overlay'}});
/* document.querySelector('.open-button').addEventListener('click', function(e) {
pixie.resetAndOpenEditor({image: 'http://localhost/thebrand/taswira.php?width=700&quality=70&image=/v/uploads/gallery/9b430f8576d05120019e18f999bde35a.jpg'});
});*/
/* var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'block';
spinner.style.visibility = 'visible';*/
}
});
</script>
<!--<button class="open-button">Open Image</button>
-->
<script>