active_analytics 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 19ae6afed3bb78540b74da3b73496b6177cebd46642180b50da341dcaa556028
+  data.tar.gz: afd793312a0c7023218e027c933fbd115ceb82cc57e914a0bc16d990c1dbee57
+SHA512:
+  metadata.gz: c4394e54e78f78213dc855aedc7abccd5e8909426b637c5f8fdf970c4990eb0835db6f8cf3dc6bc61acbb489c927c003d50efb64dfeb8b590d6674fdd35c8ec2
+  data.tar.gz: cc5606021a8320530d85055cf200d4e9270531720d40b7b91c26dca4aa2447bdd2f021e389f4fb2b378a2d8d5d87daece6c3dcfd3c667852d4a15197b35deba7

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Alexis Bernard
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,53 @@
+# ActiveAnalytics
+
+Trafic analytics for the win of privacy. To achieve this goal there is NO cookies, NO JavaScript, NO third parties and NO bullshit.
+
+ActiveAnalytics is a Rails engine directly mountable in your Rails application.
+
+## Installation
+Add this line to your application's Gemfile:
+```ruby
+gem 'active_analytics'
+```
+
+Then execute bundle and run the migration:
+```bash
+bundle
+rails active_analytics:install:migrations
+rails db:migrate
+```
+
+Your controllers have to call `ActiveAnalytics.record_request(request)` to record pages views:
+```ruby
+class ApplicationController < ActionController::Base
+  before_action :record_page_view
+
+  def record_page_view
+    ActiveAnalytics.record_request(request)
+  end
+end
+```
+
+This is a basic `before_action`. In case you don't want to record all page views, simply define a `skip_before_action :record_page_view` in the relevant controller.
+
+Finally just add the route to ActiveAnylytics at the desired endpoint:
+```ruby
+mount ActiveAnalytics::Engine, at: "analytics"
+```
+
+## Authentication and permissions
+ActiveAnalytics cannot guess how you handle user authentication, because it is different for all Rails applications. So you have to inject your own mechanism into `ActiveAnalytics::ApplicationController`. Create a file in `config/initializers/active_analytics.rb`:
+
+```ruby
+require_dependency "active_analytics/application_controller"
+
+module ActiveAnalytics
+  class ApplicationController
+    # include Currentuser           # This is an example that you have to change by
+    # before_action :require_admin  # your own modules and methods
+  end
+end
+```
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/active_analytics_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/active_analytics .css

data/app/assets/javascripts/active_analytics/application.js

@@ -0,0 +1,3 @@
+//= require active_analytics/ariato
+
+Ariato.launchWhenDomIsReady()

data/app/assets/javascripts/active_analytics/ariato.js

