Le sélecteur de régions et l'éditeur de tags ont évolué graphiquement

Gemfile

@@ -49,6 +49,9 @@ gem 'modernizr-rails'
 # Patch older browsers so they do understand html5
 gem 'webshims-rails'
 
+# Improve the html select element
+gem 'select2-rails'
+
 gem 'devise'
 gem 'devise-i18n'
 gem 'rails-i18n'

Gemfile.lock

@@ -260,6 +260,8 @@ GEM
     sdoc (0.4.1)
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
+    select2-rails (3.5.9)
+      thor (~> 0.14)
     sexp_processor (4.4.4)
     simple_calendar (1.1.5)
       rails (>= 3.0)
@@ -342,6 +344,7 @@ DEPENDENCIES
   redcarpet
   sass-rails (~> 4.0.1)
   sdoc (~> 0.4.0)
+  select2-rails
   simple_calendar
   spring
   sqlite3

app/assets/javascripts/application.js.coffee

@@ -17,6 +17,8 @@
 #= require tinymce-jquery
 #= require modernizr
 #= require webshims/polyfiller
+#= require select2
+#= require select2_locale_fr
 #= require leaflet
 #= require_tree .
 
@@ -44,3 +46,5 @@ $(document).ready ->
   if !Modernizr.testAllProps('forceBrokenImageIcon')
     $('img.favicon').one 'error', ->
       $(this).css visibility: 'hidden'
+
+  # $('select').select2()

app/assets/javascripts/events.js.coffee

@@ -1,7 +1,5 @@
 $(document).ready ->
-  $('form.region_selector select').change ->
+  # Setup the graphical editor for event's description
-    this.form.submit()
-
   tinyMCE.init
     selector: 'textarea#event_description',
     menubar : false,
@@ -22,6 +20,16 @@ $(document).ready ->
       table, fullscreen, searchreplace, media, insertdatetime, visualblocks,
       visualchars, wordcount, contextmenu, code'
 
+  # Manage event tags edition
+  $('#event_tags').each ->
+    elt = $(this)
+    $.ajax
+      url: '/tags.json'
+    .done (data) ->
+      tags = jQuery.map data, (n) -> n[0]
+
+      elt.select2 tags: tags, separator: [' '], tokenSeparators: [' ']
+
 $(document).on 'page:receive', ->
   # Delete existing tinymce editors, very important in the turbolinks context!
   tinymce.remove()

app/assets/stylesheets/all.css.sass

@@ -3,11 +3,12 @@
 
 *
   height: auto
-  margin: 0 auto
   padding: 0
   max-width: 100%
   box-sizing: border-box
   line-height: 1em
+  margin-left: auto
+  margin-right: auto
 
 html
   color: black
@@ -102,7 +103,7 @@ header.top
     font-size: 1.2em
     font-style: italic
     font-weight: normal
-    margin-bottom: 22px
+    margin-bottom: 21px
 
 main
   position: relative
@@ -155,7 +156,7 @@ label
   border: 1px solid darkgray
   @include box-shadow(1px 1px 2px lightgray)
   @include border-radius(0.4em)
-input, textarea, select, a.button
+input, textarea, select, a.button, .select2-container ul
   color: black
   margin: 3px 0
   border: 1px solid darkgray
@@ -235,3 +236,13 @@ footer.bottom nav
   font-size: 10vw
   vertical-align: baseline
   @include text-shadow(0 0 4px gray)
+
+.select2-container ul
+  min-width: 6em
+.select2-container-multi.select2-container-active .select2-choices, .select2-drop
+  border: none !important
+  @include box-shadow(1px 1px 4px gray)
+// Otherwise the cross to remove tags is centered
+.select2-container *, .select2-choices *
+  margin: initial
+  @include transition-duration(0)

app/assets/stylesheets/application.css.sass

@@ -10,9 +10,9 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
+ *= require select2
  *= require leaflet
  *= require_tree .
- *= require_self
  */
 
 @import 'awesome_mixins'

app/assets/stylesheets/events.css.sass

@@ -1,30 +1,11 @@
 @import compass
 
