rhays/snicker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Addition of files

Browse Source
This commit is contained in:
Edi
2022-03-15 16:34:48 +01:00
parent 9688e6c8ca
commit a48d911d1c
52 changed files with 10720 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

745
themes/default/snicker.css Normal file
View File

@@ -0,0 +1,745 @@
@charset "UTF-8";
/*
| Snicker The first native FlatFile Comment Plugin 4 Bludit
| @file ./system/themes/default/snicker.css
| @author SamBrishes <sam@pytes.net>
| @version 0.1.2 [0.1.0] - Alpha
|
| @website https://github.com/pytesNET/snicker
| @license X11 / MIT License
| @copyright Copyright © 2019 SamBrishes, pytesNET <info@pytes.net>
*/
/* @start ANIMATIONs */
@keyframes spin{
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
0% {
transform: rotate(-359deg);
-o-transform: rotate(-359deg);
-ms-transform: rotate(-359deg);
-moz-transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
@-moz-keyframes spin{
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
0% {
transform: rotate(-359deg);
-o-transform: rotate(-359deg);
-ms-transform: rotate(-359deg);
-moz-transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
@-webkit-keyframes spin{
0% {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
0% {
transform: rotate(-359deg);
-o-transform: rotate(-359deg);
-ms-transform: rotate(-359deg);
-moz-transform: rotate(-359deg);
-webkit-transform: rotate(-359deg);
}
}
/* @end ANIMATIONs */
/* @start GENERAL */
.snicker-comments,
.snicker-comments *,
.snicker-comments *::before,
.snicker-comments *::after{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.snicker-comments{
width: 100%;
margin: 15px 0 30px 0;
padding: 0;
display: block;
font-size: 14px;
line-height: 1.5em;
}
.snicker-comments input,
.snicker-comments textarea,
.snicker-comments button{
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.snicker-comments input[type="text"],
.snicker-comments input[type="email"],
.snicker-comments textarea{
color: #404448;
width: 100%;
max-width: none;
height: auto;
margin: 0;
padding: 7px 14px;
z-index: 10;
display: block;
font-size: 14px;
text-align: left;
line-height: 1.5em;
border-width: 1px;
border-style: solid;
border-color: #a0a4a8;
background-color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.snicker-comments textarea{
height: 150px;
min-height: 150px;
padding: 15px;
resize: vertical;
}
.snicker-comments input[type="text"]:hover,
.snicker-comments input[type="email"]:hover,
.snicker-comments textarea:hover{
color: #343A40;
border-color: #343A40;
background-color: #ffffff;
}
.snicker-comments input[type="text"]:focus,
.snicker-comments input[type="email"]:focus,
.snicker-comments textarea:focus{
color: #343A40;
border-color: #343A40;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(52,58,64, 0.35);
-moz-box-shadow: 0 0 0 3px rgba(52,58,64, 0.35);
-webkit-box-shadow: 0 0 0 3px rgba(52,58,64, 0.35);
}
.snicker-comments input[type="checkbox"]{
display: none;
}
.snicker-comments input[type="checkbox"]+label{
color: #606468;
cursor: pointer;
height: auto;
margin: 10px 5px;
padding: 0;
display: inline-block;
font-size: 12px;
line-height: 22px;
vertical-align: top;
}
.snicker-comments input[type="checkbox"]+label:hover,
.snicker-comments input[type="checkbox"]:checked+label{
color: #404448;
}
.snicker-comments input[type="checkbox"]+label:before{
width: 20px;
height: 20px;
content: "";
margin: 0 9px 0 0;
display: inline-block;
position: relative;
vertical-align: top;
background-color: #ffffff;
border: 1px solid #a0a4a8;
background-repeat: no-repeat;
background-position: center center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: all 142ms linear;
-moz-transition: all 142ms linear;
-webkit-transition: all 142ms linear;
}
.snicker-comments input[type="checkbox"]+label:hover:before{
border-color: #343A40;
}
.snicker-comments input[type="checkbox"]:checked+label:before{
background-color: #343A40;
border-color: #343A40;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNM\
TIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg==");
}
.snicker-comments button{
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
width: auto;
margin: 0;
padding: 10px 15px;
display: inline-block;
position: relative;
font-size: 14px;
text-align: left;
line-height: 1.5em;
vertical-align: top;
background-color: #343A40;
border: 1px solid #343A40;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background 142ms linear;
-moz-transition: background 142ms linear;
-webkit-transition: background 142ms linear;
}
.snicker-comments button:hover{
background-color: rgb(14, 16, 19);
}
.snicker-comments button:active{
background-color: #242A30;
}
.snicker-comments button:disabled,
.snicker-comments button.disabled{
color: rgba(255, 255, 255, 0.35);
cursor: not-allowed;
background-color: #040A10;
}
.snicker-comments button.loading:before{
top: 8px;
left: -36px;
width: 28px;
height: 28px;
margin: 0 auto;
padding: 0;
content: "";
display: inline-block;
position: absolute;
background-size: 18px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZ\
GQiIGQ9Ik0xMC4yNCA3LjRhNC4xNSA0LjE1IDAgMCAxLTEuMiAzLjYgNC4zNDYgNC4zNDYgMCAwIDEtNS40MS41NEw0Ljgg\
MTAuNC41IDkuOGwuNiA0LjIgMS4zMS0xLjI2YzIuMzYgMS43NCA1LjcgMS41NyA3Ljg0LS41NGE1Ljg3NiA1Ljg3NiAwIDA\
gMCAxLjc0LTQuNDZsLTEuNzUtLjM0ek0yLjk2IDVhNC4zNDYgNC4zNDYgMCAwIDEgNS40MS0uNTRMNy4yIDUuNmw0LjMuNi\
0uNi00LjItMS4zMSAxLjI2Yy0yLjM2LTEuNzQtNS43LTEuNTctNy44NS41NEMuNSA1LjAzLS4wNiA2LjY1LjAxIDguMjZsM\
S43NS4zNUE0LjE3IDQuMTcgMCAwIDEgMi45NiA1eiIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position: center center;
animation: spin 2s linear 0ms infinite;
-moz-animation: spin 2s linear 0ms infinite;
-webkit-animation: spin 2s linear 0ms infinite;
}
.snicker-comments .table{
width: 100%;
margin: 0;
padding: 0;
display: table;
border-spacing: 0;
border-collapse: collapse;
}
.snicker-comments .table .table-cell{
display: table-cell;
padding: 5px 10px;
vertical-align: top;
}
.snicker-comments .align-left{
text-align: left;
}
.snicker-comments .align-right{
text-align: right;
}
.snicker-comments .align-center{
text-align: center;
}
/* Main Elements */
.snicker-comments .snicker-comments-form,
.snicker-comments .snicker-comments-list{
width: auto;
margin: 0;
padding: 0;
display: block;
border: 1px solid#c0c4c8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.snicker-comments .snicker-comments-list{
border-width: 0;
}
.snicker-comments .no-comments,
.snicker-comments .disabled-comments{
width: 100%;
margin: 15px 0;
padding: 15px 0;
display: block;
font-size: 16px;
text-align: center;
font-style: italic;
line-height: 50px;
}
.snicker-comments .no-comments{
background-color: #f4f8fa;
border: 1px solid #c0c4c8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.snicker-comments .comment-alert{
width: 100%;
margin: 0 0 15px 0;
padding: 10px 15px;
display: block;
font-size: 85%;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f4f8fa;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.snicker-comments .comment-alert.alert-error{
color: #ffffff;
background-color: #DC3545;
}
.snicker-comments .comment-alert.alert-success{
color: #ffffff;
background-color: #28A745;
}
/* @end GENERAL */
/* @start COMMENT FORM */
form.comment-form{
width: 100%;
margin: 0;
padding: 0;
display: block;
}
form.comment-form .comment-header,
form.comment-form .comment-article,
form.comment-form .comment-footer{
width: 100%;
height: auto;
margin: 0;
padding: 10px;
display: block;
}
form.comment-form .comment-header{
font-size: 16px;
background-color: #f4f6f8;
border-bottom: 1px solid #d0d4d8;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
form.comment-form .comment-header .inner{
padding: 7px 10px;
}
form.comment-form .comment-article{
padding: 15px 20px;
}
form.comment-form .comment-footer{
background-color: #f4f6f8;
border-top: 1px solid #d0d4d8;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
form.comment-form .comment-captcha{
display: block;
text-align: right;
}
form.comment-form .comment-captcha input,
form.comment-form .comment-captcha input:hover,
form.comment-form .comment-captcha input:focus{
width: 100px;
height: 40px;
padding: 5px 10px;
display: inline-block;
font-size: 16px;
text-align: center;
line-height: 22px;
vertical-align: top;
border: 0;
background-color: #e0e4e8;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
form.comment-form .comment-captcha input:hover{
background-color: #f0f4f8;
}
form.comment-form .comment-captcha input:focus{
background-color: #e0e4e8;
}
form.comment-form .comment-captcha a{
width: auto;
height: 40px;
display: inline-block;
position: relative;
}
form.comment-form .comment-captcha a:before{
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
z-index: 20;
display: inline-block;
position: absolute;
background-color: rgba(0, 0, 0, 0.0);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background 142ms linear;
-moz-transition: background 142ms linear;
-webkit-transition: background 142ms linear;
}
form.comment-form .comment-captcha a.reload:before{
background-color: rgba(0, 0, 0, 0.5);
}
form.comment-form .comment-captcha a:after{
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
padding: 2px;
content: "";
z-index: 25;
opacity: 0;
display: inline-block;
position: absolute;
background-size: 20px;
background-color: #000;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNM\
TAuMjQgNy40YTQuMTUgNC4xNSAwIDAgMS0xLjIgMy42IDQuMzQ2IDQuMzQ2IDAgMCAxLTUuNDEuNTRMNC44IDEwLjQuNSA5\
LjhsLjYgNC4yIDEuMzEtMS4yNmMyLjM2IDEuNzQgNS43IDEuNTcgNy44NC0uNTRhNS44NzYgNS44NzYgMCAwIDAgMS43NC0\
0LjQ2bC0xLjc1LS4zNHpNMi45NiA1YTQuMzQ2IDQuMzQ2IDAgMCAxIDUuNDEtLjU0TDcuMiA1LjZsNC4zLjYtLjYtNC4yLT\
EuMzEgMS4yNmMtMi4zNi0xLjc0LTUuNy0xLjU3LTcuODUuNTRDLjUgNS4wMy0uMDYgNi42NS4wMSA4LjI2bDEuNzUuMzVBN\
C4xNyA0LjE3IDAgMCAxIDIuOTYgNXoiLz48L3N2Zz4=");
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
transition: opacity 142ms linear;
-moz-transition: opacity 142ms linear;
-webkit-transition: opacity 142ms linear;
}
form.comment-form .comment-captcha a.reload:after{
opacity: 1;
animation: spin 2s linear 0ms infinite;
-moz-animation: spin 2s linear 0ms infinite;
-webkit-animation: spin 2s linear 0ms infinite;
}
form.comment-form .comment-captcha img{
max-width: none;
display: inline-block;
vertical-align: top;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
form.comment-form .comment-reply{
margin: 20px 0 0 0;
padding: 10px 15px;
display: block;
position: relative;
font-size: 80%;
background-color: #f4f8fa;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #c0c4c8;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
}
form.comment-form .comment-reply + p textarea{
border-top-left-radius: 0;
border-top-right-radius: 0;
-moz-border-raidus-topleft: 0;
-moz-border-raidus-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
}
form.comment-form .comment-reply .reply-cancel{
top: 10px;
right: 10px;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
opacity: 0.5;
display: inline-block;
position: absolute;
background-size: 14px;
background-color: #555;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position: center center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: all 142ms linear;
-moz-transition: all 142ms linear;
-webkit-transition: all 142ms linear;
}
form.comment-form .comment-reply .reply-cancel:hover{
opacity: 1;
background-color: #DC3545;
}
form.comment-form .comment-reply .reply-title{
margin: 0 0 5px 0;
display: block;
font-weight: bold;
font-weight: 600;
}
/* @end COMMENT FORM */
/* @start COMMENT LIST */
.snicker-comments-list .comment{
width: auto;
margin: 15px 0;
padding: 0;
display: block;
border: 1px solid #c0c4c8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.snicker-comments-list .comment.new-comment{
border-color: #007bff;
}
.snicker-comments-list .comment .comment-avatar{
width: 110px;
padding: 15px 10px;
position: relative;
}
.snicker-comments-list .comment .comment-avatar img{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.snicker-comments-list .comment .comment-avatar .avatar-role{
top: 15px;
right: 10px;
color: #ffffff;
width: auto;
margin: 0;
padding: 3px 5px;
display: inline-block;
position: absolute;
font-size: 11px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
background-color: #007bff;
border-radius: 0 4px 0 3px;
-moz-border-radius: 0 4px 0 3px;
-webkit-border-radius: 0 4px 0 3px;
}
.snicker-comments-list .comment .comment-content{
padding: 10px;
}
.snicker-comments-list .comment .comment-content .comment-title{
color: #707478;
margin: 0;
padding: 5px 5px 2px 5px;
display: block;
font-size: 16px;
line-height: 24px;
font-weight: bold;
font-weight: 600;
}
.snicker-comments-list .comment .comment-content .comment-moderation{
color: #fff;
margin-left: 10px;
padding: 2px 6px;
display: inline-block;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
vertical-align: top;
background-color: #dc3545;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.snicker-comments-list .comment .comment-content .comment-meta{
color: #707478;
margin: 0;
padding: 1px 6px;
display: inline-block;
font-size: 12px;
line-height: 1.25em;
background-color: #e0e4e8;
}
.snicker-comments-list .comment .comment-content .comment-comment{
color: #303438;
margin: 0;
padding: 10px;
display: block;
}
.snicker-comments-list .comment .comment-action{
margin: 0;
padding: 0;
display: block;
background-color: #f4f6f8;
border-top: 1px solid #d0d4d8;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
}
.snicker-comments-list .comment .comment-action a{
color: #606468;
margin: 2px 0;
padding: 2px 7px;
opacity: 0.65;
display: inline-block;
font-size: 12px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 18px;
background-color: #ffffff;
border: 1px solid #c0c4c8;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: color 142ms linear, background 142ms linear, border 142ms linear;
-moz-transition: color 142ms linear, background 142ms linear, border 142ms linear;
-webkit-transition: color 142ms linear, background 142ms linear, border 142ms linear;
}
.snicker-comments-list .comment .comment-action a.action-like{
color: #28a745;
border-color: #28a745;
}
.snicker-comments-list .comment .comment-action a.action-dislike{
color: #dc3545;
border-color: #dc3545;
}
.snicker-comments-list .comment .comment-action a.action-reply{
color: #007bff;
border-color: #007bff;
}
.snicker-comments-list .comment .comment-action a:hover,
.snicker-comments-list .comment .comment-action a.active{
color: #ffffff;
opacity: 0.9;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.snicker-comments-list .comment .comment-action a.action-like:hover,
.snicker-comments-list .comment .comment-action a.action-like.active{
background-color: #28a745;
}
.snicker-comments-list .comment .comment-action a.action-dislike:hover,
.snicker-comments-list .comment .comment-action a.action-dislike.active{
background-color: #dc3545;
}
.snicker-comments-list .comment .comment-action a.action-reply:hover,
.snicker-comments-list .comment .comment-action a.action-reply.active{
background-color: #007bff;
}
.snicker-comments-list .comment .comment-action a span{
margin: 0 3px 0 2px;
display: inline-block;
}
/* Pagination */
.snicker-comments-list .pagination{
width: 100%;
margin: 10px 0;
padding: 0;
display: block;
}
.snicker-comments-list .pagination .pagination-button{
color: #ffffff;
width: auto;
min-width: 30px;
height: 32px;
margin: 0 3px;
padding: 5px 10px;
display: inline-block;
position: static;
font-size: 14px;
text-align: center;
line-height: 22px;
vertical-align: top;
background-color: #007bff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background 142ms linear;
-moz-transition: background 142ms linear;
-webkit-transition: background 142ms linear;
}
.snicker-comments-list .pagination .pagination-button:hover,
.snicker-comments-list .pagination .pagination-button.hover{
background-color: #0062cc;
}
.snicker-comments-list .pagination .pagination-button:active,
.snicker-comments-list .pagination .pagination-button.active{
background-color: #004999;
}
.snicker-comments-list .pagination .pagination-button:disabled,
.snicker-comments-list .pagination .pagination-button.disabled{
color: rgba(255, 255, 255, 0.5);
cursor: not-allowed;
opacity: 0.5;
background-color: #555;
}
.snicker-comments-list .pagination.pagination-top .pagination-button.button-next{
float: right;
}
.snicker-comments-list .pagination.pagination-bottom{
text-align: center;
}
.snicker-comments-list .pagination.pagination-bottom:after{
clear: both;
content: "";
display: table;
}
.snicker-comments-list .pagination.pagination-bottom .pagination-inner{
margin: 0 auto;
display: inline-block;
}
.snicker-comments-list .pagination.pagination-bottom .pagination-button{
float: left;
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.snicker-comments-list .pagination.pagination-bottom .pagination-button.button-first,
.snicker-comments-list .pagination.pagination-bottom .pagination-button.button-previous,
.snicker-comments-list .pagination.pagination-bottom .pagination-button.button-next,
.snicker-comments-list .pagination.pagination-bottom .pagination-button.button-last{
font-size: 20px;
line-height: 18px;
}
.snicker-comments-list .pagination.pagination-bottom .pagination-button:first-child{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
}
.snicker-comments-list .pagination.pagination-bottom .pagination-button:last-child{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-right: 3px;
-moz-border-radius-right: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
}
/* @end COMMENT LIST */

281
themes/default/snicker.js Normal file
View File

@@ -0,0 +1,281 @@
/*
| Snicker The first native FlatFile Comment Plugin 4 Bludit
| @file ./system/themes/default/snicker.js
| @author SamBrishes <sam@pytes.net>
| @version 0.1.2 [0.1.0] - Alpha
|
| @website https://github.com/pytesNET/snicker
| @license X11 / MIT License
| @copyright Copyright © 2019 SamBrishes, pytesNET <info@pytes.net>
*/
;(function(root){
"use strict";
var w = root, d = root.document;
/*
| AJAX HELPER
*/
function ajax(url, type, data, callback, self){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4){
callback.call((self? self: this), this.responseText, this);
}
};
xhttp.open(type, url, true);
xhttp.setRequestHeader("Cache-Control", "no-cache");
xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
if(type == "POST"){
if(!(data instanceof FormData)){
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
xhttp.send(data);
} else {
xhttp.send();
}
}
/*
| ALERT HELPER
*/
function showAlert(type, message, parent){
var alert = d.createElement("DIV");
alert.className = "comment-alert alert-" + type;
alert.innerText = message;
// Remove Existing Status
var alerts = parent.querySelectorAll(".comment-alert");
if(alerts.length > 0){
Array.prototype.forEach.call(alerts, function(item){
item.parentElement.removeChild(item);
});
}
// Add Status
if(parent.children.length > 0){
parent.insertBefore(alert, parent.children[0]);
} else {
parent.appendChild(alert);
}
}
// Ready?
d.addEventListener("DOMContentLoaded", function(){
"use strict";
// Main Elements
var form = d.querySelector("form.comment-form"),
list = d.querySelector(".snicker-comments-list"),
captcha = d.querySelector("a[data-captcha='reload']");
/*
| HANDLE COMMENT FORM
*/
if(form){
form.addEventListener("submit", function(event){
event.preventDefault();
if(typeof(FormData) !== "function" || !SNICKER_AJAX){
return true;
}
var data = new FormData(this), self = this;
// Check Button
var btn = this.querySelector("[name='snicker']");
if(btn.disabled){
return true;
}
event.preventDefault();
// AJAX Call
btn.disabled = true;
btn.classList.add("loading");
data.append("snicker", btn.value);
ajax(SNICKER_PATH, "POST", data, function(json){
var data = JSON.parse(json);
// Add Comment
if(list && data.status == "success" && "comment" in data){
if(list.querySelector(".comment")){
list.querySelector(".comment").insertAdjacentHTML("beforebegin", data.comment);
} else {
list.insertAdjacentHTML("afterbegin", data.comment);
}
list.querySelector(".comment").classList.add("new-comment");
list.querySelector(".comment").scrollIntoView({ behavior: "smooth", block: "center" });
// Empty Form
var field = self.querySelectorAll("#comment-title,#comment-text");
for(var i = 0, l = field.length; i < l; i++){
if(field[i].tagName == "SELECT"){
field[i].options[0].selected = true;
} else if(field[i].getAttribute("type") === "checkbox"){
field[i].checked = false;
} else {
field[i].value = "";
}
}
showAlert("success", data.success, form.querySelector(".comment-article"));
} else if(data.status === "error"){
showAlert("error", data.error, form.querySelector(".comment-article"));
if(captcha && "captcha" in data){
d.querySelector("input[name='comment[captcha]']").value = "";
captcha.querySelector("img").src = data.captcha;
}
}
// Re-Enable Button
btn.disabled = false;
btn.classList.remove("loading");
});
});
}
/*
| HANDLE CAPTCHA RELOAD
*/
if(captcha){
captcha.addEventListener("click", function(event){
if(!SNICKER_AJAX){
return false;
}
event.preventDefault();
captcha.classList.add("reload");
var data = "action=snicker&snicker=captcha&tokenCSRF=";
var token = d.querySelector("input[name='tokenCSRF']").value;
ajax(SNICKER_PATH, "POST", data + token, function(json){
var data = JSON.parse(json);
if(data.status !== "success"){
window.location.replace(captcha.getAttribute("href"));
}
captcha.querySelector("img").src = data.captcha;
captcha.classList.remove("reload");
});
})
}
/*
| HANDLE COMMENT REPLY
*/
if(list){
list.addEventListener("click", function(event){
if(event.target.tagName != "A" || !form){
return true;
}
// Check Link
var href = event.target.getAttribute("href");
if(href.indexOf("snicker=reply") < 0){
return true;
}
// Handle Reply
event.preventDefault();
var comment = (function getComment(element){
var parent = element.parentElement;
return (parent.classList.contains("comment"))? parent: getComment(parent);
})(event.target);
// Create Elements
var reply = d.createElement("DIV");
reply.className = "comment-reply";
reply.innerHTML = '<a href="' + window.location.href + '" class="reply-cancel"></a>'
+ '<div class="reply-title">' + comment.querySelector(".author-username").innerText + ' wrotes:</div>'
+ '<div class="reply-content">' + comment.querySelector(".comment-comment").innerHTML + '</div>';
var parent = d.createElement("INPUT");
parent.type = "hidden";
parent.name = "comment[parent_uid]";
parent.value = comment.id.replace("comment-", "");
// Append Cancel
reply.querySelector(".reply-cancel").addEventListener("click", function(event){
event.preventDefault();
// Remove Elements
reply.parentElement.removeChild(reply);
parent.parentElement.removeChild(parent);
// Switch Button Text
var old = form.querySelector("button").innerText;
form.querySelector("button").value = "comment";
form.querySelector("button").innerText = form.querySelector("button").getAttribute("data-string");
form.querySelector("button").setAttribute("data-string", old);
});
// Inject Elements
var art = form.querySelector(".comment-article");
if(art.querySelector(".comment-reply")){
art.replaceChild(reply, art.querySelector(".comment-reply"));
} else {
art.insertBefore(reply, form.querySelector("textarea").parentElement);
}
var foo = form.querySelector(".comment-footer");
if(foo.querySelector("input[name='comment[parent_uid]']")){
foo.replaceChild(parent, foo.querySelector("input[name='comment[parent_uid]']"));
} else {
foo.appendChild(parent);
}
// Switch Button Text
var old = form.querySelector("button").innerText;
form.querySelector("button").value = "reply";
form.querySelector("button").innerText = form.querySelector("button").getAttribute("data-string");
form.querySelector("button").setAttribute("data-string", old);
});
}
/*
| HANDLE COMMENT RATING
*/
if(list){
list.addEventListener("click", function(event){
if(event.target.tagName != "A" || !SNICKER_AJAX){
return true;
}
if(event.target.classList.contains("disabled")){
return true;
}
// Check Link
var href = event.target.getAttribute("href");
if(href.indexOf("&type=like") < 0 && href.indexOf("&type=dislike") < 0){
return true;
}
// Event Handler
event.preventDefault();
event.target.classList.add("disabled");
var comment = (function getComment(element){
var parent = element.parentElement;
return (parent.classList.contains("comment"))? parent: getComment(parent);
})(event.target), self = event.target;
href = href.split("?");
// AJAX REQUEST
ajax(SNICKER_PATH, "POST", href[1], function(json){
var data = JSON.parse(json);
if(data.status === "success" && "rating" in data){
var like = comment.querySelector("[data-snicker='like']");
if(like){
like.innerText = String(data.rating[0]);
}
like.parentElement.classList[(like.parentElement == self? "add": "remove")]("active");
var dislike = comment.querySelector("[data-snicker='dislike']");
if(dislike){
dislike.innerText = String(data.rating[1]);
}
dislike.parentElement.classList[(dislike.parentElement == self? "add": "remove")]("active");
}
// Re-Enable Button
self.classList.remove("disabled");
});
});
}
});
})(window);

311
themes/default/snicker.php Normal file
View File

@@ -0,0 +1,311 @@
<?php
/*
| Snicker The first native FlatFile Comment Plugin 4 Bludit
| @file ./system/themes/default/snicker.php
| @author SamBrishes <sam@pytes.net>
| @version 0.1.2 [0.1.0] - Alpha
|
| @website https://github.com/pytesNET/snicker
| @license X11 / MIT License
| @copyright Copyright © 2019 SamBrishes, pytesNET <info@pytes.net>
*/
if(!defined("BLUDIT")){ die("Go directly to Jail. Do not pass Go. Do not collect 200 Cookies!"); }
class Default_SnickerTemplate extends CommentsTheme{
const SNICKER_NAME = "Default Theme";
const SNICKER_JS = "snicker.js";
const SNICKER_CSS = "snicker.css";
/*
| RENDER :: COMMENT FORM
| @since 0.1.0
| @update 0.1.1
*/
public function form($username = "", $email = "", $title = "", $message = ""){
global $comments, $login, $page, $security, $Snicker;
// User Logged In
if(!is_a($login, "Login")){
$login = new Login;
}
$user = $login->isLogged();
// Get Data
if(empty($security->getTokenCSRF())){
$security->generateTokenCSRF();
}
$captcha = ($user)? "disabled": sn_config("frontend_captcha");
$terms = ($user)? "disabled": sn_config("frontend_terms");
// Is Reply
$reply = isset($_GET["snicker"]) && $_GET["snicker"] == "reply";
if($reply && isset($_GET["uid"]) && $comments->exists($_GET["uid"])){
$reply = new Comment($_GET["uid"], $page->uuid());
}
?>
<form class="comment-form" method="post" action="<?php echo $page->permalink(); ?>?snicker=comment#snicker">
<?php if(is_array($username)){ ?>
<div class="comment-header">
<input type="hidden" id="comment-user" name="comment[user]" value="<?php echo $username[0]; ?>" />
<input type="hidden" id="comment-token" name="comment[token]" value="<?php echo $username[1]; ?>" />
<div class="inner">
<?php sn_e("Logged in as %s (%s)", array("<b>" . $username[2] . "</b>", $username[0])); ?>
</div>
</div>
<?php } else { ?>
<div class="comment-header">
<div class="table">
<div class="table-cell align-left">
<input type="text" id="comment-user" name="comment[username]" value="<?php echo $username; ?>" placeholder="<?php sn_e("Your Username"); ?>" />
</div>
<div class="table-cell align-right">
<input type="email" id="comment-mail" name="comment[email]" value="<?php echo $email; ?>" placeholder="<?php sn_e("Your eMail address"); ?>" />
</div>
</div>
</div>
<?php } ?>
<div class="comment-article">
<?php if(Alert::get("snicker-alert") !== false){ ?>
<div class="comment-alert alert-error">
<?php Alert::p("snicker-alert"); ?>
</div>
<?php } else if(Alert::get("snicker-success") !== false){ ?>
<div class="comment-alert alert-success">
<?php Alert::p("snicker-success"); ?>
</div>
<?php } ?>
<?php if($title !== false){ ?>
<p>
<input type="text" id="comment-title" name="comment[title]" value="<?php echo $title; ?>" placeholder="<?php sn_e("Comment Title"); ?>" />
</p>
<?php } ?>
<p>
<textarea id="comment-text" name="comment[comment]" placeholder="<?php sn_e("Your Comment..."); ?>"><?php echo $message; ?></textarea>
</p>
<?php if($captcha !== "disabled"){ ?>
<div class="comment-captcha">
<input type="text" name="comment[captcha]" value="" placeholder="<?php sn_e("Answer"); ?>" />
<a href="<?php echo $page->permalink(); ?>#snicker-comment-form" data-captcha="reload">
<?php echo $Snicker->generateCaptcha(); ?>
</a>
</div>
<?php } ?>
<?php if(is_a($reply, "Comment")){ ?>
<div class="comment-reply">
<a href="<?php echo $page->permalink(); ?>" class="reply-cancel"></a>
<div class="reply-title">
<?php echo $reply->username(); ?> <?php sn_e("wrotes"); ?>:
</div>
<div class="reply-content">
<?php echo $reply->comment(); ?>
</div>
</div>
<?php } ?>
</div>
<div class="comment-footer">
<div class="table">
<div class="table-cell align-left">
<?php if($terms === "default"){ ?>
<div class="terms-of-use">
<input type="checkbox" id="comment-terms" name="comment[terms]" value="1" />
<label for="comment-terms">
<?php echo sn_config("string_terms_of_use"); ?>
</label>
</div>
<?php } else if($terms !== "disabled"){ ?>
<div class="terms-of-use">
<input type="checkbox" id="comment-terms" name="comment[terms]" value="1" />
<label for="comment-terms">
<?php sn_e("I agree the %s!", array('<a href="" target="_blank">'.sn__("Terms of Use").'</a>')); ?>
</label>
</div>
<?php } ?>
</div>
<div class="table-cell align-right">
<input type="hidden" name="tokenCSRF" value="<?php echo $security->getTokenCSRF(); ?>" />
<input type="hidden" name="comment[page_uuid]" value="<?php echo $page->uuid(); ?>" />
<input type="hidden" name="action" value="snicker" />
<?php if(is_a($reply, "Comment")){ ?>
<input type="hidden" name="comment[parent_uid]" value="<?php echo $reply->uid(); ?>" />
<button name="snicker" value="reply" data-string="<?php sn_e("Comment"); ?>"><?php sn_e("Answer"); ?></button>
<?php } else { ?>
<button name="snicker" value="comment" data-string="<?php sn_e("Answer"); ?>"><?php sn_e("Comment"); ?></button>
<?php } ?>
</div>
</div>
</div>
</form>
<?php
unset($_SESSION["s_snicker-alert"]); // Remove Snicker Alerts
unset($_SESSION["s_snicker-success"]); // Remove Snicker Success
}
/*
| RENDER :: PAGINATION
| @since 0.1.0
*/
public function pagination($location, $cpage, $limit, $count){
global $url;
// Data
$link = DOMAIN . $url->uri() . "?cpage=%d#snicker-comments-list";
$maxpages = (int) ceil($count / $limit);
$prev = ($cpage === 1)? false: $cpage - 1;
$next = ($cpage === $maxpages)? false: $cpage + 1;
// Top Position
if($location === "top"){
?>
<div class="pagination pagination-top">
<?php if($cpage === 1){ ?>
<span class="pagination-button button-previous disabled"><?php sn_e("Previous Comments"); ?></span>
<?php } else { ?>
<a href="<?php printf($link, $prev); ?>" class="pagination-button button-previous"><?php sn_e("Previous Comments"); ?></a>
<?php } ?>
<?php if($cpage < $maxpages){ ?>
<a href="<?php printf($link, $next); ?>" class="pagination-button button-next"><?php sn_e("Next Comments"); ?></a>
<?php } else { ?>
<span class="pagination-button button-next disabled"><?php sn_e("Next Comments"); ?></span>
<?php } ?>
</div>
<?php
}
// Bottom Position
if($location === "bottom"){
?>
<div class="pagination pagination-bottom">
<div class="pagination-inner">
<?php if($prev === false){ ?>
<span class="pagination-button button-first disabled">&laquo;</span>
<span class="pagination-button button-previous disabled">&lsaquo;</span>
<?php } else { ?>
<a href="<?php printf($link, 1); ?>" class="pagination-button button-first">&laquo;</a>
<a href="<?php printf($link, $prev); ?>" class="pagination-button button-previous">&lsaquo;</a>
<?php } ?>
<?php
if($maxpages < 6){
$start = 1;
$stop = $maxpages;
} else {
$start = ($cpage > 3)? $cpage - 3: $cpage;
$stop = ($cpage + 3 < $maxpages)? $cpage + 3: $maxpages;
}
if($start > 1){
?><span class="pagination-button button-sep disabled">...</span><?php
}
for($i = $start; $i <= $stop; $i++){
$active = ($i == $cpage)? "active": "";
?>
<a href="<?php printf($link, $i); ?>" class="pagination-button button-number <?php echo $active; ?>"><?php echo $i; ?></a>
<?php
}
if($stop < $maxpages){
?><span class="pagination-button button-sep disabled">...</span><?php
}
?>
<?php if($next !== false){ ?>
<a href="<?php printf($link, $next); ?>" class="pagination-button button-next">&rsaquo;</a>
<a href="<?php printf($link, $maxpages); ?>" class="pagination-button button-last">&raquo;</a>
<?php } else { ?>
<span class="pagination-button button-next disabled">&rsaquo;</span>
<span class="pagination-button button-last disabled">&raquo;</span>
<?php } ?>
</div>
</div>
<?php
}
}
/*
| RENDER :: COMMENT
| @since 0.1.0
*/
public function comment($comment, $uid, $depth){
global $users, $security, $Snicker, $SnickerUsers;
// Get Page
$page = new Page($comment->page_key());
$user = $SnickerUsers->getByString($comment->getValue("author"));
// Render
$token = $security->getTokenCSRF();
$maxdepth = (int) sn_config("comment_depth");
$url = $page->permalink() . "?action=snicker&snicker=rate&&uid=%s&tokenCSRF=%s";
$url = sprintf($url, $comment->uid(), $token);
?>
<div id="comment-<?php echo $comment->uid(); ?>" class="comment" style="margin-left: <?php echo (15 * ($depth - 1)); ?>px;">
<div class="table">
<div class="table-cell comment-avatar">
<?php echo $comment->avatar(90); ?>
<?php
if(isset($user["role"]) && $user["username"] === $page->username()){
echo '<span class="avatar-role">Author</span>';
} else if(isset($user["role"]) && $user["role"] === "admin"){
echo '<span class="avatar-role">Admin</span>';
}
?>
</div>
<div class="table-cell comment-content">
<?php if(sn_config("comment_title") !== "disabled" && !empty($comment->title())){ ?>
<div class="comment-title">
<?php echo $comment->title(); ?>
<?php if($comment->status() === "pending"){ ?>
<span class="comment-moderation"><?php sn_e("This comment hasn't been moderated yet!"); ?></span>
<?php } ?>
</div>
<?php } else if($comment->status() === "pending"){ ?>
<div class="comment-moderation"><?php sn_e("This comment hasn't been moderated yet!"); ?></div>
<?php } ?>
<div class="comment-meta">
<span class="meta-author">
<?php sn_e("Written by %s", array('<span class="author-username">'.$user["username"].'</span>')); ?>
</span>
<span class="meta-date">
<?php sn_e("on %s", array($comment->date())); ?>
</span>
</div>
<div class="comment-comment">
<?php echo $comment->comment(); ?>
</div>
</div>
</div>
<div class="comment-action">
<div class="table">
<div class="table-cell align-left">
<?php if(sn_config("comment_enable_like")){ ?>
<a href="<?php echo $url; ?>&type=like" class="action-like <?php echo ($Snicker->hasLiked($comment->uid())? "active": ""); ?>">
<?php sn_e("Like"); ?> <span data-snicker="like"><?php echo $comment->like(); ?></span>
</a>
<?php } ?>
<?php if(sn_config("comment_enable_dislike")){ ?>
<a href="<?php echo $url; ?>&type=dislike" class="action-dislike <?php echo ($Snicker->hasDisliked($comment->uid())? "active": ""); ?>">
<?php sn_e("Dislike"); ?> <span data-snicker="dislike"><?php echo $comment->dislike(); ?></span>
</a>
<?php } ?>
</div>
<div class="table-cell align-right">
<?php if($maxdepth === 0 || $maxdepth > $comment->depth()){ ?>
<a href="<?php echo $page->permalink(); ?>?snicker=reply&uid=<?php echo $comment->key(); ?>#snicker-comments-form" class="action-reply">
<?php sn_e("Reply"); ?>
</a>
<?php } ?>
</div>
</div>
</div>
</div>
<?php
}
}