216 lines
12 KiB
JavaScript
216 lines
12 KiB
JavaScript
/* WP Multi Formular - Admin JS v2.0 */
|
|
(function($){
|
|
'use strict';
|
|
var fields=[],activeIndex=null,multiStep=false,stepCount=1;
|
|
|
|
$(document).ready(function(){
|
|
var $cv=$('#wmf-canvas'); if(!$cv.length) return;
|
|
var raw=$cv.data('fields'); if(raw&&Array.isArray(raw)&&raw.length) fields=raw;
|
|
multiStep=$('#wmf-multistep-toggle').is(':checked');
|
|
stepCount=calcSteps();
|
|
renderCanvas(); initSortable(); initPalette(); initTabs();
|
|
initFormSubmit(); initPreview(); initShortcodeCopy();
|
|
initPaletteSearch(); initSettingsClose(); initMultiStepToggle();
|
|
});
|
|
|
|
function renderCanvas(){
|
|
var $l=$('#wmf-field-list'),$e=$('#wmf-canvas-empty');
|
|
$l.empty();
|
|
if(!fields.length){ $e.removeClass('wmf-hidden'); }
|
|
else { $e.addClass('wmf-hidden'); $.each(fields,function(i,f){ $l.append(buildRow(f,i)); }); }
|
|
updateHighlight(); updateStepLabels();
|
|
}
|
|
function buildRow(field,index){
|
|
var def=getDef(field.type)||{icon:'dashicons-edit'};
|
|
var lbl=field.label||WMF.i18n.no_label;
|
|
var req=(field.required==='1')?'<span class="wmf-field-req-mark">*</span>':'';
|
|
var cond=(field.conditional_logic==='1')?'<span title="Bedingte Logik" style="color:#2271b1;font-size:12px;">⚡</span>':'';
|
|
var step=multiStep?'<select class="wmf-step-select" data-index="'+index+'" title="Schritt">'+stepOpts(field.step||0)+'</select>':'';
|
|
return $('<div>').addClass('wmf-canvas-field').attr('data-index',index).html(
|
|
'<span class="wmf-drag-handle dashicons dashicons-menu"></span>'+
|
|
'<span class="wmf-field-type-icon dashicons '+esc(def.icon)+'"></span>'+
|
|
'<span class="wmf-field-label">'+esc(lbl)+req+'</span>'+
|
|
cond+step+
|
|
'<span class="wmf-field-type-badge">'+esc(field.type)+'</span>'+
|
|
'<button type="button" class="wmf-field-del">✕</button>'
|
|
).on('click',function(e){
|
|
if($(e.target).is('.wmf-field-del,.wmf-step-select')) return;
|
|
selectField(index);
|
|
});
|
|
}
|
|
function stepOpts(cur){ var h=''; for(var i=0;i<stepCount;i++) h+='<option value="'+i+'" '+(cur===i?'selected':'')+'>S'+(i+1)+'</option>'; return h; }
|
|
function calcSteps(){ var m=0; $.each(fields,function(i,f){ if((f.step||0)>m) m=f.step||0; }); return m+1; }
|
|
function selectField(index){
|
|
activeIndex=index; updateHighlight();
|
|
loadSettings(index);
|
|
$('#wmf-form-settings-panel').hide(); $('#wmf-field-settings-panel').show();
|
|
}
|
|
function updateHighlight(){
|
|
$('.wmf-canvas-field').removeClass('wmf-active');
|
|
if(activeIndex!==null) $('.wmf-canvas-field[data-index="'+activeIndex+'"]').addClass('wmf-active');
|
|
}
|
|
function deselectField(){
|
|
activeIndex=null; $('.wmf-canvas-field').removeClass('wmf-active');
|
|
$('#wmf-field-settings-panel').hide(); $('#wmf-form-settings-panel').show();
|
|
}
|
|
function loadSettings(index){
|
|
var field=fields[index];
|
|
$('#wmf-field-settings-title').text((field.label||field.type)+' Einstellungen');
|
|
$('#wmf-field-settings-body').html('<p class="wmf-loading-msg">'+WMF.i18n.loading+'</p>');
|
|
$.post(WMF.ajax_url,{action:'wmf_get_field_settings',nonce:WMF.nonce,field_type:field.type,field_data:JSON.stringify(field)},function(res){
|
|
if(!res.success){ $('#wmf-field-settings-body').html('<p style="color:red">Fehler beim Laden.</p>'); return; }
|
|
$('#wmf-field-settings-body').html(res.data.html);
|
|
bindSettings(index); initOptsEditor(index); initCondUI(index);
|
|
}).fail(function(){ $('#wmf-field-settings-body').html('<p style="color:red">AJAX-Fehler.</p>'); });
|
|
}
|
|
function bindSettings(index){
|
|
$('#wmf-field-settings-body').find('[data-setting]').off('input change').on('input change',function(){
|
|
var k=$(this).data('setting'),v=$(this).is(':checkbox')?($(this).is(':checked')?'1':'0'):$(this).val();
|
|
fields[index][k]=v;
|
|
$('.wmf-canvas-field[data-index="'+index+'"]').replaceWith(buildRow(fields[index],index));
|
|
updateHighlight();
|
|
});
|
|
$(document).off('change.ct').on('change.ct','[data-setting="conditional_logic"]',function(){
|
|
$(this).closest('.wmf-field-setting').nextAll('.wmf-conditional-rules').first().toggle($(this).val()==='1');
|
|
});
|
|
}
|
|
function initOptsEditor(index){
|
|
var field=fields[index];
|
|
if(['select','checkbox','radio'].indexOf(field.type)===-1) return;
|
|
var $body=$('#wmf-field-settings-body');
|
|
var $w=$('<div class="wmf-field-setting"><label>Optionen</label><div class="wmf-opts-list"></div><button type="button" class="button wmf-add-opt">+ Option</button></div>');
|
|
$body.append($w);
|
|
function render(){
|
|
var $l=$w.find('.wmf-opts-list').empty();
|
|
$.each(field.options||[],function(i,opt){
|
|
var $r=$('<div class="wmf-opt-row"><input type="text" class="ol" placeholder="Bezeichnung" value="'+esc(opt.label)+'"><input type="text" class="ov" placeholder="Wert" value="'+esc(opt.value)+'"><button type="button" class="wmf-opt-del">x</button></div>');
|
|
$r.find('.ol').on('input',function(){ field.options[i].label=$(this).val(); fields[index]=field; });
|
|
$r.find('.ov').on('input',function(){ field.options[i].value=$(this).val(); fields[index]=field; });
|
|
$r.find('.wmf-opt-del').on('click',function(){ field.options.splice(i,1); fields[index]=field; render(); });
|
|
$l.append($r);
|
|
});
|
|
}
|
|
render();
|
|
$w.find('.wmf-add-opt').on('click',function(){
|
|
if(!field.options) field.options=[];
|
|
var n=field.options.length+1; field.options.push({label:'Option '+n,value:'option_'+n});
|
|
fields[index]=field; render();
|
|
});
|
|
}
|
|
function initCondUI(index){
|
|
var $rl=$('.wmf-conditional-rule-list'); if(!$rl.length) return;
|
|
var opts='<option value="">Feld auswaehlen</option>';
|
|
$.each(fields,function(i,f){ if(i!==index) opts+='<option value="'+esc(f.id)+'">'+esc(f.label||f.id)+'</option>'; });
|
|
$rl.find('.wmf-rule-field').each(function(){ var v=$(this).val(); $(this).html(opts); if(v) $(this).val(v); });
|
|
function sync(){
|
|
var r=[];
|
|
$rl.find('.wmf-rule-row').each(function(){
|
|
r.push({field:$(this).find('.wmf-rule-field').val(),operator:$(this).find('.wmf-rule-op').val(),value:$(this).find('.wmf-rule-value').val()});
|
|
});
|
|
fields[index].conditional_rules=r;
|
|
}
|
|
$(document).off('click.ar').on('click.ar','.wmf-add-rule',function(){
|
|
var $r=$('<div class="wmf-rule-row"><select class="wmf-rule-field">'+opts+'</select><select class="wmf-rule-op"><option value="=">ist</option><option value="!=">ist nicht</option><option value="contains">enthaelt</option><option value="not_empty">ist ausgefuellt</option></select><input type="text" class="wmf-rule-value" placeholder="Wert"><button type="button" class="wmf-rule-remove">x</button></div>');
|
|
$rl.append($r); sync();
|
|
});
|
|
$(document).off('click.rr').on('click.rr','.wmf-rule-remove',function(){ $(this).closest('.wmf-rule-row').remove(); sync(); });
|
|
$(document).off('change.sr input.sr').on('change.sr input.sr','.wmf-rule-field,.wmf-rule-op,.wmf-rule-value',sync);
|
|
}
|
|
$(document).on('click','.wmf-field-del',function(e){
|
|
e.stopPropagation();
|
|
if(!confirm(WMF.i18n.confirm_delete)) return;
|
|
var idx=parseInt($(this).closest('.wmf-canvas-field').data('index'));
|
|
fields.splice(idx,1);
|
|
if(activeIndex===idx){ activeIndex=null; deselectField(); } else if(activeIndex>idx) activeIndex--;
|
|
renderCanvas(); initSortable();
|
|
});
|
|
function initSettingsClose(){
|
|
$('#wmf-field-settings-close').on('click',deselectField);
|
|
$('#wmf-delete-field-btn').on('click',function(){
|
|
if(activeIndex===null) return;
|
|
if(!confirm(WMF.i18n.confirm_delete)) return;
|
|
fields.splice(activeIndex,1); activeIndex=null; deselectField(); renderCanvas(); initSortable();
|
|
});
|
|
}
|
|
function initPalette(){
|
|
$(document).on('click','.wmf-palette-item',function(){ addField($(this).data('type')); });
|
|
$(document).on('dragstart','.wmf-palette-item',function(e){ e.originalEvent.dataTransfer.setData('text/plain',$(this).data('type')); });
|
|
var $cv=$('#wmf-canvas');
|
|
$cv.on('dragover',function(e){ e.preventDefault(); $cv.addClass('drag-over'); });
|
|
$cv.on('dragleave drop',function(){ $cv.removeClass('drag-over'); });
|
|
$cv.on('drop',function(e){ e.preventDefault(); var t=e.originalEvent.dataTransfer.getData('text/plain'); if(t) addField(t); });
|
|
}
|
|
function addField(type){
|
|
var def=getDef(type); if(!def) return;
|
|
var f=$.extend(true,{},def.defaults);
|
|
f.id='field_'+Math.random().toString(36).substr(2,8); f.name=f.id; f.label=def.label; f.step=0;
|
|
fields.push(f); activeIndex=fields.length-1;
|
|
renderCanvas(); initSortable(); selectField(activeIndex);
|
|
}
|
|
function initSortable(){
|
|
$('#wmf-field-list').sortable({
|
|
handle:'.wmf-drag-handle',placeholder:'wmf-canvas-field ui-sortable-placeholder',tolerance:'pointer',
|
|
update:function(){
|
|
var r=[];
|
|
$('#wmf-field-list .wmf-canvas-field').each(function(){ r.push(fields[parseInt($(this).data('index'))]); });
|
|
fields=r; activeIndex=null; renderCanvas(); deselectField();
|
|
}
|
|
});
|
|
}
|
|
$(document).on('change','.wmf-step-select',function(){
|
|
fields[parseInt($(this).data('index'))].step=parseInt($(this).val());
|
|
stepCount=calcSteps(); updateStepLabels();
|
|
});
|
|
function updateStepLabels(){
|
|
stepCount=calcSteps(); var $sl=$('#wmf-step-labels'); if(!$sl.length) return;
|
|
while($sl.find('input').length<stepCount){
|
|
var n=$sl.find('input').length+1;
|
|
$sl.append('<div class="wmf-sg"><label>Schritt '+n+'</label><input type="text" name="step_labels[]" placeholder="Schritt '+n+'" class="widefat"></div>');
|
|
}
|
|
}
|
|
function initMultiStepToggle(){
|
|
$('#wmf-multistep-toggle').on('change',function(){ multiStep=$(this).is(':checked'); renderCanvas(); });
|
|
$('#wmf-add-step-label').on('click',function(){ stepCount++; updateStepLabels(); });
|
|
}
|
|
function initTabs(){
|
|
$(document).on('click','.wmf-tab',function(){
|
|
var t=$(this).data('tab'),$p=$(this).closest('.wmf-panel,.wmf-panel-body');
|
|
$p.find('.wmf-tab').removeClass('active'); $p.find('.wmf-tab-pane').removeClass('active');
|
|
$(this).addClass('active'); $p.find('.wmf-tab-pane[data-tab="'+t+'"]').addClass('active');
|
|
});
|
|
}
|
|
function initFormSubmit(){
|
|
$('#wmf-builder-form').on('submit',function(){ $('#wmf-form-fields-json').val(JSON.stringify(fields)); });
|
|
}
|
|
function initPreview(){
|
|
$('#wmf-preview-btn').on('click',function(){
|
|
var $o=$('#wmf-preview-overlay'),$c=$('#wmf-preview-content');
|
|
$o.show(); $c.html('<p style="text-align:center;padding:30px;color:#999">Lade Vorschau...</p>');
|
|
$.post(WMF.ajax_url,{action:'wmf_preview_form',nonce:WMF.nonce,form_id:$('input[name=form_id]').val()||0,fields:JSON.stringify(fields)},function(res){
|
|
$c.html(res.success?res.data.html:'<p style="color:red">Vorschau-Fehler.</p>');
|
|
});
|
|
});
|
|
$('#wmf-preview-overlay').on('click',function(e){ if($(e.target).is(this)) $(this).hide(); });
|
|
$(document).on('click','#wmf-preview-close',function(){ $('#wmf-preview-overlay').hide(); });
|
|
}
|
|
function initShortcodeCopy(){
|
|
$(document).on('click','.wmf-sc-copy,.wmf-sc-badge',function(){
|
|
var t=$(this).text().trim();
|
|
if(navigator.clipboard) navigator.clipboard.writeText(t).then(function(){ toast('Shortcode kopiert!'); });
|
|
});
|
|
}
|
|
function initPaletteSearch(){
|
|
$('#wmf-palette-search').on('input',function(){
|
|
var term=$(this).val().toLowerCase();
|
|
$('.wmf-palette-item').each(function(){ $(this).toggleClass('wmf-hidden',term!==''&&$(this).data('label').toLowerCase().indexOf(term)===-1); });
|
|
});
|
|
}
|
|
function getDef(type){ return WMF.fields.find(function(f){ return f.type===type; })||null; }
|
|
function esc(s){ return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
|
function toast(msg){
|
|
var $t=$('<div style="position:fixed;bottom:24px;right:24px;background:#2271b1;color:#fff;padding:10px 20px;border-radius:4px;z-index:99999;font-size:14px;opacity:0;transition:opacity .3s;">'+msg+'</div>').appendTo('body');
|
|
setTimeout(function(){$t.css('opacity',1);},10);
|
|
setTimeout(function(){$t.css('opacity',0);setTimeout(function(){$t.remove();},400);},2200);
|
|
}
|
|
})(jQuery);
|