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
Download Patch File Download Diff File Expand all files Collapse all files
autosize.min.js
Vendored
+2 -2
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
bootstrap.css
Vendored
+11265 -11265
View File
File diff suppressed because it is too large Load Diff
bootstrap.min.css
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
bootstrap.min.js
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
copy-to-clipboard.css
+34 -34
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;
} }
form.js
+19 -19
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;
} }
jquery-autoresize.js
Vendored
+89 -89
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);
lightbox.css
+204 -204
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;
} }
lightbox.js
+559 -559
View File
File diff suppressed because it is too large Load Diff
make-columns.css
+18 -18
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%;
} }
wysiwyg.css
+89 -89
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;
} }
wysiwyg.js
+139 -139
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);
} }