commit b72016334f3922c5177f74da729dd1c02c5c5602
parent 99dbe7c5896aa2b43998b4a16b4233e74d918841
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Thu, 11 Jun 2020 08:28:36 -0700
Implement standalone settings page.
Diffstat:
8 files changed, 298 insertions(+), 282 deletions(-)
diff --git a/Songs2Slides/routes.py b/Songs2Slides/routes.py
@@ -16,9 +16,16 @@ def index():
+# Settings page
+@app.route("/settings/", methods=["GET"])
+def settings():
+ return render_template("settings.html")
+
+
+
# Settings JSON file
@app.route("/settings.json", methods=["GET"])
-def settings():
+def settingsJSON():
return jsonify(defaultSettings)
diff --git a/Songs2Slides/static/global.css b/Songs2Slides/static/global.css
@@ -0,0 +1,31 @@
+/******** Global styles ********/
+body {
+ text-align: center;
+ font-family: Arial, Helvetica, sans-serif;
+ touch-action: manipulation;
+ margin-top: 80px;
+}
+
+h1 {
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+#header {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ background-color: #ffff50;
+}
+
+
+.container {
+ margin: auto;
+ padding: 10px;
+ background-color: #F0F0F0;
+}
+
+button {
+ height: 25px;
+}
diff --git a/Songs2Slides/static/index.css b/Songs2Slides/static/index.css
@@ -1,43 +1,13 @@
-/******** Other styles ********/
-body {
- text-align: center;
- font-family: Arial, Helvetica, sans-serif;
- touch-action: manipulation;
- margin-top: 80px;
-}
-
-h1 {
- margin-top: 15px;
- margin-bottom: 15px;
-}
-
-#header {
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- background-color: #ffff50;
-}
-
-
-.container {
- margin: auto;
- padding: 10px;
- background-color: #F0F0F0;
-}
-
-button {
- height: 25px;
-}
-
-
-
/******** Songs styles ********/
#songsContainer {
width: fit-content;
width: -moz-fit-content;
}
+h3 {
+ margin-top: 0px;
+}
+
.song {
width: fit-content;
width: -moz-fit-content;
@@ -119,32 +89,3 @@ button {
float: right;
font-size: 15px;
}
-
-
-
-/******** Settings styles ********/
-#settings {
- max-width: 300px;
- text-align: left;
- line-height: 30px;
-}
-
-h3:first-child {
- margin-top: 0px;
-}
-
-h3 {
- margin-bottom: 0px;
-}
-
-input[type="number"] {
- width: 75px;
-}
-
-#settingsFooter {
- margin-top: 15px;
-}
-
-#resetButton {
- float: right;
-}
-\ No newline at end of file
diff --git a/Songs2Slides/static/index.js b/Songs2Slides/static/index.js
@@ -5,119 +5,12 @@ setId = 0; // Next valid song id number
// Finishes setting up the page
function onLoad() {
- // Load settings
- if (localStorage.getItem("settings") == null) {
- resetSettings();
- }
- else {
- loadSettings(JSON.parse(localStorage.getItem("settings")));
- }
-
// Add song
AddSong();
}
-// Shows settings interface
-function showSettings() {
- document.getElementById("songsContainer").hidden = true;
- document.getElementById("lyricsContainer").hidden = true;
- document.getElementById("thankyou").hidden = true;
- document.getElementById("settings").hidden = false;
-}
-
-
-
-// Loads settings
-function loadSettings(settings) {
- // Parsing settings
- document.getElementById("title-slides").checked = settings["title-slides"];
- document.getElementById("lines-per-slide").value = settings["lines-per-slide"];
- document.getElementById("remove-parentheses").checked = settings["remove-parentheses"];
-
- // Slide settings
- document.getElementById("slide-width").value = settings["slide-width"];
- document.getElementById("slide-height").value = settings["slide-height"];
- document.getElementById("slide-color").value = settings["slide-color"];
-
- // Margin settings
- document.getElementById("margin-left").value = settings["margin-left"];
- document.getElementById("margin-right").value = settings["margin-right"];
- document.getElementById("margin-top").value = settings["margin-top"];
- document.getElementById("margin-bottom").value = settings["margin-bottom"];
-
- // Font settings
- document.getElementById("font-family").value = settings["font-family"];
- document.getElementById("font-size").value = settings["font-size"];
- document.getElementById("font-bold").checked = settings["font-bold"];
- document.getElementById("font-italic").checked = settings["font-italic"];
- document.getElementById("font-color").value = settings["font-color"];
-
- // Pharagraph settings
- document.getElementById("vertical-alignment").value = settings["vertical-alignment"];
- document.getElementById("line-spacing").value = settings["line-spacing"];
- document.getElementById("word-wrap").checked = settings["word-wrap"];
-}
-
-
-
-// Saves settings to local storage
-function saveSettings() {
- // Get settings
- const settings = {
- // Parsing settings
- "title-slides": document.getElementById("title-slides").checked,
- "lines-per-slide": Number(document.getElementById("lines-per-slide").value),
- "remove-parentheses": document.getElementById("remove-parentheses").checked,
-
- // Slide settings
- "slide-width": Number(document.getElementById("slide-width").value),
- "slide-height": Number(document.getElementById("slide-height").value),
- "slide-color": document.getElementById("slide-color").value,
-
- // Margin settings
- "margin-left": Number(document.getElementById("margin-left").value),
- "margin-right": Number(document.getElementById("margin-right").value),
- "margin-top": Number(document.getElementById("margin-top").value),
- "margin-bottom": Number(document.getElementById("margin-bottom").value),
-
- // Font settings
- "font-family": document.getElementById("font-family").value,
- "font-size": Number(document.getElementById("font-size").value),
- "font-bold": document.getElementById("font-bold").checked,
- "font-italic": document.getElementById("font-italic").checked,
- "font-color": document.getElementById("font-color").value,
-
- // Pharagraph settings
- "vertical-alignment": document.getElementById("vertical-alignment").value,
- "line-spacing": Number(document.getElementById("line-spacing").value),
- "word-wrap": document.getElementById("word-wrap").checked,
- }
-
- // Save settings
- localStorage.setItem("settings", JSON.stringify(settings));
-}
-
-
-
-// Resets all settings to their default values
-async function resetSettings() {
- // Send POST request
- const rawResponse = await fetch("/settings.json", {
- method: 'GET'
- });
- const json = await rawResponse.json();
-
- // Load changes
- loadSettings(json);
-
- // Save changes
- localStorage.setItem("settings", JSON.stringify(json));
-}
-
-
-
// Adds a song
function AddSong() {
// Create row
diff --git a/Songs2Slides/static/settings.css b/Songs2Slides/static/settings.css
@@ -0,0 +1,26 @@
+/******** Settings styles ********/
+#settings {
+ max-width: 300px;
+ text-align: left;
+ line-height: 30px;
+}
+
+h3:first-child {
+ margin-top: 0px;
+}
+
+h3 {
+ margin-bottom: 0px;
+}
+
+input[type="number"] {
+ width: 75px;
+}
+
+#settingsFooter {
+ margin-top: 15px;
+}
+
+#resetButton {
+ float: right;
+}
diff --git a/Songs2Slides/static/settings.js b/Songs2Slides/static/settings.js
@@ -0,0 +1,99 @@
+// Finishes setting up the page
+function onLoad() {
+ // Load settings
+ if (localStorage.getItem("settings") == null) {
+ resetSettings();
+ }
+ else {
+ loadSettings(JSON.parse(localStorage.getItem("settings")));
+ }
+}
+
+
+
+// Loads settings
+function loadSettings(settings) {
+ // Parsing settings
+ document.getElementById("title-slides").checked = settings["title-slides"];
+ document.getElementById("lines-per-slide").value = settings["lines-per-slide"];
+ document.getElementById("remove-parentheses").checked = settings["remove-parentheses"];
+
+ // Slide settings
+ document.getElementById("slide-width").value = settings["slide-width"];
+ document.getElementById("slide-height").value = settings["slide-height"];
+ document.getElementById("slide-color").value = settings["slide-color"];
+
+ // Margin settings
+ document.getElementById("margin-left").value = settings["margin-left"];
+ document.getElementById("margin-right").value = settings["margin-right"];
+ document.getElementById("margin-top").value = settings["margin-top"];
+ document.getElementById("margin-bottom").value = settings["margin-bottom"];
+
+ // Font settings
+ document.getElementById("font-family").value = settings["font-family"];
+ document.getElementById("font-size").value = settings["font-size"];
+ document.getElementById("font-bold").checked = settings["font-bold"];
+ document.getElementById("font-italic").checked = settings["font-italic"];
+ document.getElementById("font-color").value = settings["font-color"];
+
+ // Pharagraph settings
+ document.getElementById("vertical-alignment").value = settings["vertical-alignment"];
+ document.getElementById("line-spacing").value = settings["line-spacing"];
+ document.getElementById("word-wrap").checked = settings["word-wrap"];
+}
+
+
+
+// Saves settings to local storage
+function saveSettings() {
+ // Get settings
+ const settings = {
+ // Parsing settings
+ "title-slides": document.getElementById("title-slides").checked,
+ "lines-per-slide": Number(document.getElementById("lines-per-slide").value),
+ "remove-parentheses": document.getElementById("remove-parentheses").checked,
+
+ // Slide settings
+ "slide-width": Number(document.getElementById("slide-width").value),
+ "slide-height": Number(document.getElementById("slide-height").value),
+ "slide-color": document.getElementById("slide-color").value,
+
+ // Margin settings
+ "margin-left": Number(document.getElementById("margin-left").value),
+ "margin-right": Number(document.getElementById("margin-right").value),
+ "margin-top": Number(document.getElementById("margin-top").value),
+ "margin-bottom": Number(document.getElementById("margin-bottom").value),
+
+ // Font settings
+ "font-family": document.getElementById("font-family").value,
+ "font-size": Number(document.getElementById("font-size").value),
+ "font-bold": document.getElementById("font-bold").checked,
+ "font-italic": document.getElementById("font-italic").checked,
+ "font-color": document.getElementById("font-color").value,
+
+ // Pharagraph settings
+ "vertical-alignment": document.getElementById("vertical-alignment").value,
+ "line-spacing": Number(document.getElementById("line-spacing").value),
+ "word-wrap": document.getElementById("word-wrap").checked,
+ }
+
+ // Save settings
+ localStorage.setItem("settings", JSON.stringify(settings));
+}
+
+
+
+// Resets all settings to their default values
+async function resetSettings() {
+ // Send POST request
+ const rawResponse = await fetch("/settings.json", {
+ method: 'GET'
+ });
+ const json = await rawResponse.json();
+
+ // Load changes
+ loadSettings(json);
+
+ // Save changes
+ localStorage.setItem("settings", JSON.stringify(json));
+}
diff --git a/Songs2Slides/templates/index.html b/Songs2Slides/templates/index.html
@@ -4,6 +4,7 @@
<title>Songs2Slides</title>
<meta name="description" content="Quickly and easily create lyric powerpoints from a list of songs.">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}"></link>
<script src="{{ url_for('static', filename='index.js') }}"></script>
</head>
@@ -29,7 +30,7 @@
</div>
<div id="songsButtons">
- <a href="javascript:showSettings();">Settings</a>
+ <a href="/settings/">Settings</a>
<button id="reviewButton" onclick="ReviewLyrics();">Next</button>
</div>
</div>
@@ -62,114 +63,5 @@
<p>Thankyou for using Songs2Slides</p>
<p>Click <a href="javascript:Reset()">here</a> to create another PowerPoint.</p>
</div>
-
- <div id="settings" class="container" hidden>
- <h3>Parsing</h3>
- <div>
- Add title slides:
- <input type="checkbox" id="title-slides" onchange="saveSettings();"/>
- </div>
- <div>
- Default lines per slide:
- <input type="number" id="lines-per-slide" onchange="saveSettings();"/>
- </div>
- <div>
- Remove content in parentheses:
- <input type="checkbox" id="remove-parentheses" onchange="saveSettings();"/>
- </div>
-
- <h3>Slide settings</h3>
- <div>
- Width (Inches):
- <input type="number" id="slide-width" onchange="saveSettings();"/>
- </div>
- <div>
- Height (Inches):
- <input type="number" id="slide-height" onchange="saveSettings();"/>
- </div>
- <div>
- Background color:
- <input type="color" id="slide-color" onchange="saveSettings();"/>
- </div>
-
- <h3>Margin settings</h3>
- <div>
- Left (Inches):
- <input type="number" id="margin-left" onchange="saveSettings();"/>
- </div>
- <div>
- Right (Inches):
- <input type="number" id="margin-right" onchange="saveSettings();"/>
- </div>
- <div>
- Top (Inches):
- <input type="number" id="margin-top" onchange="saveSettings();"/>
- </div>
- <div>
- Bottom (Inches):
- <input type="number" id="margin-bottom" onchange="saveSettings();"/>
- </div>
-
- <h3>Font settings</h3>
- <div>
- Family:
- <input id="font-family" list="fonts" onchange="saveSettings();">
- <datalist id="fonts">
- <option>Arial</option>
- <option>Century</option>
- <option>Century Gothic</option>
- <option>Calibri</option>
- <option>Comic Sans MS</option>
- <option>Courier New</option>
- <option>Georgia</option>
- <option>Impact</option>
- <option>Rockwell</option>
- <option>Segoe UI</option>
- <option>Tahoma</option>
- <option>Times New Roman</option>
- <option>Trebuchet MS</option>
- <option>Verdana</option>
- </datalist>
- </div>
- <div>
- Size:
- <input type="number" id="font-size" onchange="saveSettings();"/>
- </div>
- <div>
- Bold:
- <input type="checkbox" id = "font-bold" onchange="saveSettings();"/>
- </div>
- <div>
- Italic:
- <input type="checkbox" id="font-italic" onchange="saveSettings();"/>
- </div>
- <div>
- Color:
- <input type="color" id="font-color" onchange="saveSettings();"/>
- </div>
-
- <h3>Pharagraph settings</h3>
- <div>
- Vertical Alignment:
- <select id="vertical-alignment" onchange="saveSettings();">
- <option>Top</option>
- <option>Middle</option>
- <option>Bottom</option>
- </select>
- </div>
- <div>
- Line spacing:
- <input type="number" id="line-spacing" onchange="saveSettings();"/>
- </div>
- <div>
- Word wrap:
- <input type="checkbox" id="word-wrap" onchange="saveSettings();"/>
- </div>
-
- <div id="settingsFooter">
- <a href="javascript:Back();">Back</a>
- <button id="resetButton" onclick="resetSettings();">Reset</button>
- </div>
- </div>
</body>
</html>
\ No newline at end of file
diff --git a/Songs2Slides/templates/settings.html b/Songs2Slides/templates/settings.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Songs2Slides</title>
+ <meta name="description" content="Quickly and easily create lyric powerpoints from a list of songs.">
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
+ <link rel="stylesheet" href="{{ url_for('static', filename='settings.css') }}"></link>
+ <script src="{{ url_for('static', filename='settings.js') }}"></script>
+ </head>
+ <body onload="onLoad();">
+ <div id="header">
+ <h1>Songs2Slides</h1>
+ </div>
+
+ <h2>Settings</h2>
+
+ <div id="settings" class="container">
+ <h3>Parsing</h3>
+ <div>
+ Add title slides:
+ <input type="checkbox" id="title-slides" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Default lines per slide:
+ <input type="number" id="lines-per-slide" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Remove content in parentheses:
+ <input type="checkbox" id="remove-parentheses" onchange="saveSettings();"/>
+ </div>
+
+ <h3>Slide settings</h3>
+ <div>
+ Width (Inches):
+ <input type="number" id="slide-width" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Height (Inches):
+ <input type="number" id="slide-height" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Background color:
+ <input type="color" id="slide-color" onchange="saveSettings();"/>
+ </div>
+
+ <h3>Margin settings</h3>
+ <div>
+ Left (Inches):
+ <input type="number" id="margin-left" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Right (Inches):
+ <input type="number" id="margin-right" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Top (Inches):
+ <input type="number" id="margin-top" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Bottom (Inches):
+ <input type="number" id="margin-bottom" onchange="saveSettings();"/>
+ </div>
+
+ <h3>Font settings</h3>
+ <div>
+ Family:
+ <input id="font-family" list="fonts" onchange="saveSettings();">
+ <datalist id="fonts">
+ <option>Arial</option>
+ <option>Century</option>
+ <option>Century Gothic</option>
+ <option>Calibri</option>
+ <option>Comic Sans MS</option>
+ <option>Courier New</option>
+ <option>Georgia</option>
+ <option>Impact</option>
+ <option>Rockwell</option>
+ <option>Segoe UI</option>
+ <option>Tahoma</option>
+ <option>Times New Roman</option>
+ <option>Trebuchet MS</option>
+ <option>Verdana</option>
+ </datalist>
+ </div>
+ <div>
+ Size:
+ <input type="number" id="font-size" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Bold:
+ <input type="checkbox" id = "font-bold" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Italic:
+ <input type="checkbox" id="font-italic" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Color:
+ <input type="color" id="font-color" onchange="saveSettings();"/>
+ </div>
+
+ <h3>Pharagraph settings</h3>
+ <div>
+ Vertical Alignment:
+ <select id="vertical-alignment" onchange="saveSettings();">
+ <option>Top</option>
+ <option>Middle</option>
+ <option>Bottom</option>
+ </select>
+ </div>
+ <div>
+ Line spacing:
+ <input type="number" id="line-spacing" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Word wrap:
+ <input type="checkbox" id="word-wrap" onchange="saveSettings();"/>
+ </div>
+
+ <div id="settingsFooter">
+ <a href="../">Back</a>
+ <button id="resetButton" onclick="resetSettings();">Reset</button>
+ </div>
+ </div>
+ </body>
+</html>
+\ No newline at end of file
