ln
This commit is contained in:
Sebastian Titz
parent
79d82d7550
commit
ab01311d89
4
autosize.min.js
vendored
4
autosize.min.js
vendored
@ -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
|
||||
|
||||
22530
bootstrap.css
vendored
22530
bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
12
bootstrap.min.css
vendored
12
bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
12
bootstrap.min.js
vendored
12
bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
38
form.js
38
form.js
@ -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;
|
||||
}
|
||||
178
jquery-autoresize.js
vendored
178
jquery-autoresize.js
vendored
@ -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);
|
||||
408
lightbox.css
408
lightbox.css
@ -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;
|
||||
}
|
||||
|
||||
1118
lightbox.js
1118
lightbox.js
File diff suppressed because it is too large
Load Diff
@ -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%;
|
||||
}
|
||||
178
wysiwyg.css
178
wysiwyg.css
@ -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;
|
||||
}
|
||||
278
wysiwyg.js
278
wysiwyg.js
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user