pub/cssjs-func-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ln

Browse Source
This commit is contained in:
Sebastian Titz 2021-11-24 15:08:48 +01:00
parent 79d82d7550
commit ab01311d89
12 changed files with 12430 additions and 12430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
autosize.min.js vendored
View File

@ -1,2 +1,2 @@
function autosize(tx){for(var i=0;i<tx.length;i++){tx[i].setAttribute("style","height:"+tx[i].scrollHeight+"px;overflow-y:hidden;");tx[i].addEventListener("input",OnInputAutoSize,false)}}function OnInputAutoSize(){this.style.height="auto";this.style.height=this.scrollHeight+"px"}; function autosize(tx){for(var i=0;i<tx.length;i++){tx[i].setAttribute("style","height:"+tx[i].scrollHeight+"px;overflow-y:hidden;");tx[i].addEventListener("input",OnInputAutoSize,false)}}function OnInputAutoSize(){this.style.height="auto";this.style.height=this.scrollHeight+"px"};
//# sourceMappingURL=autosize.min.js.map //# sourceMappingURL=autosize.min.js.map

22530
bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

12
bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
copy-to-clipboard.css
View File

@ -1,35 +1,35 @@
.copy-to-clipboard { .copy-to-clipboard {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.copy-to-clipboard .tooltiptext { .copy-to-clipboard .tooltiptext {
visibility: hidden; visibility: hidden;
width: 140px; width: 140px;
background-color: #555; background-color: #555;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 150%; bottom: 150%;
left: 50%; left: 50%;
margin-left: -75px; margin-left: -75px;
} }
.copy-to-clipboard .tooltiptext::after { .copy-to-clipboard .tooltiptext::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: #555 transparent transparent transparent; border-color: #555 transparent transparent transparent;
} }
.copy-to-clipboard:hover .tooltiptext { .copy-to-clipboard:hover .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }

38
form.js
View File

@ -1,20 +1,20 @@
addAutoresize = function() { addAutoresize = function() {
document.querySelectorAll('[data-autoresize]').forEach(function(element) { document.querySelectorAll('[data-autoresize]').forEach(function(element) {
element.style.boxSizing = 'border-box'; element.style.boxSizing = 'border-box';
var offset = element.offsetHeight - element.clientHeight; var offset = element.offsetHeight - element.clientHeight;
document.addEventListener('input', function(event) { document.addEventListener('input', function(event) {
event.target.style.height = 'auto'; event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px'; event.target.style.height = event.target.scrollHeight + offset + 'px';
}); });
element.removeAttribute('data-autoresize'); element.removeAttribute('data-autoresize');
}); });
} }
addAutoresize(); addAutoresize();
isset = function(id) { isset = function(id) {
if($('#'+id).val() == ''){ if($('#'+id).val() == ''){
alert('Es wurden nicht alle Felder ausgefüllt.'); alert('Es wurden nicht alle Felder ausgefüllt.');
return false; return false;
} }
return true; return true;
} }

178
jquery-autoresize.js vendored
View File

@ -1,90 +1,90 @@
(function($){ (function($){
$.fn.autoResize = function(options) { $.fn.autoResize = function(options) {
// Just some abstracted details, // Just some abstracted details,
// to make plugin users happy: // to make plugin users happy:
var settings = $.extend({ var settings = $.extend({
onResize : function(){}, onResize : function(){},
animate : true, animate : true,
animateDuration : 150, animateDuration : 150,
animateCallback : function(){}, animateCallback : function(){},
extraSpace : 20, extraSpace : 20,
limit: 1000 limit: 1000
}, options); }, options);
// Only textarea's auto-resize: // Only textarea's auto-resize:
this.filter('textarea').each(function(){ this.filter('textarea').each(function(){
// Get rid of scrollbars and disable WebKit resizing: // Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}), var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
// Cache original height, for use later: // Cache original height, for use later:
origHeight = textarea.height(), origHeight = textarea.height(),
// Need clone of textarea, hidden off screen: // Need clone of textarea, hidden off screen:
clone = (function(){ clone = (function(){
// Properties which may effect space taken up by chracters: // Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'], var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {}; propOb = {};
// Create object of styles to apply: // Create object of styles to apply:
$.each(props, function(i, prop){ $.each(props, function(i, prop){
propOb[prop] = textarea.css(prop); propOb[prop] = textarea.css(prop);
}); });
// Clone the actual textarea removing unique properties // Clone the actual textarea removing unique properties
// and insert before original textarea: // and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({ return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: -9999 left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea); }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
})(), })(),
lastScrollTop = null, lastScrollTop = null,
updateSize = function() { updateSize = function() {
// Prepare the clone: // Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000); clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text: // Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone); toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed: // Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; } if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop; lastScrollTop = scrollTop;
// Check for limit: // Check for limit:
if ( scrollTop >= settings.limit ) { if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y',''); $(this).css('overflow-y','');
return; return;
} }
// Fire off callback: // Fire off callback:
settings.onResize.call(this); settings.onResize.call(this);
// Either animate or directly apply height: // Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ? settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback) toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop); : toChange.height(scrollTop);
}; };
// Bind namespaced handlers to appropriate events: // Bind namespaced handlers to appropriate events:
textarea textarea
.unbind('.dynSiz') .unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize) .bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize) .bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize); .bind('change.dynSiz', updateSize);
}); });
// Chain: // Chain:
return this; return this;
}; };
})(jQuery); })(jQuery);