@@ -0,0 +1,746 @@
+Ariato = {}
+
+Ariato.launchWhenDomIsReady = function(root) {
+  if (document.readyState != "loading") {
+    Ariato.launch()
+    Ariato.launch(document, "aria-roledescription")
+    Ariato.launch(document, "data-ariato")
+  }
+  else
+    document.addEventListener("DOMContentLoaded", function() { Ariato.launchWhenDomIsReady(root) } )
+}
+
+Ariato.launch = function(root, attribute, parent) {
+  attribute || (attribute = "role")
+  var elements = (root || document).querySelectorAll("[" + attribute + "]")
+  for (var i = 0; i < elements.length; i++)
+    Ariato.start(elements[i], attribute, parent)
+}
+
+Ariato.mount = function() {
+}
+
+Ariato.start = function(element, attribute, parent) {
+  var names = element.getAttribute(attribute).split(" ")
+  for (var i = 0; i < names.length; i++) {
+    var name = names[i].charAt(0).toUpperCase() + names[i].slice(1) // Capitalize
+    var func = Ariato.stringToFunction("Ariato." + name) || Ariato.stringToFunction(name)
+    if (func instanceof Function)
+      Ariato.instanciate(func, element, parent)
+  }
+}
+
+Ariato.instanciate = function(func, element, parent) {
+  try {
+    controller = Object.create(func.prototype)
+    controller.parent = parent
+    controller.node = element
+    Ariato.initialize(controller, element)
+    func.call(controller, element)
+  } catch (ex) {
+    console.error(ex)
+  }
+}
+
+Ariato.stringToFunction = function(fullName) {
+  var func = window, names = fullName.split(".")
+  for (var i = 0; i < names.length; i++)
+    if (!(func = func[names[i]]))
+      return null
+  return func
+}
+
+Ariato.initialize = function(controller, container) {
+  Ariato.listenEvents(container, controller)
+  Ariato.assignRoles(container, controller)
+}
+
+Ariato.listenEvents = function(root, controller) {
+  var elements = root.querySelectorAll("[data-event]")
+  for (var i = 0; i < elements.length; i++) {
+    elements[i].getAttribute("data-event").split(" ").forEach(function(eventAndAction) {
+      var array = eventAndAction.split("->")
+      Ariato.listenEvent(controller, elements[i], array[0], array[1])
+    })
+  }
+}
+
+Ariato.listenEvent = function(controller, element, event, action) {
+  if (controller[action] instanceof Function)
+    element.addEventListener(event, controller[action].bind(controller))
+}
+
+Ariato.findRoles = function(container) {
+  var roles = {}, elements = container.querySelectorAll("[data-role]")
+  for (var i = 0; i < elements.length; i++) {
+    var name = elements[i].getAttribute("data-role")
+    roles[name] ? roles[name].push(elements[i]) : roles[name] = [elements[i]]
+  }
+  return roles
+}
+
+Ariato.assignRoles = function(container, controller) {
+  controller.roles = Ariato.findRoles(container)
+  for (var name in controller.roles)
+    if (controller.roles[name].length == 1)
+      controller[name] = controller.roles[name][0]
+}
+
+Ariato.Accordion = function(node) {
+  this.node = node
+  node.ariaAccordion = this
+  this.regions = []
+}
+
+Ariato.Accordion.addRegion = function(region) {
+  var button = region.labelledBy()
+
+  if (!button)
+    return
+
+  var accordion = region.node.parentElement.ariaAccordion || new Ariato.Accordion(region.node.parentElement)
+  accordion.addRegion(region)
+  return accordion
+}
+
+Ariato.Accordion.prototype.addRegion = function(region) {
+  this.regions.push(region)
+}
+
+Ariato.Accordion.prototype.hideRegions = function() {
+  for (var i = 0; i < this.regions.length; i++)
+    this.regions[i].hide()
+}
+
+Ariato.Accordion.prototype.showRegion = function(region) {
+  if (this.mutilpleAllowed())
+    region.expanded() ? region.hide() : region.show()
+  else {
+    this.hideRegions()
+    region.show()
+  }
+}
+
+Ariato.Accordion.prototype.mutilpleAllowed = function() {
+  return this.node.hasAttribute("data-allow-multiple")
+}
+
+Ariato.Carousel = function() {
+  this.currentSlide() || this.showSlide(this.slides()[0])
+  this.node.addEventListener("keydown", this.keydown.bind(this))
+
+  var nextButton = this.node.querySelector("[data-carousel=next]")
+  nextButton && nextButton.addEventListener("click", this.clicked.bind(this))
+
+  var previousButton = this.node.querySelector("[data-carousel=previous]")
+  previousButton.addEventListener("click", this.clicked.bind(this))
+}
+
+Ariato.Carousel.prototype.slides = function() {
+  return this.node.querySelectorAll("[aria-roledescription=slide]")
+}
+
+Ariato.Carousel.prototype.currentSlide = function() {
+  return this.node.querySelector("[aria-current=slide]")
+}
+
+Ariato.Carousel.prototype.showSlide = function(slide) {
+  var slides = this.slides()
+
+  for (var i = 0; i < slides.length; i++)
+    if (slides[i] == slide)
+      slides[i].setAttribute("aria-current", "slide")
+    else
+      slides[i].removeAttribute("aria-current")
+}
+
+Ariato.Carousel.prototype.nextSlide = function(slide) {
+  var slides = this.slides()
+  this.currentSlide()
+  for (var i = 0; i < slides.length; i++) {
+    if (slides[i] == slide)
+      slides[i].setAttribute("aria-current", "slide")
+    else
+      slides[i].removeAttribute("aria-current")
+  }
+}
+
+Ariato.Carousel.prototype.nextSlide = function(slide) {
+  var current = this.currentSlide()
+  return current && current.nextElementSibling
+}
+
+Ariato.Carousel.prototype.previousSlide = function(slide) {
+  var current = this.currentSlide()
+  return current && current.previousElementSibling
+}
+
+Ariato.Carousel.prototype.keydown = function(event) {
+  switch(event.key) {
+    case "ArrowLeft":
+      this.showSlide(this.previousOrLastSlide())
+      break
+    case "ArrowRight":
+      this.showSlide(this.nextOrFirstSlide())
+      break
+  }
+}
+
+Ariato.Carousel.prototype.clicked = function(event) {
+  switch(event.currentTarget.getAttribute("data-carousel")) {
+    case "next":
+      this.showSlide(this.previousOrLastSlide())
+      break
+    case "previous":
+      this.showSlide(this.nextOrFirstSlide())
+      break
+  }
+}
+
+Ariato.Carousel.prototype.previousOrLastSlide = function(event) {
+  var slide = this.previousSlide()
+  if (slide)
+    return slide
+  else {
+    var slides = this.slides()
+    return slides[slides.length-1]
+  }
+}
+
+Ariato.Carousel.prototype.nextOrFirstSlide = function(event) {
+  var slide = this.nextSlide()
+  if (slide)
+    return slide
+  else {
+    var slides = this.slides()
+    return slides[0]
+  }
+}
+
+Ariato.Dialog = function(node) {
+  node.setAttribute("hidden", true)
+  node.addEventListener("open", this.open.bind(this))
+  node.addEventListener("close", this.close.bind(this))
+  node.addEventListener("keydown", this.keydown.bind(this))
+}
+
+Ariato.Dialog.open = function(elementOrId) {
+  var dialog = elementOrId instanceof Element ? elementOrId : document.getElementById(elementOrId)
+  dialog && dialog.dispatchEvent(new CustomEvent("open"))
+}
+
+Ariato.Dialog.close = function(button) {
+  var dialog = Ariato.Dialog.current()
+  if (dialog && dialog.node.contains(button))
+    dialog.close()
+}
+
+Ariato.Dialog.closeCurrent = function() {
+  var dialog = Ariato.Dialog.current()
+  dialog && dialog.close()
+}
+
+Ariato.Dialog.replace = function(elementOrId) {
+  Ariato.Dialog.closeCurrent()
+  Ariato.Dialog.open(elementOrId)
+}
+
+Ariato.Dialog.close = function(button) {
+  var dialog = Ariato.Dialog.current()
+  if (dialog && dialog.node.contains(button))
+    dialog.close()
+}
+
+Ariato.Dialog.list = []
+
+Ariato.Dialog.current = function() {
+  return this.list[this.list.length - 1]
+}
+
+Ariato.Dialog.prototype.open = function(event) {
+  Ariato.Dialog.list.push(this)
+  document.addEventListener("focus", this.bindedLimitFocusScope = this.limitFocusScope.bind(this), true)
+  this.initiator = document.activeElement
+  this.node.removeAttribute("hidden")
+
+  this.lockScrolling()
+  this.createBackdrop()
+  this.createFocusStoppers()
+  this.focusFirstDescendant(this.node)
+}
+
+Ariato.Dialog.prototype.close = function(event) {
+  document.removeEventListener("focus", this.bindedLimitFocusScope, true)
+  this.node.setAttribute("hidden", true)
+  this.removeFocusStoppers()
+  this.removeBackdrop()
+  this.unlockScrolling()
+  this.initiator.focus()
+  Ariato.Dialog.list.pop()
+}
+
+Ariato.Dialog.prototype.keydown = function(event) {
+  if (event.key == "Escape")
+    this.close()
+}
+
+Ariato.Dialog.prototype.focusFirstDescendant = function(parent) {
+  var focusable = ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"]
+
+  for (var i = 0; i < parent.children.length; i++) {
+    var child = parent.children[i]
+    if (focusable.indexOf(child.nodeName) != -1 && !child.disabled && child.type != "hidden") {
+      child.focus()
+      return child
+    }
+    else {
+      var focus = this.focusFirstDescendant(child)
+      if (focus) return focus
+    }
+  }
+}
+
+Ariato.Dialog.prototype.limitFocusScope = function(event) {
+  if (this == Ariato.Dialog.current())
+    if (!this.node.contains(event.target))
+      this.focusFirstDescendant(this.node)
+}
+
+Ariato.Dialog.prototype.lockScrolling = function() {
+  document.body.style.position = "fixed";
+  document.body.style.top = "-" + window.scrollY + "px";
+}
+
+Ariato.Dialog.prototype.unlockScrolling = function() {
+  var scrollY = document.body.style.top
+  document.body.style.position = ""
+  document.body.style.top = ""
+  window.scrollTo(0, parseInt(scrollY || "0") * -1)
+}
+
+Ariato.Dialog.prototype.createFocusStoppers = function() {
+  this.node.parentNode.insertBefore(this.focusStopper1 = document.createElement("div"), this.node)
+  this.focusStopper1.tabIndex = 0
+
+  this.node.parentNode.insertBefore(this.focusStopper2 = document.createElement("div"), this.node.nextSibling)
+  this.focusStopper2.tabIndex = 0
+}
+
+Ariato.Dialog.prototype.removeFocusStoppers = function() {
+  this.focusStopper1 && this.focusStopper1.parentNode.removeChild(this.focusStopper1)
+  this.focusStopper2 && this.focusStopper2.parentNode.removeChild(this.focusStopper2)
+}
+
+Ariato.Dialog.prototype.createBackdrop = function() {
+  this.backdrop = document.createElement("div")
+  this.backdrop.classList.add("dialog-backdrop")
+  this.node.parentNode.insertBefore(this.backdrop, this.node)
+  this.backdrop.appendChild(this.node)
+}
+
+Ariato.Dialog.prototype.removeBackdrop = function() {
+  this.backdrop.parentNode.insertBefore(this.node, this.backdrop)
+  this.backdrop.parentNode.removeChild(this.backdrop)
+  this.backdrop = null
+}
+
+Ariato.Alertdialog = Ariato.Dialog
+
+Ariato.MenuBar = function() {
+  this.node.addEventListener("keydown", this.keyDown.bind(this))
+}
+
+// Ariato defines role="menubar" but MenuBar in camel case is nicer
+Ariato.Menubar = Ariato.MenuBar
+
+Ariato.Menubar.prototype.keyDown = function(event) {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault()
+      if (event.target.hasAttribute("aria-haspopup"))
+        this.openItem(event.target)
+      else
+        this.focusNextItem(event.target)
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      if (event.target.hasAttribute("aria-haspopup"))
+        this.openItem(event.target)
+      else
+        this.focusPreviousItem(event.target)
+      break
+    case "ArrowRight":
+      // Open parent next menu
+      // Open child menu
+      // Focus next item
+      this.openNextMenu(event.target)
+      break
+      if (event.target.hasAttribute("aria-haspopup"))
+        this.openItem(event.target)
+      else
+        this.openNextMenu(this.findParentMenu(event.target))
+    case "ArrowLeft":
+      this.openPreviousMenu(event.target)
+      break
+    case "Escape":
+      this.closeAllExcept()
+      break
+  }
+}
+
+Ariato.Menubar.prototype.closeAllExcept = function(item) {
+  var menus = this.node.querySelectorAll("[role=menu]")
+  for (var i = 0; i < menus.length; i++)
+    menus[i].style.display = menus[i].contains(item) ? "block" : null
+}
+
+Ariato.Menubar.prototype.openItem = function(item) {
+  var menu = item.parentElement.querySelector("[role=menu]")
+  item.setAttribute("aria-expanded", true)
+  var subItem = menu.querySelector("[role=menuitem]")
+  if (subItem) {
+    this.closeAllExcept(subItem)
+    subItem.focus()
+  } else {
+    this.closeAllExcept(item)
+    item.focus()
+  }
+}
+
+Ariato.Menubar.prototype.openNextMenu = function(item) {
+  var menu = this.findNextMenu(item)
+  menu && this.openItem(menu.parentElement.querySelector("[role=menuitem]"))
+}
+
+Ariato.Menubar.prototype.openPreviousMenu = function(item) {
+  var menu = this.findPreviousMenu(item)
+  menu && this.openItem(menu.parentElement.querySelector("[role=menuitem]"))
+}
+
+Ariato.Menubar.prototype.focusNextItem = function(item) {
+  var nextItem = this.findNextItem(item)
+  nextItem && nextItem.focus()
+}
+
+Ariato.Menubar.prototype.focusPreviousItem = function(item) {
+  var previousItem = this.findPreviousItem(item)
+  previousItem && previousItem.focus()
+}
+
+Ariato.Menubar.prototype.findParentMenu = function(item) {
+  var parent = item.parentElement
+  var menuRoles = ["menu", "menubar"]
+  while (parent && !menuRoles.includes(parent.getAttribute("role")))
+    parent = parent.parentElement
+  return parent
+}
+
+Ariato.Menubar.prototype.findNextItem = function(item) {
+  var menu = this.findParentMenu(item)
+  var items = menu.querySelectorAll("[role=menuitem]")
+  for (var i = 0; i < items.length; i++)
+    if (items[i] == item)
+      return items[i+1]
+}
+
+Ariato.Menubar.prototype.findPreviousItem = function(item) {
+  var menu = this.findParentMenu(item)
+  var items = menu.querySelectorAll("[role=menuitem]")
+  for (var i = 0; i < items.length; i++)
+    if (items[i] == item)
+      return items[i-1]
+}
+
+Ariato.Menubar.prototype.findNextMenu = function(item) {
+  var menus = this.rootMenus()
+  for (var i = 0; i < menus.length; i++)
+    if (menus[i].contains(item))
+      return menus[i+1]
+
+  var parent = item.parentElement
+  for (var i = 0; i < menus.length; i++)
+    if (parent.contains(menus[i]))
+      return menus[i+1]
+}
+
+Ariato.Menubar.prototype.findPreviousMenu = function(item) {
+  var menus = this.rootMenus()
+  for (var i = 0; i < menus.length; i++)
+    if (menus[i].contains(item))
+      return menus[i-1]
+
+  var parent = item.parentElement
+  for (var i = 0; i < menus.length; i++)
+    if (parent.contains(menus[i]))
+      return menus[i-1]
+}
+
+Ariato.Menubar.prototype.rootMenus = function() {
+  return this.node.querySelectorAll("li > [role=menu]")
+}
+
+Ariato.MenuButton = function(node) {
+  this.node = this.button = node
+  this.menu = document.getElementById(this.button.getAttribute("aria-controls"))
+
+  this.menu.addEventListener("keydown", this.keydown.bind(this))
+  this.button.addEventListener("keydown", this.keydown.bind(this))
+  
+  this.button.addEventListener("click", this.clicked.bind(this))
+  window.addEventListener("click", this.windowClicked.bind(this), true)
+}
+
+Ariato.MenuButton.prototype.clicked = function(event) {
+  this.node.getAttribute("aria-expanded") == "true" ? this.close() :  this.open()
+}
+
+Ariato.MenuButton.prototype.windowClicked = function() {
+  if (!this.node.contains(event.target) && this.node.getAttribute("aria-expanded") == "true")
+    this.close()
+}
+
+Ariato.MenuButton.prototype.open = function() {
+  this.button.setAttribute("aria-expanded", "true")
+  this.menu.style.display = "block"
+}
+
+Ariato.MenuButton.prototype.close = function() {
+  this.button.setAttribute("aria-expanded", "false")
+  this.menu.style.display = null
+}
+
+Ariato.MenuButton.prototype.keydown = function(event) {
+  switch(event.key) {
+    case "Escape":
+      this.close()
+      break
+    case "ArrowDown":
+      event.preventDefault()
+      this.focusNextItem()
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      this.focusPreviousItem()
+      break
+    case "Tab":
+      this.close()
+    case "Home":
+    case "PageUp":
+      event.preventDefault()
+      this.items()[0].focus()
+      break
+    case "End":
+    case "PageDown":
+      event.preventDefault()
+      var items = this.items()
+      items[items.length-1].focus()
+      break
+  }
+}
+
+Ariato.MenuButton.prototype.items = function() {
+  return this.menu.querySelectorAll("[role=menuitem]")
+}
+
+Ariato.MenuButton.prototype.currentItem = function() {
+  return this.menu.querySelector("[role=menuitem]:focus")
+}
+
+Ariato.MenuButton.prototype.nextItem = function() {
+  var items = this.items()
+  var current = this.currentItem()
+  if (!current) return items[0]
+  for (var i = 0; i < items.length; i++) {
+    if (items[i] == current)
+      return items[i+1]
+  }
+}
+
+Ariato.MenuButton.prototype.previousItem = function() {
+  var items = this.items()
+  var current = this.currentItem()
+  if (!current) return items[0]
+  for (var i = 0; i < items.length; i++) {
+    if (items[i] == current)
+      return items[i-1]
+  }
+}
+
+Ariato.MenuButton.prototype.focusNextItem = function() {
+  var item = this.nextItem()
+  item && item.focus()
+}
+
+Ariato.MenuButton.prototype.focusPreviousItem = function() {
+  var item = this.previousItem()
+  item && item.focus()
+}
+
+Ariato.Menu = function(node) {
+  var button = this.labelledBy()
+  button && new Ariato.MenuButton(button)
+}
+
+Ariato.Menu.prototype.labelledBy = function() {
+  return document.getElementById(this.node.getAttribute("aria-labelledby"))
+}
+
+/*
+ * A region is a role="region" element which represents a panel of an accordion.
+ * It is controlled by a button.
+ */
+Ariato.Region = function(node) {
+  this.node = node
+  var labelledBy = this.labelledBy()
+  
+  if (!labelledBy)
+    return
+
+  this.accordion = Ariato.Accordion.addRegion(this)
+  labelledBy.addEventListener("click", this.buttonClicked.bind(this))
+}
+
+Ariato.Region.prototype.labelledBy = function() {
+  return document.getElementById(this.node.getAttribute("aria-labelledby"))
+}
+
+Ariato.Region.prototype.buttonClicked = function(event) {
+  this.accordion.showRegion(this)
+}
+
+Ariato.Region.prototype.show = function(event) {
+  this.labelledBy().setAttribute("aria-expanded", true)
+  this.node.removeAttribute("hidden")
+}
+
+Ariato.Region.prototype.hide = function(event) {
+  this.labelledBy().setAttribute("aria-expanded", false)
+  this.node.setAttribute("hidden", "")
+}
+
+Ariato.Region.prototype.expanded = function() {
+  return !this.node.hasAttribute("hidden")
+}
+
+Ariato.Tablist = function(node) {
+  this.node = node
+  var tabs = this.tabs()
+  for (var i = 0; i < tabs.length; i++) {
+    tabs[i].addEventListener("click", this.click.bind(this))
+    tabs[i].addEventListener("keydown", this.keydown.bind(this))
+    tabs[i].addEventListener("keyup", this.keyup.bind(this))
+  }
+  tabs[0] && this.showTab(tabs[0])
+}
+
+Ariato.Tablist.prototype.click = function(event) {
+  this.showTab(event.currentTarget)
+}
+
+Ariato.Tablist.prototype.tabs = function() {
+  return this.node.querySelectorAll("[role=tab]")
+}
+
+Ariato.Tablist.prototype.activeTab = function() {
+  return this.node.querySelector("[aria-selected=true]")
+}
+
+Ariato.Tablist.prototype.panels = function() {
+  var tabs = this.tabs(), result = []
+  for (var i = 0; i < tabs.length; i++)
+    result.push(document.getElementById(tabs[i].getAttribute("aria-controls")))
+  return result
+}
+
+Ariato.Tablist.prototype.showTab = function(tab) {
+  this.hidePanels()
+  tab.removeAttribute("tabindex")
+  tab.setAttribute("aria-selected", "true")
+  document.getElementById(tab.getAttribute("aria-controls")).style.display = null
+  tab.focus()
+}
+
+Ariato.Tablist.prototype.hidePanels = function() {
+  var tabs = this.tabs()
+  for (var i = 0; i < tabs.length; i++) {
+    tabs[i].setAttribute("tabindex", "-1");
+    tabs[i].setAttribute("aria-selected", "false");
+  }
+
+  var panels = this.panels()
+  for (var i = 0; i < panels.length; i++)
+    panels[i].style.display = "none"
+}
+
+Ariato.Tablist.prototype.keydown = function(event) {
+  switch (event.key) {
+    case "End":
+      var tabs = this.tabs()
+      event.preventDefault()
+      this.showTab(this.tabs()[tabs.length - 1])
+      break
+    case "Home":
+      event.preventDefault()
+      this.showTab(this.tabs()[0])
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      this.showPrevious()
+      break
+    case "ArrowDown":
+      event.preventDefault()
+      this.showNext()
+      break
+  }
+}
+
+Ariato.Tablist.prototype.keyup = function(event) {
+  if (event.key == "ArrowLeft")
+    this.showPrevious()
+  else if (event.key == "ArrowRight")
+    this.showNext(event)
+  // TODO delete
+}
+
+Ariato.Tablist.prototype.showNext = function() {
+  var tabs = this.tabs()
+  var index = Array.prototype.indexOf.call(tabs, this.activeTab())
+  tabs[index + 1] && this.showTab(tabs[index + 1])
+}
+
+Ariato.Tablist.prototype.showPrevious = function() {
+  var tabs = this.tabs()
+  var index = Array.prototype.indexOf.call(tabs, this.activeTab())
+  tabs[index - 1] && this.showTab(tabs[index - 1])
+}
+
+Ariato.ThemeSwitcher = function() {
+  Ariato.ThemeSwitcher.initialize()
+  this.node.addEventListener("click", this.change.bind(this))
+}
+
+Ariato.ThemeSwitcher.initialize = function() {
+  if (!this.initialized) {
+    console.log("initialize")
+    this.initialized = true
+    this.update()
+  }
+}
+
+Ariato.ThemeSwitcher.update = function() {
+  var name = localStorage.getItem("ariato-theme")
+  document.documentElement.classList.forEach(function(theme) {
+    theme.startsWith("theme-") && document.documentElement.classList.remove(theme)
+  })
+  document.documentElement.classList.add("theme-" + name)
+
+  var buttons = document.querySelectorAll("[data-ariato='ThemeSwitcher']")
+  for (var i = 0; i < buttons.length; i++)
+    buttons[i].setAttribute("aria-pressed", buttons[i].getAttribute("data-theme") == name)
+}
+
+Ariato.ThemeSwitcher.prototype.change = function(event) {
+  var name = event.currentTarget.getAttribute("data-theme")
+  localStorage.setItem("ariato-theme", name)
+  name && Ariato.ThemeSwitcher.update(name)
+}