RanchiMall/cc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature update

Browse Source 
-- added focus mode to randomly show one section only
-- added option to see plot
This commit is contained in:
sairaj mote 2022-07-10 02:36:34 +05:30
parent a2b36fa6ac
commit 5b3bfffafd
4 changed files with 265 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
css/main.css
View File

@ -23,8 +23,8 @@ body,
body * { body * {
--accent-color: rgb(0, 156, 78); --accent-color: rgb(0, 156, 78);
--text-color: 36, 36, 36; --text-color: 36, 36, 36;
--background-color: 248, 248, 248; --foreground-color: 252, 253, 255;
--foreground-color: rgb(255, 255, 255); --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #f3a600; --yellow: #f3a600;
@ -36,14 +36,14 @@ body[data-theme=dark] * {
--accent-color: rgb(14, 230, 122); --accent-color: rgb(14, 230, 122);
--text-color: 230, 230, 230; --text-color: 230, 230, 230;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--background-color: 10, 10, 10; --foreground-color: 27, 28, 29;
--foreground-color: rgb(24, 24, 24); --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffd13a; --yellow: #ffd13a;
} }
body[data-theme=dark] sm-popup::part(popup) { body[data-theme=dark] sm-popup::part(popup) {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
p, p,
@ -107,6 +107,7 @@ button,
button:disabled { button:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed;
} }
a:-webkit-any-link:focus-visible { a:-webkit-any-link:focus-visible {
@ -154,7 +155,7 @@ ul {
list-style: none; list-style: none;
} }
.hide-completely { .hidden {
display: none !important; display: none !important;
} }
@ -218,6 +219,10 @@ ul {
grid-auto-flow: column; grid-auto-flow: column;
} }
.gap-0-3 {
gap: 0.3rem;
}
.gap-0-5 { .gap-0-5 {
gap: 0.5rem; gap: 0.5rem;
} }
@ -282,7 +287,7 @@ ul {
justify-self: end; justify-self: end;
} }
.direction-column { .flex-direction-column {
flex-direction: column; flex-direction: column;
} }
@ -474,7 +479,7 @@ sm-checkbox {
} }
sm-menu { sm-menu {
--background: var(--foreground-color); --background: rgba(var(--foreground-color), 1);
} }
menu-option { menu-option {
@ -578,7 +583,7 @@ sm-copy {
align-items: center; align-items: center;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-column: 1/-1; grid-column: 1/-1;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
z-index: 2; z-index: 2;
} }
@ -596,37 +601,33 @@ sm-copy {
z-index: 1; z-index: 1;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
grid-column: 1/-1; grid-column: 1/-1;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
overflow-x: auto; overflow-x: auto;
min-height: 3.2rem; min-height: 3.2rem;
} }
#plot_popup {
--width: min(28rem, 100%);
}
.outline-button { .outline-button {
position: relative; position: relative;
white-space: nowrap;
justify-content: center;
padding: 0.5rem 0; padding: 0.5rem 0;
text-align: left;
line-height: 1.7;
} }
.outline-button::after { .outline-button::before {
position: absolute;
content: ""; content: "";
width: 1rem; width: 0.3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
height: 0.2rem; height: 2rem;
transition: transform 0.3s, opacity 0.1s; transition: opacity 0.1s;
bottom: 0; left: 0;
margin-right: 0.5rem;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
opacity: 0; opacity: 0;
} }
.outline-button:hover:not(.outline-button--active)::after { .outline-button--active::before {
opacity: 1;
background-color: rgba(var(--text-color), 0.5);
}
.outline-button:active::after {
opacity: 1;
transform: scaleX(2);
}
.outline-button--active::after {
opacity: 1; opacity: 1;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
@ -690,7 +691,7 @@ sm-copy {
font-weight: 500; font-weight: 500;
margin-right: 0.5rem; margin-right: 0.5rem;
align-self: center; align-self: center;
color: var(--foreground-color); color: rgba(var(--foreground-color), 1);
} }
#edit_sections_popup { #edit_sections_popup {
@ -763,7 +764,7 @@ sm-copy {
.content-card { .content-card {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset; box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
} }
.content-card.selected { .content-card.selected {
@ -876,7 +877,7 @@ sm-copy {
right: 0; right: 0;
bottom: 0; bottom: 0;
transition: transform 0.1s; transition: transform 0.1s;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -896,29 +897,26 @@ sm-copy {
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.active .icon { .active .icon {
fill: var(--foreground-color); fill: rgba(var(--foreground-color), 1);
} }
.quote-template { #focus_mode_panel {
position: relative; flex-wrap: wrap;
padding: 1rem; gap: 1rem;
margin: 1rem 0; background-color: rgba(var(--foreground-color), 1);
border-radius: 0.2rem; padding: 1.5rem;
border: solid thin rgba(var(--text-color), 0.3); border-radius: 0.5rem;
box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
overflow: hidden; }
justify-self: center; #focus_mode_panel .button {
padding-left: 1.3rem figcaption; color: var(--accent-color);
padding-left-margin-top: 0.5rem; flex-shrink: 0;
padding-left-color: rgba(var(--text-color), 0.8);
padding-left-font-size: 0.8rem;
padding-left-margin-left: auto;
} }
#version_history_panel { #version_history_panel {
border-radius: 0.5rem; border-radius: 0.5rem;
width: min(24rem, 100%); width: min(24rem, 100%);
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
overflow-y: auto; overflow-y: auto;
} }
#version_history_panel > :first-child { #version_history_panel > :first-child {
@ -1043,7 +1041,7 @@ sm-copy {
.preview-group__buttons { .preview-group__buttons {
display: inline-flex; display: inline-flex;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -1200,12 +1198,14 @@ sm-copy {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
.interact, .interact:not([disabled]),
button:not(.button--primary) { .button:not([disabled]),
button:not(.button--primary):not([disabled]) {
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.interact:hover, .interact:not([disabled]):hover,
button:not(.button--primary):hover { .button:not([disabled]):hover,
button:not(.button--primary):not([disabled]):hover {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.button--primary { .button--primary {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

95
css/main.scss
View File

@ -20,8 +20,8 @@ body {
* { * {
--accent-color: rgb(0, 156, 78); --accent-color: rgb(0, 156, 78);
--text-color: 36, 36, 36; --text-color: 36, 36, 36;
--background-color: 248, 248, 248; --foreground-color: 252, 253, 255;
--foreground-color: rgb(255, 255, 255); --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #f3a600; --yellow: #f3a600;
@ -38,14 +38,14 @@ body[data-theme="dark"] {
--accent-color: rgb(14, 230, 122); --accent-color: rgb(14, 230, 122);
--text-color: 230, 230, 230; --text-color: 230, 230, 230;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--background-color: 10, 10, 10; --foreground-color: 27, 28, 29;
--foreground-color: rgb(24, 24, 24); --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffd13a; --yellow: #ffd13a;
} }
sm-popup::part(popup) { sm-popup::part(popup) {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
} }
} }
@ -106,6 +106,7 @@ button,
button:disabled { button:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed;
} }
a:any-link:focus-visible { a:any-link:focus-visible {
@ -146,7 +147,7 @@ ul {
list-style: none; list-style: none;
} }
.hide-completely { .hidden {
display: none !important; display: none !important;
} }
@ -211,6 +212,9 @@ ul {
grid-auto-flow: column; grid-auto-flow: column;
} }
.gap-0-3 {
gap: 0.3rem;
}
.gap-0-5 { .gap-0-5 {
gap: 0.5rem; gap: 0.5rem;
} }
@ -275,7 +279,7 @@ ul {
justify-self: end; justify-self: end;
} }
.direction-column { .flex-direction-column {
flex-direction: column; flex-direction: column;
} }
@ -449,7 +453,7 @@ sm-checkbox {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
sm-menu { sm-menu {
--background: var(--foreground-color); --background: rgba(var(--foreground-color), 1);
} }
menu-option { menu-option {
font-size: 0.9rem; font-size: 0.9rem;
@ -542,7 +546,7 @@ sm-copy {
align-items: center; align-items: center;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-column: 1/-1; grid-column: 1/-1;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
z-index: 2; z-index: 2;
} }
#current_article_title { #current_article_title {
@ -558,36 +562,31 @@ sm-copy {
z-index: 1; z-index: 1;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
grid-column: 1/-1; grid-column: 1/-1;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
overflow-x: auto; overflow-x: auto;
min-height: 3.2rem; min-height: 3.2rem;
} }
#plot_popup {
--width: min(28rem, 100%);
}
.outline-button { .outline-button {
position: relative; position: relative;
white-space: nowrap;
justify-content: center;
padding: 0.5rem 0; padding: 0.5rem 0;
&::after { text-align: left;
position: absolute; line-height: 1.7;
&::before {
content: ""; content: "";
width: 1rem; width: 0.3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
height: 0.2rem; height: 2rem;
transition: transform 0.3s, opacity 0.1s; transition: opacity 0.1s;
bottom: 0; left: 0;
margin-right: 0.5rem;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
opacity: 0; opacity: 0;
} }
&:hover:not(.outline-button--active)::after {
opacity: 1;
background-color: rgba(var(--text-color), 0.5);
}
&:active::after {
opacity: 1;
transform: scaleX(2);
}
&--active { &--active {
&::after { &::before {
opacity: 1; opacity: 1;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
@ -650,7 +649,7 @@ sm-copy {
font-weight: 500; font-weight: 500;
margin-right: 0.5rem; margin-right: 0.5rem;
align-self: center; align-self: center;
color: var(--foreground-color); color: rgba(var(--foreground-color), 1);
} }
} }
@ -720,7 +719,7 @@ sm-copy {
} }
.content-card { .content-card {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset; box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
&.selected { &.selected {
box-shadow: 0 0 0 0.1rem var(--accent-color) inset; box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
@ -824,7 +823,7 @@ sm-copy {
right: 0; right: 0;
bottom: 0; bottom: 0;
transition: transform 0.1s; transition: transform 0.1s;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -842,32 +841,27 @@ sm-copy {
.active { .active {
background-color: var(--accent-color); background-color: var(--accent-color);
.icon { .icon {
fill: var(--foreground-color); fill: rgba(var(--foreground-color), 1);
} }
} }
.quote-template { #focus_mode_panel {
position: relative; flex-wrap: wrap;
padding: 1rem; gap: 1rem;
margin: 1rem 0; background-color: rgba(var(--foreground-color), 1);
border-radius: 0.2rem; padding: 1.5rem;
border: solid thin rgba(var(--text-color), 0.3); border-radius: 0.5rem;
-webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8); .button {
overflow: hidden; color: var(--accent-color);
justify-self: center; flex-shrink: 0;
padding-left: 1.3rem figcaption {
margin-top: 0.5rem;
color: rgba(var(--text-color), 0.8);
font-size: 0.8rem;
margin-left: auto;
} }
} }
#version_history_panel { #version_history_panel {
border-radius: 0.5rem; border-radius: 0.5rem;
width: min(24rem, 100%); width: min(24rem, 100%);
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
overflow-y: auto; overflow-y: auto;
& > :first-child { & > :first-child {
padding: 1rem; padding: 1rem;
@ -986,7 +980,7 @@ sm-copy {
} }
.preview-group__buttons { .preview-group__buttons {
display: inline-flex; display: inline-flex;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -1152,8 +1146,9 @@ sm-copy {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
} }
.interact, .interact:not([disabled]),
button:not(.button--primary) { .button:not([disabled]),
button:not(.button--primary):not([disabled]) {
transition: background-color 0.3s; transition: background-color 0.3s;
&:hover { &:hover {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);

284
index.html
View File

@ -46,7 +46,7 @@
</script> </script>
</head> </head>
<body class="hide" onload="onLoadStartUp()"> <body class="hidden" onload="onLoadStartUp()">
<sm-notifications id="notification_drawer"></sm-notifications> <sm-notifications id="notification_drawer"></sm-notifications>
<sm-popup id="confirmation_popup"> <sm-popup id="confirmation_popup">
<h4 id="confirm_title"></h4> <h4 id="confirm_title"></h4>
@ -56,7 +56,7 @@
<sm-button variant="no-outline" class="submit-btn">OK</sm-button> <sm-button variant="no-outline" class="submit-btn">OK</sm-button>
</div> </div>
</sm-popup> </sm-popup>
<article id="landing" class="page page-layout hide-completely"> <article id="landing" class="page page-layout hidden">
<header class="flex space-between"> <header class="flex space-between">
<div class="logo"> <div class="logo">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
@ -80,7 +80,7 @@
</div> </div>
</section> </section>
</article> </article>
<article id="sign_in" class="page page-layout hide-completely"> <article id="sign_in" class="page page-layout hidden">
<header> <header>
<div class="logo"> <div class="logo">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
@ -106,7 +106,7 @@
</p> </p>
</section> </section>
</article> </article>
<article id="sign_up" class="page page-layout hide-completely"> <article id="sign_up" class="page page-layout hidden">
<header> <header>
<div class="logo"> <div class="logo">
<svg class="main-logo" viewBox="0 0 27.25 32"> <svg class="main-logo" viewBox="0 0 27.25 32">
@ -143,7 +143,7 @@
<sm-spinner></sm-spinner> <sm-spinner></sm-spinner>
<h4>Loading RanchiMall CC</h4> <h4>Loading RanchiMall CC</h4>
</article> </article>
<article id="main_page" class="grid page hide-completely"> <article id="main_page" class="grid page hidden">
<header id="main_header"> <header id="main_header">
<div id="article_name_wrapper" class="flex gap-0-5 align-center"> <div id="article_name_wrapper" class="flex gap-0-5 align-center">
<button class="icon-only" title="Show all articles list" onclick="openPopup('article_list_popup')"> <button class="icon-only" title="Show all articles list" onclick="openPopup('article_list_popup')">
@ -155,8 +155,8 @@
</svg> </svg>
</button> </button>
<h4 id="current_article_title"></h4> <h4 id="current_article_title"></h4>
<button id="article_outline_button" class="icon-only" title="View article outline" <button id="article_outline_button" class="icon-only" title="View article plot"
onclick="toggleOutlinePanel()"> onclick="openPopup('plot_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
<g> <g>
@ -167,7 +167,7 @@
</g> </g>
</svg> </svg>
</button> </button>
<button id="filter_button" class="icon-only" title="Show filters" onclick="toggleFilterPanel()"> <button id="filter_button" class="icon-only" title="Show filters" onclick="toggleOptionsPanel()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -209,7 +209,7 @@
</menu-option> </menu-option>
</sm-menu> </sm-menu>
</div> </div>
<div id="selected_content_options" class="flex space-between hide-completely"> <div id="selected_content_options" class="flex space-between hidden">
<button onclick="clearSelection()" title="Clear selection"> <button onclick="clearSelection()" title="Clear selection">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
@ -247,7 +247,7 @@
aria-label="User profile"></button> aria-label="User profile"></button>
<theme-toggle></theme-toggle> <theme-toggle></theme-toggle>
</header> </header>
<section id="options_panel" class="flex hide-completely"> <section id="options_panel" class="flex hidden">
<div id="filter_panel" class="flex w-100 align-center gap-1 "> <div id="filter_panel" class="flex w-100 align-center gap-1 ">
<h5>Sort by</h5> <h5>Sort by</h5>
<strip-select id="sort_content_list" label="Sort by:"> <strip-select id="sort_content_list" label="Sort by:">
@ -255,12 +255,8 @@
<strip-option value="time">Most recent</strip-option> <strip-option value="time">Most recent</strip-option>
</strip-select> </strip-select>
</div> </div>
<div id="article_outline_panel" class="flex align-center gap-1 hide-completely">
<h5>Sections</h5>
<ul id="article_outline" class="flex gap-1"></ul>
</div>
</section> </section>
<div id="text_toolbar" class="hide-completely"> <div id="text_toolbar" class="hidden">
<div id="formatting_options"> <div id="formatting_options">
<button id="strong_button" title="Bold (ctrl+b)" class="formatting-button" onclick="formatDoc('bold')"> <button id="strong_button" title="Bold (ctrl+b)" class="formatting-button" onclick="formatDoc('bold')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@ -316,7 +312,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<div id="link_panel" class="hide-completely"> <div id="link_panel" class="hidden">
<sm-form style="--gap: 0.5rem"> <sm-form style="--gap: 0.5rem">
<button class="icon-only justify-self-start" onclick="toggleLinkPanel()"> <button class="icon-only justify-self-start" onclick="toggleLinkPanel()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -331,7 +327,7 @@
</div> </div>
</div> </div>
<div id="article_wrapper"></div> <div id="article_wrapper"></div>
<aside id="version_history_panel" class="flex direction-column hide-completely"> <aside id="version_history_panel" class="flex flex-direction-column hidden">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<div class="flex align-center"> <div class="flex align-center">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
@ -351,10 +347,10 @@
</svg> </svg>
</button> </button>
</div> </div>
<ul id="version_timeline" class="flex direction-column gap-1-5"></ul> <ul id="version_timeline" class="flex flex-direction-column gap-1-5"></ul>
</aside> </aside>
</article> </article>
<article id="preview_page" class="grid page hide-completely"> <article id="preview_page" class="grid page hidden">
<header class="grid gap-1 full-bleed"> <header class="grid gap-1 full-bleed">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<div class="flex gap-0-5"> <div class="flex gap-0-5">
@ -500,6 +496,29 @@
</div> </div>
</section> </section>
</sm-popup> </sm-popup>
<sm-popup id="plot_popup">
<header slot="header" class="popup__header">
<div class="flex align-center">
<button class="popup__header__close" onclick="closePopup()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</svg>
</button>
<h3>plot</h3>
</div>
</header>
<details id="plot_wrapper" class="hidden">
<summary>Plot</summary>
<div id="plot_diagram"></div>
</details>
<div class="grid gap-0-5">
<h4>Article sections</h4>
<ul id="article_outline" class="flex flex-direction-column gap-1"></ul>
</div>
</sm-popup>
<sm-popup id="contributors_popup"> <sm-popup id="contributors_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
<div class="flex align-center"> <div class="flex align-center">
@ -547,6 +566,14 @@
</div> </div>
</header> </header>
<section class="grid gap-1-5"> <section class="grid gap-1-5">
<div class="grid gap-0-5">
<h4>
BTC integrated with FLO
</h4>
<p>
You can use your FLO private key to perform transaction on BTC network within our apps ecosystem.
</p>
</div>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<h5>My FLO ID</h5> <h5>My FLO ID</h5>
<sm-copy id="user_flo_id"></sm-copy> <sm-copy id="user_flo_id"></sm-copy>
@ -600,7 +627,7 @@
<div class="content-card content-card--empty"> <div class="content-card content-card--empty">
<div class="content__area" data-type="origin" placeholder="Write something new or edit existing content" <div class="content__area" data-type="origin" placeholder="Write something new or edit existing content"
contenteditable="true"></div> contenteditable="true"></div>
<button class="submit-entry hide-completely">Submit</button> <button class="submit-entry hidden">Submit</button>
</div> </div>
<!-- <div class="content-card-container"></div> --> <!-- <div class="content-card-container"></div> -->
</section> </section>
@ -631,7 +658,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<button class="submit-entry hide-completely">Submit</button> <button class="submit-entry hidden">Submit</button>
</div> </div>
</div> </div>
</template> </template>
@ -768,7 +795,7 @@
zIndex-- zIndex--
switch (e.target.id) { switch (e.target.id) {
case 'edit_sections_popup': case 'edit_sections_popup':
getRef('section_list_container').innerHTML = '' renderElem(getRef('section_list_container'), html``)
break; break;
case 'article_list_popup': case 'article_list_popup':
renderElem(getRef('article_list'), html``) renderElem(getRef('article_list'), html``)
@ -860,7 +887,7 @@
window.addEventListener('hashchange', e => showPage(window.location.hash)) window.addEventListener('hashchange', e => showPage(window.location.hash))
window.addEventListener("load", () => { window.addEventListener("load", () => {
document.body.classList.remove('hide-completely') document.body.classList.remove('hidden')
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex) document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
@ -971,12 +998,12 @@
break; break;
case 'home': case 'home':
case 'main_page': case 'main_page':
if (!floGlobals.currentArticle.id || params.articleID !== pagesData.params.articleID) { if (!floGlobals.currentArticle.id || params.articleID !== pagesData.params.articleID || params.focusMode !== pagesData.params.focusMode) {
closePopup() closePopup()
render.article(params.articleID) render.article(params.articleID, params.focusMode === 'true')
} }
hideVersionHistory() hideVersionHistory()
window.history.replaceState('', '', `#/home?articleID=${params.articleID}`) window.history.replaceState('', '', `#/home?articleID=${params.articleID}&focusMode=${params.hasOwnProperty('focusMode') ? params.focusMode : 'true'}`)
renderElem(getRef('preview__body'), html``) renderElem(getRef('preview__body'), html``)
targetPage = 'main_page' targetPage = 'main_page'
break; break;
@ -989,8 +1016,8 @@
targetPage = 'preview_page' targetPage = 'preview_page'
break break
} }
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely')) document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
getRef(targetPage).classList.remove('hide-completely') getRef(targetPage).classList.remove('hidden')
if (pagesData.lastPage !== pageId) { if (pagesData.lastPage !== pageId) {
pagesData.lastPage = pageId pagesData.lastPage = pageId
if (!pagesData.openedPages.includes(pageId)) { if (!pagesData.openedPages.includes(pageId)) {
@ -1327,7 +1354,7 @@
function downloadHTML(string, options = {}) { function downloadHTML(string, options = {}) {
const { title } = options const { title } = options
const element = html.node`<a href="${`${`data:text/html;charset=utf-8, ${encodeURIComponent(string)}`}`}" download="${`${title ? title : 'article'}.html`}" class="hide"></a>` const element = html.node`<a href="${`${`data:text/html;charset=utf-8, ${encodeURIComponent(string)}`}`}" download="${`${title ? title : 'article'}.html`}" class="hidden"></a>`
document.body.appendChild(element); document.body.appendChild(element);
element.click(); element.click();
document.body.removeChild(element); document.body.removeChild(element);
@ -1510,7 +1537,7 @@
target.removeEventListener('paste', checkEntry) target.removeEventListener('paste', checkEntry)
const selection = window.getSelection() const selection = window.getSelection()
if (!e.relatedTarget?.closest('#text_toolbar')) { if (!e.relatedTarget?.closest('#text_toolbar')) {
getRef('text_toolbar').classList.add('hide-completely') getRef('text_toolbar').classList.add('hidden')
childObserver.disconnect() childObserver.disconnect()
activeEntry = undefined activeEntry = undefined
} }
@ -1613,25 +1640,52 @@
return scoreElement return scoreElement
} }
const render = { const render = {
article(id) { article(id, focusMode) {
floGlobals.currentArticle.id = id floGlobals.currentArticle.id = id
parseArticleData() parseArticleData()
const { title } = floGlobals.appObjects.cc.articleList[id] const { title } = floGlobals.appObjects.cc.articleList[id]
const { writer, sections } = floGlobals.currentArticle const { writer, sections } = floGlobals.currentArticle
const frag = document.createDocumentFragment() let assignedSection = localStorage.getItem(`${id}_assigned_section_${myFloID}`)
let index = 0 const sectionKeys = Object.keys(floGlobals.currentArticle.sections)
for (const sectionID in sections) { if (assignedSection === null && !floGlobals.isSubAdmin) {
frag.append(render.section(sectionID, sections[sectionID], index)) const randomIndex = floCrypto.randInt(0, sectionKeys.length - 1)
index += 1 assignedSection = sectionKeys[randomIndex]
localStorage.setItem(`${id}_assigned_section_${myFloID}`, assignedSection)
} }
getRef('current_article_title').textContent = title getRef('current_article_title').textContent = title
getRef('article_wrapper').innerHTML = '' getRef('article_wrapper').innerHTML = ''
getRef('article_wrapper').append(frag) if (!floGlobals.isSubAdmin && focusMode) {
getRef('article_wrapper').append(render.section(assignedSection, sections[assignedSection]))
getRef('article_wrapper').append(html.node`
<div id="focus_mode_panel" class="flex align-center space-between">
<div class="grid gap-0-3">
<h4>Focus mode is on</h4>
<p>
You are only seeing one section assigned to you. Turn off focus mode to see all sections.
</p>
</div>
<a id="focus_mode_button" href="${`#/home?articleID=${id}&focusMode=false`}" class="button">Turn off</a>
</div>
`)
floGlobals.focusMode = {
assignedSection,
active: true
}
} else {
const frag = document.createDocumentFragment()
for (const sectionID in sections) {
frag.append(render.section(sectionID, sections[sectionID]))
}
getRef('article_wrapper').append(frag)
floGlobals.focusMode = {
active: false
}
}
render.sectionOutline() render.sectionOutline()
}, },
articleLink(details, isDefaultArticle, ref) { articleLink(details, isDefaultArticle, ref) {
const { uid, timestamp, title } = details const { uid, timestamp, title } = details
return html.for(ref, uid)`<a class="${`article-link flex interact ${isDefaultArticle ? 'default-article' : ''}`}" title=${isDefaultArticle ? 'Actively written article' : ''} href="${`#/home?articleID=${uid}`}">${title}</a>` return html.for(ref, uid)`<a class="${`article-link flex interact ${isDefaultArticle ? 'default-article' : ''}`}" title=${isDefaultArticle ? 'Actively written article' : ''} href="${`#/home?articleID=${uid}&focusMode=true`}">${title}</a>`
}, },
contentCard(id, version = 0) { contentCard(id, version = 0) {
const { html, contributors, score = 0, vectorClock } = getIterationDetails(id) const { html, contributors, score = 0, vectorClock } = getIterationDetails(id)
@ -1716,23 +1770,31 @@
}, },
sectionCard(details) { sectionCard(details) {
const { title, id } = details const { title, id } = details
return html.node` return html`
<div class="section-card flex align-center" data-section-id="${id}"> <div class="section-card flex align-center" data-section-id="${id}">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M9,18h12v-2H9V18z M3,6v2h18V6H3z M9,13h12v-2H9V13z"/></g></svg> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M9,18h12v-2H9V18z M3,6v2h18V6H3z M9,13h12v-2H9V13z"/></g></svg>
<input placeholder="Section title" value="${title}"/> <input placeholder="Section title" value="${title}"/>
</div>` </div>`
}, },
sectionOutline() { sectionOutline() {
const frag = document.createDocumentFragment() const sections = floGlobals.appObjects[floGlobals.currentArticle.id].sections.filter(v => v).map(({ id, title }) => {
getRef('article_outline').innerHTML = '' let shouldBeDisabled = floGlobals.focusMode.active && floGlobals.focusMode.assignedSection !== id
floGlobals.appObjects[floGlobals.currentArticle.id].sections.forEach(section => { return html.for(getRef('article_outline'), id)`
frag.append(createElement('button', { <div class="flex gap-0-5 align-center">
attributes: { 'data-section-id': section.id }, <button class="outline-button" data-section-id="${id}" ?disabled=${shouldBeDisabled}>
className: 'outline-button', ${title}
textContent: section.title, </button>
})) ${shouldBeDisabled ? html`<button class="button enable-focus-button" data-section-id="${id}">Focus</button>` : ''}
</div> `
}) })
getRef('article_outline').append(frag) renderElem(getRef('article_outline'), html`${sections}`)
if (floGlobals.currentArticle.hasOwnProperty('plot')) {
getRef('plot_diagram').textContent = floGlobals.currentArticle.plot
getRef('plot_wrapper').classList.remove('hidden')
} else {
getRef('plot_wrapper').classList.add('hidden')
}
} }
} }
@ -1797,7 +1859,7 @@
const uid = contentCard.dataset.uid const uid = contentCard.dataset.uid
const isUniqueEntry = contentArea.dataset.type === 'origin' const isUniqueEntry = contentArea.dataset.type === 'origin'
if (contentArea.innerText.trim() === '') { if (contentArea.innerText.trim() === '') {
contentCard.querySelector('.submit-entry').classList.add('hide-completely') contentCard.querySelector('.submit-entry').classList.add('hidden')
} else { } else {
const cleanHTML = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'], ADD_ATTR: ['target'] }) const cleanHTML = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'], ADD_ATTR: ['target'] })
const hash = Crypto.SHA256(cleanHTML) const hash = Crypto.SHA256(cleanHTML)
@ -1808,9 +1870,9 @@
previousHash = '' previousHash = ''
} }
if (previousHash !== hash) if (previousHash !== hash)
contentCard.querySelector('.submit-entry').classList.remove('hide-completely') contentCard.querySelector('.submit-entry').classList.remove('hidden')
else else
contentCard.querySelector('.submit-entry').classList.add('hide-completely') contentCard.querySelector('.submit-entry').classList.add('hidden')
} }
}, 300) }, 300)
@ -1855,7 +1917,7 @@
.then((res) => { .then((res) => {
// Add result to general data // Add result to general data
floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][res.vectorClock] = { ...res, message: entry } floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][res.vectorClock] = { ...res, message: entry }
submitButton.classList.add('hide-completely') submitButton.classList.add('hidden')
notify('Content submitted', 'success') notify('Content submitted', 'success')
if (isUniqueEntry) { if (isUniqueEntry) {
contentArea.innerHTML = '' contentArea.innerHTML = ''
@ -2002,23 +2064,23 @@
const selectedContentSize = selectedContent.size const selectedContentSize = selectedContent.size
getRef('selected_entries_no').textContent = selectedContentSize getRef('selected_entries_no').textContent = selectedContentSize
if (selectedContentSize === 1 && !isContentSelected) { if (selectedContentSize === 1 && !isContentSelected) {
getRef('article_name_wrapper').classList.remove('hide-completely') getRef('article_name_wrapper').classList.remove('hidden')
getRef('selected_content_options').classList.add('hide-completely') getRef('selected_content_options').classList.add('hidden')
animateTo(getRef('article_name_wrapper'), slideOutLeft, animOptions) animateTo(getRef('article_name_wrapper'), slideOutLeft, animOptions)
.onfinish = () => { .onfinish = () => {
isContentSelected = true isContentSelected = true
getRef('article_name_wrapper').classList.add('hide-completely') getRef('article_name_wrapper').classList.add('hidden')
getRef('selected_content_options').classList.remove('hide-completely') getRef('selected_content_options').classList.remove('hidden')
animateTo(getRef('selected_content_options'), slideInLeft, animOptions) animateTo(getRef('selected_content_options'), slideInLeft, animOptions)
} }
} else if (selectedContent.size === 0) { } else if (selectedContent.size === 0) {
getRef('article_name_wrapper').classList.add('hide-completely') getRef('article_name_wrapper').classList.add('hidden')
getRef('selected_content_options').classList.remove('hide-completely') getRef('selected_content_options').classList.remove('hidden')
animateTo(getRef('selected_content_options'), slideOutRight, animOptions) animateTo(getRef('selected_content_options'), slideOutRight, animOptions)
.onfinish = () => { .onfinish = () => {
isContentSelected = false isContentSelected = false
getRef('article_name_wrapper').classList.remove('hide-completely') getRef('article_name_wrapper').classList.remove('hidden')
getRef('selected_content_options').classList.add('hide-completely') getRef('selected_content_options').classList.add('hidden')
animateTo(getRef('article_name_wrapper'), slideInRight, animOptions) animateTo(getRef('article_name_wrapper'), slideInRight, animOptions)
} }
} }
@ -2050,7 +2112,6 @@
} }
let currentOptionsPanel = ''
function toggleOptionsPanel(type) { function toggleOptionsPanel(type) {
const animInOptions = { const animInOptions = {
duration: 200, duration: 200,
@ -2063,8 +2124,8 @@
easing: 'ease' easing: 'ease'
} }
if (getRef('options_panel').classList.contains('hide-completely')) { if (getRef('options_panel').classList.contains('hidden')) {
getRef('options_panel').classList.remove('hide-completely') getRef('options_panel').classList.remove('hidden')
getRef('options_panel').animate(slideInDown, animInOptions) getRef('options_panel').animate(slideInDown, animInOptions)
getRef('article_wrapper').animate([ getRef('article_wrapper').animate([
{ {
@ -2073,10 +2134,10 @@
transform: 'translateY(0)' transform: 'translateY(0)'
} }
], animInOptions) ], animInOptions)
} else if (currentOptionsPanel === type) { } else {
getRef('options_panel').animate(slideOutUp, animOutOptions) getRef('options_panel').animate(slideOutUp, animOutOptions)
.onfinish = () => { .onfinish = () => {
getRef('options_panel').classList.add('hide-completely') getRef('options_panel').classList.add('hidden')
} }
getRef('article_wrapper').animate([ getRef('article_wrapper').animate([
{ {
@ -2086,27 +2147,23 @@
} }
], animOutOptions).onfinish = e => e.target.cancel() ], animOutOptions).onfinish = e => e.target.cancel()
} }
currentOptionsPanel = type
}
function toggleFilterPanel() {
getRef('filter_panel').classList.remove('hide-completely')
getRef('article_outline_panel').classList.add('hide-completely')
toggleOptionsPanel('filter')
}
function toggleOutlinePanel() {
getRef('filter_panel').classList.add('hide-completely')
getRef('article_outline_panel').classList.remove('hide-completely')
toggleOptionsPanel('outline')
} }
getRef('article_outline').addEventListener('click', e => { getRef('article_outline').addEventListener('click', e => {
if (e.target.closest('.outline-button')) { if (e.target.closest('.outline-button')) {
const sectionID = e.target.closest('.outline-button').dataset.sectionId const sectionID = e.target.closest('.outline-button').dataset.sectionId
const target = document.querySelector(`.heading[data-section-id="${sectionID}"]`) const target = document.querySelector(`.heading[data-section-id="${sectionID}"]`)
if (!target) return;
getRef('article_wrapper').scrollTo({ getRef('article_wrapper').scrollTo({
behavior: 'smooth', behavior: 'smooth',
top: target.getBoundingClientRect().top - getRef('article_wrapper').getBoundingClientRect().top + getRef('article_wrapper').scrollTop top: target.getBoundingClientRect().top - getRef('article_wrapper').getBoundingClientRect().top + getRef('article_wrapper').scrollTop
}) })
closePopup()
} else if (e.target.closest('.enable-focus-button')) {
const sectionID = e.target.closest('.enable-focus-button').dataset.sectionId
localStorage.setItem(`${floGlobals.currentArticle.id}_assigned_section_${myFloID}`, sectionID)
location.hash = `#/home?articleID=${floGlobals.currentArticle.id}&focusMode=true`
render.article(floGlobals.currentArticle.id, true)
closePopup()
} }
}) })
function transformScroll(event) { function transformScroll(event) {
@ -2121,13 +2178,9 @@
getRef('options_panel').addEventListener('wheel', transformScroll); getRef('options_panel').addEventListener('wheel', transformScroll);
const activeHeading = debounce((target) => { const activeHeading = debounce((target) => {
[...getRef('article_outline').children].forEach(elem => elem.classList.remove('outline-button--active')) getRef('article_outline').querySelectorAll('.outline-button').forEach(elem => elem.classList.remove('outline-button--active'))
target.classList.add('outline-button--active') target.classList.add('outline-button--active')
target.scrollIntoView({ behavior: "smooth", block: "end", inline: "center" }); target.scrollIntoView({ behavior: "smooth", block: "center" });
getRef('options_panel').scrollTo({
behavior: 'smooth',
left: target.getBoundingClientRect().left - getRef('options_panel').getBoundingClientRect().left + getRef('options_panel').scrollLeft - ((getRef('options_panel').getBoundingClientRect().width / 2) - target.getBoundingClientRect().width / 2)
})
}, 150) }, 150)
const headingIntersectionObserver = new IntersectionObserver(entries => { const headingIntersectionObserver = new IntersectionObserver(entries => {
@ -2181,12 +2234,11 @@
function renderSectionList() { function renderSectionList() {
if (!floGlobals.isSubAdmin) return if (!floGlobals.isSubAdmin) return
getRef('edit_article_title').value = floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title getRef('edit_article_title').value = floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title
const frag = document.createDocumentFragment() const sections = floGlobals.appObjects[floGlobals.currentArticle.id].sections.filter(v => v).map(section => {
floGlobals.appObjects[floGlobals.currentArticle.id].sections.forEach(section => { return render.sectionCard(section)
frag.append(render.sectionCard(section))
}) })
getRef('section_list_container').innerHTML = '' console.log(sections)
getRef('section_list_container').append(frag) renderElem(getRef('section_list_container'), html`${sections}`)
} }
function insertEmptySection() { function insertEmptySection() {
const emptySection = html.node` const emptySection = html.node`
@ -2244,7 +2296,7 @@
didTitlesChange = floGlobals.appObjects[floGlobals.currentArticle.id].sections.some(({ title }, index) => title !== changedSections[index].title) didTitlesChange = floGlobals.appObjects[floGlobals.currentArticle.id].sections.some(({ title }, index) => title !== changedSections[index].title)
} }
if (didAddSection || didTitlesChange) { if (didAddSection || didTitlesChange) {
floGlobals.appObjects[floGlobals.currentArticle.id].sections = changedSections floGlobals.appObjects[floGlobals.currentArticle.id].sections = changedSections.filter(v => v)
floCloudAPI.updateObjectData(floGlobals.currentArticle.id) floCloudAPI.updateObjectData(floGlobals.currentArticle.id)
.then((res) => { .then((res) => {
render.sectionOutline() render.sectionOutline()
@ -2352,7 +2404,7 @@
getRef('version_timeline').innerHTML = '' getRef('version_timeline').innerHTML = ''
getRef('version_timeline').append(frag) getRef('version_timeline').append(frag)
if (!floGlobals.versionHistory.isOpen) { if (!floGlobals.versionHistory.isOpen) {
getRef('version_history_panel').classList.remove('hide-completely') getRef('version_history_panel').classList.remove('hidden')
getRef('main_page').classList.add('active-sidebar') getRef('main_page').classList.add('active-sidebar')
floGlobals.versionHistory.isOpen = true floGlobals.versionHistory.isOpen = true
} }
@ -2360,7 +2412,7 @@
function hideVersionHistory() { function hideVersionHistory() {
if (floGlobals.versionHistory.isOpen) { if (floGlobals.versionHistory.isOpen) {
getRef('version_history_panel').classList.add('hide-completely') getRef('version_history_panel').classList.add('hidden')
getRef('version_timeline').innerHTML = '' getRef('version_timeline').innerHTML = ''
getRef('main_page').classList.remove('active-sidebar') getRef('main_page').classList.remove('active-sidebar')
floGlobals.versionHistory.isOpen = false floGlobals.versionHistory.isOpen = false
@ -2384,23 +2436,23 @@
function manageFormattingOptions() { function manageFormattingOptions() {
const selection = window.getSelection(); const selection = window.getSelection();
if (selection.isCollapsed) { if (selection.isCollapsed) {
getRef('text_toolbar').classList.add('hide-completely') getRef('text_toolbar').classList.add('hidden')
document.querySelectorAll('.formatting-button').forEach(elem => elem.classList.remove('active')) document.querySelectorAll('.formatting-button').forEach(elem => elem.classList.remove('active'))
} else { } else {
getRef('create_link_href').value = '' getRef('create_link_href').value = ''
if (isMobileView) { if (isMobileView) {
getRef('text_toolbar').classList.remove('hide-completely') getRef('text_toolbar').classList.remove('hidden')
getRef('text_toolbar').style.transform = `none` getRef('text_toolbar').style.transform = `none`
} else { } else {
const pos = selection.getRangeAt(0).getBoundingClientRect() const pos = selection.getRangeAt(0).getBoundingClientRect()
const leftOffset = pos.left + 200 < window.innerWidth ? pos.left : pos.left - 220 + window.innerWidth - pos.left const leftOffset = pos.left + 200 < window.innerWidth ? pos.left : pos.left - 220 + window.innerWidth - pos.left
const topOffeset = (pos.bottom + window.pageYOffset + 64) > window.innerHeight ? pos.top + window.pageYOffset - 56 : pos.bottom + window.pageYOffset const topOffeset = (pos.bottom + window.pageYOffset + 64) > window.innerHeight ? pos.top + window.pageYOffset - 56 : pos.bottom + window.pageYOffset
getRef('text_toolbar').style.transform = `translate(${leftOffset}px, calc(${topOffeset}px + 1rem))` getRef('text_toolbar').style.transform = `translate(${leftOffset}px, calc(${topOffeset}px + 1rem))`
getRef('text_toolbar').classList.remove('hide-completely') getRef('text_toolbar').classList.remove('hidden')
getRef('text_toolbar').style.transform = `translate(${leftOffset}px, calc(${topOffeset}px + 0.3rem))` getRef('text_toolbar').style.transform = `translate(${leftOffset}px, calc(${topOffeset}px + 0.3rem))`
} }
getRef('formatting_options').classList.remove('hide-completely') getRef('formatting_options').classList.remove('hidden')
getRef('link_panel').classList.add('hide-completely') getRef('link_panel').classList.add('hidden')
} }
} }
@ -2464,13 +2516,13 @@
} else { } else {
getRef('create_link_href').value = '' getRef('create_link_href').value = ''
} }
if (getRef('link_panel').classList.contains('hide-completely')) { if (getRef('link_panel').classList.contains('hidden')) {
currentSelection = saveSelection() currentSelection = saveSelection()
} else { } else {
} }
getRef('formatting_options').classList.toggle('hide-completely') getRef('formatting_options').classList.toggle('hidden')
getRef('link_panel').classList.toggle('hide-completely') getRef('link_panel').classList.toggle('hidden')
} }
function isLink() { function isLink() {
@ -2559,6 +2611,7 @@
floDapps.setCustomPrivKeyInput(getSignedIn) floDapps.setCustomPrivKeyInput(getSignedIn)
floDapps.launchStartUp().then(async result => { floDapps.launchStartUp().then(async result => {
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
getRef('user_flo_id').value = myFloID getRef('user_flo_id').value = myFloID
getRef('user_btc_id').value = btc_api.convert.legacy2bech(myFloID) getRef('user_btc_id').value = btc_api.convert.legacy2bech(myFloID)
renderElem(getRef('user_popup_button'), html` renderElem(getRef('user_popup_button'), html`
@ -2580,12 +2633,11 @@
isShowingFloID = false isShowingFloID = false
} }
}, 1000 * 60); }, 1000 * 60);
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
maxCardsPerSection = floGlobals.isSubAdmin ? 3 : 2 maxCardsPerSection = floGlobals.isSubAdmin ? 3 : 2
if (floGlobals.isSubAdmin) { if (floGlobals.isSubAdmin) {
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide-completely')) document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hidden'))
} else { } else {
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hide-completely')) document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hidden'))
} }
await Promise.all([ await Promise.all([
floCloudAPI.requestObjectData('cc'), floCloudAPI.requestObjectData('cc'),
@ -2708,7 +2760,7 @@
display: flex display: flex
} }
.direction-column { .flex-direction-column {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
@ -3142,7 +3194,7 @@
} }
} }
.hide-completely { .hidden {
display: none display: none
} }
</style> </style>
@ -3163,7 +3215,7 @@
<h4>RanchiMall Times</h4> <h4>RanchiMall Times</h4>
</a> </a>
<theme-toggle></theme-toggle> <theme-toggle></theme-toggle>
<button id="user_button" class="hide-completely" onclick="openPopup('user_popup')"> <button id="user_button" class="hidden" onclick="openPopup('user_popup')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -3422,7 +3474,7 @@
</button> </button>
</div> </div>
</section> </section>
<section id="sign_up" class="grid gap-1-5 hide-completely"> <section id="sign_up" class="grid gap-1-5 hidden">
<button class="justify-self-start" onclick="goToSignIn()"> <button class="justify-self-start" onclick="goToSignIn()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
@ -3623,9 +3675,9 @@
document.addEventListener('popupclosed', e => { document.addEventListener('popupclosed', e => {
switch (e.target.id) { switch (e.target.id) {
case 'sign_in_popup': case 'sign_in_popup':
getRef('sign_in').classList.remove('hide-completely') getRef('sign_in').classList.remove('hidden')
getRef('sign_in').style = '' getRef('sign_in').style = ''
getRef('sign_up').classList.add('hide-completely') getRef('sign_up').classList.add('hidden')
break break
} }
}) })
@ -3654,7 +3706,7 @@
let currentArticleID let currentArticleID
window.addEventListener("load", () => { window.addEventListener("load", () => {
currentArticleID = document.body.dataset.articleId currentArticleID = document.body.dataset.articleId
document.body.classList.remove('hide-completely') document.body.classList.remove('hidden')
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex) document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
@ -3755,8 +3807,8 @@
getRef('generated_flo_id').value = floID getRef('generated_flo_id').value = floID
getRef('generated_private_key').value = privKey getRef('generated_private_key').value = privKey
animateTo(getRef('sign_in'), slideOutLeft, animOptions).onfinish = () => { animateTo(getRef('sign_in'), slideOutLeft, animOptions).onfinish = () => {
getRef('sign_in').classList.add('hide-completely') getRef('sign_in').classList.add('hidden')
getRef('sign_up').classList.remove('hide-completely') getRef('sign_up').classList.remove('hidden')
animateTo(getRef('sign_up'), slideInLeft, animOptions) animateTo(getRef('sign_up'), slideInLeft, animOptions)
} }
} }
@ -3767,9 +3819,9 @@
ease: 'easing', ease: 'easing',
} }
animateTo(getRef('sign_up'), slideOutRight, animOptions).onfinish = () => { animateTo(getRef('sign_up'), slideOutRight, animOptions).onfinish = () => {
getRef('sign_in').classList.remove('hide-completely') getRef('sign_in').classList.remove('hidden')
animateTo(getRef('sign_in'), slideInRight, animOptions) animateTo(getRef('sign_in'), slideInRight, animOptions)
getRef('sign_up').classList.add('hide-completely') getRef('sign_up').classList.add('hidden')
} }
} }
function signOut() { function signOut() {
@ -3777,7 +3829,7 @@
.then(async (res) => { .then(async (res) => {
if (res) { if (res) {
await floDapps.clearCredentials() await floDapps.clearCredentials()
getRef('user_button').classList.add('hide-completely') getRef('user_button').classList.add('hidden')
location.reload() location.reload()
} }
}) })
@ -3830,7 +3882,7 @@
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID) floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
getRef('user_flo_id').value = myFloID getRef('user_flo_id').value = myFloID
getRef('user_button').classList.remove('hide-completely') getRef('user_button').classList.remove('hidden')
console.log(result) console.log(result)
}).catch(error => console.error(error)) }).catch(error => console.error(error))
} }
@ -4042,7 +4094,7 @@
opacity: 0 !important; opacity: 0 !important;
pointer-events: none !important; pointer-events: none !important;
} }
.hide-completely{ .hidden{
display: none; display: none;
} }
.icon { .icon {