neocities/views/site_files/text_editor.erb
2024-03-27 21:58:23 -05:00

271 lines
11 KiB
Text

<style>
html {
overflow-y: hidden;
}
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.theme-Code{
float:right;
position:relative;
top:-50px;
}
.page {
background: #1D1F21;
position: fixed;
height: 100%;
}
.footer-Base {
display: none;
}
</style>
<div class="header-Outro editor">
<div class="row content">
<div class="breadcrumbs">
<a href="/dashboard"><strong>Dashboard</strong></a> >
<span class="filename">
<% dir_array = Pathname(@filename).dirname.to_s.split '/' %>
<% dir_array = [] if dir_array == ['.'] %>
<% dir_array.each_with_index do |dir,i| %><a href="/dashboard?dir=<%= Rack::Utils.escape dir_array[0..i].join('/') %>"><%= dir %></a> / <% end %><%= Pathname(@filename).basename %>
</span>
</div>
<div class="tools">
<div class="theme">
Theme:
<select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/cloud_editor">Cloud Editor</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">I-Plastic</option>
<option value="ace/theme/katzenmilch">Katzen Milch</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/sqlserver">SQL Server</option>
<option value="ace/theme/textmate">Text Mate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/cloud_editor_dark">Cloud Editor Dark</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/dracula">Dracula</option>
<option value="ace/theme/github_dark">GitHub Dark</option>
<option value="ace/theme/gob">Green on Black</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">Idle Fingers</option>
<option value="ace/theme/kr_theme">KR Theme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/nord_dark">Nord Dark</option>
<option value="ace/theme/one_dark">One Dark</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/sunburst" selected>Sunburst</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>
</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 == '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>
</span>
<!-- <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a> -->
<div id="editorUpdates" class="tooltip fade bottom in hidden" style="top: 90px;right: 12.5em;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<span></span>
</div>
</div>
</div>
</div>
</div>
<script src="/js/purify.min.js"></script>
<script src="/js/marked.min.js"></script>
<script src="/js/sse.min.js"></script>
<script src="/js/chat.js"></script>
<div class="row editor">
<div class="col left-col" style="width: 66%;">
<div id="editor"><h3>Loading...</h3></div>
</div>
<div class="col right-col chat-container" style="width: 33%;">
<div class="resize-handle"></div>
<div id="chat-box" class="chat-box">
<div class="bot-message message">
<img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;">
<p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites.</p>
<p>I'm good at coding but can be wrong on general knowledge, <strong>so be sure to verify facts I give you</strong>.</p>
<p>How can I help you today?</p>
</div>
</div>
<div id="chat-form">
<form>
<input name="csrf_token" value="<%= csrf_token %>" type="hidden">
<input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
<button type="submit" class="btn-Action">Send</button>
</form>
</div>
</div>
</div>
</div>
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var unsavedChanges = false
function setTheme(name) {
var editorTheme = $('#theme option:selected')
editor.setTheme(editorTheme.val())
$.post('/site/<%= current_site.username %>/set_editor_theme', {
csrf_token: '<%= csrf_token %>',
editor_theme: editorTheme.text()
})
}
<% if current_site.editor_theme %>
$('#theme option').filter(function() {
return ($(this).text() == '<%= current_site.editor_theme %>')
}).prop('selected', true)
<% end %>
function saveTextFile(quit) {
if(unsavedChanges == false)
return
var formData = new FormData();
var fileContent = editor.getValue();
formData.append('<%= escape_javascript @filename %>', new File([fileContent], '<%= escape_javascript @filename %>', { type: 'text/html' }));
formData.append('csrf_token', '<%= escape_javascript csrf_token %>');
formData.append('username', '<%= escape_javascript current_site.username %>');
$.ajax({
url: '/api/upload',
data: formData,
processData: false,
contentType: false,
type: 'POST',
error: function(jqXHR, textStatus, errorThrown) {
var errorMessage = 'There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!'
if(jqXHR.responseText) {
try {
// Attempt to parse the JSON responseText to get the error message
var parsedResponse = JSON.parse(jqXHR.responseText);
errorMessage += ' ERROR MESSAGE: ' + parsedResponse.message;
} catch (error) {
}
}
$('#saveButton').tooltip('show')
$('#editorUpdates span').text(errorMessage)
$('#editorUpdates').fadeIn()
$('#editorUpdates').removeClass('hidden')
},
success: function(response, textStatus, xhr){
console.log(xhr.status)
if(xhr.status == 200) {
unsavedChanges = false
if(quit === true) {
window.location = '/dashboard'
} else {
$('#editorUpdates span').html('<i class="fa fa-check"></i>&nbsp;&nbsp;Your file has been saved.')
$('a#saveButton,a#saveAndExitButton').css('opacity', 0.5)
setTimeout(function() {
$('#editorUpdates').fadeOut(); //.addClass('hidden');
}, 2000)
}
} else {
$('#saveButton').tooltip('show')
$('#editorUpdates span').text(response)
}
$('#editorUpdates').fadeIn()
$('#editorUpdates').removeClass('hidden')
}
})
}
var editor = {}
$(document).ready(function() {
$.ajax({
url: "/site_files/download/<%= Addressable::URI.parse(@filename).normalized_path.to_s %>",
cache: false,
success: function(resp) {
editor = ace.edit("editor")
setTheme()
<% if @ace_mode %>
editor.getSession().setMode("ace/mode/<%= @ace_mode %>")
<% end %>
editor.getSession().setTabSize(2)
editor.getSession().setUseWrapMode(true)
editor.setFontSize(14)
editor.setShowPrintMargin(false)
editor.setOptions({
maxLines: Infinity,
autoScrollEditorIntoView: true
})
// Disable autocomplete
editor.setBehavioursEnabled(false)
editor.setValue(resp, -1)
editor.getSession().setUndoManager(new ace.UndoManager())
editor.on('change', function(obj) {
$('a#saveButton,a#saveAndExitButton').css('opacity', 1)
unsavedChanges = true
})
editor.commands.addCommand({
name: 'saveCommand',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
saveTextFile(false)
}
})
}
});
});
window.onbeforeunload = function() {
if(unsavedChanges == true)
return "You have unsaved changes!"
}
$('a#saveButton,a#saveAndExitButton').click(function() {
if(!unsavedChanges)
return false
return true
})
</script>