Modals and breadcrumb work

1 files changed, 83 insertions, 87 deletions

diff --git a/pydis_site/templates/wiki/edit.html b/pydis_site/templates/wiki/edit.html
index 8d5b61db..1e1caaf7 100644
--- a/pydis_site/templates/wiki/edit.html
+++ b/pydis_site/templates/wiki/edit.html
@@ -1,81 +1,11 @@
 {% extends "wiki/article.html" %}
-{% load wiki_tags i18n sekizai_tags %}
+{% load wiki_tags i18n sekizai_tags static %}
 
 
 {% block wiki_pagetitle %}
   Edit: {{ article.current_revision.title }}
 {% endblock %}
 
-{% block head %}
-  {{ block.super }}
-
-  <script language="javascript">
-    {# I'm sorry this JS sucks, it came with the wiki, just stuck right in here. #}
-
-    $(document).ready(function() {
-      $("#article_edit_form :input").change(function() {
-         $("#article_edit_form").data("changed",true);
-      });
-      if ($("#article_edit_form").find(".alert-danger").length > 0 || $("#article_edit_form").find(".has-error").length > 0 ) {
-        // Set the forms status as "changed" if there was a submission error
-        $("#article_edit_form").data("changed",true);
-      }
-      window.onbeforeunload = confirmOnPageExit;
-      var click_time = 0;
-      $("#article_edit_form").on("submit", function (ev) {
-          now = Date.now();
-          elapsed = now-click_time;
-          click_time = now;
-          if (elapsed < 3000)
-              ev.preventDefault();
-          window.onbeforeunload = null;
-          return true;
-      });
-      $("#id_preview").on("click", function () {
-          $("#previewModal").modal("show");
-          return true;
-      });
-      $("#id_preview_save_changes").on("click", function (ev) {
-          ev.preventDefault();
-          $("#id_save").trigger("click");
-      });
-    });
-
-    var confirmOnPageExit = function (e) {
-      if ($("#article_edit_form").data("changed")) {
-        e = e || window.event;
-        var message = "You have unsaved changes!";
-        // For IE6-8 and Firefox prior to version 4
-        if (e) {
-            e.returnValue = message;
-        }
-        // For Chrome, Safari, IE8+ and Opera 12+
-        return message;
-      } else {
-        // If the form hasn't been changed, don't display the pop-up
-        return;
-      }
-    };
-  </script>
-
-  <script type="text/javascript">
-    $(document).ready( function() {
-      $('.sidebar-form').each(function () {
-        $(this).submit( function() {
-          this.unsaved_article_title.value = $('#id_title').val();
-          this.unsaved_article_content.value = $('#id_content').val();
-        });
-      });
-    });
-  </script>
-
-  <script language="javascript">
-    $(document).ready(function() {
-      $("#id_revision").val('{{ article.current_revision.id }}');
-    });
-  </script>
-{% endblock %}
-
 {% block wiki_contents_tab %}
 
   {% if not user.is_authenticated %}
@@ -144,23 +74,89 @@
 
   {% include "wiki/includes/modals.html" %}
 
-  <div class="modal fade wiki-modal" id="previewModal">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-body">
-          <iframe name="previewWindow" frameborder="0"></iframe>
-        </div>
-        <div class="modal-footer">
-          <a href="#" class="btn btn-default btn-lg" data-dismiss="modal">
-            <span class="fa fa-arrow-circle-left"></span>
-            {% trans "Back to editor" %}
-          </a>
-          <a class="btn btn-lg btn-primary" id="id_preview_save_changes" href="#">
-            <span class="fa fa-check"></span>
-            {% trans "Save changes" %}
-          </a>
-        </div>
+  <div class="modal" id="previewModal">
+    <div class="modal-background"></div>
+    <div class="modal-card" style="height: 50%;">
+      <div class="modal-card-body" style="padding: 0; overflow: hidden;">
+        <iframe name="previewWindow" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+      </div>
+      <div class="modal-card-foot">
+        <button class="button is-primary" aria-label="close">Close</button>
+        <a class="button is-success" id="id_preview_save_changes">Save Changes</a>
       </div>
     </div>
   </div>
+
+  <script src="{% static "js/wiki/modal.js" %}" type="text/javascript"></script>
+
+  <script type="text/javascript">
+    {# I'm sorry this JS sucks, it came with the wiki, just stuck right in here. #}
+
+    $(document).ready(function() {
+      let article_edit_form = $("#article_edit_form");
+      let click_time = 0;
+
+      $("#article_edit_form :input").change(function() {
+         article_edit_form.data("changed",true);
+      });
+
+      if (article_edit_form.find(".alert-danger").length > 0 || article_edit_form.find(".has-error").length > 0 ) {
+        // Set the forms status as "changed" if there was a submission error
+        article_edit_form.data("changed",true);
+      }
+
+      window.onbeforeunload = confirmOnPageExit;
+
+      article_edit_form.on("submit", function (ev) {
+          now = Date.now();
+          elapsed = now-click_time;
+          click_time = now;
+          if (elapsed < 3000)
+              ev.preventDefault();
+          window.onbeforeunload = null;
+          return true;
+      });
+      $("#id_preview").click(function () {
+          open_modal("previewModal");
+          return true;
+      });
+      $("#id_preview_save_changes").on("click", function (ev) {
+          ev.preventDefault();
+          $("#id_save").trigger("click");
+      });
+    });
+
+    var confirmOnPageExit = function (e) {
+      if ($("#article_edit_form").data("changed")) {
+        e = e || window.event;
+        var message = "You have unsaved changes!";
+        // For IE6-8 and Firefox prior to version 4
+        if (e) {
+            e.returnValue = message;
+        }
+        // For Chrome, Safari, IE8+ and Opera 12+
+        return message;
+      } else {
+        // If the form hasn't been changed, don't display the pop-up
+        return;
+      }
+    };
+  </script>
+
+  <script type="text/javascript">
+    $(document).ready( function() {
+      $('.sidebar-form').each(function () {
+        $(this).submit( function() {
+          this.unsaved_article_title.value = $('#id_title').val();
+          this.unsaved_article_content.value = $('#id_content').val();
+        });
+      });
+    });
+  </script>
+
+  <script language="javascript">
+    $(document).ready(function() {
+      $("#id_revision").val('{{ article.current_revision.id }}');
+    });
+  </script>
 {% endblock %}