<div id="tabs"> <ul> <li><a href="#tabs-1">{|Layoutvorlage|}</a></li> <li><a href="#tabs-2">{|Positionen/Elemente|}</a></li> <li><a href="#tabs-3">{|Vorschau|}</a></li> </ul> <div id="tabs-1"> <form action="" method="post" enctype="multipart/form-data"> <table class="tableborder" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr valign="top"> <td > <table width="100%" align="center" style="background-color:#cfcfd1;"> <tr> <td width="33%"></td> <td align="center" nowrap><b style="font-size: 14pt">{|Layoutvorlage|}</b> </td> <td width="33%" align="right"> <input type="submit" name="layoutspeichern" value="Speichern" onclick="this.form.action += '#tabs-1';"/> <input type="button" value="Abbrechen" onclick="window.location.href='index.php?module=layoutvorlagen&action=list';"></td> </tr> </table> <fieldset> <legend>{|Einstellungen|}</legend> <table width="100%"> <tr> <td width="110">{|Name|}:</td> <td><input type="text" name="name" value="[NAME]" size="40"></td> <td></td> <td>{|Typ|}:</td> <td> <select name="typ"> <option value="pdf">PDF</option> </select> </td> </tr> <tr> <td>{|Format|}:</td> <td> <select name="format"> [FORMAT] </select> </td> <td></td> <td>{|Kategorie|}:</td> <td> <input type="text" name="kategorie" value="[KATEGORIE]" size="40" id="kategorie"> </td> </tr> <tr> <td>{|Hintergrund|}:</td> <td><input type="file" name="pdf_hintergrund"> [PDFVORSCHAU]</td> <td>{|Hintergrund löschen|}: <input type="checkbox" name="delete_hintergrund" /></td> <td>{|Projekt|}:</td> <td><input type="text" name="layoutvorlagen_projekt" id="layoutvorlagen_projekt" size="40" value="[PROJEKT]"></td> </tr> </table> </fieldset> [MESSAGE] <br><br> </td> </tr> <tr valign="" height="" bgcolor="" align="" bordercolor="" class="klein" classname="klein"> <td width="" valign="" height="" bgcolor="" align="right" colspan="1" bordercolor="" classname="orange2" class="orange2"> <input type="submit" name="layoutspeichern" value="Speichern" /> <input type="button" value="Abbrechen" onclick="window.location.href='index.php?module=layoutvorlagen&action=list';"/></td> </tr> </tbody> </table> </form> </div> <div id="tabs-2"> <div class="row"> <div class="row-height"> <div class="col-xs-12 col-md-10 col-md-height"> <div class="inside-white inside-full-height"> [TABELLE] </div> </div> <div class="col-xs-12 col-md-2 col-md-height"> <div class="inside inside-full-height"> <fieldset> <legend>{|Aktionen|}</legend> <center> <input type="button" name="" class="btnGreenNew" onclick="editLayoutvorlagePosition(0);" value="✚ Neue Position / Element hinzufügen"><!-- $('#positionModal').dialog('open'); --> </center> </fieldset> </div> </div> </div> </div> </div> <div id="tabs-3"> [TAB3] </div> </div> <div id="positionModal" title="Bearbeiten"> <fieldset> <form action="index.php?module=layoutvorlagen&action=saveposition" method="POST" enctype="multipart/form-data" id="positionModalSubmit"> <legend>{|Position / Element|}</legend> <input type="hidden" name="id" value="0"> <input type="hidden" name="layoutvorlage" value="[ID]"> <table width="800"> <tr> <td class="formline formline_1" valign="top" width="50%"> <table width="100%"> <tbody> <tr class="s_always"> <td>{|Beschreibung|}:</td> <td><input type="text" name="beschreibung" id="beschreibung" size="40"></td> </tr> <tr class="s_always"> <td>{|Interner Name|}:</td> <td><input type="text" name="name" id="name" size="40"></td> </tr> <tr class="s_always"> <td>{|Typ|}:</td> <td> <select name="typ" id="typselect"> <option value="textfeld">Textfeld</option> <option value="linie">Linie</option> <option value="rechteck">Rechteck</option> <option value="bild">Bild</option> <option value="barcode">Barcode</option> </select> </td> </tr> <tr class="s_textfeld"> <td>{|Zeichenbegrenzung|}:</td> <td> <input type="checkbox" value="1" id="zeichenbegrenzung" name="zeichenbegrenzung" onchange="changezeichenbegrenzung();" /> <span class="zeichenbegrenzung"><input type="text" name="zeichenbegrenzung_anzahl" id="zeichenbegrenzung_anzahl" /> Zeichen</span> </td> </tr> <tr class="s_always"><td colspan="2"><br></td></tr> <tr style="display:none;"> <td>{|Position Typ|}:</td> <td> <select name="position_typ"> <option value="relative">Relativ</option> <option value="absolute" selected=selected>Absolut</option> </select> </td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Position X|}:</td> <td><input type="text" name="position_x"> <i>in mm</i></td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Position Y|}:</td> <td><input type="text" name="position_y"> <i>in mm</i></td> </tr> <tr style="display:none"> <td>{|Position parent|}:</td> <td> <select name="position_parent"> [POSITIONPARENT] </select> </td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Breite|}:</td> <td><input type="text" name="breite"> <i>in mm</i></td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Höhe|}:</td> <td><input type="text" name="hoehe"> <i>in mm</i></td> </tr> <tr class="s_textfeld"> <td>{|Schriftart|}:</td> <td> <select name="schrift_art"> [SCHRIFTARTEN] </select> </td> </tr> <tr class="s_textfeld"> <td>{|Schriftgröße|}:</td> <td><input type="text" id="schrift_groesse" name="schrift_groesse"></td> </tr> <tr class="s_textfeld"> <td>Zeilenhöhe:</td> <td><input type="text" id="zeilen_hoehe" name="zeilen_hoehe"></td> </tr> <tr class="s_textfeld"> <td>{|Schriftstyle|}:</td> <td>{|Fett|}: <input type="checkbox" name="schrift_fett" /> {|Kursiv|}: <input type="checkbox" name="schrift_kursiv" /> {|Unterstrichen|}: <input type="checkbox" name="schrift_underline" /></td> </tr> <tr class="s_textfeld"> <td>{|Schriftausrichtung|}:</td> <td> <select name="schrift_align"> [SCHRIFTAUSRICHTUNGEN] </select> </td> </tr> <tr class="s_textfeld"> <td>{|Schriftfarbe|}:</td> <td><input type="text" name="schrift_farbe" id="schrift_farbe"></td> </tr> <tr class="s_textfeld s_rechteck"> <td>{|Hintergrund|}:</td> <td><input type="text" name="hintergrund_farbe" id="hintergrund_farbe"></td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Rahmen|}:</td> <td> <select name="rahmen"> [RAHMEN] </select> </td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Rahmenfarbe|}:</td> <td><input type="text" name="rahmen_farbe" id="rahmen_farbe"></td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Sichtbar|}:</td> <td><input type="checkbox" name="sichtbar" checked="checked"></td> </tr> <tr class="s_textfeld s_linie s_rechteck s_bild"> <td>{|Sortierung|}:</td> <td><input type="text" name="sort" id="sort" /></td> </tr> </tbody> </table> </td> <td class="formline formline_2" valign="top"> <table width="100%"> <tbody> <tr class="s_textfeld"> <td>{|Inhalt Deutsch|}:</td> <td><textarea name="inhalt_deutsch" id="inhalt_deutsch" style="min-width:275px;min-height:150px;"></textarea></td> </tr> <tr class="s_textfeld"> <td>{|Inhalt Englisch|}:</td> <td><textarea name="inhalt_englisch" id="inhalt_englisch" style="min-width:275px;min-height:150px;"></textarea></td> </tr> <tr class="s_bild"> <td>{|Bild Deutsch|}:</td> <td><input type="file" name="bild_deutsch"></td> </tr> <tr class="s_bild"> <td>{|Bild Englisch|}:</td> <td><input type="file" name="bild_englisch"></td> </tr> </tbody> </table> </td> </tr> </table> </form> </fieldset> </div> <script type="text/javascript"> $(document).ready(function() { $("#positionModal").dialog({ modal: true, bgiframe: true, closeOnEscape:false, autoOpen: false, minWidth: 860, buttons: { ABBRECHEN: function() { clearModal(); $(this).dialog('close'); }, SPEICHERN: function() { if($('#name').val() == '' || $('#name').val() == undefined) { $('#name').val($('#beschreibung').val()); } if($('#name').val() != '' && $('#name').val() != undefined) { $('#positionModalSubmit').submit(); } else { alert('Bitte einen Namen eingeben!'); } } } }); $('#typselect').change(function() { var typ = $(this).val(); setPositionEntryTyp(typ); }); $('#positionModal').find('input').keypress(function(event) { if ( event.which == 13 ) { event.preventDefault(); $('#positionModalSubmit').submit(); } }) setPositionEntryTyp('textfeld'); //tinyMCEsetup('#inhalt_deutsch'); //tinyMCEsetup('#inhalt_englisch'); }); function setPositionEntryTyp(typ) { $('td.formline > table > tbody > tr').each(function() { if (!$(this).hasClass('s_always')) { $(this).hide(); } }); switch(typ) { case 'textfeld': case 'barcode': $('td.formline > table > tbody > tr.s_textfeld').show(); break; case 'linie': $('td.formline > table > tbody > tr.s_linie').show(); break; case 'rechteck': $('td.formline > table > tbody > tr.s_rechteck').show(); break; case 'bild': $('td.formline > table > tbody > tr.s_bild').show(); break; } } function updateLiveTable() { var oTableL = $('#layoutvorlagen_edit').dataTable(); var tmp = $('.dataTables_filter input[type=search]').val(); oTableL.fnFilter('%'); //oTableL.fnFilter(''); oTableL.fnFilter(tmp); } function editLayoutvorlagePosition(positionId) { $('.ilink').remove(); if(positionId == 0){ $("#positionModal").find("input[type=text], textarea").val(""); $("#schrift_farbe").val("#000000"); $("#schrift_groesse").val(12); $("#zeilen_hoehe").val(5); $("#schrift_farbe").change(); $("#hintergrund_farbe").change(); $("#rahmen_farbe").change(); $("#typselect").val('textfeld'); $('#typselect').trigger("change"); /*for (edId in tinyMCE.editors){ tinyMCE.editors[edId].setContent(''); }*/ $('#positionModal').find('[name="sichtbar"]').prop('checked', 'checked'); $("#positionModal").dialog('open'); changezeichenbegrenzung(); } else { $.ajax({ url: 'index.php?module=layoutvorlagen&action=getposition', type: 'POST', dataType: 'json', data: { id: positionId }, success: function(data) { if (typeof data.row.id != 'undefined') { $.each(data.row, function(key,value) { var field = $('#positionModal').find('[name="'+key+'"]'); if (field.is('select')) { field.val(value); field.find('option[value="'+value+'"]').attr('selected', 'selected'); } else if (field.is("input[type='checkbox']")) { if(value == 1){ field.prop('checked', 'checked'); } else { field.prop('checked', false); } }else{ field.val(value); } }); $("#schrift_farbe").change(); $("#hintergrund_farbe").change(); $("#rahmen_farbe").change(); /*for (edId in tinyMCE.editors){ if(tinyMCE.editors[edId].settings.selector == '#inhalt_deutsch')tinyMCE.editors[edId].setContent($('#inhalt_deutsch').val()); if(tinyMCE.editors[edId].settings.selector == '#inhalt_englisch')tinyMCE.editors[edId].setContent($('#inhalt_englisch').val()); }*/ if (typeof(data.row.typ) != 'undefined') { setPositionEntryTyp(data.row.typ); } } if (typeof(data.bilddata) != 'undefined' && data.bilddata != null) { if (typeof(data.bilddata.bild_deutsch) != 'undefined') { $('input[name="bild_deutsch"]').after(data.bilddata.bild_deutsch); } if (typeof(data.bilddata.bild_englisch) != 'undefined') { $('input[name="bild_englisch"]').after(data.bilddata.bild_englisch); } } changezeichenbegrenzung(); $("#positionModal").dialog('open'); App.loading.close(); }, beforeSend: function() { $('.ilink').remove(); App.loading.open(); } }); } } function tinyMCEsetup(selector) { tinyMCE.init({ selector: selector, mode : "textareas", theme: "modern", menubar: false, statusbar : false, toolbar_items_size: 'small', width : "100%", entity_encoding : "raw", element_format : "html", force_br_newlines : true, force_p_newlines : false, plugins: [ "textcolor" ], toolbar1: "bold italic underline strikethrough", toolbar2: "", toolbar3: "" }); } function deleteLayoutvorlagePosition(positionId) { var check = confirm('Wirklich löschen?'); if (!check) { return false; } $.ajax({ url: 'index.php?module=layoutvorlagen&action=deleteposition', type: 'GET', dataType: 'json', data: { id: positionId }, success: function(data) { if (data.status == 1) { updateLiveTable(); } else { alert(data.statusText); } App.loading.close(); }, beforeSend: function() { App.loading.open(); } }); } function changezeichenbegrenzung() { if($('#zeichenbegrenzung').prop('checked')) { $('#zeichenbegrenzung_anzahl').show(); }else{ $('#zeichenbegrenzung_anzahl').hide(); } } function clearModal() { var layoutvorlageId = [ID]; $('#positionModal').find('input,select').val(''); $('#positionModal').find('input[name="id"]').val('0'); $('#positionModal').find('input[name="layoutvorlage"]').val(layoutvorlageId); } </script>