function createJSON()
{
$selected = ZAppFeature::selectedFeature();
$color = ZAppFeature::loadColor();
$detail = ZAppFeature::loadDetails();
$features = $_SESSION['FeatureSessionLayer'];
$json['id'] = session_id();
$json['selected'] = $selected;
$json['color'] = $color;
$json['detail'] = $detail;
$json['features'] = $features;
$app = new AppAccount();
if (isset($_GET['id']) && $_GET['id'] > 0) {
$id = addslashes($_GET['id']);
$app->getByID($id);
$app->load = 1;
if ($app->app_client_id != Account::getMyID()) {
die("Owner's ID Mismatch");
} else {
$json['id'] = $app->app_keywords;
}
}
$fp = fopen(_PHOTOPATH . 'json/' . $json['id'] . '.json', 'w');
fwrite($fp, json_encode($json));
fclose($fp);
echo 1;
//save ke database dengan ID yang active
//kalau disini ke save dobel2
// $this->saveIntoApp();
die;
}
public static function page()
{
?>
<section id="themes">
<?php
$zp = new ZAppFeature();
$colors = ZAppFeature::loadColor();
if (!isset($colors['bg_img']) || $colors['bg_img'] == "") {
$colors['bg_img'] = $zp->feat_noimage;
}
?>
<h2 class="header_besar">Which colors and themes do you want in your app? <abbr class="required" title="required">*</abbr></h2>
<div class="form-group">
<label for="splash_img">Splash Image</label>
<div class="clearfix"></div>
<?php
$bannerModalID = "splash_cropper";
?>
<div style="float: left;">
<div class="previewImg">
<img style="cursor:pointer;" data-toggle="modal" data-target="#<?php
echo $bannerModalID;
?>
" id="<?php
echo $bannerModalID;
?>
_prev" src="<?php
echo $colors['splash_img'];
?>
">
</div>
</div>
<div style="float: left; line-height: 80px; margin-left: 20px;">
<button onclick="onSuccessSplash();" class="btn btn-default">demo</button>
</div>
<?php
global $modalReg;
$modalReg->regCropper($bannerModalID, "Splash Image", "splash_img", $colors['splash_img'], "736:1300", array($bannerModalID . "_prev"), "onSuccessSplash();");
?>
<input type="hidden" id="splash_img" value="<?php
echo $colors['splash_img'];
?>
">
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="panel_color">Panel Color</label>
<div class="input-group panel_color_con">
<input type="text" id="panel_color" value="<?php
echo $colors['panel_color'];
?>
" class="form-control" />
<span class="input-group-addon"><i style="background-color: <?php
echo $colors['panel_color'];
?>
;"></i></span>
</div>
</div>
<div class="form-group">
<label for="text_color">Text Color</label>
<div class="input-group text_color_con">
<input type="text" id="text_color" value="<?php
echo $colors['text_color'];
?>
" class="form-control" />
<span class="input-group-addon"><i style="background-color: <?php
echo $colors['text_color'];
?>
;"></i></span>
</div>
</div>
<div class="form-group">
<label for="bg_color">Background Color</label>
<div class="input-group bg_color_con">
<input type="text" id="bg_color" value="<?php
echo $colors['bg_color'];
?>
" class="form-control" />
<span class="input-group-addon"><i style="background-color: <?php
echo $colors['bg_color'];
?>
;"></i></span>
</div>
</div>
<div class="form-group">
<label for="bg_img">Background Image</label>
<div class="clearfix"></div>
<?php
$bannerModalID = "bg_img_cropper";
?>
<div style="float: left;">
<div class="previewImg">
<img style="cursor:pointer;" data-toggle="modal" data-target="#<?php
echo $bannerModalID;
?>
" id="<?php
echo $bannerModalID;
?>
_prev" src="<?php
echo $colors['bg_img'];
?>
">
</div>
</div>
<div style="float: left; line-height: 80px; margin-left: 20px;">
<button id="removeBGImg" class="btn btn-default">remove background image</button>
</div>
<?php
global $modalReg;
$modalReg->regCropper($bannerModalID, "Background Image", "bg_img", $colors['bg_img'], "736:1300", array($bannerModalID . "_prev"), "onSuccessBG();");
?>
<input type="hidden" id="bg_img" value="<?php
echo $colors['bg_img'];
?>
">
<div class="clearfix"></div>
</div>
<script>
function onSuccessSplash(){
var slc = $('#splash_img').val();
//do splash
$('#splash_screen').css('background-image','url('+slc+'?t='+ $.now()+')');
$('#splash_screen').fadeIn('slow').delay(1000).fadeOut();
$('#isiapp').hide().delay(2000).fadeIn('slow');
$('#mfooter').hide().delay(2000).fadeIn('slow');
}
function onSuccessBG(){
// console.log('masuk ke bg_img change');
var slc = $('#bg_img').val();
$('div.mcontent').css('background-image','url('+slc+'?t='+ $.now()+')');
}
function updatePanelColor(slc){
$('div.mheadertext').css("background-color",slc);
$('div#mfooter').css("background-color",slc);
}
function updateTextColor(slc){
$('div.mheadertext').css("color",slc);
// console.log('updateTextColor 2');
$('.mtab-text').css("color",slc);
// console.log('updateTextColor 3');
$('div.sim_maskColor').css("background-color",slc);
// console.log('updateTextColor 4');
$('.listview span').css("color",slc);
// console.log('updateTextColor 5');
}
function updateBGColor(slc){
$('div.mcontent').css("background-color",slc);
}
$('#removeBGImg').click(function(){
$('#bg_img').val('<?php
echo $zp->feat_noimage;
?>
');
$('#bg_img_cropper_prev').attr("src","<?php
echo $zp->feat_noimage;
?>
");
$('div.mcontent').css('background-image','none');
$('#app_desktop').hide();
});
$(function(){
$('.panel_color_con').colorpicker().on('changeColor.colorpicker', function(event){
var slc = event.color.toHex();
updatePanelColor(slc);
});
$('.text_color_con').colorpicker().on('changeColor.colorpicker', function(event){
var slc = event.color.toHex();
updateTextColor(slc);
});
$('.bg_color_con').colorpicker().on('changeColor.colorpicker', function(event){
var slc = event.color.toHex();
updateBGColor(slc);
});
$('#savecolors').click(function(){
$('.nav-pills a[href="#page_details"]').tab('show');
})
});
function saveColors(){
// console.log('in saveColors');
var panel_color = $('#panel_color').val();
var text_color = $('#text_color').val();
var bg_color = $('#bg_color').val();
var bg_img = $('#bg_img').val();
var splash_img = $('#splash_img').val();
//save the data to sessions
$.post('<?php
echo _SPPATH;
?>
FeatureSessionLayer/saveColor',{
panel_color : panel_color,
text_color : text_color,
bg_color : bg_color,
bg_img : bg_img,
splash_img : splash_img
},function(data){
console.log(data);
if(data){
// console.log('success');
}
});
}
</script>
<div style="text-align: center; margin-top: 20px;">
<button id="savecolors" style="width: 50%;" class="btn btn-danger btn-lg">Next</button>
</div>
<?php
$colors = ZAppFeature::loadColor();
foreach ($colors as $key => $val) {
if ($key == "panel_color") {
?>
<script>
$(document).ready(function(){
updatePanelColor('<?php
echo $val;
?>
');
});
</script>
<?php
}
if ($key == "text_color") {
?>
<style>
.sim_maskColor{
background-color: <?php
echo $val;
?>
;
}
.mtab-text{
color: <?php
echo $val;
?>
;
}
.listview span{
color: <?php
echo $val;
?>
;
}
</style>
<script>
$(document).ready(function(){
updateTextColor('<?php
echo $val;
?>
');
});
</script>
<?php
}
if ($key == "bg_color") {
?>
<script>
$(document).ready(function(){
updateBGColor('<?php
echo $val;
?>
');
});
</script>
<?php
}
if ($key == "bg_img") {
if ($val != $zp->feat_noimage) {
?>
<script>
$(document).ready(function(){
onSuccessBG();
});
</script>
<?php
}
}
}
?>
<style>
div.mcontent{
background-repeat: no-repeat;
/*background-attachment: fixed;*/
/*background-position: center;*/
background-size: 100% auto;
}
#splash_screen{
background-repeat: no-repeat;
background-size: 100% auto;
}
</style>
</section>
<?php
}
