first commit
This commit is contained in:
570
modules/appagebuilder/views/js/admin/detail.js
Normal file
570
modules/appagebuilder/views/js/admin/detail.js
Normal file
@@ -0,0 +1,570 @@
|
||||
/**
|
||||
* @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");
|
||||
}
|
||||
Reference in New Issue
Block a user