mirror of
https://github.com/neocities/neocities.git
synced 2025-04-28 11:12:30 +02:00
Merge 3650a43802 into 0c2132fe5e
This commit is contained in:
Lance Borden
GitHub
commit
082372a09f
4 changed files with 80 additions and 56 deletions
|
|
@ -169,58 +169,6 @@ Maintain a friendly, patient, supportive tone. Prioritize the user's learning an
|
|||
});
|
||||
}
|
||||
|
||||
// Resize chat box
|
||||
const handle = document.querySelector('.resize-handle');
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
const rightCol = document.querySelector('.right-col');
|
||||
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;
|
||||
let startX = e.pageX;
|
||||
let initialLeftColWidth = leftCol.offsetWidth; // Capture the initial width when resizing starts
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (!isResizing) return;
|
||||
const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
|
||||
let moveX = e.pageX - startX;
|
||||
let leftColWidth = initialLeftColWidth + moveX; // Use the initial width for relative adjustments
|
||||
|
||||
// Convert to percentage
|
||||
let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
|
||||
let rightColPercentage = 100 - leftColPercentage;
|
||||
|
||||
// Check and enforce the minimum and maximum widths
|
||||
if (rightColPercentage < 20) { // Minimum 20% for right column
|
||||
rightColPercentage = 20;
|
||||
leftColPercentage = 80;
|
||||
} else if (rightColPercentage > 80) { // Maximum 80% for right column
|
||||
rightColPercentage = 80;
|
||||
leftColPercentage = 20;
|
||||
}
|
||||
|
||||
// Apply the new widths
|
||||
leftCol.style.width = `${leftColPercentage}%`;
|
||||
rightCol.style.width = `${rightColPercentage}%`;
|
||||
localStorage.setItem('leftColPct', `${leftColPercentage}%`);
|
||||
localStorage.setItem('rightColPct', `${rightColPercentage}%`);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
isResizing = false;
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
});
|
||||
|
||||
function toggleChat() {
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
const rightCol = document.querySelector('.right-col');
|
||||
|
|
|
|||
65
public/js/preview.js
Normal file
65
public/js/preview.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const handle = document.querySelector('.resize-handle');
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
const rightCol = document.querySelector('.right-col');
|
||||
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;
|
||||
let startX = e.pageX;
|
||||
let initialLeftColWidth = leftCol.offsetWidth; // Capture the initial width when resizing starts
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (!isResizing) return;
|
||||
const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
|
||||
let moveX = e.pageX - startX;
|
||||
let leftColWidth = initialLeftColWidth + moveX; // Use the initial width for relative adjustments
|
||||
|
||||
// Convert to percentage
|
||||
let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
|
||||
let rightColPercentage = 100 - leftColPercentage;
|
||||
|
||||
// Check and enforce the minimum and maximum widths
|
||||
if (rightColPercentage < 20) { // Minimum 20% for right column
|
||||
rightColPercentage = 20;
|
||||
leftColPercentage = 80;
|
||||
} else if (rightColPercentage > 80) { // Maximum 80% for right column
|
||||
rightColPercentage = 80;
|
||||
leftColPercentage = 20;
|
||||
}
|
||||
|
||||
// Apply the new widths
|
||||
leftCol.style.width = `${leftColPercentage}%`;
|
||||
rightCol.style.width = `${rightColPercentage}%`;
|
||||
localStorage.setItem('leftColPct', `${leftColPercentage}%`);
|
||||
localStorage.setItem('rightColPct', `${rightColPercentage}%`);
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
isResizing = false;
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
});
|
||||
});
|
||||
|
||||
function togglePreview() {
|
||||
const leftCol = document.querySelector('.left-col');
|
||||
var preview = document.getElementById('preview');
|
||||
|
||||
if (preview.style.display === 'none' || preview.style.display === '') {
|
||||
preview.style.display = 'block';
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
leftCol.style.width = `100%`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +115,8 @@
|
|||
</div>
|
||||
<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 %>" target="_blank"><i class="fa fa-globe"></i> View</a>
|
||||
<a id="previewButton" class="btn-Action" href="#" onclick="togglePreview();"><span><i class="fa fa-eye"></i></span>Preview</a>
|
||||
<a class="btn-Action" href="<%= current_site.uri @filename %>" target="_blank"><i class="fa fa-globe"></i> Open</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><!-- <% if current_site.supporter? %><a class="btn-Action" id="chatButton"><i class="fa fa-comments"></i> Penelope <span style="font-size: 8pt">(beta)</span></a><% end %> -->
|
||||
<a id="settingsButton" class="btn-Action" href="#settings" data-toggle="modal"><i class="fa fa-gear"></i> Settings</a>
|
||||
</span>
|
||||
|
|
@ -138,10 +139,18 @@
|
|||
<script src="/js/chat.js"></script>
|
||||
<% end %>
|
||||
-->
|
||||
|
||||
<script src="/js/preview.js"></script>
|
||||
|
||||
<div class="row editor">
|
||||
<div class="col left-col" style="display: <% current_site.supporter? ? 'none' : 'block' %>; margin-left: 20px;">
|
||||
<div id="editor"><h3>Loading...</h3></div>
|
||||
</div>
|
||||
<div id="preview" class="col right-col chat-container" style="display:none;">
|
||||
<div class="resize-handle"></div>
|
||||
<iframe id="previewFrame" src="<%= current_site.uri @filename %>" width="100%" height="100%" style="background: white"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="col right-col chat-container" style="display: none">
|
||||
<div class="resize-handle"></div>
|
||||
<div id="chat-box" class="chat-box">
|
||||
|
|
@ -301,6 +310,8 @@
|
|||
|
||||
}
|
||||
})
|
||||
var iframe = document.getElementById('previewFrame');
|
||||
iframe.contentWindow.location.href = iframe.src;
|
||||
}
|
||||
|
||||
var editor = {}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue