mirror of
https://github.com/PretendoNetwork/juxtaposition-ui.git
synced 2026-08-24 02:05:26 -05:00
Started implementing drawing on desktop
This commit is contained in:
Jemma
@@ -243,7 +243,7 @@ async function newPost(req, res) {
|
||||
if (body) {
|
||||
body = req.body.body.replace(/[^A-Za-z\d\s-_!@#$%^&*(){}‛¨ƒºª«»“”„¿¡←→↑↓√§¶†‡¦–—⇒⇔¤¢€£¥™©®+×÷=±∞ˇ˘˙¸˛˜′″µ°¹²³♭♪•…¬¯‰¼½¾♡♥●◆■▲▼☆★♀♂,./?;:'"\\<>]/g, '');
|
||||
}
|
||||
if (body.length > 280) {
|
||||
if (body.length > 280 && !req.moderator) {
|
||||
body = body.substring(0, 280);
|
||||
}
|
||||
const document = {
|
||||
|
||||
@@ -21,7 +21,7 @@ input[type="submit"] {
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
font-weight: 700;
|
||||
padding: 1em
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -565,7 +565,7 @@ button.report {
|
||||
padding: 1em
|
||||
}
|
||||
|
||||
#report-form {
|
||||
#report-form, .add-post-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -596,12 +596,139 @@ button.report {
|
||||
resize: none
|
||||
}
|
||||
|
||||
#report-post-page input[type=submit] {
|
||||
background: var(--btn)
|
||||
|
||||
.textarea-menu {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
border-right: 1px solid var(--background-alt-alt);
|
||||
}
|
||||
.textarea-container.textarea-with-menu.active-text {
|
||||
display: flex;
|
||||
}
|
||||
.textarea-memo.trigger {
|
||||
background: var(--background);
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
.add-post-page .textarea-text {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
padding: 1ch;
|
||||
border: none;
|
||||
resize: none;
|
||||
border-radius: 0 20px 20px 0;
|
||||
background: #f9f5fb;
|
||||
}
|
||||
input[type=radio] {
|
||||
-webkit-appearance:none;
|
||||
appearance: none;
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio],
|
||||
.textarea-menu-text>input[type=radio] {
|
||||
display:inline-block;
|
||||
width:95px;
|
||||
height:140px;
|
||||
border:0;
|
||||
margin:0;
|
||||
background-repeat:no-repeat;
|
||||
background-position:0 0;
|
||||
}
|
||||
.textarea-menu-text>input[type=radio] {
|
||||
border-top-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6))0 0
|
||||
}
|
||||
.textarea-menu-text>input[type=radio]:checked {
|
||||
border-top-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))0 0
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio] {
|
||||
border-bottom-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6))0 0
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio]:checked {
|
||||
border-bottom-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))0 0
|
||||
}
|
||||
.textarea-menu-text>input:checked~.textarea-menu-memo,
|
||||
.textarea-menu>li>input:checked~.textarea-menu-text {
|
||||
background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))
|
||||
}
|
||||
.textarea-memo-preview {
|
||||
image-rendering:pixelated;
|
||||
width:360;
|
||||
height:160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio],
|
||||
.textarea-menu-text>input[type=radio] {
|
||||
display:inline-block;
|
||||
width:60px;
|
||||
height:100px;
|
||||
border:0;
|
||||
margin:0;
|
||||
background-repeat:no-repeat;
|
||||
background-position:0 0;
|
||||
background-size: 60% !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.textarea-menu>li {
|
||||
list-style: none;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
}
|
||||
.textarea-menu-text>input[type=radio] {
|
||||
border-top-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center;
|
||||
background-color: var(--text);
|
||||
}
|
||||
.textarea-menu-text>input[type=radio]:checked {
|
||||
border-top-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center;
|
||||
background-color: var(--btn);
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio] {
|
||||
border-bottom-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center;
|
||||
background-color: var(--text);
|
||||
}
|
||||
.textarea-menu-memo>input[type=radio]:checked {
|
||||
border-bottom-left-radius:20px;
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center;
|
||||
background-color: var(--btn);
|
||||
}
|
||||
.textarea-menu-text>input:checked~.textarea-menu-memo,
|
||||
.textarea-menu>li>input:checked~.textarea-menu-text {
|
||||
background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))
|
||||
}
|
||||
.textarea-menu-text>input:checked~.textarea-text {
|
||||
display:block
|
||||
}
|
||||
.textarea-menu-memo>input:checked~.textarea-memo {
|
||||
display:block;
|
||||
position:absolute
|
||||
}
|
||||
.textarea-memo-preview {
|
||||
display:block;
|
||||
}
|
||||
|
||||
#report-post-page input[type=submit],
|
||||
#add-post-page input[type=submit],
|
||||
#button-wrapper button.primary
|
||||
{
|
||||
background: var(--btn);
|
||||
margin: 1ch;
|
||||
}
|
||||
|
||||
#report-post-page input[type=button] {
|
||||
background: var(--btn-secondary)
|
||||
#report-post-page input[type=button],
|
||||
#add-post-page input[type=button],
|
||||
#button-wrapper button {
|
||||
background: var(--btn-secondary);
|
||||
margin: 1ch;
|
||||
}
|
||||
|
||||
.buttons.tabs {
|
||||
@@ -755,6 +882,252 @@ button.report {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
.feeling-selector.expression {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.feeling-selector.expression > #mii-face {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
margin: 0 1ch 1em 0;
|
||||
border-radius: .5em;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
.feeling-selector.expression .buttons {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
background: var(--background-alt-alt);
|
||||
border-radius: .5em;
|
||||
margin: 0 0 1em 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.feeling-selector .buttons li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.feeling-selector .buttons li > input {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
appearance: none;
|
||||
background-size: 60px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feeling-button-normal {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd' /%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-happy {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-like {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-surprised {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-frustrated {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' stroke='%23846abd' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-puzzled {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-normal:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important;
|
||||
}
|
||||
.feeling-button-happy:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-like:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-surprised:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23fff'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-frustrated:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
.feeling-button-puzzled:checked {
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important
|
||||
}
|
||||
|
||||
#button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#posts-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.checkbox-container.spoiler-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1em 0 0.5em 0;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Painting Stuff */
|
||||
|
||||
#painting {
|
||||
background: gray;
|
||||
border: 1px solid #d3d3d3;
|
||||
image-rendering: pixelated;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.painting-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
background: #000000ad;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
}
|
||||
#painting-content {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
background: var(--background-alt);
|
||||
border-radius: 1em;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
}
|
||||
#painting-content .tools {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.buttons.pencil, .buttons.eraser {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
border-radius: .5em;
|
||||
margin: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.tools .buttons input[type="radio"] {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background: #EFE6FF;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
border: 0;
|
||||
font-weight: 700;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
border-right: 1px solid var(--background);
|
||||
}
|
||||
|
||||
.tools .buttons input[type="radio"].small {
|
||||
border-radius: 1em 0 0 1em;
|
||||
}
|
||||
|
||||
.tools .buttons input[type="radio"].large {
|
||||
border-radius: 0 1em 1em 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tools .buttons input[type="radio"]:checked {
|
||||
background: var(--btn);
|
||||
}
|
||||
|
||||
.tools div:last-of-type {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
background: var(--background-alt-alt);
|
||||
padding: 1.25ch;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.buttons.pencil {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.tools button {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
margin: 0 1ch 0 0;
|
||||
background: var(--btn);
|
||||
}
|
||||
#painting-content #button-wrapper button {
|
||||
margin: 0 1ch;
|
||||
font-size: 15px;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
input.pencil:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
background-size: 20px !important;
|
||||
}
|
||||
|
||||
input.pencil {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
background-size: 20px !important;
|
||||
}
|
||||
|
||||
input.pencil.medium {
|
||||
background-size: 25px !important;
|
||||
}
|
||||
|
||||
input.pencil.large {
|
||||
background-size: 30px !important;
|
||||
}
|
||||
|
||||
input.eraser:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
background-size: 20px !important;
|
||||
}
|
||||
|
||||
input.eraser {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
background-size: 20px !important;
|
||||
}
|
||||
|
||||
input.eraser.medium {
|
||||
background-size: 25px !important;
|
||||
}
|
||||
|
||||
input.eraser.large {
|
||||
background-size: 30px !important;
|
||||
}
|
||||
|
||||
.tools button {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 30px;
|
||||
}
|
||||
|
||||
.tools button.clear {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-50.34-74.34L139.31,152l18.35,18.34a8,8,0,0,1-11.32,11.32L128,163.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L116.69,152,98.34,133.66a8,8,0,0,1,11.32-11.32L128,140.69l18.34-18.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E") !important;;
|
||||
}
|
||||
|
||||
.tools button.undo {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
}
|
||||
|
||||
/* End of painting stuff */
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.communities-wrapper {
|
||||
max-width: 600px;
|
||||
|
||||
2
src/webfiles/web/css/web.min.css
vendored
2
src/webfiles/web/css/web.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
src/webfiles/web/images/add-post-no-image.png
Normal file
BIN
src/webfiles/web/images/add-post-no-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
171
src/webfiles/web/js/painting.js
Normal file
171
src/webfiles/web/js/painting.js
Normal file
@@ -0,0 +1,171 @@
|
||||
/*eslint-env browser*/
|
||||
/*eslint no-var: 'off'*/
|
||||
/*eslint @typescript-eslint/explicit-function-return-type: 'off'*/
|
||||
const c = document.getElementById('painting');
|
||||
const ctx = c.getContext('2d');
|
||||
|
||||
let scale = c.getBoundingClientRect().width / 320;
|
||||
let isPainting = false;
|
||||
let currentPen = drawPen1;
|
||||
let oldCursorPosition = null;
|
||||
let penColor = '#000';
|
||||
|
||||
clearCanvas();
|
||||
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
|
||||
function drawPen1(ctx, x, y, style) {
|
||||
ctx.fillStyle = style;
|
||||
ctx.fillRect(x, y, 1, 1);
|
||||
}
|
||||
|
||||
function drawPen2(ctx, x, y, style) {
|
||||
ctx.fillStyle = style;
|
||||
ctx.fillRect(x - 1, y, 3, 1);
|
||||
ctx.fillRect(x, y - 1, 1, 3);
|
||||
}
|
||||
|
||||
function drawPen3(ctx, x, y, style) {
|
||||
ctx.fillStyle = style;
|
||||
ctx.fillRect(x - 3, y - 3, 7, 7);
|
||||
ctx.fillRect(x - 4, y - 1, 9, 3);
|
||||
ctx.fillRect(x - 1, y - 4, 3, 9);
|
||||
}
|
||||
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, c.width, c.height);
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fillRect(0, 0, 320, 120);
|
||||
}
|
||||
|
||||
function setPen(number) {
|
||||
setTool(number, '#000');
|
||||
}
|
||||
|
||||
function setEraser(number) {
|
||||
setTool(number, '#fff');
|
||||
}
|
||||
|
||||
function setTool(number, color) {
|
||||
penColor = color;
|
||||
switch (number) {
|
||||
case 0:
|
||||
currentPen = drawPen1;
|
||||
break;
|
||||
case 1:
|
||||
currentPen = drawPen2;
|
||||
break;
|
||||
case 2:
|
||||
currentPen = drawPen3;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getCursorPosition(e) {
|
||||
const paintingBounds = c.getBoundingClientRect();
|
||||
let currentPosition = { x: 0, y: 0 };
|
||||
|
||||
if (e.type.indexOf('touch') !== -1) {
|
||||
currentPosition.x = e.touches[0].clientX;
|
||||
currentPosition.y = e.touches[0].clientY;
|
||||
} else {
|
||||
currentPosition.x = e.clientX;
|
||||
currentPosition.y = e.clientY;
|
||||
}
|
||||
|
||||
return {
|
||||
x: Math.round((currentPosition.x - paintingBounds.left) / scale) - 2,
|
||||
y: Math.round((currentPosition.y - paintingBounds.top) / scale) - 2,
|
||||
};
|
||||
}
|
||||
|
||||
function draw(e) {
|
||||
if (!isPainting) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentCursorPosition = getCursorPosition(e);
|
||||
|
||||
if (!currentCursorPosition) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldCursorPosition === null) {
|
||||
oldCursorPosition = getCursorPosition(e);
|
||||
}
|
||||
|
||||
const points = calcStraightLine(currentCursorPosition, oldCursorPosition);
|
||||
|
||||
for (const point of points) {
|
||||
currentPen(ctx, point.x, point.y, penColor);
|
||||
}
|
||||
|
||||
oldCursorPosition = getCursorPosition(e);
|
||||
}
|
||||
|
||||
function calcStraightLine(startCoordinates, endCoordinates) {
|
||||
const coordinatesArray = new Array();
|
||||
// Translate coordinates
|
||||
let x1 = startCoordinates.x;
|
||||
let y1 = startCoordinates.y;
|
||||
const x2 = endCoordinates.x;
|
||||
const y2 = endCoordinates.y;
|
||||
|
||||
if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Define differences and error check
|
||||
const dx = Math.abs(x2 - x1);
|
||||
const dy = Math.abs(y2 - y1);
|
||||
const sx = x1 < x2 ? 1 : -1;
|
||||
const sy = y1 < y2 ? 1 : -1;
|
||||
let err = dx - dy;
|
||||
// Set first coordinates
|
||||
coordinatesArray.push({ x: x1, y: y1 });
|
||||
// Main loop
|
||||
while (!(x1 == x2 && y1 == y2)) {
|
||||
const e2 = err << 1;
|
||||
if (e2 > -dy) {
|
||||
err -= dy;
|
||||
x1 += sx;
|
||||
}
|
||||
if (e2 < dx) {
|
||||
err += dx;
|
||||
y1 += sy;
|
||||
}
|
||||
// Set coordinates
|
||||
coordinatesArray.push({ x: x1, y: y1 });
|
||||
}
|
||||
// Return the result
|
||||
return coordinatesArray;
|
||||
}
|
||||
|
||||
c.addEventListener('mousedown', (e) => {
|
||||
oldCursorPosition = null;
|
||||
isPainting = true;
|
||||
draw(e);
|
||||
});
|
||||
|
||||
c.addEventListener(
|
||||
'touchstart',
|
||||
(e) => {
|
||||
oldCursorPosition = null;
|
||||
isPainting = true;
|
||||
draw(e);
|
||||
},
|
||||
{ passive: false }
|
||||
);
|
||||
|
||||
c.addEventListener('mouseup', (e) => {
|
||||
isPainting = false;
|
||||
oldCursorPosition = null;
|
||||
});
|
||||
|
||||
c.addEventListener('touchend', (e) => {
|
||||
isPainting = false;
|
||||
oldCursorPosition = null;
|
||||
});
|
||||
|
||||
c.addEventListener('mousemove', draw);
|
||||
c.addEventListener('touchmove', draw);
|
||||
@@ -1,3 +1,6 @@
|
||||
/*eslint-env browser*/
|
||||
/*eslint no-var: "off"*/
|
||||
/*eslint @typescript-eslint/explicit-function-return-type: "off"*/
|
||||
let pjax;
|
||||
setInterval(checkForUpdates, 30000);
|
||||
|
||||
@@ -144,12 +147,12 @@ function initPostModules() {
|
||||
document.getElementById(hide).style.display = 'none';
|
||||
document.getElementById(show).style.display = '';
|
||||
if (header === 'true') {
|
||||
document.getElementById('header').style.display = 'block';
|
||||
document.getElementById('title').style.display = '';
|
||||
} else {
|
||||
document.getElementById('header').style.display = 'none';
|
||||
document.getElementById('title').style.display = 'none';
|
||||
}
|
||||
if (menu === 'true') {
|
||||
document.getElementById('nav-menu').style.display = 'block';
|
||||
document.getElementById('nav-menu').style.display = '';
|
||||
} else {
|
||||
document.getElementById('nav-menu').style.display = 'none';
|
||||
}
|
||||
@@ -171,7 +174,6 @@ function initPostEmotion() {
|
||||
}
|
||||
function initNewPost() {
|
||||
initPostEmotion();
|
||||
initScreenShots();
|
||||
}
|
||||
function initSpoilers() {
|
||||
const els = document.querySelectorAll('button[data-post-id]');
|
||||
@@ -303,7 +305,7 @@ function GET(url, callback) {
|
||||
}
|
||||
|
||||
window.onscroll = function(ev) {
|
||||
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
|
||||
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight && document.getElementById('load-more')) {
|
||||
document.getElementById('load-more').click();
|
||||
}
|
||||
};
|
||||
@@ -344,4 +346,57 @@ function reportPost(post) {
|
||||
formID.value = id;
|
||||
console.log(id.replace(/(\d{3})(\d{4})(\d{3})(\d{4})(\d{3})(\d{4})/, "$1-$2-$3-$4-$5-$6"));
|
||||
button.click();
|
||||
}
|
||||
|
||||
function openText() {
|
||||
const textArea = document.getElementById('new-post-text');
|
||||
const paintingArea = document.getElementById('new-post-memo');
|
||||
const paintingOverlay = document.getElementById('painting-wrapper');
|
||||
|
||||
if (!textArea || !paintingArea || !paintingOverlay) {
|
||||
return;
|
||||
}
|
||||
|
||||
textArea.style.display = '';
|
||||
paintingArea.style.display = 'none';
|
||||
paintingOverlay.style.display = 'none';
|
||||
}
|
||||
|
||||
function newPainting(clear) {
|
||||
const textArea = document.getElementById('new-post-text');
|
||||
const paintingArea = document.getElementById('new-post-memo');
|
||||
const paintingOverlay = document.getElementById('painting-wrapper');
|
||||
const c = document.getElementById('painting');
|
||||
|
||||
if (!textArea || !paintingArea || !paintingOverlay) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (clear) {
|
||||
clearCanvas();
|
||||
}
|
||||
|
||||
textArea.style.display = 'none';
|
||||
paintingArea.style.display = 'flex';
|
||||
paintingOverlay.style.display = '';
|
||||
scale = c.getBoundingClientRect().width / 320;
|
||||
|
||||
}
|
||||
|
||||
function closePainting(save) {
|
||||
const paintingArea = document.getElementById('new-post-memo');
|
||||
const paintingOverlay = document.getElementById('painting-wrapper');
|
||||
const memo = document.getElementById('memo');
|
||||
const c = document.getElementById('painting');
|
||||
|
||||
if (!paintingOverlay || !paintingArea || !memo) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (save) {
|
||||
memo.src = c.toDataURL();
|
||||
}
|
||||
|
||||
paintingOverlay.style.display = 'none';
|
||||
|
||||
}
|
||||
2
src/webfiles/web/js/web.min.js
vendored
2
src/webfiles/web/js/web.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -9,7 +9,7 @@
|
||||
<div id="toast"></div>
|
||||
<div id="wrapper">
|
||||
<div class="body-content message-post-list" id="message-page">
|
||||
<!--<button id="header-post-button" class="header-button" href="#" data-module-hide="message-page" data-module-show="add-post-page" data-header="false" data-menu="false">+</button>-->
|
||||
<button id="header-post-button" class="header-button" href="#" data-module-hide="message-page" data-module-show="add-post-page" data-header="true" data-menu="true">+</button>
|
||||
<% messages.forEach(function(message) { %>
|
||||
<div id="message-<%= message.id %>" class="post scroll <%if(message.pid === pid) {%>my-post<%} else {%>other-post<%}%>">
|
||||
<a href="/users/show?pid=<%= message.pid %>" data-pjax="#body" class="scroll-focus mii-icon-container">
|
||||
@@ -31,6 +31,47 @@
|
||||
</div>
|
||||
<%});%>
|
||||
</div>
|
||||
<%- include('partials/new_post', { pid, lang, id: conversation.id, name: userMap.get(user2.pid), url: '/friend_messages/new', show: 'message-page', message_pid: user2.pid }); %>
|
||||
<div id="painting-wrapper" class="painting-wrapper" style="display: none;">
|
||||
<div id="painting-content">
|
||||
<div class="tools">
|
||||
<div>
|
||||
<button class="clear" onclick="clearCanvas()"></button>
|
||||
<button class="undo"></button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="buttons pencil">
|
||||
<li>
|
||||
<input onclick="setPen(0)" type="radio" value="0" class="pencil small" name="tool" checked>
|
||||
</li>
|
||||
<li>
|
||||
<input onclick="setPen(1)" type="radio" value="1" class="pencil medium" name="tool">
|
||||
</li>
|
||||
<li>
|
||||
<input onclick="setPen(2)" type="radio" value="2" class="pencil large" name="tool">
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="buttons eraser">
|
||||
<li>
|
||||
<input onclick="setEraser(0)" type="radio" value="0" class="eraser small" name="tool">
|
||||
</li>
|
||||
<li>
|
||||
<input onclick="setEraser(1)" type="radio" value="1" class="eraser medium" name="tool">
|
||||
</li>
|
||||
<li>
|
||||
<input onclick="setEraser(2)" type="radio" value="2" class="eraser large" name="tool">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<canvas width="320" height="120" id="painting">Your browser does not support the HTML canvas tag.</canvas>
|
||||
<div id="button-wrapper">
|
||||
<button onclick="closePainting(false)">Cancel</button>
|
||||
<button class="primary" onclick="closePainting(true)">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/painting.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
<img src="" onerror="setTimeout(function() { window.scrollTo(0, 50000); }, 500)">
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="/css/web.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/web.css">
|
||||
<script src="/js/pjax.min.js"></script>
|
||||
<script src="/js/web.min.js"></script>
|
||||
<script src="/js/web.js"></script>
|
||||
<link rel="manifest" href="https://juxt-web-cdn.b-cdn.net/web/manifest.json">
|
||||
<!-- Global site tag (gtag.js) - Google Analytics Testing-->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<header>
|
||||
<header id="nav-menu">
|
||||
<a href="/" class="logo-link">
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.63 100.33" style=""><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#9d6ff3;}.cls-3{font-size:30.54px;fill:#59c9a5;font-family:Poppins-Bold, Poppins;font-weight:700;}</style></defs><path class="cls-1" d="M25.62,0H40V40.2c0,12.69-7.73,19.41-19.41,19.41C8.49,59.61,0,52.55,0,39.28H14.28c0,5,2.19,7.47,5.88,7.47,3.45,0,5.46-2.18,5.46-6.55Z"/><path class="cls-1" d="M51.33,0H65.69V35.33c0,7,3.45,11,10.25,11s10.42-4,10.42-11V0h14.37v35.2c0,16.3-11.43,24.37-25,24.37S51.33,51.54,51.33,35.24Z"/><path class="cls-1" d="M134.92,41,124.33,59H108l18.91-30L107.61,0h16.72l11.85,17.81L146.6,0h16.29L144.16,29.78,163.65,59H146.93Z"/><path class="cls-2" d="M119.86,18.41,126.94,29,108,59h16.3L134.92,41l12,18.06h16.72L144.16,29.78,162.89,0H146.6L136.18,17.85l-7-10.54A70.15,70.15,0,0,0,119.86,18.41Z"/><path class="cls-2" d="M167.68,0H213.3V11.51H197.67V59H183.31V11.51H167.68Z"/><circle class="cls-2" cx="225.67" cy="52.02" r="6.96"/><text class="cls-3" transform="translate(77.71 100.33)">BETA</text></svg>
|
||||
</a>
|
||||
|
||||
69
src/webfiles/web/partials/new_post.ejs
Normal file
69
src/webfiles/web/partials/new_post.ejs
Normal file
@@ -0,0 +1,69 @@
|
||||
<div id="add-post-page" class="add-post-page official-user-post" style="display: none;">
|
||||
<form method="post" action="<%=url%>" id="posts-form" data-is-own-title="1" data-is-identified="1">
|
||||
<input type="hidden" name="community_id" value="<%= id %>"/>
|
||||
<div class="add-post-page-content">
|
||||
<div class="feeling-selector expression">
|
||||
<img src="https://mii.olv.pretendo.cc/mii/<%= pid %>/normal_face.png" id="mii-face" class="icon">
|
||||
<ul class="buttons">
|
||||
<li><input type="radio" name="feeling_id" value="0" class="feeling-button-normal"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/normal_face.png" checked
|
||||
data-sound="SE_WAVE_MII_FACE_00">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="feeling_id" value="1" class="feeling-button-happy"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/smile_open_mouth.png"
|
||||
data-sound="SE_WAVE_MII_FACE_01">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="feeling_id" value="2" class="feeling-button-like"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/wink_left.png"
|
||||
data-sound="SE_WAVE_MII_FACE_02">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="feeling_id" value="3" class="feeling-button-surprised"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/surprise_open_mouth.png"
|
||||
data-sound="SE_WAVE_MII_FACE_03">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="feeling_id" value="4" class="feeling-button-frustrated"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/frustrated.png"
|
||||
data-sound="SE_WAVE_MII_FACE_04">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="feeling_id" value="5" class="feeling-button-puzzled"
|
||||
data-mii-face-url="https://mii.olv.pretendo.cc/mii/<%= pid %>/sorrow.png"
|
||||
data-sound="SE_WAVE_MII_FACE_05">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="textarea-container textarea-with-menu active-text">
|
||||
<menu class="textarea-menu">
|
||||
<li class="textarea-menu-text">
|
||||
<input type="radio" name="_post_type" value="body" checked data-sound="" onclick="openText()">
|
||||
</li>
|
||||
<li class="textarea-menu-memo">
|
||||
<input type="radio" name="_post_type" value="painting" data-sound="" onclick="newPainting(false)">
|
||||
</li>
|
||||
</menu>
|
||||
<textarea id="new-post-text" name="body" class="textarea-text" value="" maxlength="280" placeholder="Enter text here..."></textarea>
|
||||
<div id="new-post-memo" class="textarea-memo trigger" data-sound="" onclick="newPainting(false)" style="display: none;">
|
||||
<img id="memo" class="textarea-memo-preview" src="">
|
||||
<input id="memo-value" type="hidden" name="painting">
|
||||
</div>
|
||||
</div>
|
||||
<label class="checkbox-container spoiler-button">
|
||||
Spoilers
|
||||
<input type="checkbox" id="spoiler" name="spoiler" value="true">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="button-wrapper">
|
||||
<input id="message_to_pid" type="hidden" name="message_to_pid" <%if(message_pid) {%>value="<%= message_pid %><%}%>">
|
||||
<input type="button" class="olv-modal-close-button fixed-bottom-button left"
|
||||
value="Cancel" data-sound="SE_WAVE_CANCEL"
|
||||
data-module-show="<%= show %>" data-module-hide="add-post-page"
|
||||
data-header="true" data-menu="true">
|
||||
<input type="submit" class="post-button fixed-bottom-button" value="Post">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -48,6 +48,11 @@
|
||||
<div id="toast"></div>
|
||||
<div class="community-page-post-box" id="post">
|
||||
<div id="wrapper">
|
||||
<%if(!post.removed) {%>
|
||||
<% if(((community.allows_comments && community.open) || (community.admins && community.admins.indexOf(pid) !== -1)) && userSettings.pid !== 1000000000 && userSettings.account_status === 0) {%>
|
||||
<button id="header-post-button" class="header-button" href="#" data-module-hide="post" data-module-show="add-post-page" data-header="false" data-menu="false">+</button>
|
||||
<%}%>
|
||||
<%}%>
|
||||
<%- include('partials/post_template', { post: post, mii_image_CDN: mii_image_CDN, lang: lang, reply: false, mainPost: true }); %>
|
||||
<span class="replies-line"></span>
|
||||
<% replies.forEach(function(post) { %>
|
||||
@@ -56,6 +61,9 @@
|
||||
<% }); %>
|
||||
</div>
|
||||
</div>
|
||||
<% if(((community.allows_comments && community.open) || (community.admins && community.admins.indexOf(pid) !== -1)) && userSettings.pid !== 1000000000 && userSettings.account_status === 0) {%>
|
||||
<%- include('partials/new_post', { pid, lang, id: post.community_id, name: post.screen_name, url: `/posts/${post.id}/new`, show: 'post', message_pid: '' }); %>
|
||||
<%}%>
|
||||
<div id="report-post-page" class="add-post-page official-user-post" style="display: none">
|
||||
<form method="post" action="/posts/<%=post.id%>/report" id="report-form" name="report" data-is-own-title="1" data-is-identified="1">
|
||||
<input type="hidden" name="post_id" id="report-post-id" value="<%= post.id %>"/>
|
||||
@@ -91,6 +99,31 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="painting-wrapper">
|
||||
<div id="painting-content">
|
||||
<div class="tools">
|
||||
<div>
|
||||
<button class="clear">Clear</button>
|
||||
<button class="undo">Undo</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="buttons pencil">
|
||||
<li>
|
||||
<input type="radio" value="0" class="pencil small" name="pencil">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" value="1" class="pencil medium" name="pencil">
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" value="2" class="pencil large" name="pencil">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<canvas width="320" height="120" id="painting">
|
||||
Your browser does not support the HTML canvas tag.</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user