Skip to content

Bootstrapped Accordions on Write Plan page #629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jollopre merged 2 commits into from
Sep 8, 2017
Merged

Bootstrapped Accordions on Write Plan page #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cbc612
Merge pull request #86 from DMPRoadmap/CDL-MVP
briri Sep 7, 2017
5c23107
DMPRoadmap/roadmap#issue567
briri Aug 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 26 additions & 11 deletions app/views/annotations/_show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,27 @@
<!--show annotations. annotation is passed as an argument-->
<h3 class="accordion_heading_text">
<%= (plan.template.org.abbreviation.present? ? plan.template.org.abbreviation : plan.template.org.name) %>
<% if annotation.example_answer? %>
<%= _('Example Answer') %>
<% else %>
<%= _('Guidance') %>
<% end %>
<span class="fa fa-plus" aria-hidden="true"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-annotation-<%= annotation.id %>">
<h2 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="<%= question.id %>-guidance"
href="#collapse-annotation-<%= annotation.id %>"
aria-controls="collapse-annotation-<%= annotation.id %>">

<div class="accordion-section"><%= raw annotation.text %></div>
<%= (plan.template.org.abbreviation.present? ? plan.template.org.abbreviation : plan.template.org.name) %>
<% if annotation.example_answer? %>
<%= _('Example Answer') %>
<% else %>
<%= _('Guidance') %>
<% end %>

<span class="fa fa-plus" aria-hidden="true"></span>
</a>
</h2>
</div>
</div>

<div id="collapse-annotation-<%= annotation.id %>" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading-annotation-<%= annotation.id %>">
<div class="panel-body">
<%= raw annotation.text %>
</div>
</div>
30 changes: 23 additions & 7 deletions app/views/guidance_groups/_show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
<h3 class="accordion_heading_text">
<%= group[:org] %> guidance on <%= theme %>
<span class="fa fa-plus" aria-hidden="true"></span>
</h3>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-guidance-<%= guidance_accordion_id %>">
<h2 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="<%= question.id %>-guidance"
href="#collapse-guidance-<%= guidance_accordion_id %>"
aria-controls="collapse-guidance-<%= guidance_accordion_id %>">

<div id="collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>" class="accordion-section collapse">
<%= raw group[:text] %>
</div>
<%= group[:org] %> guidance on <%= theme %>

<span class="fa fa-plus" aria-hidden="true"></span>
</a>
</h2>
</div>
</div>

<div id="collapse-guidance-<%= guidance_accordion_id %>"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="heading-guidance-<%= guidance_accordion_id %>">
<div class="panel-body">
<%= raw group[:text] %>
</div>
</div>
1 change: 0 additions & 1 deletion app/views/layouts/_es5_scripts.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
<%= javascript_include_tag 'views/notes/show.js' %> <!-- -->
<%= javascript_include_tag 'views/orgs/admin_edit.js' %> <!-- (app/views/orgs/admin_edit.html.erb) -->
<%= javascript_include_tag 'views/orgs/shibboleth_ds.js' %> <!-- (app/views/orgs/shibboleth_ds.html.erb) -->
<%= javascript_include_tag 'views/phases/edit.js' %> <!-- -->
<%= javascript_include_tag 'views/plans/available_templates.js' %> <!-- (app/views/plans/_available_templates.html.erb) -->
<%= javascript_include_tag 'views/plans/export_configure.js' %> <!-- (app/views/plans/show_export.html.erb) -->
<%= javascript_include_tag 'views/plans/index.js' %> <!-- -->
Expand Down
18 changes: 10 additions & 8 deletions app/views/phases/_guidance_section.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,22 @@
class="tab-panel<%= active_tab == 'guidance_tab' ? ' active' : '' %>"
aria-hidden="false" aria-labelledby="guidance_tab">

<div class="expand-collapse-all inline left-indent">
<a href="#<%= question.id %>-guidance" class="expand-accordions">expand all</a>
<span class="muted">|</span>
<a href="#<%= question.id %>-guidance" class="collapse-accordions">collapse all</a>
<div class="accordion-controls" data-parent="<%= question.id %>-guidance">
<a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
<span>|</span>
<a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
</div>

<!--guidance content -->
<div class="accordion" id="<%= question.id %>-guidance">
<div class="panel-group" id="<%= question.id %>-guidance"
role="tablist" aria-multiselectable="true">

