11 changed files with 325 additions and 0 deletions
@ -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); |
@ -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…
Reference in new issue