File: /var/www/html/tmpr/../tmpr/../tmpr/..//tmpr/..//tmpr/../tmpr/../pages/elementjsbckp.php
<script type="text/javascript">
var basic, full, fullInit, fullDestroy, changed = [];
$(function(){
basic = $('#basic .plugin img').imagist({
width: 600,
height: 600
});
var theUpdate = $('#update').val();
var theUpdate = encodeURIComponent(theUpdate);
var theUsername = "<?php echo ucwords($user_nameX); ?>";
var theUrl = "thebrand.co.ke/<?php echo $user_nameX; ?>";
var theName = "<?php echo $catalognameX; ?>";
var onerror = function() {
alert('"' + this.src + '" could not load');
};
(fullInit = function() {
full = $('#full .plugin img').imagist({
canvasWidth: 600,
canvasHeight: 600,
positionX: 0,
positionY: 0,
width: 600,
error: onerror,
background: '<?php echo $layerbg ?>',
loading: function(process) {
$('#full .progress-bar').css('width', process + '%');
},
change: function(allOpts, changedProps) {
changed = changedProps;
if (is_changed("layer")) {
// Layer list
var list = $('#full .layer-list').html('');
var sameOrigin = true;
var template = $(''
+ ' <tr class="list-group-item h5" draggable="true">'
+ ' <td style="max-width:400px;overflow:hidden"> <span class="src "></span></td> '
+ '<td width=150 align=right><a class="remove"><i class="icon-trash "></i></a> '
+ ' <a class="down"><i class="icon-arrow-down"></i></a> '
+ ' <a class="up"><i class="icon-arrow-up"></i></a> </td> '
+ '</tr>');
for (var i = 0; i < allOpts.layers.length; i++) {
$('#type').val(allOpts.layers[i].src);
/*if(allOpts.layers.length >5) { alert("maximum layers");}*/
/*allOpts.layers.length replced by 4*/
if ( ! this.layers[ allOpts.layers[i].index ].sameOrigin ) {
sameOrigin = false;
}
list.prepend(
template.clone()
.data('index', allOpts.layers[i].index)
.find('.src').html(<?php /*?>i+<?php */?>" <img class='img-circle' style='margin:0; background-color:#333; height:40px;padding:0px' src='"+allOpts.layers[i].src+"' width='40' > "+checkLayerType(allOpts.layers[i].src)+" "<?php /*?>+ allOpts.layers[i].index<?php */?>)
.addClass(allOpts.layers[i].active ? 'active' : '')
.attr('href', allOpts.layers[i].src)
.attr('id', i)
.parents('tr')
);
}
// Same-origin policy warning
if (!sameOrigin) {
$('#full .same-origin-warning').show();
} else {
$('#full .same-origin-warning').hide();
}
}
// Active layer parameters
is_changed("layer") && $('#full .active-layer-src').attr('href', allOpts.src).html(allOpts.src);
is_changed("layer") && $('#full .active-layer-src').attr('href', allOpts.src).html(allOpts.src);
is_changed("layer") && $('#full .active-layer-category').val(allOpts.category);
/*
is_changed("layer") && $('#full .active-layer-src')
{
var str = allOpts.src;
var n = str.indexOf("processFont");
if (n < 0) { is_changed("layer") && $('#full .active-layer-category').val("nothing"); }
}*/
/* */
if (allOpts.src.indexOf("theUpdate") >= 0)
{
is_changed("layer") ;
$('#theLayouts').hide();
$('#theComments').show();
$('#properties').hide();
$('#textProperties').show();
full.disableResize();
full.disableRotate();
$('#update').val("<?php echo $text ?>");
}
else if (allOpts.src.indexOf("theUrl") >= 0)
{
is_changed("layer") ;
$('#theLayouts').hide();
$('#theComments').show();
$('#properties').hide();
$('#textProperties').show();
full.disableResize();
full.disableRotate();
$('#update').val("<?php echo "thebrand.co.ke/".$slugX ?>");
}
else if (allOpts.src.indexOf("theName") >= 0)
{
is_changed("layer") ;
$('#theLayouts').hide();
$('#theComments').show();
$('#properties').hide();
$('#textProperties').show();
full.disableResize();
full.disableRotate();
$('#update').val("<?php echo $catalognameX;?>");
}
else if (allOpts.src.indexOf("theUsername") >= 0)
{
is_changed("layer") ;
$('#theLayouts').hide();
$('#theComments').show();
$('#properties').hide();
$('#textProperties').show();
full.disableResize();
full.disableRotate();
$('#update').val("<?php echo $user_nameX;?>");
}
else
{
is_changed("layer") ;
$('#theComments').hide();$('#theLayouts').show();$('#textProperties').hide(); $('#properties').show();full.enableResize(); full.enableRotate();
}
$('.count').html(i);
$('.upload-image').attr('id', i);
is_changed("canvasWidth") && $('#full input.canvas-width').val(allOpts.canvasWidth);
is_changed("canvasHeight") && $('#full input.canvas-height').val(allOpts.canvasHeight);
is_changed("opacity") && $('#full input.opacity').val(allOpts.opacity);
is_changed("positionX") && $('#full input.position-x').val(allOpts.positionX);
is_changed("positionY") && $('#full input.position-y').val(allOpts.positionY);
is_changed("width") && $('#full input.width').val(allOpts.width);
is_changed("level") && $('#full input.level').val(i);
is_changed("height") && $('#full input.height').val(allOpts.height);
is_changed("rotation") && $('#full input.rotation').val(allOpts.rotation);
is_changed("category") && $('#full input.category').val(allOpts.category);
is_changed("background") && $('#full input.background').val(allOpts.background);
is_changed("flipV") && $('#full input.flip-v').prop('checked', allOpts.flipV);
is_changed("flipH") && $('#full input.flip-h').prop('checked', allOpts.flipH);
}
})
<?php if(!empty($layer1)){?>
.addLayer('<?php echo $siteaddress3 ?>taswira.php?quality=100&nocache=1&width=600&height=600&cropratio=1:1&image=/filters/mood/awesome.png', {
rotation: 0,
positionX:0,
positionY: 0,
width:600,
height:600,
category: "0",
opacity: <?php echo $layer1opacity ?>
})
<?php }?>
<?php if(!empty($layer2)){?>
.addLayer('<?php echo $layer2;?>', {
rotation: <?php echo $layer2r ?>,
positionX:<?php echo $layer2x ?>,
positionY: <?php echo $layer2y ?>,
width:<?php echo $layer2h ?>,
height: <?php echo $layer2h ?>,
category: "0",
opacity: <?php echo $layer2opacity ?>
})
<?php }?>
<?php if(!empty($layer3)){?>
.addLayer('<?php echo $layer3;?>', {
rotation: <?php echo $layer3r ?>,
positionX:<?php echo $layer3x ?>,
positionY: <?php echo $layer3y ?>,
width:<?php echo $layer3h ?>,
height: <?php echo $layer3h ?>,
category: "0",
opacity: <?php echo $layer3opacity ?>
})
<?php }?>
<?php /*?> <?php if(!empty($resultFont))
{ ?>
.addLayer('<?php echo $siteaddress3 ?>processFont.php?route=theUsername&fontid=<?php echo $themeid; ?>&myfont=<?php echo $layerid; ?>&fontcatalogid=<?php echo $catalogid; ?>&themeid=<?php echo $themeid; ?>&font_Username=<?php echo $font_Username; ?>&font_Name=<?php echo $font_Name; ?>&font_Url=<?php echo $font_Url; ?>&font_Text=<?php echo $font_Text; ?>&text_w=<?php echo $text_w; ?>&text_h=<?php echo $text_h; ?>&text_x=<?php echo $text_x; ?>&text_y=<?php echo $text_y; ?>&text_align=<?php echo $text_align; ?>&text_size=<?php echo $text_size; ?>&text_color=<?php echo $text_color; ?>&url_color=<?php echo $url_color; ?>&name_color=<?php echo $name_color; ?>&username_color=<?php echo $username_color; ?>&url_size=<?php echo $url_size; ?>&name_size=<?php echo $name_size; ?>&username_size=<?php echo $username_size; ?>&text_pad=<?php echo $text_pad; ?>&text_line_height=<?php echo $text_line_height ?>&text='+theUsername, {
rotation: 0,
positionX:<?php echo $text_x ?>,
positionY: <?php echo $text_y ?>,
category: "1",
opacity: 100
})
<?php }?><?php */?>
<?php /*?>//text for name<?php */?>
<?php if(!empty($resultFont))
{ ?>
.addLayer('<?php echo $siteaddress3 ?>processFont.php?route=theName&fontid=<?php echo $themeid; ?>&myfont=<?php echo $layerid; ?>&fontcatalogid=<?php echo $catalogid; ?>&themeid=<?php echo $themeid; ?>&font_Username=<?php echo $font_Username; ?>&font_Name=<?php echo $font_Name; ?>&font_Url=<?php echo $font_Url; ?>&font_Text=<?php echo $font_Text; ?>&text_w=300&text_h=<?php echo $text_h; ?>&text_x=<?php echo $text_x; ?>&text_y=<?php echo $text_y; ?>&text_align=left&text_size=<?php echo $text_size; ?>&text_color=<?php echo $text_color; ?>&url_color=<?php echo $url_color; ?>&name_color=<?php echo $name_color; ?>&username_color=<?php echo $username_color; ?>&url_size=<?php echo $url_size; ?>&name_size=<?php echo $name_size; ?>&username_size=<?php echo $username_size; ?>&text_pad=0&text_line_height=<?php echo $text_line_height ?>&text='+theName, {
rotation: 0,
positionX:325,
positionY: 10,
category: "1",
opacity: 100
})
<?php }?>
<?php /*?>//text for url<?php */?>
<?php if(!empty($resultFont))
{ ?>
.addLayer('<?php echo $siteaddress3 ?>processFont.php?route=theUrl&fontid=<?php echo $themeid; ?>&myfont=<?php echo $layerid; ?>&fontcatalogid=<?php echo $catalogid; ?>&themeid=<?php echo $themeid; ?>&font_Username=<?php echo $font_Username; ?>&font_Name=<?php echo $font_Name; ?>&font_Url=<?php echo $font_Url; ?>&font_Text=<?php echo $font_Url ?>&text_w=400&text_h=0&text_x=<?php echo $text_x; ?>&text_y=<?php echo $text_y; ?>&text_align=left&text_size=<?php echo $url_size; ?>&text_color=<?php echo $url_color; ?>&url_color=<?php echo $url_color; ?>&name_color=<?php echo $name_color; ?>&username_color=<?php echo $username_color; ?>&url_size=<?php echo $url_size; ?>&name_size=<?php echo $name_size; ?>&username_size=<?php echo $username_size; ?>&text_pad=0&text_line_height=<?php echo $text_line_height ?>&text='+theUrl, {
rotation: 0,
positionX:29,
positionY: 544,
category: "1",
opacity: 100
})
<?php }?>
<?php if(!empty($resultFont))
{ ?>
.addLayer('<?php echo $siteaddress3 ?>processFont.php?route=theUpdate&fontid=<?php echo $themeid; ?>&myfont=<?php echo $layerid; ?>&fontcatalogid=<?php echo $catalogid; ?>&themeid=<?php echo $themeid; ?>&font_Username=<?php echo $font_Username; ?>&font_Name=<?php echo $font_Name; ?>&font_Url=<?php echo $font_Url; ?>&font_Text=<?php echo $font_Text; ?>&text_w=<?php echo $text_w; ?>&text_h=<?php echo $text_h; ?>&text_x=<?php echo $text_x; ?>&text_y=<?php echo $text_y; ?>&text_align=<?php echo $text_align; ?>&text_size=<?php echo $text_size; ?>&text_color=<?php echo $text_color; ?>&url_color=<?php echo $url_color; ?>&name_color=<?php echo $name_color; ?>&username_color=<?php echo $username_color; ?>&url_size=<?php echo $url_size; ?>&name_size=<?php echo $name_size; ?>&username_size=<?php echo $username_size; ?>&text_pad=<?php echo $text_pad; ?>&text_line_height=<?php echo $text_line_height ?>&text='+theUpdate, {
rotation: 0,
positionX:<?php echo $text_x ?>,
positionY: <?php echo $text_y ?>,
category: "1",
opacity: 100
})
<?php }?>
<?php if(!empty($layer1)){?>
.addLayer('<?php echo $layer1;?>', {
rotation: <?php echo $layer1r ?>,
positionX:<?php echo $layer1x ?>,
positionY: <?php echo $layer1y ?>,
width:<?php echo $layer1h ?>,
height: <?php echo $layer1h ?>,
category: "0",
opacity: <?php echo $layer1opacity ?>
})
<?php }?>
<?php /*?>
<?php if(!empty($layer1)){?>
.addLayer('<?php echo $siteaddress3 ?>processFont.php?route=name', {
rotation: 0,
positionX:10,
positionY: 10,
category: "2",
opacity: 100
})
<?php }?>
<?php */?>
$('#full .controls-destroyed').hide();
$('#full .controls-initialized').show();
// Fix static inputs with defaults
$('#full input.enabled').prop('checked', true);
$('#full input.rotate').prop('checked', true);
$('#full input.move').prop('checked', true);
$('#full input.resize').prop('checked', true);
$('#full input.overflow').prop('checked', true);
$('#full input.layer').val('');
})();
/**
* Destroy function
*/
fullDestroy = function() {
full.destroy();
full = null;
$('#full .controls-destroyed').show();
$('#full .controls-initialized').hide();
};
/**
* Init
*/
$('#full .controls-destroyed button.init').click(fullInit);
/**
* Destroy
*/
$('#full .controls-initialized button.destroy').click(fullDestroy);
/**
* Save as
*/
$('#full .controls-initialized button.saveas').parents("form").submit(function() {
$(this).find("input[type='hidden']").val(full.render());
});
/**
* Add layer (layer list)
*/
$('.addlayout').click(function() {
loading_show();
var effect = $(this).attr("id");
var str = effect;
var res = str.replace(".png", "");
$("#check").html("Loading "+res+"...");
<?php /*?> full && full.removeLayer($(this).parents('tr').data('index'));<?php */?>
$('#full input.layer').val("<?php echo $siteaddress3 ?>taswira.php?quality=100&nocache=1&width=600&height=600&cropratio=1:1&image=/filters/mood/"+effect+".png");
full && full.addLayer($('#full input.layer').val(), {
error: onerror
});
loading_hide();
$("#check").html(" ");
})
$('.addlayout2').click(function() {
loading_show();
var themeid = $(this).attr("id");
var update = $("#update").val();
var setFontSize = $("#setFontSize").val();
var layerid = $("#level").val();
var removelayerid = $("#level").val();
var removelayerid = removelayerid-1;
var setLineHeight = $("#setLineHeight").val();
var setHAlignment = $("#setHAlignment").val();
var opacity = $("#opacity").val();
var setPadding = $("#setPadding").val();
var setWidth = $("#setWidth").val();
var text_color = $("#text_color").val();
var positionx = $("#position-x").val();
var positiony = $("#position-y").val();
var font_Text = $("#mySelect option").filter(":selected").val();
$('#theComments').hide();$('#theLayouts').hide();$('#textProperties').hide();
$("#check").html("Updating Text Layer "+layerid+"...");
full && full.removeLayer($(this).parents('tr').data('removelayerid'));
$('#full input.layer').val('<?php echo $siteaddress3 ?>processFont.php?route=text&action=update&fontid='+themeid+'&myfont='+layerid+'&fontcatalogid='+catalogid+'&themeid='+themeid+'&font_Username='+font_Text+'&font_Name='+font_Text+'&font_Url='+font_Text+'&font_Text='+font_Text+'&text_w='+setWidth+'&text_h=0&text_x='+positionx+'&text_y='+positiony+'&text_align='+setHAlignment+'&text_size='+setFontSize+'&text_color='+text_color+'&url_color='+text_color+'&name_color='+text_color+'&username_color='+text_color+'&url_size='+setFontSize+'&name_size='+setFontSize+'&username_size='+setFontSize+'&text_pad='+setPadding+'&text_line_height='+setLineHeight+'&text='+update);
full && full.addLayer($('#full input.layer').val(), {
error: onerror
});
loading_hide(); $("#check").html("Successfully updated...");
$("#position-y").val(positiony);
})
$('#full button.add-new-layer').click(function(){
full && full.addLayer($('#full input.layer').val(), {
error: onerror
});
});
$('#full input.layer').on('keydown', function(e) {
full && e.keyCode === 13 && $('#full button.layer-btn').click();
});
$('#full .upload-image').uploader({
xhr: {/* */
success: function(response) {
var rotation= encodeURI(document.getElementById('rotation').value);
var level= encodeURI(document.getElementById('level').value);
$.ajax({
type: 'POST',
url: 'v/uploadParameters.php?themeid=<?php echo $msg_id2 ?>&catalogid=<?php echo $catalogid5 ?>',
data: {'uploadedLayer': response.file,'level': level},
success: function(msg) {
full && full.addLayer(response.file);
/**/
$("#check").html("<i class='icon-bell text-danger'></i> "+msg);
/*alert(msg);*/
}
});
}
}
});
/**
* Remove layer (layer list)
*/
$('#full .layer-list').on('click', 'a.remove', function() {
var layerId = $(this).parents('tr').data('index');
var dataString = 'layer_id='+ layerId;
if(layerId == 0)
{
$("#check").html("<i class='icon-bell text-danger'></i> Only layers above the Background can be deleted");
return false;
}
if(confirm("Do you want to Delete Layer"+layerId+"?"))
{
$.ajax({
type: "POST",
url: mimiServer+"service/social/delete_layer_ajax.php?themeid=<?php echo $themeid ?>&catalogid=<?php echo $catalogid5 ?>",
data: dataString,
cache: false,
success: function(html){
full && full.removeLayer($(this).parents('tr').data('index'));
$("#check").html("<i class='icon-bell text-danger'></i> Successfully removed Layer"+html);
}
});
}
return false;
});
/**
* Bring front (layer list)
*/
$('#full .layer-list').on('click', 'a.up', function() {
var level = $(this).parents('tr').data('index') ;
if (level != 0){
full && full.bringFront($(this).parents('tr').data('index'));
}
else
{
$("#check").html("<i class='icon-bell text-danger'></i>Sorry: Background can't be moved to front");
}
});
/**
* Send back (layer list)
*/
$('#full .layer-list').on('click', 'a.down', function() {
var level = $(this).parents('tr').data('index') ;
if (level != 1){
full && full.sendBack($(this).parents('tr').data('index'));
}
else
{
$("#check").html("<i class='icon-bell text-danger'></i>Sorry: Backgrounds cannot be replaced. ");
}
});
/**
* Activate layer (layer list)
*/
$('#full .layer-list').on('click', '.src', function(ev) {
ev.preventDefault();
full && full.activateLayer($(this).parents('tr').data('index') * 1);
});
/**
* Set canvas width, height
*/
$('#full .set-canvas-sizes').click(function() {
full && full.set({
canvasWidth: $('#full .canvas-width').val() * 1,
canvasHeight: $('#full .canvas-height').val() * 1
});
});
/**
* Set active layer's width and height
*/
$('#full .set-sizes').click(function() {
full && full.set({
width: $('#full .width').val() * 1,
height: $('#full .height').val() * 1
});
});
/**
* Set active layer's positionX and positionY
*/
$('#full .set-position').click(function() {
full && full.set({
positionX: $('#full .position-x').val() * 1,
positionY: $('#full .position-y').val() * 1
});
});
/**
* Set active layer's rotation
*/
$('#full .set-rotation').click(function() {
full && full.set({ rotation: $('#full .rotation').val() * 1 });
});
/**
* Set active layer's opacity
*/
$('#full .set-opacity').click(function() {
full && full.set({ opacity: $('#full .opacity').val() * 1 });
});
/**
* Set active layer's background
*/
$('#full .set-background').click(function() {
full && full.set({ background: $('#full .background').val() });
});
/**
* Flip active layer
*/
$('#full .flip-h').change(function() {
full && full.activeLayer.flipHorizontal( $(this).is(':checked') );
});
$('#full .flip-v').change(function() {
full && full.activeLayer.flipVertical( $(this).is(':checked') );
});
/**
* Remove active layer
*/
$('#full button.remove-layer-btn').click(function() {
full && full.removeLayer();
});
/**
* Bring front (active layer)
*/
$('#full button.bring-front').on('click', function() {
full && full.bringFront();
});
/**
* Send back (active layer)
*/
$('#full button.send-back').on('click', function() {
full && full.sendBack();
});
/**
* Export parameters (active layer)
*/
$('#full button.export').on('click', function() {
$("#check").html("<i class='icon-bell text-danger'></i> Exporting design..." );
<?php /*?>full && alert( JSON.stringify(full.get()) );<?php */?>
/* $("#check").html( JSON.stringify(full.get()));return;*/
var startag= encodeURI(document.getElementById('startag').value);
/*alert(startag); return;*/
var themeid = $("#msg_id2").val();
var update = $("#update").val();
var setFontSize = $("#setFontSize").val();
var layerid = $("#level").val();
var setLineHeight = $("#setLineHeight").val();
var setHAlignment = $("#setHAlignment").val();
var opacity = $("#opacity").val();
var setPadding = $("#setPadding").val();
var setWidth = $("#setWidth").val();
var text_color = $("#text_color").val();
var positionx = $("#position-x").val();
var positiony = $("#position-y").val();
var font_Text = $( "#mySelect option:selected" ).text();
var parameters= JSON.stringify(full.get());
$.ajax({
type: 'POST',
url: 'v/uploadParameters.php?themeid=<?php echo $msg_id2 ?>&catalogid=<?php echo $catalogid5 ?>&startag='+startag+'&action=update&fontid='+themeid+'&myfont='+layerid+'&fontcatalogid='+catalogid+'&themeid='+themeid+'&font_Username='+font_Text+'&font_Name='+font_Text+'&font_Url='+font_Text+'&font_Text='+font_Text+'&text_w='+setWidth+'&text_h=0&text_x='+positionx+'&text_y='+positiony+'&text_align='+setHAlignment+'&text_size='+setFontSize+'&text_color='+text_color+'&url_color='+text_color+'&name_color='+text_color+'&username_color='+text_color+'&url_size='+setFontSize+'&name_size='+setFontSize+'&username_size='+setFontSize+'&text_pad='+setPadding+'&text_line_height='+setLineHeight+'&text='+update,
data: {'params': parameters},
success: function(msg) {
$("#check").html("<i class='icon-bell text-danger'></i> "+msg);
/*alert(msg);*/
}
});
});
$('#full input.enabled').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enable();
} else {
full.disable();
}
}
});
$('#full input.rotate').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableRotate();
} else {
full.disableRotate();
}
}
});
$('#full input.move').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableMove();
} else {
full.disableMove();
}
}
});
$('#full input.resize').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableResize();
} else {
full.disableResize();
};
};
});
$('#full input.overflow').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.showOverflow();
} else {
full.hideOverflow();
};
};
});
$('#full-modal').on('show.bs.modal', function(ev) {
$('img', this).attr('src', full.render());
});
function is_changed(propName) {
return changed.indexOf("all") > -1 ||
changed.indexOf("layer") > -1 ||
changed.indexOf(propName) > -1;
}
function checkLayerType(imageUrl) {
if (imageUrl.indexOf("theUpdate") >= 0)
{
var LayerType = "<strong>Text Caption: </strong> <?php echo $text; ?> ";
return LayerType;
}
else if (imageUrl.indexOf("mood") >= 0)
{
var LayerType = "<strong>Overlay: </strong> Graphics ";
return LayerType;
}
else if (imageUrl.indexOf("theUrl") >= 0)
{
var LayerType = "<strong>Text URL: </strong> thebrand.co.ke/<?php echo $slugX; ?> ";
return LayerType;
}
else if (imageUrl.indexOf("theName") >= 0)
{
var LayerType = "<strong>Name: </strong> <?php echo $catalognameX; ?> ";
return LayerType;
}
else if (imageUrl.indexOf("theUsername") >= 0)
{
var LayerType = "<strong>User Name: </strong> <?php echo $user_nameX; ?> ";
return LayerType;
}
else if (imageUrl.indexOf("ProfilePic") >= 0)
{
var LayerType = "<strong>Image: </strong> Profile Picture ";
return LayerType;
}
else{
var LayerType = "<strong>Image: </strong> ";
return LayerType;
}
}
});
</script>