-form.region_selector
-  left: 0
-  width: 100%
-  position: absolute
-  max-width: 100%
-  margin-top: 2.45em
-  label
-    display: none
-
 header.calendar-header
   font-size: 1.5em
   margin-top: 1em
   font-weight: bolder
-  margin-bottom: 0.1em
-  &.year
-    margin-top: 1em
-    margin-bottom: 2.55em
-    a
-      margin: 0
   a
     font-weight: normal
-    &.month_selector
-      display: block
-      font-weight: bolder
-      margin-bottom: -2.1em
     &:first-child, &:last-child
       margin: 0 0.3em
 
@@ -36,7 +17,6 @@ header.calendar-header
 body.events.index table
   width: 90%
   max-width: 100%
-  margin-top: 3.5em
   tr
     th
       padding-bottom: 0.35em

app/assets/stylesheets/region.css.sass

@@ -1,3 +1,32 @@
-body.stats
+@import compass
+
+.region_selector
+  display: inline-block
   h3
-    text-align: center
+    margin: 0
+    .placeholder
+      color: gray
+  ul
+    margin: 0
+    padding: 1em
+    display: none
+    position: absolute
+    list-style: none
+    background-color: white
+    @include box-shadow(1px 1px 4px gray)
+    @include border-radius(3px)
+    li
+      margin: 0
+      a
+        display: block
+        padding: 0.2em
+        border-top: solid thin black
+        &:hover
+          @include text-shadow(1px 1px 0.2em gray)
+    li:first-child a
+      border-top: none
+  &:hover ul
+    display: block
+
+body.stats h3
+  text-align: center

app/controllers/tags_controller.rb

@@ -3,12 +3,15 @@ class TagsController < InheritedResources::Base
   def index
     @tags = Event
       .pluck(:tags)
-      .join(' ')
+      .join(' ').split.group_by { |i| i }
-      .split
-      .group_by { |i| i }
       .reject { |_k, v| v.size < 2 }
       .map { |k, v| [k, v.size] }
       .sort
+
+    respond_to do |format|
+      format.html
+      format.json { render json: @tags.to_json }
+    end
   end
 
   def show

app/views/events/index.html.haml

@@ -3,15 +3,7 @@
 -# Seems necessary, for the time being, to ensure calendar is changing days correctly
 - Time.zone = 'Paris'
 
-%form.region_selector
+%nav.region_selector= render '/regions/selector'
-  - if params[:start_date]
-    = hidden_field_tag :start_date, params[:start_date]
-  - if params[:year]
-    = hidden_field_tag :year, params[:year]
-  = label_tag :region, Region.model_name.human
-  = select_tag :region,
-    options_from_collection_for_select(Region.all, 'id', 'name', params[:region]),
-    prompt: t('.all_regions')
 
 - if params[:year]
   -# Whole year calendar

app/views/regions/_selector.haml

@@ -0,0 +1,24 @@
+-# Display the currently selected region
+%h3
+  - if params[:region]
+    = Region.find params[:region]
+    %em.fa.fa-chevron-down
+  - else
+    %span.placeholder
+      =t '.all_regions'
+      %em.fa.fa-chevron-down
+
+-# Choose a region to filter events with
+%ul
+  %li
+    = link_to t('.all_regions'), region: nil,
+      start_date: params[:start_date],
+      year: params[:year],
+      tag: params[:tag]
+
+  - Region.all.each do |region|
+    %li
+      = link_to region, region: region.id,
+        start_date: params[:start_date],
+        year: params[:year],
+        tag: params[:tag]

config/locales/fr.yml

@@ -116,7 +116,6 @@ fr:
   events:
     index:
       calendar_in: Ce calendrier en %{rss}, %{webcal} ou %{ical}
-      all_regions: Toutes les régions
       nb_events: "%{count} événements"
     show:
       lug-list: Asso de la région
@@ -167,6 +166,8 @@ fr:
     destroy:
       ok: Votre événément a bien été annulé
   regions:
+    selector:
+      all_regions: Toutes les régions
     index:
       title: Liste des flux
       quick: Chaque flux liste les évènements pour les 30 prochains jours en