HAPbuilder v2.3

by Petr Haluza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="test"></div>

<div id="demoHolder">
<div id="demo">
	<div id="template-settings">
    <div><input type="text" id="modelCode" placeholder="napiš pchs2627"></div>
    <div>
      <label><input type="radio" name="modeType" value="light">Bílý motiv</label>
      <label><input type="radio" name="modeType" value="dark">Černý motiv</label>
    </div>
    <div>Barva nadpisů
      <label><input type="radio" name="headingColor" value="blackHeadlines">černá</label>
      <label><input type="radio" name="headingColor" value="blueHeadlines">modrá</label>
      <label><input type="radio" name="headingColor" value="redHeadlines">červená</label>
      <label><input type="radio" name="headingColor" value="mcrHeadlines">MČR</label>
    </div>    
  </div>
  <div id="katalog-elementu">
	<h3>Katalog elementů <small>(Drag & Drop)</small></h3>
		<div id="ImgOnly" class="blok">Obr 100%</div>
    <div id="ImgHeadingText" class="blok">Obr + H2 + text</div>
    <div id="ImgHeadingTextMCR" class="blok">Obr + H2 MCR + text</div>			
    <div id="FeaturesList" class="blok">Featury</div>	
    <div id="CustomCode" class="blok">xxx</div>	
	</div>
	
  <div id="staveniste">

  </div>

<!--
  <div id="staveniste">
    <div class="blok">
    <div class="odebrat-blok"></div>
    <div class="ucho"></div>
    <p contenteditable="true">Prostý text</p>
    </div>
    <div class="blok">
    <div class="odebrat-blok"></div>
    <div class="ucho"></div>
    <h2 class="HAP-t-center" contenteditable="true">Nadpis zarovnaný na střed</h2>
    </div>
  </div>
-->



</div><!-- id="demo" -->

<div id="expedice">
  <button id="expeduj">ukaž export</button>
  <div id="nahled-na-kod"></div>
  <div id="html-export"></div>
</div>

</div><!-- /#demoHolder -->
*klikej na obrázky pro přepínání pořadí<br><br>
<ul id="checklist">
Chybí
  <li>fix proti vložení PCHS kódu caps</li>
  <li>fix pro vložení rich dat do content...

CSS

html { font-family: arial,sans-serif;
font-size: 14px; box-sizing: border-box}
*, *:before, *:after { box-sizing: inherit}
body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0;}
ol, ul { list-style: none;}
img { max-width: 100%; height: auto;}
/* ⏸ ▻ ▹ */

#test {position:fixed; top:1em}

#demo {margin:2em auto; padding:1em; max-width:800px; border:4px solid #eee;}
button {cursor:pointer}
h4 {font-weight:300}

/*nastaveni template*/
input:placeholder-shown { border:2px solid red; animation: blink 1s linear infinite; }
@keyframes blink{
0%{border: 2px solid red}
100%{border: 2px solid #eee}
}
#template-settings div {padding:5px; border:2px solid #eee}
[data-mode="dark"] {	background:black; color:white}
[data-headings="blackHeadlines"] h2 {color: black}
[data-headings="blueHeadlines"] h2 {color: #06f}
[data-headings="redHeadlines"] h2 {color: #ea1111}
[data-headings="mcrHeadlines"] h2 {color: white}


#katalog-elementu {	width:100%;	background:#eee; display: flex; flex-wrap: wrap; padding:.5em 0 0 .5em;}
#katalog-elementu h3 { width:100%; padding: 2px 0 5px}
#katalog-elementu .blok{ margin: 0 .5em .5em 0; border:2px solid #06a;background: rgba(255,255,255,.8); border-radius:4px; padding: 10px 20px; height:40px; position:relative}
#katalog-elementu .blok:before {content: "☰"; position:absolute; left:-3px; top:8px}
#katalog-elementu .blok:hover{ cursor:move; box-shadow: 0 0 10px -1px #06a; background:white;}




.blok {margin: 1em 0}
.blok .element {display:flex; width:100%}
.blok .element > div { flex-basis: 50%;}
.blok:nth-child(even) .element { flex-direction:row-reverse}
#staveniste .blok img {border: 2px solid red; width: 100%; min-height:2em}
.blok h2 .blue {color:#05f}
.blok h2 .red {color:#f50}
#staveniste .blok .CustomCode {border: 2px solid blue; min-width: 4em; min-height:2em}
.blok .ImgOnly,
.blok .ImgOnly img{width:100%}
#staveniste .blok .element > div:has(img) {border:1px dotted red}
#staveniste img:before {content:attr(data-nr)}


/*...

JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 

// presety editace šablony
$("input[name=modeType]").click(function(){
  	var val = $("input[name=modeType]:checked").val()
    $('#staveniste').attr("data-mode", val);
    window.themeMode = val;
});
$("input[name=headingColor]").click(function(){
  	var val = $("input[name=headingColor]:checked").val()
    $('#staveniste').attr("data-headings", val);
    window.themeHeadlines = val;
});
$("#modelCode").change(function(){
  	var val = $("#modelCode").val().toLowerCase();
  window.modelCode = val;
})

// nastavím elemetům vlastnost drag a přiřadím kam je možná vkládat
$('.blok').draggable({
  helper: 'clone', // prvky po vložení klonuju, nepřesouvá
  connectToSortable: '#staveniste'
});
  
  // vkládací prvky ve staveništi, manipulace
  $('#staveniste').sortable({
  handle: '.ucho', // jdou přesouvat jen za ucho
  receive : function(event,ui){
  	var block_id = ui.item.attr('id');
  	var pridatTlacitka='<div class="odebrat-blok"></div><div class="ucho"></div>'; //každýmu prvku přidám ucho na tažení a tlačítko pro smazání
    
    if(block_id == 'ImgHeadingText'){pridatTlacitka += '<div class="element ImgHeadingText"><div><img src="https://www.hal3000.cz/www/_pub/images/' + window.modelCode + '/Image_01.jpg"></div><div><h2 contenteditable="true">Nadpis nadpis nadpis</h2><p contenteditable="true">Text</p></div></div>';
    }else 
    if(block_id == 'ImgHeadingTextMCR'){pridatTlacitka += '<div class="element ImgHeadingText"><div><img src="https://www.hal3000.cz/www/_pub/images/' + window.modelCode + '/Image_01.jpg"></div><div><h2 contenteditable="true"><span class="blue">Nadpis</span> nadpis <span class="red">nadpis</span></h2><p contenteditable="true">Text</p></div></div>';
    }else     
    if(block_id == 'ImgOnly'){pridatTlacitka+= '<div class="element ImgOnly"><img src="https://www.hal3000.cz/www/_pub/images/' + window.modelCode + '/Image_01.jpg"></div>';
    }else 
    if(block_id ==...