Skip to content

Commit

Permalink
Check dirty state + Enhance load vs. change actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@fdodino
fdodino committed Oct 12, 2024
1 parent a09830c commit 63ada0b
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 121 deletions.
Binary file added public/repl/synced.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/repl/unsynced.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/repl/zoom_in.png
View file
Binary file not shown.
Binary file removed public/repl/zoom_out.png
View file
Binary file not shown.
285 changes: 164 additions & 121 deletions src/content/components/landing-page/repl/replEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,65 +48,6 @@

<body onload="loadFile()">

<div class="file">
<div class="toolbar">
<img class="menu_option" src="/repl/zoom-in.png" title="Agrandar la letra" onclick="zoomInFont()" />
<img class="menu_option" src="/repl/zoom-out.png" title="Achicar la letra" onclick="zoomOutFont()" />
<img class="menu_option" src="/repl/save.png" title="Guardar" onclick="saveFile()" />
<select id="theme" class="theme" onchange="changeTheme()" title="Cambiar tema del editor">
<option value="ambiance">Ambiance</option>
<option value="chaos">Chaos</option>
<option value="chrome">Chrome</option>
<option value="cloud9_day">Cloud9 Day</option>
<option value="cloud9_night">Cloud9 Night</option>
<option value="cloud9_night_low_color">Cloud9 Night Low Color</option>
<option value="cloud_editor_dark">Cloud Editor Dark</option>
<option value="cloud_editor">Cloud Editor</option>
<option value="clouds">Clouds</option>
<option value="clouds_midnight">Clouds Midnight</option>
<option value="cobalt">Cobalt</option>
<option value="crimson_editor">Crimson Editor</option>
<option value="dawn">Dawn</option>
<option value="dracula">Dracula</option>
<option value="dreamweaver">Dreamweaver</option>
<option value="eclipse">Eclipse</option>
<option value="github_dark">Github Dark</option>
<option value="github">Github</option>
<option value="github_light_default">Github Light Default</option>
<option value="gob">Gob</option>
<option value="gruvbox_dark_hard">Gruvbox Dark Hard</option>
<option value="gruvbox">Gruvbox</option>
<option value="gruvbox_light_hard">Gruvbox Light Hard</option>
<option value="idle_fingers">Idle Fingers</option>
<option value="iplastic">Iplastic</option>
<option value="katzenmilch">Katzenmilch</option>
<option value="kr_theme">Kr Theme</option>
<option value="kuroir">Kuroir</option>
<option value="merbivore">Merbivore</option>
<option value="merbivore_soft">Merbivore Soft</option>
<option value="mono_industrial">Mono Industrial</option>
<option value="monokai">Monokai</option>
<option value="nord_dark">Nord Dark</option>
<option value="one_dark">One Dark</option>
<option value="pastel_on_dark">Pastel on Dark</option>
<option value="solarized_dark">Solarized Dark</option>
<option value="solarized_light">Solarized Light</option>
<option value="sqlserver">SQL Server</option>
<option value="terminal">Terminal</option>
<option value="textmate">Textmate</option>
<option value="tomorrow">Tomorrow</option>
<option value="tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="tomorrow_night_eighties">Tomorrow Night '80s</option>
<option value="tomorrow_night">Tomorrow Night</option>
<option value="twilight">Twilight</option>
<option value="vibrant_ink">Vibrant Ink</option>
<option value="xcode">Xcode</option>
</select>
</div>
<div id="editor" style="margin: 0.5rem; height: 35rem; border: 1px solid gray;"></div>
</div>

<!-- ace 1.36.2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/ext-beautify.js"></script>
Expand Down Expand Up @@ -187,6 +128,66 @@

<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>

