File: /var/www/html/easyEdit4/appEdit.php
<!--<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="dist/pixie.umd.js"></script>
<script>
const pixie = new Pixie({
selector: "#editor-container",
baseUrl: 'assets',
state: "https://www.thebrand.ai/easyEdit/myjson6265.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: 'top',
replaceDefault: false,
items: [
{
type: 'button',
icon: "assets/images/layers.png",
align: 'right',
action: function () {
console.log(pixie.tools.objects.getAll());
pixie.togglePanel('objects');
}
},
{
type: "button",
label: 'Save',
icon: "assets/images/upload2.png",
text: "Add",
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: "assets/images/layers.png",
align: 'center',
action: function () {
console.log(pixie.tools.objects.getAll());
pixie.togglePanel('objects');
}
},
{
type: 'button',
icon: "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: "assets/images/download.png",
align: 'right',
label: 'Download',
action: function editorMe() {
//console.log('custom action!');
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'block';
spinner.style.visibility = 'visible';
pixie.tools.export.save2('The Brand Image <?php echo rand(100,222)?>', 'png', 0.8);
//pixie.tools.filter.apply(filterTool.getByName('grayscale'));
pixie.resetEditor({state: "easyEdit/<?php echo $themeid; ?>.json"});
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
//console.log(data);
}
},
{
type: 'button',
icon: "assets/images/text.png",
action: function () {
pixie.tools.text.add('my text');
}
},
{
type: 'button',
icon: "assets/images/dark.png",
align: 'center',
action: function () {
pixie.setConfig({ui: {activeTheme: 'dark'}});
}
},
{
type: 'button',
icon: "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('https://www.thebrand.ai/TheBrandZ/mode.php?mode=saveDesignNewInterface&themeid=<?php echo $themeid; ?>&nani=<?php echo $userid; ?>', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: state,
data: state
});
//console.log(state);
//console.log(state);
// pixie.resetEditor({state: "easyEdit/<?php echo $themeid; ?>.json"});
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
//console.log(data);
},
onLoad: function () {
var spinner = document.querySelector('#dialog-background');
spinner.style.display = 'none';
spinner.style.visibility = 'hidden';
// pixie.togglePanel('objects');
pixie.tools.frame.add('grunge');
//can be called at any time to change editor theme
pixie.setConfig({ui: {activeTheme: 'light'}});
function dark() {
pixie.setConfig({ui: {activeTheme: 'dark'}});
}
// document.addEventListener("click", this.dark.bind(this));
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>
-->