From 1cbaf2b2de3a838e5a5d63a31824a6f25ce2f3eb Mon Sep 17 00:00:00 2001 From: Norore Date: Sun, 3 Feb 2019 18:10:31 +0100 Subject: [PATCH] Ajout index config --- app/assets/javascripts/application.coffee | 12 ++ app/assets/javascripts/config.coffee | 8 ++ app/assets/javascripts/tabs.js | 149 +++++++++++++++++++++ app/assets/stylesheets/application.sass | 19 +++ app/assets/stylesheets/config.scss | 3 + app/controllers/config_controller.rb | 8 ++ app/helpers/config_helper.rb | 2 + app/views/config/index.html.erb | 103 ++++++++++++++ config/routes.rb | 1 + spec/controllers/config_controller_spec.rb | 5 + spec/helpers/config_helper_spec.rb | 15 +++ 11 files changed, 325 insertions(+) create mode 100644 app/assets/javascripts/config.coffee create mode 100644 app/assets/javascripts/tabs.js create mode 100644 app/assets/stylesheets/config.scss create mode 100644 app/controllers/config_controller.rb create mode 100644 app/helpers/config_helper.rb create mode 100644 app/views/config/index.html.erb create mode 100644 spec/controllers/config_controller_spec.rb create mode 100644 spec/helpers/config_helper_spec.rb diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee index 4cfe101..c88f9a1 100644 --- a/app/assets/javascripts/application.coffee +++ b/app/assets/javascripts/application.coffee @@ -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() diff --git a/app/assets/javascripts/config.coffee b/app/assets/javascripts/config.coffee new file mode 100644 index 0000000..47f146d --- /dev/null +++ b/app/assets/javascripts/config.coffee @@ -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() diff --git a/app/assets/javascripts/tabs.js b/app/assets/javascripts/tabs.js new file mode 100644 index 0000000..acc50df --- /dev/null +++ b/app/assets/javascripts/tabs.js @@ -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); diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass index 3e8a6d0..afc4e9b 100644 --- a/app/assets/stylesheets/application.sass +++ b/app/assets/stylesheets/application.sass @@ -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 diff --git a/app/assets/stylesheets/config.scss b/app/assets/stylesheets/config.scss new file mode 100644 index 0000000..b649477 --- /dev/null +++ b/app/assets/stylesheets/config.scss @@ -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/ diff --git a/app/controllers/config_controller.rb b/app/controllers/config_controller.rb new file mode 100644 index 0000000..d5fc2e4 --- /dev/null +++ b/app/controllers/config_controller.rb @@ -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 diff --git a/app/helpers/config_helper.rb b/app/helpers/config_helper.rb new file mode 100644 index 0000000..74a549a --- /dev/null +++ b/app/helpers/config_helper.rb @@ -0,0 +1,2 @@ +module ConfigHelper +end diff --git a/app/views/config/index.html.erb b/app/views/config/index.html.erb new file mode 100644 index 0000000..2d03d18 --- /dev/null +++ b/app/views/config/index.html.erb @@ -0,0 +1,103 @@ +
+ +
+
+
    + <% @groups.each do |group| %> +
  • <%= group.name||group.id %>
    • + <% if group.targets %> +
      +
    • targets:
      • +
        + <% group.targets.each do |target| %> +
      • <%= :name %>: <%= target.name||target.id %>
        • + <% if target.css %> +
      • <%= :css %>: <%= content_tag :code do target.css end %>
        • + <% else %> +
      • <%= :from %>: <%= content_tag :code do target.from end %>
        • +
      • <%= :to %>: <%= content_tag :code do target.to end %>
        • + <% end %> + <% end %> +
      +
    + <% end %> + <% if group.template %> +
      +
    • template:
      • +
        + <% group.template.each do |template| %> +
      • <%= :template %>: <%= template.name||template.id %>
        • + <% end %> +
      +
    + <% end %> + <% unless group.sites.empty? %> +
      +
    • list of <%= group.sites.count %> sites:
      • + +
    + <% end %> + <% end %> +
+
+
+
    + <% @templates.each do |template| %> +
  • <%= template.name||template.id %>
    • + <% unless template.targets.empty? %> +
      +
    • targets:
      • +
        + <% template.targets.each do |target| %> +
      • <%= :name %>: <%= target.name||target.id %>
        • + <% if target.css %> +
      • <%= :css %>: <%= content_tag :code do target.css end %>
        • + <% else %> +
      • <%= :from %>: <%= content_tag :code do target.from end %>
        • +
      • <%= :to %>: <%= content_tag :code do target.to end %>
        • + <% end %> + <% end %> +
      +
    + <% end %> + <% end %> +
+
+
+
    + <% @sites.each do |site| %> +
  • <%= link_to (site.name||site.url), site %>
    • + <% unless site.all_targets.empty? %> +
      +
    • targets:
      • +
        + <% site.all_targets.each do |target| %> +
      • <%= :name %>: <%= target.name||target.id %>
        • + <% if target.css %> +
      • <%= :css %>: <%= content_tag :code do target.css end %>
        • + <% else %> +
      • <%= :from %>: <%= content_tag :code do target.from end %>
        • +
      • <%= :to %>: <%= content_tag :code do target.to end %>
        • + <% end %> + <% end %> +
      +
    + <% end %> + <% if site.template %> +
      +
    • template: <%= site.template.name||site.template.id %>
      • +
    + <% end %> + <% end %> +
+
+
+
diff --git a/config/routes.rb b/config/routes.rb index 3b0d03b..d737246 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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 diff --git a/spec/controllers/config_controller_spec.rb b/spec/controllers/config_controller_spec.rb new file mode 100644 index 0000000..c21666e --- /dev/null +++ b/spec/controllers/config_controller_spec.rb @@ -0,0 +1,5 @@ +require 'rails_helper' + +RSpec.describe ConfigController, type: :controller do + +end diff --git a/spec/helpers/config_helper_spec.rb b/spec/helpers/config_helper_spec.rb new file mode 100644 index 0000000..9b340d8 --- /dev/null +++ b/spec/helpers/config_helper_spec.rb @@ -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