From 17076a30846b797852ca5ed9d6ee299ffd80d08f Mon Sep 17 00:00:00 2001
From: Sean Hammond <git@snhmnd.fastmail.com>
Date: Sat, 4 Jan 2020 19:09:35 +0000
Subject: [PATCH] Move new post form into modal dialog

With a button in the page actions menu for opening the modal dialog.

This means that "footer links" are no longer needed, now there's only
header links. (The footer links weren't working anymore anyway, since I
removed the footer.)
---
 _data/footer_links.yaml                       |  3 --
 _includes/edit_page_link.html                 |  4 +-
 _includes/new_post_form.html                  |  2 +-
 _includes/new_post_link.html                  |  1 +
 _includes/new_post_modal.html                 | 42 +++++++++++++++++++
 _includes/page_actions_menu.html              | 17 ++++----
 _includes/view_source_link.html               |  4 +-
 _layouts/default.html                         |  1 +
 ...11-11-edit-page-and-view-source-buttons.md | 19 +++++++--
 _posts/2019-11-11-new-post-form.md            | 35 ++++++----------
 _posts/2019-11-25-header-and-footer-links.md  | 17 --------
 _posts/2019-11-25-header-links.md             |  8 ++++
 _sass/_modal.scss                             | 30 +++++++++++++
 _sass/jekyll-theme-seanh.scss                 |  1 +
 new.md                                        |  4 --
 15 files changed, 123 insertions(+), 65 deletions(-)
 delete mode 100644 _data/footer_links.yaml
 create mode 100644 _includes/new_post_link.html
 create mode 100644 _includes/new_post_modal.html
 delete mode 100644 _posts/2019-11-25-header-and-footer-links.md
 create mode 100644 _posts/2019-11-25-header-links.md
 create mode 100644 _sass/_modal.scss
 delete mode 100644 new.md

diff --git a/_data/footer_links.yaml b/_data/footer_links.yaml
deleted file mode 100644
index a120275..0000000
--- a/_data/footer_links.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-- url: new
-  text: New
-  title: Create a new post
diff --git a/_includes/edit_page_link.html b/_includes/edit_page_link.html
index b8b3cbd..662423f 100644
--- a/_includes/edit_page_link.html
+++ b/_includes/edit_page_link.html
@@ -1,3 +1 @@
-{% if site.edit_page_link != false %}
-  <a href="{{ site.github.repository_url }}/edit/master/{{ page.path }}" title="Edit this page on GitHub" name="Edit this page on GitHub" target="_blank">Edit</a>
-{% endif %}
+<a href="{{ site.github.repository_url }}/edit/master/{{ page.path }}" title="Edit this page on GitHub" name="Edit this page on GitHub" target="_blank">Edit</a>
diff --git a/_includes/new_post_form.html b/_includes/new_post_form.html
index caac81f..f52051c 100644
--- a/_includes/new_post_form.html
+++ b/_includes/new_post_form.html
@@ -9,7 +9,7 @@
   Type a title and hit <kbd>Enter</kbd>
   to create a new post in <a href="{{ site.github.repository_url }}/tree/master/_posts"><code>{{ site.github.hostname }}/{{ site.github.repository_nwo }}</code></a>:
 </label>
