Ajout index config

master
Norore 4 years ago
parent 88aa119015
commit 1cbaf2b2de
  1. 12
      app/assets/javascripts/application.coffee
  2. 8
      app/assets/javascripts/config.coffee
  3. 149
      app/assets/javascripts/tabs.js
  4. 19
      app/assets/stylesheets/application.sass
  5. 3
      app/assets/stylesheets/config.scss
  6. 8
      app/controllers/config_controller.rb
  7. 2
      app/helpers/config_helper.rb
  8. 103
      app/views/config/index.html.erb
  9. 1
      config/routes.rb
  10. 5
      spec/controllers/config_controller_spec.rb
  11. 15
      spec/helpers/config_helper_spec.rb

@ -1 +1,13 @@
#= require rails-ujs
#= require jquery
#= require_tree .
$(document).on 'click', 'form .remove_fields', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('fieldset').hide()
event.preventDefault()
$(document).on 'click', 'form .add_fields', (event) ->
time = new Date().getTime()
regexp = new RegExp($(this).data('id'), 'g')
$(this).before($(this).data('fields').replace(regexp, time))
event.preventDefault()

@ -0,0 +1,8 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$(document).on 'click', '.sites button', (event) ->
ul = $(this).parent().parent()
sites = $(ul).find('ul')
sites.toggle()

@ -0,0 +1,149 @@
/**!
Tabs
Manages tabs with content
*/
(function($) {
$.tabs = function(el, options) {
// Default settings values
var defaults = {
selectorLinks: '.tabs-menu-link',
selectorList: '.tabs-menu',
selectorListItems: 'li',
selectorContent: '.tabs-content-item',
classActive: 'is-active'
};
var plugin = this;
plugin.settings = {};
var $element = $(el),
element = el;
// Plugin initialization
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
updateSettingsFromHTMLData();
registerEvents();
plugin.switchContent(null);
setAriaAttributes();
};
// Reads plugin settings from HTML data-* attributes (camelCase)
var updateSettingsFromHTMLData = function() {
var data = $element.data();
for (var dat in data) plugin.settings[dat] = data[dat];
};
// Set initial ARIA attributes on elements
var setAriaAttributes = function() {
$(plugin.settings.selectorList,$element).attr('role','tablist').find(plugin.settings.selectorListItems).attr('role','presentation');
$(plugin.settings.selectorList,$element).find(plugin.settings.selectorLinks).attr({'role':'tab','tabindex':'-1'}).each(function(index,item) {
var target = $(this).attr('href');
// Establish relationships between tabs (links) and tabpanels
if(target) {
$(this).attr('id','tablink'+index).attr('aria-controls',target.replace('#',''));
$(target).attr('aria-labelledby','tablink'+index).attr('tabindex','0').attr('role','tabpanel');
}
// If the link is marked active with the class, then tabindex 0
if($(this).hasClass(plugin.settings.classActive)) {
$(this).attr('tabindex','0');
if(target) plugin.switchContent(target);
}
});
};
// Set event handlers on HTML elements (private method)
var registerEvents = function() {
// Navigate with clicks
$element.off('click.tabs', plugin.settings.selectorLinks).on('click.tabs', plugin.settings.selectorLinks, function(e) {
plugin.switchClasses($(this));
plugin.switchContent($(this).attr('href'));
e.preventDefault();
// Navigate with arrow keys
}).off('keydown.tabs').on('keydown.tabs', function(e) {
if(e.metaKey || e.altKey) return; // Do not react with modifier keys
switch (e.keyCode) {
case 37:
case 38:
plugin.prevTab();
e.preventDefault();
break;
case 39:
case 40:
plugin.nextTab();
e.preventDefault();
break;
default:
break;
}
});
};
// Switch active classes for tabs (public method)
plugin.switchClasses = function($el) {
// Other elements
$(plugin.settings.selectorLinks,$element).removeClass(plugin.settings.classActive).removeAttr('aria-selected').attr('tabindex','-1');
// Current element
$el.addClass(plugin.settings.classActive).attr({'aria-selected':'true','tabindex':'0'}).focus();
};
// Switch active classes for content panels (public method)
plugin.switchContent = function(targetId) {
var $target;
// Other elements
$(plugin.settings.selectorContent,$element).attr({'aria-hidden':'true'});
// Target element
if(targetId) {
$target = $(targetId,$element);
} else {
$target = $(plugin.settings.selectorContent,$element).first();
}
$target.attr('tabindex','0').removeAttr('aria-hidden');
};
// Switch to next tab
plugin.nextTab = function() {
plugin.goTab(1);
};
// Switch to next tab
plugin.prevTab = function() {
plugin.goTab(-1);
};
// Switch to prev/next tab
plugin.goTab = function(direction) {
var $current = $(plugin.settings.selectorLinks,$element).filter('.'+plugin.settings.classActive);
var $links = $(plugin.settings.selectorLinks,$element);
var eq = $links.index($current)+direction;
if(eq<0) return; // Prevent backward focus on last element
var $next = $links.eq(eq);
$next.trigger('click.tabs');
};
// Initialization
plugin.init();
};
$.fn.tabs = function(options) {
return this.each(function() {
if (undefined === $(this).data('tabs')) {
var plugin = new $.tabs(this, options);
$(this).data('tabs', plugin);
}
});
};
$(document).ready(function() {
// Launch plugin on target element
$('.js-tabs').tabs();
});
})(jQuery);

