From cc5f3b7321c6992e0c7e324c735bb5272d8e5ae3 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Sun, 14 Apr 2019 17:00:43 +0100 Subject: Modals and breadcrumb work --- pydis_site/static/js/wiki/modal.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 pydis_site/static/js/wiki/modal.js (limited to 'pydis_site/static/js/wiki/modal.js') diff --git a/pydis_site/static/js/wiki/modal.js b/pydis_site/static/js/wiki/modal.js new file mode 100644 index 00000000..01252575 --- /dev/null +++ b/pydis_site/static/js/wiki/modal.js @@ -0,0 +1,13 @@ +function open_modal(id) { + let element = document.getElementById(id); + + $(element).addClass("is-active"); + + $(element).find(".modal-background").click(function() { + $(element).removeClass("is-active"); + }); + + $(element).find("[aria-label=\"close\"]").click(function() { + $(element).removeClass("is-active"); + }); +} -- cgit v1.2.3 From 230e255ee233f0b04d3b5c3f1aac2b66f4564578 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Wed, 17 Apr 2019 13:54:33 +0100 Subject: Image sidebar is finally complete --- pydis_site/static/css/wiki/style.css | 4 + pydis_site/static/js/wiki/load_editor.js | 37 ++- pydis_site/static/js/wiki/modal.js | 3 +- .../templates/wiki/plugins/images/sidebar.html | 363 +++++++++++++-------- 4 files changed, 256 insertions(+), 151 deletions(-) (limited to 'pydis_site/static/js/wiki/modal.js') diff --git a/pydis_site/static/css/wiki/style.css b/pydis_site/static/css/wiki/style.css index b4f233f7..61ded7ce 100644 --- a/pydis_site/static/css/wiki/style.css +++ b/pydis_site/static/css/wiki/style.css @@ -1,3 +1,7 @@ .breadcrumb-section { padding: 1rem; } + +div.control.is-fullwidth { + width: 100%; +} diff --git a/pydis_site/static/js/wiki/load_editor.js b/pydis_site/static/js/wiki/load_editor.js index 6eddbe1e..0671daed 100644 --- a/pydis_site/static/js/wiki/load_editor.js +++ b/pydis_site/static/js/wiki/load_editor.js @@ -1,15 +1,12 @@ (function() { window.editors = {}; // So that other scripts can get at 'em - const TOCText = "[TOC]"; - const headingAction = { name: "heading", action: SimpleMDE.toggleHeadingSmaller, className: "fa fa-heading", title: "Heading", }; - const imageAction = { name: "image", action: SimpleMDE.drawImage, @@ -17,10 +14,37 @@ title: "Insert image", }; + const imageAlign = "align:{ALIGN} "; + const imageSize = "size:{SIZE}"; + let elements = document.getElementsByClassName("simple-mde"); + function add_insert_image_wiki(editor) { + editor.insert_image_wiki = function(id, align, size, caption) { + let contents = "", + doc = editor.codemirror.getDoc(), + cursor = doc.getCursor(); + + if (typeof align !== "undefined" && align.length) { + contents = contents + imageAlign.replace("{ALIGN}", align); + } + + if (typeof size !== "undefined" && size.length) { + contents = contents + imageSize.replace("{SIZE}", size); + } + + contents = `\n[image:${id} ${contents}]`; + + if (typeof caption !== "undefined" && caption.length) { + contents = contents + "\n" + ` ${caption}` + } + + doc.replaceRange(contents, cursor); + } + } + for (let element of elements) { - window.editors[element.id] = new SimpleMDE({ + let editor = new SimpleMDE({ "element": element, autoDownloadFontAwesome: false, // We already have the pro one loaded @@ -53,6 +77,9 @@ ], status: false, - }) + }); + + add_insert_image_wiki(editor); + window.editors[element.id] = editor; } })(); diff --git a/pydis_site/static/js/wiki/modal.js b/pydis_site/static/js/wiki/modal.js index 01252575..1eb7b056 100644 --- a/pydis_site/static/js/wiki/modal.js +++ b/pydis_site/static/js/wiki/modal.js @@ -7,7 +7,8 @@ function open_modal(id) { $(element).removeClass("is-active"); }); - $(element).find("[aria-label=\"close\"]").click(function() { + $(element).find("[aria-label=\"close\"]").click(function(e) { $(element).removeClass("is-active"); + e.preventDefault(); }); } diff --git a/pydis_site/templates/wiki/plugins/images/sidebar.html b/pydis_site/templates/wiki/plugins/images/sidebar.html index 3089cc85..b4e58e6d 100644 --- a/pydis_site/templates/wiki/plugins/images/sidebar.html +++ b/pydis_site/templates/wiki/plugins/images/sidebar.html @@ -1,163 +1,236 @@ {% load i18n wiki_tags wiki_images_tags humanize wiki_thumbnails sekizai_tags %} - -{% addtoblock "js" %} - -{% endaddtoblock %} - {% with article|images_for_article as images %} - + {% if article|images_can_add:user %} + {% include "wiki/includes/formerrors.html" %} + + {# Include the hidden fields #} + {% for hidden in form.hidden_fields %} + {{ hidden }} + {% endfor %} + + {% for field in form.visible_fields %} + {% include "wiki/includes/formfield.html" with render_labels=False %} + {% endfor %} + + + +
+ {% endif %} + + {% for image in images %} + {% with image.current_revision.imagerevision as revision %} + {% thumbnail revision.image "100x100" crop="center" as thumb %} +
+
+ {{ revision.get_filename }} +
+
+
+ Image ID: {{ image.id }} +
-{% if article|images_can_add:user %} - {% include "wiki/includes/formerrors.html" %} +

+ + + + + - {# Include the hidden fields #} - {% for hidden in form.hidden_fields %} - {{ hidden }} - {% endfor %} + {% if image|can_write:user %} + + + + + + {% endif %} +

+
+
+ {% endthumbnail %} + {% endwith %} - {% for field in form.visible_fields %} - {% include "wiki/includes/formfield.html" with render_labels=False %} + {% empty %} +
+ No images found for this article. +
+
{% endfor %} - -{% endif %} - -
- -{% for image in images %} - {% with image.current_revision.imagerevision as revision %} - {% thumbnail revision.image "100x100" crop="center" as thumb %} -
-
- {{ revision.get_filename }} -
-
-
- Image ID: {{ image.id }} -
+

+ + Manage Images + + + + +

+ +

How to use images

+ +

+ Images are local to the article, and may only be used in the article they are + uploaded to. Images may be replaced by clicking the upload button next to it + above, but note that image revisions are kept and can be found on the + Manage Images page. +

+ +

+ To make use of images in an article, use the image wiki tag in + your Markdown. These tags take some arguments for customisation, and you can + also include a caption on the next line, indented by four spaces. Note that + the align and size options are optional. +

+

+ Syntax: [image:ID align:x size:y] +

+

+ The ID to use is the image ID shown next to the image in the list above. + You can click on the insert button if you'd like to insert an image into the + editor without manually typing the tag. +

+ +
Example tag
+ + 
+  [image:1 align:left size:orig]
+      Python Discord logo
+
+ +
Options for align
+ +
+ left + right +
-

- - - - - +

Options for size
- {% if image|can_write:user %} - - - - - - {% endif %} -

-
-
- {% endthumbnail %} - {% endwith %} -{% empty %} - No images found for this article -{% endfor %} - -

- - Manage Images - - - - -

-
- -
- -

- {% trans "How to use images" %} -

- -

{% trans "After uploading an image, it is attached to this particular article and can be used only here. Other users may replace the image, but older versions are kept. To show the image press the Insert button and select the options you want to use. You can use Markdown in the caption. The Markdown code syntax for images looks like this" %}
-

[image:id align:right size:orig]
-    caption indented by 4 spaces
-{% trans "Possible values for align are" %} 
left | right
-{% trans "Possible values for size are" %} 
small | medium | large | orig | default
-

+
+ small + medium + large + orig + default +
{% endwith %} -