Theme Select #8

HE-Arc · Nov 20, 2019 · 6dc0665 · 6dc0665
1 parent c323028
commit 6dc0665
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 
 # temp
 audio
+TestData
diff --git a/app/css/app.css b/app/css/app.css
@@ -0,0 +1,10 @@
+
+input {
+    color: #fff;
+}
+.input-field {
+    margin: 0;
+}
+form .col {
+    margin: 10px 0;
+}
diff --git a/app/index.html b/app/index.html
@@ -8,44 +8,66 @@
 
         <!-- STYLES -->
         <link rel="stylesheet" href="css/materialize.min.css">
+        <link rel="stylesheet" href="css/app.css">
 
     </head>
-    <body>
+    <body class="blue-grey darken-4 white-text">
         <div class="container">
             <div class="center">
                 <h1>PWA Playlist Generator</h1>
 
                 <section id="pwa-generator">
 
                     <form id="form-pwa-generator">
-
-                        <div class="input-field col s12">
-                            <input id="input-pwa-title" type="text">
-                            <label for="input-pwa-title">Title</label>
-                        </div>
-
-                        <div class="file-field input-field">
-                            <div class="btn">
-                                <span>Root folder</span>
-                                <input id="input-pwa-root-folder" type="file" webkitdirectory>
+                        <div class="row">
+
+                            <div class="col s12">
+                                <div class="file-field input-field">
+                                    <div class="btn pink">
+                                        <span>Root folder</span>
+                                        <input id="input-pwa-root-folder" type="file" webkitdirectory>
+                                    </div>
+                                    <div class="file-path-wrapper">
+                                        <input class="file-path validate" type="text">
+                                    </div>
+                                </div>
                             </div>
-                            <div class="file-path-wrapper">
-                                <input class="file-path validate" type="text">
+
+                            <div class="col s12">
+                                <div class="input-field">
+                                    <input id="input-pwa-title" type="text">
+                                    <label for="input-pwa-title">Application Title</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="file-field input-field">
-                            <div class="btn">
-                                <span>Icon</span>
-                                <input id="input-pwa-icon" type="file" accept="image/x-png">
+                            <div class="col s12">
+                                <div class="file-field input-field">
+                                    <div class="btn pink">
+                                        <span>Icon</span>
+                                        <input id="input-pwa-icon" type="file" accept="image/x-png">
+                                    </div>
+                                    <div class="file-path-wrapper">
+                                        <input class="file-path validate" type="text">
+                                    </div>
+                                </div>
                             </div>
-                            <div class="file-path-wrapper">
-                                <input class="file-path validate" type="text">
+
+                            <div class="col s12">
+                                <div class="input-field">
+                                    <select>
+                                        <option value="no-theme">No theme</option>
+                                        <option value="light-theme">Light theme</option>
+                                        <option value="dark-theme">Dark theme</option>
+                                    </select>
+                                    <label>Select a theme</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <button id="btn-pwa-generate" class="btn btn-large waves-effect waves-light">Generate PWA</button>
+                            <div class="col s12">
+                                <button id="btn-pwa-generate" class="btn btn-large green waves-effect waves-light">Generate PWA</button>
+                            </div>
 
+                        </div>
                     </form>
 
                 </section>

diff --git a/app/js/app.js b/app/js/app.js
@@ -7,6 +7,13 @@ let iconImg = '';
 
 let zipBuilder = new JSZip();
 
+// On DOM Content Loaded
+document.addEventListener('DOMContentLoaded', () =>
+{
+    // Materialize Select
+    M.FormSelect.init(document.querySelector('select'), { /* options */ });
+});
+
 // Title input on input event
 document.querySelector('input#input-pwa-title').addEventListener('input', (evt) =>
 {
@@ -92,6 +99,12 @@ function buildFilesTree(filesList)
         }
     }
 
+    // Default application title is the root folder name
+    title = filesTree.keys().next().value;;
+    document.querySelector('#input-pwa-title').value = title;
+    // Triggers the input animation (materialize)
+    document.querySelector('label[for="input-pwa-title"]').classList += 'active';
+
     return filesTree;
 }
 
@@ -114,14 +127,16 @@ function folderRecursiveBuild(currentFolder, zipParentFolder = zipBuilder, title
             // File name without extension
             let title = name.split('.').slice(0, -1).join('.');
 
-            htmlTree += '<li><a href="' + value.webkitRelativePath + '" class="audio-src" data-id="' + audioFileID + '" data-title="' + title + '">' + value.name + '</a><a href="' + value.webkitRelativePath + '" class="cache-audio">Download</a></li>';
+            htmlTree += '<li href="' + value.webkitRelativePath + '"><a href="' + value.webkitRelativePath + '" class="audio-src" data-id="' + audioFileID + '" data-title="' + title + '">' + value.name + '</a><a href="#" class="cache-audio">Cache</a><a href="#" class="download-audio">Download</a></li>';
 
             ++audioFileID;
         }
         // Folder
         else
         {
-            htmlTree += '<ul><h' + titleLevel + '>' + name + '</h' + titleLevel + '>';
+            let folderTitle = titleLevel === 1 ? ''
+                : '<h' + titleLevel + '>' + name + '</h' + titleLevel + '>';
+            htmlTree += '<ul>' + folderTitle;
             htmlTree += folderRecursiveBuild(value, zipParentFolder.folder(name), titleLevel + 1);
             htmlTree += '</ul>';
         }