@ -90,3 +90,22 @@ main
a
color: $link-color
ul.nostyle,
li.nostyle
list-style: '-'
margin-left: 1rem
padding: 0
ul.hidden
display: none
nav.tabs-menu
color: $link-color
border-bottom-color: $border-color-base
.tabs-menu-link
color: $border-color-base
.tabs-menu-link.is-active
font-weight: bold
border-bottom-color: $border-color-base
text-decoration: none

@ -0,0 +1,3 @@
// Place all the styles related to the config controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@ -0,0 +1,8 @@
class ConfigController < ApplicationController
def index
@groups = Group.all
@templates = ::Template.all
@targets = Target.all
@sites = Site.all.order(:name, :url)
end
end

@ -0,0 +1,2 @@
module ConfigHelper
end

@ -0,0 +1,103 @@
<div class="tabs js-tabs">
<nav class="tabs-menu">
<a href="#tab1" class="tabs-menu-link is-active"><%= :groups %></a>
<a href="#tab2" class="tabs-menu-link"><%= :templates %></a>
<a href="#tab3" class="tabs-menu-link"><%= :sites %></a>
</nav>
<div class="tabs-content">
<div id="tab1" class="tabs-content-item">
<ul class="">
<% @groups.each do |group| %>
<li><%= group.name||group.id %></li>
<% if group.targets %>
<ul class="">
<li>targets:</li>
<ul class="">
<% group.targets.each do |target| %>
<li><%= :name %>: <%= target.name||target.id %></li>
<% if target.css %>
<li><%= :css %>: <%= content_tag :code do target.css end %></li>
<% else %>
<li><%= :from %>: <%= content_tag :code do target.from end %></li>
<li><%= :to %>: <%= content_tag :code do target.to end %></li>
<% end %>
<% end %>
</ul>
</ul>
<% end %>
<% if group.template %>
<ul class="">
<li>template:</li>
<ul>
<% group.template.each do |template| %>
<li><%= :template %>: <%= template.name||template.id %></li>
<% end %>
</ul>
</ul>
<% end %>
<% unless group.sites.empty? %>
<ul class="sites">
<li>list of <%= group.sites.count %> sites: <button>+</button></li>
<ul class="hidden">
<% group.sites.order(:name, :url).each do |site| %>
<li><%= link_to (site.name || site.url), site %></li>
<% end %>
</ul>
</ul>
<% end %>
<% end %>
</ul>
</div>
<div id="tab2" class="tabs-content-item">
<ul class="">
<% @templates.each do |template| %>
<li><%= template.name||template.id %></li>
<% unless template.targets.empty? %>
<ul class="">
<li>targets:</li>
<ul class="">
<% template.targets.each do |target| %>
<li><%= :name %>: <%= target.name||target.id %></li>
<% if target.css %>
<li><%= :css %>: <%= content_tag :code do target.css end %></li>
<% else %>
<li><%= :from %>: <%= content_tag :code do target.from end %></li>
<li><%= :to %>: <%= content_tag :code do target.to end %></li>
<% end %>
<% end %>
</ul>
</ul>
<% end %>
<% end %>
</ul>
</div>
<div id="tab3" class="tabs-content-item">
<ul class="">
<% @sites.each do |site| %>
<li><%= link_to (site.name||site.url), site %></li>
<% unless site.all_targets.empty? %>
<ul class="">
<li>targets:</li>
<ul class="">
<% site.all_targets.each do |target| %>
<li><%= :name %>: <%= target.name||target.id %></li>
<% if target.css %>
<li><%= :css %>: <%= content_tag :code do target.css end %></li>
<% else %>
<li><%= :from %>: <%= content_tag :code do target.from end %></li>
<li><%= :to %>: <%= content_tag :code do target.to end %></li>
<% end %>
<% end %>
</ul>
</ul>
<% end %>
<% if site.template %>
<ul>
<li>template: <%= site.template.name||site.template.id %></li>
</ul>
<% end %>
<% end %>
</ul>
</div>
</div>
</div>

@ -1,4 +1,5 @@
Rails.application.routes.draw do
resources :diffs, only: %i[index show]
resources :sites, only: %i[index show]
resources :config, only: %i[index]
end

@ -0,0 +1,5 @@
require 'rails_helper'
RSpec.describe ConfigController, type: :controller do
end

@ -0,0 +1,15 @@
require 'rails_helper'
# Specs in this file have access to a helper object that includes
# the ConfigHelper. For example:
#
# describe ConfigHelper do
# describe "string concat" do
# it "concats two strings with spaces" do
# expect(helper.concat_strings("this","that")).to eq("this that")
# end
# end
# end
RSpec.describe ConfigHelper, type: :helper do
pending "add some examples to (or delete) #{__FILE__}"
end
Loading…
Cancel
Save