Remove javascript for scope dropdown

main
Bob Mottram 2020-06-25 18:33:26 +01:00
parent 9f092b3e36
commit 9e6410d693
2 changed files with 411 additions and 59 deletions

View File

@ -661,6 +661,349 @@ div.gallery img {
text-decoration: none;
}
li { list-style:none;}
.msgscope-collapse { position: relative; }
.nav { width: 150px; }
/***********BUTTON CODE ******************************************************/
a, button, input:focus, input[type='button'], input[type='reset'], input[type='submit'], textarea:focus, .button {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.button-msgScope {
display:flex;
flex-direction:row;
justify-content:center;
width:100%;
min-height:100%;
}
.button-msgScope button, .button-msgScope div.lined-thin {
align-self:center;
background:transparent;
padding:1rem 1rem;
margin:0 1rem;
transition:all .5s ease;
color:#41403E;
font-size:2rem;
letter-spacing:1px;
outline:none;
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
border-bottom-right-radius: 225px 15px;
border-bottom-left-radius:15px 255px;
}
.button-msgScope button:hover {
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
.btn {
background: #fff;
border: 1px solid #BEE7ED;
margin: -3px 0 0 0;
}
aside .toggle-msgScope input[type='checkbox'] {
float: right;
}
aside .toggle-inside li {
padding-left: 20px;
border-bottom: 1px solid #EEEDEE;
border-left: 5px solid rgba(101, 110, 127, 0.34);
width: 100%;
margin-left: -15px;
overflow: hidden;
box-shadow: 0 1px 1px #F0F1F3;
}
.dropdown-menutoggle {
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
position: absolute;
top: 100%;
left: 21px;
z-index: 1000;
display: block;
float: left;
min-width: 169px;
padding: 0 17px !important;
margin: 2px 0 0 !important;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
}
.dropdown-menutoggle a {
box-shadow: none !important;
}
/******************TOGGLE ****************/
.toggle-msgScope {
position: relative;
overflow: hidden;
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
line-height: 2rem;
font-size: 2.5rem;
}
.toggle-msgScope div[class*='toggle-inside'] {
/* margin: -22px 0 13px 0;*/
overflow: hidden;
box-sizing: border-box;
display: none;
}
aside .toggle-msgScope input[type='checkbox'] {
float:right;
}
aside .toggle-inside li {
padding-left: 20px;
border-bottom: 1px solid #EEEDEE;
border-left: 5px solid rgba(101, 110, 127, 0.34);
width: 100%;
margin-left: -15px;
overflow: hidden;
box-shadow: 0 1px 1px #F0F1F3;
}
.nav li {
border-top: 0 solid #fff !important;
}
.nav .toggle-msgScope {
overflow: visible;
}
footer .msgscope {
height: 6rem;
}
#msgscope label div {
color: #fff !important;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
/*width: 170px;*/
padding: 15px;
margin: 0 auto;
border: 1px solid #ccc;
/*border-radius: 33px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-radius: 4px;*/
font-size: 1.5rem;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: inline-block;
font-weight: bold;
box-shadow: 0px 3px 2px #CCC;
box-shadow: 0px 2px 1px rgba(204, 204, 204, 0.74);
background-color: #e85c41;
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 10px;
}
#msgscope ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
#msgscope label div:active {
background-color: #CE1119;
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
border-color: #adadad;
background-image: none;
}
#msgscope label div:active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#msgscope label div:focus {
background-color: #e6e6e6;
}
[id*='toggle'] .container, [class*='toggle'] .container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
[id*='toggle'] {
visibility: hidden;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
[id*='toggle'] + label {
cursor:pointer;
text-align: left;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition:all 500ms ease;
}
[id*='toggle'toggle'toggle'] + label div {
transition:all 500ms ease;
}
[id*='toggle'toggle'toggle'] + label div:after {
content:'\002b'; /*OPEN*/
text-align: left;
float: left;
}
[id*='toggle'toggle'toggle']:checked + label div:after {
content:'\2212'; /*close*/
text-align: left;
float: left;
}
a:visited, a:link, a {
text-decoration: none;
color: #2c9ab7;
}
a:focus, a:hover {
text-decoration: underline;
color: #195760 !important;
}
#msgscope label div {
color: #fff !important;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
/*width: 170px;*/
padding: 15px;
margin: 0 auto;
border: 1px solid #ccc;
/*border-radius: 33px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-radius: 4px;*/
font-size: 1.5rem;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: inline-block;
font-weight: bold;
box-shadow: 0px 3px 2px #CCC;
box-shadow: 0px 2px 1px rgba(204, 204, 204, 0.74);
background-color: #e85c41;
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 10px;
}
#msgscope ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
#msgscope label div:active {
background-color: #CE1119;
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
border-color: #adadad;
background-image: none;
}
#msgscope label div:active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#msgscope label div:focus {
background-color: #e6e6e6;
}
[id*='toggle'] .container, [class*='toggle'] .container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
[id*='toggle'] {
visibility: hidden;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
[id*='toggle'] + label {
cursor:pointer;
text-align: left;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition:all 500ms ease;
}
[id*='toggle'] + label div {
transition:all 500ms ease;
}
[id*='toggle'] + label div:after {
content:'\002b'; /* open */
text-align: left;
float: left;
}
[id*='toggle']:checked + label div:after {
content:'\2212'; /* close */
text-align: left;
float: left;
}
.nav [id*='toggle'] + label div:after {
content:' '; /* open */
}
.nav [id*='toggle']:checked + label div:after {
content:' '; /* close */
}
[id*='toggle']:checked ~ .container {
display: none;
}
[id*='toggle']:checked ~ .toggle-inside {
display: block;
}
.toggle-msgScope div[class*='toggle-inside'] {
overflow: hidden;
box-sizing: border-box;
display: none;
}
@media screen and (min-width: 400px) {
body, html {
font-size: var(--font-size4);

View File

@ -1910,15 +1910,15 @@ def htmlNewPost(mediaInstance: bool, translate: {},
questionOptionOnDropdown = ''
if not replyStr:
shareOptionOnDropdown = \
'<a href="' + pathBase + \
' <li><a href="' + pathBase + \
'/newshare"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_share.png"/><b>' + translate['Shares'] + \
'</b><br>' + translate['Describe a shared item'] + '</a>'
'</b><br>' + translate['Describe a shared item'] + '</a></li>\n'
questionOptionOnDropdown = \
'<a href="' + pathBase + \
' <li><a href="' + pathBase + \
'/newquestion"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_question.png"/><b>' + translate['Question'] + \
'</b><br>' + translate['Ask a question'] + '</a>'
'</b><br>' + translate['Ask a question'] + '</a></li>\n'
mentionsStr = ''
for m in mentions:
@ -1968,54 +1968,80 @@ def htmlNewPost(mediaInstance: bool, translate: {},
dropdownDMSuffix += '?mention=' + mentionedActor
dropdownReportSuffix += '?mention=' + mentionedActor
dropDownContent = ''
dropDownContent = \
'<img loading="lazy" alt="" title="" src="/' + iconsDir + \
'/' + scopeIcon + '"/><b class="scope-desc">' + \
scopeDescription + '</b>'
if not reportUrl:
dropDownContent += \
' <div id="myDropdown" class="dropdown-content">'
dropDownContent += "<div class='msgscope-collapse collapse "
dropDownContent += "right desktoponly' id='msgscope'>\n"
dropDownContent += " <ul class='nav msgscope-nav msgscope-right'>\n"
dropDownContent += " <li class=' ' style='position: relative;'>\n"
dropDownContent += " <div class='toggle-msgScope button-msgScope'>\n"
dropDownContent += " <input id='toggleMsgScope' "
dropDownContent += "name='toggleMsgScope' type='checkbox'/>\n"
dropDownContent += " <label for='toggleMsgScope'>\n"
dropDownContent += " <div class='lined-thin'>\n"
dropDownContent += ' <img loading="lazy" alt="" title="" src="/'
dropDownContent += iconsDir + '/' + scopeIcon
dropDownContent += '"/><b class="scope-desc">'
dropDownContent += scopeDescription + '</b>\n'
dropDownContent += " <span class='caret'/>\n"
dropDownContent += " </div>\n"
dropDownContent += " </label>\n"
dropDownContent += " <div class='toggle-inside'>\n"
dropDownContent += " <ul aria-labelledby='dropdownMsgScope' "
dropDownContent += "class='dropdown-menutoggle'>\n"
if showPublicOnDropdown:
dropDownContent += \
' <a href="' + pathBase+dropdownNewPostSuffix + \
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownNewPostSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_public.png"/><b>' + \
translate['Public'] + '</b><br>' + \
translate['Visible to anyone'] + '</a>'
dropDownContent += \
' <a href="' + pathBase+dropdownNewBlogSuffix + \
translate['Visible to anyone'] + '</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownNewBlogSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/edit.png"/><b>' + \
translate['Blog'] + '</b><br>' + \
translate['Publicly visible post'] + '</a>'
dropDownContent += \
' <a href="' + pathBase+dropdownUnlistedSuffix + \
translate['Publicly visible post'] + '</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownUnlistedSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir+'/scope_unlisted.png"/><b>' + \
translate['Unlisted'] + '</b><br>' + \
translate['Not on public timeline'] + '</a>'
dropDownContent += \
' <a href="' + pathBase+dropdownFollowersSuffix + \
translate['Not on public timeline'] + '</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownFollowersSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_followers.png"/><b>' + \
translate['Followers'] + '</b><br>' + \
translate['Only to followers'] + '</a>'
dropDownContent += \
' <a href="' + \
pathBase + dropdownDMSuffix + \
translate['Only to followers'] + '</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownDMSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_dm.png"/><b>' + translate['DM'] + \
'</b><br>' + translate['Only to mentioned people'] + '</a>'
dropDownContent += \
' <a href="' + \
pathBase + dropdownReminderSuffix + \
'</b><br>' + translate['Only to mentioned people'] + \
'</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownReminderSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + \
iconsDir + '/scope_reminder.png"/><b>' + translate['Reminder'] + \
'</b><br>' + translate['Scheduled note to yourself'] + '</a>'
dropDownContent += \
' <a href="' + pathBase + dropdownReportSuffix + \
'</b><br>' + translate['Scheduled note to yourself'] + \
'</a></li>\n'
dropDownContent += " <li>" \
'<a href="' + pathBase + dropdownReportSuffix + \
'"><img loading="lazy" alt="" title="" src="/' + iconsDir + \
'/scope_report.png"/><b>' + translate['Report'] + \
'</b><br>' + translate['Send to moderators'] + '</a>'
'</b><br>' + translate['Send to moderators'] + '</a></li>\n'
dropDownContent += questionOptionOnDropdown + shareOptionOnDropdown
dropDownContent += ' </div>'
dropDownContent += ' </ul>\n'
dropDownContent += ' </div>\n'
dropDownContent += ' </div>\n'
dropDownContent += ' </li>\n'
dropDownContent += ' </ul>\n'
dropDownContent += '</div>\n'
else:
mentionsStr = 'Re: ' + reportUrl + '\n\n' + mentionsStr
@ -2026,30 +2052,24 @@ def htmlNewPost(mediaInstance: bool, translate: {},
newPostForm += ' <div class="vertical-center">'
newPostForm += \
' <label for="nickname"><b>' + newPostText + '</b></label>'
newPostForm += ' <div class="container">'
newPostForm += ' <div class="dropbtn" onclick="dropdown()">'
newPostForm += \
' <img loading="lazy" alt="" title="" src="/' + iconsDir + \
'/' + scopeIcon + '"/><b class="scope-desc">' + \
scopeDescription + '</b>'
newPostForm += ' <div class="container">\n'
newPostForm += dropDownContent
newPostForm += ' </div>'
newPostForm += \
' <a href="' + pathBase + \
'/searchemoji"><img loading="lazy" class="emojisearch" ' + \
'src="/emoji/1F601.png" title="' + \
translate['Search for emoji'] + '" alt="' + \
translate['Search for emoji'] + '"/></a>'
newPostForm += ' </div>'
newPostForm += ' <div class="container"><center>'
translate['Search for emoji'] + '"/></a>\n'
newPostForm += ' </div>\n'
newPostForm += ' <div class="container"><center>\n'
newPostForm += \
' <a href="' + pathBase + \
'/inbox"><button class="cancelbtn">' + \
translate['Cancel'] + '</button></a>'
translate['Cancel'] + '</button></a>\n'
newPostForm += \
' <input type="submit" name="submitPost" value="' + \
translate['Submit'] + '">'
newPostForm += ' </center></div>'
translate['Submit'] + '">\n'
newPostForm += ' </center></div>\n'
newPostForm += replyStr
if mediaInstance and not replyStr:
newPostForm += newPostImageSection
@ -2070,17 +2090,16 @@ def htmlNewPost(mediaInstance: bool, translate: {},
newPostForm += \
' <textarea id="message" name="message" style="height:' + \
str(messageBoxHeight) + 'px">' + mentionsStr + '</textarea>'
str(messageBoxHeight) + 'px">' + mentionsStr + '</textarea>\n'
newPostForm += extraFields+dateAndLocation
if not mediaInstance or replyStr:
newPostForm += newPostImageSection
newPostForm += ' </div>'
newPostForm += '</form>'
newPostForm += ' </div>\n'
newPostForm += '</form>\n'
if not reportUrl:
newPostForm += \
'<script>' + clickToDropDownScript() + \
cursorToEndOfMessageScript() + '</script>'
'<script>' + cursorToEndOfMessageScript() + '</script>'
newPostForm = \
newPostForm.replace('<body>', '<body onload="focusOnMessage()">')
@ -2727,16 +2746,6 @@ def individualFollowAsHtml(translate: {},
return resultStr
def clickToDropDownScript() -> str:
"""Function run onclick to create a dropdown
"""
script = 'function dropdown() {\n'
script += ' document.getElementById("myDropdown")' + \
'.classList.toggle("show");\n'
script += '}\n'
return script
def cursorToEndOfMessageScript() -> str:
"""Moves the cursor to the end of the text in a textarea
This avoids the cursor being in the wrong position when replying