Skip to content
This repository has been archived by the owner on Jan 10, 2020. It is now read-only.

Commit

Permalink
Merge pull request #24 from fofr/attachments-2
Browse files Browse the repository at this point in the history
Allow insertion of attachments
  • Loading branch information
fofr committed Feb 20, 2018
2 parents 8f1a948 + 60e2277 commit c6bafdd
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 3 deletions.
44 changes: 44 additions & 0 deletions app/assets/javascripts/modules/attachment-insert.js
@@ -0,0 +1,44 @@
;(function (global) {
'use strict'

var GOVUK = global.GOVUK || {}
GOVUK.Modules = GOVUK.Modules || {}

GOVUK.Modules.AttachmentInsert = function () {
this.start = function (element) {
element.on('click', '.js-attachment', insertAttachment);
element.on('click', '.js-upload-attachment', showForm);
element.on('click', '.js-upload-close', hideForm);

// https://stackoverflow.com/questions/11076975
function insertAttachment(evt) {
evt.preventDefault();
var markdown = $(this).data('markdown');
var cursorPos = $('#body').prop('selectionStart');

if (cursorPos === 0 && $('#body').val().length > 0) {
cursorPos = $('#body').val().length;
}

var v = $('#body').val();
var textBefore = v.substring(0, cursorPos);
var textAfter = v.substring(cursorPos, v.length);
$('#body').val(textBefore + '\n' + markdown + textAfter).focus();
}

function showForm(evt) {
evt.preventDefault();
element.find('.js-upload-form').show();
element.find('.js-select-form').hide();
}

function hideForm(evt) {
evt.preventDefault();
element.find('.js-upload-form').hide();
element.find('.js-select-form').show();
}
}
}

global.GOVUK = GOVUK
})(window)
2 changes: 1 addition & 1 deletion app/assets/javascripts/vendor/modal-dialog.js
Expand Up @@ -62,7 +62,7 @@
setFocusOnLastFocusedEl: function () {
if (GOVUK.modalDialog.$lastFocusedEl) {
window.setTimeout(function () {
GOVUK.modalDialog.$lastFocusedEl.focus()
//GOVUK.modalDialog.$lastFocusedEl.focus()
}, 0)
}
},
Expand Down
16 changes: 16 additions & 0 deletions app/assets/sass/application.scss
Expand Up @@ -131,6 +131,22 @@ $govuk-gutter-half: ($govuk-gutter / 2);
position: relative;
}

.govuk-c-button {
color: $govuk-white !important;
}

.inserts {
@include govuk-font-regular-19;

background-color: $govuk-grey-4;
border: 2px solid $govuk-black;
border-bottom-color: $govuk-border-colour;
padding: 10px;
margin-bottom: -2px;
position: relative;
z-index: 1;
}

