annotate_node-1.0.1-alpha1/templates/node--annotate_node.html.twig
templates/node--annotate_node.html.twig
{#
/**
* @file
* Theme override to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: Themed creation date field.
* - author_name: Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
* - readmore: Flag for more state. Will be true if the teaser content of the
* node cannot hold the main body content.
* - logged_in: Flag for authenticated user status. Will be true when the
* current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
* is an administrator.
*
* @see template_preprocess_node()
*
* @todo Remove the id attribute (or make it a class), because if that gets
* rendered twice on a page this is invalid CSS for example: two lists
* in different view modes.
*
*
*
*/
#}
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<footer class="node__meta">
{{ author_picture }}
<div{{ author_attributes.addClass('node__submitted') }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
</footer>
{% endif %}
<div{{ content_attributes.addClass('node__content') }} id="pop" >
<div class='itemize'>
<div id='content'>
{# Start Annotate Node stuff #}
{# Text of node has been passed as paragraphs_text or sentences_text
depending on config via hook_preprocessed_node.
Here we split content into divs adding IDs etc and display it.
We also get all comments for this node via same hook in the comment_data
variable. We'll loop through those as well placing them under each paragraph/sentence.
annotate_node_annotator.js will use these to place annotation buttons
and add corrections. The CommentForm will use the IDs to append new comments.
#}
{# If the config is set to Length Dependent, we need to count here
and decide if text is long enough to be divided by paragraphs or sentences
#}
{% set numberOfWords = sentences_text|split(' ')|length %}
{# If config was set to Length dependent, need to decide here. #}
{% if string_separate == 'Length dependent' %}
{% if numberOfWords < custom_length %}
{% set string_separate = 'Sentences' %}
{% else %}
{% set string_separate = 'Paragraphs' %}
{# If was set to Length dependent, we haven't added our starting div yet in hook_preprocessed_node, so do it here #}
{% set paragraphs_text = '<div class="sentence">' ~ paragraphs_text ~ '</p>' %}
{% endif %}
{% endif %}
</br>
{% if string_separate != 'Paragraphs' %}
{% set text = sentences_text %}
{% else %}
{% set text = paragraphs_text %}
{% endif %}
{% set text = text|split('</p>') %}
{% set twigId = 0 %}
{# Remove <p> tags if you want less paragraphs approach, add class and id, to make buton a popper #}
{% for key , string in text %}
{% if string|length > 10 %}
{% set twigId = twigId + 1%}
{# Creating a div with id and class comments and adding a paragraph tag at the end #}
{% set commentDiv = '<div class="comments" id="comments-'~twigId~'">' %}
{# For each comment if paragraph_number equals to id add a comment to a div and end with </p> tag #}
{% set commentID = 0 %}
{% for comment in comment_data %}
{% if comment.paragraph_number == twigId %}
{% set commentDisplayID = commentID + 1 %}
{% set commentDiv = commentDiv ~ '<div><span class="commentDate">' ~ comment.comment_date ~ ' by <a href="' ~ base_url ~ '/user/' ~ comment.uid ~ '">' ~ comment.name ~ '</a></span></div><p class="separate-cmt" id="comment-'~ twigId ~'-'~commentID~'">' ~ comment.body|striptags ~ '</p>'%}
{% set commentID = commentID + 1 %}
{% endif %}
{% endfor %}
{# Added commentDiv to the button and closed the <div> tag #}
{# If have permissions, add the buttons #}
{% if user.hasPermission('Add annotation comments') %}
{% set button = '<div class="commentButtonPopper">
<div class="popper">
<button id="'~twigId~'" class="button-a popper-button">
</button>
</div>
</div>
</div>' ~ commentDiv ~ '</div>'~ '<div class="sentence">
<p>' %}
{% else %}
{% set button = '<div class="commentButtonPopper">
<div class="popper">
</div>
</div>
</div>' ~ commentDiv ~ '</div>'~ '<div class="sentence">
<p>' %}
{% endif %}
{# add button to string then string to text #}
{% set string = string ~ button %}
{% set text = text|slice(1) %}
{% set text = text|merge({0 : string})%}
{% endif %}
{% endfor %}
{% set text = text|join('') %}
{# raw is generally unadvised, but we used Xss::filter in hook_preprocess_node to check body and comment fields that form our text here #}
{{ text|raw }}
<pre id="annotation"></pre>
<div class="display"></div>
</div>
</div>
</div>
{# Ajax comment/annotation form. Place down here so don't see it page #}
<div class="popup" id="popup" {#style="background-color: black; width:300px; border: 1px solid grey; border-radius:5px; padding:10px; z-index: 100;"#} >
{#Had to manually create html for the form otherwise form wouldn't submit #}
<form id="annotate-node-comment-form" method="{{ form['#method'] }}">
{{ form.title }}
{{ form.comment }}
{{ form.paragraph_number }}
{{ form.form_token }}
{{ form.build_id }}
{{ form.form_id }}
{{form.actions }}
{{ form.submit }}
</form>
</div>
</article>
