2 files changed, 95 insertions, 1 deletions
diff --git a/src/views/templates/blank/template.html b/src/views/templates/blank/template.html
index 7a07207..a1d8477 100644
--- a/src/views/templates/blank/template.html
+++ b/src/views/templates/blank/template.html
@@ -1,11 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="../../../nativekit/css/all.css">
+    <link rel="stylesheet" href="template.css">
 </head>
+
 <body>
-    <h1>The Blank Template</h1>
+    <div class="window">
+        <header class="titlebar draggable">
+            <h1 class="window-title">Blank Template</h1>
+            <div class="toolbars">
+
+                <button title="Add a new chapter" class="button button-default">
+                    <i class="icon nk-plus"></i>
+                </button>
+
+            </div>
+        </header>
+        <div class="content">
+            <div class="pane-group">
+                <div class="pane sidebar pane-normal">
+                    <nav class="nav-group">
+                        <h5 class="title">Chapters</h5>
+                        <div id="chapters"></div>
+                    </nav>
+                </div>
+                <div class="pane"></div>
+            </div>
+        </div>
+    </div>
+    <script>window.$ = window.jQuery = require('jquery');</script>
+    <script src="template.js"></script>
 </body>
+
 </html>
 \ No newline at end of file
diff --git a/src/views/templates/blank/template.js b/src/views/templates/blank/template.js
index e69de29..d20f8ea 100644
--- a/src/views/templates/blank/template.js
+++ b/src/views/templates/blank/template.js
@@ -0,0 +1,65 @@
+const remote = require('electron').remote
+const Menu = remote.Menu;
+const MenuItem = remote.MenuItem;
+const { ipcRenderer } = require('electron');
+
+const chapterList = ['Chapterﬂ1'];
+const chapterCount = chapterList.length;
+
+$(document).ready(function () {
+    updateChapters();
+});
+
+function updateChapters() {
+    $('#chapters').empty();
+    chapterList.forEach(chapter => {
+        const chapterName = chapter.replace(/ﬂ/g, ' ');
+        $('#chapters').append(`<span id="${chapter}" class="item active chapter_navigation">${chapterName}</span>`)
+    });
+}
+
+let currentSelectedChapterForContextAction = null;
+let rightClickPosition = null;
+const chapterMenu = new Menu()
+const chapterContextItems = new MenuItem({
+    label: 'Rename Chapter',
+    click: (e) => {
+        const currentChapter = currentSelectedChapterForContextAction.replace(/ﬂ/g, ' ');
+        let child = new remote.BrowserWindow({
+            parent: remote.getCurrentWindow(),
+            modal: true,
+            width: 360,
+            height: 135,
+            frame: false,
+            show: false,
+            titleBarStyle: 'hidden',
+            webPreferences: {
+                nodeIntegration: true,
+                enableRemoteModule: true
+            }
+        })
+        child.loadURL('file://' + __dirname + '/../../system/chapterRename.html')
+        child.once('show', function () {
+            child.webContents.send('currentChapterName', currentChapter);
+        });
+        child.once('ready-to-show', () => {
+            child.show()
+        });
+        ipcRenderer.on('renamedChapter', (event, message) => {
+            const newChapterName = message;
+            const index = chapterList.findIndex(chapter => chapter === currentSelectedChapterForContextAction);
+            const newChapterId = newChapterName.replace(/ /g, 'ﬂ');
+            chapterList[index] = newChapterId;
+            currentSelectedChapterForContextAction = null;
+            updateChapters();
+        });
+    }
+})
+chapterMenu.append(chapterContextItems);
+
+$(document).on('contextmenu', '.chapter_navigation', (e) => {
+    e.preventDefault();
+    currentSelectedChapterForContextAction = e.target.id;
+    rightClickPosition = { x: e.x, y: e.y };
+    chapterMenu.popup(remote.getCurrentWindow());
+});