ln
This commit is contained in:
Sebastian Titz
Vendored
+2
-2
@@ -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"};
|
||||
//# sourceMappingURL=autosize.min.js.map
|
||||
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
|
||||
|
||||
Vendored
+11265
-11265
File diff suppressed because it is too large
Load Diff
Vendored
+6
-6
File diff suppressed because one or more lines are too long
Vendored
+6
-6
File diff suppressed because one or more lines are too long
+34
-34
@@ -1,35 +1,35 @@
|
||||
.copy-to-clipboard {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.copy-to-clipboard .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 140px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
}
|
||||
|
||||
.copy-to-clipboard .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.copy-to-clipboard:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
.copy-to-clipboard {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.copy-to-clipboard .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 140px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
}
|
||||
|
||||
.copy-to-clipboard .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.copy-to-clipboard:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,20 +1,20 @@
|
||||
addAutoresize = function() {
|
||||
document.querySelectorAll('[data-autoresize]').forEach(function(element) {
|
||||
element.style.boxSizing = 'border-box';
|
||||
var offset = element.offsetHeight - element.clientHeight;
|
||||
document.addEventListener('input', function(event) {
|
||||
event.target.style.height = 'auto';
|
||||
event.target.style.height = event.target.scrollHeight + offset + 'px';
|
||||
});
|
||||
element.removeAttribute('data-autoresize');
|
||||
});
|
||||
}
|
||||
addAutoresize();
|
||||
|
||||
isset = function(id) {
|
||||
if($('#'+id).val() == ''){
|
||||
alert('Es wurden nicht alle Felder ausgefüllt.');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
addAutoresize = function() {
|
||||
document.querySelectorAll('[data-autoresize]').forEach(function(element) {
|
||||
element.style.boxSizing = 'border-box';
|
||||
var offset = element.offsetHeight - element.clientHeight;
|
||||
document.addEventListener('input', function(event) {
|
||||
event.target.style.height = 'auto';
|
||||
event.target.style.height = event.target.scrollHeight + offset + 'px';
|
||||
});
|
||||
element.removeAttribute('data-autoresize');
|
||||
});
|
||||
}
|
||||
addAutoresize();
|
||||
|
||||
isset = function(id) {
|
||||
if($('#'+id).val() == ''){
|
||||
alert('Es wurden nicht alle Felder ausgefüllt.');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
Vendored
+89
-89
@@ -1,90 +1,90 @@
|
||||
(function($){
|
||||
|
||||
$.fn.autoResize = function(options) {
|
||||
|
||||
// Just some abstracted details,
|
||||
// to make plugin users happy:
|
||||
var settings = $.extend({
|
||||
onResize : function(){},
|
||||
animate : true,
|
||||
animateDuration : 150,
|
||||
animateCallback : function(){},
|
||||
extraSpace : 20,
|
||||
limit: 1000
|
||||
}, options);
|
||||
|
||||
// Only textarea's auto-resize:
|
||||
this.filter('textarea').each(function(){
|
||||
|
||||
// Get rid of scrollbars and disable WebKit resizing:
|
||||
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
|
||||
|
||||
// Cache original height, for use later:
|
||||
origHeight = textarea.height(),
|
||||
|
||||
// Need clone of textarea, hidden off screen:
|
||||
clone = (function(){
|
||||
|
||||
// Properties which may effect space taken up by chracters:
|
||||
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
|
||||
propOb = {};
|
||||
|
||||
// Create object of styles to apply:
|
||||
$.each(props, function(i, prop){
|
||||
propOb[prop] = textarea.css(prop);
|
||||
});
|
||||
|
||||
// Clone the actual textarea removing unique properties
|
||||
// and insert before original textarea:
|
||||
return textarea.clone().removeAttr('id').removeAttr('name').css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: -9999
|
||||
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
|
||||
|
||||
})(),
|
||||
lastScrollTop = null,
|
||||
updateSize = function() {
|
||||
|
||||
// Prepare the clone:
|
||||
clone.height(0).val($(this).val()).scrollTop(10000);
|
||||
|
||||
// Find the height of text:
|
||||
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
|
||||
toChange = $(this).add(clone);
|
||||
|
||||
// Don't do anything if scrollTip hasen't changed:
|
||||
if (lastScrollTop === scrollTop) { return; }
|
||||
lastScrollTop = scrollTop;
|
||||
|
||||
// Check for limit:
|
||||
if ( scrollTop >= settings.limit ) {
|
||||
$(this).css('overflow-y','');
|
||||
return;
|
||||
}
|
||||
// Fire off callback:
|
||||
settings.onResize.call(this);
|
||||
|
||||
// Either animate or directly apply height:
|
||||
settings.animate && textarea.css('display') === 'block' ?
|
||||
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
|
||||
: toChange.height(scrollTop);
|
||||
};
|
||||
|
||||
// Bind namespaced handlers to appropriate events:
|
||||
textarea
|
||||
.unbind('.dynSiz')
|
||||
.bind('keyup.dynSiz', updateSize)
|
||||
.bind('keydown.dynSiz', updateSize)
|
||||
.bind('change.dynSiz', updateSize);
|
||||
|
||||
});
|
||||
|
||||
// Chain:
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
(function($){
|
||||
|
||||
$.fn.autoResize = function(options) {
|
||||
|
||||
// Just some abstracted details,
|
||||
// to make plugin users happy:
|
||||
var settings = $.extend({
|
||||
onResize : function(){},
|
||||
animate : true,
|
||||
animateDuration : 150,
|
||||
animateCallback : function(){},
|
||||
extraSpace : 20,
|
||||
limit: 1000
|
||||
}, options);
|
||||
|
||||
// Only textarea's auto-resize:
|
||||
this.filter('textarea').each(function(){
|
||||
|
||||
// Get rid of scrollbars and disable WebKit resizing:
|
||||
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
|
||||
|
||||
// Cache original height, for use later:
|
||||
origHeight = textarea.height(),
|
||||
|
||||
// Need clone of textarea, hidden off screen:
|
||||
clone = (function(){
|
||||
|
||||
// Properties which may effect space taken up by chracters:
|
||||
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
|
||||
propOb = {};
|
||||
|
||||
// Create object of styles to apply:
|
||||
$.each(props, function(i, prop){
|
||||
propOb[prop] = textarea.css(prop);
|
||||
});
|
||||
|
||||
// Clone the actual textarea removing unique properties
|
||||
// and insert before original textarea:
|
||||
return textarea.clone().removeAttr('id').removeAttr('name').css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: -9999
|
||||
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
|
||||
|
||||
})(),
|
||||
lastScrollTop = null,
|
||||
updateSize = function() {
|
||||
|
||||
// Prepare the clone:
|
||||
clone.height(0).val($(this).val()).scrollTop(10000);
|
||||
|
||||
// Find the height of text:
|
||||
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
|
||||
toChange = $(this).add(clone);
|
||||
|
||||
// Don't do anything if scrollTip hasen't changed:
|
||||
if (lastScrollTop === scrollTop) { return; }
|
||||
lastScrollTop = scrollTop;
|
||||
|
||||
// Check for limit:
|
||||
if ( scrollTop >= settings.limit ) {
|
||||
$(this).css('overflow-y','');
|
||||
return;
|
||||
}
|
||||
// Fire off callback:
|
||||
settings.onResize.call(this);
|
||||
|
||||
// Either animate or directly apply height:
|
||||
settings.animate && textarea.css('display') === 'block' ?
|
||||
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
|
||||
: toChange.height(scrollTop);
|
||||
};
|
||||
|
||||
// Bind namespaced handlers to appropriate events:
|
||||
textarea
|
||||
.unbind('.dynSiz')
|
||||
.bind('keyup.dynSiz', updateSize)
|
||||
.bind('keydown.dynSiz', updateSize)
|
||||
.bind('change.dynSiz', updateSize);
|
||||
|
||||
});
|
||||
|
||||
// Chain:
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
+204
-204
@@ -1,204 +1,204 @@
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
+559
-559
File diff suppressed because it is too large
Load Diff
+18
-18
@@ -1,19 +1,19 @@
|
||||
.row.make-columns {
|
||||
-moz-column-width: 19em;
|
||||
-webkit-column-width: 19em;
|
||||
-moz-column-gap: 1em;
|
||||
-webkit-column-gap:1em;
|
||||
}
|
||||
|
||||
.row.make-columns > div {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* demo only* */
|
||||
.panel {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.row.make-columns {
|
||||
-moz-column-width: 19em;
|
||||
-webkit-column-width: 19em;
|
||||
-moz-column-gap: 1em;
|
||||
-webkit-column-gap:1em;
|
||||
}
|
||||
|
||||
.row.make-columns > div {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* demo only* */
|
||||
.panel {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
+89
-89
@@ -1,90 +1,90 @@
|
||||
.wysiwyg {
|
||||
width: 40rem;
|
||||
min-height: 18rem;
|
||||
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
|
||||
border-top: 6px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
margin: 2rem;
|
||||
}
|
||||
.wysiwyg .toolbar {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.wysiwyg .toolbar .line {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
.wysiwyg .toolbar .line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box {
|
||||
display: flex;
|
||||
border-left: 1px solid #e2e2e2;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn:hover, .wysiwyg .toolbar .line .box .btn.active {
|
||||
background-color: #e1e1e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.icon img {
|
||||
width: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.icon.smaller img {
|
||||
width: 12px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu {
|
||||
width: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
background-image: url(https://image.flaticon.com/icons/svg/25/25243.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
right: 4px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: -1px;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-top: none;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu .btn {
|
||||
width: 39px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
.wysiwyg .content-area {
|
||||
padding: 15px 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wysiwyg .content-area .visuell-view {
|
||||
outline: none;
|
||||
}
|
||||
.wysiwyg .content-area .visuell-view p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.wysiwyg .content-area .html-view {
|
||||
outline: none;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: none;
|
||||
resize: none;
|
||||
.wysiwyg {
|
||||
width: 40rem;
|
||||
min-height: 18rem;
|
||||
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
|
||||
border-top: 6px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
margin: 2rem;
|
||||
}
|
||||
.wysiwyg .toolbar {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.wysiwyg .toolbar .line {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
.wysiwyg .toolbar .line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box {
|
||||
display: flex;
|
||||
border-left: 1px solid #e2e2e2;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn:hover, .wysiwyg .toolbar .line .box .btn.active {
|
||||
background-color: #e1e1e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.icon img {
|
||||
width: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.icon.smaller img {
|
||||
width: 12px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu {
|
||||
width: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
background-image: url(https://image.flaticon.com/icons/svg/25/25243.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
right: 4px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: -1px;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-top: none;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu .submenu .btn {
|
||||
width: 39px;
|
||||
}
|
||||
.wysiwyg .toolbar .line .box .btn.has-submenu:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
.wysiwyg .content-area {
|
||||
padding: 15px 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wysiwyg .content-area .visuell-view {
|
||||
outline: none;
|
||||
}
|
||||
.wysiwyg .content-area .visuell-view p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.wysiwyg .content-area .html-view {
|
||||
outline: none;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
+139
-139
@@ -1,140 +1,140 @@
|
||||
function initWYSIWYG() {
|
||||
$('.wysiwyg').html('<div class="toolbar">'+
|
||||
' <div class="line">'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="bold" title="Bold">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25432.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="italic" title="Italic">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25392.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="underline" title="Underline">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25433.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="strikeThrough" title="Strike through">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25626.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon has-submenu">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg">'+
|
||||
' <div class="submenu">'+
|
||||
' <span class="btn icon" data-action="justifyLeft" title="Justify left">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="justifyCenter" title="Justify center">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25440.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="justifyRight" title="Justify right">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25288.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="formatBlock" title="Justify block">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25181.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="insertOrderedList" title="Insert ordered list">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25242.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="insertUnorderedList" title="Insert unordered list">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25648.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="outdent" title="Outdent">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25410.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="indent" title="Indent">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25233.svg"> '+
|
||||
' </span>'+
|
||||
' '+
|
||||
' </div>'+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25232.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
'</div>'+
|
||||
'<div class="line">'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="undo" title="Undo">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25249.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="removeFormat" title="Remove format">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25454.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="createLink" title="Insert Link">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25385.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="unlink" title="Unlink">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25341.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon" data-action="code" title="Show HTML-Code">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25185.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="content-area">'+
|
||||
'<div class="visuell-view" contenteditable>'+
|
||||
'</div>'+
|
||||
'<textarea class="html-view"></textarea>'+
|
||||
'</div>');
|
||||
}
|
||||
|
||||
initWYSIWYG();
|
||||
|
||||
const editor = document.getElementsByClassName('wysiwyg')[0];
|
||||
console.log(editor);
|
||||
const toolbar = editor.getElementsByClassName('toolbar')[0];
|
||||
const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)');
|
||||
for(let i = 0; i < buttons.length; i++) {
|
||||
let button = buttons[i];
|
||||
|
||||
button.addEventListener('click', function(e) {
|
||||
let action = this.dataset.action;
|
||||
|
||||
switch(action) {
|
||||
case 'code':
|
||||
execCodeAction(this, editor);
|
||||
break;
|
||||
case 'createLink':
|
||||
execLinkAction();
|
||||
break;
|
||||
default:
|
||||
execDefaultAction(action);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
function execCodeAction(button, editor) {
|
||||
const contentArea = editor.getElementsByClassName('content-area')[0];
|
||||
const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
|
||||
const htmlView = contentArea.getElementsByClassName('html-view')[0];
|
||||
if(button.classList.contains('active')) { // show visuell view
|
||||
visuellView.innerHTML = htmlView.value;
|
||||
htmlView.style.display = 'none';
|
||||
visuellView.style.display = 'block';
|
||||
button.classList.remove('active');
|
||||
} else { // show html view
|
||||
htmlView.innerText = visuellView.innerHTML;
|
||||
visuellView.style.display = 'none';
|
||||
htmlView.style.display = 'block';
|
||||
button.classList.add('active');
|
||||
}
|
||||
}
|
||||
function execLinkAction() {
|
||||
let linkValue = prompt('Link (e.g. https://webdeasy.de/)');
|
||||
document.execCommand('createLink', false, linkValue);
|
||||
}
|
||||
function execDefaultAction(action) {
|
||||
document.execCommand(action, false);
|
||||
function initWYSIWYG() {
|
||||
$('.wysiwyg').html('<div class="toolbar">'+
|
||||
' <div class="line">'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="bold" title="Bold">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25432.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="italic" title="Italic">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25392.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="underline" title="Underline">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25433.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="strikeThrough" title="Strike through">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25626.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon has-submenu">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg">'+
|
||||
' <div class="submenu">'+
|
||||
' <span class="btn icon" data-action="justifyLeft" title="Justify left">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="justifyCenter" title="Justify center">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25440.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="justifyRight" title="Justify right">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25288.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="formatBlock" title="Justify block">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25181.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="insertOrderedList" title="Insert ordered list">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25242.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="insertUnorderedList" title="Insert unordered list">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25648.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="outdent" title="Outdent">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25410.svg"> '+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="indent" title="Indent">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25233.svg"> '+
|
||||
' </span>'+
|
||||
' '+
|
||||
' </div>'+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25232.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
'</div>'+
|
||||
'<div class="line">'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="undo" title="Undo">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25249.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon" data-action="removeFormat" title="Remove format">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25454.svg"> '+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon smaller" data-action="createLink" title="Insert Link">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25385.svg">'+
|
||||
' </span>'+
|
||||
' <span class="btn icon smaller" data-action="unlink" title="Unlink">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25341.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' <div class="box">'+
|
||||
' <span class="btn icon" data-action="code" title="Show HTML-Code">'+
|
||||
' <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25185.svg">'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' '+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="content-area">'+
|
||||
'<div class="visuell-view" contenteditable>'+
|
||||
'</div>'+
|
||||
'<textarea class="html-view"></textarea>'+
|
||||
'</div>');
|
||||
}
|
||||
|
||||
initWYSIWYG();
|
||||
|
||||
const editor = document.getElementsByClassName('wysiwyg')[0];
|
||||
console.log(editor);
|
||||
const toolbar = editor.getElementsByClassName('toolbar')[0];
|
||||
const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)');
|
||||
for(let i = 0; i < buttons.length; i++) {
|
||||
let button = buttons[i];
|
||||
|
||||
button.addEventListener('click', function(e) {
|
||||
let action = this.dataset.action;
|
||||
|
||||
switch(action) {
|
||||
case 'code':
|
||||
execCodeAction(this, editor);
|
||||
break;
|
||||
case 'createLink':
|
||||
execLinkAction();
|
||||
break;
|
||||
default:
|
||||
execDefaultAction(action);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
function execCodeAction(button, editor) {
|
||||
const contentArea = editor.getElementsByClassName('content-area')[0];
|
||||
const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
|
||||
const htmlView = contentArea.getElementsByClassName('html-view')[0];
|
||||
if(button.classList.contains('active')) { // show visuell view
|
||||
visuellView.innerHTML = htmlView.value;
|
||||
htmlView.style.display = 'none';
|
||||
visuellView.style.display = 'block';
|
||||
button.classList.remove('active');
|
||||
} else { // show html view
|
||||
htmlView.innerText = visuellView.innerHTML;
|
||||
visuellView.style.display = 'none';
|
||||
htmlView.style.display = 'block';
|
||||
button.classList.add('active');
|
||||
}
|
||||
}
|
||||
function execLinkAction() {
|
||||
let linkValue = prompt('Link (e.g. https://webdeasy.de/)');
|
||||
document.execCommand('createLink', false, linkValue);
|
||||
}
|
||||
function execDefaultAction(action) {
|
||||
document.execCommand(action, false);
|
||||
}
|
||||
Reference in New Issue
Block a user