mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
chat: size and enabled/disabled retention
This commit is contained in:
Kyle Drake
parent
2b2954b0fd
commit
bf4d43067d
3 changed files with 104 additions and 31 deletions
|
|
@ -170,6 +170,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const editorRow = document.querySelector('.row.editor');
|
||||
let isResizing = false;
|
||||
|
||||
if(!localStorage.getItem('leftColPct')) localStorage.setItem('leftColPct', '70%')
|
||||
if(!localStorage.getItem('rightColPct')) localStorage.setItem('rightColPct', '30%')
|
||||
|
||||
handle.addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
isResizing = true;
|
||||
|
|
@ -197,6 +200,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
// Apply the new widths
|
||||
leftCol.style.width = `${leftColPercentage}%`;
|
||||
rightCol.style.width = `${rightColPercentage}%`;
|
||||
localStorage.setItem('leftColPct', leftCol.style.width)
|
||||
localStorage.setItem('rightColPct', rightCol.style.width)
|
||||
startX = e.pageX;
|
||||
}
|
||||
|
||||
|
|
@ -209,4 +214,74 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
});
|
||||
|
||||
function toggleChat() {
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
const rightCol = document.querySelector('.right-col');
|
||||
let chatContainer = document.getElementsByClassName('chat-container')[0];
|
||||
|
||||
var chatEnabled = localStorage.getItem('chatEnabled');
|
||||
if (chatEnabled === 'true') {
|
||||
leftCol.style.width = localStorage.getItem('leftColPct') || '70%';
|
||||
rightCol.style.width = localStorage.getItem('rightColPct') || '30%';
|
||||
chatContainer.style.display = '';
|
||||
} else {
|
||||
rightCol.style.width = '0%';
|
||||
leftCol.style.width = '100%';
|
||||
chatContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('chatButton').addEventListener('click', function(e) {
|
||||
e.preventDefault()
|
||||
var chatEnabled = localStorage.getItem('chatEnabled');
|
||||
if(chatEnabled === 'true' || chatEnabled === null) {
|
||||
localStorage.setItem('chatEnabled', 'false');
|
||||
} else {
|
||||
localStorage.setItem('chatEnabled', 'true');
|
||||
}
|
||||
|
||||
toggleChat()
|
||||
});
|
||||
|
||||
toggleChat()
|
||||
|
||||
if(localStorage.getItem('chatEnabled') !== 'false') {
|
||||
leftCol.style.width = localStorage.getItem('leftColPct');
|
||||
rightCol.style.width = localStorage.getItem('rightColPct');
|
||||
rightCol.style.display = '';
|
||||
}
|
||||
|
||||
leftCol.style.display = '';
|
||||
|
||||
/*
|
||||
|
||||
localStorage.removeItem("leftColPct");
|
||||
localStorage.removeItem("rightColPct");
|
||||
localStorage.removeItem("chatEnabled");
|
||||
|
||||
function toggleChat() {
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
const rightCol = document.querySelector('.right-col');
|
||||
let chatContainer = document.getElementsByClassName('chat-container')[0]
|
||||
|
||||
if(localStorage)
|
||||
|
||||
if(rightCol.style.width == '0%') {
|
||||
rightCol.style.width = '30%';
|
||||
leftCol.style.width = '70%';
|
||||
chatContainer.style.display = ''
|
||||
} else {
|
||||
rightCol.style.width = '0%';
|
||||
leftCol.style.width = '100%';
|
||||
chatContainer.style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
chatButton.addEventListener('click', function(e) {
|
||||
e.preventDefault()
|
||||
toggleChat()
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
|
@ -2148,6 +2148,32 @@ a.tag:hover {
|
|||
.row.editor {
|
||||
display: flex;
|
||||
height: calc(100vh - 105px);
|
||||
/* Width and background of the scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* Background of the scrollbar track */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #1d1f21;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar thumb (the part you drag) */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #CCC;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar thumb when hovering */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #B5B5B5;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar corner */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
.header-Outro.with-columns.press .col {
|
||||
padding: 25px 40px 15px 40px;
|
||||
|
|
@ -2268,34 +2294,6 @@ pre, code {
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
/* Width and background of the scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* Background of the scrollbar track */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #1d1f21;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar thumb (the part you drag) */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #CCC;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar thumb when hovering */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #B5B5B5;
|
||||
}
|
||||
|
||||
/* Style of the scrollbar corner */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.left-col {
|
||||
padding: 1rem;
|
||||
overflow-y: scroll;
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
<a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><span class="hide-on-mobile"><i class="fa fa-save"></i></span>Save</a>
|
||||
<span class="hide-on-mobile">
|
||||
<a class="btn-Action" href="<%= current_site.uri %>/<%= @filename == 'index.html' ? '' : @filename %>" target="_blank"><i class="fa fa-globe"></i> View</a>
|
||||
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt"></i> Share</a> <a href="#" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom"><i class="fa fa-comments"></i> Penelope</a>
|
||||
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt chat-button"></i> Share</a> <a class="btn-Action" id="chatButton"><i class="fa fa-comments"></i> Chat</a>
|
||||
</span>
|
||||
<!-- <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i> Save and Exit</a> -->
|
||||
<div id="editorUpdates" class="tooltip fade bottom in hidden" style="top: 90px;right: 12.5em;">
|
||||
|
|
@ -111,10 +111,10 @@
|
|||
|
||||
|
||||
<div class="row editor">
|
||||
<div class="col left-col" style="width: 70%;">
|
||||
<div class="col left-col" style="display: none">
|
||||
<div id="editor"><h3>Loading...</h3></div>
|
||||
</div>
|
||||
<div class="col right-col chat-container" style="width: 30%;">
|
||||
<div class="col right-col chat-container" style="display: none">
|
||||
<div class="resize-handle"></div>
|
||||
<div id="chat-box" class="chat-box">
|
||||
<div class="bot-message message">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue