570 lines
20 KiB
JavaScript
570 lines
20 KiB
JavaScript
/**
|
|
* @Website: apollotheme.com - prestashop template provider
|
|
* @author Apollotheme <apollotheme@gmail.com>
|
|
* @copyright Apollotheme
|
|
* @description:
|
|
*/
|
|
var windowWidth = $(window).width();
|
|
var currentId;
|
|
var currentConfig;
|
|
$(document).ready(function() {
|
|
//only for product generate
|
|
$(".adminappagebuilderdetails #nav-sidebar").trigger("click");
|
|
|
|
$('.plist-eedit').click(function(){
|
|
element = $(this).data('element');
|
|
$.fancybox.open([{
|
|
type: 'iframe',
|
|
href : ($('#appagebuilder_products_form').length?$('#appagebuilder_products_form').attr('action'):$('#appagebuilder_details_form').attr('action')) + '&pelement=' + element,
|
|
afterLoad:function(){
|
|
if ($('body',$('.fancybox-iframe').contents()).find("#main").length) {
|
|
hideSomeElement();
|
|
$('.fancybox-iframe').load( hideSomeElement );
|
|
} else {
|
|
$('body',$('.fancybox-iframe').contents()).find("#psException").html('<div class="alert error">Can not find this element</div>');
|
|
}
|
|
},
|
|
afterClose: function (event, ui) {
|
|
}
|
|
}], {
|
|
padding: 10
|
|
});
|
|
});
|
|
|
|
$('.element-list .plist-element').draggable({
|
|
connectToSortable: ".product-container .content",
|
|
revert: "true",
|
|
helper: "clone",
|
|
handle: ".gaction-drag",
|
|
stop: function() {
|
|
$( ".product-container .content" ).sortable({
|
|
revert: false
|
|
});
|
|
setProFormAction();
|
|
setSortAble();
|
|
}
|
|
});
|
|
|
|
$('.show-postion').click(function(){$("#postion_layout img").show()});
|
|
$('.postion-img-co').click(function(){$("#postion_layout img").toggle()});
|
|
|
|
|
|
$(document).on("click", ".column-add", function () {
|
|
createColumn(this);
|
|
$(currentId).find('.btn-add-column').trigger( "click" );
|
|
editcolumn();
|
|
//DONGND:: re-call event for new element
|
|
setProFormAction();
|
|
setSortAble();
|
|
});
|
|
setProFormAction();
|
|
setSortAble();
|
|
|
|
$('body').on('click', function (e) {
|
|
$('[data-toggle=popover]').each(function () {
|
|
// hide any open popovers when the anywhere else in the body is clicked
|
|
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
|
|
$(this).popover('hide');
|
|
}
|
|
});
|
|
});
|
|
|
|
widthselect();
|
|
setCssClass();
|
|
saveData();
|
|
thumbconfig();
|
|
//DONGND:: add config for zoom
|
|
zoomconfig();
|
|
|
|
$('#appagebuilder_details_form').submit(function() {
|
|
genreateForm();
|
|
});
|
|
|
|
//DONGND:: setup ui for element
|
|
$('.ap_proGrid .row, .ap_proGrid .column-row').addClass('ui-widget ui-widget-content ui-helper-clearfix ui-corner-all');
|
|
$('.ap_proGrid .gaction-drag, .ap_proGrid .caction-drag, .ap_proGrid .waction-drag').addClass('ui-widget-header ui-corner-all');
|
|
});
|
|
|
|
function thumbconfig(){
|
|
$('.select_thumb').change(function() {
|
|
if ($(this).val() == 'none')
|
|
$(this).closest('.formmodal').find('.select_thumb-none').hide();
|
|
else
|
|
$(this).closest('.formmodal').find('.select_thumb-none').show();
|
|
});
|
|
}
|
|
|
|
//DONGND:: add config for zoom
|
|
function zoomconfig(){
|
|
$('.select_zoom').change(function() {
|
|
if ($(this).val() == 'none' || $(this).val() == 'in' || $(this).val() == 'in_scrooll')
|
|
$(this).closest('.formmodal').find('.select-zoom-none').hide();
|
|
else
|
|
$(this).closest('.formmodal').find('.select-zoom-none').show();
|
|
});
|
|
}
|
|
|
|
function genreateForm(){
|
|
//generate grid first
|
|
var ObjectFrom = {};
|
|
ObjectFrom.gridLeft = returnObjElemnt('.ap_proGrid .gridLeft-block-content');
|
|
ObjectFrom.class = $("#main_class").val();
|
|
// console.log(ObjectFrom);
|
|
$('input[name=params]').val(JSON.stringify(ObjectFrom));
|
|
}
|
|
|
|
function returnObjElemnt(element){
|
|
var Object = {};
|
|
// console.log(element);
|
|
$(element).children().each(function(iElement){
|
|
var Obj = {};
|
|
Obj.name = $(this).data('element');
|
|
if($(this).data("form") == undefined || $(this).data("form") == "" || $(this).data("form") == '\"\"')
|
|
Obj.form = "";
|
|
else
|
|
Obj.form = $(this).data('form');
|
|
|
|
if(Obj.name=='product_image_with_thumb'){
|
|
if (Obj.form.templateview == 'left' || Obj.form.templateview == 'right' || Obj.form.templateview == 'bottom')
|
|
$("#main_class").val('product-image-thumbs product-thumbs-'+Obj.form.templateview);
|
|
else $("#main_class").val('product-image-thumbs no-thumbs');
|
|
}
|
|
|
|
if(Obj.name=='product_image_show_all'){
|
|
$("#main_class").val('product-image-gallery');
|
|
}
|
|
|
|
if($(this).hasClass('functional_buttons')){
|
|
|
|
Obj.columns = {};
|
|
$(this).find('.column-row').each(function(yElement){
|
|
var ObjectColumn = {};
|
|
ObjectColumn.form = $(this).data('form');
|
|
ObjectColumn.element = 'column';
|
|
ObjectColumn.sub = returnObjElemnt($('.content', $(this)));
|
|
Obj.columns[yElement] = ObjectColumn;
|
|
});
|
|
}
|
|
if($(this).hasClass('code')){
|
|
Obj.code = replaceSpecialString($('textarea', $(this)).val());
|
|
}
|
|
|
|
Object[iElement] = Obj;
|
|
});
|
|
//console.log($(element).children());
|
|
//console.log(Object);
|
|
|
|
return Object;
|
|
}
|
|
function replaceSpecialString(str){
|
|
return str.replace(/\t/g, "_APTAB_").replace(/\r/g, "_APNEWLINE_").replace(/\n/g, "_APENTER_").replace(/"/g, "_APQUOT_").replace(/'/g, "_APAPOST_");
|
|
}
|
|
function saveData(){
|
|
$(".btn-savewidget").click(function(){
|
|
// console.log($(".formmodal"));
|
|
var data = getFormData($(".formmodal"));
|
|
// console.log(data);
|
|
$("#modal_form .close").trigger('click');
|
|
$(currentConfig).data('form', data);
|
|
});
|
|
}
|
|
|
|
function getFormData($form){
|
|
var unindexed_array = $form.serializeArray();
|
|
var indexed_array = {};
|
|
|
|
if($(currentConfig).hasClass('column-row'))
|
|
{
|
|
$(currentConfig).attr('class', 'column-row plist-element');
|
|
}
|
|
|
|
$.map(unindexed_array, function(n, i){
|
|
if(n['name']!='hidden_from[]')
|
|
indexed_array[n['name']] = n['value'];
|
|
//process class of column
|
|
if($(currentConfig).hasClass('column-row') && (n['name'] == 'xl' || n['name'] == 'lg' || n['name'] == 'md' || n['name'] == 'sm' || n['name'] == 'xs' || n['name'] == 'sp'))
|
|
$(currentConfig).addClass('col-'+n['name']+'-'+n['value']);
|
|
|
|
});
|
|
|
|
return indexed_array;
|
|
}
|
|
|
|
function hideSomeElement(){
|
|
$('body',$('.fancybox-iframe').contents()).addClass("page-sidebar-closed");
|
|
}
|
|
|
|
function setSortAble(){
|
|
$( ".product-container .content" ).sortable({
|
|
connectWith: ".content",
|
|
});
|
|
}
|
|
|
|
function setCssClass(){
|
|
if ($(".select-class").length) {
|
|
$(".select-class").click(function () {
|
|
if ($(this).is(':checked')) {
|
|
|
|
$('.select-class').each(function() {
|
|
// REMOVE ALL CHECKBOX VALUE IN TEXT
|
|
var classChk = $(this).data("value");
|
|
input_text = $(this).closest('.well').find('.element_class').first().val();
|
|
// trim string
|
|
var input_text = input_text.replace(classChk, "");
|
|
input_text = input_text.split(" ").join(" ");
|
|
input_text = $.trim(input_text);
|
|
|
|
$(this).closest('.well').find('.element_class').first().val(input_text);
|
|
});
|
|
|
|
var classChk = $(this).data("value");
|
|
var elementText = $(this).closest('.well').find('.element_class').first();
|
|
|
|
// SET VALUE CHECKBOX TO TEXT
|
|
if ($(elementText).val().indexOf(classChk) == -1) {
|
|
if ($(elementText).val() != "") {
|
|
$(elementText).val($(elementText).val() + " " + classChk);
|
|
} else {
|
|
$(elementText).val(classChk);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$(".chk-row").click(function () {
|
|
var classChk = $(this).data("value");
|
|
var elementText = $(this).closest('.well').find('.element_class').first();
|
|
if ($(elementText).val().indexOf(classChk) == -1) {
|
|
// NOT EXIST AND ADD
|
|
if ($(elementText).val() != "") {
|
|
$(elementText).val($(elementText).val() + " " + classChk);
|
|
} else {
|
|
$(elementText).val(classChk);
|
|
}
|
|
}else{
|
|
// EXIST AND REMOVE
|
|
var find = classChk;
|
|
var re = new RegExp(find, 'g');
|
|
var text = $(elementText).val();
|
|
text = text.replace(re, '');
|
|
$(elementText).val(text);
|
|
}
|
|
});
|
|
|
|
$(".element_class").change(function () {
|
|
elementChk = $(this).closest('.well').find('input[type=checkbox]');
|
|
classText = $(this).val();
|
|
$(elementChk).each(function () {
|
|
classChk = $(this).data("value");
|
|
if (classText.indexOf(classChk) != -1) {
|
|
if (!$(this).is(':checked'))
|
|
$(this).prop("checked", true);
|
|
} else {
|
|
$(this).prop("checked", false);
|
|
}
|
|
});
|
|
});
|
|
$(".element_class").trigger("change");
|
|
}
|
|
}
|
|
|
|
//set action when c
|
|
function setProFormAction(){
|
|
$('#home_wrapper .plist-code').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).click(function(){
|
|
textAre = $(this).closest('.plist-element').find('textarea').first();
|
|
if(textAre.attr('rows') == 20)
|
|
$(textAre).attr('rows',5);
|
|
else
|
|
$(textAre).attr('rows',20);
|
|
});
|
|
$(this).addClass('setaction');
|
|
}
|
|
|
|
});
|
|
|
|
$('#home_wrapper .btn-add-column').each(function(){
|
|
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).popover({
|
|
html: true,
|
|
content: function () {
|
|
currentId = $(this).closest('.plist-element');
|
|
return $('#addnew-column-form').html();
|
|
}
|
|
});
|
|
$(this).mousedown(function(){
|
|
// toggle popover when link is clicked
|
|
$(this).popover('toggle');
|
|
});
|
|
|
|
$(this).addClass('setaction');
|
|
}
|
|
|
|
});
|
|
|
|
$('#home_wrapper .plist-eremove').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).click(function(){
|
|
if(!confirm("Are you sure to remove?")) return false;
|
|
$(this).closest('.plist-element').remove();
|
|
$(this).addClass('setaction');
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#home_wrapper .btn-edit-group').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).click(function(){
|
|
currentConfig = $(this).closest('.plist-element');
|
|
$('#modal_form .modal-footer').show();
|
|
|
|
$('#modal_form .modal-body').html('');
|
|
|
|
column_config = $("#group_config").clone(true);
|
|
|
|
//load config
|
|
data = $(currentConfig).data('form');
|
|
column_config = setData(data, column_config);
|
|
$('#modal_form .modal-body').append('<form class="formmodal"></form>');
|
|
$('#modal_form .formmodal').append(column_config);
|
|
|
|
$('#modal_form').removeClass('modal-new').addClass('modal-edit');
|
|
$("#modal_form").modal({
|
|
"backdrop": "static"
|
|
});
|
|
});
|
|
$(this).addClass('setaction');
|
|
}
|
|
});
|
|
|
|
$('#home_wrapper .element-config').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).click(function(){
|
|
currentConfig = $(this).closest('.plist-element');
|
|
$('#modal_form .modal-footer').show();
|
|
|
|
$('#modal_form .modal-body').html('');
|
|
|
|
dataconfig = $(this).data('config');
|
|
|
|
column_config = $("#"+dataconfig).clone(true);
|
|
//load config
|
|
|
|
data = $(currentConfig).data('form');
|
|
|
|
column_config = setData(data, column_config);
|
|
|
|
if($(column_config).find('.select_thumb').val() == 'none')
|
|
$(column_config).find('.select_thumb-none').hide();
|
|
else
|
|
$(column_config).find('.select_thumb-none').show();
|
|
|
|
//DONGND:: add zoom config
|
|
if($(column_config).find('.select_zoom').val() == 'none' || $(column_config).find('.select_zoom').val() == 'in' || $(column_config).find('.select_zoom').val() == 'in_scrooll')
|
|
$(column_config).find('.select-zoom-none').hide();
|
|
else
|
|
$(column_config).find('.select-zoom-none').show();
|
|
|
|
$('#modal_form .modal-body').append('<form class="formmodal"></form>');
|
|
$('#modal_form .formmodal').append(column_config);
|
|
|
|
$('#modal_form').removeClass('modal-new').addClass('modal-edit');
|
|
$("#modal_form").modal({
|
|
"backdrop": "static"
|
|
});
|
|
});
|
|
$(this).addClass('setaction');
|
|
}
|
|
});
|
|
|
|
editcolumn();
|
|
}
|
|
function setData(data, column_config){
|
|
if(!data || data == 'undefined' || data == 'undefined') return column_config;
|
|
|
|
Object.keys(data).forEach(function (key) {
|
|
//$('.' + key).data('form', dataObj[key]);
|
|
$(column_config).find('input[name='+key+']').val(data[key]);
|
|
|
|
$(column_config).find('select[name='+key+']').val(data[key]);
|
|
|
|
if(key=="class" && $(column_config).find('.select-class').length)
|
|
$(column_config).find('.select-class').each(function(){
|
|
if(data[key].indexOf($(this).data('value'))>-1) $(this).prop("checked", true);
|
|
});
|
|
if(key=="xl" || key=="lg" || key=="md" || key=="sm" || key=="xs" || key=="sp"){
|
|
classcss = 'width-select-'+key+'-'+data[key];
|
|
classcss = classcss.replace(".", "-");
|
|
$(column_config).find('.'+classcss).trigger('click');
|
|
}
|
|
});
|
|
|
|
return column_config;
|
|
}
|
|
function editcolumn()
|
|
{
|
|
$('#home_wrapper .btn-edit-column').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$(this).click(function(){
|
|
currentConfig = $(this).closest('.plist-element');
|
|
|
|
$('#modal_form .modal-body').html('');
|
|
|
|
$('#modal_form .modal-footer').show();
|
|
|
|
data = $(currentConfig).data('form');
|
|
//console.log(data);
|
|
column_config = $("#column_config").clone(true);
|
|
column_config = setData(data, column_config);
|
|
|
|
$('#modal_form .modal-body').append('<form class="formmodal"></form>');
|
|
$('#modal_form .formmodal').append(column_config);
|
|
|
|
$('#modal_form').removeClass('modal-new').addClass('modal-edit');
|
|
$("#modal_form").modal({
|
|
"backdrop": "static"
|
|
});
|
|
//widthselect();
|
|
});
|
|
$(this).addClass('setaction');
|
|
}
|
|
});
|
|
}
|
|
function widthselect(){
|
|
$('.width-select').each(function(){
|
|
if(!$(this).hasClass('setaction')){
|
|
$('.width-select').click(function () {
|
|
btnGroup = $(this).closest('.btn-group');
|
|
spanObj = $('.width-val', $(this));
|
|
width = $(spanObj).data('width');
|
|
$('.col-val', $(btnGroup)).val(width);
|
|
$('.apbtn-width .width-val', $(btnGroup)).html($(spanObj).html());
|
|
$('.apbtn-width .width-val', $(btnGroup)).attr('class', $(spanObj).attr('class'));
|
|
});
|
|
$(this).addClass('setaction');
|
|
}
|
|
});
|
|
}
|
|
function createColumn(obj) {
|
|
var widthCol = $(obj).data('width');
|
|
var classActive = returnWidthClass();
|
|
var col = $(obj).data('col');
|
|
var realValue = widthCol.toString().replace('.', '-');
|
|
for (var i = 1; i <= col; i++) {
|
|
wrapper = currentId.find('.group');
|
|
|
|
column = $('#default_column').clone();
|
|
var cls = $(column).attr("class");
|
|
//column-row col-sp-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all
|
|
cls = cls.replace("col-xl-12", "col-xl-" + realValue);
|
|
cls = cls.replace("col-lg-12", "col-lg-" + realValue);
|
|
cls = cls.replace("col-md-12", "col-md-" + realValue);
|
|
cls = cls.replace("col-sm-12", "col-sm-" + realValue);
|
|
cls = cls.replace("col-xs-12", "col-xs-" + realValue);
|
|
cls = cls.replace("col-sp-12", "col-sp-" + realValue);
|
|
$(column).attr("class", cls);
|
|
objColumn = {form_id: "form_" + getRandomNumber()};
|
|
if (classActive == "md" || classActive == "lg" || classActive == "xl") {
|
|
objColumn.md = widthCol;
|
|
objColumn.lg = widthCol;
|
|
objColumn.xl = widthCol;
|
|
}
|
|
//DONGND:: set default for sm, xs, sp
|
|
objColumn.sm = 12;
|
|
objColumn.xs = 12;
|
|
objColumn.sp = 12;
|
|
//jQuery.extend(objColumn, $globalthis.getColDefault());
|
|
$(column).data("form", objColumn);
|
|
|
|
column.removeAttr('id');
|
|
wrapper.append(column);
|
|
getNumberColumnInClass(column, classActive);
|
|
$(".label-tooltip").tooltip();
|
|
}
|
|
}
|
|
|
|
function getNumberColumnInClass(obj, type) {
|
|
var cls = $(obj).attr("class").split(" ");
|
|
var len = cls.length;
|
|
var result = "";
|
|
for (var i = 0; i < len; i++) {
|
|
if (cls[i].search("col-" + type) >= 0) {
|
|
result = cls[i];
|
|
break;
|
|
}
|
|
}
|
|
var temp = result.replace("col-" + type + "-", "");
|
|
$(obj).find(".pull-right .btn-group .btn span:first-child").attr("class", "width-val ap-w-" + temp);
|
|
var group = $(obj).find("ul.dropdown-menu-right");
|
|
$(group).find("li").removeClass("selected");
|
|
$(group).find(".col-" + temp).addClass("selected");
|
|
}
|
|
|
|
function getRandomNumber()
|
|
{
|
|
return (+new Date() + (Math.random() * 10000000000000000)).toString().replace('.', '');
|
|
}
|
|
function returnWidthClass(width) {
|
|
if (!width)
|
|
width = windowWidth;
|
|
|
|
if (parseInt(width) >= 1200)
|
|
return 'xl';
|
|
if (parseInt(width) >= 992)
|
|
return 'lg';
|
|
if (parseInt(width) >= 768)
|
|
return 'md';
|
|
if (parseInt(width) >= 576)
|
|
return 'sm';
|
|
if (parseInt(width) >= 480)
|
|
return 'xs';
|
|
if (parseInt(width) < 480)
|
|
return 'sp';
|
|
};
|
|
$(document).on("click", ".btn-fwidth", function () {
|
|
$('#home_wrapper').css('width', $(this).data('width'));
|
|
|
|
btnElement = $(this);
|
|
$('.btn-fwidth').removeClass('active');
|
|
$(this).addClass('active');
|
|
//reset
|
|
if ($(this).hasClass('width-default')) {
|
|
windowWidth = $(window).width();
|
|
$('#home_wrapper').attr('class', 'default');
|
|
} else {
|
|
$('#home_wrapper').attr('class', 'col-' + returnWidthClass(parseInt($(this).data('width'))));
|
|
windowWidth = $(this).data('width');
|
|
}
|
|
classVal = returnWidthClass();
|
|
$(".column-row", $('#home_wrapper')).each(function () {
|
|
valueFra = $(this).data("form")[classVal];
|
|
$(".apbtn-width .width-val", $(this)).attr("class", "width-val ap-w-" + valueFra.toString().replace(".", "-"));
|
|
});
|
|
initColumnSetting();
|
|
});
|
|
|
|
function initColumnSetting() {
|
|
var classActive = returnWidthClass();
|
|
$(".column-row").each(function () {
|
|
getNumberColumnInClass(this, classActive);
|
|
});
|
|
}
|
|
|
|
function getNumberColumnInClass(obj, type) {
|
|
var cls = $(obj).attr("class").split(" ");
|
|
var len = cls.length;
|
|
var result = "";
|
|
for (var i = 0; i < len; i++) {
|
|
if (cls[i].search("col-" + type) >= 0) {
|
|
result = cls[i];
|
|
break;
|
|
}
|
|
}
|
|
var temp = result.replace("col-" + type + "-", "");
|
|
$(obj).find(".pull-right .btn-group .btn span:first-child").attr("class", "width-val ap-w-" + temp);
|
|
var group = $(obj).find("ul.dropdown-menu-right");
|
|
$(group).find("li").removeClass("selected");
|
|
$(group).find(".col-" + temp).addClass("selected");
|
|
} |