<!--question guidance-->
<% num_annotations = 0 %>
<% i = 0 %>
<% if annotations.present? %>
<% annotations.each do |annotation| %>
<%= render partial: 'annotations/show', locals: {plan: plan, annotation: annotation} %>
<%= render partial: 'annotations/show', locals: {plan: plan, annotation: annotation, question: question} %>
<% num_annotations += 1%>
<% i += 1 %>
<% end %>
Expand All @@ -62,9 +64,9 @@
<% i += 1 %>
<% end %>
<% end %>
</div> <!-- accordion guidance/annotations -->
</div> <!-- panel-group -->

</div> <!-- question tab panel -->
</div> <!-- guidance-question-area- -->

<div id="comment-question-area-<%= question.id %>"
aria-hidden="false" aria-labelledby="note_tab"
Expand Down
148 changes: 81 additions & 67 deletions app/views/phases/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,89 +41,103 @@
aria-labelledby="phase-#<%= @phase.id %>-tab">

<div id="sections-accordion-controls">
<div class="expand-collapse-all inline">
<a href="#sections-accordion" class="expand-accordions">expand all</a>
<span class="muted">|</span>
<a href="#sections-accordion" class="collapse-accordions">collapse all</a>
<div class="accordion-controls" data-parent="sections-accordion">
<a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
<span>|</span>
<a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
</div>

<div class="progress inline">
<%= render :partial => "/plans/progress", locals: { plan: @plan } %>
</div> <!-- progess -->
</div>

<div class="accordion" id="sections-accordion">

<div class="panel-group" id="sections-accordion"
role="tablist" aria-multiselectable="true">
<% @phase.sections.order(:number).each do |section| %>
<% sectionid = section.id %>

<h2 class="accordion_heading_text" id="section-progress-<%= sectionid %>">
<div class="inline section-title">
<%= section.title %>
<span class="fa fa-plus" aria-hidden="true"></span>
<div class="inline progress-bar-<%= sectionid %>">
<%= render :partial => "/sections/progress", locals: { section: section, plan: @plan } %>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-<%= sectionid %>">
<h2 class="panel-title">
<a role="button" data-toggle="collapse"
data-parent="sections-accordion"
href="#collapse-<%= sectionid %>"
aria-controls="collapse-<%= sectionid %>">

<%= section.title %>
<span class="fa fa-plus" aria-hidden="true"></span>
</a>
<div class="inline progress-bar-<%= sectionid %>">
<%= render :partial => "/sections/progress", locals: { section: section, plan: @plan } %>
</div>
</h2>
</div>
</h2>
</div>

<div class="accordion-section">
<!-- accordion body -->
<div class="section-description"><%= raw section.description %></div>
<div id="collapse-<%= sectionid %>" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading-<%= sectionid %>">
<div class="panel-body">
<!-- accordion body -->
<div class="section-description"><%= raw section.description %></div>

<div class="saving" style="display: none">
<p><%= _('Saving ...') %></p>
</div>
<div class="removing" style="display: none">
<p><%= _('Removing ...') %></p>
</div>
<div class="saving" style="display: none">
<p><%= _('Saving ...') %></p>
</div>
<div class="removing" style="display: none">
<p><%= _('Removing ...') %></p>
</div>

<!-- the section body -->
<div class="loaded">
<% section.questions.each do |question| %>
<% if question.id == session[:question_id_comments].to_i then id_css = "current_question" end %>
<div id="<%= id_css%>">

<!-- the section body -->
<div class="loaded">
<% section.questions.each do |question| %>
<% if question.id == session[:question_id_comments].to_i then id_css = "current_question" end %>
<div id="<%= id_css%>">

<%
# Load the answer or create a new one
answers = question.plan_answers(@plan.id)
if answers.present?
answer = answers.first
else
answer = Answer.new({plan_id: @plan.id,
question_id: question.id,
user_id: current_user.id })
if question.default_value.present?
answer.text = question.default_value
<%
# Load the answer or create a new one
answers = question.plan_answers(@plan.id)
if answers.present?
answer = answers.first
else
answer = Answer.new({plan_id: @plan.id,
question_id: question.id,
user_id: current_user.id })
if question.default_value.present?
answer.text = question.default_value
end
end
end
%>