-<input id="new-post" autofocus style="width:100%; padding:.3em; margin-top:1em; font-size:x-large;" class="js-new-post" type="text" spellcheck="true" onchange="doNewPost()" title="Create a new post" placeholder="Title&hellip;">
+<input id="new-post" autofocus style="width:770px; padding: 5px; margin-top:1em; font-size:x-large;" class="js-new-post" type="text" spellcheck="true" onchange="doNewPost()" title="Create a new post" placeholder="Title&hellip;">
 
 <script>
   function doNewPost() {
diff --git a/_includes/new_post_link.html b/_includes/new_post_link.html
new file mode 100644
index 0000000..17e1001
--- /dev/null
+++ b/_includes/new_post_link.html
@@ -0,0 +1 @@
+<a style="cursor: pointer;" id="new_post_link" title="Create a new post" name="Create a new post">New</a>
diff --git a/_includes/new_post_modal.html b/_includes/new_post_modal.html
new file mode 100644
index 0000000..bcda3a0
--- /dev/null
+++ b/_includes/new_post_modal.html
@@ -0,0 +1,42 @@
+{% comment %}
+A modal dialog for creating a new post.
+
+Usage
+=====
+
+  {% include new_post_modal.html %}
+
+You also need to include, somewhere in your page, the link for opening the modal:
+
+  {% include new_post_link.html %}
+{% endcomment %}
+{% assign modal_id  = "new_post_modal" %}
+{% assign link_id = "new_post_link" %}
+{% assign close_id  = "new_post_close" %}
+
+<div id="{{ modal_id }}" class="modal">
+  <div class="modal__content content__outer-container">
+    <span id="{{ close_id }}" class="modal__close">&times;</span>
+    {% include new_post_form.html %}
+  </div>
+</div>
+
+<script>
+  const modal = document.getElementById("{{ modal_id }}");
+  const btn = document.getElementById("{{ link_id }}");
+  const close = document.getElementById("{{ close_id }}");
+
+  btn.onclick = function() {
+    modal.style.display = "block";
+    document.querySelector('.js-new-post').focus();
+  }
+
+  close.onclick = function() { modal.style.display = "none"; }
+
+  // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+</script>
diff --git a/_includes/page_actions_menu.html b/_includes/page_actions_menu.html
index 0a789ba..97b6b75 100644
--- a/_includes/page_actions_menu.html
+++ b/_includes/page_actions_menu.html
@@ -7,13 +7,14 @@
   {% include page_actions_menu.html %}
 {% endcomment %}
 {% capture menu_items %}
-  {% for item in site.data.footer_links %}
-    <a href="{{ item.url | relative_url }}" {%- if item.title %}title="{{ item.title }}"{% endif -%}>{{ item.text }}</a>
-  {% endfor %}
-  {% include view_source_link.html %}
-  {% include edit_page_link.html %}
+  {% if site.new_post_link != false %}{% include new_post_link.html %}{% endif %}
+  {% if site.view_source_link != false %}{% include view_source_link.html %}{% endif %}
+  {% if site.edit_page_link != false %}{% include edit_page_link.html %}{% endif %}
 {% endcapture %}
 
-<div class="page-actions-menu" style="position: fixed; bottom: 0; right: 0;">
-  {% include dropup.html menu_items=menu_items %}
-</div>
+{% assign menu_items = menu_items | strip %}
+{% if menu_items != "" %}
+  <div class="page-actions-menu" style="position: fixed; bottom: 0; right: 0;">
+    {% include dropup.html menu_items=menu_items %}
+  </div>
+{% endif %}
diff --git a/_includes/view_source_link.html b/_includes/view_source_link.html
index 688313b..db8d9bd 100644
--- a/_includes/view_source_link.html
+++ b/_includes/view_source_link.html
@@ -1,3 +1 @@
-{% if site.view_source_link != false -%}
-  <a href="https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/{{ page.path }}" title="View the source code for this page" name="View the source code for this page">View Source</a>
-{%- endif %}
+<a href="https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/{{ page.path }}" title="View the source code for this page" name="View the source code for this page">View Source</a>
diff --git a/_layouts/default.html b/_layouts/default.html
index 2417ca9..e2ab5d3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -38,6 +38,7 @@
     {{ content }}
 
     {% include page_actions_menu.html %}
+    {% if site.new_post_link != false %}{% include new_post_modal.html %}{% endif %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
     <script>
        anchors.options.placement = "left";
diff --git a/_posts/2019-11-11-edit-page-and-view-source-buttons.md b/_posts/2019-11-11-edit-page-and-view-source-buttons.md
index ea6a70e..3f16e53 100644
--- a/_posts/2019-11-11-edit-page-and-view-source-buttons.md
+++ b/_posts/2019-11-11-edit-page-and-view-source-buttons.md
@@ -1,7 +1,18 @@
 Edit Page and View Source Buttons
 =================================
 
-All pages and posts have a <kbd>View source</kbd> button that links to the raw copy of the page's source code
-(e.g. the Markdown source) for reference and an <kbd>Edit</kbd> button for quickly editing the page on GitHub
-(very handy for correcting typos for example). Both buttons are in the page footer. Look at the footer at the
-bottom of this page for an example.
+If you hover over the small `☰` menu in the bottom-right of every page it opens a
+popup menu with a {% include view_source_link.html %} link to the
+raw copy of the page's source code (e.g. the Markdown source) and
+an {% include edit_page_link.html %} link for quickly editing the page on GitHub
+(very handy for correcting typos for example).
+
+To remove the Edit and View Source links set `view_source_link: false` and
+`edit_page_link: false` in your `_config.yml`:
+
+```yaml
+view_source_link: false
+edit_page_link: false
+```
+
+The same menu also contains a handy link for [easily creating a new post](2019-11-11-new-post-form.md).
diff --git a/_posts/2019-11-11-new-post-form.md b/_posts/2019-11-11-new-post-form.md
index 5e6f8a7..94f02d7 100644
--- a/_posts/2019-11-11-new-post-form.md
+++ b/_posts/2019-11-11-new-post-form.md
@@ -1,30 +1,21 @@
 New Post Form
 =============
 
-The [`new_post_form.html`]({{ site.github.repository_url }}/blob/master/_includes/new_post_form.html) include renders a form
-for quickly creating a new post on GitHub:
+As well as the [Edit and View Source links](./2019-11-11-edit-page-and-view-source-buttons.md)
+the `☰` menu in the bottom-right of every page also includes a
+<kbd>New</kbd> button that opens a modal dialog with a form
+for quickly creating a new post on GitHub.
 
-{% include new_post_form.html %}
+When submitted the new post form opens GitHub's <samp>New File</samp> page with
+the path, filename and commit message pre-filled based on the title you enter.
+You can type the body of your post and just click GitHub's <kbd>Create new
+file</kbd> button. A new post created in this way is a
+[draft](./2019-12-22-drafts.md) by default so you can save the file to GitHub
+without it appearing on your site yet.  To publish the post just delete the
+pre-filled YAML front matter from the file.
 
-The form opens GitHub's <samp>New File</samp> page with the path, filename and commit message pre-filled based on the title you enter.
-You can type the body of your post and just click GitHub's <kbd>Create new file</kbd> button. A new post created in this way
-is a draft by default so you can save the file to GitHub without it appearing on your site yet.
-To publish the post just delete the pre-filled YAML front matter from the file.
-
-To add a new post form like the one above to your site just call the `new_post_form.html` include like this:
-`{% raw %}{% include new_post_form.html %}{% endraw %}`. You could put this in a `new.md` file and then just visit
-`YOUR_SITE.com/new` whenever you want to create a new post. See
-[`{{ site.github.hostname }}/{{ site.github.repository_nwo }}/new.md`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/new.md)
-for an example.
-
-This demo site also uses [`_data/footer_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/footer_links.yaml)
-to add a link in the site footer to the new post page. `footer_links.yaml` is a
-Jekyll [Data File](https://jekyllrb.com/docs/datafiles/) that contains a list
-of links to go in the site footer. To add a link to your `new.md` file add an
-item like this to `footer_links.yaml`:
+To remove the New Post link `new_post_link: false` in your `_config.yml`:
 
 ```yaml
-- url: new
-  text: New
-  title: Create a New Post
+new_post_link: false
 ```
diff --git a/_posts/2019-11-25-header-and-footer-links.md b/_posts/2019-11-25-header-and-footer-links.md
deleted file mode 100644
index 20212c5..0000000
--- a/_posts/2019-11-25-header-and-footer-links.md
+++ /dev/null
@@ -1,17 +0,0 @@
-Header and Footer Links
-=======================
-
-You can use Jekyll [Data Files](https://jekyllrb.com/docs/datafiles/) to add
-links to the header and footer.
-Create a `_data/header_links.yaml` file to specify your header links and `_data/footer_links.yaml` for the footer links.
-For examples see
-[this site's `header_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/header_links.yaml)
-and [this site's `footer_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/footer_links.yaml).
-
-The footer contains View Source and Edit Page links by default. To remove these
-set `view_source_link: false` and `edit_page_link: false` in your `_config.yml`:
-
-```yaml
-view_source_link: false
-edit_page_link: false
-```
diff --git a/_posts/2019-11-25-header-links.md b/_posts/2019-11-25-header-links.md
new file mode 100644
index 0000000..d9cf46e
--- /dev/null
+++ b/_posts/2019-11-25-header-links.md
@@ -0,0 +1,8 @@
+Header Links
+============
+
+You can use Jekyll [Data Files](https://jekyllrb.com/docs/datafiles/) to add
+links to the site header.
+Create a `_data/header_links.yaml` file to specify your header links.
+For example see
+[this site's `header_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/header_links.yaml).
diff --git a/_sass/_modal.scss b/_sass/_modal.scss
new file mode 100644
index 0000000..c777846
--- /dev/null
+++ b/_sass/_modal.scss
@@ -0,0 +1,30 @@
+.modal {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal__content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 20px;
+}
+
+.modal__close {
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.modal__close:hover,
+.modal__close:focus {
+  text-decoration: none;
+  cursor: pointer;
+}
diff --git a/_sass/jekyll-theme-seanh.scss b/_sass/jekyll-theme-seanh.scss
index cb0ba49..7341ece 100644
--- a/_sass/jekyll-theme-seanh.scss
+++ b/_sass/jekyll-theme-seanh.scss
@@ -17,6 +17,7 @@
 @import "lead";
 @import "links";
 @import "lists";
+@import "modal";
 @import "quotes";
 @import "rouge";
 @import "samp";
diff --git a/new.md b/new.md
deleted file mode 100644
index 969aea3..0000000
--- a/new.md
+++ /dev/null
@@ -1,4 +0,0 @@
-Create a New Post
-=================
-
-{% include new_post_form.html %}