Upload folder via GUI - assets
This commit is contained in:
Git Manager GUI
198
assets/css/admin.css
Normal file
198
assets/css/admin.css
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
/* WP Multi Formular – Admin CSS v2.0 */
|
||||||
|
:root{--wmf-primary:#2271b1;--wmf-primary-h:#135e96;--wmf-error:#d63638;--wmf-border:#dcdcde;--wmf-radius:4px;--wmf-shadow:0 1px 4px rgba(0,0,0,.1);}
|
||||||
|
.wmf-admin-wrap{max-width:1400px;}
|
||||||
|
.wmf-page-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
|
||||||
|
.wmf-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:#e8f0fb;color:var(--wmf-primary);vertical-align:middle;}
|
||||||
|
.wmf-sc-copy,.wmf-sc-badge{font-size:12px;font-family:monospace;background:#f6f7f7;border:1px solid var(--wmf-border);border-radius:3px;padding:3px 8px;cursor:pointer;display:inline-block;transition:background .15s;}
|
||||||
|
.wmf-sc-copy:hover,.wmf-sc-badge:hover{background:#e0e0e0;}
|
||||||
|
.wmf-row-actions .button{margin-right:4px;}
|
||||||
|
.wmf-btn-delete{color:var(--wmf-error)!important;border-color:var(--wmf-error)!important;}
|
||||||
|
.wmf-btn-delete:hover{background:#fef2f2!important;}
|
||||||
|
.wmf-empty-state{text-align:center;padding:60px 20px;background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);margin-top:20px;}
|
||||||
|
.wmf-empty-icon{font-size:56px;color:#c3c4c7;display:block;margin-bottom:12px;}
|
||||||
|
/* Builder */
|
||||||
|
.wmf-form-title-row{display:flex;gap:10px;align-items:center;margin:14px 0;}
|
||||||
|
.wmf-title-input{flex:1;font-size:21px;font-weight:600;padding:8px 12px;border:2px solid var(--wmf-border);border-radius:var(--wmf-radius);box-sizing:border-box;max-width:600px;}
|
||||||
|
.wmf-title-input:focus{border-color:var(--wmf-primary);outline:none;}
|
||||||
|
.wmf-builder-layout{display:grid;grid-template-columns:210px 1fr 275px;gap:14px;align-items:start;}
|
||||||
|
.wmf-palette{background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);padding:12px;position:sticky;top:32px;max-height:calc(100vh - 100px);overflow-y:auto;}
|
||||||
|
.wmf-palette-search{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #c3c4c7;border-radius:3px;font-size:13px;margin-bottom:10px;}
|
||||||
|
.wmf-palette-cat-title{font-size:11px;text-transform:uppercase;color:#a7aaad;margin:10px 0 5px;display:flex;align-items:center;gap:5px;}
|
||||||
|
.wmf-palette-cat-title .dashicons{font-size:14px;width:14px;height:14px;}
|
||||||
|
.wmf-palette-item{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:3px;background:#f6f7f7;border:1px solid #e0e0e0;cursor:grab;font-size:13px;user-select:none;transition:background .1s,border-color .1s;margin-bottom:4px;}
|
||||||
|
.wmf-palette-item:hover{background:#e8f0fb;border-color:var(--wmf-primary);color:var(--wmf-primary);}
|
||||||
|
.wmf-palette-item .dashicons{font-size:15px;width:15px;height:15px;flex-shrink:0;}
|
||||||
|
.wmf-palette-item.wmf-hidden{display:none;}
|
||||||
|
.wmf-canvas-col{display:flex;flex-direction:column;gap:10px;}
|
||||||
|
.wmf-canvas{min-height:420px;background:#fff;border:2px dashed #c3c4c7;border-radius:var(--wmf-radius);padding:14px;transition:border-color .2s;}
|
||||||
|
.wmf-canvas.drag-over{border-color:var(--wmf-primary);background:#f0f6fc;}
|
||||||
|
.wmf-canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:#a7aaad;text-align:center;}
|
||||||
|
.wmf-canvas-empty.wmf-hidden{display:none;}
|
||||||
|
.wmf-field-list{display:flex;flex-direction:column;gap:6px;}
|
||||||
|
.wmf-canvas-field{display:flex;align-items:center;gap:8px;background:#f6f7f7;border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);padding:9px 11px;cursor:pointer;transition:border-color .15s,background .15s;}
|
||||||
|
.wmf-canvas-field:hover{border-color:var(--wmf-primary);background:#f0f6fc;}
|
||||||
|
.wmf-canvas-field.wmf-active{border-color:var(--wmf-primary);background:#e8f0fb;box-shadow:0 0 0 2px rgba(34,113,177,.2);}
|
||||||
|
.wmf-drag-handle{cursor:grab;color:#a7aaad;font-size:18px;flex-shrink:0;}
|
||||||
|
.wmf-drag-handle:hover{color:var(--wmf-primary);}
|
||||||
|
.wmf-field-type-icon{color:#646970;flex-shrink:0;}
|
||||||
|
.wmf-field-label{flex:1;font-size:13px;font-weight:500;}
|
||||||
|
.wmf-field-type-badge{font-size:10px;color:#a7aaad;}
|
||||||
|
.wmf-field-req-mark{color:var(--wmf-error);font-size:13px;}
|
||||||
|
.wmf-step-badge{font-size:10px;background:#e8f0fb;color:var(--wmf-primary);padding:1px 6px;border-radius:8px;}
|
||||||
|
.wmf-step-select{font-size:11px;border:1px solid #c3c4c7;border-radius:3px;padding:1px 4px;background:#fff;color:#646970;cursor:pointer;flex-shrink:0;}
|
||||||
|
.wmf-field-del{background:none;border:none;cursor:pointer;color:#a7aaad;padding:2px 4px;border-radius:3px;font-size:15px;transition:color .1s,background .1s;}
|
||||||
|
.wmf-field-del:hover{color:var(--wmf-error);background:#fef2f2;}
|
||||||
|
.wmf-canvas-field.ui-sortable-helper{box-shadow:var(--wmf-shadow);opacity:.9;}
|
||||||
|
.wmf-canvas-field.ui-sortable-placeholder{background:#e8f0fb;border:2px dashed var(--wmf-primary);visibility:visible!important;}
|
||||||
|
.wmf-canvas-footer{display:flex;gap:8px;padding:12px 14px;background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);position:sticky;bottom:12px;box-shadow:var(--wmf-shadow);}
|
||||||
|
.wmf-settings-col{position:sticky;top:32px;max-height:calc(100vh - 100px);overflow-y:auto;}
|
||||||
|
.wmf-panel{background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);margin-bottom:10px;overflow:hidden;}
|
||||||
|
.wmf-panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f6f7f7;border-bottom:1px solid var(--wmf-border);font-size:13px;font-weight:600;}
|
||||||
|
.wmf-panel-close{background:none;border:none;cursor:pointer;color:#a7aaad;font-size:16px;padding:0;}
|
||||||
|
.wmf-panel-close:hover{color:var(--wmf-error);}
|
||||||
|
.wmf-panel-body{padding:14px;}
|
||||||
|
.wmf-panel-foot{padding:10px 14px;border-top:1px solid var(--wmf-border);}
|
||||||
|
.wmf-loading-msg{color:#a7aaad;font-style:italic;font-size:13px;}
|
||||||
|
.wmf-tabs{display:flex;border-bottom:1px solid var(--wmf-border);background:#f6f7f7;}
|
||||||
|
.wmf-tab{background:none;border:none;padding:9px 13px;font-size:12px;cursor:pointer;border-bottom:2px solid transparent;color:#646970;margin-bottom:-1px;font-weight:500;}
|
||||||
|
.wmf-tab:hover{color:var(--wmf-primary);}
|
||||||
|
.wmf-tab.active{color:var(--wmf-primary);border-bottom-color:var(--wmf-primary);font-weight:600;background:#fff;}
|
||||||
|
.wmf-tab-pane{display:none;padding:14px;}
|
||||||
|
.wmf-tab-pane.active{display:block;}
|
||||||
|
.wmf-sg{margin-bottom:12px;}
|
||||||
|
.wmf-sg label{display:block;font-size:12px;font-weight:600;color:#1d2327;margin-bottom:4px;}
|
||||||
|
.wmf-sg-head{font-size:11px;text-transform:uppercase;color:#a7aaad;font-weight:600;margin-bottom:8px!important;}
|
||||||
|
.wmf-sg input[type=text],.wmf-sg input[type=email],.wmf-sg input[type=url],.wmf-sg input[type=number],.wmf-sg textarea,.wmf-sg select{width:100%;box-sizing:border-box;}
|
||||||
|
.wmf-field-setting{margin-bottom:10px;}
|
||||||
|
.wmf-field-setting label{display:block;font-size:12px;font-weight:600;margin-bottom:3px;color:#1d2327;}
|
||||||
|
.wmf-field-setting input[type=text],.wmf-field-setting input[type=number],.wmf-field-setting textarea,.wmf-field-setting select{width:100%;box-sizing:border-box;}
|
||||||
|
.wmf-field-inline label{display:flex!important;align-items:center;gap:6px;font-weight:normal!important;font-size:13px;cursor:pointer;}
|
||||||
|
.wmf-settings-sep{border:none;border-top:1px solid var(--wmf-border);margin:12px 0;}
|
||||||
|
.wmf-hint{font-size:10px;color:#a7aaad;font-weight:normal;}
|
||||||
|
.wmf-rule-row{display:flex;gap:5px;margin-bottom:6px;align-items:center;}
|
||||||
|
.wmf-rule-row select,.wmf-rule-row input{flex:1;font-size:12px;}
|
||||||
|
.wmf-rule-remove{background:none;border:none;color:var(--wmf-error);cursor:pointer;font-size:15px;flex-shrink:0;padding:0 4px;}
|
||||||
|
.wmf-add-rule{font-size:12px;margin-top:4px;}
|
||||||
|
.wmf-conditional-rules{margin-top:10px;padding:10px;background:#f9f9f9;border-radius:3px;border:1px solid var(--wmf-border);}
|
||||||
|
.wmf-opts-list{margin-bottom:8px;}
|
||||||
|
.wmf-opt-row{display:flex;gap:5px;align-items:center;margin-bottom:5px;}
|
||||||
|
.wmf-opt-row input{flex:1;font-size:12px;}
|
||||||
|
.wmf-opt-del{background:none;border:none;color:var(--wmf-error);cursor:pointer;font-size:15px;flex-shrink:0;}
|
||||||
|
.wmf-add-opt{font-size:12px;}
|
||||||
|
.wmf-submissions-wrap{margin-top:14px;}
|
||||||
|
.wmf-submissions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
|
||||||
|
.wmf-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;}
|
||||||
|
.wmf-status-neu{background:#e8f0fb;color:var(--wmf-primary);}
|
||||||
|
.wmf-status-gelesen{background:#f0fdf4;color:#166534;}
|
||||||
|
.wmf-status-archiviert{background:#f6f7f7;color:#646970;}
|
||||||
|
#wmf-preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;overflow-y:auto;padding:20px;}
|
||||||
|
.wmf-preview-inner{max-width:700px;margin:20px auto;background:#fff;border-radius:8px;padding:32px;position:relative;}
|
||||||
|
/* Integrations */
|
||||||
|
.wmf-integrations-widget .mode-group{margin:0 0 1em;}
|
||||||
|
.wmf-buttongroup{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
|
||||||
|
.wmf-buttongroup input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
|
||||||
|
.wmf-buttongroup label span{display:inline-block;padding:4px 12px;border:1px solid #8c8f94;border-radius:3px;cursor:pointer;background:#f6f7f7;font-size:13px;line-height:2;}
|
||||||
|
.wmf-buttongroup input[type=radio]:checked+span{background:var(--wmf-primary);border-color:var(--wmf-primary);color:#fff;}
|
||||||
|
.wmf-service-integration{display:none;}
|
||||||
|
.wmf-stripe-block,.wmf-paypal-block{display:none;}
|
||||||
|
#wmf-service-stripe[data-active-mode=live] .wmf-stripe-block-live,#wmf-service-stripe[data-active-mode=test] .wmf-stripe-block-test,#wmf-service-paypal[data-active-mode=live] .wmf-paypal-block-live,#wmf-service-paypal[data-active-mode=sandbox] .wmf-paypal-block-sandbox{display:block;}
|
||||||
|
#wmf-int-widget-recaptcha .has-service-selection[data-active-service=recaptcha] #wmf-service-recaptcha,#wmf-int-widget-recaptcha .has-service-selection[data-active-service=recaptchav3] #wmf-service-recaptchav3{display:block;}
|
||||||
|
#wmf-integration-toolbar{margin-bottom:15px;}
|
||||||
|
#wmf-integration-toolbar .media-toolbar-secondary{float:left;margin-top:11px;}
|
||||||
|
#wmf-no-integrations-found{color:#646970;font-size:16px;text-align:center;padding:60px 0;display:none;}
|
||||||
|
#wmf-integrations-results-wrap.no-results #wmf-no-integrations-found{display:block;}
|
||||||
|
#wmf-integrations-results{display:none;}
|
||||||
|
#wmf-integrations-results .postbox-container{width:25%;padding:0 8px;box-sizing:border-box;float:left;}
|
||||||
|
.wmf-integrations-widget{box-sizing:border-box;}
|
||||||
|
.wmf-integrations-widget .handle-actions{display:none;}
|
||||||
|
.wmf-integrations-widget.closed .inside,.wmf-integrations-widget.closed br.clear{display:block;}
|
||||||
|
@media(max-width:1200px){.wmf-builder-layout{grid-template-columns:190px 1fr 250px;}}
|
||||||
|
@media(max-width:960px){.wmf-builder-layout{grid-template-columns:1fr;}.wmf-palette,.wmf-settings-col{position:static;max-height:none;}}
|
||||||
|
@media(max-width:799px){#wmf-integrations-results .postbox-container{width:100%;}}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
EINREICHUNGEN – LISTE
|
||||||
|
============================================================ */
|
||||||
|
.wmf-submissions-wrap { margin-top:16px; }
|
||||||
|
.wmf-subs-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
|
||||||
|
.wmf-subs-title { margin:0; font-size:18px; display:flex; align-items:center; gap:10px; }
|
||||||
|
.wmf-subs-count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; background:#2271b1; color:#fff; border-radius:12px; font-size:12px; font-weight:700; padding:0 7px; }
|
||||||
|
.wmf-subs-filter-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; border-bottom:1px solid #dcdcde; padding-bottom:12px; }
|
||||||
|
.wmf-status-tabs { display:flex; gap:0; }
|
||||||
|
.wmf-status-tab { padding:6px 14px; text-decoration:none; color:#646970; border:1px solid transparent; border-bottom:none; font-size:13px; }
|
||||||
|
.wmf-status-tab:hover { color:#2271b1; }
|
||||||
|
.wmf-status-tab.current { color:#1d2327; background:#fff; border-color:#dcdcde; border-bottom-color:#fff; font-weight:600; margin-bottom:-1px; z-index:1; position:relative; }
|
||||||
|
.wmf-status-tab .count { color:#a7aaad; font-size:11px; }
|
||||||
|
.wmf-subs-search { display:flex; gap:6px; align-items:center; }
|
||||||
|
.wmf-search-input { padding:6px 10px; border:1px solid #c3c4c7; border-radius:3px; font-size:13px; width:220px; }
|
||||||
|
.wmf-table-wrap { overflow-x:auto; }
|
||||||
|
.wmf-submissions-table { min-width:600px; }
|
||||||
|
.wmf-submissions-table .wmf-col-id { width:55px; }
|
||||||
|
.wmf-submissions-table .wmf-col-date { width:130px; white-space:nowrap; }
|
||||||
|
.wmf-submissions-table .wmf-col-status { width:130px; }
|
||||||
|
.wmf-submissions-table .wmf-col-actions{ width:160px; white-space:nowrap; }
|
||||||
|
.wmf-sub-row a { text-decoration:none; color:inherit; }
|
||||||
|
.wmf-sub-row a:hover { color:#2271b1; }
|
||||||
|
.wmf-sub-new td { font-weight:600; }
|
||||||
|
.wmf-sub-id-link { font-weight:700; color:#2271b1!important; }
|
||||||
|
.wmf-time { display:block; font-size:11px; color:#a7aaad; }
|
||||||
|
.wmf-status-select { border:none; background:transparent; font-size:12px; font-weight:600; cursor:pointer; padding:3px 6px; border-radius:10px; }
|
||||||
|
.wmf-status-select.wmf-status-neu { background:#e8f0fb; color:#2271b1; }
|
||||||
|
.wmf-status-select.wmf-status-gelesen { background:#f0fdf4; color:#166534; }
|
||||||
|
.wmf-status-select.wmf-status-archiviert { background:#f6f7f7; color:#646970; }
|
||||||
|
.wmf-status-form { display:inline; }
|
||||||
|
.wmf-col-actions .button { margin-right:3px; font-size:11px; }
|
||||||
|
.wmf-pagination { display:flex; align-items:center; gap:10px; margin-top:16px; }
|
||||||
|
.wmf-page-info { font-size:13px; color:#646970; }
|
||||||
|
.wmf-empty-submissions { text-align:center; padding:60px 20px; color:#646970; }
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
EINREICHUNGEN – DETAILANSICHT
|
||||||
|
============================================================ */
|
||||||
|
.wmf-submission-detail { max-width:900px; }
|
||||||
|
.wmf-detail-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
|
||||||
|
.wmf-detail-nav-arrows { display:flex; gap:6px; }
|
||||||
|
|
||||||
|
.wmf-detail-meta-card {
|
||||||
|
display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1px;
|
||||||
|
background:#dcdcde; border:1px solid #dcdcde; border-radius:4px; overflow:hidden; margin-bottom:24px;
|
||||||
|
}
|
||||||
|
.wmf-detail-meta-item { background:#fff; padding:14px 16px; }
|
||||||
|
.wmf-detail-meta-label { font-size:11px; text-transform:uppercase; color:#a7aaad; font-weight:600; display:block; margin-bottom:4px; }
|
||||||
|
.wmf-detail-meta-value { font-size:14px; font-weight:600; color:#1d2327; }
|
||||||
|
.wmf-detail-meta-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; grid-column: span 2; }
|
||||||
|
|
||||||
|
.wmf-detail-fields { background:#fff; border:1px solid #dcdcde; border-radius:4px; overflow:hidden; margin-bottom:20px; }
|
||||||
|
.wmf-detail-section-title { margin:0; padding:14px 20px; font-size:14px; background:#f6f7f7; border-bottom:1px solid #dcdcde; }
|
||||||
|
.wmf-detail-fields-grid { padding:8px 0; }
|
||||||
|
|
||||||
|
.wmf-detail-field { display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid #f0f0f1; min-height:48px; }
|
||||||
|
.wmf-detail-field:last-child { border-bottom:none; }
|
||||||
|
.wmf-detail-field-label { padding:14px 20px; background:#f6f7f7; font-weight:600; font-size:13px; color:#1d2327; display:flex; flex-direction:column; gap:3px; border-right:1px solid #dcdcde; }
|
||||||
|
.wmf-detail-field-type { font-size:10px; text-transform:uppercase; color:#a7aaad; font-weight:normal; }
|
||||||
|
.wmf-detail-field-value { padding:14px 20px; font-size:14px; color:#1d2327; word-break:break-word; }
|
||||||
|
|
||||||
|
.wmf-val-text { white-space:pre-wrap; }
|
||||||
|
.wmf-val-textarea{ white-space:pre-wrap; line-height:1.6; }
|
||||||
|
.wmf-val-list { margin:0; padding-left:18px; }
|
||||||
|
.wmf-val-list li { margin-bottom:3px; }
|
||||||
|
.wmf-val-stars { display:flex; align-items:center; gap:4px; }
|
||||||
|
.wmf-val-files { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
|
||||||
|
.wmf-val-file-img img { border-radius:4px; border:1px solid #dcdcde; }
|
||||||
|
.wmf-val-file-link { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:#f6f7f7; border:1px solid #dcdcde; border-radius:3px; text-decoration:none; font-size:13px; }
|
||||||
|
.wmf-val-file-link:hover { background:#e8f0fb; border-color:#2271b1; }
|
||||||
|
.wmf-empty-value { color:#a7aaad; font-style:italic; font-size:13px; }
|
||||||
|
|
||||||
|
.wmf-detail-technical { margin-top:8px; background:#fff; border:1px solid #dcdcde; border-radius:4px; }
|
||||||
|
.wmf-detail-technical summary { padding:12px 16px; cursor:pointer; font-size:13px; color:#646970; user-select:none; }
|
||||||
|
.wmf-detail-technical summary:hover { color:#2271b1; }
|
||||||
|
.wmf-detail-technical table { margin:0 16px 16px; width:calc(100% - 32px); }
|
||||||
|
.wmf-detail-technical th { width:160px; font-weight:600; background:#f6f7f7; padding:8px 12px; font-size:12px; }
|
||||||
|
.wmf-detail-technical td { padding:8px 12px; font-size:13px; word-break:break-all; }
|
||||||
|
|
||||||
|
@media(max-width:700px) {
|
||||||
|
.wmf-detail-field { grid-template-columns:1fr; }
|
||||||
|
.wmf-detail-field-label { border-right:none; border-bottom:1px solid #dcdcde; padding-bottom:8px; }
|
||||||
|
.wmf-detail-meta-card { grid-template-columns:1fr 1fr; }
|
||||||
|
}
|
||||||
134
assets/css/frontend.css
Normal file
134
assets/css/frontend.css
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
/* WP Multi Formular - Frontend CSS v2.1 */
|
||||||
|
:root{
|
||||||
|
--wmf-primary:#2271b1;--wmf-primary-h:#135e96;
|
||||||
|
--wmf-error:#d63638;--wmf-success:#46b450;
|
||||||
|
--wmf-border:#c3c4c7;--wmf-bg:#fff;--wmf-text:#1d2327;--wmf-muted:#646970;
|
||||||
|
--wmf-radius:5px;--wmf-transition:.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
THEME-OVERRIDE mit hoher Spezifitaet
|
||||||
|
Deckt dunkle Themes ab (z.B. Viper Network Theme)
|
||||||
|
Labels = weiss, Inputs = weiss mit dunklem Text
|
||||||
|
========================================================================== */
|
||||||
|
html body .wmf-form-wrap label,
|
||||||
|
html body .wmf-form-wrap .wmf-label{color:#fff!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-description,
|
||||||
|
html body .wmf-form-wrap p.wmf-description{color:rgba(255,255,255,.65)!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-checkbox-label,
|
||||||
|
html body .wmf-form-wrap .wmf-radio-label{color:#fff!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-gdpr-text{color:#fff!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-section-title{color:#fff!important;border-bottom-color:var(--wmf-primary)!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-char-count{color:rgba(255,255,255,.55)!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-input,
|
||||||
|
html body .wmf-form-wrap textarea.wmf-input,
|
||||||
|
html body .wmf-form-wrap select.wmf-input{color:#1d2327!important;background:#fff!important;}
|
||||||
|
html body .wmf-form-wrap .wmf-field-error-msg,
|
||||||
|
html body .wmf-form-wrap .wmf-field-error{color:#ff6b6b!important;}
|
||||||
|
|
||||||
|
/* Progress */
|
||||||
|
.wmf-form-wrap{max-width:720px;margin:0 auto;font-family:inherit;}
|
||||||
|
.wmf-progress-bar{display:flex;margin-bottom:28px;position:relative;}
|
||||||
|
.wmf-step-indicator{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;padding-top:36px;font-size:11px;color:rgba(255,255,255,.6);}
|
||||||
|
.wmf-step-indicator::before{content:'';position:absolute;top:11px;left:0;right:0;height:4px;background:var(--wmf-border);margin:0 4px;}
|
||||||
|
.wmf-step-indicator.active::before,.wmf-step-indicator.done::before{background:var(--wmf-primary);}
|
||||||
|
.wmf-step-num{position:absolute;top:0;width:26px;height:26px;border-radius:50%;background:var(--wmf-border);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:background var(--wmf-transition);}
|
||||||
|
.wmf-step-indicator.active .wmf-step-num,.wmf-step-indicator.done .wmf-step-num{background:var(--wmf-primary);}
|
||||||
|
.wmf-step-lbl{font-size:11px;text-align:center;}
|
||||||
|
|
||||||
|
/* Fields */
|
||||||
|
.wmf-fields{display:flex;flex-wrap:wrap;gap:16px;}
|
||||||
|
.wmf-field-wrap{width:100%;}
|
||||||
|
.wmf-field{width:100%;box-sizing:border-box;}
|
||||||
|
.wmf-field-width-half{width:calc(50% - 8px);}
|
||||||
|
.wmf-field-width-third{width:calc(33.333% - 11px);}
|
||||||
|
.wmf-cond-hidden{display:none!important;}
|
||||||
|
.wmf-hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
|
||||||
|
|
||||||
|
/* Labels */
|
||||||
|
.wmf-label{display:block;margin-bottom:6px;font-weight:600;font-size:14px;}
|
||||||
|
.wmf-required-mark{color:var(--wmf-error);margin-left:2px;}
|
||||||
|
.wmf-description{font-size:12px;margin:5px 0 0;}
|
||||||
|
|
||||||
|
/* Inputs */
|
||||||
|
.wmf-input{display:block;width:100%;box-sizing:border-box;padding:10px 13px;font-size:15px;line-height:1.5;border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);background:#fff;color:#1d2327;transition:border-color var(--wmf-transition),box-shadow var(--wmf-transition);appearance:none;}
|
||||||
|
.wmf-input:focus{outline:none;border-color:var(--wmf-primary);box-shadow:0 0 0 3px rgba(34,113,177,.15);}
|
||||||
|
.wmf-input::placeholder{color:#aaa;}
|
||||||
|
.wmf-textarea{resize:vertical;min-height:120px;}
|
||||||
|
.wmf-has-error .wmf-input{border-color:var(--wmf-error);}
|
||||||
|
.wmf-has-error .wmf-input:focus{box-shadow:0 0 0 3px rgba(214,54,56,.15);}
|
||||||
|
.wmf-field-error-msg{display:none;font-size:12px;margin-top:4px;}
|
||||||
|
.wmf-has-error .wmf-field-error-msg{display:block;}
|
||||||
|
.wmf-field-wrap .wmf-field-error{font-size:12px;margin-top:4px;}
|
||||||
|
|
||||||
|
/* Select */
|
||||||
|
.wmf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23646970'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer;}
|
||||||
|
|
||||||
|
/* Checkbox/Radio */
|
||||||
|
.wmf-checkbox-group,.wmf-radio-group{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
|
||||||
|
.wmf-layout-horizontal.wmf-checkbox-group,.wmf-layout-horizontal.wmf-radio-group{flex-direction:row;flex-wrap:wrap;gap:14px;}
|
||||||
|
.wmf-checkbox-label,.wmf-radio-label{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;line-height:1.4;}
|
||||||
|
.wmf-checkbox-label input,.wmf-radio-label input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--wmf-primary);cursor:pointer;}
|
||||||
|
|
||||||
|
/* GDPR */
|
||||||
|
.wmf-gdpr-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
|
||||||
|
.wmf-gdpr-checkbox{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--wmf-primary);}
|
||||||
|
.wmf-gdpr-text{font-size:13px;line-height:1.5;}
|
||||||
|
.wmf-gdpr-text a{color:var(--wmf-primary);}
|
||||||
|
|
||||||
|
/* Rating */
|
||||||
|
.wmf-rating{display:flex;gap:4px;}
|
||||||
|
.wmf-star{background:none;border:none;cursor:pointer;padding:0;color:#555;font-size:30px;line-height:1;transition:color var(--wmf-transition),transform .1s;}
|
||||||
|
.wmf-star:hover,.wmf-star.hover{color:#f0b429;transform:scale(1.15);}
|
||||||
|
.wmf-star.active{color:#f0b429;}
|
||||||
|
|
||||||
|
/* Range */
|
||||||
|
.wmf-range-wrap{display:flex;align-items:center;gap:12px;}
|
||||||
|
.wmf-range-input{flex:1;accent-color:var(--wmf-primary);cursor:pointer;}
|
||||||
|
.wmf-range-value{font-weight:700;min-width:36px;text-align:center;color:var(--wmf-primary);}
|
||||||
|
|
||||||
|
/* Char count */
|
||||||
|
.wmf-char-count{font-size:11px;text-align:right;margin-top:3px;}
|
||||||
|
.wmf-char-count.wmf-over-limit{color:var(--wmf-error)!important;}
|
||||||
|
|
||||||
|
/* Signature */
|
||||||
|
.wmf-signature-wrap{border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);overflow:hidden;}
|
||||||
|
.wmf-signature-canvas{display:block;width:100%;max-width:500px;height:150px;cursor:crosshair;background:#fafafa;touch-action:none;}
|
||||||
|
.wmf-signature-controls{display:flex;justify-content:flex-end;padding:6px 8px;background:#f6f7f7;border-top:1px solid var(--wmf-border);}
|
||||||
|
|
||||||
|
/* File */
|
||||||
|
.wmf-file-input{padding:8px;cursor:pointer;}
|
||||||
|
.wmf-file-input::file-selector-button{background:var(--wmf-primary);color:#fff;border:none;padding:6px 14px;border-radius:3px;cursor:pointer;font-size:13px;margin-right:10px;}
|
||||||
|
|
||||||
|
/* Section */
|
||||||
|
.wmf-section-title{font-size:16px;font-weight:700;margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--wmf-primary);}
|
||||||
|
.wmf-divider{border:none;border-top:1px solid rgba(255,255,255,.2);margin:4px 0;}
|
||||||
|
|
||||||
|
/* Notices */
|
||||||
|
.wmf-notice{padding:14px 18px;border-radius:var(--wmf-radius);margin-bottom:20px;font-size:15px;border-left:4px solid;}
|
||||||
|
.wmf-notice-success{background:rgba(70,180,80,.15);border-color:var(--wmf-success);color:#a6f0ae;}
|
||||||
|
.wmf-notice-error{background:rgba(214,54,56,.15);border-color:var(--wmf-error);color:#ffaaaa;}
|
||||||
|
|
||||||
|
/* Submit */
|
||||||
|
.wmf-submit-wrap{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
|
||||||
|
.wmf-submit-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 30px;background:var(--wmf-primary);color:#fff;border:none;border-radius:var(--wmf-radius);font-size:16px;font-weight:600;cursor:pointer;transition:background var(--wmf-transition);min-width:140px;}
|
||||||
|
.wmf-submit-button:hover{background:var(--wmf-primary-h);}
|
||||||
|
.wmf-submit-button:disabled{opacity:.6;cursor:not-allowed;}
|
||||||
|
|
||||||
|
/* Spinner */
|
||||||
|
.wmf-spinner{display:none;width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--wmf-primary);border-radius:50%;animation:wmf-spin .7s linear infinite;}
|
||||||
|
.wmf-loading .wmf-spinner{display:inline-block;}
|
||||||
|
.wmf-loading .wmf-submit-button{opacity:.7;pointer-events:none;}
|
||||||
|
@keyframes wmf-spin{to{transform:rotate(360deg);}}
|
||||||
|
|
||||||
|
/* Step nav */
|
||||||
|
.wmf-step-nav{margin-top:20px;display:flex;gap:10px;align-items:center;}
|
||||||
|
|
||||||
|
/* Toast */
|
||||||
|
.wmf-toast{position:fixed;bottom:24px;right:24px;z-index:99999;background:#1d2327;color:#fff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none;}
|
||||||
|
.wmf-toast.show{opacity:1;transform:translateY(0);}
|
||||||
|
|
||||||
|
@media(max-width:640px){
|
||||||
|
.wmf-field-width-half,.wmf-field-width-third{width:100%!important;}
|
||||||
|
.wmf-step-lbl{display:none;}
|
||||||
|
}
|
||||||
215
assets/js/admin.js
Normal file
215
assets/js/admin.js
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
/* 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);
|
||||||
259
assets/js/frontend.js
Normal file
259
assets/js/frontend.js
Normal file
@@ -0,0 +1,259 @@
|
|||||||
|
/* WP Multi Formular – Frontend JS v2.0 */
|
||||||
|
(function($){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.wmf-form').each(function(){ WMF_Form.init($(this)); });
|
||||||
|
});
|
||||||
|
|
||||||
|
var WMF_Form = {
|
||||||
|
|
||||||
|
init: function($form){
|
||||||
|
this.initConditional($form);
|
||||||
|
this.initMultiStep($form);
|
||||||
|
this.initRating($form);
|
||||||
|
this.initSignature($form);
|
||||||
|
this.initRange($form);
|
||||||
|
this.initCharCount($form);
|
||||||
|
this.initLiveValidation($form);
|
||||||
|
this.initSubmit($form);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* BEDINGTE LOGIK */
|
||||||
|
initConditional: function($form){
|
||||||
|
var self = this;
|
||||||
|
var $fields = $form.find('[data-condition="1"]');
|
||||||
|
if(!$fields.length) return;
|
||||||
|
|
||||||
|
function evalAll(){
|
||||||
|
$fields.each(function(){
|
||||||
|
var $field = $(this);
|
||||||
|
var action = $field.data('condition-action') || 'show';
|
||||||
|
var match = $field.data('condition-match') || 'all';
|
||||||
|
var rules = $field.data('condition-rules');
|
||||||
|
if(typeof rules === 'string'){ try{ rules=JSON.parse(rules); }catch(e){ rules=[]; } }
|
||||||
|
if(!rules||!rules.length) return;
|
||||||
|
|
||||||
|
var results = $.map(rules, function(rule){
|
||||||
|
if(!rule.field) return true;
|
||||||
|
var $t = $form.find('[name="wmf_fields['+rule.field+']"],[name="wmf_fields['+rule.field+'][]"]');
|
||||||
|
var val = '';
|
||||||
|
if($t.is('[type=checkbox]')){ var c=[]; $t.filter(':checked').each(function(){ c.push($(this).val()); }); val=c; }
|
||||||
|
else if($t.is('[type=radio]')){ val=$t.filter(':checked').val()||''; }
|
||||||
|
else { val=$t.val()||''; }
|
||||||
|
switch(rule.operator){
|
||||||
|
case '=': return Array.isArray(val)?val.indexOf(rule.value)!==-1:val===rule.value;
|
||||||
|
case '!=': return Array.isArray(val)?val.indexOf(rule.value)===-1:val!==rule.value;
|
||||||
|
case 'contains': return (Array.isArray(val)?val.join(','):val).indexOf(rule.value)!==-1;
|
||||||
|
case 'not_empty':return Array.isArray(val)?val.length>0:val.trim()!=='';
|
||||||
|
default: return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var passed = (match==='all') ? results.every(Boolean) : results.some(Boolean);
|
||||||
|
var $wrap = $field.closest('.wmf-field-wrap');
|
||||||
|
var hide = (action==='show') ? !passed : passed;
|
||||||
|
$wrap.toggleClass('wmf-cond-hidden', hide);
|
||||||
|
$wrap.find('input,select,textarea').prop('disabled', hide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$form.on('change input','input,select,textarea', evalAll);
|
||||||
|
evalAll();
|
||||||
|
},
|
||||||
|
|
||||||
|
/* MULTI STEP */
|
||||||
|
initMultiStep: function($form){
|
||||||
|
var ms = $form.data('multi-step');
|
||||||
|
if(ms!==1&&ms!=='1') return;
|
||||||
|
var self = this;
|
||||||
|
var $steps = $form.find('.wmf-step');
|
||||||
|
var total = $steps.length;
|
||||||
|
var current = 0;
|
||||||
|
var $prog = $form.closest('.wmf-form-wrap').find('.wmf-progress-bar');
|
||||||
|
|
||||||
|
function show(idx){
|
||||||
|
$steps.hide().eq(idx).show();
|
||||||
|
current = idx;
|
||||||
|
$prog.find('.wmf-step-indicator').each(function(i){
|
||||||
|
$(this).toggleClass('active',i===idx).toggleClass('done',i<idx);
|
||||||
|
});
|
||||||
|
$('html,body').animate({scrollTop:$form.closest('.wmf-form-wrap').offset().top-60},300);
|
||||||
|
}
|
||||||
|
|
||||||
|
$form.on('click','.wmf-next-step',function(){
|
||||||
|
if(!self.validateStep($form.find('.wmf-step').eq(current))) return;
|
||||||
|
show(current+1);
|
||||||
|
});
|
||||||
|
$form.on('click','.wmf-prev-step',function(){ show(current-1); });
|
||||||
|
show(0);
|
||||||
|
},
|
||||||
|
|
||||||
|
validateStep: function($step){
|
||||||
|
var valid=true, $first=null;
|
||||||
|
$step.find('.wmf-field-wrap:not(.wmf-cond-hidden)').each(function(){
|
||||||
|
var $w=$( this);
|
||||||
|
var $i=$w.find('input:not([type=hidden]),select,textarea').first();
|
||||||
|
if(!$i.length) return;
|
||||||
|
var r=WMF_Validate.field($i,$w);
|
||||||
|
if(r!==true){
|
||||||
|
$w.addClass('wmf-has-error');
|
||||||
|
$w.find('.wmf-field-error-msg').text(r).show();
|
||||||
|
if(!$first) $first=$i;
|
||||||
|
valid=false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if($first) $first.focus();
|
||||||
|
return valid;
|
||||||
|
},
|
||||||
|
|
||||||
|
/* LIVE VALIDIERUNG */
|
||||||
|
initLiveValidation: function($form){
|
||||||
|
$form.on('blur','input:not([type=hidden]),select,textarea',function(){
|
||||||
|
var $w=$(this).closest('.wmf-field-wrap');
|
||||||
|
if(!$w.length) return;
|
||||||
|
var r=WMF_Validate.field($(this),$w);
|
||||||
|
if(r===true){ $w.removeClass('wmf-has-error'); $w.find('.wmf-field-error-msg').hide(); }
|
||||||
|
else { $w.addClass('wmf-has-error'); $w.find('.wmf-field-error-msg').text(r).show(); }
|
||||||
|
});
|
||||||
|
$form.on('input change','input:not([type=hidden]),select,textarea',function(){
|
||||||
|
var $w=$(this).closest('.wmf-field-wrap');
|
||||||
|
if($w.hasClass('wmf-has-error')){
|
||||||
|
if(WMF_Validate.field($(this),$w)===true){ $w.removeClass('wmf-has-error'); $w.find('.wmf-field-error-msg').hide(); }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/* SUBMIT */
|
||||||
|
initSubmit: function($form){
|
||||||
|
$form.on('submit',function(e){
|
||||||
|
var valid=true,$first=null;
|
||||||
|
$form.find('.wmf-field-wrap:not(.wmf-cond-hidden)').each(function(){
|
||||||
|
var $w=$(this),$i=$w.find('input:not([type=hidden]),select,textarea').first();
|
||||||
|
if(!$i.length) return;
|
||||||
|
var r=WMF_Validate.field($i,$w);
|
||||||
|
if(r!==true){
|
||||||
|
$w.addClass('wmf-has-error');
|
||||||
|
$w.find('.wmf-field-error-msg').text(r).show();
|
||||||
|
if(!$first) $first=$i;
|
||||||
|
valid=false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(!valid){
|
||||||
|
e.preventDefault();
|
||||||
|
if($first) $('html,body').animate({scrollTop:$first.closest('.wmf-field-wrap').offset().top-80},300);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Unterschrift
|
||||||
|
$form.find('.wmf-signature-canvas').each(function(){
|
||||||
|
var $c=$(this);
|
||||||
|
if($c.data('drawn')) $c.closest('.wmf-signature-wrap').find('.wmf-signature-data').val(this.toDataURL('image/png'));
|
||||||
|
});
|
||||||
|
$form.addClass('wmf-loading');
|
||||||
|
$form.find('.wmf-submit-button').prop('disabled',true);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/* STERNE */
|
||||||
|
initRating: function($form){
|
||||||
|
$form.on('mouseenter','.wmf-star',function(){
|
||||||
|
var v=parseInt($(this).data('value'));
|
||||||
|
$(this).closest('.wmf-rating').find('.wmf-star').each(function(){ $(this).toggleClass('hover',parseInt($(this).data('value'))<=v); });
|
||||||
|
});
|
||||||
|
$form.on('mouseleave','.wmf-rating',function(){ $(this).find('.wmf-star').removeClass('hover'); });
|
||||||
|
$form.on('click','.wmf-star',function(){
|
||||||
|
var v=$(this).data('value');
|
||||||
|
var $r=$(this).closest('.wmf-rating');
|
||||||
|
$r.find('.wmf-rating-value').val(v).trigger('change');
|
||||||
|
$r.find('.wmf-star').each(function(){ $(this).toggleClass('active',parseInt($(this).data('value'))<=parseInt(v)); });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/* UNTERSCHRIFT */
|
||||||
|
initSignature: function($form){
|
||||||
|
$form.find('.wmf-signature-canvas').each(function(){
|
||||||
|
var canvas=this, ctx=canvas.getContext('2d'), drawing=false;
|
||||||
|
var dpr=window.devicePixelRatio||1;
|
||||||
|
var rect=canvas.getBoundingClientRect();
|
||||||
|
canvas.width=rect.width*dpr; canvas.height=rect.height*dpr;
|
||||||
|
ctx.scale(dpr,dpr);
|
||||||
|
ctx.strokeStyle='#1d2327'; ctx.lineWidth=2; ctx.lineCap='round'; ctx.lineJoin='round';
|
||||||
|
|
||||||
|
function pos(e){ var r=canvas.getBoundingClientRect(),s=e.touches?e.touches[0]:e; return{x:s.clientX-r.left,y:s.clientY-r.top}; }
|
||||||
|
function start(e){ e.preventDefault(); drawing=true; var p=pos(e); ctx.beginPath(); ctx.moveTo(p.x,p.y); }
|
||||||
|
function move(e){ e.preventDefault(); if(!drawing)return; var p=pos(e); ctx.lineTo(p.x,p.y); ctx.stroke(); $(canvas).data('drawn',true); }
|
||||||
|
function stop(){ drawing=false; }
|
||||||
|
|
||||||
|
canvas.addEventListener('mousedown',start);
|
||||||
|
canvas.addEventListener('mousemove',move);
|
||||||
|
canvas.addEventListener('mouseup',stop);
|
||||||
|
canvas.addEventListener('mouseleave',stop);
|
||||||
|
canvas.addEventListener('touchstart',start,{passive:false});
|
||||||
|
canvas.addEventListener('touchmove',move,{passive:false});
|
||||||
|
canvas.addEventListener('touchend',stop);
|
||||||
|
|
||||||
|
$(canvas).closest('.wmf-signature-wrap').find('.wmf-sig-clear').on('click',function(){
|
||||||
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
$(canvas).data('drawn',false);
|
||||||
|
$(canvas).closest('.wmf-signature-wrap').find('.wmf-signature-data').val('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/* SCHIEBEREGLER */
|
||||||
|
initRange: function($form){
|
||||||
|
$form.on('input','.wmf-range-input',function(){
|
||||||
|
$(this).closest('.wmf-range-wrap').find('.wmf-range-value').text($(this).val());
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/* ZEICHENZÄHLER */
|
||||||
|
initCharCount: function($form){
|
||||||
|
$form.find('textarea[maxlength]').each(function(){
|
||||||
|
var $ta=$(this), max=parseInt($ta.attr('maxlength'));
|
||||||
|
var $c=$ta.closest('.wmf-field').find('.wmf-char-count .wmf-chars-used');
|
||||||
|
$ta.on('input',function(){ var l=$(this).val().length; $c.text(l); $c.closest('.wmf-char-count').toggleClass('wmf-over-limit',l>=max); });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* VALIDIERUNG */
|
||||||
|
var WMF_Validate = {
|
||||||
|
field: function($i,$w){
|
||||||
|
var req=$i.prop('required'), type=$i.attr('type')||$i.prop('tagName').toLowerCase(), val=$i.val();
|
||||||
|
var i18n=(typeof WMF_Frontend!=='undefined'&&WMF_Frontend.i18n)||{};
|
||||||
|
|
||||||
|
if(type==='checkbox'){
|
||||||
|
var $boxes=$w.find('input[type=checkbox]');
|
||||||
|
if($boxes.first().prop('required')&&!$boxes.filter(':checked').length) return i18n.required||'Pflichtfeld.';
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if(type==='radio'){
|
||||||
|
var $radios=$w.find('input[type=radio]');
|
||||||
|
if($radios.first().prop('required')&&!$radios.filter(':checked').length) return i18n.required||'Pflichtfeld.';
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if($i.is('select[multiple]')){
|
||||||
|
if(req&&(!val||!val.length)) return i18n.required||'Pflichtfeld.';
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if(req&&(!val||val.trim()==='')) return i18n.required||'Pflichtfeld.';
|
||||||
|
if(!val||val.trim()==='') return true;
|
||||||
|
if(type==='email'&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) return i18n.email||'Ungültige E-Mail.';
|
||||||
|
if(type==='url'){ try{ new URL(val); }catch(e){ return i18n.url||'Ungültige URL.'; } }
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* SHORTCODE KOPIEREN */
|
||||||
|
$(document).on('click','.wmf-sc-copy',function(){
|
||||||
|
var t=$(this).text().trim();
|
||||||
|
if(navigator.clipboard) navigator.clipboard.writeText(t).then(function(){ WMF_Form.toast && WMF_Form.toast('Shortcode kopiert!'); });
|
||||||
|
});
|
||||||
|
WMF_Form.toast = function(msg){
|
||||||
|
var $t=$('<div class="wmf-toast">'+msg+'</div>').appendTo('body');
|
||||||
|
setTimeout(function(){$t.addClass('show');},10);
|
||||||
|
setTimeout(function(){$t.removeClass('show');setTimeout(function(){$t.remove();},400);},2500);
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
Reference in New Issue
Block a user