diff options
Diffstat (limited to 'design/templates/notes')
-rw-r--r-- | design/templates/notes/create.html | 18 | ||||
-rw-r--r-- | design/templates/notes/notes_create.html | 52 | ||||
-rw-r--r-- | design/templates/notes/notes_detail.html | 78 | ||||
-rw-r--r-- | design/templates/notes/notes_list.html | 2 |
4 files changed, 131 insertions, 19 deletions
diff --git a/design/templates/notes/create.html b/design/templates/notes/create.html deleted file mode 100644 index 3bd765d..0000000 --- a/design/templates/notes/create.html +++ /dev/null @@ -1,18 +0,0 @@ -{% extends 'base.html' %} -{% block content %} -<main> - <h1>Create a new note</h1> -<form action="" method="post"> -{% csrf_token %} -{{ form.non_field_errors }} -{% for field in form %} -<fieldset {% if field.errors %}class="error"{%endif%}> -{{field.label_tag}} -{{field}} -{% if field.errors %}{{field.errors}}{% endif %} -</fieldset> -{% endfor %} -<p><input class="btn" value="submit" type="submit" /></p> -</form> -</main> -{% endblock %} diff --git a/design/templates/notes/notes_create.html b/design/templates/notes/notes_create.html new file mode 100644 index 0000000..9bbdb26 --- /dev/null +++ b/design/templates/notes/notes_create.html @@ -0,0 +1,52 @@ +{% extends 'base.html' %} + +{% block extrastyles %} +<link rel="stylesheet" href="/media/quill.snow.css" /> +{% endblock %} +{% block content %} +<main> + <h1>Create a new note</h1> + <form id="new-note-form" action="{% url 'notes:note-create' %}" method="post"> +{% csrf_token %} +{{ form.non_field_errors }} +{% for field in form %} +<fieldset class="{% if field.errors %}error {%endif%}{% if field.name == 'body_qjson' or field.name == 'body_html' %}hide {%endif%}" id="fs-{{field.name}}" > +{{field.label_tag}} +{{field}} +{% if field.errors %}{{field.errors}}{% endif %} +</fieldset> +{% if field.name == 'body_qjson' %} +<div id="q-container"> + <div id="note-body"></div> +</div> +{% endif %} +{% endfor %} +<p><input class="btn btn-inline" value="submit" type="submit" /></p> +</form> +</main> +{% endblock %} + +{% block jsinclude %} +<script src="/media/js/highlight.pack.js"></script> +<script src="/media/js/quill.min.js"></script> +{% endblock %} + +<script> +{% block jsdomready %} + var note_text = document.getElementById('id_body_text'); + note_text.innerHTML = "q"; + var plaintext = document.getElementById("fs-body_text"); + plaintext.classList.add('hide') + initQuill("#note-body"); + var form = document.getElementById('new-note-form'); + console.log(form); + form.onsubmit = function() { + var note_qjson = document.getElementById('id_body_qjson'); + note_qjson.innerHTML= JSON.stringify(window.quill.getContents()); + var note_html = document.getElementById('id_body_html'); + note_html.innerHTML = window.quill.root.innerHTML; + var note_text = document.getElementById('id_body_text'); + note_text.innerHTML = window.quill.getText(); + }; +{% endblock %} +</script> diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html new file mode 100644 index 0000000..bf46ab8 --- /dev/null +++ b/design/templates/notes/notes_detail.html @@ -0,0 +1,78 @@ +{% extends 'base.html' %} +{% block extrastyles %} +<link rel="stylesheet" href="/media/quill.snow.css" /> +{% endblock %} +{% block breadcrumbs %} +<li><a href="{%url 'notes:note-list' user.username %}">Notes</a></li> +{% endblock %} + +{% block content %} +<main> + <article class="note-container"> + <header class="note-header"> + <button class="hide btn btn-accent" id="edit-toggle-btn">Edit</button> + <div class="note-header-float"> + <h2 class="note-time">{{object.date_created|date:"M d, Y"}}</h2> + {% if object.url %}<h3 class="note-url"><a class="btn btn-small btn-subtle" href="{{object.url}}">Source</a><a class="btn btn-small btn-subtle left-margin-2" href="object.cache">Archive</a></h3>{% endif %} + </div> + </header> + <h1 id="note-title" class="note-title">{{object.title}}</h1> + <div id="q-container" class="inactive"><div id="note-body">{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}</div></div> + <form action="" method="post" id="note-edit-form">{% csrf_token %} + {% for field in form %}{% if field.name in "title body_text" %} + <div class="hide">{{field}}</div> + {% endif%}{% endfor %} + <input id="btn-js-hide" type="submit" class="btn sm" value="Save" > + </form> + </article> + <aside class="note-list-container"> + <div class=""> + <ul>{% for obj in notes_list %} + <li> + <a href="{% url 'notes:note-detail' user.username obj.slug %}"> + <h4>{{obj.title}}</h4> + <div class="note-preview">{{obj.body_text|truncatewords:12}}</div> + </a> + </li> + {% endfor %}</ul> + </div> + </aside> +</main> +{% endblock %} + +{% block jsinclude %} +<script src="/media/js/highlight.pack.js"></script> +<script src="/media/js/quill.min.js"></script> +{% endblock %} + <script> +{% block jsdomready %} + var btn = document.getElementById("edit-toggle-btn"), + qcontainer = document.getElementById('q-container'), + title = document.getElementById('note-title'), + form = document.getElementById('note-edit-form'), + note_html = document.createElement('textarea'), + note_qjson = document.createElement('textarea'); + + window.editing = false; + window.quillchange = false; + + btn.classList.remove('hide'); + initQuill("#note-body"); + note_html.setAttribute('name', 'body_html'); + note_html.setAttribute('class', 'hide'); + note_html.setAttribute('id', 'id_body_html'); + note_qjson.setAttribute('name', 'body_qjson'); + note_qjson.setAttribute('id', 'id_body_qjson'); + note_qjson.setAttribute('class', 'hide'); + form.appendChild(note_html); + form.appendChild(note_qjson); + document.getElementById("btn-js-hide").classList.add("hide"); + btn.addEventListener('click', function(){edit_note(this, title, qcontainer, window.quill, "{% url 'notes-api-detail' object.pk %}" )}, false) + +{%endblock%} + </script> + +'indent +'align +'direction +'code-block diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html index 4451588..8066369 100644 --- a/design/templates/notes/notes_list.html +++ b/design/templates/notes/notes_list.html @@ -3,7 +3,7 @@ <main> <h1> Notes</h1> <ul>{% for obj in object_list %} - <li><a href="{{obj.get_absolute_url}}">{{obj}}</a></li> + <li><a href="{% url 'notes:note-detail' user.username obj.slug %}">{{obj}}</a></li> {% endfor %}</ul> </main> {% endblock %} |