.contextual-guidance {
@include govuk-responsive-padding($govuk-spacing-responsive-5, "top");
background: #fff;
Expand Down
22 changes: 22 additions & 0 deletions app/views/attachment-done.html
@@ -0,0 +1,22 @@
{% extends "layout.html" %}
{% block page_title %}Attachment added{% endblock %}

{% block content %}

<a href="/document-tasks" class="govuk-c-back-link">Back</a>
<main role="main" class="govuk-o-main-wrapper">
<div class="govuk-o-grid">
<div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
<h1 class="form-title govuk-heading-xl">
You’ve added an attachment
</h1>

<p class="govuk-body">Now you can insert it in the copy:</p>
<a href="/title-summary-body#body-label" class="govuk-c-button">Insert in the copy</a>
<p class="govuk-body">
<a href="/document-tasks">Go back to draft</a>
</p>
</div>
</div>
</main>
{% endblock %}
2 changes: 1 addition & 1 deletion app/views/attachment.html
Expand Up @@ -18,7 +18,7 @@

<a href="/document-tasks" class="govuk-c-back-link">Back</a>
<main role="main" class="govuk-o-main-wrapper">
<form action="/document-tasks" method="post" class="form" data-module="fake-filename-from-title">
<form action="/attachment-done" method="post" class="form" data-module="fake-filename-from-title">
<div class="govuk-o-grid">
<div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
<h1 class="form-title govuk-heading-xl">
Expand Down
15 changes: 15 additions & 0 deletions app/views/includes/attachment-list.html
@@ -0,0 +1,15 @@
{% if attachment_count > 0 %}
<div style="clear: both">
<ul class="govuk-!-mt-r6 govuk-list">
{% for i in range(0, attachment_count) %}
<li>
<h4 class="govuk-heading-s govuk-!-mb-r0">
<a class="govuk-link js-attachment js-dialog-close" data-markdown="[InlineAttachment:{{ data[ (i + 1) + '-attachment-filename'] }}]" href="/attachment/{{ i + 1 }}">
{{ data[ (i + 1) + '-attachment-title'] }} (<span class="">{{ data[ (i + 1) + '-attachment-filename'] }}</span>)
</a>
</h4>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
1 change: 1 addition & 0 deletions app/views/includes/scripts.html
Expand Up @@ -16,6 +16,7 @@
<script src="/public/javascripts/modules/fake-filename-from-title.js"></script>
<script src="/public/javascripts/modules/select-tags.js"></script>
<script src="/public/javascripts/modules/edge.js"></script>
<script src="/public/javascripts/modules/attachment-insert.js"></script>
<script src="/public/javascripts/application.js"></script>

{% if useAutoStoreData %}
Expand Down
59 changes: 58 additions & 1 deletion app/views/title-summary-body.html
Expand Up @@ -15,6 +15,8 @@
{% set prefix = 'drug-safety-update' %}
{% endif %}

{% set attachment_count = data['attachment-count'] | int %}

<a href="{% if editing %}/document-tasks{% else %}/document-type{% endif %}" class="govuk-c-back-link">Back</a>
<main role="main" class="govuk-o-main-wrapper">
<form action="/document-tasks" method="post" class="form" data-module="slug-from-title" data-prefix= "{{ prefix }}">
Expand Down Expand Up @@ -114,9 +116,17 @@ <h3 class="govuk-heading-s govuk-!-mb-r1">Writing guidance</h3>
<div class="govuk-o-grid body-guidance" data-module="live-content-check">
<div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
<div class="govuk-!-mb-r6 is-textarea">
<label class="govuk-c-label" for="body">
<label class="govuk-c-label" for="body" id="body-label">
Body
</label>

{% if attachment_count > 0 %}
<div class="inserts">
<a href="#" id="openModal">Insert attachment</a>
<a href="#" style="margin-left: 20px">Insert image</a>
</div>
{% endif %}

<textarea name="body" class="govuk-c-textarea js-check-content" data-target="body-checks" name="textarea" id="body" rows="40">{% if editing %}{{data['body']}}{% endif %}</textarea>
</div>
</div>
Expand Down Expand Up @@ -149,5 +159,52 @@ <h2 class="govuk-heading-s govuk-!-mb-r1">Markdown guidance</h2>
</div>
{% endif %}
</form>

<dialog id="js-modal-dialog" class="modal-dialog dialog" role="dialog" aria-live="polite" aria-labelledby="dialog-title" aria-describedby="at-timer" data-module="attachment-insert">
<div class="modal-dialog__inner js-select-form">
<h1 id="dialog-title" class="heading-large govuk-!-mb-r6">
Insert attachment
</h1>
<div class="modal-dialog__inner__text">
<h2 class="govuk-heading-m">Select an attachment</h2>
{% include "includes/attachment-list.html" %}

<h2 class="govuk-heading-m">Or insert a new one</h2>
</div>
<div class="modal-dialog__inner__block">
<a href="/attachment" class="govuk-c-button dialog-button modal-dialog__inner__button js-upload-attachment">Add attachment</a>

<p class="govuk-body">
<a href="/" class="js-dialog-close">Cancel</a>
</p>
</div>
</div>
<div class="modal-dialog__inner js-upload-form" style="display: none">
<h1 id="dialog-title" class="heading-large govuk-!-mb-r6">
Upload an attachment
</h1>
<div class="modal-dialog__inner__text">
<div class="govuk-!-mb-r3 is-input">
<label class="govuk-c-label govuk-c-label--bold" for="attachment-title">
Attachment title
<span class="govuk-c-label__hint">Use the official title of the document</span>
</label>
<input required type="text" name="{{ attachment_id }}-attachment-title" class="js-check-content govuk-c-input" id="attachment-title" data-target="attachment-title-checks" value="{% if editing %}{{data[attachment_id + '-attachment-title']}}{% endif %}">
</div>

<label class="govuk-c-label govuk-c-label--bold" for="attachment-file">
File
</label>
<input type="file" name="attachment-file" class="govuk-c-file-upload">
</div>
<div class="modal-dialog__inner__block">
<a href="/attachment" class="govuk-c-button dialog-button modal-dialog__inner__button js-edge">Upload</a>

<p class="govuk-body">
<a href="/" class="js-upload-close">Cancel</a>
</p>
</div>
</div>
</dialog>
</main>
{% endblock %}

0 comments on commit c6bafdd

Please sign in to comment.