File: D:/HostingSpaces/EvLuik/vanluiktegelwerken.nl/wwwroot/templates/fhs-editorial/snippets.htm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>copy&paste – Snippets für das Template fhs-editorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
font: 15px Verdana, Arial, Helvetica, sans-serif;
}
.wrapper {
width: 900px;
margin: 1em auto;
}
h1 {
font-size: 1.75em;
font-weight: normal;
margin: 0 0 .5em 0;
}
h1 ~ p {
margin: 0 0 1.5em 0;
color: #666;
}
form {
width:100%;
}
textarea {
color: blue;
width: 898px;
padding: 1em 1em 0 1em;
background: #ffe;
border: 0;
font: 0.9em "Courier New", Courier, monospace;
}
.alignRigth {
float: right;
margin-top: calc(-2.25em + 1px);
/*margin-top: -2.25em;*/
}
input[type=button] {
font: 1em Verdana, Arial, Helvetica, sans-serif;
padding: 0.5em;
border: 0;
background: #333;
color: #fff;
cursor: pointer;
}
input[type=button]:hover {
background: #eee;
color: #333;
}
.accordionItem {
float:left;
display:block;
width:100%;
}
.accordionItemHeading {
cursor: pointer;
margin: 0 0 .5em 0;
padding: .5em;
background: #999;
color: #fff;
width: 100%;
font-weight: bold;
line-height: 1;
border: 1px solid #999;
}
.accordionItemHeading span {
font-weight: normal;
}
.close .accordionItemContent {
height:0px;
transition:height 1s ease-out;
-webkit-transform: scaleY(0);
transform: scaleY(0);
float:left;
display:block;
}
.open .accordionItemContent {
background-color: #fff;
border: 1px solid #999;
width: 100%;
margin: 0 0 .5em 0;
display:block;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease;
}
.open .accordionItemHeading {
margin:0px;
background-color: #666;
color: #fff;
border-color: #666;
}
@media screen and (max-width: 1024px) {
.wrapper {
width: 768px;
}
textarea {
width: 766px;
}
}
@media screen and (max-width: 768px) {
.wrapper {
width: 640px;
}
textarea {
width: 638px;
}
}
@media screen and (max-width: 640px) {
.wrapper {
width: 320px;
}
textarea {
width: 318px;
}
}
@media screen and (max-width: 320px) {
.wrapper {
width: 300px;
}
textarea {
width: 298px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1><em>copy&paste</em> – Snippets für das Template <strong>fhs-editorial</strong></h1>
<p>Kopiere ein Snippet mit einem Klick auf den Button <strong>copy to clipboard</strong> in die Zwischenablage und füge es danach im Quelltext deiner Seite an der gewünschten Stelle ein.</p>
<div class="accordionWrapper">
<div class="accordionItem close">
<div class="accordionItemHeading"><section> + <header> <span>Start-Seite</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly">
<section id="banner">
<div class="content">
<header>
<h1>Überschrift 1</h1>
<p>Absatz</p>
</header>
<p>Absatz</p>
</div>
<p>Absatz</p>
<span class="image"> <img src="./userfiles/images/picture.jpg" alt="picture"> </span>
</section>
</textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading"><section> + <header> <span>Standard-Seiten</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly">
<section>
<header class="main">
<h1>Überschrift 1</h1>
</header>
<span class="image main"><img src="./userfiles/images/picture.jpg" alt="picture"></span>
<p>Absatz</p>
</section>
</textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading">2 Spalten <span>mit Text</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly">
<div class="row">
<div class="col-6 col-12-small">
<h3>Zeispaltig, erste Spalte</h3>
<p>Absatz</p>
</div>
<div class="col-6 col-12-small">
<h3>Zeispaltig, zweite Spalte</h3>
<p>Absatz</p>
</div>
</div>
</textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading">3 Spalten <span>mit Text</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly">
<div class="row">
<div class="col-4 col-12-medium">
<h3>Dreispaltig (1)</h3>
<p>Absatz</p>
</div>
<div class="col-4 col-12-medium">
<h3>Dreispaltig (2)</h3>
<p>Absatz</p>
</div>
<div class="col-4 col-12-medium">
<h3>Dreispaltig (3)</h3>
<p>Absatz</p>
</div>
</div>
</textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading"><img> <span>Bild volle Breite</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly"><span class="image main"><img src="./userfiles/images/picture.jpg" alt="picture"></span></textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading"><img> <span>Bild im Text rechts</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly"><span class="image right"><img src="./userfiles/images/picture.jpg" alt="picture"></span></textarea>
</form>
</div>
</div>
<div class="accordionItem close">
<div class="accordionItemHeading"><img> <span>Bild im Text links</span></div>
<div class="accordionItemContent">
<form>
<div class="alignRigth">
<input title="Klick übernimmt den Code in die Zwischenablage" type="button" value="copy to clipboard" onClick="this.form.code.select(); this.form.code.focus(); document.execCommand('copy')">
</div>
<textarea name="code" readonly="readonly"><span class="image left"><img src="./userfiles/images/picture.jpg" alt="picture"></span></textarea>
</form>
</div>
</div>
</div>
</div>
<script>
/*!
autosize 4.0.2
license: MIT
http://www.jacklmoore.com/autosize
*/
(function(global,factory){if(typeof define==="function"&&define.amd){define(['module','exports'],factory);}else if(typeof exports!=="undefined"){factory(module,exports);}else{var mod={exports:{}};factory(mod,mod.exports);global.autosize=mod.exports;}})(this,function(module,exports){'use strict';var map=typeof Map==="function"?new Map():function(){var keys=[];var values=[];return{has:function has(key){return keys.indexOf(key)>-1;},get:function get(key){return values[keys.indexOf(key)];},set:function set(key,value){if(keys.indexOf(key)===-1){keys.push(key);values.push(value);}},delete:function _delete(key){var index=keys.indexOf(key);if(index>-1){keys.splice(index,1);values.splice(index,1);}}};}
();var createEvent=function createEvent(name){return new Event(name,{bubbles:true});};try{new Event('test');}catch(e){createEvent=function createEvent(name){var evt=document.createEvent('Event');evt.initEvent(name,true,false);return evt;};}
function assign(ta){if(!ta||!ta.nodeName||ta.nodeName!=='TEXTAREA'||map.has(ta))
return;var heightOffset=null;var clientWidth=null;var cachedHeight=null;function init(){var style=window.getComputedStyle(ta,null);if(style.resize==='vertical'){ta.style.resize='none';}else if(style.resize==='both'){ta.style.resize='horizontal';}
if(style.boxSizing==='content-box'){heightOffset=-(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));}else{heightOffset=parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);}
if(isNaN(heightOffset)){heightOffset=0;}
update();}
function changeOverflow(value){{var width=ta.style.width;ta.style.width='0px';ta.offsetWidth;ta.style.width=width;}
ta.style.overflowY=value;}
function getParentOverflows(el){var arr=[];while(el&&el.parentNode&&el.parentNode instanceof Element){if(el.parentNode.scrollTop){arr.push({node:el.parentNode,scrollTop:el.parentNode.scrollTop});}
el=el.parentNode;}
return arr;}
function resize(){if(ta.scrollHeight===0){return;}
var overflows=getParentOverflows(ta);var docTop=document.documentElement&&document.documentElement.scrollTop;ta.style.height='';ta.style.height=ta.scrollHeight+heightOffset+'px';clientWidth=ta.clientWidth;overflows.forEach(function(el){el.node.scrollTop=el.scrollTop;});if(docTop){document.documentElement.scrollTop=docTop;}}
function update(){resize();var styleHeight=Math.round(parseFloat(ta.style.height));var computed=window.getComputedStyle(ta,null);var actualHeight=computed.boxSizing==='content-box'?Math.round(parseFloat(computed.height)):ta.offsetHeight;if(actualHeight<styleHeight){if(computed.overflowY==='hidden'){changeOverflow('scroll');resize();actualHeight=computed.boxSizing==='content-box'?Math.round(parseFloat(window.getComputedStyle(ta,null).height)):ta.offsetHeight;}}else{if(computed.overflowY!=='hidden'){changeOverflow('hidden');resize();actualHeight=computed.boxSizing==='content-box'?Math.round(parseFloat(window.getComputedStyle(ta,null).height)):ta.offsetHeight;}}
if(cachedHeight!==actualHeight){cachedHeight=actualHeight;var evt=createEvent('autosize:resized');try{ta.dispatchEvent(evt);}catch(err){}}}
var pageResize=function pageResize(){if(ta.clientWidth!==clientWidth){update();}};var destroy=function(style){window.removeEventListener('resize',pageResize,false);ta.removeEventListener('input',update,false);ta.removeEventListener('keyup',update,false);ta.removeEventListener('autosize:destroy',destroy,false);ta.removeEventListener('autosize:update',update,false);Object.keys(style).forEach(function(key){ta.style[key]=style[key];});map.delete(ta);}.bind(ta,{height:ta.style.height,resize:ta.style.resize,overflowY:ta.style.overflowY,overflowX:ta.style.overflowX,wordWrap:ta.style.wordWrap});ta.addEventListener('autosize:destroy',destroy,false);if('onpropertychange'in ta&&'oninput'in ta){ta.addEventListener('keyup',update,false);}
window.addEventListener('resize',pageResize,false);ta.addEventListener('input',update,false);ta.addEventListener('autosize:update',update,false);ta.style.overflowX='hidden';ta.style.wordWrap='break-word';map.set(ta,{destroy:destroy,update:update});init();}
function destroy(ta){var methods=map.get(ta);if(methods){methods.destroy();}}
function update(ta){var methods=map.get(ta);if(methods){methods.update();}}
var autosize=null;if(typeof window==='undefined'||typeof window.getComputedStyle!=='function'){autosize=function autosize(el){return el;};autosize.destroy=function(el){return el;};autosize.update=function(el){return el;};}else{autosize=function autosize(el,options){if(el){Array.prototype.forEach.call(el.length?el:[el],function(x){return assign(x,options);});}
return el;};autosize.destroy=function(el){if(el){Array.prototype.forEach.call(el.length?el:[el],destroy);}
return el;};autosize.update=function(el){if(el){Array.prototype.forEach.call(el.length?el:[el],update);}
return el;};}
exports.default=autosize;module.exports=exports['default'];});autosize(document.querySelectorAll('textarea'));
autosize(document.querySelectorAll('textarea'));
/* accordion */
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
</script>
</body>
</html>