408
lightbox.css
View File

@ -1,204 +1,204 @@
body.lb-disable-scrolling { body.lb-disable-scrolling {
overflow: hidden; overflow: hidden;
} }
.lightboxOverlay { .lightboxOverlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9999; z-index: 9999;
background-color: black; background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; opacity: 0.8;
display: none; display: none;
} }
.lightbox { .lightbox {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 10000; z-index: 10000;
text-align: center; text-align: center;
line-height: 0; line-height: 0;
font-weight: normal; font-weight: normal;
outline: none; outline: none;
} }
.lightbox .lb-image { .lightbox .lb-image {
display: block; display: block;
height: auto; height: auto;
max-width: inherit; max-width: inherit;
max-height: none; max-height: none;
border-radius: 3px; border-radius: 3px;
/* Image border */ /* Image border */
border: 4px solid white; border: 4px solid white;
} }
.lightbox a img { .lightbox a img {
border: none; border: none;
} }
.lb-outerContainer { .lb-outerContainer {
position: relative; position: relative;
*zoom: 1; *zoom: 1;
width: 250px; width: 250px;
height: 250px; height: 250px;
margin: 0 auto; margin: 0 auto;
border-radius: 4px; border-radius: 4px;
/* Background color behind image. /* Background color behind image.
This is visible during transitions. */ This is visible during transitions. */
background-color: white; background-color: white;
} }
.lb-outerContainer:after { .lb-outerContainer:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
.lb-loader { .lb-loader {
position: absolute; position: absolute;
top: 43%; top: 43%;
left: 0; left: 0;
height: 25%; height: 25%;
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 0; line-height: 0;
} }
.lb-cancel { .lb-cancel {
display: block; display: block;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin: 0 auto; margin: 0 auto;
background: url(../images/loading.gif) no-repeat; background: url(../images/loading.gif) no-repeat;
} }
.lb-nav { .lb-nav {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
} }
.lb-container > .nav { .lb-container > .nav {
left: 0; left: 0;
} }
.lb-nav a { .lb-nav a {
outline: none; outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
} }
.lb-prev, .lb-next { .lb-prev, .lb-next {
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
display: block; display: block;
} }
.lb-nav a.lb-prev { .lb-nav a.lb-prev {
width: 34%; width: 34%;
left: 0; left: 0;
float: left; float: left;
background: url(../images/prev.png) left 48% no-repeat; background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.6s; -webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s; -moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s; -o-transition: opacity 0.6s;
transition: opacity 0.6s; transition: opacity 0.6s;
} }
.lb-nav a.lb-prev:hover { .lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; opacity: 1;
} }
.lb-nav a.lb-next { .lb-nav a.lb-next {
width: 64%; width: 64%;
right: 0; right: 0;
float: right; float: right;
background: url(../images/next.png) right 48% no-repeat; background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.6s; -webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s; -moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s; -o-transition: opacity 0.6s;
transition: opacity 0.6s; transition: opacity 0.6s;
} }
.lb-nav a.lb-next:hover { .lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; opacity: 1;
} }
.lb-dataContainer { .lb-dataContainer {
margin: 0 auto; margin: 0 auto;
padding-top: 5px; padding-top: 5px;
*zoom: 1; *zoom: 1;
width: 100%; width: 100%;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.lb-dataContainer:after { .lb-dataContainer:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
.lb-data { .lb-data {
padding: 0 4px; padding: 0 4px;
color: #ccc; color: #ccc;
} }
.lb-data .lb-details { .lb-data .lb-details {
width: 85%; width: 85%;
float: left; float: left;
text-align: left; text-align: left;
line-height: 1.1em; line-height: 1.1em;
} }
.lb-data .lb-caption { .lb-data .lb-caption {
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
line-height: 1em; line-height: 1em;
} }
.lb-data .lb-caption a { .lb-data .lb-caption a {
color: #4ae; color: #4ae;
} }
.lb-data .lb-number { .lb-data .lb-number {
display: block; display: block;
clear: left; clear: left;
padding-bottom: 1em; padding-bottom: 1em;
font-size: 12px; font-size: 12px;
color: #999999; color: #999999;
} }
.lb-data .lb-close { .lb-data .lb-close {
display: block; display: block;
float: right; float: right;
width: 30px; width: 30px;
height: 30px; height: 30px;
background: url(../images/close.png) top right no-repeat; background: url(../images/close.png) top right no-repeat;
text-align: right; text-align: right;
outline: none; outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; opacity: 0.7;
-webkit-transition: opacity 0.2s; -webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s; -moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s; -o-transition: opacity 0.2s;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.lb-data .lb-close:hover { .lb-data .lb-close:hover {
cursor: pointer; cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; opacity: 1;
} }

1118
lightbox.js
View File

File diff suppressed because it is too large Load Diff

36
make-columns.css
View File

@ -1,19 +1,19 @@
.row.make-columns { .row.make-columns {
-moz-column-width: 19em; -moz-column-width: 19em;
-webkit-column-width: 19em; -webkit-column-width: 19em;
-moz-column-gap: 1em; -moz-column-gap: 1em;
-webkit-column-gap:1em; -webkit-column-gap:1em;
} }
.row.make-columns > div { .row.make-columns > div {
display: inline-block; display: inline-block;
padding: .5rem; padding: .5rem;
width: 100%; width: 100%;
} }
/* demo only* */ /* demo only* */
.panel { .panel {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

178
wysiwyg.css
View File

@ -1,90 +1,90 @@
.wysiwyg { .wysiwyg {
width: 40rem; width: 40rem;
min-height: 18rem; min-height: 18rem;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
border-top: 6px solid #4a4a4a; border-top: 6px solid #4a4a4a;
border-radius: 3px; border-radius: 3px;
margin: 2rem; margin: 2rem;
} }
.wysiwyg .toolbar { .wysiwyg .toolbar {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
} }
.wysiwyg .toolbar .line { .wysiwyg .toolbar .line {
display: flex; display: flex;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
} }
.wysiwyg .toolbar .line:last-child { .wysiwyg .toolbar .line:last-child {
border-bottom: none; border-bottom: none;
} }
.wysiwyg .toolbar .line .box { .wysiwyg .toolbar .line .box {
display: flex; display: flex;
border-left: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2;
} }
.wysiwyg .toolbar .line .box .btn { .wysiwyg .toolbar .line .box .btn {
display: block; display: block;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
transition: 0.2s ease all; transition: 0.2s ease all;
} }
.wysiwyg .toolbar .line .box .btn:hover, .wysiwyg .toolbar .line .box .btn.active { .wysiwyg .toolbar .line .box .btn:hover, .wysiwyg .toolbar .line .box .btn.active {
background-color: #e1e1e1; background-color: #e1e1e1;
cursor: pointer; cursor: pointer;
} }
.wysiwyg .toolbar .line .box .btn.icon img { .wysiwyg .toolbar .line .box .btn.icon img {
width: 15px; width: 15px;
padding: 10px; padding: 10px;
} }
.wysiwyg .toolbar .line .box .btn.icon.smaller img { .wysiwyg .toolbar .line .box .btn.icon.smaller img {
width: 12px; width: 12px;
} }
.wysiwyg .toolbar .line .box .btn.has-submenu { .wysiwyg .toolbar .line .box .btn.has-submenu {
width: 20px; width: 20px;
padding: 0 10px; padding: 0 10px;
} }
.wysiwyg .toolbar .line .box .btn.has-submenu::after { .wysiwyg .toolbar .line .box .btn.has-submenu::after {
content: ''; content: '';
width: 6px; width: 6px;
height: 6px; height: 6px;
position: absolute; position: absolute;
background-image: url(https://image.flaticon.com/icons/svg/25/25243.svg); background-image: url(https://image.flaticon.com/icons/svg/25/25243.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
right: 4px; right: 4px;
} }
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu { .wysiwyg .toolbar .line .box .btn.has-submenu .submenu {
display: none; display: none;
position: absolute; position: absolute;
top: 36px; top: 36px;
left: -1px; left: -1px;
z-index: 10; z-index: 10;
background-color: #fff; background-color: #fff;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-top: none; border-top: none;
} }
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu .btn { .wysiwyg .toolbar .line .box .btn.has-submenu .submenu .btn {
width: 39px; width: 39px;
} }
.wysiwyg .toolbar .line .box .btn.has-submenu:hover .submenu { .wysiwyg .toolbar .line .box .btn.has-submenu:hover .submenu {
display: block; display: block;
} }
.wysiwyg .content-area { .wysiwyg .content-area {
padding: 15px 12px; padding: 15px 12px;
line-height: 1.5; line-height: 1.5;
} }
.wysiwyg .content-area .visuell-view { .wysiwyg .content-area .visuell-view {
outline: none; outline: none;
} }
.wysiwyg .content-area .visuell-view p { .wysiwyg .content-area .visuell-view p {
margin: 12px 0; margin: 12px 0;
} }
.wysiwyg .content-area .html-view { .wysiwyg .content-area .html-view {
outline: none; outline: none;
display: none; display: none;
width: 100%; width: 100%;
height: 200px; height: 200px;
border: none; border: none;
resize: none; resize: none;
} }

278
wysiwyg.js
View File

@ -1,140 +1,140 @@
function initWYSIWYG() { function initWYSIWYG() {
$('.wysiwyg').html('<div class="toolbar">'+ $('.wysiwyg').html('<div class="toolbar">'+
' <div class="line">'+ ' <div class="line">'+
' '+ ' '+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon smaller" data-action="bold" title="Bold">'+ ' <span class="btn icon smaller" data-action="bold" title="Bold">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25432.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25432.svg">'+
' </span>'+ ' </span>'+
' <span class="btn icon smaller" data-action="italic" title="Italic">'+ ' <span class="btn icon smaller" data-action="italic" title="Italic">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25392.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25392.svg">'+
' </span>'+ ' </span>'+
' <span class="btn icon smaller" data-action="underline" title="Underline">'+ ' <span class="btn icon smaller" data-action="underline" title="Underline">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25433.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25433.svg">'+
' </span>'+ ' </span>'+
' <span class="btn icon smaller" data-action="strikeThrough" title="Strike through">'+ ' <span class="btn icon smaller" data-action="strikeThrough" title="Strike through">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25626.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25626.svg">'+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' '+ ' '+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon has-submenu">'+ ' <span class="btn icon has-submenu">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg">'+
' <div class="submenu">'+ ' <div class="submenu">'+
' <span class="btn icon" data-action="justifyLeft" title="Justify left">'+ ' <span class="btn icon" data-action="justifyLeft" title="Justify left">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="justifyCenter" title="Justify center">'+ ' <span class="btn icon" data-action="justifyCenter" title="Justify center">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25440.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25440.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="justifyRight" title="Justify right">'+ ' <span class="btn icon" data-action="justifyRight" title="Justify right">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25288.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25288.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="formatBlock" title="Justify block">'+ ' <span class="btn icon" data-action="formatBlock" title="Justify block">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25181.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25181.svg"> '+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="insertOrderedList" title="Insert ordered list">'+ ' <span class="btn icon" data-action="insertOrderedList" title="Insert ordered list">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25242.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25242.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="insertUnorderedList" title="Insert unordered list">'+ ' <span class="btn icon" data-action="insertUnorderedList" title="Insert unordered list">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25648.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25648.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="outdent" title="Outdent">'+ ' <span class="btn icon" data-action="outdent" title="Outdent">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25410.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25410.svg"> '+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="indent" title="Indent">'+ ' <span class="btn icon" data-action="indent" title="Indent">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25233.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25233.svg"> '+
' </span>'+ ' </span>'+
' '+ ' '+
' </div>'+ ' </div>'+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">'+ ' <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25232.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25232.svg"> '+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' '+ ' '+
'</div>'+ '</div>'+
'<div class="line">'+ '<div class="line">'+
' '+ ' '+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon smaller" data-action="undo" title="Undo">'+ ' <span class="btn icon smaller" data-action="undo" title="Undo">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25249.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25249.svg">'+
' </span>'+ ' </span>'+
' <span class="btn icon" data-action="removeFormat" title="Remove format">'+ ' <span class="btn icon" data-action="removeFormat" title="Remove format">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25454.svg"> '+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25454.svg"> '+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' '+ ' '+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon smaller" data-action="createLink" title="Insert Link">'+ ' <span class="btn icon smaller" data-action="createLink" title="Insert Link">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25385.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25385.svg">'+
' </span>'+ ' </span>'+
' <span class="btn icon smaller" data-action="unlink" title="Unlink">'+ ' <span class="btn icon smaller" data-action="unlink" title="Unlink">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25341.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25341.svg">'+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' <div class="box">'+ ' <div class="box">'+
' <span class="btn icon" data-action="code" title="Show HTML-Code">'+ ' <span class="btn icon" data-action="code" title="Show HTML-Code">'+
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25185.svg">'+ ' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25185.svg">'+
' </span>'+ ' </span>'+
' </div>'+ ' </div>'+
' '+ ' '+
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'<div class="content-area">'+ '<div class="content-area">'+
'<div class="visuell-view" contenteditable>'+ '<div class="visuell-view" contenteditable>'+
'</div>'+ '</div>'+
'<textarea class="html-view"></textarea>'+ '<textarea class="html-view"></textarea>'+
'</div>'); '</div>');
} }
initWYSIWYG(); initWYSIWYG();
const editor = document.getElementsByClassName('wysiwyg')[0]; const editor = document.getElementsByClassName('wysiwyg')[0];
console.log(editor); console.log(editor);
const toolbar = editor.getElementsByClassName('toolbar')[0]; const toolbar = editor.getElementsByClassName('toolbar')[0];
const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)'); const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)');
for(let i = 0; i < buttons.length; i++) { for(let i = 0; i < buttons.length; i++) {
let button = buttons[i]; let button = buttons[i];
button.addEventListener('click', function(e) { button.addEventListener('click', function(e) {
let action = this.dataset.action; let action = this.dataset.action;
switch(action) { switch(action) {
case 'code': case 'code':
execCodeAction(this, editor); execCodeAction(this, editor);
break; break;
case 'createLink': case 'createLink':
execLinkAction(); execLinkAction();
break; break;
default: default:
execDefaultAction(action); execDefaultAction(action);
} }
}); });
} }
function execCodeAction(button, editor) { function execCodeAction(button, editor) {
const contentArea = editor.getElementsByClassName('content-area')[0]; const contentArea = editor.getElementsByClassName('content-area')[0];
const visuellView = contentArea.getElementsByClassName('visuell-view')[0]; const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
const htmlView = contentArea.getElementsByClassName('html-view')[0]; const htmlView = contentArea.getElementsByClassName('html-view')[0];
if(button.classList.contains('active')) { // show visuell view if(button.classList.contains('active')) { // show visuell view
visuellView.innerHTML = htmlView.value; visuellView.innerHTML = htmlView.value;
htmlView.style.display = 'none'; htmlView.style.display = 'none';
visuellView.style.display = 'block'; visuellView.style.display = 'block';
button.classList.remove('active'); button.classList.remove('active');
} else { // show html view } else { // show html view
htmlView.innerText = visuellView.innerHTML; htmlView.innerText = visuellView.innerHTML;
visuellView.style.display = 'none'; visuellView.style.display = 'none';
htmlView.style.display = 'block'; htmlView.style.display = 'block';
button.classList.add('active'); button.classList.add('active');
} }
} }
function execLinkAction() { function execLinkAction() {
let linkValue = prompt('Link (e.g. https://webdeasy.de/)'); let linkValue = prompt('Link (e.g. https://webdeasy.de/)');
document.execCommand('createLink', false, linkValue); document.execCommand('createLink', false, linkValue);
} }
function execDefaultAction(action) { function execDefaultAction(action) {
document.execCommand(action, false); document.execCommand(action, false);
} }