mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
268 lines
10 KiB
Text
268 lines
10 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>
|
|
</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;">
|
|
<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 col-66">
|
|
<div id="editor"><h3>Loading...</h3></div>
|
|
</div>
|
|
<div class="col col-33 chat-col">
|
|
<div class="chat-container">
|
|
<div id="chat-box" class="chat-box">
|
|
<div class="bot-message message">
|
|
<p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites. I'm quite good at coding, but can be incorrect on general knowledge, so be sure to verify facts.</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>
|
|
</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> 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>
|