<!-- Answer Section -->
<div class="question-div edit-plan-left">
<div class="question-form">
<div id="<%= "answer-locking-#{question.id}" %>" class="answer-locking"></div>
<div id="<%= "answer-form-#{question.id}" %>">
<%= render(partial: 'answers/new_edit',
locals: { question: question, answer: answer, readonly: @readonly }) %>
</div>
</div> <!-- question-form -->
</div> <!-- edit-plan-left -->


<!-- Guidance and Notes Section (includes Annotations) -->
<div class="question-area-right-column edit-plan-right">
<%= render partial: 'guidance_section',
locals: {plan: @plan, question: question, answer: answer,
question_guidances: @question_guidances} %>
</div>
</div> <!-- id_css -->
<% end %> <!-- section.questions -->

</div> <!-- loaded -->
%>

<!-- Answer Section -->
<div class="question-div edit-plan-left">
<div class="question-form">
<div id="<%= "answer-locking-#{question.id}" %>" class="answer-locking"></div>
<div id="<%= "answer-form-#{question.id}" %>">
<%= render(partial: 'answers/new_edit',
locals: { question: question, answer: answer, readonly: @readonly }) %>
</div>
</div> <!-- question-form -->
</div> <!-- edit-plan-left -->


<!-- Guidance and Notes Section (includes Annotations) -->
<div class="question-area-right-column edit-plan-right">
<%= render partial: 'guidance_section',
locals: {plan: @plan, question: question, answer: answer,
question_guidances: @question_guidances} %>
</div>
</div> <!-- id_css -->
<% end %> <!-- section.questions -->

</div> <!-- loaded -->

</div> <!-- accordion group -->
</div> <!-- panel-body -->
</div> <!-- panel-collapse -->

<% end %> <!-- sections.each do -->
</div> <!-- sections-accordion -->
</div> <!-- panel-group -->

<script>
/* Initialises an editor for each textarea defined at (notes/_add.html.erb, notes/_edit.html.erb) whose class is tinymce_notes */
dmproadmap.utils.tinymce.init({ selector: '.tinymce_notes'});
Expand Down
1 change: 1 addition & 0 deletions lib/assets/javascripts/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ import './views/contacts/new';
import './views/devise/invitations/edit';
import './views/devise/passwords/edit';
import './views/devise/passwords/new';
import './views/phases/edit';
import './views/plans/edit_details';
import './views/plans/share';
47 changes: 47 additions & 0 deletions lib/assets/javascripts/utils/expandCollapseAll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import 'bootstrap-sass/assets/javascripts/bootstrap.min';
Copy link
Contributor

@jollopre jollopre Sep 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only import the bootstrap plugin that you are going to use (e.g. ... javascripts/bootstrap/collapse.js


/*
* This method expects an expand/collapse all link to be contained within a div with
* the '.accordion-controls' class. The div container should have a 'data-parent' that
* corresponds with the id of your accordion container. The links should have a
* 'data-toggle-direction' attribute that contains either 'show' or 'hide'.
* ------------------------------------------------------------
* <div class="accordion-controls" data-parent="accordion">
* <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
* <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
* </div>
*
* Your accordion should follow the Boostrap 3.x layout:
* ------------------------------------------------------------
* <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
* <div class="panel panel-default">
* <div class="panel-heading" role="tab" id="headingA">
* <h2 class="panel-title">
* <a role="button" data-toggle="collapse" data-parent="accordion"
* href="#collapseA" aria-controls="collapseA" aria-expanded="false">
* Section A
* </a>
* </h2>
* </div>
* </div>
* <div id="collapseA" class="panel-collapse collapse" role="tabpanel"
* aria-labelledby="headingA">
* <div class="panel-body">
* This is test section A.
* </div>
* </div>
* </div>
* </div>
*/
export default () => {
Copy link
Contributor

@jollopre jollopre Sep 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice collapsible abstraction!

$.each($('.accordion-controls'), (idx, el) => {
const accordion = $(el).attr('data-parent');

$.each($(el).children('a[data-toggle-direction]'), (i, a) => {
$(a).click((event) => {
event.preventDefault();
$(`#${accordion} div.panel-collapse`).collapse(`${$(a).attr('data-toggle-direction')}`);
});
});
});
};
Loading