<div class="file">
<div class="toolbar">
<img class="menu_option" src="/repl/zoom-in.png" title="Agrandar la letra" onclick="zoomInFont()" />
<img class="menu_option" src="/repl/zoom-out.png" title="Achicar la letra" onclick="zoomOutFont()" />
<select id="theme" class="theme" onchange="changeTheme()" title="Cambiar tema del editor">
<option value="ambiance">Ambiance</option>
<option value="chaos">Chaos</option>
<option value="chrome">Chrome</option>
<option value="cloud9_day">Cloud9 Day</option>
<option value="cloud9_night">Cloud9 Night</option>
<option value="cloud9_night_low_color">Cloud9 Night Low Color</option>
<option value="cloud_editor_dark">Cloud Editor Dark</option>
<option value="cloud_editor">Cloud Editor</option>
<option value="clouds">Clouds</option>
<option value="clouds_midnight">Clouds Midnight</option>
<option value="cobalt">Cobalt</option>
<option value="crimson_editor">Crimson Editor</option>
<option value="dawn">Dawn</option>
<option value="dracula">Dracula</option>
<option value="dreamweaver">Dreamweaver</option>
<option value="eclipse">Eclipse</option>
<option value="github_dark">Github Dark</option>
<option value="github">Github</option>
<option value="github_light_default">Github Light Default</option>
<option value="gob">Gob</option>
<option value="gruvbox_dark_hard">Gruvbox Dark Hard</option>
<option value="gruvbox">Gruvbox</option>
<option value="gruvbox_light_hard">Gruvbox Light Hard</option>
<option value="idle_fingers">Idle Fingers</option>
<option value="iplastic">Iplastic</option>
<option value="katzenmilch">Katzenmilch</option>
<option value="kr_theme">Kr Theme</option>
<option value="kuroir">Kuroir</option>
<option value="merbivore">Merbivore</option>
<option value="merbivore_soft">Merbivore Soft</option>
<option value="mono_industrial">Mono Industrial</option>
<option value="monokai">Monokai</option>
<option value="nord_dark">Nord Dark</option>
<option value="one_dark">One Dark</option>
<option value="pastel_on_dark">Pastel on Dark</option>
<option value="solarized_dark">Solarized Dark</option>
<option value="solarized_light">Solarized Light</option>
<option value="sqlserver">SQL Server</option>
<option value="terminal">Terminal</option>
<option value="textmate">Textmate</option>
<option value="tomorrow">Tomorrow</option>
<option value="tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="tomorrow_night_eighties">Tomorrow Night '80s</option>
<option value="tomorrow_night">Tomorrow Night</option>
<option value="twilight">Twilight</option>
<option value="vibrant_ink">Vibrant Ink</option>
<option value="xcode">Xcode</option>
</select>
<img class="menu_option" id="editor_synced"/>
<img class="menu_option" src="/repl/save.png" title="Guardar" onclick="saveFile()" />
</div>
<div id="editor" style="margin: 0.5rem; height: 35rem; border: 1px solid gray;"></div>
</div>

<script>
const EDITOR_FILE = 'wollok-editor-file'
const EDITOR_THEME = 'wollok-editor-theme'
Expand All @@ -203,6 +204,28 @@
],
})

/*****************************************************************************************
* UTILS
****************************************************************************************/
const getEditorContent = () => editor.getValue()

const showError = (error) => {
editor.session.setAnnotations(
[
{
row: Math.max(0, editor.session.getLength() - 1),
column: 0,
text: error,
type: 'error',
}
]
)
}

/*****************************************************************************************
* CHANGES
****************************************************************************************/

const changeFont = () => {
editor.setOptions({
fontSize: `${fontSize}pt`
Expand All @@ -215,24 +238,99 @@
localStorage.setItem(EDITOR_THEME, theme)
}

const changeMode = () => {
const darkMode = document.getElementsByTagName('html')[0].dataset.theme == 'dark'
const debounce = (callback, wait) => {
let timerId
return (...args) => {
clearTimeout(timerId)
timerId = setTimeout(() => {
callback(...args)
}, wait)
};
}

/*****************************************************************************************
* INITIALIZATION
****************************************************************************************/

const loadTheme = () => {
if (!localStorage.getItem(EDITOR_THEME)) {
localStorage.setItem(EDITOR_THEME, defaultTheme())
}
const theme = localStorage.getItem(EDITOR_THEME)
editor.setTheme(`ace/theme/${theme}`)
const cbTheme = document.getElementById('theme')
const defaultTheme = darkMode ? 'gruvbox' : 'cloud9_day'
cbTheme.value = localStorage.getItem(EDITOR_THEME)
cbTheme.value = theme
}

const defaultFile = () => `// podemos definir objetos...
object pepita {
// ...que tienen atributos (referencias)
var energia = 100
// hay métodos que cambian el estado interno de un objeto
method comer(comida) {
energia += comida.energia()
}
// y métodos que calculan valores
method estaCansada() = energia < 40
}
// además de los objetos, existen las clases
class Semilla {
// los atributos se pueden definir como properties
// para generar automáticamente getters y setters
var property energia = 10
}`

const loadFile = () => {
if (!localStorage.getItem(EDITOR_FILE)) {
localStorage.setItem(EDITOR_FILE, defaultFile())
}
editor.setValue(localStorage.getItem(EDITOR_FILE), -1)
}

const defaultTheme = () => {
const darkMode = document.getElementsByTagName('html')[0].dataset.theme == 'dark'
return darkMode ? 'gruvbox' : 'cloud9_day'
}

const loadSyncedImage = () => {
const imgSynced = document.getElementById('editor_synced')
imgSynced.src = synced ? '/repl/synced.png' : '/repl/unsynced.png'
imgSynced.title = synced ? 'El editor está actualizado' : 'El editor tiene cambios pendientes sin guardar'
}

let fontSize = 13
let editor = ace.edit("editor")
changeMode()
changeTheme()
let synced = true
let firstTime = true
loadSyncedImage()
loadTheme()
editor.session.setOptions({
mode: 'ace/mode/wollok',
tabSize: 2,
useSoftTabs: true,
})

editor.on('change', debounce(() => {
document.getElementById('validateEditor').click()
if (firstTime) {
firstTime = false
} else {
synced = false
loadSyncedImage()
}
}, 2000))

changeFont()

/*****************************************************************************************
* TOOLBAR ACTIONS
****************************************************************************************/

const zoomInFont = () => {
fontSize++
changeFont()
Expand All @@ -243,34 +341,6 @@
changeFont()
}

const defaultFile = () => `// podemos definir objetos...
object pepita {
// ...que tienen atributos (referencias)
var energia = 100
// hay métodos que cambian el estado interno de un objeto
method comer(comida) {
energia += comida.energia()
}
// y métodos que calculan valores
method estaCansada() = energia < 40
}
// además de los objetos, existen las clases
class Semilla {
// los atributos se pueden definir como properties
// para generar automáticamente getters y setters
var property energia = 10
}`

const loadFile = () => {
editor.setValue(localStorage.getItem(EDITOR_FILE) ?? defaultFile(), -1)
editor.scrollToLine(1)
}

const saveFile = () => {
localStorage.setItem(EDITOR_FILE, getEditorContent())
notifier.success('File saved!')
Expand All @@ -280,35 +350,8 @@
editor.getSession().setAnnotations(problems)
}

const showError = (error) => {
editor.session.setAnnotations(
[
{
row: Math.max(0, editor.session.getLength() - 1),
column: 0,
text: error,
type: 'error',
}
]
)
}

const getEditorContent = () => editor.getValue()

const debounce = (callback, wait) => {
let timerId
return (...args) => {
clearTimeout(timerId)
timerId = setTimeout(() => {
callback(...args)
}, wait)
};
}

editor.on('change', debounce(() => {
document.getElementById('validateEditor').click()
}, 2000))
</script>

</body>

</html>

0 comments on commit 63ada0b

Please sign in to comment.